/* ─── Reset & Tokens ─────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* Crimson & mono: a near-black/white base with one bold crimson accent,
     carrying the "market signal" idea (this IS the up/down-alert hue family)
     rather than a decorative color bolted on top. --fire/--grass/--spark
     stay semantic-only (loss/gain/highlight) and are deliberately shifted
     away from --brand's hue so a red price drop is never confused with the
     brand color itself. Dark is the primary/default identity; light gets
     equal polish, not an afterthought inversion. */
  --ink:   #111114;
  --paper: #fafafa;
  --brand: #e32b4c;
  --brand-hover: #c4213e;
  --fire:  #f2542a;
  --grass: #2fbf71;
  --spark: #e8a63d;

  --bg: var(--paper);
  --bg-elevated: #ffffff;
  --bg-sunken: #f1f1f3;
  --bg-modal: #ffffff;
  --border: #e4e4e8;
  --border-lit: #cccdd3;
  --text: var(--ink);
  --text-muted: #57575f;
  --text-dim: #8d8d95;
  --brand-on: #ffffff;
  --overlay: rgba(10, 10, 12, 0.55);
  --shadow: 0 20px 60px -12px rgba(10, 10, 12, 0.2);
  --focus-ring: 0 0 0 3px rgba(227, 43, 76, 0.3);
  --fire-dim: rgba(242, 84, 42, 0.1);
  --grass-dim: rgba(47, 191, 113, 0.1);
  --spark-dim: rgba(232, 166, 61, 0.1);
  --brand-dim: rgba(227, 43, 76, 0.09);

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --transition: 0.15s ease;

  --font-display: 'Sora', ui-rounded, 'Segoe UI Semibold', system-ui, sans-serif;
  --font-body: 'Manrope', ui-sans-serif, 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', Menlo, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b0b0e;
    --bg-elevated: #17171c;
    --bg-sunken: #060607;
    --bg-modal: #17171c;
    --border: #27272d;
    --border-lit: #3a3a42;
    --text: #f5f5f7;
    --text-muted: #9d9da5;
    --text-dim: #6c6c74;
    --overlay: rgba(3, 3, 4, 0.78);
    --shadow: 0 24px 70px -14px rgba(0, 0, 0, 0.85);
    --focus-ring: 0 0 0 3px rgba(227, 43, 76, 0.45);
    --fire-dim: rgba(242, 84, 42, 0.16);
    --grass-dim: rgba(47, 191, 113, 0.16);
    --spark-dim: rgba(232, 166, 61, 0.16);
    --brand-dim: rgba(227, 43, 76, 0.16);
  }
}
:root[data-theme="dark"] {
  --bg: #0b0b0e;
  --bg-elevated: #17171c;
  --bg-sunken: #060607;
  --bg-modal: #17171c;
  --border: #27272d;
  --border-lit: #3a3a42;
  --text: #f5f5f7;
  --text-muted: #9d9da5;
  --text-dim: #6c6c74;
  --overlay: rgba(3, 3, 4, 0.78);
  --shadow: 0 24px 70px -14px rgba(0, 0, 0, 0.85);
  --focus-ring: 0 0 0 3px rgba(227, 43, 76, 0.45);
  --fire-dim: rgba(242, 84, 42, 0.16);
  --grass-dim: rgba(47, 191, 113, 0.16);
  --spark-dim: rgba(232, 166, 61, 0.16);
  --brand-dim: rgba(227, 43, 76, 0.16);
}
:root[data-theme="light"] {
  --bg: var(--paper);
  --bg-elevated: #ffffff;
  --bg-sunken: #f1f1f3;
  --bg-modal: #ffffff;
  --border: #e4e4e8;
  --border-lit: #cccdd3;
  --text: var(--ink);
  --text-muted: #57575f;
  --text-dim: #8d8d95;
  --overlay: rgba(10, 10, 12, 0.55);
  --shadow: 0 20px 60px -12px rgba(10, 10, 12, 0.2);
  --focus-ring: 0 0 0 3px rgba(227, 43, 76, 0.3);
  --fire-dim: rgba(242, 84, 42, 0.1);
  --grass-dim: rgba(47, 191, 113, 0.1);
  --spark-dim: rgba(232, 166, 61, 0.1);
  --brand-dim: rgba(227, 43, 76, 0.09);
}

html, body {
  height: 100%;
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  transition: background var(--transition), color var(--transition);
}

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

/* ─── Theme toggle (global, visible on every screen) ────────────────────── */
.theme-toggle {
  position: fixed;
  top: 1.1rem;
  right: 1.1rem;
  z-index: 500;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text-muted);
  cursor: pointer;
  transition: border-color var(--transition), color var(--transition), transform 0.1s ease;
}
.theme-toggle:hover { color: var(--text); border-color: var(--border-lit); }
.theme-toggle:active { transform: scale(0.92); }
.theme-toggle svg { width: 17px; height: 17px; display: block; }
.theme-toggle .icon-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: block; }

/* ─── Screens ────────────────────────────────────────────────────────────── */
.screen { display: none; min-height: 100vh; }
.screen.active { display: flex; flex-direction: column; }

