/* Marketing OS design system (2026-09-23). Loaded after styles.css.
   Tokens first, then components. Every screen inherits these; the older styles.css keeps
   layout, and this layer owns color, type, depth, motion and interaction states.
   Contrast (WCAG AA, on white unless noted): ink 15.8:1, ink-2 7.6:1, muted 4.8:1,
   primary text 4.6:1, white-on-primary 4.6:1, sidebar labels on navy 6.9:1. */

:root {
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --ink: #0f172a;
  --ink-2: #334155;
  --muted: #64748b;
  --line: #e4e7ec;
  --line-2: #d0d5dd;
  --bg: #f4f6fa;
  --surface: #ffffff;
  --surface-2: #f8fafc;
  --primary: #2f6fed;
  --primary-hover: #2459d4;
  --primary-press: #1e4bb5;
  --primary-soft: #eef4ff;
  --primary-ring: rgba(47, 111, 237, .22);
  --good: #15803d; --good-soft: #dcfce7;
  --warn: #b45309; --warn-soft: #fef3c7;
  --bad: #b91c1c; --bad-soft: #fee2e2;
  --nav: #0b1220;
  --nav-2: #16213a;
  --nav-ink: #cbd5e1;
  --nav-label: #94a3b8;
  --radius: 14px;
  --radius-sm: 10px;
  --shadow-1: 0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .06);
  --shadow-2: 0 4px 10px rgba(16, 24, 40, .06), 0 12px 28px rgba(16, 24, 40, .08);
  --shadow-primary: 0 6px 16px rgba(47, 111, 237, .28);
  --ease: cubic-bezier(.2, .7, .2, 1);
}

/* ---------- Base ---------- */
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body { font-family: var(--font); background: var(--bg); color: var(--ink); font-size: 15px; }
h1 { font-size: 28px; font-weight: 750; letter-spacing: -.02em; color: var(--ink); }
h2 { font-weight: 700; letter-spacing: -.01em; color: var(--ink); }
.subtitle { color: var(--muted); font-size: 15px; }
a { color: var(--primary); text-underline-offset: 2px; }
a:hover { color: var(--primary-hover); }
::selection { background: rgba(47, 111, 237, .18); }
.main { max-width: 1080px; }
.hint, .tb-muted { color: var(--muted); }
code { background: var(--surface-2); border: 1px solid var(--line); border-radius: 6px; padding: 1px 6px; font-size: .9em; }

/* ---------- Sidebar ---------- */
.sidebar { background: var(--nav); color: var(--nav-ink); padding: 18px 10px; border-right: 1px solid #0f1a30; }
.sidebar .brand { font-size: 17px; letter-spacing: -.01em; padding: 4px 12px 18px; border-bottom: 1px solid #1c2740; margin-bottom: 10px; }
.sidebar .brand::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 9px;
  background: linear-gradient(135deg, #60a5fa, #2f6fed 60%, #7c3aed); vertical-align: 1px; box-shadow: 0 0 12px rgba(96, 165, 250, .6); }
.sidebar .nav-item { color: var(--nav-ink); border-radius: 8px; margin: 1px 0; padding: 8px 12px; font-size: 14px;
  transition: background .15s var(--ease), color .15s var(--ease), transform .15s var(--ease); }
.sidebar .nav-item:hover { background: var(--nav-2); color: #fff; transform: translateX(2px); }
.sidebar .nav-item.active { background: var(--primary); color: #fff; box-shadow: 0 4px 14px rgba(47, 111, 237, .35); transform: none; }
.sidebar .category-label { color: var(--nav-label); font-size: 11px; letter-spacing: .08em; padding: 16px 12px 6px; }
.sidebar .category-label.sub { color: #7c8aa3; padding-top: 10px; }
.sidebar .dashboard-link { font-weight: 600; }

/* ---------- Cards ---------- */
.form-card, .results-card, .placeholder-card, .tb-kpi, .tb-trend-card, .tb-market-card, .tb-lp-card, .tb-studio-card, .tool-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-1);
}
.tool-card { transition: transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease); }
.tool-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); border-color: #c7d7fb; }
.tb-market-card, .tb-lp-card, .tb-trend-card, .tb-studio-card { transition: transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease); }
.tb-market-card:hover, .tb-lp-card:hover, .tb-trend-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
.tb-callout, .tb-cta { border-radius: var(--radius); }
.tb-cta { transition: background .15s var(--ease), transform .15s var(--ease), box-shadow .15s var(--ease); }
.tb-cta:hover { transform: translateY(-1px); box-shadow: var(--shadow-2); }

/* ---------- Buttons ---------- */
.btn { font-family: var(--font); border-radius: var(--radius-sm); font-weight: 600; letter-spacing: -.005em; background: var(--primary);
  transition: background .15s var(--ease), box-shadow .15s var(--ease), transform .08s var(--ease), border-color .15s var(--ease), color .15s var(--ease);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .08); }
