/* ================================================================
   DEX LEDGER — MODERN UI/UX OVERHAUL
   Premium dark theme · Gold + Teal · Interactive & animated
   ================================================================ */

/* ----------------------------------------------------------------
   1. DESIGN TOKENS — refined palette over base style.css
   ---------------------------------------------------------------- */
:root {
  /* Background hierarchy */
  --oh-bg:          #09090d;
  --oh-surface:     #101217;
  --oh-card:        #14161d;
  --oh-card-hi:     #191c26;
  --oh-card-hi2:    #1f2230;

  /* Gold — primary brand accent */
  --oh-gold:        #c9a84c;
  --oh-gold-2:      #e8c97a;
  --oh-gold-3:      #f5e0a8;
  --oh-gold-dim:    rgba(201, 168, 76, 0.14);
  --oh-gold-glow:   rgba(201, 168, 76, 0.24);
  --oh-gold-ring:   0 0 0 3px rgba(201, 168, 76, 0.30);
  --oh-gold-border: rgba(201, 168, 76, 0.38);

  /* Teal — secondary accent */
  --oh-teal:        #3ecfb2;
  --oh-teal-2:      #5ddec8;
  --oh-teal-dim:    rgba(62, 207, 178, 0.12);
  --oh-teal-glow:   rgba(62, 207, 178, 0.20);
  --oh-teal-border: rgba(62, 207, 178, 0.35);

  /* Text hierarchy — warm off-white */
  --oh-text:        #f8fafc;
  --oh-text-2:      #e7edf5;
  --oh-text-3:      #cbd5e1;

  /* Borders */
  --oh-border:      rgba(255, 255, 255, 0.07);
  --oh-border-2:    rgba(255, 255, 255, 0.12);

  /* Shadows — deeper for premium feel */
  --oh-shadow-sm:   0 2px 6px rgba(0,0,0,0.45);
  --oh-shadow-md:   0 8px 28px rgba(0,0,0,0.55);
  --oh-shadow-lg:   0 20px 56px rgba(0,0,0,0.65);
  --oh-shadow-gold: 0 4px 22px rgba(201, 168, 76, 0.28);
  --oh-shadow-teal: 0 4px 22px rgba(62, 207, 178, 0.22);

  /* Motion timing */
  --oh-ease:        cubic-bezier(0.16, 1, 0.3, 1);
  --oh-spring:      cubic-bezier(0.34, 1.56, 0.64, 1);
  --oh-t-fast:      0.12s;
  --oh-t-base:      0.2s;
  --oh-t-slow:      0.35s;

  /* Radius */
  --oh-r-sm:   6px;
  --oh-r-md:   10px;
  --oh-r-lg:   14px;
  --oh-r-xl:   18px;
  --oh-r-pill: 999px;
}

/* ----------------------------------------------------------------
   2. GLOBAL BASE
   ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

/* html carries the solid dark base so the galaxy canvas (z-index:-1
   inside body's isolated stacking context) is visible above it */
html {
  scroll-behavior: smooth;
  background: var(--oh-bg);
}

body {
  background: transparent;   /* let galaxy canvas show through */
  isolation: isolate;         /* creates stacking context so z-index:-1 works */
  color: var(--oh-text);
  line-height: 1.7;
  font-size: clamp(15px, 1vw + 10px, 17px);
  padding: 0;
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Galaxy canvas injected by galaxy-bg.js */
#galaxy-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  display: block;
}

/* Remove default body padding that causes content shift */
body.page {
  padding: 0;
}

/* Page max-width and centering */
.page-inner,
.page > .nav,
.page > header,
.page > main,
.page > section,
.page > .landing-nav,
.page > .landing-hero {
  max-width: min(1560px, 100%);
  margin-left: auto;
  margin-right: auto;
  padding-left: clamp(16px, 4vw, 48px);
  padding-right: clamp(16px, 4vw, 48px);
}

/* ----------------------------------------------------------------
   3. TYPOGRAPHY
   ---------------------------------------------------------------- */
h1, h2, h3, h4, h5 {
  font-family: "Syne", "DM Sans", sans-serif;
  letter-spacing: -0.025em;
  line-height: 1.15;
  color: var(--oh-text);
}

h1 { font-size: clamp(2rem, 4vw, 3.5rem); font-weight: 800; }
h2 { font-size: clamp(1.5rem, 3vw, 2.4rem); font-weight: 700; }
h3 { font-size: clamp(1.1rem, 2vw, 1.5rem); font-weight: 700; }
h4 { font-size: 1.05rem; font-weight: 700; }

/* Gradient heading — use on hero/hero-section h1 */
.heading-gradient,
.landing-hero h1,
.landing-hero__headline {
  background: linear-gradient(130deg, var(--oh-gold) 0%, var(--oh-gold-2) 45%, var(--oh-teal) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

/* Eyebrow labels */
.eyebrow,
.ui-metric-card__eyebrow,
.ui-action-card__eyebrow,
.ui-tool-card__eyebrow,
.ui-progress-module__eyebrow,
.ui-profile-card__eyebrow,
.panel__eyebrow {
  font-size: 0.688rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--oh-gold);
  font-family: "DM Sans", sans-serif;
}

/* Muted text */
.muted, small { color: var(--oh-text-2); }
.small { font-size: 0.8125rem; }

/* Links */
a:not([class]) {
  color: var(--oh-gold-2);
  text-decoration: none;
  transition: color var(--oh-t-fast) ease;
}
a:not([class]):hover { color: var(--oh-gold-3); text-decoration: underline; }

/* ----------------------------------------------------------------
   4. NAVIGATION — LANDING NAV
   ---------------------------------------------------------------- */
.landing-nav {
  position: static;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 clamp(16px, 4vw, 48px);
  height: 64px;
  background: var(--oh-surface);
  border-bottom: 1px solid var(--oh-border);
  margin-bottom: 0;
}

.nav__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex-shrink: 0;
}

.nav__brand .badge {
  background: linear-gradient(135deg, var(--oh-gold), var(--oh-gold-2));
  color: #09090d;
  font-weight: 800;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  padding: 5px 10px;
  border-radius: 8px;
  box-shadow: var(--oh-shadow-gold);
}

