/* ============================================
   SEARCH AND DESTROY — DESIGN SYSTEM
   ============================================
   Brand: Dark brutalist glitch. Industrial. A robot made this.
   Fonts: Syne (display), Space Mono (body/UI)
   Palette: Black base + electric green accent
   ============================================ */

/* --- RESET & BASE --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* --- CLERK SOCIAL BUTTONS — GitHub icon visibility on dark theme ---
   Clerk renders the GitHub mark as a flat SVG with no fill of its own,
   which on our pitch-black social button becomes invisible. Force the
   GitHub icon (and only the GitHub icon — Google/Microsoft already
   ship colored marks we don't want to flatten) to white. Selector
   uses Clerk's stable class hooks documented in their appearance API. */
.cl-socialButtonsProviderIcon__github,
.cl-socialButtonsProviderIcon__github svg,
.cl-socialButtonsBlockButton__github .cl-socialButtonsProviderIcon {
  filter: brightness(0) invert(1) !important;
  color: #fff !important;
  fill: #fff !important;
}
.cl-socialButtonsProviderIcon__github svg path,
.cl-socialButtonsBlockButton__github svg path {
  fill: #fff !important;
}

/* --- VERIFICATION BADGES --- */
.badge-verified {
  background: rgba(0, 255, 136, 0.15);
  color: var(--accent, #00ff88);
  border: 1px solid var(--accent, #00ff88);
  font-weight: 700;
}
.badge-expired {
  background: rgba(255, 0, 64, 0.10);
  color: #ff5577;
  border: 1px solid rgba(255, 0, 64, 0.35);
  font-weight: 700;
}
.badge-needs-verify {
  background: rgba(255, 170, 0, 0.10);
  color: #ffaa00;
  border: 1px solid rgba(255, 170, 0, 0.35);
  font-weight: 700;
}
.job-card-expired {
  opacity: 0.65;
}
.job-card-expired:hover { opacity: 1; }

/* --- HARD VIEWPORT CLIP ---
   Always-on. Prevents iOS Safari's shrink-to-fit (and any over-eager
   layout-viewport widening) from kicking in when an element briefly
   overflows the viewport before its mobile rule hides it. Without
   this, the page gets auto-zoomed and the 600px @media stops matching,
   which is exactly what we saw in production. */
html, body { max-width: 100vw; overflow-x: hidden; }

:root {
  /* Palette — dark, industrial */
  --bg-base: #000000;
  --bg-surface: #111111;
  --bg-card: #161616;
  --bg-card-hover: #1c1c1c;
  --bg-inset: #0e0e0e;
  --bg-input: #111111;

  --border: #2a2a2a;
  --border-subtle: #1e1e1e;
  --border-hover: #3a3a3a;
  --border-focus: #00ff88;

  --text-primary: #e8e8e8;
  --text-secondary: #b0b0b0;
  --text-tertiary: #777777;
  --text-muted: #555555;

  /* Electric green — VU meter peak */
  --accent: #00ff88;
  --accent-dim: #00cc6a;
  --accent-surface: #0a1f14;
  --accent-hover: #00dd77;
  --accent-text: #000000;

  /* Semantic colors */
  --blue: #00e5ff;
  --blue-dim: #00b8cc;
  --blue-surface: #0a1a1e;

  --amber: var(--amber);
  --amber-dim: #cc8800;
  --amber-surface: #1a1400;

  --red: #ff0040;
  --red-dim: #cc0033;
  --red-surface: #1a0008;

  --green: #00ff88;
  --green-dim: #00cc6a;
  --green-surface: #0a1f14;

  --neutral: #777777;
  --neutral-dim: #555555;
  --neutral-surface: #111111;

  /* Typography */
  --font-brand: 'Syne', 'SF Pro Display', 'Helvetica Neue', sans-serif;
  --font-body: 'Space Mono', 'SF Mono', 'Consolas', monospace;
  --font-mono: 'Space Mono', 'SF Mono', 'Consolas', monospace;

  /* Spacing */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 48px;
  --space-2xl: 80px;

  /* Radii — brutalist: no curves.
     The one exception: truly circular elements (spinners, status dots,
     avatar bubbles). Routing them through a named token makes the
     exception explicit and keeps the aesthetic-lint guard useful. */
  --radius-sm: 0;
  --radius-md: 0;
  --radius-lg: 0;
  --radius-full: 0;
  --radius-circle: 50%;

  /* Shadows — none, use borders */
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;

  /* Transitions */
  --transition-fast: 100ms ease;
  --transition-normal: 200ms ease;
}

html { font-size: 16px; }

body {
  font-family: var(--font-body);
  background: var(--bg-base);
  color: var(--text-secondary);
  line-height: 1.65;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  cursor: crosshair;
  overflow-x: hidden;
}

/* Grain overlay */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 10000;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 256px 256px;
}

::selection {
  background: var(--accent);
  color: var(--accent-text);
}

/* --- LAYOUT SHELL --- */
.app-shell {
  max-width: 920px;
  margin: 0 auto;
  padding: var(--space-lg) var(--space-lg) var(--space-2xl);
}

/* --- NAVIGATION --- */
.nav {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  padding: var(--space-md) 0 var(--space-lg);
  margin-bottom: var(--space-xl);
  border-bottom: 1px solid var(--border-subtle);
}

.nav-brand {
  font-family: var(--font-mono);
  font-style: normal;
  font-size: 0.75em;
  font-weight: 700;
  color: var(--text-primary);
  text-decoration: none;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

.nav-links {
  display: flex;
  gap: var(--space-xs);
  margin-left: auto;
}

.nav-link {
  color: var(--text-tertiary);
  text-decoration: none;
  font-size: 0.85em;
  font-weight: 500;
  padding: 6px 14px;
  border-radius: var(--radius-full);
  transition: all var(--transition-fast);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.nav-link:hover {
  color: var(--text-primary);
  background: var(--bg-surface);
}

.nav-link.active {
  color: var(--accent-text);
  background: var(--accent);
}

/* --- TYPOGRAPHY --- */
.page-title {
  font-family: var(--font-brand);
  font-style: normal;
  font-size: 2.4em;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin-bottom: var(--space-sm);
  text-transform: uppercase;
}

.page-subtitle {
  color: var(--text-tertiary);
  font-size: 1em;
  margin-bottom: var(--space-xl);
  max-width: 520px;
  letter-spacing: 0.01em;
}

h2 {
  font-family: var(--font-mono);
  font-size: 0.7em;
  font-weight: 700;
  color: var(--accent);
  margin: var(--space-xl) 0 var(--space-md);
  text-transform: uppercase;
  letter-spacing: 0.2em;
}

h3 {
  font-family: var(--font-brand);
  font-style: normal;
  font-size: 1.15em;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: var(--space-sm);
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

a { color: var(--accent); transition: color var(--transition-fast); text-decoration: none; }
a:hover { color: var(--accent-hover); }

p { font-family: var(--mono); font-size: 12px; color: var(--grey-text); line-height: 1.8; }

/* ============================================
   DASHBOARD HERO STATUS
   ============================================ */

.hero {
  border: 1px solid var(--grey-mid);
  background: var(--grey-dark);
  padding: 28px 24px 0;
  margin-bottom: 32px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.hero-top {
  display: grid;
  /* First column is locked so font-cycling on the DESTROY word cannot
     push the status strip / run-search button around. Width is sized
     to comfortably hold the widest font in the cycle at max size. */
  grid-template-columns: clamp(260px, 30vw, 440px) 1fr auto;
  gap: 32px;
  align-items: center;
  padding-bottom: 24px;
}

.hero-brand {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  overflow: hidden;
  /* Extra right padding so even the widest font renders clear of the
     green separator on the next column. */
  padding-right: 12px;
}

.hero-title {
  font-family: var(--sans);
  /* Capped so the widest fonts in the cycle (Impact / Arial Black /
     Copperplate) still fit inside the locked hero-brand column. */
  font-size: clamp(2rem, 4.2vw, 3.2rem);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.03em;
  line-height: 0.9;
  color: var(--white);
}

/* DESTROY span: inline-block + nowrap so the scramble animation
   never wraps mid-word. Width is allowed to vary per font; the
   parent column clips any overflow so the layout stays stable. */
.hero-destroy {
  display: inline-block;
  white-space: nowrap;
}

.hero-tagline {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--grey-dim);
  margin-top: 6px;
}

/* Status strip — no card box, just pulse + text */
.hero-status {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
  border-left: 2px solid var(--accent-dim);
}

.hero-pulse {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-circle);
  background: var(--accent);
  flex-shrink: 0;
  box-shadow: 0 0 10px var(--accent);
  animation: pulse 2s ease-in-out infinite;
}

.hero-message { display: flex; flex-direction: column; gap: 3px; }
.hero-headline { font-family: var(--mono); font-size: 12px; font-weight: 700; color: var(--white); }
.hero-detail   { font-family: var(--mono); font-size: 10px; color: var(--grey-text); }

/* ============================================
   DASHBOARD STATS
   ============================================ */

/* --- STAT CARDS --- */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  width: 100%;
  background: var(--grey-mid);
  border-top: 1px solid var(--grey-mid);
  margin-bottom: 0;
}

.stat-card {
  background: var(--off);
  padding: 24px 16px;
  display: flex;
  flex-direction: column;
  transition: background var(--transition-fast);
}

.stat-card:hover {
  border-color: var(--border-hover);
  background: var(--bg-card-hover);
}

.stat-number {
  font-family: var(--sans);
  font-size: clamp(1.4rem, 1.8vw, 2.2rem);
  font-weight: 900;
  color: var(--white);
  line-height: 1;
  letter-spacing: -0.04em;
}

.stat-label {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--grey-dim);
  margin-top: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ============================================
   TABS
   ============================================ */

.tabs {
  display: flex;
  gap: 1px;
  background: var(--grey-mid);
  border: 1px solid var(--grey-mid);
  border-bottom: none;
  margin-top: 32px;
}

.tab {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 12px 20px;
  background: var(--off);
  color: var(--grey-dim);
  border: none;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.tab:hover  { background: var(--grey-dark); color: var(--grey-text); }
.tab.active { background: var(--grey-dark); color: var(--accent); }

.tab-count {
  display: inline-block;
  background: var(--accent);
  color: var(--black);
  font-size: 8px;
  font-weight: 700;
  padding: 1px 5px;
  margin-left: 6px;
  vertical-align: middle;
}

.tab-panel {
  display: none;
  border: 1px solid var(--grey-mid);
  border-top: none;
  padding: 24px;
  background: var(--off);
}

.tab-panel.active { display: block; }
.tab-intro { font-size: 10px; color: var(--grey-dim); letter-spacing: 0.08em; margin-bottom: 16px; text-transform: uppercase; }
.section-gap { margin-top: 32px; }

.sort-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  gap: 12px;
  flex-wrap: wrap;
}
.sort-bar-left,
.sort-bar-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.sort-count {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

/* Custom sort dropdown — listbox pattern so popup matches the UI */
.sort-dropdown {
  position: relative;
  display: inline-block;
  font-family: var(--font-mono);
}
.sort-dropdown-btn {
  display: inline-flex;
  align-items: stretch;
  background: var(--bg-inset);
  color: var(--text-primary);
  border: 1px solid var(--border);
  padding: 0;
  cursor: pointer;
  font-family: var(--font-mono);
}
.sort-dropdown-btn:hover { border-color: var(--border-hover); }
.sort-dropdown.is-open .sort-dropdown-btn,
.sort-dropdown-btn:focus-visible { border-color: var(--border-focus); outline: none; }

.sort-dropdown-label {
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  border-right: 1px solid var(--border);
  background: var(--bg-surface);
}
.sort-dropdown-value {
  font-size: 11px;
  letter-spacing: 0.05em;
  padding: 8px 10px;
  display: inline-flex;
  align-items: center;
  color: var(--text-primary);
}
.sort-dropdown-caret {
  width: 10px;
  height: 100%;
  padding: 0 12px 0 4px;
  position: relative;
  align-self: stretch;
  display: inline-flex;
  align-items: center;
}
.sort-dropdown-caret::before,
.sort-dropdown-caret::after {
  content: '';
  position: absolute;
  width: 5px; height: 5px;
  background: var(--accent);
  top: 50%;
}
.sort-dropdown-caret::before { right: 14px; transform: translateY(-50%) skewX(45deg); }
.sort-dropdown-caret::after  { right: 9px;  transform: translateY(-50%) skewX(-45deg); }

.sort-dropdown-list {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 100%;
  margin: 0;
  padding: 4px 0;
  list-style: none;
  background: var(--bg-surface);
  border: 1px solid var(--border-focus);
  z-index: 30;
  box-shadow: 0 4px 0 0 rgba(0, 0, 0, 0.6);
}
.sort-dropdown-list[hidden] { display: none; }
.sort-dropdown-list li {
  padding: 8px 14px;
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
  cursor: pointer;
  white-space: nowrap;
}
.sort-dropdown-list li:hover,
.sort-dropdown-list li:focus {
  background: var(--bg-card-hover);
  color: var(--text-primary);
  outline: none;
}
.sort-dropdown-list li[aria-selected="true"] {
  color: var(--accent);
}
.sort-dropdown-list li[aria-selected="true"]::before {
  content: '> ';
  color: var(--accent);
}

/* Select-all control */
.select-all-wrap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-secondary);
  cursor: pointer;
  user-select: none;
}
.select-all-wrap input[type="checkbox"] { accent-color: var(--accent); width: 14px; height: 14px; cursor: pointer; }

/* Per-card checkbox */
.job-checkbox {
  display: inline-flex;
  align-items: center;
  margin-right: 10px;
  cursor: pointer;
}
.job-checkbox input[type="checkbox"] {
  accent-color: var(--accent);
  width: 16px;
  height: 16px;
  cursor: pointer;
}
.job-card-title-wrap {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
  min-width: 0;
}
.job-card-selectable .job-card-header { align-items: flex-start; }
.job-card-bookmarked { border-left: 2px solid var(--accent); }

.badge-bookmark {
  background: var(--accent-surface);
  color: var(--accent);
  border: 1px solid var(--accent-dim);
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.18em;
  padding: 2px 6px;
}

/* Sticky bulk-action bar, shown only when selection > 0 */
.bulk-action-bar {
  position: sticky;
  top: 0;
  z-index: 20;
  padding: 10px 14px;
  margin-bottom: 14px;
  background: var(--bg-surface);
  border: 1px solid var(--accent-dim);
  border-left: 3px solid var(--accent);
  box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.6);
}
.bulk-action-bar[hidden] { display: none; }
.bulk-action-stack { display: flex; flex-direction: column; gap: 8px; }
.bulk-action-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.bulk-action-count {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}
.bulk-action-buttons {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* Escalate banner — "All 25 on this page selected. [Select all N]" */
.bulk-escalate {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  padding: 6px 8px;
  border-top: 1px dashed var(--border);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--text-tertiary);
}
.bulk-escalate[hidden] { display: none; }
.bulk-escalate-text { color: var(--text-secondary); }
.link-accent {
  background: none;
  border: none;
  padding: 0;
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-decoration: underline;
  cursor: pointer;
}
.link-accent:hover { color: var(--accent-hover); }

