/* ===== Memofluent · SEO pages shared styles ===== */
:root, [data-theme="light"]{
  --bg-warm:#F2EEE4; --bg-cream:#FBF8F0; --paper:#FCFAF4; --field:#FFFFFF;
  --ink:#1a1a1a; --ink-soft:#3a3a3a; --muted:#8a8478; --faint:#b4ad9e;
  --hairline:rgba(26,26,26,0.11); --hairline-soft:rgba(26,26,26,0.06);
  --green:#1f8a4f; --green-deep:#186a3d; --green-bright:#3FB76C; --green-tint:rgba(31,138,79,0.12);
  --amber:#C98A2B; --amber-tint:rgba(217,164,65,0.16);
  --coral:#C75A45; --coral-tint:rgba(199,90,69,0.12);
  --blue:#2A6FDB; --blue-tint:rgba(42,111,219,0.10);
  --shadow-card:0 1px 0 rgba(26,26,26,0.04), 0 16px 40px -22px rgba(26,26,26,0.18);
  --shadow-soft:0 1px 0 rgba(26,26,26,0.03);
  --font-serif:"Lora","PT Serif",Georgia,serif;
  --font-sans:"Inter",system-ui,-apple-system,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,monospace;
}
[data-theme="dark"]{
  --bg-warm:#211d17; --bg-cream:#2a251e; --paper:#2f2a22; --field:#27221a;
  --ink:#F6F2E9; --ink-soft:#d8d2c4; --muted:#9c9485; --faint:#726b5a;
  --hairline:rgba(245,241,232,0.16); --hairline-soft:rgba(245,241,232,0.08);
  --green:#46c275; --green-deep:#5fcf86; --green-bright:#5fcf86; --green-tint:rgba(63,183,108,0.18);
  --amber:#E8B450; --amber-tint:rgba(232,180,80,0.18);
  --coral:#F0926F; --coral-tint:rgba(240,146,111,0.16);
  --blue:#5B92F0; --blue-tint:rgba(91,146,240,0.16);
  --shadow-card:0 1px 0 rgba(0,0,0,0.22), 0 16px 40px -22px rgba(0,0,0,0.5);
  --shadow-soft:0 1px 0 rgba(0,0,0,0.2);
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
html,body{background:var(--bg-warm);color:var(--ink);font-family:var(--font-sans);-webkit-font-smoothing:antialiased;min-height:100vh;}
body{ background-image:radial-gradient(circle at 4% 0%, rgba(31,138,79,0.07), transparent 30%); background-attachment:fixed; }
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer;}
a{color:inherit;text-decoration:none;}
::selection{background:var(--green);color:var(--bg-warm);}

.wrap{ max-width:1280px; margin:0 auto; padding:0 32px; }
@media (max-width:680px){ .wrap{ padding:0 16px; } }

