/* ============================================================
     CJ SNACK STOP — POS mockup
     Theme lifted from "The CJ's Club Snack Stop" menu poster:
     sky-blue stripes, cream cloud panels, lilac/peach/gold blocks,
     bubbly outlined headings, kawaii cloud + star doodles.
     ============================================================ */

  :root{
    --sky:        #B9E4F2;
    --sky-2:      #E4F6FC;
    --cream:      #FBF1DC;
    --cream-deep: #F1E0B8;
    --ink:        #3B2A1A;
    --ink-soft:   #6B5A45;

    --grape:      #CDB9EC;
    --grape-deep: #7E5BC4;
    --peach:      #F6C591;
    --peach-deep: #D9791F;
    --gold:       #FCCB53;
    --gold-deep:  #D99A0E;
    --mint:       #8FDBA4;
    --mint-deep:  #379157;
    --danger:     #F0947F;
    --danger-deep:#C4432C;

    --white:      #FFFFFF;
    --shadow:     rgba(59,42,26,0.18);
  }

  *,*::before,*::after{ box-sizing:border-box; }
  html,body{ height:100%; }
  body{
    margin:0;
    font-family:'Nunito',system-ui,sans-serif;
    color:var(--ink);
    background:
      repeating-linear-gradient(
        90deg,
        var(--sky) 0px, var(--sky) 46px,
        var(--sky-2) 46px, var(--sky-2) 92px
      );
    min-height:100vh;
    -webkit-tap-highlight-color:transparent;
    overflow-x:hidden;
  }
  h1,h2,h3,h4{ font-family:'Baloo 2',system-ui,sans-serif; margin:0; text-wrap:balance; }
  button{ font-family:inherit; }
  input{ font-family:inherit; }
  ::selection{ background:var(--gold); color:var(--ink); }

  button{ cursor:pointer; }
  button:focus-visible, input:focus-visible, [tabindex]:focus-visible{
    outline:3px solid var(--grape-deep);
    outline-offset:2px;
  }

  .tabular{ font-variant-numeric:tabular-nums; }

  /* ---------- decorative sky layer ---------- */
  .decor{ position:fixed; inset:0; pointer-events:none; z-index:0; overflow:hidden; }
  .cloud{ position:absolute; opacity:.8; }
  .cloud svg{ display:block; width:100%; height:100%; }
  .star{ position:absolute; font-size:1.4rem; opacity:.55; filter:drop-shadow(0 1px 0 rgba(255,255,255,.6)); }

  /* ---------- app shell ---------- */
  #app{ position:relative; z-index:1; min-height:100vh; display:flex; flex-direction:column; }

  .view{ display:none; flex:1; flex-direction:column; }
  .view.active{ display:flex; }
  @media (prefers-reduced-motion:no-preference){
    .view.active{ animation:fadeIn .28s ease both; }
  }
  @keyframes fadeIn{ from{opacity:0;} to{opacity:1;} }

  .cloud-panel{
    background:var(--cream);
    border:3px solid var(--ink);
    border-radius:28px;
    box-shadow:0 8px 0 var(--shadow);
  }

  /* ---------- buttons (chunky, tactile) ---------- */
  .btn{
    display:inline-flex; align-items:center; justify-content:center; gap:.5em;
    border:3px solid var(--ink);
    border-radius:18px;
    font-family:'Baloo 2',sans-serif;
    font-weight:700;
    padding:.75em 1.3em;
    background:var(--white);
    color:var(--ink);
    box-shadow:0 5px 0 var(--ink);
    transition:transform .08s ease, box-shadow .08s ease;
    user-select:none;
  }
  .btn:active{ transform:translateY(4px); box-shadow:0 1px 0 var(--ink); }
  .btn:disabled{ opacity:.45; cursor:not-allowed; box-shadow:0 5px 0 var(--ink); transform:none; }
  .btn-mint{ background:var(--mint-deep); color:var(--white); }
  .btn-grape{ background:var(--grape-deep); color:var(--white); }
  .btn-peach{ background:var(--peach-deep); color:var(--white); }
  .btn-danger{ background:var(--danger-deep); color:var(--white); }
  .btn-gold{ background:var(--gold-deep); color:var(--white); }
  .btn-ghost{ background:transparent; box-shadow:none; border-color:var(--ink); }
  .btn-ghost:active{ transform:translateY(2px); }
  .btn-sm{ padding:.45em .85em; font-size:.85rem; border-radius:14px; box-shadow:0 3px 0 var(--ink); }
  .btn-sm:active{ box-shadow:0 1px 0 var(--ink); }
  .btn-icon{ width:2.6em; height:2.6em; padding:0; border-radius:50%; font-size:1rem; }

  .badge{
    display:inline-flex; align-items:center; gap:.35em;
    font-family:'Baloo 2',sans-serif; font-weight:700;
    padding:.25em .75em; border-radius:999px;
    border:2px solid var(--ink);
    background:var(--gold);
    color:var(--ink);
    font-size:.9rem;
  }

  /* ==================================================
     HOME VIEW
     ================================================== */
  #view-home{ align-items:center; padding:clamp(16px,3vw,40px); }
  .home-wrap{ width:100%; max-width:960px; display:flex; flex-direction:column; gap:22px; align-items:center; }

  .brand-banner{
    width:100%;
    padding:22px clamp(18px,4vw,40px) 26px;
    text-align:center;
    position:relative;
  }
  .brand-cloud-badge{
    display:inline-block;
    background:var(--white);
    border:3px solid var(--ink);
    border-radius:40px;
    padding:.35em 1.1em;
    box-shadow:0 5px 0 var(--shadow);
    margin-bottom:6px;
  }
  .brand-title{
    font-size:clamp(1.9rem,5vw,2.9rem);
    line-height:1;
    color:var(--mint-deep);
    -webkit-text-stroke:1.5px var(--ink);
    text-stroke:1.5px var(--ink);
  }
  .brand-title .accent{ color:var(--gold-deep); -webkit-text-stroke:1.5px var(--ink); }
  .brand-tagline{ margin-top:.6em; font-weight:700; color:var(--ink-soft); font-size:1rem; }

  .stat-row{ width:100%; display:grid; grid-template-columns:1fr 1fr; gap:16px; }
  .stat-card{
    padding:18px 20px; display:flex; flex-direction:column; gap:6px;
    background:var(--cream-deep);
  }
  .stat-label{ font-weight:800; letter-spacing:.06em; text-transform:uppercase; font-size:.72rem; color:var(--ink-soft); display:flex; align-items:center; gap:.4em; }
  .stat-value{ font-family:'Baloo 2',sans-serif; font-size:clamp(1.6rem,4vw,2.2rem); }
  .stat-value.gold{ color:var(--gold-deep); }
  .stat-value.mint{ color:var(--mint-deep); }

  .cta-row{ width:100%; display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:18px; }
  .cta-btn{
    flex-direction:column; gap:.3em;
    padding:28px 16px;
    border-radius:26px;
    font-size:clamp(1.15rem,2.6vw,1.5rem);
    box-shadow:0 7px 0 var(--ink);
  }
  .cta-btn:active{ box-shadow:0 2px 0 var(--ink); }
  .cta-btn .cta-emoji{ font-size:2.4rem; line-height:1; }
  .cta-btn .cta-sub{ font-family:'Nunito',sans-serif; font-weight:700; font-size:.72rem; opacity:.9; text-transform:none; letter-spacing:0; }

  .home-footer{ text-align:center; font-weight:800; color:var(--ink-soft); font-size:.85rem; padding-top:4px; }

  @media (max-width:620px){
    .stat-row{ grid-template-columns:1fr; }
  }

  /* ==================================================
     ORDER (New Order) VIEW
     ================================================== */
  #view-order{ padding:0; }
  .order-topbar{
    background:var(--cream);
    border-bottom:3px solid var(--ink);
    padding:10px clamp(12px,2.5vw,28px);
    display:flex; align-items:center; gap:16px; flex-wrap:wrap;
    position:sticky; top:0; z-index:20;
  }
  .order-topbar .ot-id{ font-family:'Baloo 2',sans-serif; font-weight:700; font-size:1.05rem; }
  .order-topbar .ot-clock{ font-weight:800; color:var(--ink-soft); font-size:.9rem; }
  .order-topbar .ot-name{ flex:1; min-width:160px; display:flex; align-items:center; gap:8px; }
  .order-topbar input[type=text]{
    flex:1; min-width:0;
    border:2.5px solid var(--ink); border-radius:14px;
    padding:.5em .8em; font-weight:700; font-size:.95rem;
    background:var(--white); color:var(--ink);
  }
  .order-topbar input[type=text]::placeholder{ color:var(--ink-soft); opacity:.7; }

  .order-body{
    flex:1; display:flex; gap:18px; padding:16px clamp(12px,2.5vw,28px) 24px;
    align-items:flex-start;
  }
  .menu-pane{ flex:1 1 60%; min-width:0; display:flex; flex-direction:column; gap:18px; }

  .menu-section{ overflow:hidden; }
  .menu-section-head{
    display:flex; align-items:center; justify-content:space-between;
    padding:12px 18px; border-bottom:3px solid var(--ink);
    font-family:'Baloo 2',sans-serif;
  }
  .menu-section-head h3{ font-size:1.15rem; display:flex; align-items:center; gap:.4em; }
  .menu-section.cat-drinks .menu-section-head{ background:var(--grape); }
  .menu-section.cat-loklok .menu-section-head{ background:var(--peach); }
  .menu-section.cat-combo  .menu-section-head{ background:var(--gold); }

  .menu-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:12px; padding:14px; }
  .menu-item{
    background:var(--white);
    border:2.5px solid var(--ink);
    border-radius:18px;
    padding:12px;
    display:flex; flex-direction:column; gap:6px;
    text-align:left;
    box-shadow:0 4px 0 var(--shadow);
    transition:transform .08s ease, box-shadow .08s ease;
    min-height:120px;
    position:relative;
  }
  .menu-item:active{ transform:translateY(3px); box-shadow:0 1px 0 var(--shadow); }
  .menu-item .mi-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:8px; }
  .menu-item .mi-emoji{ width:52px; height:52px; object-fit:contain; display:block; filter:drop-shadow(0 2px 2px rgba(59,42,26,.25)); }
  .menu-item .mi-combo-imgs{ display:flex; align-items:center; gap:4px; }
  .menu-item .mi-combo-imgs .mi-emoji{ width:36px; height:36px; }
  .menu-item .mi-combo-plus{ font-family:'Baloo 2',sans-serif; font-weight:800; color:var(--ink-soft); font-size:1rem; }
  .menu-item .mi-name{ font-family:'Baloo 2',sans-serif; font-weight:700; font-size:1rem; line-height:1.15; }
  .menu-item .mi-sub{ font-size:.78rem; color:var(--ink-soft); font-weight:700; line-height:1.25; }
  .menu-item .mi-bottom{ margin-top:auto; display:flex; align-items:center; justify-content:space-between; }
  .menu-item .mi-price{ font-family:'Baloo 2',sans-serif; font-weight:700; color:var(--gold-deep); font-size:1.05rem; }
  .menu-item .mi-add{
    width:34px; height:34px; border-radius:50%;
    border:2.5px solid var(--ink); background:var(--mint-deep); color:var(--white);
    font-weight:800; font-size:1.1rem; display:flex; align-items:center; justify-content:center;
    box-shadow:0 3px 0 var(--ink);
  }
  .menu-item.bump{ animation:bump .22s ease; }
  @keyframes bump{ 0%{transform:scale(1)} 40%{transform:scale(.94)} 100%{transform:scale(1)} }

  /* cart pane */
  .cart-pane{
    flex:0 0 360px; max-width:360px;
    display:flex; flex-direction:column;
    position:sticky; top:70px;
    max-height:calc(100vh - 90px);
  }
  .cart-head{
    padding:14px 18px; border-bottom:3px solid var(--ink);
    display:flex; align-items:center; justify-content:space-between;
    font-family:'Baloo 2',sans-serif; font-size:1.1rem;
  }
  .cart-list{ flex:1; overflow-y:auto; padding:10px 14px; display:flex; flex-direction:column; gap:10px; }
  .cart-empty{ text-align:center; color:var(--ink-soft); font-weight:700; padding:24px 10px; }
  .cart-line{
    display:flex; align-items:center; gap:8px;
    background:var(--white); border:2px solid var(--ink); border-radius:14px; padding:8px 10px;
  }
  .cart-line .cl-emoji{ width:30px; height:30px; object-fit:contain; flex-shrink:0; filter:drop-shadow(0 1px 1px rgba(59,42,26,.2)); }
  .cart-line .cl-info{ flex:1; min-width:0; }
  .cart-line .cl-name{ font-weight:800; font-size:.88rem; line-height:1.2; }
  .cart-line .cl-price{ font-size:.76rem; color:var(--ink-soft); font-weight:700; }
  .qty-stepper{ display:flex; align-items:center; gap:6px; }
  .qty-stepper button{
    width:24px; height:24px; border-radius:50%; border:2px solid var(--ink);
    background:var(--cream-deep); font-weight:800; line-height:1; padding:0;
    display:flex; align-items:center; justify-content:center; font-size:.85rem;
  }
  .qty-stepper .qty-val{ min-width:1.2em; text-align:center; font-weight:800; font-size:.85rem; }
  .cl-remove{ background:none; border:none; color:var(--danger-deep); font-size:1rem; padding:2px; font-weight:800; }

  .cart-foot{ border-top:3px solid var(--ink); padding:14px 18px 18px; display:flex; flex-direction:column; gap:10px; }
  .cart-total-row{ display:flex; align-items:baseline; justify-content:space-between; }
  .cart-total-row .ct-label{ font-family:'Baloo 2',sans-serif; font-weight:700; }
  .cart-total-row .ct-value{ font-family:'Baloo 2',sans-serif; font-weight:800; font-size:1.5rem; color:var(--gold-deep); }
  .confirm-btn{ width:100%; padding:.9em; font-size:1.1rem; border-radius:20px; }

  /* mobile: cart becomes bottom drawer */
  @media (max-width:960px){
    .order-body{ flex-direction:column; padding-bottom:90px; }
    .menu-pane{ flex:1 1 auto; width:100%; }
    .cart-pane{
      position:fixed; top:auto; left:10px; right:10px; bottom:10px; z-index:30;
      max-width:none;
      max-height:60px;
      overflow:hidden;
      transition:max-height .28s ease;
    }
    /* Collapsed height is a fixed 60px so it never depends on the box's own
       (dynamic, content-driven) height -- that dependency was the bug: on
       real mobile browsers the address-bar-aware viewport made a vh-based
       transform under-hide the panel, so it visually overlapped the menu. */
    .cart-pane.expanded{
      max-height:70vh;
      overflow-y:auto;
    }
    @supports (max-height: 70dvh){
      .cart-pane.expanded{ max-height:70dvh; }
    }
    .cart-drawer-handle{
      display:flex; align-items:center; justify-content:space-between;
      padding:12px 18px; cursor:pointer;
      font-family:'Baloo 2',sans-serif; font-weight:700;
      flex-shrink:0;
    }
    .cart-head{ display:none; }
  }
  @media (min-width:961px){
    .cart-drawer-handle{ display:none; }
  }

  /* ==================================================
     HISTORY VIEW
     ================================================== */
  #view-history{ padding:0; }
  .hist-topbar{
    background:var(--cream); border-bottom:3px solid var(--ink);
    padding:12px clamp(12px,2.5vw,28px);
    display:flex; align-items:center; gap:14px; flex-wrap:wrap;
    position:sticky; top:0; z-index:20;
  }
  .hist-topbar h2{ font-size:1.3rem; flex:1; }
  .hist-body{ padding:16px clamp(12px,2.5vw,28px) 100px; flex:1; }
  .hist-empty{ text-align:center; padding:60px 20px; color:var(--ink-soft); font-weight:700; }
  .hist-empty .he-emoji{ font-size:3rem; display:block; margin-bottom:10px; }
  .hist-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); gap:14px; }

  .order-card{
    background:var(--cream-deep); border:2.5px solid var(--ink); border-radius:20px;
    padding:14px 14px 12px; display:flex; flex-direction:column; gap:8px;
    position:relative;
  }
  .oc-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:8px; }
  .oc-select{
    width:26px; height:26px; border-radius:50%; border:2.5px solid var(--ink);
    background:var(--white); display:flex; align-items:center; justify-content:center;
    font-weight:800; flex-shrink:0;
  }
  .oc-select.checked{ background:var(--mint-deep); color:var(--white); }
  .oc-id{ font-family:'Baloo 2',sans-serif; font-weight:700; }
  .oc-time{ font-size:.75rem; color:var(--ink-soft); font-weight:700; }
  .oc-name{ font-family:'Baloo 2',sans-serif; font-size:1.05rem; }
  .oc-items{ font-size:.82rem; color:var(--ink-soft); font-weight:700; line-height:1.4; display:flex; flex-wrap:wrap; align-items:center; gap:3px; }
  .oc-items img{ width:16px; height:16px; object-fit:contain; vertical-align:-3px; }
  .oc-bottom{ display:flex; align-items:center; justify-content:space-between; margin-top:4px; }
  .oc-total{ font-family:'Baloo 2',sans-serif; font-weight:800; color:var(--gold-deep); font-size:1.15rem; }
  .oc-actions{ display:flex; gap:8px; }

  .bulk-bar{
    position:fixed; left:0; right:0; bottom:0; z-index:40;
    background:var(--ink); color:var(--white);
    padding:12px clamp(12px,2.5vw,28px);
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    transform:translateY(100%); transition:transform .25s ease;
    box-shadow:0 -4px 12px rgba(0,0,0,.2);
  }
  .bulk-bar.show{ transform:translateY(0); }
  .bulk-bar .bb-count{ font-family:'Baloo 2',sans-serif; font-weight:700; }

  /* ==================================================
     CONFIRM OVERLAY (celebration)
     ================================================== */
  .confirm-overlay{
    position:fixed; inset:0; z-index:100;
    background:rgba(59,42,26,.55);
    display:flex; align-items:center; justify-content:center;
    padding:20px;
  }
  .confirm-overlay[hidden]{ display:none; }
  .confirm-card{
    background:var(--cream); border:4px solid var(--ink); border-radius:30px;
    padding:34px 30px; text-align:center; max-width:360px;
    box-shadow:0 10px 0 var(--shadow);
    position:relative; overflow:hidden;
  }
  @media (prefers-reduced-motion:no-preference){
    .confirm-card{ animation:popIn .32s cubic-bezier(.34,1.56,.64,1) both; }
  }
  @keyframes popIn{ from{ transform:scale(.7); opacity:0; } to{ transform:scale(1); opacity:1; } }
  .confirm-emoji{ font-size:3.2rem; display:block; margin-bottom:8px; }
  .confirm-msg{ font-family:'Baloo 2',sans-serif; font-size:1.5rem; color:var(--mint-deep); -webkit-text-stroke:1px var(--ink); }
  .confirm-sub{ margin-top:10px; font-weight:700; color:var(--ink-soft); font-size:.9rem; }

  .confetti-piece{
    position:fixed; top:-20px; z-index:99; pointer-events:none;
    border-radius:3px; will-change:transform;
  }
  @media (prefers-reduced-motion:no-preference){
    .confetti-piece{ animation:fall linear forwards; }
  }
  @keyframes fall{
    to{ transform:translateY(105vh) rotate(540deg); opacity:.9; }
  }

  /* ==================================================
     GENERIC MODAL (confirm / discard)
     ================================================== */
  .modal-overlay{
    position:fixed; inset:0; z-index:110;
    background:rgba(59,42,26,.5);
    display:flex; align-items:center; justify-content:center; padding:20px;
  }
  .modal-card{
    background:var(--cream); border:3.5px solid var(--ink); border-radius:24px;
    padding:24px; max-width:340px; text-align:center;
    box-shadow:0 8px 0 var(--shadow);
  }
  .modal-card h3{ font-size:1.2rem; margin-bottom:8px; }
  .modal-card p{ font-weight:700; color:var(--ink-soft); font-size:.9rem; margin:0 0 18px; }
  .modal-actions{ display:flex; gap:10px; justify-content:center; }

  .visually-hidden{
    position:absolute; width:1px; height:1px; overflow:hidden;
    clip:rect(0 0 0 0); white-space:nowrap;
  }