.btn-bookmark {
  background: var(--accent-surface);
  color: var(--accent);
  border: 1px solid var(--accent-dim);
}
.btn-bookmark:hover {
  background: var(--accent);
  color: var(--accent-text);
}

/* Paged list — hide cards not on current page */
.paged-list .job-card.off-page { display: none; }

/* Pagination bar */
.pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
  padding: 10px 14px;
  border: 1px solid var(--border);
  background: var(--bg-inset);
  font-family: var(--font-mono);
  flex-wrap: wrap;
}
.pager[hidden] { display: none; }
.pager-info {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.pager-controls {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.pager-pages { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.pager-btn, .pager-page {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  padding: 6px 10px;
  background: var(--bg-surface);
  color: var(--text-secondary);
  border: 1px solid var(--border);
  cursor: pointer;
  min-width: 30px;
  text-align: center;
}
.pager-btn:hover:not(:disabled),
.pager-page:hover { border-color: var(--border-hover); color: var(--text-primary); }
.pager-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.pager-page.is-active {
  background: var(--accent-surface);
  color: var(--accent);
  border-color: var(--accent-dim);
}

/* --- JOB CARDS --- */
.job-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.job-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-normal);
}

.job-card:hover {
  border-color: var(--border-hover);
  background: var(--bg-card-hover);
}

.job-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-xs);
  gap: var(--space-sm);
}

