:root{
  --ink:#17212B;
  --bg:#EDF1F5;
  --surface:#FFFFFF;
  --surface-2:#F6F8FA;
  --line:#D7DEE5;
  --muted:#5A6572;
  --accent:#2A6DF4;
  --accent-ink:#0E3FA8;
  --accent-tint:#E4ECFE;
  --danger:#C2410C;
  --danger-bg:#FCEEE6;
  --ok:#1D8A5F;
  --ok-bg:#E8F5EF;
  --shadow: 0 1px 2px rgba(23,33,43,.06), 0 10px 28px -16px rgba(23,33,43,.22);
}
@media (prefers-color-scheme: dark){
  :root{
    --ink:#E7ECF2;
    --bg:#0F151C;
    --surface:#171F29;
    --surface-2:#1D2732;
    --line:#2B3644;
    --muted:#8F9DAC;
    --accent:#6E9CFF;
    --accent-ink:#BBD0FF;
    --accent-tint:#1B2A47;
    --danger:#FF9466;
    --danger-bg:#3A2216;
    --ok:#5FD0A0;
    --ok-bg:#123328;
    --shadow: 0 1px 2px rgba(0,0,0,.35), 0 14px 32px -18px rgba(0,0,0,.6);
  }
}

*{ box-sizing:border-box; }
html{ color-scheme: light dark; }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:"Roboto",system-ui,-apple-system,Segoe UI,sans-serif;
  font-size:15px;
  line-height:1.55;
}
a{ color:var(--accent); text-decoration:none; }
a:hover{ text-decoration:underline; }
h1,h2,h3{ font-family:"Roboto Condensed",system-ui,sans-serif; line-height:1.15; }

/* ---------- shared top bar ---------- */
.topbar{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  gap:24px; padding:14px 28px;
  background:var(--surface); border-bottom:1px solid var(--line);
}
.topbar-left{ display:flex; align-items:center; gap:28px; min-width:0; }
.brand{ display:flex; align-items:center; gap:9px; font-family:"Roboto Condensed"; font-weight:700; font-size:16.5px; flex-shrink:0; }
.brand svg{ flex-shrink:0; }
.navlinks{ display:flex; align-items:center; gap:2px; }
.navlinks a{
  display:inline-flex; align-items:center; gap:6px;
  padding:7px 13px; border-radius:8px;
  font-size:13.5px; color:var(--muted); text-decoration:none;
}
.navlinks a:hover{ color:var(--ink); background:var(--surface-2); }
.navlinks a.active{ color:var(--accent-ink); background:var(--accent-tint); }
@media (prefers-color-scheme: dark){ .navlinks a.active{ color:var(--accent); } }

.usermenu{ display:flex; align-items:center; gap:12px; flex-shrink:0; }
.usermenu .name{ font-size:13px; color:var(--muted); }
.usermenu .name strong{ color:var(--ink); font-weight:500; }
.usermenu a{ font-size:13px; color:var(--muted); }
.usermenu a:hover{ color:var(--accent); }

.avatar{
  width:26px; height:26px; border-radius:50%;
  background:var(--accent-tint); color:var(--accent-ink);
  display:flex; align-items:center; justify-content:center;
  font-family:"Roboto Condensed"; font-weight:700; font-size:11.5px;
  flex-shrink:0;
}
@media (prefers-color-scheme: dark){ .avatar{ color:var(--accent); } }