/* ─── Brandmark (abstract two-tone badge, not a literal logo copy) ──────── */
.brandmark {
  --sz: 34px;
  width: var(--sz);
  height: var(--sz);
  flex-shrink: 0;
  display: inline-block;
  background-image: url("/static/img/logo-mark-dark.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
/* logo-mark-dark.png's white pulse line disappears against a light page, so
   light theme swaps to logo-mark-light.png (same art, pulse line in ink
   instead of white) rather than trying to force one image to work on both. */
:root[data-theme="light"] .brandmark { background-image: url("/static/img/logo-mark-light.png"); }
.brandmark.small { --sz: 22px; }

/* ─── Auth Screen ─────────────────────────────────────────────────────────── */
/* verify-screen reuses the same centered-card layout (.auth-container/.auth-bg). */
#auth-screen, #verify-screen {
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.auth-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 50% 0%, var(--brand-dim) 0%, transparent 70%),
    radial-gradient(circle, var(--border) 1px, transparent 1px);
  background-size: auto, 28px 28px;
  background-position: center, center;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 20%, #000 0%, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 60% at 50% 20%, #000 0%, transparent 75%);
  pointer-events: none;
}

.auth-container {
  position: relative;
  width: 100%;
  max-width: 420px;
  padding: 2.5rem 2rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  animation: fadeSlideUp 0.35s ease;
  overflow: hidden;
}
.auth-container::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--brand), transparent);
}

@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

.logo-block { text-align: center; margin-bottom: 2rem; }
.logo-block .brandmark { margin-bottom: 0.9rem; }

.logo-title {
  font-family: var(--font-display);
  font-size: 1.85rem;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.logo-sub {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin-top: 0.35rem;
}

.auth-legal-hint { text-align: center; margin-top: 0.9rem; }
.auth-legal-hint a { color: var(--text-muted); }
.auth-legal-hint a:hover { color: var(--brand); }
.auth-legal-footer { margin-top: 1.5rem; font-size: 0.72rem; }

/* ─── Google Sign-In ─────────────────────────────────────────────────────── */
.btn-google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  width: 100%;
  padding: 0.7rem 1rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-lit);
  background: var(--bg-elevated);
  color: var(--text);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.88rem;
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
}
.btn-google:hover { border-color: var(--brand); background: var(--bg-sunken); }
.btn-google svg { width: 18px; height: 18px; flex-shrink: 0; }

.auth-divider {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--text-dim);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 1.1rem 0;
}
.auth-divider::before, .auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}

.settings-google-linked-note { margin-bottom: 1.25rem; }

/* ─── Tabs ───────────────────────────────────────────────────────────────── */
.auth-tabs {
  display: flex;
  border-bottom: 1px solid var(--border);
  margin-bottom: 1.5rem;
}

.tab-btn {
  flex: 1;
  padding: 0.65rem;
  background: none;
  border: none;
  color: var(--text-muted);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color var(--transition), border-color var(--transition);
}
.tab-btn.active { color: var(--brand); border-bottom-color: var(--brand); }
.tab-btn:hover:not(.active) { color: var(--text); }

/* ─── Forms ──────────────────────────────────────────────────────────────── */
.auth-form { display: none; flex-direction: column; gap: 1rem; }
.auth-form.active { display: flex; }

/* Same layout as .auth-form but always visible by default (toggled only via
   .hidden, never .active) - used outside the login/register tab pair so it
   isn't swept up by the tab-switch handler's global .auth-form reset. */
.stacked-form { display: flex; flex-direction: column; gap: 1rem; }

.field-group { display: flex; flex-direction: column; gap: 0.4rem; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; }

label {
  font-size: 0.8rem;
  font-family: var(--font-body);
  font-weight: 600;
  color: var(--text-muted);
}

/* Groups of related checkboxes (e.g. card conditions) use <fieldset>/<legend>
   instead of a plain <label> - a <label> only associates with one control,
   but a fieldset's legend is the correct way to label a whole group for
   screen readers. Stripped of the browser's default fieldset chrome so it
   still matches the plain .field-group look. */
.conditions-fieldset { border: none; padding: 0; margin: 0; min-width: 0; }
.conditions-fieldset legend {
  padding: 0;
  font-size: 0.8rem;
  font-family: var(--font-body);
  font-weight: 600;
  color: var(--text-muted);
}

/* Visually hidden but still readable by screen readers - for labels needed
   only for accessibility where the visual design already conveys the same
   thing another way (e.g. an adjacent heading-style prompt). */
.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;
}

.required { color: var(--fire); }
.optional { color: var(--text-dim); font-weight: 400; font-style: italic; }

.field-hint { font-size: 0.78rem; color: var(--text-dim); font-style: italic; }

/* Condition filters as toggle chips rather than plain checkboxes. */
.condition-checkboxes { display: flex; flex-wrap: wrap; gap: 0.45rem; }

