@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* ── Role-based visibility (works for dynamic content) ── */
body:not(.is-admin) .admin-only { display: none !important; }

/* ── Design Tokens ─────────────────────────────────────── */
:root {
  --bg: #0a0d12;
  --surface: rgba(15, 19, 27, 0.85);
  --surface-solid: #0f131b;
  --surface-raised: rgba(22, 28, 39, 0.7);
  --surface-hover: rgba(30, 37, 50, 0.6);
  --border: rgba(255, 255, 255, 0.06);
  --border-hover: rgba(255, 255, 255, 0.10);
  --border-accent: rgba(52, 211, 153, 0.20);
  --text: #e8edf4;
  --text-2: #a0b1c5;
  --text-3: #5c7089;
  --accent: #34d399;
  --accent-dim: rgba(52, 211, 153, 0.10);
  --accent-glow: rgba(52, 211, 153, 0.20);
  --warn: #fbbf24;
  --warn-dim: rgba(251, 191, 36, 0.10);
  --danger: #f87171;
  --danger-dim: rgba(248, 113, 113, 0.10);
  --purple: #818cf8;
  --purple-dim: rgba(129, 140, 248, 0.08);
  --slate: #64b5f6;
  --slate-dim: rgba(100, 181, 246, 0.10);
  --radius: 12px;
  --radius-sm: 8px;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur: 0.2s;
}

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

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  height: 100vh;
  overflow: hidden;
}

/* Ambient light */
body::before {
  content: '';
  position: fixed;
  top: -300px; left: -200px;
  width: 700px; height: 700px;
  background: radial-gradient(circle, rgba(52,211,153,0.04) 0%, transparent 70%);
  pointer-events: none;
}

/* ── Scrollbar ─────────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.07); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.12); }

/* ══════════════════════════════════════════════════════════
   TWO-COLUMN LAYOUT — 50 / 50
   ══════════════════════════════════════════════════════════ */
.layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: 100vh;
  overflow: hidden;
}

/* ── Left Column: Agent ────────────────────────────────── */
.col-agent {
  border-right: 1px solid var(--border);
  background: var(--surface-solid);
  overflow: hidden;
}

.agent-sticky {
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 12px;
  gap: 8px;
}

/* ── Right Column: Jobs ────────────────────────────────── */
.col-jobs {
  padding: 12px 20px;
  overflow-y: auto;
  min-width: 0;
}

/* ══════════════════════════════════════════════════════════
   AGENT CARD — Compact Controls & Stats
   ══════════════════════════════════════════════════════════ */
.agent-card {
  background: var(--surface);
  backdrop-filter: blur(16px);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-shrink: 0;
}

.agent-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.agent-title-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.agent-icon {
  width: 24px; height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-dim);
  border: 1px solid rgba(52,211,153,0.15);
  border-radius: 6px;
  color: var(--accent);
  flex-shrink: 0;
}
.agent-icon svg { width: 12px; height: 12px; }

.agent-card h3 {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}

/* Status badge */
.agent-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  color: var(--text-2);
  white-space: nowrap;
}

.badge--running { color: var(--accent); border-color: rgba(52,211,153,0.2); background: var(--accent-dim); }
.badge--paused { color: var(--warn); border-color: rgba(251,191,36,0.2); background: var(--warn-dim); }
.badge--idle { color: var(--text-3); }

/* ── Info tooltip (ⓘ icon) ── */
.info-tip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 1px solid var(--text-3);
  font-size: 9px;
  font-style: italic;
  font-weight: 700;
  color: var(--text-3);
  cursor: help;
  position: relative;
  vertical-align: middle;
  margin-left: 3px;
  line-height: 1;
  opacity: 0.6;
  transition: opacity 0.15s;
}
.info-tip:hover {
  opacity: 1;
}
.info-tip::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--surface-2);
  color: var(--text-1);
  font-size: 11px;
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.4;
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid var(--border);
  white-space: normal;
  width: 200px;
  text-align: left;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s, visibility 0.15s;
  z-index: 99999;
}
.info-tip:hover::after {
  opacity: 1;
  visibility: visible;
}

.status-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--text-3);
}
.dot--running { background: var(--accent); box-shadow: 0 0 6px var(--accent); animation: pulse 2s ease-in-out infinite; }
.dot--paused { background: var(--warn); }
.dot--idle { background: var(--text-3); }

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* Agent info — compact horizontal grid */
.agent-info {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px 12px;
  padding: 6px 8px;
  background: rgba(0,0,0,0.2);
  border-radius: var(--radius-sm);
}

.info-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 11px;
  min-width: 0;
}

/* Job & URL rows span full width */
.info-row--wide {
  grid-column: 1 / -1;
}

.info-label {
  color: var(--text-3);
  font-weight: 500;
  flex-shrink: 0;
  font-size: 10px;
}

.info-value {
  color: var(--text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.info-value--mono {
  font-family: 'SF Mono', ui-monospace, monospace;
  font-size: 10px;
}

/* Error */
.error-text {
  color: var(--danger);
  font-size: 10px;
  padding: 4px 8px;
  background: var(--danger-dim);
  border: 1px solid rgba(248,113,113,0.1);
  border-radius: var(--radius-sm);
  display: none;
}
.error-text:not(:empty) { display: block; }

/* Agent form — compact grid */
.agent-form {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/*  Row 1:  [Mode] [Category] [Jobs] [Refl] [Poll]
    Selects get 2fr, numbers get 1fr  */
.af-grid {
  display: grid;
  grid-template-columns: 2fr 2fr 1fr 1fr 1fr;
  gap: 5px;
}

.af-grid label {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.af-grid label span {
  font-size: 7.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-3);
  white-space: nowrap;
}

.af-grid input,
.af-grid select {
  padding: 3px 4px;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: rgba(0,0,0,0.3);
  color: var(--text);
  font-family: inherit;
  font-size: 11px;
  transition: all var(--dur) var(--ease);
  outline: none;
  width: 100%;
  box-sizing: border-box;
}

.af-grid input:focus,
.af-grid select:focus {
  border-color: var(--border-accent);
  box-shadow: 0 0 0 2px rgba(52,211,153,0.06);
}

/* Row 2: action buttons — right-aligned */
.agent-actions {
  display: flex;
  gap: 4px;
  justify-content: flex-end;
}

.agent-actions .btn {
  padding: 4px 10px;
  font-size: 11px;
}

/* ══════════════════════════════════════════════════════════
   TERMINAL CARD
   ══════════════════════════════════════════════════════════ */
.terminal-card {
  background: var(--surface);
  backdrop-filter: blur(16px);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* Both terminals share space equally */
.terminal-card--primary { flex: 1; }
.terminal-card:not(.terminal-card--primary) { flex: 1; }

.terminal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  user-select: none;
  transition: background var(--dur) var(--ease);
  flex-shrink: 0;
}
.terminal-header:hover { background: rgba(255,255,255,0.02); }

.terminal-title {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-3);
  cursor: pointer;
}
.btn-clear {
  background: none;
  border: 1px solid transparent;
  color: var(--text-3);
  font-size: 11px;
  line-height: 1;
  padding: 2px 5px;
  border-radius: 4px;
  cursor: pointer;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.btn-clear:hover {
  color: var(--danger);
  border-color: var(--danger);
}

.terminal-actions {
  display: flex;
  gap: 4px;
  align-items: center;
}

.btn-copy {
  background: none;
  border: 1px solid transparent;
  color: var(--text-3);
  font-size: 11px;
  line-height: 1;
  padding: 2px 5px;
  border-radius: 4px;
  cursor: pointer;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.btn-copy:hover {
  color: var(--accent);
  border-color: var(--accent);
}
.btn-copy--ok {
  color: var(--accent) !important;
  border-color: var(--accent) !important;
}

.log-chevron {
  font-size: 10px;
  color: var(--text-3);
  transition: transform var(--dur) var(--ease);
}
.log-chevron.collapsed { transform: rotate(-90deg); }

/* Inline stage indicator (inside terminal header) */
.stage-indicator {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: 8px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.3px;
  white-space: nowrap;
  min-height: 16px;
}

.si-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.si-dot--pulse {
  background: var(--purple);
  animation: si-pulse 1.2s ease-in-out infinite;
  box-shadow: 0 0 6px rgba(129,140,248,0.5);
}
.si-dot--success {
  background: var(--accent);
  box-shadow: 0 0 6px rgba(52,211,153,0.4);
}
.si-dot--fail {
  background: var(--danger);
  box-shadow: 0 0 6px rgba(248,113,113,0.4);
}

@keyframes si-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.75); }
}

.si-label {
  text-transform: uppercase;
}
.si--active .si-label { color: var(--purple); }
.si--success .si-label { color: var(--accent); }
.si--fail .si-label { color: var(--danger); }

.si-dots {
  color: var(--purple);
  animation: si-dots 1.4s steps(4, end) infinite;
  overflow: hidden;
  width: 12px;
  display: inline-block;
  vertical-align: bottom;
  letter-spacing: 1px;
}
@keyframes si-dots {
  0% { width: 0; }
  25% { width: 4px; }
  50% { width: 8px; }
  75% { width: 12px; }
  100% { width: 0; }
}

.si-count {
  color: var(--text-3);
  font-weight: 400;
  font-size: 9px;
  opacity: 0.7;
}

/* ── Agent processing indicator (Agent Log header) ── */
/* Reuses .stage-indicator / .si-* base styles, just overrides color to --accent */
.agent-processing .si-dot--pulse {
  background: var(--accent);
  box-shadow: 0 0 6px rgba(52,211,153,0.5);
}
.agent-processing .si-label {
  color: var(--accent);
}
.agent-processing .si-dots {
  color: var(--accent);
}

.agent-log {
  flex: 1;
  overflow-y: auto;
  padding: 6px 10px;
  font-family: 'SF Mono', 'Cascadia Code', 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  line-height: 1.45;
  background: rgba(0,0,0,0.2);
  min-height: 0;
  transition: max-height 0.25s var(--ease), padding 0.25s var(--ease);
}

.agent-log.collapsed {
  max-height: 0 !important;
  padding-top: 0;
  padding-bottom: 0;
  overflow: hidden;
  flex: 0;
}

.log-line {
  color: rgba(207,224,242,0.6);
  margin-bottom: 1px;
  word-break: break-word;
}
.log-line .log-ts { color: var(--text-3); }
.log-line strong { color: var(--accent); font-weight: 500; }

/* Colored log levels */
.log-line--error { color: var(--danger); }
.log-line--error strong { color: var(--danger); }
.log-line--parked { color: var(--warn); }
.log-line--parked strong { color: var(--warn); }
.log-line--warn { color: var(--warn); opacity: 0.75; }
.log-line--warn strong { color: var(--warn); }
.log-line--ok { color: var(--accent); }
.log-line--ok strong { color: var(--accent); }

/* ══════════════════════════════════════════════════════════
   DUPLICATES CARD (in agent sidebar)
   ══════════════════════════════════════════════════════════ */
.dup-card {
  background: var(--surface);
  backdrop-filter: blur(16px);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px;
  flex-shrink: 0;
  max-height: 120px;
  overflow-y: auto;
}

.dup-card h4 {
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 10px;
}

.dup-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.dup-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: rgba(0,0,0,0.15);
}

