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

  /* Minimal AI / fintech look: one typeface (Inter), black + light-gray structure,
     pastel-blue accent. Flat colors only: no gradients, near-zero glow. */
  :root{
    --font:"Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    --bg:#FFFFFF;
    --surface:#FFFFFF;
    --surface-2:#F3F3F4;
    --ink:#0A0A0A;
    --ink-muted:#5C5C63;
    --ink-faint:#8A8A91;
    --accent:#A9CDF0;
    --accent-strong:#8AB8E6;
    --accent-soft:#EAF3FC;
    --accent-soft-ink:#1F4E7A;
    --on-accent:#0A0A0A;
    --cta:#0A0A0A;
    --on-cta:#FFFFFF;
    --card:#0A0A0A;
    --on-card:#FFFFFF;
    --on-card-muted:#A1A1AA;
    --border:#EBEBED;
    --border-strong:#D9D9DE;
    --warn:#A15C07;
    --warn-soft:#FDF3E6;
    --danger:#D92D20;
    --danger-soft:#FDEEEC;
    --good:#16803C;
    --good-soft:#EBF7EF;
    --shadow: 0 1px 2px rgba(10,10,10,0.04);
    --shadow-lift: 0 8px 24px -12px rgba(10,10,10,0.18);
    --focus: 0 0 0 3px rgba(138,184,230,0.5);
    color-scheme: light;
  }
  :root[data-app-theme="dark"]{
    --bg:#0A0A0A;
    --surface:#141416;
    --surface-2:#1E1E21;
    --ink:#FAFAFA;
    --ink-muted:#A1A1AA;
    --ink-faint:#7A7A82;
    --accent:#A9CDF0;
    --accent-strong:#C4DDF6;
    --accent-soft:#1B2A38;
    --accent-soft-ink:#BCDCF7;
    --on-accent:#0A0A0A;
    --cta:#A9CDF0;
    --on-cta:#0A0A0A;
    --card:#1E1E21;
    --on-card:#FAFAFA;
    --on-card-muted:#A1A1AA;
    --border:#232326;
    --border-strong:#323236;
    --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 10px 28px -14px rgba(0,0,0,0.7);
    --focus: 0 0 0 3px rgba(169,205,240,0.4);
    color-scheme: dark;
  }

  *{ box-sizing:border-box; }
  html,body{ margin:0; overflow-x:hidden; max-width:100%; overscroll-behavior:none; }
  html{ touch-action:pan-x pan-y; -webkit-text-size-adjust:100%; }
  body{
    background:var(--bg); color:var(--ink);
    font-family:var(--font); font-feature-settings:"cv11", "ss01";
    font-size:15px; line-height:1.5; -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(92px + 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; }
  .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:640ms; --tabs:5; --grow:1.6; --slide-ease:cubic-bezier(.22,1,.36,1); }
  .bottom-nav{
    position:fixed; left:50%; transform:translateX(-50%); bottom:0; 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:max(4px, calc(env(safe-area-inset-bottom) - 20px));
  }
  /* active tab grows to --grow units; the rest are 1 unit each */
  .nav-highlight{
    position:absolute; top:-12px; bottom:0;
    width:calc(var(--grow) / (var(--tabs) - 1 + var(--grow)) * 100%);
    left:calc(var(--active-idx, 0) / (var(--tabs) - 1 + var(--grow)) * 100%);
    border-radius:24px 24px 0 0; background:var(--accent);
    transition:left var(--slide-ms) var(--slide-ease);
    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; }
  .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-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; }
  .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; }
  .settings-group{ margin-bottom:1.6rem; }
  /* 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-chip{ left:0.6rem; bottom:0.6rem; border-radius:99px; padding:0.45rem 0.85rem; min-height:36px; }
  .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; }
  .swipe-bg{
    position:absolute; inset:0; background:var(--danger); color:#fff; z-index:0;
    display:flex; align-items:center; justify-content:flex-end; padding-right:1.1rem;
    font-weight:700; font-size:0.82rem; opacity:0;
  }
  .swipe-content{ position:relative; z-index:1; background:var(--bg); }

  /* ---------- 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:32px; height:32px; 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); }
  .row-main{ flex:1; min-width:0; }
  .row-main .name{ font-weight:600; font-size:0.96rem; }
  .row-meta{ color:var(--ink-faint); font-size:0.76rem; 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(84px + env(safe-area-inset-bottom)); z-index:40;
    transform:translateX(-50%) translateY(12px); background:var(--ink); color:var(--bg);
    padding:0.65rem 1.1rem; border-radius:99px; font-size:0.85rem; font-weight:600;
    box-shadow:var(--shadow-lift); opacity:0; pointer-events:none; max-width:88vw; text-align:center;
    transition:opacity 200ms ease, transform 200ms ease;
  }
  .toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

  @media (prefers-reduced-motion: reduce){ *{ animation:none !important; transition:none !important; } }
  @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; }
  .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); }
  .btn-sm{ font-size:0.74rem; }
  .chip{ border-radius:6px; font-size:0.62rem; letter-spacing:0.04em; text-transform:uppercase; padding:0.16rem 0.45rem; 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(--ink); color:var(--bg); }
  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 var(--border); background:var(--surface); backdrop-filter:none; }
  .nav-highlight{ background:var(--accent); box-shadow:none; }
  .bottom-nav .nav-label{ font-size:0.62rem; font-weight:600; letter-spacing:0; }
  .bottom-nav button[aria-selected="true"]{ color:#0A0A0A; }

  /* spend total: flat solid card (black on light, graphite on dark), accent dot */
  .stat{ text-align:left; padding:1.25rem 1.25rem 1.15rem; border-radius:20px; background:var(--card); color:var(--on-card); }
  .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(--accent); }
  .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; }