.checkbox-inline {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 0.32rem 0.7rem;
  transition: border-color var(--transition), color var(--transition), background var(--transition);
}
.checkbox-inline:has(input:checked) {
  border-color: var(--brand);
  color: var(--brand);
  background: var(--brand-dim);
}
.checkbox-inline input[type="checkbox"] { accent-color: var(--brand); cursor: pointer; }

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
select {
  background: var(--bg-sunken);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 0.95rem;
  padding: 0.6rem 0.85rem;
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition);
  width: 100%;
  appearance: none;
}
input:focus, select:focus {
  border-color: var(--brand);
  box-shadow: var(--focus-ring);
}
input::placeholder { color: var(--text-dim); }
select option { background: var(--bg-elevated); }

/* ─── Buttons ────────────────────────────────────────────────────────────── */
/* One consistent keyboard-focus indicator for every button/link in the app,
   themed to match (inputs get their own :focus treatment above since they
   use a border-color change instead of a ring). */
button:focus-visible, a:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.btn-primary {
  background: linear-gradient(180deg, var(--brand) 0%, var(--brand-hover) 100%);
  border: 1px solid var(--brand);
  border-radius: var(--radius-sm);
  color: var(--brand-on);
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 700;
  padding: 0.7rem 1.4rem;
  transition: box-shadow var(--transition), transform 0.1s, filter var(--transition);
  white-space: nowrap;
}
.btn-primary:hover { filter: brightness(1.08); box-shadow: 0 6px 22px var(--brand-dim); }
.btn-primary:active { transform: scale(0.98); filter: brightness(0.96); }
/* Pro perk cue on the primary "+ Add Item" action - stays the brand crimson
   fill (this is still the app's one primary-action color), just picks up a
   spark-gold ring signaling the free-tier item cap doesn't apply here. */
.btn-primary.is-pro { box-shadow: 0 0 0 2px var(--spark), 0 6px 20px -4px rgba(232, 166, 61, 0.6); }
.btn-primary.is-pro:hover { box-shadow: 0 0 0 2px var(--spark), 0 8px 24px -4px rgba(232, 166, 61, 0.75); }

.btn-ghost {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.55rem 1rem;
  transition: border-color var(--transition), color var(--transition);
}
.btn-ghost:hover { border-color: var(--border-lit); color: var(--text); }
.btn-ghost.danger { border-color: transparent; }
.btn-ghost.danger:hover { border-color: var(--fire); color: var(--fire); }
.btn-ghost.btn-sm { padding: 0.35rem 0.65rem; font-size: 0.72rem; }

.btn-icon { font-size: 1rem; margin-right: 0.25rem; }

.form-error {
  background: var(--fire-dim);
  border: 1px solid rgba(228, 87, 46, 0.3);
  border-radius: var(--radius-sm);
  color: var(--fire);
  font-size: 0.85rem;
  padding: 0.6rem 0.9rem;
}
.form-success {
  background: var(--grass-dim);
  border: 1px solid rgba(63, 143, 92, 0.3);
  border-radius: var(--radius-sm);
  color: var(--grass);
  font-size: 0.85rem;
  padding: 0.6rem 0.9rem;
}
.hidden { display: none !important; }

/* ─── App Header ─────────────────────────────────────────────────────────── */
/* The bar itself spans edge-to-edge (background/border look right full-bleed
   on any monitor width), but its actual content is capped and centered via
   .app-header-inner below - otherwise justify-content:space-between just
   stretches the logo and nav further and further apart as the viewport
   widens, which is what made everything read as oddly small/spread-out on
   a 2K+ display even though the page content below was already capped. */
.app-header {
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 100;
}
.app-header::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, var(--brand) 0%, transparent 28%);
  opacity: 0.6;
}
.app-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1100px;
  width: 100%;
  margin: 0 auto;
  padding: 0.9rem 2rem;
}

.header-left { display: flex; align-items: center; gap: 0.55rem; }
.header-title { font-family: var(--font-display); font-weight: 800; font-size: 1.05rem; letter-spacing: -0.02em; }

.logo-home-btn {
  background: none;
  border: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
  padding: 0.2rem;
  margin: -0.2rem;
  border-radius: var(--radius-sm);
  opacity: 1;
  transition: opacity var(--transition);
}
.logo-home-btn:hover { opacity: 0.75; }
.header-right { display: flex; align-items: center; gap: 0.75rem; padding-right: 3rem; position: relative; }
.header-user { font-size: 0.85rem; color: var(--text-muted); }

/* Desktop: invisible to layout (its buttons sit inline in .header-right as
   direct flex items, unchanged from before this existed) and the toggle
   that only makes sense once the panel becomes a real dropdown is hidden.
   Mobile overrides both - see the responsive block. */
.header-menu-toggle { display: none; }
.header-menu-panel { display: contents; }

/* ─── Dashboard ──────────────────────────────────────────────────────────── */
.dashboard { flex: 1; padding: 2rem; max-width: 1100px; width: 100%; margin: 0 auto; }
.dashboard-narrow { max-width: 560px; display: flex; flex-direction: column; gap: 1.25rem; }

/* ─── App footer (bug report / support contact) ─────────────────────────── */
/* A sibling of <main> within the same .screen.active flex column - main's
   flex:1 already eats any leftover vertical space, so this sits pinned to
   the bottom of the viewport on a short page and simply follows after the
   content (no position:fixed/overlap-with-content juggling needed) once a
   page is tall enough to scroll. */