.dup-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.dup-remove-form { flex-shrink: 0; }

/* ══════════════════════════════════════════════════════════
   JOBS COLUMN
   ══════════════════════════════════════════════════════════ */

/* ── Filters ───────────────────────────────────────────── */
.filters {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-bottom: 10px;
}

.filters input,
.filters select {
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface-raised);
  color: var(--text);
  font-family: inherit;
  font-size: 12px;
  transition: all var(--dur) var(--ease);
  outline: none;
}

.filters input { flex: 1; }
.filters input::placeholder { color: var(--text-3); }

.filters input:focus,
.filters select:focus {
  border-color: var(--border-accent);
  box-shadow: 0 0 0 3px rgba(52,211,153,0.06);
}

/* ── Stat Pills ────────────────────────────────────────── */
.meta { display: flex; gap: 6px; flex-wrap: nowrap; margin-bottom: 12px; }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-2);
}

.pill strong { font-weight: 700; }

.pill-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.pill--accent { color: var(--accent); border-color: rgba(52,211,153,0.12); }
.pill--accent strong { color: var(--accent); }
.dot--accent { background: var(--accent); }

.pill--warn { color: var(--warn); border-color: rgba(251,191,36,0.12); }
.pill--warn strong { color: var(--warn); }
.dot--warn { background: var(--warn); }

.pill--danger { color: var(--danger); border-color: rgba(248,113,113,0.12); }
.pill--danger strong { color: var(--danger); }
.dot--danger { background: var(--danger); }

.pill--purple { color: var(--purple); border-color: rgba(129,140,248,0.12); }
.pill--purple strong { color: var(--purple); }
.dot--purple { background: var(--purple); }

/* ── Stack Sections ────────────────────────────────────── */
.stack-section { margin-top: 16px; }
.stack-section:first-of-type { margin-top: 0; }

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.stack-section h2 {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 8px;
}

.stack-section h2::before {
  content: '';
  display: inline-block;
  width: 3px; height: 14px;
  border-radius: 2px;
  background: var(--accent);
}

/* ── Context Menu ──────────────────────────────────────── */
.menu { position: relative; }
.menu-btn {
  background: var(--surface-raised);
  border: 1px solid var(--border);
  color: var(--text-3);
  border-radius: var(--radius-sm);
  padding: 4px 10px;
  cursor: pointer;
  font-size: 16px;
  transition: all var(--dur) var(--ease);
}
.menu-btn:hover { color: var(--text-2); border-color: var(--border-hover); }

.menu-content {
  display: none;
  position: absolute;
  right: 0; top: 36px;
  background: var(--surface-solid);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  min-width: 180px;
  box-shadow: 0 16px 48px rgba(0,0,0,0.5);
  z-index: 20;
  overflow: hidden;
}
.menu-content.open { display: block; }

.menu-item {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  color: var(--text);
  padding: 10px 14px;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  transition: background var(--dur) var(--ease);
}
.menu-item:hover { background: var(--surface-hover); }

/* ── Row Stack ─────────────────────────────────────────── */
.row-stack {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* ── Job Cards ─────────────────────────────────────────── */
.card {
  background: var(--surface);
  backdrop-filter: blur(16px);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 12px;
  transition: all var(--dur) var(--ease);
}

.card:hover {
  border-color: var(--border-hover);
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}

.card.wide {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 160px;
  gap: 12px;
  align-items: start;
}

.card-left {
  min-width: 0;        /* allow grid child to shrink below content size */
  overflow: hidden;
}

.card-top {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 2px;
  min-width: 0;
}

.title { font-weight: 600; font-size: 13px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.status-badge {
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
  border: 1px solid transparent;
  margin-left: auto;
  flex-shrink: 0;
}
.status-badge--parked { background: var(--warn-dim); color: var(--warn); border-color: rgba(251,191,36,0.1); }
.status-badge--fail { background: var(--danger-dim); color: var(--danger); border-color: rgba(248,113,113,0.1); }
.status-badge--success { background: var(--accent-dim); color: var(--accent); border-color: rgba(52,211,153,0.1); }
.status-badge--new { background: var(--purple-dim); color: var(--purple); border-color: rgba(129,140,248,0.1); }
.status-badge--requeued { background: var(--purple-dim); color: var(--purple); border-color: rgba(129,140,248,0.1); }
.status-badge--already_applied { background: var(--slate-dim); color: var(--slate); border-color: rgba(100,181,246,0.1); }

/* Reprocess badge + tooltip */
.reprocess-badge {
  position: relative;
  cursor: default;
}
.reprocess-count {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  background: var(--surface-2);
  color: var(--text-2);
  border: 1px solid var(--border);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.reprocess-badge:hover .reprocess-count {
  background: var(--purple-dim);
  color: var(--purple);
  border-color: rgba(129,140,248,0.2);
}
.reprocess-tooltip {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 14px;
  min-width: 150px;
  z-index: 100;
  box-shadow: 0 4px 16px rgba(0,0,0,0.35);
}
.reprocess-tooltip::before {
  content: "";
  position: absolute;
  top: -5px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 8px;
  height: 8px;
  background: var(--surface-2);
  border-left: 1px solid var(--border);
  border-top: 1px solid var(--border);
}
.reprocess-badge:hover .reprocess-tooltip { display: block; }
.reprocess-tooltip-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-1);
  margin-bottom: 6px;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--border);
}
.reprocess-tooltip-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--text-2);
  padding: 3px 0;
}
.reprocess-tooltip-num {
  margin-left: auto;
  font-weight: 600;
  color: var(--text-1);
}
.reprocess-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.reprocess-dot--parked { background: var(--warn); }
.reprocess-dot--fail { background: var(--danger); }
.reprocess-dot--success { background: var(--accent); }

.sub { color: var(--text-3); font-size: 11px; margin: 1px 0; }

.link {
  color: var(--accent);
  text-decoration: none;
  display: block;
  margin-bottom: 2px;
  font-size: 11px;
  opacity: 0.6;
  transition: opacity var(--dur) var(--ease);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.link:hover { opacity: 1; text-decoration: underline; }

/* Card left accent by status */
.card.wide[data-status="PARKED"] { border-left: 2px solid var(--warn); }
.card.wide[data-status="FAIL"] { border-left: 2px solid var(--danger); }
.card.wide[data-status="SUCCESS"] { border-left: 2px solid var(--accent); }

/* ── Active job processing indicator on card ── */
.card-processing-dot {
  display: none;
}
.card--active {
  border-left: 2px solid var(--accent) !important;
  box-shadow: 0 0 12px rgba(52,211,153,0.15);
}
.card--active .card-processing-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  animation: si-pulse 1.2s ease-in-out infinite;
  box-shadow: 0 0 6px rgba(52,211,153,0.5);
  margin-left: 6px;
  vertical-align: middle;
  flex-shrink: 0;
}

/* Toggle / Details */
.toggle {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-3);
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-family: inherit;
  font-size: 11px;
  font-weight: 500;
  transition: all var(--dur) var(--ease);
}
.toggle:hover { border-color: var(--border-hover); color: var(--text-2); }
.toggle--xs { padding: 3px 8px; font-size: 10px; letter-spacing: 1px; }

