/* mekoai.ru: тёмная тема, переключатель, сообщение, плашка cookie, строка расчёта (02.10.2026).
   Тема — html[data-theme=dark]. По умолчанию светлая (решение заказчика), выбор хранится
   в localStorage.meko_theme и ставится инлайн-скриптом в <head> до отрисовки — без вспышки. */

/* ── Тёмная палитра: те же имена переменных, что у главной и seo.css ── */
html[data-theme=dark]{color-scheme:dark;
  --bg:#171512; --panel:#211E1A; --panel-2:#1C1916; --line:#34302A; --ink:#EEE8DD; --muted:#948B7C;
  --brand:#DB7A52; --brand2:#EE9068; --brand-soft:#4A3227; --logo:#E31E24; --green:#62B387;
  --ink-2:#D2CABD; --ink-3:#B4AB9C; --line-2:#433D35; --hair:#2B2722; --brand-wash:#2D211B;
  --alarm:#E8705F; --alarm-soft:#3A221E;
  --sh-1:0 1px 2px rgba(0,0,0,.35),0 2px 8px rgba(0,0,0,.25);
  --sh-2:0 2px 4px rgba(0,0,0,.35),0 10px 28px rgba(0,0,0,.35);
  --sh-3:0 4px 8px rgba(0,0,0,.35),0 24px 60px rgba(0,0,0,.45);
  --sh-brand:0 6px 18px rgba(219,122,82,.25),0 1px 2px rgba(0,0,0,.3);
  --edge:inset 0 1px 0 rgba(255,255,255,.04);
  --bezel:rgba(255,255,255,.03); --bezel-line:rgba(255,255,255,.07);
  --shadow:0 2px 10px rgba(0,0,0,.35)}
html[data-theme=dark] body{background:var(--bg);color:var(--ink)}
html[data-theme=dark] img.logo{content:url(/logo-head-dark.svg)}