.app-footer {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.6rem;
  padding: 1rem 2rem;
  border-top: 1px solid var(--border);
  font-size: 0.78rem;
  color: var(--text-dim);
}
.app-footer-link { color: var(--text-dim); text-decoration: none; transition: color var(--transition); }
.app-footer-link:hover { color: var(--brand); text-decoration: underline; }
.app-footer-sep { color: var(--border-lit); }

/* ─── Settings ───────────────────────────────────────────────────────────── */
.settings-section {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.4rem;
}
.settings-section h3 {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1rem;
  margin-bottom: 1rem;
}
.settings-section h3::before {
  content: "";
  width: 3px;
  height: 1em;
  border-radius: 2px;
  background: var(--brand);
  flex-shrink: 0;
}
.settings-current-email { margin-bottom: 1rem; }
.verify-resend-hint { text-align: center; margin-top: 0.4rem; }
.verify-resend-hint a { color: var(--brand); text-decoration: none; }
.verify-resend-hint a:hover { text-decoration: underline; }

/* ─── Admin ──────────────────────────────────────────────────────────────── */
.admin-table-wrap {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.admin-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; white-space: nowrap; }

.admin-table th {
  text-align: left;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-dim);
  padding: 0;
  border-bottom: 1px solid var(--border);
}

/* Real <button> inside each <th> (not the <th> itself) so the column header
   is keyboard-focusable/operable, with sort state conveyed via aria-sort on
   the <th> rather than a custom class. */
.admin-sort-btn {
  display: flex;
  align-items: center;
  width: 100%;
  background: none;
  border: none;
  font: inherit;
  color: inherit;
  text-transform: inherit;
  letter-spacing: inherit;
  cursor: pointer;
  padding: 0.85rem 1rem;
  transition: color var(--transition);
}
.admin-sort-btn:hover { color: var(--text); }
.admin-sort-btn::after {
  content: "↕";
  display: inline-block;
  margin-left: 0.35rem;
  font-size: 0.9em;
  opacity: 0.35;
}
th[aria-sort="ascending"] .admin-sort-btn,
th[aria-sort="descending"] .admin-sort-btn { color: var(--brand); }
th[aria-sort="ascending"] .admin-sort-btn::after { content: "↑"; opacity: 1; }
th[aria-sort="descending"] .admin-sort-btn::after { content: "↓"; opacity: 1; }
.admin-col-num .admin-sort-btn { justify-content: flex-end; }

.admin-table td {
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  font-family: var(--font-mono);
}

.admin-table tbody tr:last-child td { border-bottom: none; }
.admin-table tbody tr:hover { background: var(--bg-sunken); }

/* display:flex directly on a <td> takes it out of the table's column layout
   in Chromium - it renders as a block-level flex container instead of a
   table-cell, so two flex <td>s in the same row stack on top of each other
   rather than sitting side by side as columns. table-cell + an inner flex
   wrapper (added by JS below) keeps the row/column grid intact while still
   getting flex's alignment/gap for each cell's own content (icon+text,
   text+badge, or a row of buttons). */
.admin-user-cell, .admin-email-cell, .admin-actions-cell {
  display: table-cell;
  vertical-align: middle;
  font-family: var(--font-body);
}
.admin-cell-flex { display: flex; align-items: center; gap: 0.5rem; }

.admin-col-num { text-align: right; font-variant-numeric: tabular-nums; }

.admin-col-actions {
  text-align: right;
  /* Matches .admin-sort-btn's own padding - every other header gets this
     via that button wrapper, but Actions isn't sortable so it has no
     button, and .admin-table th's own padding is 0. Without this override
     the header text sits flush against the cell edge with no breathing
     room, easy to miss entirely next to the padded headers beside it. */
  padding: 0.85rem 1rem;
}
.admin-actions-cell .admin-cell-flex { justify-content: flex-end; }

.badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 0.15rem 0.5rem;
  border-radius: 20px;
}

.badge-admin { background: var(--brand-dim); color: var(--brand); }
.badge-verified { background: var(--grass-dim); color: var(--grass); }
.badge-pending { background: var(--fire-dim); color: var(--fire); }
.badge-pro { background: var(--spark-dim); color: var(--spark); }
.badge-free { background: var(--bg-sunken); color: var(--text-dim); }

/* The header's own Pro badge (unlike .badge-pro in the admin table) is a
   visible perk the subscriber sees on every visit, so it gets real shine
   instead of a flat tint - a spark-gold gradient + glow rather than another
   muted pill. */
.pro-badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 0.2rem 0.55rem;
  border-radius: 20px;
  color: #2a1c04;
  background: linear-gradient(135deg, #ffd980, var(--spark) 65%, #c97f1f);
  box-shadow: 0 0 0 1px rgba(232, 166, 61, 0.5), 0 2px 12px -3px rgba(232, 166, 61, 0.7);
}

