/* Темы оформления. Включаются атрибутом data-theme на <html>; «Классика» — без атрибута.
   Переменные цветов те же, что в style.css, поэтому тема меняет всё приложение целиком. */
@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&family=Nunito:wght@500;600;700;800&family=Quicksand:wght@500;600;700&display=swap");

/* ---------- Дарк: чистый чёрный с фиолетовым акцентом ---------- */
html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #08080a; --surface: #131316; --fg: #ececf1; --muted: #8a8a96;
  --accent: #9b7bff; --accent-fg: #fff;
}

/* ---------- Хакер: чёрный терминал, зелёный неон ---------- */
html[data-theme="hacker"] {
  color-scheme: dark;
  --bg: #010a03; --surface: #05150a; --fg: #b9ffcb; --muted: #4cb06a;
  --accent: #2bff6a; --accent-fg: #00170a;
  --ok: #2bff6a; --warn: #e6ff3a; --bad: #ff4d5e;
  --r-lg: 6px; --r-md: 5px; --r-sm: 3px;
  --font: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}
html[data-theme="hacker"] body { font-size: 14px; }
html[data-theme="hacker"] body::before {
  content: ""; position: fixed; inset: 0; z-index: 60; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(43,255,106,.045) 0 1px, transparent 1px 3px);
}
html[data-theme="hacker"] h1, html[data-theme="hacker"] h2, html[data-theme="hacker"] .stat .v, html[data-theme="hacker"] .kpi .v, html[data-theme="hacker"] .phone {
  text-shadow: 0 0 10px color-mix(in srgb, var(--accent) 55%, transparent);
}
html[data-theme="hacker"] .card, html[data-theme="hacker"] .stat, html[data-theme="hacker"] .kpi, html[data-theme="hacker"] .modal {
  border-color: color-mix(in srgb, var(--accent) 28%, transparent);
  box-shadow: 0 0 22px -12px var(--accent);
}
html[data-theme="hacker"] .screen-title::before, html[data-theme="hacker"] .page-head h1::before { content: "> "; color: var(--accent); }
html[data-theme="hacker"] .screen-title::after, html[data-theme="hacker"] .page-head h1::after { content: "_"; color: var(--accent); animation: tblink 1s steps(2, start) infinite; }
@keyframes tblink { to { visibility: hidden; } }
html[data-theme="hacker"] .btn { text-transform: lowercase; letter-spacing: .02em; }

