/* ============================================================
   .stats.shock — dashboard + chart styling
   Loads AFTER shock.css + suite-app.css. Reuses the shared app
   shell; adds only what the analytics dashboard needs (KPI
   cards, hand-drawn SVG charts, tables, insights feed).
   Spec: dotshock-ai-spec/modules/10-stats-shock.md
   ============================================================ */

/* the dashboard scroll area lays panels out in a responsive grid */
.st-dash { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
.st-dash .st-span2 { grid-column: 1 / -1; }
@media (max-width: 1180px) { .st-dash { grid-template-columns: 1fr; } .st-dash .st-span2 { grid-column: auto; } }

/* ---------- generic panel ---------- */
.st-panel {
  background: var(--app-surface);
  border: 1px solid var(--app-line);
  border-radius: 8px;
  padding: 16px;
  min-width: 0;
}
.st-panel__head {
  display: flex; align-items: center; gap: 10px; margin-bottom: 14px;
}
.st-panel__head h2 { font-size: 14px; font-weight: 700; margin: 0; letter-spacing: -0.01em; }
.st-panel__head .sub { color: var(--faint); font-size: 12px; font-family: var(--font-mono); }
.st-panel__head .st-spacer { flex: 1 1 auto; }
.st-seg { display: inline-flex; gap: 2px; background: var(--app-bg); border: 1px solid var(--app-line); border-radius: var(--radius); padding: 2px; }
.st-seg button {
  border: none; background: none; color: var(--dim); font: inherit; font-size: 11px; font-weight: 600;
  padding: 3px 9px; border-radius: 3px; font-family: var(--font-mono);
}
.st-seg button:hover { color: var(--text); }
.st-seg button.is-active { background: var(--app-surface2); color: var(--text); }

/* ---------- KPI strip ---------- */
.st-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}
.st-kpi {
  background: var(--app-surface);
  border: 1px solid var(--app-line);
  border-radius: 8px;
  padding: 14px 16px;
}
.st-kpi__label { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--faint); margin-bottom: 8px; }
.st-kpi__value { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 26px; font-weight: 600; line-height: 1; letter-spacing: -0.02em; }
.st-kpi__value.is-hero { font-size: 34px; }
.st-kpi__delta { font-family: var(--font-mono); font-size: 12px; margin-top: 8px; color: var(--dim); }
.st-kpi__delta.up { color: var(--pick); }
.st-kpi__delta.down { color: var(--danger-strong); }

/* ---------- charts (hand-drawn SVG) ---------- */
.st-chart { width: 100%; display: block; overflow: visible; }
.st-chart text { font-family: var(--font-mono); fill: var(--faint); }
.st-chart .axis-line { stroke: var(--app-line); stroke-width: 1; }
.st-chart .grid-line { stroke: var(--app-line); stroke-width: 1; stroke-dasharray: 2 4; opacity: .6; }
.st-bar { transition: opacity .12s; cursor: default; }
.st-bar:hover { opacity: .82; }
.st-dot { cursor: default; }
.st-line { fill: none; stroke-width: 2; }
.st-area { opacity: .12; }

/* legend (shared by stacked charts + donut) */
.st-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 12px; }
.st-legend__item { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--dim); }
.st-legend__sw { width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; }
.st-legend__val { font-family: var(--font-mono); color: var(--text); margin-left: 2px; }

