/* ============================================================
   dokulab.ru — «Лаборатория Ai»
   Тёмная и светлая темы: переключаются атрибутом data-theme,
   по умолчанию — как в системе.
   ============================================================ */
:root {
  --bg:#07080d; --bg-soft:#0b0e15; --panel:rgba(255,255,255,.045); --panel-solid:#12141d;
  --line:rgba(255,255,255,.10); --line-strong:rgba(255,255,255,.18);
  --fg:#eef1f8; --fg-soft:#c8cfe0; --muted:#98a0b3; --muted-2:#6c7488;
  --accent:#7c5cff; --accent-2:#22d3ee; --accent-3:#f472b6;
  --link:var(--accent-2);
  --shadow:0 20px 50px -28px rgba(0,0,0,.85);
  --glow-1:rgba(124,92,255,.28); --glow-2:rgba(34,211,238,.20); --glow-3:rgba(244,114,182,.12);
  --grid:rgba(255,255,255,.035);
  --radius:18px;
  --font:-apple-system,BlinkMacSystemFont,"Inter","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
}
/* Светлая тема: явный выбор или системная настройка */
:root[data-theme="light"], :root[data-theme="auto"][data-system="light"] {
  --bg:#f6f7fb; --bg-soft:#ffffff; --panel:rgba(17,20,38,.035); --panel-solid:#ffffff;
  --line:rgba(17,20,38,.10); --line-strong:rgba(17,20,38,.20);
  --fg:#14172a; --fg-soft:#2c3350; --muted:#5a6178; --muted-2:#8b93a7;
  --link:#0e7490;
  --shadow:0 18px 44px -30px rgba(20,23,38,.5);
  --glow-1:rgba(124,92,255,.16); --glow-2:rgba(34,211,238,.14); --glow-3:rgba(244,114,182,.10);
  --grid:rgba(20,23,38,.05);
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--bg); color:var(--fg); font-family:var(--font); font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased; transition:background .25s ease, color .25s ease; }
body::before { content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:radial-gradient(60% 45% at 15% -5%, var(--glow-1), transparent 60%),
             radial-gradient(50% 40% at 90% 0%, var(--glow-2), transparent 55%),
             radial-gradient(45% 45% at 50% 110%, var(--glow-3), transparent 60%); }