/* ─── Trends ─────────────────────────────────────────────────────────────── */
.trends-filters { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.trends-window-group { max-width: 200px; }

.trends-price-filter { display: flex; align-items: center; gap: 0.5rem; }
.trends-price-filter input {
  width: 90px;
  /* Matches the select's implicit height in .trends-window-group so the
     two controls line up on one row instead of the number input looking
     shorter next to it. */
  padding: 0.6rem 0.7rem;
}
.trends-price-sep { color: var(--text-dim); font-size: 0.85rem; }

/* ─── Pricing ────────────────────────────────────────────────────────────── */
.pricing-intro { color: var(--text-muted); font-size: 0.9rem; margin: -0.75rem 0 1.5rem; }

.pricing-trial-banner {
  max-width: 720px;
  background: var(--spark-dim);
  border: 1px solid rgba(232, 166, 61, 0.3);
  color: var(--spark);
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0.7rem 1rem;
  border-radius: var(--radius-md);
  margin-bottom: 1.25rem;
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.25rem;
  max-width: 720px;
}

.pricing-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.6rem;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.pricing-card-featured {
  border-color: var(--brand);
  box-shadow: 0 0 0 1px var(--brand), 0 20px 50px -20px var(--brand-dim);
}

.pricing-current-badge {
  position: absolute;
  top: -0.65rem;
  left: 1.4rem;
  background: var(--brand);
  color: var(--brand-on);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.25rem 0.65rem;
  border-radius: 20px;
}

.pricing-card-header { margin-bottom: 1.1rem; }
.pricing-card-header h3 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
}
.pricing-price { display: flex; align-items: baseline; gap: 0.25rem; }
.pricing-amount { font-family: var(--font-display); font-weight: 800; font-size: 2.1rem; letter-spacing: -0.02em; }
.pricing-period { color: var(--text-dim); font-size: 0.85rem; }

.pricing-features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-bottom: 1.3rem;
  flex: 1;
}
.pricing-features li {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  font-size: 0.87rem;
  color: var(--text-muted);
  line-height: 1.4;
}
.pricing-features li::before {
  content: "✓";
  color: var(--grass);
  font-weight: 700;
  flex-shrink: 0;
}

.pricing-usage { font-size: 0.76rem; color: var(--text-dim); margin-bottom: 0.4rem; }
.pricing-usage-bar {
  height: 6px;
  border-radius: 3px;
  background: var(--bg-sunken);
  overflow: hidden;
  margin-bottom: 1.3rem;
}
.pricing-usage-fill { height: 100%; background: var(--brand); border-radius: 3px; transition: width var(--transition); }

.pricing-cta { width: 100%; text-align: center; justify-content: center; }
.pricing-cta:disabled { cursor: default; opacity: 0.7; }

.trends-section-title { margin: 1.75rem 0 0.75rem; }
.trends-section-title:first-of-type { margin-top: 0; }
.trends-section-title h3 {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1rem;
}
.trends-section-title h3::before {
  content: "";
  width: 3px;
  height: 1em;
  border-radius: 2px;
  background: var(--brand);
  flex-shrink: 0;
}

.trends-table-wrap { margin-bottom: 0.5rem; }

.trend-thumb-wrap { position: relative; flex-shrink: 0; }
/* Reuses .card-thumb-zoom's popup styling (size/border/shadow) from the
   dashboard item cards - only the hover trigger needs its own rule since
   the trigger element here is smaller than .card-thumb-wrap. */
.trend-thumb-wrap:hover .card-thumb-zoom { opacity: 1; visibility: visible; transition-delay: 0.1s; }

.trend-thumb {
  width: 32px;
  height: 32px;
  object-fit: contain;
  border-radius: var(--radius-sm);
  background: var(--bg-sunken);
  border: 1px solid var(--border);
  flex-shrink: 0;
  display: block;
  transition: border-color var(--transition);
}
.trend-thumb-wrap:hover .trend-thumb { border-color: var(--brand); }

.sparkline { display: block; }

.trend-positive { color: var(--grass); }
.trend-negative { color: var(--fire); }

.dashboard-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
  gap: 1rem;
  flex-wrap: wrap;
}

.section-header { display: flex; align-items: center; gap: 0.75rem; }
.section-title {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.3rem;
  letter-spacing: -0.015em;
}
.section-title::before {
  content: "";
  width: 4px;
  height: 1.05em;
  border-radius: 2px;
  background: var(--brand);
  flex-shrink: 0;
}

.item-count-badge {
  background: var(--bg-sunken);
  border-radius: 20px;
  font-size: 0.72rem;
  font-family: var(--font-mono);
  color: var(--text-dim);
  padding: 0.15rem 0.6rem;
}

/* ─── Dashboard Widgets ──────────────────────────────────────────────────── */
.stats-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}
.stat-tile {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 0.85rem 1rem;
}
.stat-tile-label {
  display: block;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 0.3rem;
}
.stat-tile-value {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--text);
}

.dashboard-widgets {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
  margin-bottom: 1.75rem;
}
.widget-panel {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.1rem 1.2rem;
}
.widget-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}
.widget-header h3 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.92rem;
}
.widget-link {
  font-size: 0.76rem;
  color: var(--brand);
  text-decoration: none;
  font-weight: 600;
  white-space: nowrap;
}
.widget-link:hover { text-decoration: underline; }
.widget-empty { font-size: 0.82rem; color: var(--text-dim); padding: 0.5rem 0; line-height: 1.5; }