/* donut center label */
.st-donut-wrap { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.st-donut-center { text-anchor: middle; }
.st-donut-center .big { font-family: var(--font-mono); font-weight: 600; fill: var(--text); }
.st-donut-center .small { fill: var(--faint); }

/* tooltip for charts */
.st-tip {
  position: fixed; z-index: 95; pointer-events: none;
  background: var(--app-surface2); border: 1px solid var(--line2);
  border-radius: 5px; padding: 7px 10px; font-size: 12px; color: var(--text);
  box-shadow: 0 8px 24px rgba(0,0,0,.5); white-space: nowrap;
  font-family: var(--font-mono); transform: translate(-50%, -120%);
  opacity: 0; transition: opacity .1s;
}
.st-tip.is-on { opacity: 1; }
.st-tip b { color: var(--text); }
.st-tip .muted { color: var(--dim); }

/* ---------- data tables ---------- */
.st-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.st-table th {
  text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--faint); font-weight: 600; padding: 6px 10px; border-bottom: 1px solid var(--app-line);
  white-space: nowrap;
}
.st-table th.num, .st-table td.num { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.st-table td { padding: 8px 10px; border-bottom: 1px solid var(--app-line); color: var(--text); }
.st-table tr:last-child td { border-bottom: none; }
.st-table tbody tr:hover { background: var(--app-surface2); }
.st-table tbody tr.is-selected { background: rgba(74,143,255,.08); outline: 1px solid rgba(74,143,255,.3); outline-offset: -1px; }
.st-table .rank { color: var(--faint); font-family: var(--font-mono); width: 1%; }
.st-table .thumb-cell { width: 1%; }
.st-table .thumb-cell img { width: 44px; height: 30px; object-fit: cover; border-radius: 3px; display: block; border: 1px solid var(--app-line); }
.st-table .fname { max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-table .bar-cell { width: 120px; }
.st-mini-bar { height: 6px; background: var(--app-surface2); border-radius: 3px; overflow: hidden; }
.st-mini-bar > span { display: block; height: 100%; border-radius: 3px; }

/* agency dot used inline */
.st-agdot { width: 9px; height: 9px; border-radius: 2px; display: inline-block; margin-right: 6px; vertical-align: middle; }

/* license badge */
.st-lic { font-family: var(--font-mono); font-size: 11px; padding: 1px 6px; border-radius: 3px; background: var(--app-surface2); border: 1px solid var(--app-line); color: var(--dim); white-space: nowrap; }

/* ---------- insights feed ---------- */
.st-insights { display: flex; flex-direction: column; gap: 10px; }
.st-insight {
  background: var(--app-surface2); border: 1px solid var(--app-line);
  border-left: 3px solid var(--info); border-radius: 6px; padding: 11px 13px;
}
.st-insight.k-gap { border-left-color: var(--pick); }
.st-insight.k-best { border-left-color: var(--yellow); }
.st-insight.k-decline { border-left-color: var(--danger); }
.st-insight.k-mix { border-left-color: var(--info); }
.st-insight.k-season { border-left-color: #a855f7; }
.st-insight__top { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.st-insight__kind { font-size: 10px; text-transform: uppercase; letter-spacing: .1em; color: var(--faint); font-weight: 700; }
.st-insight__conf { margin-left: auto; font-family: var(--font-mono); font-size: 11px; color: var(--dim); }
.st-insight__title { font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 3px; }
.st-insight__body { font-size: 12px; color: var(--dim); line-height: 1.45; }
.st-insight__body b { color: var(--text); }
.st-insight__cta { margin-top: 9px; }

/* ---------- seasonality heatmap ---------- */
.st-heat { display: grid; grid-auto-flow: column; gap: 3px; overflow-x: auto; padding-bottom: 4px; }
.st-heat__col { display: grid; grid-template-rows: auto repeat(1, 1fr); gap: 3px; }
.st-heat__cell { width: 26px; height: 26px; border-radius: 3px; background: var(--app-surface2); }
.st-heat__lbl { font-family: var(--font-mono); font-size: 9px; color: var(--faint); text-align: center; height: 12px; }

/* ---------- seasonal index chart ---------- */
.st-seidx { display: flex; gap: 6px; align-items: flex-end; overflow-x: auto; padding-bottom: 4px; min-height: 110px; }
.st-seidx__col { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 28px; }
.st-seidx__col.is-now .st-seidx__lbl { color: var(--accent, #7b5cfa); font-weight: 700; }
.st-seidx__idx { font-family: var(--font-mono); font-size: 9px; color: var(--faint); min-height: 12px; }
.st-seidx__bar-wrap { width: 22px; height: 72px; display: flex; align-items: flex-end; }
.st-seidx__bar { width: 100%; border-radius: 3px 3px 0 0; min-height: 2px; background: var(--app-surface2); }
.st-seidx__lbl { font-family: var(--font-mono); font-size: 9px; color: var(--faint); }

/* ---------- empty / banners ---------- */
.st-banner {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px; margin-bottom: 14px;
  background: rgba(74,143,255,.08); border: 1px solid rgba(74,143,255,.3); border-radius: 6px;
  font-size: 13px; color: var(--text);
}
.st-banner .app-mono { color: var(--info); }
.st-banner__spacer { flex: 1 1 auto; }

/* rail: agency filter swatch + range labels */
.app-rail__sub { font-size: 11px; color: var(--faint); font-family: var(--font-mono); padding: 0 10px 8px; }
.st-range-row { padding: 4px 10px 0; }
.st-range-row label { display: block; font-size: 12px; color: var(--dim); margin-bottom: 4px; }
.st-range-row input[type="date"] {
  width: 100%; background: var(--app-bg); border: 1px solid var(--app-line); color: var(--text);
  border-radius: var(--radius); padding: 6px 8px; font: inherit; font-size: 12px; font-family: var(--font-mono);
}
.st-range-row input[type="date"]:focus { outline: none; border-color: var(--red); }
.st-rail-actions { padding: 8px 10px 0; display: flex; gap: 6px; }

/* currency toggle in toolbar */
.st-cur { display: inline-flex; align-items: center; gap: 6px; }
.st-cur select {
  background: var(--app-bg); border: 1px solid var(--app-line); color: var(--text);
  border-radius: var(--radius); padding: 4px 8px; font: inherit; font-size: 12px; font-family: var(--font-mono);
}

/* ---------- smart search + period picker (toolbar) ---------- */
.st-searchwrap { display: inline-flex; align-items: center; gap: 8px; flex: 1 1 auto; min-width: 0; max-width: 520px; flex-wrap: wrap; }
.st-search {
  flex: 1 1 220px; min-width: 160px; background: var(--app-bg); border: 1px solid var(--app-line); color: var(--text);
  border-radius: var(--radius); padding: 5px 10px; font: inherit; font-size: 12px;
}
.st-search:focus { outline: none; border-color: var(--red); }
.st-search::placeholder { color: var(--faint); }
.st-qchips { display: inline-flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.st-qchip {
  font-family: var(--font-mono); font-size: 11px; color: var(--info);
  background: rgba(74,143,255,.1); border: 1px solid rgba(74,143,255,.3); border-radius: 20px; padding: 1px 8px;
}
.st-qclear {
  border: none; background: var(--app-surface2); color: var(--dim); width: 18px; height: 18px; border-radius: 50%;
  cursor: pointer; font-size: 13px; line-height: 1; padding: 0;
}
.st-qclear:hover { color: var(--text); background: var(--app-line); }
.st-period {
  background: var(--app-bg); border: 1px solid var(--app-line); color: var(--text);
  border-radius: var(--radius); padding: 4px 8px; font: inherit; font-size: 12px; font-family: var(--font-mono);
}

/* ---------- monthly goal panel ---------- */
.st-goal .st-goal-bar {
  position: relative; height: 12px; background: var(--app-surface2); border-radius: 6px; overflow: hidden; margin: 4px 0 10px;
}
.st-goal .st-goal-bar > span { display: block; height: 100%; background: linear-gradient(90deg, var(--info), var(--pick)); border-radius: 6px; transition: width .3s; }
.st-goal .st-goal-bar > i {
  position: absolute; top: -3px; width: 2px; height: 18px; background: var(--text); opacity: .7;
}
.st-goal-meta { font-size: 12px; color: var(--dim); }
.st-goal-meta b { color: var(--text); font-family: var(--font-mono); }

/* ---------- health line ---------- */
.st-health { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-bottom: 14px; padding: 9px 14px;
  background: var(--app-surface); border: 1px solid var(--app-line); border-radius: 6px; font-size: 12px; color: var(--dim); }
.st-health__item b { color: var(--text); }

/* ---------- sortable table headers ---------- */
.st-table th.st-sortable { cursor: pointer; user-select: none; white-space: nowrap; }
.st-table th.st-sortable:hover { color: var(--text); }

/* ---------- monthly report (deterministic + AI) ---------- */
.st-report { border-left: 3px solid var(--info); }
.st-report__text { font-size: 14px; line-height: 1.6; color: var(--text); margin: 0 0 12px; }
.st-report__ai { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-top: 10px; border-top: 1px solid var(--app-line); }
.st-report__ai input {
  flex: 1 1 220px; min-width: 160px; background: var(--app-bg); border: 1px solid var(--app-line); color: var(--text);
  border-radius: var(--radius); padding: 6px 9px; font: inherit; font-size: 12px; font-family: var(--font-mono);
}
.st-report__ai input:focus { outline: none; border-color: var(--red); }
.st-report__ai select {
  background: var(--app-bg); border: 1px solid var(--app-line); color: var(--text);
  border-radius: var(--radius); padding: 5px 8px; font: inherit; font-size: 12px;
}
.st-report__note { flex: 1 1 100%; font-size: 11px; color: var(--faint); line-height: 1.4; }

/* ---------- saved views (rail) ---------- */
.st-seg-save { display: flex; gap: 6px; padding: 0 10px 6px; }
.st-seg-save input {
  flex: 1 1 auto; min-width: 0; background: var(--app-bg); border: 1px solid var(--app-line); color: var(--text);
  border-radius: var(--radius); padding: 5px 8px; font: inherit; font-size: 12px;
}
.st-seg-save input:focus { outline: none; border-color: var(--red); }
.st-seg-item { display: flex; align-items: center; gap: 4px; padding: 1px 10px; }
.st-seg-recall {
  flex: 1 1 auto; text-align: left; border: none; background: none; color: var(--dim); font: inherit; font-size: 12px;
  padding: 4px 6px; border-radius: 4px; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.st-seg-recall:hover { background: var(--app-surface2); color: var(--text); }
.st-seg-del {
  border: none; background: none; color: var(--faint); cursor: pointer; font-size: 14px; line-height: 1; padding: 2px 5px; border-radius: 4px;
}
.st-seg-del:hover { color: var(--danger-strong); background: var(--app-surface2); }

/* ============================================================
   Portfolios / Accounts / Connectivity (stats-portfolios.js)
   ============================================================ */
.sp-lead { font-size: 13px; color: var(--dim); line-height: 1.55; margin: 0; }
.sp-lead b { color: var(--text); }
.sp-note { font-size: 11.5px; color: var(--faint); line-height: 1.5; margin: 10px 0 0; }
.sp-note--warn { color: var(--danger-strong); opacity: .92; }
.sp-mhint--warn, .sp-note--warn b { color: var(--danger-strong); }

/* fields */
.sp-field { margin-bottom: 10px; min-width: 0; flex: 1 1 0; }
.sp-field label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--faint); margin-bottom: 5px; }
.sp-field .sp-opt { text-transform: none; letter-spacing: 0; color: var(--faint); opacity: .7; }
.sp-field input, .sp-addurl input {
  width: 100%; background: var(--app-bg); border: 1px solid var(--app-line); color: var(--text);
  border-radius: var(--radius); padding: 7px 9px; font: inherit; font-size: 13px;
}
.sp-field input:focus, .sp-addurl input:focus { outline: none; border-color: var(--red); }
.sp-field-row { display: flex; gap: 10px; }
.sp-actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 12px; }
.sp-addurl { display: flex; gap: 6px; }
.sp-addurl input { flex: 1 1 auto; }

/* shared dot + chip */
.sp-dot { width: 9px; height: 9px; border-radius: 2px; display: inline-block; flex-shrink: 0; }
.sp-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--dim);
  background: var(--app-surface2); border: 1px solid var(--app-line); border-radius: 20px; padding: 3px 9px; }
.sp-approx { color: var(--yellow); font-weight: 700; cursor: help; }
.sp-muted { color: var(--faint); font-size: 12px; }

/* badges + confidence */
.sp-badge { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: .06em;
  padding: 1px 6px; border-radius: 3px; background: var(--app-surface2); border: 1px solid var(--app-line); color: var(--faint); }
.sp-badge--ok { color: var(--pick); border-color: rgba(63,185,80,.4); }
.sp-badge--warn { color: var(--yellow); border-color: rgba(210,153,34,.4); }
.sp-conf { font-family: var(--font-mono); font-size: 11px; padding: 1px 5px; border-radius: 3px; margin-left: auto; }
.sp-conf--ok { color: var(--pick); background: rgba(63,185,80,.12); }
.sp-conf--warn { color: var(--yellow); background: rgba(210,153,34,.12); }
.sp-conf--low { color: var(--danger-strong); background: rgba(248,81,73,.12); }

/* connector status rows */
.sp-conn { display: flex; align-items: center; gap: 9px; padding: 9px 0; border-bottom: 1px solid var(--app-line); font-size: 13px; }
.sp-conn:last-of-type { border-bottom: none; }
.sp-conn__dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.sp-conn__dot--ok { background: var(--pick); box-shadow: 0 0 6px rgba(63,185,80,.6); }
.sp-conn__dot--off { background: var(--danger); }
.sp-conn__dot--muted { background: var(--faint); animation: sp-pulse 1s ease-in-out infinite; }
@keyframes sp-pulse { 0%,100% { opacity: .35; } 50% { opacity: 1; } }
.sp-conn__name { color: var(--text); font-weight: 600; }
.sp-conn__state { color: var(--dim); font-size: 12px; }
.sp-conn .ab { margin-left: auto; }

/* candidates */
.sp-cand-list { display: flex; flex-direction: column; gap: 6px; }
.sp-cand { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: var(--app-surface2);
  border: 1px solid var(--app-line); border-radius: 6px; font-size: 13px; flex-wrap: wrap; }
.sp-cand__ag { font-weight: 600; color: var(--text); min-width: 110px; }
.sp-cand__url { color: var(--info); font-family: var(--font-mono); font-size: 12px; text-decoration: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 320px; }
.sp-cand__url:hover { text-decoration: underline; }
.sp-cand__acts { display: inline-flex; gap: 5px; margin-left: auto; }

/* configured portfolio cards */
.sp-acct-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.sp-acct { background: var(--app-surface2); border: 1px solid var(--app-line); border-radius: 8px; padding: 12px 13px; }
.sp-acct.is-risky { border-color: rgba(248,81,73,.45); }
.sp-acct__head { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; }
.sp-acct__name { font-weight: 700; font-size: 13px; color: var(--text); }
.sp-acct__id { font-size: 12px; color: var(--dim); margin-bottom: 4px; }
.sp-acct__id b { color: var(--text); font-family: var(--font-mono); }
.sp-src { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--faint);
  background: var(--app-bg); border: 1px solid var(--app-line); border-radius: 3px; padding: 0 5px; margin-left: 4px; }
.sp-acct__url { display: block; color: var(--info); font-family: var(--font-mono); font-size: 11.5px;
  text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-bottom: 9px; }
.sp-acct__url:hover { text-decoration: underline; }
.sp-acct__foot { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.sp-acct__spacer { flex: 1 1 auto; }
.sp-mlabel { font-size: 11px; color: var(--faint); }
.sp-method { background: var(--app-bg); border: 1px solid var(--app-line); color: var(--text);
  border-radius: var(--radius); padding: 3px 6px; font: inherit; font-size: 11px; font-family: var(--font-mono); }
.sp-mhint { font-size: 11px; color: var(--faint); margin-top: 8px; line-height: 1.4; }
.sp-csvpath { font-size: 11px; color: var(--dim); font-family: var(--font-mono); margin-top: 5px; }
.sp-empty { color: var(--faint); font-size: 13px; padding: 8px 0; }

/* coverage */
.sp-cov-row { display: flex; gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--app-line); font-size: 13px; align-items: baseline; flex-wrap: wrap; }
.sp-cov-row:last-child { border-bottom: none; }
.sp-cov-k { color: var(--dim); min-width: 230px; flex-shrink: 0; }
.sp-cov-v { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.sp-cov-row--warn .sp-cov-k { color: var(--yellow); }
.sp-cov-row--ok .sp-cov-k { color: var(--pick); }

/* ============================================================
   Sales row edit button
   ============================================================ */
.st-row-edit {
  border: none; background: none; color: var(--faint); cursor: pointer;
  font-size: 15px; padding: 2px 6px; border-radius: 4px; line-height: 1;
}
.st-row-edit:hover { color: var(--text); background: var(--app-surface2); }
.st-table tbody tr:hover .st-row-edit { color: var(--dim); }

/* ============================================================
   Sale edit dialog fields
   ============================================================ */
.se-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; margin-bottom: 16px;
}
.se-span2 { grid-column: 1 / -1; }
.se-field label {
  display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--faint); font-weight: 600; margin-bottom: 5px;
}
.se-hint { text-transform: none; letter-spacing: 0; font-weight: 400; opacity: .7; }
.se-field input, .se-field select {
  width: 100%; background: var(--app-bg); border: 1px solid var(--app-line); color: var(--text);
  border-radius: var(--radius); padding: 7px 9px; font: inherit; font-size: 13px; box-sizing: border-box;
}
.se-field input:focus, .se-field select:focus { outline: none; border-color: var(--red); }
.se-ro { font-size: 13px; color: var(--dim); font-family: var(--font-mono); }
.se-del-btn { color: var(--danger-strong) !important; }
.se-del-btn:hover { background: rgba(239,68,68,.1) !important; }

/* ============================================================
   Command palette (Ctrl-K)
   ============================================================ */
.st-cmd-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(0,0,0,.55); backdrop-filter: blur(4px);
  display: none; align-items: flex-start; justify-content: center; padding-top: 100px;
}
.st-cmd-overlay.is-open { display: flex; }
.st-cmd-panel {
  width: 100%; max-width: 540px; background: var(--app-surface);
  border: 1px solid var(--line2); border-radius: 10px;
  box-shadow: 0 24px 64px rgba(0,0,0,.6); overflow: hidden;
}
.st-cmd-search {
  display: flex; align-items: center; gap: 10px; padding: 14px 16px;
  border-bottom: 1px solid var(--app-line);
}
.st-cmd-search input {
  flex: 1 1 auto; border: none; background: none; color: var(--text);
  font: inherit; font-size: 15px; outline: none;
}
.st-cmd-search input::placeholder { color: var(--faint); }
.st-cmd-esc {
  border: 1px solid var(--app-line); background: var(--app-surface2);
  color: var(--faint); font: inherit; font-size: 11px; border-radius: 4px;
  padding: 2px 7px; white-space: nowrap; cursor: default;
}
.st-cmd-list {
  max-height: 360px; overflow-y: auto; padding: 6px 0;
}
.cmd-group {
  font-size: 10px; text-transform: uppercase; letter-spacing: .1em;
  color: var(--faint); font-weight: 700; padding: 10px 16px 4px;
}
.cmd-item {
  display: block; width: 100%; text-align: left; border: none; background: none;
  color: var(--text); font: inherit; font-size: 13px; padding: 9px 16px;
  cursor: pointer; border-radius: 0;
}
.cmd-item:hover, .cmd-item:focus { background: var(--app-surface2); outline: none; }
.cmd-empty { font-size: 13px; color: var(--faint); padding: 16px; text-align: center; }

