/* Fake News Detection dashboard
   Concept: an editor's verification desk. The analysed text is shown as a
   marked-up document with a risk gutter in the margin; everything else stays quiet. */
:root {
  --paper: #eef1f4;
  --sheet: #ffffff;
  --ink: #15202d;
  --ink-2: #2c3a4b;
  --muted: #5d6b7c;
  --rule: #d4dbe3;
  --rule-soft: #e6ebf0;
  --accent: #2446a6;
  --accent-soft: #e4eafb;
  --fake: #bf2440;
  --fake-soft: #fbe5e9;
  --real: #0b7a64;
  --real-soft: #def3ed;
  --unsure: #a86b12;
  --unsure-soft: #fbefd9;
  --radius-s: 4px;
  --radius-m: 8px;
  --ui: "Public Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --doc: "Newsreader", "Georgia", "Times New Roman", serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #121820; --sheet: #19212c; --ink: #e8edf3; --ink-2: #c9d2dd; --muted: #93a1b2;
    --rule: #2c3846; --rule-soft: #233040; --accent: #8ea8f5; --accent-soft: #1f2b4a;
    --fake: #ff6f86; --fake-soft: #3a1b23; --real: #4fd1b0; --real-soft: #13342d;
    --unsure: #f0b24f; --unsure-soft: #3a2c14; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #121820; --sheet: #19212c; --ink: #e8edf3; --ink-2: #c9d2dd; --muted: #93a1b2;
  --rule: #2c3846; --rule-soft: #233040; --accent: #8ea8f5; --accent-soft: #1f2b4a;
  --fake: #ff6f86; --fake-soft: #3a1b23; --real: #4fd1b0; --real-soft: #13342d;
  --unsure: #f0b24f; --unsure-soft: #3a2c14; color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--paper); color: var(--ink); font-family: var(--ui);
  font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
h1, h2, h3 { margin: 0; font-weight: 650; letter-spacing: -0.01em; }
h1 { font-size: 1.6rem; }
h2 { font-size: 1.15rem; }
h3 { font-size: 0.95rem; }
.muted { color: var(--muted); }
.small { font-size: 0.82rem; }
.hidden { display: none !important; }

/* ---------- top bar */
.topbar {
  display: flex; align-items: center; gap: 28px; padding: 0 28px; height: 58px;
  background: var(--ink); color: #fff;
}
:root[data-theme="dark"] .topbar { background: #0b1016; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .topbar { background: #0b1016; } }
.brand { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; font-weight: 700; }
.brand svg { flex: none; }
.brand span { font-family: var(--doc); font-size: 1.15rem; font-weight: 600; letter-spacing: 0; }
.nav { display: flex; gap: 4px; flex: 1; overflow-x: auto; }
.nav a {
  color: #c4cfdc; text-decoration: none; padding: 7px 12px; border-radius: var(--radius-s);
  font-size: 0.9rem; white-space: nowrap;
}
.nav a:hover { color: #fff; background: rgba(255,255,255,.08); }
.nav a[aria-current="page"] { color: #fff; background: rgba(255,255,255,.14); }
.theme-btn {
  background: none; border: 1px solid rgba(255,255,255,.25); color: #dfe6ee; border-radius: var(--radius-s);
  padding: 5px 10px; cursor: pointer; font: inherit; font-size: 0.82rem;
}

.wrap { max-width: 1380px; margin: 0 auto; padding: 26px 28px 60px; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.page-head p { margin: 4px 0 0; color: var(--muted); max-width: 70ch; }

.panel { background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--radius-m); }
.panel-pad { padding: 18px 20px; }
.panel h2 + p, .panel h3 + p { margin-top: 4px; }

/* ---------- analyze layout */
.analyze-grid { display: grid; grid-template-columns: minmax(330px, 420px) 1fr; gap: 22px; align-items: start; }
@media (max-width: 1000px) { .analyze-grid { grid-template-columns: 1fr; } }
.input-panel { position: sticky; top: 16px; }
@media (max-width: 1000px) { .input-panel { position: static; } }

.tabs { display: flex; border-bottom: 1px solid var(--rule); padding: 0 8px; }
.tab {
  flex: 1; background: none; border: none; font: inherit; font-size: 0.88rem; color: var(--muted);
  padding: 12px 6px 10px; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent); font-weight: 600; }
.tabpanel { padding: 16px 18px 0; }
textarea, input[type="text"], input[type="url"], select {
  width: 100%; font: inherit; color: var(--ink); background: var(--sheet);
  border: 1px solid var(--rule); border-radius: var(--radius-s); padding: 10px 12px;
}
textarea { min-height: 230px; resize: vertical; font-family: var(--doc); font-size: 1rem; line-height: 1.55; }
label.field { display: block; font-size: 0.82rem; color: var(--muted); margin: 14px 0 6px; }

.drop {
  border: 1.5px dashed var(--rule); border-radius: var(--radius-m); padding: 30px 16px; text-align: center;
  color: var(--muted); cursor: pointer; transition: border-color .15s, background .15s;
}
.drop:hover, .drop.drag { border-color: var(--accent); background: var(--accent-soft); color: var(--ink); }
.drop strong { color: var(--ink); display: block; margin-bottom: 4px; }
.drop img { max-width: 100%; max-height: 220px; border-radius: var(--radius-s); margin-top: 10px; }
.file-chip { margin-top: 10px; font-size: 0.86rem; color: var(--ink-2); word-break: break-all; }

.input-foot { padding: 14px 18px 18px; display: grid; gap: 10px; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.btn {
  font: inherit; font-weight: 600; border-radius: var(--radius-s); padding: 10px 16px; cursor: pointer;
  border: 1px solid var(--accent); background: var(--accent); color: #fff;
}
:root[data-theme="dark"] .btn { color: #0d1420; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .btn { color: #0d1420; } }
.btn:disabled { opacity: .55; cursor: progress; }
.btn.ghost { background: transparent; color: var(--accent); }
.btn.block { width: 100%; padding: 12px; font-size: 1rem; }
.linkbtn { background: none; border: none; color: var(--accent); font: inherit; font-size: 0.85rem; cursor: pointer; padding: 0; }
.samples { font-size: 0.82rem; color: var(--muted); }
.samples button { margin-right: 10px; }

.extracted { margin: 0 18px 4px; }
.extracted textarea { min-height: 120px; font-size: 0.92rem; }

/* ---------- empty / loading */
.empty { padding: 56px 40px; text-align: center; color: var(--muted); }
.empty h2 { color: var(--ink); margin-bottom: 6px; font-family: var(--doc); font-weight: 500; font-size: 1.5rem; }
.empty ul { text-align: left; display: inline-block; margin: 14px 0 0; padding-left: 18px; }
.loading { padding: 70px 20px; text-align: center; color: var(--muted); }
.spinner { width: 28px; height: 28px; border: 3px solid var(--rule); border-top-color: var(--accent);
  border-radius: 50%; margin: 0 auto 12px; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 3s; } }
.error { background: var(--fake-soft); color: var(--fake); border-radius: var(--radius-s); padding: 10px 12px; font-size: 0.9rem; }

/* ---------- verdict */
.verdict { padding: 22px 24px; display: grid; grid-template-columns: 1fr auto; gap: 18px 28px; align-items: center; }
.verdict-word { font-family: var(--doc); font-size: 2.6rem; line-height: 1; font-weight: 600; letter-spacing: -0.02em; }
.v-fake .verdict-word { color: var(--fake); }
.v-real .verdict-word { color: var(--real); }
.v-uncertain .verdict-word { color: var(--unsure); }
.verdict-sub { margin-top: 8px; color: var(--ink-2); }
.verdict-meta { display: grid; grid-template-columns: repeat(3, auto); gap: 4px 26px; text-align: right; }
.verdict-meta b { display: block; font-size: 1.35rem; font-variant-numeric: tabular-nums; }
.verdict-meta span { font-size: 0.78rem; color: var(--muted); }
.scale { grid-column: 1 / -1; }
.scale-track {
  position: relative; height: 10px; border-radius: 5px;
  background: linear-gradient(90deg, var(--real) 0%, var(--real) 40%, var(--unsure) 40%, var(--unsure) 60%, var(--fake) 60%, var(--fake) 100%);
  opacity: .9;
}
.scale-marker {
  position: absolute; top: -6px; width: 4px; height: 22px; background: var(--ink); border-radius: 2px;
  transform: translateX(-2px); transition: left .6s cubic-bezier(.2,.8,.2,1);
  box-shadow: 0 0 0 2px var(--sheet);
}
.scale-labels { display: flex; justify-content: space-between; font-size: 0.76rem; color: var(--muted); margin-top: 6px; }
@media (max-width: 640px) { .verdict { grid-template-columns: 1fr; } .verdict-meta { text-align: left; } }

.warnings { margin: 0 24px 18px; display: grid; gap: 6px; }
.warn { background: var(--unsure-soft); color: var(--ink); border-left: 3px solid var(--unsure); padding: 8px 12px;
  font-size: 0.87rem; border-radius: 0 var(--radius-s) var(--radius-s) 0; }

.results { display: grid; gap: 18px; }
.two { display: grid; grid-template-columns: 1.35fr 1fr; gap: 18px; align-items: start; }
@media (max-width: 1250px) { .two { grid-template-columns: 1fr; } }
.section-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 16px 20px 10px; }
.section-head p { margin: 2px 0 0; font-size: 0.84rem; color: var(--muted); }

/* ---------- marked-up document with risk gutter */
.doc { padding: 6px 20px 22px; max-height: 640px; overflow: auto; }
.doc-line { display: grid; grid-template-columns: 6px 1fr; gap: 14px; padding: 3px 0; }
.gutter { border-radius: 3px; }
.doc-line p { margin: 0; font-family: var(--doc); font-size: 1.04rem; line-height: 1.62; max-width: 72ch; color: var(--ink); }
.doc-line:hover .gutter { outline: 2px solid var(--rule); }
.doc-line[data-p]:hover p::after {
  content: attr(data-p); font-family: var(--ui); font-size: .74rem; color: var(--muted); margin-left: 8px;
}
mark.w { background: none; color: inherit; padding: 0 1px; border-radius: 2px; }
mark.w.f { background: color-mix(in srgb, var(--fake) calc(var(--a) * 34%), transparent); }
mark.w.r { background: color-mix(in srgb, var(--real) calc(var(--a) * 34%), transparent); }
.legend { display: flex; gap: 14px; align-items: center; font-size: 0.78rem; color: var(--muted); flex-wrap: wrap; }
.legend i { display: inline-block; width: 12px; height: 12px; border-radius: 2px; vertical-align: -2px; margin-right: 5px; }

/* ---------- models (diverging bars) */
.models { padding: 0 20px 16px; }
.fam { margin-top: 10px; }
.fam h3 { font-size: 0.8rem; color: var(--muted); font-weight: 600; margin: 12px 0 4px; }
.mrow { display: grid; grid-template-columns: minmax(130px, 1.2fr) 1.4fr 48px; gap: 10px; align-items: center; padding: 5px 0; font-size: 0.86rem; }
.mrow .nm small { display: block; color: var(--muted); font-size: 0.72rem; }
.dbar { position: relative; height: 14px; background: var(--rule-soft); border-radius: 2px; }
.dbar::before { content: ""; position: absolute; left: 50%; top: -3px; bottom: -3px; width: 1px; background: var(--muted); opacity: .6; }
.dbar span { position: absolute; top: 0; bottom: 0; border-radius: 2px; }
.dbar span.f { left: 50%; background: var(--fake); }
.dbar span.r { right: 50%; background: var(--real); }
.mrow .pv { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.ens-row { border-top: 1px solid var(--rule); margin-top: 8px; padding-top: 10px; font-weight: 600; }

/* ---------- terms */
.terms { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 0 20px 18px; }
.terms h3 { font-size: 0.82rem; margin-bottom: 6px; }
.term { display: flex; justify-content: space-between; font-size: 0.86rem; padding: 3px 0; border-bottom: 1px solid var(--rule-soft); }
.term button { background: none; border: none; padding: 0; font: inherit; color: var(--ink); cursor: pointer; text-align: left; }
.term button:hover { color: var(--accent); text-decoration: underline; }
.term em { font-style: normal; color: var(--muted); font-variant-numeric: tabular-nums; }
.sim { padding: 0 20px 16px; font-size: 0.85rem; color: var(--ink-2); }

/* ---------- indicators */
.ind { padding: 4px 20px 18px; }
.irow { display: grid; grid-template-columns: 1fr 150px; gap: 12px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--rule-soft); font-size: 0.86rem; }
.irow:last-child { border-bottom: none; }
.irow .lean { font-size: 0.74rem; }
.lean-fake { color: var(--fake); } .lean-real { color: var(--real); } .lean-neutral { color: var(--muted); }
.track { position: relative; height: 18px; }
.track::before { content: ""; position: absolute; left: 0; right: 0; top: 8px; height: 2px; background: var(--rule); }
.dot { position: absolute; top: 4px; width: 10px; height: 10px; border-radius: 50%; transform: translateX(-5px); }
.dot.r { background: var(--real); } .dot.f { background: var(--fake); }
.dot.me { top: 1px; width: 4px; height: 16px; border-radius: 2px; background: var(--ink); transform: translateX(-2px); }

/* ---------- source meta */
.kv { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; font-size: 0.85rem; padding: 0 20px 16px; }
.kv dt { color: var(--muted); } .kv dd { margin: 0; word-break: break-word; }

/* ---------- tables */
table.data { width: 100%; border-collapse: collapse; font-size: 0.86rem; font-variant-numeric: tabular-nums; }
table.data th, table.data td { padding: 8px 10px; border-bottom: 1px solid var(--rule-soft); text-align: right; }
table.data th:first-child, table.data td:first-child, table.data th.l, table.data td.l { text-align: left; }
table.data th { color: var(--muted); font-weight: 600; font-size: 0.78rem; position: sticky; top: 0; background: var(--sheet); }
table.data tr.best td { font-weight: 700; }
table.data tr.famsep td { border-top: 1px solid var(--rule); }
.scroll { overflow: auto; }
.pill { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 0.76rem; font-weight: 600; }
.pill.FAKE { background: var(--fake-soft); color: var(--fake); }
.pill.REAL { background: var(--real-soft); color: var(--real); }
.pill.UNCERTAIN { background: var(--unsure-soft); color: var(--unsure); }
.pill.EMPTY { background: var(--rule-soft); color: var(--muted); }
.fam-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; }

.ds-switch { display: flex; gap: 6px; flex-wrap: wrap; }
.ds-switch button {
  font: inherit; font-size: 0.86rem; padding: 7px 13px; border-radius: var(--radius-s); cursor: pointer;
  border: 1px solid var(--rule); background: var(--sheet); color: var(--ink-2);
}
.ds-switch button[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); color: var(--ink); font-weight: 600; }

.chart { padding: 6px 20px 20px; }
.hbar { display: grid; grid-template-columns: minmax(170px, 230px) 1fr 64px; gap: 10px; align-items: center; font-size: 0.85rem; padding: 4px 0; }
.hbar .bar { height: 16px; background: var(--rule-soft); border-radius: 2px; position: relative; }
.hbar .bar span { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 2px; }
.hbar .bar i { position: absolute; top: -3px; bottom: -3px; width: 1px; background: var(--ink); opacity: .55; }
.hbar b { text-align: right; font-variant-numeric: tabular-nums; }

.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 1000px) { .grid3 { grid-template-columns: 1fr; } }
.heat { display: grid; grid-template-columns: 56px repeat(3, 1fr); gap: 3px; font-size: 0.8rem; padding: 0 20px 18px; }
.heat div { padding: 10px 4px; text-align: center; border-radius: 3px; font-variant-numeric: tabular-nums; }
.heat .h { background: none; color: var(--muted); padding: 4px; }
.figs { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; padding: 0 20px 20px; }
.figs.wide { grid-template-columns: repeat(auto-fill, minmax(520px, 1fr)); }
.figs.small { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); padding-top: 12px; }
@media (max-width: 640px) { .figs.wide { grid-template-columns: 1fr; } }
details.cms { padding: 0 20px 20px; }
details.cms summary { cursor: pointer; color: var(--accent); font-size: 0.9rem; padding: 0 20px; }
details.cms .figs { padding: 12px 0 0; }
.figs img { width: 100%; background: #fff; border: 1px solid var(--rule); border-radius: var(--radius-s); }
.figs figcaption { font-size: 0.78rem; color: var(--muted); margin-top: 4px; }
figure { margin: 0; }

.prose { max-width: 76ch; }
.prose p, .prose li { color: var(--ink-2); }
.prose h2 { margin-top: 26px; }
.team { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; margin-top: 12px; }
.team div { border: 1px solid var(--rule); border-radius: var(--radius-s); padding: 10px 12px; background: var(--sheet); font-size: 0.88rem; }
.team small { color: var(--muted); display: block; }

.pipeline { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 12px 0; font-size: 0.84rem; }
.pipeline span { border: 1px solid var(--rule); background: var(--sheet); padding: 6px 10px; border-radius: var(--radius-s); }
.pipeline svg { color: var(--muted); }

@media print {
  .topbar, .input-panel, .noprint { display: none !important; }
  .analyze-grid { grid-template-columns: 1fr; }
  body { background: #fff; }
  .doc { max-height: none; }
}
@media (max-width: 640px) {
  .wrap { padding: 18px 16px 40px; }
  .topbar { padding: 0 16px; gap: 14px; }
  .brand span { display: none; }
  .terms { grid-template-columns: 1fr; }
  .mrow { grid-template-columns: 1fr 1fr 44px; }
}

/* =====================================================================
   v2: interactive, explained UI
   ===================================================================== */
:root { --shadow: 0 1px 2px rgba(16,24,40,.05), 0 4px 14px rgba(16,24,40,.06); --shadow-h: 0 4px 10px rgba(16,24,40,.08), 0 14px 32px rgba(16,24,40,.10);
  --tfidf: #2a6fdb; --emb: #e07b22; --sty: #7a8594; --bert: #2e9e5b; --prop: #c0263d; }
.panel { box-shadow: var(--shadow); transition: box-shadow .2s, transform .2s; }
.topbar { background: linear-gradient(90deg, #101a2a, #1b2a52 60%, #2446a6); position: sticky; top: 0; z-index: 20; }
:root[data-theme="dark"] .topbar { background: linear-gradient(90deg, #070b11, #121c38); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .topbar { background: linear-gradient(90deg, #070b11, #121c38); } }
.nav a { position: relative; transition: color .15s, background .15s; }
.nav a[aria-current="page"]::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 2px; height: 2px; border-radius: 2px; background: #7fe3c8; }
.eyebrow { display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); margin-bottom: 6px; }
.h-icon { display: flex; align-items: center; gap: 8px; }
.ic { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: var(--accent-soft); font-size: 16px; flex: none; }
.ic.big { width: 48px; height: 48px; font-size: 26px; border-radius: 12px; }
.note { font-size: .84rem; color: var(--ink-2); background: var(--accent-soft); border-radius: var(--radius-m); padding: 10px 12px; margin: 14px 0 0; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.chip { display: inline-block; border: 1px solid var(--rule); background: var(--sheet); padding: 5px 11px; border-radius: 999px; font-size: .82rem; }
.chip.sm { padding: 1px 8px; font-size: .78rem; margin: 2px 0; }
.btn { transition: transform .12s, box-shadow .15s, background .15s; }
.btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 6px 16px color-mix(in srgb, var(--accent) 30%, transparent); }
.btn.sm { padding: 4px 10px; font-size: .8rem; }
.btn.block { background: linear-gradient(90deg, var(--accent), #3b63d6); }
textarea.flash { animation: flash .7s; }
@keyframes flash { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 60%, transparent); } 100% { box-shadow: 0 0 0 10px transparent; } }

/* reveal animation */
.reveal { opacity: 0; transform: translateY(14px); }
.reveal.in { animation: up .55s cubic-bezier(.2,.8,.2,1) var(--d, 0s) both; }
@keyframes up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .reveal, .reveal.in { opacity: 1; transform: none; animation: none; } }

/* hero */
.hero { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 26px 28px; overflow: hidden; position: relative;
  background: radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 55%), var(--sheet); }
.hero h2 { font-family: var(--doc); font-size: 1.9rem; font-weight: 600; line-height: 1.15; }
.hero p { color: var(--ink-2); max-width: 60ch; margin: 8px 0 0; }
.hero-art { flex: none; }
.hero-needle { transform-origin: 100px 100px; animation: sweep 4.5s ease-in-out infinite; }
@keyframes sweep { 0%,100% { transform: rotate(-55deg); } 50% { transform: rotate(55deg); } }
@media (prefers-reduced-motion: reduce) { .hero-needle { animation: none; } }
@media (max-width: 700px) { .hero { flex-direction: column; align-items: flex-start; } .hero h2 { font-size: 1.5rem; } }

/* steps */
.steps { counter-reset: s; list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 12px; }
.steps li { counter-increment: s; display: grid; grid-template-columns: 34px 1fr; column-gap: 12px; align-items: start; }
.steps li::before { content: counter(s); grid-row: span 2; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent); color: #fff; font-weight: 700; font-size: .9rem; }
.steps li b { display: block; }
.steps li span { color: var(--ink-2); font-size: .9rem; }
.steps.compact li span { font-size: .85rem; }
.tag { font-style: normal; font-weight: 600; font-size: .8rem; padding: 0 6px; border-radius: 4px; color: #fff; }
.t-tfidf { background: var(--tfidf); } .t-emb { background: var(--emb); } .t-sty { background: var(--sty); } .t-bert { background: var(--bert); }

.two-even { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 1150px) { .two-even { grid-template-columns: 1fr; } }
.mini-scale { margin: 14px 0 6px; }
.ms-bar { display: grid; grid-template-columns: 4fr 2fr 4fr; height: 26px; border-radius: 6px; overflow: hidden; font-size: .75rem; font-weight: 700; color: #fff; }
.ms-bar span { display: grid; place-items: center; }
.ms-bar .r { background: var(--real); } .ms-bar .u { background: var(--unsure); } .ms-bar .f { background: var(--fake); }
.ms-lab { display: grid; grid-template-columns: 4fr 2fr 4fr; text-align: center; font-size: .8rem; font-weight: 600; margin-top: 4px; }
.defs { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; font-size: .87rem; margin: 12px 0 0; }
.defs dt { font-weight: 700; } .defs dd { margin: 0; color: var(--ink-2); }
.clues { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 10px; }
.clues h3 { font-size: .88rem; }
.clues ul { margin: 6px 0 0; padding-left: 18px; font-size: .85rem; color: var(--ink-2); }
.clues li { margin: 3px 0; }
@media (max-width: 640px) { .clues { grid-template-columns: 1fr; } }
.try-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 760px) { .try-cards { grid-template-columns: 1fr; } }
.try { text-align: left; font: inherit; border: 1px solid var(--rule); border-radius: var(--radius-m); background: var(--sheet); color: var(--ink);
  padding: 14px; cursor: pointer; transition: transform .15s, box-shadow .15s, border-color .15s; }
.try:hover { transform: translateY(-3px); box-shadow: var(--shadow-h); border-color: var(--accent); }
.try b { display: block; } .try span { font-size: .8rem; color: var(--muted); }
.status { display: inline-block; font-size: .78rem; padding: 2px 9px; border-radius: 999px; margin: 2px 4px 2px 0; }
.status.ok { background: var(--real-soft); color: var(--real); } .status.off { background: var(--unsure-soft); color: var(--unsure); }

/* loading with stages */
.loading-steps { padding: 34px 30px; text-align: center; }
.loading-steps h2 { margin-bottom: 14px; }
.loading-steps ol { list-style: none; padding: 0; margin: 0 auto; display: inline-grid; gap: 6px; text-align: left; }
.loading-steps li { opacity: .25; animation: stage .4s ease forwards; animation-delay: calc(var(--i) * .45s); font-size: .9rem; }
.loading-steps li::before { content: "○ "; color: var(--accent); }
@keyframes stage { to { opacity: 1; } }

/* verdict card */
.verdict-card { overflow: hidden; border-top: 5px solid var(--unsure); }
.verdict-card.v-fake { border-top-color: var(--fake); background: linear-gradient(180deg, var(--fake-soft), var(--sheet) 55%); }
.verdict-card.v-real { border-top-color: var(--real); background: linear-gradient(180deg, var(--real-soft), var(--sheet) 55%); }
.verdict-card.v-uncertain { background: linear-gradient(180deg, var(--unsure-soft), var(--sheet) 55%); }
.vc-grid { display: grid; grid-template-columns: 230px 1fr; gap: 22px; align-items: center; padding: 22px 24px 10px; }
@media (max-width: 700px) { .vc-grid { grid-template-columns: 1fr; } }
.vc-gauge { position: relative; }
.gauge { width: 100%; max-width: 230px; display: block; }
.gauge .needle { transform-origin: 100px 100px; transform: rotate(-90deg); animation: needle 1.1s cubic-bezier(.2,.9,.25,1.1) .15s forwards; }
@keyframes needle { to { transform: rotate(var(--rot)); } }
@media (prefers-reduced-motion: reduce) { .gauge .needle { animation: none; transform: rotate(var(--rot)); } }
.vc-pct { text-align: center; margin-top: -6px; }
.vc-pct span { font-size: 2rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.vc-pct small { display: block; color: var(--muted); font-size: .78rem; }
.verdict-word.sm { font-size: 1.8rem; }
.vc-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 14px; }
@media (max-width: 640px) { .vc-tiles { grid-template-columns: repeat(2, 1fr); } }
.vc-tiles div { background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--radius-m); padding: 8px 10px; }
.vc-tiles b { display: block; font-size: 1.2rem; font-variant-numeric: tabular-nums; }
.vc-tiles span { font-size: .75rem; color: var(--muted); }
.vc-actions { padding: 6px 24px 16px; gap: 18px; }
.truth, .reliab { margin: 4px 24px 8px; padding: 9px 12px; border-radius: var(--radius-m); font-size: .88rem; }
.truth.ok { background: var(--real-soft); color: var(--ink); border-left: 4px solid var(--real); }
.truth.bad { background: var(--fake-soft); border-left: 4px solid var(--fake); }
.truth.meh { background: var(--unsure-soft); border-left: 4px solid var(--unsure); }
.reliab { background: var(--accent-soft); color: var(--ink-2); }
.reliab.hard { background: var(--unsure-soft); }

/* proof */
.proof { padding: 0 20px 18px; }
.tally { display: flex; height: 28px; border-radius: 6px; overflow: hidden; font-size: .78rem; font-weight: 700; color: #fff; margin-bottom: 12px; }
.tally span { display: flex; align-items: center; justify-content: center; white-space: nowrap; min-width: max-content; padding: 0 10px; transition: flex .6s; }
.tally .tf { background: var(--fake); } .tally .tr { background: var(--real); }
.reasons { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.reason { display: grid; grid-template-columns: 38px 1fr; gap: 10px; padding: 12px 14px; border-radius: var(--radius-m); border: 1px solid var(--rule);
  border-left-width: 5px; background: var(--sheet); animation: up .45s ease var(--d) both; transition: transform .15s, box-shadow .15s; }
.reason:hover { transform: translateX(3px); box-shadow: var(--shadow); }
.reason.fake { border-left-color: var(--fake); } .reason.real { border-left-color: var(--real); } .reason.neutral { border-left-color: var(--unsure); }
.r-ic { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--rule-soft); font-size: 17px; }
.r-title { font-weight: 650; }
.r-tag { display: inline-block; font-size: .68rem; font-weight: 700; padding: 1px 7px; border-radius: 999px; margin-left: 6px; vertical-align: 1px; }
.r-tag.fake { background: var(--fake-soft); color: var(--fake); } .r-tag.real { background: var(--real-soft); color: var(--real); } .r-tag.neutral { background: var(--unsure-soft); color: var(--unsure); }
.r-body { font-size: .88rem; color: var(--ink-2); margin-top: 3px; }
.r-body mark.w { padding: 1px 5px; border-radius: 4px; }

/* calculation trace */
.trace { list-style: none; margin: 0; padding: 0 20px 18px 20px; position: relative; }
.trace li { position: relative; padding: 0 0 14px 30px; }
.trace li::before { content: ""; position: absolute; left: 6px; top: 6px; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.trace li::after { content: ""; position: absolute; left: 11px; top: 20px; bottom: 0; width: 2px; background: var(--rule); }
.trace li:last-child::after { display: none; }
.trace b { display: block; }
.trace span { color: var(--ink-2); font-size: .9rem; }
.fbars { display: grid; gap: 6px; margin-top: 8px; max-width: 620px; }
.fbar { display: grid; grid-template-columns: 220px 1fr 46px; gap: 10px; align-items: center; font-size: .84rem; }
.fb { height: 12px; background: var(--rule-soft); border-radius: 6px; overflow: hidden; position: relative; }
.fb::after { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--muted); }
.fb i { display: block; height: 100%; border-radius: 6px; animation: grow .9s cubic-bezier(.2,.8,.2,1) both; transform-origin: left; }
.fbar b { text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 640px) { .fbar { grid-template-columns: 1fr 1fr 40px; } }
@keyframes grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ballots */
.ballots { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; padding: 0 20px 12px; }
.ballot { border: 1px solid var(--rule); border-radius: var(--radius-m); padding: 10px 12px; position: relative; background: var(--sheet);
  animation: pop .4s cubic-bezier(.2,.9,.3,1.3) var(--d) both; transition: transform .15s; }
.ballot:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.ballot.f { border-top: 4px solid var(--fake); } .ballot.r { border-top: 4px solid var(--real); }
.ballot b { font-size: 1rem; } .ballot.f b { color: var(--fake); } .ballot.r b { color: var(--real); }
.ballot small { display: block; font-size: .75rem; color: var(--ink-2); line-height: 1.3; margin-top: 2px; }
.ballot em { position: absolute; top: 9px; right: 10px; font-style: normal; font-size: .78rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.bdot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; }
@keyframes pop { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: none; } }
.ballot-final { margin: 0 20px 18px; padding: 10px 14px; border-radius: var(--radius-m); font-size: .92rem; background: var(--unsure-soft); }
.ballot-final.v-fake { background: var(--fake-soft); } .ballot-final.v-real { background: var(--real-soft); }

.term { align-items: center; gap: 10px; }
.tbar { flex: 0 0 90px; height: 8px; background: var(--rule-soft); border-radius: 4px; overflow: hidden; }
.tbar i { display: block; height: 100%; border-radius: 4px; }
.tbar i.f { background: var(--fake); } .tbar i.r { background: var(--real); }
.ind-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 28px; }
@media (max-width: 900px) { .ind-grid { grid-template-columns: 1fr; } }
.irow { grid-template-columns: 1fr 170px; }
.irow:nth-last-child(2) { border-bottom: none; }
.lean { font-weight: 700; margin-left: 4px; padding: 0 6px; border-radius: 999px; }
.lean-fake { background: var(--fake-soft); } .lean-real { background: var(--real-soft); } .lean-neutral { background: var(--rule-soft); }

/* explanations */
.explain { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 4px 20px 20px; }
.explain > div { background: var(--paper); border: 1px solid var(--rule-soft); border-radius: var(--radius-m); padding: 10px 12px; }
.explain b { font-size: .82rem; }
.explain p { margin: 4px 0 0; font-size: .85rem; color: var(--ink-2); }
.explain .found { background: var(--real-soft); border-color: transparent; }
@media (max-width: 900px) { .explain { grid-template-columns: 1fr; } }

/* models page */
.takeaway { display: flex; gap: 16px; align-items: center; padding: 18px 22px; border-left: 5px solid var(--prop);
  background: linear-gradient(90deg, color-mix(in srgb, var(--prop) 10%, var(--sheet)), var(--sheet)); }
.takeaway p { margin: 0; font-size: 1rem; }
.podium { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; padding: 4px 20px 16px; }
@media (max-width: 900px) { .podium { grid-template-columns: repeat(2, 1fr); } }
.pcard { border: 1px solid var(--rule); border-top: 5px solid var(--c); border-radius: var(--radius-m); padding: 14px; background: var(--sheet); transition: transform .15s, box-shadow .15s; }
.pcard:hover { transform: translateY(-3px); box-shadow: var(--shadow-h); }
.pcard.win { background: color-mix(in srgb, var(--c) 8%, var(--sheet)); box-shadow: 0 0 0 2px color-mix(in srgb, var(--c) 40%, transparent); }
.pc-ic { font-size: 1.5rem; } .pc-f { font-size: .82rem; font-weight: 700; color: var(--ink-2); margin-top: 4px; }
.pc-v { font-size: 2rem; font-weight: 800; color: var(--c); font-variant-numeric: tabular-nums; }
.pc-m { font-size: .76rem; color: var(--muted); }
.pc-bar { height: 7px; background: var(--rule-soft); border-radius: 4px; margin: 8px 0 4px; overflow: hidden; }
.pc-bar i { display: block; height: 100%; background: var(--c); animation: grow 1s cubic-bezier(.2,.8,.2,1) both; transform-origin: left; }
.pc-a { font-size: .78rem; color: var(--ink-2); }
.hbar .bar span.grow { animation: grow .8s cubic-bezier(.2,.8,.2,1) var(--d, 0s) both; transform-origin: left; }
.hbar.hl span:first-child { font-weight: 700; }
.hbar b small { font-weight: 600; font-size: .72rem; margin-left: 4px; }
.hbar b small.neg { color: var(--fake); } .hbar b small.pos { color: var(--real); }
.hbar { grid-template-columns: minmax(170px, 290px) 1fr 110px; }
.hbar:hover { background: var(--rule-soft); border-radius: 4px; }
details.gloss summary { cursor: pointer; padding: 16px 20px; list-style: none; }
details.gloss summary::-webkit-details-marker { display: none; }
details.gloss summary::after { content: " ▾"; color: var(--muted); }
.gloss-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; padding: 0 20px 20px; }
.gloss-grid div { border: 1px solid var(--rule); border-radius: var(--radius-m); padding: 10px 12px; }
.gloss-grid b { display: block; } .gloss-grid span { font-size: .85rem; color: var(--ink-2); }
.heat .diag { outline: 2px solid var(--ink); outline-offset: -2px; }
.heat .h { font-size: .72rem; }
.figrow { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 4px; align-items: start; padding: 0 0 6px 20px; }
.figrow figure img { width: 100%; background: #fff; border: 1px solid var(--rule); border-radius: var(--radius-s); cursor: zoom-in; }
.figrow figcaption { font-size: .75rem; color: var(--muted); }
.figrow .explain { grid-template-columns: 1fr; margin-top: 0; }
@media (max-width: 1000px) { .figrow { grid-template-columns: 1fr; padding-right: 20px; } }
.figs img { cursor: zoom-in; transition: transform .15s; } .figs img:hover { transform: scale(1.02); }
.cm-guide { display: grid; grid-template-columns: 300px 1fr; gap: 18px; align-items: center; padding: 14px 0 0; }
.cm-guide p { margin: 0; font-size: .87rem; color: var(--ink-2); }
@media (max-width: 760px) { .cm-guide { grid-template-columns: 1fr; } }
.cmg, .cm2 { display: grid; grid-template-columns: 90px 1fr 1fr; gap: 4px; font-size: .8rem; text-align: center; }
.cmg div, .cm2 div { padding: 9px 4px; border-radius: 5px; }
.cmg .h, .cm2 .h { color: var(--muted); font-weight: 600; font-size: .74rem; display: grid; place-items: center; }
.cmg .ok, .cm2 .ok { background: var(--real-soft); color: var(--real); font-weight: 700; }
.cmg .bad, .cm2 .bad { background: var(--fake-soft); color: var(--fake); font-weight: 700; }
.cm2 div { font-size: 1.25rem; } .cm2 small { display: block; font-size: .7rem; font-weight: 500; }
.zoom-ov { position: fixed; inset: 0; background: rgba(5,10,20,.8); display: grid; place-items: center; z-index: 100; cursor: zoom-out; padding: 20px; animation: up .2s; }
.zoom-ov img { max-width: 95vw; max-height: 92vh; background: #fff; border-radius: 6px; }

/* batch */
.batch-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 18px; align-items: start; }
@media (max-width: 1000px) { .batch-grid { grid-template-columns: 1fr; } }
.sum-grid { display: grid; grid-template-columns: auto 1fr; gap: 26px; padding: 4px 20px 16px; align-items: center; }
@media (max-width: 900px) { .sum-grid { grid-template-columns: 1fr; } }
.donut-wrap { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.donut circle { transition: stroke-width .15s; } .donut circle:hover { stroke-width: 27; }
.tiles { display: grid; grid-template-columns: repeat(2, minmax(100px, 1fr)); gap: 8px; }
.tile { border: 1px solid var(--rule); border-left: 4px solid var(--rule); border-radius: var(--radius-m); padding: 8px 12px; }
.tile b { display: block; font-size: 1.4rem; font-variant-numeric: tabular-nums; }
.tile span { font-size: .78rem; color: var(--muted); }
.tile.f { border-left-color: var(--fake); } .tile.f b { color: var(--fake); }
.tile.r { border-left-color: var(--real); } .tile.r b { color: var(--real); }
.tile.u { border-left-color: var(--unsure); } .tile.u b { color: var(--unsure); }
.hist { display: grid; grid-template-columns: repeat(10, 1fr); gap: 5px; height: 150px; align-items: end; }
.hcol { height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; position: relative; }
.hcol span { width: 100%; border-radius: 4px 4px 0 0; min-height: 2px; animation: rise .8s cubic-bezier(.2,.8,.2,1) both; transform-origin: bottom; }
.hcol em { position: absolute; top: -2px; font-style: normal; font-size: .72rem; color: var(--ink-2); }
.hcol small { font-size: .68rem; color: var(--muted); margin-top: 3px; }
@keyframes rise { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.hist-x { display: flex; justify-content: space-between; font-size: .72rem; color: var(--muted); margin-top: 4px; }
.ev-grid { display: grid; grid-template-columns: auto minmax(260px, 340px) 1fr; gap: 22px; align-items: center; padding: 4px 20px 16px; }
@media (max-width: 1000px) { .ev-grid { grid-template-columns: 1fr; } }
.big-acc b { display: block; font-size: 2.6rem; font-weight: 800; color: var(--accent); font-variant-numeric: tabular-nums; }
.big-acc span { font-size: .82rem; color: var(--muted); }
.ev-k { display: grid; gap: 8px; } .ev-k div { display: grid; grid-template-columns: 60px 1fr; gap: 8px; align-items: baseline; font-size: .86rem; }
.ev-k b { font-size: 1.15rem; } .ev-k span { color: var(--ink-2); }
.toolbar { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 0 20px 10px; }
.seg { display: inline-flex; border: 1px solid var(--rule); border-radius: var(--radius-m); overflow: hidden; flex-wrap: wrap; }
.seg button { font: inherit; font-size: .84rem; border: none; background: var(--sheet); color: var(--ink-2); padding: 7px 13px; cursor: pointer; border-right: 1px solid var(--rule); }
.seg button:last-child { border-right: none; }
.seg button[aria-pressed="true"] { background: var(--accent); color: #fff; }
td.txt { max-width: 520px; }
.minibar { display: inline-block; width: 70px; height: 8px; background: var(--rule-soft); border-radius: 4px; overflow: hidden; vertical-align: middle; margin-right: 6px; }
.minibar i { display: block; height: 100%; }
.okm { color: var(--real); font-weight: 800; } .badm { color: var(--fake); font-weight: 800; }
table.data tbody tr { transition: background .12s; } table.data tbody tr:hover { background: var(--rule-soft); }
.why-dlg { border: none; border-radius: 12px; padding: 0; width: min(760px, 94vw); max-height: 88vh; background: var(--sheet); color: var(--ink); box-shadow: 0 30px 80px rgba(0,0,0,.35); }
.why-dlg::backdrop { background: rgba(8,14,24,.55); }
.dlg-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 20px; border-bottom: 1px solid var(--rule); position: sticky; top: 0; background: var(--sheet); z-index: 1; }
.dlg-head .x { background: none; border: none; font-size: 1.1rem; cursor: pointer; color: var(--muted); }
#whyBody { padding: 16px 20px 20px; }
#whyBody .proof, #whyBody .reasons { padding: 0; }
.why-top { display: grid; grid-template-columns: 150px 1fr; gap: 16px; align-items: center; }
.why-top p { margin: 4px 0 0; color: var(--ink-2); font-size: .9rem; }
.why-top.v-fake .verdict-word { color: var(--fake); } .why-top.v-real .verdict-word { color: var(--real); } .why-top.v-uncertain .verdict-word { color: var(--unsure); }
blockquote { margin: 12px 0; padding: 10px 14px; border-left: 4px solid var(--rule); background: var(--paper); font-family: var(--doc); border-radius: 0 6px 6px 0; }

/* method page */
.method { display: grid; gap: 18px; max-width: 1100px; }
.method p, .method li { color: var(--ink-2); }
.method .panel-pad > p { margin: 10px 0 0; }
.cards3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 12px; }
@media (max-width: 900px) { .cards3 { grid-template-columns: 1fr; } }
.dcard { border: 1px solid var(--rule); border-radius: var(--radius-m); padding: 12px 14px; transition: transform .15s, box-shadow .15s; }
.dcard:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.dcard b { display: block; margin-bottom: 4px; } .dcard span { font-size: .87rem; color: var(--ink-2); }
.flow { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; margin-top: 14px; }
@media (max-width: 1000px) { .flow { grid-template-columns: repeat(2, 1fr); } }
.flow div { position: relative; border: 1px solid var(--rule); border-radius: var(--radius-m); padding: 12px 10px; text-align: center; background: var(--sheet); }
.flow div:not(:last-child)::after { content: "➜"; position: absolute; right: -11px; top: 50%; transform: translateY(-50%); color: var(--accent); font-size: .85rem; z-index: 1; }
@media (max-width: 1000px) { .flow div::after { display: none; } }
.flow b { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: #fff; font-size: .8rem; }
.flow span { display: block; font-weight: 700; margin-top: 6px; font-size: .9rem; }
.flow small { display: block; color: var(--muted); font-size: .75rem; margin-top: 2px; }
.approach { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; }
@media (max-width: 900px) { .approach { grid-template-columns: 1fr; } }
.ap { border: 1px solid var(--rule); border-top: 5px solid var(--c); border-radius: var(--radius-m); padding: 14px 16px; }
.ap h3 { color: var(--c); font-size: 1rem; }
.ap p { margin: 8px 0 0; font-size: .88rem; }
.ap .pro { font-size: .8rem; background: var(--paper); padding: 6px 9px; border-radius: 6px; }
.t-tfidf-b { --c: var(--tfidf); } .t-emb-b { --c: var(--emb); } .t-sty-b { --c: var(--sty); } .t-bert-b { --c: var(--bert); }
.proposed { border: 2px solid color-mix(in srgb, var(--prop) 45%, var(--rule)); }
.hyfuse { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 16px 0; }
.hf-col { display: grid; gap: 6px; }
.hf { display: block; border: 1px solid var(--rule); border-left: 4px solid var(--c, var(--rule)); border-radius: 6px; padding: 6px 10px; font-size: .84rem; background: var(--sheet); }
.hf.plain { border-left-color: var(--accent); }
.hf.judge { border: 2px solid var(--prop); color: var(--prop); font-weight: 800; padding: 14px 16px; font-size: 1rem; }
.hf.final { background: var(--ink); color: var(--sheet); font-weight: 700; padding: 14px 16px; }
.hf small { display: block; font-weight: 500; font-size: .72rem; opacity: .85; }
.hf-arrow { color: var(--accent); font-size: 1.3rem; }
.glance { margin-top: 14px; }
.glance h3 { margin-bottom: 8px; }
.glance td.win { font-weight: 800; color: var(--prop); }
.team div { transition: transform .15s; } .team div:hover { transform: translateY(-2px); }
.method .hero h2 { font-size: 1.6rem; }

@media print {
  .reveal { opacity: 1 !important; transform: none !important; animation: none !important; }
  .topbar { position: static; }
}
.trace span b, .trace div b { display: inline; }
.steps li span b { display: inline; }
.hist { height: 170px; } .hcol { padding-top: 18px; }
.hcol em { top: auto; position: static; order: -1; margin-bottom: 2px; }

/* simple proof */
.qw { display: inline-block; font-weight: 700; background: var(--rule-soft); border: 1px solid var(--rule); border-radius: 5px; padding: 0 6px; margin: 1px 0; font-size: .92em; }
.vote-line { font-size: 1.05rem; padding: 12px 14px; border-radius: var(--radius-m); background: var(--paper); border: 1px solid var(--rule); margin-bottom: 14px; }
.pcols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 900px) { .pcols { grid-template-columns: 1fr; } }
.pcol { border-radius: var(--radius-m); padding: 14px 16px; border: 1px solid var(--rule); border-top: 5px solid var(--c); }
.pcol.f { --c: var(--fake); background: color-mix(in srgb, var(--fake-soft) 55%, var(--sheet)); }
.pcol.r { --c: var(--real); background: color-mix(in srgb, var(--real-soft) 55%, var(--sheet)); }
.pcol h3 { color: var(--c); font-size: 1rem; margin-bottom: 8px; }
.slist { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.slist li { display: grid; grid-template-columns: 28px 1fr; gap: 8px; font-size: .95rem; line-height: 1.5; animation: up .4s ease var(--d) both; }
.si { font-size: 1.15rem; line-height: 1.3; }
.advice { margin-top: 14px; padding: 12px 14px; border-radius: var(--radius-m); background: var(--accent-soft); font-weight: 600; }
.summary-box { margin-top: 14px; border: 1px dashed var(--rule); border-radius: var(--radius-m); padding: 12px 14px; }
.sb-head { display: flex; justify-content: space-between; align-items: center; }
.summary-box p { margin: 6px 0 0; color: var(--ink-2); font-size: .92rem; }
details.expert > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 16px 20px; }
details.expert > summary::-webkit-details-marker { display: none; }
details.expert > summary::after { content: "Show ▾"; margin-left: auto; color: var(--accent); font-size: .85rem; font-weight: 600; }
details.expert[open] > summary::after { content: "Hide ▴"; }
.expert-body { display: grid; gap: 14px; padding: 0 14px 14px; }
.expert-body > section { box-shadow: none; }
.expert .reveal { opacity: 1; transform: none; animation: none; }

.unsure-box { margin-bottom: 14px; padding: 12px 14px; border-radius: var(--radius-m); background: var(--unsure-soft); border-left: 5px solid var(--unsure); }
.weak { display: block; font-size: .8rem; color: var(--muted); font-style: italic; margin-top: 2px; }

/* live fact check */
.live-toggle { display: flex; gap: 10px; align-items: flex-start; font-size: .88rem; padding: 10px 12px; border: 1px solid var(--rule);
  border-radius: var(--radius-m); background: var(--accent-soft); cursor: pointer; }
.live-toggle input { margin-top: 3px; width: 16px; height: 16px; accent-color: var(--accent); }
.combo { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; font-size: .88rem; }
.combo span { background: var(--sheet); border: 1px solid var(--rule); border-radius: 999px; padding: 4px 11px; }
.spin-sm { display: inline-block; width: 12px; height: 12px; border: 2px solid var(--rule); border-top-color: var(--accent); border-radius: 50%;
  animation: spin .8s linear infinite; vertical-align: -1px; padding: 0 !important; margin-right: 6px; }
.ev-panel { border: 2px solid color-mix(in srgb, var(--accent) 35%, var(--rule)); animation: up .45s ease both; }
.ev-loading { display: flex; gap: 12px; align-items: center; padding: 0 20px 20px; color: var(--muted); }
.ev-loading .spinner { margin: 0; width: 22px; height: 22px; }
.ev-head { margin: 0 20px 14px; padding: 12px 16px; border-radius: var(--radius-m); font-weight: 800; font-size: 1.05rem; display: grid; gap: 4px; }
.ev-head span { font-weight: 500; font-size: .9rem; color: var(--ink-2); }
.ev-con { background: var(--fake-soft); color: var(--fake); border-left: 5px solid var(--fake); }
.ev-sup { background: var(--real-soft); color: var(--real); border-left: 5px solid var(--real); }
.ev-part, .ev-mix { background: var(--unsure-soft); color: var(--unsure); border-left: 5px solid var(--unsure); }
.ev-none { background: var(--rule-soft); color: var(--ink-2); border-left: 5px solid var(--muted); }
.claims { display: grid; gap: 12px; padding: 0 20px 12px; }
.claim { border: 1px solid var(--rule); border-radius: var(--radius-m); padding: 12px 14px; background: var(--sheet); }
.claim.CONTRADICTED { border-left: 5px solid var(--fake); } .claim.SUPPORTED { border-left: 5px solid var(--real); }
.claim.MIXED { border-left: 5px solid var(--unsure); } .claim.NOT_ENOUGH { border-left: 5px solid var(--rule); }
.claim-h { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.ctext { font-family: var(--doc); font-size: 1.02rem; font-weight: 600; }
.cpill { flex: none; font-size: .74rem; font-weight: 800; padding: 3px 10px; border-radius: 999px; background: var(--rule-soft); color: var(--muted); }
.cpill.CONTRADICTED { background: var(--fake-soft); color: var(--fake); } .cpill.SUPPORTED { background: var(--real-soft); color: var(--real); }
.cpill.MIXED { background: var(--unsure-soft); color: var(--unsure); }
.evlist { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.evi { display: grid; grid-template-columns: 22px 1fr; gap: 8px; font-size: .9rem; }
.evi .st { font-weight: 900; } .evi.supports .st { color: var(--real); } .evi.contradicts .st { color: var(--fake); } .evi.unrelated .st { color: var(--muted); }
.evt { color: var(--ink); }
.evs { font-size: .78rem; color: var(--ink-2); margin-top: 2px; }
.tier { font-size: .68rem; font-weight: 700; padding: 0 6px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); text-transform: uppercase; }
.tier.fact-checker { background: var(--unsure-soft); color: var(--unsure); }
.claim details summary { cursor: pointer; color: var(--accent); margin-top: 8px; }

/* XAI */
.xai-panel { border: 2px solid color-mix(in srgb, var(--prop) 30%, var(--rule)); animation: up .45s ease both; }
.xai-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 0 20px 14px; }
@media (max-width: 1000px) { .xai-grid { grid-template-columns: 1fr; } }
.xcard { border: 1px solid var(--rule); border-radius: var(--radius-m); padding: 14px 16px; background: var(--sheet); }
.xcard.wide { margin: 0 20px 14px; }
.xcard h3 { font-size: .98rem; margin-bottom: 8px; }
.xaxis { display: flex; justify-content: space-between; font-size: .72rem; color: var(--muted); margin: 0 0 4px; padding-left: 38%; }
.xrow { display: grid; grid-template-columns: 38% 1fr 64px; gap: 8px; align-items: center; padding: 4px 0; font-size: .88rem; }
.xl small { display: block; font-size: .72rem; color: var(--muted); }
.xbar { position: relative; height: 14px; background: var(--rule-soft); border-radius: 3px; }
.xbar::before { content: ""; position: absolute; left: 50%; top: -3px; bottom: -3px; width: 2px; background: var(--muted); }
.xbar span { position: absolute; top: 0; bottom: 0; border-radius: 3px; animation: grow .8s cubic-bezier(.2,.8,.2,1) both; }
.xbar span.f { left: 50%; background: var(--fake); transform-origin: left; }
.xbar span.r { right: 50%; background: var(--real); transform-origin: right; }
.xv { text-align: right; font-weight: 800; font-variant-numeric: tabular-nums; font-size: .8rem; }
.xv.f { color: var(--fake); } .xv.r { color: var(--real); }
.xsay { margin: 10px 0 0; padding: 9px 11px; background: var(--accent-soft); border-radius: 6px; font-size: .88rem; }
.xhow { margin: 0 20px 18px; padding: 10px 12px; border: 1px dashed var(--rule); border-radius: var(--radius-m); font-size: .84rem; color: var(--ink-2); }
.gw { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 0 20px 14px; }
.gw h3 { font-size: .9rem; margin-bottom: 6px; }
.gw .chips { margin-top: 0; }
@media (max-width: 760px) { .gw { grid-template-columns: 1fr; } }
.chip.gwf { background: var(--fake-soft); border-color: transparent; color: var(--fake); font-weight: 600; }
.chip.gwr { background: var(--real-soft); border-color: transparent; color: var(--real); font-weight: 600; }
.live-tiles { grid-template-columns: repeat(4, minmax(120px, 1fr)); padding: 0 20px 14px; }
@media (max-width: 760px) { .live-tiles { grid-template-columns: repeat(2, 1fr); } }
.cmp-acc { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin: 0 20px 14px; padding: 12px 16px; border-radius: var(--radius-m); background: var(--paper); border: 1px solid var(--rule); }
.cmp-acc div { display: grid; } .cmp-acc span { font-size: .78rem; color: var(--muted); } .cmp-acc b { font-size: 1.6rem; }
.cmp-acc .hl b { color: var(--accent); } .cmp-acc .arrow { font-size: 1.4rem; color: var(--accent); }
.cmp-acc p { flex-basis: 100%; margin: 0; font-size: .82rem; color: var(--ink-2); }
td.kc { max-width: 320px; font-size: .82rem; } .kct { display: block; font-family: var(--doc); margin-bottom: 3px; }
.why-ev { margin-top: 12px; border-top: 1px solid var(--rule); }
.why-ev .section-head { padding: 12px 0 8px; } .why-ev .ev-head, .why-ev .claims { margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; }
.tier.warnt { background: var(--fake-soft); color: var(--fake); } .tier.okt { background: var(--real-soft); color: var(--real); }
.src-body { padding: 16px 20px 20px; }
.src-body input { margin-bottom: 4px; }
b.rating { background: var(--fake-soft); color: var(--fake); padding: 0 6px; border-radius: 4px; }
.combo.bd-wrap { display: block; }
.bd { border: 1px solid var(--rule); border-radius: var(--radius-m); background: var(--sheet); padding: 10px 12px; margin-top: 8px; }
.bd-title { font-size: .78rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 6px; }
.bd-row { display: grid; grid-template-columns: 130px 1fr 150px; gap: 4px 10px; align-items: center; padding: 4px 0; font-size: .88rem; }
.bd-row small { grid-column: 1 / -1; color: var(--muted); font-size: .74rem; margin-top: -2px; }
.bd-bar { height: 10px; background: var(--rule-soft); border-radius: 5px; overflow: hidden; }
.bd-bar i { display: block; height: 100%; border-radius: 5px; animation: grow .8s ease both; transform-origin: left; }
.bd-bar i.m { background: var(--prop); } .bd-bar i.e { background: var(--accent); }
.bd-v { text-align: right; }
.bd-total { border-top: 1px solid var(--rule); margin-top: 6px; padding-top: 6px; font-size: .95rem; }
.bd-note { font-size: .82rem; margin-top: 4px; color: var(--ink-2); }
@media (max-width: 640px) { .bd-row { grid-template-columns: 1fr 1fr; } .bd-bar { grid-column: 1 / -1; } }
.bd span { border: none; background: none; padding: 0; border-radius: 0; }
.bd-row.off { opacity: .55; }
.bd-row { grid-template-columns: 170px 1fr 170px; }
details.team { margin: 0 20px 14px; border: 1px solid var(--rule); border-radius: var(--radius-m); padding: 10px 14px; background: var(--paper); }
details.team summary { cursor: pointer; font-weight: 700; }
.team-steps { margin: 10px 0 0; padding-left: 0; list-style: none; display: grid; gap: 8px; }
.team-steps li { display: grid; gap: 2px; font-size: .88rem; } .team-steps li span { color: var(--ink-2); }
details.team { display: block; } details.team > summary { display: list-item; } .team-steps { width: 100%; }

.sum2 { border: 1px solid var(--rule); border-radius: var(--radius-m); background: var(--sheet); padding: 6px 12px; margin-top: 8px; }
.s2row { display: grid; grid-template-columns: 30px 1fr; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--rule-soft); font-size: .93rem; }
.s2row.tot { border-bottom: none; }
.s2ic { font-size: 1.2rem; }
.s2h { font-weight: 700; } .s2h small { font-weight: 500; color: var(--muted); margin-left: 6px; font-size: .76rem; }
.s2q { margin-top: 4px; font-family: var(--doc); font-size: .95rem; color: var(--ink-2); }
.s2fix { font-size: .84rem; background: var(--accent-soft); border-radius: 6px; padding: 6px 10px; margin: 4px 0 6px; }
details.s2more summary { cursor: pointer; color: var(--accent); font-size: .85rem; padding: 6px 0; }
.aiexp { margin: 6px 0 0; font-size: .9rem; background: var(--paper); border-radius: 6px; padding: 6px 10px; }
.sum2 span { border: none; background: none; padding: 0; border-radius: 0; }
.mrole { font-size: .84rem; margin-top: 6px; color: var(--ink-2); } .mrole details { margin-top: 4px; } .skl { margin: 4px 0 0; padding-left: 18px; }

.demo-box { margin-top: 12px; border: 1px dashed var(--rule); border-radius: var(--radius-m); padding: 10px 12px; background: var(--paper); }
.demo-h { font-size: .8rem; font-weight: 700; color: var(--ink-2); margin-bottom: 6px; }
.demo-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.dchip { font: inherit; font-size: .8rem; border: 1px solid var(--rule); background: var(--sheet); color: var(--ink); border-radius: 999px; padding: 4px 10px; cursor: pointer; transition: border-color .15s, transform .15s; }
.dchip:hover { border-color: var(--accent); transform: translateY(-1px); }
.ocr-install { border: 1px solid var(--unsure); background: var(--unsure-soft); border-radius: var(--radius-m); padding: 10px 12px; margin-top: 8px; }
.ocr-log { font-size: .72rem; max-height: 140px; overflow: auto; background: var(--sheet); border-radius: 6px; padding: 6px 8px; margin: 8px 0 0; white-space: pre-wrap; }

.flow9 { grid-template-columns: repeat(9, 1fr); }
@media (max-width: 1200px) { .flow9 { grid-template-columns: repeat(3, 1fr); } .flow9 div::after { display: none; } }
.verdicts { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; align-items: center; font-size: .9rem; margin-top: 8px; }
.vt { font-weight: 800; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.vt.t { background: var(--real-soft); color: var(--real); } .vt.f { background: var(--fake-soft); color: var(--fake); }
.vt.u { background: var(--unsure-soft); color: var(--unsure); } .vt.n { background: var(--rule-soft); color: var(--ink-2); }
.dcard span b { display: inline; margin: 0; }

/* ---- unlimited random demos ---- */
.demo-sub{font-weight:400;font-size:.82em;color:var(--muted);margin-left:6px}
.dchip.dbig{background:var(--ink,#1d2433);color:var(--paper,#fff);border-color:transparent;font-weight:600}
.dchip:disabled{opacity:.5;cursor:wait}
.demo-kind{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:10px;font-size:.85rem;color:var(--muted)}
.demo-kind select{padding:6px 10px;border-radius:8px;border:1px solid var(--rule);background:var(--paper,#fff);color:inherit;font:inherit}
.demo-info{margin-top:12px;padding:10px 14px;border-radius:12px;border:1px dashed var(--rule);background:color-mix(in srgb,var(--accent,#5b6cff) 6%,transparent);display:grid;gap:3px}
.demo-info a{color:inherit;text-decoration:underline}
.di-top{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.di-type{font-weight:700}
.di-live{font-size:.75rem;color:var(--real);font-weight:600}
.di-off{font-size:.75rem;color:var(--muted)}
.dtag{display:inline-block;font-size:.7rem;padding:1px 7px;border-radius:999px;background:color-mix(in srgb,var(--accent,#5b6cff) 14%,transparent);margin-right:4px;white-space:nowrap}

/* strict verdict policy: reasons with sources */
.vc-pct span small { display: inline; font-size: 1rem; color: inherit; font-weight: 700; }
.vsum { margin-top: 6px; font-size: .9rem; color: var(--ink-2); }
.reasons { list-style: none; margin: 8px 0 4px; padding: 0; display: grid; gap: 6px; }
.reasons .rs { display: grid; grid-template-columns: 22px 1fr; gap: 6px; font-size: .9rem; padding: 6px 8px; border-radius: 6px; background: var(--paper); }
.reasons .ri { font-weight: 800; text-align: center; }
.reasons .rs.confirm .ri { color: var(--real); } .reasons .rs.deny .ri { color: var(--fake); }
.reasons .rs.rumour .ri, .reasons .rs.rejected .ri { color: var(--unsure); }
.reasons .rq { font-style: italic; color: var(--ink-2); margin-top: 2px; }

/* partly true / misleading */
.claim.MISLEADING { border-left: 5px solid var(--unsure); }
.cpill.MISLEADING { background: var(--unsure-soft); color: var(--unsure); }
.evi.partly .st { color: var(--unsure); }
.reasons .rs.partly .ri { color: var(--unsure); }
.srcsay { margin: 8px 0 4px; padding: 8px 12px; border-radius: 10px; background: var(--rule-soft); font-size: .9rem; line-height: 1.45; }