.job-card-header strong {
  font-family: var(--font-body);
  font-style: normal;
  color: var(--text-primary);
  font-size: 1.05em;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.job-card-company {
  color: var(--text-secondary);
  font-size: 0.875em;
}

.job-card-desc {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-tertiary);
  line-height: 1.6;
  margin: 6px 0;
  max-height: 3.2em;
  overflow: hidden;
}

.job-card-meta {
  color: var(--text-muted);
  font-size: 0.78em;
  font-family: var(--font-mono);
  margin: var(--space-sm) 0;
  letter-spacing: -0.02em;
}

.job-card-actions {
  display: flex;
  gap: var(--space-sm);
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--border-subtle);
}

/* --- BADGES --- */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 12px;
  border-radius: var(--radius-full);
  font-size: 0.7em;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.badge-primary { background: var(--green-surface); color: var(--green); }
.badge-secondary { background: var(--blue-surface); color: var(--blue); }
.badge-tertiary { background: var(--amber-surface); color: var(--amber); }
.badge-new { background: var(--green-surface); color: var(--green); }
.badge-applied { background: var(--blue-surface); color: var(--blue); }
.badge-pending_review { background: var(--amber-surface); color: var(--amber); }
.badge-skipped { background: var(--neutral-surface); color: var(--neutral); }
.badge-search { background: var(--green-surface); color: var(--green); }
.badge-error { background: var(--red-surface); color: var(--red); }
.badge-approved { background: var(--green-surface); color: var(--green); }
.badge-manual { background: var(--accent-surface); color: var(--accent); border: 1px solid var(--accent-dim); }

/* Tier badges — Auto vs Manual */
.tier-auto   { background: rgba(0,255,136,0.10); color: var(--accent); border: 1px solid rgba(0,255,136,0.25); font-family: var(--font-mono); font-size: 0.65rem; letter-spacing: 0.1em; }
.tier-manual { background: rgba(255,170,0,0.08); color: var(--amber);        border: 1px solid rgba(255,170,0,0.25); font-family: var(--font-mono); font-size: 0.65rem; letter-spacing: 0.1em; }

/* --- CARD STATES --- */
/* Materials ready, needs manual submit */
.job-card-manual {
  border-color: rgba(255,170,0,0.35);
  background: var(--amber-surface);
}
.job-card-manual:hover { border-color: var(--amber); }

/* Auto-applyable — highlight opportunity */
.job-card-auto {
  border-color: rgba(0,255,136,0.25);
  background: var(--accent-surface);
}
.job-card-auto:hover { border-color: var(--accent); }

/* Open Apply Companion button — amber, not green */
.btn-manual-apply {
  background: rgba(255,170,0,0.12);
  border: 1px solid var(--amber);
  color: var(--amber);
}
.btn-manual-apply:hover { background: rgba(255,170,0,0.22); }

/* Auto-Apply button — accent green, more prominent */
.btn-auto-apply {
  box-shadow: 0 0 8px rgba(0,255,136,0.18);
}

/* Review → for linkout jobs — neutral, no promise of auto-submit */
.btn-review-manual {
  border-color: rgba(255,170,0,0.4);
  color: var(--amber);
}
.btn-review-manual:hover { border-color: var(--amber); background: rgba(255,170,0,0.08); }
.job-card-manual-notice {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--accent);
  line-height: 1.6;
  margin: 8px 0;
  padding: 8px 12px;
  border-left: 2px solid var(--accent-dim);
  background: var(--accent-surface);
}

/* --- MANUAL APPLY BANNER (job detail page) --- */
.manual-apply-banner {
  background: var(--accent-surface);
  border: 1px solid var(--accent-dim);
  border-radius: var(--radius-md);
  padding: var(--space-xl);
  margin-bottom: var(--space-lg);
}
.manual-apply-banner-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.15em;
  color: var(--accent);
  text-transform: uppercase;
  margin-bottom: var(--space-md);
}
.manual-apply-banner-desc {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.8;
  max-width: 640px;
  margin-bottom: var(--space-lg);
}
.manual-apply-banner-actions {
  display: flex;
  gap: var(--space-sm);
  align-items: center;
  flex-wrap: wrap;
}