/* ============================================================
   AI keyword gap (Keywords tab)
   ============================================================ */
.st-kw-ai {
  padding: 14px 0 4px; display: flex; flex-direction: column; gap: 12px;
  border-top: 1px solid var(--app-line); margin-top: 10px;
}
.kw-gap-head {
  font-size: 11px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--faint); font-weight: 700;
}
.kw-gap-row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; padding: 4px 0; }
.st-kw-chip {
  font-family: var(--font-mono); font-size: 11px; font-weight: 600; color: var(--pick);
  background: rgba(74,143,255,.1); border: 1px solid rgba(74,143,255,.3);
  border-radius: 20px; padding: 2px 10px; white-space: nowrap;
}
.kw-gap-why { font-size: 12px; color: var(--dim); }
.kw-gap-note { font-size: 12px; color: var(--faint); margin: 0; }

/* ============================================================
   Sales column picker popover
   ============================================================ */
.st-col-picker {
  position: absolute; right: 0; top: 100%; z-index: 50;
  background: var(--app-surface); border: 1px solid var(--line2);
  border-radius: 7px; padding: 10px 14px; box-shadow: 0 8px 24px rgba(0,0,0,.4);
  display: flex; flex-direction: column; gap: 8px; min-width: 160px;
}
.st-col-picker label { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--dim); cursor: pointer; }
.st-col-picker input[type=checkbox] { width: 14px; height: 14px; }
.st-panel__head { position: relative; }

/* ============================================================
   Import history section (Sales tab)
   ============================================================ */
.st-import-hist { border-top: 1px solid var(--app-line); margin-top: 12px; padding-top: 12px; }
.st-import-hist__head { font-size: 12px; font-weight: 700; color: var(--dim); margin-bottom: 8px; }
.st-import-hist__head .sub { font-weight: 400; color: var(--faint); font-family: var(--font-mono); }
.st-import-row {
  display: flex; align-items: center; gap: 12px; padding: 6px 0;
  border-bottom: 1px solid var(--app-line); font-size: 12px;
}
.st-import-row:last-child { border-bottom: none; }
.st-import-file { flex: 1 1 auto; font-family: var(--font-mono); color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-import-meta { color: var(--dim); white-space: nowrap; }
.st-import-meta b { color: var(--text); }
.st-import-ts { color: var(--faint); white-space: nowrap; font-size: 11px; }

/* ============================================================
   Asset velocity sparkline
   ============================================================ */
.st-spark { display: block; }
.st-spark polyline { vector-effect: non-scaling-stroke; }

/* ============================================================
   AI shoot brief dialog
   ============================================================ */
.app-dialog__panel--wide { max-width: 640px; width: 100%; }
.brief-text {
  white-space: pre-wrap; word-break: break-word; font: inherit; font-size: 13px;
  line-height: 1.65; color: var(--text); margin: 0; padding: 14px;
  background: var(--app-surface2); border: 1px solid var(--app-line); border-radius: 6px;
}

/* ============================================================
   Manual sale entry textarea
   ============================================================ */
.st-manual-ta {
  width: 100%; box-sizing: border-box; background: var(--app-bg); border: 1px solid var(--app-line);
  color: var(--text); border-radius: var(--radius); padding: 9px 10px; font: inherit;
  font-family: var(--font-mono); font-size: 12px; resize: vertical;
}
.st-manual-ta:focus { outline: none; border-color: var(--red); }

/* ============================================================
   Asset tag chips (Assets tab Tags column)
   ============================================================ */
.st-tag-chip {
  display: inline-flex; align-items: center; gap: 3px;
  font-family: var(--font-mono); font-size: 10px; color: var(--dim);
  background: var(--app-surface2); border: 1px solid var(--app-line);
  border-radius: 20px; padding: 1px 7px 1px 8px; white-space: nowrap; margin: 1px 2px 1px 0;
}
.st-tag-rm {
  cursor: pointer; color: var(--faint); font-size: 13px; line-height: 1;
  padding: 0 1px; margin-left: 1px;
}
.st-tag-rm:hover { color: var(--danger-strong); }
.st-tag-add-btn {
  border: 1px dashed var(--app-line); background: none; color: var(--faint);
  border-radius: 20px; font: inherit; font-size: 11px; padding: 1px 8px; cursor: pointer; white-space: nowrap;
}
.st-tag-add-btn:hover { color: var(--text); border-color: var(--dim); }
.st-tag-input {
  border: 1px solid var(--red); background: var(--app-bg); color: var(--text);
  border-radius: 20px; font: inherit; font-family: var(--font-mono); font-size: 11px; padding: 1px 8px;
  outline: none; min-width: 60px; max-width: 100px;
}

/* ============================================================
   Revenue milestone toast (larger + accent)
   ============================================================ */
.st-milestone {
  background: linear-gradient(135deg, var(--info), var(--pick)) !important;
  color: #fff !important; font-weight: 600; font-size: 14px !important;
  box-shadow: 0 8px 28px rgba(74,143,255,.40) !important;
  min-width: 280px; padding: 14px 20px !important;
}

/* ============================================================
   Portfolio health radar (Insights tab)
   ============================================================ */
.st-health-radar {
  display: flex; align-items: flex-start; gap: 28px; flex-wrap: wrap;
  padding: 12px 0 6px;
}
.st-radar { max-width: 240px; flex-shrink: 0; }
.st-health-meta { flex: 1 1 200px; display: flex; flex-direction: column; gap: 9px; padding-top: 6px; }
.st-health-overall {
  font-size: 17px; font-weight: 600; font-family: var(--font-mono); color: var(--text);
  margin-bottom: 4px;
}
.st-health-overall b { font-size: 34px; color: var(--info); font-weight: 700; margin-right: 2px; }
.st-health-overall span { font-size: 14px; color: var(--faint); }
.st-health-dim {
  display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--dim);
}
.st-health-dim > span { min-width: 130px; flex-shrink: 0; }
.st-hdim-bar {
  flex: 1 1 auto; height: 5px; background: var(--app-surface2); border-radius: 3px; overflow: hidden;
}
.st-hdim-bar > span { display: block; height: 100%; border-radius: 3px; transition: width .3s; }
.st-health-dim > b { min-width: 18px; text-align: right; font-family: var(--font-mono); font-size: 11px; }

/* spacer helper for panel heads */
.st-spacer { flex: 1; }

/* ============================================================
   Asset note button (Assets tab Notes column)
   ============================================================ */
.st-note-btn {
  background: none; border: 1px dashed var(--border); border-radius: 4px;
  color: var(--dim); font-size: 11px; cursor: pointer; padding: 2px 6px;
  transition: background .15s, color .15s, border-color .15s;
  white-space: nowrap;
}
.st-note-btn:hover { background: var(--app-surface2); color: var(--text); }
.st-note-btn.has-note {
  border-style: solid; border-color: var(--info); color: var(--info);
  background: rgba(74,143,255,.07);
}
.st-note-btn.has-note:hover { background: rgba(74,143,255,.16); }

/* ============================================================
   License shift insight warning class
   ============================================================ */
.st-insight.k-warn .st-insight__head { border-left-color: var(--yellow); }
.st-insight.k-warn .st-insight__kind { color: var(--yellow); }

/* ============================================================
   Quick filter pills bar
   ============================================================ */
#quick-pills {
  display: none; flex-wrap: wrap; gap: 5px; align-items: center;
  padding: 6px 16px 2px; border-bottom: 1px solid var(--app-line);
  background: var(--app-surface); min-height: 34px;
}
.st-qpill-label { font-size: 11px; color: var(--faint); margin-right: 2px; }
.st-qpill-sep   { color: var(--border); font-size: 12px; margin: 0 2px; }
.st-qpill {
  background: var(--app-surface2); border: 1px solid var(--border);
  border-radius: 12px; padding: 2px 10px; font-size: 11px; color: var(--dim);
  cursor: pointer; white-space: nowrap; transition: background .15s, color .15s;
}
.st-qpill:hover { background: var(--info); color: #fff; border-color: var(--info); }

/* ============================================================
   Undo import bar
   ============================================================ */
#undo-bar {
  display: none; align-items: center; gap: 10px;
  padding: 7px 16px; background: var(--app-surface2); border-bottom: 1px solid var(--border);
  font-size: 12px; color: var(--dim);
}

/* ============================================================
   Batch-tag bulk bar (Assets tab)
   ============================================================ */
.st-bulk-bar {
  display: none; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 6px 12px 8px; border-bottom: 1px solid var(--border);
  font-size: 12px; color: var(--dim); background: rgba(74,143,255,.06);
}

/* ============================================================
   Earnings calendar grid
   ============================================================ */
