/* Aislo — generated from aislo.html */
[hidden]{ display:none !important; }
img{ max-width:100%; }
html{ -webkit-text-size-adjust:100%; }

  /* This file is the whole app and the only thing to edit. Pushing to main deploys it: the
     Cloudflare Pages project aislo-app builds src/build_pwa.py from GitHub. Never deploy by hand. */
  :root{ --navy:#0B1739; --border:#E6E9F0; --border-strong:#D3D8E3; --warn:#A15C07; --warn-soft:#FDF3E6; --danger-soft:#FDEEEC; --good-soft:#EBF7EF; --shadow:0 1px 2px rgba(11,20,38,0.05); --shadow-lift:0 10px 28px -12px rgba(11,23,57,0.25); }
  *{ box-sizing:border-box; }
  [hidden]{ display:none !important; }
  html, body{ margin:0; max-width:100%; overscroll-behavior:none; }
  html{ overflow-x:hidden; }
  html{ touch-action:pan-x pan-y; -webkit-text-size-adjust:100%; }
  @supports (font: -apple-system-body){
    html{ font:-apple-system-body; }
  }
  body{ font-family:var(--font); font-feature-settings:"cv11", "ss01"; font-size:var(--fs-item); line-height:1.45; -webkit-tap-highlight-color:transparent; }
  h1, h2, h3{ text-wrap:balance; margin:0; }
  .num{ font-family:var(--font); font-weight:600; font-variant-numeric:tabular-nums; }
  a{ color:inherit; }
  button{ font:inherit; }
  ::selection{ background:var(--accent-soft); }
  :focus-visible{ outline:none; box-shadow:var(--focus); border-radius:var(--r-sm); }
  .icon{ width:1em; height:1em; stroke:currentColor; fill:none; stroke-linecap:round; stroke-linejoin:round; vertical-align:-0.15em; }
  main{ position:relative; max-width:430px; margin:0 auto; padding:calc(1.6rem + env(safe-area-inset-top)) 1.25rem calc(100px + env(safe-area-inset-bottom)); touch-action:pan-y; overflow-x:hidden; overflow-x:clip; min-height:100vh; min-height:100dvh; }
  .panel{ display:none; }
  .panel.active{ display:block; }
  .panel.leaving{ display:block; position:absolute; pointer-events:none; }
  .panel-head{ display:flex; align-items:center; justify-content:space-between; gap:0.8rem; min-height:44px; }
  .panel-head h2:focus-visible{ outline:none; box-shadow:none; }
  .panel-actions{ display:flex; gap:0.5rem; flex-shrink:0; flex-wrap:wrap; justify-content:flex-end; }
  .store-select-wrap{ margin-bottom:0.9rem; }
  :root{ --slide-ms:380ms; --tabs:5; --grow:1.6; --slide-ease:cubic-bezier(.2,.9,.25,1); }
  .bottom-nav{ position:fixed; transform:translateX(-50%); z-index:30; display:flex; }
  .bottom-nav::after{ content:""; position:absolute; left:0; right:0; top:100%; height:120px; background:var(--surface); }
  .nav-highlight{ position:absolute; transform:translateX(calc(var(--active-idx, 0) * 100% / var(--grow))); will-change:transform; pointer-events:none; }
  .bottom-nav button{ position:relative; z-index:2; background:none; border:none; cursor:pointer; display:flex; font-size:var(--fs-cap); font-weight:700; }
  .bottom-nav button .icon{ flex-shrink:0; }
  .bottom-nav button[aria-selected="true"] .icon{ stroke-width:1.6; }
  .bottom-nav button[aria-selected="true"] .nav-label{ max-height:0; }
  .btn:active, .check:active, .bottom-nav button:active, .row-click:active{ transform:scale(0.97); }
  .btn, .check, .row-click{ transition:transform 100ms ease-out; }
  .btn{ display:inline-flex; align-items:center; justify-content:center; gap:0.4rem; border:1px solid var(--border-strong); background:var(--surface); color:var(--ink); padding:0.5rem 0.95rem; cursor:pointer; }
  .photo-viewer{ position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center; background:rgba(6,11,24,0.86); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); touch-action:none; overscroll-behavior:contain; }
  .pv-img{ max-width:92vw; max-height:80vh; border-radius:var(--r-md); object-fit:contain; box-shadow:0 20px 50px -20px rgba(0,0,0,0.6); transform-origin:0 0; will-change:transform; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; }
  .pv-close{ position:absolute; top:calc(env(safe-area-inset-top) + 14px); right:16px; width:44px; height:44px; border-radius:999px; border:none; background:rgba(255,255,255,0.16); color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; }
  .pv-close .icon{ width:20px; height:20px; }
  .photo-viewer.pv-in .pv-img{ animation:pvIn 200ms cubic-bezier(.2,.9,.25,1); }
  @keyframes pvIn{ from{ opacity:0; transform:scale(0.92); } to{ opacity:1; transform:none; } }
  .invalid{ border-color:var(--danger) !important; box-shadow:0 0 0 3px color-mix(in srgb, var(--danger) 18%, transparent) !important; }
  .field-error{ display:flex; align-items:center; gap:0.35rem; color:var(--danger); margin:0.4rem 0 0; }
  .field-error .icon{ flex-shrink:0; }
  .pop-search{ position:sticky; top:0; display:flex; align-items:center; gap:0.45rem; padding:0.45rem 0.6rem; background:var(--surface); border-bottom:1px solid var(--border); z-index:1; }
  .pop-search .icon{ color:var(--ink-faint); flex-shrink:0; }
  .pop-search-input{ border:none !important; box-shadow:none !important; padding:0.4rem 0 !important; background:transparent !important; font-size:16px !important; }
  .sk-row{ display:flex; align-items:center; gap:0.9rem; padding:0.85rem 0.3rem; }
  .sk-lines{ flex:1; display:flex; flex-direction:column; gap:0.45rem; }
  .sk{ background:linear-gradient(90deg, var(--surface-2) 0%, color-mix(in srgb, var(--surface-2) 55%, var(--surface)) 50%, var(--surface-2) 100%); background-size:200% 100%; border-radius:var(--r-sm); animation:skShimmer 1.3s ease-in-out infinite; }
  .sk-box{ flex-shrink:0; }
  .sk-line{ height:13px; }
  .sk-line.sm{ height:10px; }
  @keyframes skShimmer{ from{ background-position:100% 0; } to{ background-position:-100% 0; } }
  @media (prefers-reduced-motion: reduce){
    .sk{ animation:none; }
  }
  .btn-ghost{ border-color:transparent; background:none; color:var(--ink-muted); }
  .btn-pill{ min-height:44px; padding:0 1.05rem 0 0.85rem; gap:0.35rem; font-size:var(--fs-base); white-space:nowrap; }
  .about-line{ text-align:center; color:var(--ink-faint); margin:0.4rem 0 0; }
  .btn-sm{ padding:0.32rem 0.7rem; }
  .btn-block{ width:100%; }
  .btn[disabled]{ opacity:0.5; cursor:not-allowed; }
  .fab-menu-wrap{ position:relative; }
  .fab-toggle .icon{ transition:transform 200ms cubic-bezier(.2,.9,.25,1); }
  .fab-toggle.open .icon{ transform:rotate(45deg); }
  .fab-menu{ position:absolute; top:calc(100% + 8px); right:0; z-index:25; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md); box-shadow:var(--shadow-lift); overflow:hidden; min-width:190px; transform-origin:top right; transform:scale(0.85) translateY(-4px); opacity:0; pointer-events:none; transition:transform 200ms cubic-bezier(.2,.9,.25,1), opacity 160ms ease; }
  .fab-menu.open{ transform:scale(1) translateY(0); opacity:1; pointer-events:auto; }
  .fab-menu-item{ display:flex; align-items:center; gap:0.65rem; width:100%; padding:0.75rem 0.95rem; min-height:48px; background:none; border:none; text-align:left; font-weight:600; font-size:var(--fs-sm); color:var(--ink); cursor:pointer; }
  label{ display:block; margin-bottom:0.3rem; }
  input[type="text"], input[type="number"], input[type="date"], select, textarea{ width:100%; background:var(--surface); border:1px solid var(--border-strong); color:var(--ink); border-radius:var(--r-sm); padding:0.55rem 0.65rem; font:inherit; font-size:var(--fs-base); }
  input::placeholder, textarea::placeholder{ color:var(--ink-faint); }
  .field{ margin-bottom:0.8rem; }
  .field-row{ display:flex; gap:0.6rem; min-width:0; }
  .field-row > *{ flex:1; min-width:0; }
  .seg{ display:flex; border:1px solid var(--border-strong); overflow:hidden; }
  .seg button{ flex:1; background:var(--surface); border:none; padding:0.5rem; font-size:var(--fs-sm); color:var(--ink-muted); cursor:pointer; min-height:44px; }
  .check-line{ font-weight:600; font-size:var(--fs-sm); color:var(--ink); margin-bottom:0.9rem; }
  select.native-select{ display:none !important; }
  .cselect{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:0.5rem; background:var(--surface); border:1px solid var(--border-strong); color:var(--ink); padding:0.55rem 0.65rem; cursor:pointer; text-align:left; }
  .cselect[disabled]{ opacity:0.55; cursor:not-allowed; }
  .cselect-label{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
  .cselect-chev{ color:var(--ink-faint); flex-shrink:0; transition:transform 200ms cubic-bezier(.2,.9,.25,1); }
  .cselect[aria-expanded="true"] .cselect-chev, .range-cycle[aria-expanded="true"] .cselect-chev{ transform:rotate(180deg); }
  .cselect[aria-expanded="true"]{ border-color:var(--accent-strong); box-shadow:var(--focus); }
  .cselect.pill{ color:var(--ink-muted); padding-left:0.95rem; }
  .pop-menu{ position:fixed; inset:auto; margin:0; z-index:60; padding:0.3rem; border:1px solid var(--border); border-radius:var(--r-md); background:var(--surface); color:var(--ink); overflow-y:auto; overscroll-behavior:contain; min-width:0; }
  .pop-item{ display:flex; align-items:center; gap:0.6rem; width:100%; min-height:44px; padding:0.55rem 0.7rem; border:none; background:none; border-radius:var(--r-sm); text-align:left; font:inherit; color:var(--ink); cursor:pointer; }
  .pop-item:active, .pop-item:focus-visible{ background:var(--surface-2); box-shadow:none; }
  .fab-menu-item:active, .row-click:active{ background:var(--surface-2); }
  .pop-item .pop-tick{ margin-left:auto; flex-shrink:0; }
  .pop-item .pop-text{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .pop-check{ width:22px; height:22px; border-radius:var(--r-sm); border:1.6px solid var(--border-strong); flex-shrink:0; display:flex; align-items:center; justify-content:center; color:transparent; transition:background 130ms ease, border-color 130ms ease; }
  .pop-check.on{ background:var(--accent); border-color:var(--accent); color:var(--on-accent); }
  .pop-check .icon{ width:14px; height:14px; stroke-width:2.4; }
  .pop-sep{ height:1px; background:var(--border); margin:0.25rem 0.35rem; }
  .pop-empty{ padding:0.7rem; font-size:var(--fs-sm); color:var(--ink-muted); }
  dialog{ border:none; border-radius:var(--r-md) var(--r-md) 0 0; padding:0; box-sizing:border-box; width:100%; max-width:min(430px, 100vw); margin:0 auto; left:0; right:0; bottom:0; top:auto; background:var(--surface); color:var(--ink); }
  dialog::before{ content:""; width:36px; height:4px; border-radius:999px; background:var(--border-strong); margin:10px auto 0; }
  dialog[open]{ animation:sheetUp 280ms cubic-bezier(.2,.9,.25,1); }
  @keyframes sheetUp{ from{ transform:translateY(100%); } to{ transform:translateY(0); } }
  dialog[open]::backdrop{ animation:backdropFade 200ms ease; }
  @keyframes backdropFade{ from{ opacity:0; } to{ opacity:1; } }
  @keyframes popCenterIn{ from{ opacity:0; transform:translate(-50%,-50%) scale(0.9); } to{ opacity:1; transform:translate(-50%,-50%) scale(1); } }
  .modal-head{ display:flex; justify-content:space-between; }
  .modal-body{ padding:0 1.1rem calc(1.1rem + env(safe-area-inset-bottom)); max-height:75vh; overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; }
  .modal-close{ border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; }
  .modal-subtitle{ margin:0 0 0.9rem; }
  .modal-message{ font-size:var(--fs-base); color:var(--ink-muted); margin:0 0 1rem; }
  .modal-actions{ display:flex; gap:0.6rem; }
  .modal-actions .btn{ flex:1; }
  .compare-section-title:first-child{ margin-top:0; }
  dialog .row{ background:transparent; }
  dialog .swipe-content{ background:var(--surface); }
  .rotate-lock{ display:none; }
  @media (orientation: landscape) and (max-height: 540px){
    .rotate-lock{ display:flex; position:fixed; inset:0; z-index:1000; flex-direction:column; align-items:center; justify-content:center; gap:1rem; padding:2rem; text-align:center; background:var(--bg); color:var(--ink); font-weight:600; }
    .rotate-lock .icon{ width:48px; height:48px; transform:rotate(90deg); }
    dialog, .pop-menu{ display:none !important; }
  }
  .settings-group{ margin-bottom:1rem; }
  .photo-add{ width:100%; min-height:88px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0.35rem; border-radius:var(--r-md); font:inherit; font-weight:600; cursor:pointer; }
  .photo-preview{ position:relative; border-radius:var(--r-md); overflow:hidden; background:var(--surface-2); }
  .photo-preview img{ display:block; width:100%; max-height:220px; object-fit:cover; }
  .photo-busy{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,0.6); }
  .photo-chip, .photo-x{ position:absolute; border:none; cursor:pointer; background:rgba(255,255,255,0.92); color:#111111; box-shadow:0 2px 8px rgba(0,0,0,0.15); font:inherit; font-weight:600; font-size:var(--fs-sm); }
  .photo-actions{ display:grid; grid-template-columns:1fr 1fr; gap:0.6rem; }
  .photo-chips{ position:absolute; left:0.6rem; bottom:0.6rem; display:flex; gap:0.4rem; }
  .photo-chip{ display:inline-flex; align-items:center; gap:0.35rem; padding:0.45rem 0.8rem; min-height:36px; }
  .photo-chip .icon{ width:15px; height:15px; }
  #camera-video, #camera-shot{ max-height:60vh; object-fit:cover; }
  .photo-x{ right:0.6rem; top:0.6rem; width:36px; height:36px; border-radius:999px; display:flex; align-items:center; justify-content:center; }
  .thumb{ width:44px; height:44px; border-radius:var(--r-sm); object-fit:cover; flex-shrink:0; background:var(--surface-2); }
  .empty{ padding:1.4rem 0.5rem; text-align:center; color:var(--ink-faint); }
  .empty h3{ color:var(--ink-faint); }
  .swipe-wrap{ position:relative; overflow:hidden; border-radius:var(--r-sm); }
  .swipe-bg{ position:absolute; right:0; top:0; bottom:0; width:84px; z-index:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0.2rem; background:var(--danger); color:#fff; border:none; padding:0; cursor:pointer; font:inherit; font-weight:600; font-size:var(--fs-cap); }
  .swipe-bg .icon{ width:20px; height:20px; }
  .swipe-bg{ visibility:hidden; }
  .swipe-wrap.swiping .swipe-bg, .swipe-wrap.open .swipe-bg{ visibility:visible; }
  .swipe-content{ z-index:1; background:var(--bg); }
  .swipe-wrap:not(.line-swipe) .swipe-content{ -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; }
  .row{ display:flex; align-items:center; gap:0.8rem; padding:0.8rem 0.5rem; background:var(--bg); }
  :not(.swipe-content) > .row:last-child, .swipe-wrap:last-child .row{ border-bottom:none; }
  .row-click{ cursor:pointer; border-radius:var(--r-sm); }
  .check{ border:1.6px solid var(--border-strong); flex-shrink:0; cursor:pointer; display:flex; align-items:center; justify-content:center; }
  .row-main{ flex:1; min-width:0; }
  .row-main .name{ font-size:var(--fs-item); }
  .row-meta{ margin-top:0.15rem; display:flex; gap:0.5rem; flex-wrap:wrap; align-items:center; }
  .row-actions{ display:flex; gap:0.15rem; align-items:center; flex-shrink:0; }
  .chip{ display:inline-flex; align-items:center; gap:0.3rem; background:var(--surface-2); color:var(--ink-muted); }
  .chip.good{ background:var(--good-soft); color:var(--good); }
  .chip.accent{ background:var(--accent-soft); color:var(--accent-soft-ink); }
  .chip.sale{ background:var(--danger-soft); color:var(--danger); }
  .search-wrap{ position:relative; margin-bottom:1rem; }
  .search-wrap .icon{ position:absolute; top:50%; transform:translateY(-50%); color:var(--ink-faint); }
  .search-wrap input{ border-color:transparent; background:var(--surface-2); }
  .totals-grid{ margin-bottom:1.1rem; }
  .receipt-filters{ flex-wrap:wrap; margin-bottom:1rem; }
  .range-cycle{ display:inline-flex; align-items:center; gap:0.4rem; padding:0.4rem 0.9rem; color:var(--ink); cursor:pointer; max-width:100%; }
  .range-cycle .icon{ color:var(--ink-faint); }
  .range-cycle.filtered{ background:var(--accent-soft); border-color:var(--accent); color:var(--accent-soft-ink); }
  .range-cycle .rc-label{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .receipt-items{ margin-top:0.4rem; font-size:var(--fs-sm); color:var(--ink-muted); display:flex; flex-wrap:wrap; gap:0.25rem 0.65rem; }
  .receipt-items span b{ color:var(--ink); font-weight:600; }
  .photo-thumb{ margin-top:0.45rem; display:inline-block; }
  .photo-thumb img{ max-width:110px; border-radius:var(--r-sm); display:block; }
  .line-swipe{ margin-bottom:0.45rem; border-radius:var(--r-sm); }
  .line-item{ display:grid; grid-template-columns:minmax(0,1fr) 56px 72px; gap:0.35rem; align-items:center; min-width:0; }
  .line-item input{ padding:0.45rem 0.4rem; min-width:0; }
  .scan-state{ display:flex; flex-direction:column; align-items:center; gap:0.7rem; padding:2rem 1rem; text-align:center; color:var(--ink-muted); }
  .spinner{ width:28px; height:28px; border-radius:999px; border:3px solid var(--border); border-top-color:var(--accent-strong); animation:spin 0.8s linear infinite; }
  @keyframes spin{ to{ transform:rotate(360deg); } }
  .detect-hint{ background:var(--accent-soft); color:var(--accent-soft-ink); border-radius:var(--r-sm); padding:0.55rem 0.7rem; font-size:var(--fs-sm); margin-bottom:0.8rem; display:flex; align-items:center; justify-content:space-between; gap:0.6rem; }
  #camera-video, #camera-shot{ width:100%; border-radius:var(--r-sm); background:#0b0d10; display:block; }
  .camera-actions{ display:flex; gap:0.6rem; margin-top:0.8rem; }
  .camera-actions .btn{ flex:1; min-width:0; width:auto; }
  .toast{ position:fixed; left:50%; bottom:calc(112px + env(safe-area-inset-bottom)); z-index:40; display:flex; align-items:center; gap:0.9rem; white-space:nowrap; padding:0.55rem 0.6rem 0.55rem 1.1rem; min-height:44px; opacity:0; pointer-events:none; max-width:92vw; }
  .toast:not(.has-action){ padding-right:1.1rem; }
  .toast.show.has-action{ pointer-events:auto; }
  .toast-action{ border:none; background:rgba(255,255,255,0.12); font:inherit; padding:0.45rem 0.9rem; min-height:36px; cursor:pointer; }
  .toast-action:active{ background:rgba(255,255,255,0.22); }
  .toast.show{ opacity:1; }
  @media (prefers-reduced-motion: reduce){
    *{ transition-duration:1ms !important; }
    dialog[open]{ animation:sheetFade 160ms ease !important; }
  }
  @keyframes sheetFade{ from{ opacity:0; } to{ opacity:1; } }
  @media (prefers-reduced-transparency: reduce){
    .bottom-nav{ background:var(--surface); backdrop-filter:none; }
  }
  input[type="text"], input[type="number"], input[type="date"], textarea, .line-item input, .search-wrap input{ font-size:16px; }
  .icon{ stroke-width:1.7; }
  .panel-head.sub h2{ font-size:var(--fs-lg); }
  .title-edit{ display:flex; align-items:center; gap:0.45rem; flex:1; min-width:0; margin:0; text-transform:none; letter-spacing:0; color:var(--ink-faint); }
  .title-edit .icon{ flex-shrink:0; width:18px; height:18px; color:var(--ink-muted); }
  .modal-head input.title-input{ flex:1; min-width:0; width:100%; padding:0.2rem 0; border:none; border-bottom:1.5px solid transparent; border-radius:0; background:transparent; color:var(--ink); font-size:max(var(--fs-lg), 16px); font-weight:700; letter-spacing:-0.015em; }
  .modal-head input.title-input:focus{ outline:none; box-shadow:none; border-bottom-color:var(--border-strong); }
  input[type="date"]{ -webkit-appearance:none; appearance:none; display:block; width:100%; min-width:0; min-height:44px; text-align:left; }
  input[type="date"]::-webkit-date-and-time-value{ text-align:left; }
  .brand{ display:flex; align-items:center; gap:0.55rem; margin-bottom:1.1rem; }
  .brand-mark{ width:30px; height:30px; border-radius:var(--r-sm); box-shadow:0 4px 14px -4px rgba(62,124,240,0.55); }
  .brand-name{ font-size:var(--fs-item); font-weight:700; letter-spacing:-0.03em; color:var(--ink); }
  .brand-foot{ justify-content:center; margin:2.4rem 0 0; opacity:0.85; }
  .panel-head.sub{ margin-top:1.6rem; padding-top:1.4rem; border-top:1px solid var(--border); }
  .settings-group{ background:var(--surface-2); border-radius:var(--r-md); padding:0.9rem 0.95rem 1rem; }
  .settings-group + .settings-group{ padding-top:0.9rem; border-top:none; }
  .settings-group .seg, .settings-group .cselect{ background:var(--surface); }
  #compare-modal-body-prices{ border-radius:var(--r-md); }
  #compare-modal-body-prices .row{ border-bottom-color:var(--border); }
  #compare-modal-body-prices .row:last-of-type{ border-bottom:none; }
  #compare-modal-body-prices .panel-hint{ padding-top:0.6rem; }
  .list-thumb{ width:40px; height:40px; border-radius:var(--r-sm); }
  /* a drawing is not a photo: no card behind it, and it sits a touch smaller so the photo still leads */
  .art-thumb{ width:32px; height:32px; flex:none; border-radius:0; background:none; object-fit:contain; }
  /* elevation 6: the Receipts tab says when a payback is waiting on you */
  html body .bottom-nav .nav-ic{ position:relative; display:flex; align-items:center; justify-content:center; }
  html body .nav-badge{ position:absolute; top:-2px; right:-4px; width:9px; height:9px; border-radius:50%; background:var(--warn);
    box-shadow:0 0 0 2px var(--surface); }
  html body .nav-badge[hidden]{ display:none; }
  html body .bottom-nav button[aria-selected="true"] .nav-badge{ box-shadow:0 0 0 2px var(--brand); }
  .modal-body .compare-section-title:not(:first-child){ margin-top:1.1rem; padding-top:1rem; border-top:1px solid var(--border); }
  .row-main.row-click{ padding:0.55rem 0.7rem; margin:-0.55rem -0.7rem; border-radius:var(--r-sm); }
  .row.row-click{ border-radius:var(--r-sm); }
  #receipts-list .swipe-wrap{ margin:0 -0.7rem; }
  .add-toggle{ flex-shrink:0; cursor:pointer; display:flex; align-items:center; justify-content:center; border:1.6px solid var(--border-strong); transition:background 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 100ms ease-out; }
  .add-toggle:active{ transform:scale(0.94); }
  input[readonly]{ background:var(--surface-2); color:var(--ink); }
  .rv-title{ min-width:0; flex:1; }
  .rv-title h3{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .rv-date{ margin-top:0.15rem; font-size:var(--fs-sm); color:var(--ink-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .rv-head-actions{ display:flex; align-items:center; gap:0.2rem; flex-shrink:0; }
  /* the Split button is an icon on narrow screens: three labelled buttons and a date do not fit */
  @media (max-width: 430px){ html body #rv-ask span{ display:none; } html body #rv-ask{ padding:0 0.6rem; } }
  .rv-line{ display:flex; justify-content:space-between; align-items:baseline; gap:1rem; padding:0.65rem 0; border-bottom:1px solid var(--border); }
  .rv-line .rv-name{ font-weight:500; }
  .rv-line .rv-qty{ font-size:var(--fs-cap); color:var(--ink-faint); margin-top:0.1rem; }
  .rv-total{ display:flex; justify-content:space-between; align-items:baseline; padding:0.9rem 0 0.2rem; font-weight:700; font-size:var(--fs-item); }
  .rv-total .num{ font-size:var(--fs-lg); font-weight:700; }
  .rv-photo{ margin-top:1rem; border-radius:var(--r-md); overflow:hidden; background:var(--surface-2); }
  .rv-photo img{ display:block; width:100%; }
  .clear-checked{ margin-top:0.9rem; color:var(--ink-muted); }
  .quick-add-open{ gap:0.45rem; min-height:46px; margin-bottom:0.2rem; }
  dialog::before{ display:none; }
  .modal-close{ padding:0; border-radius:999px; flex-shrink:0; }
  .modal-close .icon{ stroke-width:2.2; }
  .modal-close:focus, .modal-close:focus-visible{ outline:none; box-shadow:none; background:var(--surface-2); }
  .modal-head{ padding:1rem 1rem 0.75rem 1.1rem; gap:0.8rem; align-items:center; }
  .modal-titles{ min-width:0; flex:1; }
  .modal-sub{ margin:0.15rem 0 0; font-size:var(--fs-sm); color:var(--ink-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .check, .add-toggle, .photo-chip, .range-cycle{ position:relative; }
  .check::after, .add-toggle::after, .photo-chip::after, .range-cycle::after, .photo-x::after{ content:""; position:absolute; inset:-6px; }
  .modal-close{ width:44px; height:44px; min-width:44px; min-height:44px; }
  dialog{ transform-origin:50% 100%; transition:filter 320ms cubic-bezier(.2,.9,.25,1), transform 320ms cubic-bezier(.2,.9,.25,1); }
  dialog.behind{ transform:translateY(-10px) scale(0.95); }
  dialog.dragging{ transition:none; }
  html.theme-anim, html.theme-anim *{ transition:background-color 420ms ease, color 420ms ease, border-color 420ms ease, fill 420ms ease, box-shadow 420ms ease !important; }
  .chip.fav{ background:var(--accent); color:var(--on-accent); box-shadow:var(--glow); }
  .chip.fav .icon, .chip .icon{ width:11px; height:11px; }
  .chip.fav .icon{ fill:currentColor; stroke:none; }
  .drag-handle{ position:relative; flex-shrink:0; width:36px; margin-right:-0.3rem; display:flex; align-items:center; justify-content:center; border:none; background:none; cursor:grab; touch-action:none; -webkit-touch-callout:none; -webkit-user-select:none; user-select:none; }
  .drag-handle::after{ content:""; position:absolute; }
  .drag-handle .icon{ stroke-width:2; transition:opacity 130ms ease, color 130ms ease; }
  .name-line{ gap:0.4rem; }
  .name-line .chip{ position:relative; top:1px; line-height:1.25; flex-shrink:1; min-width:0; max-width:60%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .swipe-wrap.lifted{ overflow:visible; z-index:6; position:relative; }
  .swipe-wrap.lifted > .swipe-content{ transform:scale(1.035) !important; border-radius:var(--r-md); background:var(--surface) !important; box-shadow:0 14px 34px -12px rgba(11,23,57,0.35), var(--glow); transition:transform 360ms cubic-bezier(.3,1.5,.5,1), box-shadow 320ms ease !important; }
  .swipe-wrap.lifted .drag-handle{ color:var(--brand-text); }
  .swipe-wrap.lifted .drag-handle .icon{ opacity:1; }
  .swipe-wrap.lifted .row{ border-bottom-color:transparent; }
  .reordering .swipe-wrap:not(.lifted):not(.dropping){ transition:transform 320ms cubic-bezier(.2,.9,.25,1); }
  .swipe-wrap.dropping{ z-index:6; position:relative; }
  .swipe-wrap.dropping > .swipe-content{ transform:scale(1) !important; box-shadow:none; transition:transform 320ms cubic-bezier(.2,.9,.25,1), box-shadow 320ms ease !important; }
  #items-list, #shopping-list{ position:relative; }
  .panel-hint{ margin:0.3rem 0 0; font-size:var(--fs-sm); line-height:1.35; color:var(--ink-muted); }
  .modal-head h3{ font-size:var(--fs-lg); font-weight:700; letter-spacing:-0.015em; }
  .modal-subtitle{ font-size:var(--fs-lg); font-weight:700; color:var(--ink); letter-spacing:-0.015em; }
  label, .compare-section-title{ color:var(--ink-muted); }
  .row-main .name{ font-weight:500; letter-spacing:-0.005em; }
  .btn{ letter-spacing:-0.005em; }
  .btn-sm{ font-size:var(--fs-cap); }
  .chip{ letter-spacing:0; text-transform:none; padding:0.18rem 0.5rem; }
  .seg{ border-color:var(--border-strong); border-radius:var(--r-sm); }
  .seg button{ font-weight:600; }
  input[type="text"], input[type="number"], input[type="date"], textarea, .cselect{ border-radius:var(--r-sm); }
  .bottom-nav::after{ background:color-mix(in srgb, var(--surface) 74%, transparent); }
  .bottom-nav button[aria-selected="true"] .icon{ transform:none; }
  :root{ --pill-ease:cubic-bezier(.2,.9,.25,1); --pill-ms:520ms; }
  .bottom-nav::before{ background:var(--surface) !important; }
  .bottom-nav{ align-items:center; }
  .bottom-nav button{ flex-direction:row !important; align-items:center; justify-content:center; gap:0 !important; border-radius:999px; color:var(--ink) !important; }
  .bottom-nav button .icon{ transform:none !important; stroke-width:1.9; }
  .bottom-nav .nav-label{ max-height:none !important; max-width:0; opacity:0 !important; overflow:hidden; white-space:nowrap; font-size:var(--fs-sm) !important; line-height:1; transition:max-width var(--pill-ms) var(--pill-ease), opacity 320ms var(--pill-ease) !important; }
  .bottom-nav button[aria-selected="true"]{ color:#FFFFFF !important; }
  .bottom-nav button[aria-selected="true"] .nav-label{ max-width:8em; opacity:1 !important; }
  .nav-highlight{ left:0 !important; bottom:auto !important; border-radius:999px !important; background:var(--nav-hl) !important; filter:none !important; }
  .nav-highlight::before, .nav-highlight::after{ display:none !important; }
  .bottom-nav.measuring, .bottom-nav.measuring *{ transition:none !important; }
  :root{ --bar-float:max(10px, calc(env(safe-area-inset-bottom) - 6px)); }
  .bottom-nav{ left:50% !important; max-width:402px !important; border-radius:999px !important; box-shadow:0 10px 30px -8px rgba(11,23,57,0.22), 0 2px 8px rgba(11,23,57,0.06) !important; }
  .bottom-nav::before, .bottom-nav::after{ display:none !important; }
  html.fill-screen .bottom-nav{ top:0 !important; bottom:auto !important; }
  .bottom-nav button[aria-selected="true"]{ padding:0 !important; gap:0 !important; }
  .bottom-nav .nav-label{ display:none !important; }
  .bottom-nav{ height:var(--track-h); background:none !important; border:none !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important; }
  .bottom-nav::before{ display:block !important; content:"" !important; position:absolute !important; inset:0 !important; top:0 !important; bottom:0 !important; border-radius:inherit; background:color-mix(in srgb, var(--surface) 86%, transparent) !important; -webkit-backdrop-filter:saturate(180%) blur(22px) !important; backdrop-filter:saturate(180%) blur(22px) !important; border:1px solid color-mix(in srgb, var(--ink) 8%, transparent); box-shadow:none !important; }
  .bottom-nav button{ height:var(--track-h); min-height:var(--track-h) !important; min-width:0 !important; padding:0 !important; }
  .bottom-nav button{ overflow:visible; }
  .bottom-nav button::after{ content:""; position:absolute; top:0; bottom:0; left:-14px; right:-14px; }
  .bottom-nav button .icon{ transition:none !important; }
  :root{ --thumb-h:calc(var(--track-h) - 2 * var(--pill-m)); --thumb-w:64px; }
  .bottom-nav{ bottom:var(--bar-float) !important; }
  html.fill-screen .bottom-nav{ transform:translate(-50%, calc(var(--app-h) - 100% - var(--bar-float))) !important; }
  .bottom-nav button[data-tab="shopping"]:not([aria-selected="true"]){ margin-left:calc((var(--thumb-w) - 24px) / 2); }
  .bottom-nav button[data-tab="settings"]:not([aria-selected="true"]){ margin-right:calc((var(--thumb-w) - 24px) / 2); }
  #bottom-nav{ border-radius:var(--bar-r) !important; }
  #bottom-nav #nav-highlight{ border-radius:calc(var(--bar-r) - var(--pill-m)) !important; }
  :root{ --pill-m:6px; --bar-r:20px; }
  #bottom-nav{ width:calc(min(100vw, 430px) - 2.5rem) !important; max-width:none !important; }
  .bottom-nav{ width:min(calc(100% - 56px), 300px) !important; }
  .bottom-nav button .icon, .bottom-nav button[aria-selected="true"] .icon{ width:26px !important; height:26px !important; }
  .bottom-nav{ padding:0 !important; justify-content:stretch !important; }
  html.fill-screen .bottom-nav{ padding:0 !important; }
  .bottom-nav button, .bottom-nav button[aria-selected="true"]{ flex:1 1 0 !important; width:auto !important; margin:0 !important; transition:color 320ms var(--pill-ease) !important; }
  #bottom-nav #nav-highlight{ height:calc(var(--track-h) - 2 * var(--pill-m)) !important; margin-top:calc((var(--track-h) - 2 * var(--pill-m)) / -2) !important; }
  .nav-highlight{ top:50% !important; height:var(--thumb-h) !important; width:var(--thumb-w) !important; margin-top:calc(var(--thumb-h) / -2) !important; z-index:1; box-shadow:0 2px 6px -2px rgba(11,23,57,0.35) !important; transition:transform var(--pill-ms) var(--pill-ease), background-color 320ms ease !important; }
  :root{ --brand-wave:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 46' preserveAspectRatio='none'%3E%3Cpath d='M0 34 C30 18 60 12 96 24 C132 36 162 40 200 22 L200 46 L0 46 Z' fill='%235B9BF3' fill-opacity='0.34'/%3E%3C/svg%3E"); --brand-wave-soft:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 46' preserveAspectRatio='none'%3E%3Cpath d='M0 34 C30 18 60 12 96 24 C132 36 162 40 200 22 L200 46 L0 46 Z' fill='%235B9BF3' fill-opacity='0.2'/%3E%3C/svg%3E"); }
  .compare-section-title{ display:flex; align-items:center; gap:0.45rem; }
  .compare-section-title::before{ content:""; width:6px; height:6px; flex-shrink:0; border-radius:999px; }
  .panel-head.sub{ position:relative; }
  :root{ --brand-wave-light:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 46' preserveAspectRatio='none'%3E%3Cpath d='M0 34 C30 18 60 12 96 24 C132 36 162 40 200 22 L200 46 L0 46 Z' fill='%23FFFFFF' fill-opacity='0.2'/%3E%3C/svg%3E"); }
  .panel-head.sub::before, .panel-head.sub::after{ display:none !important; }
  .multi-add{ display:flex; gap:0.5rem; align-items:center; }
  .multi-add input{ flex:1; min-width:0; }
  .field-hint{ color:var(--ink-faint); margin:0.45rem 0 0; line-height:1.35; }
  .queue-chips{ display:flex; flex-wrap:wrap; gap:0.4rem; margin-top:0.6rem; }
  .queue-chips:empty{ display:none; }
  .q-chip{ display:inline-flex; align-items:center; gap:0.2rem; padding:0.3rem 0.3rem 0.3rem 0.75rem; background:var(--surface-2); color:var(--ink); }
  .q-chip button{ width:26px; height:26px; border:none; border-radius:999px; background:none; color:var(--ink-faint); display:flex; align-items:center; justify-content:center; cursor:pointer; position:relative; }
  .q-chip button::after{ content:""; position:absolute; inset:-8px; }
  .starter{ display:none; }
  #modal-confirm.bare .modal-head, #modal-confirm.bare .modal-message{ display:none; }
  #modal-confirm.bare .modal-body{ padding-top:1.1rem; }
  #modal-confirm.bare .modal-actions{ margin-top:0; }
  .add-row{ display:flex; align-items:center; width:100%; margin:0; font:inherit; cursor:pointer; transition:background-color 160ms ease, color 160ms ease; }
  .add-row{ justify-content:center; gap:0.5rem; min-height:54px; margin-top:0.75rem; padding:0 1rem; border-radius:var(--r-md); text-align:center; }
  .add-row:active{ border-style:solid; color:var(--ink); transform:scale(0.99); }
  .starter .btn{ min-height:52px; gap:0.45rem; }
  .photo-actions.single{ grid-template-columns:1fr; }
  .photo-pick{ flex-direction:row !important; gap:0.5rem; min-height:52px; }
  .add-store-pick{ margin-top:0.8rem; gap:0.4rem; }
  .add-more-btn{ flex-shrink:0; gap:0.3rem; min-height:44px; padding:0 0.9rem 0 0.7rem; white-space:nowrap; }
  .add-more-btn .icon{ width:16px; height:16px; }
  button, input, select, textarea, .cselect, .pop-item{ font-family:inherit; }
  body{ letter-spacing:0; }
  h1, h2, h3{ letter-spacing:-0.02em !important; }
  .panel-head h2{ font-size:min(2rem, 7.4vw) !important; line-height:1.05 !important; }
  .panel-head{ margin-bottom:1.15rem; }
  .num, .stat .value{ letter-spacing:0.02em !important; }
  html.fill-screen, html.fill-screen body{ height:var(--app-h); overflow:hidden; }
  html.fill-screen main{ height:var(--app-h); min-height:0; box-sizing:border-box; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; }
  html.fill-screen .bottom-nav{ position:absolute; top:0; bottom:auto; padding-bottom:16px; }
  html.fill-screen .bottom-nav::before{ bottom:0; }
  html.fill-screen .toast{ bottom:max(10px, calc(122px - var(--fill-gap, 0px))); }
  html.fill-screen dialog:not(.modal-center){ bottom:8px; width:calc(100% - 16px); border-radius:var(--r-md); }
  .bottom-nav::before{ content:""; position:absolute; left:0; right:0; top:0; bottom:-160px; z-index:0; pointer-events:none; background:color-mix(in srgb, var(--surface) 74%, transparent); -webkit-backdrop-filter:saturate(180%) blur(20px); backdrop-filter:saturate(180%) blur(20px); }
  .nav-highlight{ bottom:-160px; }
  @media (prefers-reduced-transparency: reduce){
    .bottom-nav::before{ background:var(--surface); -webkit-backdrop-filter:none; backdrop-filter:none; }
  }
  .nav-highlight{ background:var(--nav-hl); box-shadow:0 -6px 28px -10px rgba(62,124,240,0.75); }
  .bottom-nav .nav-label{ font-size:var(--fs-cap); letter-spacing:0; }
  .bottom-nav button[aria-selected="true"]{ color:var(--nav-hl-ink); }
  .stat{ position:relative; overflow:hidden; isolation:isolate; text-align:left; padding:1.25rem 1.25rem 1.15rem; border-radius:var(--r-md); color:var(--on-card); }
  .stat-wave{ position:absolute; left:0; right:0; bottom:0; width:100%; z-index:-1; }
  .stat-label{ display:flex; align-items:center; gap:0.45rem; margin-bottom:0.5rem; }
  .stat-label::before{ content:""; width:7px; height:7px; border-radius:999px; }
  .stat .value{ font-size:2.6rem; line-height:1; letter-spacing:-0.035em; color:var(--on-card); }
  .stat .sub{ margin-top:0.5rem; font-size:var(--fs-cap); font-weight:500; }
  dialog{ border-top:1px solid var(--border); box-shadow:none; }
  dialog::backdrop{ background:rgba(10,10,10,0.4); backdrop-filter:none; }
  .pop-menu{ box-shadow:var(--shadow-lift); }
  .pop-item.selected{ background:var(--accent-soft); color:var(--accent-soft-ink); }
  .empty h3{ font-size:var(--fs-base); font-weight:500; }
  :root{ --success:#10B981; --accent-strong:#2F38C2; --accent-soft:var(--brand-soft); --accent-soft-ink:#2F38C2; --on-accent:#FFFFFF; --cta:#3B45DD; --on-cta:#FFFFFF; --card:#3B45DD; --on-card:#FFFFFF; --on-card-muted:#DCDFFB; --nav-hl:#3B45DD; --nav-hl-ink:#FFFFFF; --wave:#C5C9F6; --glow:0 4px 16px rgba(59,69,221,0.25); --glow-strong:0 4px 16px rgba(59,69,221,0.25); color-scheme:light; }
  .stat-wave{ fill:#FFFFFF !important; }
  .stat-label::before, .compare-section-title::before{ background:#C5C9F6 !important; box-shadow:0 0 8px 1px rgba(199,210,254,0.8) !important; }
  .compare-section-title::before{ background:#3B45DD !important; box-shadow:0 0 8px 1px rgba(59,69,221,0.45) !important; }
  .seg button.on{ color:#FFFFFF !important; }
  .row, .swipe-content{ background:var(--surface); }
  .row{ border-bottom:none !important; }
  :root:not([data-app-theme="dark"]) .row{ box-shadow:0 1px 4px rgba(0,0,0,0.05); }
  .settings-group, #compare-modal-body-prices{ background:var(--surface); border:none !important; box-shadow:0 1px 4px rgba(0,0,0,0.05); }
  .row .name.done{ text-decoration:line-through; color:inherit !important; }
  .row:has(.name.done) .row-main, .row:has(.name.done) .list-thumb{ opacity:0.4; }
  .btn-primary, #bottom-nav #nav-highlight, .stat, .toast, .check.on, .add-toggle.on{ box-shadow:none !important; }
  .stat-label::before, .compare-section-title::before{ display:none !important; }
  label, .compare-section-title, .stat-label{ text-transform:none !important; letter-spacing:0 !important; }
  .stat-label{ color:rgba(255,255,255,0.8) !important; }
  .btn, .btn-pill, .cselect, .cselect.pill, .search-wrap input, .range-cycle, .photo-chip, .q-chip, .chip, .toast-action{ border-radius:999px !important; }
  :where(body, body *:not(svg):not(path):not(use)){ font-family:var(--font); }
  /* line 22 does html{ font:-apple-system-body }, and that shorthand resets font-weight, so body needs
     an explicit declaration or the whole app inherits whatever the UA text style gives it */
  body{ font-weight:400; }
  h1, h2, h3{ font-weight:700; letter-spacing:-0.01em; }
  input, select, textarea, .row-meta, .note, .field-hint, .sub, .panel-hint, .modal-message, .modal-sub{ font-family:var(--font) !important; }
  .panel-head h2, .modal-titles h3, #modal-confirm h3, dialog .modal-head h3{ text-transform:none; letter-spacing:-0.01em !important; }
  .panel-head h2{ letter-spacing:-0.01em !important; }
  .row .name, .name{ letter-spacing:0.005em; }
  .stat-wave{ opacity:0.2 !important; }
  .seg button.on{ background:#3B45DD !important; }
  .check, .add-toggle{ border-radius:50% !important; }
  #bottom-nav button{ flex-direction:column !important; gap:0 !important; }
  #bottom-nav button .icon{ width:22px !important; height:22px !important; }
  #bottom-nav .nav-label{ margin-top:4px !important; letter-spacing:0 !important; }
  .add-row{ background:var(--brand-soft) !important; border:none !important; color:#3B45DD !important; }
  .add-row:active{ background:#DCDFFB !important; }
  #shopping-list, #items-list, #stores-list{ background:var(--surface); border-radius:var(--r-md); box-shadow:0 1px 4px rgba(0,0,0,0.05); overflow:hidden; }
  #shopping-list:empty, #items-list:empty, #stores-list:empty{ display:none; }
  #shopping-list.reordering, #items-list.reordering{ overflow:visible; }
  :is(#shopping-list, #items-list, #stores-list) .swipe-wrap{ border-radius:0; margin:0 !important; }
  :is(#shopping-list, #items-list, #stores-list) .row{ box-shadow:none !important; border-radius:0 !important; }
  :is(#shopping-list, #items-list, #stores-list) .swipe-wrap + .swipe-wrap .row{ box-shadow:inset 0 1px 0 #F1F2F4 !important; }
  .cselect.is-active{ background:var(--brand-soft) !important; color:#3B45DD !important; }
  @keyframes checkPop{ 0%{ transform:scale(0.72); } 60%{ transform:scale(1.12); } 100%{ transform:scale(1); } }
  @keyframes fadeDone{ from{ opacity:1; } to{ opacity:0.4; } }
  .check.pop{ animation:checkPop 280ms cubic-bezier(.3,1.5,.5,1); }
  .row:has(.check.pop) .row-main{ animation:fadeDone 200ms ease-out; }
  @media (prefers-reduced-motion: reduce){
    .check.pop, .row:has(.check.pop) .row-main{ animation:none; }
  }
  .data-actions{ display:flex; flex-direction:column; gap:0.5rem; }
  .data-actions .btn{ gap:0.45rem; }
  .modal-titles h3, #modal-confirm h3, dialog .modal-head h3{ font-size:var(--fs-lg) !important; }
  .row .name, .name, .set-row label{ font-size:var(--fs-item) !important; }
  .btn, .add-row, .range-cycle, .cselect, .pop-item, .toast, .q-chip, .photo-add{ font-size:var(--fs-item) !important; }
  .row-meta, .note, .sub, .field-hint, .chip, .about-line, .field-error, label, .compare-section-title, .stat-label{ font-size:var(--fs-sm) !important; }
  .range-cycle, #clear-checked-btn, .cselect, .btn{ min-height:44px !important; }
  .cselect:not(.is-active){ color:var(--ink-2) !important; }
  .btn:not(.btn-primary):not(.btn-danger):not(.btn-ghost-danger), .btn-soft, .photo-add, .photo-pick{ background:var(--brand-soft) !important; color:#3B45DD !important; border:none !important; box-shadow:none !important; }
  .photo-add .icon, .photo-pick .icon{ color:#3B45DD !important; }
  .btn-ghost-danger{ border:none !important; }
  #pick-item-list{ overflow:hidden; margin-top:0.8rem; }
  #pick-item-list:empty{ display:none; }
  #pick-item-list .row{ background:transparent !important; box-shadow:none !important; border-radius:0 !important; }
  .add-toggle.add-new{ display:flex; align-items:center; justify-content:center; }
  .cselect.pill, .range-cycle{ background:var(--surface-2) !important; border:none !important; border-radius:var(--r-sm) !important; min-height:44px !important; font-weight:800 !important; font-family:var(--display) !important; }
  .btn .icon, .add-row .icon, .drag-handle .icon, .modal-close .icon, .photo-add .icon, .edit-del .icon, .search-wrap .icon{ width:20px !important; height:20px !important; }
  .check .icon, .add-toggle .icon, .range-cycle .icon, .chip .icon, .field-error .icon, .cselect-chev, .q-chip .icon, .pop-item .icon{ width:16px !important; height:16px !important; }
  .set-row{ display:flex; align-items:center; justify-content:space-between; gap:0.8rem; min-height:54px; }
  .set-row + .set-row{ box-shadow:inset 0 1px 0 #F1F2F4; }
  .set-row label{ margin:0 !important; color:var(--ink) !important; font-family:var(--display) !important; font-weight:800 !important; }
  .set-row .cselect{ width:auto !important; max-width:62%; background:none !important; border:none !important; box-shadow:none !important; padding:0 !important; justify-content:flex-end; gap:0.35rem; color:#6B7280 !important; font-family:var(--font) !important; font-weight:500 !important; }
  #panel-shopping .panel-head{ display:grid !important; grid-template-columns:minmax(0,1fr) auto; align-items:center; row-gap:0.15rem; }
  #panel-shopping .panel-head h2{ white-space:nowrap; grid-column:1; grid-row:1; }
  .swipe-content{ position:relative; }
  .edit-del{ display:none; position:absolute; left:0.55rem; top:50%; transform:translateY(-50%); z-index:3; width:26px; height:26px; border-radius:50%; border:none; background:#EF4444; color:#FFFFFF; align-items:center; justify-content:center; cursor:pointer; padding:0; }
  .edit-del::after{ content:""; position:absolute; inset:-9px; }
  .edit-del .icon{ width:16px !important; height:16px !important; stroke-width:2.6; }
  .editing .edit-del{ display:flex; }
  .editing .swipe-content .row{ padding-left:2.6rem !important; }
  #modal-promote .modal-actions{ margin-top:0.4rem; }
  .details-hint{ display:inline-flex; align-items:center; margin-top:0.3rem; border-radius:999px; line-height:1.2; }
  .details-hint .icon{ stroke-width:2.4; flex-shrink:0; }
  .receipt-filters{ display:grid !important; grid-template-columns:1fr 1fr; gap:0.6rem; }
  .receipt-filters .range-cycle{ width:100%; min-width:0; min-height:44px; padding:0 0.95rem; border-radius:var(--r-sm); justify-content:flex-start; }
  .receipt-filters .rc-label{ flex:1; min-width:0; text-align:left; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  :root{ --track-h:66px; }
  .stat{ padding-bottom:2.1rem !important; }
  .stat-wave{ height:28px !important; }
  .item-name-line{ display:flex; align-items:center; gap:0.5rem; min-width:0; }
  .item-name-line .name{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .item-name-line{ width:100%; }
  .item-name-line .details-hint{ flex-shrink:0; margin:0 0.55rem 0 auto !important; }
  #panel-shopping .panel-head{ margin-bottom:0.5rem !important; }
  #panel-shopping .store-select-wrap{ margin:0 0 1rem !important; }
  #shop-store-select-btn{ width:auto !important; display:inline-flex !important; justify-content:flex-start; gap:0.3rem; min-height:36px !important; padding:0 0.75rem 0 0.9rem !important; border:none !important; border-radius:999px !important; box-shadow:none !important; font-size:var(--fs-base) !important; }
  #shop-store-select-btn .cselect-chev{ width:14px !important; height:14px !important; }
  .list-card #shopping-list{ background:none !important; box-shadow:none !important; border-radius:0 !important; }
  .list-add-row{ position:relative; display:flex; align-items:center; }
  #shopping-list:not(:empty) + .list-add-row{ box-shadow:inset 0 1px 0 #F1F2F4; }
  .list-add{ flex:1; align-self:stretch; display:flex; align-items:center; justify-content:center; gap:0.45rem; border:none; background:none; cursor:pointer; font-family:var(--display); font-weight:800 !important; }
  .list-add .icon{ stroke-width:2.4; }
  #clear-checked-btn{ margin-top:1rem !important; }
  .check, .add-toggle{ position:relative; width:26px !important; height:26px !important; border-width:2px !important; }
  .check::after, .add-toggle::after{ content:""; position:absolute; inset:-9px; }
  .check .icon, .add-toggle .icon{ width:14px !important; height:14px !important; stroke-width:2.6; }
  :is(#shopping-list, #items-list) .row{ padding:0.95rem 0.9rem !important; gap:0.85rem !important; }
  .drag-handle{ height:28px !important; }
  .drag-handle::after{ inset:-8px -6px !important; }
  .list-add *{ font-family:inherit !important; font-weight:inherit !important; }
  .list-card #items-list{ background:none !important; box-shadow:none !important; border-radius:0 !important; }
  #items-list:not(:empty) + .list-add-row{ box-shadow:inset 0 1px 0 #F1F2F4; }
  :root{ --content-inset:0.9rem; }
  .panel > .panel-head:not(.sub){ display:flex !important; justify-content:space-between !important; align-items:center !important; padding-left:var(--content-inset); padding-right:0.2rem; min-height:44px; }
  /* the tab title is a deliberate display size and stays out of the scale */
  .panel > .panel-head:not(.sub) h2{ font-size:min(2rem, 7.4vw) !important; font-weight:800 !important; line-height:1.1 !important; margin:0; }
  .search-wrap .icon{ left:var(--content-inset) !important; }
  .stat{ padding-left:var(--content-inset) !important; padding-right:var(--content-inset) !important; }
  .receipt-filters .range-cycle{ padding-left:var(--content-inset) !important; }
  :root{ --bg:#F5F5F1; --surface:#FFFFFF; --surface-2:#F0F0EB; --surface-3:#E6E6E0; --fill-page:#E8E8E2; --ink:#16171C; --ink-2:#55575F; --ink-3:#686B73; --hair:#EAEAE4; --grip:#C4C5CB; --brand:#3B45DD; --brand-press:#2F38C2; --grad:linear-gradient(135deg, #4750E6 0%, #2D63EE 100%); --amber-bg:#FBEFD6; --amber-ink:#875100; --danger:#D23B2F; --good:#1C8455; --font:"Sora", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", system-ui, sans-serif; --display:"Sora", -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, sans-serif; --accent:var(--brand); --ink-muted:var(--ink-2); --ink-faint:var(--ink-3); --focus:0 0 0 3px rgba(59,69,221,0.25); --card-shadow:0 1px 2px rgba(22,23,28,0.04), 0 3px 12px rgba(22,23,28,0.035);
    /* type: six steps, and nothing between them.
       cap  labels, captions, status chips, aisle and section headings
       sm   secondary row text, meta, timestamps, helper lines
       base body copy
       item row names, buttons, chips, menu rows: the text spine
       lg   card titles, sheet titles
       xl   sheet-page titles
       --fs-item is 1.0625rem, not 1rem: line 22 sets html{ font:-apple-system-body }, so the rem base
       is the iOS Dynamic Type size, while every input in the app is pinned to a literal 16px. At 1rem
       the spine renders SMALLER than the field text beside it at three of the seven text sizes.
       Deliberate display sizes stay literal and out of the scale: 2.6rem (.stat .value), 2rem
       (.panel-head h2), and the glyphs sized to their own circle (.st-logo b, .tg-face, .mem-avatar). */
    --fs-cap:0.72rem; --fs-sm:0.8rem; --fs-base:0.9rem; --fs-item:1.0625rem; --fs-lg:1.2rem; --fs-xl:1.5rem;
    /* spacing: six steps, 4px based */
    --s-1:0.25rem; --s-2:0.5rem; --s-3:0.75rem; --s-4:1rem; --s-5:1.5rem; --s-6:2rem;
    /* motion: five durations for five jobs, three curves */
    --d-tap:130ms; --d-quick:200ms; --d-move:320ms; --d-sheet:420ms; --d-story:620ms;
    --e-out:cubic-bezier(.2,.9,.25,1); --e-in:cubic-bezier(.4,0,1,1); --e-spring:cubic-bezier(.3,1.5,.5,1); --e-through:cubic-bezier(.4,0,.2,1); }
  html, body, :root:not([data-app-theme="dark"]) html, :root:not([data-app-theme="dark"]){ background:var(--bg) !important; }
  body{ color:var(--ink); -webkit-font-smoothing:antialiased; }
  html body :is(.name, .btn, .add-row, .list-add, .text-btn, .store-chip, .q-chip, .pop-item, .cselect, label, .compare-section-title, .stat-label, .toast, .edit-btn, .set-label, .range-cycle, .store-name-line){ font-family:var(--font) !important; font-weight:600 !important; letter-spacing:-0.01em !important; }
  html body :is(h1, h2, h3, .name, .btn, .add-row, .list-add, .text-btn, .store-chip, .q-chip, .pop-item, .cselect, label, .compare-section-title, .stat-label, .toast, .edit-btn, .set-label, .range-cycle, .store-name-line) *:not(svg):not(path):not(use){ font-family:inherit !important; font-weight:inherit !important; }
  html body .row .name{ font-family:var(--font) !important; font-weight:600 !important; font-size:var(--fs-item) !important; letter-spacing:-0.015em !important; }
  html body :is(input, textarea, .modal-message, .cmp-stats, .about-line){ font-family:var(--font) !important; font-weight:400 !important; }
  /* 500 is secondary text: meta lines, timestamps, helper copy. Every selector here has no weight
     declaration of its own, so without this they would fall from the old blanket 500 to 400.
     No #id in this list: :is() takes the specificity of its most specific argument, and one id would
     drag all twenty of these to ID level where no class rule could ever override them again. */
  html body :is(.row-meta, .note, .sub, .field-hint, .modal-sub, .rv-date, .receipt-items, .detect-hint,
    .pop-empty, .scan-status, .voice-status, .due-label, .auth-msg, .auth-or, .share-or, .share-note,
    .field-note, .ac-wait, .stat-back, .un-sub, .scanner-msg, .auth-switch-line, .ac-text){ font-weight:500; }
  html body :is(.lc-row .set-value, .rv-line .rv-qty, .mem-row .mem-tag, .owed-row .ow-sub){ font-weight:500; }
  /* menu rows are the spine, like every other row name */
  html body .pop-item{ font-weight:600 !important; }
  html body .mem-row .mem-name{ font-weight:600; }
  /* .num wakes up at 600 now that the blanket is gone; inside a pill that sets its own weight, inherit */
  html body .tg-owe .num, html body .ow-amt.num, html body .fb-amt.num{ font-weight:inherit; }
  html body :is(.panel-head h2, .stat .value, .brand-name){ font-family:var(--display) !important; font-weight:800 !important; letter-spacing:-0.01em !important; }
  html body :is(dialog .modal-head h3, .modal-titles h3){ font-family:var(--display) !important; font-weight:700 !important; letter-spacing:-0.01em !important; }
  html body input.title-input{ font-family:var(--display) !important; font-weight:800 !important; background:none !important; border:none !important; box-shadow:none !important; padding:0 !important; min-height:0 !important; }
  html body input.title-input:focus{ background:none !important; border:none !important; box-shadow:none !important; }
  html body .field label, html body form > label{ font-size:var(--fs-sm) !important; color:var(--ink-2) !important; font-weight:600 !important; }
  .row-meta{ color:var(--ink-3) !important; }
  html body svg.icon{ stroke-width:1.8; }
  html body :is(.list-add, .text-btn, .head-btn, .modal-close, #bottom-nav, .search-wrap, .photo-add, .btn, .stepper, .store-chip, .pop-item, .range-cycle, .cselect) .icon, html body .icon.row-chev{ stroke-width:1.8 !important; }
  html body :is(.check, .add-toggle) .icon{ stroke-width:2.6 !important; }
  .head-btn{ width:44px; height:44px; margin-right:-0.35rem; display:flex; align-items:center; justify-content:center; border:none; border-radius:50%; background:none; color:var(--ink-2); cursor:pointer; flex-shrink:0; }
  .head-btn .icon{ width:24px !important; height:24px !important; }
  .head-btn:active{ background:var(--fill-page); }
  html body .list-card{ background:var(--surface); border-radius:var(--r-md); box-shadow:var(--card-shadow); overflow:hidden; }
  html body .list-card:has(.reordering){ overflow:visible; }
  html body :is(#shopping-list, #items-list, #stores-list, #receipts-list, #cart-list, #store-items-list){ background:none !important; box-shadow:none !important; border-radius:0 !important; }
  html body :is(#shopping-list, #items-list, #stores-list, #receipts-list, #cart-list, #store-items-list) .row{ position:relative; padding:0.85rem var(--content-inset) !important; gap:0.8rem !important; min-height:54px; background:var(--surface) !important; box-shadow:none !important; border-radius:0 !important; }
  html body :is(#shopping-list, #items-list, #stores-list, #receipts-list, #cart-list, #store-items-list) .swipe-wrap + .swipe-wrap .row, html body :is(#shopping-list, #items-list, #stores-list, #receipts-list, #cart-list, #store-items-list) > .row + .row{ box-shadow:none !important; }
  html body :is(#shopping-list, #items-list, #stores-list, #receipts-list, #cart-list, #store-items-list) .swipe-wrap + .swipe-wrap .row::before, html body :is(#shopping-list, #items-list, #stores-list, #receipts-list, #cart-list, #store-items-list) > .row + .row::before{ content:""; position:absolute; top:0; right:0; left:calc(var(--content-inset) + 26px + 0.8rem); height:1px; background:var(--hair); pointer-events:none; }
  html body :is(#stores-list, #receipts-list) .swipe-wrap + .swipe-wrap .row::before, html body #store-items-list > .row + .row::before{ left:var(--content-inset); }
  .list-add-row{ min-height:54px !important; }
  html body :is(#shopping-list, #items-list, #stores-list, #receipts-list):not(:empty) + .list-add-row{ box-shadow:inset 0 1px 0 var(--hair) !important; }
  html body .list-add{ color:var(--brand-text) !important; font-size:var(--fs-item) !important; }
  html body .list-add .icon{ width:18px !important; height:18px !important; }
  html body .list-add:active{ background:var(--surface-2) !important; }
  html body .drag-handle{ color:var(--grip) !important; }
  html body .drag-handle .icon{ opacity:1 !important; }
  html body :is(#shopping-list, #items-list, #stores-list, #receipts-list, #cart-list, #store-items-list) .aisle-head{ padding:0.85rem var(--content-inset) 0.1rem; font-family:var(--font) !important; font-size:var(--fs-cap); font-weight:600 !important; color:var(--ink-3); letter-spacing:0.01em; }
  html body :is(#shopping-list, #items-list, #stores-list, #receipts-list, #cart-list, #store-items-list) .aisle-group + .aisle-group{ box-shadow:inset 0 1px 0 var(--hair); }
  html body :is(#shopping-list, #items-list, #stores-list, #receipts-list, #cart-list, #store-items-list) .aisle-rows > .swipe-wrap:first-child .row{ padding-top:0.55rem !important; }
  html body :is(#shopping-list, #items-list, #stores-list, #receipts-list, #cart-list, #store-items-list) .g-not .row .name{ color:var(--ink-2); }
  html body .check{ border-color:var(--ink-3) !important; background:transparent !important; color:transparent !important; }
  html body .check.on{ background:var(--brand) !important; border-color:var(--brand) !important; color:#FFFFFF !important; }
  /* in the Checked off card the tick means settled, so it steps back */
  html body #cart-list .check.on{ background:var(--ink-3) !important; border-color:var(--ink-3) !important; }
  html body .add-toggle{ border-radius:var(--r-sm) !important; border-color:var(--ink-3) !important; background:transparent !important; color:var(--ink-2) !important; }
  html body .add-toggle.on{ background:var(--brand) !important; border-color:var(--brand) !important; color:#FFFFFF !important; }
  html body .add-toggle.add-new{ border-color:var(--brand) !important; color:var(--brand-text) !important; }
  .name-line{ display:flex; align-items:baseline; min-width:0; }
  .name-line .name{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .qty{ margin-left:0.45rem; color:var(--brand-text); font-weight:600 !important; font-size:var(--fs-base); flex-shrink:0; }
  .row-price, .row-value{ flex-shrink:0; color:var(--ink-2); font-size:var(--fs-base); font-weight:500 !important; font-variant-numeric:tabular-nums; }
  .receipt-row .row-value{ color:var(--ink); font-weight:600 !important; }
  .item-name-line .row-price{ margin-left:auto; margin-right:0.55rem; }
  .row-chev{ width:18px !important; height:18px !important; color:var(--grip); flex-shrink:0; margin-right:-0.25rem; }
  #panel-shopping .store-select-wrap{ display:flex; align-items:center; justify-content:flex-start; gap:0.8rem; padding-left:var(--content-inset); }
  #shop-store-select-btn{ background:var(--fill-page) !important; color:var(--ink) !important; font-weight:600 !important; }
  #shop-store-select-btn .cselect-chev{ color:var(--ink-2) !important; }
  #shop-store-select-btn.is-active{ background:var(--brand) !important; color:#FFFFFF !important; }
  #shop-store-select-btn.is-active .cselect-chev{ color:#FFFFFF !important; }
  #clear-checked-btn{ display:none !important; }
  .cart-section{ margin-top:1.5rem; }
  .cart-section .list-card{ position:relative; overflow:hidden; }
  .trip-sweep{ position:absolute; inset:0; z-index:2; pointer-events:none; will-change:transform;
    background:linear-gradient(100deg, transparent 0%, var(--brand-soft) 42%, var(--brand-soft) 58%, transparent 100%); }
  .section-head{ display:flex; align-items:center; justify-content:space-between; padding:0 0.1rem 0.35rem var(--content-inset); }
  .section-head > span{ font-size:var(--fs-sm); font-weight:600 !important; color:var(--ink-3); }
  .text-btn{ border:none; background:none; color:var(--brand-text); font-size:var(--fs-base); min-height:44px; padding:0 0.75rem; cursor:pointer; border-radius:var(--r-sm); }
  .text-btn:active{ background:var(--fill-page); }
  html body .details-hint{ background:var(--amber-bg) !important; color:var(--amber-ink) !important; font-weight:600 !important; }
  html body #pick-item-list{ background:var(--surface-2) !important; border-radius:var(--r-md); }
  html body #pick-item-list .row{ padding:0.75rem var(--content-inset) !important; }
  html body #pick-item-list .row + .row{ box-shadow:inset 0 1px 0 var(--surface-3) !important; }
  #pick-item-list .pick-head{ padding:0.85rem var(--content-inset) 0.2rem; font-size:var(--fs-cap); font-weight:600 !important; color:var(--ink-3); }
  #pick-item-list .pick-head:not(:first-child){ box-shadow:inset 0 1px 0 var(--surface-3); margin-top:0.2rem; }
  html body #pick-item-list .pick-head + .row{ box-shadow:none !important; }
  html body .pick-quick .name{ color:var(--brand-text) !important; }
  html body :is(input[type="text"], input[type="number"], input[type="date"], textarea){ background:var(--surface-2) !important; border:1px solid transparent !important; border-radius:var(--r-sm) !important; min-height:48px; padding:0.7rem 0.85rem; font-size:16px !important; color:var(--ink) !important; box-shadow:none !important; }
  html body :is(input, textarea):focus{ background:var(--surface) !important; border-color:var(--brand) !important; box-shadow:var(--focus) !important; outline:none; }
  /* a focusable field must never compute under 16px or iOS Safari zooms the page on focus, and the
     rem base here is the Dynamic Type size, not 16px */
  html body input[readonly]{ background:transparent !important; border-color:transparent !important; box-shadow:none !important; font-weight:600 !important; font-size:max(var(--fs-lg), 16px) !important; padding-left:0.1rem; }
  html body #panel-items .search-wrap input{ background:var(--fill-page) !important; }
  html body .search-wrap input{ padding-left:calc(var(--content-inset) + 28px) !important; }
  html body dialog .cselect:not(.pill){ background:var(--surface-2) !important; border:1px solid transparent !important; border-radius:var(--r-sm) !important; min-height:48px !important; color:var(--ink) !important; font-weight:400 !important; }
  html body dialog .sheet-group .cselect{ width:auto !important; max-width:62%; background:none !important; border:none !important; box-shadow:none !important; padding:0 !important; min-height:44px !important; justify-content:flex-end; gap:0.35rem; color:var(--ink-2) !important; font-weight:400 !important; }
  html body .receipt-filters .range-cycle{ background:var(--fill-page) !important; color:var(--ink) !important; }
  html body .btn-primary{ background:var(--grad) !important; color:#FFFFFF !important; border:none !important; border-radius:var(--r-md) !important; min-height:50px; box-shadow:0 1px 2px rgba(22,23,28,0.12) !important; }
  html body .btn-primary:active{ filter:brightness(0.93); }
  html body .btn:not(.btn-primary):not(.btn-danger):not(.btn-ghost-danger), html body .btn-soft{ background:var(--surface-2) !important; color:var(--ink) !important; border:none !important; box-shadow:none !important; }
  html body .btn:not(.btn-primary):not(.btn-danger):not(.btn-ghost-danger):active{ background:var(--surface-3) !important; }
  html body .btn-danger{ background:var(--danger) !important; color:#FFFFFF !important; border:none !important; }
  html body .btn-ghost-danger{ background:none !important; color:var(--danger) !important; }
  .text-danger-btn{ display:block; width:100%; min-height:48px; margin-top:0.9rem; border:none; background:none; color:var(--danger); font-size:var(--fs-item); cursor:pointer; border-radius:var(--r-sm); }
  html body .text-danger-btn{ font-family:var(--font) !important; font-weight:600 !important; }
  .text-danger-btn:active{ background:#FBECEA; }
  html body :is(.photo-add, .photo-pick){ background:transparent !important; border:1px solid var(--surface-3) !important; color:var(--ink-2) !important; border-radius:var(--r-md) !important; min-height:54px; font-weight:600 !important; }
  html body :is(.photo-add, .photo-pick) .icon{ color:var(--ink-2) !important; }
  html body :is(.photo-add, .photo-pick):active{ background:var(--surface-2) !important; }
  html body .list-add.line-add{ width:100%; flex:none; min-height:46px; margin:0.35rem 0 1rem; padding:0 1rem; background:var(--surface-2) !important; border-radius:var(--r-sm); }
  html body .modal-close{ background:var(--surface-2) !important; color:var(--ink-2) !important; }
  .sheet-group{ background:var(--surface-2); border-radius:var(--r-md); padding:0 var(--content-inset); margin:0 0 1rem; }
  .sheet-group .set-row{ display:flex; align-items:center; justify-content:space-between; gap:0.8rem; min-height:52px; width:100%; background:none; border:none; padding:0; text-align:left; color:var(--ink); font-size:var(--fs-item); box-shadow:none; }
  .sheet-group .set-row + .set-row{ box-shadow:inset 0 1px 0 var(--surface-3); }
  html body .sheet-group :is(.set-row label, .set-label){ margin:0 !important; font-size:var(--fs-item) !important; color:var(--ink) !important; font-weight:600 !important; }
  .set-link{ cursor:pointer; }
  .set-link .set-label{ flex:1; }
  .set-link:active{ background:var(--surface-3); }
  .set-value{ color:var(--ink-3); font-weight:400 !important; }
  html body .set-danger{ justify-content:center !important; color:var(--danger) !important; cursor:pointer; font-family:var(--font) !important; font-weight:600 !important; }
  .cmp-stats{ margin:-0.35rem 0 0.9rem; color:var(--ink-2); font-size:var(--fs-base); }
  html body #compare-modal-body-prices{ background:none !important; box-shadow:none !important; padding:0 !important; }
  html body .compare-section-title{ font-size:var(--fs-sm) !important; color:var(--ink-3) !important; margin:0.2rem 0 0.55rem !important; }
  .stepper{ display:inline-flex; align-items:center; background:var(--surface); border-radius:var(--r-sm); box-shadow:inset 0 0 0 1px var(--surface-3); }
  .stepper button{ position:relative; width:40px; height:36px; border:none; background:none; color:var(--ink); display:flex; align-items:center; justify-content:center; cursor:pointer; border-radius:var(--r-sm); }
  .stepper button::after{ content:""; position:absolute; inset:-4px 0; }
  .stepper button:active{ background:var(--surface-2); }
  .stepper button .icon{ width:16px !important; height:16px !important; }
  .stepper-val{ min-width:1.5rem; text-align:center; font-weight:600 !important; }
  html body #store-items-list .thumb, html body .receipt-row .thumb{ width:40px; height:40px; border-radius:var(--r-sm); object-fit:cover; }
  html body .list-card:has(> #store-items-list:empty){ display:none; }
  html body .toast{ background:var(--ink) !important; color:#FFFFFF !important; border-radius:999px !important; box-shadow:0 10px 30px rgba(22,23,28,0.2) !important; font-weight:500 !important; }
  html body .toast-action{ color:#B3B8FF !important; font-weight:600 !important; }
  #bottom-nav #nav-highlight{ background:var(--brand-wave-light) no-repeat bottom / 100% 32%, var(--grad) !important; }
  html body .stat{ background:var(--grad) !important; display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; }
  .stat-main{ position:relative; z-index:1; min-width:0; flex:1; }
  .stat-bars{ position:relative; z-index:1; display:flex; align-items:flex-end; gap:4px; height:44px; margin-bottom:0.15rem; flex-shrink:0; }
  .stat-bars span{ width:7px; border-radius:999px; background:rgba(255,255,255,0.3); }
  .stat-bars span.now{ background:#FFFFFF; }
  html body .stat .sub{ color:rgba(255,255,255,0.85) !important; }
  html body :is(#shopping-list, #items-list, #stores-list, #receipts-list, #cart-list, #store-items-list) .swipe-wrap{ margin:0 !important; border-radius:0 !important; }
  html body dialog input.title-input{ font-family:var(--display) !important; font-weight:700 !important; font-size:max(var(--fs-lg), 16px) !important; background:none !important; border:none !important; box-shadow:none !important; padding:0 !important; min-height:0 !important; }
  html body dialog input.title-input:focus{ background:none !important; border:none !important; box-shadow:none !important; }
  html body .compare-section-title{ border-top:none !important; padding-top:0 !important; margin-top:0.4rem !important; }
  html body #modal-compare .compare-section-title::before, html body #modal-compare .compare-section-title::after{ display:none !important; }
  html body dialog .list-card{ background:var(--surface-2); box-shadow:none; border-radius:var(--r-md); }
  html body dialog :is(#stores-list, #store-items-list) .row{ background:var(--surface-2) !important; }
  html body dialog :is(#stores-list, #store-items-list) .swipe-wrap + .swipe-wrap .row::before, html body dialog #store-items-list > .row + .row::before{ background:var(--surface-3); }
  html body dialog #stores-list:not(:empty) + .list-add-row{ box-shadow:inset 0 1px 0 var(--surface-3) !important; }
  html body dialog .list-add:active{ background:var(--surface-3) !important; }
  html body .details-hint{ gap:0.2rem !important; padding:0.16rem 0.5rem 0.16rem 0.38rem !important; font-size:var(--fs-cap) !important; }
  html body .details-hint .icon{ width:12px !important; height:12px !important; }
  .stat-bars span{ min-height:4px; }
  html body label.title-edit{ font-family:var(--display) !important; font-weight:800 !important; }
  html body label.title-edit .icon{ color:var(--ink-3); }
  #receipt-photo-field{ display:none !important; }
  .scan-banner{ display:flex; align-items:center; gap:0.85rem; background:var(--surface-2); border-radius:var(--r-md); padding:0.55rem; margin:0 0 1rem; }
  .scan-banner img{ width:54px; height:70px; object-fit:cover; border-radius:var(--r-sm); flex-shrink:0; background:var(--surface-3); }
  .scan-status{ display:flex; align-items:center; gap:0.6rem; color:var(--ink-2); font-size:var(--fs-base); min-width:0; }
  .scan-status .spinner{ flex-shrink:0; }
  html body #detect-hint{ display:flex; align-items:center; justify-content:space-between; gap:0.6rem; background:var(--amber-bg) !important; color:var(--amber-ink) !important; border-radius:var(--r-sm); padding:0.35rem 0.35rem 0.35rem 0.8rem; font-size:var(--fs-base); margin-bottom:0.9rem; }
  html body #detect-hint[hidden]{ display:none; }
  .items-toggle{ display:inline-flex; align-items:center; gap:0.35rem; margin:-0.1rem 0 0.8rem -0.7rem; }
  .items-toggle .icon{ width:16px !important; height:16px !important; }
  html body input[type="date"].inline-date{ background:none !important; border:none !important; box-shadow:none !important; min-height:44px !important; width:auto !important; padding:0 !important; text-align:right; color:var(--ink-2) !important; font-weight:400 !important; }
  .list-add-voice{ position:absolute; right:0.45rem; top:50%; transform:translateY(-50%); width:44px; height:44px; border:none; border-radius:var(--r-sm); background:none; color:var(--brand-text); display:flex; align-items:center; justify-content:center; cursor:pointer; }
  .list-add-voice:active{ background:var(--surface-2); }
  .list-add-voice .icon{ width:21px !important; height:21px !important; stroke-width:1.8 !important; }
  @keyframes voicePulse{ 0%{ box-shadow:0 0 0 0 rgba(59,69,221,0.35); } 100%{ box-shadow:0 0 0 18px rgba(59,69,221,0); } }
  .voice-status{ min-height:1.35em; margin:0; color:var(--ink-2); font-size:var(--fs-base); text-align:center; }
  .store-prices .store-row{ min-height:54px; cursor:pointer; }
  .store-row-main{ display:flex; flex-direction:column; flex:1; min-width:0; padding:0.5rem 0; }
  .store-row-note{ font-size:var(--fs-sm); color:var(--amber-ink); font-weight:500 !important; margin-top:0.1rem; }
  html body .store-row-price{ font-weight:600 !important; color:var(--ink); font-variant-numeric:tabular-nums; }
  .tag-cheap{ font-size:var(--fs-cap); font-weight:600 !important; color:var(--good); background:var(--good-soft); border-radius:999px; padding:0.14rem 0.5rem; white-space:nowrap; }
  html body .pop-new, html body .pop-new .icon{ color:var(--brand-text) !important; }
  .check-line{ display:flex; align-items:center; gap:0.65rem; min-height:44px; }
  .check-line input{ accent-color:var(--brand); width:20px; height:20px; }
  #receipt-scan-text{ display:inline-flex; align-items:center; gap:0.4rem; }
  .scan-ok{ width:16px !important; height:16px !important; color:var(--good); stroke-width:2.4 !important; flex-shrink:0; }
  html body :is(input[type="email"], input[type="password"]){ background:var(--surface-2) !important; border:1px solid transparent !important; border-radius:var(--r-sm) !important; min-height:48px; padding:0.7rem 0.85rem; font-size:16px !important; color:var(--ink) !important; box-shadow:none !important; width:100%; }
  .account-email{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .auth-msg{ margin:-0.2rem 0 0.9rem; font-size:var(--fs-base); color:var(--danger); }
  .auth-msg.good{ color:var(--good); }
  .auth-links{ display:flex; justify-content:space-between; gap:0.5rem; margin-top:0.6rem; }
  .auth-links .text-btn{ padding:0 0.4rem; font-size:var(--fs-base); }
  .auth-links .text-btn[hidden]{ display:none; }
  .store-picks{ display:flex; flex-wrap:wrap; gap:0.5rem; margin-bottom:1rem; }
  .store-pick{ border:none; border-radius:999px; min-height:40px; padding:0 0.95rem; background:var(--surface-2); color:var(--ink); font-size:var(--fs-base); cursor:pointer; }
  html body .store-pick{ font-family:var(--font) !important; font-weight:600 !important; }
  .store-pick.on{ background:var(--brand); color:#FFFFFF; }
  html body :is(#shopping-list, #items-list, #receipts-list) .sk-row{ padding:0.95rem var(--content-inset); }
  .sk-box{ width:26px !important; height:26px !important; border-radius:50% !important; }
  .store-logo{ position:relative; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; width:32px; height:32px; border-radius:var(--r-sm); overflow:hidden; background:var(--surface); box-shadow:inset 0 0 0 1px var(--surface-3); }
  .store-logo .mono{ font-family:var(--font); font-weight:700 !important; font-size:var(--fs-base); color:var(--ink-2); }
  .store-logo .logo-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; padding:4px; background:#FFFFFF; }
  .store-logo.sm{ width:28px; height:28px; border-radius:var(--r-sm); }
  .store-logo.xs{ width:22px; height:22px; border-radius:var(--r-sm); margin-right:0.1rem; }
  .store-logo.xs .mono{ font-size:var(--fs-cap); }
  .store-logo.xs .logo-img{ padding:2px; }
  .store-logo.lg{ width:40px; height:40px; border-radius:var(--r-sm); }
  .store-logo.lg .logo-img{ padding:5px; }
  .store-prices .store-row{ gap:0.75rem; }
  html body #stores-list .swipe-wrap + .swipe-wrap .row::before{ left:calc(var(--content-inset) + 32px + 0.8rem) !important; }
  html body #receipts-list .swipe-wrap + .swipe-wrap .row::before{ left:calc(var(--content-inset) + 40px + 0.8rem) !important; }
  .has-logos .cselect-label{ display:flex; align-items:center; gap:0.45rem; min-width:0; }
  .has-logos .cselect-text{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  #shop-store-select-btn .store-logo{ margin-left:-0.35rem; }
  .pop-item .store-logo{ margin-right:0.55rem; }
  .store-prices .swipe-wrap{ background:var(--surface-2); }
  .store-prices .swipe-content{ background:var(--surface-2) !important; }
  .store-prices .swipe-wrap + .swipe-wrap .store-row{ box-shadow:inset 0 1px 0 var(--surface-3) !important; }
  .pick-stores{ display:flex; gap:0.45rem; overflow-x:auto; margin:0 calc(-1 * var(--content-inset)) 0.8rem; padding:0 var(--content-inset) 0.1rem; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
  .pick-stores::-webkit-scrollbar{ display:none; }
  .pick-store{ display:inline-flex; align-items:center; gap:0.4rem; flex-shrink:0; min-height:38px; padding:0 0.85rem; border:none; border-radius:999px; background:var(--surface-2); color:var(--ink); font-size:var(--fs-base); cursor:pointer; white-space:nowrap; }
  html body .pick-store{ font-family:var(--font) !important; font-weight:600 !important; }
  .pick-store .store-logo{ margin-left:-0.45rem; }
  .pick-store.on{ background:var(--brand); color:#FFFFFF; }
  .splash{ position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center; background:var(--bg); transition:opacity 280ms ease; }
  .splash.gone{ opacity:0; pointer-events:none; }
  .splash-mark{ width:88px; height:88px; filter:drop-shadow(0 6px 18px rgba(59,69,221,0.22)); }
  @media (prefers-reduced-motion: reduce){
    .splash{ transition:none; }
  }
  .qty-pill{ flex-shrink:0; min-width:40px; height:30px; padding:0 0.55rem; border:none; border-radius:999px; background:var(--surface-2); color:var(--ink-2); font-size:var(--fs-sm); cursor:pointer; position:relative; }
  html body .qty-pill{ font-family:var(--font) !important; font-weight:600 !important; }
  .qty-pill::after{ content:""; position:absolute; inset:-7px -3px; }
  .qty-pill.more{ background:var(--brand-soft); color:var(--brand-text); }
  .qty-pill:active{ background:var(--surface-3); }
  .stepper-sm{ flex-shrink:0; }
  .stepper-sm button{ width:34px; height:32px; }
  .qty-menu{ justify-content:center; }
  .qty-menu .stepper{ box-shadow:none; background:none; }
  .qty-menu .stepper button{ width:44px; height:40px; }
  .qty-menu .stepper-val{ font-size:var(--fs-item); }
  html body :is(.btn, .list-add, .text-btn, .qty-pill, .pick-store, .store-pick, .head-btn, .range-cycle, #shop-store-select-btn, .modal-close, .voice-mic, .photo-add, .photo-pick, .list-add-voice, .text-danger-btn, .set-link, .check, .add-toggle, .stepper button){ transition:transform 200ms var(--e-out), background-color 160ms ease, filter 160ms ease, opacity 160ms ease; }
  html body :is(.btn, .list-add, .text-btn, .qty-pill, .pick-store, .store-pick, .head-btn, .range-cycle, #shop-store-select-btn, .modal-close, .photo-add, .photo-pick, .list-add-voice, .text-danger-btn, .stepper button):active{ transform:scale(0.96); }
  html body :is(.check, .add-toggle):active{ transform:scale(0.88); }
  html body .set-link:active{ transform:scale(0.99); }
  html body .list-card .swipe-content:has(.row-click:active) .row, html body .list-card .row.row-click:active{ background:var(--surface-2) !important; transition:background-color 60ms; }
  html body #pick-item-list .row.row-click:active{ background:var(--surface-3) !important; }
  #bottom-nav button .icon{ transition:transform 200ms var(--e-out) !important; }
  #bottom-nav button:active .icon{ transform:scale(0.86) !important; }
  #main-area{ transform-origin:50% 0; transition:transform 460ms var(--e-out); }
  html.sheet-open #main-area{ transform:scale(0.955) translateY(6px); }
  #bottom-nav{ transition:transform 460ms var(--e-out), opacity 320ms ease; }
  html.sheet-open #bottom-nav{ opacity:0.6; }
  .add-toggle.pop{ animation:checkPop 280ms var(--e-spring); }
  .stat-bars span{ transform-origin:50% 100%; }
  .splash-mark{ transition:transform 420ms var(--e-out); }
  .splash.gone .splash-mark{ transform:scale(1.08); }
  @media (prefers-reduced-motion: reduce){
    html.sheet-open #main-area{ transform:none; }
    html body :is(.btn, .list-add, .text-btn, .qty-pill, .pick-store, .store-pick, .head-btn, .range-cycle, #shop-store-select-btn, .modal-close, .voice-mic, .photo-add, .photo-pick, .list-add-voice, .text-danger-btn, .set-link, .check, .add-toggle, .stepper button):active{ transform:none; }
    .add-toggle.pop, .splash.gone .splash-mark{ animation:none; transform:none; }
  }
  #bottom-nav .nav-plus{ display:flex !important; align-items:center; justify-content:center; background:none !important; border:none; min-width:0 !important; cursor:pointer; }
  .nav-plus-disc{ display:flex; align-items:center; justify-content:center; }
  .lc-group .lc-row{ cursor:pointer; gap:0.75rem; justify-content:flex-start; }
  .lc-row input{ accent-color:var(--brand); width:22px; height:22px; flex-shrink:0; margin:0; }
  .lc-row .set-label{ flex:1; min-width:0; }
  .lc-row .set-value{ font-size:var(--fs-sm); }
  #lc-else-title{ margin-top:0.2rem !important; }
  #bottom-nav, .bottom-nav{ overflow:visible !important; }
  .plus-fan{ position:fixed; inset:0; z-index:25; }
  .plus-fan[hidden]{ display:none; }
  .fan-dim{ position:absolute; inset:0; background:rgba(22,23,28,0.3); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); }
  .fan-btn{ position:absolute; display:flex; align-items:center; border:none; background:none; padding:0; cursor:pointer; }
  .fan-disc{ width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center; transition:transform 160ms var(--e-out); }
  .fan-disc .icon{ width:24px !important; height:24px !important; }
  .fan-btn:active .fan-disc{ transform:scale(0.92); }
  .fan-label{ padding:3px 9px; border-radius:999px; background:var(--surface); color:var(--ink); font-size:var(--fs-sm); white-space:nowrap; }
  html body .fan-label{ font-family:var(--font) !important; font-weight:600 !important; }
  :root{ --plus-size:var(--track-h); --plus-gap:10px; }
  html body #bottom-nav{ background:none !important; box-shadow:none !important; }
  html body #bottom-nav::before{ border-radius:var(--bar-r) !important; }
  html body #bottom-nav .nav-plus{ min-height:0 !important; padding:0 !important; }
  html body .fan-btn{ left:auto; right:calc(100vw - var(--cx) - 28px); top:calc(var(--cy) - 28px); width:auto; margin:0; flex-direction:row-reverse; gap:10px; transform-origin:calc(100% - 28px) 28px; }
  .scanner{ position:fixed; inset:0; z-index:150; color:#FFFFFF; }
  .scanner.in{ opacity:1; transform:none; }
  .scanner[hidden]{ display:none; }
  #scanner-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity 320ms ease; }
  .scanner.ready #scanner-video{ opacity:1; }
  .scanner-frame{ position:absolute; left:11%; right:11%; top:15%; bottom:25%; border-radius:var(--r-md); box-shadow:0 0 0 200vmax rgba(0,0,0,0.38); pointer-events:none; }
  .scanner-frame i{ position:absolute; width:30px; height:30px; border:3px solid #FFFFFF; }
  .scanner-frame i:nth-child(1){ left:-3px; top:-3px; border-right:0; border-bottom:0; border-top-left-radius:var(--r-md); }
  .scanner-frame i:nth-child(2){ right:-3px; top:-3px; border-left:0; border-bottom:0; border-top-right-radius:var(--r-md); }
  .scanner-frame i:nth-child(3){ left:-3px; bottom:-3px; border-right:0; border-top:0; border-bottom-left-radius:var(--r-md); }
  .scanner-frame i:nth-child(4){ right:-3px; bottom:-3px; border-left:0; border-top:0; border-bottom-right-radius:var(--r-md); }
  .scanner-top{ position:absolute; left:0; right:0; top:0; display:grid; grid-template-columns:44px 1fr 44px; align-items:center; text-align:center; padding:calc(env(safe-area-inset-top) + 10px) 16px 10px; font-size:var(--fs-item); }
  html body .scanner-top span{ font-family:var(--font) !important; font-weight:600 !important; }
  .scanner-x{ width:40px; height:40px; border-radius:50%; border:none; background:rgba(255,255,255,0.16); color:#FFFFFF; display:flex; align-items:center; justify-content:center; cursor:pointer; }
  .scanner-x .icon{ width:20px !important; height:20px !important; }
  .scanner-bottom{ position:absolute; left:0; right:0; bottom:0; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding:18px 28px calc(env(safe-area-inset-bottom) + 26px); }
  .scanner-shutter{ width:78px; height:78px; border-radius:50%; border:4px solid #FFFFFF; background:none; padding:5px; cursor:pointer; }
  .scanner-shutter span{ display:block; width:100%; height:100%; border-radius:50%; background:#FFFFFF; transition:transform 130ms var(--e-out); }
  .scanner-shutter:active span{ transform:scale(0.88); }
  .scanner-side{ justify-self:start; display:flex; flex-direction:column; align-items:center; gap:4px; border:none; background:none; color:#FFFFFF; font-size:var(--fs-sm); cursor:pointer; padding:6px; }
  html body .scanner-side span{ font-family:var(--font) !important; font-weight:500 !important; }
  .scanner-side .icon{ width:26px !important; height:26px !important; }
  .scanner-msg{ position:absolute; left:12%; right:12%; top:44%; margin:0; text-align:center; font-size:var(--fs-item); display:none; }
  .scanner.denied .scanner-msg{ display:block; }
  .scanner-flash{ position:absolute; inset:0; background:#FFFFFF; opacity:0; pointer-events:none; }
  .scanner.flash .scanner-flash{ animation:scanFlash 420ms ease-out; }
  @keyframes scanFlash{ 0%{ opacity:0.85; } 100%{ opacity:0; } }
  .voice-live{ display:flex; flex-direction:column; align-items:center; gap:0.85rem; width:100%; padding:0.3rem 0 0.4rem; border:none; background:none; cursor:pointer; color:var(--ink); }
  .voice-wave{ display:flex; align-items:center; justify-content:center; gap:5px; height:40px; }
  .voice-wave i{ display:block; width:6px; height:36px; border-radius:999px; background:var(--brand); opacity:0.3; transform:scaleY(0.222); transform-origin:center; transition:opacity 200ms ease; }
  #modal-voice.listening .voice-wave i{ opacity:1; animation:voiceBar 1s ease-in-out infinite; }
  #modal-voice.listening .voice-wave i:nth-child(2){ animation-delay:0.14s; }
  #modal-voice.listening .voice-wave i:nth-child(3){ animation-delay:0.28s; }
  #modal-voice.listening .voice-wave i:nth-child(4){ animation-delay:0.42s; }
  #modal-voice.listening .voice-wave i:nth-child(5){ animation-delay:0.56s; }
  @keyframes voiceBar{ 0%, 100%{ height:8px; } 50%{ height:32px; } }
  .voice-heard{ display:block; min-height:1.3em; font-size:var(--fs-lg); line-height:1.3; text-align:center; color:var(--ink); }
  html body .voice-heard{ font-family:var(--font) !important; font-weight:500 !important; }
  .voice-heard.empty{ min-height:0; }
  html body #voice-status{ text-align:center; margin:0 0 0.4rem; min-height:1.2em; }
  .voice-chips{ display:flex; flex-wrap:wrap; justify-content:center; gap:0.45rem; min-height:38px; margin:0.3rem 0 1rem; }
  .voice-chip{ display:inline-flex; align-items:center; gap:0.25rem; padding:0.3rem 0.25rem 0.3rem 0.85rem; border-radius:999px; background:var(--surface-2); color:var(--ink); font-size:var(--fs-base); }
  html body .voice-chip{ font-family:var(--font) !important; font-weight:600 !important; }
  .voice-chip b{ color:var(--brand-text); font-weight:600; }
  .voice-chip.known{ background:var(--brand-soft); }
  .voice-chip.new{ animation:chipIn 280ms var(--e-out); }
  @keyframes chipIn{ from{ opacity:0; transform:translateY(6px) scale(0.95); } }
  .voice-chip button{ width:26px; height:26px; border:none; background:none; color:var(--ink-3); display:flex; align-items:center; justify-content:center; cursor:pointer; border-radius:50%; }
  .voice-chip button .icon{ width:13px !important; height:13px !important; stroke-width:2.4 !important; }
  html body #voice-text{ margin-bottom:0.9rem; resize:none; }
  .voice-actions{ display:flex; align-items:center; gap:0.6rem; }
  .voice-actions .btn{ flex:1; }
  .voice-actions .text-btn[hidden]{ display:none; }
  @media (prefers-reduced-motion: reduce){
    #modal-voice.listening .voice-wave i, .voice-chip.new, .scanner.flash .scanner-flash{ animation:none; }
    .scanner{ transform:none; }
  }
  :root{ --plus-r:39px; --plus-ring:6px; }
  html body #bottom-nav{ padding-right:calc(var(--plus-r) * 2 + var(--plus-ring)) !important; filter:none; }
  html body .nav-plus-disc{ box-shadow:0 6px 14px rgba(22,23,28,0.10), 0 1px 1px rgba(22,23,28,0.05); }
  html body #bottom-nav::before{ background:var(--surface) !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
    box-shadow:0 6px 14px rgba(22,23,28,0.10), 0 1px 1px rgba(22,23,28,0.05) !important; }
  #bottom-nav #nav-highlight{ width:calc((100% - var(--plus-r) * 2 - var(--plus-ring)) / 3 - 2 * var(--pill-m)) !important; }
  html body #bottom-nav .nav-plus{ position:absolute !important; right:0; width:calc(var(--plus-r) * 2) !important; height:calc(var(--plus-r) * 2) !important; flex:none !important; z-index:3; }
  html body .nav-plus-disc{ width:100% !important; height:100% !important; border-radius:50% !important; color:#FFFFFF !important; background:var(--brand-wave-light) no-repeat bottom / 100% 34%, var(--grad) !important; transform:none; }
  html body .nav-plus-disc .icon{ width:30px !important; height:30px !important; stroke-width:2.2 !important; }
  html body #bottom-nav .nav-plus[aria-expanded="true"] .nav-plus-disc{ transform:rotate(45deg); color:#FFFFFF; }
  html body .list-add{ padding:0 1rem !important; }
  html body #bottom-nav .nav-plus{ top:calc(50% - var(--plus-r)) !important; margin:0 !important; }
  .scanner{ background:none !important; opacity:1 !important; transform:none !important; transition:none !important; }
  .scanner-dim{ position:absolute; inset:0; background:rgba(22,23,28,0.3); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); }
  .scanner-card{ position:absolute; overflow:hidden; border-radius:var(--r-md); background:#0B0C0F; color:#FFFFFF; transform-origin:0 0; box-shadow:0 30px 60px -20px rgba(0,0,0,0.55); will-change:transform; }
  .scanner-card .scanner-frame{ left:9%; right:9%; top:14%; bottom:24%; border-radius:var(--r-md); box-shadow:0 0 0 200vmax rgba(0,0,0,0.3); }
  .scanner-card .scanner-top{ padding:12px 12px 8px; }
  .scanner-card .scanner-bottom{ padding:10px 18px 18px; }
  .scanner-card .scanner-shutter{ width:68px; height:68px; }
  #modal-voice.metered .voice-wave i{ animation:none !important; opacity:1; transition:transform 90ms linear; }
  .voice-chip.pending{ gap:5px; padding:0.55rem 0.9rem; background:var(--surface-2); }
  .voice-chip.pending i{ width:6px; height:6px; border-radius:50%; background:var(--ink-3); animation:voiceDot 1s ease-in-out infinite; }
  .voice-chip.pending i:nth-child(2){ animation-delay:0.15s; }
  .voice-chip.pending i:nth-child(3){ animation-delay:0.3s; }
  @keyframes voiceDot{ 0%, 100%{ opacity:0.3; transform:translateY(0); } 50%{ opacity:1; transform:translateY(-3px); } }
  @media (prefers-reduced-motion: reduce){
    .voice-chip.pending i{ animation:none; opacity:0.6; }
    #modal-voice.metered .voice-wave i{ transition:none; }
    html body .voice-wave i{ transform:scaleY(0.5); }
  }
  html body .voice-stop{ display:inline-flex; align-items:center; justify-content:center; gap:0.45rem; }
  html body .voice-stop .icon{ width:18px !important; height:18px !important; }
  html body .voice-stop[hidden]{ display:none; }
  html body #voice-heard{ display:none !important; }
  html body #modal-voice .voice-live{ padding:0.6rem 0 0.2rem; }
  html body #modal-voice .voice-chips{ min-height:44px; margin:0.6rem 0 1.1rem; }
  html body #bottom-nav::before{ -webkit-mask:none !important; mask:none !important; }
  html body #bottom-nav .nav-plus[aria-expanded] .nav-plus-disc{ transform:none; }
  html body #bottom-nav .nav-plus:active .nav-plus-disc{ transform:scale(0.93); }
  html body .nav-plus-disc{ transition:transform 200ms var(--e-out) !important; box-shadow:0 10px 24px -8px rgba(49,72,230,0.6), 0 2px 5px rgba(22,23,28,0.10) !important; }
  html body .nav-plus-disc .icon{ display:block; transform-origin:50% 50%; }
  html body .fan-disc{ color:#FFFFFF !important; }
  html body .fan-disc .icon{ stroke-width:2.1 !important; }
  html body .fan-btn{ will-change:transform; }
  html body .fan-label{ box-shadow:0 4px 14px rgba(22,23,28,0.14) !important; }
  @media (prefers-reduced-motion: reduce){
    html body .toast, html body .toast.show{ transform:translateX(-50%); filter:none; }
  }
  html body #bottom-nav::before{ right:var(--plus-r) !important; }
  html body .fan-disc{ position:relative; isolation:isolate; }
  html body .fan-disc::before{ content:""; position:absolute; inset:0; border-radius:50%; background:#4454EA; z-index:-1; opacity:0; transition:opacity 130ms ease; }
  .plus-fan.settled .fan-disc::before{ opacity:1; }
  html body .plus-spin{ display:flex; align-items:center; justify-content:center; will-change:transform; }
  .fan-neck{ position:absolute; left:calc(var(--cx) - 22px); top:calc(var(--cy) - 104px); width:44px; height:104px; border-radius:999px; background:#4454EA; transform-origin:50% 100%; opacity:0; pointer-events:none; will-change:transform, opacity; }
  html body .fan-disc{ background:#4454EA !important; box-shadow:0 8px 18px -6px rgba(49,72,230,0.5) !important; will-change:transform; }
  html body .fan-disc::before{ display:none; }
  html body .fan-label{ will-change:transform, opacity; }
  html body .fan-dim{ will-change:opacity; }
  html body .toast{ filter:none !important; transform:translateX(-50%) translateY(22px) scale(0.96); transition:opacity 200ms ease-in, transform 240ms var(--e-in) !important; will-change:transform, opacity; }
  html body .toast.show{ filter:none !important; transform:translateX(-50%) translateY(0) scale(1); transition:opacity 260ms ease-out, transform 520ms var(--e-out) !important; }
  html body #bottom-nav button[data-tab]{ flex-direction:column !important; gap:3px !important; justify-content:center !important; }
  html body #bottom-nav .nav-label{ display:block !important; max-width:none !important; max-height:none !important; opacity:1 !important; overflow:visible !important; font-size:var(--fs-cap) !important; font-weight:600 !important; line-height:1.1 !important; letter-spacing:0.01em; color:inherit !important; }
  html body #bottom-nav button[data-tab] .icon{ width:22px !important; height:22px !important; }
  .due-row{ display:flex; align-items:center; gap:0.5rem; margin:0 0 0.75rem; min-height:40px; padding-left:var(--content-inset); }
  .due-row[hidden]{ display:none; }
  .due-label{ flex:none; font-size:var(--fs-sm); color:var(--ink-2); }
  .due-chips{ flex:1; min-width:0; display:flex; gap:0.4rem; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; padding:2px 0; }
  .due-chips::-webkit-scrollbar{ display:none; }
  .due-chip{ flex:none; display:inline-flex; align-items:center; gap:0.3rem; min-height:36px; padding:0 0.8rem 0 0.6rem; border:none; border-radius:999px; background:var(--surface); color:var(--ink); font:inherit; font-size:var(--fs-base); font-weight:500; cursor:pointer; box-shadow:0 1px 2px rgba(22,23,28,0.06); }
  .due-chip .icon{ width:15px; height:15px; color:var(--brand-text); stroke-width:2.4; }
  .due-chip:active{ transform:scale(0.96); }
  .due-x{ flex:none; width:36px; height:36px; border:none; background:none; color:var(--ink-3); display:flex; align-items:center; justify-content:center; border-radius:50%; cursor:pointer; }
  .due-x .icon{ width:16px; height:16px; }
  html body .trip-btn{ display:inline-flex; align-items:center; gap:0.35rem; min-height:36px; padding:0 0.9rem; border:none; border-radius:999px; background:var(--brand); color:#FFFFFF; font:inherit; font-size:var(--fs-sm); font-weight:600; cursor:pointer; }
  html body .trip-btn .icon{ width:16px; height:16px; stroke-width:2.4; }
  html body .trip-btn:active{ transform:scale(0.96); }
  .trip-actions{ display:flex; flex-direction:column; gap:0.6rem; margin-top:0.4rem; }
  .trip-actions .btn{ display:inline-flex; align-items:center; justify-content:center; gap:0.5rem; }
  .trip-actions .btn .icon{ width:19px; height:19px; }
  .trip-skip{ align-self:center; margin-top:0.2rem; min-height:44px; }
  .row-meta.cheaper-at{ display:flex; align-items:center; gap:0.35rem; }
  .row-meta.cheaper-at .store-logo, .row-meta.cheaper-at img{ width:16px !important; height:16px !important; }
  .qty-menu{ display:flex; flex-direction:column; gap:0.7rem; padding:0.7rem; }
  .qty-menu .stepper{ align-self:stretch; justify-content:space-between; }
  .qty-menu .stepper-val{ min-width:5.5ch; text-align:center; }
  .unit-chips{ display:flex; }
  .unit-chip{ min-height:34px; border:none; border-radius:999px; background:var(--surface-2); color:var(--ink); font:inherit; font-size:var(--fs-sm); font-weight:500; cursor:pointer; }
  .unit-chip.on{ background:var(--brand); color:#FFFFFF; }
  .qty-note{ width:100%; min-height:40px; padding:0 0.8rem; border:none; border-radius:var(--r-sm); background:var(--surface-2); color:var(--ink); font:inherit; font-size:16px; }
  .qty-note::placeholder{ color:var(--ink-3); }
  .lp-size-row{ display:flex; gap:0.5rem; }
  .lp-size-row input{ flex:1; min-width:0; }
  .lp-size-row .cselect{ flex:none; width:auto; min-width:7.5rem; }
  html body #cmp-photo-field{ display:none !important; }
  .cmp-thumb{ position:relative; flex:none; width:48px; height:48px; margin-right:0.7rem; padding:0; border:1.5px dashed var(--line-strong, #C9CBD3); border-radius:var(--r-sm); background:var(--surface-2); color:var(--ink-3); display:flex; align-items:center; justify-content:center; overflow:hidden; cursor:pointer; }
  .cmp-thumb[hidden]{ display:none; }
  .cmp-thumb .icon{ width:20px; height:20px; }
  .cmp-thumb.has{ border:none; }
  .cmp-thumb.has .icon{ display:none; }
  .cmp-thumb img{ width:100%; height:100%; object-fit:cover; }
  .cmp-thumb-busy{ position:absolute; inset:0; display:none; background:rgba(255,255,255,0.6); }
  .cmp-thumb.busy .cmp-thumb-busy{ display:block; animation:thumbPulse 1s ease-in-out infinite; }
  @keyframes thumbPulse{ 50%{ opacity:0.4; } }
  html body .store-prices .add-in-card{ display:flex; align-items:center; justify-content:center; gap:0.4rem; width:100%; min-height:52px; border:none; background:none; color:var(--brand-text); font:inherit; font-weight:600; cursor:pointer; border-top:1px solid var(--line); }
  html body .store-prices .add-in-card:first-child{ border-top:none; }
  html body .store-prices .add-in-card .icon{ width:17px; height:17px; stroke-width:2.3; }
  .stat-stores{ display:flex; flex-wrap:wrap; gap:0.4rem; margin-top:0.6rem; }
  .stat-store{ display:inline-flex; align-items:center; gap:0.35rem; padding:0.2rem 0.6rem 0.2rem 0.25rem; border-radius:999px; background:rgba(255,255,255,0.18); font-size:var(--fs-sm); font-weight:600; }
  .stat-store .store-logo, .stat-store img{ width:18px !important; height:18px !important; border-radius:50% !important; }
  .voice-chip.unknown{ background:transparent; box-shadow:inset 0 0 0 1.5px var(--line-strong, #C9CBD3); }
  .vc-name{ cursor:text; }
  .vc-new{ margin-left:0.35rem; padding:0.05rem 0.4rem; border-radius:999px; background:var(--brand-soft); color:var(--brand-text); font-size:var(--fs-cap); font-weight:700; }
  .vc-input{ border:none; outline:none; background:transparent; font:inherit; color:inherit; padding:0; min-width:4ch; font-size:16px; }
  @media (prefers-reduced-motion: reduce){
    .cmp-thumb.busy .cmp-thumb-busy{ animation:none; }
  }
  html body .row-meta.cheaper-at{ flex-wrap:nowrap !important; color:var(--brand-text) !important; font-weight:500 !important; min-width:0; }
  html body .row-meta.cheaper-at > span:last-child{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
  html body .row-meta.cheaper-at .store-logo{ flex:none; }
  .unit-chips{ flex-wrap:nowrap; gap:0.3rem; }
  .unit-chip{ flex:1; min-width:0; padding:0 0.4rem; }

  /* ---- v117: radius tokens; solid brand on big surfaces (the wave stays on the + and the logo); round add toggles ---- */
  :root{ --r-sm:10px; --r-md:20px; }
  html body .btn, html body .btn-pill, html body .trip-btn, html body .toast, html body .toast-action{ border-radius:999px !important; }
  html body .add-toggle{ border-radius:50% !important; }
  html body .btn-primary{ background:var(--brand) !important; background-image:none !important; }
  html body .btn-primary:active{ background:var(--brand-press) !important; }
  /* ---- v118: cards resize with transforms (see glideCardEdge) ---- */
  .glide-piece{ position:absolute; left:0; right:0; z-index:-1; pointer-events:none; will-change:transform; }
  html body .gliding{ position:relative; isolation:isolate; background:transparent !important; box-shadow:none !important; overflow:visible !important; }
  html body .gliding .swipe-content, html body .gliding .row{ background:transparent !important; }

  /* ---- v119: dark mode (follows the phone). Same tokens as light, darker values; brand text is lighter ---- */
  :root{ --brand-text:#3B45DD; --brand-soft:#ECEDFC; --line-strong:#C9CBD3; }
  :root[data-app-theme="dark"]{
    color-scheme:dark;
    --bg:#0E0F12; --surface:#1A1B20; --surface-2:#25262C; --surface-3:#30313A; --fill-page:#24252B;
    --ink:#F1F1F4; --ink-2:#AEB0B8; --ink-3:#8F929B; --hair:#2B2C33; --grip:#565861;
    --brand:#4A54E8; --brand-press:#3D46D6; --brand-text:#A3A9FB; --brand-soft:#262A52;
    --grad:linear-gradient(135deg, #5159EE 0%, #3569F2 100%);
    --amber-bg:#3B2F14; --amber-ink:#F3BD55; --danger:#FF6A5C; --good:#45D38A;
    --line:#2B2C33; --line-strong:#41434C; --border:#2B2C33; --border-strong:#41434C;
    --accent-soft:#262A52; --accent-soft-ink:#B7BCFF; --warn:#F3BD55; --warn-soft:#3B2F14; --danger-soft:#3A1D1A; --good-soft:#15301F;
    --card-shadow:0 0 0 1px rgba(255,255,255,0.05);
    --focus:0 0 0 3px rgba(163,169,251,0.35);
  }
  html[data-app-theme="dark"] body .toast{ background:#30313A !important; color:var(--ink) !important; box-shadow:0 10px 30px rgba(0,0,0,0.5) !important; }
  html[data-app-theme="dark"] body .toast-action{ color:var(--brand-text) !important; }
  html[data-app-theme="dark"] body .fan-dim{ background:rgba(0,0,0,0.45); }
  html[data-app-theme="dark"] body #bottom-nav{ filter:none; }
  html[data-app-theme="dark"] body #bottom-nav::before{ box-shadow:0 6px 14px rgba(0,0,0,0.5) !important; }
  html[data-app-theme="dark"] body .nav-plus-disc{ box-shadow:0 6px 14px rgba(0,0,0,0.5); }
  html[data-app-theme="dark"] body .store-logo{ box-shadow:0 0 0 1px rgba(255,255,255,0.06); }
  html.theme-anim body, html.theme-anim body *{ transition:background-color 420ms ease, color 420ms ease, border-color 420ms ease !important; }
  /* ---- v120: logos keep their corners (radius scales with size); unit chips size to their label ---- */
  html body .store-logo, html body .store-logo.xs, html body .store-logo.sm, html body .store-logo.lg{ border-radius:24% !important; }
  html body .stat-store .store-logo, html body .stat-store img, html body .row-meta.cheaper-at .store-logo{ border-radius:24% !important; }
  html body .unit-chips{ overflow-x:auto; scrollbar-width:none; }
  html body .unit-chips::-webkit-scrollbar{ display:none; }
  html body .unit-chips{ gap:0.25rem; }
  html body .unit-chip{ flex:1 0 auto; min-width:34px; padding:0 0.45rem; white-space:nowrap; font-size:var(--fs-sm); }
  /* ---- v121: one divider everywhere (1px, --divider, from the content inset to the edge), drawn on what stays put ---- */
  :root{ --divider:#D8D8CF; }
  :root[data-app-theme="dark"]{ --divider:#2C2D34; }
  :root[data-app-theme="dark"] dialog{ --divider:#393A42; }
  html body :is(#shopping-list, #items-list, #stores-list, #receipts-list, #cart-list, #store-items-list) .swipe-wrap + .swipe-wrap .row::before, html body :is(#shopping-list, #items-list, #stores-list, #receipts-list, #cart-list, #store-items-list) > .row + .row::before{ display:none !important; }
  html body :is(#shopping-list, #items-list, #stores-list, #receipts-list, #cart-list, #store-items-list) .aisle-group + .aisle-group, html body :is(#shopping-list, #items-list, #stores-list, #receipts-list):not(:empty) + .list-add-row,
  html body dialog #stores-list:not(:empty) + .list-add-row, html body #shopping-list:not(:empty) + .list-add-row, html body #items-list:not(:empty) + .list-add-row,
  html body .set-row + .set-row, html body .sheet-group .set-row + .set-row, html body .store-prices .swipe-wrap + .swipe-wrap .store-row,
  html body #pick-item-list .row + .row, html body #pick-item-list .pick-head:not(:first-child){ box-shadow:none !important; }
  html body .store-prices .add-in-card{ border-top:none !important; }
  html body :is(:is(#shopping-list, #items-list, #stores-list, #receipts-list, #cart-list, #store-items-list, .store-prices) .swipe-wrap + .swipe-wrap, :is(#shopping-list, #items-list, #stores-list, #receipts-list, #cart-list, #store-items-list) > .row + .row, :is(#shopping-list, #items-list, #stores-list, #receipts-list, #cart-list, #store-items-list) .aisle-group + .aisle-group, :is(#shopping-list, #items-list, #stores-list, #receipts-list):not(:empty) + .list-add-row, .set-row + .set-row, .store-prices .add-in-card:not(:first-child), #pick-item-list .row + .row, #pick-item-list .pick-head:not(:first-child)){ position:relative; }
  html body :is(:is(#shopping-list, #items-list, #stores-list, #receipts-list, #cart-list, #store-items-list, .store-prices) .swipe-wrap + .swipe-wrap, :is(#shopping-list, #items-list, #stores-list, #receipts-list, #cart-list, #store-items-list) > .row + .row, :is(#shopping-list, #items-list, #stores-list, #receipts-list, #cart-list, #store-items-list) .aisle-group + .aisle-group, :is(#shopping-list, #items-list, #stores-list, #receipts-list):not(:empty) + .list-add-row, .set-row + .set-row, .store-prices .add-in-card:not(:first-child), #pick-item-list .row + .row, #pick-item-list .pick-head:not(:first-child))::before{ content:""; position:absolute; top:0; left:var(--content-inset); right:0; height:1px; background:var(--divider);
    pointer-events:none; z-index:2; opacity:1; transition:opacity 240ms ease; }
  html body .div-fade::before{ opacity:0 !important; }
  /* ---- dropdowns: one style. No fills, no lines: a check on the right marks the choice; rows share one icon slot;
     row corners follow the menu's (concentric) ---- */
  html body .pop-menu{ padding:6px !important; border-radius:var(--r-md) !important; }
  html body .pop-item{ border-radius:calc(var(--r-md) - 6px) !important; gap:0.65rem !important; }
  html body .pop-item.selected{ background:none !important; color:var(--ink) !important; }
  html body .pop-item .pop-tick{ color:var(--brand-text) !important; width:18px !important; height:18px !important; stroke-width:2.4 !important; }
  html body .pop-sep{ height:6px !important; background:none !important; margin:0 !important; }
  html body .pop-item .store-logo{ width:26px !important; height:26px !important; margin:0 !important; }
  html body .pop-item > svg.icon:first-child{ width:20px !important; height:20px !important; margin:0 3px; color:var(--ink-2) !important; flex:none; }
  html body .store-logo.glyph{ background:var(--surface-2) !important; box-shadow:none !important; color:var(--ink-2); }
  html body .store-logo.glyph .icon{ width:14px !important; height:14px !important; stroke-width:2 !important; }
  html body .pop-new .store-logo.glyph{ color:var(--brand-text); }
  html body .has-logos .cselect-label .store-logo{ width:22px !important; height:22px !important; margin:0 !important; }
  html body #shop-store-select-btn .store-logo.glyph{ display:none; }
  /* ---- v122: Start shopping button; lines step aside while reordering; menu heading ---- */
  html body #shop-store-select-btn{ display:none !important; }
  html body .shop-btn{ display:inline-flex; align-items:center; gap:0.45rem; min-height:44px; padding:0 1.05rem 0 0.85rem; border:none; border-radius:999px;
    background:var(--brand); color:#FFFFFF; font:inherit; font-family:var(--display); font-weight:800; font-size:var(--fs-base); cursor:pointer;
    box-shadow:0 2px 6px -3px rgba(22,23,28,0.28); transition:transform 160ms var(--e-out); }
  html body .shop-btn .icon{ width:18px; height:18px; stroke-width:2.2; }
  html body .shop-btn:active{ transform:scale(0.96); }
  html body .shop-btn.at-store{ background:var(--surface); color:var(--ink); box-shadow:0 0 0 1.5px var(--brand), 0 6px 16px -10px rgba(59,69,221,0.5); padding:0 0.8rem 0 0.4rem; }
  html body .shop-btn.at-store .store-logo{ width:26px !important; height:26px !important; margin:0 !important; }
  html body .shop-btn .shop-chev{ width:14px; height:14px; color:var(--ink-2); }
  html body .shop-btn-text{ max-width:60vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  html body .pop-head{ padding:0.5rem 0.7rem 0.35rem; font-size:var(--fs-sm); font-weight:600; color:var(--ink-3); }
  html body .reordering > .swipe-wrap::before{ opacity:0 !important; }
  /* ---- v123: one blue store button (with ×); the cart's button sits evenly between the two cards ---- */
  html body .shop-wrap{ display:inline-flex; align-items:stretch; min-width:0; max-width:86vw; border-radius:999px; background:var(--brand);
    box-shadow:0 2px 6px -3px rgba(22,23,28,0.28); }
  html body .shop-btn, html body .shop-btn.at-store{ background:none !important; box-shadow:none !important; color:#FFFFFF !important; min-width:0; }
  html body .shop-btn.at-store{ padding:0 0.75rem 0 0.4rem !important; }
  html body .shop-btn .shop-chev{ color:rgba(255,255,255,0.85) !important; }
  html body .shop-wrap{ min-height:44px; align-items:center; }
  html body .shop-stop{ position:relative; display:flex; align-items:center; justify-content:center; width:30px; height:30px; flex:none;
    margin:0 6px 0 6px; border:none; border-radius:50%; background:rgba(255,255,255,0.2); color:#FFFFFF; cursor:pointer; }
  html body .shop-stop[hidden]{ display:none; }
  html body .shop-stop .icon{ width:14px; height:14px; stroke-width:2.6; }
  /* the disc is 30px so it reads as secondary, but the thumb still gets 44 */
  html body .shop-stop::after{ content:""; position:absolute; top:50%; left:50%; width:44px; height:44px; transform:translate(-50%, -50%); }
  html body .shop-stop:active{ background:rgba(255,255,255,0.34); }
  html body #panel-shopping .cart-section{ margin-top:0.75rem !important; }
  html body #panel-shopping .cart-section .section-head{ padding-top:0 !important; padding-bottom:0.75rem !important; }
  html body .trip-btn.clear-mode{ background:var(--surface-2); color:var(--ink); }
  /* ---- v124: one "Checked off" card: heading row (title and Clear, same size), the items, Finish trip row ---- */
  html body .cart-head{ display:flex; align-items:center; justify-content:space-between; gap:0.5rem; padding:0.55rem 0.35rem 0.1rem var(--content-inset); }
  html body #cart-title{ font-size:var(--fs-cap); font-weight:600 !important; color:var(--ink-3); }
  html body .cart-clear{ min-height:32px; padding:0 0.55rem; border:none; background:none; border-radius:999px; font:inherit; font-size:var(--fs-cap); font-weight:600;
    color:var(--brand-text); cursor:pointer; }
  html body .cart-clear:active{ background:var(--surface-2); }
  html body #cart-list:not(:empty) + .list-add-row{ position:relative; }
  html body #cart-list:not(:empty) + .list-add-row::before{ content:""; position:absolute; top:0; left:var(--content-inset); right:0; height:1px; background:var(--divider); pointer-events:none; }
  html body .trip-row[hidden]{ display:none !important; }
  html body #panel-shopping .cart-section{ margin-top:0.75rem !important; }

  /* ---- v125: Sora everywhere ---- */
  html, body, button, input, select, textarea{ font-family:var(--font); }
  html body :is(h1, h2, .panel-head h2){ letter-spacing:-0.025em; }
  html body :is(.range-cycle, #store-filter-btn){ font-size:var(--fs-base) !important; letter-spacing:-0.01em; padding-left:0.8rem !important; padding-right:0.7rem !important; gap:0.35rem !important; }
  /* ---- v126: cold-start splash (cart + logo drop), empty states, sign-in ---- */
  html body .splash{ transition:opacity 320ms ease 130ms !important; }
  html body .splash-stage{ position:absolute; left:50%; top:56%; width:140px; height:164px; margin:-82px 0 0 -70px; }
  html body .splash-logo{ position:absolute; left:43px; top:58px; width:64px; height:64px; transform-origin:50% 100%;
    filter:drop-shadow(0 6px 14px rgba(59,69,221,0.25)); animation:splashDrop 560ms 320ms both; }
  html body .splash-drive{ position:absolute; left:0; bottom:0; width:140px; height:100px; animation:splashDrive 540ms var(--e-out) both; }
  html body .splash-bump{ width:100%; height:100%; animation:splashBump 280ms 660ms var(--e-out) both; }
  html body .splash-cart{ display:block; width:140px; height:100px; color:var(--brand-text); overflow:visible; }
  html body .splash-basket{ fill:var(--brand-soft); fill-opacity:0.78; }
  html body .splash-wheel{ transform-box:fill-box; transform-origin:50% 50%; animation:splashWheel 540ms var(--e-out) both; }
  html body .splash-wheel circle{ fill:var(--bg); }
  @keyframes splashDrive{ from{ transform:translateX(-70vw) rotate(-2deg); } 80%{ transform:translateX(4px) rotate(0.5deg); } to{ transform:none; } }
  @keyframes splashWheel{ from{ transform:rotate(-600deg); } to{ transform:none; } }
  @keyframes splashDrop{
    0%{ transform:translateY(-200px) rotate(-10deg); opacity:0; animation-timing-function:var(--e-in); }
    14%{ opacity:1; }
    56%{ transform:translateY(0) scale(1.07, 0.9); animation-timing-function:var(--e-out); }
    74%{ transform:translateY(-14px) scale(0.98, 1.03); animation-timing-function:var(--e-through); }
    88%{ transform:translateY(0) scale(1.02, 0.98); }
    95%{ transform:translateY(-2px); }
    100%{ transform:none; opacity:1; }
  }
  @keyframes splashBump{ 40%{ transform:translateY(4px); } 75%{ transform:translateY(-1px); } }
  html body .splash-stage{ transition:transform 380ms var(--e-in); }
  html body .splash.gone .splash-stage{ transform:translateX(75vw); }
  @media (prefers-reduced-motion: reduce){
    html body .splash-logo, html body .splash-drive, html body .splash-bump, html body .splash-wheel{ animation:none !important; }
    html body .splash.gone .splash-stage{ transform:none; }
  }

  .empty-state{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:0.85rem; padding:2.4rem 1.2rem 1.9rem; }
  .es-art{ width:88px; height:88px; border-radius:28px; display:flex; align-items:center; justify-content:center; background:var(--brand-soft); color:var(--brand-text);
    animation:esIn 520ms var(--e-out) both; }
  .es-art .icon{ width:40px !important; height:40px !important; stroke-width:1.6 !important; }
  html body .es-art-cart{ width:auto; height:auto; padding:0; background:none; box-shadow:none; color:var(--brand); }
  html body .es-cart{ display:block; width:132px; height:94px; stroke-width:5.5; overflow:visible; }
  html body .es-title{ margin:0.35rem 0 0.2rem; font-size:var(--fs-item); font-weight:700 !important; color:var(--ink); animation:esIn 520ms 80ms var(--e-out) both; }
  html body .es-cta{ min-width:190px; animation:esIn 520ms 130ms var(--e-out) both; transition:transform 130ms var(--e-out); }
  html body .es-cta:active{ transform:scale(0.96); }
  html body .es-alt{ min-height:44px; color:var(--brand-text); font-weight:600; animation:esIn 520ms 200ms var(--e-out) both; }
  @keyframes esIn{ from{ opacity:0; transform:translateY(10px); } }

  html body #panel-shopping.list-empty > .list-card > .list-add-row,
  html body #panel-items.items-empty .search-wrap, html body #panel-items.items-empty .list-add-row,
  html body #panel-receipts.receipts-empty :is(.receipt-filters, .list-add-row){ display:none !important; }
  html body #panel-receipts.receipts-empty #pay-archive-row{ display:flex !important; }
  @media (prefers-reduced-motion: reduce){ .es-art, html body .es-title, html body .es-cta, html body .es-alt{ animation:none !important; } }

  html body .auth-head{ padding-bottom:0 !important; }
  html body .auth-hero{ display:flex; flex-direction:column; align-items:center; gap:0.8rem; margin:0 0 1.4rem; padding-top:0.2rem; }
  html body #modal-auth .auth-head{ position:absolute; top:0; right:0; left:auto; z-index:3; background:none !important; box-shadow:none !important; border:none !important; }
  html body #modal-auth .modal-body{ padding-top:1.6rem; }
  html body .auth-logo{ width:64px; height:64px; filter:drop-shadow(0 8px 18px rgba(59,69,221,0.28)); }
  html body #auth-title{ margin:0; font-size:var(--fs-xl); font-weight:700 !important; letter-spacing:-0.02em; color:var(--ink); }
  html body #modal-auth .field label{ font-size:var(--fs-sm); font-weight:600 !important; color:var(--ink-2); }
  html body #modal-auth .field input{ min-height:52px; padding:0 1rem; border-radius:var(--r-sm); background:var(--surface-2); border:1.5px solid transparent; font-size:16px;
    transition:border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease; }
  html body #modal-auth .field input:focus{ outline:none; background:var(--surface); border-color:var(--brand); box-shadow:var(--focus); }
  html body #modal-auth .btn, html body .social-btn{ transition:transform 130ms var(--e-out), filter 130ms ease; }
  html body #modal-auth .btn:active, html body .social-btn:active{ transform:scale(0.97); }
  html body #auth-submit{ min-height:52px; margin-top:0.4rem; }
  html body .auth-links{ display:flex; justify-content:space-between; align-items:center; gap:0.5rem; margin-top:0.4rem; }
  html body .auth-links .text-btn{ font-size:var(--fs-sm) !important; white-space:nowrap; min-height:44px; padding:0 0.2rem; }
  html body .auth-or{ display:flex; align-items:center; gap:0.8rem; margin:1.1rem 0 0.9rem; color:var(--ink-3); font-size:var(--fs-sm); }
  html body .auth-or::before, html body .auth-or::after{ content:""; flex:1; height:1px; background:var(--divider); }
  html body .auth-or[hidden], html body .auth-social[hidden]{ display:none; }
  html body .auth-social{ display:flex; flex-direction:column; gap:0.6rem; }
  html body .social-btn{ display:flex; align-items:center; justify-content:center; gap:0.6rem; width:100%; min-height:52px; border-radius:999px; font:inherit; font-size:var(--fs-item);
    font-weight:600; cursor:pointer; border:1.5px solid transparent; }
  html body .social-btn svg{ width:20px; height:20px; flex:none; }
  html body .social-apple{ background:#0B0C0F; color:#FFFFFF; }
  html body .social-google{ background:var(--surface); color:var(--ink); border-color:var(--border-strong, #D3D8E3); }
  html[data-app-theme="dark"] body .social-apple{ background:#FFFFFF; color:#0B0C0F; }
  html body .social-btn[disabled]{ opacity:0.6; }
  /* ---- v127: empty states sit in the middle of the page (no card, no tile); the save-quick-adds sheet ---- */
  html body #panel-shopping.list-empty > .list-card, html body #panel-items.items-empty .list-card, html body #panel-receipts.receipts-empty .list-card{
    background:transparent !important; box-shadow:none !important; }
  html body .empty-state{ justify-content:center; padding:7vh 1.2rem 0; min-height:calc(100dvh - 300px); }
  html body #panel-items .empty-state, html body #panel-receipts .empty-state{ min-height:calc(100dvh - 250px); }
  /* the receipts tab keeps its total card and any paybacks even with no receipts, so the empty
     state has that much less room and was running under the nav bar */
  html body #panel-receipts.receipts-empty .empty-state{ min-height:0; padding:2.4rem 1.2rem 1.2rem; }
  html body #panel-receipts.totals-empty #totals-grid{ display:none; }
  html body #panel-receipts.totals-empty .empty-state{ min-height:calc(100dvh - 250px); }
  html body .es-art{ width:auto; height:auto; background:none !important; border-radius:0; }
  html body .es-art .icon{ width:60px !important; height:60px !important; stroke-width:1.4 !important; }
  html body .sq-list{ margin-bottom:1rem; }
  html body .sq-row{ display:flex; align-items:center; justify-content:space-between; min-height:52px; padding:0 0.35rem 0 var(--content-inset); }
  html body .sq-x{ width:40px; height:40px; flex:none; border:none; background:none; border-radius:50%; color:var(--ink-3); display:flex; align-items:center; justify-content:center; cursor:pointer; }
  html body .sq-x .icon{ width:16px; height:16px; stroke-width:2.2; }
  html body .sq-x:active{ background:var(--surface-3); }
  /* ---- v128: the welcome / sign-in screen when there's no account on this device ---- */
  html body #modal-auth.gate{ top:0 !important; bottom:0 !important; height:100dvh !important; max-height:none !important; max-width:none !important; width:100% !important;
    border-radius:0 !important; border:none !important; animation:none !important; transform:none !important; display:flex; flex-direction:column; justify-content:center;
    padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom); overflow-y:auto; }
  html body #modal-auth.gate::backdrop{ background:var(--bg) !important; }
  html body #modal-auth.gate .auth-head{ display:none !important; }
  html body #modal-auth.gate .modal-body{ width:100%; max-width:430px; margin:0 auto; padding-top:1rem; max-height:none; overflow:visible; }
  html body #modal-auth.gate .auth-hero{ margin-bottom:1.8rem; }
  html body #modal-auth.gate .auth-logo{ width:76px; height:76px; }
  html body #modal-auth.gate .auth-hero{ margin-bottom:1.2rem; }
  html body #modal-auth.gate .field{ margin-bottom:0.6rem; }
  html.auth-gated body > :not(dialog):not(.splash):not(svg){ visibility:hidden; }
  html body .auth-or.none, html body .auth-social.none, html body #auth-social [data-oauth][hidden]{ display:none !important; }
  /* ---- v129: the sign-in screen doesn't shift when typing ---- */
  html.auth-gated, html.auth-gated body{ overflow:hidden !important; height:100%; overscroll-behavior:none; }
  html body #modal-auth.gate{ justify-content:flex-start; padding-top:calc(env(safe-area-inset-top) + clamp(1.25rem, 8vh, 4.5rem)); overscroll-behavior:contain; }
  /* ---- v130: the check-your-email page ---- */
  html body #modal-auth.confirming #auth-title, html body #modal-auth.confirming #auth-form, html body #modal-auth.confirming #auth-or, html body #modal-auth.confirming #auth-social{ display:none !important; }
  html body .auth-confirm{ display:flex; flex-direction:column; align-items:center; text-align:center; padding-top:0.5rem; }
  html body .auth-confirm[hidden]{ display:none; }
  html body .ac-art{ position:relative; width:96px; height:96px; border-radius:50%; background:var(--brand-soft); display:grid; place-items:center; margin-bottom:1.4rem; }
  html body .ac-mail{ width:42px; height:42px; color:var(--brand-text); stroke-width:1.6; animation:acFloat 2.6s ease-in-out infinite alternate; }
  html body .ac-check{ position:absolute; inset:0; border-radius:50%; background:var(--brand); color:#fff; display:grid; place-items:center; opacity:0; }
  html body .ac-check .icon{ width:44px; height:44px; stroke-width:2.4; }
  html body .auth-confirm.done .ac-check{ opacity:1; }
  html body .auth-confirm.done .ac-mail{ opacity:0; }
  html body #ac-title{ margin:0; font-size:var(--fs-xl); font-weight:700 !important; letter-spacing:-0.02em; color:var(--ink); }
  html body #ac-text{ margin:0.6rem 0 0; font-size:var(--fs-base); color:var(--ink-2); }
  html body #ac-email{ margin:0.15rem 0 0; font-size:var(--fs-base); font-weight:600; color:var(--ink); word-break:break-all; }
  html body #ac-text[hidden], html body #ac-email[hidden]{ display:none; }
  html body .ac-wait{ display:flex; align-items:center; gap:0.55rem; margin:1.6rem 0; font-size:var(--fs-sm); color:var(--ink-3); }
  html body .ac-dot{ width:8px; height:8px; border-radius:50%; background:var(--brand); animation:acPulse 1.3s ease-in-out infinite; }
  html body .ac-actions{ width:100%; display:flex; flex-direction:column; align-items:center; gap:0.3rem; }
  html body .ac-actions .text-btn{ min-height:44px; font-size:var(--fs-base) !important; }
  html body .ac-wait, html body .ac-actions, html body #ac-text, html body #ac-email{ transition:opacity 200ms ease; }
  html body .auth-confirm.done .ac-wait, html body .auth-confirm.done .ac-actions, html body .auth-confirm.done #ac-text, html body .auth-confirm.done #ac-email{ opacity:0; pointer-events:none; }
  @keyframes acFloat{ from{ transform:translateY(2px); } to{ transform:translateY(-3px); } }
  @keyframes acPulse{ 0%,100%{ opacity:0.35; transform:scale(0.8); } 50%{ opacity:1; transform:scale(1); } }
  @media (prefers-reduced-motion: reduce){ html body .ac-mail, html body .ac-dot{ animation:none; } }
  /* ---- v131: confirm page from the email link ---- */
  html body #ac-continue{ display:none; }
  html body #modal-auth.from-link #ac-continue{ display:flex; }
  html body #modal-auth.from-link #ac-email, html body #modal-auth.from-link .ac-wait, html body #modal-auth.from-link #ac-resend, html body #modal-auth.from-link #ac-back{ display:none; }
  html body #modal-auth.from-link .auth-confirm.done #ac-text, html body #modal-auth.from-link .auth-confirm.done .ac-actions{ opacity:1; pointer-events:auto; }
  html body #modal-auth.from-link .ac-actions{ margin-top:1.6rem; }
  /* ---- v132: the code boxes ---- */
  html body .ac-wait.otp{ display:block; position:relative; width:100%; max-width:340px; margin:1.5rem 0 0; }
  html body .otp-cells{ display:grid; grid-template-columns:repeat(6, 1fr); gap:0.5rem; }
  html body .otp-cell{ height:58px; border-radius:var(--r-sm); background:var(--surface-2); border:1.5px solid transparent; display:flex; align-items:center; justify-content:center;
    font-size:var(--fs-xl); font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums; transition:border-color 130ms ease, background-color 130ms ease; }
  html body .otp-cell.active{ border-color:var(--brand); background:var(--surface); box-shadow:var(--focus); }
  html body .otp-cell.active:empty::after{ content:""; width:2px; height:26px; border-radius:1px; background:var(--brand); animation:otpCaret 1s steps(1) infinite; }
  html body .ac-wait.otp.checking .otp-cell{ animation:otpPulse 0.9s ease-in-out infinite; }
  html body .ac-wait.otp.ok .otp-cell{ border-color:var(--brand); }
  html body dialog #otp-input, html body dialog #otp-input:focus{ position:absolute; inset:0; z-index:1; width:100%; height:100%; min-height:0; margin:0; padding:0 !important; border:0 !important; outline:none; box-shadow:none !important;
    background:transparent !important; appearance:none; -webkit-appearance:none; color:transparent !important; -webkit-text-fill-color:transparent; caret-color:transparent; font-size:16px !important; border-radius:0 !important; }
  html body #otp-input::selection{ background:transparent; }
  html body .otp-msg{ margin:0.7rem 0 0 !important; text-align:center; }
  html body #modal-auth .ac-actions{ margin-top:1.5rem; }
  html body #otp-msg{ transition:opacity 200ms ease; }
  html body .auth-confirm.done #otp-msg{ opacity:0; }
  html body #modal-auth.from-link #otp-msg{ display:none; }
  @keyframes otpCaret{ 0%{ opacity:1; } 50%{ opacity:0; } }
  @keyframes otpPulse{ 0%,100%{ opacity:1; } 50%{ opacity:0.45; } }
  @media (prefers-reduced-motion: reduce){ html body .otp-cell.active:empty::after, html body .ac-wait.otp.checking .otp-cell{ animation:none; } }
  /* ---- v133: logo tile, show password, centered switch line, splash hand-off ---- */
  html body .auth-tile svg{ display:block; width:100%; height:100%; overflow:visible; }
  html body .auth-tile .tile-glyph, html body .auth-tile .tile-wave{ transform-box:fill-box; transform-origin:50% 75%; }
  html body .auth-tile .g-mail, html body .auth-tile .g-check{ opacity:0; }
  html body .auth-tile.waiting .tile-wave{ animation:tileWave 2.6s ease-in-out infinite alternate; }
  @keyframes tileWave{ from{ transform:translateX(-2.5px) scaleY(0.9); } to{ transform:translateX(2.5px) scaleY(1.08); } }
  html body #modal-auth.gate.confirming .auth-hero{ margin-bottom:0.8rem; }
  html body #modal-auth .auth-confirm{ padding-top:0; }
  html body .tile-flyer{ position:fixed; z-index:210; margin:0; pointer-events:none; transform-origin:50% 100%; will-change:transform; }
  html body .splash.from-auth{ background:var(--surface); }
  html body .splash.from-auth .splash-logo{ animation:none !important; opacity:0; }
  html body .splash.from-auth.logo-in .splash-logo{ opacity:1; }
  html body .pw-wrap{ position:relative; }
  html body #modal-auth .pw-wrap input{ padding-right:3.3rem !important; border-width:1.5px !important; }
  html body .pw-toggle{ position:absolute; right:4px; top:50%; transform:translateY(-50%); width:44px; height:44px; border:none; background:none; border-radius:50%;
    color:var(--ink-3); display:flex; align-items:center; justify-content:center; cursor:pointer; }
  html body .pw-toggle .icon{ width:20px; height:20px; stroke-width:1.9; }
  html body .pw-toggle:active{ background:var(--surface-3); }
  html body .auth-forgot-row{ display:flex; justify-content:flex-end; margin:-0.45rem 0 0.35rem; }
  html body .auth-forgot-row[hidden]{ display:none !important; }
  html body .auth-forgot-row .text-btn{ min-height:40px; padding:0 0.1rem; font-size:var(--fs-sm) !important; }
  html body .auth-links{ justify-content:center !important; }
  html body .auth-switch-line{ margin:0; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; column-gap:0.35rem; font-size:var(--fs-base); color:var(--ink-2); text-align:center; }
  html body .auth-switch-line[hidden]{ display:none; }
  html body .link-btn{ min-height:44px; padding:0; border:none; background:none; font:inherit; font-weight:600 !important; color:var(--brand-text); cursor:pointer;
    text-decoration:underline; text-decoration-thickness:1.5px; text-underline-offset:3px; }
  @media (prefers-reduced-motion: reduce){ html body .auth-tile.waiting .tile-wave{ animation:none; } }
  /* ---- v134: centred envelope / check; the logo drops into the cart ---- */
  html body .auth-tile.waiting .tile-wave{ animation:none; }
  html body .auth-tile.waiting .g-mail{ animation:tileFloat 2.4s ease-in-out infinite alternate; }
  @keyframes tileFloat{ from{ transform:translateY(-1.5px); } to{ transform:translateY(1.5px); } }
  html body .splash .tile-drop{ position:absolute; left:43px; top:58px; width:64px; height:64px; transform-origin:50% 100%; filter:drop-shadow(0 6px 14px rgba(59,69,221,0.25)); }
  html body .splash .tile-drop svg{ display:block; width:100%; height:100%; overflow:visible; }
  @media (prefers-reduced-motion: reduce){ html body .auth-tile.waiting .g-mail{ animation:none; } }
  /* ---- v136: first-run intro ---- */
  html.intro-on body > :not(#intro):not(.splash):not(svg):not(dialog){ visibility:hidden; }
  html.intro-on, html.intro-on body{ overflow:hidden !important; height:100%; overscroll-behavior:none; }
  html body .intro{ position:fixed; inset:0; z-index:150; display:flex; flex-direction:column; background:var(--bg); color:var(--ink); overflow:hidden;
    padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom); }
  html body .intro[hidden]{ display:none; }
  html body .intro-bg{ position:absolute; left:-20%; right:-20%; bottom:-6px; height:190px; pointer-events:none; opacity:0.9;
    background:var(--brand-wave-soft) no-repeat bottom / 100% 100%; animation:introDrift 9s ease-in-out infinite alternate; }
  html body .intro-bg::after{ content:""; position:absolute; inset:40px 0 0; background:var(--brand-wave-soft) no-repeat bottom / 100% 70%; transform:scaleX(-1); opacity:0.7; }
  @keyframes introDrift{ from{ transform:translateX(-4%); } to{ transform:translateX(4%); } }
  html body .intro-top{ position:relative; z-index:1; display:grid; grid-template-columns:48px minmax(0, 1fr) 72px; align-items:center; gap:10px; width:100%; max-width:480px; margin:0 auto; padding:10px 12px 0; min-height:56px; }
  html body .intro-back, html body .auth-back{ width:44px; height:44px; border:none; background:none; border-radius:50%; color:var(--ink); display:flex; align-items:center; justify-content:center; cursor:pointer; }
  html body .intro-back .icon, html body .auth-back .icon{ width:22px; height:22px; stroke-width:2.2; }
  html body .intro-back:active, html body .auth-back:active{ background:var(--surface-2); }
  html body .intro-back[hidden], html body .intro-skip[hidden], html body .intro-track[hidden], html body .auth-back[hidden]{ visibility:hidden; display:flex; }
  html body .intro-skip{ justify-self:end; min-height:44px; padding:0 0.4rem; border:none; background:none; color:var(--ink-3); font:inherit; font-size:var(--fs-base); font-weight:600; cursor:pointer; }
  html body .intro-track{ position:relative; height:30px; overflow:hidden; }
  html body .it-wave{ position:absolute; left:0; right:0; bottom:3px; width:100%; height:10px; fill:none; stroke:var(--surface-3); stroke-width:2.6; stroke-linecap:round; vector-effect:non-scaling-stroke; overflow:visible; }
  html body .it-fill{ stroke:var(--brand); clip-path:inset(0 calc((1 - var(--p, 0)) * 100%) 0 0); transition:clip-path 700ms var(--e-out); }
  html body .it-mover{ position:absolute; left:0; top:0; width:calc(100% - 22px); height:22px; transform:translateX(calc(var(--p, 0) * 100%)); transition:transform 700ms var(--e-out); }
  html body .it-cart{ position:absolute; left:0; top:0; width:22px; height:22px; color:var(--brand); stroke-width:2.2; }
  html body .intro-stage{ position:relative; z-index:1; flex:1; width:100%; max-width:480px; margin:0 auto; min-height:0; }
  html body .intro-screen{ position:absolute; inset:0; overflow-y:auto; padding:1rem 24px 1.5rem; display:flex; flex-direction:column; gap:1.4rem; scrollbar-width:none; }
  html body .intro-screen::-webkit-scrollbar{ display:none; }
  html body .intro-foot{ position:relative; z-index:1; width:100%; max-width:480px; margin:0 auto; padding:0.6rem 24px 1.1rem; }
  html body #intro-next{ min-height:54px; font-size:var(--fs-item); }
  html body .intro-text{ display:flex; flex-direction:column; align-items:center; gap:0.5rem; text-align:center; }
  html body .intro-h{ margin:0; font-size:var(--fs-xl); line-height:1.2; font-weight:700 !important; letter-spacing:-0.02em; color:var(--ink); text-wrap:balance; }
  html body .intro-p{ margin:0; font-size:var(--fs-base); line-height:1.5; color:var(--ink-2); max-width:32ch; text-wrap:balance; }
  html body .intro-tile{ display:block; }
  /* welcome */
  html body .intro-screen[data-view="welcome"]{ justify-content:center; }
  html body .iw-hero{ position:relative; height:220px; display:flex; align-items:center; justify-content:center; flex:none; }
  html body .iw-hero.small{ height:150px; margin-top:auto; }
  html body .intro-screen[data-view="ready"] .iw-hero.small + .intro-text{ margin-bottom:auto; }
  html body .iw-tile{ filter:drop-shadow(0 12px 26px rgba(59,69,221,0.32)); transform-origin:50% 100%; }
  /* what gets in the way */
  html body .io-list{ display:flex; flex-direction:column; gap:0.6rem; }
  html body .io-opt{ display:flex; align-items:center; gap:0.8rem; min-height:60px; padding:0.6rem 0.9rem 0.6rem 0.7rem; border:none; border-radius:var(--r-md); background:var(--surface);
    color:var(--ink); font:inherit; font-size:var(--fs-base); font-weight:600; text-align:left; cursor:pointer; box-shadow:inset 0 0 0 1.5px transparent; transition:box-shadow 160ms ease, background-color 160ms ease; }
  html body .io-ico{ width:38px; height:38px; flex:none; border-radius:12px; background:var(--brand-soft); color:var(--brand-text); display:flex; align-items:center; justify-content:center; }
  html body .io-ico .icon{ width:20px; height:20px; stroke-width:2; }
  html body .io-txt{ flex:1; }
  html body .io-check, html body .st-check{ width:24px; height:24px; flex:none; border-radius:50%; box-shadow:inset 0 0 0 1.5px var(--surface-3); display:flex; align-items:center; justify-content:center; color:#fff; transition:background-color 160ms ease, box-shadow 160ms ease; }
  html body .io-check .icon, html body .st-check .icon{ width:14px; height:14px; stroke-width:3; transform:scale(0); transition:transform 200ms var(--e-spring); }
  html body .io-opt.on{ background:var(--brand-soft); box-shadow:inset 0 0 0 1.5px var(--brand); }
  html body .io-opt.on .io-ico{ background:var(--brand); color:#fff; }
  html body .io-opt.on .io-check, html body .st-tile.on .st-check{ background:var(--brand); box-shadow:none; }
  html body .io-opt.on .io-check .icon, html body .st-tile.on .st-check .icon{ transform:none; }
  /* demo */
  html body .demo{ display:flex; flex-direction:column; align-items:center; gap:0.9rem; }
  html body .demo-card{ position:relative; width:100%; max-width:320px; min-height:268px; padding:0.9rem 1rem 1rem; border-radius:var(--r-md); background:var(--surface); box-shadow:0 14px 34px -18px rgba(22,23,28,0.3); overflow:hidden; }
  html body .demo-head{ display:flex; align-items:center; justify-content:space-between; font-weight:700; font-size:var(--fs-item); margin-bottom:0.4rem; }
  html body .demo-cart{ width:34px; height:34px; border-radius:50%; background:var(--brand-soft); color:var(--brand-text); display:flex; align-items:center; justify-content:center; }
  html body .demo-cart .icon{ width:18px; height:18px; stroke-width:2.1; }
  html body .demo-sec{ font-size:var(--fs-cap); font-weight:700; color:var(--ink-3); padding:0.55rem 0 0.15rem; }
  html body .demo-item{ display:flex; align-items:center; gap:0.6rem; min-height:36px; font-size:var(--fs-base); font-weight:500; border-top:1px solid var(--divider); opacity:0; transform:translateY(-12px); }
  html body .demo-sec + .demo-item{ border-top:none; }
  html body .demo-box{ width:20px; height:20px; flex:none; border-radius:50%; box-shadow:inset 0 0 0 1.5px var(--surface-3); display:flex; align-items:center; justify-content:center; color:#fff; transition:background-color 160ms ease; }
  html body .demo-box .icon{ width:12px; height:12px; stroke-width:3.2; transform:scale(0); }
  html body .demo-name{ flex:1; }
  html body .demo-tag{ font-size:var(--fs-cap); font-weight:700; color:var(--good, #0E8A5F); background:rgba(16,185,129,0.12); padding:0.15rem 0.45rem; border-radius:999px; white-space:nowrap; }
  html body .demo-receipt{ position:absolute; left:0.8rem; right:0.8rem; bottom:0.8rem; display:flex; align-items:center; gap:0.7rem; padding:0.8rem 0.9rem; border-radius:var(--r-sm); color:#fff; background:var(--brand-wave-light) no-repeat bottom / 100% 55%, var(--grad, var(--brand)); opacity:0; transform:translateY(120%); }
  html body .dr-ico{ width:34px; height:34px; border-radius:10px; background:rgba(255,255,255,0.18); display:flex; align-items:center; justify-content:center; flex:none; }
  html body .dr-ico .icon{ width:18px; height:18px; stroke-width:2; }
  html body .dr-txt{ flex:1; display:flex; flex-direction:column; line-height:1.25; font-size:var(--fs-sm); }
  html body .dr-txt small{ font-size:var(--fs-cap); opacity:0.85; }
  html body .dr-total{ font-size:var(--fs-item); }
  /* why not Notes */
  html body .vs{ display:flex; flex-direction:column; gap:0.55rem; }
  html body .vs-row{ display:grid; grid-template-columns:1fr 1fr; gap:0.55rem; }
  html body .vs-head{ font-size:var(--fs-cap); font-weight:700; color:var(--ink-3); text-align:center; }
  html body .vs-head span:last-child{ color:var(--brand-text); }
  html body .vs-no, html body .vs-yes{ display:flex; align-items:center; gap:0.45rem; min-height:64px; padding:0.6rem 0.75rem; border-radius:var(--r-sm); font-size:var(--fs-sm); line-height:1.3; font-weight:600; }
  html body .vs-no{ background:var(--surface); color:var(--ink-3); }
  html body .vs-no > span{ text-decoration:line-through; text-decoration-thickness:1.5px; text-decoration-color:transparent; transition:text-decoration-color 420ms ease var(--d, 700ms); }
  html body .vs-no.strike > span{ text-decoration-color:var(--ink-3); }
  html body .vs-yes{ background:var(--brand-soft); color:var(--brand-text); }
  html body .vs-yes .icon{ width:16px; height:16px; flex:none; stroke-width:2.8; }
  /* stores */
  html body .st-grid{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:0.6rem; }
  html body .st-tile{ position:relative; display:flex; flex-direction:column; align-items:center; gap:0.45rem; padding:0.85rem 0.3rem 0.7rem; border:none; border-radius:var(--r-md); background:var(--surface);
    color:var(--ink); font:inherit; cursor:pointer; box-shadow:inset 0 0 0 1.5px transparent; transition:box-shadow 160ms ease, background-color 160ms ease; }
  html body .st-tile.on{ background:var(--brand-soft); box-shadow:inset 0 0 0 1.5px var(--brand); }
  html body .st-logo{ position:relative; width:46px; height:46px; border-radius:24%; background:#FFFFFF; box-shadow:0 0 0 1px rgba(22,23,28,0.08); overflow:hidden; display:flex; align-items:center; justify-content:center; flex:none; }
  html body .st-logo img{ width:100%; height:100%; object-fit:contain; position:relative; z-index:1; background:#FFFFFF; }
  html body .st-logo b{ position:absolute; font-size:1.1rem; font-weight:700; color:var(--brand-text); }
  html body .st-logo.none{ background:var(--brand-soft); box-shadow:none; }
  html body .st-name{ font-size:var(--fs-cap); font-weight:600; line-height:1.2; text-align:center; overflow-wrap:anywhere; }
  html body .st-check{ position:absolute; top:6px; right:6px; width:20px; height:20px; box-shadow:none; opacity:0; transform:scale(0.5); transition:opacity 160ms ease, transform 200ms var(--e-spring); }
  html body .st-tile.on .st-check{ opacity:1; transform:none; }
  html body .st-tile.st-other .st-logo{ background:var(--brand-soft); box-shadow:none; color:var(--brand-text); }
  html body .st-tile.st-other .st-logo .icon{ width:24px; height:24px; stroke-width:2.2; }
  html body .st-tile.st-other .st-name{ color:var(--brand-text); }
  /* typing a store happens on its own sheet, held near the top so the keyboard never moves it */
  html body .st-sheet{ position:fixed; inset:0; z-index:40; display:flex; flex-direction:column; align-items:center;
    padding:calc(env(safe-area-inset-top) + 15vh) 1.25rem 0; background:rgba(22,23,28,0.32); }
  html body .st-sheet[hidden]{ display:none; }
  html body .st-sheet-card{ width:100%; max-width:420px; background:var(--surface); border-radius:var(--r-md); box-shadow:0 24px 48px -18px rgba(22,23,28,0.5); padding:1.1rem 1.1rem 1rem; }
  html body .st-sheet h3{ margin:0 0 0.7rem; font-size:var(--fs-item); }
  html body .st-sheet form{ display:flex; gap:0.5rem; }
  html body .st-sheet input{ flex:1; min-width:0; background:var(--surface-2) !important; }
  html body .st-sheet .btn{ flex:none; min-height:48px; padding:0 1.1rem; }
  /* usuals */
  html body .us-groups{ display:flex; flex-direction:column; gap:1rem; }
  html body .us-head{ font-size:var(--fs-cap); font-weight:700; color:var(--ink-3); margin-bottom:0.45rem; }
  html body .us-chips{ display:flex; flex-wrap:wrap; gap:0.45rem; }
  html body .us-chip{ display:inline-flex; align-items:center; gap:0; min-height:40px; padding:0 0.95rem; border:none; border-radius:999px; background:var(--surface); color:var(--ink);
    font:inherit; font-size:var(--fs-base); font-weight:600; cursor:pointer; transition:background-color 160ms ease, color 160ms ease, gap 160ms ease, padding 160ms ease; }
  html body .us-chip .icon{ width:0; height:15px; stroke-width:3; opacity:0; transition:width 160ms ease, opacity 160ms ease; }
  html body .us-chip.on{ background:var(--brand); color:#fff; gap:0.35rem; padding-left:0.75rem; }
  html body .us-chip.on .icon{ width:15px; opacity:1; }
  /* ready */
  html body .rd-store{ align-self:center; display:inline-flex; align-items:center; gap:0.55rem; padding:0.35rem 0.9rem 0.35rem 0.35rem; border-radius:999px; background:var(--surface); font-weight:600; font-size:var(--fs-base); }
  html body .rd-store .st-logo{ width:30px; height:30px; }
  html body .rd-store .st-logo b{ font-size:0.8rem; }
  html body .rd-card{ padding:0.4rem 1rem 0.7rem; border-radius:var(--r-md); background:var(--surface); box-shadow:0 14px 34px -20px rgba(22,23,28,0.28); }
  html body .rd-sec{ font-size:var(--fs-cap); font-weight:700; color:var(--ink-3); padding:0.6rem 0 0.15rem; }
  html body .rd-item{ display:flex; align-items:center; gap:0.65rem; min-height:40px; font-size:var(--fs-base); font-weight:500; border-top:1px solid var(--divider); }
  html body .rd-sec + .rd-item{ border-top:none; }
  html body .rd-box{ width:20px; height:20px; border-radius:50%; box-shadow:inset 0 0 0 1.5px var(--surface-3); flex:none; }
  /* back from "Save your list" to the intro */
  html body #modal-auth .auth-back{ position:absolute; top:calc(env(safe-area-inset-top) + 10px); left:12px; z-index:4; }
  html body #modal-auth:not(.gate) .auth-back, html body #modal-auth.confirming .auth-back{ display:none; }
  /* the one tip on the first list */
  html body .first-tip{ display:flex; align-items:center; gap:0.75rem; margin:0 0 0.9rem; padding:0.75rem 0.5rem 0.75rem var(--content-inset); border-radius:var(--r-md); background:var(--brand-soft); color:var(--ink); }
  html body .first-tip p{ flex:1; margin:0; font-size:var(--fs-base); line-height:1.4; font-weight:500; }
  html body .first-tip .intro-tile{ flex:none; }
  html body .ft-x{ width:36px; height:36px; flex:none; border:none; background:none; border-radius:50%; color:var(--ink-3); display:flex; align-items:center; justify-content:center; cursor:pointer; }
  html body .ft-x .icon{ width:16px; height:16px; stroke-width:2.2; }
  @media (prefers-reduced-motion: reduce){
    html body .intro-bg{ animation:none; }
    html body .it-fill, html body .it-mover{ transition:none; }
  }
  /* ---- v137: intro polish; the sign-up screen matches the intro ---- */
  html body .demo-card{ padding-bottom:3.8rem; }
  html body .demo-sec{ transition:opacity 260ms ease; }
  html body #modal-auth.gate{ background:var(--brand-wave-soft) no-repeat 50% calc(100% + 6px) / 140% 190px, var(--bg) !important; }
  /* ---- v166: the intro hands over to the account screen in one wave ---- */
  /* One wave, one direction. #hand lives INSIDE <dialog id="modal-auth">, so it shares that dialog's top
     layer and paints over the account screen without a second dialog and without ever restacking. That is
     what broke the old version: a second <dialog> picked up dialog[open]{ animation:sheetUp } and slid UP
     while its panel slid down, and closing and re-opening it to jump the stacking order started sheetUp
     again over the account screen. Never give #modal-auth a transform, filter, backdrop-filter,
     perspective, contain or will-change:transform: any of them would make it the containing block and
     un-pin the fixed sheet. */
  :root{ --hand-a:#4750E6; --hand-b:#2D63EE; }
  :root[data-app-theme="dark"]{ --hand-a:#5159EE; --hand-b:#3569F2; }
  html body #hand{ position:fixed; inset:0; z-index:5; overflow:hidden; }
  html body #hand[hidden]{ display:none; }
  html body #hand:focus{ outline:none; }
  /* 140% tall and 140% wide, the same stretch the wave at the bottom of every page already uses. ONE path
     with a crest at BOTH ends and the gradient inside it, so there is no seam, no ribbon and no straight
     edge anywhere. The old version drew the crest as a separate box outside the panel, which is where the
     three horizontal seams and the see-through stripe came from. */
  html body .hand-sheet{ position:absolute; left:-20%; width:140%; top:0; height:140%; transform:translateY(-100%); }
  html body #hand:not([hidden]) .hand-sheet{ will-change:transform; }
  html body .hand-fill{ position:absolute; inset:0; width:100%; height:100%; display:block; }
  html body .hand-fill .hg-a{ stop-color:var(--hand-a); }
  html body .hand-fill .hg-b{ stop-color:var(--hand-b); }
  html body .hand-msg{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:1rem; padding:0 2rem; text-align:center; color:#FFFFFF; }
  html body .hand-mark{ display:block; width:104px; height:104px; }
  html body .hand-h{ margin:0; font-family:var(--display); font-size:var(--fs-xl); line-height:1.2; font-weight:700; letter-spacing:-0.02em; color:#FFFFFF; }
  html body .hand-p{ margin:0; font-size:var(--fs-item); line-height:1.5; font-weight:500; color:rgba(255,255,255,0.86); max-width:19rem; }
  @media (max-height: 740px){ html body .hand-mark{ width:88px; height:88px; } html body .hand-h{ font-size:var(--fs-xl); } }
  /* while the wave is still coming down the account screen is already open, laid out and fetching its
     providers, but it puts nothing on screen and the intro stays visible underneath it */
  html.handing body #modal-auth.gate{ background:none !important; }
  html.handing body #modal-auth.gate::backdrop{ background:none !important; }
  html.handing body #modal-auth .modal-body{ opacity:0; pointer-events:none; }
  html.handing body #modal-auth .auth-back{ opacity:0; pointer-events:none; }
  html.auth-gated.handing body > #intro{ visibility:visible; }
  html body #modal-auth.gate .field input, html body #modal-auth.gate .otp-cell{ background:var(--surface) !important; }
  html body .splash.from-auth{ background:var(--brand-wave-soft) no-repeat 50% calc(100% + 6px) / 140% 190px, var(--bg); }
  /* ---- v138: intro pages fit the screen (no scrolling), balanced spacing, new layouts ---- */
  html body .intro-screen{ overflow:hidden; justify-content:center; gap:clamp(1.1rem, 3.4vh, 1.9rem); padding:0.5rem 24px 0.75rem; }
  html body .intro-screen[data-view="welcome"]{ gap:clamp(0.6rem, 2vh, 1.2rem); }
  /* goals */
  html body .io-list{ gap:clamp(0.5rem, 1.4vh, 0.75rem); }
  html body .io-opt{ min-height:clamp(56px, 8.2vh, 68px); }
  /* notes -> Aislo */
  html body .vs{ gap:clamp(0.55rem, 1.6vh, 0.85rem); }
  html body .vs-row{ grid-template-columns:minmax(0, 1fr) 22px minmax(0, 1.15fr); align-items:center; gap:0.4rem; }
  html body .vs-head{ font-size:var(--fs-cap); }
  html body .vs-no{ min-height:clamp(58px, 8.5vh, 70px); background:var(--surface); color:var(--ink-3); font-weight:500; text-decoration:none; }
  html body .vs-arrow{ display:flex; align-items:center; justify-content:center; color:var(--brand-text); }
  html body .vs-arrow .icon{ width:18px; height:18px; stroke-width:2.6; }
  html body .vs-yes{ min-height:clamp(58px, 8.5vh, 70px); }
  html body .vs-ic{ width:28px; height:28px; flex:none; border-radius:9px; background:var(--brand); color:#fff; display:flex; align-items:center; justify-content:center; }
  html body .vs-ic .icon{ width:15px; height:15px; stroke-width:2.2; }
  /* stores: 3 x 3, crisp logos on white */
  html body .st-grid{ gap:clamp(0.45rem, 1.3vh, 0.65rem); }
  html body .st-tile{ padding:clamp(0.6rem, 1.6vh, 0.85rem) 0.3rem clamp(0.5rem, 1.4vh, 0.7rem); gap:0.4rem; }
  html body .st-logo{ width:clamp(42px, 6.4vh, 52px); height:clamp(42px, 6.4vh, 52px); background:#FFFFFF; padding:3px; box-shadow:0 0 0 1px rgba(22,23,28,0.06), 0 4px 10px -6px rgba(22,23,28,0.3); }
  html body .st-logo img{ width:100%; height:100%; object-fit:contain; border-radius:20%; }
  /* usuals: one centred cloud */
  html body .us-cloud{ display:flex; flex-wrap:wrap; justify-content:center; gap:clamp(0.45rem, 1.3vh, 0.65rem); }
  html body .us-cloud .us-chip{ min-height:clamp(44px, 6.2vh, 50px); padding:0 1.1rem; font-size:var(--fs-base); box-shadow:0 1px 0 rgba(22,23,28,0.03); }
  html body .us-cloud .us-chip.on{ padding-left:0.85rem; }
  /* ready: category rows of pills */
  html body .rd-card{ display:flex; flex-direction:column; padding:0.35rem 1rem; }
  html body .rd-row{ display:flex; flex-direction:column; gap:0.4rem; padding:0.7rem 0; border-top:1px solid var(--divider); }
  html body .rd-row:first-child{ border-top:none; }
  html body .rd-row .rd-sec{ padding:0; }
  html body .rd-pills{ display:flex; flex-wrap:wrap; gap:0.35rem; }
  html body .rd-pill{ padding:0.35rem 0.75rem; border-radius:999px; background:var(--brand-soft); color:var(--brand-text); font-size:var(--fs-sm); font-weight:600; }
  /* shorter phones: everything a notch smaller so nothing needs scrolling */
  @media (max-height: 740px){
    html body .intro-h{ font-size:var(--fs-lg); }
    html body .intro-p{ font-size:var(--fs-base); }
    html body .iw-hero{ height:180px; }
    html body .demo-card{ min-height:236px; padding-top:0.7rem; }
    html body .demo-item{ min-height:32px; }
    html body #intro-next{ min-height:50px; }
    html body .rd-row{ padding:0.5rem 0; }
    html body .st-name{ font-size:var(--fs-cap); }
  }
  /* ---- v139: note -> logo on the Notes page; the cart on the usuals page ---- */
  html body .vs-hero{ display:flex; align-items:center; justify-content:center; gap:0.9rem; }
  html body .vs-doc{ width:52px; height:64px; border-radius:12px; background:var(--surface); box-shadow:0 0 0 1px var(--hair); display:flex; flex-direction:column; justify-content:center; gap:7px; padding:0 11px; }
  html body .vs-doc i{ display:block; height:4px; border-radius:2px; background:var(--surface-3); }
  html body .vs-doc i:nth-child(2){ width:78%; } html body .vs-doc i:nth-child(4){ width:58%; }
  html body .vs-hero-arrow{ color:var(--ink-3); display:flex; }
  html body .vs-hero-arrow .icon{ width:20px; height:20px; stroke-width:2.4; }
  html body .vs-tile{ display:block; filter:drop-shadow(0 10px 20px rgba(59,69,221,0.3)); transform-origin:50% 100%; }
  html body .vs-no, html body .vs-yes{ font-size:var(--fs-base); }
  html body .us-cart{ position:relative; align-self:center; width:112px; color:var(--surface-3); transition:color 240ms ease; }
  html body .us-cart.full{ color:var(--brand-text); }
  html body .us-cart-svg{ display:block; width:112px; height:80px; overflow:visible; transform-origin:50% 100%; }
  html body .us-basket{ fill:currentColor; fill-opacity:0.12; }
  html body .us-count{ position:absolute; left:60%; top:18px; transform-origin:50% 50%; min-width:28px; height:28px; padding:0 7px; border-radius:999px; background:var(--brand); color:#fff;
    font-size:var(--fs-sm); font-weight:700; display:flex; align-items:center; justify-content:center; margin-left:-14px; opacity:0; transition:opacity 200ms ease; }
  html body .us-cart.full .us-count{ opacity:1; }
  @media (max-height: 740px){
    html body .vs-hero{ display:none; }
    html body .us-cart{ width:92px; } html body .us-cart-svg{ width:92px; height:66px; }
  }
  /* ---- v140: ready page rows: category and its items on one line ---- */
  html body .rd-row{ display:grid; grid-template-columns:6.4rem minmax(0, 1fr); align-items:center; column-gap:0.6rem; padding:0.6rem 0; }
  html body .rd-row .rd-sec{ font-size:var(--fs-cap); line-height:1.25; }
  html body .rd-pill{ padding:0.3rem 0.7rem; font-size:var(--fs-sm); }
  @media (max-height: 740px){
    html body .rd-row{ padding:0.42rem 0; }
    html body .rd-pill{ padding:0.24rem 0.6rem; font-size:var(--fs-sm); }
    html body .rd-pills{ gap:0.3rem; }
  }
  /* ---- v141: bare logos; drawings of the groceries going into the cart ---- */
  html body .st-logo{ background:none !important; box-shadow:none !important; padding:0; border-radius:0; overflow:visible; }
  html body .st-logo img{ opacity:0; border-radius:22%; transition:opacity 200ms ease; background:none; }
  html body .st-logo.ready img{ opacity:1; }
  html body .st-logo b{ display:none; }
  html body .st-logo.none{ background:var(--brand-soft) !important; border-radius:24%; }
  html body .st-logo.none b{ display:flex; }
  html body .st-logo.none img{ display:none; }
  html body .st-logo.finding{ animation:logoFind 1s ease-in-out infinite; }
  @keyframes logoFind{ 0%,100%{ opacity:1; transform:scale(1); } 50%{ opacity:0.55; transform:scale(0.92); } }
  html body .us-grid{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:clamp(0.4rem, 1.2vh, 0.6rem); }
  html body .us-tile{ position:relative; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:0.35rem; padding:clamp(0.55rem, 1.5vh, 0.75rem) 0.2rem clamp(0.45rem, 1.2vh, 0.6rem);
    border:none; border-radius:var(--r-md); background:var(--surface); color:var(--ink); font:inherit; cursor:pointer; box-shadow:inset 0 0 0 1.5px transparent; transition:box-shadow 160ms ease, background-color 160ms ease; }
  html body .us-tile.on{ background:var(--brand-soft); box-shadow:inset 0 0 0 1.5px var(--brand); }
  html body .us-art{ width:clamp(34px, 5.2vh, 44px); height:clamp(34px, 5.2vh, 44px); display:block; }
  html body .us-name{ font-size:0.72rem; font-weight:600; line-height:1.15; text-align:center; overflow-wrap:anywhere; }
  html body .us-tile .st-check{ position:absolute; top:5px; right:5px; width:18px; height:18px; opacity:0; transform:scale(0.5); transition:opacity 160ms ease, transform 200ms var(--e-spring); }
  html body .us-tile.on .st-check{ opacity:1; transform:none; background:var(--brand); }
  html body .us-tile.on .st-check .icon{ transform:none; }
  html body .us-cart{ width:170px; height:121px; }
  html body .us-cart-svg{ position:relative; z-index:1; width:170px; height:121px; }
  html body .us-in{ position:absolute; inset:0; z-index:0; }
  html body .us-in-item{ position:absolute; left:0; top:0; width:32px; height:32px; transition:transform 320ms var(--e-out); }
  html body .us-count{ left:auto; right:-4px; top:0; margin-left:0; z-index:2; }
  html body .us-fly{ position:fixed; z-index:5; margin:0; pointer-events:none; transform-origin:0 0; will-change:transform; }
  @media (max-height: 740px){
    html body .us-cart{ width:170px; transform:scale(0.84); margin:-10px 0 -10px; }
    html body .us-cart-svg{ width:170px; height:121px; }
    html body .us-name{ font-size:0.68rem; }
  }
  /* ---- v142: store grid centres a short last row; cart items are physics bodies ---- */
  html body .st-grid{ display:flex; flex-wrap:wrap; justify-content:center; }
  html body .st-grid .st-tile{ width:calc((100% - 2 * clamp(0.45rem, 1.3vh, 0.65rem)) / 3); }
  html body .us-in{ overflow:visible; }
  html body .us-in-item{ transition:none; transform-origin:50% 50%; will-change:transform; }
  /* ---- v145: smaller grid, bigger cart and groceries; the cart drives from page to page ---- */
  html body .intro-screen.leaving{ z-index:2; pointer-events:none; }
  html body .us-grid{ gap:0.4rem; }
  html body .us-tile{ padding:0.5rem 0.2rem 0.4rem; gap:0.25rem; }
  html body .us-art{ width:clamp(28px, 4.2vh, 34px); height:clamp(28px, 4.2vh, 34px); }
  html body .us-name{ font-size:0.68rem; }
  html body .cartwrap{ display:flex; justify-content:center; will-change:transform; }
  html body .us-cart, html body .us-cart-svg{ width:220px; height:157px; }
  html body .us-cart{ margin:0; transform:none; }
  html body .us-in-item{ transform-origin:50% 85%; }
  html body .us-count{ right:-2px; top:4px; min-width:30px; height:30px; font-size:var(--fs-base); }
  html body .us-wheel{ transform-box:fill-box; transform-origin:50% 50%; }
  html body .driving .us-wheel{ animation:usWheel 0.4s linear infinite; }
  html body .driving.rev .us-wheel{ animation-direction:reverse; }
  @keyframes usWheel{ to{ transform:rotate(360deg); } }
  html body .rd-hero{ display:flex; align-items:center; justify-content:center; gap:0.6rem; }
  html body .rd-hero .cartwrap{ width:calc(220px * 0.62); height:calc(157px * 0.62); justify-content:flex-start; flex:none; }
  html body .rd-hero .us-cart{ transform:scale(0.62); transform-origin:0 0; }
  html body .rd-hero .rd-store{ align-self:center; }
  @media (max-height: 740px){
    html body .us-cart{ transform:scale(0.84); transform-origin:50% 0; margin-bottom:-25px; }
    html body .rd-hero .cartwrap{ width:calc(220px * 0.52); height:calc(157px * 0.52); }
    html body .rd-hero .us-cart{ transform:scale(0.52); transform-origin:0 0; margin:0; }
    html body .us-art{ width:28px; height:28px; }
  }
  @media (prefers-reduced-motion: reduce){ html body .driving .us-wheel{ animation:none; } }
  html body .intro-screen[data-view="usuals"] .cartwrap{ padding-top:44px; }
  @media (max-height: 740px){ html body .intro-screen[data-view="usuals"] .cartwrap{ padding-top:30px; } }
  html body .rd-hero .cartwrap{ padding-top:30px; height:calc(157px * 0.62 + 30px); }
  html body .rd-hero{ gap:0.9rem; }
  @media (max-height: 740px){ html body .rd-hero .cartwrap{ padding-top:24px; height:calc(157px * 0.52 + 24px); } }
  /* ---- v146: the cart lives at the bottom of the usuals and ready pages; the tour ---- */
  html body .intro-screen[data-view="usuals"] .intro-text, html body .intro-screen[data-view="ready"] .intro-text{ margin-top:auto; }
  html body .intro-screen[data-view="usuals"] .cartwrap, html body .intro-screen[data-view="ready"] .cartwrap{ margin-top:auto; padding-top:44px; width:100%; }
  html body .intro-screen[data-view="ready"] .rd-card{ padding:0.2rem 1rem; }
  html body .intro-screen[data-view="ready"] .rd-row{ padding:0.5rem 0; }
  @media (max-height: 740px){
    html body .intro-screen[data-view="usuals"] .cartwrap, html body .intro-screen[data-view="ready"] .cartwrap{ padding-top:30px; }
    html body .intro-screen[data-view="ready"] .rd-row{ padding:0.36rem 0; }
    html body .intro-screen[data-view="ready"] .rd-pill{ padding:0.2rem 0.55rem; font-size:var(--fs-cap); }
  }
  html body .tour{ position:fixed; inset:0; z-index:190; touch-action:none; }
  html body .tour[hidden]{ display:none; }
  html body .tour-spot{ position:absolute; left:50%; top:50%; width:2px; height:2px; border-radius:22px; box-shadow:0 0 0 200vmax rgba(14,15,18,0.62); pointer-events:none; }
  html[data-app-theme="dark"] body .tour-spot{ box-shadow:0 0 0 200vmax rgba(0,0,0,0.72); }
  html body .tour-card{ position:absolute; padding:1rem 1.1rem 0.85rem; border-radius:var(--r-md); background:var(--surface); color:var(--ink); box-shadow:0 18px 40px -18px rgba(22,23,28,0.45); }
  /* laid out in the page like #bottom-nav (line 369), not in the short fixed viewport.
     Its containing block is the initial one, because body is never positioned. */
  html.fill-screen body .tour{ position:absolute; top:0; left:0; right:auto; bottom:auto; width:100%; height:var(--app-h); }
  html body .tour-tile{ width:44px; height:44px; margin-bottom:0.6rem; }
  html body .tour-tile .intro-tile{ width:44px; height:44px; }
  html body .tour-card h3{ margin:0 0 0.3rem; font-size:var(--fs-item); line-height:1.25; font-weight:700 !important; letter-spacing:-0.01em; color:var(--ink); }
  html body .tour-card p{ margin:0; font-size:var(--fs-base); line-height:1.45; color:var(--ink-2); }
  html body .tour-foot{ display:flex; align-items:center; gap:0.6rem; margin-top:0.9rem; }
  html body .tour-dots{ flex:1; display:flex; gap:5px; }
  html body .tour-dots i{ width:6px; height:6px; border-radius:3px; background:var(--surface-3); transition:transform 240ms ease, background-color 240ms ease; }
  html body .tour-dots i.on{ background:var(--brand); transform:scaleX(2.2); }
  html body .tour-foot .text-btn{ min-height:40px; padding:0 0.5rem; font-size:var(--fs-sm) !important; }
  html body .tour-foot .text-btn[hidden]{ display:none; }
  html body .tour-foot .btn{ min-height:42px; padding:0 1.2rem; }
  html body .tour-card.center{ text-align:center; }
  html body .tour-card.center .tour-tile{ margin:0 auto 0.6rem; }
  html body .tour-card.center .tour-dots{ display:none; }
  html body .tour-card.center .tour-foot{ justify-content:center; }
  html body .tour-card.center .btn{ width:100%; }
  /* ---- v147: one cart for the whole intro; page three is hands-on ---- */
  html body #cartwrap{ flex:none; width:100%; max-width:480px; margin:0 auto; padding:0 24px; }
  html body #cartwrap[hidden]{ display:none; }
  html body .intro-screen[data-view="usuals"] .cartwrap, html body .intro-screen[data-view="ready"] .cartwrap{ display:none; }
  html body .intro-screen[data-view="usuals"] .us-grid{ margin-top:auto; margin-bottom:auto; }
  html body .intro-screen[data-view="ready"] .rd-card{ margin-bottom:auto; }
  /* the mini list you can actually tap */
  html body .demo-item{ width:100%; border:none; background:none; font:inherit; color:var(--ink); text-align:left; cursor:pointer; opacity:1; transform:none; padding:0; }
  html body .demo-item .demo-box{ transition:background-color 200ms ease, box-shadow 200ms ease; }
  html body .demo-item .demo-box .icon{ transform:scale(0); transition:transform 260ms var(--e-spring); }
  html body .demo-item.ticked .demo-box{ background:var(--brand); box-shadow:none; }
  html body .demo-item.ticked .demo-box .icon{ transform:none; }
  html body .demo-item.ticked .demo-name{ color:var(--ink-3); text-decoration:line-through; text-decoration-color:var(--ink-3); }
  html body .demo-item.ticked .demo-tag{ opacity:0; }
  html body .demo-item:active .demo-name{ transform:translateX(2px); }
  html body .demo-name{ transition:color 200ms ease, transform 130ms ease; }
  html body .demo-tag{ transition:opacity 200ms ease; }
  html body .demo.paid .demo-receipt{ opacity:1; transform:none; transition:transform 560ms var(--e-out), opacity 200ms ease; }
  html body .demo.paid .demo-list{ opacity:0.25; transition:opacity 360ms ease; }
  html body .demo-card{ min-height:262px; }
  /* ---- v150: the cart is centred, with the same gap above it and below it ---- */
  html body .intro-screen[data-view="usuals"], html body .intro-screen[data-view="ready"]{ justify-content:flex-end; padding-bottom:0; }
  html body #cartwrap{ margin:18px auto; padding:0 24px; }
  html body .intro-screen[data-view="usuals"] .us-grid, html body .intro-screen[data-view="ready"] .rd-card{ margin-bottom:0; }
  html body .intro-screen[data-view="usuals"] .intro-text, html body .intro-screen[data-view="ready"] .intro-text{ margin-top:auto; }
  html body .intro-foot{ padding-top:18px; }
  @media (max-height: 740px){ html body #cartwrap{ margin:12px auto; } html body .intro-foot{ padding-top:12px; } }
  /* ---- v151: the sign-up message can carry one action ---- */
  html body .auth-msg.has-action{ display:flex; flex-wrap:wrap; align-items:center; column-gap:0.4rem; }
  html body .auth-msg.has-action[hidden]{ display:none !important; }
  /* ---- v151: the welcome page shows the list itself ---- */
  html body .intro-screen[data-view="welcome"]{ gap:clamp(0.9rem, 2.6vh, 1.5rem); }
  html body .intro-screen[data-view="welcome"] .iw-hero{ height:auto; flex:none; display:block; }
  html body .intro-screen[data-view="welcome"] .iw-tile{ width:64px; height:64px; margin:0 auto clamp(0.55rem, 1.5vh, 0.9rem); }
  html body .intro-screen[data-view="welcome"] .iw-tile > svg{ display:block; width:100%; height:100%; }
  html body .iw-stack{ position:relative; width:min(282px, 100%); margin:0 auto; padding-bottom:38px; }
  html body .iw-back{ position:absolute; z-index:1; left:0; right:0; top:0; bottom:38px; border-radius:var(--r-md); background:var(--surface-2);
    box-shadow:inset 0 0 0 1px var(--hair), 0 10px 22px -18px rgba(22,23,28,0.5); transform-origin:50% 0%; transform:translateY(-12px) scale(0.94); }
  html body .iw-card{ position:relative; z-index:2; padding:clamp(0.55rem,1.3vh,0.75rem) clamp(0.7rem,1.6vh,0.85rem); border-radius:var(--r-md);
    background:var(--surface); box-shadow:var(--card-shadow), 0 20px 36px -24px rgba(22,23,28,0.45); }
  html body .iw-head{ display:flex; align-items:center; justify-content:space-between; gap:0.5rem; min-height:30px; }
  html body .iw-title{ font-size:var(--fs-base); font-weight:700; letter-spacing:-0.01em; }
  html body .iw-cart{ width:28px; height:28px; flex:none; border-radius:50%; background:var(--brand-soft); color:var(--brand-text); display:flex; align-items:center; justify-content:center; }
  html body .iw-cart .icon{ width:15px; height:15px; stroke-width:2.1; }
  html body .iw-sec{ padding:0.45rem 0 0.15rem; font-size:var(--fs-cap); font-weight:700; color:var(--ink-3); }
  html body .iw-sec + .iw-row{ border-top:none; }
  html body .iw-row{ display:flex; align-items:center; gap:0.6rem; min-height:clamp(34px, 4.6vh, 42px); border-top:1px solid var(--divider); }
  html body .iw-box{ width:20px; height:20px; flex:none; border-radius:50%; border:1.6px solid var(--ink-3); }
  html body .iw-art{ width:clamp(22px, 3vh, 26px); height:clamp(22px, 3vh, 26px); flex:none; display:block; }
  html body .iw-name{ flex:1; min-width:0; font-size:var(--fs-base); font-weight:500; }
  html body .iw-qty{ flex:none; min-width:34px; height:26px; padding:0 0.5rem; border-radius:999px; background:var(--surface-2); color:var(--ink-2);
    font-size:var(--fs-sm); font-weight:600; display:flex; align-items:center; justify-content:center; }
  html body .iw-slip{ position:absolute; z-index:1; left:44%; right:-4px; bottom:0; height:44px; display:flex; align-items:center; justify-content:center; gap:0.5rem; padding:0 0.85rem 0 0.6rem;
    border-radius:var(--r-sm); color:#fff; background:var(--brand-wave-light) no-repeat bottom / 100% 55%, var(--grad); box-shadow:0 14px 26px -18px rgba(59,69,221,0.95);
    transform-origin:100% 0%; transform:rotate(-2.5deg); }
  html body .iw-slip-ic{ width:26px; height:26px; flex:none; border-radius:8px; background:rgba(255,255,255,0.18); display:flex; align-items:center; justify-content:center; }
  html body .iw-slip-ic .icon{ width:15px; height:15px; stroke-width:2; }
  html body .iw-slip-t{ font-size:var(--fs-sm); font-weight:600; }
  @media (max-height: 740px){
    html body .iw-stack{ width:min(268px, 100%); padding-bottom:34px; }
    html body .iw-back{ bottom:34px; }
    html body .iw-slip{ height:40px; left:42%; }
    html body .intro-screen[data-view="welcome"] .iw-tile{ width:56px; height:56px; }
    html body .iw-name{ font-size:var(--fs-sm); }
  }
  /* ---- v152: the handle is checked while you type ---- */
  html body .field-note{ display:flex; align-items:center; gap:0.35rem; margin:0.4rem 0 0; font-size:var(--fs-sm) !important; color:var(--ink-3); }
  html body .field-note.free{ color:var(--good); }
  html body .field-note.taken{ color:var(--danger); }
  html body .field-note .icon{ flex-shrink:0; width:14px; height:14px; }
  /* ---- v154: pick a handle after a Google sign in ---- */
  /* a hidden row is still the adjacent sibling, so the one after it drew a divider with
     nothing above it */
  html body .sheet-group .set-row[hidden] + .set-row{ box-shadow:none; }
  html body #modal-username.gate{ top:0 !important; bottom:0 !important; height:100dvh !important; max-height:none !important; max-width:none !important; width:100% !important;
    border:none !important; border-radius:0 !important; background:var(--bg) !important; padding:0 1.25rem calc(1.25rem + env(safe-area-inset-bottom)) !important; overflow-y:auto; }
  html body #modal-username.gate::backdrop{ background:var(--bg) !important; }
  html body #modal-username .modal-body{ width:100%; max-width:430px; margin:0 auto; padding-top:clamp(1.25rem, 8vh, 4.5rem); max-height:none; overflow:visible; }
  html body #modal-username .auth-hero{ margin-bottom:1.4rem; }
  html body #modal-username .auth-logo{ width:76px; height:76px; }
  html body #modal-username .un-sub{ margin:0 0 1.2rem; font-size:var(--fs-base); line-height:1.45; color:var(--ink-2); text-align:center; }
  /* ---- v155: which list you are on ---- */
  html body .list-pick{ display:flex; align-items:center; gap:0.35rem; min-width:0; padding:0; margin:0; border:none; background:none; color:inherit; font:inherit; text-align:left; cursor:pointer; }
  html body .list-pick[hidden]{ display:none; }
  html body .list-pick h2{ margin:0; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  html body .list-pick .lp-chev{ width:18px; height:18px; flex:none; color:var(--ink-3); }
  html body .list-pick:active{ opacity:0.65; }
  html body .lp-row{ display:flex; align-items:center; gap:0.5rem; min-width:0; }
  html body .lp-row .lp-name{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  html body .lp-shared{ flex:none; width:16px; height:16px; color:var(--ink-3); display:none; }
  html body .list-pick.shared .lp-shared, html body .pop-item.shared .lp-shared{ display:block; }
  /* S6: a menu row that destroys something says so before it is tapped, not after */
  html body .pop-item.pop-danger{ color:var(--danger); }
  html body .pop-item.pop-danger .icon{ color:var(--danger); }
  /* ---- v156: the account screen fits without scrolling, notch and all ---- */
  /* Enabling Google added a 52px button that was not there when this was last measured, and a
     real iPhone spends about 90px on the notch and the home indicator that a desktop browser
     does not. Short screens get a tighter gate rather than a scrollbar. */
  @media (max-height: 780px){
    html body #modal-auth.gate .modal-body{ padding-top:calc(env(safe-area-inset-top) + 0.5rem) !important; }
    html body #modal-auth.gate .auth-logo{ width:56px; height:56px; }
    html body #modal-auth.gate .auth-hero{ margin-bottom:0.7rem; }
    html body #modal-auth.gate #auth-title{ font-size:var(--fs-lg); }
    html body #modal-auth.gate .field{ margin-bottom:0.5rem; }
    html body #modal-auth.gate .field label{ margin-bottom:0.15rem !important; }
    html body #modal-auth.gate .field input{ min-height:46px !important; }
    html body #modal-auth.gate .auth-forgot-row{ margin:0.15rem 0 0; }
    html body #modal-auth.gate .auth-or{ margin:0.7rem 0; }
    html body #modal-auth.gate .social-btn{ min-height:46px !important; }
    html body #modal-auth.gate .auth-links{ margin-top:0.5rem; }
    html body #modal-auth.gate .btn-block{ min-height:46px !important; }
  }
  /* ---- v158: sharing a list ---- */
  html body .at-wrap{ position:relative; display:flex; align-items:center; }
  html body .at-wrap .at-sign{ position:absolute; left:0.9rem; color:var(--ink-3); font-weight:600; pointer-events:none; }
  html body .at-wrap input{ padding-left:2rem !important; }
  html body .share-or{ display:flex; align-items:center; gap:0.7rem; margin:1rem 0; color:var(--ink-3); font-size:var(--fs-sm); }
  html body .share-or::before, html body .share-or::after{ content:""; flex:1; height:1px; background:var(--divider); }
  html body .share-note{ margin:0.5rem 0 0; font-size:var(--fs-sm); color:var(--ink-3); text-align:center; }
  html body #share-members{ margin-top:1.2rem; }
  html body #share-members:empty{ display:none; }
  html body .mem-row{ display:flex; align-items:center; gap:0.6rem; min-height:52px; }
  html body .mem-row .mem-name{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  html body .mem-row .mem-tag{ flex:none; font-size:var(--fs-cap); color:var(--ink-3); }
  html body .mem-x{ flex:none; width:34px; height:34px; display:flex; align-items:center; justify-content:center; border:none; background:none; color:var(--ink-3); border-radius:50%; }
  html body .mem-x:active{ background:var(--surface-3); }
  html body .mem-avatar{ flex:none; width:30px; height:30px; border-radius:50%; background:var(--brand-soft); color:var(--brand-text); display:flex; align-items:center; justify-content:center; font-size:0.85rem; font-weight:700; }
  /* ---- v159: asking to be paid back ---- */
  html body .ask-line{ display:flex; align-items:center; gap:0.7rem; min-height:52px; }
  html body .ask-line .al-name{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  html body .ask-line .al-amt{ flex:none; color:var(--ink-2); }
  html body .ask-total{ display:flex; align-items:center; justify-content:space-between; margin:1rem 0; font-weight:700; font-size:var(--fs-item); }
  html body .ask-actions{ display:flex; flex-direction:column; gap:0.6rem; margin-top:1rem; }
  html body #pay-list .owed-row{ display:flex; align-items:center; gap:0.7rem; min-height:56px; width:100%; background:none; border:none; padding:0.55rem var(--content-inset); text-align:left; color:var(--ink); }
  html body #pay-list .owed-row + .owed-row{ box-shadow:inset 0 1px 0 var(--divider); }
  html body .owed-row .ow-main{ flex:1; min-width:0; }
  html body .owed-row .ow-who{ font-size:var(--fs-base); font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  html body .owed-row .ow-sub{ font-size:var(--fs-sm); color:var(--ink-3); margin-top:0.1rem; }
  html body .owed-row .ow-amt{ flex:none; font-size:var(--fs-base); font-weight:600; }
  html body .owed-row.settled .ow-amt, html body .owed-row.settled .ow-who{ color:var(--ink-3); text-decoration:line-through; }
  html body .owed-row.declined .ow-amt{ color:var(--danger); }
  html body .stat-back{ margin-top:0.2rem; font-size:var(--fs-sm); opacity:0.85; }
  /* ---- v160: the manual receipt stops moving under your thumb ---- */
  /* The lines used to grow the sheet itself, so every added row resized the whole thing and
     the fields you were typing in slid away. The list gets its own scroller instead: the sheet
     keeps one height and only this box moves. */
  html body #receipt-lines{ max-height:min(30vh, 248px); overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; }
  html body .line-head{ display:grid; grid-template-columns:minmax(0,1fr) 56px 72px; gap:0.35rem; padding:0 0.4rem 0.3rem; font-size:var(--fs-cap); font-weight:600; color:var(--ink-3); }
  html body .line-head span:nth-child(2), html body .line-head span:nth-child(3){ text-align:center; }
  html body #receipt-lines .line-swipe + .line-swipe{ margin-top:0.35rem; }
  html body .line-item input{ min-height:44px; }
  html body .line-item .rl-qty, html body .line-item .rl-price{ text-align:center; }
  /* the sheet stays put while the keyboard is up rather than resizing to meet it */
  html body #modal-receipt .modal-body{ max-height:min(75vh, 560px); }
  /* ---- v161: what state a payback is in, at a glance ---- */
  html body .rv-ask-btn{ margin-top:1rem; }
  html body .ask-recent{ display:flex; flex-wrap:wrap; gap:0.4rem; margin:0 0 0.8rem; }
  html body .ask-recent[hidden]{ display:none; }
  html body .person-chip{ border:1px solid var(--border-strong); background:var(--surface-2); }
  html body #pay-list .owed-row, html body #archive-list .owed-row{ gap:0.6rem; align-items:flex-start; }
  /* A1 / L4 / S4 / elevation 7: the person leads, and the state is a WORD in a chip, not a colour in a
     dot. Two states that ask for different things were pixel-identical once reduced motion removed the
     pulse, and the old fixed .ow-right gutter let German status text ellipsise the shop AND the person
     out of the row. Nothing here is fixed-width any more. */
  /* elevation 9: placeholders at the real row height, so the sheet never grows under the thumb.
     No shimmer: an animated background-position on a row that lives for 200ms is not worth a repaint. */
  html body .mem-skel{ pointer-events:none; }
  html body .mem-skel .mem-av{ width:30px; height:30px; flex:none; border-radius:50%; background:var(--surface-2); }
  html body .mem-skel .mem-bar{ width:38%; height:0.8rem; margin-left:0.6rem; border-radius:999px; background:var(--surface-2); }
  html body .ow-chip{ display:inline-flex; margin-top:0.3rem; padding:0.15rem 0.5rem; border-radius:999px;
    font-size:var(--fs-cap); font-weight:600; background:none; box-shadow:inset 0 0 0 1px var(--border-strong); color:var(--ink-3); }
  /* owed to you and still open: the brand, because it is yours to chase */
  html body .ow-chip.tone-owed{ background:var(--brand-soft); color:var(--brand-text); }
  /* you owe it: amber, a nudge rather than an alarm */
  html body .ow-chip.tone-due{ background:var(--warn-soft); color:var(--warn); }
  /* they said they paid and it is waiting on you: the one state that asks you to act */
  html body .ow-chip.tone-check{ background:var(--brand); color:#FFFFFF; }
  /* you said you paid, waiting on them */
  html body .ow-chip.tone-wait{ background:none; box-shadow:inset 0 0 0 1px var(--border-strong); color:var(--ink-3); }
  html body .ow-chip.tone-done{ background:var(--good-soft); color:var(--good); }
  html body .ow-chip.tone-no{ background:var(--danger-soft); color:var(--danger); }
  html body .owed-row .ow-amt{ align-self:flex-start; margin-top:0.05rem; }
  /* ---- v163: Receipts keeps its head still; the blue card is the door to paybacks ---- */
  /* pulled up into main's own padding and re-padded, so it paints over the strip it sticks in */
  html body .rc-top{ position:sticky; top:0; z-index:5; background:var(--bg);
    margin:calc(-1.6rem - env(safe-area-inset-top)) -1.25rem 0; padding:calc(1.6rem + env(safe-area-inset-top)) 1.25rem 0.1rem; }
  html body .rc-top .receipt-filters{ margin-bottom:0; padding-bottom:0.9rem; }
  html body .stat[data-action]{ cursor:pointer; }
  html body .stat[data-action]:active{ transform:scale(0.985); transition:transform var(--d-tap) var(--e-out); }
  /* money in and money out, two boxes under the total */
  /* money in and money out: ONE card the width of the total card, split down the middle.
     A card, not two more pills, so the tab reads hero card, content card, then controls. */
  html body .flow-row{ display:flex; margin:0 0 0.9rem; background:var(--surface); border-radius:var(--r-md); box-shadow:var(--card-shadow); overflow:hidden; }
  html body .flow-row[hidden]{ display:none; }
  html body .flow-box{ position:relative; flex:1; display:flex; align-items:center; gap:0.6rem; min-width:0; min-height:64px;
    padding:0 var(--content-inset); border:none; background:none; color:var(--ink); text-align:left; cursor:pointer; }
  html body .flow-box + .flow-box{ box-shadow:inset 1px 0 0 var(--divider); }
  html body .flow-box:active{ background:var(--surface-2); }
  /* the direction lives in a tinted disc, the way the app marks a store or a category */
  html body .flow-ic{ flex:none; width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; }
  html body .flow-box .icon{ width:16px; height:16px; stroke-width:2.4; }
  html body .flow-box.in .flow-ic{ background:var(--brand-soft); color:var(--brand-text); }
  html body .flow-box.out .flow-ic{ background:var(--warn-soft); color:var(--warn); }
  html body .flow-box .fb-text{ display:flex; flex-direction:column; min-width:0; }
  html body .flow-box .fb-label{ font-size:var(--fs-cap); font-weight:600; color:var(--ink-3); line-height:1.25; }
  html body .flow-box .fb-amt{ font-size:var(--fs-item); font-weight:700; line-height:1.3; overflow:hidden; text-overflow:ellipsis; }
  /* something in here is waiting on you */
  html body .flow-dot{ position:absolute; top:12px; right:12px; width:8px; height:8px; border-radius:50%; background:var(--warn); }
  html body #modal-money #pay-list:empty{ display:none; }
  html body #modal-money .list-add-row{ margin-top:0.6rem; }
  /* ---- v164: the sharing page in the intro ---- */
  html body .tg{ display:flex; flex-direction:column; gap:clamp(0.7rem, 2.2vh, 1.1rem); }
  html body .tg-card{ background:var(--surface); border-radius:var(--r-md); box-shadow:var(--card-shadow), 0 20px 36px -24px rgba(22,23,28,0.45);
    padding:clamp(0.7rem,1.8vh,0.95rem) clamp(0.8rem,2vh,1.05rem) clamp(0.45rem,1.2vh,0.7rem); overflow:hidden; }
  html body .tg-head{ display:flex; align-items:center; justify-content:space-between; min-height:30px; margin-bottom:0.2rem; }
  html body .tg-name{ font-size:var(--fs-item); font-weight:700; letter-spacing:-0.01em; }
  html body .tg-faces{ display:flex; }
  html body .tg-face{ width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    font-size:var(--fs-cap); font-weight:700; font-style:normal; color:#fff; box-shadow:0 0 0 2px var(--surface); }
  html body .tg-face.a{ background:var(--brand); }
  html body .tg-face.b{ background:var(--warn); margin-left:-5px; }
  html body .tg-row{ display:flex; align-items:center; gap:0.7rem; min-height:clamp(46px, 6.4vh, 56px); border-top:1px solid var(--divider); }
  html body .tg-row:first-of-type{ border-top:none; }
  html body .tg-box{ width:22px; height:22px; flex:none; border-radius:50%; border:1.7px solid var(--ink-3); display:flex; align-items:center; justify-content:center; color:transparent; }
  html body .tg-box.on{ background:var(--brand); border-color:var(--brand); color:#fff; }
  html body .tg-box .icon{ width:13px; height:13px; stroke-width:3; }
  html body .tg-art{ width:clamp(26px, 3.4vh, 32px); height:clamp(26px, 3.4vh, 32px); flex:none; display:block; }
  html body .tg-txt{ flex:1; min-width:0; font-size:var(--fs-base); font-weight:600; }
  html body .tg-by{ flex:none; display:flex; }
  /* the row someone else just added, lit for a beat so you see it arrive */
  html body .tg-row.fresh{ border-radius:var(--r-sm); background:var(--brand-soft); box-shadow:inset 0 0 0 1.5px var(--brand); }
  html body .tg-flash{ position:absolute; inset:0; border-radius:var(--r-sm); background:var(--brand); opacity:0; pointer-events:none; }
  html body .tg-row.fresh{ position:relative; }
  html body .tg-row.fresh > *:not(.tg-flash){ position:relative; z-index:1; }
  /* then you settle up */
  html body .tg-settle{ display:flex; align-items:center; justify-content:center; gap:0.7rem; }
  html body .tg-slip{ width:46px; height:46px; border-radius:14px; background:var(--surface); box-shadow:var(--card-shadow); color:var(--brand-text); display:flex; align-items:center; justify-content:center; }
  html body .tg-slip .icon{ width:22px; height:22px; }
  html body .tg-line{ width:34px; height:2px; border-radius:2px; background:var(--divider); transform-origin:left center; }
  html body .tg-owe{ display:inline-flex; align-items:center; gap:0.45rem; padding:0.45rem 0.85rem 0.45rem 0.45rem; border-radius:999px;
    background:var(--warn-soft); color:var(--warn); font-size:var(--fs-item); font-weight:700; }