/* Детские темы оформления. Каждая тема — блок переменных (цвета сайта и плашек,
   см. variables.css и badges.css) и несколько характерных деталей. Тёмные темы
   дополнительно получают data-dark на <html> (users.User.DARK_THEMES) — от него
   зависят CodeMirror, инверсия теории, логотип и т.п. Плашки статусов в шаблонах
   задаются переменными --badge-*, поэтому селектор [style*="--badge-"] находит их все. */

/* ============================== Космос ============================== */
html[data-theme="cosmos"] {
    --color-bg: #070b1f;
    --color-surface: #0f1537;
    --color-header-bg: #0a0f2a;
    --color-header-text: #e6ecff;
    --color-primary: #b388ff;
    --color-accent: #4dd0ff;
    --color-turquoise: #4dd0ff;
    --color-text: #e3e8ff;
    --color-border: #26306a;
    --shadow: 0 6px 24px rgba(0, 0, 0, 0.5);
    --badge-success-bg: rgba(110, 255, 193, 0.10); --badge-success-fg: #6effc1; --badge-success-ring: inset 0 0 0 1px rgba(110, 255, 193, 0.5);
    --badge-warning-bg: rgba(255, 213, 79, 0.10);  --badge-warning-fg: #ffd54f; --badge-warning-ring: inset 0 0 0 1px rgba(255, 213, 79, 0.5);
    --badge-danger-bg: rgba(255, 112, 150, 0.12);  --badge-danger-fg: #ff7096; --badge-danger-ring: inset 0 0 0 1px rgba(255, 112, 150, 0.5);
    --badge-neutral-bg: rgba(179, 136, 255, 0.12); --badge-neutral-fg: #c4b5ff; --badge-neutral-ring: inset 0 0 0 1px rgba(179, 136, 255, 0.4);
    --badge-info-bg: rgba(77, 208, 255, 0.10);     --badge-info-fg: #4dd0ff;    --badge-info-ring: inset 0 0 0 1px rgba(77, 208, 255, 0.5);
}
html[data-theme="cosmos"] body {
    background:
        radial-gradient(1.2px 1.2px at 12% 18%, #fff, transparent 60%),
        radial-gradient(1px 1px at 28% 72%, #cfd8ff, transparent 60%),
        radial-gradient(1.4px 1.4px at 46% 34%, #fff, transparent 60%),
        radial-gradient(1px 1px at 63% 82%, #fff, transparent 60%),
        radial-gradient(1.3px 1.3px at 77% 12%, #e0d4ff, transparent 60%),
        radial-gradient(1px 1px at 88% 56%, #fff, transparent 60%),
        radial-gradient(1px 1px at 5% 92%, #fff, transparent 60%),
        radial-gradient(900px 500px at 85% 0%, rgba(179, 136, 255, 0.16), transparent 60%),
        radial-gradient(800px 500px at 0% 100%, rgba(77, 208, 255, 0.12), transparent 60%),
        var(--color-bg);
    background-size: 400px 400px, 300px 300px, 500px 500px, 350px 350px, 450px 450px, 380px 380px, 420px 420px, auto, auto, auto;
    background-attachment: fixed;
}
html[data-theme="cosmos"] .main-header {
    border-bottom: 1px solid rgba(179, 136, 255, 0.45);
    box-shadow: 0 0 18px rgba(179, 136, 255, 0.25);
}
html[data-theme="cosmos"] .main-header ul li a.active {
    background-color: rgba(179, 136, 255, 0.16);
    box-shadow: inset 0 0 0 1px rgba(179, 136, 255, 0.55);
}
html[data-theme="cosmos"] .card {
    background-color: rgba(15, 21, 55, 0.92);
    border-color: rgba(120, 140, 255, 0.25);
}
html[data-theme="cosmos"] h1,
html[data-theme="cosmos"] h2 { text-shadow: 0 0 14px rgba(179, 136, 255, 0.45); }
html[data-theme="cosmos"] .btn-primary {
    background: linear-gradient(135deg, #8e5cff, #3f8cff);
    box-shadow: 0 0 14px rgba(142, 92, 255, 0.55);
}
html[data-theme="cosmos"] .btn-secondary {
    background: transparent;
    color: #4dd0ff;
    box-shadow: inset 0 0 0 1px rgba(77, 208, 255, 0.7);
}
html[data-theme="cosmos"] .medal-badge { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.15), 0 0 16px rgba(179, 136, 255, 0.6); }
html[data-theme="cosmos"] .cm-s-monokai.CodeMirror,
html[data-theme="cosmos"] .cm-s-monokai .CodeMirror-gutters { background: #0b1030 !important; }

/* ============================== Пиксели ============================== */
html[data-theme="pixel"] {
    --color-bg: #262626;
    --color-surface: #3a3a3a;
    --color-header-bg: #5a8f2c;
    --color-header-text: #ffffff;
    --color-primary: #7ccf3c;
    --color-accent: #4ee6e6;
    --color-turquoise: #4ee6e6;
    --color-text: #f0f0f0;
    --color-border: #1c1c1c;
    --radius-sm: 0;
    --radius-md: 0;
    --radius-lg: 0;
    --shadow: none;
    --badge-success-bg: #1d4d22; --badge-success-fg: #5dff6b; --badge-success-ring: inset -2px -2px 0 rgba(0, 0, 0, 0.45), inset 2px 2px 0 rgba(255, 255, 255, 0.18);
    --badge-warning-bg: #5c4a00; --badge-warning-fg: #fcdb05; --badge-warning-ring: inset -2px -2px 0 rgba(0, 0, 0, 0.45), inset 2px 2px 0 rgba(255, 255, 255, 0.18);
    --badge-danger-bg: #5a1414;  --badge-danger-fg: #ff5c5c;  --badge-danger-ring: inset -2px -2px 0 rgba(0, 0, 0, 0.45), inset 2px 2px 0 rgba(255, 255, 255, 0.18);
    --badge-neutral-bg: #555555; --badge-neutral-fg: #d6d6d6; --badge-neutral-ring: inset -2px -2px 0 rgba(0, 0, 0, 0.45), inset 2px 2px 0 rgba(255, 255, 255, 0.18);
    --badge-info-bg: #0f4c4c;    --badge-info-fg: #4ee6e6;    --badge-info-ring: inset -2px -2px 0 rgba(0, 0, 0, 0.45), inset 2px 2px 0 rgba(255, 255, 255, 0.18);
}
html[data-theme="pixel"] body {
    background:
        repeating-conic-gradient(#2a2a2a 0% 25%, #242424 0% 50%) 0 0 / 16px 16px;
}
html[data-theme="pixel"] h1,
html[data-theme="pixel"] h2,
html[data-theme="pixel"] h3 {
    font-family: 'Press Start 2P', var(--font-family-base);
    font-weight: 400 !important;
    line-height: 1.5;
    letter-spacing: 0;
    text-shadow: 3px 3px 0 #000;
}
html[data-theme="pixel"] h1 { font-size: 1.15rem !important; }
html[data-theme="pixel"] h2 { font-size: 0.95rem !important; }
html[data-theme="pixel"] h3 { font-size: 0.8rem !important; }
/* Шапка — трава, под ней полоса земли */
html[data-theme="pixel"] .main-header {
    border-bottom: 10px solid #7a5230;
    box-shadow: inset 0 -6px 0 #4a8a1f, 0 4px 0 #3e2a17;
}
html[data-theme="pixel"] .main-header ul li a.active {
    background: #3e6f1c;
    box-shadow: inset -3px -3px 0 rgba(0, 0, 0, 0.35), inset 3px 3px 0 rgba(255, 255, 255, 0.25);
}
html[data-theme="pixel"] .card {
    border: 3px solid #1c1c1c;
    box-shadow: inset -4px -4px 0 rgba(0, 0, 0, 0.35), inset 4px 4px 0 rgba(255, 255, 255, 0.08);
}
/* Кнопки — блоки: трава (основная), камень (второстепенная) */
html[data-theme="pixel"] .btn {
    border-radius: 0;
    border: 2px solid #111 !important;
    text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.6);
    box-shadow: inset -3px -3px 0 rgba(0, 0, 0, 0.35), inset 3px 3px 0 rgba(255, 255, 255, 0.3);
}
html[data-theme="pixel"] .btn:active { box-shadow: inset 3px 3px 0 rgba(0, 0, 0, 0.35); }
html[data-theme="pixel"] .btn-primary { background: #5a8f2c; color: #fff; }
html[data-theme="pixel"] .btn-secondary { background: #7d7d7d; color: #fff; }
html[data-theme="pixel"] .form-control,
html[data-theme="pixel"] input,
html[data-theme="pixel"] select,
html[data-theme="pixel"] textarea {
    border-radius: 0 !important;
    background-color: #1e1e1e;
    color: #f0f0f0;
}
/* Плашки — как ячейки инвентаря: квадратные, с объёмом */
html[data-theme="pixel"] [style*="--badge-"] { border-radius: 0 !important; }
html[data-theme="pixel"] .medal-badge { border-radius: 0; }
html[data-theme="pixel"] .cm-s-monokai.CodeMirror,
html[data-theme="pixel"] .cm-s-monokai .CodeMirror-gutters { background: #1e1e1e !important; }

/* ============================== Хакер ============================== */
html[data-theme="hacker"] {
    --color-bg: #000000;
    --color-surface: #030c03;
    --color-header-bg: #000000;
    --color-header-text: #39ff14;
    --color-primary: #39ff14;
    --color-accent: #00e5ff;
    --color-turquoise: #00e5ff;
    --color-text: #b6ffb0;
    --color-border: #0f4a0f;
    --font-family-base: 'JetBrains Mono', 'Fira Code', 'DejaVu Sans Mono', ui-monospace, monospace;
    --shadow: 0 0 0 1px rgba(57, 255, 20, 0.12);
    --badge-success-bg: rgba(57, 255, 20, 0.08); --badge-success-fg: #39ff14; --badge-success-ring: inset 0 0 0 1px #39ff14;
    --badge-warning-bg: rgba(255, 230, 0, 0.08); --badge-warning-fg: #ffe600; --badge-warning-ring: inset 0 0 0 1px #ffe600;
    --badge-danger-bg: rgba(255, 51, 51, 0.10);  --badge-danger-fg: #ff3333; --badge-danger-ring: inset 0 0 0 1px #ff3333;
    --badge-neutral-bg: rgba(57, 255, 20, 0.04); --badge-neutral-fg: #7fbf7a; --badge-neutral-ring: inset 0 0 0 1px #2e6b2a;
    --badge-info-bg: rgba(0, 229, 255, 0.08);    --badge-info-fg: #00e5ff;    --badge-info-ring: inset 0 0 0 1px #00e5ff;
}
html[data-theme="hacker"] body {
    background:
        repeating-linear-gradient(0deg, rgba(57, 255, 20, 0.035) 0 1px, transparent 1px 3px),
        var(--color-bg);
}
html[data-theme="hacker"] h1,
html[data-theme="hacker"] h2,
html[data-theme="hacker"] h3 {
    color: #39ff14 !important;
    text-shadow: 0 0 8px rgba(57, 255, 20, 0.6);
}
html[data-theme="hacker"] h1::before,
html[data-theme="hacker"] h2::before { content: '> '; opacity: 0.7; }
html[data-theme="hacker"] .main-header { border-bottom: 1px solid #39ff14; box-shadow: 0 0 12px rgba(57, 255, 20, 0.35); }
html[data-theme="hacker"] .main-header ul li a.active { background: transparent; box-shadow: none; text-decoration: underline; text-underline-offset: 6px; }
html[data-theme="hacker"] .main-header ul li a:hover { background: rgba(57, 255, 20, 0.1); color: #39ff14; }
/* Мигающий курсор — только у логотипа */
html[data-theme="hacker"] .logo { position: relative; }
html[data-theme="hacker"] .logo::after {
    content: '_';
    position: absolute;
    right: -0.9em;
    bottom: 0;
    color: #39ff14;
    font-weight: bold;
    font-size: 1.4rem;
    animation: hacker-blink 1s steps(1) infinite;
}
@keyframes hacker-blink { 50% { opacity: 0; } }
html[data-theme="hacker"] .logo-dark-desktop,
html[data-theme="hacker"] .logo-dark-mobile {
    filter: invert(60%) sepia(100%) saturate(1500%) hue-rotate(75deg) brightness(110%);
}
html[data-theme="hacker"] .card { border-color: #0f4a0f; }
/* Кнопки — как команды в квадратных скобках */
html[data-theme="hacker"] .btn {
    border-radius: 0;
    background: transparent !important;
    color: #39ff14 !important;
    box-shadow: inset 0 0 0 1px #39ff14;
}
html[data-theme="hacker"] .btn::before { content: '[ '; }
html[data-theme="hacker"] .btn::after { content: ' ]'; }
html[data-theme="hacker"] .btn:hover { background: #39ff14 !important; color: #000 !important; }
html[data-theme="hacker"] .btn-danger { color: #ff3333 !important; box-shadow: inset 0 0 0 1px #ff3333; }
html[data-theme="hacker"] .form-control,
html[data-theme="hacker"] input,
html[data-theme="hacker"] select,
html[data-theme="hacker"] textarea {
    border-radius: 0 !important;
    background: #000;
    color: #39ff14;
    caret-color: #39ff14;
}
html[data-theme="hacker"] [style*="--badge-"] { border-radius: 0 !important; }
html[data-theme="hacker"] .cm-s-monokai.CodeMirror,
html[data-theme="hacker"] .cm-s-monokai .CodeMirror-gutters { background: #000 !important; }
html[data-theme="hacker"] .cm-s-monokai.CodeMirror { color: #39ff14; }

/* ============================== Океан ============================== */
html[data-theme="ocean"] {
    --color-bg: #e4f6fb;
    --color-surface: #ffffff;
    --color-header-bg: #0277bd;
    --color-header-text: #ffffff;
    --color-primary: #0277bd;
    --color-accent: #00bfa5;
    --color-turquoise: #00a99a;
    --color-text: #0b2a3c;
    --color-border: #b6e3ef;
    --shadow: 0 6px 20px rgba(2, 119, 189, 0.10);
    --badge-success-bg: #dff7f1; --badge-success-fg: #00796b; --badge-success-ring: inset 0 0 0 1px rgba(0, 150, 136, 0.35);
    --badge-warning-bg: #fff4d6; --badge-warning-fg: #a86b00; --badge-warning-ring: inset 0 0 0 1px rgba(255, 179, 0, 0.45);
    --badge-danger-bg: #ffe6e6;  --badge-danger-fg: #c62828;  --badge-danger-ring: inset 0 0 0 1px rgba(229, 57, 53, 0.35);
    --badge-neutral-bg: #eaf4f8; --badge-neutral-fg: #4f6f80; --badge-neutral-ring: inset 0 0 0 1px rgba(79, 111, 128, 0.25);
    --badge-info-bg: #e1f2fd;    --badge-info-fg: #0277bd;    --badge-info-ring: inset 0 0 0 1px rgba(2, 119, 189, 0.35);
}
html[data-theme="ocean"] body {
    background: linear-gradient(180deg, #e9f8fc 0%, #d4f0f8 100%) fixed;
}
html[data-theme="ocean"] .main-header {
    position: relative;
    background: linear-gradient(90deg, #01579b, #0288d1 55%, #00acc1);
    border-bottom: none;
    margin-bottom: 18px;
}
/* Волна вдоль низа шапки */
html[data-theme="ocean"] .main-header::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -18px;
    height: 18px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 18' preserveAspectRatio='none'%3E%3Cpath d='M0 0 H120 V6 C100 18 80 18 60 8 C40 -2 20 -2 0 8 Z' fill='%230288d1'/%3E%3C/svg%3E") repeat-x;
    background-size: 120px 18px;
    pointer-events: none;
}
html[data-theme="ocean"] .main-header ul li a.active { background: rgba(255, 255, 255, 0.22); }
/* Плашки — пузыри */
html[data-theme="ocean"] [style*="--badge-"] {
    border-radius: 999px !important;
    background-image: radial-gradient(circle at 28% 28%, rgba(255, 255, 255, 0.85), transparent 45%);
}
html[data-theme="ocean"] .btn-primary { background: linear-gradient(135deg, #0288d1, #00acc1); }
html[data-theme="ocean"] .btn-secondary { background: #00bfa5; }

/* ============================== Конфетная ============================== */
html[data-theme="candy"] {
    --color-bg: #fff4fa;
    --color-surface: #ffffff;
    --color-header-bg: #ffd3ea;
    --color-header-text: #6b2c5a;
    --color-primary: #ff4f9a;
    --color-accent: #3ccfb8;
    --color-turquoise: #3ccfb8;
    --color-text: #4a2340;
    --color-border: #ffd1e8;
    --radius-md: 16px;
    --radius-lg: 22px;
    --shadow: 0 8px 22px rgba(255, 79, 154, 0.12);
    --badge-success-bg: #dcfbf3; --badge-success-fg: #138a72; --badge-success-ring: inset 0 0 0 2px #a5efe0;
    --badge-warning-bg: #fff6cc; --badge-warning-fg: #a07100; --badge-warning-ring: inset 0 0 0 2px #ffe58a;
    --badge-danger-bg: #ffe0ea;  --badge-danger-fg: #d6336c;  --badge-danger-ring: inset 0 0 0 2px #ffb3cc;
    --badge-neutral-bg: #f6eefc; --badge-neutral-fg: #7a5b8f; --badge-neutral-ring: inset 0 0 0 2px #e6d4f5;
    --badge-info-bg: #e3f1ff;    --badge-info-fg: #3b7dd8;    --badge-info-ring: inset 0 0 0 2px #b8d8ff;
}
html[data-theme="candy"] body {
    background:
        radial-gradient(circle at 10% 10%, rgba(255, 214, 236, 0.9), transparent 35%),
        radial-gradient(circle at 90% 20%, rgba(207, 245, 236, 0.9), transparent 35%),
        radial-gradient(circle at 50% 100%, rgba(255, 245, 196, 0.8), transparent 40%),
        var(--color-bg) fixed;
}
html[data-theme="candy"] .main-header { border-bottom: 4px dotted #ff9fc9; box-shadow: none; }
html[data-theme="candy"] .main-header ul li a { border-radius: 999px; }
html[data-theme="candy"] .main-header ul li a.active { background: #ffffff; color: #ff4f9a; box-shadow: 0 3px 0 #ff9fc9; }
html[data-theme="candy"] .card { border: 2px solid #ffe0f0; border-radius: 22px; }
/* Мармеладные кнопки: круглые, глянцевые, с «желейной» тенью */
html[data-theme="candy"] .btn {
    border-radius: 999px;
    position: relative;
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0) 55%) !important;
    box-shadow: 0 4px 0 rgba(0, 0, 0, 0.12), inset 0 -3px 0 rgba(0, 0, 0, 0.08);
    transition: transform 0.12s;
}
html[data-theme="candy"] .btn:hover { transform: translateY(-1px) scale(1.02); opacity: 1; }
html[data-theme="candy"] .btn-primary { background-color: #ff4f9a; }
html[data-theme="candy"] .btn-secondary { background-color: #3ccfb8; }
html[data-theme="candy"] .btn-warning { background-color: #ffb547; }
html[data-theme="candy"] .form-control,
html[data-theme="candy"] input,
html[data-theme="candy"] select,
html[data-theme="candy"] textarea { border-radius: 14px; }
html[data-theme="candy"] [style*="--badge-"] { border-radius: 999px !important; }

/* ============================== Ретро-аркада ============================== */
html[data-theme="retro"] {
    --color-bg: #1a0933;
    --color-surface: #240f44;
    --color-header-bg: #12052a;
    --color-header-text: #fff3d6;
    --color-primary: #ff3cac;
    --color-accent: #ffd319;
    --color-turquoise: #2de2e6;
    --color-text: #f8e8ff;
    --color-border: #4b2387;
    --shadow: 0 6px 22px rgba(0, 0, 0, 0.45);
    --badge-success-bg: rgba(45, 226, 230, 0.12); --badge-success-fg: #2de2e6; --badge-success-ring: inset 0 0 0 1px rgba(45, 226, 230, 0.6);
    --badge-warning-bg: rgba(255, 211, 25, 0.12); --badge-warning-fg: #ffd319; --badge-warning-ring: inset 0 0 0 1px rgba(255, 211, 25, 0.6);
    --badge-danger-bg: rgba(255, 60, 172, 0.14);  --badge-danger-fg: #ff3cac; --badge-danger-ring: inset 0 0 0 1px rgba(255, 60, 172, 0.6);
    --badge-neutral-bg: rgba(181, 140, 255, 0.12); --badge-neutral-fg: #c9b0ff; --badge-neutral-ring: inset 0 0 0 1px rgba(181, 140, 255, 0.45);
    --badge-info-bg: rgba(111, 175, 255, 0.12);   --badge-info-fg: #8fbcff; --badge-info-ring: inset 0 0 0 1px rgba(111, 175, 255, 0.55);
}
/* Небо с закатом у горизонта; пол-сетка — отдельная наклонённая плоскость ниже */
html[data-theme="retro"] body {
    background:
        radial-gradient(ellipse 55% 22% at 50% 58%, rgba(255, 120, 60, 0.38), transparent 70%),
        linear-gradient(180deg, #12052a 0%, #2b0b4d 45%, #3d0f5c 58%, #12052a 58.2%, #0d0420 100%);
    background-attachment: fixed;
}
/* Перспективная сетка: плоскость повёрнута в 3D, линии сходятся к горизонту
   и медленно «едут» на зрителя. Лежит под всем содержимым страницы. */
html[data-theme="retro"] body::before {
    content: '';
    position: fixed;
    left: -60%;
    right: -60%;
    top: 58vh;
    height: 70vh;
    z-index: -1;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255, 60, 172, 0.75) 2px, transparent 2px),
        linear-gradient(90deg, rgba(255, 60, 172, 0.6) 2px, transparent 2px);
    background-size: 70px 70px;
    background-position: 50% 0;
    transform-origin: 50% 0;
    transform: perspective(28vh) rotateX(68deg);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 22%);
    mask-image: linear-gradient(to bottom, transparent 0%, #000 22%);
    filter: drop-shadow(0 0 4px rgba(255, 60, 172, 0.8));
    animation: retro-grid 1.6s linear infinite;
}
/* Линия горизонта */
html[data-theme="retro"] body::after {
    content: '';
    position: fixed;
    left: 0;
    right: 0;
    top: 58vh;
    height: 2px;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, #ff3cac 20%, #ffd319 50%, #ff3cac 80%, transparent);
    box-shadow: 0 0 14px #ff3cac, 0 0 30px rgba(255, 211, 25, 0.6);
}
@keyframes retro-grid {
    from { background-position: 50% 0; }
    to { background-position: 50% 70px; }
}
html[data-theme="retro"] .main-header {
    border-bottom: 3px solid transparent;
    border-image: linear-gradient(90deg, #ffd319, #ff901f, #ff3cac, #8e2de2) 1;
    box-shadow: 0 0 18px rgba(255, 60, 172, 0.35);
}
html[data-theme="retro"] h1,
html[data-theme="retro"] h2 {
    background: linear-gradient(180deg, #fff6c8 0%, #ffd319 45%, #ff901f 55%, #ff3cac 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.5));
    font-style: italic;
}
html[data-theme="retro"] .btn-primary {
    background: linear-gradient(135deg, #ff3cac, #8e2de2);
    box-shadow: 0 0 12px rgba(255, 60, 172, 0.5);
}
html[data-theme="retro"] .btn-secondary {
    background: transparent;
    color: #ffd319;
    box-shadow: inset 0 0 0 2px #ffd319;
}
html[data-theme="retro"] .cm-s-monokai.CodeMirror,
html[data-theme="retro"] .cm-s-monokai .CodeMirror-gutters { background: #1c0838 !important; }

/* ============================== Лес ============================== */
html[data-theme="forest"] {
    --color-bg: #f2ede0;
    --color-surface: #fffdf5;
    --color-header-bg: #2e5d34;
    --color-header-text: #f4f0e1;
    --color-primary: #2e7d32;
    --color-accent: #a1662f;
    --color-turquoise: #6d8f3a;
    --color-text: #2b2a1f;
    --color-border: #ddd2b2;
    --shadow: 0 4px 16px rgba(80, 60, 20, 0.10);
    --badge-success-bg: #e3f1d8; --badge-success-fg: #2e6b1f; --badge-success-ring: inset 0 0 0 1px #b9d9a3;
    --badge-warning-bg: #fbefd2; --badge-warning-fg: #8a5a00; --badge-warning-ring: inset 0 0 0 1px #ecd29a;
    --badge-danger-bg: #f8e1d8;  --badge-danger-fg: #a33b1c;  --badge-danger-ring: inset 0 0 0 1px #e8b8a6;
    --badge-neutral-bg: #efe8d6; --badge-neutral-fg: #6f6550; --badge-neutral-ring: inset 0 0 0 1px #ddd2b2;
    --badge-info-bg: #e2eef0;    --badge-info-fg: #2f6a76;    --badge-info-ring: inset 0 0 0 1px #b9d6dc;
}
html[data-theme="forest"] .main-header { border-bottom: 4px solid #a1662f; }
html[data-theme="forest"] .main-header ul li a.active { background: rgba(255, 255, 255, 0.18); }
/* Листики в уголках карточек */
html[data-theme="forest"] .card { position: relative; }
html[data-theme="forest"] .card::after {
    content: '🍃';
    position: absolute;
    top: -12px;
    right: -6px;
    font-size: 1.15rem;
    transform: rotate(18deg);
    pointer-events: none;
}
/* Деревянные кнопки */
html[data-theme="forest"] .btn-primary {
    background: linear-gradient(180deg, #3d8b40, #2e6b31);
    box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.18);
}
html[data-theme="forest"] .btn-secondary {
    background:
        repeating-linear-gradient(95deg, rgba(0, 0, 0, 0.06) 0 2px, transparent 2px 9px),
        linear-gradient(180deg, #b47c46, #8b5a2b);
    color: #fff8ec;
    box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.2);
}

/* ============================== Высокий контраст ============================== */
html[data-theme="contrast"] {
    --color-bg: #ffffff;
    --color-surface: #ffffff;
    --color-header-bg: #000000;
    --color-header-text: #ffffff;
    --color-primary: #0000cc;
    --color-accent: #000000;
    --color-turquoise: #005a5a;
    --color-text: #000000;
    --color-border: #000000;
    --shadow: none;
    --badge-success-bg: #ffffff; --badge-success-fg: #005a00; --badge-success-ring: inset 0 0 0 2px #005a00;
    --badge-warning-bg: #ffffff; --badge-warning-fg: #7a3d00; --badge-warning-ring: inset 0 0 0 2px #7a3d00;
    --badge-danger-bg: #ffffff;  --badge-danger-fg: #b00000;  --badge-danger-ring: inset 0 0 0 2px #b00000;
    --badge-neutral-bg: #ffffff; --badge-neutral-fg: #000000; --badge-neutral-ring: inset 0 0 0 2px #000000;
    --badge-info-bg: #ffffff;    --badge-info-fg: #0000cc;    --badge-info-ring: inset 0 0 0 2px #0000cc;
}
html[data-theme="contrast"] body { font-size: 1.08rem; }
html[data-theme="contrast"] .card { border: 2px solid #000; }
html[data-theme="contrast"] main a:not(.btn) { text-decoration: underline; text-underline-offset: 3px; }
html[data-theme="contrast"] .btn { border: 2px solid #000 !important; }
html[data-theme="contrast"] .btn-primary { background: #0000cc; color: #fff; }
html[data-theme="contrast"] .btn-secondary { background: #000; color: #fff; }
html[data-theme="contrast"] :focus-visible {
    outline: 3px solid #ff8c00 !important;
    outline-offset: 2px;
}
html[data-theme="contrast"] .form-control,
html[data-theme="contrast"] input,
html[data-theme="contrast"] select,
html[data-theme="contrast"] textarea { border: 2px solid #000 !important; color: #000; background: #fff; }
html[data-theme="contrast"] *::placeholder { color: #555; }
html[data-theme="contrast"] .main-header ul li a.active { background: #fff; color: #000; }
/* Кружки-буквы задач и другие элементы с фоном цвета рамки (здесь — чёрной) */
html[data-theme="contrast"] [style*="background: var(--color-border)"] { color: #fff !important; }

/* ============================== Золотая (награда) ============================== */
html[data-theme="gold"] {
    --color-bg: #0d0b07;
    --color-surface: #17130b;
    --color-header-bg: #0d0b07;
    --color-header-text: #f7e7b4;
    --color-primary: #e9c24a;
    --color-accent: #f7d774;
    --color-turquoise: #d4af37;
    --color-text: #f3e8c8;
    --color-border: #3d321a;
    --shadow: 0 6px 22px rgba(0, 0, 0, 0.55);
    --badge-success-bg: rgba(160, 220, 120, 0.10); --badge-success-fg: #b9e68f; --badge-success-ring: inset 0 0 0 1px rgba(185, 230, 143, 0.45);
    --badge-warning-bg: rgba(233, 194, 74, 0.12);  --badge-warning-fg: #f3d36b; --badge-warning-ring: inset 0 0 0 1px rgba(243, 211, 107, 0.55);
    --badge-danger-bg: rgba(230, 110, 90, 0.12);   --badge-danger-fg: #f08a72; --badge-danger-ring: inset 0 0 0 1px rgba(240, 138, 114, 0.5);
    --badge-neutral-bg: rgba(212, 175, 55, 0.08);  --badge-neutral-fg: #c9b68a; --badge-neutral-ring: inset 0 0 0 1px rgba(212, 175, 55, 0.3);
    --badge-info-bg: rgba(247, 215, 116, 0.10);    --badge-info-fg: #f7d774; --badge-info-ring: inset 0 0 0 1px rgba(247, 215, 116, 0.5);
}
html[data-theme="gold"] body {
    background:
        radial-gradient(900px 500px at 50% -10%, rgba(212, 175, 55, 0.14), transparent 60%),
        var(--color-bg) fixed;
}
html[data-theme="gold"] .main-header {
    border-bottom: 2px solid transparent;
    border-image: linear-gradient(90deg, #8a6408, #f3d36b, #8a6408) 1;
    box-shadow: 0 0 18px rgba(212, 175, 55, 0.25);
}
html[data-theme="gold"] h1,
html[data-theme="gold"] h2 {
    background: linear-gradient(90deg, #b8860b, #f3d36b 40%, #fff1a8 50%, #f3d36b 60%, #b8860b);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gold-text-shift 6s linear infinite;
}
html[data-theme="gold"] .card { border-color: rgba(212, 175, 55, 0.35); }
html[data-theme="gold"] .btn-primary,
html[data-theme="gold"] .btn-secondary {
    background: linear-gradient(135deg, #8a6a12 0%, #d4af37 30%, #fff1a8 50%, #e8c547 65%, #b8860b 100%);
    background-size: 220% 220%;
    color: #2a1d00;
    animation: gold-shift 6s ease-in-out infinite;
    box-shadow: 0 0 12px rgba(212, 175, 55, 0.45);
}
html[data-theme="gold"] .logo-dark-desktop,
html[data-theme="gold"] .logo-dark-mobile {
    filter: invert(70%) sepia(60%) saturate(700%) hue-rotate(5deg) brightness(105%) drop-shadow(0 0 6px rgba(212, 175, 55, 0.6));
}
html[data-theme="gold"] .cm-s-monokai.CodeMirror,
html[data-theme="gold"] .cm-s-monokai .CodeMirror-gutters { background: #15110a !important; }

@media (prefers-reduced-motion: reduce) {
    html[data-theme="retro"] body::before,
    html[data-theme="hacker"] .logo::after,
    html[data-theme="gold"] h1, html[data-theme="gold"] h2,
    html[data-theme="gold"] .btn-primary, html[data-theme="gold"] .btn-secondary { animation: none; }
}