/* Светлая и тёмная тема Site Russia. Графит, белый и тонкие акценты радуги бренда. */
:root{--bg-3:#222327;--text-3:#969ea6;--muted:var(--text-3);--theme-primary:#f3f5f6;--theme-primary-hover:#fff;--theme-primary-ink:#141415;--theme-ghost:#3d4047;--theme-ghost-hover:#c9cdd1;--theme-focus:#eef1f2;--theme-hover-line:#4a4d55;--theme-link-line:rgb(255 255 255/.35);--theme-shadow:0 24px 50px rgb(0 0 0/.5);--theme-success:#6fdc80;--theme-error:#ff8a8a;--theme-warning:#ffcf96}
html[data-theme="dark"]{color-scheme:dark}
html[data-theme="light"]{color-scheme:light;--bg:#f4f5f6;--bg-2:#e9ecef;--bg-3:#dfe3e7;--surface:#fafbfc;--surface-2:#e3e7eb;--line:#c5cbd2;--text:#17191d;--text-2:#46515c;--text-3:#5c6671;--cyan:#17191d;--cyan-hi:#30343b;--cyan-dim:#9ea8b3;--ink:#f4f5f6;--svc-color:#68737f;--svc-ink:#303a45;--svc-rgb:104 115 127;--theme-primary:#17191d;--theme-primary-hover:#30343b;--theme-primary-ink:#f4f5f6;--theme-ghost:#a6afb9;--theme-ghost-hover:#46515c;--theme-focus:#17191d;--theme-hover-line:#8995a2;--theme-link-line:rgb(23 25 29/.35);--theme-shadow:0 20px 44px rgb(26 35 46/.12);--theme-success:#206a32;--theme-error:#a52231;--theme-warning:#865018}
html[data-theme="light"] .svc-dev{--svc-ink:#b9202d}
html[data-theme="light"] .svc-shop{--svc-ink:#934300}
html[data-theme="light"] .svc-crm{--svc-ink:#237132}
html[data-theme="light"] .svc-seo{--svc-ink:#126791}
html[data-theme="light"] .svc-tools{--svc-ink:#6841b9}
html[data-theme="light"] .svc-brand{--svc-color:#68737f;--svc-ink:#303a45;--svc-rgb:104 115 127}

/* Небольшая кнопка в шапке, без подсказок и дополнительных окон. */
.theme-toggle{appearance:none;display:none;place-items:center;flex:none;width:44px;height:44px;padding:0;border:1px solid var(--line);border-radius:14px;background:var(--surface);color:var(--text-2);cursor:pointer;touch-action:manipulation;transition:background-color .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease)}
.js .theme-toggle{display:grid}
.theme-toggle:hover:not(:disabled){background:var(--surface-2);border-color:var(--theme-hover-line);color:var(--text)}
.theme-toggle:active:not(:disabled){transform:translateY(1px)}
.theme-toggle:focus-visible{outline:2px solid var(--theme-focus);outline-offset:3px}
.theme-toggle svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.theme-toggle .theme-moon{display:none}
@media(min-width:1601px){.hdr .brand small{display:none}.hdr .wrap{width:min(1440px,calc(100% - 32px));gap:12px}.hdr .nav>ul{gap:16px}}
html[data-theme="light"] .theme-toggle .theme-sun{display:none}
html[data-theme="light"] .theme-toggle .theme-moon{display:block}
@media(max-width:560px){.hdr .city-btn{max-width:clamp(80px,21vw,140px)}}
/* На узком телефоне город остаётся доступным по названию, но занимает одну кнопку. */
@media(max-width:420px){.hdr .wrap{gap:6px;padding-block:12px}.hdr .brand{min-width:0;margin-right:auto}.hdr .city-btn{position:relative;flex:none;justify-content:center;width:44px;max-width:44px;height:44px;min-height:44px;margin:0;padding:0;gap:0}.hdr .city-btn span{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap;border:0}.hdr .burger{flex:none;width:44px;height:44px;margin-left:0}}
@media(max-width:360px){.hdr .brand{gap:8px}.hdr .brand .mark{width:32px;height:32px}.hdr .brand b{font-size:13px}}

/* Старые хардкоды основных кнопок и состояний заменены семантическими цветами. */
html[data-theme] :focus-visible{outline-color:var(--theme-focus)}
html[data-theme] .btn-main,html[data-theme] .tool-check .btn-main,html[data-theme] .program-article .program-guide-download .btn-main{background:var(--theme-primary);color:var(--theme-primary-ink)}
html[data-theme] .btn-main:hover,html[data-theme] .tool-check .btn-main:hover,html[data-theme] .program-article .program-guide-download .btn-main:hover{background:var(--theme-primary-hover);box-shadow:none}
html[data-theme] .btn-ghost{box-shadow:inset 0 0 0 1.5px var(--theme-ghost)}
html[data-theme] .btn-ghost:hover{box-shadow:inset 0 0 0 1.5px var(--theme-ghost-hover)}
html[data-theme] .chip input:checked+span,html[data-theme] .chip-btn.on,html[data-theme] .tool .chip input:checked+span,html[data-theme] .tool .chip-btn.on{background:var(--theme-primary);color:var(--theme-primary-ink)}
html[data-theme] .chip-btn.on small{color:var(--theme-primary-ink)}
html[data-theme] .calc-type input:checked+span{border-color:var(--theme-primary)}
html[data-theme] .calc-range,html[data-theme] .range-fld input[type=range]{accent-color:var(--theme-primary)}
html[data-theme] .qa.open button i{background:var(--theme-primary)}
html[data-theme] .qa.open button i::before,html[data-theme] .qa.open button i::after{background:var(--theme-primary-ink)}
html[data-theme] .qa button:focus-visible i{box-shadow:0 0 0 3px var(--bg),0 0 0 5px var(--theme-focus)}
html[data-theme] .prose a,html[data-theme] .bsplit-body a,html[data-theme] .empty a,html[data-theme] .agree a,html[data-theme] .cookie a,html[data-theme] .cm-foot a,html[data-theme] .pt-note a,html[data-theme] .tool-hint a,html[data-theme] .ftr .legal-docs a{text-decoration-color:var(--theme-link-line)}
html[data-theme] .case:hover,html[data-theme] .post-card:hover,html[data-theme] .bcard:hover{border-color:var(--theme-hover-line)}
html[data-theme] .prod.big{background:var(--surface);border-color:var(--line)}
html[data-theme] .prod.big p,html[data-theme] .prod .num small{color:var(--text-3)}

/* Светлый режим: графика сайта и тени, изображения проектов сохраняют свои цвета. */
html[data-theme="light"] .brand .mark svg{fill:var(--text)}
html[data-theme="light"] .lead-form .wolf-bg{fill:rgb(23 25 29/.045)}
html[data-theme="light"] .hero::before{background:radial-gradient(60% 70% at 78% 40%,rgb(104 115 127/.10),transparent 70%)}
html[data-theme="light"] .hero .grid-bg{background-image:linear-gradient(rgb(23 25 29/.045) 1px,transparent 1px),linear-gradient(90deg,rgb(23 25 29/.045) 1px,transparent 1px)}
html[data-theme="light"] .hero-art .fallback svg{fill:var(--text);filter:none}
html[data-theme="light"] .page-hero::before{background:radial-gradient(50% 80% at 85% 0%,rgb(104 115 127/.08),transparent 70%)}
html[data-theme="light"] .map circle{fill:#68737f;opacity:.55}
html[data-theme="light"] .map circle:hover,html[data-theme="light"] .map circle.hl,html[data-theme="light"] .map circle.me{fill:var(--text);opacity:1}
html[data-theme="light"] .cm-group{border-bottom-color:var(--line)}
html[data-theme="light"] .bcompare .ours{background:rgb(104 115 127/.07)}
html[data-theme="light"] .bcompare thead .ours{background:rgb(104 115 127/.12)}
html[data-theme="light"] .sub ul,html[data-theme="light"] .hero-art .badge,html[data-theme="light"] .cm-box,html[data-theme="light"] .fab-list a{box-shadow:var(--theme-shadow)}
html[data-theme="light"] .bcard:hover,html[data-theme="light"] a.tool-card:hover,html[data-theme="light"] .feat-grid li:hover,html[data-theme="light"] .facts div:hover,html[data-theme="light"] .bprice:hover,html[data-theme="light"] .post-card:hover{box-shadow:0 20px 40px -24px rgb(26 35 46/.25)}
html[data-theme="light"] .lf-msg.ok,html[data-theme="light"] .check-big.ok,html[data-theme="light"] .check-badge.ok,html[data-theme="light"] .pw-item.copied .pw-copy,html[data-theme="light"] .im-pct,html[data-theme="light"] .diff-out .tool-stats dd.d-add{color:var(--theme-success)}
html[data-theme="light"] .lf-msg.err,html[data-theme="light"] .tool-hint.err,html[data-theme="light"] .check-big.bad,html[data-theme="light"] .check-badge.bad,html[data-theme="light"] .inx-count .bad dd,html[data-theme="light"] .diff-out .tool-stats dd.d-del{color:var(--theme-error)}
html[data-theme="light"] .check-dl .warn dd,html[data-theme="light"] .check-warn li,html[data-theme="light"] .rb-group li small,html[data-theme="light"] .im-item.worse .im-pct{color:var(--theme-warning)}
html[data-theme="light"] .lf .wolf-as-error{background:#f9e8ea;border-color:#dcb1b7;color:var(--theme-error)}
html[data-theme="light"] .diff-res ins,html[data-theme="light"] .tool-hint ins{background:#deefdf;color:var(--theme-success)}
html[data-theme="light"] .diff-res del,html[data-theme="light"] .tool-hint del{background:#f8e0e4;color:var(--theme-error)}
html[data-theme="light"] .qr-stage{background:repeating-conic-gradient(#e3e7eb 0 25%,#fafbfc 0 50%) 0 0/20px 20px;box-shadow:var(--theme-shadow)}

/* Тёмные рамки устройств и просмотрщик — самостоятельные поверхности вокруг оригинальных снимков. */
html[data-theme="light"] .browser,html[data-theme="light"] .phone,html[data-theme="light"] .studio .screen{--text-3:#8a9197;box-shadow:0 24px 50px rgb(26 35 46/.2)}
html[data-theme="light"] .ph-fallback{color:#a9b0b5}
html[data-theme="light"] .cs-art{--text:#eef1f2;--text-3:#a9b0b5}
html[data-theme="light"] .lb{color-scheme:dark;--text:#eef1f2;--text-2:#a9b0b5;--surface:#222327;--surface-2:#2b2c31;--line:#33353b;--theme-focus:#eef1f2;--theme-ghost:#5c626d;--theme-ghost-hover:#c9cdd1;color:var(--text)}

/* Обе штатные плашки cookie оформлены как часть сайта; согласие и текст не меняются. */
html[data-theme] .cookie{box-shadow:var(--theme-shadow)}
html[data-theme] #wolf-cookie{--ck-bg:var(--surface);--ck-fg:var(--text-2);--ck-btn-bg:var(--theme-primary);--ck-btn-fg:var(--theme-primary-ink);z-index:55;border:1px solid var(--line);border-radius:20px;box-shadow:var(--theme-shadow);overflow:hidden;font-family:var(--body)}
html[data-theme] #wolf-cookie::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:var(--rainbow-smooth);pointer-events:none}
html[data-theme] #wolf-cookie a{color:var(--text);text-decoration-color:var(--theme-link-line);text-underline-offset:3px}
html[data-theme] #wolf-cookie button{min-height:44px;border-radius:999px;font-family:var(--body);transition:background-color .2s var(--ease),color .2s var(--ease)}
html[data-theme] #wolf-cookie button:hover{filter:none;background:var(--theme-primary-hover)}
html[data-theme] #wolf-cookie button:focus-visible{outline:2px solid var(--theme-focus);outline-offset:3px}
body:has(.wolf-cookie--bottom:not([hidden])) .fab{bottom:120px}
@media(max-width:600px){body:has(.wolf-cookie--bottom:not([hidden])) .fab{bottom:260px}}
@media(prefers-reduced-motion:reduce){.theme-toggle,.theme-toggle:active:not(:disabled),html[data-theme] #wolf-cookie,html[data-theme] #wolf-cookie button{transition:none;transform:none}}