body::after { content:""; position:fixed; inset:0; pointer-events:none; z-index:0; opacity:.5;
  background-image:linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size:56px 56px; mask-image:radial-gradient(70% 60% at 50% 0%, #000 30%, transparent 75%); }
.wrap { position:relative; z-index:1; max-width:900px; margin:0 auto; padding:0 20px 72px; }

/* ---------- шапка с логотипом и переключателем темы ---------- */
header.top { position:sticky; top:0; z-index:5; backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  background:color-mix(in srgb, var(--bg) 82%, transparent); border-bottom:1px solid var(--line); }
header.top .inner { max-width:900px; margin:0 auto; padding:14px 20px; display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.brand { display:flex; align-items:center; gap:12px; text-decoration:none; color:inherit; min-width:0; }
.brand .logo { flex:0 0 auto; display:block; }
.brand .txt { display:flex; flex-direction:column; line-height:1.15; min-width:0; }
.brand .lab { font-weight:750; letter-spacing:-.35px; font-size:17px; white-space:nowrap; }
.brand .lab .ai { background:linear-gradient(100deg,var(--accent),var(--accent-2)); -webkit-background-clip:text; background-clip:text; color:transparent; font-weight:800; }
.brand .sub { font-family:var(--mono); font-size:11.5px; color:var(--muted-2); letter-spacing:.02em; }
.top .spacer { flex:1 1 auto; }
.badge { font-family:var(--mono); font-size:11.5px; color:var(--muted); border:1px solid var(--line); background:var(--panel); padding:6px 11px; border-radius:999px; white-space:nowrap; }
.badge b { color:var(--link); font-weight:600; }
.theme-btn { display:inline-flex; align-items:center; gap:8px; cursor:pointer; border:1px solid var(--line); background:var(--panel);
  color:var(--fg); border-radius:11px; padding:8px 11px; font-size:13.5px; font-family:var(--font); transition:border-color .15s ease, transform .15s ease; }
.theme-btn:hover { border-color:var(--accent); transform:translateY(-1px); }
.theme-btn svg { width:17px; height:17px; display:block; }
.theme-btn .ic-sun { display:none; }
:root[data-theme="dark"] .theme-btn .ic-sun,
:root[data-theme="light"] .theme-btn .ic-moon { display:block; }
:root[data-theme="dark"] .theme-btn .ic-moon,
:root[data-theme="light"] .theme-btn .ic-sun { display:none; }
.theme-btn .lbl { font-size:12.5px; color:var(--muted); }

/* ---------- герой ---------- */
.hero { padding:34px 0 8px; }
.hero h1 { margin:0 0 10px; font-size:clamp(30px, 6vw, 46px); line-height:1.08; letter-spacing:-1.4px; font-weight:800; }
.hero h1 .grad { background:linear-gradient(100deg, var(--accent), var(--accent-2) 55%, var(--accent-3)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero .meta { color:var(--muted); font-size:15px; display:flex; gap:14px; flex-wrap:wrap; align-items:center; }
.dot { width:6px; height:6px; border-radius:50%; background:var(--accent-2); display:inline-block; box-shadow:0 0 12px var(--accent-2); }
.lead-box { margin:22px 0 30px; padding:20px 22px; border-radius:var(--radius); border:1px solid var(--line); background:linear-gradient(135deg, var(--glow-1), var(--glow-2)); }
.lead-box .t { font-size:12.5px; text-transform:uppercase; letter-spacing:.14em; color:var(--muted); margin-bottom:8px; font-family:var(--mono); }
.lead-box p { margin:0; color:var(--fg-soft); }

/* ---------- лента ---------- */
ol.feed { list-style:none; margin:0; padding:0; }
ol.feed > li { margin-bottom:16px; }
.card { position:relative; display:block; padding:22px 24px; border:1px solid var(--line); border-radius:var(--radius); background:var(--panel);
  backdrop-filter:blur(8px); transition:transform .18s ease, border-color .18s ease, box-shadow .25s ease, background .25s ease; }
.card:hover { transform:translateY(-3px); border-color:color-mix(in srgb, var(--accent) 45%, var(--line)); box-shadow:var(--shadow); }
.card .num { font-family:var(--mono); font-size:12px; color:var(--link); letter-spacing:.08em; }
.card h2 { margin:6px 0 10px; font-size:max(19px, 1.15rem); line-height:1.32; letter-spacing:-.3px; font-weight:700; }
.card h2 a { color:inherit; text-decoration:none; }
.card h2 a:hover { color:var(--link); }
.card p { margin:0 0 14px; color:var(--muted); font-size:16px; }
.card .row { display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-size:13px; color:var(--muted-2); }
.chip { border:1px solid var(--line); background:var(--panel-solid); padding:4px 10px; border-radius:999px; font-family:var(--mono); font-size:12px; color:var(--muted); }
.more { margin-left:auto; color:var(--link); text-decoration:none; font-weight:600; font-size:14px; white-space:nowrap; }
.more:hover { text-decoration:underline; }

nav.pager { display:flex; align-items:center; justify-content:center; gap:8px; margin:34px 0 10px; flex-wrap:wrap; }
nav.pager a, nav.pager span.pg { min-width:44px; text-align:center; padding:11px 14px; border-radius:12px; border:1px solid var(--line); background:var(--panel); color:var(--fg); text-decoration:none; font-size:14.5px; transition:border-color .15s ease, transform .15s ease; }
nav.pager a:hover { border-color:var(--accent); transform:translateY(-1px); }
nav.pager span.now { background:linear-gradient(135deg, var(--accent), var(--accent-2)); border-color:transparent; color:#fff; font-weight:700; }
nav.pager .info { font-size:13.5px; color:var(--muted-2); font-family:var(--mono); margin:0 8px; }

/* ---------- страница новости ---------- */
article.post { padding-top:26px; }
article.post .kicker { font-family:var(--mono); font-size:12.5px; color:var(--link); letter-spacing:.1em; text-transform:uppercase; }
article.post h1 { margin:12px 0 16px; font-size:clamp(26px, 4.6vw, 40px); line-height:1.16; letter-spacing:-1px; font-weight:800; }
article.post .metaline { display:flex; gap:12px; flex-wrap:wrap; align-items:center; color:var(--muted-2); font-size:14px; padding-bottom:20px; border-bottom:1px solid var(--line); }
article.post .lead { font-size:19px; color:var(--fg); margin:24px 0 18px; }
article.post .body { margin:0 0 30px; }
article.post .body-title { font-size:12.5px; text-transform:uppercase; letter-spacing:.14em; color:var(--muted); margin:0 0 14px; font-family:var(--mono); }
article.post .body p { margin:0 0 18px; color:var(--fg-soft); }
.srcbox { margin:32px 0 8px; padding:20px 22px; border-radius:var(--radius); border:1px solid var(--line); background:linear-gradient(135deg, var(--glow-2), var(--glow-1)); display:flex; gap:16px; align-items:center; flex-wrap:wrap; }
.srcbox .lbl { font-size:12.5px; text-transform:uppercase; letter-spacing:.13em; color:var(--muted); font-family:var(--mono); }
.btn { display:inline-flex; align-items:center; gap:8px; padding:12px 18px; border-radius:12px; text-decoration:none; font-weight:650; color:#fff; background:linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow:0 14px 32px -20px var(--accent); }
.btn:hover { filter:brightness(1.07); }
.prevnext { display:flex; gap:12px; justify-content:space-between; margin:34px 0 0; flex-wrap:wrap; }
.prevnext a { flex:1 1 260px; padding:16px 18px; border:1px solid var(--line); border-radius:14px; text-decoration:none; color:var(--fg-soft); background:var(--panel); }
.prevnext a:hover { border-color:var(--accent); }
.prevnext .hint { font-family:var(--mono); font-size:12px; color:var(--muted-2); display:block; margin-bottom:5px; }

footer.bottom { margin-top:52px; padding-top:22px; border-top:1px solid var(--line); color:var(--muted-2); font-size:13.5px; display:flex; gap:14px; flex-wrap:wrap; justify-content:space-between; }
footer.bottom a { color:var(--muted); }
.notice { margin:40px 0; padding:26px; border:1px dashed var(--line); border-radius:var(--radius); background:var(--panel); }
.notice h2 { margin:0 0 10px; font-size:20px; }
.notice p { margin:0 0 8px; color:var(--muted); }
.notice code { font-family:var(--mono); font-size:13.5px; background:var(--panel-solid); border:1px solid var(--line); padding:2px 6px; border-radius:6px; }
@media (max-width:620px) { .card { padding:18px; } .more { margin-left:0; } .badge { display:none; } }

/* ---------- теги ---------- */
nav.tagbar { display:flex; gap:8px; flex-wrap:wrap; margin:24px 0 6px; }
.tag { display:inline-flex; align-items:center; gap:7px; padding:7px 13px; border-radius:999px; text-decoration:none;
  border:1px solid var(--line); background:var(--panel); color:var(--fg-soft); font-size:14px;
  transition:border-color .15s ease, color .15s ease, transform .15s ease, background .15s ease; }
.tag:hover { border-color:color-mix(in srgb, var(--accent) 55%, var(--line)); color:var(--fg); transform:translateY(-1px); }
.tag .n { font-family:var(--mono); font-size:11.5px; color:var(--muted-2); }
.tag.on { background:linear-gradient(135deg, var(--accent), var(--accent-2)); border-color:transparent; color:#fff; font-weight:600; }
.tag.on .n { color:rgba(255,255,255,.82); }
.tag.sm { padding:4px 11px; font-size:12.5px; gap:0; }
.tag.sm:hover { color:var(--link); }
.metaline .tag, .card .row .tag { font-family:var(--mono); letter-spacing:.01em; }