/* ==================================================
   Additions for the ASP.NET Web Forms build
   (each .aspx is its own page now, not a JS-switched view)
   ================================================== */
a:focus-visible{
  outline:3px solid var(--grape-deep);
  outline-offset:2px;
}

/* Home page big buttons render as <a> (LinkButton) for a plain GET nav — keep the same tactile look */
a.btn{ text-decoration:none; }

/* Edit-mode "Save Changes" state reuses .confirm-btn; no extra rule needed */

/* Order History: select-mode toggle target for the per-card checkbox column */
.oc-select-wrap{ display:none; }
.hist-select-mode .oc-select-wrap{ display:flex; align-items:center; }
.hist-select-mode .oc-id-wrap{ display:none; }
.hist-select-mode .oc-actions{ display:none; }
.oc-checkbox{
  width:26px; height:26px; border-radius:50%; accent-color:var(--mint-deep);
  cursor:pointer;
}
.hist-select-all-btn{ display:none; }
.hist-select-mode .hist-select-all-btn{ display:inline-flex; }

/* Order History: delivery-status badge + date filter input */
.oc-meta-row{ display:flex; }
.oc-status{
  display:inline-flex; align-items:center; gap:.3em;
  font-family:'Baloo 2',sans-serif; font-weight:700; font-size:.75rem;
  padding:.2em .7em; border-radius:999px; border:2px solid var(--ink);
}
.oc-status-prep{ background:var(--peach); color:var(--ink); }
.oc-status-done{ background:var(--mint); color:var(--ink); }

.hist-date-picker input[type=date],
.status-date-picker input[type=date]{
  border:2.5px solid var(--ink); border-radius:14px;
  padding:.5em .8em; font-weight:700; font-size:.9rem;
  background:var(--white); color:var(--ink);
}

/* ==================================================
   ORDER STATUS BOARD (Preparing / Delivered)
   ================================================== */
#view-status{ padding:0; }
.status-topbar{
  background:var(--cream); border-bottom:3px solid var(--ink);
  padding:12px clamp(12px,2.5vw,28px);
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  position:sticky; top:0; z-index:20;
}
.status-topbar h2{ font-size:1.3rem; flex:1; }

.status-sound-banner{
  background:var(--gold); border-bottom:3px solid var(--ink);
  text-align:center; font-weight:800; padding:8px 14px; font-size:.85rem; color:var(--ink);
}
.status-sound-banner[hidden]{ display:none; }

.status-board{
  display:grid; grid-template-columns:1fr 1fr; gap:16px;
  padding:16px clamp(12px,2.5vw,28px) 32px; flex:1; align-items:start;
}
.status-col{ display:flex; flex-direction:column; max-height:calc(100vh - 140px); overflow:hidden; }
.status-col-head{
  padding:14px 18px; border-bottom:3px solid var(--ink);
  display:flex; align-items:center; justify-content:space-between;
  font-family:'Baloo 2',sans-serif; font-size:1.1rem;
  border-radius:25px 25px 0 0;
}
.status-col-head.prep-head{ background:var(--peach); }
.status-col-head.done-head{ background:var(--mint); }
.status-list{ flex:1; overflow-y:auto; padding:12px; display:flex; flex-direction:column; gap:10px; }
.status-empty{ text-align:center; color:var(--ink-soft); font-weight:700; padding:30px 14px; }

