/* The design-system layer, loaded last on every panel page. VibeFarsi's Persian RTL rules and the
   ui-ux-pro-max checklist on top of the glass theme in skin.css: one type scale (six sizes) with
   line-heights by role, no letter-spacing on Persian, text that passes 4.5:1, 44px tap targets,
   16px form fields (iOS doesn't zoom), one focus ring, motion tokens that honour reduced motion, and
   the VibeFarsi pieces this panel uses (empty state, skeleton, stat delta, field help/error). */

:root {
  /* type: six sizes, nothing in between */
  --fs-xs: 0.8125rem;   /* 13px: meta, captions, chips */
  --fs-sm: 0.9375rem;   /* 15px: body in dense UI, tables, buttons */
  --fs-base: 1rem;      /* 16px: body, form fields */
  --fs-lg: 1.125rem;    /* 18px: card titles */
  --fs-xl: 1.5rem;      /* 24px: KPI numbers, section headings */
  --fs-2xl: 1.875rem;   /* 30px: page title */
  --lh-body: 1.8;       /* Persian needs the room */
  --lh-heading: 1.25;
  --lh-control: 1.5;
  /* the old names the dashboard uses, on the same scale */
  --cds-font-size-caption: var(--fs-xs);
  --cds-font-size-body: var(--fs-sm);
  --cds-font-size-heading: var(--fs-lg);
  --cds-font-size-title: var(--fs-2xl);
  /* motion (VibeFarsi turquoise/glass) */
  --motion: 240ms;
  --motion-fast: 160ms;
  --motion-ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* shape and touch */
  --tap: 44px;
  --shape-control: 12px;
  --shape-surface: 22px;
}

/* Text colours that pass 4.5:1 on the light glass (the iOS tints are too pale for text) */
html[data-theme="light"] {
  --text-muted: #5f6470;
  --text-secondary: #4a4f5a;
  --accent: #0062d6;
  --accent-hover: #0052b4;
  --coral: #c4161c;
  --good: #1d7a34;
  --ring: #0062d6;
}
html[data-theme="dark"] { --ring: #64b5ff; }

/* ---------- typography ---------- */
html[lang="fa"] body { font-size: var(--fs-base); line-height: var(--lh-body); }
html[lang="fa"] :is(body, body *) { letter-spacing: 0 !important; }  /* tracking breaks Persian letter joins */
h1, h2, h3, h4, .sj-title, .sj-pagetitle, .sj-h2 { line-height: var(--lh-heading); }
button, .sj-btn, .icon-btn, input, select, label, .sj-chip, .pn-chip { line-height: var(--lh-control); }
.text-xs, .sidebar-section-title, [class*="text-[0.7rem]"] { font-size: var(--fs-xs) !important; }
.nav-item, .dropdown-item, .sidebar-label { font-size: var(--fs-sm); }
.text-sm { font-size: var(--fs-sm) !important; }
.sj-num, .sj-goal-num, td, .sj-kpi-num, time { font-variant-numeric: tabular-nums; }
.sj-note, .pn-note { font-size: var(--fs-sm); line-height: var(--lh-body); }
small, .sj-small { font-size: var(--fs-xs); }

/* ---------- focus: one visible ring everywhere ---------- */
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; border-radius: inherit; }
input:focus-visible, textarea:focus-visible, select:focus-visible { outline-offset: 0; }