.details {
  display: none;
  margin-top: 12px;
  grid-column: 1 / -1;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.details.open { display: block; }

/* Media / Screenshot */
.card-right { display: flex; flex-direction: column; }

.media {
  background: rgba(0,0,0,0.25);
  border-radius: var(--radius-sm);
  overflow: hidden;
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
}
.media img { width: 100%; height: 100%; object-fit: cover; }
.placeholder { color: var(--text-3); font-size: 11px; }

/* Actions — compact single row */
.actions {
  display: flex;
  gap: 6px;
  margin-top: 8px;
  align-items: center;
  justify-content: space-between;
}

.act-group {
  display: flex;
  gap: 3px;
  align-items: center;
}

.act-primary {
  display: flex;
  gap: 4px;
  align-items: center;
  margin-left: auto;
}

/* ══════════════════════════════════════════════════════════
   BUTTONS
   ══════════════════════════════════════════════════════════ */
.btn {
  padding: 7px 14px;
  background: var(--accent);
  color: #021a12;
  text-decoration: none;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 13px;
  font-family: inherit;
  border: none;
  cursor: pointer;
  transition: all var(--dur) var(--ease);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
}

.btn:hover {
  filter: brightness(1.1);
  box-shadow: 0 4px 16px var(--accent-glow);
  transform: translateY(-1px);
}
.btn:active { transform: translateY(0); filter: brightness(1); }

.btn--sm { padding: 5px 11px; font-size: 12px; }
.btn--xs { padding: 3px 8px; font-size: 10px; font-weight: 500; border-radius: 5px; }

.btn.danger { background: var(--danger); color: #1c0808; }
.btn.danger:hover { box-shadow: 0 4px 16px rgba(248,113,113,0.2); }

.btn.warn { background: var(--warn); color: #1c1508; }
.btn.warn:hover { box-shadow: 0 4px 16px rgba(251,191,36,0.2); }

.btn.ghost {
  background: transparent;
  color: var(--text-3);
  border: 1px solid var(--border);
}
.btn.ghost:hover {
  background: var(--surface-hover);
  box-shadow: none;
  filter: none;
  color: var(--text-2);
  transform: none;
}

/* Ghost button with success tint on hover */
.btn--success-ghost:hover {
  color: var(--accent) !important;
  border-color: rgba(52,211,153,0.2) !important;
  background: var(--accent-dim) !important;
}

/* ── Shared ────────────────────────────────────────────── */
.footer { display: flex; flex-direction: column; gap: 4px; }
.muted { color: var(--text-3); font-size: 12px; }

.pagination {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}

.empty {
  padding: 20px;
  background: var(--surface-raised);
  border: 1px dashed rgba(255,255,255,0.05);
  border-radius: var(--radius);
  color: var(--text-3);
  font-size: 13px;
  text-align: center;
}

/* ══════════════════════════════════════════════════════════
   AUDIT PANEL (per-job details)
   ══════════════════════════════════════════════════════════ */
.audit-panel {
  margin-top: 10px;
  background: rgba(0,0,0,0.2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.audit-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border);
}

.audit-tab {
  background: none;
  border: none;
  color: var(--text-3);
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  padding: 6px 12px;
  cursor: pointer;
  transition: all var(--dur) var(--ease);
  border-bottom: 2px solid transparent;
}
.audit-tab:hover { color: var(--text-2); background: rgba(255,255,255,0.02); }
.audit-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.audit-content {
  max-height: 200px;
  overflow-y: auto;
}

.audit-terminal {
  font-family: 'SF Mono', 'Cascadia Code', 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  line-height: 1.5;
  padding: 6px 8px;
}

.audit-loading {
  padding: 10px;
  font-size: 11px;
  color: var(--text-3);
  text-align: center;
}

.audit-empty {
  padding: 10px;
  font-size: 11px;
  color: var(--text-3);
  text-align: center;
  font-style: italic;
}

.audit-src {
  display: inline-block;
  padding: 0 4px;
  border-radius: 3px;
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  background: rgba(255,255,255,0.05);
  color: var(--text-3);
  margin-right: 4px;
}

/* Error items */
.audit-err-item {
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
}
.audit-err-item:last-child { border-bottom: none; }
.audit-err-type {
  font-weight: 600;
  font-size: 11px;
  color: var(--danger);
}
.audit-err-msg {
  font-size: 10px;
  color: var(--text-2);
  margin-top: 2px;
}
.audit-err-ts {
  font-size: 9px;
  color: var(--text-3);
  margin-top: 2px;
}

/* FSM transitions */
.audit-fsm-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 0;
  font-size: 11px;
}
.audit-fsm-from { color: var(--text-3); font-weight: 500; }
.audit-fsm-arrow { color: var(--text-3); }
.audit-fsm-to { color: var(--accent); font-weight: 600; }
.audit-fsm-detail {
  font-size: 9px;
  color: var(--text-3);
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.audit-fsm-ts { font-size: 9px; color: var(--text-3); margin-left: auto; }

/* Artifact links */
.audit-art-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  border-bottom: 1px solid var(--border);
}
.audit-art-item:last-child { border-bottom: none; }
.audit-art-link {
  color: var(--accent);
  font-size: 11px;
  text-decoration: none;
  padding: 2px 8px;
  background: var(--accent-dim);
  border-radius: 4px;
  transition: opacity var(--dur) var(--ease);
}
.audit-art-link:hover { opacity: 0.8; text-decoration: underline; }
.audit-art-ts { font-size: 9px; color: var(--text-3); margin-left: auto; }

/* History timeline */
.hist-attempt {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  transition: background var(--dur) var(--ease);
}
.hist-attempt:last-child { border-bottom: none; }
.hist-attempt:hover { background: rgba(255,255,255,0.02); }
.hist-attempt--current {
  background: rgba(52,211,153,0.04);
  border-left: 2px solid var(--accent);
}

.hist-header {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.hist-num {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-3);
  min-width: 18px;
}

.hist-badge {
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  border: 1px solid transparent;
}
.hist-status--success { background: var(--accent-dim); color: var(--accent); border-color: rgba(52,211,153,0.15); }
.hist-status--fail { background: var(--danger-dim); color: var(--danger); border-color: rgba(248,113,113,0.15); }
.hist-status--parked { background: var(--warn-dim); color: var(--warn); border-color: rgba(251,191,36,0.15); }
.hist-status--requeued { background: var(--purple-dim); color: var(--purple); border-color: rgba(129,140,248,0.15); }
.hist-status--running { background: var(--accent-dim); color: var(--accent); border-color: rgba(52,211,153,0.15); }

.hist-current-tag {
  font-size: 8px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--accent);
  padding: 1px 5px;
  border-radius: 3px;
  background: var(--accent-dim);
}

.hist-meta {
  font-size: 9px;
  color: var(--text-3);
  margin-left: auto;
}

.hist-fsm {
  font-size: 10px;
  color: var(--text-2);
  margin-top: 3px;
  font-family: 'SF Mono', ui-monospace, monospace;
}

.hist-err {
  font-size: 10px;
  color: var(--danger);
  margin-top: 2px;
}

.hist-view-btn {
  margin-top: 4px;
  background: none;
  border: 1px solid var(--border);
  color: var(--text-3);
  font-family: inherit;
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 4px;
  cursor: pointer;
  transition: all var(--dur) var(--ease);
}
.hist-view-btn:hover { color: var(--accent); border-color: var(--border-accent); }
.hist-view-btn:disabled { opacity: 0.5; cursor: default; }

/* ══════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════ */
@media (max-width: 700px) {
  .layout {
    grid-template-columns: 1fr;
    height: auto;
    overflow: auto;
  }
  body { height: auto; overflow: auto; }
  .col-agent {
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
  .agent-sticky {
    height: auto;
    max-height: 50vh;
  }
  .card.wide { grid-template-columns: 1fr; }
  .filters { flex-wrap: wrap; }
  .af-grid { grid-template-columns: 1fr 1fr 1fr; }
}

/* Narrow right column — hide screenshots, stack card grid */
@media (max-width: 900px) {
  .card.wide { grid-template-columns: 1fr; }
  .card-right { display: none; }
}

/* ═══════════════════════════════════════════════════════════
   JOB BOARD — Top Tabs, Board Layout, Cards, Filters, Detail
   ═══════════════════════════════════════════════════════════ */

/* ── Top Tab Bar ── */
.top-tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--surface-solid);
  border-bottom: 1px solid var(--border);
  padding: 0 20px;
  height: 46px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
}
.top-tab {
  background: none;
  border: none;
  color: var(--text-2);
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 13px;
  line-height: 1;
  padding: 12px 18px;
  border-bottom: 2px solid transparent;
  transition: all var(--dur) var(--ease);
}
.top-tab:hover { color: var(--text); }
.top-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.top-tabs-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }

/* Account menu */
.account-menu { position: relative; }
.account-btn {
  background: none; border: none; cursor: pointer; padding: 0;
}
.account-avatar {
  width: 30px; height: 30px; border-radius: 50%; background: var(--surface-raised);
  border: 2px solid var(--border); display: flex; align-items: center; justify-content: center;
  font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 600; color: var(--text-3);
  overflow: hidden; transition: border-color var(--dur) var(--ease);
}
.account-btn:hover .account-avatar { border-color: var(--accent); }
.account-dropdown {
  position: absolute; top: 40px; right: 0; z-index: 300;
  background: var(--surface-solid); border: 1px solid var(--border);
  border-radius: var(--radius-sm); box-shadow: 0 8px 32px rgba(0,0,0,0.5);
  min-width: 200px; padding: 10px 0;
}
.account-info { padding: 10px 16px; }
.account-name {
  display: block; font-family: 'Inter', sans-serif; font-weight: 600;
  font-size: 13px; color: var(--text);
}
.account-email {
  display: block; font-family: 'Inter', sans-serif; font-size: 11px; color: var(--text-3);
}
.account-role {
  display: inline-block; font-family: 'Inter', sans-serif; font-size: 9px;
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--accent); background: var(--accent-dim);
  padding: 2px 8px; border-radius: 8px; margin-top: 4px;
}
.account-link {
  display: block; padding: 8px 16px; font-family: 'Inter', sans-serif;
  font-size: 12px; color: var(--text-2); text-decoration: none;
  transition: background var(--dur) var(--ease);
}
.account-link:hover { background: var(--surface-hover); }
.account-link--danger { color: var(--danger); }
.top-stats {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 11px;
  color: var(--text-3);
  background: var(--accent-dim);
  padding: 5px 12px;
  border-radius: 12px;
}

/* ── Tab Content ── */
.tab-content {
  display: none;
  position: fixed;
  top: 46px;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: auto;
}
.tab-content.active { display: block; }

/* ── Board Layout ── */
.board-layout {
  display: grid;
  grid-template-columns: 270px 1fr;
  height: 100%;
  overflow: hidden;
}