.landing-nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: nowrap;
}

.landing-nav-links a {
  color: var(--oh-text-2);
  font-size: 0.875rem;
  font-weight: 500;
  padding: 6px 12px;
  border-radius: var(--oh-r-md);
  transition: color var(--oh-t-fast) ease, background var(--oh-t-fast) ease;
  text-decoration: none;
  white-space: nowrap;
}
.landing-nav-links a:hover {
  color: var(--oh-text);
  background: rgba(255,255,255,0.06);
}

.nav__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* ----------------------------------------------------------------
   5. NAVIGATION — APP TOOLBAR
   ---------------------------------------------------------------- */
.nav-toolbar {
  position: static;
  background: var(--oh-surface);
  border-bottom: 1px solid var(--oh-border);
  padding: 0 clamp(16px, 3vw, 40px);
  gap: 0;
}

.nav__row {
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 0;
  flex-wrap: nowrap;
}

/* ----------------------------------------------------------------
   6. TABS / APP NAVIGATION
   ---------------------------------------------------------------- */

/* Tab container */
.tabs.tabs-inline {
  display: flex;
  align-items: center;
  gap: 3px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 8px 0;
}
.tabs.tabs-inline::-webkit-scrollbar { display: none; }

/* Tab button base */
.tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: var(--oh-r-pill);
  font-size: 0.8125rem;
  font-weight: 600;
  font-family: "DM Sans", sans-serif;
  color: var(--oh-text-2);
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition:
    color var(--oh-t-fast) var(--oh-ease),
    background var(--oh-t-fast) var(--oh-ease),
    border-color var(--oh-t-fast) var(--oh-ease),
    transform var(--oh-t-fast) var(--oh-spring);
  text-decoration: none;
  line-height: 1;
}

.tab-btn:hover {
  color: var(--oh-text);
  background: rgba(255,255,255,0.06);
  border-color: var(--oh-border-2);
  transform: translateY(-1px);
}

.tab-btn:active { transform: translateY(0) scale(0.97); }

.tab-btn[aria-selected="true"],
.tab-btn.is-active {
  color: var(--oh-gold);
  background: var(--oh-gold-dim);
  border-color: var(--oh-gold-border);
}

.tab-btn:focus-visible {
  outline: none;
  box-shadow: var(--oh-gold-ring);
}

/* Category nav groups */
.category-nav {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  padding: 0;
  gap: 6px;
}

/* Category group label */
.category-nav__group-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--oh-text-3);
  padding: 2px 6px 2px 0;
  white-space: nowrap;
}

/* Category nav — compact header variant */
.category-nav--header {
  gap: 4px;
}
.category-nav--header .category-nav__group {
  display: flex;
  align-items: center;
  gap: 4px;
}
.category-nav--header .category-nav__label {
  display: none; /* hide labels in header — dropdowns are self-labelled */
}
.category-nav--header .category-nav__select {
  max-width: 160px;
  font-size: 0.78rem;
  padding: 4px 8px;
}

/* Tab collapse toggle */
.tab-collapse-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 2px 0;
}
.tab-collapse-row .pill-link {
  font-size: 0.75rem;
  padding: 3px 10px;
  opacity: 0.6;
}
.tab-collapse-row .pill-link:hover { opacity: 1; }

/* App tabs wrap — separator from brand row */
.app-tabs-wrap {
  border-top: 1px solid var(--oh-border);
}

/* Profile strip — compact header layout */
.profile-strip {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
}
.profile-strip .pill-link,
.profile-strip .pill-select {
  font-size: 0.8rem;
  padding: 5px 12px;
  white-space: nowrap;
}

/* Home / Launch Page nav link */
.nav-launch-page-link {
  color: var(--oh-text-2) !important;
  border-color: var(--oh-border) !important;
  background: transparent !important;
  text-decoration: none;
  flex-shrink: 0;
}
.nav-launch-page-link:hover {
  color: var(--oh-text) !important;
  border-color: var(--oh-border-2) !important;
  background: rgba(255,255,255,0.05) !important;
}

/* Language selector — stands out clearly */
#header-language-select {
  background: rgba(255,255,255,0.07);
  border: 1px solid var(--oh-border-2);
  border-radius: var(--oh-r-pill);
  color: var(--oh-text);
  font-size: 0.8rem;
  font-weight: 600;
  padding: 5px 12px;
  cursor: pointer;
  min-width: 100px;
  transition: border-color var(--oh-t-fast) ease, background var(--oh-t-fast) ease;
}
#header-language-select:hover {
  border-color: var(--oh-gold-border);
  background: var(--oh-gold-dim);
}
#header-language-select:focus-visible {
  outline: none;
  box-shadow: var(--oh-gold-ring);
}
:root[data-theme="light"] #header-language-select {
  background: rgba(0,0,0,0.05);
  border-color: rgba(0,0,0,0.15);
  color: var(--oh-text);
}
:root[data-theme="light"] #header-language-select:hover {
  background: rgba(201,168,76,0.10);
  border-color: var(--oh-gold-border);
}
#user-display {
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
}
#header-credits {
  color: var(--oh-gold-2);
  border-color: var(--oh-gold-border);
  background: var(--oh-gold-dim);
}

/* ----------------------------------------------------------------
   7. BUTTONS
   ---------------------------------------------------------------- */
.button,
button.button,
a.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 10px 20px;
  border-radius: var(--oh-r-lg);
  font-size: 0.875rem;
  font-weight: 600;
  font-family: "DM Sans", sans-serif;
  line-height: 1.2;
  cursor: pointer;
  border: 1px solid transparent;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background var(--oh-t-base) var(--oh-ease),
    color var(--oh-t-base) var(--oh-ease),
    border-color var(--oh-t-base) var(--oh-ease),
    box-shadow var(--oh-t-base) var(--oh-ease),
    transform var(--oh-t-fast) var(--oh-spring);
  position: relative;
  overflow: hidden;
}

/* Ripple shimmer on press */
.button::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.08) 50%, transparent 100%);
  transform: translateX(-100%);
  transition: transform 0.4s ease;
  pointer-events: none;
}
.button:active::after { transform: translateX(100%); }

