/* ═══════════════════════════════════════════════════════════
   AllBridge Money — design system  ·  "Editorial Vivo"

   Editorial bones, vivid colour. Warm paper, a serif for anything
   the eye lands on first, and hairlines instead of heavy boxes —
   so the page reads like a well-set page rather than a dashboard.
   Colour then carries meaning, loudly: money in, money out, action.

   Every ink/surface pair here was measured, not eyeballed — text
   clears WCAG AA (4.5:1) and marks clear 3:1, in BOTH themes.
   Hence the two steps per hue: `--pos` is the text-safe green,
   `--pos-mark` the vivid one for bars and charts. Never paint
   small text with a *-mark token.
   ═══════════════════════════════════════════════════════════ */

:root {
  /* Surfaces — warm paper rather than clinical white */
  --paper:      #FBF9F5;
  --surface:    #FFFFFF;
  --surface-2:  #F5F1E8;
  --surface-3:  #EDE7DA;

  /* Ink */
  --ink:        #1A1814;
  --ink-2:      #5C574E;
  --ink-3:      #7D7566;
  --on-ink:     #FBF9F5;

  --line:       #E9E2D6;
  --line-2:     #DAD1C0;

  /* Semantic — text step (AA on white) + vivid mark step for fills */
  --pos:        #04754F;  --pos-mark:   #019A67;  --pos-bg:  #E9F7F1;
  --neg:        #C7302B;  --neg-mark:   #FF4D4D;  --neg-bg:  #FDEEED;
  --warn:       #8A5B00;  --warn-mark:  #E2670A;  --warn-bg: #FDF4E3;
  --info:       #2450C8;  --info-bg:    #EBF0FE;
  --accent:     #2F6BFF;  /* marks and fills — non-text, so it can stay bright */
  --accent-ink: #2450C8;  /* the same blue, safe for small text */
  /* Solid surfaces need their own step: white text on the bright mark blue
     lands at 4.49:1, a hair under AA. Slightly deeper, still vivid. */
  --accent-solid: #2B62F0;
  --on-accent:    #FFFFFF;

  --serif: 'Iowan Old Style', 'Palatino Linotype', Palatino, 'Book Antiqua', Georgia, serif;

  --r:          12px;
  --r-sm:       8px;
  --r-lg:       18px;

  /* Editorial pages sit flat on the paper — shadow is a whisper */
  --shadow:     0 1px 2px rgba(26,24,20,.03);
  --shadow-md:  0 4px 16px rgba(26,24,20,.06), 0 1px 3px rgba(26,24,20,.04);
  --shadow-lg:  0 14px 44px rgba(26,24,20,.14), 0 2px 8px rgba(26,24,20,.06);

  --pad:        20px;
}

/* Dark palette lives in one place, applied both ways:
   - automatically when the device is dark AND the user hasn't chosen (System),
   - explicitly when the user picks Dark. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) { color-scheme: dark; }
}
:root[data-theme="dark"] { color-scheme: dark; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    --paper:     #151310;
    --surface:   #1D1A16;
    --surface-2: #262219;
    --surface-3: #302B24;
    --ink:       #F5F1E8;
    --ink-2:     #B5AC9C;
    --ink-3:     #8E8577;
    --on-ink:    #151310;
    --line:      #302B24;
    --line-2:    #3D372E;
    --pos:       #2DD49A; --pos-mark:  #2DD49A; --pos-bg:  rgba(45,212,154,.13);
    --neg:       #FF6B63; --neg-mark:  #FF5A54; --neg-bg:  rgba(255,90,84,.14);
    --warn:      #FFC14D; --warn-mark: #FF9A3D; --warn-bg: rgba(255,193,77,.13);
    --info:      #8FA9FF; --info-bg:   rgba(109,147,255,.14);
    --accent:    #6D93FF;
    --accent-ink:#8FA9FF;
    --accent-solid: #6D93FF;
    --on-accent:    #151310;
    --shadow:    0 1px 2px rgba(0,0,0,.3);
    --shadow-md: 0 4px 16px rgba(0,0,0,.4);
    --shadow-lg: 0 12px 40px rgba(0,0,0,.5);
  }
}
:root[data-theme="dark"] {
  --paper:     #151310;
  --surface:   #1D1A16;
  --surface-2: #262219;
  --surface-3: #302B24;
  --ink:       #F5F1E8;
  --ink-2:     #B5AC9C;
  --ink-3:     #8E8577;
  --on-ink:    #151310;
  --line:      #302B24;
  --line-2:    #3D372E;
  --pos:       #2DD49A; --pos-mark:  #2DD49A; --pos-bg:  rgba(45,212,154,.13);
  --neg:       #FF6B63; --neg-mark:  #FF5A54; --neg-bg:  rgba(255,90,84,.14);
  --warn:      #FFC14D; --warn-mark: #FF9A3D; --warn-bg: rgba(255,193,77,.13);
  --info:      #8FA9FF; --info-bg:   rgba(109,147,255,.14);
  --accent:    #6D93FF;
  --accent-ink:#8FA9FF;
  --accent-solid: #6D93FF;
  --on-accent:    #151310;
  --shadow:    0 1px 2px rgba(0,0,0,.3);
  --shadow-md: 0 4px 16px rgba(0,0,0,.4);
  --shadow-lg: 0 12px 40px rgba(0,0,0,.5);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background: var(--paper);
  color: var(--ink);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Every figure aligns in a column. Non-negotiable in a money app. */