/* ---------- page shell ---------- */
main{ max-width:900px; margin:0 auto; padding:40px 28px 80px; }
.page-eyebrow{
  font-family:"Roboto Mono"; font-size:11.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--accent); margin-bottom:10px;
}
.page-header{ margin-bottom:34px; }
.page-header h1{ font-size:27px; font-weight:700; margin:0 0 8px; }
.page-header p{ color:var(--muted); font-size:14.5px; margin:0; max-width:56ch; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:6px;
  font-family:"Roboto"; font-size:13px; font-weight:500;
  padding:8px 14px; border-radius:8px; border:1px solid var(--line);
  background:var(--surface); color:var(--ink); cursor:pointer;
}
.btn:hover{ border-color:var(--accent); color:var(--accent-ink); }
.btn-sm{ padding:6px 11px; font-size:12.5px; }
.btn-primary{ background:var(--accent); border-color:var(--accent); color:#fff; }
.btn-primary:hover{ filter:brightness(1.06); color:#fff; border-color:var(--accent); }
.btn-danger:hover{ border-color:var(--danger); color:var(--danger); }

/* ---------- form fields ---------- */
.field{ margin-bottom:15px; }
.field label{ display:block; font-size:12.5px; color:var(--muted); margin-bottom:6px; }
input[type="text"], input[type="password"]{
  width:100%; padding:9px 11px; font-size:14px;
  border:1px solid var(--line); border-radius:8px;
  background:var(--surface-2); color:var(--ink);
}
input:focus{ outline:2px solid var(--accent); outline-offset:1px; background:var(--surface); }
.checkbox-line{ display:flex; align-items:center; gap:8px; font-size:13.5px; }
.checkbox-line input{ accent-color:var(--accent); }

/* ---------- notices ---------- */
.notice{ border-radius:10px; padding:11px 14px; font-size:13.5px; margin-bottom:22px; }
.notice.error{ background:var(--danger-bg); color:var(--danger); }
.notice.success{ background:var(--ok-bg); color:var(--ok); }

/* ---------- chips ---------- */
.chip{
  display:inline-flex; align-items:center; gap:5px;
  font-family:"Roboto Mono"; font-size:11px; padding:3px 9px; border-radius:100px;
  border:1px solid var(--line); color:var(--muted);
}
.chip-admin{ background:var(--accent-tint); border-color:transparent; color:var(--accent-ink); }
@media (prefers-color-scheme: dark){ .chip-admin{ color:var(--accent); } }

/* ---------- article content (for "simple" articles) ---------- */
.article-body{ font-size:15px; line-height:1.65; }
.article-body h2{ font-size:22px; font-weight:700; margin:36px 0 12px; padding-bottom:10px; border-bottom:1px solid var(--line); }
.article-body h3{ font-size:16.5px; font-weight:600; margin:26px 0 10px; }
.article-body p{ margin:0 0 14px; max-width:70ch; }
.article-body ul, .article-body ol{ margin:0 0 16px; padding-left:22px; max-width:70ch; }
.article-body li{ margin-bottom:6px; }
.article-body pre{
  background:#0F1720; color:#E7ECF2; border-radius:10px; padding:16px 18px;
  overflow-x:auto; font-family:"Roboto Mono"; font-size:13px; line-height:1.6; margin:0 0 20px;
  border:1px solid #26313C;
}
.article-body pre code{ font-family:"Roboto Mono"; font-size:13px; }
.article-body :not(pre) > code{
  background:var(--surface-2); padding:1px 6px; border-radius:4px; font-size:13px; font-family:"Roboto Mono";
}
.article-body table{
  width:100%; border-collapse:collapse; margin:0 0 20px; background:var(--surface);
  border:1px solid var(--line); border-radius:10px; overflow:hidden; font-size:14px;
}
.article-body th, .article-body td{ text-align:left; padding:10px 13px; border-bottom:1px solid var(--line); }
.article-body tr:last-child td{ border-bottom:none; }
.article-body th{ font-family:"Roboto Mono"; font-size:11px; text-transform:uppercase; color:var(--muted); background:var(--surface-2); }
.article-body img{
  max-width:100%; height:auto; display:block; border-radius:10px;
  border:1px solid var(--line); margin:0 0 20px;
}

/* ---------- article cover image ---------- */
.article-cover{
  width:100%; max-height:360px; object-fit:cover;
  border-radius:14px; border:1px solid var(--line); margin:0 0 26px; display:block;
}
.article-card .cover-thumb{
  width:34px; height:34px; border-radius:9px; flex-shrink:0; object-fit:cover;
  border:1px solid var(--line);
}

.callout{ display:flex; gap:12px; border-radius:10px; padding:14px 16px; margin:0 0 20px; max-width:70ch; border:1px solid; }
.callout p{ margin:0; }
.callout .glyph{ font-size:17px; line-height:1.4; flex-shrink:0; }
.callout.warn{ background:var(--danger-bg); border-color:color-mix(in srgb, var(--danger) 45%, transparent); color:var(--ink); }
.callout.warn .glyph{ color:var(--danger); }
.callout.ok{ background:var(--ok-bg); border-color:color-mix(in srgb, var(--ok) 45%, transparent); color:var(--ink); }
.callout.ok .glyph{ color:var(--ok); }

.file-tag{
  display:inline-flex; align-items:center; gap:6px;
  font-family:"Roboto Mono"; font-size:12.5px;
  color:var(--accent-ink); background:var(--accent-tint); border:1px solid var(--line);
  padding:4px 9px; border-radius:6px; margin:0 0 10px;
}

/* ---------- admin shell (sidebar layout for Админка) ---------- */
.admin-shell{ display:grid; grid-template-columns:210px minmax(0,1fr); gap:32px; align-items:start; }
@media (max-width:820px){
  .admin-shell{ grid-template-columns:1fr; }
  .admin-nav{ position:static; flex-direction:row; flex-wrap:wrap; }
}
.admin-nav{ position:sticky; top:76px; display:flex; flex-direction:column; gap:2px; }
.admin-nav .eyebrow{
  font-family:"Roboto Mono"; font-size:11px; text-transform:uppercase; letter-spacing:.08em;
  color:var(--muted); padding:0 12px; margin-bottom:8px;
}
.admin-nav a{
  display:flex; align-items:center; gap:8px; padding:9px 12px; border-radius:8px;
  font-size:13.5px; color:var(--muted); text-decoration:none;
}
.admin-nav a:hover{ background:var(--surface-2); color:var(--ink); }
.admin-nav a.active{ background:var(--accent-tint); color:var(--accent-ink); font-weight:500; }
@media (prefers-color-scheme: dark){ .admin-nav a.active{ color:var(--accent); } }

.stat-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px; margin-bottom:24px; }
.stat-tile{ background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:18px 20px; }
.stat-tile .n{ font-family:"Roboto Condensed"; font-size:30px; font-weight:700; line-height:1; margin-bottom:6px; }
.stat-tile .label{ font-size:13px; color:var(--muted); }

/* ---------- card ---------- */
.panel{
  background:var(--surface); border:1px solid var(--line); border-radius:12px;
  box-shadow:var(--shadow);
}

/* ---------- back-to-top ---------- */
#backToTop{
  position:fixed; right:24px; bottom:24px; z-index:60;
  width:42px; height:42px; border-radius:50%;
  background:var(--surface); border:1px solid var(--line); color:var(--muted);
  display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow); cursor:pointer;
  opacity:0; pointer-events:none; transform:translateY(8px);
  transition:opacity .15s ease, transform .15s ease;
}
#backToTop.visible{ opacity:1; pointer-events:auto; transform:translateY(0); }
#backToTop:hover{ border-color:var(--accent); color:var(--accent); }
@media (prefers-reduced-motion: reduce){ #backToTop{ transition:none; } }