/* ── Board Sidebar ── */
.board-sidebar {
  background: var(--surface-solid);
  border-right: 1px solid var(--border);
  overflow-y: auto;
  height: 100%;
}
.board-sidebar-inner { padding: 16px; }
.sidebar-title {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 15px;
  color: var(--text);
  margin: 0 0 16px;
}
.filter-group { margin-bottom: 16px; }
.filter-label {
  display: block;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 10px;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 7px;
}
.filter-input, .filter-select {
  width: 100%;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: 8px 11px;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  outline: none;
  transition: border-color var(--dur) var(--ease);
}
.filter-input:focus, .filter-select:focus { border-color: var(--accent); }
.filter-input-wrap {
  position: relative;
}
.filter-input-wrap .filter-input { width: 100%; padding-right: 32px; }
.filter-clear-btn {
  display: none;
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  background: var(--surface-hover);
  border: none;
  color: var(--text-3);
  font-size: 16px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  cursor: pointer;
  line-height: 1;
  padding: 0;
  transition: color 0.15s, background 0.15s;
}
.filter-clear-btn.visible { display: flex; align-items: center; justify-content: center; }
.filter-clear-btn:hover { color: var(--text); background: var(--border); }
.map-search-summary {
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  margin-bottom: 12px;
}
.map-search-summary-title {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 13px;
  color: var(--text);
  margin-bottom: 4px;
}
.map-search-summary-detail {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 11px;
  color: var(--accent);
  letter-spacing: 0.3px;
  line-height: 1.4;
}
.filter-input-half { width: 48%; }
.filter-row { display: flex; gap: 4%; }
.filter-select { cursor: pointer; }
.filter-select-sm { width: auto; padding: 6px 10px; font-size: 11px; }
.filter-checks { display: flex; flex-direction: column; gap: 6px; }
.filter-check {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  color: var(--text-2);
  cursor: pointer;
}
.filter-check input[type=checkbox] {
  accent-color: var(--accent);
  width: 15px;
  height: 15px;
  cursor: pointer;
}
.filter-divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 18px 0;
}
.collector-status { margin-top: 8px; }

/* ── Multi-Select Dropdown ── */
.multi-select {
  position: relative;
}
.ms-selected {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 4px;
}
.ms-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--accent-dim);
  color: var(--accent);
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 10px;
  white-space: nowrap;
}
.ms-tag-x {
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
  opacity: 0.7;
}
.ms-tag-x:hover { opacity: 1; }
.ms-search {
  width: 100%;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: 7px 10px;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  outline: none;
  transition: border-color var(--dur) var(--ease);
}
.ms-search:focus { border-color: var(--accent); }
.ms-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 50;
  background: var(--surface-solid);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  max-height: 200px;
  overflow-y: auto;
  margin-top: 2px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.ms-dropdown.open { display: block; }
.ms-option {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 10px;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  color: var(--text-2);
  cursor: pointer;
  transition: background var(--dur) var(--ease);
}
.ms-option:hover { background: var(--surface-hover); }
.ms-option--active { color: var(--accent); background: var(--accent-dim); }
.ms-option input[type=checkbox] {
  accent-color: var(--accent);
  width: 13px;
  height: 13px;
  cursor: pointer;
}
.ms-empty {
  padding: 10px;
  text-align: center;
  color: var(--text-3);
  font-family: 'Inter', sans-serif;
  font-size: 11px;
}

/* ── Board Main ── */
.board-main {
  overflow-y: auto;
  height: 100%;
  padding: 16px 20px;
  position: relative;
}

/* ── Board Toolbar ── */
/* Board sub-tabs (Collected / Applied / Rejected) */
.board-sub-tabs {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--border);
  margin-bottom: 14px;
}
.board-sub-tab {
  background: none;
  border: none;
  color: var(--text-3);
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 500;
  padding: 8px 18px;
  cursor: pointer;
  position: relative;
  transition: color 0.2s;
  display: flex;
  align-items: center;
  gap: 6px;
}
.board-sub-tab:hover { color: var(--text); }
.board-sub-tab.active { color: var(--accent); }
.board-sub-tab.active::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2px;
  background: var(--accent);
  border-radius: 2px 2px 0 0;
}
.sub-tab-count {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 11px;
  background: var(--surface-raised);
  color: var(--text-3);
  padding: 1px 6px;
  border-radius: 8px;
  min-width: 18px;
  text-align: center;
}
.board-sub-tab.active .sub-tab-count {
  background: rgba(0, 204, 153, 0.15);
  color: var(--accent);
}
/* Visited row (job opened in new tab) */
.board-row.visited .row-title { color: var(--text-3); }
/* Undo button */
.act-btn.act-undo { color: var(--text-3); }
.act-btn.act-undo:hover { color: var(--accent); background: rgba(0, 204, 153, 0.1); }

.board-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
  gap: 10px;
  flex-wrap: wrap;
}
.board-toolbar-left, .board-toolbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
}
.board-count {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 12px;
  color: var(--text-3);
}
.btn-accent {
  background: var(--accent);
  color: #0a0d12;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 12px;
  border: none;
  border-radius: var(--radius-sm);
  padding: 8px 16px;
  cursor: pointer;
  transition: opacity var(--dur) var(--ease);
}
.btn-accent:hover { opacity: 0.85; }
.btn-accent:disabled { opacity: 0.35; cursor: default; }
.btn-muted {
  background: var(--surface-raised);
  color: var(--text-3);
  border: 1px solid var(--border);
}

/* ── Board Table (card rows) ── */
.board-table-wrap {
  overflow-x: auto;
}
.board-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 8px;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
}
.board-table thead th {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--bg);
  font-weight: 600;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-3);
  padding: 8px 14px;
  text-align: left;
  white-space: nowrap;
}
.board-table tbody td {
  padding: 14px;
  color: var(--text-2);
  vertical-align: middle;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: var(--surface);
}
/* Card row: round left/right ends */
.board-row td:first-child {
  border-radius: var(--radius) 0 0 var(--radius);
  border-left: 1px solid var(--border);
}
.board-row td:last-child {
  border-radius: 0 var(--radius) var(--radius) 0;
  border-right: 1px solid var(--border);
}
.board-row td {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.board-row {
  cursor: pointer;
  transition: all var(--dur) var(--ease);
}
.board-row:hover td {
  background: var(--surface-hover);
  border-color: var(--border-hover);
}
.board-row.row-selected td {
  background: var(--accent-dim);
  border-color: var(--accent);
  color: var(--text);
}

.row-title {
  font-weight: 600;
  color: var(--text);
  font-size: 13px;
}
.col-check { width: 36px; text-align: center; }
.col-check input[type=checkbox] {
  accent-color: var(--accent);
  width: 15px;
  height: 15px;
  cursor: pointer;
}
.col-title { min-width: 200px; max-width: 300px; }
.col-company { min-width: 100px; max-width: 160px; }
.col-location { min-width: 100px; max-width: 160px; }
.col-remote { width: 80px; }
.col-salary { width: 110px; white-space: nowrap; color: var(--accent); font-weight: 600; }
.col-skills { min-width: 140px; max-width: 200px; }
.col-source { width: 90px; }
.col-actions { width: 100px; white-space: nowrap; }
.act-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 6px; border: 1px solid var(--border);
  background: var(--surface-raised); color: var(--text-3); cursor: pointer;
  font-size: 14px; text-decoration: none; transition: all var(--dur) var(--ease);
  margin-right: 3px;
}
.act-btn:hover { border-color: var(--border-hover); color: var(--text); }
.act-apply:hover { background: var(--accent-dim); color: var(--accent); border-color: var(--accent); }
.act-reject:hover { background: var(--danger-dim); color: var(--danger); border-color: var(--danger); }
.act-open:hover { background: var(--slate-dim); color: var(--slate); border-color: var(--slate); }
.act-btn:disabled { opacity: 0.3; cursor: default; }

.text-muted { color: var(--text-3); font-size: 11px; }

/* ── Salary hover + tooltip ── */
.salary-hover {
  cursor: help;
  border-bottom: 1px dotted var(--accent);
  padding-bottom: 1px;
}
.salary-tooltip {
  position: fixed;
  z-index: 300;
  background: var(--surface-solid);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
  padding: 10px;
  min-width: 380px;
  max-width: 450px;
  right: auto;
}
.tip-loading {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  color: var(--text-3);
  padding: 6px;
}
.tip-table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
}
.tip-table th {
  font-weight: 600;
  color: var(--text-3);
  text-transform: uppercase;
  font-size: 9px;
  letter-spacing: 0.5px;
  padding: 4px 8px;
  text-align: right;
  border-bottom: 1px solid var(--border);
}
.tip-table th:first-child { text-align: left; }
.tip-table td {
  padding: 5px 8px;
  color: var(--text-2);
  text-align: right;
  white-space: nowrap;
  border-bottom: 1px solid rgba(255,255,255,0.03);
}
.tip-cur {
  text-align: left !important;
  font-weight: 600;
  color: var(--text);
}
.tip-table tr:first-child td { color: var(--accent); font-weight: 600; }
.tip-table tr:first-child .tip-cur { color: var(--accent); }

.board-empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-3);
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 13px;
}

/* ── Badges ── */
.source-badge {
  font: 500 9px/1 'Inter', sans-serif; color: var(--text-3);
  background: var(--surface-raised); border: 1px solid var(--border);
  padding: 2px 7px; border-radius: 10px; text-transform: uppercase; letter-spacing: 0.3px;
}
.remote-badge {
  font: 600 10px/1 'Inter', sans-serif; padding: 3px 8px; border-radius: 10px;
}
.remote-remote { background: var(--accent-dim); color: var(--accent); }
.remote-hybrid { background: var(--warn-dim); color: var(--warn); }
.remote-onsite { background: var(--slate-dim); color: var(--slate); }
.salary-badge {
  font: 600 11px/1 'Inter', sans-serif; color: var(--accent);
}
.skill-chip {
  font: 400 10px/1 'Inter', sans-serif; color: var(--purple);
  background: var(--purple-dim); padding: 2px 8px; border-radius: 8px;
}