.mono, .stat-value, .tx-amount, .cat-val, input[type="number"] {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

/* The editorial voice: a serif for the things the eye lands on first —
   the brand, section titles and the headline figures. Everything
   operational (labels, controls, rows) stays in the sans, so the serif
   keeps its weight instead of becoming wallpaper. */
.brand, .auth-brand, .card-title, .stat-value, .empty-title, .modal .card-title {
  font-family: var(--serif);
  font-weight: 500;
}
.brand, .auth-brand { letter-spacing: .01em; }
.card-title  { font-size: 17px; letter-spacing: -.01em; }
.empty-title { font-size: 17px; }

.hidden { display: none !important; }
[hidden]  { display: none !important; }
.spacer   { flex: 1; }

/* ── Shell ── */
.shell { max-width: 960px; margin: 0 auto; padding: 0 20px 96px; }

.topbar {
  position: sticky; top: 0; z-index: 60;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(1.6) blur(14px);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  border-bottom: 1px solid var(--line);
  padding: 14px 20px; margin: 0 -20px 22px;
  display: flex; align-items: center; gap: 10px;
}
.brand {
  font-size: 16px; font-weight: 600; letter-spacing: -.32px;
  display: flex; align-items: center; gap: 9px; margin-right: auto;
  white-space: nowrap;
}
/* The mark. It was a 7px dot; a lettered badge gives the brand an
   anchor without needing an image file (and works in every view that
   already renders this span — app shell, auth, legal pages). */
.brand-dot, .dot {
  width: 25px; height: 25px; border-radius: 7px;
  background: var(--accent-solid); flex-shrink: 0;
  display: inline-grid; place-items: center;
}
.brand-dot::before, .dot::before {
  content: 'A';
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px; font-weight: 700; line-height: 1;
  color: var(--on-accent);
}

/* ── Account filter ── */
/* A list that grows and a button that must not move do not belong in the same
   scrolling box: the button is whatever gets pushed past the edge first, which
   is how "+ New account" ended up sliced in half. So the row is split — the
   accounts scroll, the button is pinned beside them — and the strip stays one
   line tall whether there are three accounts or thirty. */
.acct-filter {
  display: flex; gap: 6px; align-items: center;
  padding: 2px 0 12px;
}
.acct-scroll-wrap { position: relative; flex: 1; min-width: 0; }
.acct-scroll {
  display: flex; gap: 6px;
  overflow-x: auto;
  overflow-y: hidden;          /* declared, or CSS promotes it to auto — see .tabs */
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.acct-scroll::-webkit-scrollbar { display: none; }
.acct-add { flex-shrink: 0; }

/* Scrolling with the scrollbar hidden is invisible: a chip cut off at the edge
   reads as broken rather than as more to come. These fades are the only hint
   there is, so they appear exactly when there is something past the edge and
   go once you reach it. */
.acct-scroll-wrap::before,
.acct-scroll-wrap::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 34px;
  pointer-events: none; opacity: 0; transition: opacity .15s;
}
.acct-scroll-wrap::before {
  left: 0; background: linear-gradient(to right, var(--paper), transparent);
}
.acct-scroll-wrap::after {
  right: 0; background: linear-gradient(to left, var(--paper), transparent);
}
.acct-scroll-wrap.has-before::before,
.acct-scroll-wrap.has-more::after { opacity: 1; }

.chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 13px; border-radius: 999px;
  border: 1px solid var(--line-2); background: var(--surface);
  font: inherit; font-size: 13px; font-weight: 500; color: var(--ink-2);
  cursor: pointer; white-space: nowrap; flex-shrink: 0;
  transition: background .15s, color .15s, border-color .15s;
}
.chip:hover { border-color: var(--ink-3); color: var(--ink); }
.chip.active { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.chip-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

/* ── Tabs ── */
.tabs {
  display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none;
  border-bottom: 1px solid var(--line); margin-bottom: 26px;
  -webkit-overflow-scrolling: touch;
  /* Declared, not left to the browser. Once one axis stops being `visible`,
     CSS quietly promotes the other to `auto` — and the tabs' -1px bottom
     margin leaves the content a pixel taller than the strip, which is all a
     touchscreen needs to grab it and wobble the whole bar up and down. */
  overflow-y: hidden;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  padding: 11px 15px; border: 0; background: none;
  font: inherit; font-size: 14px; font-weight: 500; color: var(--ink-3);
  cursor: pointer; white-space: nowrap; flex-shrink: 0;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color .15s, border-color .15s;
}
.tab:hover { color: var(--ink-2); }
.tab.active { color: var(--ink); border-bottom-color: var(--accent); font-weight: 600; }

/* ── Cards ── */
.stack { display: flex; flex-direction: column; gap: 16px; }

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.card-head {
  display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap;
  padding: 17px var(--pad);
  border-bottom: 1px solid var(--line);
}
.card-title { font-size: 15px; font-weight: 600; letter-spacing: -.2px; }
.card-sub   { font-size: 12.5px; color: var(--ink-3); margin-top: 3px; line-height: 1.45; }
.card-pad   { padding: var(--pad); }

.grid   { display: grid; gap: 14px; }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }

/* ── Stats ── */
.stat-label {
  font-size: 10px; font-weight: 600; letter-spacing: .18em;
  text-transform: uppercase; color: var(--ink-3);
}
/* Serif figures need air, not the tight tracking a grotesk wants. */
.stat-value {
  font-size: 32px; font-weight: 500; letter-spacing: -.02em;
  margin-top: 10px; line-height: 1.08;
}
.stat-meta { font-size: 12px; color: var(--ink-3); margin-top: 7px; line-height: 1.45; }
.pos { color: var(--pos); }
.neg { color: var(--neg); }

/* ── Buttons ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 9px 15px; border-radius: var(--r-sm);
  border: 1px solid var(--line-2); background: var(--surface);
  font: inherit; font-size: 13.5px; font-weight: 500; color: var(--ink);
  cursor: pointer; white-space: nowrap;
  transition: background .15s, border-color .15s, opacity .15s;
}
.btn:hover:not(:disabled) { background: var(--surface-2); border-color: var(--ink-3); }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.btn-primary {
  background: var(--accent-solid); color: var(--on-accent);
  border-color: var(--accent-solid); font-weight: 600;
}
.btn-primary:hover:not(:disabled) { filter: brightness(1.08); }
.btn-sm    { padding: 6px 11px; font-size: 12.5px; }
.btn-ghost { border-color: transparent; background: none; color: var(--ink-2); }
.btn-ghost:hover:not(:disabled) { background: var(--surface-2); border-color: transparent; }
.btn-danger { color: var(--neg); }
.btn-block  { width: 100%; padding: 12px; }

.row { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }

/* ── Forms ── */
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.label { font-size: 12.5px; font-weight: 500; color: var(--ink-2); }
.input, .select {
  width: 100%; padding: 10px 12px;
  border: 1px solid var(--line-2); border-radius: var(--r-sm);
  background: var(--surface); color: var(--ink);
  font: inherit; font-size: 14px;
  transition: border-color .15s, box-shadow .15s;
}
.input:focus, .select:focus {
  outline: none; border-color: var(--ink);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ink) 9%, transparent);
}
.input::placeholder { color: var(--ink-3); }
.form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: 12px; }