/* ---------- Кот: тёплые персиковые тона, рыжий кот и лапки ---------- */
html[data-theme="cat"] {
  color-scheme: light;
  --bg: #fff3e6; --surface: #fffaf3; --fg: #4a3126; --muted: #a4806c;
  --accent: #f08a4b; --accent-fg: #fff;
  --ok: #3fae7a; --warn: #e9a23b; --bad: #e0555f;
  --r-lg: 24px; --r-md: 18px; --r-sm: 12px;
  --font: "Nunito", "Onest", -apple-system, "Segoe UI", sans-serif;
}
html[data-theme="cat"] body { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 140 140%22%3E%3Cg fill=%22%23f08a4b%22 opacity=%22.10%22 transform=%22rotate(-18 40 40)%22%3E%3Cellipse cx=%2240%22 cy=%2248%22 rx=%2211%22 ry=%229%22/%3E%3Ccircle cx=%2226%22 cy=%2234%22 r=%225%22/%3E%3Ccircle cx=%2236%22 cy=%2226%22 r=%225%22/%3E%3Ccircle cx=%2248%22 cy=%2226%22 r=%225%22/%3E%3Ccircle cx=%2257%22 cy=%2234%22 r=%225%22/%3E%3C/g%3E%3Cg fill=%22%23f08a4b%22 opacity=%22.07%22 transform=%22rotate(14 100 100)%22%3E%3Cellipse cx=%22100%22 cy=%22108%22 rx=%2211%22 ry=%229%22/%3E%3Ccircle cx=%2286%22 cy=%2294%22 r=%225%22/%3E%3Ccircle cx=%2296%22 cy=%2286%22 r=%225%22/%3E%3Ccircle cx=%22108%22 cy=%2286%22 r=%225%22/%3E%3Ccircle cx=%22117%22 cy=%2294%22 r=%225%22/%3E%3C/g%3E%3C/svg%3E"); background-size: 140px 140px; }

/* ---------- Феи: ночной фиолетовый, розовый и блёстки ---------- */
html[data-theme="fairy"] {
  color-scheme: dark;
  --bg: #1a0f33; --surface: #2a1853; --fg: #fff0fb; --muted: #c4a6ea;
  --accent: #ff5fc0; --accent-fg: #fff;
  --ok: #4fe3c1; --warn: #ffd166; --bad: #ff6b8a;
  --r-lg: 24px; --r-md: 18px; --r-sm: 12px;
  --font: "Quicksand", "Onest", -apple-system, "Segoe UI", sans-serif;
}
html[data-theme="fairy"] body {
  background-color: var(--bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 200 200%22%3E%3Cg fill=%22%23fff%22%3E%3Cpath d=%22M30 40l2 6 6 2-6 2-2 6-2-6-6-2 6-2z%22 opacity=%22.55%22/%3E%3Cpath d=%22M150 24l1.5 4.5 4.5 1.5-4.5 1.5-1.5 4.5-1.5-4.5-4.5-1.5 4.5-1.5z%22 opacity=%22.4%22/%3E%3Cpath d=%22M96 110l2.4 7 7 2.4-7 2.4-2.4 7-2.4-7-7-2.4 7-2.4z%22 opacity=%22.5%22/%3E%3Cpath d=%22M170 150l1.5 4.5 4.5 1.5-4.5 1.5-1.5 4.5-1.5-4.5-4.5-1.5 4.5-1.5z%22 opacity=%22.45%22/%3E%3Cpath d=%22M24 160l1.5 4.5 4.5 1.5-4.5 1.5-1.5 4.5-1.5-4.5-4.5-1.5 4.5-1.5z%22 opacity=%22.4%22/%3E%3Ccircle cx=%2270%22 cy=%2270%22 r=%221.4%22 opacity=%22.5%22/%3E%3Ccircle cx=%22130%22 cy=%2290%22 r=%221.2%22 opacity=%22.4%22/%3E%3Ccircle cx=%2250%22 cy=%22130%22 r=%221.3%22 opacity=%22.4%22/%3E%3Ccircle cx=%22180%22 cy=%2260%22 r=%221.2%22 opacity=%22.4%22/%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(900px 520px at 8% -8%, rgba(122,92,255,.45), transparent 60%),
    radial-gradient(800px 480px at 100% 4%, rgba(255,95,192,.32), transparent 60%),
    radial-gradient(900px 600px at 50% 120%, rgba(110,231,255,.18), transparent 60%);
  background-size: 200px 200px, auto, auto, auto;
  background-attachment: fixed;
}
html[data-theme="fairy"] .btn:not(.subtle):not(.ghost):not(.ok) { background: linear-gradient(135deg, #ff5fc0, #8a5cff); border-color: transparent; }
html[data-theme="fairy"] .card, html[data-theme="fairy"] .stat, html[data-theme="fairy"] .kpi { border-color: rgba(255,170,230,.22); }

/* ---------- Капибара: спокойные земляные тона, капибара с апельсином ---------- */
html[data-theme="capy"] {
  color-scheme: light;
  --bg: #efe6d2; --surface: #faf5e8; --fg: #3c3226; --muted: #8b7c62;
  --accent: #5f8f47; --accent-fg: #fff;
  --ok: #4f9a5a; --warn: #e08a1e; --bad: #cf5a4a;
  --r-lg: 22px; --r-md: 16px; --r-sm: 11px;
  --font: "Nunito", "Onest", -apple-system, "Segoe UI", sans-serif;
}
html[data-theme="capy"] body { background-image: linear-gradient(180deg, #f3ebd8 0%, #ebe3cb 55%, #d6e3c4 100%); background-attachment: fixed; }

/* ---------- Талисманы: мини-апп (в шапке) и админка (внизу меню) ---------- */
.topbar::after { content: ""; flex: none; width: 66px; height: 46px; background: no-repeat center / contain; order: 5; }
html[data-theme="cat"] .topbar::after { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 120 92%22%3E%3Cpath d=%22M96 70c14-2 20-14 12-22-5-5-12-2-10 4 2 6 8 4 8 4%22 fill=%22none%22 stroke=%22%23e8894a%22 stroke-width=%227%22 stroke-linecap=%22round%22/%3E%3Cellipse cx=%2256%22 cy=%2266%22 rx=%2242%22 ry=%2222%22 fill=%22%23f6a15a%22/%3E%3Cpath d=%22M34 54c3 10 9 14 22 14s19-4 22-14%22 fill=%22%23ffe3c4%22 opacity=%22.7%22/%3E%3Cpath d=%22M22 28 28 6l16 12zM90 28 84 6 68 18z%22 fill=%22%23f6a15a%22/%3E%3Cpath d=%22M27 22 29 11l8 6zM85 22 83 11l-8 6z%22 fill=%22%23ffb6b0%22/%3E%3Cellipse cx=%2256%22 cy=%2236%22 rx=%2235%22 ry=%2227%22 fill=%22%23f6a15a%22/%3E%3Cpath d=%22M50 14v9M56 12v11M62 14v9%22 stroke=%22%23e8894a%22 stroke-width=%224%22 stroke-linecap=%22round%22/%3E%3Cellipse cx=%2256%22 cy=%2246%22 rx=%2214%22 ry=%2210%22 fill=%22%23ffe3c4%22/%3E%3Cpath d=%22M36 38q5 5 10 0M66 38q5 5 10 0%22 fill=%22none%22 stroke=%22%235a3825%22 stroke-width=%223%22 stroke-linecap=%22round%22/%3E%3Cpath d=%22M52 44h8l-4 5z%22 fill=%22%23e8737a%22/%3E%3Cpath d=%22M56 49q-3 5-8 3M56 49q3 5 8 3%22 fill=%22none%22 stroke=%22%235a3825%22 stroke-width=%222%22 stroke-linecap=%22round%22/%3E%3Cpath d=%22M30 46l-14-3M30 50l-14 3M82 46l14-3M82 50l14 3%22 stroke=%22%235a3825%22 stroke-width=%221.6%22 stroke-linecap=%22round%22/%3E%3Cellipse cx=%2238%22 cy=%2286%22 rx=%2212%22 ry=%226%22 fill=%22%23ffe3c4%22/%3E%3Cellipse cx=%2274%22 cy=%2286%22 rx=%2212%22 ry=%226%22 fill=%22%23ffe3c4%22/%3E%3C/svg%3E"); }
html[data-theme="capy"] .topbar::after { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 150 92%22%3E%3Crect x=%2226%22 y=%2266%22 width=%2212%22 height=%2220%22 rx=%225%22 fill=%22%238a5d38%22/%3E%3Crect x=%2250%22 y=%2268%22 width=%2212%22 height=%2218%22 rx=%225%22 fill=%22%237a5130%22/%3E%3Crect x=%2284%22 y=%2268%22 width=%2212%22 height=%2218%22 rx=%225%22 fill=%22%237a5130%22/%3E%3Crect x=%22104%22 y=%2266%22 width=%2212%22 height=%2220%22 rx=%225%22 fill=%22%238a5d38%22/%3E%3Cellipse cx=%2268%22 cy=%2254%22 rx=%2252%22 ry=%2227%22 fill=%22%23b2814f%22/%3E%3Crect x=%22100%22 y=%2232%22 width=%2242%22 height=%2234%22 rx=%2215%22 fill=%22%23bd8c58%22/%3E%3Crect x=%22126%22 y=%2244%22 width=%2218%22 height=%2222%22 rx=%229%22 fill=%22%23a47446%22/%3E%3Cellipse cx=%22134%22 cy=%2248%22 rx=%222.4%22 ry=%221.8%22 fill=%22%233b2a1d%22/%3E%3Ccircle cx=%22113%22 cy=%2246%22 r=%223%22 fill=%22%232b1d12%22/%3E%3Ccircle cx=%22114%22 cy=%2245%22 r=%22.9%22 fill=%22%23fff%22/%3E%3Cellipse cx=%22104%22 cy=%2235%22 rx=%226%22 ry=%224.5%22 fill=%22%238f6038%22/%3E%3Cpath d=%22M118 60q6 3 12 0%22 fill=%22none%22 stroke=%22%236b4527%22 stroke-width=%222%22 stroke-linecap=%22round%22/%3E%3Ccircle cx=%22116%22 cy=%2224%22 r=%2212%22 fill=%22%23ff9f1c%22/%3E%3Ccircle cx=%22112%22 cy=%2220%22 r=%223%22 fill=%22%23ffc25a%22 opacity=%22.8%22/%3E%3Cpath d=%22M116 12q3-8 11-6-2 7-11 6z%22 fill=%22%2358a642%22/%3E%3C/svg%3E"); width: 76px; }
html[data-theme="fairy"] .topbar::after { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 120 90%22%3E%3Cdefs%3E%3ClinearGradient id=%22a%22 x1=%220%22 y1=%220%22 x2=%221%22 y2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%23ff7ad9%22/%3E%3Cstop offset=%221%22 stop-color=%22%237a5cff%22/%3E%3C/linearGradient%3E%3ClinearGradient id=%22b%22 x1=%221%22 y1=%220%22 x2=%220%22 y2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%236ee7ff%22/%3E%3Cstop offset=%221%22 stop-color=%22%23b57bff%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d=%22M60 44C40 10 8 8 6 30c-2 20 28 24 54 14z%22 fill=%22url(%23a)%22 opacity=%22.92%22/%3E%3Cpath d=%22M60 46C44 66 18 82 14 66 10 52 34 44 60 46z%22 fill=%22url(%23b)%22 opacity=%22.9%22/%3E%3Cpath d=%22M60 44C80 10 112 8 114 30c2 20-28 24-54 14z%22 fill=%22url(%23a)%22 opacity=%22.92%22/%3E%3Cpath d=%22M60 46C76 66 102 82 106 66 110 52 86 44 60 46z%22 fill=%22url(%23b)%22 opacity=%22.9%22/%3E%3Cellipse cx=%2260%22 cy=%2248%22 rx=%224%22 ry=%2222%22 fill=%22%23fff4fd%22/%3E%3Cpath d=%22M57 28Q50 14 42 12M63 28Q70 14 78 12%22 fill=%22none%22 stroke=%22%23fff4fd%22 stroke-width=%222%22 stroke-linecap=%22round%22/%3E%3Cpath d=%22M20 22l2 5 5 2-5 2-2 5-2-5-5-2 5-2zM100 60l1.6 4 4 1.6-4 1.6-1.6 4-1.6-4-4-1.6 4-1.6z%22 fill=%22%23fff%22/%3E%3C/svg%3E"); }
.sidebar .spacer { background: no-repeat center bottom 6px / 150px auto; min-height: 90px; }
html[data-theme="cat"] .sidebar .spacer { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 120 92%22%3E%3Cpath d=%22M96 70c14-2 20-14 12-22-5-5-12-2-10 4 2 6 8 4 8 4%22 fill=%22none%22 stroke=%22%23e8894a%22 stroke-width=%227%22 stroke-linecap=%22round%22/%3E%3Cellipse cx=%2256%22 cy=%2266%22 rx=%2242%22 ry=%2222%22 fill=%22%23f6a15a%22/%3E%3Cpath d=%22M34 54c3 10 9 14 22 14s19-4 22-14%22 fill=%22%23ffe3c4%22 opacity=%22.7%22/%3E%3Cpath d=%22M22 28 28 6l16 12zM90 28 84 6 68 18z%22 fill=%22%23f6a15a%22/%3E%3Cpath d=%22M27 22 29 11l8 6zM85 22 83 11l-8 6z%22 fill=%22%23ffb6b0%22/%3E%3Cellipse cx=%2256%22 cy=%2236%22 rx=%2235%22 ry=%2227%22 fill=%22%23f6a15a%22/%3E%3Cpath d=%22M50 14v9M56 12v11M62 14v9%22 stroke=%22%23e8894a%22 stroke-width=%224%22 stroke-linecap=%22round%22/%3E%3Cellipse cx=%2256%22 cy=%2246%22 rx=%2214%22 ry=%2210%22 fill=%22%23ffe3c4%22/%3E%3Cpath d=%22M36 38q5 5 10 0M66 38q5 5 10 0%22 fill=%22none%22 stroke=%22%235a3825%22 stroke-width=%223%22 stroke-linecap=%22round%22/%3E%3Cpath d=%22M52 44h8l-4 5z%22 fill=%22%23e8737a%22/%3E%3Cpath d=%22M56 49q-3 5-8 3M56 49q3 5 8 3%22 fill=%22none%22 stroke=%22%235a3825%22 stroke-width=%222%22 stroke-linecap=%22round%22/%3E%3Cpath d=%22M30 46l-14-3M30 50l-14 3M82 46l14-3M82 50l14 3%22 stroke=%22%235a3825%22 stroke-width=%221.6%22 stroke-linecap=%22round%22/%3E%3Cellipse cx=%2238%22 cy=%2286%22 rx=%2212%22 ry=%226%22 fill=%22%23ffe3c4%22/%3E%3Cellipse cx=%2274%22 cy=%2286%22 rx=%2212%22 ry=%226%22 fill=%22%23ffe3c4%22/%3E%3C/svg%3E"); }
html[data-theme="capy"] .sidebar .spacer { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 150 92%22%3E%3Crect x=%2226%22 y=%2266%22 width=%2212%22 height=%2220%22 rx=%225%22 fill=%22%238a5d38%22/%3E%3Crect x=%2250%22 y=%2268%22 width=%2212%22 height=%2218%22 rx=%225%22 fill=%22%237a5130%22/%3E%3Crect x=%2284%22 y=%2268%22 width=%2212%22 height=%2218%22 rx=%225%22 fill=%22%237a5130%22/%3E%3Crect x=%22104%22 y=%2266%22 width=%2212%22 height=%2220%22 rx=%225%22 fill=%22%238a5d38%22/%3E%3Cellipse cx=%2268%22 cy=%2254%22 rx=%2252%22 ry=%2227%22 fill=%22%23b2814f%22/%3E%3Crect x=%22100%22 y=%2232%22 width=%2242%22 height=%2234%22 rx=%2215%22 fill=%22%23bd8c58%22/%3E%3Crect x=%22126%22 y=%2244%22 width=%2218%22 height=%2222%22 rx=%229%22 fill=%22%23a47446%22/%3E%3Cellipse cx=%22134%22 cy=%2248%22 rx=%222.4%22 ry=%221.8%22 fill=%22%233b2a1d%22/%3E%3Ccircle cx=%22113%22 cy=%2246%22 r=%223%22 fill=%22%232b1d12%22/%3E%3Ccircle cx=%22114%22 cy=%2245%22 r=%22.9%22 fill=%22%23fff%22/%3E%3Cellipse cx=%22104%22 cy=%2235%22 rx=%226%22 ry=%224.5%22 fill=%22%238f6038%22/%3E%3Cpath d=%22M118 60q6 3 12 0%22 fill=%22none%22 stroke=%22%236b4527%22 stroke-width=%222%22 stroke-linecap=%22round%22/%3E%3Ccircle cx=%22116%22 cy=%2224%22 r=%2212%22 fill=%22%23ff9f1c%22/%3E%3Ccircle cx=%22112%22 cy=%2220%22 r=%223%22 fill=%22%23ffc25a%22 opacity=%22.8%22/%3E%3Cpath d=%22M116 12q3-8 11-6-2 7-11 6z%22 fill=%22%2358a642%22/%3E%3C/svg%3E"); }
html[data-theme="fairy"] .sidebar .spacer { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 120 90%22%3E%3Cdefs%3E%3ClinearGradient id=%22a%22 x1=%220%22 y1=%220%22 x2=%221%22 y2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%23ff7ad9%22/%3E%3Cstop offset=%221%22 stop-color=%22%237a5cff%22/%3E%3C/linearGradient%3E%3ClinearGradient id=%22b%22 x1=%221%22 y1=%220%22 x2=%220%22 y2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%236ee7ff%22/%3E%3Cstop offset=%221%22 stop-color=%22%23b57bff%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d=%22M60 44C40 10 8 8 6 30c-2 20 28 24 54 14z%22 fill=%22url(%23a)%22 opacity=%22.92%22/%3E%3Cpath d=%22M60 46C44 66 18 82 14 66 10 52 34 44 60 46z%22 fill=%22url(%23b)%22 opacity=%22.9%22/%3E%3Cpath d=%22M60 44C80 10 112 8 114 30c2 20-28 24-54 14z%22 fill=%22url(%23a)%22 opacity=%22.92%22/%3E%3Cpath d=%22M60 46C76 66 102 82 106 66 110 52 86 44 60 46z%22 fill=%22url(%23b)%22 opacity=%22.9%22/%3E%3Cellipse cx=%2260%22 cy=%2248%22 rx=%224%22 ry=%2222%22 fill=%22%23fff4fd%22/%3E%3Cpath d=%22M57 28Q50 14 42 12M63 28Q70 14 78 12%22 fill=%22none%22 stroke=%22%23fff4fd%22 stroke-width=%222%22 stroke-linecap=%22round%22/%3E%3Cpath d=%22M20 22l2 5 5 2-5 2-2 5-2-5-5-2 5-2zM100 60l1.6 4 4 1.6-4 1.6-1.6 4-1.6-4-4-1.6 4-1.6z%22 fill=%22%23fff%22/%3E%3C/svg%3E"); }

/* ---------- Выбор темы ---------- */
.theme-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 12px; }
.theme-card { display: flex; flex-direction: column; gap: 8px; text-align: left; padding: 10px; border-radius: var(--r-md); cursor: pointer;
  border: 2px solid var(--line); background: var(--surface-2); }
.theme-card.on { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.theme-card .sw { display: flex; height: 34px; border-radius: 8px; overflow: hidden; border: 1px solid var(--line); }
.theme-card .sw i { flex: 1; }
.theme-card b { font-size: 14px; }
.theme-card span.sub { font-size: 12px; color: var(--muted); margin-top: -4px; }