/* --- APPLY COMPANION PANEL --- */
.companion-panel {
  border: 1px solid var(--accent);
  border-left: 3px solid var(--accent);
  background: var(--accent-surface);
  padding: 20px 24px;
  margin: 20px 0 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.companion-header {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.companion-label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  color: var(--accent);
  text-transform: uppercase;
}
.companion-subtitle {
  font-size: 0.8rem;
  color: var(--muted);
}
.companion-actions-top {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.companion-fields {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.companion-fields-label {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.15em;
  color: var(--muted);
  margin-bottom: 4px;
}
.companion-field {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
}
.companion-field-cover {
  margin-top: 4px;
}
.companion-field-label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--muted);
  min-width: 90px;
  flex-shrink: 0;
}
.companion-field-value {
  font-size: 0.82rem;
  color: var(--text);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.btn-copy {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  padding: 4px 10px;
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color 0.15s, color 0.15s;
}
.btn-copy:hover { border-color: var(--accent); color: var(--accent); }
.btn-copy-done { border-color: var(--accent) !important; color: var(--accent) !important; }
.companion-done {
  border-top: 1px solid var(--border);
  padding-top: 16px;
}
.btn-download {
  background: var(--bg-surface);
  border: 1px solid var(--accent);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  padding: 8px 16px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: background 0.15s;
}
.btn-download:hover { background: var(--bg-card-hover); }
.btn-sm { padding: 6px 14px; font-size: 0.78rem; }

/* --- BUTTONS --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  padding: 10px 22px;
  border-radius: 0;
  border: 1px solid transparent;
  cursor: crosshair;
  font-size: 0.75em;
  font-weight: 700;
  font-family: var(--font-mono);
  text-decoration: none;
  transition: all var(--transition-fast);
  white-space: nowrap;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.btn-small { padding: 6px 16px; font-size: 0.8em; }
.btn-large { padding: 14px 36px; font-size: 0.95em; }

.btn-primary {
  background: var(--accent);
  color: var(--accent-text);
  font-weight: 600;
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover {
  background: var(--text-primary);
  color: var(--bg-base);
  box-shadow: 0 0 30px rgba(0, 255, 136, 0.2);
}

.btn-approve {
  background: var(--accent);
  color: var(--accent-text);
}
.btn-approve:hover { background: var(--accent-hover); }

.btn-skip {
  background: var(--bg-surface);
  color: var(--text-tertiary);
  border-color: var(--border);
}
.btn-skip:hover {
  background: var(--border-subtle);
  color: var(--text-secondary);
}

.btn-link {
  background: var(--bg-card);
  color: var(--accent);
  border-color: var(--border);
}
.btn-link:hover {
  background: var(--accent-surface);
  border-color: var(--accent);
}

.btn-ghost {
  background: transparent;
  color: var(--text-secondary);
  border-color: var(--border);
}
.btn-ghost:hover {
  background: var(--bg-surface);
  color: var(--text-primary);
  border-color: var(--border-hover);
}

.btn-tiny {
  background: none;
  border: none;
  color: var(--accent);
  cursor: pointer;
  font-size: 0.8em;
  font-family: var(--font-body);
  padding: 2px 0;
}
.btn-tiny:hover { text-decoration: underline; }

/* --- ACTION BUTTONS ROW --- */
.action-buttons {
  display: flex;
  gap: var(--space-sm);
  margin: var(--space-lg) 0;
}

/* --- JOB DETAIL --- */
.job-meta {
  display: flex;
  gap: var(--space-md);
  flex-wrap: wrap;
  margin: var(--space-sm) 0 var(--space-lg);
  font-size: 0.82em;
  font-family: var(--font-mono);
  color: var(--text-muted);
  letter-spacing: -0.02em;
}

.description {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  font-size: 0.9em;
  max-height: 500px;
  overflow-y: auto;
  white-space: pre-wrap;
  line-height: 1.75;
  color: var(--text-secondary);
  box-shadow: var(--shadow-sm);
}

.cover-letter {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  font-size: 0.9em;
  white-space: pre-wrap;
  line-height: 1.75;
  color: var(--text-secondary);
  box-shadow: var(--shadow-sm);
}

.error-info { color: var(--red); font-size: 0.85em; }

/* --- ACTIVITY TABLE --- */
.activity-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85em;
  background: var(--bg-card);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.activity-table th {
  text-align: left;
  padding: var(--space-md) var(--space-md);
  background: var(--bg-inset);
  color: var(--text-tertiary);
  font-weight: 500;
  font-size: 0.8em;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-bottom: 1px solid var(--border);
}

.activity-table td {
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-secondary);
}

.activity-table tr:last-child td { border-bottom: none; }

.activity-table tr:hover td {
  background: var(--bg-inset);
}

/* --- FORMS --- */
fieldset {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  margin-bottom: var(--space-lg);
  background: var(--bg-card);
  box-shadow: var(--shadow-sm);
}

legend {
  font-family: var(--font-body);
  color: var(--accent);
  font-weight: 600;
  font-size: 0.8em;
  padding: 0 var(--space-sm);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

label {
  display: block;
  margin-bottom: var(--space-md);
  color: var(--text-secondary);
  font-size: 0.875em;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="url"],
input[type="number"] {
  display: block;
  width: 100%;
  padding: 11px 14px;
  margin-top: var(--space-xs);
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: 0.9em;
  font-family: var(--font-body);
  transition: all var(--transition-fast);
}

input:focus, textarea:focus {
  outline: none;
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px var(--accent-surface);
}

textarea {
  display: block;
  width: 100%;
  padding: 11px 14px;
  margin-top: var(--space-xs);
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: 0.9em;
  font-family: var(--font-body);
  resize: vertical;
  transition: all var(--transition-fast);
}

.checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  cursor: pointer;
}
.checkbox-label input[type="checkbox"] { width: auto; margin: 0; accent-color: var(--accent); }

.help-text {
  color: var(--text-muted);
  font-size: 0.85em;
  margin-bottom: var(--space-sm);
}

.form-actions {
  display: flex;
  gap: var(--space-md);
  margin: var(--space-xl) 0;
}

/* --- SETTINGS --- */
.settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-md);
  margin-top: var(--space-lg);
}

.settings-card {
  display: block;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-normal);
}

.settings-card:hover {
  border-color: var(--accent);
  background: var(--bg-card-hover);
}

.settings-card h3 { color: var(--text-primary); font-style: normal; }
.settings-card p { color: var(--text-tertiary); font-size: 0.875em; margin-top: var(--space-xs); }

.exp-block {
  background: var(--bg-inset);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  margin-bottom: var(--space-md);
}

.exp-row {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: var(--space-md);
  align-items: end;
}

.toast {
  background: var(--green-surface);
  color: var(--green);
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-lg);
  font-weight: 500;
  border: 1px solid var(--accent);
}

.toast-error {
  background: var(--red-surface);
  color: var(--red);
  border-color: var(--red);
}

/* --- WIZARD --- */
.wizard-hero {
  text-align: center;
  padding: var(--space-2xl) 0 var(--space-xl);
}

.wizard-hero h1 {
  font-family: var(--font-brand);
  font-style: normal;
  font-size: 3.2em;
  color: var(--text-primary);
  letter-spacing: -0.03em;
  text-transform: uppercase;
  line-height: 1.1;
  margin-bottom: var(--space-md);
}

.wizard-hero .tagline {
  font-family: var(--font-body);
  font-size: 0.85em;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-weight: 400;
  margin-bottom: var(--space-lg);
}

.wizard-hero .subtitle,
.wizard-hero .page-subtitle {
  color: var(--text-tertiary);
  font-size: 1.05em;
  max-width: 440px;
  margin: 0 auto;
  line-height: 1.6;
}

.wizard-progress {
  display: flex;
  justify-content: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-xl);
}

.wizard-progress .step {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-circle);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.85em;
  background: var(--bg-card);
  border: 2px solid var(--border);
  color: var(--text-muted);
  transition: all var(--transition-normal);
  box-shadow: var(--shadow-sm);
}

.wizard-progress .step.active {
  border-color: var(--accent);
  color: var(--accent-text);
  background: var(--accent);
  box-shadow: 0 0 12px rgba(0, 255, 136, 0.3);
}

.wizard-progress .step.done {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-surface);
}

.wizard-form { margin-top: var(--space-lg); }

.upload-zone {
  border: 2px dashed var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-xl);
  text-align: center;
  cursor: pointer;
  margin-bottom: var(--space-md);
  transition: all var(--transition-normal);
  background: var(--bg-card);
}

.upload-zone:hover, .upload-zone.dragover {
  border-color: var(--accent);
  background: var(--accent-surface);
}

.upload-zone input[type="file"] { display: none; }
.upload-zone p { color: var(--text-tertiary); }

.uploaded-files { margin: var(--space-md) 0; }
.uploaded-files ul { list-style: none; }
.uploaded-files li {
  padding: var(--space-sm) var(--space-md);
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-sm);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.9em;
  box-shadow: var(--shadow-sm);
}
.file-meta { color: var(--text-muted); font-size: 0.85em; font-family: var(--font-mono); }

.position-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.position-option {
  display: flex;
  gap: var(--space-sm);
  align-items: flex-start;
  padding: var(--space-md);
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
  box-shadow: var(--shadow-sm);
}

.position-option:hover {
  border-color: var(--accent);
  background: var(--accent-surface);
}

.position-option input { margin-top: 3px; accent-color: var(--accent); }
.position-option .why { color: var(--text-tertiary); font-size: 0.85em; }

.field-tag {
  display: inline-block;
  background: var(--blue-surface);
  color: var(--blue);
  font-size: 0.7em;
  padding: 2px 10px;
  border-radius: var(--radius-full);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.review-section {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  margin-bottom: var(--space-md);
  box-shadow: var(--shadow-sm);
}

.tag-list { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-sm); }

.tag {
  background: var(--accent-surface);
  color: var(--accent);
  padding: 4px 14px;
  border-radius: var(--radius-full);
  font-size: 0.8em;
  font-weight: 500;
  border: 1px solid var(--accent);
}

.disabled { color: var(--text-muted); }

.select-all-bar { display: flex; gap: var(--space-sm); margin-bottom: var(--space-md); }

/* --- LOADING --- */
.loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--border);
  border-top-color: var(--accent);
  border-radius: var(--radius-circle);
  animation: spin 0.9s linear infinite;
  margin: var(--space-lg) auto;
}

.progress-bar {
  width: 100%;
  height: 5px;
  background: var(--bg-surface);
  border-radius: var(--radius-full);
  margin-top: var(--space-lg);
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--accent-dim), var(--accent));
  border-radius: var(--radius-full);
  transition: width 0.8s ease;
}

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

/* --- LOADING OVERLAY --- */
.loading-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.loading-overlay.active {
  opacity: 1;
  pointer-events: all;
}

.loading-overlay-content {
  text-align: center;
}