summary { list-style: none; cursor: pointer; }
summary::-webkit-details-marker { display: none; }
summary::before { content: '▸ '; color: var(--ink-3); }
details[open] > summary::before { content: '▾ '; }

/* ── Rows (transactions, debts) ── */
.tx {
  display: flex; align-items: center; gap: 13px;
  padding: 13px var(--pad);
  border-bottom: 1px solid var(--line);
}
.tx:last-child { border-bottom: 0; }
@media (hover: hover) { .tx:hover { background: var(--surface-2); } }
.tx-bar  { width: 3px; align-self: stretch; border-radius: 2px; flex-shrink: 0; min-height: 34px; }
.tx-main { flex: 1; min-width: 0; }
.tx-name {
  font-size: 14px; font-weight: 500; letter-spacing: -.1px;
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
}
.tx-name.unnamed { color: var(--ink-3); font-style: italic; }
.tx-meta {
  font-size: 11.5px; color: var(--ink-3); margin-top: 4px;
  display: flex; gap: 5px 10px; align-items: center; flex-wrap: wrap;
}
.tx-amount  { font-size: 14.5px; font-weight: 500; white-space: nowrap; flex-shrink: 0; }
.tx-actions { display: flex; gap: 2px; flex-shrink: 0; }
@media (hover: hover) {
  .tx-actions { opacity: 0; transition: opacity .15s; }
  .tx:hover .tx-actions, .tx:focus-within .tx-actions { opacity: 1; }
}

.tag {
  display: inline-flex; align-items: center;
  font-size: 10.5px; font-weight: 500; padding: 2px 7px;
  border-radius: 5px; background: var(--surface-3); color: var(--ink-2);
  white-space: nowrap;
}
.tag-info { background: var(--info-bg); color: var(--info); }
.tag-warn { background: var(--warn-bg); color: var(--warn); }

/* ── Category / comparison rows ── */
.cat-row  { display: flex; align-items: center; gap: 12px; padding: 9px 0; min-width: 0; }
.cat-name {
  font-size: 13px; width: 112px; flex-shrink: 0; text-transform: capitalize;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cat-bar  { flex: 1; height: 6px; background: var(--surface-3); border-radius: 3px; overflow: hidden; min-width: 40px; }
.cat-fill { height: 100%; background: var(--accent); border-radius: 3px; }
.cat-val  { font-size: 13px; font-weight: 500; text-align: right; white-space: nowrap; flex-shrink: 0; }

/* ── Bars & legend ── */
.bar-track { display: flex; height: 9px; border-radius: 5px; overflow: hidden; background: var(--surface-3); }
.bar-seg   { height: 100%; }
.legend      { display: flex; gap: 8px 18px; flex-wrap: wrap; margin-top: 14px; }
.legend-item { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-2); }
.legend-dot  { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; }

/* ── Banners ── */
.banner {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 12px 15px; border-radius: var(--r-sm);
  font-size: 13.5px; line-height: 1.5;
}
.banner > span:first-child { flex-shrink: 0; font-weight: 600; }
.banner-info { background: var(--info-bg); color: var(--info); }
.banner-ok   { background: var(--pos-bg);  color: var(--pos); }
.banner-warn { background: var(--warn-bg); color: var(--warn); }
.banner-err  { background: var(--neg-bg);  color: var(--neg); }