/* ── Pagination ── */
.board-pagination {
  display: flex; gap: 4px; justify-content: center; padding: 16px 0;
}
.page-btn {
  background: var(--surface-raised); border: 1px solid var(--border);
  color: var(--text-2); border-radius: 6px; padding: 5px 10px;
  font: 500 11px/1 'Inter', sans-serif; cursor: pointer;
}
.page-btn.active { background: var(--accent-dim); color: var(--accent); border-color: var(--accent); }
.page-dots { font: 400 11px/1 'Inter', sans-serif; color: var(--text-3); padding: 5px; }

/* ── Detail Panel ── */
.board-detail {
  position: fixed; top: 42px; right: -480px; width: 460px;
  height: calc(100vh - 42px); background: var(--surface-solid);
  border-left: 1px solid var(--border); z-index: 90;
  transition: right 0.3s var(--ease); overflow-y: auto;
  box-shadow: -8px 0 32px rgba(0,0,0,0.4);
}
.board-detail.open { right: 0; }
.board-detail-inner { padding: 20px; }
.board-detail-close {
  position: absolute; top: 12px; right: 14px; background: none;
  border: none; color: var(--text-3); font-size: 22px; cursor: pointer;
  line-height: 1;
}
.board-detail-close:hover { color: var(--text); }
.detail-company { font: 500 13px/1 'Inter', sans-serif; color: var(--text-2); margin: 4px 0 12px; }
.detail-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; align-items: center; font: 400 12px/1 'Inter', sans-serif; color: var(--text-3); }
.detail-salary { font: 600 13px/1 'Inter', sans-serif; color: var(--accent); margin-bottom: 12px; }
.detail-skills { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px; }
.detail-source { font: 400 11px/1 'Inter', sans-serif; color: var(--text-3); margin-bottom: 8px; }
.detail-lang-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.detail-lang-label {
  font: 400 11px/1 'Inter', sans-serif;
  color: var(--text-3);
  font-style: italic;
}
.detail-description { font: 400 12px/1.6 'Inter', sans-serif; color: var(--text-2); word-break: break-word; max-height: 50vh; overflow-y: auto; }
.detail-description p { margin: 0 0 10px; }
.detail-description a { color: var(--accent); text-decoration: underline; }
.detail-description a:hover { color: #6ee7b7; }
.detail-description ul, .detail-description ol { margin: 8px 0; padding-left: 20px; }
.detail-description li { margin: 3px 0; }
.detail-description strong, .detail-description b { color: var(--text); }
.detail-description h1, .detail-description h2, .detail-description h3, .detail-description h4 { color: var(--text); margin: 14px 0 6px; font-weight: 600; }
.detail-description h3 { font-size: 13px; }
.detail-description h4 { font-size: 12px; }
.detail-actions { display: flex; gap: 8px; margin-top: 16px; }

/* ═══════════════════════════════════════════════════════════
   PROFILE TAB
   ═══════════════════════════════════════════════════════════ */
.profile-page { padding: 20px 28px; max-width: 1000px; margin: 0 auto; }
.profile-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.profile-title { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 18px; color: var(--text); margin: 0; }
.profile-header-actions { display: flex; gap: 10px; align-items: center; }
.profile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.profile-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px;
}
.profile-card-wide { grid-column: 1 / -1; }
.profile-card-title {
  font-family: 'Inter', sans-serif; font-weight: 600; font-size: 13px; color: var(--text);
  margin: 0 0 14px; padding-bottom: 8px; border-bottom: 1px solid var(--border);
}
.profile-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pf-field { display: flex; flex-direction: column; gap: 4px; }
.pf-field label {
  font-family: 'Inter', sans-serif; font-weight: 600; font-size: 10px; color: var(--text-3);
  text-transform: uppercase; letter-spacing: 0.5px;
}
.pf-wide { grid-column: 1 / -1; }
.pf-hint { font-weight: 400; text-transform: none; letter-spacing: 0; font-style: italic; }
.pf-textarea {
  width: 100%; background: var(--surface-raised); border: 1px solid var(--border);
  border-radius: var(--radius-sm); color: var(--text); padding: 10px;
  font-family: 'Inter', sans-serif; font-size: 12px; resize: vertical; outline: none;
}
.pf-textarea:focus { border-color: var(--accent); }
.pf-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.profile-account-row { display: flex; align-items: center; gap: 14px; }
.profile-avatar {
  width: 48px; height: 48px; border-radius: 50%; background: var(--surface-raised);
  border: 2px solid var(--border); display: flex; align-items: center; justify-content: center;
  font-family: 'Inter', sans-serif; font-size: 18px; color: var(--text-3); overflow: hidden;
}
.profile-account-name { font-family: 'Inter', sans-serif; font-weight: 600; font-size: 14px; color: var(--text); }
.profile-account-email { font-family: 'Inter', sans-serif; font-size: 12px; color: var(--text-3); }
.profile-connections { display: flex; gap: 12px; margin-top: 6px; }
.profile-conn { font-family: 'Inter', sans-serif; font-size: 10px; color: var(--text-3); }
.profile-footer { display: flex; align-items: center; gap: 14px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border); }
.profile-save-status { font-family: 'Inter', sans-serif; font-size: 12px; color: var(--accent); }
@media (max-width: 768px) { .profile-grid { grid-template-columns: 1fr; } }

/* ═══════════════════════════════════════════════════════════
   MAP TAB
   ═══════════════════════════════════════════════════════════ */
.map-page {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.map-region-bar {
  display: flex;
  gap: 2px;
  padding: 6px 16px;
  background: var(--surface-solid);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  overflow-x: auto;
}
.map-region-btn {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 6px 16px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: transparent;
  color: var(--text-3);
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--dur) var(--ease);
}
.map-region-btn:hover {
  background: var(--surface-hover);
  color: var(--text);
  border-color: var(--text-3);
}
.map-region-btn.active {
  background: var(--accent);
  color: #0a0d12;
  border-color: var(--accent);
}
.map-header, .map-overlay-header {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 16px 24px 8px;
}
.map-title {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 18px;
  color: var(--text);
  margin: 0;
}
.map-subtitle {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 12px;
  color: var(--text-3);
}
.map-body {
  display: flex;
  flex: 1;
  overflow: hidden;
  position: relative;
}
.maplibre-container {
  flex: 1;
  min-height: 500px;
}
.map-sidebar {
  width: 260px;
  background: var(--surface-solid);
  border-left: 1px solid var(--border);
  overflow-y: auto;
  flex-shrink: 0;
}
.map-sidebar-inner { padding: 14px; }
.map-remote-card {
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
  text-align: center;
  margin-bottom: 16px;
}
.map-remote-icon { font-size: 28px; margin-bottom: 4px; }
.map-remote-title {
  font-family: 'Inter', sans-serif;
  font-weight: 600; font-size: 12px; color: var(--text-2);
  text-transform: uppercase; letter-spacing: 0.5px;
}
.map-remote-count {
  font-family: 'Inter', sans-serif;
  font-weight: 800; font-size: 28px; color: var(--accent);
  margin: 4px 0;
}
.map-remote-companies {
  font-family: 'Inter', sans-serif;
  font-size: 10px; color: var(--text-3); line-height: 1.5;
}
.map-range {
  width: 100%; accent-color: var(--accent);
  margin-bottom: 2px;
}
.map-range-val {
  font-family: 'Inter', sans-serif;
  font-size: 11px; color: var(--accent); font-weight: 600;
}
.map-locations-list { max-height: 300px; overflow-y: auto; }
.map-loc-item {
  display: flex; justify-content: space-between; align-items: center;
  padding: 7px 8px; border-radius: 6px; cursor: pointer;
  transition: background var(--dur) var(--ease);
}
.map-loc-item:hover { background: var(--surface-hover); }
.map-loc-name {
  font-family: 'Inter', sans-serif;
  font-size: 12px; color: var(--text-2);
}
.map-loc-count {
  font-family: 'Inter', sans-serif;
  font-size: 11px; font-weight: 700; color: var(--accent);
}
/* Map jobs panel — overlays the map on cluster click */
.map-jobs-panel {
  position: fixed;
  top: 126px;
  left: 16px;
  bottom: 16px;
  width: 420px;
  background: var(--surface-solid);
  border: 1px solid var(--border);
  border-radius: 10px;
  z-index: 100;
  display: none;
  flex-direction: column;
  box-shadow: 0 8px 40px rgba(0,0,0,0.5);
  overflow: hidden;
}
.map-jobs-panel.open { display: flex; }
.map-jobs-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  background: var(--surface-raised);
}
.map-jobs-title {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 13px;
  color: var(--text);
}
.map-jobs-close {
  background: none;
  border: 1px solid var(--border);
  color: var(--text-3);
  width: 26px;
  height: 26px;
  border-radius: 6px;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--dur) var(--ease);
}
.map-jobs-close:hover { color: var(--text); border-color: var(--text-3); }
.map-jobs-filters {
  display: flex;
  gap: 6px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  background: var(--surface-solid);
}
.mj-filter-input {
  flex: 1;
  min-width: 0;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: 5px;
  color: var(--text);
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  padding: 5px 8px;
  outline: none;
  transition: border-color var(--dur) var(--ease);
}
.mj-filter-input::placeholder { color: var(--text-3); }
.mj-filter-input:focus { border-color: var(--accent); }
.mj-filter-select {
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: 5px;
  color: var(--text-2);
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  padding: 5px 6px;
  cursor: pointer;
  outline: none;
  max-width: 120px;
}
.mj-filter-select:focus { border-color: var(--accent); }
.map-jobs-list {
  flex: 1;
  overflow-y: auto;
}
/* Table layout reusing board-table style */
.map-jobs-table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
}
.map-jobs-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--surface-raised);
  color: var(--text-3);
  font-weight: 600;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 8px 10px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.map-jobs-table tbody tr {
  border-bottom: 1px solid rgba(255,255,255,0.04);
  cursor: pointer;
  transition: background var(--dur) var(--ease);
}
.map-jobs-table tbody tr:hover { background: var(--surface-hover); }
.map-jobs-table tbody tr.hidden-job { display: none; }
.map-jobs-table tbody td {
  padding: 8px 10px;
  vertical-align: middle;
  color: var(--text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.map-jobs-table .mj-check { width: 30px; text-align: center; }
.map-jobs-table .mj-check input { accent-color: var(--accent); cursor: pointer; }
.map-jobs-table .mj-title {
  max-width: 200px;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
}
.map-jobs-table .mj-company {
  max-width: 120px;
  color: var(--text-3);
  overflow: hidden;
  text-overflow: ellipsis;
}
.map-jobs-table .mj-rate {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 600;
  color: var(--accent);
  font-size: 11px;
}
.map-jobs-table .mj-actions { width: 60px; text-align: right; white-space: nowrap; }
.map-jobs-table .mj-act {
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px 5px;
  border-radius: 4px;
  font-size: 13px;
  transition: all var(--dur) var(--ease);
  text-decoration: none;
  vertical-align: middle;
}
.map-jobs-table .mj-open { color: var(--accent); }
.map-jobs-table .mj-open:hover { background: rgba(52,211,153,0.1); }
.map-jobs-table .mj-hide { color: var(--text-3); opacity: 0.4; }
.map-jobs-table .mj-hide:hover { color: #ef4444; opacity: 1; background: rgba(239,68,68,0.08); }
.map-jobs-table tbody tr:hover .mj-hide { opacity: 0.7; }
.map-jobs-empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-3);
  font-family: 'Inter', sans-serif;
  font-size: 13px;
}
@media (max-width: 900px) {
  .map-sidebar { display: none; }
  .map-jobs-panel { left: 8px; right: 8px; width: auto; }
}
.map-overlay-top {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 12px 20px;
  position: absolute;
  top: 46px;
  left: 0;
  z-index: 10;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(10,13,18,0.8) 0%, transparent 100%);
  width: 100%;
  padding-bottom: 30px;
}
/* Detail map panel (opens on cluster click) */
.detail-map-panel {
  display: none;
  flex-direction: column;
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 20;
  background: var(--bg);
}
.detail-map-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px;
  background: var(--surface-solid);
  border-bottom: 1px solid var(--border);
}
.detail-map-city {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 16px;
  color: var(--text);
}
.detail-map-close {
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-2);
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  padding: 6px 14px;
  cursor: pointer;
  transition: all var(--dur) var(--ease);
}
.detail-map-close:hover { color: var(--text); border-color: var(--accent); }
.detail-map-container { flex: 1; }