/* Primary — Gold */
.button-primary {
  background: linear-gradient(135deg, var(--oh-gold), var(--oh-gold-2));
  color: #09090d;
  border-color: transparent;
  box-shadow: var(--oh-shadow-gold), inset 0 1px 0 rgba(255,255,255,0.18);
  font-weight: 700;
}
.button-primary:hover {
  background: linear-gradient(135deg, var(--oh-gold-2), var(--oh-gold-3));
  box-shadow: 0 6px 28px rgba(201,168,76,0.40), inset 0 1px 0 rgba(255,255,255,0.22);
  transform: translateY(-2px) scale(1.01);
  color: #09090d;
}
.button-primary:active {
  transform: translateY(0) scale(0.98);
  box-shadow: var(--oh-shadow-gold);
}
.button-primary:focus-visible { outline: none; box-shadow: var(--oh-gold-ring), var(--oh-shadow-gold); }

/* Secondary — Teal outline */
.button-secondary {
  background: var(--oh-teal-dim);
  color: var(--oh-teal);
  border-color: var(--oh-teal-border);
}
.button-secondary:hover {
  background: rgba(62, 207, 178, 0.18);
  box-shadow: var(--oh-shadow-teal);
  transform: translateY(-2px);
  color: var(--oh-teal-2);
}

/* Ghost — transparent with border */
.button-ghost {
  background: rgba(255,255,255,0.04);
  color: var(--oh-text-2);
  border-color: var(--oh-border-2);
}
.button-ghost:hover {
  background: rgba(255,255,255,0.08);
  color: var(--oh-text);
  border-color: rgba(255,255,255,0.20);
  transform: translateY(-1px);
}

/* Small variant */
.button-small,
.button.button-small {
  padding: 6px 14px;
  font-size: 0.8125rem;
  border-radius: var(--oh-r-md);
}

/* Disabled */
.button:disabled,
.button[disabled] {
  opacity: 0.42;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

/* Focus ring (universal) */
.button:focus-visible {
  outline: none;
  box-shadow: var(--oh-gold-ring);
}

/* ----------------------------------------------------------------
   8. CARDS & PANELS
   ---------------------------------------------------------------- */

/* Base panel (overrides .panel in style.css) */
.panel,
.ui-card,
.ui-metric-card,
.ui-action-card,
.ui-tool-card,
.ui-profile-card,
.ui-progress-module,
.ui-timeline-item,
.ui-card-row,
.ui-scanner-stage {
  background: var(--oh-card);
  border: 1px solid var(--oh-border);
  border-radius: var(--oh-r-xl);
  box-shadow: var(--oh-shadow-sm);
  transition:
    border-color var(--oh-t-base) ease,
    box-shadow var(--oh-t-base) ease,
    transform var(--oh-t-base) var(--oh-ease);
}

/* Hover lift — cards that are interactive */
.ui-action-card,
.ui-tool-card,
.page-app .collection-tool-card,
.dashboard-tools-grid > * {
  cursor: pointer;
  background: var(--oh-card);
}

.ui-action-card:hover,
.ui-action-card:focus-visible,
.ui-tool-card:hover,
.ui-tool-card:focus-visible,
.page-app .collection-tool-card:hover,
.page-app .collection-tool-card:focus-visible {
  border-color: var(--oh-teal-border);
  background: linear-gradient(160deg, rgba(62, 207, 178, 0.07), var(--oh-card));
  box-shadow: var(--oh-shadow-teal), var(--oh-shadow-md);
  transform: translateY(-3px);
}

/* Primary tool card */
.ui-action-card--primary,
.ui-tool-card--primary,
.page-app .collection-tool-card--primary {
  border-color: var(--oh-gold-border);
  background: linear-gradient(160deg, rgba(201, 168, 76, 0.08), var(--oh-card));
}
.ui-action-card--primary:hover,
.ui-tool-card--primary:hover,
.page-app .collection-tool-card--primary:hover {
  border-color: var(--oh-gold);
  background: linear-gradient(160deg, rgba(201, 168, 76, 0.14), var(--oh-card));
  box-shadow: var(--oh-shadow-gold), var(--oh-shadow-md);
}

/* Panel header */
.panel__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

/* Panel hero — featured panels */
.panel-hero,
.dashboard-hero-panel {
  background: linear-gradient(145deg, var(--oh-card-hi), var(--oh-card));
  border-color: var(--oh-border-2);
  box-shadow: var(--oh-shadow-md);
}

/* Metric cards */
.ui-metric-card,
.page-app .collection-stat-card {
  background: var(--oh-card);
  border-color: var(--oh-border);
}

.ui-metric-card__value,
.page-app .collection-stat-card strong {
  font-family: "Syne", sans-serif;
  letter-spacing: -0.03em;
  color: var(--oh-text);
}

/* Card row (collection entries) */
.ui-card-row,
.table-row {
  background: var(--oh-card);
  border: 1px solid var(--oh-border);
  border-radius: var(--oh-r-lg);
  transition: border-color var(--oh-t-fast) ease, background var(--oh-t-fast) ease;
}
.ui-card-row:hover,
.table-row:hover {
  border-color: var(--oh-border-2);
  background: var(--oh-card-hi);
}

/* Collection card tiles */
.collection-card-tile {
  background: var(--oh-card);
  border-color: var(--oh-border);
}
.collection-card-tile:hover {
  border-color: var(--oh-gold-border);
  box-shadow: var(--oh-shadow-gold);
  transform: translateY(-2px);
}

/* ----------------------------------------------------------------
   8b. SETTINGS-NOTE / INFO BOXES
   ---------------------------------------------------------------- */

/* settings-note is used in Settings, Billing, Tools, Resources, Admin, FAQ —
   override the old rgba(255,255,255,0.1) background everywhere */
.settings-note {
  background: var(--oh-surface) !important;
  border: 1px solid var(--oh-border) !important;
  border-radius: var(--oh-r-lg) !important;
}

/* Nested settings-note (e.g. tip box inside a settings-note) */
.settings-note .settings-note {
  background: var(--oh-card) !important;
  border-color: var(--oh-border) !important;
}

/* FAQ details element — hover state */
details.settings-note {
  transition: border-color var(--oh-t-base) ease, background var(--oh-t-base) ease;
}
details.settings-note[open] {
  border-color: var(--oh-border-2) !important;
}
details.settings-note summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--oh-text);
  padding: 4px 0;
  list-style: none;
}
details.settings-note summary::-webkit-details-marker { display: none; }
details.settings-note summary::marker { display: none; }
details.settings-note:hover {
  border-color: var(--oh-gold-border) !important;
  background: linear-gradient(135deg, var(--oh-gold-dim), var(--oh-surface)) !important;
}

