/* ============================================================================
   Оформление страниц-разборов (всё, кроме index.html и cabinet.html).

   Главная держит свои стили внутри себя — так было и так остаётся: её вид не
   должен зависеть от внешнего файла. Этот файл обслуживает только новые
   страницы, поэтому правка здесь не может задеть главную.

   Токены скопированы из index.html, чтобы страницы выглядели одним сайтом.
   Если меняете палитру на главной — поменяйте и здесь.
   ========================================================================== */

:root{
  color-scheme: dark;
  --bg:#05080D; --surface:#0B1017; --surface-2:#0F151F; --surface-3:#151D2B;
  --ink:#E8EDF4; --muted:#94A0B3; --faint:#657085;
  --line:#1E2A38; --line-2:#161F2B;
  --accent:#22E6FF; --accent-2:#6FEFFF; --on-accent:#04141A;
  --glow:0 0 18px rgba(34,230,255,.36);
  --up:#2BD8B4; --down:#F0575C;
  --shadow:0 1px 0 rgba(255,255,255,.02), 0 20px 50px -24px rgba(0,0,0,.7);
  --font-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-mono:ui-monospace,"SF Mono","JetBrains Mono","Cascadia Code",Menlo,Consolas,monospace;
  --maxw:1140px;
  --readw:760px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font-sans); font-size:16px; line-height:1.65;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px}

/* ============ Шапка ============ */

.nav{
  position:sticky; top:0; z-index:50;
  background:rgba(5,8,13,.86); backdrop-filter:saturate(1.2) blur(10px);
  border-bottom:1px solid var(--line-2);
}
.nav-in{display:flex; align-items:center; gap:18px; height:64px}
.brand{
  display:inline-flex; align-items:center; gap:9px;
  font-weight:800; letter-spacing:.14em; font-size:13px;
  color:var(--ink); text-decoration:none; white-space:nowrap;
}
.brand .dot{
  width:9px; height:9px; border-radius:50%;
  background:var(--accent); box-shadow:var(--glow);
}
.nav-links{display:flex; align-items:center; gap:20px; margin-left:auto; flex-wrap:wrap}
.nav-links a{color:var(--muted); text-decoration:none; font-size:14px}
.nav-links a:hover{color:var(--ink)}
.btn-account{
  padding:8px 14px; border:1px solid var(--line); border-radius:10px;
  color:var(--ink) !important; background:var(--surface-2);
}
@media (max-width:760px){
  .nav-links a:not(.btn-account){display:none}
}

/* ============ Хлебные крошки и заголовок ============ */

.crumbs{
  max-width:var(--readw); margin:28px auto 0; padding:0 24px;
  font-size:13px; color:var(--faint);
}
.crumbs a{color:var(--muted); text-decoration:none}
.crumbs a:hover{color:var(--accent)}

article{max-width:var(--readw); margin:0 auto; padding:0 24px 72px}

article h1{
  font-size:clamp(28px, 4.4vw, 42px); line-height:1.2;
  letter-spacing:-.02em; margin:18px 0 10px;
}
.lede{font-size:18px; color:var(--muted); margin:0 0 10px}
.meta{font-size:13px; color:var(--faint); margin:0 0 34px}

article h2{
  font-size:clamp(21px, 2.8vw, 27px); line-height:1.3;
  margin:44px 0 14px; letter-spacing:-.01em;
}
article h3{font-size:18px; margin:30px 0 10px}

article p{margin:0 0 16px}
article ul, article ol{margin:0 0 18px; padding-left:22px}
article li{margin:7px 0}
article li::marker{color:var(--faint)}

article a{color:var(--accent); text-decoration:none; border-bottom:1px solid rgba(34,230,255,.28)}
article a:hover{border-bottom-color:var(--accent)}

article strong{color:#fff; font-weight:650}

code{
  font-family:var(--font-mono); font-size:.9em;
  background:var(--surface-2); border:1px solid var(--line-2);
  border-radius:5px; padding:.1em .4em;
}

hr{border:0; border-top:1px solid var(--line-2); margin:40px 0}

/* ============ Содержание страницы ============ */

.toc{
  background:var(--surface); border:1px solid var(--line-2);
  border-radius:14px; padding:18px 22px; margin:0 0 36px;
}
.toc b{display:block; font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:var(--faint); margin-bottom:10px}
.toc ol{margin:0; padding-left:20px}
.toc li{margin:5px 0}
.toc a{color:var(--muted); text-decoration:none; border:0}
.toc a:hover{color:var(--accent)}

/* ============ Врезки ============ */

.note{
  background:var(--surface); border:1px solid var(--line);
  border-left:3px solid var(--accent);
  border-radius:12px; padding:16px 20px; margin:26px 0;
}
.note.warn{border-left-color:var(--down)}
.note.ok{border-left-color:var(--up)}
.note b{color:#fff}
.note p:last-child{margin-bottom:0}

/* ============ Таблицы ============ */

.table-wrap{overflow-x:auto; margin:24px 0}
table{border-collapse:collapse; width:100%; font-size:15px}
th, td{border:1px solid var(--line-2); padding:10px 13px; text-align:left; vertical-align:top}
th{background:var(--surface-2); color:#fff; font-weight:650; white-space:nowrap}
td code{white-space:nowrap}

/* ============ Призыв к действию ============ */

.cta{
  background:linear-gradient(180deg, var(--surface-2), var(--surface));
  border:1px solid var(--line); border-radius:16px;
  padding:26px 26px 24px; margin:44px 0 0; box-shadow:var(--shadow);
}
.cta h2{margin:0 0 8px; font-size:22px}
.cta p{color:var(--muted); margin:0 0 18px}
.cta-row{display:flex; gap:12px; flex-wrap:wrap}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 20px; border-radius:11px; font-weight:650; font-size:15px;
  text-decoration:none; border:1px solid var(--line); color:var(--ink);
  background:var(--surface-2);
}
.btn.primary{background:var(--accent); color:var(--on-accent); border-color:transparent; box-shadow:var(--glow)}
.btn:hover{filter:brightness(1.08)}
.cta .btn{border-bottom:1px solid var(--line)}
.cta .btn.primary{border-bottom-color:transparent}

/* ============ Читайте также ============ */

.more{max-width:var(--readw); margin:0 auto; padding:0 24px 64px}
.more b{display:block; font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:var(--faint); margin-bottom:14px}
.more-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(240px,1fr)); gap:14px}
.more-grid a{
  display:block; padding:16px 18px; border:1px solid var(--line-2);
  border-radius:12px; background:var(--surface); color:var(--ink);
  text-decoration:none;
}
.more-grid a:hover{border-color:var(--line); background:var(--surface-2)}
.more-grid span{display:block; color:var(--muted); font-size:14px; margin-top:5px}

/* ============ Подвал ============ */

footer{border-top:1px solid var(--line-2); padding:34px 0 46px; background:var(--surface)}
.foot-top{display:flex; gap:20px; align-items:center; flex-wrap:wrap; margin-bottom:22px}
.foot-links{display:flex; gap:18px; flex-wrap:wrap; margin-left:auto}
.foot-links a{color:var(--muted); text-decoration:none; font-size:14px}
.foot-links a:hover{color:var(--ink)}
.disclaimer{color:var(--faint); font-size:13px; line-height:1.6; margin:0 0 12px}
.copy{color:var(--faint); font-size:13px; margin:0}