/* MapLibre popup dark theme */
.job-popup .maplibregl-popup-content {
  background: #0f131b !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 10px !important;
  padding: 16px !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.6) !important;
  color: #e8edf4 !important;
  max-width: 400px !important;
}
.job-popup .maplibregl-popup-tip {
  border-top-color: #0f131b !important;
}
.job-popup .maplibregl-popup-close-button {
  color: var(--text-3);
  font-size: 20px;
  padding: 4px 8px;
  right: 4px;
  top: 4px;
}
.job-popup .maplibregl-popup-close-button:hover {
  color: var(--text);
  background: none;
}
/* Popup header */
.map-tip-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.map-tip-city {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 16px;
  color: var(--text);
}
.map-tip-count {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-weight: 700;
  font-size: 15px;
  color: var(--accent);
  white-space: nowrap;
}
/* Salary line */
.map-tip-salary {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 11px;
  color: var(--accent);
  background: rgba(0, 204, 153, 0.08);
  padding: 4px 8px;
  border-radius: 4px;
  margin-bottom: 8px;
}
/* Pill rows (remote type, experience) */
.map-tip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 6px;
}
.map-tip-pill {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 4px;
  background: var(--surface-raised);
  color: var(--text-2);
  border: 1px solid var(--border);
}
.map-tip-pill--remote { color: #34d399; border-color: rgba(52,211,153,0.3); }
.map-tip-pill--hybrid { color: #fbbf24; border-color: rgba(251,191,36,0.3); }
.map-tip-pill--onsite, .map-tip-pill--on-site { color: #60a5fa; border-color: rgba(96,165,250,0.3); }
/* Section labels */
.map-tip-label {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 9px;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 3px;
  margin-top: 8px;
}
.map-tip-muted { color: var(--text-3); font-weight: 400; }
/* Companies */
.map-tip-companies {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  color: var(--text-2);
  line-height: 1.5;
}
/* Skills */
.map-tip-skills {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 2px;
}
.map-tip-skill {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 10px;
  background: rgba(0, 204, 153, 0.1);
  color: var(--accent);
  padding: 2px 6px;
  border-radius: 3px;
}
/* Roles */
.map-tip-roles { margin-top: 2px; }
.map-tip-role {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  color: var(--text-3);
  line-height: 1.6;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 360px;
}
.map-tip-role::before {
  content: '›';
  color: var(--accent);
  margin-right: 5px;
  font-weight: 700;
}
/* Footer */
.map-tip-footer {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 10px;
  color: var(--text-3);
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px solid var(--border);
}

/* ═══════════════════════════════════════════════════════════
   STATISTICS TAB
   ═══════════════════════════════════════════════════════════ */
.stats-page {
  padding: 20px 28px;
  max-width: 1200px;
  margin: 0 auto;
}
/* Inner tab switcher */
.stats-inner-tabs {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--border);
}
.stats-inner-tab {
  background: none;
  border: none;
  color: var(--text-3);
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.5px;
  padding: 8px 18px;
  cursor: pointer;
  position: relative;
  transition: color 0.2s;
}
.stats-inner-tab:hover { color: var(--text); }
.stats-inner-tab.active {
  color: var(--accent);
}
.stats-inner-tab.active::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2px;
  background: var(--accent);
  border-radius: 2px 2px 0 0;
}
/* Panels: only show the active one */
.stats-panel { display: none; padding-top: 20px; }
.stats-panel.active { display: block; }
.stats-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.stats-title {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 18px;
  color: var(--text);
  margin: 0;
}
.stats-period-btns {
  display: flex;
  gap: 4px;
  background: var(--surface-raised);
  border-radius: var(--radius-sm);
  padding: 3px;
}
.period-btn {
  background: none;
  border: none;
  color: var(--text-3);
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 11px;
  padding: 6px 14px;
  border-radius: 6px;
  cursor: pointer;
  transition: all var(--dur) var(--ease);
}
.period-btn:hover { color: var(--text); }
.period-btn.active { background: var(--accent); color: #0a0d12; }

/* Stat cards */
.stats-cards {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
  margin-bottom: 20px;
}
.stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  text-align: center;
}
.stat-card--accent { border-color: var(--accent); border-color: rgba(52, 211, 153, 0.2); }
.stat-card--danger { border-color: rgba(248, 113, 113, 0.2); }
.stat-card--warn { border-color: rgba(251, 191, 36, 0.2); }
.stat-value {
  font-family: 'Inter', sans-serif;
  font-weight: 800;
  font-size: 24px;
  color: var(--text);
  line-height: 1.2;
}
.stat-card--accent .stat-value { color: var(--accent); }
.stat-card--danger .stat-value { color: var(--danger); }
.stat-card--warn .stat-value { color: var(--warn); }
.stat-label {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 10px;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-top: 4px;
}

/* Chart cards */
.stats-charts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}
.chart-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
}
.chart-card--wide { grid-column: 1 / -1; }
.chart-title {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 12px;
  color: var(--text-2);
  margin: 0 0 12px;
}
.chart-body { min-height: 120px; }
.chart-empty {
  text-align: center;
  padding: 30px;
  color: var(--text-3);
  font-family: 'Inter', sans-serif;
  font-size: 12px;
}
.chart-legend {
  display: flex;
  gap: 14px;
  margin-top: 8px;
}
.legend-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  color: var(--text-3);
}
.legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

/* Horizontal bar chart */
.hbar-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.hbar-label {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  color: var(--text-2);
  min-width: 100px;
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hbar-track {
  flex: 1;
  height: 18px;
  background: var(--surface-raised);
  border-radius: 4px;
  overflow: hidden;
}
.hbar-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.4s var(--ease);
}
.hbar-val {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: var(--text);
  min-width: 30px;
}

