:root {
  --bg: #f5f6fa; --panel: #ffffff; --panel-2: #eef0f6; --border: #dde1ec;
  --text: #12161f; --text-dim: #4a5578; --text-faint: #7480a3;
  --accent: #b9791f; --accent-soft: rgba(185,121,31,0.12);
  --teal: #1f8f7f; --teal-soft: rgba(31,143,127,0.12);
  --font-head: 'IBM Plex Sans Condensed', 'Arial Narrow', 'Segoe UI Semibold', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root { --bg:#0b0e14; --panel:#12161f; --panel-2:#171c28; --border:#262c3b; --text:#eef1f7; --text-dim:#9aa3c2; --text-faint:#626d92; --accent:#d9a441; --accent-soft:rgba(217,164,65,0.14); --teal:#46c2b0; --teal-soft:rgba(70,194,176,0.14); }
}
:root[data-theme="dark"] { --bg:#0b0e14; --panel:#12161f; --panel-2:#171c28; --border:#262c3b; --text:#eef1f7; --text-dim:#9aa3c2; --text-faint:#626d92; --accent:#d9a441; --accent-soft:rgba(217,164,65,0.14); --teal:#46c2b0; --teal-soft:rgba(70,194,176,0.14); }
:root[data-theme="light"] { --bg:#f5f6fa; --panel:#ffffff; --panel-2:#eef0f6; --border:#dde1ec; --text:#12161f; --text-dim:#4a5578; --text-faint:#7480a3; --accent:#b9791f; --accent-soft:rgba(185,121,31,0.12); --teal:#1f8f7f; --teal-soft:rgba(31,143,127,0.12); }

* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--text); font-family:var(--font-body); line-height:1.5; -webkit-font-smoothing:antialiased; }

.doc-tag { display:inline-flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:12px; letter-spacing:0.08em; text-transform:uppercase; color:var(--teal); background:var(--teal-soft); padding:5px 12px; border-radius:999px; }

h1 { font-family: var(--font-head); font-weight:700; font-size: clamp(24px,3vw,32px); line-height:1.15; margin:20px 0 8px; text-wrap:balance; }

.dim { color: var(--text-dim); }

.center-screen { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px; }
.card { background:var(--panel); border:1px solid var(--border); border-radius:16px; padding:28px; max-width:440px; width:100%; }

.topbar { display:flex; align-items:center; justify-content:space-between; padding:18px 28px; border-bottom:1px solid var(--border); }
.wrap { max-width:960px; margin:0 auto; padding:32px 28px 64px; }

.button { display:inline-flex; align-items:center; gap:8px; margin-top:18px; padding:10px 18px; border-radius:10px; background:var(--accent); color:#151007; font-weight:600; text-decoration:none; border:none; cursor:pointer; font-family:var(--font-body); font-size:14px; }
.button.ghost { background:transparent; color:var(--text-dim); border:1px solid var(--border); margin-top:0; }

.grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap:16px; margin-top:24px; }
.stat { padding:20px; }
.stat-label { font-size:13px; color:var(--text-faint); text-transform:uppercase; letter-spacing:0.04em; margin-bottom:8px; }
.stat-value { font-family:var(--font-head); font-size:28px; font-weight:700; font-variant-numeric: tabular-nums; }

.lede { margin:28px 0 8px; font-weight:600; }
.see-more { margin-top:10px; }
.see-more a { color: var(--teal); text-decoration:none; font-weight:600; }
.see-more a:hover { text-decoration:underline; }

/* Общий статус-пилюля — модификаторы (.active/.inactive, .on/.off,
   .pending/.completed/.rejected) описаны в conf. страницы, база одна на всех,
   чтобы порядок подключения promo.css/shop.css не решал padding "случайно". */
.pill { padding:4px 10px; border-radius:999px; font-size:12.5px; font-weight:600; }

/* Боковая навигация (см. sidebar.js) — фикс. колонка на десктопе,
   выезжающая панель на мобильном. */
.sidebar {
  position: fixed; top:0; left:0; bottom:0; width:230px; background:var(--panel);
  border-right:1px solid var(--border); padding:22px 14px; display:flex; flex-direction:column; gap:4px;
  z-index:40; transform: translateX(0); transition: transform .25s ease; overflow-y:auto;
}
.sidebar .brand { font-family:var(--font-head); font-weight:700; font-size:18px; padding:6px 10px 20px; }
.sidebar .nav-link {
  display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:10px;
  color:var(--text-dim); text-decoration:none; font-size:14.5px; background:none; border:none;
  cursor:pointer; text-align:left; width:100%; font-family:var(--font-body);
}
.sidebar .nav-link .ic { width:18px; height:18px; flex-shrink:0; }
.sidebar .nav-link:hover { background:var(--panel-2); color:var(--text); }
.sidebar .nav-link.active { background:var(--teal-soft); color:var(--teal); font-weight:600; }
.sidebar-sep { height:1px; background:var(--border); margin:10px 4px; }
.logout-link { color:#e05a5a; margin-top:auto; }

.nav-toggle {
  display:none; position:fixed; top:14px; left:14px; z-index:50; width:40px; height:40px;
  border-radius:10px; border:1px solid var(--border); background:var(--panel); color:var(--text);
  align-items:center; justify-content:center; cursor:pointer;
}
.nav-toggle svg { width:20px; height:20px; }

.nav-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.5); z-index:35; }
.nav-overlay.show { display:block; }

.main { margin-left:230px; min-height:100vh; }

@media (max-width: 860px) {
  .sidebar { transform: translateX(-100%); box-shadow: 0 0 40px rgba(0,0,0,0.35); }
  .sidebar.open { transform: translateX(0); }
  .nav-toggle { display:flex; }
  .main { margin-left:0; padding-top:60px; }
}