/* ----------------------------------------------------------------
   8c. APP INTRO BAR & SECTION SHELL
   ---------------------------------------------------------------- */

/* The tagline bar below the nav in app.html */
.app-intro {
  background: var(--oh-card) !important;
  border-color: var(--oh-border) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.app-intro__headline {
  color: var(--oh-text) !important;
}
.app-intro__sub {
  color: var(--oh-text-2) !important;
}
.trust-chip {
  background: rgba(255,255,255,0.04) !important;
  border-color: var(--oh-border) !important;
  color: var(--oh-text-2) !important;
}

/* The section breadcrumb/title bar that appears above each tab panel */
.page-app .app-section-shell {
  background: var(--oh-card) !important;
  border-color: var(--oh-border) !important;
  box-shadow: var(--oh-shadow-sm) !important;
}
.app-section-shell__breadcrumb { color: var(--oh-text-3) !important; }
.app-section-shell .eyebrow   { color: var(--oh-gold-2) !important; }
.app-section-shell h2         { color: var(--oh-text) !important; }
.app-section-shell .muted     { color: var(--oh-text-2) !important; }

/* Divider */
.divider {
  border: none !important;
  border-top: 1px solid var(--oh-border) !important;
  margin: 16px 0 !important;
}

/* Billing summary pills row */
.billing-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0;
}

/* Metric list (Collector Resources links) */
.metric-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 8px;
}
.metric-list li {
  padding: 8px 10px;
  border-radius: var(--oh-r-md);
  border: 1px solid var(--oh-border);
  background: var(--oh-card);
  display: grid;
  gap: 2px;
  transition: border-color var(--oh-t-fast) ease;
}
.metric-list li:hover { border-color: var(--oh-gold-border); }
.metric-list a.text-link {
  color: var(--oh-gold-2) !important;
  font-weight: 600;
  font-size: 0.875rem;
  text-decoration: none;
}
.metric-list a.text-link:hover { color: var(--oh-gold-3) !important; text-decoration: underline; }

/* ----------------------------------------------------------------
   9. FORMS
   ---------------------------------------------------------------- */
label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--oh-text);
  display: block;
  margin-bottom: 5px;
}

input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
  background: var(--oh-card-hi);
  color: var(--oh-text);
  border: 1px solid var(--oh-border-2);
  border-radius: var(--oh-r-lg);
  padding: 11px 14px;
  font-size: 0.9375rem;
  font-family: "DM Sans", sans-serif;
  transition: border-color var(--oh-t-fast) ease, box-shadow var(--oh-t-fast) ease;
  width: 100%;
}

input:not([type="checkbox"]):not([type="radio"]):focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: none;
  border-color: var(--oh-gold);
  box-shadow: var(--oh-gold-ring);
}

input::placeholder,
textarea::placeholder {
  color: var(--oh-text-3);
}

select option {
  background: var(--oh-surface);
  color: var(--oh-text);
}

/* Form section / label group */
.form label {
  display: grid;
  gap: 5px;
  margin-bottom: 0;
}

.form {
  display: grid;
  gap: 14px;
}

.form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 4px;
}

/* Custom checkbox / radio */
input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--oh-gold);
  width: 16px;
  height: 16px;
  cursor: pointer;
}

/* ----------------------------------------------------------------
   10. PILLS & BADGES
   ---------------------------------------------------------------- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: var(--oh-r-pill);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  border: 1px solid var(--oh-border);
  background: rgba(255,255,255,0.05);
  color: var(--oh-text-2);
  line-height: 1.2;
  transition: all var(--oh-t-fast) ease;
}

.pill-soft {
  background: rgba(255,255,255,0.06);
  border-color: var(--oh-border-2);
  color: var(--oh-text-2);
}

.pill-good {
  background: rgba(62, 207, 178, 0.12);
  border-color: var(--oh-teal-border);
  color: var(--oh-teal);
}

.pill-warn {
  background: rgba(245, 213, 71, 0.12);
  border-color: rgba(245, 213, 71, 0.35);
  color: #f5d547;
}

.pill-mid {
  background: rgba(201, 168, 76, 0.12);
  border-color: var(--oh-gold-border);
  color: var(--oh-gold);
}

.pill-demo {
  background: rgba(245, 213, 71, 0.14);
  border-color: rgba(245, 213, 71, 0.35);
  color: #f5d547;
}

/* Trust chips (landing page) */
.trust-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border-radius: var(--oh-r-pill);
  font-size: 0.8125rem;
  font-weight: 600;
  border: 1px solid var(--oh-border-2);
  background: rgba(255,255,255,0.05);
  color: var(--oh-text);
}

.trust-chip::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--oh-gold);
  flex-shrink: 0;
}

/* Hash badge */
.hash-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: var(--oh-r-pill);
  font-size: 0.75rem;
  font-weight: 700;
  background: var(--oh-gold-dim);
  border: 1px solid var(--oh-gold-border);
  color: var(--oh-gold-2);
}

/* Status chips */
.status-chip {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: var(--oh-r-pill);
  font-size: 0.75rem;
  font-weight: 700;
}