/* ===== header (prod style: rounded, pill controls) ===== */
.site-header{ position:sticky; top:0; z-index:40; padding-top:14px; }
.hbar{
  display:flex; align-items:center; gap:16px; min-height:61px;
  padding:3px 14px; border-radius:4px;
  background:rgba(255,252,245,0.55); backdrop-filter:blur(24px) saturate(140%); -webkit-backdrop-filter:blur(24px) saturate(140%);
  border:1px solid rgba(255,255,255,0.65);
  box-shadow:0 10px 40px rgba(26,26,26,0.08), inset 0 1px 0 rgba(255,255,255,0.7);
}
[data-theme="dark"] .hbar{
  background:rgba(40,36,30,0.55); border-color:rgba(255,255,255,0.08);
  box-shadow:0 10px 40px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.05);
}
.hbrand{ display:flex; align-items:center; gap:10px; }
.hbrand .brand-mark{ display:block; flex-shrink:0; }
.hmark{ width:38px; height:38px; border-radius:10px; background:#1a1a1a; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.hname{ font-family:var(--font-serif); font-weight:600; font-size:19px; letter-spacing:-0.02em; }
.hname .fl{ color:var(--green); }
.hnav{ display:flex; gap:4px; margin-left:8px; }
.hnav a{ padding:8px 14px; border-radius:999px; font-size:14px; font-weight:500; color:var(--ink-soft); }
.hnav a:hover{ background:var(--hairline-soft); color:var(--ink); }
.hnav a.on{ color:var(--green); }
.site-header .grow{ flex:1; }
.hlang{ display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px; background:rgba(255,252,245,0.72); border:1px solid rgba(255,255,255,0.65); font-family:var(--font-mono); font-size:12px; font-weight:500; color:var(--ink-soft); }
[data-theme="dark"] .hlang{ background:rgba(50,46,38,0.72); border-color:rgba(255,255,255,0.08); }
.hcta{ display:inline-flex; align-items:center; gap:8px; padding:10px 18px; border-radius:999px; background:var(--green); color:#fff; font-size:14px; font-weight:600; }
[data-theme="dark"] .hcta{ color:#14110d; }
.hcta:hover{ background:var(--green-deep); }
@media (max-width:820px){ .hnav{ display:none; } }

/* ===== breadcrumbs ===== */
.crumbs{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin:26px 0 0; font-family:var(--font-mono); font-size:12px; color:var(--muted); }
.crumbs a{ color:var(--muted); }
.crumbs a:hover{ color:var(--green); }
.crumbs .sep{ color:var(--faint); }
.crumbs .cur{ color:var(--ink-soft); }

/* ===== page hero ===== */
.page-hero{ padding:22px 0 6px; }
.page-hero .eyebrow{ font-family:var(--font-mono); font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:var(--green); margin-bottom:14px; display:inline-flex; align-items:center; gap:10px; }
.page-hero .eyebrow .flag{ width:22px; height:15px; border-radius:3px; box-shadow:inset 0 0 0 1px rgba(0,0,0,0.08); }
h1.page-h1{ font-family:var(--font-serif); font-weight:500; font-size:clamp(34px,5vw,56px); letter-spacing:-0.025em; line-height:1.02; }
h1.page-h1 em{ font-style:italic; color:var(--green); }
.page-hero .lede{ font-size:18px; color:var(--ink-soft); margin-top:16px; max-width:680px; line-height:1.55; }
.page-meta{ display:flex; gap:20px; margin-top:18px; flex-wrap:wrap; font-family:var(--font-mono); font-size:12px; color:var(--muted); }
.page-meta b{ color:var(--green); }

/* ===== language fork (home block) ===== */
.fork{ padding:46px 0; }
.fork-head{ text-align:center; margin-bottom:30px; }
.fork-head .eyebrow{ font-family:var(--font-mono); font-size:11px; letter-spacing:0.16em; text-transform:uppercase; color:var(--green); margin-bottom:12px; }
.fork-head h2{ font-family:var(--font-serif); font-weight:500; font-size:clamp(28px,3.6vw,42px); letter-spacing:-0.02em; }
.fork-head h2 em{ font-style:italic; color:var(--green); }
.fork-head p{ font-size:15px; color:var(--muted); margin-top:10px; }
.fork-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
@media (max-width:900px){ .fork-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:480px){ .fork-grid{ grid-template-columns:1fr; } }
.lang-card{
  position:relative; display:flex; flex-direction:column; gap:14px;
  padding:24px; border-radius:18px; background:var(--paper);
  border:1px solid var(--hairline-soft); border-top:4px solid var(--green);
  box-shadow:var(--shadow-soft); transition:transform .15s, box-shadow .15s, border-color .15s;
}
.lang-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-card); }
.lang-card .flag{ width:54px; height:38px; border-radius:8px; box-shadow:inset 0 0 0 1px rgba(0,0,0,0.08); }
.lang-card .lc-name{ font-family:var(--font-serif); font-weight:600; font-size:24px; letter-spacing:-0.015em; }
.lang-card .lc-sub{ font-family:var(--font-mono); font-size:12px; color:var(--muted); }
.lang-card .lc-go{ margin-top:auto; display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:600; color:var(--green); }
.lang-card.soon{ opacity:0.62; }
.lang-card.soon .lc-go{ color:var(--muted); }

/* ===== cluster blocks (language hub) ===== */
.section-label{ display:flex; align-items:center; gap:14px; margin:46px 0 18px; }
.section-label h2{ font-family:var(--font-serif); font-weight:600; font-size:24px; letter-spacing:-0.015em; }
.section-label .ln{ flex:1; height:1px; background:var(--hairline-soft); }
.section-label .cnt{ font-family:var(--font-mono); font-size:11px; color:var(--faint); }

.blocks{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
@media (max-width:860px){ .blocks{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .blocks{ grid-template-columns:1fr; } }
.block{
  display:flex; flex-direction:column; gap:8px; padding:20px 22px; border-radius:16px;
  background:var(--paper); border:1px solid var(--hairline-soft); box-shadow:var(--shadow-soft);
  transition:transform .14s, box-shadow .14s, border-color .14s;
}
.block:hover{ transform:translateY(-2px); border-color:var(--green); box-shadow:var(--shadow-card); }
.block .b-top{ display:flex; align-items:center; gap:11px; }
.block .b-ic{ width:40px; height:40px; border-radius:11px; background:var(--green-tint); display:flex; align-items:center; justify-content:center; font-size:19px; flex-shrink:0; }
.block .b-name{ font-family:var(--font-serif); font-weight:600; font-size:17px; letter-spacing:-0.01em; line-height:1.2; }
.block .b-desc{ font-size:13px; color:var(--muted); line-height:1.5; }
.block .b-foot{ margin-top:6px; display:flex; align-items:center; justify-content:space-between; font-family:var(--font-mono); font-size:11px; color:var(--faint); }
.block .b-foot .go{ color:var(--green); font-weight:600; }
/* sub-rows: levels / audiences as pills */
.subrow{ display:flex; flex-wrap:wrap; gap:8px; margin-top:4px; }
.subrow a{ display:inline-flex; align-items:center; gap:7px; padding:9px 15px; border-radius:11px; background:var(--paper); border:1px solid var(--hairline-soft); font-size:13.5px; font-weight:500; transition:border-color .14s, color .14s; }
.subrow a:hover{ border-color:var(--green); color:var(--green); }
.subrow a .lvl{ font-family:var(--font-mono); font-size:10px; font-weight:700; padding:2px 7px; border-radius:5px; background:var(--green-tint); color:var(--green); }
.subrow a .n{ font-family:var(--font-mono); font-size:10.5px; color:var(--faint); }

/* ===== article (landing rich text) ===== */
.layout{ display:grid; grid-template-columns:1fr 300px; gap:46px; align-items:start; margin-top:30px; }
@media (max-width:960px){ .layout{ grid-template-columns:1fr; } }
.article{ min-width:0; font-size:17px; line-height:1.7; color:var(--ink-soft); }
.article > p{ margin:0 0 20px; }
.article h2{ font-family:var(--font-serif); font-weight:600; font-size:28px; letter-spacing:-0.018em; color:var(--ink); margin:40px 0 14px; scroll-margin-top:90px; }
.article h3{ font-family:var(--font-serif); font-weight:600; font-size:21px; letter-spacing:-0.01em; color:var(--ink); margin:28px 0 10px; }
.article a.inline{ color:var(--green); font-weight:500; text-decoration:underline; text-underline-offset:2px; text-decoration-color:rgba(31,138,79,0.35); }
.article a.inline:hover{ text-decoration-color:var(--green); }
.article ul, .article ol{ margin:0 0 20px; padding-left:0; list-style:none; }
.article ul li, .article ol li{ position:relative; padding-left:30px; margin-bottom:10px; }
.article ul li::before{ content:""; position:absolute; left:6px; top:11px; width:7px; height:7px; border-radius:2px; background:var(--green); transform:rotate(45deg); }
.article ol{ counter-reset:n; }
.article ol li{ counter-increment:n; }
.article ol li::before{ content:counter(n); position:absolute; left:0; top:1px; width:22px; height:22px; border-radius:7px; background:var(--green-tint); color:var(--green); font-family:var(--font-mono); font-size:11px; font-weight:700; display:flex; align-items:center; justify-content:center; }
.article figure{ margin:26px 0; }
.article figure img, .article .img-ph{ width:100%; border-radius:14px; display:block; border:1px solid var(--hairline-soft); }
.article .img-ph{ aspect-ratio:16/9; background:linear-gradient(135deg,var(--green-tint),var(--amber-tint)); display:flex; align-items:center; justify-content:center; color:var(--muted); font-family:var(--font-mono); font-size:13px; }
.article figcaption{ font-family:var(--font-mono); font-size:11.5px; color:var(--muted); margin-top:8px; text-align:center; }
.article blockquote{ margin:24px 0; padding:16px 22px; border-left:4px solid var(--green); background:var(--bg-cream); border-radius:0 12px 12px 0; font-family:var(--font-serif); font-style:italic; font-size:18px; color:var(--ink); }
.article .lead{ font-size:20px; line-height:1.6; color:var(--ink); }

/* ===== учебные блоки страниц (график / алфавит / видео) ===== */
.article .lvl-chart{ margin:26px 0; padding:22px 24px; border:1px solid var(--hairline-soft); border-radius:16px; background:var(--paper); box-shadow:var(--shadow-soft); }
.article .lvl-chart .lc-row{ display:flex; align-items:center; gap:14px; margin:11px 0; }
.article .lvl-chart .lc-lvl{ font-family:var(--font-mono); font-weight:700; font-size:13px; color:var(--green); width:34px; flex-shrink:0; }
.article .lvl-chart .lc-track{ flex:1; height:18px; background:var(--green-tint); border-radius:9px; overflow:hidden; }
.article .lvl-chart .lc-bar{ display:block; height:100%; border-radius:9px; background:linear-gradient(90deg,var(--green),var(--green-bright)); }
.article .lvl-chart .lc-val{ font-family:var(--font-mono); font-size:12px; color:var(--ink-soft); width:84px; flex-shrink:0; text-align:right; }
.article .lvl-chart .lc-cap{ font-family:var(--font-mono); font-size:11px; color:var(--muted); margin-top:12px; }
.article .alpha-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(72px,1fr)); gap:8px; margin:24px 0; }
.article .alpha-grid .ag{ position:relative; display:flex; flex-direction:column; align-items:center; gap:2px; padding:10px 6px; border:1px solid var(--hairline-soft); border-radius:11px; background:var(--paper); cursor:pointer; transition:border-color .15s, transform .1s, box-shadow .15s; -webkit-tap-highlight-color:transparent; }
.article .alpha-grid .ag:hover{ border-color:var(--green); box-shadow:var(--shadow-soft); }
.article .alpha-grid .ag:active{ transform:scale(0.96); }
.article .alpha-grid .ag.ag-play{ border-color:var(--green); background:var(--green-tint); }
.article .alpha-grid .ag::before{ content:"🔊"; position:absolute; top:5px; right:6px; font-size:9px; opacity:0.32; transition:opacity .15s; }
.article .alpha-grid .ag:hover::before, .article .alpha-grid .ag.ag-play::before{ opacity:0.7; }
.article .alpha-grid .ag b{ font-family:var(--font-serif); font-size:16px; font-weight:600; color:var(--ink); }
.article .alpha-grid .ag i{ font-family:var(--font-mono); font-size:11px; color:var(--muted); font-style:normal; }
.article .video-embed{ position:relative; aspect-ratio:16/9; border-radius:14px; overflow:hidden; border:1px solid var(--hairline-soft); }
.article .video-embed iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

/* table of contents / aside */
.aside{ position:sticky; top:96px; }
.toc{ background:var(--paper); border:1px solid var(--hairline-soft); border-radius:16px; padding:20px; box-shadow:var(--shadow-soft); margin-bottom:14px; }
.toc .t{ font-family:var(--font-mono); font-size:10px; letter-spacing:0.1em; text-transform:uppercase; color:var(--muted); margin-bottom:12px; }
.toc a{ display:block; font-size:13.5px; color:var(--ink-soft); padding:6px 0; border-bottom:1px solid var(--hairline-soft); }
.toc a:last-child{ border-bottom:none; }
.toc a:hover{ color:var(--green); }

/* ===== flashcard embed ===== */
.embed{ margin:34px 0; }
.embed .e-lbl{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:0.12em; text-transform:uppercase; color:var(--green); margin-bottom:12px; display:flex; align-items:center; gap:9px; }
.embed .e-lbl::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--green); box-shadow:0 0 0 4px var(--green-tint); }
.flashcard{ perspective:1600px; width:100%; height:300px; cursor:pointer; }
.flashcard .inner{ position:relative; width:100%; height:100%; transition:transform .55s cubic-bezier(0.2,0.8,0.2,1); transform-style:preserve-3d; }
.flashcard.flipped .inner{ transform:rotateY(180deg); }
.flashcard .face{ position:absolute; inset:0; backface-visibility:hidden; border-radius:20px; background:var(--paper); border:1px solid var(--hairline-soft); box-shadow:var(--shadow-card); display:flex; flex-direction:column; align-items:center; justify-content:center; padding:30px 34px; text-align:center; }
.flashcard .face.back{ transform:rotateY(180deg); justify-content:flex-start; }
.fc-pair{ font-family:var(--font-mono); font-size:13px; letter-spacing:0.16em; color:var(--muted); display:flex; align-items:center; gap:12px; margin-bottom:auto; margin-top:6px; }
.fc-pair::before,.fc-pair::after{ content:""; width:30px; height:1px; background:var(--hairline); }
.flashcard .word{ font-family:var(--font-serif); font-weight:600; font-size:clamp(30px,5vw,48px); letter-spacing:-0.025em; line-height:1.06; color:var(--ink); }
.flashcard .word .tgt{ color:var(--green); }
.fc-lvl{ font-family:var(--font-mono); font-size:14px; color:var(--muted); margin-top:18px; }
.fc-hint{ font-family:var(--font-mono); font-size:12.5px; color:var(--faint); margin-top:auto; margin-bottom:6px; display:flex; align-items:center; gap:9px; }
.fc-hint kbd{ font-family:var(--font-mono); font-size:11px; background:var(--bg-cream); border:1px solid var(--hairline); border-radius:6px; padding:3px 9px; color:var(--ink-soft); }
.flashcard .face.back .word{ margin-top:8px; }
.fc-ipa{ font-family:var(--font-mono); font-size:17px; color:var(--muted); margin-top:18px; }
.fc-spk{ width:34px; height:34px; border-radius:50%; background:var(--bg-cream); border:1px solid var(--hairline-soft); display:inline-flex; align-items:center; justify-content:center; font-size:15px; margin-left:10px; vertical-align:middle; cursor:pointer; }
.fc-spk:hover{ border-color:var(--green); }
.fc-div{ width:100%; max-width:520px; height:1px; background:var(--hairline-soft); margin:22px auto 18px; }
.fc-ex{ font-size:19px; line-height:1.5; color:var(--ink); max-width:560px; margin:0 auto; }
.fc-ex .hl{ background:var(--green); color:#fff; padding:1px 8px; border-radius:5px; }
.embed-cta{ display:flex; align-items:center; gap:12px; margin-top:16px; flex-wrap:wrap; }
.embed-cta .primary{ display:inline-flex; align-items:center; gap:8px; padding:13px 24px; border-radius:12px; background:var(--green); color:#fff; font-size:15px; font-weight:600; }
[data-theme="dark"] .embed-cta .primary{ color:#14110d; }
.embed-cta .primary:hover{ background:var(--green-deep); }
.embed-cta .ghost{ display:inline-flex; align-items:center; gap:8px; padding:13px 22px; border-radius:12px; border:1.5px solid var(--hairline); color:var(--ink-soft); font-size:15px; font-weight:600; }
.embed-cta .ghost:hover{ border-color:var(--green); color:var(--green); }
.embed-cta .note{ font-family:var(--font-mono); font-size:11px; color:var(--faint); margin-left:auto; }
@media (max-width:520px){ .embed-cta .note{ margin-left:0; width:100%; } .flashcard{ height:350px; } }

/* ===== related blocks ===== */
.related{ margin:40px 0 0; }
.related h2{ font-family:var(--font-serif); font-weight:600; font-size:22px; margin-bottom:16px; letter-spacing:-0.015em; }
.rel-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
@media (max-width:760px){ .rel-grid{ grid-template-columns:1fr; } }
.rel{ display:flex; align-items:center; gap:12px; padding:15px 18px; border-radius:14px; background:var(--paper); border:1px solid var(--hairline-soft); box-shadow:var(--shadow-soft); transition:border-color .14s, transform .14s; }
.rel:hover{ border-color:var(--green); transform:translateY(-2px); }
.rel .ri{ width:36px; height:36px; border-radius:10px; background:var(--green-tint); display:flex; align-items:center; justify-content:center; font-size:17px; flex-shrink:0; }
.rel .rn{ font-weight:600; font-size:14px; line-height:1.3; }
.rel .rd{ font-family:var(--font-mono); font-size:10.5px; color:var(--muted); margin-top:2px; }

/* «Читать дальше» — сворачивание объёмного SEO-текста (редакторский разделитель) */
.seo-block{ margin:40px 0 0; }
.seo-block .intro{ font-size:16px; line-height:1.7; color:var(--ink-soft); }
.collapsible .more-body{ display:none; }
.collapsible.expanded .more-body{ display:block; animation:rmfade .28s ease; }
@keyframes rmfade{ from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;} }
/* интро плавно затухает в фон снизу, пока свёрнуто — сигнал «текст продолжается» */
.collapsible:not(.expanded) .intro{ position:relative; }
.collapsible:not(.expanded) .intro::after{ content:''; position:absolute; left:0; right:0; bottom:0; height:54px;
  background:linear-gradient(to bottom, rgba(242,238,228,0), var(--bg-warm)); pointer-events:none; }
/* кнопка-разделитель: ──── label ▾ ──── */
.read-more{ display:flex; align-items:center; gap:16px; width:100%; margin:18px 0 4px; padding:0;
  background:none; border:none; cursor:pointer; }
.read-more::before, .read-more::after{ content:''; flex:1; height:1px; background:var(--hairline); transition:background .14s; }
.read-more .rm-lbl{ display:inline-flex; align-items:center; gap:8px; flex:none;
  font-family:var(--font-mono); font-weight:600; font-size:13.5px; letter-spacing:.01em; color:var(--muted); transition:color .14s; }
.read-more:hover .rm-lbl{ color:var(--green); }
.read-more:hover::before, .read-more:hover::after{ background:var(--green); opacity:.4; }
.read-more .rm-arr{ font-size:11px; transition:transform .25s ease; }
.collapsible.expanded .read-more .rm-arr{ transform:rotate(180deg); }
.read-more .rm-close{ display:none; }
.collapsible.expanded .read-more .rm-open{ display:none; }
.collapsible.expanded .read-more .rm-close{ display:inline; }

/* Карусель карточек набора в hero-эмбеде (sample_deck) */
.deck-embed{ position:relative; }
.deck-embed .flashcard{ display:none; }
.deck-embed .flashcard.active{ display:block; }
.deck-embed .fc-q{ font-family:var(--font-serif); font-weight:600; font-size:26px; line-height:1.25; letter-spacing:-0.015em; text-align:center; }
@media (max-width:760px){ .deck-embed .fc-q{ font-size:21px; } }
.de-nav{ display:flex; align-items:center; justify-content:center; gap:18px; margin-top:14px; }
.de-arw{ width:38px; height:38px; border-radius:50%; border:1px solid var(--hairline); background:var(--paper); color:var(--ink); font-size:20px; line-height:1; cursor:pointer; transition:border-color .14s, transform .14s; }
.de-arw:hover{ border-color:var(--green); transform:translateY(-1px); }
.de-pos{ font-family:var(--font-mono); font-size:12.5px; color:var(--muted); min-width:46px; text-align:center; }

/* ===== comments ===== */
.comments{ margin:46px 0 0; }
.comments-head{ display:flex; align-items:baseline; gap:12px; margin-bottom:20px; }
.comments-head h2{ font-family:var(--font-serif); font-weight:600; font-size:24px; letter-spacing:-0.015em; }
.comments-head .cc{ font-family:var(--font-mono); font-size:12px; color:var(--faint); }
.comments-head .sort{ margin-left:auto; font-family:var(--font-mono); font-size:11.5px; color:var(--muted); display:inline-flex; gap:8px; }
.comments-head .sort button{ color:var(--muted); }
.comments-head .sort button.on{ color:var(--green); font-weight:600; }

.comment-form{ display:flex; gap:13px; margin-bottom:28px; padding-bottom:28px; border-bottom:1px solid var(--hairline-soft); }
.comment-form .ava{ width:42px; height:42px; border-radius:50%; flex-shrink:0; background:var(--green-tint); color:var(--green); display:flex; align-items:center; justify-content:center; font-family:var(--font-serif); font-weight:600; font-size:18px; }
.comment-form .cf-body{ flex:1; min-width:0; }
.comment-form textarea{ width:100%; min-height:48px; resize:vertical; font:inherit; font-size:14.5px; color:var(--ink); background:var(--field); border:1px solid var(--hairline); border-radius:12px; padding:12px 14px; outline:none; line-height:1.5; transition:border-color .15s, box-shadow .15s; }
.comment-form textarea::placeholder{ color:var(--faint); }
.comment-form textarea:focus{ border-color:var(--green); box-shadow:0 0 0 3px var(--green-tint); }
.comment-form .cf-row{ display:flex; align-items:center; justify-content:space-between; margin-top:10px; gap:12px; }
.comment-form .cf-note{ font-family:var(--font-mono); font-size:10.5px; color:var(--faint); }
.comment-form .cf-send{ display:inline-flex; align-items:center; gap:7px; padding:10px 20px; border-radius:11px; background:var(--green); color:#fff; font-size:14px; font-weight:600; }
[data-theme="dark"] .comment-form .cf-send{ color:#14110d; }
.comment-form .cf-send:hover{ background:var(--green-deep); }
.comment-form .cf-send:disabled{ opacity:0.45; cursor:default; }

.comment-list{ display:flex; flex-direction:column; gap:22px; }
.comment{ display:flex; gap:13px; }
.comment .ava{ width:42px; height:42px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-family:var(--font-serif); font-weight:600; font-size:17px; color:#fff; }
.comment.lvl2{ margin-left:55px; }
.comment .c-body{ flex:1; min-width:0; }
.comment .c-top{ display:flex; align-items:center; gap:10px; margin-bottom:5px; flex-wrap:wrap; }
.comment .c-name{ font-weight:600; font-size:14.5px; }
.comment .c-badge{ font-family:var(--font-mono); font-size:8.5px; font-weight:700; letter-spacing:0.06em; padding:2px 6px; border-radius:5px; background:var(--green-tint); color:var(--green); }
.comment .c-date{ font-family:var(--font-mono); font-size:11px; color:var(--faint); }
.comment .c-text{ font-size:14.5px; line-height:1.6; color:var(--ink-soft); }
.comment .c-text .ref{ color:var(--green); font-weight:500; }
.comment .c-actions{ display:flex; align-items:center; gap:16px; margin-top:9px; font-family:var(--font-mono); font-size:11.5px; color:var(--muted); }
.comment .c-actions button{ display:inline-flex; align-items:center; gap:6px; color:var(--muted); }
.comment .c-actions button:hover{ color:var(--green); }
.comment .c-actions button.liked{ color:var(--coral); }
.comments-more{ display:block; width:100%; text-align:center; margin-top:24px; padding:12px; border-radius:11px; border:1px solid var(--hairline); font-size:13.5px; font-weight:500; color:var(--ink-soft); }
.comments-more:hover{ border-color:var(--green); color:var(--green); }

/* ===== footer ===== */
.site-foot{ margin-top:70px; border-top:1px solid var(--hairline-soft); }
.foot-in{ display:flex; gap:40px; flex-wrap:wrap; padding:40px 0; }
.foot-brand{ flex:1; min-width:220px; }
.foot-brand .fb-row{ display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.foot-brand p{ font-size:13px; color:var(--muted); line-height:1.6; max-width:320px; }
.foot-col{ min-width:140px; }
.foot-col .ct{ font-family:var(--font-mono); font-size:10px; letter-spacing:0.1em; text-transform:uppercase; color:var(--muted); margin-bottom:12px; }
.foot-col a{ display:block; font-size:13.5px; color:var(--ink-soft); padding:5px 0; }
.foot-col a:hover{ color:var(--green); }
.foot-legal{ padding:18px 0; border-top:1px solid var(--hairline-soft); font-family:var(--font-mono); font-size:11px; color:var(--faint); display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; }
.foot-legal .foot-links{ display:flex; gap:18px; flex-wrap:wrap; }
.foot-legal .foot-links a{ color:var(--faint); }
.foot-legal .foot-links a:hover{ color:var(--green); }

/* flags */
.flag-en{ background:#fff; position:relative; overflow:hidden; }
.flag-en::after{ content:""; position:absolute; inset:0; background:linear-gradient(#CE1124,#CE1124) center/100% 26% no-repeat,linear-gradient(#CE1124,#CE1124) center/15% 100% no-repeat; }
.flag-de{ background:linear-gradient(180deg,#000 33%,#DD0000 33%,#DD0000 66%,#FFCE00 66%); }
.flag-fr{ background:linear-gradient(90deg,#0055A4 33%,#fff 33%,#fff 66%,#EF4135 66%); }
.flag-es{ background:linear-gradient(180deg,#AA151B 25%,#F1BF00 25%,#F1BF00 75%,#AA151B 75%); }