@media (max-width: 900px) {
  .stats-cards { grid-template-columns: repeat(3, 1fr); }
  .stats-charts { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════
   LOADING & FEEDBACK SYSTEM
   ══════════════════════════════════════════════════════════ */

/* ── Toast Notifications ── */
#toast-container {
  position: fixed;
  top: 56px; right: 16px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}
.toast {
  pointer-events: auto;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px;
  background: var(--surface-solid);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font: 500 12px/1.4 'Inter', sans-serif;
  color: var(--text);
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
  transform: translateX(120%);
  transition: transform 0.3s var(--ease), opacity 0.3s;
  max-width: 360px;
}
.toast.show { transform: translateX(0); }
.toast.hide { opacity: 0; transform: translateX(120%); }
.toast--success { border-left: 3px solid var(--accent); }
.toast--error { border-left: 3px solid var(--danger); }
.toast--info { border-left: 3px solid var(--slate); }
.toast--warn { border-left: 3px solid var(--warn); }
.toast-icon { font-size: 16px; flex-shrink: 0; }
.toast--success .toast-icon { color: var(--accent); }
.toast--error .toast-icon { color: var(--danger); }
.toast--info .toast-icon { color: var(--slate); }
.toast--warn .toast-icon { color: var(--warn); }
.toast-close {
  background: none; border: none; color: var(--text-3);
  cursor: pointer; font-size: 16px; line-height: 1; padding: 0 0 0 8px;
  flex-shrink: 0;
}
.toast-close:hover { color: var(--text); }

/* ── Button Loading Spinner ── */
.btn-loading {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}
.btn-loading::after {
  content: '';
  position: absolute;
  width: 14px; height: 14px;
  top: 50%; left: 50%;
  margin: -7px 0 0 -7px;
  border: 2px solid rgba(255,255,255,0.2);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Skeleton Loader ── */
.skeleton-row td {
  position: relative;
  overflow: hidden;
  height: 38px;
}
.skeleton-row td::after {
  content: '';
  display: block;
  height: 12px;
  width: 70%;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--surface-raised) 25%, var(--surface-hover) 50%, var(--surface-raised) 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
}
.skeleton-row td:nth-child(odd)::after { width: 55%; }
.skeleton-row td:nth-child(even)::after { width: 80%; }
@keyframes skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── Better Empty States ── */
.board-empty-icon { font-size: 32px; margin-bottom: 8px; opacity: 0.5; }
.board-empty-action { margin-top: 12px; }

/* ══════════════════════════════════════════════════════════
   MOBILE RESPONSIVE
   ══════════════════════════════════════════════════════════ */

/* ── Filter Sidebar Toggle Button ── */
.btn-filter-toggle,
.btn-map-filter-toggle {
  display: none;
  align-items: center; gap: 6px;
  padding: 6px 12px;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-2);
  font: 500 12px/1 'Inter', sans-serif;
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.btn-filter-toggle:hover,
.btn-map-filter-toggle:hover { border-color: var(--border-hover); color: var(--text); }
.btn-filter-toggle::before { content: '\2630'; font-size: 14px; }
.btn-map-filter-toggle::before { content: '\2630'; font-size: 14px; }

/* ── Sidebar Backdrop Overlay ── */
.sidebar-backdrop {
  display: none;
  position: fixed; inset: 0; z-index: 79;
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(2px);
}
.sidebar-backdrop.open { display: block; }

/* ── 1024px: Hide less important columns ── */
@media (max-width: 1024px) {
  .board-table .col-skills { display: none; }
}

/* ── 900px: Map & Stats adjustments ── */
@media (max-width: 900px) {
  .map-sidebar {
    position: fixed;
    top: 46px; right: -280px;
    width: 270px;
    height: calc(100vh - 46px);
    z-index: 80;
    transition: right 0.3s var(--ease);
    box-shadow: -8px 0 32px rgba(0,0,0,0.4);
    display: block !important;
  }
  .map-sidebar.open { right: 0; }
  .btn-map-filter-toggle { display: inline-flex; }
}

/* ── 768px: Main responsive breakpoint ── */
@media (max-width: 768px) {
  /* Tab bar */
  .top-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .top-tabs::-webkit-scrollbar { display: none; }
  .top-tab { padding: 10px 12px; font-size: 11px; white-space: nowrap; }
  .top-stats { display: none; }

  /* Board layout */
  .board-layout { grid-template-columns: 1fr; }

  /* Filter sidebar — slide-in overlay */
  .board-sidebar {
    position: fixed;
    top: 46px;
    left: -280px;
    width: 270px;
    height: calc(100vh - 46px);
    z-index: 80;
    transition: left 0.3s var(--ease);
    box-shadow: 8px 0 32px rgba(0,0,0,0.4);
    background: var(--surface-solid);
    overflow-y: auto;
  }
  .board-sidebar.open { left: 0; }
  .btn-filter-toggle { display: inline-flex; }

  /* Board toolbar */
  .board-toolbar { gap: 8px; }
  .board-toolbar-left { flex-wrap: wrap; gap: 6px; }
  .board-sub-tabs { overflow-x: auto; scrollbar-width: none; }
  .board-sub-tabs::-webkit-scrollbar { display: none; }
  .board-sub-tab { white-space: nowrap; padding: 8px 14px; font-size: 12px; }

  /* Touch targets */
  .act-btn { width: 36px; height: 36px; font-size: 16px; }
  .page-btn { min-width: 36px; height: 36px; font-size: 12px; }

  /* Detail panel — full screen */
  .board-detail { width: 100%; right: -100%; top: 0; height: 100vh; }
  .board-detail.open { right: 0; }
  .board-detail-close { width: 44px; height: 44px; font-size: 28px; display: flex; align-items: center; justify-content: center; }

  /* Profile */
  .profile-page { padding: 16px; }
  .profile-header { flex-direction: column; align-items: flex-start; gap: 10px; }
  .profile-form-grid { grid-template-columns: 1fr; }

  /* Stats */
  .stats-page { padding: 12px 16px; }
  .stats-header { flex-direction: column; align-items: flex-start; gap: 10px; }
  .stats-inner-tabs { overflow-x: auto; scrollbar-width: none; }
  .stats-inner-tabs::-webkit-scrollbar { display: none; }

  /* Toast — full width on mobile */
  #toast-container { left: 16px; right: 16px; }
  .toast { max-width: 100%; }
}

/* ── 600px: Card view for job table ── */
@media (max-width: 600px) {
  .board-table thead { display: none; }
  .board-table, .board-table tbody { display: block; width: 100%; }
  .board-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
      "actions title title"
      "actions company location"
      "actions remote salary";
    gap: 2px 10px;
    padding: 12px;
    margin-bottom: 8px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
  }
  .board-row:hover { background: var(--surface-hover); }
  .board-row td {
    display: block;
    padding: 2px 0;
    border: none;
    background: transparent !important;
    max-width: none;
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
  }
  .col-actions { grid-area: actions; display: flex; flex-direction: column; gap: 4px; justify-content: center; }
  .col-title { grid-area: title; font-weight: 600; font-size: 13px; }
  .col-company { grid-area: company; color: var(--text-2); font-size: 12px; }
  .col-location { grid-area: location; color: var(--text-3); font-size: 11px; text-align: right; }
  .col-remote { grid-area: remote; font-size: 11px; }
  .col-salary { grid-area: salary; text-align: right; font-size: 12px; }
  .col-check, .col-skills, .col-source { display: none; }

  /* Stats cards 2-col */
  .stats-cards { grid-template-columns: repeat(2, 1fr); }
}

/* ── 480px: Short tab labels ── */
@media (max-width: 480px) {
  .top-tab { font-size: 0; padding: 10px 10px; }
  .top-tab::before { content: attr(data-short); font-size: 11px; font-weight: 600; }
}

/* ═══════════════════════════════════════════════════════════
   LANDING PAGE — OSINT / DARK OPS AESTHETIC
   ═══════════════════════════════════════════════════════════ */
.landing-body {
  overflow-y: auto !important;
  height: auto !important;
  background: #030508;
}
.accent { color: var(--accent); }
.accent-link { color: var(--accent); text-decoration: none; font-family: 'JetBrains Mono', monospace; font-size: 12px; }
.accent-link:hover { text-decoration: underline; }

/* Scanline overlay */
.scanlines {
  position: fixed; inset: 0; z-index: 9999; pointer-events: none;
  background: repeating-linear-gradient(
    0deg, transparent, transparent 2px,
    rgba(0,0,0,0.03) 2px, rgba(0,0,0,0.03) 4px
  );
}

/* Terminal elements */
.terminal-prompt {
  font-family: 'JetBrains Mono', monospace; font-size: 13px;
  color: var(--accent); font-weight: 600;
}
.terminal-cmd {
  font-family: 'JetBrains Mono', monospace; font-size: 13px;
  color: var(--text-2);
}
.terminal-cursor {
  font-family: 'JetBrains Mono', monospace; font-size: 13px;
  color: var(--accent); animation: blink 1s step-end infinite;
}
@keyframes blink { 50% { opacity: 0; } }

/* Nav */
.lnav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 40px; position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: rgba(3,5,8,0.9); backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(52,211,153,0.08);
}
.lnav-left { display: flex; align-items: center; gap: 10px; }
.lnav-logo { display: flex; align-items: center; gap: 8px; text-decoration: none; }
.lnav-logo-icon { color: var(--accent); font-size: 14px; }
.lnav-logo-text {
  font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 15px; color: var(--text);
}
.lnav-version {
  font-family: 'JetBrains Mono', monospace; font-size: 9px; color: var(--text-3);
  background: rgba(52,211,153,0.06); border: 1px solid rgba(52,211,153,0.1);
  padding: 2px 6px; border-radius: 4px;
}
.lnav-right { display: flex; align-items: center; gap: 12px; }
.lnav-link {
  font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 500;
  color: var(--text-2); text-decoration: none; padding: 8px 14px;
  transition: color var(--dur) var(--ease);
}
.lnav-link:hover { color: var(--text); }