/* ── Переключатель темы в шапке ── */
.th-btn{flex:0 0 auto;width:40px;height:40px;border-radius:50%;border:1px solid var(--line-2,#DED7C8);background:var(--panel,#FBFAF5);
  color:var(--ink,#2B2925);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0;
  box-shadow:var(--sh-1);transition:border-color .2s,color .2s,transform .2s}
.th-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.th-btn .th-sun{display:none}
html[data-theme=dark] .th-btn .th-moon{display:none}
html[data-theme=dark] .th-btn .th-sun{display:block}
.th-btn:focus-visible{outline:2.5px solid var(--brand,#C15F3C);outline-offset:3px}
.th-btn:active{transform:scale(.94)}
@media (hover:hover) and (pointer:fine){.th-btn:hover{border-color:var(--brand,#C15F3C);color:var(--brand2,#A8492B)}}

/* Кнопка заявки в шапке: на телефоне — «Заявка», чтобы кнопке темы хватило места в строке */
.nav-actions .cta-s{display:none}
@media (max-width:560px){.nav-actions .cta-l{display:none}.nav-actions .cta-s{display:inline}
  header .nav-actions .th-btn{width:38px;height:38px}}
/* Главная (в шапке есть бургер) на самых узких экранах — всё уплотняем, чтобы строка не вылезала за край */
@media (max-width:380px){
  header:has(.burger){padding-left:8px;padding-right:8px}
  header .nav:has(.burger){gap:5px;padding-right:8px}
  header .nav-actions:has(.burger){gap:4px}
  header .nav-actions:has(.burger) .th-btn{width:34px;height:34px}
  header .nav-actions:has(.burger) .th-btn svg{width:16px;height:16px}
  header .nav-actions:has(.burger) .btn{padding:9px 11px;font-size:13px}
  header .nav:has(.burger) .nm-btn{padding:6px 4px;font-size:12.5px}
  header .nav-actions .burger{width:38px;height:38px}
}

/* ── Сообщение при переключении ── */
.th-toast{position:fixed;left:50%;top:96px;z-index:1100;transform:translate(-50%,-10px);opacity:0;pointer-events:none;
  background:var(--ink,#2B2925);color:var(--bg,#F3F0E8);font:600 14.5px/1.35 'Montserrat',sans-serif;padding:12px 20px;border-radius:999px;
  box-shadow:0 12px 34px rgba(0,0,0,.25);transition:opacity .25s,transform .25s;white-space:nowrap;max-width:92vw}
.th-toast.on{opacity:1;transform:translate(-50%,0)}
@media (max-width:420px){.th-toast{white-space:normal;text-align:center;font-size:13.5px;top:84px}}

/* ── Плашка cookie ── */
.ck-bar{position:fixed;left:16px;right:16px;bottom:16px;z-index:900;max-width:640px;margin:0 auto;display:flex;align-items:center;gap:16px;
  background:var(--panel,#FBFAF5);color:var(--ink,#2B2925);border:1px solid var(--line-2,#DED7C8);border-radius:20px;padding:14px 14px 14px 20px;
  box-shadow:0 18px 50px rgba(40,30,20,.22);font:14px/1.5 'Golos Text',-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  transform:translateY(20px);opacity:0;transition:transform .35s cubic-bezier(.22,1,.36,1),opacity .35s}
.ck-bar.on{transform:none;opacity:1}
.ck-bar p{margin:0;flex:1;color:var(--ink-3,#6B6457)}
.ck-bar a{color:var(--brand2,#A8492B);border-bottom:1px solid var(--brand-soft,#EBDFD3)}
.ck-bar button{flex:none;min-height:44px;padding:0 22px;border:0;border-radius:999px;background:var(--brand,#C15F3C);color:#fff;cursor:pointer;
  font:800 14px 'Montserrat',sans-serif}
@media (max-width:520px){.ck-bar{gap:12px;left:10px;right:10px;bottom:10px;padding:10px 10px 10px 14px;border-radius:16px;font-size:12.5px;line-height:1.4}
  .ck-bar button{min-height:40px;padding:0 16px;font-size:13px}}
@media (prefers-reduced-motion:reduce){.ck-bar,.th-toast{transition:none}}

/* ── «Ваш расчёт» в форме заявки ── */
.lf-calc{display:flex;gap:10px;align-items:flex-start;padding:11px 14px;border-radius:14px;background:var(--brand-wash,#F5EAE1);
  border:1px solid var(--brand-soft,#EBDFD3);font-size:13.5px;line-height:1.45;color:var(--ink-2,#5B5448)}
.lf-calc b{color:var(--ink,#2B2925)}
.lf-calc[hidden]{display:none}

/* ══════════════ Тёмная тема: места с зашитыми светлыми цветами ══════════════ */
html[data-theme=dark] header .nav,html[data-theme=dark] header.scrolled .nav{background:rgba(33,30,26,.88);border-color:var(--line)}
html[data-theme=dark] .nm-pop{background:var(--panel);border-color:var(--line-2)}
html[data-theme=dark] .nm-btn{color:var(--ink-2)}
html[data-theme=dark] .nm-btn:hover,html[data-theme=dark] .nav-more.open .nm-btn{color:var(--brand2);background:rgba(74,50,39,.6)}
html[data-theme=dark] .nm-h{color:var(--muted)}
html[data-theme=dark] .nm-pop a{color:var(--ink-2)}
html[data-theme=dark] .lf-field input,html[data-theme=dark] .rf-form input:not([type=checkbox]),html[data-theme=dark] .rf-url,
html[data-theme=dark] .rf-copy,html[data-theme=dark] .sh-copy{background:#1A1815;color:var(--ink);border-color:var(--line-2)}
html[data-theme=dark] .lf-field label,html[data-theme=dark] .rf-form label{color:var(--ink-2)}
html[data-theme=dark] .calc-result{background:linear-gradient(165deg,#26221E,var(--panel-2))}
html[data-theme=dark] .refband{background:linear-gradient(160deg,#25211D,var(--panel-2))}
html[data-theme=dark] .ck-bar{box-shadow:0 18px 50px rgba(0,0,0,.5)}
/* общее (главная + seo.css) */
html[data-theme=dark] .eyebrow{background:linear-gradient(180deg,#2A231E,var(--brand-wash));border-color:var(--brand-soft)}
html[data-theme=dark] .btn.ghost:hover{background:var(--panel)}
html[data-theme=dark] footer{background:#0F0E0C;border-top:1px solid var(--line)}
html[data-theme=dark] .ctaband .btn:not(.pz-send),html[data-theme=dark] .btn.white{color:#A8492B}
html[data-theme=dark] .lf-field label,html[data-theme=dark] .rf-form label{color:var(--ink-2)}
html[data-theme=dark] .lf-promo-ok,html[data-theme=dark] .rf-note,html[data-theme=dark] .per i{color:var(--green)}
html[data-theme=dark] .nm-col a:hover{background:var(--brand-wash)}
html[data-theme=dark] .fill{background:#3A3018;color:#E9CD73;border-color:#8A6A10}
/* главная: макеты в первом экране и блоках */
html[data-theme=dark] .mock-ready,html[data-theme=dark] .mock-float,html[data-theme=dark] .bub.in,
html[data-theme=dark] .ask,html[data-theme=dark] .mock-send{background:var(--panel-2);border-color:var(--line-2)}
html[data-theme=dark] .mock-float2,html[data-theme=dark] .hs-toast{background:#EEE8DD;color:#171512}
html[data-theme=dark] .msplit div.y{color:#8FD0AC}
html[data-theme=dark] .mock-sum-tag{background:#3E7C5A}
/* окно реферала */
html[data-theme=dark] .rf-x:hover{background:var(--alarm-soft);color:var(--alarm)}
html[data-theme=dark] .rf-ov,html[data-theme=dark] .sh-ov{background:rgba(0,0,0,.66)}
/* /prezentaciya/ */
html[data-theme=dark] .pv,html[data-theme=dark] .pv video{background:#0F0E0C}
html[data-theme=dark] .chap{background:var(--panel)}
html[data-theme=dark] .ctaband .pz-form{box-shadow:0 18px 50px rgba(0,0,0,.4)}
/* статьи блога, /mekochats/, сравнение */
html[data-theme=dark] .art blockquote,html[data-theme=dark] .cmp .me{background:var(--brand-wash);color:var(--ink-2)}
html[data-theme=dark] .calc-lines,html[data-theme=dark] .ct-sub{color:var(--ink-2)}
html[data-theme=dark] .calc-lines span{color:var(--muted)}
html[data-theme=dark] .callout,html[data-theme=dark] .cmp thead th,html[data-theme=dark] .metrics .m,html[data-theme=dark] .chcard,
html[data-theme=dark] .calc,html[data-theme=dark] .pick div,html[data-theme=dark] .steps4 div{background:var(--panel);border-color:var(--line-2)}
html[data-theme=dark] .stepper button,html[data-theme=dark] .per{background:var(--panel-2);border-color:var(--line-2);color:var(--ink)}
html[data-theme=dark] .stepper button:hover,html[data-theme=dark] .per:hover{background:var(--brand-wash)}
html[data-theme=dark] .ct-main{color:var(--ink)}
html[data-theme=dark] .tag.on,html[data-theme=dark] .ct-save{background:#1E3428;color:#8FD0AC}
html[data-theme=dark] .tag.soon{background:#3A3018;color:#E9CD73}
html[data-theme=dark] .th-toast{background:#EEE8DD;color:#171512}

/* ── Логотип шапки крупнее (02.10.2026): /logo-head.svg — стрелка прежняя, слово ×2,6 (109×32 px).
   Логотип не сжимается; на компьютере пункты меню чуть плотнее, чтобы влезли в строку;
   до 520 px логотип 26 px, «Прочее» → «Ещё», а на главной ссылки «Прочее» уходят в бургер. ── */
header .nav>a:first-child{flex:0 0 auto}
header img.logo{max-width:none!important;flex:0 0 auto}
@media(min-width:1061px){header .nav-links a{padding-left:10px!important;padding-right:10px!important;white-space:nowrap}header .nav{column-gap:14px!important}}
.nl-more{display:none}
@media(max-width:520px){
  header .nav img.logo,header.scrolled .nav img.logo{height:26px!important;width:auto!important}
  header .nav-more .nm-btn{font-size:0!important}
  header .nav-more .nm-btn::before{content:"Ещё";font-size:13.5px}
  header.more-in-menu .nav-more{display:none!important}
  header.more-in-menu .nav-links.open{justify-content:flex-start;overscroll-behavior:contain}
  .nav-links.open .nl-more{display:block;width:100%;margin-top:14px;padding-top:6px;border-top:1px solid var(--line)}
}
.nl-more-g{display:flex;flex-direction:column;margin-top:6px}
.nl-more-h{font-family:Montserrat,sans-serif;font-weight:700;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:12px 0 2px}
.nav-links.open .nl-more a{font-size:17px!important;font-weight:600!important;letter-spacing:0!important;padding:8px 0!important;border-bottom:0!important}
/* ── Главная 1081–1240 px: шапка не влезала в строку и до правки логотипа (кнопка заявки за краем
   на 1100 px) — короткая подпись «Заявка» и плотнее пункты меню. ── */
@media(min-width:1081px) and (max-width:1240px){#hdr .nav-actions .cta-l{display:none}#hdr .nav-actions .cta-s{display:inline}#hdr .nav-links a{padding-left:8px!important;padding-right:8px!important}}
@media(min-width:1081px) and (max-width:1120px){#hdr .nav-links a{padding-left:6px!important;padding-right:6px!important}#hdr .nav{column-gap:10px!important}}
/* ── Полноэкранное меню главной в тёмной теме: фон был зашит светлым (rgba(243,240,232,.95)),
   а текст в тёмной теме светлый — пункты не читались. Исправлено 02.10.2026. ── */
html[data-theme=dark] .nav-links.open{background:rgba(23,21,18,.95)}