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

  /* Aislo: deep navy from the logo, logo blue as the accent, a soft blue glow on key
     elements. One typeface (Inter). Flat fills; the wave from the logo appears as a motif. */
  :root{
    --font:"Nunito", -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Helvetica Neue", sans-serif;
    --navy:#0B1739;
    --bg:#FFFFFF;
    --surface:#FFFFFF;
    --surface-2:#F2F4F8;
    --ink:#0B1426;
    --ink-muted:#556079;
    --ink-faint:#687390;
    --accent:#3E7CF0;
    --accent-strong:#2B66DA;
    --accent-soft:#EAF1FE;
    --accent-soft-ink:#1D4FB8;
    --on-accent:#FFFFFF;
    --cta:#0B1739;
    --on-cta:#FFFFFF;
    --card:#0B1739;
    --on-card:#FFFFFF;
    --on-card-muted:#9FB0D3;
    --nav-hl:#0B1739;
    --nav-hl-ink:#FFFFFF;
    --wave:#5B9BF3;
    --glow:0 8px 22px -8px rgba(62,124,240,0.55);
    --glow-strong:0 0 0 1px rgba(91,155,243,0.25), 0 10px 30px -8px rgba(62,124,240,0.6);
    --border:#E6E9F0;
    --border-strong:#D3D8E3;
    --warn:#A15C07;
    --warn-soft:#FDF3E6;
    --danger:#D92D20;
    --danger-soft:#FDEEEC;
    --good:#16803C;
    --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);
    --focus: 0 0 0 3px rgba(62,124,240,0.35);
    color-scheme: light;
  }
  :root[data-app-theme="dark"]{
    --bg:#060B18;
    --surface:#0C1428;
    --surface-2:#141E38;
    --ink:#EEF2FF;
    --ink-muted:#9AA6C4;
    --ink-faint:#8894B4;
    --accent:#4A86F2;
    --accent-strong:#6C9DF5;
    --accent-soft:#12254A;
    --accent-soft-ink:#A9C8FF;
    --on-accent:#FFFFFF;
    --cta:#1D3A7D;
    --on-cta:#FFFFFF;
    --card:#152A5C;
    --on-card:#FFFFFF;
    --on-card-muted:#A9BCE3;
    --nav-hl:#1D3A7D;
    --nav-hl-ink:#FFFFFF;
    --wave:#5B9BF3;
    --glow:0 8px 24px -8px rgba(91,155,243,0.6);
    --glow-strong:0 0 0 1px rgba(91,155,243,0.3), 0 12px 32px -8px rgba(91,155,243,0.55);
    --border:#253259;
    --border-strong:#34436F;
    --warn:#E8A15A; --warn-soft:#2B2014;
    --danger:#F2776B; --danger-soft:#301818;
    --good:#4ADE80; --good-soft:#0F2619;
    --shadow: 0 1px 2px rgba(0,0,0,0.4);
    --shadow-lift: 0 12px 30px -14px rgba(0,0,0,0.8);
    --focus: 0 0 0 3px rgba(91,155,243,0.4);
    color-scheme: dark;
  }

  *{ box-sizing:border-box; }
  /* only the page itself scrolls (body must not become a second scroll box) */
  [hidden]{ display:none !important; }
  html,body{ margin:0; max-width:100%; overscroll-behavior:none; }
  html{ overflow-x:hidden; background:var(--surface); }
  html{ touch-action:pan-x pan-y; -webkit-text-size-adjust:100%; }
  /* iOS: 1rem follows the user's Text Size setting (17px by default); other browsers ignore this */
  @supports (font: -apple-system-body){ html{ font: -apple-system-body; } }
  body{
    background:var(--bg); color:var(--ink);
    font-family:var(--font); font-feature-settings:"cv11", "ss01";
    font-size:1rem; line-height:1.45; -webkit-font-smoothing:antialiased; -webkit-tap-highlight-color:transparent;
  }
  h1,h2,h3{ font-family:var(--font); font-weight:700; letter-spacing:-0.02em; text-wrap:balance; margin:0; }
  .num{ font-family:var(--font); font-weight:600; font-variant-numeric:tabular-nums; letter-spacing:-0.01em; }
  a{ color:inherit; }
  button, input, select, textarea{ font-family:inherit; }
  button{ font:inherit; }
  ::selection{ background:var(--accent-soft); }
  :focus-visible{ outline:none; box-shadow:var(--focus); border-radius:6px; }
  .icon{ width:1em; height:1em; stroke:currentColor; fill:none; stroke-width:1.8; 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; }
  /* outgoing panel stays visible, pinned in place, while it slides away */
  .panel.leaving{ display:block; position:absolute; pointer-events:none; }
  .panel-head{ display:flex; align-items:center; justify-content:space-between; gap:0.8rem; margin-bottom:1rem; min-height:44px; }
  .panel-head.sub{ margin-top:2.2rem; }
  .panel-head h2{ font-size:1.25rem; font-weight:600; }
  .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 picker (shopping list context) ---------- */
  .store-select-wrap{ margin-bottom:0.9rem; }

  /* ---------- bottom nav: active tab is a wide tab that rises from the screen edge ---------- */
  :root{ --slide-ms:380ms; --tabs:5; --grow:1.6; --slide-ease:cubic-bezier(.32,.72,0,1); }
  .bottom-nav{
    position:fixed; left:50%; transform:translateX(-50%); bottom:calc(-1 * var(--nav-gap, 0px)); z-index:30;
    width:100%; max-width:430px;
    display:flex; background:color-mix(in srgb, var(--surface) 94%, transparent);
    backdrop-filter:saturate(120%) blur(16px);
    /* keep just enough room for the home indicator so the bar sits low on the screen */
    padding-bottom:calc(max(10px, calc(env(safe-area-inset-bottom) - 10px)) + var(--nav-gap, 0px));
  }
  /* the bar's background continues below the screen edge, so no gap can ever show under it */
  .bottom-nav::after{ content:""; position:absolute; left:0; right:0; top:100%; height:120px; background:var(--surface); }
  /* active tab grows to --grow units; the rest are 1 unit each */
  .nav-highlight{
    position:absolute; top:-12px; bottom:-120px;
    left:0; width:calc(var(--grow) / (var(--tabs) - 1 + var(--grow)) * 100%);
    transform:translateX(calc(var(--active-idx, 0) * 100% / var(--grow)));
    border-radius:24px 24px 0 0; background:var(--accent);
    transition:transform var(--slide-ms) var(--slide-ease);
    will-change:transform;
    z-index:1; pointer-events:none;
  }
  .bottom-nav button{
    position:relative; z-index:2; flex:1 1 0; min-height:64px; min-width:0;
    background:none; border:none; cursor:pointer; color:var(--ink);
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0.25rem;
    font-size:0.66rem; font-weight:700; padding:0.4rem 0;
    transition:flex-grow var(--slide-ms) var(--slide-ease), gap var(--slide-ms) var(--slide-ease), color 240ms ease;
  }
  .bottom-nav button[aria-selected="true"]{ flex-grow:var(--grow); color:var(--on-accent); }
  .bottom-nav .nav-label{ display:block; max-height:1.2em; overflow:hidden; transition:opacity 200ms ease, max-height var(--slide-ms) var(--slide-ease); }
  .bottom-nav button .icon{ width:22px; height:22px; flex-shrink:0; transition:transform var(--slide-ms) var(--slide-ease), width var(--slide-ms) var(--slide-ease), height var(--slide-ms) var(--slide-ease); }
  /* the raised tab starts 12px above the bar, so nudge up 6px to sit in its visual center */
  .bottom-nav button[aria-selected="true"]{ gap:0; }
  .bottom-nav button[aria-selected="true"] .icon{ width:44px; height:44px; stroke-width:1.6; transform:translateY(-6px); }
  .bottom-nav button[aria-selected="true"] .nav-label{ opacity:0; 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; }

  /* ---------- buttons ---------- */
  .btn{
    display:inline-flex; align-items:center; justify-content:center; gap:0.4rem;
    border-radius:99px; border:1px solid var(--border-strong); background:var(--surface);
    color:var(--ink); padding:0.5rem 0.95rem; font-weight:600; font-size:0.82rem; cursor:pointer;
  }
  .btn-primary{ background:var(--accent); border-color:var(--accent); color:var(--on-accent); }
  .btn-danger{ background:var(--danger); border-color:var(--danger); color:#fff; }
  /* photo viewer: centred, dimmed backdrop; the only place pinch-zoom is allowed */
  .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:16px; 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:99px; 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 220ms cubic-bezier(.22,1,.36,1); }
  @keyframes pvIn{ from{ opacity:0; transform:scale(0.92); } to{ opacity:1; transform:none; } }
  /* destructive actions always read red */
  .btn-ghost-danger{ color:var(--danger) !important; background:color-mix(in srgb, var(--danger) 9%, transparent) !important; border-color:transparent !important; }
  .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); font-size:0.82rem; margin:0.4rem 0 0; }
  .field-error .icon{ flex-shrink:0; width:15px; height:15px; }
  .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; }
  .pop-empty{ padding:0.8rem 1rem; color:var(--ink-faint); font-size:0.88rem; }
  /* skeleton rows while data loads */
  .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:8px; animation:skShimmer 1.3s ease-in-out infinite; }
  .sk-box{ width:32px; height:32px; border-radius:10px; 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-icon{ padding:0.45rem; border-radius:99px; min-width:44px; min-height:44px; }
  .btn-pill{ border-radius:99px; min-height:44px; padding:0 1.05rem 0 0.85rem; gap:0.35rem; font-size:0.9rem; white-space:nowrap; }
  .btn-soft{ background:var(--surface-2) !important; color:var(--ink) !important; box-shadow:none !important; border-color:transparent !important; }
  .empty-cta{ margin-top:0.8rem; }
  .about-line{ text-align:center; color:var(--ink-faint); font-size:0.8rem; margin:0.4rem 0 0; }
  .btn-sm{ padding:0.32rem 0.7rem; font-size:0.76rem; }
  .btn-block{ width:100%; }
  .btn[disabled]{ opacity:0.5; cursor:not-allowed; }
  .link-btn{ background:none; border:none; color:var(--accent-soft-ink); font-weight:700; font-size:0.82rem; cursor:pointer; padding:0.4rem 0; min-height:44px; }

  /* ---------- fab menu (receipts: scan / quick total / enter manually) ---------- */
  .fab-menu-wrap{ position:relative; }
  .fab-toggle .icon{ transition:transform 220ms cubic-bezier(.22,.85,.32,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:14px;
    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(.22,.85,.32,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:0.85rem; color:var(--ink); cursor:pointer;
  }

  /* ---------- form basics (used inside modals) ---------- */
  label{ display:block; font-size:0.74rem; font-weight:700; text-transform:uppercase; letter-spacing:0.05em; color:var(--ink-muted); 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:8px; padding:0.55rem 0.65rem; font:inherit; font-size:0.9rem;
  }
  input::placeholder, textarea::placeholder{ color:var(--ink-faint); }
  .field{ margin-bottom:0.8rem; }
  .field-row{ display:flex; gap:0.6rem; min-width:0; }
  .name-unit-row{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:0.6rem; align-items:end; }
  .seg-toggle button{ flex:0 0 auto; padding:0.5rem 0.85rem; }
  .name-unit-row input{ height:46px; box-sizing:border-box; }
  .name-unit-row .seg-toggle{ height:46px; box-sizing:border-box; }
  .name-unit-row .seg-toggle button{ min-height:0; height:100%; }
  .field-row > *{ flex:1; min-width:0; }
  .seg{ display:flex; border:1px solid var(--border-strong); border-radius:9px; overflow:hidden; }
  .seg button{ flex:1; background:var(--surface); border:none; padding:0.5rem; font-size:0.82rem; font-weight:700; color:var(--ink-muted); cursor:pointer; min-height:44px; }
  .seg button.on{ background:var(--accent-soft); color:var(--accent-soft-ink); }
  .check-line{ display:flex; align-items:center; gap:0.45rem; font-weight:600; font-size:0.85rem; color:var(--ink); margin-bottom:0.9rem; }
  .check-line input{ width:auto; }

  /* ---------- custom dropdowns (replace native <select> / <datalist> menus) ---------- */
  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);
    border-radius:8px; padding:0.55rem 0.65rem; font-size:0.9rem; cursor:pointer; text-align:left; min-height:42px;
  }
  .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 220ms cubic-bezier(.22,.85,.32,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{ border-radius:99px; font-weight:600; color:var(--ink-muted); padding-left:0.95rem; border-color:transparent; background:var(--surface-2); }

  .pop-menu{
    position:fixed; inset:auto; margin:0; z-index:60;
    padding:0.3rem; border:1px solid var(--border); border-radius:14px;
    background:var(--surface); color:var(--ink); box-shadow:var(--shadow-lift);
    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:9px; text-align:left;
    font:inherit; font-weight:600; font-size:0.88rem; 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.selected{ background:var(--accent-soft); color:var(--accent-soft-ink); }
  .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:7px; border:1.6px solid var(--border-strong); flex-shrink:0;
    display:flex; align-items:center; justify-content:center; color:transparent;
    transition:background 140ms ease, border-color 140ms 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:0.85rem; color:var(--ink-muted); }

  /* ---------- modal / dialog: iOS-style bottom sheet (default) ---------- */
  dialog{
    border:none; border-radius:20px 20px 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); box-shadow:var(--shadow-lift);
  }
  dialog::before{
    content:""; display:block; width:36px; height:4px; border-radius:99px;
    background:var(--border-strong); margin:10px auto 0;
  }
  dialog[open]{ animation: sheetUp 280ms cubic-bezier(.22,.85,.32,1); }
  @keyframes sheetUp{ from{ transform:translateY(100%); } to{ transform:translateY(0); } }
  dialog::backdrop{ background:rgba(0,0,0,0.3); backdrop-filter:blur(1px); }
  dialog[open]::backdrop{ animation: backdropFade 220ms ease; }
  @keyframes backdropFade{ from{ opacity:0; } to{ opacity:1; } }

  /* ---------- modal variant: centered popup (used for Add Store) ---------- */
  dialog.modal-center{
    position:fixed; top:50%; left:50%; bottom:auto; right:auto; margin:0;
    transform:translate(-50%,-50%); border-radius:20px; width:min(360px,90vw); max-width:min(360px,90vw);
  }
  dialog.modal-center::before{ display:none; }
  dialog.modal-center[open]{ animation: popCenterIn 200ms cubic-bezier(.22,.85,.32,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; align-items:center; justify-content:space-between; padding:0.7rem 1.1rem 0.7rem; }
  .modal-head h3{ font-size:1.05rem; font-weight:600; }
  .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-body.pad-top{ padding-top:1.6rem; }
  .modal-center .modal-body{ padding-bottom:1.1rem; }
  .modal-close{ background:none; border:none; color:var(--ink-faint); cursor:pointer; padding:0.3rem; border-radius:99px; display:flex; min-width:44px; min-height:44px; align-items:center; justify-content:center; }
  .modal-close-float{ position:absolute; top:0.9rem; right:0.5rem; z-index:2; }
  .modal-subtitle{ font-size:0.85rem; font-weight:700; color:var(--ink-muted); margin:0 0 0.9rem; }
  .modal-message{ font-size:0.92rem; color:var(--ink-muted); margin:0 0 1rem; }
  .modal-actions{ display:flex; gap:0.6rem; }
  .modal-actions .btn{ flex:1; }
  .compare-section-title{ font-size:0.7rem; text-transform:uppercase; letter-spacing:0.05em; color:var(--ink-muted); font-weight:700; margin:1rem 0 0.4rem; }
  .compare-section-title:first-child{ margin-top:0; }
  /* rows inside popups sit directly on the sheet — no darker page-colored block behind them */
  dialog .row{ background:transparent; }
  dialog .swipe-content{ background:var(--surface); }
  .price-actions{ display:flex; align-items:center; gap:0.5rem; flex-shrink:0; }
  .strike{ text-decoration:line-through; opacity:0.55; }
  /* portrait only: phones that can't lock rotation get a cover screen while sideways */
  .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; }
  /* item photo per store */
  .photo-add{
    width:100%; min-height:88px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0.35rem;
    border:1.5px dashed var(--border-strong); border-radius:14px; background:none; color:var(--ink-muted);
    font:inherit; font-size:0.85rem; font-weight:600; cursor:pointer;
  }
  .photo-add .icon{ width:24px; height:24px; }
  .photo-preview{ position:relative; border-radius:14px; 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:0.8rem;
  }
  .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{ position:static; display:inline-flex; align-items:center; gap:0.35rem; border-radius:99px; 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:99px; display:flex; align-items:center; justify-content:center; }
  .thumb{ width:44px; height:44px; border-radius:10px; object-fit:cover; flex-shrink:0; background:var(--surface-2); }

  /* ---------- empty state ---------- */
  .empty{ padding:1.4rem 0.5rem; text-align:center; color:var(--ink-faint); }
  .empty h3{ color:var(--ink-faint); font-size:0.95rem; font-weight:500; }

  /* ---------- swipe to delete ---------- */
  .swipe-wrap{ position:relative; overflow:hidden; border-radius:12px; }
  /* red delete button hidden under the row's left edge; swiping the row right reveals it */
  .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:0.7rem;
  }
  .swipe-bg .icon{ width:20px; height:20px; }
  /* keep it fully hidden (no red fringe at the rounded corners) until the row is being swiped or is open */
  .swipe-bg{ visibility:hidden; }
  .swipe-wrap.swiping .swipe-bg, .swipe-wrap.open .swipe-bg{ visibility:visible; }
  .swipe-content{ position:relative; z-index:1; background:var(--bg); }
  /* no text selection / callout menus fighting the swipe gesture (form rows keep normal editing) */
  .swipe-wrap:not(.line-swipe) .swipe-content{ -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; }

  /* ---------- rows ---------- */
  .row{ display:flex; align-items:center; gap:0.8rem; padding:0.8rem 0.5rem; border-bottom:1px solid var(--border); background:var(--bg); }
  /* no divider under the last entry of a list */
  :not(.swipe-content) > .row:last-child, .swipe-wrap:last-child .row, .swipe-wrap:last-child .receipt-card{ border-bottom:none; }
  .row-click{ cursor:pointer; border-radius:10px; }
  .row-main.row-click{ padding:0.4rem 0; margin:-0.4rem 0; }
  .check{
    width:36px; height:36px; border-radius:9px; border:1.6px solid var(--border-strong); flex-shrink:0;
    background:none; cursor:pointer; display:flex; align-items:center; justify-content:center; color:transparent;
  }
  .check.on{ background:var(--accent); border-color:var(--accent); color:var(--on-accent); box-shadow:var(--glow); }
  .row-main{ flex:1; min-width:0; }
  .row-main .name{ font-weight:600; font-size:1rem; }
  .row-meta{ color:var(--ink-faint); font-size:0.84rem; 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; border-radius:99px; padding:0.15rem 0.55rem; font-size:0.72rem; font-weight:700; background:var(--surface-2); color:var(--ink-muted); }
  .chip.good{ background:var(--good-soft); color:var(--good); }
  .chip.warn{ background:var(--warn-soft); color:var(--warn); }
  .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; left:0.65rem; top:50%; transform:translateY(-50%); color:var(--ink-faint); }
  .search-wrap input{ padding-left:2.1rem; border-radius:99px; border-color:transparent; background:var(--surface-2); }

  .store-name-line{ display:flex; align-items:center; gap:0.4rem; font-weight:600; }

  /* ---------- receipts ---------- */
  .totals-grid{ margin-bottom:1.1rem; }
  .stat{ background:var(--surface-2); border-radius:16px; padding:1.1rem 0.95rem; text-align:center; }
  .stat .value{ font-size:1.9rem; font-weight:700; }
  .stat .sub{ color:var(--ink-faint); font-size:0.78rem; margin-top:0.15rem; }
  .receipt-filters{ display:flex; flex-wrap:wrap; gap:0.5rem; margin-bottom:1rem; }
  .range-cycle{ display:inline-flex; align-items:center; gap:0.4rem; background:var(--surface-2); border:1px solid transparent; border-radius:99px; padding:0.4rem 0.9rem; font-size:0.8rem; font-weight:700; color:var(--ink); cursor:pointer; min-height:36px; max-width:100%; }
  .range-cycle .icon{ width:0.9em; height:0.9em; 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; }
  .by-store-row{ display:flex; justify-content:space-between; font-size:0.85rem; padding:0.3rem 0; color:var(--ink-muted); }
  .by-store-row .num{ color:var(--ink); }

  .receipt-card{ padding:0.85rem 0; background:var(--bg); border-bottom:1px solid var(--border); }
  .receipt-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; }
  .receipt-top .date{ color:var(--ink-faint); font-size:0.76rem; }
  .receipt-top .total{ font-size:1.05rem; font-weight:700; }
  .receipt-items{ margin-top:0.4rem; font-size:0.8rem; 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:10px; display:block; }

  .line-swipe{ margin-bottom:0.45rem; border-radius:8px; }
  .line-item{ display:grid; grid-template-columns:minmax(0,1fr) 56px 72px; gap:0.35rem; align-items:center; min-width:0; }
  .line-item input{ font-size:0.84rem; 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:99px; 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:10px; padding:0.55rem 0.7rem; font-size:0.8rem; margin-bottom:0.8rem; display:flex; align-items:center; justify-content:space-between; gap:0.6rem; }

  #camera-video, #camera-shot{ width:100%; border-radius:12px; 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 ---------- */
  .toast{
    position:fixed; left:50%; bottom:calc(112px + env(safe-area-inset-bottom)); z-index:40;
    transform:translateX(-50%) translateY(12px); background:var(--cta); color:var(--on-cta);
    display:flex; align-items:center; gap:0.9rem; white-space:nowrap;
    padding:0.55rem 0.6rem 0.55rem 1.1rem; min-height:44px; border-radius:99px; font-size:0.9rem; font-weight:600;
    box-shadow:0 10px 30px -10px rgba(11,23,57,0.5); opacity:0; pointer-events:none; max-width:92vw;
    transition:opacity 200ms ease, transform 260ms cubic-bezier(.32,.72,0,1);
  }
  .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); color:#8DB9FF; font:inherit; font-weight:700; border-radius:99px; padding:0.45rem 0.9rem; min-height:36px; cursor:pointer; }
  .toast-action:active{ background:rgba(255,255,255,0.22); }
  .toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

  @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; }
  }

  /* ================= minimal AI / fintech layer ================= */
  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{ margin-bottom:1.1rem; }
  .panel-head h2{ font-size:1.75rem; line-height:1.1; }
  .panel-head.sub h2{ font-size:1.3rem; }
  #panel-items .panel-head h2{ font-size:1.75rem; }
  .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); }
  .sale-btn{ min-height:36px; padding:0 0.75rem; font-size:0.8rem; }
  .sale-btn.on{ color:var(--danger) !important; }
  .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:1.2rem; font-weight:700; letter-spacing:-0.015em;
  }
  .modal-head input.title-input:focus{ outline:none; box-shadow:none; border-bottom-color:var(--border-strong); }
  /* iOS date fields have a wide built-in minimum size; force them to fit their box */
  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; }
  .quick-add-row{ display:flex; gap:0.5rem; margin-bottom:0.4rem; }
  .quick-add-row input{ flex:1; min-width:0; }
  .brand{ display:flex; align-items:center; gap:0.55rem; margin-bottom:1.1rem; }
  .brand-mark{ width:30px; height:30px; border-radius:8px; box-shadow:0 4px 14px -4px rgba(62,124,240,0.55); }
  .brand-name{ font-size:1.05rem; font-weight:700; letter-spacing:-0.03em; color:var(--ink); }
  .brand-foot{ justify-content:center; margin:2.4rem 0 0; opacity:0.85; }
  /* sections: a single hairline between them, nothing heavier */
  .panel-head.sub{ margin-top:1.6rem; padding-top:1.4rem; border-top:1px solid var(--border); }
  /* related settings sit together in one rounded card each */
  .settings-group{ background:var(--surface-2); border-radius:16px; 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); }
  /* the item popup's store rows are one connected group */
  #compare-modal-body-prices{ background:var(--surface-2); border-radius:16px; padding:0.2rem 0.8rem; }
  #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 .add-store-to-item{ margin:0.5rem 0 0.7rem; }
  #compare-modal-body-prices .panel-hint{ padding-top:0.6rem; }
  .fav-note{ color:var(--accent) !important; }
  .list-thumb{ width:40px; height:40px; border-radius:10px; }
  .list-progress{ margin:-0.2rem 0 0.6rem; }
  .lp-text{ display:flex; align-items:center; gap:0.4rem; font-size:0.84rem; color:var(--ink-muted); margin-bottom:0.4rem; }
  .lp-text .icon{ width:16px; height:16px; }
  .lp-bar{ height:6px; border-radius:99px; background:var(--surface-2); overflow:hidden; }
  .lp-bar i{ display:block; height:100%; width:0; border-radius:99px; background:var(--accent); transition:width 320ms cubic-bezier(.22,1,.36,1); }
  .list-progress.done .lp-text{ color:var(--good); }
  .list-progress.done .lp-bar i{ background:var(--good); }
  .section-toggle{ display:flex; align-items:center; gap:0.5rem; background:none; border:none; padding:0; min-height:44px; color:var(--ink); cursor:pointer; text-align:left; }
  .st-title{ display:flex; align-items:center; gap:0.5rem; font-size:1.25rem; }
  .st-count{ font-size:0.78rem; min-width:1.5em; padding:0.1rem 0.45rem; border-radius:99px; background:var(--surface-2); color:var(--ink-muted); text-align:center; }
  .st-count:empty{ display:none; }
  .st-chev{ width:18px; height:18px; color:var(--ink-faint); transition:transform 240ms cubic-bezier(.22,1,.36,1); transform:rotate(-90deg); }
  .section-toggle[aria-expanded="true"] .st-chev{ transform:none; }
  .modal-body .compare-section-title:not(:first-child){ margin-top:1.1rem; padding-top:1rem; border-top:1px solid var(--border); }
  /* pressed rows: the highlight reaches a little past the text */
  .row-main.row-click{ padding:0.55rem 0.7rem; margin:-0.55rem -0.7rem; border-radius:12px; }
  .row.row-click{ border-radius:12px; }
  #receipts-list .swipe-wrap{ margin:0 -0.7rem; }
  #receipts-list .receipt-card{ padding:0.85rem 0.7rem; cursor:pointer; }
  #receipts-list .receipt-card:active{ background:var(--surface-2); }
  .receipt-top .thumb{ width:40px; height:40px; margin-right:0.7rem; }
  .receipt-head{ display:flex; align-items:center; min-width:0; }
  /* "add to shopping list" toggle on the items list */
  .add-toggle{
    width:32px; height:32px; border-radius:10px; flex-shrink:0; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    border:1.6px solid var(--border-strong); background:none; color:var(--ink);
    transition:background 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 100ms ease-out;
  }
  .add-toggle .icon{ width:17px; height:17px; stroke-width:2.1; }
  .add-toggle.on{ background:var(--accent); border-color:var(--accent); color:var(--on-accent); box-shadow:var(--glow); }
  .add-toggle:active{ transform:scale(0.94); }
  input[readonly]{ background:var(--surface-2); color:var(--ink); }
  /* receipt view */

  .rv-title{ min-width:0; }
  .rv-date{ margin-top:0.15rem; font-size:0.82rem; color:var(--ink-muted); }
  .rv-head-actions{ display:flex; align-items:center; gap:0.2rem; flex-shrink:0; }
  .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:0.78rem; 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:1.05rem; }
  .rv-total .num{ font-size:1.3rem; font-weight:700; }
  .rv-photo{ margin-top:1rem; border-radius:14px; overflow:hidden; background:var(--surface-2); }
  .rv-photo img{ display:block; width:100%; }
  .clear-checked{ margin-top:0.9rem; color:var(--ink-muted); }
  .row .name.done{ text-decoration:line-through; color:var(--ink-faint); }
  .quick-add-open{ gap:0.45rem; min-height:46px; margin-bottom:0.2rem; }
  /* popups focus their close button on open (so no text field activates); don't draw a ring around it */
  .modal-close:focus, .modal-close:focus-visible{ outline:none; box-shadow:none; background:none; }
  /* popups: no grab-handle line; the close button is a clear filled circle in its own spot,
     never floating over content */
  dialog::before{ display:none; }
  .modal-close{ width:40px; height:40px; min-width:40px; min-height:40px; padding:0; border-radius:99px; background:var(--surface-2); color:var(--ink); flex-shrink:0; }
  .modal-close .icon{ width:18px; height:18px; stroke-width:2.2; }
  .modal-close:focus, .modal-close:focus-visible{ outline:none; box-shadow:none; background:var(--surface-2); }
  /* untitled popups: the X floats top-right and the first row of content leaves room beside it
     (no overlap, no empty row) */
  /* every popup: a header row (title left, X right, vertically centred), content directly below */
  .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:0.85rem; font-weight:500; color:var(--ink-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  /* tap areas reach 44pt even where the drawn control is smaller */
  .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; }
  /* a sheet with another sheet on top of it steps back and dims */
  dialog{ transform-origin:50% 100%; transition:filter 320ms cubic-bezier(.32,.72,0,1), transform 320ms cubic-bezier(.32,.72,0,1); }
  dialog.behind{ transform:translateY(-10px) scale(0.95); filter:brightness(0.9); }
  dialog.dragging{ transition:none; }
  /* light/dark switch eases instead of snapping */
  html.theme-anim, html.theme-anim *{ transition:background-color 400ms ease, color 400ms ease, border-color 400ms ease, fill 400ms ease, box-shadow 400ms ease !important; }
  /* favorite brand */
  .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; }
  .fav-btn{ position:relative; width:32px; height:32px; flex-shrink:0; display:flex; align-items:center; justify-content:center; border:none; background:none; color:var(--ink-faint); border-radius:99px; cursor:pointer; }
  .fav-btn::after{ content:""; position:absolute; inset:-6px; }
  .fav-btn .icon{ width:19px; height:19px; }
  .fav-btn.on{ color:var(--accent); }
  .fav-btn.on .icon{ fill:currentColor; }
  /* reorder: grip on the right; hold it, the row lifts ("bulges") and follows the finger */
  .drag-handle{ position:relative; flex-shrink:0; width:36px; height:40px; margin-right:-0.3rem; display:flex; align-items:center; justify-content:center; border:none; background:none; color:var(--ink-faint); cursor:grab; touch-action:none; -webkit-touch-callout:none; -webkit-user-select:none; user-select:none; }
  .drag-handle::after{ content:""; position:absolute; inset:-4px -6px; }
  .drag-handle .icon{ width:18px; height:18px; stroke-width:2; opacity:0.55; transition:opacity 150ms ease, color 150ms ease; }
  .name-line{ display:flex; align-items:center; gap:0.4rem; min-width:0; }
  .name-line .name{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .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; }
  /* price info under the name: plain text, flush with the name's left edge */
  .price-line{ margin-top:0.3rem; gap:0.35rem 0.9rem; font-size:0.86rem; }
  .price-line .note{ display:inline-block; font-weight:500; color:var(--ink-muted); }
  .price-line .note::first-letter{ text-transform:uppercase; }
  .price-line .note.good{ color:var(--good); font-weight:600; }
  .price-line .note.warn{ color:var(--warn); font-weight:600; }
  .price-line .note.sale{ color:var(--danger); font-weight:600; }
  .swipe-wrap.lifted{ overflow:visible; z-index:6; position:relative; }
  .swipe-wrap.lifted > .swipe-content{
    transform:scale(1.035) !important; border-radius:14px; 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.35,.5,1), box-shadow 300ms ease !important;
  }
  .swipe-wrap.lifted .drag-handle{ color:var(--accent); }
  .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 300ms 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:0.82rem; line-height:1.35; color:var(--ink-muted); }
  .modal-head h3{ font-size:1.2rem; font-weight:700; letter-spacing:-0.015em; }
  .modal-subtitle{ font-size:1.2rem; font-weight:700; color:var(--ink); letter-spacing:-0.015em; }
  label, .compare-section-title{ font-size:0.68rem; letter-spacing:0.08em; font-weight:600; color:var(--ink-muted); }
  .row-main .name{ font-weight:500; letter-spacing:-0.005em; }
  .btn{ font-weight:600; letter-spacing:-0.005em; }
  .btn-primary{ background:var(--cta); border-color:var(--cta); color:var(--on-cta); box-shadow:var(--glow); }
  .btn-sm{ font-size:0.74rem; }
  .chip{ border-radius:7px; font-size:0.76rem; letter-spacing:0; text-transform:none; padding:0.18rem 0.5rem; font-weight:600; }
  .check{ border-radius:8px; }
  .seg{ border-color:var(--border-strong); border-radius:12px; }
  .seg button{ font-weight:600; }
  .seg button.on{ background:var(--cta); color:var(--on-cta); }
  input[type="text"], input[type="number"], input[type="date"], textarea, .cselect{ border-radius:10px; }

  /* bottom bar: flat bar, hairline top, solid pastel-blue raised tab */
  .bottom-nav{ border-top:1px solid color-mix(in srgb, var(--border) 70%, transparent);
    background:color-mix(in srgb, var(--surface) 74%, transparent);
    -webkit-backdrop-filter:saturate(180%) blur(20px); backdrop-filter:saturate(180%) blur(20px); }
  .bottom-nav::after{ background:color-mix(in srgb, var(--surface) 74%, transparent); }
  /* iOS WebKit clips a backdrop-filter element's children to its box, which cut the raised tab
     off above the screen edge. The frosted material now lives on its own layer that runs past the bottom. */
  .bottom-nav{ background:none; -webkit-backdrop-filter:none; backdrop-filter:none; }
  .bottom-nav::after{ display:none; }
  /* icons sit in the vertical middle of the bar, highlighted or not */
  .bottom-nav{ padding-top:16px; padding-bottom:calc(16px + var(--nav-gap, 0px)); border-top:none; }
  .bottom-nav button[aria-selected="true"] .icon{ transform:none; }
  /* bottom bar: flat surface with a hairline top; the active tab is an expanding navy pill
     ([icon label]) that glides and resizes to the new tab. Inactive tabs are icon-only. */
  :root{ --pill-ease:cubic-bezier(0.25, 1, 0.5, 1); --pill-ms:520ms; }
  .bottom-nav::after{ display:none !important; }
  .bottom-nav::before{ background:var(--surface) !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important; box-shadow:none !important; }
  .bottom-nav{  justify-content:space-evenly; align-items:center; }
  :root[data-app-theme="dark"] .bottom-nav{ border-top-color:var(--border) !important; }
  .bottom-nav button{ flex:0 0 auto !important; flex-direction:row !important; align-items:center; justify-content:center;
    height:48px; min-height:48px !important; min-width:48px; padding:0 14px !important; gap:0 !important; border-radius:9999px;
    color:var(--ink) !important;
    transition:padding var(--pill-ms) var(--pill-ease), gap var(--pill-ms) var(--pill-ease), color 300ms var(--pill-ease) !important; }
  .bottom-nav button .icon{ width:22px !important; height:22px !important; transform:none !important; stroke-width:1.9; transition:none !important; }
  .bottom-nav .nav-label{ display:block; max-height:none !important; max-width:0; opacity:0 !important; overflow:hidden; white-space:nowrap;
    font-size:0.86rem !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"]{ gap:8px !important; padding:0 18px 0 16px !important; color:#FFFFFF !important; }
  .bottom-nav button[aria-selected="true"] .nav-label{ max-width:8em; opacity:1 !important; }
  :root[data-app-theme="dark"] .bottom-nav button[aria-selected="true"]{ color:var(--nav-hl-ink) !important; }
  .nav-highlight{ left:0 !important; top:50% !important; bottom:auto !important; height:48px; margin-top:-24px; width:48px;
    border-radius:9999px !important; background:var(--nav-hl) !important; box-shadow:none !important; filter:none !important;
    transition:transform var(--pill-ms) var(--pill-ease), width var(--pill-ms) var(--pill-ease), background-color 300ms ease !important; }
  .nav-highlight::before, .nav-highlight::after{ display:none !important; }
  .bottom-nav.measuring, .bottom-nav.measuring *{ transition:none !important; }
  /* floating bar (Instagram-style): an inset, fully rounded frosted capsule that hovers above the
     home indicator; the navy expanding pill glides inside it */
  :root{ --bar-float:max(10px, calc(env(safe-area-inset-bottom) - 6px)); }
  .bottom-nav{ left:50% !important; width:calc(100% - 28px) !important; max-width:402px !important;
    bottom:var(--bar-float) !important; padding:8px !important; border-radius:9999px !important;
    background:color-mix(in srgb, var(--surface) 86%, transparent) !important;
    -webkit-backdrop-filter:saturate(180%) blur(22px); backdrop-filter:saturate(180%) blur(22px);
    border:1px solid color-mix(in srgb, var(--ink) 8%, transparent) !important;
    box-shadow:0 10px 30px -8px rgba(11,23,57,0.22), 0 2px 8px rgba(11,23,57,0.06) !important; }
  :root[data-app-theme="dark"] .bottom-nav{ border-color:rgba(255,255,255,0.08) !important; box-shadow:0 10px 30px -8px rgba(0,0,0,0.6) !important; }
  .bottom-nav::before, .bottom-nav::after{ display:none !important; }
  html.fill-screen .bottom-nav{ top:0 !important; bottom:auto !important; padding:8px !important;
    transform:translate(-50%, calc(var(--app-h) - 100% - var(--bar-float))) !important; }
  .nav-highlight{ top:8px !important; margin-top:0 !important; }
  /* snug: the bar hugs the pill, and the pill is one fixed width (sized to the longest label) on every tab */
  .bottom-nav, html.fill-screen .bottom-nav{ padding:5px !important; }
  .nav-highlight{ top:5px !important; }
  .bottom-nav button{ width:48px; padding:0 !important;
    transition:width var(--pill-ms) var(--pill-ease), gap var(--pill-ms) var(--pill-ease), color 300ms var(--pill-ease) !important; }
  .bottom-nav button[aria-selected="true"]{ width:var(--pill-w, 76px); padding:0 !important; gap:0 !important; }
  /* icons only; first/last tabs sit on the bar's inner edge so the pill keeps the same 5px margin on
     every side — pill and bar are concentric capsules (bar radius = pill radius + margin) */
  .bottom-nav .nav-label{ display:none !important; }
  .bottom-nav{ justify-content:space-between !important; }
  /* slider: a slim track with five equal slots (so every icon is evenly spaced) and a navy thumb that
     is a little taller than the track, riding over it. Thumb keeps the pill's 1.58:1 proportions. */
  :root{ --track-h:44px; --thumb-h:52px; --thumb-w:82px; }
  .bottom-nav{ width:min(calc(100% - 56px), 330px) !important; height:var(--track-h); padding:0 4px !important;
    justify-content:stretch !important; overflow:visible !important;
    bottom:calc(var(--bar-float) + (var(--thumb-h) - var(--track-h)) / 2) !important;
    background:none !important; border:none !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important; }
  html.fill-screen .bottom-nav{ padding:0 4px !important;
    transform:translate(-50%, calc(var(--app-h) - 100% - var(--bar-float) - (var(--thumb-h) - var(--track-h)) / 2)) !important; }
  /* the frosted track lives on its own layer (WebKit clips a backdrop-filter element's children,
     which would cut off the thumb where it rises past the track) */
  .bottom-nav::before{ display:block !important; content:"" !important; position:absolute !important; inset:0 !important;
    top:0 !important; bottom:0 !important; border-radius:inherit; z-index:0; pointer-events:none;
    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; }
  :root[data-app-theme="dark"] .bottom-nav::before{ border-color:rgba(255,255,255,0.08); }
  .bottom-nav button{ height:var(--track-h); min-height:var(--track-h) !important; min-width:0 !important; padding:0 !important; }
  /* equal gaps everywhere: inactive tabs are exactly icon-wide and the active tab is exactly thumb-wide,
     so space-evenly puts the same gap between icon↔icon and thumb↔icon (hit areas extend via ::after) */
  .bottom-nav{ justify-content:space-evenly !important; }
  .bottom-nav button{ flex:0 0 auto !important; width:24px !important; overflow:visible;
    transition:width var(--pill-ms) var(--pill-ease), color 300ms var(--pill-ease) !important; }
  .bottom-nav button::after{ content:""; position:absolute; top:0; bottom:0; left:-14px; right:-14px; }
  .bottom-nav button[aria-selected="true"]{ width:var(--thumb-w) !important; flex:0 0 auto !important; }
  .bottom-nav button .icon{ width:22px !important; height:22px !important;
    transition:width var(--pill-ms) var(--pill-ease), height var(--pill-ms) var(--pill-ease) !important; }
  /* pill sits inside the track with the same small margin on every side (concentric capsules); the icon
     never changes size. The end tabs keep their icon where the pill would sit, so an edge highlight
     leaves no dead space and the gaps stay even. */
  :root{ --track-h:44px; --pill-m:3px; --thumb-h:calc(var(--track-h) - 2 * var(--pill-m)); --thumb-w:64px; }
  .bottom-nav{ justify-content:space-between !important; padding:0 var(--pill-m) !important; bottom:var(--bar-float) !important; }
  html.fill-screen .bottom-nav{ padding:0 var(--pill-m) !important;
    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 button{ transition:width var(--pill-ms) var(--pill-ease), margin var(--pill-ms) var(--pill-ease), color 300ms var(--pill-ease) !important; }
  .bottom-nav button[aria-selected="true"] .icon{ width:22px !important; height:22px !important; }
  /* fixed layout: five equal slots that never move; the pill is one slot minus a 4px margin on every
     side, so it glides between slots and sits 4px from the rim at either end (no dead space) */
  :root{ --pill-m:5px; --track-h:54px; }
  /* rounded boxes instead of capsules; the highlight's corners are concentric with the bar's */
  :root{ --bar-r:18px; }
  #bottom-nav{ border-radius:var(--bar-r) !important; }
  #bottom-nav #nav-highlight{ border-radius:calc(var(--bar-r) - var(--pill-m)) !important; }
  /* same side margins as the page's cards (main's 1.25rem gutter), scaled up to match */
  :root{ --track-h:60px; --pill-m:6px; --bar-r:20px; }
  #bottom-nav{ width:calc(min(100vw, 430px) - 2.5rem) !important; max-width:none !important; }
  .bottom-nav button .icon, .bottom-nav button[aria-selected="true"] .icon{ width:28px !important; height:28px !important; }
  /* bigger but more compact: taller track, larger icons, tighter slots (bar is narrower) */
  .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 300ms var(--pill-ease) !important; }
  #bottom-nav #nav-highlight{ width:calc(20% - 2 * var(--pill-m)) !important; 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 300ms ease !important; }

  /* ---------- the logo's motifs, carried through the app (like the Receipts total card) ----------
     wave: the blue swell from the mark, sitting at the bottom of navy surfaces
     dot:  the glowing blue dot that leads the card's label, now leading every section label */
  :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"); }
  .btn-primary{ background-image:var(--brand-wave-soft) !important; background-repeat:no-repeat !important;
    background-position:bottom !important; background-size:100% 55% !important; }
  #bottom-nav #nav-highlight{ background-image:var(--brand-wave) !important; background-repeat:no-repeat;
    background-position:bottom; background-size:100% 50%; }
  .brand-tile{ width:38px; height:38px; flex-shrink:0; border-radius:11px; display:flex; align-items:center; justify-content:center;
    background:var(--card) var(--brand-wave) no-repeat bottom / 100% 58%; color:#FFFFFF; }
  .brand-tile .icon{ width:19px; height:19px; stroke-width:1.9; }
  .compare-section-title{ display:flex; align-items:center; gap:0.45rem; }
  .compare-section-title.no-dot::before{ display:none !important; }
  .compare-section-title::before{ content:""; width:6px; height:6px; flex-shrink:0; border-radius:99px; background:var(--wave);
    box-shadow:0 0 8px 1px rgba(91,155,243,0.7); }
  .toast{ background-image:var(--brand-wave-soft); background-repeat:no-repeat; background-position:bottom; background-size:100% 60%; }
  .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"); }
  .check.on, .add-toggle.on{ background-image:var(--brand-wave-light); background-repeat:no-repeat; background-position:bottom; background-size:100% 60%; }
  .seg button.on{ background-image:var(--brand-wave-soft); background-repeat:no-repeat; background-position:bottom; background-size:100% 55%; }
  .panel-head.sub::before, .panel-head.sub::after{ display:none !important; }
  .panel-head.sub-unused::after{ content:""; position:absolute; left:0; right:0; top:-7px; height:14px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 14' preserveAspectRatio='none'%3E%3Cpath d='M0 9 C60 1 120 1 200 7 S340 13 400 5' fill='none' stroke='%235B9BF3' stroke-opacity='0.55' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%; }
  /* multi-add + store chips */
  .multi-add{ display:flex; gap:0.5rem; align-items:center; }
  .multi-add input{ flex:1; min-width:0; }
  .field-hint{ color:var(--ink-faint); font-size:0.8rem; 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; border-radius:99px;
    background:var(--surface-2); color:var(--ink); font-size:0.86rem; }
  .q-chip button{ width:26px; height:26px; border:none; border-radius:99px; 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; }
  .q-chip .icon{ width:14px; height:14px; }
  .store-chips{ display:flex; flex-wrap:wrap; gap:0.5rem; }
  .store-chip{ display:inline-flex; align-items:center; gap:0.45rem; min-height:44px; padding:0 1rem 0 0.8rem; border-radius:14px;
    border:1.5px solid var(--border-strong); background:var(--surface); color:var(--ink); font-size:0.92rem; cursor:pointer;
    transition:background-color 180ms ease, color 180ms ease, border-color 180ms ease, transform 100ms ease-out; }
  .store-chip .icon{ width:18px; height:18px; color:var(--ink-muted); transition:color 180ms ease; }
  .store-chip:active{ transform:scale(0.97); }
  .store-chip.on{ background:var(--card) var(--brand-wave) no-repeat bottom / 100% 55%; border-color:var(--card); color:#FFFFFF; }
  .store-chip.on .icon{ color:#FFFFFF; }
  #compare-modal-body-prices{ padding:0.9rem 0.9rem 1rem !important; }
  .starter{ display:none; }
  /* "Add to list" is the list's last row: same rhythm as an item, quiet until pressed */
  #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; gap:0.8rem; width:100%; padding:0.8rem 0.5rem; margin:0; border:none; background:none;
    color:var(--ink-faint); font:inherit; font-size:1rem; text-align:left; cursor:pointer; border-radius:12px;
    transition:background-color 160ms ease, color 160ms ease; }
  .add-row:active{ background:var(--surface-2); color:var(--ink); }
  .add-row-box{ width:36px; height:36px; flex-shrink:0; border-radius:8px; border:1.6px dashed var(--border-strong);
    display:flex; align-items:center; justify-content:center; color:var(--accent); }
  .add-row-box .icon{ width:18px; height:18px; stroke-width:2.2; }
  /* add buttons: centred inside their own soft, rounded element at the end of each list */
  .add-row{ justify-content:center; gap:0.5rem; min-height:54px; margin-top:0.75rem; padding:0 1rem;
    background:var(--surface-2); border:1.5px dashed var(--border-strong); border-radius:16px; color:var(--ink-muted); text-align:center; }
  .add-row:active{ background:var(--surface-2); border-style:solid; color:var(--ink); transform:scale(0.99); }
  .add-row .add-row-box{ width:auto; height:auto; border:none; border-radius:0; }
  .add-row .add-row-box .icon{ width:18px; height:18px; }
  .starter .btn{ min-height:52px; gap:0.45rem; }
  .save-chip{ border:none; cursor:pointer; display:inline-flex; align-items:center; gap:0.3rem; background:var(--accent-soft) !important; color:var(--accent-soft-ink) !important; min-height:28px; }
  .save-chip .icon{ width:12px; height:12px; }
  .empty-tap{ display:block; width:100%; min-height:28vh; border:none; background:none; padding:0; cursor:text; -webkit-tap-highlight-color:transparent; }
  #shopping-discover-list .empty-tap{ min-height:18vh; }
  .suggest-chips{ display:flex; flex-wrap:wrap; gap:0.5rem; padding:0.4rem 0 0.2rem; }
  .suggest-chip{ display:inline-flex; align-items:center; gap:0.35rem; min-height:40px; padding:0 0.9rem 0 0.7rem; border-radius:12px;
    border:1.5px dashed var(--border-strong); background:none; color:var(--ink); font-size:0.9rem; cursor:pointer;
    transition:background-color 160ms ease, border-color 160ms ease, transform 100ms ease-out; }
  .suggest-chip .icon{ width:15px; height:15px; color:var(--ink-muted); }
  .suggest-chip:active{ transform:scale(0.96); background:var(--surface-2); border-style:solid; }
  .photo-actions.single{ grid-template-columns:1fr; }
  .photo-pick{ flex-direction:row !important; gap:0.5rem; min-height:52px; }
  .store-chip.on{ padding-right:0.3rem; cursor:default; }
  .chip-x{ position:relative; width:30px; height:30px; margin-left:0.1rem; border:none; border-radius:10px; background:rgba(255,255,255,0.14);
    color:#FFFFFF; display:flex; align-items:center; justify-content:center; cursor:pointer; }
  .chip-x::after{ content:""; position:absolute; inset:-7px; }
  .chip-x .icon{ width:14px; height:14px; }
  .store-none{ color:var(--ink-faint); font-size:0.9rem; padding:0.2rem 0 0.1rem; }
  .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; }
  /* San Francisco, bold, everywhere */
  /* Nunito everywhere: fully rounded terminals that echo the icon's rounded "A" and wave. 400 details, 500 items, 800 titles */
  :where(body, body *:not(svg):not(path):not(use)){ font-weight:400 !important; }
  .row .name, .name, button, .btn, .cselect, .pop-item, .chip, .store-chip, .q-chip, input, select, textarea{ font-weight:500 !important; }
  h1, h2, h3, .stat .value{ font-weight:700 !important; }
  button, input, select, textarea, .cselect, .pop-item{ font-family:inherit; }
  body{ letter-spacing:0; }
  h1, h2, h3{ letter-spacing:-0.02em !important; }
  /* big, heavy screen titles so each page has presence even before anything is in its list */
  .panel-head h2{ font-size:2.35rem !important; line-height:1.05 !important; font-weight:800 !important; letter-spacing:-0.025em !important; }
  .panel-head{ margin-bottom:1.15rem; }
  .store-name-line, .rv-store, .receipt-top .name{ font-weight:500 !important; }
  .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:22px; }
  .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:0.72rem; font-weight:600; letter-spacing:0; }
  .bottom-nav button[aria-selected="true"]{ color:var(--nav-hl-ink); }

  /* spend total: flat solid card (black on light, graphite on dark), accent dot */
  .stat{ position:relative; overflow:hidden; isolation:isolate; text-align:left; padding:1.25rem 1.25rem 1.15rem; border-radius:20px; background:var(--card); color:var(--on-card); box-shadow:var(--shadow-lift); }
  /* the logo's wave, as a quiet motif along the bottom of the total card */
  .stat-wave{ position:absolute; left:0; right:0; bottom:0; width:100%; height:46px; z-index:-1; fill:var(--wave); opacity:0.28; }
  .stat-label{ display:flex; align-items:center; gap:0.45rem; font-size:0.68rem; letter-spacing:0.08em; text-transform:uppercase; font-weight:600; color:var(--on-card-muted); margin-bottom:0.5rem; }
  .stat-label::before{ content:""; width:7px; height:7px; border-radius:99px; background:var(--wave); box-shadow:0 0 10px 2px rgba(91,155,243,0.8); }
  .stat .value{ font-size:2.6rem; font-weight:700; line-height:1; letter-spacing:-0.035em; color:var(--on-card); }
  .stat .sub{ margin-top:0.5rem; font-size:0.76rem; font-weight:500; color:var(--on-card-muted); }
  .receipt-top .total{ font-size:1rem; }

  /* sheets: hairline edge, plain dim backdrop */
  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); }
  .toast{ font-weight:600; box-shadow:none; }
  .empty h3{ font-size:0.95rem; font-weight:500; }

  /* ---------- exact palette + effects (light) ---------- */
  :root{
    --bg:#F9FAFB;
    --surface:#FFFFFF;
    --ink:#1F2937;
    --ink-muted:#6B7280;
    --ink-faint:#6B7280;
    --success:#10B981;
    --accent:#4F46E5; --accent-strong:#4338CA; --accent-soft:#EEF2FF; --accent-soft-ink:#4338CA; --on-accent:#FFFFFF;
    --cta:#4F46E5; --on-cta:#FFFFFF; --card:#4F46E5; --on-card:#FFFFFF; --on-card-muted:#E0E7FF;
    --nav-hl:#4F46E5; --nav-hl-ink:#FFFFFF; --wave:#C7D2FE;
    --grad:linear-gradient(135deg, #4F46E5 0%, #2563EB 100%);
    --glow:0 4px 16px rgba(79,70,229,0.25); --glow-strong:0 4px 16px rgba(79,70,229,0.25);
    --focus:0 0 0 3px rgba(79,70,229,0.3);
    color-scheme:light;
  }
  /* every brand surface uses the same gradient + indigo glow as the primary button */
  #bottom-nav #nav-highlight{ background:var(--grad) !important; box-shadow:0 4px 16px rgba(79,70,229,0.25) !important; }
  .stat{ background:var(--grad) !important; box-shadow:0 4px 16px rgba(79,70,229,0.25) !important; }
  .stat-wave{ fill:#FFFFFF !important; opacity:0.12 !important; }
  .stat-label::before, .compare-section-title::before{ background:#C7D2FE !important; box-shadow:0 0 8px 1px rgba(199,210,254,0.8) !important; }
  .compare-section-title::before{ background:#4F46E5 !important; box-shadow:0 0 8px 1px rgba(79,70,229,0.45) !important; }
  .toast{ background:var(--grad) !important; color:#FFFFFF !important; box-shadow:0 4px 16px rgba(79,70,229,0.25) !important; }
  .seg button.on{ background:var(--grad) !important; color:#FFFFFF !important; }
  .store-chip.on{ background:var(--grad) !important; border-color:transparent !important; color:#FFFFFF !important; box-shadow:0 4px 16px rgba(79,70,229,0.25); }
  .add-row-box{ color:#4F46E5; }
  body{ background:var(--bg); }
  :root:not([data-app-theme="dark"]) html, :root:not([data-app-theme="dark"]){ background:var(--bg); }
  /* list item cards: white, no borders, faint shadow (#000 @ 5%, blur 4px, y 1px) */
  :root:not([data-app-theme="dark"]) .row, :root:not([data-app-theme="dark"]) .swipe-content{ background:#FFFFFF; }
  .row{ border-bottom:none !important; }
  :root:not([data-app-theme="dark"]) .row{ box-shadow:0 1px 4px rgba(0,0,0,0.05); }
  :root:not([data-app-theme="dark"]) .settings-group, :root:not([data-app-theme="dark"]) #compare-modal-body-prices{ background:#FFFFFF; border:none !important; box-shadow:0 1px 4px rgba(0,0,0,0.05); }
  /* checked boxes: soft forest green */
  .check.on, .add-toggle.on{ background-color:var(--success) !important; border-color:var(--success) !important; color:#FFFFFF !important;
    background-image:none !important; box-shadow:none !important; }
  /* primary action: indigo → cobalt gradient with an indigo glow (#4F46E5 @ 25%, blur 16px, y 4px) */
  .btn-primary{ background:linear-gradient(135deg, #4F46E5 0%, #2563EB 100%) !important; border-color:transparent !important; color:#FFFFFF !important;
    box-shadow:0 4px 16px rgba(79,70,229,0.25) !important; }
  /* done items: strikethrough, and the text + its image fade to 40% */
  .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; }

  /* ---------- no generic tells: no glows, no status dots, no spaced-out caps labels, no pills, no tags ---------- */
  .btn-primary, #bottom-nav #nav-highlight, .stat, .toast, .store-chip.on, .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; font-size:0.86rem !important; font-weight:500 !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:12px !important; }
  .toast{ border-radius:14px !important; }
  .save-chip{ background:none !important; padding:0 !important; min-height:0; color:#4F46E5 !important; }

  /* Nexa Heavy (embedded) for everything with presence: titles, item names, buttons, labels, totals.
     Small supporting text (meta lines, hints, inputs) stays in Nunito so it remains easy to read. */
  @font-face{ font-family:"Nexa"; font-weight:800; font-style:normal; font-display:swap;
    src:url("fonts/nexa-heavy.ttf") format("truetype"); }
  :root{ --display:"Nexa", "Nunito", -apple-system, system-ui, sans-serif; --font:"Nunito", -apple-system, system-ui, sans-serif; }
  /* supporting text (details, hints, inputs, meta lines) in Nunito medium: a readable middle weight under Nexa Heavy */
  :where(body, body *:not(svg):not(path):not(use)){ font-family:var(--font); font-weight:500 !important; }
  input, select, textarea, .row-meta, .note, .field-hint, .sub, .panel-hint, .modal-message, .modal-sub, .price-line{ font-family:var(--font) !important; font-weight:500 !important; }
  :is(.btn, .add-row, .store-chip, .pop-item, .cselect, .toast, .q-chip, h1, h2, h3, label, .compare-section-title, .stat-label, .name, .modal-titles) *:not(svg):not(path):not(use){
    font-family:var(--display) !important; font-weight:800 !important; }
  /* screen and popup titles in capitals */
  .panel-head h2, .modal-titles h3, #modal-confirm h3, dialog .modal-head h3{ text-transform:none; letter-spacing:-0.01em !important; }
  h1, h2, h3, .panel-head h2, .row .name, .name, .store-name-line, .btn, .add-row, .stat .value, .modal-titles h3, #modal-confirm h3,
  .bottom-nav .nav-label, .store-chip, .q-chip, .pop-item, .cselect, label, .compare-section-title, .stat-label, .toast{
    font-family:var(--display) !important; font-weight:800 !important; }
  .panel-head h2{ letter-spacing:-0.01em !important; }
  .row .name, .name, .store-name-line{ letter-spacing:0.005em; }
  label, .compare-section-title, .stat-label{ font-size:0.8rem !important; }

  /* the logo's wave returns on the brand-gradient surfaces: a soft white swell along the bottom edge */
  #bottom-nav #nav-highlight{ background:var(--brand-wave-light) no-repeat bottom / 100% 52%, var(--grad) !important; }
  .btn-primary{ background:var(--brand-wave-light) no-repeat bottom / 100% 55%, linear-gradient(135deg, #4F46E5 0%, #2563EB 100%) !important; }
  .store-chip.on, .seg button.on{ background:var(--brand-wave-light) no-repeat bottom / 100% 55%, var(--grad) !important; }
  .toast{ background:var(--brand-wave-light) no-repeat bottom / 100% 60%, var(--grad) !important; }
  .stat-wave{ opacity:0.2 !important; }
  .check.on, .add-toggle.on{ background:var(--brand-wave-light) no-repeat bottom / 100% 60%, var(--success) !important; }

  /* ===== critique fixes ===== */
  /* (1) on the Items screen "on my list" is indigo; green only ever means bought */
  .add-toggle.on{ background:#4F46E5 !important; border-color:#4F46E5 !important; color:#FFFFFF !important; }
  /* (4) gradient + wave only on the tab highlight and the main button; everything else flat */
  .check.on{ background:var(--success) !important; }
  .store-chip.on, .seg button.on{ background:#4F46E5 !important; }
  .toast{ background:#1F2937 !important; }
  .toast-action{ color:#A5B4FC !important; }
  .stat{ background:#4F46E5 !important; }
  /* (5) round checks, like Reminders (and the logo's rounded strokes) */
  .check, .add-toggle{ border-radius:50% !important; }
  /* (3) tab bar: every icon gets its label */
  #bottom-nav button{ flex-direction:column !important; gap:0 !important; }
  #bottom-nav button .icon{ width:22px !important; height:22px !important; }
  #bottom-nav .nav-label{ display:block !important; max-height:none !important; max-width:none !important; opacity:1 !important; overflow:visible !important;
    font-size:0.64rem !important; line-height:1 !important; margin-top:4px !important; letter-spacing:0 !important; }
  /* (6) reorder handles only while editing; Edit/Done sits in the header */
  .edit-btn{ border:none; background:none; color:#4F46E5; font-family:var(--display); font-weight:800 !important; font-size:1rem; padding:0.5rem 0.2rem; min-height:44px; cursor:pointer; }
  /* (7) add buttons: a soft indigo element, not a dashed drop zone */
  .add-row{ background:#EEF2FF !important; border:none !important; color:#4F46E5 !important; }
  .add-row:active{ background:#E0E7FF !important; }
  /* (8) iOS grouped list: one white rounded box, hairlines between rows */
  #shopping-list, #items-list, #stores-list{ background:#FFFFFF; border-radius:16px; 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; }
  /* (9) the store picker reads as a status once you're shopping */
  .cselect.is-active{ background:#EEF2FF !important; color:#4F46E5 !important; }
  /* (10) Done instead of an X on the item sheet */
  .modal-done{ width:auto !important; min-width:0 !important; padding:0 0.9rem !important; border-radius:12px !important; background:none !important;
    color:#4F46E5 !important; font-family:var(--display) !important; font-weight:800 !important; font-size:1rem; }
  /* (12) checking off: the tick pops and the row fades to 40% */
  @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.4,.5,1); }
  .row:has(.check.pop) .row-main{ animation:fadeDone 220ms ease-out; }
  @media (prefers-reduced-motion: reduce){ .check.pop, .row:has(.check.pop) .row-main{ animation:none; } }
  /* (13) store chips compact enough to sit side by side */
  .store-chip{ min-height:40px !important; padding:0 0.3rem 0 0.7rem !important; font-size:0.9rem !important; gap:0.35rem !important; }
  .store-chip .chip-x{ width:26px; height:26px; }
  /* settings data actions */
  .data-actions{ display:flex; flex-direction:column; gap:0.5rem; }
  .data-actions .btn{ gap:0.45rem; }

  /* ===== round-2 critique fixes ===== */
  /* (1)(4) one type scale */
  :root{ --fs-title:2.35rem; --fs-sheet:1.3rem; --fs-item:1rem; --fs-body:0.94rem; --fs-small:0.8rem; --fs-tab:0.72rem; }
  .modal-titles h3, #modal-confirm h3, dialog .modal-head h3, .title-input{ font-size:var(--fs-sheet) !important; }
  .row .name, .name, .store-name-line, .set-row label{ font-size:var(--fs-item) !important; }
  .btn, .add-row, .range-cycle, .cselect, .pop-item, .toast, .edit-btn, .store-chip, .q-chip, .photo-add{ font-size:var(--fs-body) !important; }
  .row-meta, .price-line, .note, .sub, .field-hint, .chip, .about-line, .field-error, label, .compare-section-title, .stat-label, .title-count{ font-size:var(--fs-small) !important; }
  #bottom-nav .nav-label{ font-size:var(--fs-tab) !important; }
  /* (2) 44pt tap targets */
  .range-cycle, #clear-checked-btn, .cselect, .btn{ min-height:44px !important; }
  .edit-btn{ min-width:44px; }
  /* (3) readable picker text */
  .cselect:not(.is-active){ color:#4B5563 !important; }
  /* (5) three button styles: primary (gradient), secondary (soft indigo), destructive (red text) */
  .btn:not(.btn-primary):not(.btn-danger):not(.btn-ghost-danger), .btn-soft, .photo-add, .photo-pick{
    background:#EEF2FF !important; color:#4F46E5 !important; border:none !important; box-shadow:none !important; }
  .photo-add .icon, .photo-pick .icon{ color:#4F46E5 !important; }
  .btn-ghost-danger{ background:#FEF2F2 !important; color:#DC2626 !important; border:none !important; }
  /* (6) the Add-to-list sheet uses the same grouped list */
  #pick-item-list{ background:#F9FAFB; border-radius:16px; 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; }
  #pick-item-list .row + .row{ box-shadow:inset 0 1px 0 #EEF0F3 !important; }
  .pick-quick .name{ color:#4F46E5; }
  .add-toggle.add-new{ border-color:#C7D2FE; color:#4F46E5; display:flex; align-items:center; justify-content:center; }
  /* (7) one filter look: store picker and receipt filters share size, colour and radius */
  .cselect.pill, .range-cycle{ background:var(--surface-2) !important; border:none !important; border-radius:12px !important; min-height:44px !important; font-weight:800 !important; font-family:var(--display) !important; }
  /* (8) three icon sizes: 16 inline, 20 in rows/buttons, 22 tab bar */
  .btn .icon, .add-row .icon, .drag-handle .icon, .store-chip .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, .store-name-line .icon, .q-chip .icon, .chip-x .icon, .pop-item .icon{ width:16px !important; height:16px !important; }
  /* (10) Settings: grouped rows with the value on the right */
  .settings-list{ padding:0 0.95rem !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; }
  /* (11) live count beside the list title */
  #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; }
  #panel-shopping .panel-head .edit-btn{ grid-column:2; grid-row:1; }
  .panel-head .title-count{ grid-column:1; grid-row:2; color:#6B7280; font-family:var(--font); font-weight:500 !important; white-space:nowrap; }
  .panel-head .title-count:empty{ display:none; }
  /* (13) Edit mode delete buttons */
  .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; }
  /* ---- v86: icon-only bar, quick add pair, promote sheet ---- */
  #bottom-nav .nav-label{ display:none !important; }
  .add-pair{ display:grid; grid-template-columns:1fr 1fr; gap:0.6rem; margin-top:0.75rem; }
  .add-pair .add-row{ margin-top:0 !important; }
  #modal-promote .modal-actions{ margin-top:0.4rem; }
  .details-hint{ display:inline-flex; align-items:center; gap:0.3rem; margin-top:0.3rem; padding:0.18rem 0.55rem 0.18rem 0.4rem; border-radius:999px;
    background:#FEF3C7; color:#B45309; font-size:0.74rem; font-weight:700 !important; line-height:1.2; }
  .details-hint .icon{ width:13px !important; height:13px !important; 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:50px; padding:0 0.95rem; border-radius:14px; justify-content:flex-start; }
  .receipt-filters .rc-label{ flex:1; min-width:0; text-align:left; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  /* ---- v89: taller bar, squiggle clearance, add buttons on top ---- */
  :root{ --track-h:66px; }
  #bottom-nav #nav-highlight{ background:var(--brand-wave-light) no-repeat bottom / 100% 32%, var(--grad) !important; }
  .btn-primary{ background:var(--brand-wave-light) no-repeat bottom / 100% 32%, linear-gradient(135deg, #4F46E5 0%, #2563EB 100%) !important; }
  .stat{ padding-bottom:2.1rem !important; }
  .stat-wave{ height:28px !important; }
  .add-pair{ margin:0 0 0.75rem !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; }
  /* ---- v92: shopping list, option B (store chip under the title, add row inside the list card) ---- */
  #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;
    background:#EEF2FF !important; color:#4F46E5 !important; font-size:0.9rem !important; font-weight:700 !important; }
  #shop-store-select-btn .cselect-chev{ color:currentColor !important; width:14px !important; height:14px !important; }
  #shop-store-select-btn.is-active{ background:#4F46E5 !important; color:#FFFFFF !important; }
  .list-card{ background:#FFFFFF; border-radius:16px; box-shadow:0 1px 4px rgba(0,0,0,0.05); overflow:hidden; }
  .list-card:has(.reordering){ overflow:visible; }
  .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; min-height:56px; }
  #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;
    color:#4F46E5; font-family:var(--display); font-weight:800 !important; font-size:var(--fs-body) !important; padding:0 3.2rem; }
  .list-add .icon{ width:18px !important; height:18px !important; stroke-width:2.4; }
  .list-add-quick{ position:absolute; right:0.45rem; top:50%; transform:translateY(-50%); width:44px; height:44px; border:none; border-radius:12px;
    background:none; color:#4F46E5; display:flex; align-items:center; justify-content:center; cursor:pointer; }
  .list-add-quick .icon{ width:20px !important; height:20px !important; }
  .list-add:active, .list-add-quick:active{ background:#F5F7FF; }
  #clear-checked-btn{ margin-top:1rem !important; }
  /* checkboxes: smaller, clearer ring, same 44pt tap area */
  .check, .add-toggle{ position:relative; width:26px !important; height:26px !important; border-width:2px !important; border-color:#9CA3AF !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; }
  .check.on, .add-toggle.on{ border-color:transparent !important; }
  :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; }
  /* ---- v94: page headers sit on the same inner line as the content below ---- */
  :root{ --content-inset:0.9rem; --fs-title:2rem; }
  .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; }
  .panel > .panel-head:not(.sub) h2{ font-size:var(--fs-title) !important; font-weight:800 !important; line-height:1.1 !important; margin:0; }
  .search-wrap .icon{ left:var(--content-inset) !important; }
  .search-wrap input{ padding-left:calc(var(--content-inset) + 28px) !important; }
  .stat{ padding-left:var(--content-inset) !important; padding-right:var(--content-inset) !important; }
  .receipt-filters .range-cycle{ padding-left:var(--content-inset) !important; }

  /* =====================================================================
     v96: Aislo design system (final layer)
     Tuned tokens (no stock palette), one type system (Nexa for titles and
     big numbers, the system font for everything you read and tap), one
     control style, quiet completed states, brand color only where it counts.
     ===================================================================== */
  :root{
    --bg:#F5F5F1; --surface:#FFFFFF; --surface-2:#F0F0EB; --surface-3:#E6E6E0; --fill-page:#E8E8E2;
    --ink:#16171C; --ink-2:#55575F; --ink-3:#85878F; --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:-apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", system-ui, sans-serif;
    --display:"Nexa", -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, sans-serif;
    --fs-item:1.0625rem; --fs-body:1rem; --fs-small:0.8125rem;
    --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);
  }
  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; }

  /* ---- type: system font for reading and tapping ---- */
  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){
    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, .row-meta, .note, .sub, .modal-message, .field-hint, .cmp-stats, .about-line){ font-family:var(--font) !important; font-weight:400 !important; }
  html body .pop-item{ font-weight:500 !important; }
  /* Nexa only for titles and the big numbers */
  html body :is(.panel-head h2, dialog .modal-head h3, .modal-titles h3, .stat .value, .brand-name){ font-family:var(--display) !important; font-weight:800 !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-small) !important; color:var(--ink-2) !important; font-weight:600 !important; }
  .row-meta{ color:var(--ink-3) !important; }

  /* ---- icons: one stroke weight ---- */
  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; }

  /* ---- header: gear in the right slot ---- */
  .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); }

  /* ---- cards and rows ---- */
  html body .list-card{ background:var(--surface); border-radius:18px; 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; }
  /* hairlines start where the text starts, like iOS */
  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) !important; font-size:var(--fs-body) !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; }

  /* ---- aisles ---- */
  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:0.78rem; 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); }

  /* ---- checks: open = ring, bought = quiet gray; on-list = brand rounded square (a different shape on purpose) ---- */
  html body .check{ border-color:var(--ink-3) !important; background:transparent !important; color:transparent !important; }
  html body .check.on{ background:#ABADB4 !important; border-color:#ABADB4 !important; color:#FFFFFF !important; }
  html body .add-toggle{ border-radius:8px !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) !important; }

  /* ---- list extras: quantity, price, estimate, cart ---- */
  .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); font-weight:600 !important; font-size:0.95rem; flex-shrink:0; }
  .row-price, .row-value{ flex-shrink:0; color:var(--ink-2); font-size:0.95rem; 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:space-between; gap:0.8rem; }
  .list-est{ color:var(--ink-2); font-size:0.95rem; font-weight:500 !important; padding-right:var(--content-inset); font-variant-numeric:tabular-nums; }
  #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; }
  .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-small); font-weight:600 !important; color:var(--ink-3); }
  .text-btn{ border:none; background:none; color:var(--brand); font-size:0.95rem; min-height:44px; padding:0 0.75rem; cursor:pointer; border-radius:10px; }
  .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; font-size:0.75rem !important; }

  /* ---- the Add sheet: suggestions first, then sections ---- */
  html body #pick-item-list{ background:var(--surface-2) !important; border-radius:16px; }
  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:0.78rem; 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) !important; }

  /* ---- controls: one input style, one button system ---- */
  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:12px !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; }
  html body input[readonly]{ background:transparent !important; border-color:transparent !important; box-shadow:none !important; font-weight:600 !important; font-size:1.25rem !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:12px !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:14px !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:1rem; cursor:pointer; border-radius:12px; }
  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:14px !important; min-height:54px; font-weight:500 !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:12px; }
  html body .modal-close{ background:var(--surface-2) !important; color:var(--ink-2) !important; }

  /* ---- sheets: grouped rows ---- */
  .sheet-group{ background:var(--surface-2); border-radius:14px; 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:1rem; 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:1rem !important; color:var(--ink) !important; font-weight:500 !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:0.9rem; }
  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-small) !important; color:var(--ink-3) !important; margin:0.2rem 0 0.55rem !important; }
  html body .store-chip.on{ background:var(--surface-2) !important; color:var(--ink) !important; border:none !important; box-shadow:none !important; }
  html body .store-chip .icon{ color:var(--ink-3) !important; }
  .store-chip .chip-price{ color:var(--ink-2); font-weight:500 !important; margin-left:0.3rem; font-variant-numeric:tabular-nums; }
  .store-chip .chip-price.low{ color:var(--good); font-weight:600 !important; }
  html body .store-chip .chip-x{ background:none !important; color:var(--ink-3) !important; }
  .stepper{ display:inline-flex; align-items:center; background:var(--surface); border-radius:12px; 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:10px; }
  .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:10px; object-fit:cover; }
  html body .list-card:has(> #store-items-list:empty){ display:none; }

  /* ---- toast ---- */
  html body .toast{ background:var(--ink) !important; color:#FFFFFF !important; border-radius:14px !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; }

  /* ---- brand surfaces: the highlighted tab and the spend card (wave lives only here) ---- */
  #bottom-nav #nav-highlight{ width:calc(100% / 3 - 2 * var(--pill-m)) !important;
    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; }
  .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:4px; 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; }
  /* ---- v97 fixes ---- */
  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:800 !important; font-size:var(--fs-sheet) !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; }
  /* in a sheet, a list is a grouped block like the settings rows */
  html body dialog .list-card{ background:var(--surface-2); box-shadow:none; border-radius:14px; }
  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; }
  /* the "Add store" flag: compact so names keep their room */
  html body .details-hint{ gap:0.2rem !important; padding:0.16rem 0.5rem 0.16rem 0.38rem !important; font-size:0.72rem !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); }
  /* ---- v98: scan, voice, prices per store ---- */
  #receipt-photo-field{ display:none !important; }
  .scan-banner{ display:flex; align-items:center; gap:0.85rem; background:var(--surface-2); border-radius:14px; padding:0.55rem; margin:0 0 1rem; }
  .scan-banner img{ width:54px; height:70px; object-fit:cover; border-radius:10px; flex-shrink:0; background:var(--surface-3); }
  .scan-status{ display:flex; align-items:center; gap:0.6rem; color:var(--ink-2); font-size:0.95rem; 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:12px; padding:0.35rem 0.35rem 0.35rem 0.8rem; font-size:0.9rem; 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:12px; background:none;
    color:var(--brand); 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; }
  .voice-stage{ display:flex; flex-direction:column; align-items:center; gap:0.55rem; padding:0.3rem 0 0.9rem; }
  .voice-mic{ width:76px; height:76px; border-radius:50%; border:none; background:var(--surface-2); color:var(--ink-2); display:flex; align-items:center; justify-content:center;
    cursor:pointer; transition:background-color 200ms ease, color 200ms ease; }
  .voice-mic .icon{ width:30px !important; height:30px !important; stroke-width:1.8 !important; }
  .voice-mic.on{ background:var(--grad); color:#FFFFFF; animation:voicePulse 1.6s ease-out infinite; }
  @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); } }
  @media (prefers-reduced-motion: reduce){ .voice-mic.on{ animation:none; } }
  .voice-status{ min-height:1.35em; margin:0; color:var(--ink-2); font-size:0.95rem; text-align:center; }
  html body #voice-text{ margin-bottom:1rem; resize:none; }
  .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:0.8rem; 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:0.72rem; font-weight:600 !important; color:var(--good); background:#E1F2E8; border-radius:999px; padding:0.14rem 0.5rem; white-space:nowrap; }
  html body .pop-new, html body .pop-new .icon{ color:var(--brand) !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; }
  /* ---- v99: accounts ---- */
  html body :is(input[type="email"], input[type="password"]){ background:var(--surface-2) !important; border:1px solid transparent !important;
    border-radius:12px !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:0.9rem; 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:0.9rem; }
  .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:0.95rem; cursor:pointer; }
  html body .store-pick{ font-family:var(--font) !important; font-weight:500 !important; }
  .store-pick.on{ background:var(--brand); color:#FFFFFF; }
  /* loading rows: gray boxes where rows will appear */
  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; }
  /* ---- v101: store logos ---- */
  .store-logo{ position:relative; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; width:32px; height:32px; border-radius:9px;
    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:0.9rem; 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:8px; }
  .store-logo.xs{ width:22px; height:22px; border-radius:6px; margin-right:0.1rem; }
  .store-logo.xs .mono{ font-size:0.7rem; }
  .store-logo.xs .logo-img{ padding:2px; }
  .store-logo.lg{ width:40px; height:40px; border-radius:10px; }
  .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; }
  /* ---- v102: logos in store pickers, store rows swipe, Add sheet by store ---- */
  .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:0.9rem; cursor:pointer; white-space:nowrap; }
  html body .pick-store{ font-family:var(--font) !important; font-weight:500 !important; }
  .pick-store .store-logo{ margin-left:-0.45rem; }
  .pick-store.on{ background:var(--brand); color:#FFFFFF; }
  /* ---- v103: opening screen, quantity controls ---- */
  .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:0.88rem; 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:#ECEDFC; color:var(--brand); }
  .qty-pill:active{ background:var(--surface-3); }
  .stepper-sm{ flex-shrink:0; }
  .stepper-sm button{ width:34px; height:32px; }
  .qty-menu{ display:flex; justify-content:center; padding:0.35rem; }
  .qty-menu .stepper{ box-shadow:none; background:none; }
  .qty-menu .stepper button{ width:44px; height:40px; }
  .qty-menu .stepper-val{ min-width:2rem; font-size:1.05rem; }
  /* ---- v104: depth and motion (quiet, physical, reduced-motion aware) ---- */
  /* controls give under your finger */
  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 180ms cubic-bezier(.2,.8,.2,1), 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 .voice-mic:active{ transform:scale(0.94); }
  html body :is(.check, .add-toggle):active{ transform:scale(0.88); }
  html body .set-link:active{ transform:scale(0.99); }
  /* a row lights up the moment you touch it */
  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; }
  /* the tab you tap dips, then the pill glides over */
  #bottom-nav button .icon{ transition:transform 200ms cubic-bezier(.2,.8,.2,1) !important; }
  #bottom-nav button:active .icon{ transform:scale(0.86) !important; }
  /* sheets: the page behind steps back a little */
  #main-area{ transform-origin:50% 0; transition:transform 460ms cubic-bezier(.32,.72,0,1), filter 460ms ease; }
  html.sheet-open #main-area{ transform:scale(0.955) translateY(6px); filter:saturate(0.9); }
  #bottom-nav{ transition:transform 460ms cubic-bezier(.32,.72,0,1), opacity 300ms ease; }
  html.sheet-open #bottom-nav{ opacity:0.6; }
  /* in the Add sheet, a just-added item pops like a check */
  .add-toggle.pop{ animation:checkPop 280ms cubic-bezier(.3,1.4,.5,1); }
  /* the week bars rise from the bottom */
  .stat-bars span{ transform-origin:50% 100%; }
  /* the opening screen: the mark eases forward as the app appears */
  .splash-mark{ transition:transform 420ms cubic-bezier(.2,.8,.2,1); }
  .splash.gone .splash-mark{ transform:scale(1.08); }
  @media (prefers-reduced-motion: reduce){
    html.sheet-open #main-area{ transform:none; filter: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; }
  }