/* Social Stats — the read side of the stats engine (M5).
 *
 * Everything is namespaced .sstat-* so nothing leaks into the rest of the CRM.
 *
 * Visual language is deliberately the SAME as Social Channels and Client
 * Retention: white cards on a light page, 1px #e5e7eb borders, 12-14px radii,
 * #2563eb as the single primary, uppercase 10.5px section labels, 999px pills.
 * Global custom props come from ui/css/styles.css and are used with hard
 * fallbacks, same as those two files. The #134 dark overrides live at the end.
 *
 * One colour decision worth stating: MISSING is styled quietly (grey, italic,
 * lighter) and never red. A number we did not collect is not an error and must
 * not read as one — the loud styling is reserved for a source that actually
 * failed. That distinction is the whole page.
 */

.sstat-page {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 24px;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  height: 100%;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

/* ── header ──────────────────────────────────────────────────────────────── */
.sstat-head { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.sstat-head-titles { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sstat-title { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -0.01em; color: var(--text-primary, #1a1a1a); }
.sstat-sub { font-size: 13px; color: var(--text-muted, #666); max-width: 74ch; line-height: 1.45; }
.sstat-head-actions { margin-left: auto; display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }

.sstat-ctl { display: flex; flex-direction: column; gap: 4px; }
.sstat-ctl-l {
  font-size: 10px; text-transform: uppercase; letter-spacing: .06em;
  font-weight: 700; color: var(--text-muted, #666);
}
.sstat-select {
  border: 1px solid var(--border-color, #d1d5db); background: #fff; color: var(--text-primary, #1a1a1a);
  border-radius: 8px; padding: 7px 10px; font: inherit; font-size: 12.5px; cursor: pointer;
  max-width: 220px;
}
.sstat-select:focus { outline: none; border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,.12); }
.sstat-select:disabled { cursor: default; opacity: .6; }

.sstat-fresh-host, .sstat-refresh-host { display: flex; align-items: center; }

/* Freshness pill. Green while a collection exists, grey when none ever ran —
   "never collected" is a fact, not a fault, so it is not styled as an alarm. */
.sstat-fresh {
  display: inline-flex; align-items: center; gap: 6px;
  background: #ecfdf3; color: #15803d;
  border: 1px solid #bbf7d0; border-radius: 999px;
  padding: 6px 12px; font-size: 11.5px; font-weight: 600; white-space: nowrap;
}
.sstat-fresh-dot { width: 6px; height: 6px; border-radius: 999px; background: #16a34a; flex-shrink: 0; }
.sstat-fresh.is-none { background: #f1f5f9; color: #475569; border-color: #e2e8f0; }
.sstat-fresh.is-none .sstat-fresh-dot { background: #94a3b8; }

/* ── buttons ─────────────────────────────────────────────────────────────── */
.sstat-btn {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--border-color, #e5e7eb);
  background: var(--card-bg, #fff);
  color: var(--text-primary, #1a1a1a);
  border-radius: 8px; padding: 8px 16px;
  font: inherit; font-size: 13px; font-weight: 600;
  cursor: pointer; white-space: nowrap;
  transition: background .15s ease, border-color .15s ease;
}
.sstat-btn:hover { background: #f8fafc; border-color: #cbd5e1; }
.sstat-btn:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }
.sstat-btn:disabled { opacity: .55; cursor: default; }
.sstat-btn:disabled:hover { background: var(--card-bg, #fff); border-color: var(--border-color, #e5e7eb); }
.sstat-btn-primary { background: #2563eb; border-color: #2563eb; color: #fff; }
.sstat-btn-primary:hover { background: #1d4ed8; border-color: #1d4ed8; }
.sstat-btn-primary:disabled:hover { background: #2563eb; border-color: #2563eb; }
.sstat-btn-sm { padding: 5px 11px; font-size: 12px; border-radius: 7px; }

.sstat-spin {
  width: 13px; height: 13px; border-radius: 999px;
  border: 2px solid rgba(255,255,255,.45); border-top-color: #fff;
  display: inline-block; animation: sstat-spin .7s linear infinite;
}
@keyframes sstat-spin { to { transform: rotate(360deg); } }

/* ── body + panels ───────────────────────────────────────────────────────── */
.sstat-body { display: flex; flex-direction: column; gap: 18px; }

.sstat-panel {
  background: var(--card-bg, #fff);
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 14px;
  padding: 18px 20px;
  display: flex; flex-direction: column; gap: 14px;
}
.sstat-panel-hd { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.sstat-panel-titles { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 320px; }
.sstat-panel-kicker {
  font-size: 10px; text-transform: uppercase; letter-spacing: .12em;
  font-weight: 800; color: #94a3b8;
}
.sstat-panel-title { margin: 0; font-size: 16px; font-weight: 700; color: var(--text-primary, #1a1a1a); }
.sstat-panel-sub { font-size: 12.5px; color: var(--text-muted, #666); line-height: 1.5; max-width: 80ch; }

.sstat-chips-ctl { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.sstat-sort {
  border: 1px solid var(--border-color, #e5e7eb); background: #fff; color: var(--text-secondary, #444);
  border-radius: 999px; padding: 5px 12px; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
}
.sstat-sort:hover { border-color: #cbd5e1; background: #f8fafc; }
.sstat-sort.active { background: #10141b; border-color: #10141b; color: #fff; }
.sstat-sort:focus-visible { outline: 2px solid #2563eb; outline-offset: 1px; }

/* ── Panel 1: account cards ──────────────────────────────────────────────── */
.sstat-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 14px;
}
.sstat-card {
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 12px;
  background: #fff;
  padding: 15px 16px;
  display: flex; flex-direction: column; gap: 12px;
  position: relative;
  overflow: hidden;
}
/* A failed source is the only state that gets a loud edge. Skipped is a
   configuration fact and stays neutral, so the two are never confused. */
.sstat-card-failed { border-color: #fca5a5; background: linear-gradient(180deg, #fffafa, #fff); }
.sstat-card-failed::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 3px; background: #dc2626; }
.sstat-card-skipped { background: linear-gradient(180deg, #fcfdff, #fff); }

.sstat-card-hd { display: flex; align-items: flex-start; gap: 10px; }
.sstat-card-id { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.sstat-card-name-row { display: flex; align-items: center; gap: 7px; min-width: 0; }
.sstat-plat-dot { width: 9px; height: 9px; border-radius: 999px; flex-shrink: 0; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.sstat-card-plat { font-size: 13.5px; font-weight: 700; color: var(--text-primary, #1a1a1a); }
.sstat-card-page {
  font-size: 11.5px; color: var(--text-muted, #666);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sstat-card-sec {
  font-size: 10px; text-transform: uppercase; letter-spacing: .06em;
  font-weight: 700; color: #94a3b8; margin-top: -4px;
}
.sstat-card-foot { font-size: 10.5px; color: #94a3b8; margin-top: -2px; }

.sstat-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em;
  padding: 3px 9px; border-radius: 999px; white-space: nowrap; flex-shrink: 0;
}
.sstat-badge-dot { width: 6px; height: 6px; border-radius: 999px; flex-shrink: 0; }
.sstat-badge-live { background: #dcfce7; color: #15803d; }
.sstat-badge-live .sstat-badge-dot { background: #16a34a; }
.sstat-badge-skipped { background: #f1f5f9; color: #475569; }
.sstat-badge-skipped .sstat-badge-dot { background: #94a3b8; }
.sstat-badge-failed { background: #fee2e2; color: #b91c1c; }
.sstat-badge-failed .sstat-badge-dot { background: #dc2626; }

/* metric tiles */
.sstat-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
  gap: 10px;
}
.sstat-tile {
  background: #f8fafc; border: 1px solid #eef2f7; border-radius: 10px;
  padding: 10px 11px; display: flex; flex-direction: column; gap: 3px; min-width: 0;
}
.sstat-tile-v {
  font-size: 21px; font-weight: 800; line-height: 1.1; letter-spacing: -0.02em;
  color: var(--text-primary, #1a1a1a); font-feature-settings: "tnum";
  overflow: hidden; text-overflow: ellipsis;
}
/* The missing state. Small, grey, italic — visibly NOT a number, so it can
   never be misread as one, and visibly not an error either. */
.sstat-tile-v.is-missing {
  font-size: 12px; font-weight: 600; font-style: italic; color: #94a3b8;
  letter-spacing: 0; padding: 4px 0 5px; cursor: help;
}
.sstat-tile-l {
  font-size: 10px; text-transform: uppercase; letter-spacing: .04em;
  font-weight: 700; color: var(--text-muted, #666); line-height: 1.3;
}
.sstat-approx { font-size: 13px; font-weight: 700; color: #b45309; margin-left: 2px; cursor: help; }

/* chips */
.sstat-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sstat-chip {
  display: inline-flex; align-items: baseline; gap: 6px;
  border: 1px solid var(--border-color, #e5e7eb); background: #fff;
  border-radius: 999px; padding: 4px 11px; font-size: 11.5px; white-space: nowrap;
}
.sstat-chip-l { color: var(--text-muted, #666); font-weight: 600; }
.sstat-chip-v { color: var(--text-primary, #1a1a1a); font-weight: 800; font-feature-settings: "tnum"; }
.sstat-chip-v.is-missing { font-weight: 600; font-style: italic; color: #94a3b8; cursor: help; }

/* the explained-absence block */
.sstat-nonum {
  border: 1px dashed #cbd5e1; border-radius: 10px; background: #fcfdff;
  padding: 12px 13px; display: flex; flex-direction: column; gap: 5px;
}
.sstat-nonum-t { font-size: 12.5px; font-weight: 700; color: var(--text-secondary, #444); line-height: 1.4; }
/* The reason is printed IN FULL: no ellipsis, no line clamp, no max-height.
   A truncated reason is the thing that becomes a support ticket. */
.sstat-nonum-r { font-size: 12px; color: var(--text-muted, #666); line-height: 1.55; overflow-wrap: anywhere; }
.sstat-card-failed .sstat-nonum { border-color: #fca5a5; background: #fff5f5; }
.sstat-card-failed .sstat-nonum-r { color: #b91c1c; }

/* ── Panel 2: posts ──────────────────────────────────────────────────────── */
.sstat-rollups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}
.sstat-rollup {
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(37, 99, 235, 0.20), transparent 55%),
    #10141b;
  border: 1px solid #10141b; border-radius: 12px;
  padding: 16px 18px; display: flex; flex-direction: column; gap: 4px; cursor: help;
}
.sstat-rollup-v {
  font-size: 34px; font-weight: 800; line-height: 1; letter-spacing: -0.03em;
  color: #fff; font-feature-settings: "tnum";
}
.sstat-rollup-v.is-missing { font-size: 15px; font-weight: 600; font-style: italic; color: #8b95a5; padding: 9px 0 10px; }
.sstat-rollup-l {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .07em;
  font-weight: 700; color: #aeb6c2;
}
.sstat-rollup-f { font-size: 11px; color: #7c8798; line-height: 1.45; margin-top: 3px; }

.sstat-posts { display: flex; flex-direction: column; gap: 10px; }
.sstat-post {
  border: 1px solid var(--border-color, #e5e7eb); border-radius: 12px; background: #fff;
  padding: 13px 15px; display: flex; flex-direction: column; gap: 9px;
}
.sstat-post-meta { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.sstat-post-plat { font-size: 12.5px; font-weight: 700; color: var(--text-primary, #1a1a1a); }
.sstat-post-date { font-size: 11.5px; color: var(--text-muted, #666); font-feature-settings: "tnum"; }
.sstat-post-type {
  font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
  background: #f1f5f9; color: #475569; padding: 2px 7px; border-radius: 5px;
}
/* Provenance, not decoration: this post has a brief behind it. */
.sstat-post-mark {
  font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
  background: #dbeafe; color: #1d4ed8; padding: 2px 8px; border-radius: 999px; cursor: help;
}
.sstat-post-open {
  margin-left: auto; display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; font-weight: 600; color: #2563eb; text-decoration: none; white-space: nowrap;
}
.sstat-post-open:hover { text-decoration: underline; text-underline-offset: 2px; }
.sstat-post-open:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; border-radius: 4px; }
.sstat-post-nolink { margin-left: auto; font-size: 11px; font-style: italic; color: #94a3b8; cursor: help; }
.sstat-post-cap {
  font-size: 13px; color: var(--text-secondary, #444); line-height: 1.55;
  overflow-wrap: anywhere; max-width: 96ch;
}
.sstat-post-cap.is-missing { font-style: italic; color: #94a3b8; font-size: 12px; }
.sstat-post-nonum { font-size: 12px; font-style: italic; color: #94a3b8; line-height: 1.5; }

/* ── Panel 3: trend ──────────────────────────────────────────────────────── */
.sstat-sub-hd { display: flex; flex-direction: column; gap: 3px; margin-top: 4px; }
.sstat-sub-hd-t { font-size: 13.5px; font-weight: 700; color: var(--text-primary, #1a1a1a); }
.sstat-sub-hd-s { font-size: 12px; color: var(--text-muted, #666); line-height: 1.5; max-width: 80ch; }

.sstat-chart {
  border: 1px solid var(--border-color, #e5e7eb); border-radius: 12px; background: #fff;
  padding: 14px 16px; display: flex; flex-direction: column; gap: 10px;
}
.sstat-chart-hd { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.sstat-chart-t { font-size: 13px; font-weight: 700; color: var(--text-primary, #1a1a1a); }
.sstat-chart-n { font-size: 11px; color: var(--text-muted, #666); }

/* preserveAspectRatio="none" stretches the viewBox to the wrapper, so the chart
   fills any column width without recomputing geometry in JS. The height is
   pinned to the viewBox height, which makes the VERTICAL scale exactly 1:1 and
   leaves only the horizontal stretched — every stroke inside carries
   vector-effect="non-scaling-stroke" so line weights survive it. Text and
   circles would NOT survive it, so the axis labels below are HTML, not <text>,
   and point markers are vertical pips rather than dots. See the matching note
   in social-stats.js. */
.sstat-svg-wrap { width: 100%; overflow: hidden; }
.sstat-svg { width: 100%; height: 150px; display: block; }
.sstat-grid { stroke: #eef2f7; stroke-width: 1; }
.sstat-hit { cursor: help; }

/* y range, stated so the shape has a magnitude */
.sstat-chart-scale {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 10px; color: #94a3b8; font-feature-settings: "tnum";
  font-weight: 700; margin-bottom: -6px;
}
.sstat-chart-scale-min { font-weight: 600; }
/* x labels: start, middle, end. space-between puts them under the first,
   middle and last plotted columns closely enough at this label density. */
.sstat-chart-x {
  display: flex; justify-content: space-between; gap: 8px;
  font-size: 10px; color: #94a3b8; font-feature-settings: "tnum";
}
.sstat-chart-x span { white-space: nowrap; }
.sstat-chart-x span:first-child { text-align: left; }
.sstat-chart-x span:last-child { text-align: right; }

.sstat-legend { display: flex; flex-wrap: wrap; gap: 12px; }
.sstat-legend-i { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; }
.sstat-legend-dot { width: 8px; height: 8px; border-radius: 999px; flex-shrink: 0; }
.sstat-legend-l { color: var(--text-secondary, #444); font-weight: 600; }
.sstat-legend-m { color: #94a3b8; font-feature-settings: "tnum"; cursor: help; }

/* ── flash + states ──────────────────────────────────────────────────────── */
.sstat-flash {
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  border-radius: 12px; padding: 13px 15px; font-size: 13px;
}
.sstat-flash-t { font-weight: 700; line-height: 1.45; }
.sstat-flash-d { font-weight: 400; line-height: 1.5; overflow-wrap: anywhere; }
.sstat-flash-reasons { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; }
.sstat-flash-reasons li { font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
.sstat-flash-ok { background: #e7f6ec; border: 1px solid #b7e3c6; color: #166534; }
.sstat-flash-warn { background: #fffbf3; border: 1px solid #fcd9a5; color: #92600e; }
.sstat-flash-err { background: #fef2f2; border: 1px solid #fca5a5; color: #b91c1c; }

.sstat-loading { padding: 22px 4px; font-size: 13px; color: var(--text-muted, #666); }
.sstat-empty-card {
  border: 1px dashed #cbd5e1; border-radius: 12px; background: #fcfdff;
  padding: 22px 20px; display: flex; flex-direction: column; gap: 7px; align-items: flex-start;
}
.sstat-empty-title { font-size: 14.5px; font-weight: 700; color: var(--text-primary, #1a1a1a); }
.sstat-empty-body { font-size: 13px; color: var(--text-secondary, #444); line-height: 1.55; max-width: 82ch; overflow-wrap: anywhere; }
.sstat-error { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 8px 0; }
.sstat-error-msg { font-size: 13px; color: #b91c1c; line-height: 1.5; overflow-wrap: anywhere; }

@media (prefers-reduced-motion: reduce) {
  .sstat-spin { animation-duration: 2.4s; }
  .sstat-btn, .sstat-select, .sstat-sort { transition: none; }
}

/* ── responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .sstat-head-actions { margin-left: 0; width: 100%; }
  .sstat-chips-ctl { margin-left: 0; }
}
@media (max-width: 620px) {
  .sstat-page { padding: 14px; gap: 14px; }
  .sstat-title { font-size: 19px; }
  .sstat-panel { padding: 15px 14px; border-radius: 12px; }
  .sstat-cards { grid-template-columns: 1fr; }
  .sstat-select { max-width: 100%; width: 100%; }
  .sstat-ctl { flex: 1 1 140px; }
  .sstat-refresh-host, .sstat-refresh-host .sstat-btn { width: 100%; justify-content: center; }
  .sstat-rollup-v { font-size: 28px; }
  /* The link stops floating right once the meta row wraps, otherwise it lands
     alone on its own line below the date. */
  .sstat-post-open, .sstat-post-nolink { margin-left: 0; }
  .sstat-svg { height: 132px; }
}

/* ── #134 dark mode overrides ─────────────────────────────────────────────── */
/* The .sstat-rollup tiles are already a dark surface in light mode, so they are
   deliberately left alone. */

html[data-theme="dark"] .sstat-select { background: #0f172a; }
html[data-theme="dark"] .sstat-select:focus {
  border-color: #60a5fa; box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.18);
}
html[data-theme="dark"] .sstat-btn:hover { background: #334155; border-color: #475569; }
html[data-theme="dark"] .sstat-btn:focus-visible { outline-color: #60a5fa; }

html[data-theme="dark"] .sstat-fresh { background: rgba(34, 197, 94, 0.14); color: #86efac; border-color: rgba(74, 222, 128, 0.34); }
html[data-theme="dark"] .sstat-fresh .sstat-fresh-dot { background: #4ade80; }
html[data-theme="dark"] .sstat-fresh.is-none { background: rgba(148, 163, 184, 0.14); color: #94a3b8; border-color: rgba(148, 163, 184, 0.24); }

html[data-theme="dark"] .sstat-panel,
html[data-theme="dark"] .sstat-card,
html[data-theme="dark"] .sstat-post,
html[data-theme="dark"] .sstat-chart { background: #1e293b; }

html[data-theme="dark"] .sstat-sort { background: #1e293b; }
html[data-theme="dark"] .sstat-sort:hover { border-color: #475569; background: #334155; }
/* Light mode marks the active pill with the near-black strip colour; on a dark
   page that reads as "off", so it inverts to a light slab instead. */
html[data-theme="dark"] .sstat-sort.active { background: #e2e8f0; border-color: #e2e8f0; color: #0f172a; }
html[data-theme="dark"] .sstat-sort:focus-visible { outline-color: #60a5fa; }

html[data-theme="dark"] .sstat-card-failed {
  border-color: rgba(248, 113, 113, 0.42);
  background: linear-gradient(180deg, rgba(239, 68, 68, 0.10), #1e293b);
}
html[data-theme="dark"] .sstat-card-failed::before { background: #f87171; }
html[data-theme="dark"] .sstat-card-skipped { background: #1e293b; }

html[data-theme="dark"] .sstat-badge-live { background: rgba(34, 197, 94, 0.16); color: #86efac; }
html[data-theme="dark"] .sstat-badge-live .sstat-badge-dot { background: #4ade80; }
html[data-theme="dark"] .sstat-badge-skipped { background: rgba(148, 163, 184, 0.16); color: #cbd5e1; }
html[data-theme="dark"] .sstat-badge-skipped .sstat-badge-dot { background: #94a3b8; }
html[data-theme="dark"] .sstat-badge-failed { background: rgba(239, 68, 68, 0.18); color: #fca5a5; }
html[data-theme="dark"] .sstat-badge-failed .sstat-badge-dot { background: #f87171; }

html[data-theme="dark"] .sstat-tile { background: #273449; border-color: rgba(148, 163, 184, 0.14); }
html[data-theme="dark"] .sstat-tile-v.is-missing,
html[data-theme="dark"] .sstat-chip-v.is-missing,
html[data-theme="dark"] .sstat-post-cap.is-missing,
html[data-theme="dark"] .sstat-post-nolink,
html[data-theme="dark"] .sstat-post-nonum,
html[data-theme="dark"] .sstat-legend-m { color: #94a3b8; }
html[data-theme="dark"] .sstat-approx { color: #fbbf24; }

html[data-theme="dark"] .sstat-chip { background: #273449; border-color: rgba(148, 163, 184, 0.16); }
html[data-theme="dark"] .sstat-nonum { border-color: rgba(148, 163, 184, 0.26); background: rgba(15, 23, 42, 0.35); }
html[data-theme="dark"] .sstat-card-failed .sstat-nonum {
  border-color: rgba(248, 113, 113, 0.38); background: rgba(239, 68, 68, 0.08);
}
html[data-theme="dark"] .sstat-card-failed .sstat-nonum-r { color: #fca5a5; }

html[data-theme="dark"] .sstat-post-type { background: rgba(148, 163, 184, 0.18); color: #cbd5e1; }
html[data-theme="dark"] .sstat-post-mark { background: rgba(59, 130, 246, 0.22); color: #93c5fd; }
html[data-theme="dark"] .sstat-post-open { color: #60a5fa; }
html[data-theme="dark"] .sstat-post-open:focus-visible { outline-color: #60a5fa; }

html[data-theme="dark"] .sstat-grid { stroke: rgba(148, 163, 184, 0.16); }
html[data-theme="dark"] .sstat-chart-scale,
html[data-theme="dark"] .sstat-chart-x { color: #64748b; }

html[data-theme="dark"] .sstat-flash-ok {
  background: rgba(34, 197, 94, 0.14); border-color: rgba(74, 222, 128, 0.36); color: #86efac;
}
html[data-theme="dark"] .sstat-flash-warn {
  background: rgba(245, 158, 11, 0.12); border-color: rgba(245, 158, 11, 0.38); color: #fcd34d;
}
html[data-theme="dark"] .sstat-flash-err {
  background: rgba(239, 68, 68, 0.14); border-color: rgba(248, 113, 113, 0.38); color: #fca5a5;
}
html[data-theme="dark"] .sstat-empty-card { border-color: rgba(148, 163, 184, 0.26); background: #1e293b; }
html[data-theme="dark"] .sstat-error-msg { color: #fca5a5; }
html[data-theme="dark"] .sstat-btn:not(.sstat-btn-primary) .sstat-spin {
  border-color: rgba(96, 165, 250, 0.30); border-top-color: #60a5fa;
}