.activity-list, .movers-list { display: flex; flex-direction: column; gap: 0.65rem; }
.activity-row, .mover-row { display: flex; align-items: center; gap: 0.65rem; }
.activity-thumb {
  width: 34px; height: 34px;
  object-fit: contain;
  border-radius: var(--radius-sm);
  background: var(--bg-sunken);
  border: 1px solid var(--border);
  flex-shrink: 0;
  display: block;
}
.activity-info { min-width: 0; flex: 1; }
.activity-title {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.activity-sub { font-size: 0.74rem; color: var(--text-dim); margin-top: 0.1rem; }

/* ─── Items Grid ─────────────────────────────────────────────────────────── */
.items-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1rem; }

.empty-state { grid-column: 1 / -1; text-align: center; padding: 4rem 2rem; color: var(--text-dim); }
.empty-icon { font-size: 2.6rem; color: var(--border-lit); margin-bottom: 1rem; }
.empty-sub { font-size: 0.9rem; margin-top: 0.4rem; }

/* ─── Item Card ──────────────────────────────────────────────────────────── */
.item-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.2rem;
  position: relative;
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
  animation: fadeSlideUp 0.3s ease;
}
.item-card:hover { border-color: var(--border-lit); box-shadow: var(--shadow); transform: translateY(-3px); }
.item-card.triggered { border-color: rgba(201, 143, 34, 0.5); box-shadow: 0 0 0 3px var(--spark-dim); }
.item-card.inactive { opacity: 0.55; }

.card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.7rem; margin-bottom: 0.9rem; }
.card-title-group { display: flex; align-items: flex-start; gap: 0.6rem; flex: 1; min-width: 0; }

.card-thumb-wrap { position: relative; flex-shrink: 0; }
.card-thumb {
  width: 64px; height: 64px;
  object-fit: contain;
  border-radius: var(--radius-sm);
  background: var(--bg-sunken);
  border: 1px solid var(--border);
  display: block;
  transition: border-color var(--transition);
}
.card-thumb-wrap:hover .card-thumb { border-color: var(--brand); }

.card-thumb-zoom {
  position: absolute;
  top: 0; left: 0;
  width: 260px; height: 260px;
  object-fit: contain;
  background: var(--bg-elevated);
  border: 1px solid var(--border-lit);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow);
  z-index: 50;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--transition);
}
.card-thumb-wrap:hover .card-thumb-zoom { opacity: 1; visibility: visible; transition-delay: 0.1s; }

.card-title { font-family: var(--font-display); font-weight: 700; font-size: 0.92rem; color: var(--text); line-height: 1.3; flex: 1; padding-right: 0.5rem; }
.card-id { font-size: 0.72rem; color: var(--text-dim); font-family: var(--font-mono); margin-top: 0.25rem; }
.card-meta { font-size: 0.72rem; color: var(--text-muted); margin-top: 0.2rem; }

.card-badges { display: flex; flex-direction: column; gap: 0.3rem; align-items: flex-end; }

.badge {
  font-size: 0.65rem;
  font-weight: 700;
  padding: 0.16rem 0.5rem;
  border-radius: 20px;
  border: 1px solid transparent;
  white-space: nowrap;
  font-family: var(--font-body);
}
.badge-active    { background: var(--grass-dim); color: var(--grass); }
.badge-inactive  { background: var(--bg-sunken); color: var(--text-dim); }
.badge-foil      { background: var(--spark-dim); color: var(--spark); }
.badge-condition { background: var(--brand-dim); color: var(--brand); cursor: help; }

.card-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; margin-bottom: 1rem; }
.stat { background: var(--bg-sunken); border-radius: var(--radius-sm); padding: 0.5rem 0.7rem; }
.stat-label { font-size: 0.64rem; font-weight: 700; letter-spacing: 0.05em; color: var(--text-dim); text-transform: uppercase; display: block; margin-bottom: 0.15rem; }
.stat-value { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 1.05rem; color: var(--spark); font-weight: 700; }

.card-sparkline-wrap { margin: -0.3rem 0 0.9rem; }
.card-sparkline { display: block; width: 100%; height: 32px; }

.card-result {
  font-size: 0.83rem;
  color: var(--text-muted);
  padding: 0.55rem 0.7rem;
  background: var(--bg-sunken);
  border-radius: var(--radius-sm);
  margin-bottom: 0.9rem;
  min-height: 2.2rem;
  transition: all var(--transition);
}
.card-result.alert { color: var(--spark); background: var(--spark-dim); font-weight: 700; }
.card-result.error { color: var(--fire); background: var(--fire-dim); }

.card-actions { display: flex; gap: 0.5rem; }
.card-actions .btn-ghost { flex: 1; font-size: 0.72rem; padding: 0.45rem 0.5rem; text-align: center; }

.check-spinner { display: inline-block; animation: spin 0.7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ─── Product Search ─────────────────────────────────────────────────────── */
.search-wrap { position: relative; }
.search-wrap input { padding-left: 2.3rem; }
.search-icon {
  position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; color: var(--text-dim); pointer-events: none;
}

.search-results {
  max-height: 320px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-sunken);
}

