:root {
  color-scheme: light;
  --bg: #f4f6f5; --card: #fff; --card2: #eef2f1; --text: #14181b; --muted: #66707a; --line: #e2e7e6;
  --accent: #047857; --accent-2: #0e9f6e; --accent-text: #fff; --warn: #b45309; --ok: #15803d; --danger: #b91c1c;
  --paper: #fffdf8; --shadow: 0 1px 2px rgb(0 0 0 / .04), 0 8px 24px rgb(15 40 38 / .06);
  --r: 18px; --ease: cubic-bezier(.2, .8, .2, 1);
  /* Category colors (brand emerald is kept out of this set). Checked for contrast and colour-blind separation;
     every category also shows its icon and name, so colour never carries the meaning alone. */
  --cat-grocery: #5c9e12; --cat-household: #2a78d6; --cat-clothing: #a14bae; --cat-electronics: #4a3aa7;
  --cat-health: #e0679a; --cat-baby: #d4a017; --cat-pets: #92500b; --cat-garden: #1592a8; --cat-alcohol: #9f2349;
  --cat-dining: #eb6834; --cat-gas: #454e58; --cat-tax: #7a8189; --cat-other: #c1bdb7; --cat-rest: #d3d8db;
  --seg-on: var(--card); /* selected side of a .seg switch */
}
/* Dark: follows the device unless Settings > Appearance picked Light or Dark (theme.js sets <html data-theme>).
   The two blocks below must stay identical. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { color-scheme: dark; --bg: #0d1012; --card: #171b1e; --card2: #1f2427; --text: #e9ecee; --muted: #929ca5; --line: #262c30;
    --accent: #34d399; --accent-2: #6ee7b7; --accent-text: #052e1f; --warn: #fbbf24; --ok: #4ade80; --danger: #f87171;
    --paper: #f3efe4; --shadow: 0 1px 2px rgb(0 0 0 / .3), 0 10px 30px rgb(0 0 0 / .25);
    --cat-grocery: #61a82d; --cat-household: #2f8adc; --cat-clothing: #bf60b4; --cat-electronics: #495cc9;
    --cat-health: #d76590; --cat-baby: #ae931d; --cat-pets: #944e21; --cat-garden: #0e9ca2; --cat-alcohol: #b83251;
    --cat-dining: #df6d2f; --cat-gas: #95a0ab; --cat-tax: #5d646c; --cat-other: #d4d0ca; --cat-rest: #3a4046; --seg-on: color-mix(in srgb, var(--text) 13%, var(--card2)); }
}
:root[data-theme="dark"] { color-scheme: dark; --bg: #0d1012; --card: #171b1e; --card2: #1f2427; --text: #e9ecee; --muted: #929ca5; --line: #262c30;
    --accent: #34d399; --accent-2: #6ee7b7; --accent-text: #052e1f; --warn: #fbbf24; --ok: #4ade80; --danger: #f87171;
    --paper: #f3efe4; --shadow: 0 1px 2px rgb(0 0 0 / .3), 0 10px 30px rgb(0 0 0 / .25);
    --cat-grocery: #61a82d; --cat-household: #2f8adc; --cat-clothing: #bf60b4; --cat-electronics: #495cc9;
    --cat-health: #d76590; --cat-baby: #ae931d; --cat-pets: #944e21; --cat-garden: #0e9ca2; --cat-alcohol: #b83251;
    --cat-dining: #df6d2f; --cat-gas: #95a0ab; --cat-tax: #5d646c; --cat-other: #d4d0ca; --cat-rest: #3a4046; --seg-on: color-mix(in srgb, var(--text) 13%, var(--card2)); }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
body { margin: 0; font: 16px/1.45 -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
  background: var(--bg); color: var(--text); padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
body::before { /* soft accent glow behind the hero */
  content: ""; position: fixed; inset: -20vh -20vw auto; height: 60vh; pointer-events: none; z-index: -1;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--accent-2) 10%, transparent), transparent); }
svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
h2 { font-size: 19px; margin: 0; } h3 { font-size: 15px; margin: 0; }

/* ---------- header ---------- */
.top { display: flex; align-items: center; justify-content: space-between; max-width: 720px; margin: 0 auto;
  padding: calc(12px + env(safe-area-inset-top)) 16px 4px; }
.brand { display: flex; align-items: center; gap: 10px; }
.brand h1 { margin: 0; font-size: 21px; letter-spacing: -.02em; }
.brand .wordmark { display: block; height: 32px; width: auto; }
.brand .wordmark.dark { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .brand .wordmark { display: none; }
  :root:not([data-theme="light"]) .brand .wordmark.dark { display: block; } }
:root[data-theme="dark"] .brand .wordmark { display: none; } :root[data-theme="dark"] .brand .wordmark.dark { display: block; }
.logo { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; font-weight: 800;
  color: var(--accent-text); background: linear-gradient(135deg, var(--accent), var(--accent-2)); }
.icon-btn { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; margin: 0; border-radius: 50%;
  border: 0; background: var(--card); color: var(--muted); box-shadow: var(--shadow); }

main { padding: 8px 16px; max-width: 720px; margin: 0 auto; }
.tab { display: none; } .tab.active { display: block; animation: rise .35s var(--ease); }
.page-title { font-size: 26px; letter-spacing: -.02em; margin: 6px 0 12px; }
.card { background: var(--card); border-radius: var(--r); padding: 16px; box-shadow: var(--shadow); margin-bottom: 14px; }
.stack > * + * { margin-top: 10px; }

/* ---------- controls ---------- */
label { display: block; margin: 10px 0; font-size: 13px; color: var(--muted); }
input, select, button { font: inherit; color: var(--text); }
input, select { width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--card2);
  margin-top: 4px; outline: none; transition: border-color .15s; }
input:focus, select:focus { border-color: var(--accent); }
button, .button { display: inline-block; text-align: center; padding: 12px 16px; border-radius: 14px; border: 1px solid var(--line);
  background: var(--card); cursor: pointer; margin: 6px 0; color: var(--text); font-size: 16px; font-weight: 500;
  transition: transform .12s var(--ease), opacity .15s; }
button:active, .button:active { transform: scale(.97); }
button.primary { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: var(--accent-text);
  border: 0; width: 100%; font-weight: 650; box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 35%, transparent); }
button.danger { color: var(--danger); width: 100%; }
button.link { border: 0; background: none; color: var(--accent); padding: 6px 0; font-size: 15px; }
button:disabled { opacity: .4; box-shadow: none; }
.muted { color: var(--muted); font-size: 14px; margin: 0; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.row2 > .button, .row2 > button { width: 100%; }

/* ---------- month chips ---------- */
.chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 4px 0 12px; margin: 0 -16px; padding-inline: 16px; }
.chips::-webkit-scrollbar { display: none; }
.chips button { flex: none; margin: 0; padding: 7px 14px; border-radius: 99px; font-size: 14px; background: var(--card);
  border: 1px solid var(--line); color: var(--muted); }
.chips button.on { background: var(--text); color: var(--bg); border-color: var(--text); }

/* ---------- hero ring ---------- */
.hero { display: grid; grid-template-columns: 1fr; gap: 14px; padding: 20px; }
/* Wide screens: the ring on the left, everything else stacked on the right (without this the legend dropped under the ring) */
@media (min-width: 560px) {
  .hero { grid-template-columns: 220px 1fr; align-items: start; column-gap: 20px; row-gap: 6px; }
  .hero > .ring { grid-column: 1; grid-row: 1 / span 4; align-self: center; }
  .hero > :not(.ring) { grid-column: 2; }
}
.ring { position: relative; width: 220px; max-width: 100%; aspect-ratio: 1; margin: 0 auto; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 12; stroke-linecap: butt;
  transition: stroke-dasharray .9s var(--ease), stroke-dashoffset .9s var(--ease), opacity .2s; }