/* Buttons */
.lbtn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: 'Inter', sans-serif; font-weight: 600; font-size: 13px;
  padding: 10px 22px; border-radius: var(--radius-sm); text-decoration: none;
  transition: all var(--dur) var(--ease); cursor: pointer; border: none;
}
.lbtn-primary { background: var(--accent); color: #0a0d12; }
.lbtn-primary:hover { opacity: 0.85; }
.lbtn-ghost { background: none; color: var(--text-2); border: 1px solid var(--border); }
.lbtn-ghost:hover { border-color: var(--accent); color: var(--text); }
.lbtn-lg { padding: 14px 32px; font-size: 15px; border-radius: 10px; }

/* Hero */
.hero {
  position: relative; padding: 140px 40px 60px; text-align: center;
  overflow: hidden; min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at 50% 0%, rgba(52,211,153,0.04) 0%, transparent 60%);
}
.hero-grid-bg {
  position: absolute; inset: 0; opacity: 0.035;
  background-image:
    linear-gradient(rgba(52,211,153,0.4) 1px, transparent 1px),
    linear-gradient(90deg, rgba(52,211,153,0.4) 1px, transparent 1px);
  background-size: 40px 40px;
}
.hero-hex-bg {
  position: absolute; inset: 0; opacity: 0.015;
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='52' viewBox='0 0 60 52' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 0L60 15v22L30 52 0 37V15z' fill='none' stroke='%2334d399' stroke-width='0.5'/%3E%3C/svg%3E");
  background-size: 60px 52px;
}
.hero-content { position: relative; max-width: 800px; }
.hero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 500;
  color: var(--accent); background: var(--accent-dim); border: 1px solid rgba(52,211,153,0.15);
  padding: 6px 16px; border-radius: 20px; margin-bottom: 28px; letter-spacing: 0.5px;
}
.hero-badge-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
  animation: pulse 2s ease-in-out infinite;
}
.hero-title {
  font-family: 'Inter', sans-serif; font-weight: 900; font-size: clamp(36px, 5vw, 64px);
  color: var(--text); line-height: 1.1; margin: 0 0 20px; letter-spacing: -0.02em;
}
.hero-sub {
  font-family: 'Inter', sans-serif; font-size: 17px; font-weight: 400;
  color: var(--text-3); line-height: 1.7; margin: 0 auto 36px; max-width: 600px;
}
.hero-ctas { display: flex; gap: 14px; justify-content: center; margin-bottom: 60px; }
.hero-stats { display: flex; gap: 40px; justify-content: center; }
.hero-stat { text-align: center; }
.hero-stat-num {
  display: block; font-family: 'JetBrains Mono', monospace; font-weight: 700;
  font-size: 28px; color: var(--accent);
}
.hero-stat-label {
  font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 500;
  color: var(--text-3); text-transform: uppercase; letter-spacing: 0.5px;
}

/* Trust bar */
.trust-bar {
  padding: 40px; text-align: center;
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.trust-label {
  font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 600;
  color: var(--text-3); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 20px;
}
.trust-logos { display: flex; flex-wrap: wrap; gap: 24px; justify-content: center; align-items: center; }
.trust-logo {
  font-family: 'Inter', sans-serif; font-weight: 700; font-size: 14px;
  color: var(--text-3); opacity: 0.4; transition: opacity var(--dur) var(--ease);
}
.trust-logo:hover { opacity: 0.8; }

/* Section headers */
.section-header { text-align: center; margin-bottom: 48px; }
.section-tag {
  display: inline-block; font-family: 'JetBrains Mono', monospace; font-size: 11px;
  font-weight: 600; color: var(--accent); letter-spacing: 2px;
  margin-bottom: 12px;
}
.section-title {
  font-family: 'Inter', sans-serif; font-weight: 800; font-size: 36px;
  color: var(--text); margin: 0; letter-spacing: -0.02em;
}

/* Features */
.features { padding: 100px 40px; }
.features-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
  max-width: 1000px; margin: 0 auto;
}
.feature-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 28px; transition: border-color var(--dur) var(--ease);
}
.feature-card:hover { border-color: rgba(52,211,153,0.2); }
.feature-icon { font-size: 28px; margin-bottom: 14px; }
.feature-card h3 {
  font-family: 'Inter', sans-serif; font-weight: 700; font-size: 15px;
  color: var(--text); margin: 0 0 8px;
}
.feature-card p {
  font-family: 'Inter', sans-serif; font-size: 13px; color: var(--text-3);
  line-height: 1.6; margin: 0;
}

/* Map preview */
.map-preview { padding: 80px 40px; }
.map-preview-box {
  max-width: 900px; margin: 0 auto; height: 400px; border-radius: var(--radius);
  background: #060810; border: 1px solid var(--border); position: relative; overflow: hidden;
}
.map-preview-overlay { position: absolute; inset: 0; }
.mpd {
  position: absolute; border-radius: 50%; background: var(--accent);
  filter: blur(2px); box-shadow: 0 0 20px rgba(52,211,153,0.4);
  animation: pulse 3s ease-in-out infinite;
}
.map-preview-label {
  position: absolute; left: 20%; top: 30%;
  font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 600;
  color: var(--text-2); text-align: center;
}

/* Pricing */
.pricing { padding: 100px 40px; }
.pricing-card {
  max-width: 440px; margin: 0 auto; background: var(--surface);
  border: 1px solid rgba(52,211,153,0.2); border-radius: 16px; padding: 36px;
}
.pricing-header { margin-bottom: 24px; }
.pricing-name {
  font-family: 'JetBrains Mono', monospace; font-weight: 600; font-size: 13px;
  color: var(--accent); text-transform: uppercase; letter-spacing: 1px;
}
.pricing-price { margin-top: 8px; }
.pricing-amount {
  font-family: 'Inter', sans-serif; font-weight: 900; font-size: 48px; color: var(--text);
}
.pricing-period {
  font-family: 'Inter', sans-serif; font-size: 15px; color: var(--text-3);
}
.pricing-features {
  list-style: none; padding: 0; margin: 0 0 28px;
}
.pricing-features li {
  font-family: 'Inter', sans-serif; font-size: 14px; color: var(--text-2);
  padding: 8px 0; border-bottom: 1px solid var(--border);
}
.pricing-features li::before { content: "◆ "; color: var(--accent); font-size: 10px; }
.pricing-note {
  font-family: 'Inter', sans-serif; font-size: 12px; color: var(--text-3);
  text-align: center; margin-top: 12px;
}

/* Final CTA */
.final-cta {
  padding: 100px 40px; text-align: center;
  border-top: 1px solid var(--border);
}
.final-cta-title {
  font-family: 'Inter', sans-serif; font-weight: 800; font-size: 32px;
  color: var(--text); margin: 0 0 16px; line-height: 1.2;
}
.final-cta-sub {
  font-family: 'Inter', sans-serif; font-size: 15px; color: var(--text-3);
  margin: 0 0 32px; max-width: 500px; margin-left: auto; margin-right: auto;
}

/* Footer */
.lfooter {
  display: flex; align-items: center; justify-content: space-between;
  padding: 24px 40px; border-top: 1px solid var(--border);
}
.lfooter-left { display: flex; align-items: center; gap: 8px; }
.lfooter-text { font-family: 'Inter', sans-serif; font-size: 12px; color: var(--text-3); }

/* Landing responsive */
@media (max-width: 768px) {
  .hero { padding: 120px 20px 60px; }
  .hero-stats { flex-wrap: wrap; gap: 20px; }
  .features-grid { grid-template-columns: 1fr; }
  .lnav { padding: 12px 20px; }
  .hero-ctas { flex-direction: column; align-items: center; }
  .trust-logos { gap: 16px; }
}

/* ═══════════════════════════════════════════════════════════
   AUTH PAGES (Login / Signup)
   ═══════════════════════════════════════════════════════════ */
.auth-body {
  overflow-y: auto !important;
  height: auto !important;
}
.auth-page {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 40px 20px;
}
.auth-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: 16px;
  padding: 40px; width: 100%; max-width: 400px; text-align: center;
}
.auth-card--wide {
  max-width: 700px; display: grid; grid-template-columns: 1fr 1fr;
  text-align: left; gap: 0; padding: 0; overflow: hidden;
}
.auth-card-left { padding: 40px; }
.auth-card-right {
  padding: 40px; background: var(--surface-raised);
  border-left: 1px solid var(--border);
}
.auth-logo {
  display: inline-flex; align-items: center; gap: 8px;
  text-decoration: none; margin-bottom: 28px;
}
.auth-title {
  font-family: 'Inter', sans-serif; font-weight: 800; font-size: 22px;
  color: var(--text); margin: 0 0 8px;
}
.auth-sub {
  font-family: 'Inter', sans-serif; font-size: 13px; color: var(--text-3); margin: 0 0 28px;
}
.auth-google-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; padding: 12px 20px; border-radius: var(--radius-sm);
  background: #fff; color: #333; font-family: 'Inter', sans-serif;
  font-weight: 600; font-size: 14px; text-decoration: none;
  transition: box-shadow var(--dur) var(--ease);
}
.auth-google-btn:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.3); }
.auth-divider {
  display: flex; align-items: center; gap: 12px; margin: 20px 0;
  font-family: 'Inter', sans-serif; font-size: 12px; color: var(--text-3);
}
.auth-divider::before, .auth-divider::after {
  content: ''; flex: 1; height: 1px; background: var(--border);
}
.auth-note {
  font-family: 'Inter', sans-serif; font-size: 12px; color: var(--text-3); margin: 0;
}
.auth-footer {
  margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--border);
  font-family: 'Inter', sans-serif; font-size: 13px; color: var(--text-3);
}
/* Signup perks */
.auth-perks-title {
  font-family: 'Inter', sans-serif; font-weight: 700; font-size: 14px;
  color: var(--text); margin: 0 0 16px;
}
.auth-perks { list-style: none; padding: 0; margin: 0 0 24px; }
.auth-perks li {
  font-family: 'Inter', sans-serif; font-size: 13px; color: var(--text-2);
  padding: 6px 0; display: flex; align-items: center; gap: 8px;
}
.auth-perk-icon { color: var(--accent); font-size: 8px; }
.auth-price-tag { margin-top: 20px; }
.auth-price {
  font-family: 'Inter', sans-serif; font-weight: 900; font-size: 36px; color: var(--text);
}
.auth-price-period { font-family: 'Inter', sans-serif; font-size: 14px; color: var(--text-3); }
.auth-price-note { font-family: 'Inter', sans-serif; font-size: 11px; color: var(--text-3); margin-top: 4px; }

@media (max-width: 640px) {
  .auth-card--wide { grid-template-columns: 1fr; }
  .auth-card-right { border-left: none; border-top: 1px solid var(--border); }
}