/* =====================================================================
   Grocery - mobile-first stylesheet
   No framework. Light + dark. Big touch targets, bottom navigation.
   ===================================================================== */

:root {
  --green-50:#eef8f0; --green-100:#d5efdb; --green-500:#1f9d55; --green-600:#178044;
  --green-700:#116336;
  --amber-100:#fdf0d5; --amber-500:#c77700; --amber-700:#8f5600;
  --red-100:#fdeaea;  --red-500:#c8372d;  --red-700:#93251d;

  --bg:#f4f5f3;
  --surface:#ffffff;
  --surface-2:#fafbf9;
  --line:#e3e6e1;
  --line-strong:#cfd4cb;
  --text:#1b1f1c;
  --text-2:#5c645d;
  --text-3:#878f88;
  --accent:var(--green-600);
  --accent-soft:var(--green-50);
  --accent-line:var(--green-100);
  --danger:var(--red-500);
  --danger-soft:var(--red-100);
  --warn:var(--amber-500);
  --warn-soft:var(--amber-100);

  --r-sm:8px; --r:14px; --r-lg:20px; --r-xl:28px;
  --shadow:0 1px 2px rgba(20,30,22,.05), 0 2px 8px rgba(20,30,22,.05);
  --shadow-lg:0 8px 30px rgba(20,30,22,.14);
  --nav-h:64px;
  --safe-b:env(safe-area-inset-bottom, 0px);
  --tap:48px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:#12150f;
    --surface:#1b1f19;
    --surface-2:#22271f;
    --line:#2e342b;
    --line-strong:#414839;
    --text:#eef1ea;
    --text-2:#a8b0a4;
    --text-3:#7c847a;
    --accent:#4cc47b;
    --accent-soft:#17301f;
    --accent-line:#22452c;
    --danger:#f4796c;
    --danger-soft:#361a17;
    --warn:#e5a53b;
    --warn-soft:#33260f;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 2px 10px rgba(0,0,0,.3);
    --shadow-lg:0 10px 34px rgba(0,0,0,.55);
  }
}

*,*::before,*::after { box-sizing:border-box; }

html { -webkit-text-size-adjust:100%; }

body {
  margin:0;
  background:var(--bg);
  color:var(--text);
  font:400 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
       "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing:antialiased;
  overscroll-behavior-y:none;
}

h1,h2,h3,h4 { margin:0; font-weight:650; letter-spacing:-.012em; line-height:1.25; }
h1 { font-size:1.35rem; }
h2 { font-size:1.05rem; }
h3 { font-size:.95rem; }
p  { margin:0 0 .6em; }
a  { color:var(--accent); text-decoration:none; }
small { font-size:.8125rem; }

.ico { width:20px; height:20px; flex:none; }
.ico-sm { width:16px; height:16px; }
.ico-lg { width:26px; height:26px; }

/* ---------- shell ---------------------------------------------------- */

.shell { min-height:100dvh; display:flex; flex-direction:column; }

.topbar {
  position:sticky; top:0; z-index:30;
  display:flex; align-items:center; gap:10px;
  padding:12px 16px;
  min-height:56px;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--line);
}
.topbar h1 { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.topbar .icon-btn { margin:-8px; }

.content {
  flex:1;
  padding:16px 16px calc(var(--nav-h) + var(--safe-b) + 28px);
  max-width:720px; width:100%; margin:0 auto;
}
.content.no-nav { padding-bottom:32px; }

/* ---------- bottom navigation ---------------------------------------- */

.bottom-nav {
  position:fixed; left:0; right:0; bottom:0; z-index:40;
  display:grid; grid-auto-flow:column; grid-auto-columns:1fr;
  background:color-mix(in srgb, var(--surface) 94%, transparent);
  backdrop-filter:saturate(180%) blur(14px);
  border-top:1px solid var(--line);
  padding-bottom:var(--safe-b);
}
.bottom-nav a {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:3px; height:var(--nav-h); color:var(--text-3);
  font-size:.6875rem; font-weight:600; letter-spacing:.01em;
  position:relative; -webkit-tap-highlight-color:transparent;
}
.bottom-nav a.on { color:var(--accent); }
.bottom-nav a.on::before {
  content:""; position:absolute; top:0; width:26px; height:3px;
  border-radius:0 0 3px 3px; background:var(--accent);
}
.nav-badge {
  position:absolute; top:8px; left:calc(50% + 6px);
  min-width:17px; height:17px; padding:0 4px;
  border-radius:9px; background:var(--accent); color:#fff;
  font-size:.625rem; font-weight:700; line-height:17px; text-align:center;
}
.bottom-nav a.on .nav-badge { background:var(--accent); }

/* ---------- cards ----------------------------------------------------- */

.card {
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r);
  box-shadow:var(--shadow);
  padding:14px;
}
.card + .card { margin-top:10px; }
.card-link { display:block; color:inherit; }
.card-link:active { transform:scale(.994); }

