:root{
    --bg:#f6f7fb; --card:#fff; --ink:#0f172a; --muted:#6b7280; --ring:#e5e7eb;
    --shadow:0 10px 30px rgba(0,0,0,.08); --radius:16px; --primary:#0ea5e9;
    --success:#10b981; --warn:#f59e0b; --danger:#ef4444; --ready:#22c55e;
    --paid:#8b5cf6; --delivered:#06b6d4;
  }
  *{box-sizing:border-box}
  html,body{height:100%}
  body{
    font-family: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial;
    background:
      radial-gradient(1200px 400px at 80% -100px, #c7d2fe33 0%, transparent 60%),
      radial-gradient(1000px 500px at 0% -80px, #93c5fd33 0%, transparent 60%),
      linear-gradient(180deg, var(--bg), #fff 40%);
    color:var(--ink); margin:0;
  }
  .wrap{max-width:1300px;margin:18px auto;padding:0 14px}
  .topbar{
    display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;
    background:linear-gradient(180deg,#ffffffcc,#ffffff); border:1px solid var(--ring);
    border-radius:var(--radius); padding:12px 14px; box-shadow:var(--shadow);
  }
  .brand{display:flex;align-items:center;gap:10px}
  .logo{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;
        background:conic-gradient(from 180deg at 50% 50%, #fff, #dbeafe, #fff);
        border:1px solid var(--ring);}
  h1{margin:0;font-size:22px}
  .sub{color:var(--muted);font-size:12px}
  .controls{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
  .btn{
    border:1px solid var(--ring); padding:10px 14px; border-radius:12px; cursor:pointer; font-weight:700;
    background:#fff; color:var(--ink); box-shadow:var(--shadow);
    transition: transform .04s ease, filter .15s ease;
  }
  .btn:hover{filter:brightness(1.02)}
  .btn:active{transform:translateY(1px)}
  .btn.primary{background:var(--primary);color:#fff;border-color:transparent}
  .btn.success{background:var(--success);color:#fff;border-color:transparent}
  .btn.danger{background:#fee2e2;border-color:#fecaca;color:#991b1b}
  .btn.ghost{background:#fff;border-color:var(--ring)}
  select{
    border:1px solid var(--ring); border-radius:12px; padding:10px 12px; background:#fff; box-shadow:var(--shadow);
  }
  #soundToggle{background:#6b7280;color:#fff;border:none}
  #soundToggle.on{background:#10b981}
  #stopAlarm{display:none}

  .cols{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;margin-top:14px;}
  @media(max-width:1400px){.cols{grid-template-columns:repeat(4,1fr)}}
  @media(max-width:1200px){.cols{grid-template-columns:repeat(3,1fr)}}
  @media(max-width:900px){.cols{grid-template-columns:repeat(2,1fr)}}
  @media(max-width:680px){.cols{grid-template-columns:1fr}}

  .col{background:#fff;border:1px solid var(--ring);border-radius:var(--radius);padding:12px;box-shadow:var(--shadow);min-height:140px}
  .col-title{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:4px 0 10px;font-size:18px;font-weight:900}
  .col-title .badge{background:#f1f5f9;color:#0f172a;border-radius:999px;padding:4px 10px;font-size:12px;border:1px solid var(--ring);min-width:36px;text-align:center}
  .status-new .dot{background:var(--primary)}
  .status-preparing .dot{background:var(--warn)}
  .status-ready .dot{background:var(--ready)}
  .status-delivered .dot{background:var(--delivered)}
  .status-paid .dot{background:var(--paid)}
  .dot{width:10px;height:10px;border-radius:999px;display:inline-block;margin-inline-start:6px}

  .order{border:1px solid var(--ring);border-radius:14px;padding:10px;margin-bottom:10px;background:var(--card);
         box-shadow:0 6px 18px rgba(15,23,42,.06);transition:transform .06s ease, box-shadow .15s ease}
  .order:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(15,23,42,.1)}
  .order .head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px}
  .order .who{font-weight:900;font-size:16px;line-height:1.3}
  .order .meta{font-size:12px;color:var(--muted)}
  .order .items{margin-top:6px;color:#0b1220}
  .order .items div{padding:4px 0;border-bottom:1px dashed #eef2f7}
  .order .actions{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
  .order .actions .btn{padding:8px 10px;border-radius:10px}

  .note{margin-top:6px;padding:8px 10px;border-radius:10px;font-size:13px;line-height:1.4;border:1px dashed #d6dbe3;background:#f8fafc;color:#0f172a}
  .order-note{border-color:#93c5fd;background:#eff6ff}
  .item-note{border-color:#fde68a;background:#fefce8}

  .toast{position:fixed;inset-inline-end:16px;inset-block-end:16px;background:var(--success);color:#fff;
         padding:12px 14px;border-radius:14px;box-shadow:var(--shadow);display:none;z-index:9999;font-weight:900;min-width:200px;text-align:center}
  :is(button,select):focus-visible{outline:none;box-shadow:0 0 0 4px rgba(14,165,233,.25)}
  .btn.deliver{background:var(--delivered);color:#fff;border-color:transparent}

  .summary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:12px}
  .summary .card{background:#fff;border:1px solid var(--ring);border-radius:14px;padding:12px;box-shadow:var(--shadow);
                 display:flex;align-items:center;justify-content:space-between}
  .summary .title{font-weight:900;color:var(--ink)}
  .summary .right{text-align:end}
  .summary .amt{font-size:20px;font-weight:900}
  .summary .sub{font-size:12px;color:var(--muted)}
  .summary .paid .amt{color:var(--paid)}
  .summary .deliv .amt{color:var(--delivered)}



  .clock {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-inline-start: auto; /* דוחף לקצה השמאלי ב-RTL */
    padding-inline: 12px;
    text-align: end; /* מספרים מיושרים יפה ב-RTL */
    line-height: 1.1;
  }
  
  .clock .time {
    font-size: 2.4rem;   /* שעון גדול */
    font-weight: 800;
    letter-spacing: 0.5px;
  }
  
  .clock .date {
    font-size: 1rem;
    opacity: 0.8;
  }
  
  /* רספונסיביות לניידים */
  @media (max-width: 720px) {
    .clock .time { font-size: 1.8rem; }
    .clock .date { font-size: 0.9rem; }
  }