/* ── PWA install banner ── */
.pwa-banner {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 90;
  max-width: 480px; margin: 0 auto;
  display: flex; gap: 10px; align-items: center;
  padding: 12px 14px; border-radius: var(--r-sm);
  background: var(--info-bg); color: var(--info);
  font-size: 13.5px; line-height: 1.4;
  box-shadow: 0 6px 24px rgba(0,0,0,.18);
}
.pwa-banner-icon { flex-shrink: 0; font-size: 18px; }
.pwa-banner-text { flex: 1; }
.pwa-banner-close {
  flex-shrink: 0; background: none; border: none; cursor: pointer;
  color: inherit; opacity: .6; font-size: 14px; padding: 4px;
}
.pwa-banner-close:hover { opacity: 1; }

/* ── Empty states ── */
.empty       { padding: 52px 24px; text-align: center; }
.empty-title { font-size: 15px; font-weight: 600; margin-bottom: 7px; }
.empty-sub   { font-size: 13.5px; color: var(--ink-3); line-height: 1.55; max-width: 400px; margin: 0 auto; }

/* ── Modal ── */
.overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(23,24,28,.42);
  backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  animation: fade .16s ease;
}
.modal {
  background: var(--surface); border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  width: 100%; max-width: 460px; max-height: 88vh; overflow: auto;
  animation: rise .2s cubic-bezier(.2,.8,.3,1);
}
@keyframes fade { from { opacity: 0 } }
@keyframes rise { from { opacity: 0; transform: translateY(10px) scale(.99) } }

/* ── Upload dropzone ── */
.drop {
  border: 1.5px dashed var(--line-2); border-radius: var(--r);
  padding: 32px 20px; text-align: center; cursor: pointer;
  transition: border-color .15s, background .15s;
}
.drop:hover, .drop.over { border-color: var(--ink); background: var(--surface-2); }
.drop-icon  { font-size: 26px; margin-bottom: 10px; }
.drop-title { font-size: 14px; font-weight: 500; }
.drop-sub   { font-size: 12.5px; color: var(--ink-3); margin-top: 5px; }

/* ── Spinner ── */
.spinner {
  width: 13px; height: 13px; border-radius: 50%;
  border: 2px solid color-mix(in srgb, currentColor 25%, transparent);
  border-top-color: currentColor;
  animation: spin .6s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg) } }

/* ── Sign in ── */
.auth-wrap {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 24px; background: var(--paper);
}
.auth-card {
  width: 100%; max-width: 396px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow-md);
  padding: 34px 30px; display: flex; flex-direction: column; gap: 15px;
}
.auth-brand {
  font-size: 19px; font-weight: 600; letter-spacing: -.4px;
  display: flex; align-items: center; gap: 9px;
}
.auth-brand .light { color: var(--ink-3); font-weight: 400; }
.auth-sub    { font-size: 13.5px; color: var(--ink-2); line-height: 1.55; margin-bottom: 3px; }
.auth-switch { font-size: 13px; color: var(--ink-2); text-align: center; }
.auth-switch a { color: var(--accent); text-decoration: none; margin-left: 4px; font-weight: 500; }
.auth-switch a:hover { text-decoration: underline; }
.auth-foot {
  font-size: 11.5px; color: var(--ink-3); text-align: center; line-height: 1.55;
  border-top: 1px solid var(--line); padding-top: 15px;
}
.auth-link {
  font-size: 12.5px; color: var(--ink-3); text-align: right;
  text-decoration: none; margin-top: -8px; align-self: flex-end;
}
.auth-link:hover { color: var(--ink-2); text-decoration: underline; }

/* ═══════════ Phones ═══════════
   The receipt camera only exists here, so this is the primary
   surface, not an afterthought. */