/* Status colours */
.status-owned,  .status-chip.status-owned  { background: rgba(62,207,178,0.12); color: var(--oh-teal); border: 1px solid var(--oh-teal-border); }
.status-pending,.status-chip.status-pending { background: rgba(245,213,71,0.12);  color: #f5d547; border: 1px solid rgba(245,213,71,0.35); }
.status-wishlist,.status-chip.status-wishlist { background: rgba(201,168,76,0.12); color: var(--oh-gold); border: 1px solid var(--oh-gold-border); }
.status-traded, .status-chip.status-traded  { background: rgba(255,255,255,0.06); color: var(--oh-text-2); border: 1px solid var(--oh-border-2); }

/* Pill group */
.pill-group {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

/* Collection proof pill */
.collection-proof-pill.is-hashlocked {
  background: var(--oh-gold-dim);
  border-color: var(--oh-gold-border);
  color: var(--oh-gold-2);
}
.collection-proof-pill.is-unlocked {
  background: rgba(255,255,255,0.04);
  border-color: var(--oh-border);
  color: var(--oh-text-3);
}

/* ----------------------------------------------------------------
   11. COLLECTION STAT CARDS
   ---------------------------------------------------------------- */
.page-app .collection-stat-card {
  border-color: var(--oh-border);
  background: var(--oh-card);
  border-radius: var(--oh-r-lg);
  padding: 16px 18px;
}

.page-app .collection-stat-card:hover {
  border-color: var(--oh-border-2);
  background: var(--oh-card-hi);
}

.page-app .collection-stat-card span {
  color: var(--oh-text-2);
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
}

.page-app .collection-stat-card strong {
  font-size: clamp(1.5rem, 2.2vw, 2.4rem);
  color: var(--oh-text);
  letter-spacing: -0.04em;
}

/* ----------------------------------------------------------------
   12. LANDING PAGE
   ---------------------------------------------------------------- */
.landing-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 6vw, 80px);
  align-items: center;
  padding: clamp(48px, 8vw, 100px) clamp(16px, 4vw, 48px);
  min-height: 85vh;
}

.landing-hero__copy {
  display: grid;
  gap: 20px;
  align-content: center;
}

.landing-hero__copy h1 {
  font-size: clamp(2.2rem, 5vw, 4rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.03em;
}

.landing-hero__copy p,
.landing-hero__sub {
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  color: var(--oh-text-2);
  line-height: 1.65;
  max-width: 520px;
}

.landing-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  padding-top: 8px;
}

.landing-hero__trust {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Landing sections */
.landing-section {
  padding: clamp(56px, 8vw, 96px) clamp(16px, 4vw, 48px);
}

.landing-section-heading {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 48px;
}

.landing-section-heading .eyebrow {
  margin-bottom: 12px;
  display: block;
}

/* Steps grid */
.landing-steps-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.landing-steps-grid .panel {
  padding: 24px;
  background: var(--oh-card);
  text-align: left;
}

.landing-steps-grid .panel:hover {
  border-color: var(--oh-gold-border);
  background: linear-gradient(160deg, var(--oh-gold-dim), var(--oh-card));
}

/* Step number accent */
.step-number {
  font-family: "Syne", sans-serif;
  font-size: 2.4rem;
  font-weight: 800;
  color: var(--oh-gold);
  opacity: 0.6;
  line-height: 1;
  margin-bottom: 8px;
}

/* Landing auth section */
.landing-auth-section {
  padding: clamp(48px, 6vw, 80px) clamp(16px, 4vw, 48px);
}

.landing-auth-card {
  max-width: 480px;
  margin: 0 auto;
  background: var(--oh-card-hi);
  border: 1px solid var(--oh-border-2);
  border-radius: var(--oh-r-xl);
  padding: 32px;
  box-shadow: var(--oh-shadow-md);
}

/* Trial ribbon */
.trial-ribbon {
  background: var(--oh-gold-dim);
  border: 1px solid var(--oh-gold-border);
  border-radius: var(--oh-r-lg);
  padding: 14px 20px;
  text-align: center;
  color: var(--oh-gold-2);
  font-weight: 600;
  font-size: 0.9375rem;
}

/* Product shot / mockup */
.product-shot {
  background: var(--oh-card-hi);
  border: 1px solid var(--oh-border-2);
  border-radius: var(--oh-r-xl);
  overflow: hidden;
  box-shadow: var(--oh-shadow-lg);
}

/* ----------------------------------------------------------------
   13. DASHBOARD
   ---------------------------------------------------------------- */
.dashboard-hero-panel {
  background: linear-gradient(145deg, rgba(201, 168, 76, 0.06), var(--oh-card));
  border-color: var(--oh-border-2);
  padding: 28px;
  border-radius: var(--oh-r-xl);
}

.dashboard-update-banner {
  background: var(--oh-teal-dim);
  border: 1px solid var(--oh-teal-border);
  border-radius: var(--oh-r-lg);
  padding: 12px 18px;
  color: var(--oh-teal-2);
  font-size: 0.875rem;
}

.dashboard-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.dashboard-tools-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

/* Dashboard tool card hover — gold for primary actions */
.dashboard-tools-grid .ui-action-card--primary:hover,
.dashboard-tools-grid .ui-tool-card--primary:hover {
  border-color: var(--oh-gold-border);
  background: linear-gradient(160deg, var(--oh-gold-dim), var(--oh-card));
  box-shadow: var(--oh-shadow-gold), var(--oh-shadow-md);
}

/* ----------------------------------------------------------------
   14. SCANNER
   ---------------------------------------------------------------- */

/* Override all text color variables on the scan panel so every element —
   regardless of which CSS variable it uses — renders as legible black text.
   This must live in ui-overhaul.css (last loaded) to win the cascade. */
body.page-scan .scan-root-panel {
  --oh-text-1: #111111;
  --oh-text-2: #111111;
  --oh-text-3: #444444;
  --text: #111111;
  --text-soft: #111111;
  --text-faint: #444444;
  --muted: #111111;
  color: #111111;
}
body.page-scan .scan-root-panel .muted,
body.page-scan .scan-root-panel small,
body.page-scan .scan-root-panel p,
body.page-scan .scan-root-panel strong,
body.page-scan .scan-root-panel span:not(.pill-soft):not(.catalog-scan-live-indicator):not(.scan-status-progress):not(.button),
body.page-scan .scan-root-panel label,
body.page-scan .scan-root-panel h1,
body.page-scan .scan-root-panel h2,
body.page-scan .scan-root-panel h3,
body.page-scan .scan-root-panel .text-muted,
body.page-scan .scan-root-panel .catalog-scan-status,
body.page-scan .scan-root-panel .scan-status-guidance,
body.page-scan .scan-root-panel .catalog-scan-info-title,
body.page-scan .scan-root-panel .scan-panel-copy {
  color: #111111 !important;
}
/* Restore button colors overridden by the * rule in style.css */
body.page-scan .scan-root-panel .button-secondary,
body.page-scan .scan-root-panel .button-secondary * {
  color: var(--oh-teal) !important;
}

.scan-root-panel {
  background: var(--oh-card);
  border: 1px solid var(--oh-border-2);
  border-radius: var(--oh-r-xl);
  overflow: hidden;
}

.scan-workspace {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 0;
  min-height: 600px;
}

.scan-status-box {
  background: var(--oh-surface);
  border-right: 1px solid var(--oh-border);
  position: relative;
}

.scan-queue-panel {
  background: var(--oh-card);
  display: grid;
  gap: 0;
  overflow: hidden;
}

.scan-queue-item {
  border-bottom: 1px solid var(--oh-border);
  padding: 12px 16px;
  display: grid;
  grid-template-columns: 48px 1fr auto;
  gap: 12px;
  align-items: center;
  transition: background var(--oh-t-fast) ease;
}

.scan-queue-item:hover {
  background: var(--oh-card-hi);
}

/* ----------------------------------------------------------------
   15. MODALS & OVERLAYS
   ---------------------------------------------------------------- */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(9, 9, 13, 0.72);
  backdrop-filter: blur(4px);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: oh-fade-in var(--oh-t-base) ease;
}

