:root{
    --bg:#F3ECDC;
    --surface:#FFFCF5;
    --surface-raised:#FFFFFF;
    --ink:#271A14;
    --ink-soft:#6E5C4E;
    --ink-faint:#9C8A78;
    --wine:#7A1F31;
    --wine-ink:#FFF7EE;
    --brass:#A87A24;
    --brass-soft:#EFDDB1;
    --line:#DECBA6;
    --line-strong:#C9AE7C;
    --state-new:#B4631A;
    --state-new-bg:#F6E2C9;
    --state-prep:#2E6788;
    --state-prep-bg:#DCE9EF;
    --state-ready:#2E7A4C;
    --state-ready-bg:#DCEEE1;
    --danger:#A5312A;
    --danger-bg:#F6DEDB;
    --shadow: 0 10px 30px -12px rgba(39,26,20,.35);
    color-scheme: light;
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --bg:#181009;
      --surface:#231810;
      --surface-raised:#2B1E15;
      --ink:#F3E7D4;
      --ink-soft:#C7B39A;
      --ink-faint:#8F7B65;
      --wine:#C1495F;
      --wine-ink:#1A0F0B;
      --brass:#D9AE5C;
      --brass-soft:#3D2E18;
      --line:#3B2C1D;
      --line-strong:#4F3B24;
      --state-new:#E39A55;
      --state-new-bg:#3A2A14;
      --state-prep:#7FB4D6;
      --state-prep-bg:#152833;
      --state-ready:#79C494;
      --state-ready-bg:#122A1C;
      --danger:#E3766E;
      --danger-bg:#3A1815;
      --shadow: 0 10px 34px -12px rgba(0,0,0,.6);
      color-scheme: dark;
    }
  }
  :root[data-theme="dark"]{
    --bg:#181009;
    --surface:#231810;
    --surface-raised:#2B1E15;
    --ink:#F3E7D4;
    --ink-soft:#C7B39A;
    --ink-faint:#8F7B65;
    --wine:#C1495F;
    --wine-ink:#1A0F0B;
    --brass:#D9AE5C;
    --brass-soft:#3D2E18;
    --line:#3B2C1D;
    --line-strong:#4F3B24;
    --state-new:#E39A55;
    --state-new-bg:#3A2A14;
    --state-prep:#7FB4D6;
    --state-prep-bg:#152833;
    --state-ready:#79C494;
    --state-ready-bg:#122A1C;
    --danger:#E3766E;
    --danger-bg:#3A1815;
    --shadow: 0 10px 34px -12px rgba(0,0,0,.6);
    color-scheme: dark;
  }

  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{
    background:var(--bg);
    color:var(--ink);
    font-family:"Work Sans", system-ui, sans-serif;
    -webkit-font-smoothing:antialiased;
    padding-inline:16px;
  }
  h1,h2,h3,.display{
    font-family:"Fraunces", Georgia, serif;
    text-wrap:balance;
  }
  .mono{font-family:"IBM Plex Mono", ui-monospace, monospace; font-variant-numeric:tabular-nums;}
  button{font-family:inherit;}
  button:focus-visible, [tabindex]:focus-visible, input:focus-visible{
    outline:2px solid var(--wine); outline-offset:2px;
  }
  #app{max-width:640px; margin:0 auto; padding-block:18px 120px; position:relative;}

  /* ---------- Header ---------- */
  .topbar{
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    padding-block:6px 14px;
  }
  .topbar-links{display:flex; align-items:center; gap:8px;}
  .brand{display:flex; flex-direction:column; line-height:1.1;}
  .brand-mark{font-family:"Fraunces", serif; font-weight:700; font-size:1.5rem; letter-spacing:.02em;}
  .brand-sub{font-size:.72rem; color:var(--ink-soft); letter-spacing:.06em; text-transform:uppercase; margin-top:2px;}
  .table-pill{
    font-family:"IBM Plex Mono", monospace; font-size:.8rem; font-weight:600;
    background:var(--wine); color:var(--wine-ink);
    padding:6px 12px; border-radius:100px; white-space:nowrap;
    letter-spacing:.03em;
  }
  .staff-link{
    background:none; border:1px solid var(--line-strong); color:var(--ink-soft);
    font-size:.72rem; padding:6px 10px; border-radius:100px; cursor:pointer;
    letter-spacing:.02em;
  }
  .staff-link:hover{color:var(--ink); border-color:var(--ink-soft);}

  /* ---------- Table picker ---------- */
  .table-picker{
    background:var(--surface); border:1px solid var(--line); border-radius:18px;
    padding:22px; margin-block-end:16px; box-shadow:var(--shadow);
  }
  .table-picker h2{margin:0 0 4px; font-size:1.3rem;}
  .table-picker p{margin:0 0 16px; color:var(--ink-soft); font-size:.9rem; line-height:1.5;}
  .table-grid{display:grid; grid-template-columns:repeat(6,1fr); gap:8px;}
  .table-btn{
    aspect-ratio:1; border-radius:10px; border:1px solid var(--line-strong);
    background:var(--surface-raised); color:var(--ink); font-family:"IBM Plex Mono",monospace;
    font-size:.95rem; font-weight:600; cursor:pointer;
  }
  .table-btn:hover{border-color:var(--wine); color:var(--wine);}
  .demo-note{
    margin-top:16px; padding-top:14px; border-top:1px dashed var(--line-strong);
    font-size:.74rem; color:var(--ink-faint); line-height:1.5;
  }

  /* ---------- Category nav ---------- */
  .cat-nav{
    display:flex; gap:8px; overflow-x:auto; padding-block:4px 14px;
    position:sticky; top:0; background:var(--bg); z-index:5;
    scrollbar-width:none;
  }
  .cat-nav::-webkit-scrollbar{display:none;}
  .cat-chip{
    flex:0 0 auto; padding:7px 14px; border-radius:100px; border:1px solid var(--line-strong);
    background:var(--surface); color:var(--ink-soft); font-size:.8rem; font-weight:600;
    cursor:pointer; white-space:nowrap; letter-spacing:.01em;
  }
  .cat-chip.active{background:var(--wine); border-color:var(--wine); color:var(--wine-ink);}

  /* ---------- Menu ---------- */
  .cat-section{margin-block-end:8px;}
  .cat-title{
    display:flex; align-items:baseline; gap:10px; margin:22px 0 10px;
    color:var(--ink-soft); font-size:.78rem; text-transform:uppercase; letter-spacing:.1em;
  }
  .cat-title::after{content:""; flex:1; height:1px; background:var(--line-strong);}

  .ticket{
    position:relative; display:flex; align-items:center; gap:12px;
    background:var(--surface); border:1px solid var(--line); border-radius:14px;
    padding:12px 14px; margin-block-end:10px;
    background-image:
      radial-gradient(circle at 0 50%, var(--bg) 6px, transparent 6.5px),
      radial-gradient(circle at 100% 50%, var(--bg) 6px, transparent 6.5px);
    background-repeat:no-repeat;
    background-position:left center, right center;
  }
  .ticket-icon{
    width:42px; height:42px; border-radius:50%; background:var(--brass-soft);
    display:flex; align-items:center; justify-content:center; font-size:1.35rem; flex:none;
  }
  .ticket-body{flex:1; min-width:0;}
  .ticket-name-row{display:flex; align-items:center; gap:7px; flex-wrap:wrap;}
  .ticket-name{font-weight:600; font-size:.95rem;}
  .badge{
    font-size:.62rem; font-weight:700; letter-spacing:.06em; padding:2px 7px;
    border-radius:100px; text-transform:uppercase; flex:none;
  }
  .badge-top{background:var(--brass); color:var(--surface-raised);}
  .badge-hh{background:var(--state-new-bg); color:var(--state-new);}
  .ticket-price{
    font-family:"IBM Plex Mono",monospace; font-size:.85rem; color:var(--ink-soft); margin-top:2px;
  }
  .stepper{display:flex; align-items:center; gap:8px; flex:none;}
  .step-btn{
    width:30px; height:30px; border-radius:50%; border:1px solid var(--line-strong);
    background:var(--surface-raised); font-size:1rem; line-height:1; cursor:pointer; color:var(--ink);
  }
  .step-btn:hover{border-color:var(--wine); color:var(--wine);}
  .step-qty{width:1.3em; text-align:center; font-family:"IBM Plex Mono",monospace; font-weight:600;}
  .add-btn{
    border:1px solid var(--wine); color:var(--wine); background:none; border-radius:100px;
    padding:6px 14px; font-size:.78rem; font-weight:600; cursor:pointer; flex:none;
  }
  .add-btn:hover{background:var(--wine); color:var(--wine-ink);}

  /* ---------- Cart bar ---------- */
  .cart-bar{
    position:fixed; left:16px; right:16px; bottom:16px; max-width:608px; margin-inline:auto;
    background:var(--wine); color:var(--wine-ink); border-radius:16px; padding:14px 18px;
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    box-shadow:var(--shadow); cursor:pointer; z-index:20;
    transform:translateY(140%); transition:transform .25s ease;
  }
  .cart-bar.visible{transform:translateY(0);}
  .cart-bar-left{display:flex; flex-direction:column; gap:1px;}
  .cart-bar-count{font-size:.7rem; letter-spacing:.06em; text-transform:uppercase; opacity:.85;}
  .cart-bar-total{font-family:"IBM Plex Mono",monospace; font-weight:700; font-size:1.05rem;}
  .cart-bar-cta{
    background:var(--wine-ink); color:var(--wine); border:none; border-radius:100px;
    padding:9px 16px; font-weight:700; font-size:.85rem; cursor:pointer;
  }

  /* ---------- Overlays (cart / checkout / result) ---------- */
  .overlay{
    position:fixed; inset:0; background:rgba(20,13,9,.55); display:flex; align-items:flex-end;
    justify-content:center; z-index:50; opacity:0; pointer-events:none; transition:opacity .2s ease;
  }
  .overlay.open{opacity:1; pointer-events:auto;}
  .sheet{
    background:var(--surface); width:100%; max-width:640px; border-radius:20px 20px 0 0;
    padding:22px 20px 26px; max-height:88vh; overflow-y:auto;
    transform:translateY(24px); transition:transform .25s ease;
    box-shadow:var(--shadow);
  }
  .overlay.open .sheet{transform:translateY(0);}
  .sheet-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:14px;}
  .sheet-head h2{margin:0; font-size:1.2rem;}
  .close-btn{
    background:none; border:none; font-size:1.3rem; color:var(--ink-soft); cursor:pointer; line-height:1;
    width:32px; height:32px;
  }

  .receipt-row{
    display:flex; align-items:baseline; gap:8px; padding-block:8px;
    border-bottom:1px dashed var(--line-strong); font-size:.88rem;
  }
  .receipt-row .rn{flex:1; min-width:0;}
  .receipt-row .rq{color:var(--ink-faint); font-family:"IBM Plex Mono",monospace; font-size:.8rem;}
  .receipt-row .rp{font-family:"IBM Plex Mono",monospace; font-weight:600;}
  .receipt-row .rm{background:none; border:none; color:var(--ink-faint); font-size:.9rem; cursor:pointer;}
  .receipt-total{
    display:flex; justify-content:space-between; align-items:baseline; margin-top:14px; padding-top:14px;
    border-top:2px solid var(--ink); font-family:"Fraunces",serif; font-size:1.25rem; font-weight:700;
  }
  .empty-cart{color:var(--ink-soft); font-size:.9rem; padding-block:20px; text-align:center;}

  .primary-btn{
    width:100%; background:var(--wine); color:var(--wine-ink); border:none; border-radius:100px;
    padding:14px; font-size:.95rem; font-weight:700; cursor:pointer; margin-top:16px;
  }
  .primary-btn:disabled{opacity:.5; cursor:not-allowed;}
  .secondary-btn{
    width:100%; background:none; color:var(--ink-soft); border:1px solid var(--line-strong);
    border-radius:100px; padding:12px; font-size:.85rem; font-weight:600; cursor:pointer; margin-top:8px;
  }

  .pay-options{display:flex; flex-direction:column; gap:10px; margin-block:14px;}
  .pay-option{
    display:flex; align-items:center; gap:12px; border:1.5px solid var(--line-strong);
    border-radius:12px; padding:12px 14px; cursor:pointer;
  }
  .pay-option.selected{border-color:var(--wine); background:var(--brass-soft);}
  .pay-option input{accent-color:var(--wine); width:18px; height:18px;}
  .pay-icon{font-size:1.3rem;}
  .pay-label{font-weight:600; font-size:.9rem;}
  .pay-sub{font-size:.72rem; color:var(--ink-soft);}

  .demo-box{
    margin-top:18px; padding:12px 14px; border:1px dashed var(--line-strong); border-radius:12px;
    font-size:.76rem; color:var(--ink-soft); background:var(--bg);
  }
  .demo-box strong{color:var(--ink);}
  .demo-toggle{display:flex; gap:8px; margin-top:8px;}
  .demo-toggle button{
    flex:1; padding:8px; border-radius:8px; border:1px solid var(--line-strong); background:var(--surface-raised);
    color:var(--ink-soft); font-size:.76rem; cursor:pointer;
  }
  .demo-toggle button.on{border-color:var(--wine); color:var(--wine); font-weight:700;}

  .result-icon{font-size:2.6rem; text-align:center; margin-bottom:8px;}
  .result-title{text-align:center; font-size:1.3rem; margin:0 0 6px;}
  .result-sub{text-align:center; color:var(--ink-soft); font-size:.88rem; margin:0 0 4px; line-height:1.5;}
  .order-code{
    text-align:center; font-family:"IBM Plex Mono",monospace; font-size:1.6rem; font-weight:700;
    letter-spacing:.08em; margin-block:14px; color:var(--wine);
  }

  /* ---------- Staff view ---------- */
  .staff-view{padding-block:6px 40px;}
  .staff-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:16px;}
  .staff-head h2{margin:0; font-size:1.3rem;}
  .board{display:flex; flex-direction:column; gap:22px;}
  .col-head{display:flex; align-items:center; gap:8px; margin-bottom:10px;}
  .col-dot{width:9px; height:9px; border-radius:50%;}
  .col-title{font-size:.82rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em;}
  .col-count{
    font-family:"IBM Plex Mono",monospace; font-size:.72rem; color:var(--ink-soft);
    background:var(--surface); border:1px solid var(--line); border-radius:100px; padding:1px 8px;
  }
  .order-card{
    background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:14px;
    margin-bottom:10px; border-left:4px solid var(--ink-faint);
  }
  .order-card.state-nuovo{border-left-color:var(--state-new);}
  .order-card.state-in_carico{border-left-color:var(--state-prep);}
  .order-top{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:8px;}
  .order-table{font-family:"Fraunces",serif; font-weight:700; font-size:1.05rem;}
  .order-time{font-size:.72rem; color:var(--ink-faint); font-family:"IBM Plex Mono",monospace;}
  .order-items{font-size:.82rem; color:var(--ink-soft); line-height:1.6; margin-bottom:10px;}
  .order-items .qi{color:var(--ink); font-weight:600;}
  .order-foot{display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap;}
  .order-total{font-family:"IBM Plex Mono",monospace; font-weight:700; flex:none;}
  .pay-chip{
    font-size:.6rem; font-weight:700; text-transform:uppercase; padding:3px 8px; border-radius:100px;
    background:var(--state-ready-bg); color:var(--state-ready); letter-spacing:.03em; white-space:nowrap; flex:none;
  }
  .advance-btn{
    background:var(--ink); color:var(--bg); border:none; border-radius:100px;
    padding:8px 14px; font-size:.76rem; font-weight:700; cursor:pointer; white-space:nowrap;
    margin-left:auto;
  }
  .empty-col{color:var(--ink-faint); font-size:.8rem; font-style:italic; padding-block:6px;}

  .staff-link{position:relative;}
  .staff-badge{
    position:absolute; top:-6px; right:-6px; background:var(--wine); color:var(--wine-ink);
    font-family:"IBM Plex Mono",monospace; font-size:.62rem; font-weight:700; line-height:1;
    min-width:16px; height:16px; border-radius:100px; display:flex; align-items:center; justify-content:center;
    padding:0 3px;
  }
  .staff-badge[hidden]{display:none;}

  .toast{
    position:sticky; top:0; z-index:8; display:flex; align-items:center; gap:10px;
    background:var(--ink); color:var(--bg); border-radius:12px; padding:11px 14px; margin-bottom:14px;
    font-size:.85rem; font-weight:600; box-shadow:var(--shadow);
    animation: toastIn .25s ease;
  }
  @keyframes toastIn{ from{opacity:0; transform:translateY(-8px);} to{opacity:1; transform:translateY(0);} }
  .toast-bell{font-size:1.05rem;}

  @keyframes pulseRing{
    0%{box-shadow:0 0 0 0 var(--state-new-bg), var(--shadow);}
    70%{box-shadow:0 0 0 10px rgba(0,0,0,0), var(--shadow);}
    100%{box-shadow:0 0 0 0 rgba(0,0,0,0), var(--shadow);}
  }
  .order-card.just-arrived{animation: pulseRing 1.1s ease-out 2;}

  .delivered-wrap{
    margin-top:10px; border:1px solid var(--line); border-radius:14px; background:var(--surface);
    padding:4px 14px;
  }
  .delivered-wrap summary{
    cursor:pointer; padding-block:12px; font-size:.82rem; font-weight:700; color:var(--ink-soft);
    text-transform:uppercase; letter-spacing:.06em; list-style:none; display:flex; align-items:center; gap:8px;
  }
  .delivered-wrap summary::-webkit-details-marker{display:none;}
  .delivered-wrap summary::before{content:"▸"; font-size:.8rem; color:var(--ink-faint); transition:transform .15s ease;}
  .delivered-wrap[open] summary::before{transform:rotate(90deg);}
  .delivered-row{
    display:flex; align-items:baseline; gap:10px; padding-block:9px; border-top:1px dashed var(--line-strong);
    font-size:.82rem; color:var(--ink-soft);
  }
  .delivered-row .dr-table{font-weight:700; color:var(--ink); flex:none;}
  .delivered-row .dr-items{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .delivered-row .dr-total{font-family:"IBM Plex Mono",monospace; flex:none;}
  .delivered-row .dr-time{flex:none; font-family:"IBM Plex Mono",monospace; font-size:.72rem; color:var(--ink-faint);}
  .delivered-empty{padding-block:10px; font-size:.8rem; color:var(--ink-faint); font-style:italic;}

  @media (min-width:560px){
    .table-grid{grid-template-columns:repeat(8,1fr);}
  }
  @media (min-width:720px){
    #app{max-width:960px;}
    .board{display:grid; grid-template-columns:repeat(2,1fr); gap:16px; align-items:start;}
  }

  /* ---------- Admin view (gestione menu) ---------- */
  .admin-view{padding-block:6px 40px;}

  .admin-add-form{
    background:var(--surface); border:1px solid var(--line); border-radius:16px;
    padding:18px; margin-block-end:26px; box-shadow:var(--shadow);
  }
  .admin-add-form h2{margin:0 0 12px; font-size:1.1rem;}
  .admin-add-grid{
    display:grid; grid-template-columns:repeat(2,1fr); gap:10px 12px; margin-bottom:14px;
  }
  .admin-add-grid label{
    display:flex; flex-direction:column; gap:4px; font-size:.72rem; color:var(--ink-soft);
    text-transform:uppercase; letter-spacing:.04em;
  }
  .admin-add-grid input{
    font-family:"Work Sans", sans-serif; font-size:.9rem; color:var(--ink);
    padding:9px 10px; border-radius:9px; border:1px solid var(--line-strong); background:var(--surface-raised);
  }
  .admin-add-btn{margin-top:0;}

  .admin-cat-section{
    margin-block-end:22px; overflow-x:auto; border-radius:14px;
  }
  .admin-row{
    display:grid;
    grid-template-columns: 52px minmax(120px,1.6fr) 90px minmax(84px,110px) 84px 64px 64px;
    align-items:center; gap:8px; padding:8px 6px; border-bottom:1px solid var(--line);
    min-width:640px;
  }
  .admin-row-head{
    font-size:.68rem; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-faint);
    border-bottom:1px solid var(--line-strong); padding-block:0 6px;
  }
  .admin-row-off{opacity:.55;}
  .admin-input{
    font-family:"Work Sans", sans-serif; font-size:.85rem; color:var(--ink);
    padding:7px 8px; border-radius:8px; border:1px solid var(--line-strong); background:var(--surface-raised);
    width:100%; min-width:0;
  }
  .admin-input-icon{text-align:center; font-size:1.05rem; padding-inline:4px;}
  .admin-toggle{
    display:flex; align-items:center; gap:5px; font-size:.72rem; color:var(--ink-soft); white-space:nowrap;
  }
  .admin-toggle input{accent-color:var(--wine); width:15px; height:15px;}
  .admin-save-btn, .admin-del-btn{
    border-radius:100px; padding:7px 10px; font-size:.72rem; font-weight:700; cursor:pointer; white-space:nowrap;
    border:1px solid var(--line-strong); background:none;
  }
  .admin-save-btn{color:var(--wine); border-color:var(--wine);}
  .admin-save-btn:hover{background:var(--wine); color:var(--wine-ink);}
  .admin-del-btn{color:var(--danger); border-color:var(--danger);}
  .admin-del-btn:hover{background:var(--danger-bg);}

  @media (min-width:560px){
    .admin-add-grid{grid-template-columns:repeat(3,1fr);}
  }
  @media (min-width:720px){
    .admin-add-grid{grid-template-columns:repeat(5,1fr);}
  }