.ring circle.track { stroke: var(--card2); }
.ring circle.dim { opacity: .2; }
.ring circle.rest { stroke: var(--cat-rest); } /* "Everything else" slice */
.ring-center { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.ring-center strong { font-size: 32px; letter-spacing: -.03em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.ring-center strong.long { font-size: 26px; } .ring-center strong.xlong { font-size: 22px; } /* $1,000+ / $10,000+ fit inside the ring */
.ring-center small { color: var(--muted); font-size: 12px; }
.legend { display: grid; gap: 4px; }
.legend button { display: grid; grid-template-columns: 10px 1fr auto; align-items: center; gap: 10px; margin: 0;
  padding: 8px 10px; border: 0; border-radius: 12px; background: none; text-align: left; font-size: 15px; }
.legend button.on { background: var(--card2); }
.legend .dot { width: 10px; height: 10px; border-radius: 50%; }
.legend .amt { font-variant-numeric: tabular-nums; font-weight: 600; }
.legend .pct { color: var(--muted); font-size: 12px; margin-left: 6px; font-weight: 400; }
.legend .bar { grid-column: 2 / 4; height: 4px; border-radius: 4px; background: var(--card2); overflow: hidden; margin-top: -2px; }
.legend .bar i { display: block; height: 100%; width: 0; border-radius: 4px; transition: width .8s var(--ease); }

.section-head { display: flex; justify-content: space-between; align-items: baseline; margin: 22px 2px 4px; }

/* ---------- receipt list ---------- */
.list { list-style: none; padding: 0; margin: 0; }
.list > li { background: var(--card); border-radius: 16px; margin: 8px 0; box-shadow: var(--shadow); overflow: hidden;
  animation: rise .4s var(--ease) both; animation-delay: calc(var(--i, 0) * 40ms); }
.list .row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; width: 100%; margin: 0; border: 0;
  border-radius: 0; background: none; text-align: left; font-weight: 400; }
.avatar { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px;
  font-weight: 700; font-size: 16px; color: var(--text); background: color-mix(in srgb, var(--text) 9%, transparent); }
.list .meta { flex: 1; min-width: 0; }
.list .meta strong { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.list .meta small { color: var(--muted); font-size: 13px; }
.list .total { font-weight: 650; font-variant-numeric: tabular-nums; }
.stripe { display: flex; height: 4px; gap: 2px; margin-top: 6px; border-radius: 4px; overflow: hidden; }
.stripe i { display: block; height: 100%; }
.month-label { list-style: none; color: var(--muted); font-size: 13px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .06em; margin: 18px 4px 4px; }

/* expanded receipt = a paper slip */
.slip { display: none; margin: 0 14px 14px; padding: 14px 14px 22px; background: var(--paper); color: #2b2a26;
  font: 13px/1.6 ui-monospace, "SF Mono", Menlo, monospace; border-radius: 6px 6px 0 0; position: relative;
  -webkit-mask: radial-gradient(6px at 50% 100%, #0000 98%, #000) 50% / 14px 100% repeat-x; }
li.open .slip { display: block; animation: unroll .35s var(--ease); }
.slip .ln { display: grid; grid-template-columns: 8px 1fr auto; gap: 8px; align-items: center; }
.slip .ln .dot { width: 8px; height: 8px; border-radius: 50%; }
.slip .sum { border-top: 1px dashed #b9b4a6; margin-top: 8px; padding-top: 6px; font-weight: 700; }
.slip button { font: 600 13px system-ui, sans-serif; margin: 12px 0 0; padding: 6px 12px; border-radius: 10px;
  background: transparent; border: 1px solid #d9d3c3; color: #b91c1c; }

/* ---------- empty state ---------- */
.empty { text-align: center; padding: 30px 10px; }
.empty .muted { max-width: 300px; margin: 8px auto 20px; }
.empty .primary { max-width: 280px; }
.paper.demo { width: 120px; margin: 10px auto 22px; padding: 18px 16px 26px; background: var(--paper); border-radius: 6px 6px 0 0;
  transform: rotate(-4deg); box-shadow: var(--shadow); animation: float 4s ease-in-out infinite;
  -webkit-mask: radial-gradient(6px at 50% 100%, #0000 98%, #000) 50% / 14px 100% repeat-x; }
.paper.demo i { display: block; height: 6px; border-radius: 3px; background: #d9d3c3; margin: 8px 0; }
.paper.demo i:nth-child(1) { background: #22c55e; width: 70%; } .paper.demo i:nth-child(2) { background: #a78bfa; }
.paper.demo i:nth-child(3) { background: #38bdf8; width: 85%; } .paper.demo i.short { width: 45%; }

/* ---------- dock ---------- */
.dock { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(12px + env(safe-area-inset-bottom));
  width: min(440px, calc(100% - 20px)); display: grid; grid-template-columns: 1fr 1fr auto 1fr 1fr; align-items: end;
  padding: 6px 8px; column-gap: 2px; border-radius: 26px; z-index: 10;
  background: color-mix(in srgb, var(--card) 82%, transparent); backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4); box-shadow: 0 10px 30px rgb(0 0 0 / .18); border: 1px solid var(--line); }
.dock button { border: 0; background: none; margin: 0; padding: 6px 0; display: grid; justify-items: center; gap: 2px; color: var(--muted); }
.dock button span { font-size: 11px; }
.dock button.active { color: var(--accent); }
/* Center action: a raised tile plus a bold "Add receipt" label, so it reads as the main thing to do
   (an icon on its own was mistaken for "Spot" next to it). Labels line up along the bottom of the dock. */
.dock .fab { margin-top: -30px; padding: 0 5px 6px; gap: 3px; color: var(--text); }
.dock .fab-tile { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 19px; }
.dock .fab-tile svg { width: 28px; height: 28px; stroke-width: 2; }
.dock .fab .fab-label { font-weight: 700; white-space: nowrap; }
@media (max-width: 340px) { .dock button span { font-size: 10px; } } /* 320px phones: keep labels apart */

/* ---------- scan sheet ---------- */
.sheet { position: fixed; inset: 0; z-index: 20; }
.sheet .scrim { position: absolute; inset: 0; background: rgb(0 0 0 / .45); animation: fade .25s; }
.sheet .panel { position: absolute; left: 0; right: 0; bottom: 0; max-width: 720px; margin: 0 auto; max-height: 92vh;
  overflow-y: auto; background: var(--bg); border-radius: 24px 24px 0 0; padding: 8px 16px calc(20px + env(safe-area-inset-bottom));
  animation: up .35s var(--ease); overscroll-behavior: contain; }
.sheet.closing .panel { animation: down .25s ease-in forwards; } .sheet.closing .scrim { animation: fade .25s reverse forwards; }
.grab { width: 40px; height: 5px; border-radius: 3px; background: var(--line); margin: 4px auto 10px; }
.panel-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.drop { display: grid; justify-items: center; gap: 4px; text-align: center; padding: 26px 16px; border-radius: var(--r);
  border: 2px dashed color-mix(in srgb, var(--accent) 40%, var(--line)); background: color-mix(in srgb, var(--accent) 6%, var(--card));
  color: var(--text); cursor: pointer; margin: 0; }
.drop span:last-child { color: var(--muted); font-size: 13px; }
.drop-icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 18px; margin-bottom: 6px;
  color: var(--accent-text); background: linear-gradient(135deg, var(--accent), var(--accent-2)); }
.drop-icon svg { width: 28px; height: 28px; }
.thumbs { display: flex; gap: 10px; overflow-x: auto; margin: 12px 0; padding-top: 8px; }
.thumbs:empty { display: none; }
.thumbs div { position: relative; flex: none; border-radius: 10px; overflow: hidden; animation: pop .3s var(--ease); }
.thumbs img { display: block; width: 76px; height: 104px; object-fit: cover; }
.thumbs button { position: absolute; top: 4px; right: 4px; margin: 0; padding: 0; width: 22px; height: 22px; border-radius: 50%;
  border: 0; background: rgb(0 0 0 / .6); color: #fff; font-size: 14px; line-height: 22px; }
/* scanning beam while the receipt is being read */
.thumbs.scanning div::after { content: ""; position: absolute; left: 0; right: 0; height: 30%; top: -30%;
  background: linear-gradient(transparent, color-mix(in srgb, var(--accent-2) 70%, transparent), transparent);
  animation: beam 1.4s ease-in-out infinite; }
.thumbs.scanning div:nth-child(2)::after { animation-delay: .2s; } .thumbs.scanning div:nth-child(3)::after { animation-delay: .4s; }
.thumbs.scanning button { display: none; }
.status { color: var(--muted); min-height: 1.4em; font-size: 14px; text-align: center; }
.status.error { color: var(--danger); }

/* review lines as cards */
.items { display: grid; gap: 8px; margin: 6px 0; }
.item { display: grid; grid-template-columns: 1fr 96px 28px; gap: 6px 8px; align-items: center; padding: 10px;
  background: var(--card); border-radius: 14px; border-left: 4px solid var(--c, var(--line));
  animation: rise .35s var(--ease) both; animation-delay: calc(var(--i, 0) * 35ms); }
.item input, .item select { margin: 0; padding: 7px 9px; font-size: 15px; }
.item .amt { text-align: right; font-variant-numeric: tabular-nums; }
.item .cat { grid-column: 1 / 2; font-size: 13px; padding: 5px 9px; width: auto; justify-self: start; border-radius: 99px;
  background: color-mix(in srgb, var(--c) 16%, var(--card)); border-color: transparent; color: var(--text); }
.item small { grid-column: 2 / 4; text-align: right; color: var(--muted); font-size: 11px; font-family: ui-monospace, monospace;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item .x { grid-row: 1; grid-column: 3; border: 0; background: none; padding: 0; margin: 0; color: var(--muted); }
.item .x svg { width: 18px; height: 18px; }
.check { font-weight: 600; font-size: 14px; padding: 10px 12px; border-radius: 12px; margin: 8px 0; }
.check.ok { color: var(--ok); background: color-mix(in srgb, var(--ok) 12%, transparent); }
.check.bad { color: var(--warn); background: color-mix(in srgb, var(--warn) 12%, transparent); }
.sticky-actions { position: sticky; bottom: calc(-20px - env(safe-area-inset-bottom)); background: var(--bg);
  padding: 8px 0 calc(8px + env(safe-area-inset-bottom)); margin: 0 -2px; }

/* ---------- toast ---------- */
.toast { position: fixed; left: 50%; bottom: calc(100px + env(safe-area-inset-bottom)); z-index: 30;
  transform: translate(-50%, 20px); opacity: 0; pointer-events: none; padding: 10px 16px; border-radius: 14px;
  background: var(--text); color: var(--bg); font-size: 14px; font-weight: 500; transition: .3s var(--ease); white-space: nowrap; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
/* Over the open camera (e.g. "Photo removed · Undo"), and above the shutter row */
.toast { z-index: 60; }
body:has(.camview:not([hidden])) .toast { bottom: calc(170px + env(safe-area-inset-bottom)); }

/* ---------- motion ---------- */
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }
@keyframes pop { from { opacity: 0; transform: scale(.85); } }
@keyframes fade { from { opacity: 0; } }
@keyframes up { from { transform: translateY(100%); } }
@keyframes down { to { transform: translateY(100%); } }
@keyframes unroll { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes beam { to { top: 100%; } }
@keyframes float { 50% { transform: rotate(-2deg) translateY(-6px); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- category icons ---------- */
.cat-ic { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; color: var(--c);
  background: color-mix(in srgb, var(--c) 18%, transparent); }
.cat-ic svg { width: 17px; height: 17px; stroke-width: 2; }
.mini-ic { display: inline-grid; place-items: center; width: 18px; height: 18px; color: var(--c); flex: none; }
.mini-ic svg { width: 15px; height: 15px; stroke-width: 2; }
.legend button { grid-template-columns: 30px 1fr auto; }
.legend .bar { grid-column: 2 / 4; }
.slip .ln { grid-template-columns: 18px 1fr auto; }
.slip .mini-ic { color: color-mix(in srgb, var(--c) 75%, #000); }
.cat-wrap { grid-column: 1 / 2; display: flex; align-items: center; gap: 4px; }
.cat-wrap .cat { grid-column: auto; }

/* ---------- activity card + search ---------- */
.activity { padding: 6px 14px 8px; }
.activity .section-head { margin: 4px 0 2px; align-items: center; }
.activity .list > li { box-shadow: none; background: var(--card2); }
.icon-btn.flat { box-shadow: none; background: var(--card2); width: 36px; height: 36px; }
.icon-btn.flat svg { width: 18px; height: 18px; }
.search { display: flex; align-items: center; gap: 8px; margin: 6px 0 4px; padding: 0 12px; border-radius: 12px;
  background: var(--card2); border: 1px solid var(--line); color: var(--muted); animation: rise .25s var(--ease); }
.search[hidden] { display: none; }
.search:focus-within { border-color: var(--accent); }
.search svg { width: 18px; height: 18px; flex: none; }
.search input { border: 0; background: none; margin: 0; padding: 11px 0; }
/* Ask AI sparkle at the end of Home search */
.ask-icon { flex: none; display: grid; place-items: center; width: 34px; height: 34px; margin: 0 -6px 0 0; padding: 0;
  border: 0; border-radius: 10px; background: none; color: var(--accent); }
.ask-icon svg { width: 20px; height: 20px; }
.search.ask-mode .ask-icon { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.search.ask-mode { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 5%, var(--card2)); }
.see-all { display: block; width: 100%; text-align: center; }
.none { text-align: center; padding: 14px 0; }
.hits { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 4px; font-size: 12px; color: var(--muted); }
.hits > span { display: inline-flex; align-items: center; gap: 3px; }
.hits b { color: var(--text); font-weight: 600; }

/* ---------- category page ---------- */
.back { display: inline-flex; align-items: center; gap: 2px; border: 0; background: none; color: var(--accent);
  padding: 4px 0; margin: 0 0 6px; font-size: 15px; }
.back svg { width: 20px; height: 20px; }
.cat-hero { position: relative; overflow: hidden; padding: 18px; }
.cat-hero::before { content: ""; position: absolute; inset: 0 0 auto; height: 110px; pointer-events: none;
  background: linear-gradient(180deg, color-mix(in srgb, var(--c, var(--accent)) 22%, transparent), transparent); }
.cat-hero > * { position: relative; }
.cat-head { display: flex; align-items: center; gap: 12px; }
.cat-head h2 { font-size: 20px; } .cat-head small { color: var(--muted); font-size: 13px; }
.cat-ic.big { width: 48px; height: 48px; border-radius: 14px; }
.cat-ic.big svg { width: 26px; height: 26px; }
.cat-total { display: block; font-size: 36px; letter-spacing: -.03em; margin: 12px 0 8px; font-variant-numeric: tabular-nums; }
.chips.small { margin: 0; padding: 0 0 12px; }
.chips.small button { padding: 5px 12px; font-size: 13px; }
.stores { display: grid; gap: 6px; }
.store-pill { position: relative; display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 12px; background: var(--card2); overflow: hidden; font-size: 15px; }
.store-pill i { position: absolute; left: 0; bottom: 0; height: 3px; background: var(--c, var(--accent)); border-radius: 3px; }
.store-pill b { font-variant-numeric: tabular-nums; }
.avatar.sm { width: 26px; height: 26px; border-radius: 8px; font-size: 12px; }
#cat-items .meta small code { font-size: 11px; opacity: .8; }
.chev { width: 16px; height: 16px; color: var(--muted); transform: rotate(180deg); flex: none; }
#donut [data-cat] { cursor: pointer; }

/* ---------- receipt viewer ---------- */
.rs-body .slip { display: block; margin: 4px 0 10px; animation: unroll .4s var(--ease); }
.slip-head { display: flex; justify-content: space-between; border-bottom: 1px dashed #b9b4a6; padding-bottom: 6px; margin-bottom: 6px; }
.slip .ln.mark { background: #fde68a; margin: 0 -8px; padding: 2px 8px; border-radius: 6px;
  animation: flash 1.2s ease-out 2; }
@keyframes flash { 50% { background: #fcd34d; } }

/* ---------- receipt photos ---------- */
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 12px; background: var(--card2); margin-bottom: 10px; }
.seg button { margin: 0; padding: 8px; border: 0; border-radius: 9px; background: none; color: var(--muted); font-size: 14px; }
.seg button.on { background: var(--seg-on); color: var(--text); box-shadow: var(--shadow); font-weight: 600; }
.slip-actions { display: flex; justify-content: space-between; gap: 8px; }
.slip .photo-btn { color: #047857; border-color: #c6e6d8; }
.photos { display: grid; gap: 8px; }
.photos img { display: block; width: 100%; border-radius: 10px; background: #fff; cursor: zoom-in; animation: rise .3s var(--ease); }
.hint { text-align: center; margin: 0 0 8px; font-size: 13px; }
.attach { width: 100%; margin-top: 10px; }
.attach.primary { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: var(--accent-text); border: 0; font-weight: 650; }
.no-photo { display: grid; justify-items: center; text-align: center; gap: 6px; padding: 24px 8px; }
.no-photo .muted { max-width: 280px; margin-bottom: 6px; }
.viewer { position: fixed; inset: 0; z-index: 40; background: #fff; overflow: auto; touch-action: pinch-zoom pan-x pan-y;
  animation: fade .2s; }
.viewer img { display: block; width: 100%; min-height: 100%; object-fit: contain; }
.viewer .icon-btn { position: fixed; top: calc(12px + env(safe-area-inset-top)); right: 12px; z-index: 1;
  background: rgb(0 0 0 / .6); color: #fff; }

/* ---------- sign in ---------- */
.auth { position: fixed; inset: 0; z-index: 50; overflow-y: auto; background: var(--bg);
  display: grid; place-items: center; padding: calc(24px + env(safe-area-inset-top)) 20px calc(24px + env(safe-area-inset-bottom)); }
.auth::before { content: ""; position: fixed; inset: -30vh -30vw auto; height: 80vh; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--accent-2) 14%, transparent), transparent); }
.auth-card { position: relative; width: 100%; max-width: 380px; text-align: center; }
.auth-card > div:not(.auth-art) { animation: rise .4s var(--ease); }
.auth-art { height: 150px; margin-bottom: 4px; }
.auth-art .paper.demo { margin: 0 auto; }
.auth h1 { font-size: 26px; letter-spacing: -.02em; margin: 14px 0 6px; }
.auth .muted { margin: 0 auto 22px; max-width: 320px; }
.logo.big { width: 52px; height: 52px; border-radius: 16px; font-size: 24px; margin: 0 auto; }
.auth input[type="email"] { padding: 14px 16px; font-size: 17px; border-radius: 14px; text-align: center; margin: 0 0 10px; }
.auth .primary { padding: 14px; }
.auth-msg { min-height: 1.4em; margin: 14px 0 0; color: var(--danger); font-size: 14px; }
.auth-links { display: flex; justify-content: space-between; margin-top: 16px; }
.auth-links .link { font-size: 14px; }
.auth-links .link:disabled { color: var(--muted); opacity: 1; }
.dev-note { font-size: 13px; color: var(--warn); background: color-mix(in srgb, var(--warn) 12%, transparent);
  padding: 10px 12px; border-radius: 12px; margin: 16px 0 0; }

/* 6 boxes drawn over one real input, so iOS can autofill the code from Mail */
.otp { position: relative; display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin: 0; color: var(--text); }
.otp input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; margin: 0; font-size: 16px; caret-color: transparent; }
.otp span { display: grid; place-items: center; height: 56px; border-radius: 14px; background: var(--card); border: 1.5px solid var(--line);
  font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; transition: border-color .15s, transform .15s var(--ease); }
.otp span:not(:empty) { border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); animation: pop .2s var(--ease); }
.otp span.cur { border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent); }
.otp.shake { animation: shake .35s; }
@keyframes shake { 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }

/* ---------- account card ---------- */
.account { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 12px; }
.account strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account button { margin: 0; padding: 8px 14px; font-size: 14px; }

/* app icon image used as the logo */
img.logo { display: block; background: none; object-fit: cover; box-shadow: 0 2px 8px rgb(0 0 0 / .25); }
.app-icon { display: block; width: 112px; height: 112px; border-radius: 26px; margin: 0 auto 8px;
  box-shadow: 0 16px 40px rgb(0 0 0 / .35), 0 0 0 1px rgb(255 255 255 / .06); animation: float 5s ease-in-out infinite; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .app-icon { box-shadow: 0 16px 40px rgb(0 0 0 / .5), 0 0 0 1px rgb(255 255 255 / .14); } }
:root[data-theme="dark"] .app-icon { box-shadow: 0 16px 40px rgb(0 0 0 / .5), 0 0 0 1px rgb(255 255 255 / .14); }
.r-photos { display: flex; gap: 6px; overflow-x: auto; }
.r-photos:empty { display: none; }
.r-photos img { width: 44px; height: 60px; object-fit: cover; border-radius: 6px; border: 1px solid var(--line); flex: none; }

/* ---------- items spotted in stores ---------- */
#scan-mode { margin-bottom: 12px; }
.thumb { position: relative; flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 12px;
  overflow: hidden; background: color-mix(in srgb, var(--c) 16%, var(--card2)); }
.thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.thumb img:not([src]) { display: none; }
.bought { display: inline-block; margin-top: 4px; padding: 2px 8px; border-radius: 99px; font-size: 12px; font-weight: 600;
  color: var(--muted); background: var(--card2); }
.bought.ok { color: var(--ok); background: color-mix(in srgb, var(--ok) 14%, transparent); }
.spot-photos { display: flex; gap: 8px; overflow-x: auto; margin-bottom: 12px; }
.spot-photos img { height: 160px; border-radius: 12px; flex: none; cursor: zoom-in; background: #fff; }
.price-hint { font-size: 14px; padding: 10px 12px; border-radius: 12px; margin: 0 0 12px;
  color: var(--warn); background: color-mix(in srgb, var(--warn) 12%, transparent); }
.sub-head { margin: 4px 2px 6px; }
.buys > li { box-shadow: none; background: var(--card); }
.details { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 16px 2px; font-size: 14px; }
.details dt { color: var(--muted); }
.details dd { margin: 0; }
.slip .edit { color: #334155; }
.sync-status { grid-column: 1 / -1; font-size: 12px; margin: 0; }

/* Bottom bar in the same neutral style as the month chips (no teal accent) */
.dock button.active { color: var(--text); }
/* Selected tab: the icon turns solid, on the same small highlight as before */
.dock { --cut: color-mix(in srgb, var(--text) 10%, var(--card)); }
.dock button.active svg { background: var(--card2); border-radius: 10px; padding: 3px 10px; box-sizing: content-box; margin: -3px -10px; }
.dock .ic-fill { display: none; }
.dock button.active .ic-line { display: none; }
.dock button.active .ic-fill { display: block; animation: pop .3s var(--ease); }
.dock .fab-tile { background: var(--text); color: var(--bg);
  box-shadow: 0 8px 22px rgb(0 0 0 / .28), 0 0 0 5px var(--bg); }

/* Main buttons in the same neutral style as the bottom bar's scan button */
button.primary, .attach.primary { background: var(--text); color: var(--bg);
  box-shadow: 0 6px 18px rgb(0 0 0 / .18); }
.drop-icon { background: var(--text); color: var(--bg); }
.drop { border-color: color-mix(in srgb, var(--text) 25%, var(--line)); background: var(--card); }

/* Spotted row badges: wrap neatly on their own line */
.badges { display: flex; flex-wrap: wrap; gap: 4px 6px; margin-top: 4px; }
.badges .bought { margin: 0; }
.bought.pricedrop { color: var(--warn); background: color-mix(in srgb, var(--warn) 14%, transparent); }
.price-hint strong { display: block; margin-bottom: 4px; font-size: 15px; }
.paste-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin: 10px 0 0;
  background: var(--card); font-size: 15px; }
.paste-btn svg { width: 18px; height: 18px; }

/* Home: search on top; "All time" pinned on the left, months scroll beside it */
#home-search { margin: 4px 0 10px; }
.month-row { display: flex; align-items: center; gap: 8px; margin: 0 -16px; padding: 0 16px 12px; }
.month-row .chips { flex: 1; min-width: 0; margin: 0; padding: 4px 0;
  -webkit-mask: linear-gradient(90deg, #000 calc(100% - 24px), transparent); mask: linear-gradient(90deg, #000 calc(100% - 24px), transparent); }
.all-time { flex: none; margin: 0; padding: 7px 14px; border-radius: 99px; font-size: 14px; background: var(--card);
  border: 1px solid var(--line); color: var(--muted); }
.all-time.on { background: var(--text); color: var(--bg); border-color: var(--text); }
#tab-home.searching .hero, #tab-home.searching .month-row { display: none; }
#tab-home.asking .activity { display: none; }

/* Ask AI answer in Home search (static: no loading animation) */
button.ask-go { position: relative; display: block; width: 100%; margin: 2px 0 8px; padding: 10px 14px 10px 38px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--card); color: var(--text); font-size: 14px;
  font-weight: 500; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* .link.ask-go: outranks the 44px tap-area rule for button.link::before further down, which would stretch the sparkle */
button.link.ask-go::before { content: ""; position: absolute; left: 13px; top: 50%; width: 16px; height: 16px; margin-top: -8px; transform: none;
  background: var(--accent); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 3l1.9 6.1L18 11l-6.1 1.9L10 19l-1.9-6.1L2 11l6.1-1.9zM19 2l.8 2.2L22 5l-2.2.8L19 8l-.8-2.2L16 5l2.2-.8z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 3l1.9 6.1L18 11l-6.1 1.9L10 19l-1.9-6.1L2 11l6.1-1.9zM19 2l.8 2.2L22 5l-2.2.8L19 8l-.8-2.2L16 5l2.2-.8z'/%3E%3C/svg%3E") center / contain no-repeat; }
.ask-go[hidden], .ask[hidden] { display: none; }
.ask { margin-top: 6px; }
.ask-q { margin: 0 0 6px; color: var(--muted); font-size: 13px; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.ask-q + .muted:last-child { margin: 2px 0 0; color: var(--text); font-size: 15px; } /* thinking / offline / error */
.ask-head { display: block; font-size: 28px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ask-head.is-text { font-size: 20px; line-height: 1.25; margin-top: 2px; }
.ask-sub { margin: 2px 0 0; font-size: 14px; }
.ask-label { margin: 10px 0 0; font-size: 14px; }
.ask-label b { font-weight: 600; }
.ask-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ask-chips span { padding: 3px 9px; border-radius: 99px; background: var(--card2); color: var(--muted); font-size: 12px; }
.ask-bd { list-style: none; padding: 0; margin: 10px 0 0; }
.ask-bd li { position: relative; display: flex; align-items: baseline; gap: 8px; padding: 7px 0 12px; border-top: 1px solid var(--line); font-size: 14px; }
.ask-bd li::after { content: ""; position: absolute; left: 0; bottom: 5px; width: var(--w, 0%); height: 3px; border-radius: 2px;
  background: color-mix(in srgb, var(--accent-2) 55%, transparent); }
.ask-bd li span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ask-bd b { font-variant-numeric: tabular-nums; font-weight: 600; }
.ask-rows > li { box-shadow: none; background: var(--card2); }
.ask-ai { margin-top: 8px; font-size: 12px; }
/* Search fields: a quiet clear button instead of the browser's blue one */
input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; width: 16px; height: 16px;
  margin-left: 6px; cursor: pointer; background: var(--muted);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 6l12 12M18 6L6 18' stroke='%23000' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 6l12 12M18 6L6 18' stroke='%23000' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; }

/* Receipts: search + sort side by side */
.list-tools { display: flex; gap: 8px; align-items: stretch; margin-bottom: 4px; }
.list-tools .search { flex: 1; min-width: 0; margin: 6px 0 4px; }
.sort-pick { position: relative; flex: none; display: flex; align-items: center; gap: 6px; margin: 6px 0 4px; padding: 0 12px;
  border-radius: 12px; background: var(--card2); border: 1px solid var(--line); color: var(--text); font-size: 14px; font-weight: 600; }
.sort-pick svg { width: 16px; height: 16px; color: var(--muted); }
.sort-pick select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; margin: 0; cursor: pointer; }

/* Month range: Range chip on Home, date filter on Receipts */
.range-chip { display: inline-flex; align-items: center; gap: 6px; }
.range-chip svg { width: 15px; height: 15px; }
.list-tools { justify-content: flex-start; }
.list-tools .sort-pick { padding: 9px 12px; }
#rangesheet .panel { padding-bottom: calc(28px + env(safe-area-inset-bottom)); }
#download-all { margin-top: 4px; }

/* ---------- category page: stats, chart, products ---------- */
.cat-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 4px 0 14px; }
.cat-stats div { min-width: 0; container-type: inline-size; padding: 10px; border-radius: 12px; background: color-mix(in srgb, var(--text) 6%, transparent); }
.cat-stats strong { display: block; font-size: min(17px, 15cqi); white-space: nowrap; font-variant-numeric: tabular-nums; } /* shrinks with the tile so $10,000+ fits */
.cat-stats small { color: var(--muted); font-size: 11px; }
.cat-chart { display: flex; align-items: flex-end; gap: 4px; height: 96px; }
.cat-chart:empty { display: none; }
.cat-chart button { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px;
  margin: 0; padding: 0; border: 0; background: none; min-width: 0; }
.cat-chart i { display: block; width: 100%; max-width: 26px; border-radius: 6px 6px 3px 3px; background: var(--c); opacity: .85;
  animation: grow .6s var(--ease) both; transform-origin: bottom; }
.cat-chart button.dim i { opacity: .25; }
.cat-chart button.on i { opacity: 1; box-shadow: 0 0 0 2px var(--text); }
.cat-chart small { font-size: 10px; color: var(--muted); }
@keyframes grow { from { transform: scaleY(0); } }
.store-pill small { font-weight: 400; font-size: 12px; }
#cat-view { margin: 4px 0 4px; }
.cat-hint { text-align: center; margin: 6px 0; font-size: 13px; }
.group-share { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: conic-gradient(var(--c) calc(var(--p) * 1%), var(--card2) 0); }
.group-share b { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--card); font-size: 9px; letter-spacing: -.02em; }
li.group .chev { transform: rotate(270deg); transition: transform .2s; }
li.group.open .chev { transform: rotate(90deg); }
.group-lines { margin: 0 10px 10px; }
.group-lines > li { box-shadow: none; background: var(--card2); margin: 6px 0; }
.group-lines .avatar { width: 30px; height: 30px; font-size: 13px; border-radius: 9px; }

/* Move lines to another category */
.move-to { display: flex; align-items: center; gap: 8px; margin: 0 12px 12px; font-size: 13px; color: var(--muted); }
.move-to select { width: auto; flex: 1; margin: 0; padding: 6px 8px; font-size: 13px; }

/* ---------- Settings: grouped list rows ---------- */
.account { grid-template-columns: 40px 1fr auto; }
.account small { display: block; font-size: 12px; margin-top: 2px; }
.set-head { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: 20px 4px 8px; }
.set-list { background: var(--card); border-radius: var(--r); box-shadow: var(--shadow); overflow: hidden; margin-bottom: 14px; }
.set-row { position: relative; display: flex; align-items: center; gap: 10px; width: 100%; margin: 0; padding: 14px 16px; border: 0;
  border-radius: 0; background: none; color: var(--text); font-size: 16px; font-weight: 400; text-align: left; cursor: pointer; }
.set-row + .set-row { border-top: 1px solid var(--line); }
.set-row .chev { margin-left: auto; }
.set-val { margin-left: auto; color: var(--muted); font-variant-numeric: tabular-nums; }
.set-val + .chev { margin-left: 0; }
.set-row select { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.danger-row { justify-content: center; color: var(--danger); font-weight: 600; }
.account { grid-template-columns: 40px minmax(0, 1fr) auto; }
.account button { white-space: nowrap; }

/* Delete confirmation */
.danger-fill { background: var(--danger); color: #fff; border: 0; font-weight: 650; }
.danger-fill:disabled { opacity: .35; }
.del-what { font-size: 15px; line-height: 1.5; margin: 0 0 12px; }
#del-backup { width: 100%; margin-bottom: 8px; }
#del-type { font-size: 18px; letter-spacing: .1em; text-transform: uppercase; }
#del-go { width: 100%; margin-top: 4px; }
#delsheet .panel { padding-bottom: calc(28px + env(safe-area-inset-bottom)); }

/* ---------- iOS-style navigation ---------- */
.nav-back { display: flex; align-items: center; gap: 2px; margin: 0 0 0 -8px; padding: 6px 8px; border: 0; background: none;
  color: var(--text); font-size: 17px; font-weight: 500; max-width: 70%; }
.nav-back span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-back svg { width: 24px; height: 24px; flex: none; stroke-width: 2.2; }
.top { min-height: calc(52px + env(safe-area-inset-top)); }
.tab.push-in { animation: pushIn .32s var(--ease); }
.tab.pop-in { animation: popIn .28s var(--ease); }
@keyframes pushIn { from { transform: translateX(40%); opacity: 0; } }
@keyframes popIn { from { transform: translateX(-25%); opacity: .4; } }
.grab { padding: 6px 0; margin: -2px auto 8px; background-clip: content-box; height: 17px; cursor: grab; }

/* Offline pill under the status bar */
.offline { position: sticky; top: 0; z-index: 15; margin: 0 auto; width: fit-content; padding: calc(4px + env(safe-area-inset-top)) 12px 4px;
  font-size: 12px; font-weight: 600; color: var(--bg); background: var(--muted); border-radius: 0 0 12px 12px; }

/* Toast with an action (Undo) */
.toast.has-action { pointer-events: auto; display: flex; align-items: center; gap: 14px; padding: 8px 8px 8px 16px; }
.toast button { margin: 0; padding: 6px 12px; border: 0; border-radius: 10px; font-size: 14px; font-weight: 700;
  background: color-mix(in srgb, var(--bg) 18%, transparent); color: var(--bg); }

/* Launch: legal links, bot check, owner-only settings */
.auth-legal { margin: 14px 0 0; font-size: 12px; line-height: 1.5; color: var(--muted); }
.auth-legal a { color: inherit; text-decoration: underline; }
.auth-human { display: flex; justify-content: center; margin-top: 8px; }
.auth-human:empty { display: none; }
a.set-row { box-sizing: border-box; text-decoration: none; }
body:not(.is-owner) .owner-only { display: none; }

/* Consent screen */
.check { display: flex; align-items: flex-start; gap: 12px; margin: 14px 0; text-align: left; font-size: 15px; line-height: 1.45; cursor: pointer; }
.check input { flex: none; width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--text); }
.check a { color: inherit; }
#consent .primary { width: 100%; margin-top: 8px; }
#consent-out { margin-top: 4px; font-size: 14px; }

/* ---------- feels like an app ---------- */
html { touch-action: manipulation; overscroll-behavior: none; -webkit-text-size-adjust: 100%; } /* no double-tap zoom or bounce */
body { overscroll-behavior: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
input, textarea, select, [contenteditable] { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }
img { -webkit-user-drag: none; }
.viewer, .viewer * { -webkit-touch-callout: default; } /* long-press a receipt photo to save or share it */

/* In-app camera */
.camview { position: fixed; inset: 0; z-index: 45; background: #000; color: #fff; /* no entrance animation: it appears full size at once */
  touch-action: none; }
.camview.closing { animation: down .22s ease-in forwards; }
.camview video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .25s; }
.camview.live video { opacity: 1; }
.cam-flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
.camview.flash .cam-flash { animation: flash .25s; }
@keyframes flash { 0% { opacity: .85; } 100% { opacity: 0; } }
.cam-top, .cam-bottom { position: absolute; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; }
.cam-top { top: calc(env(safe-area-inset-top) + 10px); }
.cam-bottom { bottom: calc(env(safe-area-inset-bottom) + 28px); }
.cam-btn, .cam-spacer { width: 44px; height: 44px; }
.cam-btn { display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: rgb(0 0 0 / .45); color: #fff; }
.cam-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cam-grab { width: 40px; height: 5px; border-radius: 3px; background: rgb(255 255 255 / .6); } /* hints: slide down to close */
.shutter { width: 74px; height: 74px; padding: 0; border-radius: 50%; border: 4px solid #fff; background: #fff;
  box-shadow: inset 0 0 0 3px #000; transition: transform .1s; }
.shutter:active { transform: scale(.92); }
.shutter:disabled { opacity: .4; }
.cam-msg { position: absolute; left: 0; right: 0; top: calc(env(safe-area-inset-top) + 66px); margin: 0 auto; width: fit-content;
  max-width: calc(100% - 48px); padding: 6px 14px; border-radius: 16px; background: rgb(0 0 0 / .5); font-size: 15px; text-align: center; }
.cam-native { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 12px 22px; border: 0; border-radius: 14px;
  background: #fff; color: #000; font-weight: 600; }
.camview video { transform-origin: center; }
.cam-zoom { position: absolute; left: 50%; bottom: calc(env(safe-area-inset-bottom) + 118px); transform: translateX(-50%);
  min-width: 52px; padding: 6px 12px; border: 0; border-radius: 16px; background: rgb(0 0 0 / .55); color: #ffd60a;
  font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---------- Family (structure only; the designer polishes) ---------- */
.top-actions { display: flex; align-items: center; gap: 8px; }
#family-btn { position: relative; }
#family-btn .ic-fill, #family-btn.on .ic-line { display: none; }
#family-btn.on .ic-fill { display: block; }
#family-btn.on { background: var(--card2); color: var(--text); }
#family-btn.on.has-dot::after { box-shadow: 0 0 0 2px var(--card2); }
#family-btn.has-dot::after { content: ""; position: absolute; top: 7px; right: 7px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 0 2px var(--card); }
/* Header switch (in a family): Just me | Family. The selected icon turns solid, like the bottom bar's tabs. */
.scope-pill { display: flex; gap: 2px; height: 40px; padding: 3px; border: 1px solid var(--line); border-radius: 99px; background: var(--card2); }
.scope-pill button { position: relative; display: grid; place-items: center; width: 34px; height: 32px; margin: 0; padding: 0;
  border: 0; border-radius: 99px; background: none; color: var(--muted); }
.scope-pill button svg { width: 20px; height: 20px; }
.scope-pill .ic-fill, .scope-pill button.on .ic-line, .scope-pill button.page .ic-line { display: none; }
.scope-pill button.on .ic-fill, .scope-pill button.page .ic-fill { display: block; }
.scope-pill button.on, .scope-pill button.page { color: var(--text); } /* selected = solid icon, no circle behind it */
.scope-pill button::before { content: ""; position: absolute; inset: -6px -1px; } /* 44px-tall tap area, no overlap */
.manage-fam[hidden] { display: none; }
.set-row .fam-ic { width: 20px; height: 20px; color: var(--muted); flex: none; }
.scope-pill button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.by-badge { display: none; } /* the "priya · Oct 7" line under the store already says who added it */
.lock-ic { width: 12px; height: 12px; color: var(--muted); vertical-align: -1px; margin-left: 4px; }
.view-only { font-size: 13px; align-self: center; }

/* Private switch (receipt sheet) */
.toggle { -webkit-appearance: none; appearance: none; position: relative; flex: none; width: 46px; height: 28px; margin: 0 0 0 auto; padding: 0;
  border: 0; border-radius: 99px; background: color-mix(in srgb, var(--text) 16%, var(--card)); cursor: pointer; transition: background .2s; }
.toggle::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 3px rgb(0 0 0 / .3); transition: transform .2s var(--ease); }
.toggle:checked { background: var(--accent-2); }
.toggle:checked::after { transform: translateX(18px); }
.toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.priv-row .ic { width: 20px; height: 20px; color: var(--muted); flex: none; }
.priv-row .meta { display: grid; gap: 1px; }
.priv-row .meta small { color: var(--muted); font-size: 13px; }

/* Family page */
.fam-tile { display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: var(--card2); color: var(--text); }
.fam-tile svg { width: 28px; height: 28px; }
.fam-empty h2 { margin: 14px 0 6px; }
.fam-spend { display: grid; gap: 8px; }
.fam-total { font-size: 28px; font-weight: 700; font-variant-numeric: tabular-nums; }
.fam-member-spend { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 4px 10px; font-size: 15px; }
.fam-member-spend b { font-variant-numeric: tabular-nums; font-weight: 600; }
.fam-member-spend .bar { grid-column: 2 / 4; height: 3px; border-radius: 3px; background: var(--card2); overflow: hidden; }
.fam-member-spend .bar i { display: block; height: 100%; border-radius: 3px; background: color-mix(in srgb, var(--accent-2) 55%, transparent); }
.fam-spend .link { justify-self: start; margin: 0; padding: 4px 0 0; }
.fam-row .meta { display: grid; gap: 1px; flex: 1; min-width: 0; text-align: left; }
.fam-row .meta small, .fam-inv .meta small { color: var(--muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; }
.fam-inv .meta { display: grid; gap: 1px; flex: 1; min-width: 0; }
.fam-inv .icon-btn { width: 32px; height: 32px; box-shadow: none; background: none; }
.pill { flex: none; padding: 2px 8px; border-radius: 99px; background: var(--card2); color: var(--muted); font-size: 12px; font-weight: 600; }
.fam-invite-form input { flex: 1; min-width: 0; margin: 0; }
.fam-invite-form button { flex: none; margin: 0; }
.fam-help { margin: -6px 4px 14px; font-size: 13px; }
.fam-invite p { margin: 0 0 6px; }
.fam-note p { margin: 0 0 10px; }
.fam-or { text-align: center; margin: 14px 0 0; }
.fam-or .link { padding: 0; margin: 0; font-size: inherit; }

/* Family consent, prescription prompt */
.fam-consent { text-align: center; }
.fam-consent h2 { font-size: 22px; font-weight: 700; margin: 12px 0 6px; }
.fc-members { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 12px; margin: 0 0 14px; }
.fc-member { display: inline-flex; align-items: center; gap: 6px; }
.fc-shared { text-align: left; }
.fc-row { display: flex; align-items: center; gap: 8px; margin: 6px 0; }
.fc-row svg { width: 18px; height: 18px; flex: none; }
.fc-note { font-size: 13px; margin-top: 8px; }
.fc-check { text-align: left; font-weight: 400; }
.choice { margin: 0 0 14px; padding: 0; border: 0; text-align: left; }
.choice[hidden] { display: none; }
.choice .set-head { padding: 0; }
.choice-row { display: flex; align-items: flex-start; gap: 12px; margin: 0; padding: 12px 14px; background: var(--card); color: var(--text); font-size: 15px; cursor: pointer; }
.choice-row:first-of-type { border-radius: var(--r) var(--r) 0 0; }
.choice-row:last-of-type { border-radius: 0 0 var(--r) var(--r); border-top: 1px solid var(--line); }
.choice-row input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--text); }
.choice-row span { display: grid; gap: 2px; }
.choice-row b { font-weight: 600; }
.choice-row small { color: var(--muted); font-size: 13px; }
.choice-row:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: -2px; }
#fc-go:disabled { opacity: .4; }
.rx-note { font-size: 13px; }

/* ---------- Tap targets ----------
   Small controls (round header icons, the Ask sparkle, pills, Back, switches) get an invisible hit area of at least
   44px, the size fingers need, without changing how they look. ::before, because some of these use ::after. */
.icon-btn, .ask-icon, .nav-back, .chips button, .all-time, .seg button, .sort-pick, .toggle,
.slip-actions button, button.link { position: relative; }
.icon-btn::before, .ask-icon::before, .nav-back::before, .chips button::before, .all-time::before, .seg button::before,
.sort-pick::before, .toggle::before, .slip-actions button::before, button.link::before {
  content: ""; position: absolute; top: 50%; left: 50%; width: max(100%, 44px); height: max(100%, 44px); transform: translate(-50%, -50%); }
/* Bottom bar: each button's tap area is a full rectangle that reaches the bar's edges and the gaps between buttons
   (the buttons' own rounded corners and the 2px gaps used to miss) */
.dock button:not(.fab) { position: relative; }
.dock button:not(.fab)::before { content: ""; position: absolute; inset: -7px -1px -6px; }

#r-notes { white-space: pre-line; }

/* iPhone-style zoom dial above the shutter: ruler ticks over the zoom stops, yellow marker and dot at the current zoom */
.cam-stops { position: absolute; left: 50%; bottom: calc(env(safe-area-inset-bottom) + 118px); transform: translateX(-50%); width: min(340px, calc(100% - 40px)); height: 74px;
  border-radius: 37px; background: rgb(60 58 54 / .62); touch-action: none; user-select: none; -webkit-user-select: none; transition: background .2s, transform .2s; }
.cam-stops[hidden] { display: none; }
.cam-stops .zr { position: absolute; left: 0; right: 0; top: 13px; height: 16px; }
.cam-stops .zr i { position: absolute; bottom: 0; width: 1.5px; height: 6px; margin-left: -.75px; border-radius: 1px; background: rgb(255 255 255 / .32); }
.cam-stops .zr i.major { height: 10px; background: rgb(255 255 255 / .55); }
.cam-stops .zr i.mark { height: 16px; width: 2.5px; margin-left: -1.25px; background: #ffd60a; transition: left .08s linear; }
.cam-stops button { position: absolute; top: 31px; height: 38px; min-width: 44px; padding: 0 4px; transform: translateX(-50%); border: 0; background: transparent;
  color: rgb(255 255 255 / .75); font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cam-stops button.on { color: #ffd60a; }
.cam-stops button.on::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: #ffd60a; }
.cam-stops.scrub { background: rgb(60 58 54 / .8); transform: translateX(-50%) scale(1.03); }
.cam-stops.scrub .zr i.mark { transition: none; }
.spot-card + .spot-card { margin-top: 18px; }

.price-check { margin: 4px 0 14px; padding: 12px 14px; border-radius: 14px; background: color-mix(in srgb, var(--text) 7%, transparent); }
.price-check .pc-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 15px; }
.price-check .pc-row strong { font-size: 20px; font-variant-numeric: tabular-nums; }
.price-check small { display: block; margin: 2px 0 8px; color: var(--muted, inherit); opacity: .75; }
.price-check .pc { display: inline-block; margin: 2px 0 6px; padding: 3px 10px; border-radius: 10px; font-size: 14px; font-weight: 700; }
.price-check .pc.down { color: var(--ok); background: color-mix(in srgb, var(--ok) 14%, transparent); }
.price-check .pc.up { color: var(--warn); background: color-mix(in srgb, var(--warn) 14%, transparent); }
.price-check .pc.same { opacity: .8; }

/* Add receipt: two quiet tiles on top, one confident "Take photos" row at the bottom (thumb reach) */
.pick-top { display: flex; gap: 10px; }
.pick-btn { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 92px; margin: 0; padding: 14px 8px;
  border: 1px solid var(--line); border-radius: 20px; background: var(--card); color: var(--text); font-size: 14px; font-weight: 600; text-align: center; cursor: pointer;
  transition: transform .12s var(--ease), background .15s; }
.pick-btn svg { box-sizing: content-box; width: 20px; height: 20px; padding: 9px; border-radius: 50%; background: var(--card2);
  fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pick-btn:active { transform: scale(.98); }
.pick-take { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "ic t" "ic s"; align-items: center; column-gap: 16px; row-gap: 2px;
  width: 100%; margin: 14px 0 0; padding: 18px 20px; border: 0; border-radius: 24px; background: var(--text); color: var(--bg); text-align: left;
  font-size: 18px; font-weight: 700; letter-spacing: -.01em; box-shadow: 0 10px 28px rgb(0 0 0 / .2); }
.pick-take svg { grid-area: ic; box-sizing: content-box; width: 26px; height: 26px; padding: 13px; border-radius: 50%;
  background: color-mix(in srgb, var(--bg) 16%, transparent); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pick-take span { grid-area: t; align-self: end; }
.pick-take small { grid-area: s; align-self: start; font-size: 13px; font-weight: 500; letter-spacing: 0; opacity: .68; }
.pick-take:active { transform: scale(.99); }
#status:empty { display: none; }
#thumbs:empty ~ #read { display: none; }
#thumbs:not(:empty) ~ .pick-take { display: flex; justify-content: center; gap: 10px; padding: 14px 18px; background: transparent; color: var(--text);
  border: 1.5px solid color-mix(in srgb, var(--text) 85%, transparent); border-radius: 18px; box-shadow: none; font-size: 16px; }
#thumbs:not(:empty) ~ .pick-take svg { width: 20px; height: 20px; padding: 0; background: none; }
#thumbs:not(:empty) ~ .pick-take small { display: none; }
.cam-bottom { display: grid; grid-template-columns: 1fr auto 1fr; }
.cam-bottom > :first-child { justify-self: start; } .cam-bottom > :last-child { justify-self: end; }
.cam-done { display: none; height: 44px; padding: 0 18px; border: 0; border-radius: 22px; background: #ffd60a; color: #000; font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }
.camview.multi .cam-done { display: block; }
.camview.multi .cam-done[hidden] { display: none; }
.camview.multi .cam-bottom .cam-spacer { display: none; }
.cam-done { justify-self: end; }

/* Spot camera: four corner brackets show where the price tag goes */
.camview:not(.multi).live::after { content: ""; position: absolute; left: 10%; right: 10%; top: 26%; height: 32%; pointer-events: none; opacity: .9;
  background:
    linear-gradient(#fff, #fff) left top / 28px 3px, linear-gradient(#fff, #fff) left top / 3px 28px,
    linear-gradient(#fff, #fff) right top / 28px 3px, linear-gradient(#fff, #fff) right top / 3px 28px,
    linear-gradient(#fff, #fff) left bottom / 28px 3px, linear-gradient(#fff, #fff) left bottom / 3px 28px,
    linear-gradient(#fff, #fff) right bottom / 28px 3px, linear-gradient(#fff, #fff) right bottom / 3px 28px;
  background-repeat: no-repeat; filter: drop-shadow(0 1px 3px rgb(0 0 0 / .5)); }

/* Receipt camera: the bottom-left slot is "Retake" (the last photo's thumbnail) instead of the photo-library button */
.cam-retake { display: none; flex-direction: column; align-items: center; gap: 5px; padding: 0; border: 0; background: transparent; color: #fff; font-size: 14px; font-weight: 600; }
.camview.multi .cam-retake { display: flex; }
.camview.multi #cam-lib { display: none; }
.cam-retake.empty { visibility: hidden; pointer-events: none; }
.cam-retake img { width: 40px; height: 54px; object-fit: cover; border-radius: 8px; border: 2px solid #fff; box-shadow: 0 2px 8px rgb(0 0 0 / .4); }
.cam-retake span { padding: 0; background: none; font-size: 12px; white-space: nowrap; text-shadow: 0 1px 3px rgb(0 0 0 / .7); }
.cam-retake.pop img { animation: retakePop .35s var(--ease); }
/* Retake: the last photo you took, with a small undo badge on its corner; its label sits underneath */
.cam-retake { position: relative; }
.cam-retake img { display: block; width: 44px; height: 58px; border-radius: 10px; }
.cam-retake::after { content: ""; position: absolute; left: calc(50% + 7px); top: 37px; width: 24px; height: 24px; border-radius: 50%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 14 4 9l5-5'/%3E%3Cpath d='M4 9h10.5a5.5 5.5 0 0 1 0 11H11'/%3E%3C/svg%3E") center / 13px no-repeat, #000; border: 2px solid #fff; box-sizing: border-box; }
.cam-retake:active img, .cam-retake:active::after { opacity: .7; }
@keyframes retakePop { from { transform: translateY(20px) scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
.shutter:active { transform: scale(.9); }
.cam-retake { justify-self: start; }
.row2 > :only-child { grid-column: 1 / -1; }

@keyframes camIn { from { opacity: 0; } }

/* While the camera is open nothing else is drawn: far less work for the phone, so the live preview stays smooth */
body.cam-open > :not(.camview) { visibility: hidden; }
.camview video { transform: translateZ(0); will-change: opacity; }

/* Spot "Check details": the product and its price lead */
#i-name { font-weight: 700; font-size: 17px; }
#i-price { font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; padding-block: 8px; }

/* Camera polish: hint pill */
.cam-msg { background: rgb(20 20 22 / .55); /* no blur over live video: it costs frames */ border: 1px solid rgb(255 255 255 / .14); }

/* ---------- monthly limits: swipe a category row left ---------- */
.legend .leg-row { position: relative; border-radius: 12px; overflow: hidden; }
.legend button.leg-main { position: relative; z-index: 1; width: 100%; background: var(--card); touch-action: pan-y; transition: transform .28s var(--ease); }
.legend .leg-row.open button.leg-main { transform: translateX(-96px); }
.legend button.leg-act { visibility: hidden; transition: visibility 0s linear .3s; position: absolute; top: 0; right: 0; bottom: 0; width: 96px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 5px; padding: 0; border-radius: 12px; background: var(--text); color: var(--bg); font-size: 12px; font-weight: 700; }
.legend button.leg-act svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.limit-hint { margin: 8px 2px 0; text-align: center; font-size: 13px; }
.lim-field { display: flex; align-items: center; gap: 6px; margin: 10px 0 12px; padding: 4px 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--card2); }
.lim-field span { color: var(--muted); font-size: 28px; font-weight: 600; }
.lim-field input { flex: 1; min-width: 0; border: 0; background: transparent; font-size: 34px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; padding: 8px 0; margin: 0; }
.lim-chips { margin: 0 -4px 4px; padding-inline: 4px; }

/* Receipt review: "adds up?" and "already saved?" stay in view at the top while scrolling the lines */
.r-status { position: sticky; top: -8px; z-index: 3; display: grid; gap: 6px; margin: -8px -2px 8px; padding: 8px 2px 6px; background: var(--bg); }
.rchip { margin: 0; padding: 7px 11px; border-radius: 11px; font-size: 13px; font-weight: 600; line-height: 1.3; font-variant-numeric: tabular-nums; }
.rchip.ok { color: var(--ok); background: color-mix(in srgb, var(--ok) 12%, var(--bg)); }
.rchip.bad { color: var(--warn); background: color-mix(in srgb, var(--warn) 14%, var(--bg)); }

/* Limit progress: a ring around the category icon, and one plain line under the name. The bar and % stay "share of the month". */
.legend .leg-row.drag button.leg-act, .legend .leg-row.open button.leg-act { visibility: visible; transition-delay: 0s; }
.lim-ring { position: relative; display: grid; place-items: center; width: 30px; height: 30px; }
.lim-ring::before { content: ""; position: absolute; inset: -6px; border-radius: 50%;
  background: conic-gradient(var(--tone) calc(var(--p) * 1%), color-mix(in srgb, var(--text) 13%, transparent) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3.5px), #000 calc(100% - 3px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 3.5px), #000 calc(100% - 3px)); }
.nm { display: grid; gap: 1px; line-height: 1.2; }
.lim-cap { font-size: 12px; font-weight: 500; color: var(--muted); font-variant-numeric: tabular-nums; }
.lim-cap.warn { color: var(--warn); font-weight: 600; } .lim-cap.over { color: var(--danger); font-weight: 600; }
.leg-head { display: flex; justify-content: space-between; margin: 2px 10px 6px; color: var(--muted); font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }

/* "Other" page: sort what couldn't be placed */
.cat-resort { display: block; width: 100%; margin: 4px 0 12px; padding: 13px 16px; border: 1px dashed color-mix(in srgb, var(--text) 30%, var(--line)); border-radius: 14px; background: var(--card); color: var(--text); font-size: 15px; font-weight: 600; }
.cat-resort:disabled { opacity: .6; }

/* Foreign-currency receipts: a small box under the status strip */
.r-fx { margin: 0 0 10px; padding: 10px 12px; border-radius: 14px; background: color-mix(in srgb, var(--warn) 10%, var(--card)); border: 1px solid color-mix(in srgb, var(--warn) 30%, var(--line)); display: grid; gap: 8px; font-size: 14px; }
.r-fx-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.r-fx-top label { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 13px; }
.r-fx-top select { width: auto; padding: 4px 8px; margin: 0; }
.r-fx-rate { display: flex; align-items: center; gap: 6px; margin: 0; font-variant-numeric: tabular-nums; }
.r-fx-rate input { width: 96px; margin: 0; padding: 5px 8px; }
.r-fx-rate small { color: var(--muted); }
.r-fx-total { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.slip-fx { margin: 6px 0 0; color: var(--muted); font-size: 12px; text-align: right; }
.pick-manual { display: block; width: 100%; margin: 10px 0 0; padding: 10px; border: 0; background: none; color: var(--muted); font-size: 14px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* Limit sheet: Save across the full width, Remove as a quiet link under it */
.lim-save { display: block; width: 100%; margin-top: 14px; }
.lim-remove { display: block; width: 100%; margin: 6px 0 0; padding: 12px; border: 0; background: none; color: var(--danger); font-size: 15px; font-weight: 600; }

/* Family view of Home: who paid */
.payers { margin: 2px 0 18px; padding: 12px 8px 6px; border-radius: 16px; background: color-mix(in srgb, var(--text) 4%, transparent); }
.pay-head { display: flex; justify-content: space-between; margin: 0 6px; color: var(--muted); font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }
.pay-bar { display: flex; gap: 3px; height: 8px; margin: 9px 6px 10px; border-radius: 6px; overflow: hidden; }
.pay-bar i { background: var(--pc); border-radius: 3px; min-width: 5px; }
.payers button.pay-row { display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 10px; width: 100%; margin: 0; padding: 7px 6px; border: 0; border-radius: 12px; background: none; text-align: left; font-size: 15px; transition: opacity .2s, background .2s; }
.payers button.pay-row.on { background: color-mix(in srgb, var(--pc) 14%, transparent); }
.payers button.pay-row.dim { opacity: .45; }
.pay-av { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: color-mix(in srgb, var(--pc) 22%, transparent); color: var(--pc); font-weight: 700; font-size: 14px; }
.pay-row .amt { font-variant-numeric: tabular-nums; font-weight: 600; }
.pay-row .pct { color: var(--muted); font-size: 12px; margin-left: 6px; font-weight: 400; }
.pay-hint { margin: 4px 8px 2px; color: var(--muted); font-size: 12px; }

/* Who paid: tappable title (opens Family), chip for the person picked, rows only for people who paid */
.pay-head { align-items: center; }
.pay-head .pay-title { display: inline-flex; align-items: center; gap: 2px; margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; }
.pay-title .chev { width: 13px; height: 13px; }
.pay-head .pay-chip { display: inline-flex; align-items: center; gap: 5px; margin: -4px 0; padding: 4px 8px 4px 11px; border: 0; border-radius: 99px; background: var(--card2); color: var(--text); font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none; }
.pay-chip svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; }
.leg-head[hidden], .activity[hidden] { display: none; }
.set-note { margin: 6px 16px 0; font-size: 12px; }

/* ---------- Settings redesign: account icon, family avatars, theme switch, data tiles, drawers ---------- */
.account .icon-btn { width: 40px; height: 40px; padding: 0; display: grid; place-items: center; background: var(--card2); border: 0; border-radius: 12px; color: var(--muted); }
.account .icon-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.set-row .grow { flex: 1; }
.avs { display: flex; flex: none; }
.avs .avatar.sm { width: 28px; height: 28px; border-radius: 50%; font-size: 12px; border: 2px solid var(--card); }
.avs .avatar.sm + .avatar.sm { margin-left: -8px; }
.avs .fam-ic { width: 20px; height: 20px; color: var(--muted); }
.seg-row { justify-content: space-between; }
.seg { display: flex; padding: 3px; gap: 2px; border-radius: 11px; background: var(--card2); }
.seg button { margin: 0; padding: 7px 13px; border: 0; border-radius: 9px; background: none; color: var(--muted); font-size: 14px; font-weight: 500; }
.seg button.on { background: var(--text); color: var(--bg); }
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tile { position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 14px; min-height: 92px; margin: 0; padding: 14px;
  border: 0; border-radius: var(--r); background: var(--card); box-shadow: var(--shadow); color: var(--text); font-size: 15px; font-weight: 500; text-align: left; line-height: 1.25; cursor: pointer; }
.tile svg { width: 22px; height: 22px; fill: none; stroke: var(--accent-2); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tile-val { position: absolute; top: 14px; right: 14px; font-size: 12px; color: var(--muted); }
.legal-row { display: flex; justify-content: space-around; padding: 12px 8px; border-top: 1px solid var(--line); }
.legal-row a { padding: 6px 10px; color: var(--muted); font-size: 14px; text-decoration: none; }
.drawer { margin-bottom: 14px; }
.drawer > summary { display: flex; align-items: center; justify-content: space-between; padding: 12px 4px; list-style: none; cursor: pointer;
  font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.drawer > summary::-webkit-details-marker { display: none; }
.drawer > summary::after { content: ""; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .2s; margin-right: 4px; }
.drawer[open] > summary::after { transform: rotate(-135deg); }
.drawer.danger > summary { color: var(--danger); }

/* The logo is a home button: tap anywhere on it (a little padding makes it an easy target) */
.brand[role="link"] { cursor: pointer; padding: 8px 14px 8px 0; margin: -8px 0; -webkit-tap-highlight-color: transparent; }