:root {
  --bg: #F8F9FF; --panel: #ffffff; --panel-2: #F1EDFF; --border: #E8E1FF;
  --text: #18181B; --text-dim: #4a5578; --text-faint: #71717A;
  --accent: #6C3BFF; --accent-soft: rgba(108,59,255,0.12);
  --accent-gradient: linear-gradient(135deg, #6C3BFF 0%, #7C4DFF 100%);
  --teal: #1f8f7f; --teal-soft: rgba(31,143,127,0.12);
  --violet: #8B5CF6; --violet-soft: rgba(139,92,246,0.12);
  --accent-ink: #ffffff;
  --success: #1f8f52; --success-soft: rgba(31,143,82,0.12);
  --warning: #b98a1f; --warning-soft: rgba(185,138,31,0.12);
  --danger: #c94141; --danger-soft: rgba(201,65,65,0.12);
  --font-head: 'Inter', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Inter', '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:#1a1530; --border:#2b2247; --text:#eef1f7; --text-dim:#9aa3c2; --text-faint:#8b85ad; --accent:#7C4DFF; --accent-soft:rgba(124,77,255,0.18); --accent-gradient:linear-gradient(135deg, #7C4DFF 0%, #8B5CF6 100%); --accent-ink:#ffffff; --teal:#46c2b0; --teal-soft:rgba(70,194,176,0.14); --violet:#a78bfa; --violet-soft:rgba(167,139,250,0.16); --success:#3dd68c; --success-soft:rgba(61,214,140,0.14); --warning:#f2cb4e; --warning-soft:rgba(242,203,78,0.14); --danger:#f2555a; --danger-soft:rgba(242,85,90,0.14); }
}
:root[data-theme="dark"] { --bg:#0b0e14; --panel:#12161f; --panel-2:#1a1530; --border:#2b2247; --text:#eef1f7; --text-dim:#9aa3c2; --text-faint:#8b85ad; --accent:#7C4DFF; --accent-soft:rgba(124,77,255,0.18); --accent-gradient:linear-gradient(135deg, #7C4DFF 0%, #8B5CF6 100%); --accent-ink:#ffffff; --teal:#46c2b0; --teal-soft:rgba(70,194,176,0.14); --violet:#a78bfa; --violet-soft:rgba(167,139,250,0.16); --success:#3dd68c; --success-soft:rgba(61,214,140,0.14); --warning:#f2cb4e; --warning-soft:rgba(242,203,78,0.14); --danger:#f2555a; --danger-soft:rgba(242,85,90,0.14); }
:root[data-theme="light"] { --bg:#F8F9FF; --panel:#ffffff; --panel-2:#F1EDFF; --border:#E8E1FF; --text:#18181B; --text-dim:#4a5578; --text-faint:#71717A; --accent:#6C3BFF; --accent-soft:rgba(108,59,255,0.12); --accent-gradient:linear-gradient(135deg, #6C3BFF 0%, #7C4DFF 100%); --accent-ink:#ffffff; --teal:#1f8f7f; --teal-soft:rgba(31,143,127,0.12); --violet:#8B5CF6; --violet-soft:rgba(139,92,246,0.12); --success:#1f8f52; --success-soft:rgba(31,143,82,0.12); --warning:#b98a1f; --warning-soft:rgba(185,138,31,0.12); --danger:#c94141; --danger-soft:rgba(201,65,65,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(--accent); background:var(--accent-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:20px; padding:28px; max-width:440px; width:100%; box-shadow: 0 8px 24px rgba(76,29,149,0.06), 0 2px 6px rgba(76,29,149,0.04); }

.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 20px; border-radius:12px; background:var(--accent-gradient); color:var(--accent-ink); font-weight:600; text-decoration:none; border:none; cursor:pointer; font-family:var(--font-body); font-size:14px; transition: box-shadow .2s ease, transform .2s ease; }
.button:hover { box-shadow: 0 8px 20px rgba(108,59,255,0.24); transform: translateY(-1px); }
.button.ghost { background:transparent; color:var(--text-dim); border:1px solid var(--border); margin-top:0; box-shadow:none; }
.button.ghost:hover { box-shadow:none; transform:none; background:var(--panel-2); }

.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(--accent); 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; }
.pill.success { background: var(--success-soft); color: var(--success); }
.pill.warning { background: var(--warning-soft); color: var(--warning); }
.pill.danger { background: var(--danger-soft); color: var(--danger); }
.pill.dim { background: var(--panel-2); color: var(--text-dim); }

/* Боковая навигация (см. 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:800; font-size:18px; padding:6px 10px 20px; color:var(--accent); }
.sidebar .nav-link {
  display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:12px;
  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(--accent-soft); color:var(--accent); font-weight:600; }
.sidebar-sep { height:1px; background:var(--border); margin:10px 4px; }
.logout-link { color:var(--danger); 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; }
}