/* ---------- touch: 44px targets ---------- */
button, [role="button"], summary, select, a.sj-btn, .sj-btn, .icon-btn, .dropdown-item, .nav-item, .sj-chip-btn, .sj-iconbtn,
.pn button, .pn-nav a, .sj-seg button, .sj-agent, input[type="file"] { cursor: pointer; }
.sj-btn, .icon-btn, .dropdown-item, .pn button, .pn input:not([type="checkbox"]):not([type="radio"]), .pn select,
.sj-form input, .sj-form select, .sj-iconbtn, .sj-chip-btn, a.sj-btn { min-height: var(--tap); }
.icon-btn, .sj-iconbtn { min-width: var(--tap); }
.sj-seg button { min-height: 36px; padding-inline: 14px; }
.sj-seg { padding: 4px; }
summary { min-height: var(--tap); display: flex; align-items: center; gap: 8px; }
.pn-nav { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.pn-nav a { display: inline-flex; align-items: center; min-height: var(--tap); padding-inline: 12px; border-radius: var(--shape-control); color: var(--text-secondary); text-decoration: none; }
.pn-nav a:hover { background: var(--accent-soft); color: var(--text); }
.pn-nav #who { padding-inline: 12px; color: var(--text-muted); font-size: var(--fs-sm); }
.sj-linkbtn:not(p .sj-linkbtn) { min-height: var(--tap); padding-inline: 8px; }
.sj-copy { min-width: var(--tap); }
input[type="checkbox"], input[type="radio"] { width: 20px; height: 20px; }

/* ---------- forms: 16px so iOS Safari doesn't zoom on focus ---------- */
input:not([type="checkbox"]):not([type="radio"]), textarea, select { font-size: max(var(--fs-base), 1em); }
.pn label, .sj-form label { gap: 6px; font-size: var(--fs-sm); }
.field-help { font-size: var(--fs-xs); color: var(--text-muted); }
.field-error { font-size: var(--fs-xs); color: var(--coral); }
[aria-invalid="true"] { border-color: var(--coral) !important; }

/* ---------- motion ---------- */
.sj-btn, .icon-btn, .dropdown-item, .nav-item, .sj-card, .sj-agent, .sj-chip-btn, .pn button {
  transition: background-color var(--motion-fast) var(--motion-ease), border-color var(--motion-fast) var(--motion-ease),
              color var(--motion-fast) var(--motion-ease), transform var(--motion-fast) var(--motion-ease), box-shadow var(--motion) var(--motion-ease);
}
.sj-btn:active, .icon-btn:active, .pn button:active, .sj-agent:active { transform: scale(0.97); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
  .sj-btn:active, .icon-btn:active, .pn button:active, .sj-agent:active { transform: none; }
}

/* ---------- icons (lucide): stroke follows the text weight, directional ones flip in RTL ---------- */
.nav-icon, .icon-btn svg, .sj-ico { stroke-width: 1.75; }
.nav-item.is-active .nav-icon { stroke-width: 2.1; }
[dir="rtl"] .flip-rtl, [dir="rtl"] use[href="#i-logout"] { transform: scaleX(-1); transform-origin: center; }
.sj-ico { width: 1.25em; height: 1.25em; flex: none; vertical-align: -0.25em; }

/* ---------- VibeFarsi: empty state ---------- */
.vf-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 32px 16px; text-align: center;
  border: 1px dashed var(--border-strong); border-radius: var(--shape-surface); }
.vf-empty-ico { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); }
.vf-empty-ico svg { width: 22px; height: 22px; }
.vf-empty b { font-size: var(--fs-base); }
.vf-empty p { margin: 0; max-width: 28rem; font-size: var(--fs-sm); color: var(--text-secondary); line-height: var(--lh-body); }
.vf-empty .sj-btn { margin-top: 8px; }

/* ---------- VibeFarsi: skeleton (pulse, or a shimmer that sweeps right to left) ---------- */
.vf-skel { display: block; border-radius: 10px; background: var(--surface-3); position: relative; overflow: hidden; }
.vf-skel::after { content: ""; position: absolute; inset: 0; transform: translateX(100%);
  background: linear-gradient(to left, transparent, rgba(255, 255, 255, 0.45), transparent); animation: vf-shine 1.4s var(--motion-ease) infinite; }
html[data-theme="dark"] .vf-skel::after { background: linear-gradient(to left, transparent, rgba(255, 255, 255, 0.08), transparent); }
@keyframes vf-shine { to { transform: translateX(-100%); } }
.vf-skel-line { height: 12px; margin: 8px 0; }
.vf-skel-block { height: 120px; margin: 8px 0; }
.vf-skel-group { padding: 4px 0; }

/* ---------- VibeFarsi: stat delta (up and forward is up-left in RTL) ---------- */
.sj-delta svg { width: 14px; height: 14px; vertical-align: -2px; margin-inline-end: 2px; }

#studio-form-title { display: flex; align-items: center; gap: 8px; }
/* phones: the 13 agents as a compact two-column grid; each one's description is on its form */
@media (max-width: 640px) {
  .sj-agents { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .sj-agent { padding: 12px; align-items: center; text-align: center; }
  .sj-agent small { display: none; }
  .sj-agent b { font-size: var(--fs-sm); }
}

/* ---------- section index for long settings pages ---------- */
.pn.pn-wide { max-width: 76rem; }
.pn-layout { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: 24px; align-items: start; }
.pn-toc { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 2px; padding: 12px; border-radius: var(--shape-surface);
  background: var(--surface); border: 1px solid var(--border); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  max-height: calc(100vh - 32px); overflow-y: auto; }
.pn-toc b { padding: 4px 12px 8px; font-size: var(--fs-xs); color: var(--text-muted); font-weight: 600; }
.pn-toc a { display: flex; align-items: center; gap: 10px; min-height: var(--tap); padding-inline: 12px; border-radius: var(--shape-control);
  color: var(--text-secondary); text-decoration: none; font-size: var(--fs-sm); }
.pn-toc a svg { width: 18px; height: 18px; flex: none; }
.pn-toc a:hover { background: var(--accent-soft); color: var(--text); }
.pn-toc a[aria-current="true"] { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.pn-main { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.pn-main > section { scroll-margin-top: 16px; }
@media (max-width: 900px) {
  .pn-layout { grid-template-columns: minmax(0, 1fr); }
  .pn-toc { position: sticky; top: 0; z-index: 5; flex-direction: row; overflow-x: auto; max-height: none; padding: 8px; border-radius: 16px;
    scrollbar-width: none; scroll-snap-type: x proximity; }
  .pn-toc::-webkit-scrollbar { display: none; }
  .pn-toc b { display: none; }
  .pn-toc a { flex: none; white-space: nowrap; scroll-snap-align: start; }
  .pn-main > section { scroll-margin-top: 76px; }
}

/* ---------- board: Jalali calendar view (Saturday first; a holiday is red and says «تعطیل») ---------- */
#board-view { display: inline-flex; align-self: flex-start; margin-block-end: 12px; }
#board-view [aria-selected="true"] { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.sj-jcal-head { display: flex; align-items: center; gap: 8px; margin-block-end: 8px; }
.sj-jcal-head h3 { margin: 0; flex: 1; font-size: var(--fs-lg); text-align: center; }
.sj-jcal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.sj-jcal-wd { text-align: center; font-size: var(--fs-xs); color: var(--text-muted); padding-block: 4px; }
.sj-jcal-day { min-height: 104px; padding: 6px; border-radius: var(--shape-control); background: var(--surface); border: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sj-jcal-day.is-today { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.sj-jcal-num { align-self: flex-start; min-width: 32px; min-height: 32px; border-radius: 50%; border: 0; background: none; color: var(--text); font-weight: 600; font-size: var(--fs-sm); }
.sj-jcal-num:hover { background: var(--accent-soft); }
.sj-jcal-day.is-holiday .sj-jcal-num { color: var(--coral); }
.sj-jcal-occ { font-size: var(--fs-xs); line-height: 1.5; color: var(--text-secondary); overflow-wrap: anywhere; }
.sj-jcal-occ.is-holiday { color: var(--coral); font-weight: 600; }
.sj-jcal-card { text-align: start; font-size: var(--fs-xs); line-height: 1.5; padding: 4px 6px; border-radius: 8px; border: 0; color: var(--text);
  background: var(--accent-soft); border-inline-start: 3px solid var(--accent); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-height: 28px; }
.sj-jcal-card[data-stage="published"] { border-inline-start-color: var(--good); }
.sj-jcal-card[data-stage="script"], .sj-jcal-card[data-stage="filmed"] { border-inline-start-color: var(--orange, #c26a00); }
@media (max-width: 640px) {
  .sj-jcal-grid { grid-template-columns: minmax(0, 1fr); }
  .sj-jcal-wd, .sj-jcal-pad { display: none; }
  .sj-jcal-day { min-height: 0; flex-direction: row; flex-wrap: wrap; align-items: center; }
  .sj-jcal-day:not(.is-today):not(:has(.sj-jcal-occ, .sj-jcal-card)) { display: none; }  /* phones list only days with something on them */
}

/* ---------- settings: AI providers, tried in order ---------- */
.ai-chain { list-style: none; margin: 8px 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ai-empty { padding: 16px; border: 1px dashed var(--border-strong); border-radius: var(--shape-control); color: var(--text-secondary); font-size: var(--fs-sm); }
.ai-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 12px; border-radius: var(--shape-control);
  background: var(--surface); border: 1px solid var(--border); }
.ai-rank { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-weight: 700; font-size: var(--fs-sm); }
.ai-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ai-tag { margin-inline-start: 8px; font-weight: 400; color: var(--good); }
.ai-meta { font-size: var(--fs-xs); color: var(--text-muted); overflow-wrap: anywhere; text-align: start; }
.ai-model { display: flex; align-items: center; gap: 8px; font-size: var(--fs-sm); }
.ai-model input { flex: 1; min-width: 0; }
.ai-actions { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.ai-mini { min-width: var(--tap); }
.ai-h3 { margin: 20px 0 8px; font-size: var(--fs-base); }
.ai-group { border: 0; padding: 0; margin: 0 0 12px; }
.ai-group legend { font-size: var(--fs-xs); color: var(--text-muted); margin-block-end: 6px; padding: 0; }
.ai-tiles { display: flex; flex-wrap: wrap; gap: 8px; }
.ai-tile { min-height: var(--tap); padding-inline: 14px; border-radius: 999px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); font-size: var(--fs-sm); }
.ai-tile[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.ai-form { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; padding: 14px; border-radius: var(--shape-control); background: var(--accent-soft); }
.ai-form label { display: flex; flex-direction: column; }
.ai-keylink { align-self: flex-start; display: inline-flex; align-items: center; min-height: var(--tap); padding-inline: 14px; border-radius: var(--shape-control);
  background: var(--surface); border: 1px solid var(--border-strong); color: var(--accent); text-decoration: none; font-weight: 600; }
.ai-why { margin-top: 12px; }
@media (max-width: 640px) { .ai-item { grid-template-columns: auto minmax(0, 1fr); } .ai-actions { grid-column: 1 / -1; } }

/* ---------- publish a reel ---------- */
.sj-pub-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; margin-block-end: 16px; }
@media (max-width: 1200px) { .sj-pub-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } #pub-post-card { grid-column: 1 / -1; } }
@media (max-width: 760px) { .sj-pub-grid { grid-template-columns: minmax(0, 1fr); } }
.sj-pub-grid .sj-card { display: flex; flex-direction: column; gap: 12px; }
.sj-pub-grid h3 { margin: 0; }
.sj-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sj-drop { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 28px 16px; text-align: center; cursor: pointer;
  border: 2px dashed var(--border-strong); border-radius: var(--shape-surface); color: var(--text-secondary); transition: border-color var(--motion-fast), background var(--motion-fast); }
.sj-drop:hover, .sj-drop.over, .sj-drop:focus-within { border-color: var(--accent); background: var(--accent-soft); }
.sj-drop .sj-ico { width: 32px; height: 32px; color: var(--accent); }
.sj-drop b { color: var(--text); font-size: var(--fs-base); }
.sj-drop small { font-size: var(--fs-xs); }
#pub-preview { width: 100%; max-height: 420px; border-radius: var(--shape-control); background: #000; }
.sj-progress { height: 8px; border-radius: 99px; background: var(--surface-3); overflow: hidden; }
.sj-progress span { display: block; height: 100%; width: 0; background: var(--accent); transition: width var(--motion-fast) linear; }
.sj-field { display: flex; flex-direction: column; gap: 6px; font-size: var(--fs-sm); }
.sj-field textarea, .sj-field select, .sj-field input:not([type="range"]):not([type="file"]) { width: 100%; }
.sj-check { display: flex; align-items: center; gap: 8px; font-size: var(--fs-sm); min-height: var(--tap); }
.sj-cover-opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 480px) { .sj-cover-opts { grid-template-columns: minmax(0, 1fr); } }
.sj-cover-wrap { position: relative; align-self: center; width: min(100%, 270px); aspect-ratio: 9 / 16; border-radius: 16px; overflow: hidden; background: #111; }
.sj-cover-wrap canvas { width: 100%; height: 100%; display: block; }
.sj-cover-guide, .sj-cover-guide span { position: absolute; inset: 0; pointer-events: none; }
.sj-cover-guide .g-grid { inset: 12.5% 0; outline: 2px dashed rgba(255, 214, 10, 0.9); outline-offset: -2px; }
.sj-cover-guide .g-ui { top: auto; height: 20%; background: linear-gradient(to top, rgba(0, 0, 0, 0.55), transparent); }
.sj-cover-wrap.no-guide .sj-cover-guide { display: none; }
.sj-best { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.sj-chip-btn { min-height: 36px; padding-inline: 12px; border-radius: 99px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--accent); font-weight: 600; }
.sj-qrow { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 0; border-bottom: 1px solid var(--border); }
.sj-qrow:last-child { border-bottom: 0; }
.sj-qrow > div { flex: 1; min-width: 12rem; }
.sj-qrow p { margin: 2px 0 0; }

/* ---------- comments: answer from the panel, keyword automation ---------- */
.sj-comment-top .sj-chip-btn { min-height: 32px; padding-inline: 10px; font-size: var(--fs-xs); }
.sj-reply-box { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; padding: 10px; border-radius: var(--shape-control); background: var(--accent-soft); }
.sj-reply-box textarea { width: 100%; }
.sj-hidden-c { opacity: 0.5; }
.sj-rule { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0 0 12px; padding: 14px; border: 1px solid var(--border); border-radius: var(--shape-control); }
.sj-rule legend { padding-inline: 6px; font-size: var(--fs-sm); font-weight: 600; }
.sj-rule .sj-field:nth-of-type(3) { grid-column: 1 / -1; }
.sj-rule > button { justify-self: start; }
@media (max-width: 640px) { .sj-rule { grid-template-columns: minmax(0, 1fr); } }
#auto-log-box { margin-top: 12px; }
.sj-crit-paste textarea { width: 100%; margin-top: 8px; }

/* ---------- best time: followers online by hour ---------- */
.sj-online { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 3px; height: 160px; align-items: end; direction: ltr; margin-block: 8px; }
.sj-ob { display: flex; flex-direction: column; justify-content: flex-end; height: 100%; gap: 4px; }
.sj-ob span { display: block; border-radius: 6px 6px 2px 2px; background: color-mix(in srgb, var(--accent) 35%, transparent); }
.sj-ob.top span { background: var(--accent); }
.sj-ob small { font-size: 10px; color: var(--text-muted); text-align: center; height: 14px; white-space: nowrap; }

/* insights: the data behind the analysis */
.sj-warn-line { color: var(--coral); }
.sj-auto-sum { display: flex; flex-direction: column; gap: 4px; margin-block-end: 8px; }
.sj-ins-meta { margin: 0 0 12px; }
.sj-ins-meta.sj-warn { color: var(--coral); }
.sj-muted { color: var(--text-muted); }

/* settings: link in bio */
.bio-link { display: flex; flex-direction: column; gap: 6px; padding: 12px; margin-block-end: 8px; border: 1px solid var(--border); border-radius: var(--shape-control); }
.bio-link .pn-row { flex-wrap: wrap; align-items: center; }

/* ---------- settings: data sources and coverage ---------- */
.src-group { margin-block: 16px; }
.src-group > h3 { font-size: var(--fs-base); margin: 0 0 10px; }
.src-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); gap: 12px; }
.src-card { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: var(--shape-control); border: 1px solid var(--border); background: var(--surface); }
.src-card.is-on { border-color: color-mix(in srgb, var(--good) 45%, var(--border)); }
.src-card.is-soon { opacity: 0.75; }
.src-head { display: flex; gap: 10px; align-items: center; }
.src-ico { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 12px; background: var(--accent-soft); color: var(--accent); }
.src-ico svg { width: 20px; height: 20px; }
.src-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 2px; }
.src-tier, .src-kind, .src-badge { font-size: var(--fs-xs); padding: 1px 8px; border-radius: 99px; background: var(--surface-3); color: var(--text-secondary); }
.src-tier.free { background: color-mix(in srgb, var(--good) 15%, transparent); color: var(--good); }
.src-tier.paid { background: color-mix(in srgb, var(--coral) 12%, transparent); color: var(--coral); }
.src-badge.ok { background: color-mix(in srgb, var(--good) 15%, transparent); color: var(--good); }
.src-badge.bad { background: color-mix(in srgb, var(--coral) 15%, transparent); color: var(--coral); }
.src-state { font-size: var(--fs-sm); color: var(--text-secondary); }
.src-missing ul { margin: 4px 0 0; padding-inline-start: 18px; }
.src-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.src-chip { font-size: var(--fs-xs); padding: 2px 8px; border-radius: 99px; }
.src-chip.on { background: color-mix(in srgb, var(--good) 16%, transparent); color: var(--good); }
.src-chip.off { background: var(--surface-3); color: var(--text-muted); }
.src-form { display: flex; flex-direction: column; gap: 8px; }
.src-nums { grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); }
.src-guide ol { margin: 6px 0; padding-inline-start: 20px; font-size: var(--fs-sm); line-height: var(--lh-body); }
.src-warn { margin: 0; font-size: var(--fs-xs); color: var(--coral); }
.src-key { white-space: pre-wrap; word-break: break-all; font-size: var(--fs-xs); }
.cov-group h3 { font-size: var(--fs-base); margin: 12px 0 6px; }
.cov-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.cov-table td { padding: 6px 8px; border-bottom: 1px solid var(--border); vertical-align: top; }
.cov-table td:first-child { width: 30%; font-weight: 600; }
.cov-ok td:nth-child(2) { color: var(--good); }
.cov-waiting td:nth-child(2) { color: var(--text-secondary); }
.cov-missing td:first-child { color: var(--text-muted); }
.sj-cover-hint { font-size: var(--fs-xs); color: var(--accent); text-decoration: none; }
.sj-spoken { display: block; color: var(--text-muted); font-size: var(--fs-xs); margin-top: 2px; }