.loading-overlay-content .loading-spinner {
  width: 48px;
  height: 48px;
  border-width: 4px;
  margin-bottom: var(--space-lg);
}

.loading-message {
  font-size: 1.05em;
  font-weight: 500;
  color: var(--text-secondary);
  margin-top: var(--space-md);
}

/* --- EMPTY STATE --- */
.empty-state {
  text-align: center;
  padding: var(--space-2xl) var(--space-lg);
  color: var(--text-muted);
}

.empty-state p { font-size: 1.05em; }

/* --- UTILITY --- */
.error-detail {
  color: var(--red);
  font-size: 0.85em;
  margin-top: var(--space-sm);
  background: var(--red-surface);
  padding: var(--space-md);
  border-radius: var(--radius-sm);
}

.section-gap { margin-top: var(--space-xl); }

/* --- HERO (second block — consolidated, no overrides needed) --- */

/* hero-status second definition removed — consolidated above */

.hero-pulse {
  width: 12px;
  height: 12px;
  border-radius: var(--radius-circle);
  background: var(--accent);
  flex-shrink: 0;
  animation: pulse 2.5s ease-in-out infinite;
  box-shadow: 0 0 0 0 rgba(0, 255, 136, 0.4);
}

@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0, 255, 136, 0.4); }
  50% { box-shadow: 0 0 0 8px rgba(0, 255, 136, 0); }
}

.hero-message { text-align: left; }

.hero-headline {
  font-family: var(--font-body);
  font-style: normal;
  font-size: 1.15em;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.01em;
  margin-bottom: 2px;
}

.hero-detail {
  font-size: 0.9em;
  color: var(--text-tertiary);
}

/* --- TABS --- */
.tabs {
  display: flex;
  gap: var(--space-xs);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--space-xl);
  padding-bottom: 0;
}

.tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: var(--space-sm) var(--space-md) var(--space-md);
  font-family: var(--font-body);
  font-size: 0.875em;
  font-weight: 500;
  color: var(--text-tertiary);
  cursor: pointer;
  transition: all var(--transition-fast);
  letter-spacing: 0.01em;
  position: relative;
  bottom: -1px;
}

.tab:hover {
  color: var(--text-primary);
}

.tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
  font-weight: 600;
}

.tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--radius-full);
  background: var(--accent);
  color: var(--accent-text);
  font-size: 0.75em;
  font-weight: 700;
  margin-left: 6px;
}

.tab-panel {
  display: none;
}

.tab-panel.active {
  display: block;
  animation: fadeIn 0.25s ease;
}

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

.tab-intro {
  color: var(--text-tertiary);
  font-size: 0.9em;
  margin-bottom: var(--space-lg);
  max-width: 520px;
}

/* --- OVERVIEW CARDS --- */
.overview-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-lg) var(--space-xl);
  margin-bottom: var(--space-md);
  box-shadow: var(--shadow-sm);
}

.overview-card h3 {
  font-style: normal;
  margin-bottom: var(--space-sm);
}

.overview-card p {
  color: var(--text-secondary);
  font-size: 0.9em;
  line-height: 1.6;
  margin-bottom: var(--space-md);
}

.overview-card p:last-child { margin-bottom: 0; }

.overview-card-accent {
  background: var(--accent-surface);
  border-color: var(--accent);
}

.overview-card-accent h3 {
  color: var(--accent-dim);
}

.overview-card-accent p {
  color: var(--accent-dim);
}

.how-it-works {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  margin-top: var(--space-md);
}

.how-step {
  display: flex;
  gap: var(--space-md);
  align-items: flex-start;
}

.how-step-number {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-circle);
  background: var(--accent);
  color: var(--accent-text);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-size: 0.9em;
  font-weight: 700;
  flex-shrink: 0;
}

.how-step strong {
  color: var(--text-primary);
  font-size: 0.95em;
  display: block;
  margin-bottom: 2px;
}

.how-step p {
  color: var(--text-tertiary);
  font-size: 0.85em;
  line-height: 1.5;
  margin-bottom: 0;
}

.overview-stat-line {
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
}

.overview-big-number {
  font-family: var(--font-body);
  font-size: 1.8em;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1;
}

/* ============================================
   LANDING PAGE
   ============================================ */

/* --- LANDING NAV --- */
.landing-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(241, 238, 235, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-subtle);
}

.landing-nav-inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: var(--space-md) var(--space-lg);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* --- LANDING HERO --- */
.landing-hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 96px 24px 80px;
  position: relative;
  overflow: hidden;
}

.landing-hero::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  background: var(--accent);
  opacity: 0.05;
  animation: scan 10s linear infinite;
  pointer-events: none;
}

.hero-inner {
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 300px);
  gap: clamp(24px, 5vw, 80px);
  align-items: end;
}

.hero-left {
  position: relative;
  overflow: hidden;
  min-width: 0;
}

.landing-kicker {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 28px;
}

.landing-kicker::before { content: '> '; }

.landing-headline {
  font-family: var(--sans);
  font-size: clamp(4rem, 10vw, 9rem);
  font-weight: 900;
  line-height: 0.9;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  margin-bottom: 36px;
}

.landing-headline .line-white  { display: block; color: var(--white); }
.landing-headline .line-accent { display: block; color: var(--accent); }

.landing-subhead {
  font-family: var(--mono);
  font-size: 13px;
  line-height: 2;
  color: var(--grey-text);
  max-width: 520px;
  margin-bottom: 40px;
}

.landing-cta-row { display: flex; gap: 12px; flex-wrap: wrap; }

/* Hero readout panel */
.hero-readout {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--grey-dim);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-left: 1px solid var(--grey-mid);
  padding-left: 24px;
}

.readout-line {
  display: block;
  border-bottom: 1px solid var(--grey-mid);
  padding: 10px 0;
  font-size: 10px;
}

.readout-val     { color: var(--accent); font-weight: 700; }
.readout-offline { color: var(--red); }

/* --- GLITCH DIVIDER (landing) --- */
.landing-divider {
  height: 32px;
  position: relative;
  overflow: hidden;
}

.landing-divider-bar {
  position: absolute;
  height: 1px;
  background: var(--accent);
}

.landing-divider-bar:nth-child(1) { top: 8px;  left: 0;   width: 40%; opacity: 0.5; }
.landing-divider-bar:nth-child(2) { top: 17px; left: 25%; width: 75%; opacity: 0.25; }
.landing-divider-bar:nth-child(3) { top: 25px; left: 10%; width: 55%; opacity: 0.12; }

/* --- SECTIONS --- */
.landing-section {
  padding: 120px 24px;
  max-width: 1400px;
  margin: 0 auto;
}

.landing-section-dark {
  background: var(--grey-dark);
  border-top: 1px solid var(--grey-mid);
  border-bottom: 1px solid var(--grey-mid);
  padding: 120px 24px;
}

.landing-section-dark .section-inner {
  max-width: 1400px;
  margin: 0 auto;
}

.section-kicker {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 14px;
}

.section-headline {
  font-family: var(--sans);
  font-size: clamp(2rem, 5vw, 4rem);
  font-weight: 900;
  line-height: 1.0;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: 14px;
}

.section-subhead {
  font-family: var(--mono);
  font-size: 12px;
  line-height: 2;
  color: var(--grey-text);
  max-width: 520px;
  margin-bottom: 52px;
}

/* --- STATS GRID --- */
.frustration-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1.5fr;
  gap: 1px;
  background: var(--grey-mid);
  border: 1px solid var(--grey-mid);
}

.frustration-card {
  background: var(--black);
  padding: 48px 28px;
  min-width: 0;
  overflow: hidden;
}

.frustration-card:nth-child(4) {
  background: var(--grey-dark);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.frustration-number {
  font-family: var(--sans);
  font-size: clamp(2rem, 4vw, 4.5rem);
  font-weight: 900;
  color: var(--white);
  line-height: 1;
  letter-spacing: -0.04em;
  white-space: nowrap;
}

.frustration-card:nth-child(even) .frustration-number { color: var(--accent); }

.frustration-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--grey-text);
  margin-top: 12px;
  line-height: 1.6;
}