.search-result {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.6rem 0.8rem;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  transition: background var(--transition);
}
.search-result:last-child { border-bottom: none; }
.search-result:hover { background: var(--bg-elevated); }

.search-result img {
  width: 56px; height: 56px;
  object-fit: contain;
  border-radius: var(--radius-sm);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  flex-shrink: 0;
}

.search-result-info { flex: 1; min-width: 0; }
.search-result-name { font-size: 0.87rem; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-result-sub { font-size: 0.74rem; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-result-price { font-family: var(--font-mono); font-size: 0.8rem; color: var(--spark); font-weight: 700; white-space: nowrap; flex-shrink: 0; }

.picked-product {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem 0.8rem;
  border: 1px solid var(--brand);
  border-radius: var(--radius-md);
  background: var(--brand-dim);
  margin-bottom: 0.7rem;
}
.picked-product-img { width: 48px; height: 48px; object-fit: contain; border-radius: var(--radius-sm); background: var(--bg-elevated); flex-shrink: 0; display: block; }
.picked-product-info { flex: 1; min-width: 0; }
.picked-product-name { font-size: 0.9rem; font-weight: 700; color: var(--text); }
.picked-product-sub { font-size: 0.78rem; color: var(--text-muted); margin-top: 0.15rem; }
.picked-product-price { font-size: 0.78rem; color: var(--spark); font-weight: 700; margin-top: 0.25rem; }

/* ─── Staged modal sections ──────────────────────────────────────────────── */
.stage-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.stage-label .n {
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--bg-sunken);
  color: var(--text-muted);
  display: grid;
  place-items: center;
  font-size: 0.6rem;
  font-family: var(--font-mono);
  flex-shrink: 0;
}

.advanced {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  /* .modal-body is a fixed-height flex column, and a flex item with
     overflow:hidden gets an automatic min-height of 0 per spec - without
     this, once the accordion's content pushes the modal past its max
     height, flexbox shrinks THIS item down to ~0 instead of letting
     modal-body's intended overflow-y:auto scroll kick in, making the
     expanded fields effectively invisible. flex-shrink:0 keeps it at its
     natural content size so the overflow (and scrollbar) happens instead. */
  flex-shrink: 0;
}
.adv-summary {
  width: 100%;
  list-style: none;
  cursor: pointer;
  padding: 0.7rem 0.9rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-muted);
  background: var(--bg-sunken);
  border: none;
  text-align: left;
}
.adv-summary .chev { transition: transform var(--transition); color: var(--text-dim); flex-shrink: 0; }
.adv-summary[aria-expanded="true"] .chev { transform: rotate(90deg); }
.adv-body { padding: 1rem; display: flex; flex-direction: column; gap: 1rem; }

/* ─── Modal ──────────────────────────────────────────────────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: var(--overlay);
  backdrop-filter: blur(3px);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

/* Fixed viewport-relative height + internal scroll: search results (or any
   long content) scroll within the modal instead of pushing it past the
   viewport. */
.modal {
  background: var(--bg-modal);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 480px;
  max-height: min(88vh, 780px);
  box-shadow: var(--shadow);
  animation: fadeSlideUp 0.2s ease;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem 1.4rem;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.modal-header h3 { font-family: var(--font-display); font-weight: 700; font-size: 1.02rem; }
.modal-close {
  background: none; border: none; color: var(--text-muted); cursor: pointer;
  font-size: 1rem; padding: 0.3rem 0.5rem; border-radius: 50%;
  transition: color var(--transition), background var(--transition);
}
.modal-close:hover { color: var(--text); background: var(--bg-sunken); }

.modal-body {
  padding: 1.3rem 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
}

.modal-footer {
  display: flex;
  gap: 0.75rem;
  justify-content: flex-end;
  padding: 1rem 1.4rem;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}

/* ─── Toast ──────────────────────────────────────────────────────────────── */
.toast {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border-lit);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 0.88rem;
  padding: 0.75rem 1.2rem;
  z-index: 300;
  box-shadow: var(--shadow);
  animation: fadeSlideUp 0.25s ease;
  max-width: 320px;
}
.toast.success { border-color: rgba(63, 143, 92, 0.5); color: var(--grass); }
.toast.error   { border-color: rgba(228, 87, 46, 0.5); color: var(--fire); }
.toast.pro     { border-color: rgba(232, 166, 61, 0.6); color: var(--spark); font-weight: 700; }

/* ─── Pro-upgrade confetti ───────────────────────────────────────────────── */
.confetti-piece {
  position: fixed;
  top: -12px;
  width: 8px;
  height: 14px;
  z-index: 400;
  pointer-events: none;
  border-radius: 2px;
  animation-name: confetti-fall;
  animation-timing-function: ease-in;
  animation-fill-mode: forwards;
}
@keyframes confetti-fall {
  to { transform: translate(var(--drift), 100vh) rotate(var(--rot)); opacity: 0; }
}