.stack > * + * { margin-top:10px; }
.stack-lg > * + * { margin-top:18px; }

.section-head {
  display:flex; align-items:baseline; justify-content:space-between;
  gap:10px; margin:22px 0 10px;
}
.section-head h2 { font-size:.8125rem; text-transform:uppercase; letter-spacing:.07em; color:var(--text-3); }
/* The link reads as small text but is tapped with a thumb, so the hit area
   is padded out to the tap size and pulled back with a negative margin -
   the heading stays exactly where it was. */
.section-head a {
  font-size:.8125rem; font-weight:600;
  display:inline-flex; align-items:center;
  min-height:var(--tap); padding:0 8px; margin:calc((var(--tap) - 20px) / -2) -8px;
}

/* ---------- stats ----------------------------------------------------- */

.stat-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.stat {
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); padding:14px; box-shadow:var(--shadow);
}
.stat .k { font-size:.75rem; font-weight:600; color:var(--text-3); text-transform:uppercase; letter-spacing:.05em; }
.stat .v { font-size:1.55rem; font-weight:700; letter-spacing:-.02em; margin-top:4px; }
.stat .s { font-size:.8125rem; color:var(--text-2); margin-top:2px; }
.stat.accent { background:var(--accent-soft); border-color:var(--accent-line); }
.stat.accent .v { color:var(--accent); }
.stat.warn { background:var(--warn-soft); border-color:color-mix(in srgb,var(--warn) 30%, transparent); }
.stat.warn .v { color:var(--warn); }

/* ---------- buttons --------------------------------------------------- */