.modal-content {
  background: var(--oh-card-hi);
  border: 1px solid var(--oh-border-2);
  border-radius: var(--oh-r-xl);
  box-shadow: var(--oh-shadow-lg);
  padding: 28px;
  max-width: 560px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  animation: oh-slide-up var(--oh-t-base) var(--oh-ease);
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  gap: 12px;
}

.modal-close {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--oh-border-2);
  background: transparent;
  color: var(--oh-text-2);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  transition: all var(--oh-t-fast) ease;
  flex-shrink: 0;
}
.modal-close:hover {
  background: rgba(255,255,255,0.08);
  color: var(--oh-text);
  border-color: var(--oh-border-2);
}

/* ----------------------------------------------------------------
   16. NOTICES & BANNERS
   ---------------------------------------------------------------- */
.notice,
.note,
.settings-note {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--oh-border-2);
  border-radius: var(--oh-r-lg);
  padding: 12px 16px;
  font-size: 0.875rem;
  color: var(--oh-text-2);
  line-height: 1.6;
}

.notice-warn,
.notice.warn {
  background: rgba(245,213,71,0.08);
  border-color: rgba(245,213,71,0.28);
  color: #f5d547;
}

.notice-success,
.notice.success {
  background: var(--oh-teal-dim);
  border-color: var(--oh-teal-border);
  color: var(--oh-teal);
}

.notice-error,
.notice.error {
  background: rgba(239,68,68,0.10);
  border-color: rgba(239,68,68,0.30);
  color: #f87171;
}

/* ----------------------------------------------------------------
   17. PROGRESS BARS
   ---------------------------------------------------------------- */
.ui-progress-bar {
  background: rgba(255,255,255,0.07);
  border-radius: var(--oh-r-pill);
  height: 6px;
  overflow: hidden;
}

.ui-progress-fill {
  background: linear-gradient(90deg, var(--oh-gold), var(--oh-teal));
  height: 100%;
  border-radius: inherit;
  transition: width var(--oh-t-slow) var(--oh-ease);
}

/* ----------------------------------------------------------------
   18. UTILITY
   ---------------------------------------------------------------- */
.hidden { display: none !important; }

.text-gold  { color: var(--oh-gold); }
.text-teal  { color: var(--oh-teal); }
.text-muted { color: var(--oh-text-2); }

.flex       { display: flex; }
.flex-col   { display: flex; flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 12px; }
.gap-4 { gap: 16px; }

.w-full { width: 100%; }

/* Divider */
.divider {
  height: 1px;
  background: var(--oh-border);
  margin: 16px 0;
}

/* Section spacing */
.section-gap { margin-bottom: clamp(32px, 5vw, 64px); }

/* ----------------------------------------------------------------
   19. COLLAPSE / ACCORDION
   ---------------------------------------------------------------- */
.collapse {
  border: 1px solid var(--oh-border);
  border-radius: var(--oh-r-lg);
  background: rgba(255,255,255,0.02);
  overflow: hidden;
}

.collapse-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  background: transparent;
  border: none;
  color: var(--oh-text);
  font-weight: 700;
  font-size: 0.9375rem;
  cursor: pointer;
  text-align: left;
  transition: background var(--oh-t-fast) ease;
}
.collapse-toggle:hover { background: rgba(255,255,255,0.03); }

.collapse-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid var(--oh-border-2);
  background: rgba(255,255,255,0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  color: var(--oh-text-2);
  flex-shrink: 0;
  transition: transform var(--oh-t-base) var(--oh-spring), background var(--oh-t-fast) ease;
}

[open] .collapse-icon,
.collapse-toggle[aria-expanded="true"] .collapse-icon {
  transform: rotate(45deg);
  background: var(--oh-gold-dim);
  border-color: var(--oh-gold-border);
  color: var(--oh-gold);
}

.collapse-body {
  padding: 4px 16px 16px;
  border-top: 1px solid var(--oh-border);
}

/* ----------------------------------------------------------------
   20. SUGGESTIONS / AUTOCOMPLETE DROPDOWN
   ---------------------------------------------------------------- */
.suggestions {
  background: var(--oh-card-hi2);
  border: 1px solid var(--oh-border-2);
  border-radius: var(--oh-r-lg);
  box-shadow: var(--oh-shadow-lg);
  overflow: hidden;
}

.suggestion-item {
  padding: 10px 14px;
  border-bottom: 1px solid var(--oh-border);
  cursor: pointer;
  transition: background var(--oh-t-fast) ease;
  color: var(--oh-text);
}

.suggestion-item:hover,
.suggestion-item:focus-visible {
  background: var(--oh-gold-dim);
  outline: none;
}

.suggestion-item:last-child { border-bottom: none; }

.suggestion-meta {
  font-size: 0.8125rem;
  color: var(--oh-text-2);
}

/* ----------------------------------------------------------------
   21. HASH / HASHLOCK COMPONENTS
   ---------------------------------------------------------------- */
