:root { color-scheme: dark; --hive-carbon-990: #050708; --hive-carbon-960: #0a0e0f; --hive-carbon-930: #101516; --hive-carbon-900: #151b1d; --hive-carbon-860: #1d2426; --hive-carbon-780: #293236; --hive-mist-100: #f3f6f1; --hive-mist-250: #cbd3c8; --hive-mist-400: #98a398; --hive-mist-550: #68746c; --hive-mist-700: #3f4944; --hive-green-500: #2fa66f; --hive-green-400: #42bc82; --hive-green-300: #6ed3a0; --hive-gold-500: #d7ad4a; --hive-sky-500: #5da8cf; --hive-red-500: #df6b5f; --hive-violet-500: #9a7cff; --surface-canvas: var(--hive-carbon-990); --surface-nav: var(--hive-carbon-960); --surface-panel: var(--hive-carbon-930); --surface-raised: var(--hive-carbon-900); --surface-hover: rgba(255, 255, 255, 0.045); --surface-active: rgba(47, 166, 111, 0.14); --surface-tint: rgba(47, 166, 111, 0.075); --rule-subtle: rgba(203, 211, 200, 0.085); --rule-strong: rgba(203, 211, 200, 0.16); --rule-accent: rgba(47, 166, 111, 0.36); --content-strong: var(--hive-mist-100); --content: var(--hive-mist-250); --content-muted: var(--hive-mist-400); --content-faint: var(--hive-mist-550); --content-disabled: var(--hive-mist-700); --dropdown-surface: #0d1415; --dropdown-surface-hover: #14211c; --dropdown-surface-active: #1b3328; --dropdown-text: var(--hive-mist-100); --dropdown-text-muted: var(--hive-mist-400); --dropdown-selected-text: var(--hive-mist-100); --action-primary: var(--hive-green-500); --action-primary-hover: var(--hive-green-400); --action-primary-subtle: rgba(47, 166, 111, 0.18); --action-primary-faint: rgba(47, 166, 111, 0.09); --action-on-primary: #03110b; --action-fill: #046a38; --action-fill-hover: #0a7c4a; --action-on-fill: #ffffff; --signal-good: var(--hive-green-400); --signal-good-subtle: rgba(66, 188, 130, 0.16); --signal-risk: var(--hive-red-500); --signal-risk-subtle: rgba(223, 107, 95, 0.16); --signal-warn: var(--hive-gold-500); --signal-warn-subtle: rgba(215, 173, 74, 0.16); --signal-info: var(--hive-sky-500); --signal-info-subtle: rgba(93, 168, 207, 0.16); --bg-canvas: var(--surface-canvas); --bg-base: var(--surface-nav); --bg-panel: var(--surface-panel); --bg-elev: var(--surface-raised); --bg-hover: var(--surface-hover); --bg-active: var(--surface-active); --bg-tint: var(--surface-tint); --border: var(--rule-subtle); --border-strong: var(--rule-strong); --border-accent: var(--rule-accent); --text-primary: var(--content-strong); --text-secondary: var(--content); --text-muted: var(--content-muted); --text-faint: var(--content-faint); --text-inverse: var(--action-on-primary); --accent: var(--action-primary); --accent-soft: var(--action-primary-subtle); --accent-faint: var(--action-primary-faint); --accent-hover: var(--action-primary-hover); --on-accent: var(--action-on-primary); --pos: var(--signal-good); --pos-soft: var(--signal-good-subtle); --neg: var(--signal-risk); --neg-soft: var(--signal-risk-subtle); --warn: var(--signal-warn); --warn-soft: var(--signal-warn-subtle); --info: var(--signal-info); --info-soft: var(--signal-info-subtle); }
[data-accent="green"], [data-accent="amber"], [data-accent="lime"] { --action-primary: var(--hive-green-500); --action-primary-hover: var(--hive-green-400); --action-primary-subtle: rgba(47, 166, 111, 0.18); --action-primary-faint: rgba(47, 166, 111, 0.09); --action-on-primary: #03110b; }
[data-accent="gold"] { --action-primary: var(--hive-gold-500); --action-primary-hover: #e5bf62; --action-primary-subtle: rgba(215, 173, 74, 0.18); --action-primary-faint: rgba(215, 173, 74, 0.09); --action-on-primary: #141005; }
[data-accent="sky"], [data-accent="cyan"] { --action-primary: var(--hive-sky-500); --action-primary-hover: #75badc; --action-primary-subtle: rgba(93, 168, 207, 0.18); --action-primary-faint: rgba(93, 168, 207, 0.09); --action-on-primary: #041017; }
[data-accent="violet"] { --action-primary: var(--hive-violet-500); --action-primary-hover: #ad93ff; --action-primary-subtle: rgba(154, 124, 255, 0.18); --action-primary-faint: rgba(154, 124, 255, 0.09); --action-on-primary: #ffffff; }
html, body { background: var(--surface-canvas); }
body { color: var(--content-strong); letter-spacing: 0px; }
.app { background: radial-gradient(circle at 16% 0%, rgba(47, 166, 111, 0.08), transparent 31rem),
    linear-gradient(180deg, var(--surface-canvas) 0%, #060909 100%); }
select { color-scheme: dark; background-color: var(--dropdown-surface); color: var(--dropdown-text); border-color: var(--rule-subtle); }
select:hover { border-color: var(--rule-strong); }
select:focus { border-color: var(--rule-accent); outline: none; }
select option, select optgroup { background-color: var(--dropdown-surface); color: var(--dropdown-text); }
select option:hover, select option:focus { background-color: var(--dropdown-surface-hover); color: var(--dropdown-text); }
select option:checked { background-color: var(--dropdown-surface-active); color: var(--dropdown-selected-text); }
select option:disabled { background-color: var(--dropdown-surface); color: var(--content-disabled); }
select.chip, .cap-role-select, .interest-table .role-select, .placeholder-modal select, .apm-field select {
  color-scheme: dark;
  background-color: var(--dropdown-surface);
  color: var(--dropdown-text);
  border-color: var(--rule-subtle);
}
.sidebar, .topstrip, .hive-panel, .player-overlay, .player-overlay-head, .profile-tabs { background: color-mix(in srgb, var(--surface-nav) 94%, black); border-color: var(--rule-subtle); }
.sidebar-brand { background: rgba(255, 255, 255, 0.01); }
.brand-name, .page-title, .section-title, .card-title { letter-spacing: 0px; }
.brand-sub, .page-eyebrow, .upper, .eyebrow, .stat-label, .table thead th, .cap-grid th, .card-title, .dc-col-head, .summary-spend .label, .cap-foot .lab { letter-spacing: 0.06em; }
.nav-item { color: var(--content-muted); }
.nav-item:hover { background: rgba(255, 255, 255, 0.04); color: var(--content-strong); }
.nav-item.active { background: rgba(47, 166, 111, 0.114); color: var(--content-strong); }
.nav-item.active::before { background: var(--accent); box-shadow: 0 0 0 3px var(--accent-faint); }
.card, .tile, .search-bar, .seg-toggle, .cap-cell, .game-card, .task-details-input, .task-linkadd, .tag-popover, .placeholder-modal select, .apm-card, .apm-field input, .apm-field select { background: var(--surface-panel); border-color: var(--rule-subtle); }
.card { box-shadow: rgba(255, 255, 255, 0.024) 0px 1px 0px inset, rgba(0, 0, 0, 0.18) 0px 14px 34px; }
.card.tint { background: linear-gradient(rgba(47, 166, 111, 0.114), rgba(47, 166, 111, 0.043)); border-color: var(--rule-accent); }
.btn { border-color: var(--rule-subtle); color: var(--content); }
.btn:hover, .chip:hover, .tile:hover, .game-card:hover, .apm-card:hover { border-color: var(--rule-strong); background: rgba(255, 255, 255, 0.043); }
.btn.primary, .lens-toggle-btn.active, .task-check.done { background: var(--accent-fill, var(--accent)); border-color: var(--accent-fill-hover, var(--accent)); color: var(--on-accent); }
.btn.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.chip.active, .seg-btn.active, .phase-switch.active, .commit-pill { background: rgba(255, 255, 255, 0.055); border-color: var(--rule-strong); }
.badge.accent, .phase-switch.now, .phase-switch.active.now, .task-link:hover, .task-meta-v.task-link:hover, .outline-sub.active, .conf-strip-row.you .rk, .apm-title-wrap { color: var(--accent); }
.badge.accent, .stage.contacted, .apm-card.best { background: var(--accent-faint); border-color: var(--rule-accent); }
.badge.warn { color: var(--warn); background: var(--warn-soft); }
.badge.info { color: var(--info); background: var(--info-soft); }
.avatar, .user-avatar { background: linear-gradient(135deg, rgba(47, 166, 111, 0.24), rgba(13, 22, 19, 0.95)); border-color: rgba(47, 166, 111, 0.22); color: var(--content-strong); }
.team-logo { background: rgba(93, 168, 207, 0.12); border-color: rgba(93, 168, 207, 0.24); color: var(--content); }
.stage.interest { color: var(--content); }
.stage.contacted { color: var(--warn); }
.table tbody tr:hover, .tm-rank-table tbody tr:hover, .interest-table tbody tr:hover, .conf-strip-row:hover, .game-log tbody tr:hover { background: rgba(47, 166, 111, 0.055); }
.pbar, .percentile-track { background: rgba(255, 255, 255, 0.075); }
.pctl-track { background: linear-gradient(to right, rgba(204, 90, 79, 0.34) 0%, rgba(212, 161, 74, 0.3) 50%, rgba(78, 168, 114, 0.36) 100%); }
.phase-dot, .dot.accent, .pbar > i, .outline-section.active::before, .outline-sub.active .outline-sub-line, .rank-trio-cell.pct .pbar i, .conf-cell.you, .timeline-dot.active, .apm-rail-step.active .apm-rail-dot { background: var(--accent); }
.player-overlay, .hive-panel, .placeholder-modal, .task-modal, .tag-popover { box-shadow: rgba(0, 0, 0, 0.42) -24px 0px 60px; }
.twk-panel { --twk-secondary: var(--content-muted); background: rgba(10, 14, 15, 0.9) !important; color: var(--content-strong) !important; border-color: var(--rule-strong) !important; box-shadow: rgba(0, 0, 0, 0.38) 0px 18px 44px !important; }
.twk-lbl, .twk-val, .twk-sect, .twk-x { color: var(--content-muted) !important; }
.twk-field { background: var(--surface-panel) !important; color: var(--content-strong) !important; border-color: var(--rule-subtle) !important; }
.twk-field:focus { border-color: var(--accent) !important; }
.twk-seg, .twk-choice { background: var(--surface-panel) !important; border-color: var(--rule-subtle) !important; }
.twk-choice[data-on="1"] { background: var(--accent-fill, var(--accent)) !important; color: var(--on-accent) !important; }
.hive-card { background: var(--surface-panel); border: 1px solid var(--rule-subtle); border-radius: var(--r-md); box-shadow: rgba(255, 255, 255, 0.024) 0px 1px 0px inset, rgba(0, 0, 0, 0.18) 0px 14px 34px; color: var(--content-strong); padding: 16px; }
.hive-card--tint { background: linear-gradient(rgba(47, 166, 111, 0.114), rgba(47, 166, 111, 0.043)); border-color: var(--rule-accent); }
.hive-card__header { align-items: center; display: flex; gap: 12px; justify-content: space-between; margin-bottom: 12px; }
.hive-card__title { color: var(--content-muted); font-size: 11px; font-weight: 600; letter-spacing: 0.06em; margin: 0px; text-transform: uppercase; }
.hive-button { align-items: center; border: 1px solid var(--rule-subtle); border-radius: var(--r-sm); display: inline-flex; font-weight: 600; gap: 6px; justify-content: center; letter-spacing: 0px; transition: background-color 0.12s, border-color 0.12s, color 0.12s; white-space: nowrap; }
.hive-button--sm { font-size: 11px; min-height: 26px; padding: 3px 8px; }
.hive-button--md { font-size: 12px; min-height: 32px; padding: 5px 10px; }
.hive-button--lg { font-size: 13px; min-height: 38px; padding: 7px 14px; }
.hive-button--primary { background: var(--accent-fill, var(--accent)); border-color: var(--accent-fill-hover, var(--accent)); color: var(--on-accent); }
.hive-button--primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.hive-button--secondary { background: transparent; color: var(--content); }
.hive-button--ghost { background: transparent; border-color: transparent; color: var(--content-muted); }
.hive-button--secondary:hover, .hive-button--ghost:hover { background: rgba(255, 255, 255, 0.043); border-color: var(--rule-strong); color: var(--content-strong); }
.hive-badge { align-items: center; background: rgba(255, 255, 255, 0.055); border: 1px solid transparent; border-radius: 3px; color: var(--content); display: inline-flex; font-size: 10px; font-weight: 600; gap: 4px; letter-spacing: 0.06em; padding: 1px 6px; text-transform: uppercase; white-space: nowrap; }
.hive-badge--accent { background: var(--accent-faint); border-color: var(--rule-accent); color: var(--accent); }
.hive-badge--good { background: var(--pos-soft); color: var(--pos); }
.hive-badge--warn { background: var(--warn-soft); color: var(--warn); }
.hive-badge--risk { background: var(--neg-soft); color: var(--neg); }
.hive-badge--info { background: var(--info-soft); color: var(--info); }
.hive-badge--muted { background: transparent; color: var(--content-faint); }
.hive-avatar { align-items: center; background: linear-gradient(135deg, rgba(47, 166, 111, 0.24), rgba(13, 22, 19, 0.95)); border: 1px solid rgba(47, 166, 111, 0.22); border-radius: 50%; color: var(--content-strong); display: inline-flex; flex: 0 0 auto; font-weight: 700; justify-content: center; letter-spacing: 0px; }
.hive-avatar--sm { font-size: 8px; height: 20px; width: 20px; }
.hive-avatar--md { font-size: 10px; height: 28px; width: 28px; }
.hive-avatar--lg { font-size: 16px; height: 56px; width: 56px; }
.hive-metric { display: flex; flex-direction: column; gap: 2px; }
.hive-metric__label { color: var(--content-muted); font-size: 10px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.hive-metric__value { color: var(--content-strong); font-family: var(--font-mono); font-size: 18px; font-variant-numeric: tabular-nums; font-weight: 600; letter-spacing: 0px; }
.hive-metric__context { color: var(--content-muted); font-size: 10.5px; }
.hive-metric--good .hive-metric__value { color: var(--pos); }
.hive-metric--warn .hive-metric__value { color: var(--warn); }
.hive-metric--risk .hive-metric__value { color: var(--neg); }
.hive-metric--info .hive-metric__value { color: var(--info); }
.hive-section-header { align-items: flex-end; display: flex; gap: 20px; justify-content: space-between; margin-bottom: 20px; }
.hive-section-header__eyebrow { color: var(--content-muted); font-size: 10px; font-weight: 600; letter-spacing: 0.06em; margin-bottom: 4px; text-transform: uppercase; }
.hive-section-header__title { color: var(--content-strong); font-size: 22px; font-weight: 600; letter-spacing: 0px; line-height: 1.15; margin: 0px; }
.hive-section-header__action { align-items: center; display: flex; gap: 8px; }

/* The legacy app shell wraps every route in a shadcn-style `.dark` scope whose
   token names collide with ours (`--accent` there is a dark surface tint paired
   with light text, `--border`/`--surface-raised` are green-tinted). Re-assert the
   Hive tokens at the Hive mount points so CTAs render the intended bright accent
   with a legible on-color instead of dark-on-dark. */
.app, .hive-auth-root {
  --accent: var(--action-primary);
  --accent-hover: var(--action-primary-hover);
  --accent-soft: var(--action-primary-subtle);
  --accent-faint: var(--action-primary-faint);
  /* Filled CTAs use the real Niner green with white text; the lighter
     --accent stays for text/icons where deep green would vanish on carbon. */
  --accent-fill: var(--action-fill);
  --accent-fill-hover: var(--action-fill-hover);
  --on-accent: var(--action-on-fill);
  --border: var(--rule-subtle);
  --border-strong: var(--rule-strong);
  --surface-raised: var(--hive-carbon-900);
}