/* ===================================================================
   Modern Design System 2025 — calccalc.ru
   =================================================================== */

:root {
    /* Brand */
    --brand-50:#eef4ff; --brand-100:#dbe6ff; --brand-200:#bccfff;
    --brand-300:#8fadff; --brand-400:#5e83ff; --brand-500:#3b5bf5;
    --brand-600:#2a3fdc; --brand-700:#2331b0; --brand-800:#1f2c8c; --brand-900:#1c2870;
    --accent-400:#ff7eb6; --accent-500:#ff5b8a; --accent-600:#f23b73;
    --violet-500:#8b5cf6; --violet-600:#7c3aed;
    --success:#10b981; --warning:#f59e0b; --error:#ef4444;

    /* Surfaces */
    --bg:#f6f8fc;
    --bg-elevated:#ffffff;
    --surface:rgba(255,255,255,.72);
    --surface-2:rgba(255,255,255,.92);
    --border:rgba(15,23,42,.08);
    --border-strong:rgba(15,23,42,.14);

    /* Text */
    --text:#0f172a;
    --text-muted:#475569;
    --text-soft:#64748b;
    --text-invert:#ffffff;

    /* Gradients */
    --grad-primary:linear-gradient(135deg,#5e83ff 0%,#3b5bf5 50%,#8b5cf6 100%);
    --grad-accent:linear-gradient(135deg,#ff7eb6 0%,#ff5b8a 100%);
    --grad-success:linear-gradient(135deg,#34d399 0%,#10b981 100%);
    --grad-hero:linear-gradient(135deg,#667eea 0%,#764ba2 100%);
    --grad-bg:
        radial-gradient(1200px 600px at 10% -10%, rgba(94,131,255,.18), transparent 60%),
        radial-gradient(900px 500px at 90% 0%, rgba(255,91,138,.10), transparent 55%),
        radial-gradient(800px 400px at 50% 100%, rgba(139,92,246,.08), transparent 60%),
        linear-gradient(180deg,#f6f8fc 0%,#eef2fb 100%);

    /* Radii */
    --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:22px; --r-2xl:28px; --r-full:999px;

    /* Shadows */
    --shadow-xs:0 1px 2px rgba(15,23,42,.06);
    --shadow-sm:0 2px 6px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04);
    --shadow-md:0 8px 24px rgba(15,23,42,.08), 0 2px 6px rgba(15,23,42,.05);
    --shadow-lg:0 20px 40px rgba(15,23,42,.12), 0 6px 14px rgba(15,23,42,.06);
    --shadow-xl:0 30px 60px rgba(15,23,42,.18);
    --shadow-brand:0 10px 30px rgba(59,91,245,.35);
    --ring:0 0 0 4px rgba(59,91,245,.18);

    /* Motion */
    --ease:cubic-bezier(.22,.61,.36,1);
    --ease-spring:cubic-bezier(.34,1.56,.64,1);
    --t-fast:.15s var(--ease);
    --t:.25s var(--ease);
    --t-slow:.45s var(--ease);

    /* Spacing */
    --sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem;
    --sp-5:1.25rem; --sp-6:1.5rem; --sp-8:2rem; --sp-10:2.5rem;
    --sp-12:3rem; --sp-16:4rem; --sp-20:5rem;

    /* Layout */
    --container:1240px;
    --header-h:72px;
}

/* Dark theme */
[data-theme="dark"] {
    --bg:#0a0f1f;
    --bg-elevated:#131a2e;
    --surface:rgba(19,26,46,.72);
    --surface-2:rgba(19,26,46,.92);
    --border:rgba(255,255,255,.08);
    --border-strong:rgba(255,255,255,.16);
    --text:#e6ecf7;
    --text-muted:#aab4cb;
    --text-soft:#8290ad;
    --grad-bg:
        radial-gradient(1200px 600px at 10% -10%, rgba(94,131,255,.22), transparent 60%),
        radial-gradient(900px 500px at 90% 0%, rgba(255,91,138,.12), transparent 55%),
        radial-gradient(800px 400px at 50% 100%, rgba(139,92,246,.14), transparent 60%),
        linear-gradient(180deg,#0a0f1f 0%,#070b18 100%);
    --shadow-xs:0 1px 2px rgba(0,0,0,.3);
    --shadow-sm:0 2px 6px rgba(0,0,0,.3);
    --shadow-md:0 8px 24px rgba(0,0,0,.4);
    --shadow-lg:0 20px 40px rgba(0,0,0,.5);
}

/* ===== Reset ===== */
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
html { font-size:16px; scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
img, svg { max-width:100%; display:block; }
button { font:inherit; cursor:pointer; }
input, select, textarea, button { font-family:inherit; }

body {
    font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
    line-height:1.6;
    color:var(--text);
    background:var(--grad-bg);
    background-attachment:fixed;
    min-height:100vh;
    display:flex;
    flex-direction:column;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    font-feature-settings:"cv11","ss01";
    transition:background-color var(--t-slow), color var(--t);
}

/* ===== Typography ===== */
h1,h2,h3,h4,h5,h6 {
    font-weight:700;
    line-height:1.2;
    letter-spacing:-.02em;
    color:var(--text);
    margin-bottom:var(--sp-4);
}
h1 { font-size:clamp(1.85rem, 2.6vw + 1rem, 2.85rem); font-weight:800; letter-spacing:-.03em; }
h2 { font-size:clamp(1.45rem, 1.4vw + 1rem, 2.05rem); }
h3 { font-size:1.35rem; }
h4 { font-size:1.15rem; }
p { color:var(--text-muted); }

a { color:var(--brand-600); text-decoration:none; transition:color var(--t-fast); }
a:hover { color:var(--brand-700); }
[data-theme="dark"] a { color:var(--brand-300); }
[data-theme="dark"] a:hover { color:var(--brand-200); }

::selection { background:var(--brand-200); color:var(--brand-900); }

/* ===== Layout ===== */
.container {
    max-width:var(--container);
    width:100%;
    margin:0 auto;
    padding:var(--sp-8) var(--sp-6);
    animation:fadeIn .4s var(--ease) both;
}
main.container { flex:1; }

/* ===================================================================
   HEADER
   =================================================================== */
.site-header {
    position:sticky;
    top:0;
    z-index:100;
    background:var(--surface);
    backdrop-filter:saturate(1.6) blur(20px);
    -webkit-backdrop-filter:saturate(1.6) blur(20px);
    border-bottom:1px solid var(--border);
    transition:box-shadow var(--t), background var(--t);
}
.site-header.scrolled { box-shadow:var(--shadow-sm); }

.header-inner {
    max-width:var(--container);
    margin:0 auto;
    padding:0 var(--sp-6);
    height:var(--header-h);
    display:flex;
    align-items:center;
    gap:var(--sp-5);
}

.logo {
    flex-shrink:0;
    display:inline-flex;
    align-items:center;
    gap:10px;
    font-size:1.35rem;
    font-weight:800;
    letter-spacing:-.03em;
    color:var(--text);
    transition:transform var(--t);
}
.logo:hover { transform:scale(1.02); color:var(--text); }
.logo-mark {
    width:36px; height:36px;
    border-radius:10px;
    background:var(--grad-primary);
    display:grid;
    place-items:center;
    color:#fff;
    font-weight:900;
    font-size:18px;
    box-shadow:var(--shadow-brand);
    flex-shrink:0;
}
.logo-text {
    background:var(--grad-primary);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
}

.header-search {
    flex:1;
    max-width:480px;
    margin:0 auto;
}
.search-form {
    position:relative;
    display:flex;
    align-items:center;
    background:var(--bg-elevated);
    border:1.5px solid var(--border-strong);
    border-radius:var(--r-full);
    height:44px;
    transition:all var(--t);
    box-shadow:var(--shadow-xs);
}
.search-form:focus-within {
    border-color:var(--brand-500);
    box-shadow:var(--ring);
}
.search-form svg {
    flex-shrink:0;
    margin-left:14px;
    color:var(--text-soft);
}
.search-form input {
    flex:1;
    height:100%;
    border:0;
    outline:none;
    background:transparent;
    padding:0 14px;
    font-size:.95rem;
    color:var(--text);
    min-width:0;
}
.search-form input::placeholder { color:var(--text-soft); }
.search-form button {
    height:36px;
    margin-right:4px;
    padding:0 18px;
    border:0;
    border-radius:var(--r-full);
    background:var(--grad-primary);
    color:#fff;
    font-weight:600;
    font-size:.88rem;
    transition:filter var(--t), transform var(--t);
}
.search-form button:hover { filter:brightness(1.08); transform:translateY(-1px); }

.header-actions {
    flex-shrink:0;
    display:flex;
    align-items:center;
    gap:var(--sp-3);
}

/* Theme toggle */
.theme-toggle {
    width:42px; height:42px;
    border:1.5px solid var(--border-strong);
    border-radius:var(--r-full);
    background:var(--bg-elevated);
    display:grid;
    place-items:center;
    color:var(--text-muted);
    transition:all var(--t);
}
.theme-toggle:hover {
    border-color:var(--brand-400);
    color:var(--brand-600);
    transform:rotate(15deg);
}
.theme-toggle .sun { display:none; }
.theme-toggle .moon { display:block; }
[data-theme="dark"] .theme-toggle .sun { display:block; }
[data-theme="dark"] .theme-toggle .moon { display:none; }

/* Language switcher */
.lang-switcher { position:relative; }
.lang-trigger {
    display:inline-flex;
    align-items:center;
    gap:6px;
    height:42px;
    padding:0 14px;
    border:1.5px solid var(--border-strong);
    border-radius:var(--r-full);
    background:var(--bg-elevated);
    color:var(--text);
    font-weight:600;
    font-size:.88rem;
    transition:all var(--t);
}
.lang-trigger:hover {
    border-color:var(--brand-400);
    color:var(--brand-600);
}
.lang-trigger svg { transition:transform var(--t); }
.lang-switcher.open .lang-trigger svg { transform:rotate(180deg); }
.lang-menu {
    position:absolute;
    top:calc(100% + 8px);
    right:0;
    min-width:180px;
    background:var(--bg-elevated);
    border:1px solid var(--border-strong);
    border-radius:var(--r-lg);
    box-shadow:var(--shadow-lg);
    padding:6px;
    opacity:0;
    visibility:hidden;
    transform:translateY(-8px) scale(.96);
    transform-origin:top right;
    transition:all var(--t);
    z-index:50;
}
.lang-switcher.open .lang-menu {
    opacity:1;
    visibility:visible;
    transform:translateY(0) scale(1);
}
.lang-menu button {
    display:flex;
    align-items:center;
    gap:10px;
    width:100%;
    padding:9px 12px;
    border:0;
    background:transparent;
    border-radius:var(--r-sm);
    color:var(--text);
    font-size:.92rem;
    font-weight:500;
    text-align:left;
    transition:background var(--t-fast);
}
.lang-menu button:hover { background:var(--brand-50); color:var(--brand-700); }
[data-theme="dark"] .lang-menu button:hover { background:rgba(94,131,255,.15); color:var(--brand-200); }
.lang-menu button.active {
    background:var(--brand-50);
    color:var(--brand-700);
    font-weight:600;
}
[data-theme="dark"] .lang-menu button.active { background:rgba(94,131,255,.2); color:var(--brand-200); }
.lang-menu .flag {
    width:20px; height:20px;
    border-radius:50%;
    background:var(--grad-primary);
    display:grid; place-items:center;
    color:#fff;
    font-size:10px;
    font-weight:700;
    flex-shrink:0;
}

/* Mobile menu button */
.menu-toggle {
    display:none;
    width:42px; height:42px;
    border:1.5px solid var(--border-strong);
    border-radius:var(--r-full);
    background:var(--bg-elevated);
    color:var(--text);
    place-items:center;
    transition:all var(--t);
}
.menu-toggle:hover { border-color:var(--brand-400); color:var(--brand-600); }
.menu-toggle svg { width:20px; height:20px; }
.menu-toggle .icon-close { display:none; }
body.menu-open .menu-toggle .icon-open { display:none; }
body.menu-open .menu-toggle .icon-close { display:block; }

/* Mobile menu — hidden on desktop */
.mobile-menu { display:none; }

/* Header admin link */
.admin-link-pill {
    display:inline-flex;
    align-items:center;
    gap:6px;
    height:42px;
    padding:0 16px;
    border-radius:var(--r-full);
    background:linear-gradient(135deg,#10b981,#059669);
    color:#fff !important;
    font-weight:600;
    font-size:.85rem;
    transition:all var(--t);
    box-shadow:0 4px 14px rgba(16,185,129,.3);
}
.admin-link-pill:hover { transform:translateY(-2px); color:#fff; box-shadow:0 6px 18px rgba(16,185,129,.4); }

/* ===================================================================
   HERO (homepage)
   =================================================================== */
.hero {
    position:relative;
    margin:var(--sp-8) auto var(--sp-10);
    max-width:var(--container);
    padding:var(--sp-12) var(--sp-6);
    text-align:center;
    overflow:hidden;
    border-radius:var(--r-2xl);
    background:
        radial-gradient(circle at 20% 20%, rgba(94,131,255,.25), transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(255,91,138,.20), transparent 50%),
        radial-gradient(circle at 50% 50%, rgba(139,92,246,.15), transparent 60%);
}
.hero::before {
    content:'';
    position:absolute;
    inset:0;
    background-image:
        radial-gradient(circle at 1px 1px, rgba(15,23,42,.08) 1px, transparent 0);
    background-size:32px 32px;
    opacity:.4;
    mask-image:radial-gradient(circle at 50% 50%, black 30%, transparent 70%);
    -webkit-mask-image:radial-gradient(circle at 50% 50%, black 30%, transparent 70%);
}
[data-theme="dark"] .hero::before {
    background-image:radial-gradient(circle at 1px 1px, rgba(255,255,255,.08) 1px, transparent 0);
}

.hero-badge {
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:6px 14px;
    background:var(--surface-2);
    backdrop-filter:blur(10px);
    border:1px solid var(--border);
    border-radius:var(--r-full);
    font-size:.85rem;
    font-weight:500;
    color:var(--text-muted);
    margin-bottom:var(--sp-5);
    position:relative;
    z-index:1;
    animation:slideIn .5s var(--ease) both;
}
.hero-badge .dot {
    width:8px; height:8px; border-radius:50%;
    background:var(--success);
    box-shadow:0 0 0 4px rgba(16,185,129,.2);
    animation:pulse 2s ease-in-out infinite;
}

.hero h1 {
    position:relative; z-index:1;
    font-size:clamp(2.2rem, 4vw + 1rem, 3.75rem);
    font-weight:800;
    letter-spacing:-.04em;
    margin-bottom:var(--sp-5);
    animation:slideIn .5s var(--ease) both;
    animation-delay:.1s;
    opacity:0;
}
.hero h1 .gradient {
    background:var(--grad-primary);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
}
.hero-subtitle {
    position:relative; z-index:1;
    max-width:600px;
    margin:0 auto var(--sp-8);
    font-size:1.1rem;
    color:var(--text-muted);
    animation:slideIn .5s var(--ease) both;
    animation-delay:.2s;
    opacity:0;
}

.hero-search {
    position:relative; z-index:1;
    max-width:580px;
    margin:0 auto;
    animation:slideIn .5s var(--ease) both;
    animation-delay:.3s;
    opacity:0;
}
.hero-search .search-form {
    height:56px;
    box-shadow:var(--shadow-md);
}
.hero-search .search-form input { font-size:1rem; padding:0 16px; }
.hero-search .search-form button {
    height:44px;
    padding:0 24px;
    font-size:.95rem;
}

/* ===================================================================
   SECTION HEADER
   =================================================================== */
.section-header {
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:var(--sp-4);
    margin-bottom:var(--sp-6);
    flex-wrap:wrap;
}
.section-header h2 {
    margin:0;
    font-size:clamp(1.5rem, 1.8vw + 1rem, 2rem);
    font-weight:800;
    letter-spacing:-.02em;
}
.section-header .subtitle {
    color:var(--text-muted);
    font-size:.95rem;
    margin-top:6px;
}

/* ===================================================================
   CATEGORY/CALC GRID — cards
   =================================================================== */
.nav-tree {
    list-style:none;
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
    gap:var(--sp-4);
    padding:0;
    margin:0;
}
.nav-tree > li {
    position:relative;
    background:var(--bg-elevated);
    border:1px solid var(--border);
    border-radius:var(--r-xl);
    padding:var(--sp-5);
    transition:transform var(--t), box-shadow var(--t), border-color var(--t);
    overflow:hidden;
    animation:fadeUp .4s var(--ease) both;
}
.nav-tree > li:hover {
    transform:translateY(-4px);
    box-shadow:var(--shadow-lg);
    border-color:transparent;
}
.nav-tree > li::before {
    content:'';
    position:absolute;
    inset:0;
    border-radius:inherit;
    padding:1.5px;
    background:var(--grad-primary);
    -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite:xor;
    mask-composite:exclude;
    opacity:0;
    transition:opacity var(--t);
    pointer-events:none;
}
.nav-tree > li:hover::before { opacity:1; }

.nav-tree > li > a {
    display:flex;
    align-items:center;
    gap:14px;
    color:var(--text);
    font-weight:600;
    font-size:1.02rem;
    line-height:1.35;
    text-decoration:none;
    transition:color var(--t);
}
.nav-tree > li > a::before {
    content:'';
    flex-shrink:0;
    width:44px; height:44px;
    border-radius:12px;
    background:var(--grad-primary);
    opacity:.12;
    transition:opacity var(--t), transform var(--t);
    background-image:
        linear-gradient(135deg,#5e83ff 0%,#3b5bf5 50%,#8b5cf6 100%),
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23fff' stroke-width='2' viewBox='0 0 24 24'><rect x='4' y='2' width='16' height='20' rx='2'/><path d='M8 6h8M8 10h8M8 14h4'/></svg>");
}
.nav-tree > li:nth-child(3n+2) > a::before {
    background-image:linear-gradient(135deg,#ff7eb6 0%,#ff5b8a 100%);
}
.nav-tree > li:nth-child(3n+3) > a::before {
    background-image:linear-gradient(135deg,#34d399 0%,#10b981 100%);
}
.nav-tree > li:nth-child(4n+4) > a::before {
    background-image:linear-gradient(135deg,#fbbf24 0%,#f59e0b 100%);
}
.nav-tree > li:hover > a::before { opacity:.22; transform:scale(1.08); }
.nav-tree > li > a::after {
    content:'→';
    margin-left:auto;
    font-size:1.2rem;
    color:var(--text-soft);
    opacity:.5;
    transition:transform var(--t), opacity var(--t), color var(--t);
}
.nav-tree > li:hover > a::after {
    transform:translateX(4px);
    opacity:1;
    color:var(--brand-600);
}

/* Nested */
.nav-tree ul {
    list-style:none;
    margin-top:var(--sp-3);
    padding-left:var(--sp-4);
    border-left:2px dashed var(--border-strong);
    display:none;
}
.nav-tree > li:hover ul { display:block; }
.nav-tree ul li {
    padding:6px 0;
}
.nav-tree ul a {
    color:var(--text-muted);
    font-size:.9rem;
    font-weight:500;
    text-decoration:none;
}
.nav-tree ul a:hover { color:var(--brand-600); }

/* When inside category (children_list) – same nav-tree styling */
main.container > ul:not(.nav-tree),
.container > ul:not(.nav-tree) {
    list-style:none;
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
    gap:var(--sp-4);
    padding:0;
    margin:var(--sp-6) 0;
}
main.container > ul:not(.nav-tree) > li,
.container > ul:not(.nav-tree) > li {
    background:var(--bg-elevated);
    border:1px solid var(--border);
    border-radius:var(--r-xl);
    padding:var(--sp-5);
    transition:all var(--t);
    position:relative;
}
main.container > ul:not(.nav-tree) > li:hover,
.container > ul:not(.nav-tree) > li:hover {
    transform:translateY(-4px);
    box-shadow:var(--shadow-lg);
    border-color:var(--brand-300);
}
main.container > ul:not(.nav-tree) > li > a,
.container > ul:not(.nav-tree) > li > a {
    display:flex; align-items:center; gap:12px;
    color:var(--text);
    font-weight:600;
    font-size:1rem;
    text-decoration:none;
}
main.container > ul:not(.nav-tree) > li > a::after,
.container > ul:not(.nav-tree) > li > a::after {
    content:'→';
    margin-left:auto;
    color:var(--text-soft);
    opacity:.5;
    transition:all var(--t);
}
main.container > ul:not(.nav-tree) > li:hover > a::after,
.container > ul:not(.nav-tree) > li:hover > a::after {
    transform:translateX(4px); opacity:1; color:var(--brand-600);
}

/* ===================================================================
   BREADCRUMBS
   =================================================================== */
.breadcrumbs ol {
    list-style:none;
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:var(--sp-2);
    padding:8px 14px;
    margin-bottom:var(--sp-6);
    background:var(--surface);
    backdrop-filter:blur(8px);
    border:1px solid var(--border);
    border-radius:var(--r-full);
    font-size:.85rem;
    width:fit-content;
    max-width:100%;
}
.breadcrumbs li {
    display:inline-flex;
    align-items:center;
    gap:var(--sp-2);
    color:var(--text-soft);
}
.breadcrumbs li:not(:last-child)::after {
    content:'›';
    font-weight:500;
    opacity:.5;
}
.breadcrumbs a { color:var(--text-muted); font-weight:500; }
.breadcrumbs a:hover { color:var(--brand-600); }
.breadcrumbs li:last-child span[itemprop="name"] {
    color:var(--text); font-weight:600;
}

/* ===================================================================
   CALCULATOR FORM
   =================================================================== */
.calculator-form,
.calc-card,
form[id*="calc"]:not(#search-form):not(.search-form),
form[class*="calc"]:not(#search-form):not(.search-form) {
    background:var(--bg-elevated);
    border:1px solid var(--border);
    border-radius:var(--r-xl);
    padding:clamp(var(--sp-5), 4vw, var(--sp-8));
    margin:var(--sp-6) 0;
    box-shadow:var(--shadow-sm);
    transition:box-shadow var(--t);
}
.calculator-form:hover { box-shadow:var(--shadow-md); }
.calculator-form > div { margin-bottom:var(--sp-5); }
.calculator-form label {
    display:block;
    margin-bottom:var(--sp-2);
    font-weight:600;
    font-size:.9rem;
    color:var(--text);
}

.calculator-form input[type="text"],
.calculator-form input[type="number"],
.calculator-form input[inputmode="decimal"],
.calculator-form input[type="email"],
.calculator-form input[type="tel"],
.calculator-form input[type="date"],
.calculator-form input[type="datetime-local"],
.calculator-form select,
.calculator-form textarea,
.container input[type="number"],
.container select:not(#lang-select),
.container textarea {
    width:100%;
    padding:12px 16px;
    border:1.5px solid var(--border-strong);
    border-radius:var(--r-md);
    background:var(--bg-elevated);
    color:var(--text);
    font-size:1rem;
    transition:all var(--t);
    outline:none;
}
.calculator-form input:hover,
.calculator-form select:hover,
.calculator-form textarea:hover { border-color:var(--brand-400); }
.calculator-form input:focus,
.calculator-form select:focus,
.calculator-form textarea:focus {
    border-color:var(--brand-500);
    box-shadow:var(--ring);
}

/* Buttons */
.calculator-form button,
button[type="submit"]:not(.search-form button):not(.cookie-accept-btn),
.btn {
    background:var(--grad-primary);
    color:#fff;
    border:0;
    padding:13px 28px;
    border-radius:var(--r-md);
    font-size:1rem;
    font-weight:600;
    letter-spacing:.01em;
    transition:all var(--t);
    box-shadow:var(--shadow-brand);
    position:relative;
    overflow:hidden;
}
.calculator-form button:hover,
.btn:hover {
    transform:translateY(-2px);
    box-shadow:0 12px 28px rgba(59,91,245,.45);
}
.calculator-form button:active,
.btn:active { transform:translateY(0); }

/* Results */
#result {
    margin-top:var(--sp-6);
    padding:var(--sp-5) var(--sp-6);
    border-radius:var(--r-lg);
    background:linear-gradient(135deg, rgba(59,91,245,.08), rgba(139,92,246,.08));
    border:1px solid rgba(59,91,245,.2);
    color:var(--brand-800);
    font-weight:600;
    font-size:1.05rem;
    animation:slideIn .3s var(--ease);
}
[data-theme="dark"] #result { color:var(--brand-200); }

#error-message {
    margin-top:var(--sp-6);
    padding:var(--sp-5) var(--sp-6);
    border-radius:var(--r-lg);
    background:linear-gradient(135deg, rgba(239,68,68,.08), rgba(239,68,68,.12));
    border:1px solid rgba(239,68,68,.3);
    color:var(--error);
    font-weight:600;
    animation:slideIn .3s var(--ease);
}

/* Content blocks */
.content-top, .content-bottom {
    background:var(--bg-elevated);
    border:1px solid var(--border);
    border-radius:var(--r-xl);
    padding:clamp(var(--sp-5), 3vw, var(--sp-8));
    margin:var(--sp-6) 0;
    box-shadow:var(--shadow-xs);
}
.content-top h2, .content-top h3,
.content-bottom h2, .content-bottom h3 { margin-top:var(--sp-6); color:var(--text); }
.content-top h2:first-child, .content-bottom h2:first-child,
.content-top h3:first-child, .content-bottom h3:first-child { margin-top:0; }
.content-top p, .content-bottom p { margin-bottom:var(--sp-3); color:var(--text-muted); }
.content-top ul, .content-bottom ul { padding-left:var(--sp-6); margin:var(--sp-3) 0; }
.content-top li, .content-bottom li { color:var(--text-muted); margin-bottom:var(--sp-2); }

/* ===================================================================
   FOOTER
   =================================================================== */
.site-footer {
    margin-top:var(--sp-12);
    padding:var(--sp-10) var(--sp-6) var(--sp-6);
    background:var(--surface);
    backdrop-filter:blur(10px);
    border-top:1px solid var(--border);
}
.footer-inner {
    max-width:var(--container);
    margin:0 auto;
}
.footer-top {
    display:grid;
    grid-template-columns:1.4fr 1fr 1fr;
    gap:var(--sp-8);
    margin-bottom:var(--sp-8);
    padding-bottom:var(--sp-6);
    border-bottom:1px solid var(--border);
}
.footer-brand .logo { font-size:1.5rem; margin-bottom:var(--sp-3); }
.footer-brand p {
    color:var(--text-muted);
    font-size:.92rem;
    max-width:340px;
}
.footer-col h4 {
    font-size:.85rem;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.08em;
    color:var(--text);
    margin-bottom:var(--sp-4);
}
.footer-col ul { list-style:none; padding:0; }
.footer-col li { margin-bottom:10px; }
.footer-col a {
    color:var(--text-muted);
    font-size:.92rem;
    transition:color var(--t-fast);
}
.footer-col a:hover { color:var(--brand-600); }
[data-theme="dark"] .footer-col a:hover { color:var(--brand-300); }

.footer-bottom {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:var(--sp-4);
    flex-wrap:wrap;
    color:var(--text-soft);
    font-size:.85rem;
}
.footer-disclaimer {
    color:var(--text-soft);
    font-size:.82rem;
    text-align:center;
    padding-top:var(--sp-4);
    margin-top:var(--sp-4);
    border-top:1px solid var(--border);
    line-height:1.6;
}

/* ===================================================================
   COOKIE BANNER
   =================================================================== */
.cookie-consent-banner {
    position:fixed;
    bottom:20px;
    left:50%;
    transform:translateX(-50%);
    width:calc(100% - 40px);
    max-width:720px;
    background:var(--bg-elevated);
    color:var(--text);
    padding:var(--sp-4) var(--sp-5);
    z-index:200;
    border:1px solid var(--border-strong);
    border-radius:var(--r-xl);
    box-shadow:var(--shadow-xl);
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:var(--sp-4);
    flex-wrap:wrap;
    animation:slideUp .4s var(--ease);
}
.cookie-consent-text {
    margin:0;
    color:var(--text-muted);
    font-size:.9rem;
    flex:1;
    min-width:240px;
}
.cookie-consent-text a { color:var(--brand-600); font-weight:500; }
.cookie-accept-btn {
    background:var(--grad-primary);
    color:#fff;
    border:0;
    padding:10px 22px;
    border-radius:var(--r-full);
    font-weight:600;
    transition:all var(--t);
    box-shadow:var(--shadow-brand);
    flex-shrink:0;
}
.cookie-accept-btn:hover { transform:translateY(-1px); box-shadow:0 8px 20px rgba(59,91,245,.45); }

/* ===================================================================
   PRIVACY POLICY
   =================================================================== */
.privacy-policy {
    max-width:820px;
    margin:0 auto;
    padding:clamp(var(--sp-6), 4vw, var(--sp-10));
    background:var(--bg-elevated);
    border:1px solid var(--border);
    border-radius:var(--r-xl);
    box-shadow:var(--shadow-sm);
}
.privacy-policy h1 {
    background:var(--grad-primary);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    margin-bottom:var(--sp-6);
}
.privacy-policy h2 {
    margin-top:var(--sp-8);
    margin-bottom:var(--sp-4);
    padding-bottom:var(--sp-2);
    border-bottom:2px solid var(--brand-100);
    font-size:1.35rem;
}
[data-theme="dark"] .privacy-policy h2 { border-bottom-color:rgba(94,131,255,.25); }
.privacy-policy p, .privacy-policy ul { line-height:1.75; color:var(--text-muted); }
.privacy-policy ul { padding-left:var(--sp-6); margin:var(--sp-3) 0; }
.privacy-policy li { margin-bottom:var(--sp-2); }

/* ===================================================================
   ADMIN BANNER
   =================================================================== */
.admin-mode-banner {
    position:fixed;
    top:0; left:0;
    width:100%;
    background:linear-gradient(135deg,#f59e0b,#f97316);
    color:#fff;
    text-align:center;
    padding:6px 0;
    font-size:13px;
    font-weight:600;
    z-index:1050;
    box-shadow:0 2px 8px rgba(245,158,11,.4);
    letter-spacing:.02em;
}
body.admin-mode { padding-top:30px; }
body.admin-mode .site-header { top:30px; }

/* ===================================================================
   RTB ad blocks
   =================================================================== */
[id^="yandex_rtb_"] { margin:var(--sp-4) 0; }

/* ===================================================================
   ANIMATIONS
   =================================================================== */
@keyframes fadeIn {
    from { opacity:0; transform:translateY(8px); }
    to { opacity:1; transform:translateY(0); }
}
@keyframes fadeUp {
    from { opacity:0; transform:translateY(16px); }
    to { opacity:1; transform:translateY(0); }
}
@keyframes slideIn {
    from { opacity:0; transform:translateY(-8px); }
    to { opacity:1; transform:translateY(0); }
}
@keyframes slideUp {
    from { opacity:0; transform:translate(-50%, 20px); }
    to { opacity:1; transform:translate(-50%, 0); }
}
@keyframes pulse {
    0%,100% { box-shadow:0 0 0 4px rgba(16,185,129,.2); }
    50% { box-shadow:0 0 0 8px rgba(16,185,129,.05); }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration:.01ms !important;
        transition-duration:.01ms !important;
    }
}

/* ===================================================================
   RTL
   =================================================================== */
html[dir="rtl"] body { text-align:right; }
html[dir="rtl"] .breadcrumbs li:not(:last-child)::after { content:'‹'; }
html[dir="rtl"] .nav-tree > li > a::after { content:'←'; margin-left:0; margin-right:auto; }
html[dir="rtl"] .nav-tree > li:hover > a::after { transform:translateX(-4px); }
html[dir="rtl"] .nav-tree ul { padding-left:0; padding-right:var(--sp-4); border-left:0; border-right:2px dashed var(--border-strong); }

/* ===================================================================
   RESPONSIVE
   =================================================================== */
@media (max-width: 1024px) {
    .footer-top { grid-template-columns:1fr 1fr; }
    .footer-brand { grid-column:1 / -1; }
}

@media (max-width: 900px) {
    .container { padding:var(--sp-6) var(--sp-4); }
    .hero { padding:var(--sp-10) var(--sp-4); margin-left:var(--sp-4); margin-right:var(--sp-4); }
}

@media (max-width: 768px) {
    :root { --header-h:64px; }

    .header-inner { padding:0 var(--sp-4); gap:var(--sp-3); }
    .header-search { display:none; }
    .header-actions .theme-toggle,
    .header-actions .lang-switcher,
    .header-actions .admin-link-pill { display:none; }
    .menu-toggle { display:grid; }

    /* Mobile menu */
    body.menu-open { overflow:hidden; }
    .mobile-menu {
        position:fixed;
        top:var(--header-h);
        left:0; right:0; bottom:0;
        background:var(--bg);
        z-index:90;
        padding:var(--sp-6) var(--sp-4);
        transform:translateX(100%);
        transition:transform var(--t-slow);
        overflow-y:auto;
        display:flex;
        flex-direction:column;
        gap:var(--sp-5);
    }
    body.admin-mode .mobile-menu { top:calc(var(--header-h) + 30px); }
    body.menu-open .mobile-menu { transform:translateX(0); }

    .mobile-menu .search-form { width:100%; }
    .mobile-menu-group h4 {
        font-size:.78rem; font-weight:700;
        text-transform:uppercase;
        letter-spacing:.1em;
        color:var(--text-soft);
        margin-bottom:var(--sp-3);
    }
    .mobile-lang-list { display:grid; grid-template-columns:1fr 1fr; gap:8px; list-style:none; padding:0; }
    .mobile-lang-list button {
        width:100%;
        display:flex; align-items:center; gap:10px;
        padding:12px 14px;
        border:1.5px solid var(--border-strong);
        border-radius:var(--r-md);
        background:var(--bg-elevated);
        color:var(--text);
        font-weight:500;
        font-size:.92rem;
        transition:all var(--t);
    }
    .mobile-lang-list button.active {
        background:var(--grad-primary);
        color:#fff; border-color:transparent;
    }
    .mobile-actions { display:flex; gap:var(--sp-3); flex-wrap:wrap; }
    .mobile-actions .theme-toggle { width:auto; height:48px; padding:0 18px; border-radius:var(--r-md); gap:10px; display:inline-flex; align-items:center; }
    .mobile-actions .theme-toggle::after { content:attr(data-label); font-weight:500; font-size:.92rem; }

    .hero { padding:var(--sp-8) var(--sp-4); margin:var(--sp-4); border-radius:var(--r-xl); }
    .hero-subtitle { font-size:1rem; }
    .hero-search .search-form { height:52px; }
    .hero-search .search-form button { height:40px; padding:0 18px; }

    .nav-tree, main.container > ul:not(.nav-tree), .container > ul:not(.nav-tree) {
        grid-template-columns:1fr;
    }
    .nav-tree > li > a { font-size:.98rem; }

    .footer-top { grid-template-columns:1fr; gap:var(--sp-6); }
    .footer-bottom { flex-direction:column; text-align:center; }

    .calculator-form { padding:var(--sp-5) var(--sp-4); }

    .cookie-consent-banner {
        bottom:0; left:0;
        transform:none;
        width:100%;
        border-radius:var(--r-xl) var(--r-xl) 0 0;
    }
}

@media (max-width: 480px) {
    html { font-size:15px; }
    .container { padding:var(--sp-5) var(--sp-3); }
    .hero { padding:var(--sp-6) var(--sp-3); margin:var(--sp-3); }
    .hero h1 { font-size:2rem; }
    .logo { font-size:1.2rem; }
    .logo-mark { width:32px; height:32px; font-size:16px; }
    .nav-tree > li { padding:var(--sp-4); }
    .nav-tree > li > a { font-size:.95rem; gap:10px; }
    .nav-tree > li > a::before { width:38px; height:38px; }
}