/* SK-AI Journal — дизайн-система (navy / gold), светлая и тёмная темы. */
:root {
	--navy:#0f3060; --navy-soft:#e8eef7; --navy-line:#c9d6e8;
	--gold:#c9a55c; --gold-ink:#8a6a2a; --gold-soft:#f7f0e2;
	--accent:#2d6cc0; --blue-soft:#e5f0fb;
	--bg:#f4f6f9; --card:#ffffff; --text:#1a2230; --muted:#5b6776; --line:#e3e7ec;
	--green:#1f7a4d; --green-soft:#e6f3ec; --amber:#b8860b; --amber-soft:#fff4d6;
	--red:#cf4444; --red-soft:#fbe9e9; --purple:#6a3aa3; --purple-soft:#efe6fa; --gray:#5b6776; --gray-soft:#eef1f5;
	--code-bg:#0c1a33; --input:#ffffff;
	--shadow:0 1px 2px rgba(10,30,60,.05),0 4px 14px rgba(10,30,60,.07);
	--radius:14px; --sidebar-w:264px;
	color-scheme:light;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
	--navy:#b9cdee; --navy-soft:#1b2a44; --navy-line:#2c3f60; --gold:#d6b56e; --gold-ink:#e3c787; --gold-soft:#2e2718;
	--accent:#6ea3ea; --blue-soft:#172a44; --bg:#0d1420; --card:#141d2c; --text:#e3e9f2; --muted:#98a5b8; --line:#243145;
	--green:#5cc28d; --green-soft:#15291f; --amber:#e3b44a; --amber-soft:#2d2512; --red:#ef7b7b; --red-soft:#321a1d;
	--purple:#b597e0; --purple-soft:#241b36; --gray:#98a5b8; --gray-soft:#1b2433; --code-bg:#070d18; --input:#0f1724;
	--shadow:0 1px 2px rgba(0,0,0,.3),0 4px 14px rgba(0,0,0,.25); color-scheme:dark; } }
:root[data-theme="dark"] {
	--navy:#b9cdee; --navy-soft:#1b2a44; --navy-line:#2c3f60; --gold:#d6b56e; --gold-ink:#e3c787; --gold-soft:#2e2718;
	--accent:#6ea3ea; --blue-soft:#172a44; --bg:#0d1420; --card:#141d2c; --text:#e3e9f2; --muted:#98a5b8; --line:#243145;
	--green:#5cc28d; --green-soft:#15291f; --amber:#e3b44a; --amber-soft:#2d2512; --red:#ef7b7b; --red-soft:#321a1d;
	--purple:#b597e0; --purple-soft:#241b36; --gray:#98a5b8; --gray-soft:#1b2433; --code-bg:#070d18; --input:#0f1724;
	--shadow:0 1px 2px rgba(0,0,0,.3),0 4px 14px rgba(0,0,0,.25); color-scheme:dark; }

/* цвет события / темы: --c (насыщенный) и --cs (подложка) */
.c-blue{--c:var(--accent);--cs:var(--blue-soft)} .c-gold{--c:var(--gold-ink);--cs:var(--gold-soft)}
.c-green{--c:var(--green);--cs:var(--green-soft)} .c-red{--c:var(--red);--cs:var(--red-soft)}
.c-purple{--c:var(--purple);--cs:var(--purple-soft)} .c-amber{--c:var(--amber);--cs:var(--amber-soft)}
.c-gray{--c:var(--gray);--cs:var(--gray-soft)}

*,*::before,*::after { box-sizing:border-box; }
html { scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } *,*::before,*::after { transition:none !important; animation:none !important; } }
body { margin:0; background:var(--bg); color:var(--text); -webkit-font-smoothing:antialiased;
	font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Inter","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; font-size:14.5px; line-height:1.55; }
code,.mono { font-family:ui-monospace,"SF Mono","JetBrains Mono",Menlo,Consolas,monospace; font-size:.92em; }
a { color:var(--accent); }
:focus-visible { outline:2px solid var(--gold); outline-offset:2px; border-radius:6px; }
svg.ic { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }

/* ---------- layout ---------- */
.app { display:grid; grid-template-columns:var(--sidebar-w) minmax(0,1fr); min-height:100vh; min-height:100dvh; }
.sidebar { position:sticky; top:0; height:100vh; height:100dvh; align-self:start; color:#c6d2e4; display:flex; flex-direction:column; overflow:hidden;
	background:radial-gradient(440px 320px at 28% -6%,rgba(201,165,92,.16),transparent 62%),radial-gradient(360px 300px at 60% 108%,rgba(45,108,192,.14),transparent 60%),linear-gradient(180deg,#0a1d3d 0%,#081631 55%,#060f24 100%);
	border-right:1px solid rgba(201,165,92,.16); }
.sidebar-head { display:flex; align-items:center; gap:10px; padding:16px 14px; border-bottom:1px solid rgba(255,255,255,.07); text-decoration:none; }
.logo-mark { width:30px; height:30px; border-radius:6px; background:linear-gradient(135deg,#c9a55c,#a8843e); display:grid; place-items:center; color:#0a1d3d; font-weight:800; font-size:11px; box-shadow:0 2px 6px rgba(0,0,0,.35); flex-shrink:0; }
.logo-text { font-size:13px; font-weight:600; color:#fff; line-height:1.3; }
.logo-text small { display:block; font-weight:400; color:#8fa2bd; font-size:10.5px; }
.nav { flex:1; overflow-y:auto; padding:10px 8px 16px; scrollbar-width:thin; scrollbar-color:rgba(201,165,92,.3) transparent; }
.nav-group { font-size:11px; color:#64789a; padding:14px 10px 6px; }
.nav a { display:flex; align-items:center; gap:10px; padding:7px 10px; border-radius:9px; color:#a9bbd4; text-decoration:none; font-size:13px; border:1px solid transparent; margin-bottom:2px; }
.nav a:hover { background:rgba(255,255,255,.05); color:#e5ecf5; }
.nav a.active { background:rgba(201,165,92,.13); border-color:rgba(201,165,92,.4); color:#fff; }
.nav a.active .nav-num { background:#c9a55c; color:#0a1d3d; }
.nav-num { width:24px; height:24px; border-radius:6px; background:rgba(255,255,255,.08); color:#8fa2bd; display:grid; place-items:center; flex-shrink:0; }
.nav-num svg.ic { width:13px; height:13px; }
.sidebar-foot { padding:12px 14px; border-top:1px solid rgba(255,255,255,.07); font-size:12px; color:#8fa2bd; display:flex; align-items:center; gap:8px; }
.sidebar-foot b { color:#e5ecf5; font-weight:600; display:block; font-size:12.5px; }
.sidebar-foot form { margin-left:auto; }
.icon-btn { display:grid; place-items:center; width:30px; height:30px; border-radius:6px; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.05); color:#c6d2e4; cursor:pointer; }
.icon-btn:hover { background:rgba(255,255,255,.12); color:#fff; }
.icon-btn svg.ic { width:15px; height:15px; }

.main { min-width:0; }
.topbar { position:sticky; top:0; z-index:5; display:none; align-items:center; gap:10px; padding:10px 16px; background:#0a1d3d; color:#fff; font-size:13px; font-weight:600; }
.topbar select { margin-left:auto; max-width:56%; background:#13284d; color:#fff; border:1px solid rgba(201,165,92,.45); border-radius:6px; padding:6px 8px; font:inherit; font-size:12.5px; }
.content { max-width:1140px; margin:0 auto; padding:28px 34px 90px; }
@media (max-width:900px) {
	.app { grid-template-columns:1fr; }
	.sidebar { display:none; }
	.topbar { display:flex; }
	.content { padding:18px 16px 60px; }
}

/* Телефон: вспомогательный текст не мельче 12.5px (был 11px и меньше на многих экранах) */
@media (max-width:700px) {
	.content small, .content .muted, .content .small, .content td, .content th, .content label { font-size:max(12.5px, .9em) !important; }
}

/* Простой заголовок раздела без декоративного блока (уведомления и др.) */
.simple-head { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin:6px 0 18px; }
.simple-head h1 { margin:0; font-size:22px; line-height:1.25; letter-spacing:-.01em; }

/* ---------- hero ---------- */
.hero { position:relative; overflow:hidden; border-radius:20px; color:#e8eef8; margin-bottom:36px;
	background:radial-gradient(560px 360px at 88% -10%,rgba(201,165,92,.26),transparent 60%),radial-gradient(460px 320px at 0% 120%,rgba(45,108,192,.38),transparent 60%),linear-gradient(135deg,#081a38,#0f3060 62%,#12386f); }
.hero canvas { position:absolute; inset:0; width:100%; height:100%; display:block; }
.hero-inner { position:relative; padding:30px 34px; display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:28px; align-items:end; min-height:300px; pointer-events:none; }
.hero-inner a, .hero-inner button { pointer-events:auto; }
.hero-org { display:flex; align-items:center; gap:10px; font-size:12.5px; color:#b9c8de; }
.hero h1 { font-size:clamp(26px,3.6vw,38px); line-height:1.1; letter-spacing:-.7px; margin:44px 0 12px; font-weight:750; color:#fff; max-width:18ch; text-wrap:balance; }
.hero p.lead { font-size:15px; color:#c7d4e8; max-width:56ch; margin:0 0 18px; }
.hero-cta { display:flex; flex-wrap:wrap; gap:10px; }
.hero-facts { display:grid; grid-template-columns:1fr 1fr; gap:1px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.12); border-radius:14px; overflow:hidden; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
.fact { background:rgba(8,22,49,.62); padding:14px 16px; color:inherit; text-decoration:none; }
a.fact:hover { background:rgba(13,34,72,.75); }
.fact b { display:block; font-size:28px; line-height:1; color:#fff; font-weight:700; font-variant-numeric:tabular-nums; }
.fact b em { font-style:normal; color:#d6b56e; }
.fact span { display:block; margin-top:6px; font-size:12px; color:#a9bbd4; line-height:1.4; }
@media (max-width:900px) { .hero-inner { grid-template-columns:1fr; padding:24px 20px; } .hero h1 { margin-top:28px; } }

/* page header (внутренние страницы) */
.page-head { position:relative; overflow:hidden; border-radius:18px; color:#e8eef8; padding:22px 26px; margin-bottom:24px; display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:16px; align-items:center;
	background:radial-gradient(420px 260px at 95% -20%,rgba(201,165,92,.25),transparent 60%),linear-gradient(135deg,#0a1d3d,#0f3060); }
.page-head .ph-ico { width:46px; height:46px; border-radius:13px; display:grid; place-items:center; background:rgba(255,255,255,.08); border:1px solid rgba(201,165,92,.4); color:#e7cf9b; }
.page-head .ph-ico svg.ic { width:22px; height:22px; }
.page-head h1 { margin:0; font-size:clamp(20px,2.4vw,26px); line-height:1.2; color:#fff; letter-spacing:-.4px; font-weight:720; }
.page-head p { margin:4px 0 0; color:#b9c8de; font-size:13.5px; max-width:72ch; }
.page-head .crumbs { font-size:12px; color:#8fa2bd; margin-bottom:4px; }
.page-head .crumbs a { color:#c7d4e8; text-decoration:none; }
.page-head .actions { display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end; }
@media (max-width:700px) { .page-head { grid-template-columns:auto minmax(0,1fr); padding:18px; } .page-head .actions { grid-column:1 / -1; justify-content:flex-start; } }

/* ---------- buttons ---------- */
.btn { display:inline-flex; align-items:center; gap:8px; padding:8px 14px; border-radius:10px; font:inherit; font-size:13.5px; font-weight:600; text-decoration:none; cursor:pointer; border:1px solid transparent; white-space:nowrap; }
.btn svg.ic { width:16px; height:16px; }
.btn-gold { background:linear-gradient(135deg,#d6b56e,#b8924a); color:#0a1d3d; }
.btn-ghost { background:rgba(255,255,255,.06); color:#e8eef8; border-color:rgba(255,255,255,.18); }
.btn-ghost:hover { background:rgba(255,255,255,.12); }
.btn-line { background:var(--card); color:var(--text); border-color:var(--line); }
.btn-line:hover { border-color:var(--gold); }
/* В тёмной шапке все вторичные кнопки одного вида */
.page-head .btn-line { background:rgba(255,255,255,.06); color:#e8eef8; border-color:rgba(255,255,255,.22); }
.page-head .btn-line:hover { background:rgba(255,255,255,.12); border-color:#e7cf9b; }
.btn-sm { padding:5px 10px; font-size:12.5px; border-radius:6px; }

/* ---------- sections ---------- */
.sec { margin-bottom:40px; }
.sec-head { display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; margin-bottom:14px; }
.sec-num { width:34px; height:34px; border-radius:10px; background:var(--navy-soft); color:var(--navy); display:grid; place-items:center; border:1px solid var(--navy-line); }
.sec-head h2 { margin:0; font-size:19px; line-height:1.2; letter-spacing:-.3px; color:var(--navy); font-weight:720; }
.sec-head .spacer { flex:1; }
.fold { margin-bottom:10px; }
.fold > summary { cursor:pointer; list-style:none; margin-bottom:0; padding:8px 0; }
.fold > summary::-webkit-details-marker { display:none; }
.fold > summary::after { content:"›"; margin-left:auto; font-size:24px; line-height:1; color:var(--muted); transition:transform .15s; }
.fold[open] { margin-bottom:28px; }
.fold[open] > summary { margin-bottom:10px; }
.fold[open] > summary::after { transform:rotate(90deg); }
.card { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); }
.pad { padding:18px 20px; }
.grid2 { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.grid3 { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.split { display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); gap:18px; align-items:start; }
@media (max-width:980px){ .grid3 { grid-template-columns:repeat(2,minmax(0,1fr)); } .split { grid-template-columns:minmax(0,1fr); } }
@media (max-width:680px){ .grid2,.grid3 { grid-template-columns:1fr; } }
h3 { margin:0 0 6px; font-size:15.5px; color:var(--text); letter-spacing:-.1px; }
.muted { color:var(--muted); }
.small { font-size:12.5px; }
.chip { display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:600; padding:3px 9px; border-radius:999px; background:var(--cs,var(--gray-soft)); color:var(--c,var(--muted)); white-space:nowrap; text-decoration:none; }
.chip svg.ic { width:12px; height:12px; }
.note { border-left:3px solid var(--gold); background:var(--gold-soft); border-radius:0 10px 10px 0; padding:12px 16px; font-size:13.5px; }
.empty { padding:34px 20px; text-align:center; color:var(--muted); }
.empty svg.ic { width:30px; height:30px; color:var(--navy-line); margin-bottom:6px; }

/* topic cards */
.topic-card { display:grid; grid-template-columns:auto minmax(0,1fr); gap:12px; padding:16px; text-decoration:none; color:inherit; transition:border-color .15s, transform .15s; }
.topic-card:hover { border-color:var(--gold); transform:translateY(-2px); }
.topic-card .ti { width:40px; height:40px; border-radius:11px; display:grid; place-items:center; background:var(--cs); color:var(--c); }
.topic-card p { margin:0; font-size:12.5px; color:var(--muted); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.topic-card .meta { margin-top:8px; font-size:12px; color:var(--muted); display:flex; gap:12px; }
.topic-card .meta b { color:var(--navy); font-variant-numeric:tabular-nums; }

/* ---------- timeline ---------- */
.tl-day { position:relative; padding-left:46px; }
.tl-day::before { content:""; position:absolute; left:17px; top:0; bottom:0; width:2px; background:linear-gradient(180deg,var(--navy-line),var(--line)); }
.tl-day:last-child::before { bottom:24px; }
.tl-date { position:relative; margin:0 0 10px -46px; padding:4px 0; display:flex; align-items:center; gap:10px; font-size:12.5px; font-weight:700; color:var(--gold-ink); }
.tl-date::before { content:""; width:12px; height:12px; margin-left:12px; border-radius:50%; background:var(--card); border:3px solid var(--gold); position:relative; z-index:1; }
.tl-item { position:relative; margin-bottom:10px; }
.tl-dot { position:absolute; left:-42px; top:12px; width:30px; height:30px; border-radius:9px; display:grid; place-items:center; background:var(--cs); color:var(--c); border:1px solid var(--card); box-shadow:0 0 0 3px var(--bg); }
.tl-dot svg.ic { width:15px; height:15px; }
.tl-card { display:block; padding:11px 14px; text-decoration:none; color:inherit; transition:border-color .15s; }
.tl-card:hover { border-color:var(--gold); }
.tl-top { display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px; }
.tl-time { font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums; margin-left:auto; }
.tl-title { font-weight:600; font-size:14px; margin:4px 0 2px; }
.tl-meta { display:flex; flex-wrap:wrap; gap:4px 14px; font-size:12px; color:var(--muted); }
.tl-meta span { display:inline-flex; align-items:center; gap:5px; }
.tl-meta svg.ic { width:13px; height:13px; }
.status-planned { --c:var(--accent); --cs:var(--blue-soft); }
.status-in_progress { --c:var(--amber); --cs:var(--amber-soft); }
.status-done { --c:var(--green); --cs:var(--green-soft); }
.status-cancelled { --c:var(--gray); --cs:var(--gray-soft); text-decoration:line-through; }
.st-active { --c:var(--green); --cs:var(--green-soft); }
.st-blocked, .st-maintenance { --c:var(--amber); --cs:var(--amber-soft); }
.st-deleted, .st-retired { --c:var(--red); --cs:var(--red-soft); }

/* ---------- filters ---------- */
.filters { display:flex; flex-wrap:wrap; gap:8px; align-items:center; padding:12px; margin-bottom:18px; }
.field { display:flex; align-items:center; gap:8px; background:var(--input); border:1px solid var(--line); border-radius:10px; padding:0 10px; min-height:36px; color:var(--muted); }
.field:focus-within { border-color:var(--gold); }
.field input, .field select { border:0; outline:0; background:transparent; color:var(--text); font:inherit; font-size:13px; min-height:34px; min-width:0; }
.field.grow { flex:1 1 220px; }
.field.grow input { width:100%; }
/* Много фильтров: поиск отдельной строкой, остальное и кнопка — второй */
.filters.wide .field.grow { flex-basis:100%; }
.filters.wide > button.btn { margin-left:auto; }
.seg { display:inline-flex; flex-wrap:wrap; background:var(--gray-soft); border-radius:10px; padding:3px; gap:2px; }
.seg a { font-size:12.5px; font-weight:600; color:var(--muted); padding:6px 12px; border-radius:6px; text-decoration:none; }
.seg a.on { background:var(--card); color:var(--navy); box-shadow:var(--shadow); }
.seg a small { font-weight:500; opacity:.75; margin-left:3px; }

/* ---------- tables / lists ---------- */
.tbl-wrap { overflow-x:auto; }
table { width:100%; border-collapse:collapse; font-size:13px; }
th { text-align:left; font-weight:650; color:var(--muted); font-size:12px; padding:10px 14px; border-bottom:1px solid var(--line); white-space:nowrap; }
td { padding:11px 14px; border-bottom:1px solid var(--line); vertical-align:middle; }
tr:last-child td { border-bottom:0; }
tbody tr:hover td { background:var(--bg); }
td a.row-link { color:var(--text); font-weight:600; text-decoration:none; }
td a.row-link:hover { color:var(--accent); }
.avatar { width:32px; height:32px; border-radius:9px; display:inline-grid; place-items:center; background:var(--navy-soft); color:var(--navy); font-weight:700; font-size:12px; flex-shrink:0; }
.who { display:flex; align-items:center; gap:10px; }
.who small { display:block; color:var(--muted); font-size:12px; font-weight:400; }

.kv { display:grid; grid-template-columns:minmax(110px,auto) minmax(0,1fr); gap:8px 16px; margin:0; font-size:13px; }
.kv dt { color:var(--muted); }
.kv dd { margin:0; word-break:break-word; }

.inv { list-style:none; margin:0; padding:0; }
.inv li { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:12px; align-items:center; padding:10px 0; border-bottom:1px dashed var(--line); }
.inv li:last-child { border-bottom:0; }
.inv-cols { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); column-gap:28px; }
.inv-cols li:last-child { border-bottom:1px dashed var(--line); }
.inv .ico { width:34px; height:34px; border-radius:9px; display:grid; place-items:center; background:var(--navy-soft); color:var(--navy); }
.inv .ico.g { background:var(--gold-soft); color:var(--gold-ink); }
.inv .ico.off { background:var(--gray-soft); color:var(--muted); }
.inv b { display:block; font-size:13.5px; }
.inv b a { color:inherit; text-decoration:none; }
.inv span { font-size:12.5px; color:var(--muted); }

/* infra cards */
.infra-card { padding:16px; text-decoration:none; color:inherit; display:flex; flex-direction:column; gap:8px; transition:border-color .15s, transform .15s; }
.infra-card:hover { border-color:var(--gold); transform:translateY(-2px); }
.infra-top { display:flex; align-items:center; gap:10px; }
.infra-ico { width:40px; height:40px; border-radius:11px; display:grid; place-items:center; color:#fff; background:linear-gradient(135deg,#1b3f74,#0f3060); flex-shrink:0; }
.infra-ico.g { background:linear-gradient(135deg,#d6b56e,#a8843e); color:#0a1d3d; }
.infra-card .host { font-size:12px; color:var(--muted); word-break:break-all; }
.tags { display:flex; flex-wrap:wrap; gap:5px; }

/* offboarding */
.progress { height:8px; border-radius:6px; background:var(--gray-soft); overflow:hidden; margin:8px 0 12px; }
.progress i { display:block; height:100%; background:linear-gradient(90deg,var(--gold),var(--green)); border-radius:6px; }
.checks { list-style:none; margin:0; padding:0; font-size:13px; }
.checks li { display:flex; gap:9px; padding:5px 0; align-items:center; }
.checks li svg.ic { width:16px; height:16px; }
.checks li.ok svg.ic { color:var(--green); }
.checks li.todo { color:var(--muted); }
.checks li.todo svg.ic { color:var(--amber); }

/* markdown */
.prose { font-size:14.5px; line-height:1.65; overflow-wrap:anywhere; }
.prose > :first-child { margin-top:0; }
.prose h1,.prose h2,.prose h3 { color:var(--navy); letter-spacing:-.2px; margin:1.4em 0 .5em; }
.prose h1 { font-size:22px; } .prose h2 { font-size:18px; } .prose h3 { font-size:15.5px; }
.prose pre { background:var(--code-bg); color:#d8e4f5; padding:14px 16px; border-radius:10px; overflow-x:auto; font-size:13px; }
.prose code { background:var(--gray-soft); padding:1px 5px; border-radius:5px; }
.prose pre code { background:none; padding:0; }
.prose td code { white-space:nowrap; }  /* IP, префиксы и имена в таблицах не рвём посередине */
.prose blockquote { margin:0; border-left:3px solid var(--gold); background:var(--gold-soft); padding:8px 14px; border-radius:0 8px 8px 0; }
.prose table { margin:12px 0; border:1px solid var(--line); border-radius:6px; display:block; width:max-content; max-width:100%; overflow-x:auto; } /* широкая таблица листается внутри текста, а не наезжает на оглавление */
.prose th, .prose td { border:1px solid var(--line); }
.prose img { max-width:100%; border-radius:6px; }

/* pagination & messages */
.pager { display:flex; justify-content:center; align-items:center; gap:8px; margin-top:20px; font-size:13px; color:var(--muted); }
.messages { list-style:none; margin:0 0 18px; padding:0; }
.messages li { padding:10px 14px; border-radius:10px; background:var(--green-soft); color:var(--green); margin-bottom:6px; font-size:13.5px; }
.messages li.error { background:var(--red-soft); color:var(--red); }

/* login */
.login-wrap { min-height:100vh; display:grid; place-items:center; padding:24px 16px;
	background:radial-gradient(600px 420px at 85% -10%,rgba(201,165,92,.25),transparent 60%),radial-gradient(520px 380px at 0% 110%,rgba(45,108,192,.38),transparent 60%),linear-gradient(135deg,#081a38,#0f3060 62%,#12386f); }
.login-card { width:100%; max-width:380px; background:var(--card); border-radius:18px; padding:28px; box-shadow:0 20px 60px rgba(0,0,0,.35); }
.login-card .brand { display:flex; align-items:center; gap:10px; margin-bottom:20px; }
.login-card h1 { font-size:20px; margin:0 0 4px; color:var(--navy); }
.login-card label { display:block; font-size:12.5px; font-weight:600; color:var(--muted); margin:14px 0 6px; }
.login-card input { width:100%; padding:10px 12px; border-radius:10px; border:1px solid var(--line); background:var(--input); color:var(--text); font:inherit; }
.login-card input:focus { outline:0; border-color:var(--gold); }
.login-card .btn { width:100%; justify-content:center; margin-top:20px; padding:11px; }
.login-card .err { background:var(--red-soft); color:var(--red); padding:10px 12px; border-radius:10px; font-size:13px; }

footer { margin-top:40px; font-size:12px; color:var(--muted); display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px; border-top:1px solid var(--line); padding-top:16px; }

.content > .card + .card, .content > .doc-tools + .card { margin-top:16px; }
.doc-tools { display:flex; flex-wrap:wrap; gap:8px; margin:16px 0; }
.form-stack .field { flex-direction:column; align-items:stretch; gap:4px; padding:8px 10px; margin-bottom:10px; }
.form-stack .field > span { font-size:12px; }
.form-stack .field input, .form-stack .field select, .form-stack .field textarea { width:100%; box-sizing:border-box; border:0; outline:0; background:transparent; color:var(--text); font:inherit; }
.form-stack .field textarea { min-height:320px; resize:vertical; font-family:ui-monospace,Menlo,Consolas,monospace; font-size:13px; line-height:1.5; }
.comment-input { display:block; width:100%; box-sizing:border-box; margin:8px 0; padding:8px 10px; background:var(--input); color:var(--text); border:1px solid var(--line); border-radius:10px; font:inherit; resize:vertical; }
.comment-input:focus { outline:0; border-color:var(--gold); }

.mention-menu { position:absolute; z-index:30; min-width:220px; max-height:220px; overflow-y:auto; padding:4px; background:var(--card); border:1px solid var(--line); border-radius:10px; box-shadow:0 8px 24px rgba(10,29,61,.18); }
.mention-menu button { display:block; width:100%; border:0; border-radius:6px; background:transparent; color:var(--text); cursor:pointer; font:inherit; font-size:13px; text-align:left; padding:6px 8px; }
.mention-menu button:hover { background:var(--gray-soft); }
.notice-unread { font-weight:600; }
#doc-body pre.mermaid { background:transparent; text-align:center; }
pre.mermaid { border:1px solid var(--line); border-radius:16px; padding:24px !important; background:var(--card) !important; scrollbar-width:thin; }
pre.mermaid svg { display:block; margin:auto; }
pre.mermaid:focus-visible { outline:2px solid var(--gold); outline-offset:3px; }
pre.mermaid:fullscreen { box-sizing:border-box; width:100vw; height:100vh; margin:0; overflow:auto; border:0; border-radius:0; }
.md-embed { margin:18px 0; border:1px solid var(--line); border-radius:16px; overflow:hidden; background:var(--card); }
.md-embed iframe { display:block; width:100%; height:min(70vh,560px); border:0; background:#fff; }
.md-embed-link { display:block; padding:8px 14px; border-top:1px solid var(--line); font-size:12.5px; }
.md-embed-link:focus-visible { outline:2px solid var(--gold); outline-offset:-2px; }
@media (max-width:640px) { .md-embed iframe { height:340px; } }
pre.mermaid + button + button { margin-left:8px; }
@media print { pre.mermaid svg { min-width:0 !important; max-height:240mm; } pre.mermaid + button, pre.mermaid + button + button { display:none; } }
.toastui-editor-defaultUI { background:#fff; color:#222; }
.form-stack textarea[hidden] { display:none; }
.doc-editor { margin-bottom:12px; }
[id="doc-presence"][hidden] { display:none; }
.reactions { display:flex; flex-wrap:wrap; gap:4px; margin:4px 0 8px; }
.reaction { border:1px solid var(--line); border-radius:999px; background:var(--card); color:var(--text); cursor:pointer; font:inherit; font-size:12.5px; padding:2px 8px; }
.reaction.mine { border-color:var(--gold); background:var(--gray-soft); }

/* карта инфраструктуры */
.imap-bar { display:flex; flex-wrap:wrap; gap:6px 8px; align-items:center; margin-bottom:12px; }
.imap-tab { padding:8px 14px; border-radius:999px; border:1px solid var(--line); background:var(--card); color:var(--text); font-size:13px; font-weight:600; text-decoration:none; }
.imap-tab span { margin-left:6px; color:var(--muted); font-weight:500; }
.imap-tab:hover { border-color:var(--gold); }
.imap-tab.on { background:var(--navy); border-color:var(--navy); color:var(--card); }
.imap-tab.on span { color:inherit; opacity:.7; }
.imap-tools { display:flex; flex-wrap:wrap; gap:8px 16px; align-items:center; padding:10px 12px; margin-bottom:16px; }
.imap-tools .field { flex:1 1 220px; }
.imap-stat { display:inline-flex; align-items:center; gap:6px; font-size:12.5px; color:var(--muted); }
.imap-stat b { color:var(--text); }
.imap-env { font-size:12.5px; color:var(--muted); text-decoration:none; padding:3px 8px; border-radius:6px; }
.imap-env.on { background:var(--navy-soft); color:var(--navy); font-weight:600; }
.hdot { width:8px; height:8px; border-radius:50%; background:var(--gray); opacity:.45; flex:none; }
.hdot.up { background:var(--green); opacity:1; } .hdot.degraded { background:var(--amber); opacity:1; } .hdot.down { background:var(--red); opacity:1; }
.imap-wrap { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:16px; align-items:start; }
.imap { position:relative; }
.imap-lines { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:2; overflow:visible; }
.imap-lines path { fill:none; stroke-width:1.6; }
.imap-lines .to-dep { stroke:var(--accent); } .imap-lines .to-hit { stroke:var(--red); stroke-dasharray:5 4; }
.imap-layer { margin-bottom:18px; }
.imap-layer > h3 { display:flex; gap:8px; align-items:center; margin:0 0 8px; font-size:11.5px; letter-spacing:0; color:var(--muted); font-weight:650; }
.imap-tiles { display:grid; grid-template-columns:repeat(auto-fill,minmax(176px,1fr)); gap:8px; }
.itile { display:flex; align-items:center; gap:8px; min-width:0; width:100%; padding:8px 10px; text-align:left; font:inherit; color:var(--text); background:var(--card); border:1px solid var(--line); border-radius:10px; cursor:pointer; transition:opacity .15s, border-color .15s, box-shadow .15s; }
.itile:hover { border-color:var(--gold); }
.itile:focus-visible { outline:2px solid var(--accent); outline-offset:1px; }
.itile .ic { width:17px; height:17px; flex:none; color:var(--navy); }
.itile-text { min-width:0; flex:1; display:flex; flex-direction:column; }
.itile-text b, .itile-text small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.itile-text b { font-size:12.5px; font-weight:600; } .itile-text small { font-size:11px; color:var(--muted); font-family:ui-monospace,Menlo,monospace; }
.icluster { padding:10px; border:1px solid var(--navy-line); border-radius:10px; background:var(--navy-soft); margin-bottom:8px; }
.icluster > .itile { margin-bottom:8px; border-color:var(--navy-line); }
.icluster > .itile b { font-size:13.5px; }
.is-picked .itile.on, .is-picked .icluster.on > .itile { border-color:var(--gold); box-shadow:0 0 0 2px var(--gold); opacity:1; }
.is-picked .itile.dep { border-color:var(--accent); box-shadow:0 0 0 1px var(--accent); }
.is-picked .itile.hit { border-color:var(--red); box-shadow:0 0 0 1px var(--red); }
.is-picked .itile:not(.on):not(.dep):not(.hit) { opacity:.3; }
.imap .itile.miss { opacity:.2; }
.imap-side { position:sticky; top:16px; padding:16px; max-height:calc(100vh - 32px); overflow:auto; }
.imap-side h3 { margin:0; font-size:16px; word-break:break-word; }
.imap-side h4 { margin:14px 0 6px; font-size:12px; color:var(--muted); font-weight:700; }
.imap-side p { margin:6px 0 0; font-size:13px; color:var(--muted); }
.imap-side ul { list-style:none; margin:0; padding:0; }
.imap-side li button { width:100%; padding:4px 0; border:0; background:none; font:inherit; font-size:13px; color:var(--accent); text-align:left; cursor:pointer; }
.imap-side li button:hover { text-decoration:underline; }
.imap-side .btn { margin-top:14px; width:100%; justify-content:center; }
.imap-legend { display:grid; gap:8px; margin-top:12px; font-size:12.5px; color:var(--muted); }
.imap-legend span { display:flex; gap:8px; align-items:center; }
.imap-legend i { width:14px; height:14px; border-radius:4px; border:2px solid var(--c); flex:none; }
@media (max-width:1100px) { .imap-wrap { grid-template-columns:minmax(0,1fr); } .imap-side { position:static; max-height:none; order:-1; } }

/* ресурсы и ИИ-модели */
.res-pools { display:grid; grid-template-columns:repeat(auto-fit,minmax(340px,1fr)); gap:14px; }
.res-pool { padding:16px; }
.res-pool header { display:flex; flex-wrap:wrap; gap:8px; justify-content:space-between; align-items:center; margin-bottom:12px; }
.res-pool header h3 { margin:0; font-size:15px; }
.res-meter { margin-bottom:10px; font-size:12.5px; --bar:var(--navy); }
.res-meter > div { display:flex; gap:8px; margin-bottom:4px; color:var(--muted); }
.res-meter b { color:var(--text); font-weight:600; margin-left:auto; } .res-meter em { font-style:normal; width:40px; text-align:right; }
.res-meter i { display:block; height:7px; border-radius:99px; background:var(--gray-soft); overflow:hidden; }
.res-meter u { display:block; height:100%; border-radius:99px; background:var(--bar); }
.res-meter.warn { --bar:var(--amber); } .res-meter.over { --bar:var(--red); }
.res-note { margin:12px 0 0; padding:10px 12px; border-radius:10px; background:var(--amber-soft); font-size:12.5px; }
.llm-table td { vertical-align:top; } .llm-table td small, .llm-table th small { display:block; font-weight:400; color:var(--muted); }
.llm-table td:first-child { min-width:230px; } .llm-table td:first-child small { max-width:320px; margin-top:3px; white-space:normal; }
.kpis { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:12px; margin-bottom:18px; }
.kpi { display:flex; flex-direction:column; gap:2px; padding:14px 16px; }
.kpi small { font-size:12px; color:var(--muted); } .kpi b { font-size:24px; color:var(--navy); line-height:1.2; } .kpi span { font-size:12px; color:var(--muted); }
.work-actions { margin-top:20px; display:grid; gap:10px; }
.work-actions h3 { margin:0; }
.work-actions textarea { width:100%; border:0; background:none; font:inherit; color:inherit; resize:vertical; }
.work-buttons { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.status-backlog { --c:var(--gray); --cs:var(--gray-soft); }

/* ---------- полировка: типографика, состояния, фактура ---------- */
:root { --ease:cubic-bezier(.2,.7,.2,1); --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
h1,h2,h3 { text-wrap:balance; }
p,li { text-wrap:pretty; }
td,th,.kpi b,.chip,.fact b,.meter,.sec-stat b,.sec-tile b,.sec-count { font-variant-numeric:tabular-nums; }
.sec-head h2,.page-head h1 { font-weight:700; }
.skip-link { position:absolute; left:12px; top:-60px; z-index:50; padding:10px 14px; border-radius:10px; background:var(--gold); color:#0a1d3d; font-weight:700; text-decoration:none; transition:top .2s var(--ease); }
.skip-link:focus { top:12px; }

/* кнопки: плавный отклик на наведение и нажатие */
.btn { transition:background-color .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease), box-shadow .18s var(--ease), transform .12s var(--ease); }
.btn:active { transform:translateY(1px) scale(.985); }
.btn-gold { box-shadow:0 1px 0 rgba(255,255,255,.35) inset, 0 4px 12px -4px rgba(184,146,74,.55); }
.btn-gold:hover { background:linear-gradient(135deg,#dfc07c,#c29c52); box-shadow:0 1px 0 rgba(255,255,255,.4) inset, 0 6px 16px -4px rgba(184,146,74,.65); }
.btn-line:hover { background:var(--gold-soft); }
.btn[disabled],.btn[aria-disabled=true] { opacity:.5; pointer-events:none; }
.icon-btn,.nav a,.chip,.topic-card,.tl-card,.infra-card,.card a { transition:background-color .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease); }

/* кликабельные карточки чуть приподнимаются */
a.card:hover,.topic-card:hover,.infra-card:hover,.tl-card:hover { border-color:var(--gold); box-shadow:0 2px 4px rgba(10,30,60,.05),0 10px 24px -8px rgba(15,48,96,.22); }
a.card:hover,.topic-card:hover,.infra-card:hover { transform:translateY(-1px); }

/* бейджи: скруглённый прямоугольник вместо пилюли */
.chip { border-radius:6px; letter-spacing:.1px; }

/* таблицы: подсветка строки, липкая шапка в длинных списках */
tbody tr { transition:background-color .15s var(--ease); }
tbody tr:hover { background:var(--gray-soft); }
tbody tr:last-child td { border-bottom:0; }
th { font-size:11.5px; letter-spacing:.2px; }

/* шапки страниц: лёгкое зерно и золотая кромка снизу */
.page-head,.hero,.sec-hero { isolation:isolate; }
.page-head::after,.hero::after,.sec-hero::after { content:""; position:absolute; inset:0; z-index:-1; background-image:var(--grain); opacity:.07; mix-blend-mode:overlay; pointer-events:none; }
.page-head::before,.sec-hero::before { content:""; position:absolute; left:26px; right:26px; bottom:0; height:1px; background:linear-gradient(90deg,transparent,rgba(201,165,92,.55),transparent); }
.sec-hero { position:relative; overflow:hidden; }

/* мягкое появление содержимого страницы */
@keyframes rise { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }
.content > * { animation:rise .38s var(--ease) both; }
.content > *:nth-child(2) { animation-delay:.04s; } .content > *:nth-child(3) { animation-delay:.08s; } .content > *:nth-child(4) { animation-delay:.12s; } .content > *:nth-child(n+5) { animation-delay:.16s; }

/* пустые состояния */
.empty { border:1px dashed var(--line); border-radius:var(--radius); background:linear-gradient(180deg,var(--card),transparent); }

/* поля ввода: единый фокус */
.field { transition:border-color .18s var(--ease), box-shadow .18s var(--ease); }
.field:focus-within { box-shadow:0 0 0 3px var(--gold-soft); }

/* страницы ошибок */
.error-page { max-width:620px; margin:6vh auto 0; padding:36px 36px 40px; }
.error-code { display:block; font-size:64px; line-height:1; font-weight:800; letter-spacing:-3px; color:var(--gold); font-variant-numeric:tabular-nums; }
.error-page h1 { margin:12px 0 6px; font-size:24px; color:var(--navy); letter-spacing:-.4px; }
.error-page p { color:var(--muted); max-width:52ch; margin:0 0 20px; }
.error-page .actions { display:flex; gap:8px; flex-wrap:wrap; }

/* ---------- экономика GPU ---------- */
.page-head .btn-line.is-on { background:rgba(201,165,92,.22); border-color:#e7cf9b; color:#fff; }
.eco-hero { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0; padding:0; margin-bottom:16px; overflow:hidden; }
.eco-figure { padding:20px 22px; border-right:1px solid var(--line); }
.eco-figure small { display:block; font-size:12px; color:var(--muted); }
.eco-figure b { display:block; margin:6px 0 4px; font-size:clamp(22px,2.6vw,30px); line-height:1.1; letter-spacing:-.6px; color:var(--navy); font-variant-numeric:tabular-nums; }
.eco-figure span { font-size:12px; color:var(--muted); }
.eco-figure.neg b { color:var(--red); } .eco-figure.pos b { color:var(--green); }
.eco-cover { grid-column:1 / -1; padding:14px 22px 18px; border-top:1px solid var(--line); background:var(--gray-soft); }
.eco-cover-bar { position:relative; height:12px; border-radius:99px; background:var(--red-soft); overflow:hidden; }
.eco-cover-bar span { display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,var(--gold),#b8924a); }
.eco-cover small { display:block; margin-top:8px; font-size:12px; color:var(--muted); }
.eco-insights { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-bottom:28px; }
.eco-insight { padding:16px 18px; border-left:3px solid var(--line); }
.eco-insight b { display:block; font-size:14px; color:var(--text); margin-bottom:4px; }
.eco-insight p { margin:0; font-size:13px; color:var(--muted); }
.eco-insight.warn { border-left-color:var(--red); } .eco-insight.good { border-left-color:var(--green); }
.eco-table td small { display:block; font-size:11.5px; color:var(--muted); margin-top:2px; }
.eco-table .num { text-align:right; white-space:nowrap; }
.eco-table .nowrap { white-space:nowrap; }
.eco-table tfoot td { font-weight:700; border-top:2px solid var(--line); background:var(--gray-soft); }
.eco-load { display:inline-block; width:46px; height:5px; margin-right:8px; vertical-align:middle; border-radius:99px; background:var(--gray-soft); overflow:hidden; }
.eco-load span { display:block; height:100%; background:var(--gold); min-width:2px; }
.eco-result { position:relative; min-width:150px; height:24px; display:flex; align-items:center; }
.eco-result span { position:absolute; left:0; top:4px; bottom:4px; border-radius:4px; opacity:.22; }
.eco-result.neg span { background:var(--red); } .eco-result.pos span { background:var(--green); }
.eco-result b { position:relative; padding-left:6px; font-size:12.5px; font-variant-numeric:tabular-nums; white-space:nowrap; }
.eco-result.neg b,.neg-text { color:var(--red); } .eco-result.pos b { color:var(--green); }
.eco-note { font-size:12px; margin-top:10px; max-width:90ch; }

/* ---------- печать: сводка уходит в PDF без меню и кнопок ---------- */
@media print {
	@page { size:A4; margin:14mm; }
	.sidebar,.topbar,.no-print,.skip-link,footer,.messages { display:none !important; }
	.app { display:block; } .content { max-width:none; padding:0; }
	.content > * { animation:none !important; }
	body { background:#fff; font-size:12px; }
	.card { box-shadow:none; break-inside:avoid; }
	.page-head { -webkit-print-color-adjust:exact; print-color-adjust:exact; }
	a { text-decoration:none; }
}

/* ИИ-агент на всех страницах */
.agent { position:fixed; right:20px; bottom:20px; z-index:40; display:flex; flex-direction:column; align-items:flex-end; gap:10px; }
.agent-fab { display:inline-flex; align-items:center; gap:8px; padding:11px 16px; border:1px solid rgba(201,165,92,.35); border-radius:999px; background:#0f3060; color:#fff; font:inherit; font-weight:600; cursor:pointer; box-shadow:0 8px 24px -6px rgba(15,48,96,.45); transition:transform .18s var(--ease), box-shadow .18s var(--ease); }
.agent-fab:hover { transform:translateY(-1px); box-shadow:0 12px 28px -6px rgba(15,48,96,.55); }
.agent-fab:active { transform:translateY(1px); }
.agent-fab svg.ic { color:var(--gold); }
.agent-fab[aria-expanded="true"] span { display:none; }
.agent-panel { width:min(420px, calc(100vw - 32px)); height:min(620px, calc(100dvh - 110px)); display:flex; flex-direction:column; padding:0; overflow:hidden; box-shadow:0 18px 48px -12px rgba(10,29,61,.35); }
.agent-panel[hidden] { display:none; }
.agent-panel header { display:flex; align-items:center; gap:8px; padding:12px 14px; border-bottom:1px solid var(--line); }
.agent-panel header b { display:inline-flex; align-items:center; gap:6px; white-space:nowrap; }
.agent-panel header .muted { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.agent-panel header .agent-open { margin-left:auto; font-size:12px; white-space:nowrap; }
.agent-new,.agent-close { border:0; background:none; color:var(--muted); font-size:18px; line-height:1; cursor:pointer; padding:4px; border-radius:6px; }
.agent-new:hover,.agent-close:hover { color:var(--text); background:var(--gray-soft); }
.agent-log { flex:1; overflow-y:auto; padding:14px; display:flex; flex-direction:column; gap:10px; font-size:13.5px; }
.agent-empty p { margin:0 0 10px; color:var(--muted); }
.agent-empty .chat-hint { display:block; width:100%; margin-bottom:6px; padding:8px 10px; text-align:left; border:1px solid var(--line); border-radius:10px; background:var(--card); color:var(--text); font:inherit; cursor:pointer; }
.agent-empty .chat-hint:hover { border-color:var(--gold); }
.agent-msg { max-width:100%; padding:9px 12px; border-radius:10px; overflow-wrap:anywhere; white-space:pre-wrap; }
.agent-msg.user { align-self:flex-end; max-width:85%; background:var(--navy-soft); }
.agent-msg.bot { background:var(--gray-soft); }
.agent-msg.prose { white-space:normal; }
.agent-msg.prose > :first-child { margin-top:0; }
.agent-msg.prose > :last-child { margin-bottom:0; }
.agent-msg.prose pre { overflow-x:auto; }
.agent-msg.error { background:var(--red-soft); color:var(--red); }
.agent-sources { margin-top:8px; font-size:12px; color:var(--muted); }
.agent-form { display:flex; gap:8px; padding:10px 12px; border-top:1px solid var(--line); }
.agent-form textarea { flex:1; min-width:0; resize:none; }
@media (max-width:700px){ .agent { right:12px; bottom:12px; } .agent-fab span { display:none; } }
@media print { .agent { display:none; } }

/* ---------- V5: стеклянный слой для всего журнала ----------
   Полупрозрачные панели поверх мягкого фона в цветах бренда. Фон — гладкие градиенты, поэтому матовость видна
   и без backdrop-filter: размытие стоит только там, где под стеклом есть детали (обзор, панель агента). */
:root {
	--glass-bg:rgba(255,255,255,.64); --glass-line:rgba(255,255,255,.85); --glass-edge:rgba(15,48,96,.07);
	--glass-shadow:0 1px 1px rgba(15,48,96,.04),0 10px 28px -14px rgba(15,48,96,.22);
	--glass-hover:rgba(255,255,255,.82); --glass-blur:blur(18px) saturate(150%);
	--mesh:radial-gradient(900px 520px at 8% -8%,rgba(45,108,192,.15),transparent 62%),
		radial-gradient(760px 480px at 100% 12%,rgba(201,165,92,.18),transparent 60%),
		radial-gradient(820px 560px at 45% 108%,rgba(15,48,96,.12),transparent 60%);
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
	--glass-bg:rgba(22,32,50,.58); --glass-line:rgba(255,255,255,.08); --glass-edge:rgba(255,255,255,.035);
	--glass-shadow:0 1px 1px rgba(0,0,0,.3),0 14px 36px -16px rgba(0,0,0,.6); --glass-hover:rgba(32,46,70,.7);
	--mesh:radial-gradient(900px 520px at 8% -8%,rgba(45,108,192,.2),transparent 62%),
		radial-gradient(760px 480px at 100% 12%,rgba(214,181,110,.1),transparent 60%),
		radial-gradient(820px 560px at 45% 108%,rgba(30,70,140,.22),transparent 60%); } }
:root[data-theme="dark"] {
	--glass-bg:rgba(22,32,50,.58); --glass-line:rgba(255,255,255,.08); --glass-edge:rgba(255,255,255,.035);
	--glass-shadow:0 1px 1px rgba(0,0,0,.3),0 14px 36px -16px rgba(0,0,0,.6); --glass-hover:rgba(32,46,70,.7);
	--mesh:radial-gradient(900px 520px at 8% -8%,rgba(45,108,192,.2),transparent 62%),
		radial-gradient(760px 480px at 100% 12%,rgba(214,181,110,.1),transparent 60%),
		radial-gradient(820px 560px at 45% 108%,rgba(30,70,140,.22),transparent 60%);
}
.main { background:var(--mesh), var(--bg); background-attachment:fixed; }

/* панели */
.card, .glass, .sec-tile, .composer-box, .itile, .login-card {
	background:var(--glass-bg); border-color:var(--glass-line);
	box-shadow:inset 0 1px 0 rgba(255,255,255,.3), inset 0 0 0 1px var(--glass-edge), var(--glass-shadow); }
.card, .glass { border-radius:18px; }
.glass { position:relative; border:1px solid var(--glass-line); -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur); }
.card .card { box-shadow:inset 0 0 0 1px var(--glass-edge); border-radius:14px; }
a.card:hover, .tl-card:hover, .topic-card:hover, .infra-card:hover { background:var(--glass-hover); border-color:rgba(201,165,92,.55); }
.agent-panel { -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur); }

/* шапки страниц: тот же тёмный баннер, что на обзоре */
.page-head { border-radius:22px; box-shadow:0 22px 50px -30px rgba(8,26,56,.75), inset 0 1px 0 rgba(255,255,255,.08), inset 0 0 0 1px rgba(255,255,255,.06); }
.page-head .ph-ico { background:linear-gradient(145deg,rgba(201,165,92,.22),rgba(255,255,255,.04)); box-shadow:inset 0 1px 0 rgba(255,255,255,.12); }

/* заголовки разделов: золотая стеклянная иконка */
.sec-num { border-radius:11px; color:var(--gold-ink); background:linear-gradient(145deg,var(--gold-soft),transparent); border-color:rgba(201,165,92,.3); }

/* кнопки и поля */
.btn-line { background:var(--glass-bg); border-color:var(--glass-line); box-shadow:inset 0 0 0 1px var(--glass-edge); }
.btn-line:hover { background:var(--gold-soft); border-color:rgba(201,165,92,.6); }
.page-head .btn-line, .hero .btn-line { box-shadow:none; }
.field { box-shadow:inset 0 1px 2px rgba(15,48,96,.05); }
.field:focus-within { border-color:var(--gold); box-shadow:0 0 0 3px rgba(201,165,92,.18); }

/* таблицы */
th { background:transparent; }
tbody tr:hover, tbody tr:hover td { background:var(--glass-hover); }
.inv li { border-bottom-color:var(--glass-edge); }

/* пустые состояния и сообщения */
.empty { background:var(--glass-bg); border:1px dashed rgba(201,165,92,.35); }
.messages li { box-shadow:inset 0 0 0 1px var(--glass-edge), var(--glass-shadow); }

/* без поддержки или с «уменьшить прозрачность» — обычные непрозрачные панели */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) { .glass, .agent-panel { background:var(--card); } }
@media (prefers-reduced-transparency: reduce) {
	.card, .glass, .sec-tile, .composer-box, .itile, .login-card, .btn-line, .empty, .agent-panel {
		background:var(--card); -webkit-backdrop-filter:none; backdrop-filter:none; }
}
@media (max-width:900px) { .main { background-attachment:scroll; } }
@media print { .main { background:none; } .card, .glass { background:none; box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none; } }

/* На тёмном фоне используется светлый вариант логотипа без подложки. */
.project-logo { display:block; width:100%; max-width:230px; height:auto; padding:7px 0; background:transparent; object-fit:contain; }
.sidebar-head:has(.project-logo) { flex-direction:column; align-items:flex-start; gap:7px; }
.project-tagline { display:block; font-size:10px; font-weight:400; color:#a7b6cc; letter-spacing:.03em; }
.docs-sidebar .project-tagline { color:var(--muted); }
.mobile-brand { display:block; flex:0 1 150px; min-width:95px; }
.mobile-brand .project-logo { padding:3px 6px; border-radius:4px; }
.login-card .brand .project-logo { max-width:280px; margin:auto; }

.sidebar:not(.docs-sidebar) .project-logo,.mobile-brand .project-logo { filter:url(#brand-on-dark); }
[data-theme="dark"] .docs-sidebar .project-logo,[data-theme="dark"] .login-card .project-logo { filter:url(#brand-on-dark); }
@media(prefers-color-scheme:dark) {
  :root:not([data-theme="light"]) .docs-sidebar .project-logo,:root:not([data-theme="light"]) .login-card .project-logo { filter:url(#brand-on-dark); }
}

/* ---------- палитра Ctrl+K ---------- */
dialog.palette { width:min(640px, calc(100vw - 32px)); max-height:min(560px, calc(100dvh - 80px)); margin:10vh auto auto; padding:0; border:1px solid var(--glass-line);
	border-radius:18px; background:var(--card); color:var(--text); box-shadow:0 30px 80px -24px rgba(10,29,61,.55); overflow:hidden; }
dialog.palette[open] { display:flex; flex-direction:column; }
dialog.palette::backdrop { background:rgba(8,20,40,.45); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); }
.palette-input { display:flex; align-items:center; gap:10px; padding:14px 16px; border-bottom:1px solid var(--line); color:var(--muted); }
.palette-input input { flex:1; min-width:0; border:0; outline:0; background:none; color:var(--text); font:inherit; font-size:16px; }
.palette-input kbd, .palette-foot kbd { font:inherit; font-size:11px; padding:1px 6px; border:1px solid var(--line); border-radius:6px; color:var(--muted); }
.palette-results { list-style:none; margin:0; padding:6px; overflow-y:auto; flex:1; }
.palette-group { padding:10px 10px 4px; font-size:11px; font-weight:600; letter-spacing:.04em; color:var(--muted); }
.palette-item { display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding:9px 10px; border-radius:10px; cursor:pointer; }
.palette-item b { font-weight:550; font-size:14px; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.palette-item span { flex:none; max-width:45%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; color:var(--muted); }
.palette-item[aria-selected="true"] { background:var(--gold-soft); box-shadow:inset 0 0 0 1px rgba(201,165,92,.45); }
.palette-empty { padding:24px; text-align:center; color:var(--muted); }
.palette-foot { margin:0; padding:9px 16px; border-top:1px solid var(--line); font-size:12px; color:var(--muted); }

/* ---------- онбординг ---------- */
.onb { margin-bottom:18px; }
.onb-head { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.onb-head h2 { margin:0 0 4px; font-size:18px; }
.onb-desc { margin:10px 0 0; color:var(--muted); font-size:13.5px; max-width:72ch; }
.onb-meter { min-width:200px; }
.onb-meter b { display:block; font-size:13px; margin-bottom:6px; font-variant-numeric:tabular-nums; }
.onb-meter i { display:block; height:8px; border-radius:99px; background:var(--gray-soft); overflow:hidden; }
.onb-meter u { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,#b8924a,#e7c987); transition:width .4s var(--ease); }
.onb-meter.small { min-width:140px; }
.onb-meter.small b { font-size:12px; margin-bottom:4px; }
.onb-steps { list-style:none; margin:16px 0 0; padding:0; counter-reset:step; }
.onb-steps li { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:12px; align-items:start; padding:12px 0; border-top:1px dashed var(--glass-edge, var(--line)); }
.onb-steps li p { margin:4px 0 0; font-size:13px; color:var(--muted); }
.onb-steps li.done b { color:var(--muted); text-decoration:line-through; text-decoration-color:rgba(91,103,118,.5); }
.onb-steps li.next { background:linear-gradient(90deg,var(--gold-soft),transparent 70%); border-radius:10px; padding-left:8px; padding-right:8px; }
.onb-check { display:grid; place-items:center; width:24px; height:24px; margin-top:1px; border-radius:6px; border:1.5px solid var(--navy-line); background:var(--card); color:#fff; cursor:pointer; }
.onb-check[aria-pressed="true"] { background:var(--green); border-color:var(--green); }
.onb-check svg.ic { width:15px; height:15px; }
.onb-check:hover { border-color:var(--gold); }
.onb-extra { margin-top:18px; gap:18px; }
.onb-extra h3 { margin:0 0 10px; font-size:14px; }
.onb-assign { margin-bottom:18px; }
.onb-assign h3 { margin:0 0 12px; font-size:15px; }
.onb-ai-status { display:flex; align-items:center; gap:10px; margin-bottom:16px; }
.onb-ai-status.is-error { border-color:var(--red, #c0392b); }
.onb-assign + .onb-assign { margin-top:16px; }
.onb-assign-fields { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:12px; align-items:end; }
.onb-assign .infra-field { display:flex; flex-direction:column; gap:5px; font-size:12.5px; color:var(--muted); }
.onb-assign .infra-field :is(input, select) { padding:8px 10px; border:1px solid var(--line); border-radius:10px; background:var(--input); color:var(--text); font:inherit; }
.onb-assign .infra-error { font-style:normal; color:var(--red); font-size:12px; }
.t-red { color:var(--red); }

/* ---------- слэш-команды редактора ---------- */
.slash-menu { position:fixed; z-index:60; width:250px; max-height:280px; overflow-y:auto; padding:6px; border:1px solid var(--line); border-radius:10px;
	background:var(--card); box-shadow:0 16px 40px -12px rgba(10,29,61,.35); }
.slash-menu[hidden] { display:none; }
.slash-menu button { display:block; width:100%; padding:8px 10px; border:0; border-radius:6px; background:none; color:var(--text); font:inherit; font-size:13px; text-align:left; cursor:pointer; }
.slash-menu button[aria-selected="true"], .slash-menu button:hover { background:var(--gold-soft); }

/* схема Mermaid с ошибкой: исходный текст и пояснение вместо картинки-«бомбы» (static/js/mermaid_safe.js) */
pre.mermaid-broken { white-space:pre-wrap; padding:12px; border:1px dashed var(--line); border-radius:10px; background:var(--bg); font-size:12.5px; }
pre.mermaid-broken::before { content:attr(data-note); display:block; margin-bottom:8px; font-family:inherit; color:var(--muted); font-size:12.5px; white-space:normal; }

/* Оформление как в «Лаборатории LLM» (LAB LLM/web/hub/static/hub/app.css): те же токены, приёмы перенесены сюда */
.nav-group { text-transform:uppercase; letter-spacing:.12em; font-weight:700; color:#8aa0c2; font-size:10.5px; padding:18px 12px 6px; }
.nav a { font-size:13.5px; }
.nav a.active { box-shadow:inset 3px 0 0 var(--gold); border-color:transparent; font-weight:600; }
.kpi { position:relative; overflow:hidden; }
.kpi::before { content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:linear-gradient(180deg,var(--gold),transparent); }
.kpi small { text-transform:uppercase; letter-spacing:.05em; }
.kpi b { font-size:28px; font-weight:780; letter-spacing:-.6px; }
th { text-transform:uppercase; letter-spacing:.04em; }
.card { box-shadow:0 1px 2px rgba(10,30,60,.05),0 8px 28px rgba(10,30,60,.08); }
:root[data-theme="dark"] .card { box-shadow:0 1px 2px rgba(0,0,0,.3),0 8px 28px rgba(0,0,0,.3); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .card { box-shadow:0 1px 2px rgba(0,0,0,.3),0 8px 28px rgba(0,0,0,.3); } }
.btn-gold:hover { transform:translateY(-1px); }
.visually-hidden { position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ---------- приёмы из Launch UI (launchuicomponents.com, MIT): стекло, таблетки, рамка-подложка, одно появление. Цвета — журнала. ---------- */
/* стеклянная карточка: лёгкий вертикальный градиент, светлая кромка сверху, приглушённая снизу */
.card { background:linear-gradient(180deg, var(--card), color-mix(in srgb, var(--card) 86%, var(--bg))); border-top-color:color-mix(in srgb, var(--line) 60%, #fff); }
:root[data-theme="dark"] .card { background:linear-gradient(180deg, color-mix(in srgb, var(--card) 100%, #fff 3%), var(--card)); border-color:rgba(255,255,255,.07); border-top-color:rgba(255,255,255,.14); border-bottom-color:rgba(255,255,255,.04); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .card { background:linear-gradient(180deg, color-mix(in srgb, var(--card) 100%, #fff 3%), var(--card)); border-color:rgba(255,255,255,.07); border-top-color:rgba(255,255,255,.14); border-bottom-color:rgba(255,255,255,.04); } }
/* метки по Launch UI Badge: таблетка 12px/600, отступы 10×4, рамка 1px в цвет метки, зазор под значок 8px; у стадий — точка-статус */
.chip { gap:8px; padding:4px 10px; font-size:12px; font-weight:600; line-height:1.2; border-radius:999px; border:1px solid color-mix(in srgb, var(--c, var(--muted)) 20%, transparent); box-shadow:none; }
.chip[class*="stage-"]::before { content:""; flex:none; width:6px; height:6px; border-radius:50%; background:currentColor; box-shadow:0 0 0 3px color-mix(in srgb, currentColor 18%, transparent); }
/* рамка-подложка вокруг «экранов»: граф, схемы Mermaid, просмотрщик файлов */
.og-stage, .prose pre.mermaid, .docs-preview-card { outline:8px solid color-mix(in srgb, var(--line) 45%, transparent); outline-offset:0; }
.prose pre.mermaid { border-radius:14px; margin:18px 8px; }
/* одно появление при открытии страницы: первые блоки контента выплывают снизу */
@keyframes lui-appear { from { opacity:0; transform:translateY(12px); filter:blur(4px); } to { opacity:1; transform:none; filter:none; } }
.content > :nth-child(-n+5) { animation:lui-appear .55s cubic-bezier(.2,.7,.2,1) backwards; }
.content > :nth-child(2) { animation-delay:.06s; } .content > :nth-child(3) { animation-delay:.12s; }
.content > :nth-child(4) { animation-delay:.18s; } .content > :nth-child(5) { animation-delay:.24s; }
@media (prefers-reduced-motion: reduce) { .content > * { animation:none !important; } }