.status-card{
  background:var(--white); border:2.5px solid var(--ink); border-radius:18px;
  padding:12px 44px 12px 14px; display:flex; flex-direction:column; gap:6px;
  cursor:pointer; box-shadow:0 4px 0 var(--shadow);
  transition:transform .08s ease, box-shadow .08s ease;
  position:relative;
}
.status-card:active{ transform:translateY(3px); box-shadow:0 1px 0 var(--shadow); }
.status-card[data-status="Delivered"]{ background:var(--cream-deep); opacity:.85; }

/* Status icon badge, top-right corner: a green tick once delivered, a sandglass while preparing */
.status-card::after{
  content:""; position:absolute; top:10px; right:10px;
  width:26px; height:26px; border-radius:50%;
  border:2px solid var(--ink);
  display:flex; align-items:center; justify-content:center;
  font-size:.8rem; line-height:1;
}
.status-card[data-status="Preparing"]::after{ content:"⏳"; background:var(--peach); }
.status-card[data-status="Delivered"]::after{ content:"✓"; background:var(--mint-deep); color:var(--white); font-weight:800; }
.sc-top{ display:flex; align-items:baseline; justify-content:space-between; gap:8px; }
.sc-id{ font-family:'Baloo 2',sans-serif; font-weight:700; }
.sc-time{ font-size:.72rem; color:var(--ink-soft); font-weight:700; }
.sc-name{ font-family:'Baloo 2',sans-serif; font-size:1rem; }
.sc-items{ font-size:.8rem; color:var(--ink-soft); font-weight:700; line-height:1.35; }
.sc-bottom{ display:flex; align-items:center; justify-content:space-between; margin-top:2px; flex-wrap:wrap; gap:4px; }
.sc-total{ font-family:'Baloo 2',sans-serif; font-weight:800; color:var(--gold-deep); font-size:1rem; }
.sc-tap-hint{ font-size:.72rem; font-weight:800; color:var(--grape-deep); }

@media (max-width:760px){
  .status-board{ grid-template-columns:1fr; }
  .status-col{ max-height:none; }
}