.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:var(--tap); padding:0 18px;
  border-radius:var(--r); border:1px solid transparent;
  background:var(--surface-2); color:var(--text);
  font:inherit; font-weight:650; font-size:.9375rem;
  cursor:pointer; -webkit-tap-highlight-color:transparent;
  border-color:var(--line); text-align:center;
}
.btn:active { transform:scale(.985); }
.btn:disabled { opacity:.5; cursor:not-allowed; transform:none; }
.btn-primary { background:var(--accent); color:#fff; border-color:transparent; }
.btn-danger  { background:transparent; color:var(--danger); border-color:color-mix(in srgb,var(--danger) 35%,transparent); }
.btn-ghost   { background:transparent; border-color:transparent; color:var(--text-2); }
.btn-block   { display:flex; width:100%; }
.btn-lg      { min-height:56px; font-size:1rem; border-radius:var(--r-lg); }
/* Small in weight, not in hit area: 44px is the smallest thing a thumb
   hits reliably, and these are real actions (Finish trip, Select all, Edit). */
.btn-sm      { min-height:44px; padding:0 12px; font-size:.8125rem; border-radius:var(--r-sm); }
/* Two-line button: a title with a quiet explanation underneath. */
.btn-stack { flex-direction:column; gap:2px; padding-top:11px; padding-bottom:11px; min-height:60px; }
.btn-stack .bt { display:flex; align-items:center; gap:8px; }
.btn-stack .bs { font-size:.75rem; font-weight:500; color:var(--text-3); }
.btn-row { display:flex; gap:10px; }
.btn-row > * { flex:1; }

.icon-btn {
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:50%;
  border:none; background:transparent; color:var(--text-2); cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.icon-btn:active { background:var(--surface-2); }

.fab {
  position:fixed; right:16px; z-index:35;
  bottom:calc(var(--nav-h) + var(--safe-b) + 16px);
  width:58px; height:58px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--accent); color:#fff; border:none;
  box-shadow:var(--shadow-lg); cursor:pointer;
}
.fab .ico { width:26px; height:26px; stroke-width:2.2; }
/* Reserve room under the last card so the floating button covers nothing. */
.fab-spacer { height:74px; }

/* ---------- forms ------------------------------------------------------ */

.field { margin-bottom:14px; }
.label { display:block; font-size:.8125rem; font-weight:650; color:var(--text-2); margin-bottom:6px; }
.hint  { font-size:.75rem; color:var(--text-3); margin-top:5px; }

.input, .select, .textarea {
  width:100%; min-height:var(--tap);
  padding:12px 14px;
  border:1px solid var(--line-strong); border-radius:var(--r);
  background:var(--surface); color:var(--text);
  font:inherit; font-size:16px; /* 16px stops iOS zooming on focus */
  appearance:none;
}
.textarea { min-height:84px; resize:vertical; }
.select {
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23878f88' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center; padding-right:40px;
}
.input:focus, .select:focus, .textarea:focus {
  outline:none; border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
.input.is-error, .select.is-error { border-color:var(--danger); }
.err { color:var(--danger); font-size:.8125rem; font-weight:600; margin-top:5px; }

.row { display:flex; gap:10px; }
.row > .field { flex:1; margin-bottom:14px; }
.row > .field.narrow { flex:0 0 40%; }

.input-money { position:relative; }
.input-money .cur {
  position:absolute; left:14px; top:50%; transform:translateY(-50%);
  color:var(--text-3); font-weight:650; pointer-events:none;
}
.input-money .input { padding-left:34px; font-size:20px; font-weight:700; }

.pw-wrap { position:relative; }
.pw-wrap .input { padding-right:52px; }
.pw-toggle {
  position:absolute; right:4px; top:50%; transform:translateY(-50%);
  width:44px; height:44px; display:flex; align-items:center; justify-content:center;
  background:none; border:none; color:var(--text-3); cursor:pointer;
}

.switch-row {
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:12px 0; border-top:1px solid var(--line);
}
.switch-row:first-of-type { border-top:none; }
.switch-row .t { font-weight:600; font-size:.9375rem; }
.switch-row .d { font-size:.8125rem; color:var(--text-3); margin-top:2px; }
.switch { position:relative; flex:none; width:52px; height:31px; }
/* The track looks 31px tall, but the invisible input that actually receives
   the tap is stretched past it to a thumb-sized 45px. The switch looks the
   same and is a great deal easier to hit. */
.switch input { position:absolute; inset:-7px 0; opacity:0; width:100%; height:auto; margin:0; cursor:pointer; }
.switch .track {
  position:absolute; inset:0; border-radius:16px; background:var(--line-strong);
  transition:background .15s ease; pointer-events:none;
}
.switch .track::after {
  content:""; position:absolute; top:3px; left:3px; width:25px; height:25px;
  border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.3);
  transition:transform .15s ease;
}
.switch input:checked + .track { background:var(--accent); }
.switch input:checked + .track::after { transform:translateX(21px); }
.switch input:focus-visible + .track { box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 25%,transparent); }

/* ---------- chips / segments ------------------------------------------ */