.btn:hover:not(:disabled) { background: var(--primary-hover); box-shadow: var(--shadow-primary); transform: translateY(-1px); }
.btn:active:not(:disabled) { background: var(--primary-press); transform: translateY(0) scale(.98); box-shadow: 0 1px 2px rgba(16, 24, 40, .1); }
.btn:focus-visible, .tab:focus-visible, .nav-item:focus-visible, .tb-seg button:focus-visible, a:focus-visible {
  outline: none; box-shadow: 0 0 0 4px var(--primary-ring); }
.btn:disabled { background: #a7b3c7; box-shadow: none; cursor: not-allowed; opacity: .75; }
.btn-small { border-radius: 8px; }
.btn-secondary { background: var(--surface); color: var(--primary); border: 1px solid #c7d7fb; }
.btn-secondary:hover:not(:disabled) { background: var(--primary-soft); border-color: var(--primary); box-shadow: 0 4px 12px rgba(47, 111, 237, .14); }
.btn-secondary:active:not(:disabled) { background: #e2ebff; }
.btn-danger { background: var(--surface); color: var(--bad); border: 1px solid #fecaca; }
.btn-danger:hover:not(:disabled) { background: #fff5f5; border-color: var(--bad); box-shadow: 0 4px 12px rgba(185, 28, 28, .14); }
.btn-danger:active:not(:disabled) { background: var(--bad-soft); }
.btn-secondary:disabled, .btn-danger:disabled { background: var(--surface-2); color: #94a3b8; border-color: var(--line); }
.btn.is-busy { cursor: progress; }

/* Segmented controls (date ranges, chart metrics, strategy) */
.tb-seg { border-color: var(--line-2); border-radius: var(--radius-sm); background: var(--surface); box-shadow: var(--shadow-1); }
.tb-seg button { transition: background .15s var(--ease), color .15s var(--ease); color: var(--ink-2); }
.tb-seg button:hover:not(.active) { background: var(--primary-soft); color: var(--primary); }
.tb-seg button.active { background: var(--primary); color: #fff; }
.main.tb-wide .tb-rangebar > .btn-small { transition: background .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease); }
.main.tb-wide .tb-rangebar > .btn-small.btn-secondary:hover { background: var(--primary-soft); color: var(--primary); transform: none; box-shadow: none; }

/* ---------- Tabs ---------- */
.tab-row { border-bottom: 1px solid var(--line); }
.tab { color: var(--muted); border-bottom-width: 3px; transition: color .15s var(--ease), border-color .15s var(--ease), background .15s var(--ease); border-radius: 8px 8px 0 0; }
.tab:hover { color: var(--ink); border-bottom-color: var(--line-2); background: rgba(47, 111, 237, .04); }
.tab.active { color: var(--primary); border-bottom-color: var(--primary); }

/* ---------- Forms ---------- */
.field label { color: var(--ink-2); }
.field input[type="text"], .field input[type="password"], .field textarea, .field select, .tb-select,
.tb-toolbar input[type="text"], .tb-range-custom input[type="date"], .modal input {
  font-family: var(--font); color: var(--ink); background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--radius-sm);
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease); }
.field input:hover, .field textarea:hover, .field select:hover, .tb-select:hover, .tb-toolbar input[type="text"]:hover { border-color: #aeb7c6; }
.field input:focus, .field textarea:focus, .field select:focus, .tb-select:focus, .tb-toolbar input:focus, .tb-range-custom input:focus, .modal input:focus {
  outline: none; border-color: var(--primary); box-shadow: 0 0 0 4px var(--primary-ring); }
input[type="checkbox"] { accent-color: var(--primary); width: 16px; height: 16px; cursor: pointer; }
.tb-toggle span { transition: background .2s var(--ease); }
.tb-chip { transition: border-color .15s var(--ease), background .15s var(--ease); }
.tb-chip:hover { border-color: var(--primary); }

/* ---------- Tables ---------- */
.tb-table th { color: var(--muted); font-weight: 650; letter-spacing: .05em; background: var(--surface); position: sticky; top: 0; z-index: 1; }
.tb-table td { border-bottom-color: #eef1f5; }
.tb-table tbody tr { transition: background .12s var(--ease); }
.tb-table tbody tr:hover { background: var(--surface-2); }
.tb-clickable:hover { background: var(--primary-soft) !important; cursor: pointer; }

/* ---------- Badges, chips, KPI ---------- */
.badge, .tb-trend, .tb-verdict, .tb-strat { border-radius: 999px; font-weight: 650; }
.badge { padding: 3px 10px; font-size: 11px; letter-spacing: .02em; }
.tb-kpi-btn { transition: transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease); }
.tb-kpi-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); border-color: #c7d7fb; }
.tb-kpi-active { border-color: var(--primary); box-shadow: 0 0 0 4px var(--primary-ring), var(--shadow-1); }
.tb-kpis-lg .tb-kpi-value { font-weight: 750; letter-spacing: -.02em; }
.tb-good { color: var(--good); } .tb-warn { color: var(--warn); } .tb-bad { color: var(--bad); }
.tb-notice-inline { border-radius: var(--radius-sm); }
.error-box { border-radius: var(--radius-sm); background: #fff5f5; border-color: #fecaca; color: var(--bad); }

/* ---------- Loading: top progress bar, spinners, shimmer ---------- */
#top-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 3000; pointer-events: none; opacity: 0; transition: opacity .25s var(--ease); overflow: hidden; }
#top-progress.active { opacity: 1; }
#top-progress::before { content: ""; position: absolute; top: 0; left: -40%; width: 40%; height: 100%;
  background: linear-gradient(90deg, transparent, #60a5fa, var(--primary), #7c3aed, transparent); animation: progress-slide 1.1s var(--ease) infinite; }
@keyframes progress-slide { to { left: 100%; } }
.loading { color: var(--muted); display: flex; align-items: center; gap: 10px; padding: 18px 4px; font-size: 15px; }
.loading::before { content: ""; width: 18px; height: 18px; flex: 0 0 18px; border: 2.5px solid #cfd8ea; border-top-color: var(--primary); border-radius: 50%; animation: spin .75s linear infinite; }
#tb-content > .loading, #tb-content > p.loading { min-height: 220px; justify-content: center; border: 1px dashed var(--line-2); border-radius: var(--radius);
  background: linear-gradient(100deg, var(--surface) 30%, var(--surface-2) 45%, var(--surface) 60%) 0 0 / 300% 100%; animation: shimmer 1.6s linear infinite; }
@keyframes shimmer { to { background-position: -150% 0; } }
.spinner { border-width: 2px; }

/* ---------- Toasts & modal ---------- */
.toast { background: #0f172a; border-radius: 12px; padding: 13px 16px 13px 44px; position: relative; font-weight: 500; }
.toast::before { content: "✓"; position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; border-radius: 50%;
  background: #22c55e; color: #fff; font-size: 12px; font-weight: 800; display: grid; place-items: center; }
.toast-error { background: #7f1d1d; }
.toast-error::before { content: "!"; background: #f87171; }
.modal { border-radius: 18px; animation: modal-in .2s var(--ease); }
@keyframes modal-in { from { opacity: 0; transform: translateY(8px) scale(.98); } }

/* ---------- Scrollbars ---------- */
.tb-scroll::-webkit-scrollbar, .tab-row::-webkit-scrollbar, .tb-ref-strip::-webkit-scrollbar { height: 8px; }
.tb-scroll::-webkit-scrollbar-thumb, .tab-row::-webkit-scrollbar-thumb, .tb-ref-strip::-webkit-scrollbar-thumb { background: #cfd6e2; border-radius: 99px; }

/* ---------- Motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ---------- Date range bar (v2) + segmented overflow ---------- */
.tb-rangebar2 { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 0 0 24px; }
.tb-range-custom2 { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tb-range-custom2 input[type="date"] { font-family: var(--font); font-size: 14px; padding: 8px 10px; border: 1px solid var(--line-2); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); }
.tb-range-custom2 input[type="date"]:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 4px var(--primary-ring); }
.tb-refresh-btn { margin-left: auto; }
.tb-seg { display: inline-flex; flex-wrap: nowrap; overflow-x: auto; max-width: 100%; scrollbar-width: none; }
.tb-seg::-webkit-scrollbar { display: none; }
.tb-seg button { white-space: nowrap; flex: 0 0 auto; }
.main.tb-wide .tb-rangebar2 .btn-small { margin-left: 0; }
@media (max-width: 900px) { .tb-refresh-btn { margin-left: 0; } }
/* Toolbar inputs: grow to fill, never overflow a narrow card (overrides inline min-widths). */
.tb-toolbar { flex-wrap: wrap; }
.tb-toolbar input[type="text"] { flex: 1 1 260px; min-width: 0 !important; max-width: 100%; }

/* ---------- KPI mini charts ---------- */
.tb-kpi-btn { display: flex; flex-direction: column; }
.tb-kc { margin-top: auto; padding-top: 24px; }
.tb-kc-empty { font-size: 12px; padding-top: 18px; }
.tb-kc-plot { position: relative; height: 64px; background: linear-gradient(180deg, var(--surface-2), transparent); border-radius: 6px; }
.tb-kc-plot svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.tb-kc-grid { stroke: #e9edf3; stroke-width: 1; }
.tb-kc-base { stroke: #cfd6e2; stroke-width: 1; }
.tb-kc-ref { stroke-width: 1.25; stroke-dasharray: 4 3; }
.tb-kc-goal { stroke: var(--good); color: var(--good); }
.tb-kc-max { stroke: var(--bad); color: var(--bad); }
.tb-kc-area { fill: rgba(47, 111, 237, .10); }
.tb-kc-line { fill: none; stroke: var(--primary); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.tb-kc-dot { position: absolute; width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 0 1.5px var(--surface); pointer-events: none; }
.tb-kc-scale { position: absolute; left: 0; top: -14px; font-size: 10.5px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.tb-kc-reftag { position: absolute; right: 0; transform: translateY(-100%); font-size: 10px; font-weight: 700; line-height: 1.3; background: var(--surface); padding: 0 3px; border-radius: 3px; }
.tb-kc-dates { display: flex; justify-content: space-between; margin-top: 5px; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.tb-kc-col { position: absolute; top: -4px; bottom: -4px; }
.tb-kc-col:hover { background: rgba(47, 111, 237, .07); }
.tb-kc-tip { display: none; position: absolute; bottom: calc(100% + 6px); left: 50%; white-space: nowrap; font-size: 12px; background: var(--ink); color: #fff; padding: 5px 8px; border-radius: 6px; box-shadow: var(--shadow-2); z-index: 5; pointer-events: none; }
.tb-kc-tip-l { left: auto; right: 50%; }
.tb-kc-col:hover .tb-kc-tip { display: block; }
.tb-kc-tip strong { font-weight: 700; margin-right: 4px; }
.tb-kc-reftag.tb-kc-goal { transform: none; }  /* goal sits below its line, max above, so they never overlap */
.tb-kc-reftag { z-index: 2; }