:root,
[data-theme="dark"] {
    --bg: #070b10;
    --bg-soft: #0e141c;
    --card: #121a24;
    --line: rgba(255, 255, 255, 0.08);
    --text: #e8eef5;
    --muted: #93a3b5;
    --accent: #00e676;
    --accent-hover: #5dffb0;
    --accent-dim: rgba(0, 230, 118, 0.14);
    --accent-2: #00d9c0;
    --brand-blue: #00bfff;
    --brand-blue-deep: #0072ff;
    --brand-teal: #00d9c0;
    --glass-bg: linear-gradient(90.54deg, rgba(46, 148, 226, 0.2) 0.28%, rgba(46, 148, 226, 0.004) 104.61%);
    --glass-border: rgba(255, 255, 255, 0.1);
    --hero-glow-1: rgba(0, 230, 118, 0.12);
    --hero-glow-2: rgba(0, 217, 192, 0.12);
    --header-bg: rgba(7, 11, 16, 0.82);
    --btn-accent-text: #04140a;
    --theme-color: #070b10;
    --code-bg: #0a1018;
    --radius: 14px;
    --shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
    --form-surface: var(--glass-bg);
    --form-input-bg: rgba(255, 255, 255, 0.03);
    --form-shadow: var(--shadow);
    --wrap: min(1140px, calc(100% - 2rem));
    --font: 'Manrope', system-ui, sans-serif;
    --font-display: 'Montserrat', 'Manrope', sans-serif;
}

[data-theme="light"] {
    --bg: #f4f6f9;
    --bg-soft: #ffffff;
    --card: #ffffff;
    --line: rgba(15, 23, 42, 0.1);
    --text: #0f172a;
    --muted: #64748b;
    --accent: #059669;
    --accent-hover: #047857;
    --accent-dim: rgba(5, 150, 105, 0.12);
    --accent-2: #0891b2;
    --brand-blue: #0099e6;
    --brand-blue-deep: #0066cc;
    --brand-teal: #00c9b0;
    --glass-bg: linear-gradient(90.54deg, rgba(5, 150, 105, 0.08) 0.28%, rgba(5, 150, 105, 0.02) 104.61%);
    --glass-border: rgba(15, 23, 42, 0.08);
    --hero-glow-1: rgba(5, 150, 105, 0.08);
    --hero-glow-2: rgba(8, 145, 178, 0.06);
    --header-bg: rgba(255, 255, 255, 0.88);
    --btn-accent-text: #ffffff;
    --theme-color: #f4f6f9;
    --code-bg: #1e293b;
    --shadow: 0 18px 50px rgba(15, 23, 42, 0.08);
    --form-surface: linear-gradient(165deg, #f8fafc 0%, #eef2f6 100%);
    --form-input-bg: rgba(255, 255, 255, 0.92);
    --form-shadow:
        0 1px 0 rgba(255, 255, 255, 0.9) inset,
        0 1px 3px rgba(15, 23, 42, 0.05),
        0 14px 36px rgba(15, 23, 42, 0.08);
}

[data-theme="brand"] {
    --bg: #f0faf4;
    --bg-soft: #ffffff;
    --card: #ffffff;
    --line: rgba(0, 120, 60, 0.12);
    --text: #0a2e1a;
    --muted: #4a7c5c;
    --accent: #00c853;
    --accent-hover: #00a844;
    --accent-dim: rgba(0, 200, 83, 0.15);
    --accent-2: #00bfa5;
    --brand-blue: #0099e6;
    --brand-blue-deep: #0066cc;
    --brand-teal: #00c9b0;
    --glass-bg: linear-gradient(90.54deg, rgba(0, 200, 83, 0.14) 0.28%, rgba(0, 200, 83, 0.03) 104.61%);
    --glass-border: rgba(0, 200, 83, 0.2);
    --hero-glow-1: rgba(0, 200, 83, 0.15);
    --hero-glow-2: rgba(0, 191, 165, 0.1);
    --header-bg: rgba(240, 250, 244, 0.92);
    --btn-accent-text: #ffffff;
    --theme-color: #f0faf4;
    --code-bg: #0a2e1a;
    --shadow: 0 18px 50px rgba(0, 120, 60, 0.1);
    --form-surface: linear-gradient(165deg, #f6fcf8 0%, #eaf5ee 100%);
    --form-input-bg: rgba(255, 255, 255, 0.94);
    --form-shadow:
        0 1px 0 rgba(255, 255, 255, 0.9) inset,
        0 1px 3px rgba(0, 120, 60, 0.06),
        0 14px 36px rgba(0, 120, 60, 0.1);
}

*, *::before, *::after { box-sizing: border-box; }
html {
    scroll-behavior: smooth;
    color-scheme: dark;
}
html[data-theme="light"],
html[data-theme="brand"] {
    color-scheme: light;
}
body {
    margin: 0;
    font-family: var(--font);
    background: var(--bg);
    color: var(--text);
    line-height: 1.55;
    transition: background 0.25s ease, color 0.25s ease;
}
img { max-width: 100%; display: block; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }

.wrap { width: var(--wrap); margin-inline: auto; }
.narrow { max-width: 720px; }
.center { text-align: center; }

/* Скрыт на десктопе; показывается в layout.css @media (max-width: 768px) */
.nav-mobile-actions {
    display: none !important;
}

.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); border: 0;
}