.hash-warning {
  background: rgba(239,68,68,0.10);
  border: 1px solid rgba(239,68,68,0.28);
  border-radius: var(--oh-r-md);
  color: #f87171;
  padding: 6px 10px;
  font-size: 0.8125rem;
  font-weight: 600;
}

.hash-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  font-size: 0.8125rem;
  color: var(--oh-text-2);
}

.hashlock-progress {
  display: grid;
  gap: 12px;
}

.hashlock-progress__bar {
  height: 6px;
  border-radius: var(--oh-r-pill);
  background: var(--oh-border);
  overflow: hidden;
}

.hashlock-progress__fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--oh-gold), var(--oh-teal));
  transition: width var(--oh-t-slow) var(--oh-ease);
}

/* ----------------------------------------------------------------
   22. TABLE / LEDGER ROWS
   ---------------------------------------------------------------- */
#ledger-table {
  display: grid;
  gap: 8px;
}

.table-row {
  display: grid;
  grid-template-columns: 32px 64px 1fr auto auto auto;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
}

/* Column widths on narrower screens */
@media (max-width: 900px) {
  .table-row {
    grid-template-columns: 32px 52px 1fr auto;
    gap: 8px;
  }
  .card-hash, .card-value { display: none; }
}

/* ----------------------------------------------------------------
   23. ANIMATIONS
   ---------------------------------------------------------------- */
@keyframes oh-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes oh-slide-up {
  from { opacity: 0; transform: translateY(16px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes oh-slide-in-right {
  from { opacity: 0; transform: translateX(24px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes oh-pulse-gold {
  0%, 100% { box-shadow: 0 0 0 0 rgba(201, 168, 76, 0); }
  50%       { box-shadow: 0 0 0 6px rgba(201, 168, 76, 0.15); }
}

@keyframes oh-shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@keyframes oh-spin {
  to { transform: rotate(360deg); }
}

/* Entrance animations for page sections */
.oh-animate-in {
  animation: oh-slide-up var(--oh-t-slow) var(--oh-ease) both;
}

/* Staggered children */
.oh-stagger > *:nth-child(1) { animation-delay: 0ms; }
.oh-stagger > *:nth-child(2) { animation-delay: 60ms; }
.oh-stagger > *:nth-child(3) { animation-delay: 120ms; }
.oh-stagger > *:nth-child(4) { animation-delay: 180ms; }
.oh-stagger > *:nth-child(5) { animation-delay: 240ms; }
.oh-stagger > *:nth-child(6) { animation-delay: 300ms; }

/* Skeleton loading shimmer */
.skeleton {
  background: linear-gradient(90deg,
    var(--oh-card) 0%,
    var(--oh-card-hi) 50%,
    var(--oh-card) 100%
  );
  background-size: 200% 100%;
  animation: oh-shimmer 1.6s linear infinite;
  border-radius: var(--oh-r-md);
}

/* Loading spinner */
.spinner {
  width: 20px;
  height: 20px;
  border: 2px solid var(--oh-border-2);
  border-top-color: var(--oh-gold);
  border-radius: 50%;
  animation: oh-spin 0.7s linear infinite;
  display: inline-block;
}

/* ----------------------------------------------------------------
   24. SCROLL & FOCUS POLISH
   ---------------------------------------------------------------- */

/* Smooth scrollbar (webkit) */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.12);
  border-radius: var(--oh-r-pill);
}
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.22); }

/* Global focus ring reset — use gold ring */
:focus-visible {
  outline: none;
  box-shadow: var(--oh-gold-ring);
}

/* Text selection */
::selection {
  background: var(--oh-gold-dim);
  color: var(--oh-gold-2);
}

/* ----------------------------------------------------------------
   25. LIGHT MODE OVERRIDES
   ---------------------------------------------------------------- */
/* OS light mode — pages without an explicit data-theme attribute
   (public-verification.html, verify.html, index.html, etc.)
   Previously this block used invalid CSS (comma before @media).
   Browsers silently ignored it, leaving --oh-bg dark while
   style.css correctly flipped --text to dark navy, producing
   dark text on dark background. Fixed to a proper @media rule. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --oh-bg:       #f4f3ef;
    --oh-surface:  #eae8e2;
    --oh-card:     #ffffff;
    --oh-card-hi:  #f9f8f5;
    --oh-card-hi2: #f2f0ec;
    --oh-text:     #111111;
    --oh-text-2:   #1f2937;
    --oh-text-3:   #334155;
    --oh-border:   rgba(0,0,0,0.08);
    --oh-border-2: rgba(0,0,0,0.14);
    --oh-shadow-sm: 0 2px 6px rgba(0,0,0,0.07);
    --oh-shadow-md: 0 8px 28px rgba(0,0,0,0.10);
    --oh-shadow-lg: 0 20px 56px rgba(0,0,0,0.14);
  }
}

:root[data-theme="light"] {
  --oh-bg:       #f4f3ef;
  --oh-surface:  #eae8e2;
  --oh-card:     #ffffff;
  --oh-card-hi:  #f9f8f5;
  --oh-card-hi2: #f2f0ec;
  --oh-text:     #111111;
  --oh-text-2:   #1f2937;
  --oh-text-3:   #334155;
  --oh-border:   rgba(0,0,0,0.08);
  --oh-border-2: rgba(0,0,0,0.14);
  --oh-shadow-sm: 0 2px 6px rgba(0,0,0,0.07);
  --oh-shadow-md: 0 8px 28px rgba(0,0,0,0.10);
  --oh-shadow-lg: 0 20px 56px rgba(0,0,0,0.14);
}

/* ----------------------------------------------------------------
   Light mode: keep accent styling, but use dark text on light surfaces.
   ---------------------------------------------------------------- */
:root[data-theme="light"] .eyebrow,
:root[data-theme="light"] .ui-metric-card__eyebrow,
:root[data-theme="light"] .ui-action-card__eyebrow,
:root[data-theme="light"] .ui-tool-card__eyebrow,
:root[data-theme="light"] .ui-progress-module__eyebrow,
:root[data-theme="light"] .ui-profile-card__eyebrow,
:root[data-theme="light"] .panel__eyebrow {
  color: var(--oh-text);
}
/* The app-section-shell variant uses !important */
:root[data-theme="light"] .app-section-shell .eyebrow { color: var(--oh-text) !important; }

:root[data-theme="light"] .text-gold { color: var(--oh-text); }

:root[data-theme="light"] a:not([class])       { color: var(--oh-text); }
:root[data-theme="light"] a:not([class]):hover  { color: var(--oh-text-2); }

:root[data-theme="light"] .status-wishlist,
:root[data-theme="light"] .status-chip.status-wishlist { color: var(--oh-text); }

:root[data-theme="light"] body {
  background: var(--oh-bg);
  color: var(--oh-text);
}

:root[data-theme="light"] .landing-nav,
:root[data-theme="light"] .nav-toolbar {
  background: var(--oh-surface);
  border-bottom-color: rgba(0,0,0,0.08);
}

:root[data-theme="light"] .button-ghost {
  background: rgba(0,0,0,0.04);
  border-color: rgba(0,0,0,0.14);
  color: var(--oh-text-2);
}
:root[data-theme="light"] .button-ghost:hover {
  background: rgba(0,0,0,0.08);
  color: var(--oh-text);
}

:root[data-theme="light"] input:not([type="checkbox"]):not([type="radio"]),
:root[data-theme="light"] select,
:root[data-theme="light"] textarea {
  background: var(--oh-card);
  border-color: rgba(0,0,0,0.16);
  color: var(--oh-text);
}

:root[data-theme="light"] select option {
  background: #ffffff;
  color: #1a1814;
}

:root[data-theme="light"] .tab-btn {
  color: var(--oh-text-2);
}
:root[data-theme="light"] .tab-btn:hover {
  background: rgba(0,0,0,0.05);
  border-color: rgba(0,0,0,0.14);
  color: var(--oh-text);
}
:root[data-theme="light"] .tab-btn[aria-selected="true"],
:root[data-theme="light"] .tab-btn.is-active {
  background: rgba(201,168,76,0.10);
  border-color: rgba(201,168,76,0.45);
  color: var(--oh-text);
}

/* ----------------------------------------------------------------
   26. RESPONSIVE
   ---------------------------------------------------------------- */
@media (max-width: 980px) {
  .landing-hero {
    grid-template-columns: 1fr;
    min-height: auto;
    padding-top: clamp(40px, 8vw, 72px);
  }

  .landing-hero__visual { display: none; }

  .landing-steps-grid { grid-template-columns: repeat(2, 1fr); }

  .dashboard-stats-grid,
  .dashboard-tools-grid { grid-template-columns: repeat(2, 1fr); }

  .scan-workspace { grid-template-columns: 1fr; }
  .scan-status-box { border-right: none; border-bottom: 1px solid var(--oh-border); }
}

@media (max-width: 640px) {
  .landing-steps-grid { grid-template-columns: 1fr; }

  .dashboard-stats-grid { grid-template-columns: repeat(2, 1fr); }
  .dashboard-tools-grid { grid-template-columns: 1fr; }

  .landing-nav { padding: 0 16px; }
  .landing-nav-links { display: none; }

  .modal-content { padding: 20px; border-radius: var(--oh-r-lg); }

  .page-app .collection-stats-grid { grid-template-columns: repeat(2, 1fr); }
  .page-app .collection-tools-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
  .nav__actions .button:not(.button-primary) { display: none; }
  .dashboard-stats-grid { grid-template-columns: 1fr; }
}

/* ----------------------------------------------------------------
   27. INTERSECTION OBSERVER FADE-IN
   Triggered by JS: element.classList.add('oh-visible')
   ---------------------------------------------------------------- */
.oh-fade {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity var(--oh-t-slow) var(--oh-ease),
    transform var(--oh-t-slow) var(--oh-ease);
}

.oh-fade.oh-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger fade for grid children */
.oh-fade-grid > * {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity var(--oh-t-slow) var(--oh-ease),
    transform var(--oh-t-slow) var(--oh-ease);
}

.oh-fade-grid.oh-visible > *:nth-child(1) { opacity:1; transform:translateY(0); transition-delay: 0ms; }
.oh-fade-grid.oh-visible > *:nth-child(2) { opacity:1; transform:translateY(0); transition-delay: 60ms; }
.oh-fade-grid.oh-visible > *:nth-child(3) { opacity:1; transform:translateY(0); transition-delay: 120ms; }
.oh-fade-grid.oh-visible > *:nth-child(4) { opacity:1; transform:translateY(0); transition-delay: 180ms; }
.oh-fade-grid.oh-visible > *:nth-child(5) { opacity:1; transform:translateY(0); transition-delay: 240ms; }
.oh-fade-grid.oh-visible > *:nth-child(6) { opacity:1; transform:translateY(0); transition-delay: 300ms; }

/* Keep overhaul sections visible even if the intersection observer does not run. */
.oh-fade,
.oh-fade.oh-visible,
.oh-fade-grid > *,
.oh-fade-grid.oh-visible > * {
  opacity: 1 !important;
  transform: none !important;
  transition-delay: 0ms !important;
}

/* ----------------------------------------------------------------
   OS light-mode: same dark-text treatment for pages without theme-init.js.
   ---------------------------------------------------------------- */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) .eyebrow,
  :root:not([data-theme]) .ui-metric-card__eyebrow,
  :root:not([data-theme]) .ui-action-card__eyebrow,
  :root:not([data-theme]) .ui-tool-card__eyebrow,
  :root:not([data-theme]) .ui-progress-module__eyebrow,
  :root:not([data-theme]) .ui-profile-card__eyebrow,
  :root:not([data-theme]) .panel__eyebrow {
    color: var(--oh-text);
  }
  :root:not([data-theme]) .app-section-shell .eyebrow { color: var(--oh-text) !important; }
  :root:not([data-theme]) .text-gold { color: var(--oh-text); }
  :root:not([data-theme]) a:not([class])       { color: var(--oh-text); }
  :root:not([data-theme]) a:not([class]):hover  { color: var(--oh-text-2); }
  :root:not([data-theme]) .status-wishlist,
  :root:not([data-theme]) .status-chip.status-wishlist { color: var(--oh-text); }
}