:root{
    --bg:#1B1F1D;
    --surface:#242A27;
    --surface-2:#2E3532;
    --line:#3A423E;
    --text:#EDEEE9;
    --muted:#8F9891;
    --amber:#FFB020;
    --amber-dim:#402D0C;
    --green:#5BAE7E;
    --green-dim:#1D3226;
    --red:#E2604F;
    --radius:10px;
    --app-max:520px;
  }
  *{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
  html,body{height:100%;}
  body{
    margin:0;
    background:var(--bg);
    color:var(--text);
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    padding-top:env(safe-area-inset-top);
    padding-bottom:env(safe-area-inset-bottom);
    overscroll-behavior-y:none;
  }
  /* On tablets/desktop, frame the app as a centered column against a
     darker backdrop instead of letting it stretch edge-to-edge across
     a wide viewport. Nothing about the mobile layout below changes. */
  @media (min-width:640px){
    body{ background:#101312; }
    #app{
      border-left:1px solid var(--line);
      border-right:1px solid var(--line);
      box-shadow:0 0 70px rgba(0,0,0,0.45);
      background:var(--bg);
    }
  }
  h1,h2,h3{margin:0; font-weight:800; letter-spacing:0.02em;}
  .eyebrow{
    text-transform:uppercase;
    letter-spacing:0.14em;
    font-size:11px;
    font-weight:700;
    color:var(--muted);
  }
  button{font-family:inherit;}
  #app{max-width:var(--app-max); margin:0 auto; min-height:100%; display:flex; flex-direction:column;}

  /* ---- sticky top (header + progress bar) ---- */
  .sticky-top{
    position:sticky; top:env(safe-area-inset-top); z-index:50;
    background:var(--bg);
  }
  .sticky-top .progress-wrap{ padding:0 16px; margin:10px 0 8px; transition:margin .2s ease, padding .2s ease; }
  .sticky-top.compact header{ padding:10px 16px 8px; }
  .sticky-top.compact header h1{ font-size:17px; }
  .sticky-top.compact header .eyebrow{ font-size:9px; }
  .sticky-top.compact .icon-btn{ width:34px; height:34px; font-size:15px; }
  .sticky-top.compact .progress-wrap{ margin:6px 0 6px; }
  .sticky-top.compact .progress-label{ display:none; }

  /* ---- header ---- */
  header{
    padding:18px 16px 12px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    border-bottom:1px solid var(--line);
    transition:padding .2s ease;
  }
  header .brand .eyebrow{color:var(--amber); transition:font-size .2s ease;}
  header h1{font-size:22px; text-transform:uppercase; transition:font-size .2s ease;}
  .icon-btn{
    width:40px; height:40px;
    border-radius:8px;
    border:1px solid var(--line);
    background:var(--surface);
    color:var(--text);
    display:flex; align-items:center; justify-content:center;
    font-size:18px;
    transition:width .2s ease, height .2s ease, font-size .2s ease;
  }
  .icon-btn:active{background:var(--surface-2);}

  /* ---- search bar ---- */
  .search-wrap{ position:relative; padding:10px 16px 0; }
  .search-input{
    width:100%;
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:8px;
    padding:10px 36px 10px 12px;
    color:var(--text);
    font-size:14px;
  }
  .search-input::placeholder{ color:var(--muted); }
  .search-clear{
    position:absolute; right:24px; top:50%; transform:translateY(-50%);
    color:var(--muted); font-size:18px; font-weight:700; padding:4px 6px;
  }
  .filter-chips{ display:flex; gap:8px; padding:8px 16px 0; }
  .filter-chip{
    border:1px solid var(--line);
    background:var(--surface);
    color:var(--muted);
    font-size:12.5px; font-weight:700;
    padding:6px 12px;
    border-radius:20px;
  }
  .filter-chip.on{ background:var(--amber-dim); border-color:var(--amber); color:var(--amber); }

  /* ---- store tabs (crate tags) ---- */
  .store-tabs{
    display:flex; gap:10px; overflow-x:auto;
    padding:14px 16px 4px;
    scrollbar-width:none;
  }
  .store-tabs::-webkit-scrollbar{display:none;}
  .tag{
    flex:0 0 auto;
    position:relative;
    padding:9px 16px 9px 26px;
    border-radius:6px;
    background:var(--surface);
    border:1px dashed var(--line);
    color:var(--muted);
    font-weight:700;
    font-size:14px;
    white-space:nowrap;
  }
  .tag::before{
    content:"";
    position:absolute;
    left:10px; top:50%;
    width:6px; height:6px;
    border-radius:50%;
    background:var(--bg);
    border:1px solid var(--line);
    transform:translateY(-50%);
  }
  .tag.active{
    background:var(--amber-dim);
    border:1px solid var(--amber);
    color:var(--amber);
  }
  .tag.active::before{border-color:var(--amber);}

  /* ---- main ---- */
  main{flex:1; padding:6px 16px 100px;}
  .empty{
    margin-top:60px;
    text-align:center;
    color:var(--muted);
    padding:0 20px;
  }
  .empty h3{color:var(--text); font-size:17px; margin-bottom:8px;}
  .empty button{margin-top:16px;}

  .section-label{
    font-size:12px; font-weight:700; letter-spacing:0.1em;
    text-transform:uppercase; color:var(--muted);
    margin:20px 0 8px;
    display:flex; justify-content:space-between; align-items:center;
  }
  .section-label span.count{color:var(--text); background:var(--surface-2); padding:2px 8px; border-radius:20px; font-size:11px;}
  .category-label{
    font-size:11px; font-weight:700; letter-spacing:0.08em;
    text-transform:uppercase; color:var(--amber);
    margin:14px 0 6px;
    display:flex; align-items:center; gap:8px;
    padding:6px 4px;
    border-radius:6px;
  }
  .category-label:active{background:var(--surface);}
  .category-label .cat-name{flex:1; min-width:0;}
  .category-label .cat-count{
    background:var(--surface-2); color:var(--muted);
    padding:2px 8px; border-radius:20px; font-size:10px; font-weight:700;
    letter-spacing:0;
  }
  .category-label .cat-arrow{
    font-size:10px; color:var(--muted);
    transition:transform 0.15s ease;
    display:inline-block;
  }
  .category-label.collapsed .cat-arrow{transform:rotate(-90deg);}
  .category-label:first-of-type{margin-top:6px;}
  .collapse-all{
    display:flex; justify-content:flex-end; padding:2px 0 0;
  }
  .collapse-all button{
    background:none; border:none; color:var(--amber);
    font-size:12px; font-weight:700; padding:6px 4px;
  }

  .item-row{
    display:flex;
    align-items:center;
    gap:10px;
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:10px 10px 10px 12px;
    margin-bottom:8px;
  }
  .item-row.picked{
    background:var(--green-dim);
    border-color:#2E4C3C;
  }
  .check{
    width:26px; height:26px;
    border-radius:6px;
    border:2px solid var(--line);
    flex:0 0 auto;
    display:flex; align-items:center; justify-content:center;
    font-size:15px; font-weight:900;
    color:transparent;
  }
  .item-row.picked .check{
    background:var(--green);
    border-color:var(--green);
    color:#0F1B14;
  }
  .item-info{flex:1; min-width:0;}
  .item-name{font-size:15px; font-weight:600; line-height:1.25;}
  .item-row.picked .item-name{color:var(--muted); text-decoration:line-through;}
  .item-unit{font-size:12px; color:var(--muted); margin-top:1px;}
  .qty-controls{display:flex; align-items:center; gap:0; flex:0 0 auto;}
  .qty-btn{
    width:30px; height:30px;
    border-radius:6px;
    border:1px solid var(--line);
    background:var(--surface-2);
    color:var(--text);
    font-size:18px;
    font-weight:700;
    display:flex; align-items:center; justify-content:center;
  }
  .qty-btn:active{background:var(--line);}
  .qty-val{
    width:32px;
    text-align:center;
    font-weight:800;
    font-size:15px;
  }
  .qty-input{
    width:32px;
    text-align:center;
    font-weight:800;
    font-size:15px;
    background:transparent;
    border:none;
    color:var(--text);
    font-family:inherit;
    padding:0;
  }
  .qty-input:focus{outline:none;}
  .qty-input::-webkit-outer-spin-button,
  .qty-input::-webkit-inner-spin-button{-webkit-appearance:none; margin:0;}

  /* ---- floating summary bar ---- */
  .summary-bar{
    position:fixed;
    bottom:0; left:0; right:0;
    max-width:var(--app-max);
    margin:0 auto;
    padding:12px 16px calc(12px + env(safe-area-inset-bottom));
    background:var(--surface);
    border-top:1px solid var(--line);
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
  }
  .summary-bar .stat{font-size:13px; color:var(--muted); flex:0 0 auto;}
  .summary-bar .stat b{color:var(--text); font-size:15px;}
  .summary-bar .actions{display:flex; gap:6px;}
  .summary-bar .btn{padding:10px 10px; font-size:12.5px; white-space:nowrap;}
  /* ---- progress bar ---- */
  .progress-wrap{ margin:16px 0 2px; }
  .progress-label{ display:flex; justify-content:space-between; align-items:baseline; font-size:12.5px; color:var(--muted); margin-bottom:6px; }
  .progress-label b{ color:var(--text); }
  .progress-pct{ font-weight:800; color:var(--text); }
  .progress-pct.done{ color:var(--green); }
  .progress-track{ height:8px; border-radius:4px; background:var(--surface-2); overflow:hidden; }
  .progress-fill{ height:100%; background:var(--amber); border-radius:4px; transition:width .25s ease; }
  .progress-fill.done{ background:var(--green); }
  /* ---- history ---- */
  .history-row{
    background:var(--surface); border:1px solid var(--line); border-radius:8px;
    padding:10px 12px; margin-bottom:6px;
    display:flex; justify-content:space-between; align-items:center; gap:10px;
  }
  .history-row .h-main{ font-size:14px; font-weight:700; }
  .history-row .h-meta{ font-size:12px; color:var(--muted); margin-top:2px; }
  .history-row .h-pct{ font-size:13px; font-weight:800; color:var(--green); flex:0 0 auto; }
  /* ---- barcode scanner ---- */
  .scan-overlay{
    position:fixed; inset:0; background:#000; z-index:500;
    display:flex; flex-direction:column;
  }
  .scan-overlay #scan-video-box{ flex:1; position:relative; overflow:hidden; }
  .scan-overlay #scan-video-box video{ width:100%; height:100%; object-fit:cover; }
  #scan-reader{ width:100%; height:100%; }
  #scan-reader video{ width:100% !important; height:100% !important; object-fit:cover; }
  .scan-top{
    position:fixed; top:0; left:0; right:0;
    /* The scanning library draws its own overlay on top of the video
       with a z-index we don't control — this pins the close button
       above absolutely everything, on its own layer, guaranteed. */
    z-index:2147483647;
    padding-top:calc(14px + env(safe-area-inset-top));
    padding-left:16px; padding-right:16px; padding-bottom:14px;
    display:flex; justify-content:flex-end; align-items:center;
    background:linear-gradient(rgba(0,0,0,0.55), transparent);
    pointer-events:none;
  }
  .scan-top .close-btn{
    pointer-events:auto;
    width:44px; height:44px; border-radius:10px;
    background:rgba(0,0,0,0.6); color:#fff; border:1px solid rgba(255,255,255,0.35); font-size:20px; font-weight:800;
  }
  .scan-hint{
    color:#fff; text-align:center; font-size:13px;
    padding:14px 16px calc(14px + env(safe-area-inset-bottom));
    background:#000;
  }
  .scan-hint.err{ color:var(--red); }
  .btn{
    border:none;
    border-radius:8px;
    padding:11px 16px;
    font-weight:700;
    font-size:14px;
  }
  .btn-primary{background:var(--amber); color:#241A05;}
  .btn-ghost{background:transparent; color:var(--muted); border:1px solid var(--line);}
  .btn-danger{background:transparent; color:var(--red); border:1px solid #5A2E28;}
  .btn:active{opacity:0.75;}
  .btn-block{width:100%;}

  /* ---- manage view ---- */
  .manage-section{margin-bottom:28px;}
  .manage-section h2{font-size:14px; text-transform:uppercase; letter-spacing:0.08em; color:var(--amber); margin-bottom:10px;}
  .field{
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:8px;
    padding:11px 12px;
    color:var(--text);
    font-size:15px;
    width:100%;
    margin-bottom:8px;
  }
  .field::placeholder{color:var(--muted);}
  .select-field{
    -webkit-appearance:none;
    appearance:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%238F9891' stroke-width='2' fill='none' fill-rule='evenodd'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:right 12px center;
    padding-right:34px;
  }
  .select-field option, .select-field optgroup{background:var(--surface-2); color:var(--text);}
  .row{display:flex; gap:8px;}
  .row .field{flex:1;}
  .chip-select{display:flex; flex-wrap:wrap; gap:8px; margin:8px 0;}
  .chip{
    padding:7px 12px;
    border-radius:20px;
    border:1px solid var(--line);
    background:var(--surface);
    color:var(--muted);
    font-size:13px;
    font-weight:600;
  }
  .chip.on{background:var(--amber-dim); border-color:var(--amber); color:var(--amber);}
  .chip.shop-chip.on{background:var(--green-dim); border-color:var(--green); color:var(--green);}
  .list-row{
    display:flex; align-items:center; justify-content:space-between;
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:8px;
    padding:10px 12px;
    margin-bottom:6px;
  }
  .list-row .meta{font-size:12px; color:var(--muted); margin-top:2px;}
  .list-row .right{display:flex; flex-direction:column; align-items:flex-end; gap:6px; flex:0 0 auto;}
  .list-row .right .qty-controls{gap:0;}
  .del{color:var(--red); font-size:13px; font-weight:700; padding:6px 8px;}
  .hint{font-size:12px; color:var(--muted); margin-top:-2px; margin-bottom:10px; line-height:1.4;}
  .back-row{
    padding:14px 16px 10px; display:flex; align-items:center; justify-content:space-between; gap:10px;
    position:sticky; top:env(safe-area-inset-top); z-index:50;
    background:var(--bg);
    border-bottom:1px solid var(--line);
  }
  .back-row .logo-mark{ width:26px; height:26px; flex:0 0 auto; }
  .back-btn{color:var(--amber); font-weight:700; font-size:14px; display:flex; align-items:center; gap:4px;}
  /* ---- in-app dialogs (native alert/confirm are unreliable in iOS PWAs) ---- */
  .modal-backdrop{
    position:fixed; inset:0;
    background:rgba(0,0,0,0.6);
    display:flex; align-items:center; justify-content:center;
    padding:24px;
    z-index:100;
  }
  .modal{
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:12px;
    padding:18px 16px 14px;
    max-width:340px; width:100%;
  }
  .modal .msg{font-size:15px; line-height:1.45; margin-bottom:16px;}
  .modal .modal-actions{display:flex; gap:8px;}
  .modal .modal-actions .btn{flex:1;}
  .modal .modal-actions.stacked{flex-direction:column; align-items:stretch;}
  .modal .modal-actions.stacked .btn{flex:none; width:100%;}
  .toast{
    position:fixed;
    left:0; right:0; bottom:90px;
    margin:0 auto;
    background:var(--surface-2);
    border:1px solid var(--line);
    color:var(--text);
    padding:12px 16px;
    border-radius:10px;
    font-size:14px;
    line-height:1.4;
    max-width:min(340px, calc(var(--app-max) - 32px));
    width:calc(100% - 32px);
    z-index:120;
    box-shadow:0 6px 20px rgba(0,0,0,0.4);
  }
  .toast-undo{
    display:flex; align-items:center; justify-content:space-between; gap:12px;
  }
  .toast-undo button{
    background:none; border:none; color:var(--amber);
    font-weight:800; font-size:14px; padding:2px 4px; flex:0 0 auto;
  }
  /* ---- product name suggestions ---- */
  .suggest-wrap{position:relative;}
  .suggest-list{
    position:absolute;
    left:0; right:0; top:100%;
    margin-top:-4px;
    background:var(--surface-2);
    border:1px solid var(--line);
    border-radius:8px;
    max-height:260px;
    overflow-y:auto;
    z-index:60;
    box-shadow:0 8px 22px rgba(0,0,0,0.45);
  }
  .suggest-item{
    padding:11px 12px;
    border-bottom:1px solid var(--line);
    font-size:15px;
    display:flex; align-items:center; justify-content:space-between; gap:10px;
  }
  .suggest-item:last-child{border-bottom:none;}
  .suggest-item:active{background:var(--line);}
  .suggest-item .s-name{flex:1; min-width:0;}
  .suggest-item .s-cat{
    font-size:11px; color:var(--muted);
    white-space:nowrap; flex:0 0 auto;
    text-transform:uppercase; letter-spacing:0.05em;
  }
  .suggest-item .s-own{color:var(--amber);}
  /* ---- shops ---- */
  .tabs-label{
    font-size:10px; font-weight:700; letter-spacing:0.14em;
    text-transform:uppercase; color:var(--muted);
    padding:12px 16px 0;
  }
  .tag.shop-tag.active{
    background:var(--green-dim);
    border-color:var(--green);
    color:var(--green);
  }
  .tag.shop-tag.active::before{border-color:var(--green);}
  .shop-header{
    display:flex; align-items:center; justify-content:space-between;
    background:var(--surface-2);
    border-left:3px solid var(--green);
    border-radius:6px;
    padding:8px 12px;
    margin:18px 0 8px;
    font-size:14px; font-weight:800;
    letter-spacing:0.04em;
  }
  .shop-header .count{
    background:var(--bg); color:var(--muted);
    padding:2px 8px; border-radius:20px; font-size:11px; font-weight:700;
  }
  .item-shop{
    font-size:11px; color:var(--green); font-weight:700;
    margin-top:2px; letter-spacing:0.04em;
  }
  .item-shop.linked{color:#7FA9D6;}
  .tag.shop-tag.linked.active{
    background:#1C2A38; border-color:#7FA9D6; color:#9CC2E8;
  }
  .tag.shop-tag.linked.active::before{border-color:#7FA9D6;}
  .req-row{
    display:flex; align-items:center; justify-content:space-between; gap:8px;
    background:var(--surface); border:1px solid var(--line);
    border-radius:8px; padding:10px 12px; margin-bottom:6px;
  }
  .req-row .btn{padding:7px 12px; font-size:13px;}
  .req-actions{display:flex; gap:6px; flex:0 0 auto;}
  .row-actions{display:flex; align-items:center; gap:4px; flex:0 0 auto;}
  .row-actions .btn{padding:7px 10px; font-size:13px;}
  .code-box{
    background:var(--amber-dim);
    border:1px solid var(--amber);
    color:var(--amber);
    border-radius:10px;
    padding:14px;
    text-align:center;
    font-size:26px;
    font-weight:800;
    letter-spacing:0.18em;
    margin-bottom:10px;
    font-variant-numeric:tabular-nums;
  }
  .badge{
    background:var(--amber); color:#241A05;
    border-radius:20px; padding:1px 7px;
    font-size:11px; font-weight:800; margin-left:6px;
  }
  /* ---- page tabs ---- */
  .page-tabs{
    display:flex; gap:8px;
    padding:8px 16px 4px;
  }
  .page-tab{
    flex:1;
    padding:11px 8px;
    border-radius:8px;
    border:1px solid var(--line);
    background:var(--surface);
    color:var(--muted);
    font-size:14px; font-weight:700;
  }
  .page-tab.on{
    background:var(--amber-dim);
    border-color:var(--amber);
    color:var(--amber);
  }
  .swipe-hint{
    text-align:center;
    font-size:11px;
    color:var(--muted);
    padding:2px 16px 0;
    letter-spacing:0.04em;
  }
  /* ---- auth screen ---- */
  .auth-wrap{
    max-width:420px; margin:0 auto;
    padding:60px 20px 24px;
  }
  .auth-brand{ text-align:center; margin-bottom:28px; }
  .auth-brand .logo-mark{ width:64px; height:64px; margin:0 auto 10px; display:block; }
  header .brand{display:flex; flex-direction:row; align-items:center; gap:10px;}
  header .logo-mark{ width:34px; height:34px; flex:0 0 auto; transition:width .2s ease, height .2s ease; }
  header .brand-text{display:flex; flex-direction:column; gap:2px;}
  .sticky-top.compact header .logo-mark{ width:26px; height:26px; }
  .auth-tabs{
    display:flex; gap:8px;
    padding:0 0 14px;
  }
  .auth-tabs .page-tab{ padding:12px 8px; }
  .otp-inputs{ display:flex; gap:8px; justify-content:center; margin:14px 0; }
  .otp-digit{
    width:44px; height:54px;
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:8px;
    color:var(--text);
    font-size:22px;
    font-weight:800;
    text-align:center;
  }
  .otp-digit:focus{ border-color:var(--amber); outline:none; }

  /* ---- loading / transition polish ----
     Deliberately NOT applied to the main order screen — that view
     re-renders on every single tick/qty tap, and animating a fade on
     every rapid tap would make the core picking workflow feel laggy
     instead of polished. Only applied to less-frequently-redrawn
     screens (settings, admin, auth) and one-off transient elements
     (toasts, modals, the initial boot splash). */
  @keyframes pw-fade-in{ from{opacity:0;} to{opacity:1;} }
  @keyframes pw-slide-up-fade{ from{opacity:0; transform:translate(-50%, 10px);} to{opacity:1; transform:translate(-50%,0);} }
  @keyframes pw-modal-pop{ from{opacity:0; transform:scale(0.96);} to{opacity:1; transform:scale(1);} }
  @keyframes pw-spin{ to{ transform:rotate(360deg); } }
  @keyframes pw-pulse{ 0%,100%{opacity:1;} 50%{opacity:0.35;} }

  .page-fade{ animation: pw-fade-in 0.18s ease; }
  .toast{ animation: pw-slide-up-fade 0.22s ease; }
  .modal-backdrop{ animation: pw-fade-in 0.15s ease; }
  .modal{ animation: pw-modal-pop 0.18s ease; }

  .sync-dot{
    display:inline-block; width:6px; height:6px; border-radius:50%;
    background:currentColor; margin-right:5px;
    animation:pw-pulse 1.1s ease-in-out infinite;
  }

  #boot-splash{
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:16px; min-height:100vh; padding:24px;
  }
  #boot-splash .logo-mark{ width:56px; height:56px; }
  #boot-splash .boot-label{
    color:var(--muted); font-size:12px; letter-spacing:0.14em; text-transform:uppercase; font-weight:700;
  }
  #boot-splash .spinner{
    width:22px; height:22px; border-radius:50%;
    border:3px solid var(--line); border-top-color:var(--amber);
    animation:pw-spin 0.8s linear infinite;
  }
  #app.pw-ready{ animation: pw-fade-in 0.25s ease; }