.frustration-source {
  font-family: var(--mono);
  font-size: 9px;
  color: var(--grey-dim);
  margin-top: 8px;
}

.frustration-callout {
  margin-top: 40px;
  padding: 22px 28px;
  border-left: 3px solid var(--red);
  background: var(--grey-dark);
  font-family: var(--mono);
  font-size: 13px;
  color: var(--grey-text);
  line-height: 1.8;
  max-width: 680px;
}

.frustration-callout strong { color: var(--white); }

/* --- FEATURES GRID --- */
.solution-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr 1fr;
  gap: 1px;
  background: var(--grey-mid);
  border: 1px solid var(--grey-mid);
}

.solution-card {
  background: var(--black);
  padding: 48px 32px;
  position: relative;
}

.solution-card::before {
  content: attr(data-num);
  font-family: var(--sans);
  font-size: 7rem;
  font-weight: 900;
  color: var(--grey-mid);
  position: absolute;
  top: -10px;
  right: 16px;
  line-height: 1;
  pointer-events: none;
}

.solution-card:nth-child(2) { padding-top: 72px; padding-bottom: 72px; }

.solution-card-label {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--grey-mid);
}

.solution-card h3 {
  font-family: var(--sans);
  font-size: 1.5rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  color: var(--white);
  margin: 0 0 12px;
}

.solution-card p {
  font-family: var(--mono);
  font-size: 11px;
  line-height: 2;
  color: var(--grey-text);
}

/* --- HOW IT WORKS --- */
.steps-grid {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 0;
  border: 1px solid var(--grey-mid);
}

.step-row { display: contents; }

.step-num-col {
  background: var(--grey-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--sans);
  font-size: 1.8rem;
  font-weight: 900;
  color: var(--grey-dim);
  border-bottom: 1px solid var(--grey-mid);
  border-right: 1px solid var(--grey-mid);
}

.step-content {
  padding: 40px 32px;
  border-bottom: 1px solid var(--grey-mid);
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 40px;
  align-items: center;
  transition: background var(--transition-fast);
}

.step-content:hover { background: var(--grey-dark); }

.step-title {
  font-family: var(--sans);
  font-size: 1.3rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  color: var(--white);
  margin: 0;
}

.step-desc {
  font-family: var(--mono);
  font-size: 11px;
  line-height: 2;
  color: var(--grey-text);
}

/* --- COMPARISON --- */
.comparison-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--grey-mid);
}

.comparison-card { padding: 48px 32px; }

.comparison-before {
  background: var(--black);
  border-right: 1px solid var(--grey-mid);
}

.comparison-after { background: var(--grey-dark); }

.comparison-card h3 {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  margin: 0 0 24px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--grey-mid);
}

.comparison-before h3 { color: var(--red); }
.comparison-after h3  { color: var(--accent); }

.comparison-card ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.comparison-card li {
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.6;
  padding-left: 20px;
  position: relative;
  color: var(--grey-text);
}

.comparison-card li::before { position: absolute; left: 0; font-weight: 700; }
.comparison-before li::before { content: '×'; color: var(--red); }
.comparison-after  li::before { content: '+'; color: var(--accent); }
.comparison-after  li { color: var(--white); }

/* --- CTA SECTION --- */
.landing-cta-section {
  padding: 160px 24px;
  text-align: center;
}

.landing-kicker {
  font-family: var(--font-mono);
  font-size: 0.7em;
  font-weight: 700;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.3em;
  margin-bottom: var(--space-md);
}

.landing-headline {
  font-family: var(--font-brand);
  font-style: normal;
  font-size: 4em;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.03em;
  line-height: 1.0;
  margin-bottom: var(--space-lg);
  text-transform: uppercase;
}

.landing-subhead {
  font-size: 1.15em;
  color: var(--text-secondary);
  max-width: 580px;
  margin: 0 auto var(--space-xl);
  line-height: 1.7;
}

.landing-cta-row {
  display: flex;
  gap: var(--space-md);
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: var(--space-xl);
}

.landing-hero-image {
  max-width: 800px;
  margin: 0 auto;
}

/* --- LANDING SECTIONS --- */
.landing-section {
  max-width: 1080px;
  margin: 0 auto;
  padding: var(--space-2xl) var(--space-lg);
}

.landing-section-alt {
  background: var(--bg-surface);
  max-width: none;
  padding-left: 0;
  padding-right: 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.landing-section-alt > * {
  max-width: 1080px;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-lg);
  padding-right: var(--space-lg);
}

.section-kicker {
  font-family: var(--font-mono);
  font-size: 0.65em;
  font-weight: 700;
  color: var(--red);
  text-transform: uppercase;
  letter-spacing: 0.3em;
  margin-bottom: var(--space-sm);
}

.section-headline {
  font-family: var(--font-brand);
  font-style: normal;
  font-size: 2.6em;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin-bottom: var(--space-md);
  text-transform: uppercase;
}

.section-subhead {
  font-size: 1.05em;
  color: var(--text-secondary);
  max-width: 560px;
  line-height: 1.65;
  margin-bottom: var(--space-xl);
}

/* --- FRUSTRATION STATS GRID --- */
.frustration-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
}

.frustration-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-xl) var(--space-lg);
  text-align: center;
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-normal);
}

.frustration-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.frustration-number {
  font-family: var(--font-body);
  font-size: 3em;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1;
  margin-bottom: var(--space-sm);
}

.frustration-label {
  font-size: 0.875em;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: var(--space-sm);
}

.frustration-source {
  font-size: 0.7em;
  font-family: var(--font-mono);
  color: var(--text-muted);
  letter-spacing: -0.01em;
}

.frustration-callout {
  background: var(--accent-surface);
  border: 1px solid var(--accent);
  border-radius: var(--radius-md);
  padding: var(--space-lg) var(--space-xl);
  text-align: center;
  font-size: 1.1em;
  color: var(--accent-dim);
  line-height: 1.6;
}

.frustration-callout strong {
  color: var(--accent);
  font-weight: 700;
}

/* --- SOLUTION GRID --- */
.solution-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
}

.solution-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-xl) var(--space-lg);
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-normal);
}

.solution-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.solution-card h3 {
  font-style: normal;
  margin-top: var(--space-md);
  margin-bottom: var(--space-sm);
}

.solution-card p {
  color: var(--text-secondary);
  font-size: 0.9em;
  line-height: 1.65;
}

/* --- STEPS GRID --- */
.steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
}

.step-card {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-xl) var(--space-lg);
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-normal);
}

.step-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.step-number {
  font-family: var(--font-body);
  font-size: 3.5em;
  font-weight: 700;
  color: var(--accent-surface);
  line-height: 1;
  margin-bottom: var(--space-sm);
  letter-spacing: -0.03em;
}

.step-card h3 {
  font-style: normal;
  margin-top: var(--space-md);
  margin-bottom: var(--space-sm);
}

.step-card p {
  color: var(--text-secondary);
  font-size: 0.9em;
  line-height: 1.65;
}

/* --- COMPARISON GRID --- */
.comparison-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-lg);
  margin-bottom: var(--space-xl);
}

.comparison-card {
  border-radius: var(--radius-md);
  padding: var(--space-xl) var(--space-lg);
  box-shadow: var(--shadow-sm);
}

.comparison-card h3 {
  font-style: normal;
  margin-bottom: var(--space-lg);
}