/* ─── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .dashboard { padding: 1rem; }
  .app-header-inner { padding: 0.8rem 0.9rem; gap: 0.6rem; }
  .app-footer { padding: 0.75rem 1rem; }
  .header-user { display: none; }
  .field-row { grid-template-columns: 1fr; }
  .items-grid { grid-template-columns: 1fr; }
  .theme-toggle { top: 0.7rem; right: 0.7rem; }

  /* iOS Safari auto-zooms the page on focusing any input under 16px - this
     keeps the desktop size (0.95rem = 15.2px) everywhere except mobile,
     where it must be exactly 16px+ to suppress that zoom. */
  input[type="text"], input[type="email"], input[type="password"],
  input[type="number"], select {
    font-size: 16px;
  }

  /* Hybrid header: Check All (the action people hit constantly) stays a
     visible button; everything else collapses behind a single menu toggle
     instead of either wrapping (fights the sticky header's fixed height)
     or scrolling (relies on people noticing they can swipe). */
  .header-right { padding-right: 2.75rem; }
  .header-right .btn-ghost { padding: 0.55rem 0.75rem; }
  .header-left { flex-shrink: 0; min-width: 0; }
  .header-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  .header-menu-toggle {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    padding: 0;
    font-size: 1.1rem;
    line-height: 1;
  }

  .header-menu-panel {
    display: none;
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 170px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 0.5rem;
    box-shadow: var(--shadow);
    z-index: 150;
  }
  .header-menu-panel.open { display: flex; }
  .header-menu-panel .btn-ghost {
    width: 100%;
    justify-content: flex-start;
    text-align: left;
    border-color: transparent;
    background: none;
  }
  .header-menu-panel .btn-ghost:hover { background: var(--bg-sunken); }

  /* Four buttons in a row got cramped below ~380px content width - a 2x2
     grid keeps every label on one line and each target comfortably tappable. */
  .card-actions { flex-wrap: wrap; }
  .card-actions .btn-ghost { flex: 1 1 calc(50% - 0.25rem); padding: 0.55rem 0.5rem; }

  .auth-container { padding: 2rem 1.5rem; }
  .modal-overlay { padding: 0.6rem; }
  .modal-header, .modal-footer { padding: 1rem; }
  .modal-body { padding: 1.1rem; }

  /* Trends tables become cards on mobile - a 6-column table (thumb, first,
     latest, $, %, sparkline) is the one place horizontal-scroll (fine for
     the admin-only Users table) actively hurts the read/analyze experience
     this tab exists for. The <thead> stays functional rather than getting
     hidden: its sort buttons just reflow into a chip row above the cards
     instead of disappearing, so re-sorting still works on mobile. */
  #trends-screen .admin-table-wrap { overflow-x: visible; }
  #trends-screen .admin-table { white-space: normal; }

  #trends-screen .admin-table thead tr {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    padding: 0.7rem 0.7rem 0.6rem;
  }
  #trends-screen .admin-table thead th {
    border: none;
    padding: 0;
    width: auto;
  }
  #trends-screen .admin-table thead th:last-child { display: none; }
  #trends-screen .admin-sort-btn {
    width: auto;
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 0.32rem 0.7rem 0.32rem 0.85rem;
  }
  #trends-screen th[aria-sort="ascending"] .admin-sort-btn,
  #trends-screen th[aria-sort="descending"] .admin-sort-btn {
    border-color: var(--brand);
    background: var(--brand-dim);
  }

  #trends-screen .admin-table tbody {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
  }
  #trends-screen .admin-table tbody tr {
    display: block;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 0.85rem;
  }
  #trends-screen .admin-table tbody tr:hover { background: var(--bg-elevated); }

  #trends-screen .admin-table td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.3rem 0;
    border: none;
    font-family: var(--font-body);
  }
  #trends-screen .admin-table td[data-label]::before {
    content: attr(data-label);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-dim);
  }
  #trends-screen .admin-table td.admin-user-cell {
    padding: 0 0 0.6rem;
    margin-bottom: 0.4rem;
    border-bottom: 1px solid var(--border);
  }
  #trends-screen .admin-table td:last-child {
    justify-content: flex-start;
    padding-top: 0.5rem;
  }
}

@media (max-width: 380px) {
  .logo-title { font-size: 1.55rem; }
  .auth-container { padding: 1.75rem 1.1rem; }
}

/* ─── Legal pages (Privacy / Terms) ──────────────────────────────────────── */
/* Standalone documents (static/privacy.html, static/terms.html) - not part
   of the SPA, so they get their own lightweight typography rules here rather
   than duplicating a <style> block in each file. */
.legal-page {
  max-width: 720px;
  margin: 0 auto;
  padding: 2.5rem 2rem 4rem;
  flex: 1;
  width: 100%;
}
.legal-page h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.8rem;
  letter-spacing: -0.02em;
  margin-bottom: 0.4rem;
}
.legal-updated { color: var(--text-dim); font-size: 0.85rem; margin-bottom: 2rem; }
.legal-page h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  margin: 2rem 0 0.75rem;
}
.legal-page p { color: var(--text-muted); line-height: 1.7; margin-bottom: 0.9rem; }
.legal-page ul { color: var(--text-muted); line-height: 1.7; margin: 0 0 0.9rem 1.3rem; }
.legal-page li { margin-bottom: 0.4rem; }
.legal-page a { color: var(--brand); }
.legal-page strong { color: var(--text); }