.chips { display:flex; flex-wrap:wrap; gap:8px; }
.chip {
  display:inline-flex; align-items:center; gap:6px;
  min-height:44px; padding:0 14px;
  border-radius:22px; border:1px solid var(--line-strong);
  background:var(--surface); color:var(--text);
  font:inherit; font-size:.875rem; font-weight:600;
  cursor:pointer; -webkit-tap-highlight-color:transparent;
}
.chip.on { background:var(--accent); border-color:var(--accent); color:#fff; }
.chip:disabled { opacity:.55; }

.scroller {
  display:flex; gap:8px; overflow-x:auto; padding:2px 16px 6px;
  margin:0 -16px; scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.scroller::-webkit-scrollbar { display:none; }
.scroller .chip { flex:none; }

.searchbar { position:relative; }
.searchbar .ico {
  position:absolute; left:13px; top:50%; transform:translateY(-50%); color:var(--text-3);
}
.searchbar .input { padding-left:42px; }

/* ---------- list items ------------------------------------------------- */

.item-card { display:flex; gap:12px; align-items:flex-start; }
.item-main { flex:1; min-width:0; }
.item-title { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.item-title .n { font-weight:650; font-size:1rem; }
.item-title .q { font-weight:650; color:var(--accent); font-size:.9375rem; }
.item-meta {
  display:flex; align-items:center; gap:6px; flex-wrap:wrap;
  margin-top:5px; font-size:.8125rem; color:var(--text-2);
}
.item-meta .dot { width:3px; height:3px; border-radius:50%; background:var(--text-3); flex:none; }
.item-meta .when { display:inline-flex; align-items:center; gap:6px; white-space:nowrap; }
.item-note {
  margin-top:7px; padding:7px 10px; border-radius:var(--r-sm);
  background:var(--surface-2); border:1px solid var(--line);
  font-size:.8125rem; color:var(--text-2); font-style:italic;
}
.item-also { margin-top:7px; font-size:.75rem; color:var(--text-3); }

.badge {
  display:inline-flex; align-items:center; gap:4px;
  padding:2px 8px; border-radius:20px;
  font-size:.6875rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  border:1px solid transparent;
}
.badge .ico { width:12px; height:12px; stroke-width:2.4; }
.badge-urgent { background:var(--danger-soft); color:var(--danger); border-color:color-mix(in srgb,var(--danger) 25%,transparent); }
.badge-cat    { background:var(--surface-2); color:var(--text-2); border-color:var(--line); }
.badge-ok     { background:var(--accent-soft); color:var(--accent); border-color:var(--accent-line); }
.badge-muted  { background:var(--surface-2); color:var(--text-3); border-color:var(--line); }

.avatar {
  width:30px; height:30px; border-radius:50%; flex:none;
  display:flex; align-items:center; justify-content:center;
  font-size:.6875rem; font-weight:700; letter-spacing:.02em; color:#fff;
}
.tone-1{background:#2f8f5b}.tone-2{background:#3b74b5}.tone-3{background:#a2683a}
.tone-4{background:#8558b8}.tone-5{background:#b2523f}.tone-6{background:#3d8f96}

.cat-ico {
  width:38px; height:38px; border-radius:12px; flex:none;
  display:flex; align-items:center; justify-content:center;
  background:var(--accent-soft); color:var(--accent); border:1px solid var(--accent-line);
}

/* ---------- shopping mode ---------------------------------------------- */

.pick {
  display:flex; align-items:center; gap:14px;
  padding:16px 14px; min-height:68px;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); box-shadow:var(--shadow);
  cursor:pointer; -webkit-tap-highlight-color:transparent;
  position:relative;
}
.pick + .pick { margin-top:8px; }
.pick input { position:absolute; opacity:0; width:0; height:0; }
.pick .box {
  width:28px; height:28px; flex:none; border-radius:9px;
  border:2px solid var(--line-strong); background:var(--surface);
  display:flex; align-items:center; justify-content:center; color:#fff;
  transition:background .12s ease, border-color .12s ease;
}
.pick .box .ico { width:18px; height:18px; stroke-width:3; opacity:0; }
.pick:has(input:checked) {
  background:var(--accent-soft); border-color:var(--accent);
  box-shadow:0 0 0 1px var(--accent) inset;
}
.pick:has(input:checked) .box { background:var(--accent); border-color:var(--accent); }
.pick:has(input:checked) .box .ico { opacity:1; }
.pick input:focus-visible ~ .box { box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 30%,transparent); }
.pick .pn { display:block; font-size:1.0625rem; font-weight:650; }
.pick .pq { display:block; font-size:.875rem; color:var(--text-2); margin-top:3px; }

.selbar {
  position:fixed; left:0; right:0; bottom:0; z-index:45;
  padding:12px 16px calc(12px + var(--safe-b));
  background:color-mix(in srgb,var(--surface) 96%, transparent);
  backdrop-filter:blur(14px);
  border-top:1px solid var(--line);
  box-shadow:0 -6px 24px rgba(0,0,0,.10);
  transform:translateY(110%); transition:transform .18s ease;
}
.selbar.show { transform:translateY(0); }
.selbar .inner { max-width:720px; margin:0 auto; display:flex; align-items:center; gap:12px; }
.selbar .cnt { font-weight:700; font-size:.9375rem; flex:none; }
.selbar .btn { flex:1; }

/* ---------- flash / toast ---------------------------------------------- */

.flashes { position:sticky; top:56px; z-index:29; margin:0 0 14px; }
.flash {
  display:flex; align-items:flex-start; gap:10px;
  padding:12px 14px; border-radius:var(--r);
  font-size:.875rem; font-weight:600; border:1px solid transparent;
}
.flash + .flash { margin-top:8px; }
.flash-success { background:var(--accent-soft); color:var(--accent); border-color:var(--accent-line); }
.flash-error   { background:var(--danger-soft); color:var(--danger); border-color:color-mix(in srgb,var(--danger) 25%,transparent); }
.flash-warning { background:var(--warn-soft);  color:var(--warn);  border-color:color-mix(in srgb,var(--warn) 30%,transparent); }
.flash .ico { margin-top:1px; }

.toast {
  position:fixed; left:50%; transform:translate(-50%, 20px);
  bottom:calc(var(--nav-h) + var(--safe-b) + 20px); z-index:60;
  max-width:calc(100% - 32px);
  padding:12px 18px; border-radius:var(--r-lg);
  background:var(--text); color:var(--bg);
  font-size:.875rem; font-weight:600; box-shadow:var(--shadow-lg);
  opacity:0; pointer-events:none; transition:opacity .18s ease, transform .18s ease;
}
.toast.show { opacity:1; transform:translate(-50%, 0); }

/* ---------- standing notices (offline, update available) ---------------- */

.appbars {
  position:fixed; left:0; right:0; z-index:50;
  bottom:calc(var(--nav-h) + var(--safe-b) + 12px);
  padding:0 12px;
  display:flex; flex-direction:column; gap:8px;
  pointer-events:none;
}
.appbar {
  max-width:696px; width:100%; margin:0 auto;
  display:flex; align-items:center; gap:12px;
  padding:10px 12px 10px 14px; border-radius:var(--r);
  font-size:.875rem; font-weight:600;
  background:var(--surface); color:var(--text);
  border:1px solid var(--line); box-shadow:var(--shadow-lg);
  opacity:0; transform:translateY(10px); pointer-events:none;
  transition:opacity .18s ease, transform .18s ease;
}
.appbar.show { opacity:1; transform:none; pointer-events:auto; }
.appbar span { flex:1; min-width:0; }
.appbar .btn { flex:none; }
.appbar-warn { background:var(--warn-soft); color:var(--warn); border-color:color-mix(in srgb,var(--warn) 30%,transparent); }

/* ---------- bottom sheet / dialog --------------------------------------- */

.sheet[open] { display:block; }
.sheet {
  position:fixed; inset:0; z-index:70; border:none; padding:0; margin:0;
  width:100%; max-width:none; height:100%; max-height:none;
  background:transparent; overflow:hidden;
}
.sheet::backdrop { background:rgba(8,12,9,.5); backdrop-filter:blur(2px); }
.sheet-panel {
  position:absolute; left:0; right:0; bottom:0;
  max-height:92dvh; overflow-y:auto;
  background:var(--surface); color:var(--text);
  border-radius:var(--r-xl) var(--r-xl) 0 0;
  padding:8px 16px calc(20px + var(--safe-b));
  box-shadow:var(--shadow-lg);
  animation:sheet-up .22s cubic-bezier(.2,.8,.3,1);
}
@keyframes sheet-up { from { transform:translateY(28px); opacity:.6 } to { transform:none; opacity:1 } }
.sheet-grab { width:38px; height:4px; border-radius:2px; background:var(--line-strong); margin:6px auto 14px; }
.sheet-title { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }

/* ---------- disclosures ------------------------------------------------- */

/* "Show items" and "More filters" are tapped with a thumb like everything
   else, so the line is padded out to the tap size. The padding rather than
   a min-height keeps the browser's own triangle where it belongs. */
summary { padding:12px 0; min-height:44px; cursor:pointer; }

/* ---------- misc -------------------------------------------------------- */

.empty { text-align:center; padding:44px 20px; }
.empty .art {
  width:72px; height:72px; margin:0 auto 16px; border-radius:24px;
  display:flex; align-items:center; justify-content:center;
  background:var(--accent-soft); color:var(--accent); border:1px solid var(--accent-line);
}
.empty .art .ico { width:34px; height:34px; }
.empty h2 { margin-bottom:6px; }
.empty p { color:var(--text-2); font-size:.9375rem; margin-bottom:18px; }

.bar-row { margin-bottom:14px; }
.bar-head { display:flex; justify-content:space-between; align-items:baseline; gap:10px; font-size:.875rem; }
.bar-head .n { font-weight:600; }
.bar-head .v { font-weight:700; }
.bar-track { height:8px; border-radius:4px; background:var(--surface-2); border:1px solid var(--line); margin-top:6px; overflow:hidden; }
.bar-fill { height:100%; background:var(--accent); border-radius:4px; }

.kv { display:flex; justify-content:space-between; gap:12px; padding:11px 0; border-top:1px solid var(--line); font-size:.9375rem; }
.kv:first-child { border-top:none; }
.kv .k { color:var(--text-2); }
.kv .v { font-weight:650; text-align:right; }

.list-reset { list-style:none; margin:0; padding:0; }
.tick-list { list-style:none; margin:0; padding:0; }
.tick-list li { display:flex; gap:9px; align-items:flex-start; padding:7px 0; font-size:.9375rem; border-top:1px solid var(--line); }
.tick-list li:first-child { border-top:none; }
.tick-list .ico { color:var(--accent); margin-top:3px; }

.muted { color:var(--text-2); }
.dim { color:var(--text-3); }
.center { text-align:center; }
.right { text-align:right; }
.nowrap { white-space:nowrap; }
.mt-0 { margin-top:0 } .mt-1 { margin-top:8px } .mt-2 { margin-top:16px } .mt-3 { margin-top:24px }
.mb-0 { margin-bottom:0 } .mb-1 { margin-bottom:8px } .mb-2 { margin-bottom:16px }
.grow { flex:1; min-width:0; }
.truncate { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.divider { height:1px; background:var(--line); margin:16px 0; border:none; }
.hidden { display:none !important; }

.sr-only {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip-link {
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--accent); color:#fff; padding:10px 16px; border-radius:0 0 var(--r) 0;
}
.skip-link:focus { left:0; }

.pager { display:flex; justify-content:space-between; gap:10px; margin-top:18px; }

.autocomplete { position:relative; }
.ac-list {
  position:absolute; left:0; right:0; top:calc(100% + 6px); z-index:20;
  background:var(--surface); border:1px solid var(--line-strong);
  border-radius:var(--r); box-shadow:var(--shadow-lg); overflow:hidden;
  max-height:280px; overflow-y:auto;
}
.ac-list button {
  display:flex; width:100%; align-items:center; gap:10px;
  padding:13px 14px; background:none; border:none; border-top:1px solid var(--line);
  color:var(--text); font:inherit; text-align:left; cursor:pointer;
}
.ac-list button:first-child { border-top:none; }
.ac-list button:hover, .ac-list button[aria-selected="true"] { background:var(--surface-2); }
.ac-list .an { font-weight:600; }
.ac-list .ad { font-size:.75rem; color:var(--text-3); margin-left:auto; }

.split-rows .srow {
  display:flex; align-items:center; gap:10px; padding:9px 0; border-top:1px solid var(--line);
}
.split-rows .srow:first-child { border-top:none; }
.split-rows .sname { flex:1; min-width:0; font-size:.9375rem; }
.split-rows .input { width:112px; min-height:42px; text-align:right; font-weight:650; }
.extra-row + .extra-row { border-top:1px solid var(--line); padding-top:10px; }
.extra-price { margin-bottom:8px; }

.split-total { display:flex; justify-content:space-between; font-weight:700; padding-top:11px; border-top:2px solid var(--line-strong); margin-top:6px; }
.split-total.bad { color:var(--danger); }
.split-total.good { color:var(--accent); }

.receipt-drop {
  display:flex; align-items:center; gap:12px; padding:14px;
  border:1px dashed var(--line-strong); border-radius:var(--r);
  background:var(--surface-2); color:var(--text-2); cursor:pointer; font-size:.875rem;
}
.receipt-drop input { position:absolute; opacity:0; width:0; height:0; }
.receipt-preview { max-width:100%; border-radius:var(--r); margin-top:10px; display:block; }

.auth-wrap {
  min-height:100dvh; display:flex; flex-direction:column; justify-content:center;
  padding:32px 20px calc(32px + var(--safe-b)); max-width:420px; margin:0 auto;
}
.auth-logo {
  width:64px; height:64px; border-radius:20px; margin:0 auto 18px;
  display:flex; align-items:center; justify-content:center;
  background:var(--accent); color:#fff; box-shadow:var(--shadow-lg);
}
.auth-logo .ico { width:32px; height:32px; stroke-width:2; }

table.data { width:100%; border-collapse:collapse; font-size:.875rem; }
table.data th, table.data td { padding:10px 8px; text-align:left; border-bottom:1px solid var(--line); vertical-align:top; }
table.data th { font-size:.75rem; text-transform:uppercase; letter-spacing:.05em; color:var(--text-3); font-weight:650; }
.table-scroll { overflow-x:auto; margin:0 -14px; padding:0 14px; }

@media (min-width:640px) {
  .stat-grid { grid-template-columns:repeat(4, 1fr); }
  .content { padding-left:24px; padding-right:24px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.001ms !important; transition-duration:.001ms !important; }
}