.st-calendar {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px;
  user-select: none;
}
.st-cal-head {
  text-align: center; font-size: 10px; color: var(--faint); padding: 2px 0;
}
.st-cal-cell {
  min-height: 40px; border-radius: 4px; background: var(--app-surface2);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  cursor: default; position: relative;
}
.st-cal-cell.st-cal-empty { background: transparent; }
.st-cal-day  { font-size: 11px; color: var(--dim); line-height: 1; }
.st-cal-rev  { font-size: 8px; color: var(--text); font-family: var(--font-mono); margin-top: 2px; }

/* ============================================================
   AI digest email pre-formatted output
   ============================================================ */
.st-digest-pre {
  background: var(--app-surface2); border-radius: 6px; padding: 12px 14px;
  font-size: 12px; line-height: 1.7; white-space: pre-wrap; word-break: break-word;
  color: var(--text); font-family: var(--font-mono); max-height: 300px; overflow-y: auto;
}

/* ============================================================
   Round 6 — leaderboard, pinned insights, presets, goals,
              digest banner, import queue bar, AI advice
   ============================================================ */

/* ---------- agency leaderboard ---------- */
.st-leaderboard { display: flex; flex-direction: column; gap: 4px; }
.st-lb-row {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px; border-radius: 6px;
  background: var(--app-surface2); font-size: 12px;
}
.st-lb-rank { font-size: 10px; color: var(--faint); width: 16px; text-align: center; flex-shrink: 0; }
.st-lb-dot  { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.st-lb-name { flex: 1 1 auto; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-lb-growth { font-size: 10px; font-family: var(--font-mono); width: 44px; text-align: right; flex-shrink: 0; }
.st-lb-growth.up   { color: var(--green, #4caf50); }
.st-lb-growth.down { color: var(--red, #f44336); }
.st-lb-score { font-size: 11px; font-family: var(--font-mono); font-weight: 700; color: var(--text); width: 34px; text-align: right; flex-shrink: 0; }
.st-lb-bar-wrap { width: 80px; height: 4px; background: var(--app-line); border-radius: 2px; flex-shrink: 0; overflow: hidden; }
.st-lb-bar  { height: 100%; background: var(--accent, var(--red)); border-radius: 2px; }
.st-lb-legend { margin-top: 6px; font-size: 10px; color: var(--faint); }

/* ---------- pinned insights ---------- */
.st-pin-btn {
  background: none; border: none; cursor: pointer; padding: 0 3px;
  font-size: 14px; color: var(--faint); line-height: 1;
  transition: color .15s;
}
.st-pin-btn:hover { color: var(--accent, var(--red)); }
.st-pin-btn.is-active { color: #f5a623; }
.st-insight.is-pinned {
  border-color: #f5a62366;
  background: color-mix(in srgb, #f5a623 6%, var(--app-surface));
}

/* ---------- export presets ---------- */
.st-preset-row {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 8px; border-radius: 5px;
  background: var(--app-surface2); font-size: 12px; color: var(--text);
}
.st-preset-row button { background: none; border: none; cursor: pointer; font: inherit; color: var(--accent, var(--red)); padding: 0 4px; }
.st-preset-del { color: var(--faint) !important; font-size: 13px; }

/* ---------- agency goal input ---------- */
.st-ag-goal-input {
  width: 72px; font: inherit; font-size: 11px; font-family: var(--font-mono);
  background: var(--app-surface2); border: 1px solid var(--app-line);
  border-radius: 4px; padding: 2px 6px; color: var(--text); text-align: right;
}
.st-ag-goal-input:focus { outline: none; border-color: var(--accent, var(--red)); }
.st-ag-pace { font-size: 10px; font-family: var(--font-mono); margin-left: 4px; }
.st-ag-pace.good { color: var(--green, #4caf50); }
.st-ag-pace.warn { color: #f5a623; }
.st-ag-pace.bad  { color: var(--red, #f44336); }

/* ---------- import queue bar ---------- */
#import-queue-bar {
  display: none; align-items: center; gap: 10px;
  background: color-mix(in srgb, var(--accent, var(--red)) 10%, var(--app-surface));
  border: 1px solid color-mix(in srgb, var(--accent, var(--red)) 30%, transparent);
  border-radius: 7px; margin: 8px 16px 0; padding: 8px 14px;
  font-size: 12px; color: var(--text);
}
#import-queue-bar .iq-spin { animation: iq-spin 1s linear infinite; display: inline-block; }
@keyframes iq-spin { to { transform: rotate(360deg); } }

/* ---------- monthly digest banner ---------- */
#digest-banner {
  display: none; align-items: center; gap: 12px;
  background: color-mix(in srgb, #4caf50 10%, var(--app-surface));
  border: 1px solid color-mix(in srgb, #4caf50 30%, transparent);
  border-radius: 7px; margin: 8px 16px 0; padding: 10px 14px;
  font-size: 12px; color: var(--text);
}
#digest-banner strong { font-weight: 700; }
#digest-banner .db-actions { display: flex; gap: 6px; margin-left: auto; }
#digest-banner button {
  font: inherit; font-size: 11px; font-weight: 600; border-radius: 5px;
  padding: 3px 10px; cursor: pointer; border: 1px solid;
}
#digest-banner #digest-yes { background: #4caf50; color: #fff; border-color: #4caf50; }
#digest-banner #digest-dismiss { background: none; border-color: var(--app-line); color: var(--dim); }

/* ---------- AI advice block ---------- */
.st-ai-advice {
  background: color-mix(in srgb, var(--accent, var(--red)) 6%, var(--app-surface));
  border: 1px solid color-mix(in srgb, var(--accent, var(--red)) 20%, transparent);
  border-radius: 6px; padding: 10px 12px;
  font-size: 12px; line-height: 1.6; color: var(--text);
  margin-top: 8px;
}
.st-ai-advice strong { color: var(--accent, var(--red)); }

/* ---------- NL goal input (rail) ---------- */
.st-nl-goal {
  display: flex; gap: 5px; margin-top: 6px;
}
.st-nl-goal input {
  flex: 1 1 auto; font: inherit; font-size: 12px;
  background: var(--app-surface2); border: 1px solid var(--app-line);
  border-radius: 5px; padding: 4px 8px; color: var(--text);
}
.st-nl-goal input:focus { outline: none; border-color: var(--accent, var(--red)); }
.st-nl-goal button {
  font: inherit; font-size: 11px; font-weight: 600;
  background: var(--accent, var(--red)); color: #fff; border: none;
  border-radius: 5px; padding: 4px 10px; cursor: pointer;
}

/* ---------- burnup dialog chart ---------- */
#dlg-burnup .st-burnup-wrap { overflow-x: auto; }
#burnup-title { font-size: 11px; color: var(--faint); font-family: var(--font-mono); margin-top: 4px; }

/* ---------- Round 7: percentile, health grade, conflicts, onboarding, insight link ---------- */
/* asset revenue percentile pill */
.st-pctile {
  display: inline-block; min-width: 26px; text-align: center;
  padding: 1px 5px; border-radius: 9px; font-size: 11px;
  background: var(--app-surface2); color: var(--dim);
}
.st-pctile.is-top { background: rgba(63,185,80,.18); color: var(--pick, #3fb950); font-weight: 700; }
.st-pctile.is-low { background: rgba(248,81,73,.13); color: var(--danger-strong, #EF4444); }

/* overview health-grade chip */
.st-health__grade {
  margin-left: auto; cursor: pointer; font: inherit; font-size: 12px;
  background: transparent; border: 1px solid var(--app-line);
  border-radius: 999px; padding: 2px 12px; line-height: 1.6;
  transition: background .15s, transform .1s;
}
.st-health__grade:hover { background: var(--app-surface2); transform: translateY(-1px); }
.st-health__grade b { font-size: 13px; margin-left: 3px; }

/* insight deep-link button */
.st-insight__link {
  margin-left: auto; background: transparent; border: none; cursor: pointer;
  font-size: 12px; opacity: .45; padding: 0 2px; line-height: 1;
  transition: opacity .15s;
}
.st-insight__link:hover { opacity: 1; }
.st-insight--flash { animation: stInsightFlash 1.6s ease; }
@keyframes stInsightFlash {
  0%, 100% { box-shadow: 0 0 0 0 transparent; }
  15% { box-shadow: 0 0 0 2px var(--accent, var(--red)); }
}

/* conflict resolver dialog */
.st-conflicts-list { max-height: 50vh; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }
.st-conflict-row {
  display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center;
  padding: 8px 10px; background: var(--app-surface2); border: 1px solid var(--app-line); border-radius: 7px;
}
.st-conflict-info b { font-size: 13px; }
.st-conflict-meta { display: block; font-size: 11px; color: var(--faint); margin-top: 1px; }
.st-conflict-vals { display: flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 13px; white-space: nowrap; }
.st-cf-old { color: var(--dim); text-decoration: line-through; }
.st-cf-new { color: var(--text); font-weight: 700; }
.st-cf-arrow.up { color: var(--pick, #3fb950); }
.st-cf-arrow.down { color: var(--danger-strong, #EF4444); }
.st-conflict-choice { display: flex; gap: 4px; }
.st-conflict-choice button { opacity: .6; }
.st-conflict-choice button.is-active { opacity: 1; outline: 2px solid var(--accent, var(--red)); }

/* onboarding strip */
.st-onboard {
  margin: 0 0 8px; padding: 8px 14px;
  background: var(--app-surface2); border: 1px solid var(--app-line); border-radius: 8px;
}
.st-onboard__head { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.st-onboard__head span { color: var(--faint); font-size: 12px; }
.st-onboard__dismiss {
  margin-left: auto; background: transparent; border: none; color: var(--faint);
  font-size: 18px; line-height: 1; cursor: pointer; padding: 0 4px;
}
.st-onboard__dismiss:hover { color: var(--text); }
.st-onboard__items { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 6px; }
.st-onboard__item { font-size: 12px; color: var(--dim); }
.st-onboard__item.is-done { color: var(--pick, #3fb950); }

/* ---------- R8: insights actions / ask / data-quality / findings / print ---------- */
.st-ins-actions { display: flex; justify-content: flex-end; gap: 8px; margin-bottom: 4px; }

.st-ask__row { display: flex; gap: 8px; align-items: stretch; }
.st-ask__input {
  flex: 1 1 auto; min-width: 0;
  background: var(--app-bg); border: 1px solid var(--app-line); border-radius: var(--radius, 6px);
  color: var(--text); font: inherit; font-size: 13px; padding: 8px 12px;
}
.st-ask__input:focus { outline: none; border-color: var(--accent, var(--red)); }
.st-ask__hint { color: var(--faint); font-size: 11px; font-family: var(--font-mono); margin-top: 6px; }
.st-ask__out { margin-top: 12px; }
.st-ask__answer {
  margin: 0; padding: 12px 14px; background: var(--app-bg); border: 1px solid var(--app-line);
  border-left: 3px solid var(--accent, var(--red)); border-radius: var(--radius, 6px);
  font-size: 13px; line-height: 1.55; color: var(--text); white-space: pre-wrap;
}
.st-ask__acts { margin-top: 8px; display: flex; gap: 8px; }

.st-dq { display: flex; flex-direction: column; gap: 2px; }
.st-dq-row {
  display: grid; grid-template-columns: 14px minmax(160px, 1.4fr) auto 2fr auto;
  align-items: center; gap: 12px; padding: 9px 6px; border-bottom: 1px solid var(--app-line);
}
.st-dq-row:last-child { border-bottom: none; }
.st-dq-dot { width: 10px; height: 10px; border-radius: 50%; }
.st-dq-label { font-size: 13px; color: var(--text); font-weight: 600; }
.st-dq-count { font-size: 13px; font-weight: 700; font-family: var(--font-mono); white-space: nowrap; }
.st-dq-pct { color: var(--faint); font-weight: 500; }
.st-dq-advice { font-size: 12px; color: var(--dim); }
.st-dq-ok { color: var(--pick, #3fb950); font-size: 14px; text-align: center; }

.st-findings { display: flex; flex-direction: column; }
.st-finding {
  display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 12px;
  padding: 8px 6px; border-bottom: 1px solid var(--app-line);
}
.st-finding:last-child { border-bottom: none; }
.st-finding__kind {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--accent, var(--red)); font-family: var(--font-mono); white-space: nowrap;
}
.st-finding__text { font-size: 12.5px; color: var(--text); line-height: 1.45; }
.st-finding__date { font-size: 11px; color: var(--faint); font-family: var(--font-mono); white-space: nowrap; }
.st-finding__del {
  border: none; background: none; color: var(--faint); cursor: pointer; font-size: 16px; line-height: 1; padding: 0 4px;
}
.st-finding__del:hover { color: var(--danger-strong, #EF4444); }

@media (max-width: 720px) {
  .st-dq-row { grid-template-columns: 14px 1fr auto; }
  .st-dq-advice { display: none; }
  .st-finding { grid-template-columns: auto 1fr auto; }
  .st-finding__date { display: none; }
}

/* ---------- R8: print / save-as-PDF — clean one-pager of the Insights tab ---------- */
@media print {
  body * { visibility: hidden !important; }
  #view-insights, #view-insights * { visibility: visible !important; }
  #view-insights { position: absolute; left: 0; top: 0; width: 100%; }
  .st-ins-actions, .st-ask__row, .st-ask__hint, #ask-out,
  .st-pin-btn, .st-insight__link, .st-insight__cta,
  [data-dq-jump], .st-finding__del, #findings-clear,
  .st-panel__head .ab, button { display: none !important; }
  .st-panel { break-inside: avoid; border-color: #ccc; box-shadow: none; }
  .st-span2 { grid-column: 1 / -1; }
}

/* ---------- R9: next-best-action card (Overview) ---------- */
.st-nba {
  display: flex; align-items: center; gap: 14px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent, var(--red)) 9%, var(--app-surface)) 0%, var(--app-surface) 60%);
  border: 1px solid color-mix(in srgb, var(--accent, var(--red)) 35%, var(--app-line));
}
.st-nba__icon { font-size: 28px; line-height: 1; flex: none; }
.st-nba__body { flex: 1 1 auto; min-width: 0; }
.st-nba__label {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--accent, var(--red)); font-family: var(--font-mono); margin-bottom: 3px;
}
.st-nba__title { font-size: 15px; font-weight: 650; color: var(--text); margin-bottom: 2px; }
.st-nba__text { font-size: 12.5px; color: var(--dim); line-height: 1.45; }
.st-nba .ab { flex: none; }

/* ---------- R9: bulk-edit field select (Sales) ---------- */
.st-bulk-field {
  background: var(--app-surface2, var(--app-bg)); color: var(--text);
  border: 1px solid var(--app-line); border-radius: var(--radius, 6px);
  font-size: 12px; padding: 4px 8px; font-family: inherit;
}

@media (max-width: 720px) {
  .st-nba { flex-wrap: wrap; }
  .st-nba .ab { width: 100%; }
}

/* ---------- Connect / Baselines card ---------- */
.sc-card__head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; margin-bottom: 12px;
}
.sc-card__hint { font-size: 12px; color: var(--dim); line-height: 1.45; margin-top: 4px; max-width: 60ch; }
.sc-card__grand { text-align: right; flex: none; }
.sc-card__grandlbl {
  display: block; font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--faint); font-family: var(--font-mono); margin-bottom: 2px;
}
.sc-card__grandval { font-size: 22px; font-weight: 700; color: var(--text); font-family: var(--font-mono); }
.sc-rows { display: flex; flex-direction: column; gap: 2px; }
.sc-row {
  display: grid; grid-template-columns: 12px 1fr auto; align-items: baseline;
  gap: 4px 10px; padding: 9px 6px; border-radius: var(--radius, 6px);
  grid-template-areas: "dot name val" ". stamp stamp" ". recon recon";
}
.sc-row:hover { background: var(--app-surface2, rgba(127,127,127,0.06)); }
.sc-row__dot { grid-area: dot; width: 9px; height: 9px; border-radius: 50%; align-self: center; }
.sc-row__name { grid-area: name; font-size: 14px; font-weight: 600; color: var(--text); display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.sc-row__val { grid-area: val; text-align: right; font-size: 15px; font-weight: 700; color: var(--text); font-family: var(--font-mono); }
.sc-row__sub { display: block; font-size: 11px; font-weight: 500; color: var(--dim); font-family: var(--font-mono); margin-top: 1px; }
.sc-row__stamp { grid-area: stamp; font-size: 10.5px; color: var(--faint); font-family: var(--font-mono); }
.sc-age { color: var(--dim); }
.sc-age.is-stale { color: var(--warn, #e3a008); font-weight: 600; }
.sc-trend { font-size: 11px; font-weight: 700; font-family: var(--font-mono); }
.sc-trend.is-up { color: var(--pick, #3fb950); }
.sc-trend.is-down { color: var(--danger-strong, #EF4444); }
.sc-recon { grid-area: recon; display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.sc-recon__bar { flex: 0 0 120px; height: 5px; border-radius: 3px; background: var(--app-line); overflow: hidden; }
.sc-recon__bar span { display: block; height: 100%; border-radius: 3px; min-width: 1px; }
.sc-recon__lbl { font-size: 10.5px; color: var(--faint); font-family: var(--font-mono); }
.sc-ccy {
  display: inline-block; margin-bottom: 4px; font-size: 10.5px; font-family: var(--font-mono);
  padding: 2px 8px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--app-line); background: transparent; color: var(--dim);
}
.sc-ccy:hover { color: var(--text); border-color: var(--dim); }
/* ---------- per-year baselines chart ---------- */
.sc-chart { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--app-line); }
.sc-chart__head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.sc-chart__ttl { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--faint); font-family: var(--font-mono); }
.sc-chart__lgs { display: flex; gap: 12px; flex-wrap: wrap; }
.sc-chart__lg { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--dim); }
.sc-chart__lg i { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }
.sc-chart__svg { width: 100%; height: 120px; display: block; }
.sc-chart__x { font-size: 9px; fill: var(--faint); font-family: var(--font-mono); }
.sc-chart__note { font-size: 10.5px; color: var(--faint); font-style: italic; margin: 6px 0 0; }
/* segmented metric toggle on the per-year chart */
.sc-seg { display: inline-flex; border: 1px solid var(--app-line); border-radius: 999px; overflow: hidden; }
.sc-seg__b {
  font-size: 10.5px; font-family: var(--font-mono); padding: 2px 9px; cursor: pointer;
  border: 0; background: transparent; color: var(--dim); line-height: 1.6;
}
.sc-seg__b + .sc-seg__b { border-left: 1px solid var(--app-line); }
.sc-seg__b:hover { color: var(--text); }
.sc-seg__b.is-on { background: var(--accent, #4a8fff); color: #fff; }
.sc-card__foot { display: flex; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--app-line); }

/* ---------- "Explain my gaps" insights dialog ---------- */
.sc-up { color: var(--pick, #3fb950); }
.sc-down { color: var(--danger-strong, #EF4444); }
.sc-ins__empty { color: var(--faint); font-style: italic; }
.sc-ins__lead { font-size: 13.5px; color: var(--text); line-height: 1.55; margin: 0 0 14px; }
.sc-ins__ag { margin: 0 0 14px; }
.sc-ins__agh { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text); margin-bottom: 4px; }
.sc-ins__agh .sc-row__dot { width: 9px; height: 9px; border-radius: 50%; }
.sc-ins__share { margin-left: auto; font-size: 11px; color: var(--faint); font-family: var(--font-mono); }
.sc-ins__ag ul { margin: 0; padding-left: 18px; }
.sc-ins__ag li { font-size: 12.5px; color: var(--dim); line-height: 1.55; }
.sc-ins__partial { color: var(--faint); font-style: italic; }
.sc-ins__ai { margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--app-line); }
.sc-ins__ainote { display: block; font-size: 10.5px; color: var(--faint); font-style: italic; margin-top: 6px; }
.sc-ins__aiout { margin-top: 10px; }
.sc-ins__aiload, .sc-ins__aierr { font-size: 12px; color: var(--faint); font-style: italic; }
.sc-ins__aitext { font-size: 13px; color: var(--text); line-height: 1.55; background: var(--app-surface2, rgba(127,127,127,0.06)); border-radius: 8px; padding: 10px 12px; }

/* ---------- per-account lifetime baseline strip (Portfolios card) ---------- */
.sp-baseline {
  display: flex; align-items: center; gap: 8px; margin: 6px 0 2px;
  padding: 5px 8px; border-radius: 7px; background: var(--app-surface2, rgba(127,127,127,0.06));
}
.sp-baseline.is-stale { box-shadow: inset 2px 0 0 var(--warn, #e3a008); }
.sp-baseline__k { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--faint); }
.sp-baseline__v { font-size: 13px; font-family: var(--font-mono); color: var(--text); }
.sp-baseline__age { font-size: 10.5px; color: var(--dim); font-family: var(--font-mono); }
.sp-baseline__age.is-stale { color: var(--warn, #e3a008); font-weight: 600; }
.sp-baseline .ab { margin-left: auto; }

/* ---------- Connect dialog ---------- */
.sc-conn-intro p { font-size: 13px; color: var(--dim); line-height: 1.5; margin: 0 0 10px; }
.sc-mech { margin: 0 0 10px; padding-left: 18px; }
.sc-mech li { font-size: 13px; color: var(--dim); line-height: 1.6; }
.sc-conn__note { font-size: 12px; color: var(--faint); font-style: italic; }
.sc-conn-list { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.sc-conn {
  border: 1px solid var(--app-line); border-radius: var(--radius, 8px);
  padding: 12px 14px; background: var(--app-surface2, rgba(127,127,127,0.04));
}
.sc-conn__top { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.sc-conn__top strong { font-size: 14px; color: var(--text); }
.sc-conn__how { font-size: 12.5px; color: var(--dim); line-height: 1.45; margin: 0 0 4px; }
.sc-conn__when { font-size: 12px; color: var(--faint); margin: 0 0 8px; }
.sc-conn__when em { color: var(--dim); font-style: normal; font-weight: 600; }
.sc-tag {
  margin-left: auto; font-size: 11px; font-family: var(--font-mono);
  padding: 2px 8px; border-radius: 999px; background: var(--app-line); color: var(--dim);
}
.sc-tag--ok { background: color-mix(in srgb, var(--pick, #3fb950) 22%, transparent); color: var(--pick, #3fb950); }
.sc-tag--warn { background: color-mix(in srgb, var(--warn, #e3a008) 22%, transparent); color: var(--warn, #e3a008); }
.sc-tag--manual { margin-left: auto; background: color-mix(in srgb, var(--accent, #6e8efb) 18%, transparent); color: var(--accent, #6e8efb); text-transform: uppercase; letter-spacing: .04em; }
.sc-tag--manual + .sc-tag { margin-left: 6px; } /* keep the figure tag next to the manual chip, not pushed apart */

/* ---------- Manual-entry agency row (collector-less portfolios) ---------- */
.sc-conn--manual { border-style: dashed; }
.sc-conn__manrow { display: flex; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.sc-conn__cur { font-family: var(--font-mono); color: var(--dim); font-size: 13px; }
.sc-manual-in {
  flex: 1 1 120px; min-width: 110px; max-width: 180px;
  padding: 8px 11px; font-size: 14px; font-family: var(--font-mono);
  color: var(--text); background: var(--app-surface, rgba(127,127,127,0.06));
  border: 1px solid var(--app-line); border-radius: var(--radius, 8px);
  appearance: textfield; -webkit-appearance: textfield;
  pointer-events: auto; cursor: text; position: relative; z-index: 1;
  transition: all 0.15s;
}
.sc-manual-in:focus { outline: none; border-color: var(--accent, #6e8efb); background: var(--app-surface2, rgba(127,127,127,0.12)); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent, #6e8efb) 15%, transparent); }
.sc-manual-in:disabled { opacity: 0.5; cursor: not-allowed; }
.sc-manual-in::placeholder { color: var(--faint); opacity: 0.7; }
.sc-conn__open { font-size: 12px; color: var(--accent, #6e8efb); text-decoration: none; white-space: nowrap; }
.sc-conn__open:hover { text-decoration: underline; }

/* ---------- Live-connector scanner HUD ----------
   Graphical on-load indicator: shows the app searching open tabs and pulling
   live agency stats. Driven entirely by stats-connect.js CONN lifecycle. */
.sc-hud {
  position: fixed; right: 18px; bottom: 18px; z-index: 1200;
  width: min(340px, calc(100vw - 32px));
  display: flex; gap: 12px; align-items: flex-start;
  padding: 13px 14px;
  border: 1px solid var(--app-line); border-radius: 12px;
  background: var(--app-surface, rgba(22,22,26,0.92));
  box-shadow: 0 10px 34px rgba(0,0,0,0.35), 0 2px 8px rgba(0,0,0,0.2);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  opacity: 0; transform: translateY(10px) scale(0.98);
  transition: opacity .28s ease, transform .28s ease;
  pointer-events: none;
}
.sc-hud.is-on { opacity: 1; transform: none; pointer-events: auto; }

/* radar sweep */
.sc-hud__radar {
  position: relative; flex: 0 0 auto; width: 38px; height: 38px; margin-top: 1px;
  border-radius: 50%;
  background:
    radial-gradient(circle, transparent 52%, color-mix(in srgb, var(--accent, #4f8cff) 22%, transparent) 53%, transparent 56%) center/100% 100% no-repeat,
    color-mix(in srgb, var(--accent, #4f8cff) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent, #4f8cff) 35%, transparent);
  overflow: hidden;
}
.sc-hud__radar::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg, color-mix(in srgb, var(--accent, #4f8cff) 55%, transparent), transparent 70%);
}
.sc-hud__radar.is-busy::after { animation: sc-sweep 1.4s linear infinite; }
.sc-hud__blip {
  position: absolute; left: 50%; top: 50%; width: 5px; height: 5px; margin: -2.5px;
  border-radius: 50%; background: var(--accent, #4f8cff);
  box-shadow: 0 0 8px var(--accent, #4f8cff);
}
.sc-hud:not(.is-busy) .sc-hud__radar {
  background: color-mix(in srgb, var(--pick, #3fb950) 12%, transparent);
  border-color: color-mix(in srgb, var(--pick, #3fb950) 45%, transparent);
}
.sc-hud:not(.is-busy) .sc-hud__blip { background: var(--pick, #3fb950); box-shadow: 0 0 8px var(--pick, #3fb950); }
@keyframes sc-sweep { to { transform: rotate(360deg); } }

.sc-hud__body { flex: 1 1 auto; min-width: 0; }
.sc-hud__title { font-size: 13.5px; font-weight: 700; color: var(--text); line-height: 1.25; }
.sc-hud__sub { font-size: 11.5px; color: var(--dim); line-height: 1.4; margin-top: 2px; }

.sc-hud__chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
.sc-hud__chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10.5px; font-weight: 600; color: var(--dim);
  padding: 3px 7px 3px 6px; border-radius: 999px;
  background: var(--app-surface2, rgba(127,127,127,0.08));
  border: 1px solid var(--app-line);
  transition: color .2s ease, opacity .2s ease, border-color .2s ease;
}
.sc-hud__cdot {
  width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto;
  background: var(--faint); position: relative;
}
.sc-hud__chip.is-scan  .sc-hud__cdot { background: var(--accent, #4f8cff); animation: sc-pulse 1s ease-in-out infinite; }
.sc-hud__chip.is-fetch { color: var(--text); border-color: color-mix(in srgb, var(--accent, #4f8cff) 45%, var(--app-line)); }
.sc-hud__chip.is-fetch .sc-hud__cdot {
  background: transparent; border: 2px solid color-mix(in srgb, var(--accent, #4f8cff) 35%, transparent);
  border-top-color: var(--accent, #4f8cff); width: 9px; height: 9px;
  animation: sc-spin .7s linear infinite;
}
.sc-hud__chip.is-done  { color: var(--pick, #3fb950); border-color: color-mix(in srgb, var(--pick, #3fb950) 45%, var(--app-line)); }
.sc-hud__chip.is-done  .sc-hud__cdot { background: var(--pick, #3fb950); box-shadow: 0 0 6px color-mix(in srgb, var(--pick, #3fb950) 70%, transparent); }
.sc-hud__chip.is-absent { opacity: 0.42; }

@keyframes sc-pulse { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.55); opacity: 0.55; } }
@keyframes sc-spin  { to { transform: rotate(360deg); } }

.sc-hud__acts { margin-top: 10px; }
.sc-hud__act {
  font: inherit; font-size: 11px; font-weight: 600; cursor: pointer;
  color: var(--accent, #4f8cff); background: transparent;
  border: 1px solid color-mix(in srgb, var(--accent, #4f8cff) 45%, var(--app-line));
  border-radius: 7px; padding: 4px 11px;
}
.sc-hud__act:hover { background: color-mix(in srgb, var(--accent, #4f8cff) 12%, transparent); }

.sc-hud__x {
  flex: 0 0 auto; align-self: flex-start; font-size: 17px; line-height: 1;
  color: var(--faint); background: transparent; border: 0; cursor: pointer;
  padding: 0 2px; margin: -2px -2px 0 0;
}
.sc-hud__x:hover { color: var(--text); }

@media (prefers-reduced-motion: reduce) {
  .sc-hud__radar.is-busy::after, .sc-hud__chip.is-scan .sc-hud__cdot, .sc-hud__chip.is-fetch .sc-hud__cdot { animation: none; }
  .sc-hud { transition: opacity .2s ease; transform: none; }
}

/* error chip — an open agency tab that produced no reading this round.
   Rendered as a <button> so it can be clicked to retry just that agency. */
.sc-hud__chip.is-err { color: var(--warn, #e3a008); border-color: color-mix(in srgb, var(--warn, #e3a008) 50%, var(--app-line)); }
.sc-hud__chip.is-err .sc-hud__cdot { background: var(--warn, #e3a008); box-shadow: 0 0 6px color-mix(in srgb, var(--warn, #e3a008) 70%, transparent); }
button.sc-hud__chip { cursor: pointer; font: inherit; }
button.sc-hud__chip.is-err:hover { background: color-mix(in srgb, var(--warn, #e3a008) 14%, transparent); border-color: var(--warn, #e3a008); }
.sc-hud__cretry { margin-left: 1px; font-size: 11px; line-height: 1; opacity: .85; }
button.sc-hud__chip.is-err:hover .sc-hud__cretry { opacity: 1; }

/* stale-connector note under the chips — links to the update steps */
.sc-hud__note {
  margin-top: 9px; font-size: 11.5px; line-height: 1.45;
  color: var(--warn, #e3a008);
  display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
}
.sc-hud__note .sc-hud__act { color: var(--accent, #4f8cff); }
/* S12 — Engine old-build restart note: distinct (red) from the amber connector note */
.sc-hud__note--engine {
  margin-top: 7px; color: var(--bad, #f85149);
  padding-top: 7px; border-top: 1px solid color-mix(in srgb, var(--bad, #f85149) 22%, transparent);
}
.sc-hud__note--engine i { font-size: 13px; transform: translateY(1px); }
.sc-hud__note--engine .sc-linkbtn { color: var(--bad, #f85149); }
.sc-hud__note--engine .sc-linkbtn:hover { color: var(--text); }
.sc-hud__act--primary {
  color: var(--bg, #0b0b0f); background: var(--accent, #4f8cff);
  border-color: var(--accent, #4f8cff); margin-right: 6px;
}
.sc-hud__act--primary:hover { background: color-mix(in srgb, var(--accent, #4f8cff) 85%, #000); }

/* "Live-synced …" freshness line in the baselines card header */
.sc-card__sync {
  display: flex; align-items: center; gap: 6px;
  font-size: 11.5px; color: var(--dim); margin: 6px 0 0;
}
.sc-card__sync.is-stale { color: var(--warn, #e3a008); }
.sc-card__syncdot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; background: var(--faint); }
.sc-card__syncdot.is-live { background: var(--pick, #3fb950); box-shadow: 0 0 6px color-mix(in srgb, var(--pick, #3fb950) 65%, transparent); animation: sc-pulse 2.4s ease-in-out infinite; }
.sc-card__syncdot.is-stale { background: var(--warn, #e3a008); }
.sc-card__syncdot.is-idle { background: var(--faint); }
.sc-linkbtn {
  font: inherit; font-size: inherit; color: var(--accent, #4f8cff);
  background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline;
}
.sc-linkbtn:hover { color: var(--text); }

/* S2 — per-agency connectivity / confidence badge in each baseline row */
.sc-badge {
  display: inline-flex; align-items: center; margin-left: 8px;
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 600;
  letter-spacing: .02em; text-transform: uppercase;
  padding: 1px 6px; border-radius: 999px; vertical-align: middle;
  border: 1px solid var(--app-line); color: var(--dim); background: var(--app-surface2, rgba(127,127,127,0.05));
  cursor: default; white-space: nowrap;
}
.sc-badge.is-live { color: var(--pick, #3fb950); border-color: color-mix(in srgb, var(--pick, #3fb950) 45%, transparent); }
.sc-badge.is-open { color: var(--accent, #4f8cff); border-color: color-mix(in srgb, var(--accent, #4f8cff) 45%, transparent); }
.sc-badge.is-ok { color: var(--pick, #3fb950); border-color: color-mix(in srgb, var(--pick, #3fb950) 30%, transparent); }
.sc-badge.is-warn { color: var(--warn, #e3a008); border-color: color-mix(in srgb, var(--warn, #e3a008) 45%, transparent); }
.sc-badge.is-idle { color: var(--faint); }

/* S1 — pending-drift banner (a refresh read lower than the stored lifetime) */
.sc-drift {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 4px 0 12px; padding: 10px 13px;
  border: 1px solid color-mix(in srgb, var(--warn, #e3a008) 45%, transparent);
  border-left: 3px solid var(--warn, #e3a008);
  border-radius: var(--radius, 8px);
  background: color-mix(in srgb, var(--warn, #e3a008) 8%, transparent);
}
.sc-drift__msg { display: flex; align-items: flex-start; gap: 8px; flex: 1; min-width: 240px; font-size: 12.5px; line-height: 1.5; color: var(--text); }
.sc-drift__msg i { color: var(--warn, #e3a008); font-size: 16px; flex: 0 0 auto; margin-top: 1px; }
.sc-drift__acts { display: flex; gap: 8px; flex: 0 0 auto; }

/* S3 — FX-rate provenance line in the baselines card */
.sc-card__fx {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  font-size: 11px; color: var(--dim); margin: 10px 0 0;
  font-family: var(--font-mono);
}
.sc-card__fx.is-stale { color: var(--warn, #e3a008); }
.sc-card__fxdot { width: 6px; height: 6px; border-radius: 50%; flex: 0 0 auto; background: var(--faint); }
.sc-card__fxdot.is-stale { background: var(--warn, #e3a008); }

/* S8 — recurring partial-read (chronic drift) line under the pending banner */
.sc-driftpat {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px;
  margin: -4px 0 12px; padding: 7px 11px;
  border: 1px dashed color-mix(in srgb, var(--warn, #e3a008) 40%, transparent);
  border-radius: var(--radius, 8px);
  background: color-mix(in srgb, var(--warn, #e3a008) 7%, transparent);
  font-size: 11.5px; color: var(--text); line-height: 1.5;
}
.sc-driftpat > i { color: var(--warn, #e3a008); font-size: 15px; flex: 0 0 auto; }
.sc-driftpat__item { white-space: nowrap; }
.sc-driftpat__item strong { color: var(--warn, #e3a008); }
/* S14 — when a recurring under-read is ALSO failing live, escalate to red */
.sc-driftpat.is-active {
  border-color: color-mix(in srgb, var(--bad, #f85149) 45%, transparent);
  background: color-mix(in srgb, var(--bad, #f85149) 8%, transparent);
}
.sc-driftpat.is-active > i { color: var(--bad, #f85149); }
.sc-driftpat__live {
  margin-left: 5px; padding: 0 6px; border-radius: 999px; white-space: nowrap;
  font-size: 10px; font-weight: 700; letter-spacing: .02em;
  color: var(--bad, #f85149);
  background: color-mix(in srgb, var(--bad, #f85149) 15%, transparent);
}
.sc-driftpat__cause { flex-basis: 100%; color: var(--bad, #f85149); font-size: 11px; }

/* S13 — browser-only baseline backup reminder */
.sc-backup {
  display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
  margin: 4px 0 12px; padding: 7px 11px;
  border: 1px solid color-mix(in srgb, var(--accent, #4f8cff) 26%, transparent);
  border-radius: var(--radius, 8px);
  background: color-mix(in srgb, var(--accent, #4f8cff) 6%, transparent);
  font-size: 11.5px; color: var(--dim); line-height: 1.5;
}
.sc-backup > i { color: var(--accent, #4f8cff); transform: translateY(1px); }

/* S15 — CSV export link inside the chart note */
.sc-chart__csv { font-style: normal; margin-left: 6px; white-space: nowrap; }
.sc-chart__csv i { font-size: 12px; transform: translateY(1px); }

/* S9 — FX-impact clarifier under the earnings chart */
.sc-chart__fxnote {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  font-size: 10.5px; color: var(--dim); margin: 3px 0 0; line-height: 1.5;
}
.sc-chart__fxnote i { font-size: 13px; color: var(--faint); flex: 0 0 auto; }
.sc-chart__fxnote.is-stale i { color: var(--warn, #e3a008); }
.sc-chart__fxstale { color: var(--warn, #e3a008); }

/* S4 — AI action-plan output styling */
.sc-ins__aiplan { border-left: 3px solid var(--accent, #4f8cff); padding-left: 12px; }
.sc-ins__aihd {
  display: flex; align-items: center; gap: 6px; margin-bottom: 6px;
  font-size: 12px; font-weight: 700; color: var(--accent, #4f8cff);
  text-transform: uppercase; letter-spacing: .04em;
}
.sc-ins__aihd i { font-size: 15px; }

/* Connect dialog — install steps block */
.sc-conn-install {
  margin: 4px 0 14px; padding: 12px 14px;
  border: 1px solid var(--app-line); border-radius: var(--radius, 8px);
  background: var(--app-surface2, rgba(127,127,127,0.04));
}
.sc-conn-install__top { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 13.5px; color: var(--text); }
.sc-conn-steps { margin: 0; padding-left: 20px; }
.sc-conn-steps li { font-size: 12.5px; color: var(--dim); line-height: 1.7; }
.sc-conn-steps code {
  font-family: var(--font-mono); font-size: 11.5px;
  background: var(--app-line); border-radius: 4px; padding: 1px 5px;
}
.sc-conn-steps .ab--primary { margin: 2px 0; }
.sc-conn-install__upd {
  margin: 0 0 8px; font-size: 12px; line-height: 1.5;
  color: var(--warn, #e3a008);
}
.sc-conn-install__trust {
  margin: 10px 0 0; font-size: 11.5px; line-height: 1.5; color: var(--dim);
  padding-top: 8px; border-top: 1px solid var(--app-line);
}

/* ---------- trend alerts panel ---------- */
#trend-alerts {
  margin: 10px 14px 0;
  background: #fef3c7;
  border: 1px solid #f59e0b;
  border-radius: 8px;
  padding: 12px 14px;
  color: #78350f;
}
/* dark theme: keep amber but soften it */
.app-body.dark #trend-alerts,
[data-theme="dark"] #trend-alerts {
  background: #292210;
  border-color: #b45309;
  color: #fcd34d;
}
.ta-head {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.ta-icon { font-size: 15px; flex-shrink: 0; }
.ta-head strong { font-size: 13px; font-weight: 700; }
.ta-sub { font-size: 12px; opacity: .75; }
.ta-spacer { flex: 1 1 auto; }
.ta-dismiss {
  background: transparent; border: 1px solid currentColor; color: inherit; opacity: .7;
}
.ta-dismiss:hover { opacity: 1; }
.ta-list {
  margin: 8px 0 0; padding: 0 0 0 4px; list-style: none;
  display: flex; flex-direction: column; gap: 4px;
}
.ta-item { font-size: 12px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ta-kw { font-family: var(--font-mono); font-weight: 600; font-size: 12px; }
.ta-ranks { opacity: .65; font-family: var(--font-mono); font-size: 11px; }
.ta-link {
  background: transparent; border: 1px solid currentColor; color: inherit;
  opacity: .7; font-size: 11px; padding: 1px 7px;
}
.ta-link:hover { opacity: 1; }

/* ---------- similar assets panel ---------- */
.sim-asset-row { display:flex; align-items:center; gap:10px; padding:5px 0; font-size:12px; border-bottom:1px solid var(--line2); }
.sim-asset-row:last-child { border-bottom:none; }
.sim-asset-row__rank { color:var(--faint); font-family:var(--font-mono); font-size:11px; min-width:16px; }
.sim-asset-row__name { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-family:var(--font-mono,monospace); font-size:11px; }
.sim-asset-row__rev { font-weight:700; flex-shrink:0; font-family:var(--font-mono); font-size:12px; }
.sim-asset-row__spark { flex-shrink:0; }
.sim-asset-row__cmp { flex-shrink:0; }

#similar-assets-panel {
  background: var(--app-surface2);
  border: 1px solid var(--app-line);
  border-radius: 6px;
  padding: 10px 12px;
  margin-top: 10px;
  font-size: 12px;
}
#similar-assets-panel h3 { font-size: 12px; font-weight: 700; margin: 0 0 8px; letter-spacing: -0.01em; }
.sim-compare-btn-row { margin-top: 8px; display: flex; gap: 6px; align-items: center; }

/* ---------- asset compare dialog ---------- */
.cmp-table { width:100%; border-collapse:collapse; font-size:13px; }
.cmp-table td, .cmp-table th { padding:7px 10px; border-bottom:1px solid var(--line2); }
.cmp-table th { text-align:left; font-size:10px; text-transform:uppercase; letter-spacing:.07em; color:var(--faint); font-weight:600; }
.cmp-table td:not(:first-child) { font-family:var(--font-mono); font-variant-numeric:tabular-nums; }
.cmp-table td:first-child { color:var(--dim); }
.cmp-win { color:var(--pick,#46a758); font-weight:700; }
.cmp-header-row { display:flex; gap:0; }
.cmp-header-row th { flex:1; }

/* ---------- generic dash-card (shared by forecast + future panels) ---------- */
.dash-card {
  background: var(--app-surface);
  border: 1px solid var(--app-line);
  border-radius: 8px;
  padding: 16px;
  margin: 0 0 12px;
}
.dash-card__head {
  display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px;
}
.dash-card__title { font-size: 14px; font-weight: 700; margin: 0; letter-spacing: -0.01em; }
.dash-card__note { font-size: 11px; color: var(--faint); font-family: var(--font-mono); }

/* ---------- forecast panel ---------- */
.fc-panel { border: 1px solid var(--amber, #f59e0b); }
.fc-row { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.fc-stat { flex: 1; min-width: 100px; }
.fc-stat span { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--faint); }
.fc-stat b { display: block; font-size: 18px; font-weight: 700; margin-top: 2px; font-family: var(--font-mono); }
.fc-stat--main b { font-size: 22px; color: var(--text); }
.fc-trend { font-size: 13px; font-weight: 600; margin: 4px 0; }
.fc-note { font-size: 11px; color: var(--faint); margin: 4px 0 0; line-height: 1.5; }

/* ---------- Agency × keyword matrix (Insights tab) ---------- */
.st-agkw-table { width: 100%; border-collapse: collapse; font-size: 11px; }
.st-agkw-table thead th { padding: 0 6px 6px 0; text-align: center; font-size: 10px;
  font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--faint);
  border-bottom: 1px solid var(--app-line); white-space: nowrap; }
.st-agkw-table tbody tr { border-bottom: 1px solid var(--app-line); }
.st-agkw-table tbody tr:last-child { border-bottom: 0; }
.st-agkw-kw { font-family: var(--font-mono); color: var(--dim); padding: 4px 10px 4px 0;
  white-space: nowrap; font-size: 11px; min-width: 110px; }
.st-agkw-ag { text-align: center; padding: 0 4px 6px; }
.st-agkw-cell { text-align: center; padding: 4px 4px; font-family: var(--font-mono);
  font-size: 10px; color: var(--text); min-width: 54px; border-radius: 3px;
  transition: background .15s; }
.st-agkw-cell:hover { outline: 1px solid var(--app-line); }

/* ---------- Seasonal keyword calendar (Insights tab) ---------- */
.st-skc-table { width: 100%; border-collapse: collapse; font-size: 11px; }
.st-skc-table thead th { font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--faint); padding: 0 3px 6px;
  border-bottom: 1px solid var(--app-line); text-align: center; }
.st-skc-table tbody tr { border-bottom: 1px solid var(--app-line); }
.st-skc-table tbody tr:last-child { border-bottom: 0; }
.st-skc-kw { font-family: var(--font-mono); color: var(--dim); font-size: 11px;
  padding: 4px 10px 4px 0; white-space: nowrap; min-width: 110px; }
.st-skc-mo { text-align: center; padding: 0 2px 6px; min-width: 26px; }
.st-skc-cell { min-width: 24px; height: 20px; border-radius: 3px; padding: 0; }
.st-skc-cell:hover { outline: 1px solid var(--app-line); }
.st-skc-total { font-family: var(--font-mono); font-size: 11px; color: var(--dim);
  text-align: right; padding: 4px 0 4px 10px; white-space: nowrap; }

/* ---------- Keyword revenue map (Insights tab) ---------- */
.st-kw-tabs {
  display: flex; gap: 4px; margin-bottom: 10px; border-bottom: 1px solid var(--app-line);
  padding-bottom: 6px;
}
.st-kw-tab {
  padding: 4px 12px; font-size: 12px; border: 1px solid transparent;
  border-radius: 20px; background: transparent; color: var(--dim); cursor: pointer;
  font-family: inherit;
}
.st-kw-tab:hover { background: var(--app-surface2); color: var(--text); }
.st-kw-tab.is-active {
  background: var(--app-surface2); border-color: var(--app-line);
  color: var(--text); font-weight: 600;
}
.st-kw-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.st-kw-table thead th {
  text-align: left; font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: var(--faint); padding: 0 8px 6px 0;
  border-bottom: 1px solid var(--app-line);
}
.st-kw-table tbody tr { border-bottom: 1px solid var(--app-line); }
.st-kw-table tbody tr:last-child { border-bottom: 0; }
.st-kw-table tbody tr:hover { background: var(--app-surface2); }
.st-kw-name {
  font-family: var(--font-mono); color: var(--text); padding: 5px 10px 5px 0;
  white-space: nowrap; max-width: 220px; overflow: hidden; text-overflow: ellipsis;
}
.st-kw-val {
  font-family: var(--font-mono); color: var(--dim); padding: 5px 14px 5px 0;
  white-space: nowrap; text-align: right;
}
.st-kw-bar { width: 100%; min-width: 60px; }
.st-kw-bar span {
  display: block; height: 4px; border-radius: 2px; min-width: 2px;
  background: var(--accent, var(--red)); opacity: .5;
}

/* S16 — import conflict preview panel (shown in the overview card before apply) */
.sc-importprev {
  margin: 4px 0 12px; padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--accent, #4f8cff) 30%, transparent);
  border-radius: var(--radius, 8px);
  background: color-mix(in srgb, var(--accent, #4f8cff) 7%, transparent);
}
.sc-importprev__head { font-size: 11.5px; color: var(--dim); margin-bottom: 8px; }
.sc-importprev__head strong { color: var(--ink, inherit); }
.sc-importprev__list { list-style: none; margin: 0; padding: 0; max-height: 220px; overflow: auto; }
.sc-importprev__row {
  display: flex; align-items: baseline; gap: 8px;
  padding: 4px 0; font-size: 12px; border-top: 1px solid color-mix(in srgb, var(--ink, #888) 9%, transparent);
}
.sc-importprev__row:first-child { border-top: 0; }
.sc-importprev__tag {
  flex: 0 0 auto; font-size: 9.5px; letter-spacing: .04em; text-transform: uppercase;
  padding: 1px 6px; border-radius: 999px; font-weight: 600;
}
.sc-importprev__tag--new { background: color-mix(in srgb, #2e9e5b 22%, transparent); color: #2e9e5b; }
.sc-importprev__tag--changed { background: color-mix(in srgb, var(--accent, #4f8cff) 22%, transparent); color: var(--accent, #4f8cff); }
.sc-importprev__tag--drop { background: color-mix(in srgb, #e6584e 22%, transparent); color: #e6584e; }
.sc-importprev__name { flex: 1 1 auto; color: var(--ink, inherit); }
.sc-importprev__num { flex: 0 0 auto; color: var(--dim); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sc-importprev__delta { margin-left: 4px; font-size: 11px; }
.sc-importprev__delta.is-up { color: #2e9e5b; }
.sc-importprev__delta.is-down { color: #e6584e; }
.sc-importprev__acts { display: flex; gap: 8px; margin-top: 10px; }

/* ============ Keyword IQ (stats-keywordiq.js) — local ↔ online ============ */
.kiq-tag {
  font-size: 9.5px; letter-spacing: .05em; text-transform: uppercase; font-weight: 600;
  padding: 1px 7px; border-radius: 999px; vertical-align: middle; margin-left: 6px;
  background: color-mix(in srgb, var(--info, #35b5c4) 20%, transparent);
  color: var(--info, #35b5c4);
}
.kiq-import { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 10px 0 4px; }
.kiq-select {
  font: inherit; font-size: 12px; color: var(--text, inherit);
  background: var(--app-surface2, transparent); border: 1px solid var(--app-line, #333);
  border-radius: 5px; padding: 4px 8px; max-width: 100%;
}
.kiq-note { font-size: 11px; color: var(--faint, #888); margin: 6px 0; }
.kiq-cov { display: flex; gap: 16px; flex-wrap: wrap; margin: 12px 0; font-size: 12px; color: var(--dim); }
.kiq-cov__item b { color: var(--text, inherit); font-variant-numeric: tabular-nums; margin-right: 3px; }
.kiq-diff { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 6px; }
@media (max-width: 900px) { .kiq-diff { grid-template-columns: 1fr; } }
.kiq-col h4, .kiq-drill h4 { font-size: 12px; font-weight: 600; margin: 8px 0 6px; }
.kiq-table td, .kiq-table th { font-size: 12px; }
.kiq-chips { display: flex; flex-wrap: wrap; gap: 5px; margin: 4px 0; }
.kiq-chip {
  font: inherit; font-size: 11px; line-height: 1; padding: 4px 8px; border-radius: 999px;
  border: 1px solid var(--app-line, #333); background: var(--app-surface2, transparent);
  color: var(--dim, #aaa);
}
.kiq-chip--on { border-color: color-mix(in srgb, var(--info, #35b5c4) 45%, transparent); color: var(--info, #35b5c4); }
.kiq-chip--vis { border-color: color-mix(in srgb, #a855f7 45%, transparent); color: #a855f7; }
.kiq-chip--push { border-color: color-mix(in srgb, #f59e0b 45%, transparent); color: #f59e0b; }
.kiq-chip--add { cursor: pointer; border-color: color-mix(in srgb, #2e9e5b 45%, transparent); color: #2e9e5b; }
.kiq-chip--add:hover { background: color-mix(in srgb, #2e9e5b 12%, transparent); }
.kiq-chip--add.is-done { opacity: .45; cursor: default; text-decoration: line-through; }
.kiq-drill { margin-top: 18px; border-top: 1px dashed var(--line2, #333); padding-top: 12px; }
.kiq-drill .kiq-select { width: 100%; max-width: 420px; margin-bottom: 8px; }
.kiq-hits { display: flex; flex-direction: column; gap: 4px; }
.kiq-hit {
  font: inherit; font-size: 12px; text-align: left; padding: 6px 10px; cursor: pointer;
  border: 1px solid var(--app-line, #333); border-radius: 6px;
  background: var(--app-surface2, transparent); color: var(--text, inherit);
}
.kiq-hit:hover { border-color: var(--info, #35b5c4); }
.kiq-hit .sub { color: var(--faint, #888); font-size: 10.5px; margin-left: 6px; }
.kiq-asset { margin-top: 10px; padding: 12px; border: 1px solid var(--app-line, #333); border-radius: 8px; }
.kiq-asset__head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.kiq-asset__head .sub { color: var(--faint, #888); font-size: 11px; }
.kiq-asset__row { margin: 10px 0 0; }
.kiq-asset__row h5 { font-size: 11px; font-weight: 600; margin: 0 0 4px; color: var(--dim); }
.kiq-asset__row h5 .sub { font-weight: 400; color: var(--faint, #888); }