/* Темы страниц услуг. Кнопка — theme.js. Тёмная тема «Сайтов» и светлая SMM — их родной вид. */
.sv-tb-right{display:flex;align-items:center;gap:20px}
.sv-theme{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;padding:0;cursor:pointer;
  background:transparent;color:inherit;border:1px solid currentColor;opacity:.7;transition:opacity .2s}
.sv-theme:hover{opacity:1}
.sv-theme:focus-visible{outline:2px solid #1b6df5;outline-offset:3px;opacity:1}
.sv-theme svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:760px){.sv-tb-right{gap:12px}.sv-theme{width:36px;height:36px}}

/* ── светлая тема для страниц на блоках «Сайтов»: тёмные секции становятся светлыми ── */
html[data-theme=light] .page-sites .st-sec:not(.st-sec--light):not(.st-city){
  --st-bg:#fff;--st-card:#f5f5f5;--st-line:rgba(12,12,12,.12);--st-line2:rgba(12,12,12,.16);
  --st-ink:#0b0b0c;--st-text:rgba(12,12,12,.68);--st-mute:rgba(12,12,12,.55);--st-dim:rgba(12,12,12,.42);
  background:#fff;color:var(--st-ink)}
html[data-theme=light] .page-sites .topbar{color:#0b0b0c}
html[data-theme=light] .page-sites .st-hero::before,
html[data-theme=light] .page-sites .st-crumbs i{background:rgba(12,12,12,.12)}
html[data-theme=light] .page-sites .st-crumbs{color:rgba(12,12,12,.5)}
html[data-theme=light] .page-sites .st-crumbs a:hover{color:#0b0b0c}
html[data-theme=light] .page-sites .st-display,
html[data-theme=light] .page-sites .st-h1{color:#0b0b0c}
html[data-theme=light] .page-sites .st-display__dim{color:rgba(12,12,12,.38)}
html[data-theme=light] .page-sites .st-lead{color:rgba(12,12,12,.68)}
html[data-theme=light] .page-sites .st-steplabel b{color:#0b0b0c}
html[data-theme=light] .page-sites .st-steplabel span{color:rgba(12,12,12,.6)}
html[data-theme=light] .page-sites .st-sec .st-btn--line{border-color:rgba(12,12,12,.2);color:#0b0b0c}
html[data-theme=light] .page-sites .st-sec .st-btn--line:hover{border-color:#0b0b0c}
html[data-theme=light] .page-sites .st-hero .st-chipbtn--line{border-color:rgba(12,12,12,.25);color:#0b0b0c}
html[data-theme=light] .page-sites .st-hero .st-chipbtn--line:hover{border-color:#0b0b0c}
html[data-theme=light] .page-sites .st-hero .st-chipbtn--line .st-chipbtn__chip{background:#0b0b0c;color:#fff}
html[data-theme=light] .page-sites .st-sec:not(.st-sec--light) .st-body a:hover{color:#0b0b0c}
html[data-theme=light] .page-sites .st-sec:not(.st-sec--light) .st-body a{color:var(--st-blue)}
html[data-theme=light] .page-sites .st-price--key{background:#eef4ff}
html[data-theme=light] .page-sites .st-btn:focus-visible,
html[data-theme=light] .page-sites .st a:focus-visible{outline-color:#0b0b0c}
html[data-theme=light] .page-sites .st .sv-dir{color:#0b0b0c;border-bottom-color:rgba(12,12,12,.12)}
html[data-theme=light] .page-sites .sv-dirs{border-top-color:rgba(12,12,12,.12)}
html[data-theme=light] .page-sites .sv-dir__txt{color:rgba(12,12,12,.6)}
html[data-theme=light] .page-sites .sv-dir__price{color:rgba(12,12,12,.5)}
html[data-theme=light] .page-sites .sv-dir__go{border-color:rgba(12,12,12,.2)}
html[data-theme=light] .page-sites .st .sv-dir:hover .sv-dir__go{color:#fff}
html[data-theme=light] .page-sites .sv-aside-dark a{color:var(--st-blue)}
/* соседние светлые секции различаются серым фоном */
html[data-theme=light] .page-sites .st-sec.st-sec--light:not(.st-qa){background:#f4f4f2}
html[data-theme=light] .page-sites .st-sec--light .st-bento__dash,
html[data-theme=light] .page-sites .st-sec--light .st-bento__ai,
html[data-theme=light] .page-sites .st-sec--light .sv-for:not(.sv-for--key){background:#fff}
@media (max-width:760px){
  html[data-theme=light] .page-sites .st-display__dim{color:#0b0b0c}
}

/* ── тёмная тема для SMM: меняем переменные палитры, тёмные плашки делаем на ступень светлее ── */
html[data-theme=dark] .page-smm .smm,
html[data-theme=dark] .page-smm .topbar{
  --ink:#f4f4f2;--ink-60:rgba(244,244,242,.62);--ink-40:rgba(244,244,242,.4);
  --paper:#0b0b0c;--paper-muted:#141416;--mist:#141416;--line:rgba(255,255,255,.12)}
html[data-theme=dark] .page-smm .smm{background:#1a1a1d;color:var(--ink)}
html[data-theme=dark] .page-smm .topbar{color:#f4f4f2}
/* белые карточки → тёмная ступень */
html[data-theme=dark] .page-smm :is(.smm-tag,.smm-phone,.smm-bento__quote:not(.story),.smm-case,.smm-item:not(.smm-item--dark),
  .cal__d,.chat__ava,.chat__in p,.chat__typing,.smm-form,.smm-step__tag,.smm-btn--light,.smm-btn--white){background:#141416}
html[data-theme=dark] .page-smm .smm-item--cal,html[data-theme=dark] .page-smm .smm-item--chat{background:#1c1c20}
html[data-theme=dark] .page-smm .sto__card{background:linear-gradient(160deg,#1c1c20,#141416)}
html[data-theme=dark] .page-smm .sto__card:nth-child(3){background:linear-gradient(160deg,#1c1c20,#16233d)}
html[data-theme=dark] .page-smm :is(.cal__d.is-a,.cut__clip:nth-child(2)){background:#16233d}
/* то, что было тёмным на светлом, остаётся тёмным, но отделяется от фона */
html[data-theme=dark] .page-smm :is(.smm-panel--dark,.smm-bento__romi,.smm-item--dark,.smm-pack--hot,.smm-q,.flap__c){background:#1c1c20;color:#fff}
html[data-theme=dark] .page-smm .smm-bento__romi{background:var(--accent)}
html[data-theme=dark] .page-smm :is(.cal__d.is-b::after,.cal__legend i.is-b,.smm-pack li::before){background:#f4f4f2}
/* кнопки: светлая заливка, тёмный текст */
html[data-theme=dark] .page-smm .smm-btn:not(.smm-btn--accent){background:#f4f4f2;color:#0b0b0c;--fill:#0b0b0c;--go:#f4f4f2}
html[data-theme=dark] .page-smm .smm-btn:not(.smm-btn--accent) .smm-btn__chip{background:#0b0b0c;color:#f4f4f2}
html[data-theme=dark] .page-smm :is(.smm-btn--light,.smm-btn--white){background:transparent;color:#f4f4f2;border-color:rgba(255,255,255,.25)}
html[data-theme=dark] .page-smm :is(.smm-btn--light,.smm-btn--white) .smm-btn__chip{background:#f4f4f2;color:#0b0b0c}
html[data-theme=dark] .page-smm .smm-via input:checked+span{background:#f4f4f2;color:#0b0b0c}
html[data-theme=dark] .page-smm .smm-cityc--on{background:#f4f4f2;color:#0b0b0c}
html[data-theme=dark] .page-smm .smm-cityc--on .smm-cityc__badge{background:#0b0b0c;border-color:#0b0b0c;color:#fff}
html[data-theme=dark] .page-smm .smm-bars i{background:#3a3a40}
html[data-theme=dark] .page-smm .smm-bars>div+div i{background:var(--accent)}
html[data-theme=dark] .page-smm .smm-btn:not(.smm-btn--accent) .smm-btn__chip img{filter:invert(1)}