/* ==========================================================================
   ИГРАЙ — ВИД (29.09.2026): тон светлой (тёплая gruvbox / чистая) и акцентный цвет.
   Переключатели — вверху профиля (STAS // K). Грузится после theme-light.css.
   Файл сгенерирован: акценты = {dark, gruvbox, clean} на пять цветов.
   ========================================================================== */

/* ── светлая · «чистая»: холодная белая бумага, плоско, те же правила без теней ── */
html[data-theme="light"][data-light="clean"] {
    --gb-page: #eceff2;
    --bg-dark: #eceff2; --bg-card: #ffffff; --bg-card-hover: #f4f6f8; --bg-input: #f7f8fa;
    --bg-secondary: #e6e9ed; --bg-elev: #dde1e6; --bg-surface: #e6e9ed; --bg: #ffffff;
    --text-primary: #1c2126; --text: #1c2126; --text-secondary: #454e58; --text-muted: #5b6570;
    --accent: #b45309; --accent-hover: #d97706; --accent-light: #b45309; --primary: #b45309;
    --accent-rgb: 180, 83, 9; --acc2: #0e7490;
    --border-color: #d9dde2; --border-light: #c5cbd2; --border-warm: #c5cbd2;
    --glass-bg: rgba(28, 33, 38, 0.03); --glass-bg-hover: rgba(28, 33, 38, 0.06);
    --glass-bg-active: rgba(180, 83, 9, 0.12); --glass-border: #d9dde2; --glass-border-light: #e6e9ed;
    --desk-panel: #ffffff; --desk-border: #d9dde2;
    --v-body: #c2410c; --v-breath: #0f766e; --v-relations: #be185d; --v-money: #a16207;
    --v-head: #1d4ed8; --v-voice: #7e22ce; --v-system: #15803d;
    --neon-cyan: #0e7490; --neon-magenta: #be185d; --neon-lime: #0891b2; --gold: #a16207;
    --ds-bg-deep: #f7f8fa; --ds-bg: #eceff2; --ds-bg-elev: #e6e9ed; --ds-chiral: #0e7490;
    --ds-amber: #b45309; --ds-gold-ds: #a16207; --ds-text-warm: #1c2126; --ds-line: #c5cbd2;
    --cal-level-0-bg: #e6e9ed; --cal-level-0-border: #d9dde2;
    --cal-level-1: color-mix(in srgb, #0e7490 25%, #ffffff);
    --cal-level-2: color-mix(in srgb, #0e7490 50%, #ffffff);
    --cal-level-3: #2b8aa6; --cal-level-4: #0e7490;
    --well: #e6e9ed; --well2: #dde1e6; --well3: #e2e5e9;
    --ctl-bg: rgba(28, 33, 38, 0.04); --ctl-bg-hot: rgba(180, 83, 9, 0.14); --ctl-danger: #b91c1c;
    --ink-rgb: 28, 33, 38;
    --cyan: #0e7490; --cyan-rgb: 14, 116, 144; --cyan-hi: #0891b2; --cyan-hi-rgb: 8, 145, 178;
    --amber: #b45309; --amber-rgb: 180, 83, 9; --ds-amber-rgb: 180, 83, 9; --gold-rgb: 161, 98, 7;
    --green-rgb: 21, 128, 61; --mint-rgb: 21, 128, 61; --moss: #4d7c0f; --moss-rgb: 77, 124, 15;
    --lime-rgb: 21, 128, 61; --red: #b91c1c; --red-rgb: 185, 28, 28; --danger-rgb: 185, 28, 28;
    --line-rgb: 150, 158, 168; --violet-rgb: 124, 58, 237;
    --over: #c2410c; --over-rgb: 194, 65, 12; --now-red: #dc2626;
    --amber2: #b45309; --amber3: #c2410c; --yellow: #a16207;
    --bg-rgb: 236, 239, 242; --deep-rgb: 255, 255, 255; --deep0-rgb: 255, 255, 255;
    --input-rgb: 247, 248, 250; --card-rgb: 255, 255, 255; --deep2-rgb: 255, 255, 255;
    --deep3-rgb: 255, 255, 255; --void-rgb: 230, 233, 237;
    --panel1-rgb: 255, 255, 255; --panel2-rgb: 255, 255, 255; --panel3-rgb: 255, 255, 255;
    --panel4-rgb: 246, 247, 249; --panel5-rgb: 246, 247, 249; --surf: 255, 255, 255;
    --snow: #1c2126; --grid-rgb: 170, 178, 188;
    --data-ink-to: #1c2126;
}
html[data-theme="light"][data-light="clean"] .sheet-textarea,
html[data-theme="light"][data-light="clean"] .sheet-time-input,
html[data-theme="light"][data-light="clean"] .lb-input,
html[data-theme="light"][data-light="clean"] .lb-log,
html[data-theme="light"][data-light="clean"] .login-box .input,
html[data-theme="light"][data-light="clean"] .plan-bar { background: #f7f8fa; }
html[data-theme="light"][data-light="clean"] .matrix-viewer-foot { background: #eceff2; }

/* ── акценты ── */

html[data-accent="cyan"] {
    --accent: #5FB4C9; --accent-hover: #5FB4C9; --accent-light: #5FB4C9; --primary: #5FB4C9;
    --accent-rgb: 95, 180, 201; --amber: #5FB4C9; --amber-rgb: 95, 180, 201;
    --ds-amber: #5FB4C9; --ds-amber-rgb: 95, 180, 201; --amber2: #5FB4C9; --amber3: #5FB4C9;
    --glass-bg-active: rgba(95, 180, 201, 0.14); --ctl-bg-hot: rgba(95, 180, 201, 0.16);
}

html[data-theme="light"][data-accent="cyan"] {
    --accent: #076678; --accent-hover: #076678; --accent-light: #076678; --primary: #076678;
    --accent-rgb: 7, 102, 120; --amber: #076678; --amber-rgb: 7, 102, 120;
    --ds-amber: #076678; --ds-amber-rgb: 7, 102, 120; --amber2: #076678; --amber3: #076678;
    --glass-bg-active: rgba(7, 102, 120, 0.14); --ctl-bg-hot: rgba(7, 102, 120, 0.16);
}

html[data-theme="light"][data-light="clean"][data-accent="cyan"] {
    --accent: #0e7490; --accent-hover: #0e7490; --accent-light: #0e7490; --primary: #0e7490;
    --accent-rgb: 14, 116, 144; --amber: #0e7490; --amber-rgb: 14, 116, 144;
    --ds-amber: #0e7490; --ds-amber-rgb: 14, 116, 144; --amber2: #0e7490; --amber3: #0e7490;
    --glass-bg-active: rgba(14, 116, 144, 0.14); --ctl-bg-hot: rgba(14, 116, 144, 0.16);
}

html[data-accent="green"] {
    --accent: #7DCB8E; --accent-hover: #7DCB8E; --accent-light: #7DCB8E; --primary: #7DCB8E;
    --accent-rgb: 125, 203, 142; --amber: #7DCB8E; --amber-rgb: 125, 203, 142;
    --ds-amber: #7DCB8E; --ds-amber-rgb: 125, 203, 142; --amber2: #7DCB8E; --amber3: #7DCB8E;
    --glass-bg-active: rgba(125, 203, 142, 0.14); --ctl-bg-hot: rgba(125, 203, 142, 0.16);
}

html[data-theme="light"][data-accent="green"] {
    --accent: #79740e; --accent-hover: #79740e; --accent-light: #79740e; --primary: #79740e;
    --accent-rgb: 121, 116, 14; --amber: #79740e; --amber-rgb: 121, 116, 14;
    --ds-amber: #79740e; --ds-amber-rgb: 121, 116, 14; --amber2: #79740e; --amber3: #79740e;
    --glass-bg-active: rgba(121, 116, 14, 0.14); --ctl-bg-hot: rgba(121, 116, 14, 0.16);
}

html[data-theme="light"][data-light="clean"][data-accent="green"] {
    --accent: #15803d; --accent-hover: #15803d; --accent-light: #15803d; --primary: #15803d;
    --accent-rgb: 21, 128, 61; --amber: #15803d; --amber-rgb: 21, 128, 61;
    --ds-amber: #15803d; --ds-amber-rgb: 21, 128, 61; --amber2: #15803d; --amber3: #15803d;
    --glass-bg-active: rgba(21, 128, 61, 0.14); --ctl-bg-hot: rgba(21, 128, 61, 0.16);
}

html[data-accent="violet"] {
    --accent: #B07ED4; --accent-hover: #B07ED4; --accent-light: #B07ED4; --primary: #B07ED4;
    --accent-rgb: 176, 126, 212; --amber: #B07ED4; --amber-rgb: 176, 126, 212;
    --ds-amber: #B07ED4; --ds-amber-rgb: 176, 126, 212; --amber2: #B07ED4; --amber3: #B07ED4;
    --glass-bg-active: rgba(176, 126, 212, 0.14); --ctl-bg-hot: rgba(176, 126, 212, 0.16);
}

html[data-theme="light"][data-accent="violet"] {
    --accent: #8f3f71; --accent-hover: #8f3f71; --accent-light: #8f3f71; --primary: #8f3f71;
    --accent-rgb: 143, 63, 113; --amber: #8f3f71; --amber-rgb: 143, 63, 113;
    --ds-amber: #8f3f71; --ds-amber-rgb: 143, 63, 113; --amber2: #8f3f71; --amber3: #8f3f71;
    --glass-bg-active: rgba(143, 63, 113, 0.14); --ctl-bg-hot: rgba(143, 63, 113, 0.16);
}

html[data-theme="light"][data-light="clean"][data-accent="violet"] {
    --accent: #7c3aed; --accent-hover: #7c3aed; --accent-light: #7c3aed; --primary: #7c3aed;
    --accent-rgb: 124, 58, 237; --amber: #7c3aed; --amber-rgb: 124, 58, 237;
    --ds-amber: #7c3aed; --ds-amber-rgb: 124, 58, 237; --amber2: #7c3aed; --amber3: #7c3aed;
    --glass-bg-active: rgba(124, 58, 237, 0.14); --ctl-bg-hot: rgba(124, 58, 237, 0.16);
}

html[data-accent="red"] {
    --accent: #E0725A; --accent-hover: #E0725A; --accent-light: #E0725A; --primary: #E0725A;
    --accent-rgb: 224, 114, 90; --amber: #E0725A; --amber-rgb: 224, 114, 90;
    --ds-amber: #E0725A; --ds-amber-rgb: 224, 114, 90; --amber2: #E0725A; --amber3: #E0725A;
    --glass-bg-active: rgba(224, 114, 90, 0.14); --ctl-bg-hot: rgba(224, 114, 90, 0.16);
}

html[data-theme="light"][data-accent="red"] {
    --accent: #cc241d; --accent-hover: #cc241d; --accent-light: #cc241d; --primary: #cc241d;
    --accent-rgb: 204, 36, 29; --amber: #cc241d; --amber-rgb: 204, 36, 29;
    --ds-amber: #cc241d; --ds-amber-rgb: 204, 36, 29; --amber2: #cc241d; --amber3: #cc241d;
    --glass-bg-active: rgba(204, 36, 29, 0.14); --ctl-bg-hot: rgba(204, 36, 29, 0.16);
}

html[data-theme="light"][data-light="clean"][data-accent="red"] {
    --accent: #b91c1c; --accent-hover: #b91c1c; --accent-light: #b91c1c; --primary: #b91c1c;
    --accent-rgb: 185, 28, 28; --amber: #b91c1c; --amber-rgb: 185, 28, 28;
    --ds-amber: #b91c1c; --ds-amber-rgb: 185, 28, 28; --amber2: #b91c1c; --amber3: #b91c1c;
    --glass-bg-active: rgba(185, 28, 28, 0.14); --ctl-bg-hot: rgba(185, 28, 28, 0.16);
}


/* ── профиль: панель HUD дублирует чипы героя — на этой вкладке её нет ── */
body[data-tab="profile"] .topbar-hud { display: none; }
@media (min-width: 1100px), (orientation: landscape) and (min-width: 700px) and (max-height: 520px) {
    body[data-tab="profile"] .nav.nav-bottom { top: var(--desk-top); }
    body[data-tab="profile"] #view-profile { padding-top: 56px; }
}

/* ── переключатели вида вверху профиля (по мотивам «стеклянных» свитчей гиревой) ── */
.pf-look { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0 0 14px; }
.pf-sw { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px;
    border: 1px solid var(--border-color); background: rgba(var(--ink-rgb), 0.05); }
.pf-sw-b { display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    min-width: 34px; height: 30px; padding: 0 9px; border: 0; border-radius: 999px; cursor: pointer;
    background: transparent; color: var(--text-muted); font: inherit; font-size: 11px; letter-spacing: .4px; }
.pf-sw-b svg { width: 16px; height: 16px; }
.pf-sw-b:hover { color: var(--text-primary); }
.pf-sw-b.on { background: rgba(var(--accent-rgb), 0.16); color: var(--accent); box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.5); }
.pf-sw-c i { width: 14px; height: 14px; border-radius: 50%; background: var(--dot); display: block; }
.pf-sw-c.on { background: transparent; box-shadow: inset 0 0 0 2px var(--dot); }
html:not([data-theme="light"]) .pf-sw-tone { display: none; }

/* ── нижнее меню профиля: те же стеклянные пилюли, но с подписями ── */
.pf-menu { display: flex; flex-wrap: wrap; gap: 2px; padding: 3px; width: fit-content; max-width: 100%;
    border-radius: 999px; border: 1px solid var(--border-color); background: rgba(var(--ink-rgb), 0.05); }
.pf-menu-b { height: 36px; padding: 0 16px; gap: 8px; font-size: 12px; letter-spacing: .5px; color: var(--text-secondary); }
.pf-menu-b b { font-weight: 400; color: var(--accent); }
.pf-menu-b:hover { background: rgba(var(--accent-rgb), 0.10); color: var(--text-primary); }