.comparison-card ul {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.comparison-card li {
  padding-left: var(--space-lg);
  position: relative;
  font-size: 0.95em;
  line-height: 1.5;
}

.comparison-card li::before {
  position: absolute;
  left: 0;
  font-weight: 700;
}

.comparison-before {
  background: var(--bg-card);
  border: 1px solid var(--border);
}

.comparison-before li::before {
  content: "✕";
  color: var(--red);
}

.comparison-before li {
  color: var(--text-tertiary);
}

.comparison-after {
  background: var(--accent-surface);
  border: 1px solid var(--accent);
}

.comparison-after h3 {
  color: var(--accent-dim);
}

.comparison-after li::before {
  content: "✓";
  color: var(--accent);
}

.comparison-after li {
  color: var(--accent-dim);
}

/* --- LANDING CTA SECTION --- */
.landing-cta-section {
  text-align: center;
  padding-top: var(--space-2xl) !important;
  padding-bottom: var(--space-2xl) !important;
}

.landing-cta-section .section-headline {
  margin-bottom: var(--space-md);
}

.landing-cta-section .section-subhead {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: var(--space-xl);
}

/* --- LANDING FOOTER --- */
.landing-footer {
  background: var(--text-primary);
  color: var(--bg-base);
  padding: var(--space-xl) var(--space-lg);
}

.landing-footer-inner {
  max-width: 1080px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-lg);
}

.landing-footer-brand .nav-brand {
  color: var(--bg-base);
}

.landing-footer-tagline {
  font-size: 0.85em;
  color: var(--text-muted);
  margin-top: var(--space-xs);
}

.landing-footer-links {
  display: flex;
  gap: var(--space-lg);
}

.landing-footer-links a {
  color: var(--bg-surface);
  font-size: 0.85em;
  text-decoration: none;
  transition: color var(--transition-fast);
}

.landing-footer-links a:hover {
  color: var(--text-primary);
}

/* --- PLACEHOLDER IMAGES --- */
.placeholder-image {
  background: var(--bg-surface);
  border: 2px dashed var(--border);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 0.8em;
  font-style: italic;
  text-align: center;
  padding: var(--space-md);
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 960px) {
  .hero-inner { grid-template-columns: 1fr; gap: 48px; }
  .hero-readout { border-left: none; border-top: 1px solid var(--grey-mid); padding-left: 0; padding-top: 20px; }
  .frustration-grid { grid-template-columns: 1fr 1fr; }
  .solution-grid { grid-template-columns: 1fr; }
  .step-content { grid-template-columns: 1fr; gap: 12px; }
  .comparison-grid { grid-template-columns: 1fr; }
  .comparison-before { border-right: none; border-bottom: 1px solid var(--grey-mid); }
  .hero-top { grid-template-columns: auto 1fr auto; }
}

.placeholder-hero {
  height: 400px;
}

.placeholder-sm {
  height: 120px;
}

.placeholder-md {
  height: 200px;
  margin-bottom: var(--space-md);
}

.placeholder-wide {
  height: 300px;
  max-width: 800px;
  margin: 0 auto;
}

/* --- RESPONSIVE --- */
@media (max-width: 768px) {
  .app-shell { padding: var(--space-md) var(--space-md) var(--space-xl); }
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-sm); }
  .stat-number { font-size: 1.8em; }
  .nav { gap: var(--space-sm); flex-wrap: wrap; }
  .nav-brand { font-size: 1.05em; }
  .nav-links { gap: 2px; }
  .nav-link { padding: 4px 10px; font-size: 0.8em; }
  .job-card { padding: var(--space-md); }
  .job-card-actions { flex-wrap: wrap; }
  .exp-row { grid-template-columns: 1fr; }
  .hero-title { font-size: 2.2em; }
  .hero-status { flex-direction: column; text-align: center; }
  .hero-message { text-align: center; }
  .tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .tab { white-space: nowrap; }
  .overview-card { padding: var(--space-lg); }
  .wizard-hero h1 { font-size: 2.2em; }
  .page-title { font-size: 1.8em; }
  /* Landing page responsive */
  .landing-headline { font-size: 2.6em; }
  .section-headline { font-size: 1.8em; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .hero-top { grid-template-columns: 1fr; gap: 12px; }
  .hero-brand { display: none; }
  .job-card { padding: 18px 16px; }
  .job-card-header { flex-direction: column; gap: 8px; }
  .frustration-grid { grid-template-columns: 1fr 1fr; }
  .solution-grid { grid-template-columns: 1fr; }
  .steps-grid { grid-template-columns: 1fr; }
  .comparison-grid { grid-template-columns: 1fr; }
  .placeholder-hero { height: 260px; }
  .placeholder-wide { height: 200px; }
  .landing-footer-inner { flex-direction: column; text-align: center; }
  .landing-footer-links { justify-content: center; }
}

@media (max-width: 480px) {
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .action-buttons { flex-direction: column; }
  .form-actions { flex-direction: column; }
  .settings-grid { grid-template-columns: 1fr; }

  /* Landing page small screen */
  .landing-headline { font-size: 2em; }
  .frustration-grid { grid-template-columns: 1fr 1fr; }
  .frustration-number { font-size: 2.2em; }
  .landing-cta-row { flex-direction: column; align-items: center; }
}

/* ============================================
   MOBILE PHONE PASS (≤ 600px)
   ============================================
   Targets the breakage seen on iOS Safari + Chrome at typical phone
   widths (390-414px): the nav was wrapping the brand to 3 lines, the
   Run Search button was being clipped at the right edge, glitch
   artifacts were spilling outside the viewport and creating
   horizontal scroll, and the dashboard stat cards weren't getting
   their min-width:0 so the flex parent overflowed. */
@media (max-width: 600px) {
  /* Clip stray absolute-positioned glitch elements + any wide content
     so the page never horizontal-scrolls. */
  html, body { overflow-x: hidden !important; }

  /* Nav: brand on its own row, links stretched + scrollable below.
   * !important defeats any tablet/desktop rule that sneaks in via the
   * cascade — we've burned three deploys on the cascade not winning. */
  .nav {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: var(--space-sm) !important;
    flex-wrap: nowrap !important;
  }
  .nav-brand {
    font-size: 0.95em !important;
    letter-spacing: 0.18em !important;
    white-space: nowrap !important;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .nav-links {
    margin-left: 0;
    width: 100%;
    justify-content: flex-start;
    gap: 4px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    padding-bottom: 4px;
  }
  .nav-link {
    flex: 0 0 auto;
    padding: 5px 10px;
    font-size: 0.75em;
  }

  /* Hero: stack brand-column + status + run-search button. The brand
     stays visible — just resized to fit the phone column. Killing it
     on mobile gut-punches the identity, which is what we shipped by
     accident in the first mobile pass. */
  .hero-top {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: 1fr !important;
    gap: 20px !important;
    padding: 4px 0;
  }
  .hero-brand {
    display: flex !important;
    padding-right: 0 !important;
    width: 100%;
  }
  .hero-title {
    /* Big enough to read the brand at a glance on a phone, small
       enough that "DESTROY" never has to wrap or truncate. The
       hero-destroy scramble cycles through wide fonts (Impact,
       Copperplate); 13vw caps comfortably below the 390px viewport. */
    font-size: clamp(2.4rem, 13vw, 3.4rem) !important;
    line-height: 0.95 !important;
  }
  .hero-tagline { font-size: 10px; letter-spacing: 0.25em; }
  .hero-status {
    flex-direction: row !important;
    align-items: flex-start !important;
    text-align: left !important;
    gap: 12px;
    width: 100%;
  }
  .hero-status > * { min-width: 0; max-width: 100%; }

  /* Run Search button — full width on phone so it never clips. The
     button is .btn.btn-primary inside a form inside .hero-top. */
  .hero-top form { width: 100% !important; }
  .hero-top form .btn { width: 100% !important; }

  /* Hero copy doesn't need to compete with the brand column. */
  .hero-title, .hero-headline { font-size: 1.7em; line-height: 1.1; }
  .hero-message { font-size: 0.9em; }

  /* Tabs — keep them in one row that scrolls. */
  .tabs { padding: 0; }
  .tab { font-size: 0.75em; padding: 6px 10px; }

  /* App shell — slightly tighter padding on phones. */
  .app-shell { padding: var(--space-sm) var(--space-md) var(--space-xl); }

  /* Job card actions stack on phones so labels don't get truncated. */
  .job-card-actions { flex-direction: column; align-items: stretch; }
  .job-card-actions .btn { width: 100%; }
}

/* ============================================
   THEME CUSTOMIZATION
   ============================================
   Driven by data-attributes on <html>, applied pre-paint from localStorage
   (see layout.ts head script). Each attribute overrides a handful of
   CSS custom properties; everything else cascades normally.

   Accents: green (default), cyan, amber, magenta, red
   Density: comfortable (default), compact
   Effects: full (default), reduced, off
   ============================================ */

html[data-theme-accent="cyan"] {
  --accent: #00e5ff;
  --accent-dim: #00b8cc;
  --accent-surface: #0a1a1e;
  --accent-hover: #33eaff;
  --border-focus: #00e5ff;
}
html[data-theme-accent="amber"] {
  --accent: var(--amber);
  --accent-dim: #cc8800;
  --accent-surface: #1a1400;
  --accent-hover: #ffbb33;
  --border-focus: var(--amber);
}
html[data-theme-accent="magenta"] {
  --accent: #ff3bd4;
  --accent-dim: #cc2ba8;
  --accent-surface: #1a0818;
  --accent-hover: #ff5edc;
  --border-focus: #ff3bd4;
}
html[data-theme-accent="red"] {
  --accent: #ff0040;
  --accent-dim: #cc0033;
  --accent-surface: #1a0008;
  --accent-hover: #ff3366;
  --border-focus: #ff0040;
}

/* Compact density — tighten the whitespace scale. */
html[data-theme-density="compact"] {
  --space-md: 12px;
  --space-lg: 18px;
  --space-xl: 32px;
  --space-2xl: 56px;
}
html[data-theme-density="compact"] body { line-height: 1.5; }
html[data-theme-density="compact"] .page-title { margin-bottom: var(--space-md); }
html[data-theme-density="compact"] fieldset { padding: var(--space-md); margin-bottom: var(--space-md); }
html[data-theme-density="compact"] .job-card { padding: var(--space-sm) var(--space-md); }
html[data-theme-density="compact"] .stat-card { padding: var(--space-md); }

/* Effects: reduced/off — suppress the heaviest visuals. */
html[data-theme-effects="reduced"] #glitch-layer { opacity: 0.4; }
html[data-theme-effects="off"] #glitch-layer { display: none !important; }
html[data-theme-effects="off"] *,
html[data-theme-effects="off"] *::before,
html[data-theme-effects="off"] *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
}