@media (max-width: 640px) {
  :root { --pad: 15px; }

  .shell  { padding: 0 14px 90px; }
  .topbar { padding: 11px 14px; margin: 0 -14px 16px; gap: 8px; flex-wrap: wrap; }
  .brand  { font-size: 15px; }
  .topbar .btn { padding: 7px 11px; font-size: 12.5px; }

  .stat-value { font-size: 25px; letter-spacing: -1px; }
  .grid-3, .grid-2 { grid-template-columns: 1fr; }
  .card-head { padding: 15px; }
  .tab { padding: 10px 12px; font-size: 13.5px; }

  /* Rows become two lines: identity above, money to the right,
     actions below. Nothing clips, everything stays tappable. */
  .tx {
    display: grid;
    grid-template-columns: 3px 1fr auto;
    grid-template-areas: "bar main amount" "bar acts acts";
    gap: 3px 11px;
    padding: 13px 15px;
    align-items: center;
  }
  .tx-bar    { grid-area: bar; min-height: 100%; }
  .tx-main   { grid-area: main; }
  .tx-amount { grid-area: amount; font-size: 15px; align-self: center; }
  .tx-actions {
    grid-area: acts; opacity: 1;
    justify-content: flex-start; margin-top: 8px; gap: 4px;
  }
  .tx-actions .btn { padding: 5px 10px; }

  .cat-row  { flex-wrap: wrap; gap: 7px 10px; }
  .cat-name { width: auto; flex: 1 1 100%; }
  .cat-bar  { order: 3; flex: 1 1 100%; }
  .cat-val  { order: 2; }

  .form-row { grid-template-columns: 1fr; }

  /* Sheet-style modal, the way a native app would do it */
  .overlay { padding: 0; align-items: flex-end; }
  .modal {
    max-width: 100%; max-height: 92vh;
    border-radius: var(--r-lg) var(--r-lg) 0 0;
  }
  @keyframes rise { from { opacity: 0; transform: translateY(24px) } }

  .auth-card { padding: 28px 22px; box-shadow: none; border: 0; background: none; }
  .empty { padding: 40px 18px; }
}

/* Larger touch targets where there is no mouse */
@media (hover: none) {
  .btn-sm { padding: 8px 12px; }
  .tab    { padding: 12px 14px; }
}

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

/* ── Avatar & user menu ── */
.avatar {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; overflow: hidden; flex-shrink: 0;
  color: #fff; font-weight: 600; line-height: 1;
  background: var(--ink-3);
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }

#user-menu { position: relative; }
.user-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 10px 4px 4px; border-radius: 999px;
  border: 1px solid var(--line-2); background: var(--surface);
  font: inherit; cursor: pointer; color: var(--ink);
}
.user-btn:hover { background: var(--surface-2); }
.user-name {
  font-size: 13px; font-weight: 500; max-width: 130px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.user-pop {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 80;
  width: 240px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--shadow-lg); overflow: hidden;
}
.user-pop-head {
  display: flex; align-items: center; gap: 11px;
  padding: 14px; border-bottom: 1px solid var(--line);
}
.user-pop-item {
  display: block; width: 100%; text-align: left;
  padding: 11px 14px; border: 0; background: none;
  font: inherit; font-size: 13.5px; color: var(--ink); cursor: pointer;
}
.user-pop-item:hover { background: var(--surface-2); }

@media (max-width: 640px) {
  .user-name { display: none; }
  .user-btn { padding: 4px; }
}

/* ── Google sign-in button ── */
.btn-google {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; padding: 11px;
  border: 1px solid var(--line-2); border-radius: var(--r-sm);
  background: var(--surface); color: var(--ink);
  font: inherit; font-size: 14px; font-weight: 500; cursor: pointer;
}
.btn-google:hover { background: var(--surface-2); }
.btn-google svg { width: 18px; height: 18px; flex-shrink: 0; }
.auth-divider {
  display: flex; align-items: center; gap: 12px;
  color: var(--ink-3); font-size: 12px; margin: 2px 0;
}
.auth-divider::before, .auth-divider::after {
  content: ''; flex: 1; height: 1px; background: var(--line);
}

/* ── Theme picker (in the user menu) ── */
.theme-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; padding: 10px 14px; border-top: 1px solid var(--line);
}
.theme-row-label { font-size: 12px; color: var(--ink-3); }
.theme-seg {
  display: inline-flex; gap: 2px; padding: 2px;
  background: var(--surface-2); border-radius: 999px;
}
.theme-seg button {
  border: 0; background: none; cursor: pointer;
  padding: 4px 10px; border-radius: 999px;
  font: inherit; font-size: 11.5px; color: var(--ink-2);
}
.theme-seg button.active { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }