/* ============================================================================
   Video Upload — stiller
   ============================================================================
   Görsel dil Performance Marketing paneliyle aynı (krem & kahve, tek aksan
   rengi kırmızı). Renk değerleri oradan birebir alındı.

   Yayıncı sayfası telefondan kullanılacak: önce dar ekran, dokunma hedefleri
   en az 44px.
   ============================================================================ */

:root {
  --bg:#f5f1e8;  --fg:#2a211a;  --white:#fffdf8;

  --brand-50:#f5efe6; --brand-100:#ebe1d3; --brand-200:#dccdb8; --brand-300:#b59b7c;
  --brand-400:#8a6f52; --brand-500:#5c4632; --brand-600:#33241a; --brand-700:#1e140d;

  --s50:#faf6ee; --s100:#f2ebdd; --s200:#e5dccc; --s300:#d6c9b4;
  --s400:#9a8b7b; --s500:#7d6e5f; --s600:#6b5d4f; --s700:#4a3e33;
  --s800:#382e25; --s900:#2a211a;

  --ok-50:#edf2ea;  --ok-100:#dce7d7; --ok-200:#c3d4bb; --ok-600:#4f6b4a; --ok-700:#415a3d;
  --warn-50:#fbf1df; --warn-100:#f6e6c8; --warn-200:#ebd3a6; --warn-500:#ac7a28; --warn-700:#855a1d;
  --bad-50:#f8eae6;  --bad-100:#f1d8d1; --bad-200:#e5bcb0; --bad-500:#b04a3b; --bad-600:#9a3b2e;

  --accent:#E02A30;
  --r:8px;
}

* { box-sizing:border-box; margin:0; padding:0 }
html,body { min-height:100% }
body {
  background:var(--bg); color:var(--fg);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,system-ui,Arial,sans-serif;
  font-size:14px; line-height:1.55; -webkit-font-smoothing:antialiased;
}
button { font:inherit; color:inherit; background:none; border:none; cursor:pointer }
input,select,textarea { font:inherit; color:inherit }
a { color:inherit }
::selection { background:var(--brand-600); color:var(--white) }
svg { display:block }
.hidden { display:none !important }
.muted { color:var(--s500) }
.small { font-size:12px }

/* ══ KABUK (review / admin) ═════════════════════════════════════════════ */
.top {
  position:sticky; top:0; z-index:30;
  display:flex; align-items:center; gap:18px;
  background:var(--white); border-bottom:1px solid var(--s200);
  padding:0 20px; height:56px;
}
.mark { display:flex; align-items:center; gap:10px; font-weight:600; font-size:14px; white-space:nowrap }
.tile {
  display:flex; align-items:center; justify-content:center;
  width:30px; height:30px; border-radius:8px; background:var(--accent); color:#fff; flex:none;
}
.tnav { display:flex; gap:4px; flex:1; min-width:0 }
.tnav a {
  text-decoration:none; color:var(--s600); font-weight:500;
  padding:7px 12px; border-radius:var(--r);
}
.tnav a:hover { background:var(--s100); color:var(--s800) }
.tnav a.on { background:var(--brand-600); color:var(--white) }
.who { color:var(--s500); font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }

.body { padding:24px 28px 64px; max-width:1440px; margin:0 auto }
.phead { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:18px }
.phead h1 { font-size:23px; font-weight:600; letter-spacing:-.01em }

/* ══ ORTAK PARÇALAR ═════════════════════════════════════════════════════ */
.card { background:var(--white); border:1px solid var(--s200); border-radius:12px }
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:38px; padding:0 16px; border-radius:var(--r);
  font-weight:600; text-decoration:none; white-space:nowrap;
  background:var(--white); border:1px solid var(--s300); color:var(--s800);
  transition:background-color .12s ease, border-color .12s ease;
}
.btn:hover { background:var(--s50); border-color:var(--s400) }
.btn.primary { background:var(--brand-600); border-color:var(--brand-600); color:var(--white) }
.btn.primary:hover { background:var(--brand-700) }
.btn.accent { background:var(--accent); border-color:var(--accent); color:#fff }
.btn.accent:hover { background:#c4222a }
.btn[disabled] { opacity:.45; cursor:not-allowed }
.btn.sm { height:30px; padding:0 11px; font-size:13px }

.chip {
  display:inline-flex; align-items:center; height:22px; padding:0 8px;
  border-radius:999px; font-size:12px; font-weight:600; white-space:nowrap;
  background:var(--s100); color:var(--s600);
}
.chip.pending  { background:var(--warn-50); color:var(--warn-700) }
.chip.approved { background:var(--ok-50);   color:var(--ok-700) }
.chip.rejected { background:var(--bad-50);  color:var(--bad-600) }
.chip.yes   { background:var(--ok-50);   color:var(--ok-700) }
.chip.no    { background:var(--bad-50);  color:var(--bad-600) }
.chip.maybe { background:var(--warn-50); color:var(--warn-700) }

.field { display:flex; flex-direction:column; gap:6px }
.field label { font-weight:600; font-size:13px; color:var(--s700) }
.field .hint { font-size:12px; color:var(--s500) }
.input {
  height:44px; padding:0 12px; border-radius:var(--r);
  border:1px solid var(--s300); background:var(--white); font-size:16px; width:100%;
}
.input:focus { outline:2px solid var(--brand-300); outline-offset:0; border-color:var(--brand-400) }
.input.bad { border-color:var(--bad-500) }
.err { color:var(--bad-600); font-size:13px; font-weight:500 }
.flash {
  border-radius:var(--r); padding:10px 14px; font-weight:500;
  background:var(--bad-50); color:var(--bad-600); border:1px solid var(--bad-200);
}
.flash.ok { background:var(--ok-50); color:var(--ok-700); border-color:var(--ok-200) }

/* ══ YAYINCI SAYFASI ════════════════════════════════════════════════════ */
.pub { max-width:560px; margin:0 auto; padding:28px 16px 64px }
.pub .brand { display:flex; align-items:center; gap:10px; font-weight:600; margin-bottom:22px }
.pub h1 { font-size:24px; font-weight:650; letter-spacing:-.01em; margin-bottom:4px }
.pub .lead { color:var(--s500); margin-bottom:20px }

.steps { display:flex; gap:6px; margin-bottom:20px }
.steps span { flex:1; height:4px; border-radius:2px; background:var(--s200) }
.steps span.on { background:var(--accent) }

.step { display:flex; flex-direction:column; gap:16px }
.step h2 { font-size:17px; font-weight:600 }
.step .sub { color:var(--s500); margin-top:-12px; font-size:13px }

.apps { display:grid; grid-template-columns:1fr 1fr; gap:12px }
.appcard {
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  min-height:130px; padding:18px; border-radius:12px;
  background:var(--white); border:2px solid var(--s200);
  font-size:17px; font-weight:650;
  transition:border-color .12s ease, background-color .12s ease;
}
.appcard:hover { border-color:var(--brand-300) }
.appcard.on { border-color:var(--accent); background:#fff6f5 }
.appcard .logo { width:52px; height:52px; border-radius:14px; object-fit:cover }
.appcard .logo.letter {
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:22px; color:#fff;
  background:linear-gradient(135deg,#ff8a5c,#ff5a36);
}

.durs { display:grid; grid-template-columns:1fr 1fr; gap:10px }
.dur {
  height:52px; border-radius:10px; background:var(--white);
  border:2px solid var(--s200); font-weight:600; font-size:15px;
}
.dur:hover { border-color:var(--brand-300) }
.dur.on { border-color:var(--accent); background:#fff6f5; color:var(--accent) }

.drop {
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  min-height:150px; padding:18px; border-radius:12px; text-align:center;
  border:2px dashed var(--s300); background:var(--white); cursor:pointer;
}
.drop:hover { border-color:var(--brand-400) }
.drop.off { opacity:.5; cursor:not-allowed }
.drop strong { font-size:15px }
.drop input { display:none }
.picked { display:flex; align-items:center; gap:12px; padding:12px 14px }
.picked .nm { font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.picked .grow { flex:1; min-width:0 }

.bar { height:8px; border-radius:4px; background:var(--s200); overflow:hidden }
.bar i { display:block; height:100%; width:0; background:var(--accent); transition:width .15s linear }

.row { display:flex; gap:10px }
.row .btn { flex:1; height:46px; font-size:15px }
.summary { display:flex; flex-wrap:wrap; gap:6px 14px; font-size:13px; color:var(--s600); padding:12px 14px }
.summary b { color:var(--s800) }
.done { text-align:center; padding:28px 18px; display:flex; flex-direction:column; align-items:center; gap:12px }
.done .ok {
  width:56px; height:56px; border-radius:50%; background:var(--ok-50); color:var(--ok-600);
  display:flex; align-items:center; justify-content:center;
}

/* ══ REVIEW ═════════════════════════════════════════════════════════════ */
.rv { display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:20px; align-items:start }
.player { background:#000; border-radius:12px; overflow:hidden; display:flex; justify-content:center }
.player video { display:block; width:100%; max-height:72vh; background:#000 }
.meta { padding:16px; display:flex; flex-direction:column; gap:10px }
.kv { display:grid; grid-template-columns:110px 1fr; gap:6px 10px; font-size:13px }
.kv dt { color:var(--s500) }
.kv dd { font-weight:600; word-break:break-word }
.answers { display:grid; grid-template-columns:repeat(3,1fr); gap:8px }
.ans {
  height:56px; border-radius:10px; font-size:16px; font-weight:700;
  border:2px solid var(--s200); background:var(--white);
}
.ans.yes:hover, .ans.yes.on { border-color:var(--ok-600); background:var(--ok-50); color:var(--ok-700) }
.ans.no:hover, .ans.no.on { border-color:var(--bad-500); background:var(--bad-50); color:var(--bad-600) }
.ans.maybe:hover, .ans.maybe.on { border-color:var(--warn-500); background:var(--warn-50); color:var(--warn-700) }
.empty { padding:48px 18px; text-align:center; color:var(--s500) }
.empty h2 { color:var(--s800); font-size:18px; margin-bottom:6px }

/* ══ TABLO ══════════════════════════════════════════════════════════════ */
.filters { display:flex; flex-wrap:wrap; gap:10px; align-items:flex-end; padding:14px 16px }
.filters .field label { font-size:12px; font-weight:600; color:var(--s500) }
.filters select, .filters input[type=date] {
  height:36px; padding:0 10px; border-radius:var(--r); border:1px solid var(--s300); background:var(--white);
}
.tabs { display:flex; gap:4px; flex-wrap:wrap }
.tabs a {
  text-decoration:none; padding:7px 12px; border-radius:var(--r); font-weight:600; color:var(--s600);
  border:1px solid transparent;
}
.tabs a:hover { background:var(--s100) }
.tabs a.on { background:var(--white); border-color:var(--s300); color:var(--s900) }
.tabs a .n { color:var(--s400); font-weight:500; margin-left:4px }

.tbl { width:100%; border-collapse:collapse }
.tbl th {
  text-align:left; font-size:12px; font-weight:600; color:var(--s500);
  padding:10px 12px; border-bottom:1px solid var(--s200); white-space:nowrap;
}
.tbl td { padding:10px 12px; border-bottom:1px solid var(--s100); vertical-align:middle }
.tbl tr:last-child td { border-bottom:none }
.tbl video { width:180px; height:110px; background:#000; border-radius:6px; display:block; object-fit:contain }
.tbl .acts { display:flex; gap:6px; flex-wrap:wrap }
.tbl .by { font-size:12px; color:var(--s500); margin-top:4px }
.tally { display:flex; gap:4px }
.warn { color:var(--warn-700); font-size:12px }
.pager { display:flex; gap:8px; align-items:center; justify-content:flex-end; padding:12px 16px }
.export { display:flex; flex-wrap:wrap; gap:10px; align-items:flex-end; padding:14px 16px }
.export .title { font-weight:600; width:100%; font-size:13px }
.tablewrap { overflow-x:auto }

.recent { margin-top:22px }
.recent h3 { font-size:14px; font-weight:600; padding:14px 16px 4px }

@media (max-width:900px) {
  .rv { grid-template-columns:1fr }
  .body { padding:18px 16px 48px }
  .top { padding:0 12px; gap:10px }
  .mark span.lbl { display:none }
  .who { display:none }
}

/* ══ YAYINCI SAYFASI — KOYU TEMA ════════════════════════════════════════
   Yayıncılar SuperLive / Salsa'dan geliyor; uygulama siteleri koyu.
   Sayfa onlara benzesin diye koyu zemin + renkli ışık. Uygulama seçilince
   aksan rengi o uygulamanın rengine döner (body[data-app]).
   Yalnız yayıncı sayfası: Review / Admin ekip paneli, açık temada kalır. */
body.dark {
  --accent:#E02A30; --accent-2:#ff5a5f; --accent-soft:rgba(224,42,48,.14);
  --glow-1:rgba(224,42,48,.28); --glow-2:rgba(80,70,220,.22);

  --bg:#0c0b10; --fg:#f4f2f7; --white:#17151d;
  --s50:#1b1922; --s100:#211f28; --s200:#2b2833; --s300:#3a3643;
  --s400:#6f6a7a; --s500:#a19cab; --s600:#bdb8c6; --s700:#d6d2dd; --s800:#ebe8f0; --s900:#f4f2f7;
  --brand-300:var(--accent); --brand-400:var(--accent);
  --bad-50:rgba(255,90,95,.12); --bad-200:rgba(255,90,95,.35); --bad-500:#ff6b70; --bad-600:#ff8a8e;
  --ok-50:rgba(70,200,120,.14); --ok-600:#5fd38d;

  min-height:100vh;
  background:
    radial-gradient(900px 520px at 85% -8%, var(--glow-1), transparent 62%),
    radial-gradient(800px 520px at -12% 105%, var(--glow-2), transparent 60%),
    var(--bg);
  background-attachment:fixed;
}
body.dark[data-app="superlive"] {
  --accent:#2f7df6; --accent-2:#5fb2ff; --accent-soft:rgba(47,125,246,.16);
  --glow-1:rgba(47,125,246,.32); --glow-2:rgba(95,178,255,.16);
}
/* Salsa: logodaki pembe → mor. */
body.dark[data-app="salsa"] {
  --accent:#e0197a; --accent-2:#f03c8f; --accent-soft:rgba(224,25,122,.16);
  --glow-1:rgba(224,25,122,.30); --glow-2:rgba(122,10,94,.38);
}
body.dark ::selection { background:var(--accent); color:#fff }
body.dark .pub h1 { font-size:30px; font-weight:750; letter-spacing:-.02em }
body.dark .tile { background:linear-gradient(135deg,var(--accent-2),var(--accent)) }
body.dark .steps span.on { background:linear-gradient(90deg,var(--accent),var(--accent-2)) }
body.dark .appcard, body.dark .dur, body.dark .drop, body.dark .card {
  background:rgba(23,21,29,.72); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
body.dark .appcard.on, body.dark .dur.on {
  border-color:var(--accent); background:var(--accent-soft); color:var(--fg);
  box-shadow:0 0 0 1px var(--accent), 0 10px 30px var(--accent-soft);
}
body.dark .dur.on { color:var(--accent-2) }
body.dark .btn { background:rgba(255,255,255,.04); border-color:var(--s300); color:var(--fg) }
body.dark .btn:hover { background:rgba(255,255,255,.08); border-color:var(--s400) }
body.dark .btn.primary, body.dark .btn.accent {
  background:linear-gradient(135deg,var(--accent-2),var(--accent)); border-color:transparent; color:#fff;
  box-shadow:0 8px 24px var(--accent-soft);
}
body.dark .btn.primary:hover, body.dark .btn.accent:hover { filter:brightness(1.08) }
body.dark .btn[disabled] { box-shadow:none }
body.dark .input { background:rgba(255,255,255,.04) }
body.dark .input:focus { outline-color:var(--accent-soft); border-color:var(--accent) }
body.dark .bar i { background:linear-gradient(90deg,var(--accent),var(--accent-2)) }
body.dark .drop:hover { border-color:var(--accent) }

/* ── yerleşim ───────────────────────────────────────────────────────────
   İçerik ekranın ortasında (yatay + dikey), başlık bloğu ortalı. Form
   adımlarında (2, 3) alanlar yine sola hizalı; yalnız başlıklar ortada.   */
body.dark .stage { min-height:100vh; display:flex; align-items:center; justify-content:center }
body.dark .pub { width:100%; max-width:640px; padding:48px 16px 64px }
body.dark .pub .brand {
  justify-content:center; margin-bottom:18px;
  font-size:12px; font-weight:650; letter-spacing:.22em; text-transform:uppercase; color:var(--s500);
}
/* Kazanç rozeti — rengi seçilen uygulamaya döner (--accent). */
.earn {
  display:flex; align-items:center; gap:8px; width:max-content; margin:0 auto 18px;
  padding:8px 16px 8px 12px; border-radius:999px;
  font-size:15px; font-weight:750; letter-spacing:.01em; color:#fff;
  background:linear-gradient(135deg,var(--accent-2),var(--accent));
  box-shadow:0 10px 28px var(--accent-soft), inset 0 1px 0 rgba(255,255,255,.25);
}
body.dark .pub h1 { font-size:42px; line-height:1.1; text-align:center; margin-bottom:10px }
body.dark .pub .lead { text-align:center; font-size:15px; margin-bottom:30px }
body.dark .steps { margin-bottom:30px }
body.dark .step h2 { font-size:19px }
body.dark #step1 h2 { text-align:center }
body.dark .apps { gap:16px }
body.dark .appcard {
  min-height:200px; gap:16px; border-radius:18px; font-size:20px;
  transition:border-color .15s ease, background-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
body.dark .appcard:hover { transform:translateY(-3px); border-color:var(--accent); box-shadow:0 14px 34px rgba(0,0,0,.35) }
body.dark .appcard .logo { width:80px; height:80px; border-radius:22px }
.facts {
  display:flex; justify-content:center; flex-wrap:wrap; gap:10px 28px;
  margin-top:6px; padding:0; list-style:none; font-size:13px; color:var(--s500);
}
.facts li { display:flex; align-items:center; gap:8px }
.facts svg { color:var(--s400); flex:none }

@media (max-width:700px) {
  body.dark .stage { align-items:flex-start }
  body.dark .pub { padding-top:32px }
  body.dark .pub h1 { font-size:32px }
  body.dark .appcard { min-height:160px; font-size:17px }
  body.dark .appcard .logo { width:64px; height:64px; border-radius:18px }
}

/* ── arka plan görselleri ───────────────────────────────────────────────
   Yalnız İLK ekranda (uygulama seçimi): iki görsel sayfanın arkasında, soluk
   ve hafif bulanık — süs, okunacak bir şey değil. Sonraki adımlarda görsel
   yok, sadece koyu tema. Hangi adımda olunduğunu body[data-step] söylüyor
   (upload.js → go()).                                                     */
.stage .pub { position:relative; z-index:1 }
.hero {
  position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none;
  opacity:0; transition:opacity .4s ease;
}
body[data-step="1"] .hero { opacity:1 }
.hero img {
  position:absolute; opacity:.26; filter:blur(1px) saturate(.9);
  user-select:none;
}
/* Sütun 640px (yarısı 320) — görseller sütunun iki yanında, ortaya yakın. */
.hero .h-prof { width:min(28vw,420px); right:calc(50% + 350px); top:calc(50vh - 260px) }
.hero .h-call {
  width:min(32vw,470px); left:calc(50% + 360px); top:calc(50vh - 120px);
  border-radius:26px; transform:rotate(5deg);
}

@media (max-width:1100px) {
  .hero .h-prof { right:auto; left:-4vw }
  .hero .h-call { left:auto; right:-6vw }
}
@media (max-width:700px) {
  .hero img { opacity:.16 }
  .hero .h-prof { width:52vw; left:-16vw; top:-3vh }
  .hero .h-call { width:78vw; right:-14vw; top:auto; bottom:6vh }
}

/* ── dil seçici (yayıncı tarafı, sağ üst; RTL'de sol üst) ──────────────── */
.langpick {
  position:fixed; top:16px; inset-inline-end:16px; z-index:20;
  display:flex; align-items:center; gap:6px; height:36px; padding:0 10px;
  border-radius:999px; color:var(--s600); cursor:pointer;
  background:rgba(23,21,29,.72); border:1px solid var(--s300);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.langpick:hover { border-color:var(--s400); color:var(--fg) }
.langpick select {
  appearance:none; -webkit-appearance:none; border:none; background:none; outline:none;
  color:inherit; font-size:13px; font-weight:600; cursor:pointer; padding-inline-end:2px;
}
.langpick option { color:#111; background:#fff }
/* Telefonda seçici sayfayla birlikte kayar, başlığın üstüne binmez. */
@media (max-width:700px) {
  .langpick { position:absolute; top:12px }
  body.dark .pub { padding-top:64px }
  .legal { padding-top:64px }
}

/* ── şartlar kutusu (3. adım) ──────────────────────────────────────────── */
.agree { display:flex; align-items:flex-start; gap:10px; font-size:13px; color:var(--s600); cursor:pointer; line-height:1.5 }
.agree input { width:18px; height:18px; margin-top:1px; flex:none; accent-color:var(--accent); cursor:pointer }
.agree a { color:var(--fg); text-underline-offset:2px }

/* ── alt bağlantılar ───────────────────────────────────────────────────── */
.foot {
  display:flex; justify-content:center; align-items:center; gap:8px; flex-wrap:wrap;
  margin-top:34px; font-size:12px; color:var(--s400);
}
.foot a, .foot button { color:var(--s500); text-decoration:none; font-size:12px }
.foot a:hover, .foot button:hover { color:var(--fg); text-decoration:underline }

/* ── çerez onayı (altta, sayfayı kilitlemez) ───────────────────────────── */
.consent {
  position:fixed; z-index:40; bottom:16px; left:50%; transform:translateX(-50%);
  width:min(640px, calc(100% - 32px));
  display:flex; align-items:center; gap:16px; padding:14px 16px; border-radius:14px;
  background:rgba(23,21,29,.92); border:1px solid var(--s300); color:var(--s700);
  box-shadow:0 18px 50px rgba(0,0,0,.45);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  font-size:13px; line-height:1.5;
}
.consent p { flex:1 }
.consent a { color:var(--fg); text-underline-offset:2px }
.consent .row { flex:none; gap:8px }
.consent .btn { height:36px }
@media (max-width:560px) {
  .consent { flex-direction:column; align-items:stretch }
  .consent .row .btn { flex:1 }
}

/* ── gizlilik / şartlar sayfası ───────────────────────────────────────── */
.legal { width:100%; max-width:720px; margin:0 auto; padding:72px 16px 64px; color:var(--s700) }
.legal .back { color:var(--s500); font-size:13px; text-decoration:none }
.legal .back:hover { color:var(--fg) }
.legal h1 { font-size:32px; font-weight:750; letter-spacing:-.02em; color:var(--fg); margin:18px 0 4px }
.legal .lead { font-size:15px; margin:14px 0 8px }
.legal h2 { font-size:17px; font-weight:650; color:var(--fg); margin:26px 0 6px }
.legal p { line-height:1.7 }
body.dark .stage:has(.legal) { align-items:flex-start }

/* ── Visitors (ekip paneli, açık tema) ─────────────────────────────────── */
.note {
  margin-bottom:14px; padding:10px 14px; border-radius:var(--r); font-size:13px;
  background:var(--s50); border:1px solid var(--s200); color:var(--s600);
}
.chip.flag { background:var(--warn-50); color:var(--warn-700) }
.tbl td.num { text-align:right; font-variant-numeric:tabular-nums; font-weight:600 }
.tbl.vis td { vertical-align:top }
.tbl.vis .chip { margin:0 2px 3px 0 }
code { font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:.92em }
.stats { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:14px }
.stat { padding:14px 16px }
.stat .n { font-size:26px; font-weight:650; font-variant-numeric:tabular-nums }
.kv { display:flex; gap:16px; padding:6px 0; border-bottom:1px solid var(--s100) }
.kv:last-child { border-bottom:none }
.kv > span:first-child { width:220px; flex:none }
@media (max-width:700px) { .stats { grid-template-columns:repeat(2,1fr) } .kv { flex-direction:column; gap:2px } }