/* ============================================
   SETTINGS HUB V2 — brutalist card grid
   ============================================ */

.settings-hero {
  padding: var(--space-lg) 0 var(--space-xl) 0;
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: var(--space-xl);
}
.settings-hero-eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.25em;
  color: var(--accent);
  padding: 4px 8px;
  border: 1px solid var(--accent-dim);
  background: var(--accent-surface);
  margin-bottom: var(--space-md);
}
.settings-hero-title {
  font-family: var(--font-brand);
  font-size: clamp(2.4rem, 6vw, 4.2rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 0.95;
  color: var(--text-primary);
  margin: 0;
}
.settings-hero-sub {
  margin-top: var(--space-md);
  color: var(--text-secondary);
  max-width: 60ch;
}

.settings-grid-v2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-md);
  margin-top: var(--space-md);
}
.settings-card-v2 {
  position: relative;
  display: block;
  padding: var(--space-lg);
  padding-right: 48px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  text-decoration: none;
  overflow: hidden;
  transition: border-color var(--transition-fast), background var(--transition-fast), transform var(--transition-fast);
}
.settings-card-v2::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 60%, var(--accent-surface) 100%);
  opacity: 0;
  transition: opacity var(--transition-normal);
  pointer-events: none;
}
.settings-card-v2:hover {
  border-color: var(--accent);
  background: var(--bg-card-hover);
  transform: translateY(-2px);
}
.settings-card-v2:hover::before { opacity: 1; }
.settings-card-num {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--text-muted);
  letter-spacing: 0.2em;
  margin-bottom: var(--space-sm);
}
.settings-card-tag {
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  color: var(--accent);
  padding: 2px 6px;
  border: 1px solid var(--accent-dim);
  background: var(--accent-surface);
}
.settings-card-title {
  font-family: var(--font-brand);
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  margin: 0 0 var(--space-xs) 0;
}
.settings-card-desc {
  color: var(--text-tertiary);
  font-size: 0.85rem;
  margin: 0;
  line-height: 1.5;
}
.settings-card-arrow {
  position: absolute;
  right: var(--space-md);
  bottom: var(--space-md);
  font-family: var(--font-mono);
  font-size: 1.25rem;
  color: var(--text-muted);
  transition: color var(--transition-fast), transform var(--transition-fast);
}
.settings-card-v2:hover .settings-card-arrow {
  color: var(--accent);
  transform: translateX(4px);
}

/* ============================================
   PREFERENCES FORM — slider, swatches, segments
   ============================================ */

.prefs-fieldset {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  padding: var(--space-lg);
  margin-bottom: var(--space-lg);
}
.prefs-fieldset legend {
  font-family: var(--font-brand);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  padding: 0 var(--space-sm);
}

/* --- Threshold slider --- */
.threshold-row {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  margin: var(--space-md) 0 var(--space-sm);
}
.threshold-slider {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  background: var(--bg-inset);
  border: 1px solid var(--border);
  outline: none;
  cursor: pointer;
}
.threshold-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  background: var(--accent);
  border: 2px solid var(--accent-text);
  cursor: grab;
  box-shadow: 0 0 10px var(--accent);
}
.threshold-slider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  background: var(--accent);
  border: 2px solid var(--accent-text);
  cursor: grab;
  box-shadow: 0 0 10px var(--accent);
}
.threshold-slider:focus { border-color: var(--accent); }
.threshold-readout {
  display: flex;
  align-items: baseline;
  gap: 4px;
  min-width: 90px;
  justify-content: flex-end;
}
.threshold-value {
  font-family: var(--font-brand);
  font-size: 2.4rem;
  font-weight: 800;
  color: var(--accent);
  line-height: 1;
  text-shadow: 0 0 12px var(--accent-surface);
}
.threshold-unit {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-muted);
  letter-spacing: 0.1em;
}
.threshold-caption {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-top: var(--space-sm);
}
.threshold-caption strong { color: var(--accent); font-weight: 700; }

/* --- Accent swatch grid --- */
.swatch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-sm);
  margin-top: var(--space-md);
}
.swatch {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  background: var(--bg-inset);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
.swatch:hover { border-color: var(--border-hover); background: var(--bg-card-hover); }
.swatch input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.swatch:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-surface);
}
.swatch-dot {
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255,255,255,0.1);
  box-shadow: 0 0 8px currentColor;
  flex-shrink: 0;
}
.swatch-label {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--text-secondary);
  letter-spacing: 0.05em;
}
.swatch:has(input:checked) .swatch-label { color: var(--text-primary); }

/* --- Segmented radio control --- */
.segment {
  display: inline-flex;
  margin-top: var(--space-md);
  border: 1px solid var(--border);
  background: var(--bg-inset);
}
.segment-option {
  position: relative;
  flex: 0 0 auto;
}
.segment-option input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.segment-option span {
  display: block;
  padding: var(--space-sm) var(--space-lg);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  cursor: pointer;
  border-right: 1px solid var(--border);
  transition: background var(--transition-fast), color var(--transition-fast);
}
.segment-option:last-child span { border-right: none; }
.segment-option:hover span { color: var(--text-primary); background: var(--bg-card-hover); }
.segment-option input:checked + span {
  background: var(--accent);
  color: var(--accent-text);
  font-weight: 700;
}

@media (max-width: 480px) {
  .threshold-row { flex-direction: column; align-items: stretch; gap: var(--space-sm); }
  .threshold-readout { justify-content: flex-start; }
  .segment { flex-direction: column; width: 100%; }
  .segment-option span { border-right: none; border-bottom: 1px solid var(--border); }
  .segment-option:last-child span { border-bottom: none; }
}