/* ═══════════════════════════════════════════════════════════════════════════════════════════════════════
   VAIMAN · VISUAL V2 · ВОЛНА 7 (02.10) — ОСТАЛЬНЫЕ СТРАНИЦЫ ПОДАЧЕЙ ГЛАВНОЙ И КАБИНЕТА: постер-станция шапки, станции
   «01 .РАЗДЕЛ», петроль-плашки с медной кромкой, оранжевое поле. Классы ставит js/site-v7.js (html.s7, .s7-hero, .s7-plate,
   .s7-h, .s7-pl, .s7-or, .s7-tile). Цвета — токены темы + css/cabinet-v4.css (--c4-*); на плашках и полях токены темы
   ПЕРЕОПРЕДЕЛЯЮТСЯ на поверхности (тексты страниц берут нужный цвет в обеих темах). Светлая — «постер на бумаге».
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════ */
:root { --s7-text: #F2EEE6; --s7-text2: #D3DCE0; --s7-muted: #B2C3CA; --s7-bg: #0F3444; --s7-bg2: #174A5E; --s7-bg3: #1B5368; --s7-inset: #0C2C3A;
  --s7-line: rgba(242, 238, 230, .16); --s7-amber: #F9BC66; --s7-amber-hi: #F9BC66; --s7-ember-deep: #9A3A06; --s7-o-text2: rgba(17, 17, 17, .8); --s7-o-muted: rgba(17, 17, 17, .66); --s7-o-line: rgba(17, 17, 17, .18); }

/* 1 · ПОСТЕР-СТАНЦИЯ ШАПКИ */
html.s7 #app .s7-hero {
  position: relative !important; isolation: isolate; overflow: hidden !important; display: flex !important; flex-direction: column !important;
  justify-content: flex-end !important; align-items: flex-start !important; gap: calc(16px * var(--k, 1)) !important;
  min-height: calc(420px * var(--k, 1)) !important; padding: calc(36px * var(--k, 1)) !important; margin: calc(8px * var(--k, 1)) 0 calc(30px * var(--k, 1)) !important;
  border: 0 !important; border-radius: calc(30px * var(--k, 1)) !important; background: var(--c4-petrol2) !important; color: var(--c4-off) !important; text-align: left !important;
  box-shadow: 0 calc(40px * var(--k, 1)) calc(90px * var(--k, 1)) calc(-50px * var(--k, 1)) rgba(4, 22, 30, .7) !important;
}
html.s7 #app .s7-hero::before, html.s7 #app .s7-hero::after { content: none !important; display: none !important; }
html.s7 #app .s7-hero > .s7-bg { position: absolute; z-index: -1; inset: 0; transform: scale(1.05); animation: s7zoom 2.4s cubic-bezier(.2, .8, .2, 1) forwards;
  background: linear-gradient(90deg, rgba(15, 52, 68, .5) 0%, rgba(15, 52, 68, .12) 48%, rgba(15, 52, 68, 0) 72%), var(--s7-bg) 60% 45% / cover no-repeat, var(--c4-petrol2); }
@keyframes s7zoom { to { transform: none; } }
/* своя картинка шапки (Мультстудия, каталог) остаётся фоном постера, затемнение — снизу/слева, как у кадров полёта */
html.s7 #app .s7-hero.s7-keep > :is(img, [class$="-hero-bg"]) { position: absolute !important; z-index: -2 !important; inset: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover; opacity: 1 !important; }
html.s7 #app .s7-hero.s7-keep { background: var(--c4-petrol2) linear-gradient(90deg, rgba(15, 52, 68, .55), rgba(15, 52, 68, 0) 70%) !important; }
/* плашка: петроль, медная кромка, оранжевый язычок (как плашки станций главной и кабинета) */
html.s7 #app .s7-plate {
  position: relative; z-index: 2; flex: none !important; align-self: flex-start !important; width: auto !important; max-width: min(100%, calc(720px * var(--k, 1))) !important;
  margin: 0 !important; padding: calc(26px * var(--k, 1)) calc(30px * var(--k, 1)) calc(24px * var(--k, 1)) !important; text-align: left !important;
  border-radius: calc(24px * var(--k, 1)) !important; background: var(--c4-plate) !important; border: 1px solid var(--c4-edge) !important;
  box-shadow: 0 calc(30px * var(--k, 1)) calc(60px * var(--k, 1)) calc(-30px * var(--k, 1)) rgba(4, 22, 30, .8) !important;
  --text-primary: var(--s7-text); --text-secondary: var(--s7-text2); --text-muted: var(--s7-muted); --accent-ember: var(--s7-amber); --border-light: var(--s7-line);
  --espresso: var(--s7-text); --cocoa: var(--s7-text2); --taupe: var(--s7-muted); --ember: var(--s7-amber); color: var(--s7-text) !important;
}
html.s7 #app .s7-plate::before { content: '' !important; display: block !important; position: absolute; left: calc(30px * var(--k, 1)); top: 0; width: calc(48px * var(--k, 1)); height: calc(4px * var(--k, 1)); border-radius: 0 0 4px 4px; background: var(--c4-or); }
html.s7 #app .s7-plate::after { content: none !important; }
html.s7 #app .s7-plate .s7-in { display: block !important; width: auto !important; overflow: visible !important; padding: 0 !important; margin: 0 !important; min-height: 0 !important; text-align: left !important; background: none !important; border: 0 !important; box-shadow: none !important; max-width: none !important; }
html.s7 #app .s7-plate .s7-in:not(h1)::before, html.s7 #app .s7-plate .s7-in::after { content: none !important; display: none !important; }
html.s7 #app .s7-eye { margin: 0 0 calc(10px * var(--k, 1)); font: 600 calc(11.5px * var(--k, 1))/1 var(--font-num); letter-spacing: .3em; text-transform: uppercase; color: var(--c4-amber); }
html.s7 #app .s7-plate :is([class$="-eyebrow"], [class$="-kicker"], .rz-eyebrow) { color: var(--c4-amber) !important; background: none !important; }
html.s7 #app .s7-plate h1.s7-title {
  margin: calc(8px * var(--k, 1)) 0 0 !important; font: 700 clamp(calc(44px * var(--k, 1)), 5.4vw, calc(96px * var(--k, 1)))/.9 var(--font-display) !important;
  letter-spacing: .002em !important; text-transform: uppercase; text-align: left !important; color: var(--c4-off) !important; -webkit-text-fill-color: currentColor !important; background: none !important;
}
html.s7 #app .s7-plate h1.s7-title::before { content: '.' !important; display: inline !important; position: static !important; width: auto !important; height: auto !important; background: none !important; color: var(--c4-or); -webkit-text-fill-color: var(--c4-or); }
html.s7 #app .s7-plate h1.s7-title em { font-style: normal; color: var(--c4-or) !important; -webkit-text-fill-color: currentColor !important; background: none !important; }
html.s7 #app .s7-plate h1.s7-title img { width: calc(40px * var(--k, 1)) !important; height: auto !important; vertical-align: -.08em; margin-right: .12em; }
html.s7 #app .s7-plate :is(p, [class$="-sub"], [class$="-subtitle"], [class$="-slogan"], [class$="-promise"], [class$="-lead"], .text-muted, .legal-updated) {
  color: var(--c4-off2) !important; text-align: left !important; max-width: 40em; margin-left: 0 !important; margin-right: 0 !important; }
html.s7 #app .s7-plate p b, html.s7 #app .s7-plate p strong { color: var(--c4-amber); }
html.s7 #app .s7-hero :is([class$="-hero-top"], [class$="-hero-tr"], [class$="-header-side"]) { position: absolute !important; z-index: 3; top: calc(22px * var(--k, 1)) !important; right: calc(22px * var(--k, 1)) !important; left: auto !important; margin: 0 !important; }
html.s7 #app .s7-hero [class$="-hero-top"] { left: calc(22px * var(--k, 1)) !important; display: flex !important; justify-content: space-between !important; align-items: center !important; }
html.s7 #app .s7-hero :is(.vgen-hero-ic, [class$="-hero-ic"], [class$="-hero-art"], .vg-orb) { display: none !important; }
html.s7 #app .s7-hero [class$="-hero-grid"] { display: block !important; width: 100%; }
html.s7 #app .s7-plate h1.s7-title { overflow-wrap: normal; word-break: normal; hyphens: none; }
/* документы: заголовки длинные — плашка шире, шрифт спокойнее; номера разделов уже в тексте (станция без своего номера) */
html.s7-legal #app .s7-plate { max-width: min(100%, calc(980px * var(--k, 1))) !important; }
html.s7-legal #app .s7-plate h1.s7-title { font-size: clamp(calc(34px * var(--k, 1)), 4.2vw, calc(72px * var(--k, 1))) !important; }
html.s7 #app .s7-h.s7-hn { display: block !important; }
html.s7 #app .s7-h.s7-hn::before { content: '.' !important; display: inline !important; position: static !important; width: auto !important; height: auto !important; background: none !important; color: var(--c4-or); }

/* 2 · СТАНЦИИ: номер Montserrat 200 + огромный Oswald капсом с оранжевой точкой (текст заголовка — страницы) */
html.s7 #app .s7-h {
  display: flex !important; align-items: baseline; flex-wrap: wrap; gap: 0 calc(14px * var(--k, 1)); margin: calc(44px * var(--k, 1)) 0 calc(18px * var(--k, 1)) !important; padding: 0 !important;
  font: 700 clamp(calc(30px * var(--k, 1)), 3.2vw, calc(56px * var(--k, 1)))/.95 var(--font-display) !important; text-transform: uppercase; letter-spacing: .005em !important;
  color: var(--text-primary) !important; -webkit-text-fill-color: currentColor !important; background: none !important; border: 0 !important; text-align: left !important;
}
html.s7 #app .s7-h::before, html.s7 #app .s7-h::after { content: none !important; display: none !important; }
html.s7 #app .s7-h > .s7-no { flex: none; font: 200 calc(46px * var(--k, 1))/.8 var(--font-num); letter-spacing: -.04em; color: var(--accent-ember); text-transform: none; }
html.s7 #app .s7-h > .s7-no::after { content: '.'; margin-left: calc(14px * var(--k, 1)); font: 700 1em/1 var(--font-display); letter-spacing: 0; color: var(--c4-or); }
html.s7 #app .s7-h :is(img, svg) { width: auto !important; height: .8em !important; vertical-align: -.05em; }
html.s7 #app .s7-h + :is(p, [class$="-sub"]) { margin-top: 0 !important; }

/* 3 · ПЛАШКИ: петроль с медной кромкой в ОБЕИХ темах — токены тёмной поверхности переопределены на плашке */
html.s7 #app :is(.s7-pl, .s7-tile) {
  --text-primary: var(--s7-text); --text-secondary: var(--s7-text2); --text-muted: var(--s7-muted); --bg-primary: var(--s7-bg); --bg-secondary: var(--s7-bg2);
  --bg-tertiary: var(--s7-bg3); --bg-inset: var(--s7-inset); --field-bg: var(--s7-inset); --border-light: var(--s7-line); --border-strong: var(--c4-edge);
  --accent-ember: var(--s7-amber); --chip-on-bg: var(--c4-off); --chip-on-fg: var(--c4-ink); --v2-card-bg: transparent; --v2-card-edge: var(--s7-line);
  --ivory: var(--bg-primary); --paper: var(--bg-secondary); --cream: var(--bg-tertiary); --espresso: var(--text-primary); --cocoa: var(--text-secondary);
  --taupe: var(--text-muted); --ember: var(--accent-ember); --border: var(--border-light); --border-s: var(--border-strong);
  color: var(--text-primary);
}
html.s7 #app .s7-pl {
  background: var(--c4-plate) !important; border: 1px solid var(--c4-edge) !important; border-radius: calc(24px * var(--k, 1)) !important;
  box-shadow: 0 calc(26px * var(--k, 1)) calc(50px * var(--k, 1)) calc(-30px * var(--k, 1)) rgba(4, 22, 30, .6) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s ease, opacity .7s ease !important;
}
html.s7 #app .s7-pad { padding: calc(22px * var(--k, 1)) calc(26px * var(--k, 1)) !important; }
html.s7 #app .s7-pl .s7-pl { background: rgba(242, 238, 230, .05) !important; box-shadow: none !important; border-color: var(--s7-line) !important; }   /* вложенная — без второй тени */
html.s7 #app a.s7-pl:hover, html.s7 #app .s7-tile:hover { transform: translateY(calc(-5px * var(--k, 1))); box-shadow: 0 calc(30px * var(--k, 1)) calc(50px * var(--k, 1)) calc(-24px * var(--k, 1)) rgba(4, 22, 30, .75) !important; }
html.s7 #app .s7-pl :is(h2, h3, h4, b, strong) { color: var(--s7-text); }
html.s7 #app .s7-pl a:not([class]) { color: var(--s7-amber); }
html.s7 #app .s7-pl :is(textarea, input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), select) {
  background: var(--s7-inset) !important; color: var(--s7-text) !important; border-color: var(--s7-line) !important; }
html.s7 #app .s7-pl :is(textarea, input)::placeholder { color: var(--s7-muted) !important; opacity: 1; }
/* плитки-картинки (стили, каталог моделей): медная кромка и подъём; фон плитки — петроль */
html.s7 #app .s7-tile { border: 1px solid var(--c4-edge) !important; border-radius: calc(22px * var(--k, 1)) !important; background-color: var(--s7-bg2) !important; overflow: hidden;
  transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s ease, opacity .7s ease !important; }

/* 4 · ОРАНЖЕВОЕ ПОЛЕ: чёрный текст, петроль-кнопки с медной кромкой (на оранжевом кнопка не оранжевая) */
html.s7 #app .s7-or {
  --text-primary: var(--c4-ink); --text-secondary: var(--s7-o-text2); --text-muted: var(--s7-o-muted); --border-light: var(--s7-o-line); --accent-ember: var(--c4-petrol2);
  --espresso: var(--c4-ink); --cocoa: var(--s7-o-text2); --taupe: var(--s7-o-muted); --ember: var(--c4-petrol2); --border: var(--s7-o-line);
  color: var(--c4-ink) !important; background: var(--c4-field) !important; border: 0 !important; border-radius: calc(28px * var(--k, 1)) !important;
  padding: calc(28px * var(--k, 1)) !important; box-shadow: 0 calc(30px * var(--k, 1)) calc(60px * var(--k, 1)) calc(-36px * var(--k, 1)) rgba(242, 107, 33, .55) !important;
}
html.s7 #app .s7-or :is(h2, h3, h4, p, li, span, b, strong, div) { color: inherit !important; -webkit-text-fill-color: currentColor; }
html.s7 #app .s7-or a:not([class]) { color: var(--c4-petrol2) !important; text-decoration: underline; }
html.s7 #app .s7-or :is(a, button)[class] { background: var(--c4-plate) !important; color: var(--c4-off) !important; border: 1px solid rgba(15, 52, 68, .9) !important; -webkit-text-fill-color: currentColor; }
html.s7 #app .s7-or :is(a, button)[class] * { color: inherit !important; }
html.s7 #app .s7-or::before, html.s7 #app .s7-or::after { display: none !important; }

/* 5 · ДВИЖЕНИЕ: появление при прокрутке — прозрачностью (внутри бывают окна) */
html.s7-motion #app .s7-rv { opacity: 0; transition: opacity .7s ease, transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s ease; }
html.s7-motion #app .s7-rv.s7-in-v { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  html.s7 #app .s7-hero > .s7-bg { animation: none !important; transform: none; }
  html.s7 #app :is(.s7-pl, .s7-tile, .s7-rv) { transition: none !important; opacity: 1 !important; }
  html.s7 #app :is(a.s7-pl, .s7-tile):hover { transform: none; }
}

/* 6 · ТЕЛЕФОН: постер столбиком — кадр-вертикаль сверху, плашка снизу */
@media (max-width: 760px) {
  html.s7 #app .s7-hero { min-height: 0 !important; padding: 150px 14px 14px !important; border-radius: 24px !important; gap: 12px !important; margin-bottom: 22px !important; }
  html.s7 #app .s7-hero > .s7-bg { background: linear-gradient(180deg, rgba(15, 52, 68, 0) 30%, rgba(15, 52, 68, .6) 100%), var(--s7-bgm) center 20% / cover no-repeat, var(--c4-petrol2); }
  html.s7 #app .s7-hero.s7-keep { padding-top: 180px !important; }
  html.s7 #app .s7-plate { max-width: 100% !important; width: 100% !important; padding: 20px 18px 18px !important; }
  html.s7 #app .s7-plate h1.s7-title { font-size: clamp(34px, 10.5vw, 48px) !important; }
  html.s7-legal #app .s7-plate h1.s7-title { font-size: clamp(28px, 8.4vw, 38px) !important; }
  html.s7 #app .s7-h { font-size: clamp(26px, 8vw, 34px) !important; margin-top: 32px !important; }
  html.s7 #app .s7-h > .s7-no { font-size: 32px; }
  html.s7 #app .s7-or { padding: 18px !important; border-radius: 22px !important; }
  html.s7 #app .s7-pl { border-radius: 20px !important; }
}

/* 7 · ЧИТАЕМОСТЬ (замер контраста по пикселям, 02.10): то, что страницы красят своими цветами поверх новых поверхностей */
/* стекло-карточки страниц внутри плашек: в светлой теме они белёсые (матовое стекло) — на петроле берём их тёмный вид */
html.s7:not([data-theme="dark"]) #app :is(.s7-pl, .s7-plate) :is([class*="card"], [class*="preset"], [class*="toggle"], [class*="chip"], [class*="-opt"], [class*="-mode"], [class*="-fact"], [class*="tab"]):not(.s7-pl):not(.active):not(.on):not(.selected):not([aria-pressed="true"]):not([aria-selected="true"]):not(:is(.active, .on, .selected) *) {
  background: linear-gradient(160deg, rgba(23, 74, 94, .7), rgba(15, 52, 68, .6)) !important; border-color: rgba(224, 149, 90, .32) !important; box-shadow: none !important; color: var(--s7-text2); }
html.s7:not([data-theme="dark"]) #app .s7-plate :is(.st-hero-steps span, .rz-facts > *) { background: rgba(242, 238, 230, .08) !important; border-color: var(--s7-line) !important; color: var(--s7-text2) !important; }
/* псевдонимы страниц на поверхностях (их var() вычислены у корня страницы — переопределяем на плашке) */
html.s7 #app :is(.s7-pl, .s7-plate, .s7-tile) { --sec: var(--s7-amber); --st-ember: var(--s7-amber); --st-ember-l: var(--s7-amber); --accent-fill-text: var(--s7-amber); }
/* оранжевое поле: вложенные подложки страниц — светлые полупрозрачные, текст чёрный */
html.s7 #app .s7-or { --bg-primary: rgba(255, 250, 244, .5); --bg-secondary: rgba(255, 250, 244, .45); --bg-tertiary: rgba(255, 250, 244, .55); --bg-inset: rgba(255, 250, 244, .6);
  --field-bg: rgba(255, 250, 244, .6); --sec: var(--c4-petrol2); --paper: var(--bg-secondary); --cream: var(--bg-tertiary); --ivory: var(--bg-primary); }
html.s7 #app .s7-or :is(summary, dt, dd, em, i, small, label, code, pre, td, th, a:not([class])) { color: var(--c4-ink) !important; -webkit-text-fill-color: currentColor; }
html.s7 #app .s7-or :is(pre, code, [class$="-pre"], details) { background: rgba(255, 250, 244, .62) !important; border-color: rgba(17, 17, 17, .16) !important; }
/* надписи и балансы поверх кадра (верхняя строка постера) — на петроль-таблетке */
html.s7 #app .s7-hero :is([class$="-hero-top"], [class$="-hero-tr"], [class$="-header-side"]) > :is([class$="-eyebrow"], [class*="bal"], [class*="projects-link"], [class*="badge"]) {
  background: rgba(15, 52, 68, .9) !important; border: 1px solid var(--c4-edge) !important; color: var(--c4-off) !important; border-radius: 999px !important;
  padding: calc(7px * var(--k, 1)) calc(14px * var(--k, 1)) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
html.s7 #app .s7-hero :is([class$="-hero-top"], [class$="-hero-tr"], [class$="-header-side"]) > :is([class$="-eyebrow"], [class*="bal"], [class*="projects-link"], [class*="badge"]) * { color: inherit !important; -webkit-text-fill-color: currentColor; }
html.s7 #app .s7-hero :is([class$="-hero-top"], [class$="-hero-tr"], [class$="-header-side"]) > [class$="-eyebrow"] { color: var(--s7-amber) !important; }
html.s7 #app .s7-hero [class$="-icon-wrap"] { display: none !important; }
/* мелкий акцент на петроле: ссылки-«Смотреть», бейджи, подписи — янтарь; на оранжевой заливке — чёрный */
html.s7 #app :is(.s7-pl, .s7-tile) :is([class$="-link"], [class$="-role"], [class$="-price"], [class$="-genter"]) { color: var(--s7-amber) !important; }
html.s7 #app .s7-tile :is([class$="-cta"], [class$="-desc"]) { color: var(--s7-text2) !important; }
html.s7 #app .s7-pl [class$="-hit"] { color: var(--c4-off) !important; }
html.s7 #app .s7-plate :is([class$="-note"], [class$="-hint"], [class$="-meta"]) { color: var(--c4-off2) !important; }
html.s7 #app .s7-pl :is(.active, .on)[class*="chip"] { background: var(--c4-or) !important; border-color: var(--c4-or) !important; color: var(--c4-ink) !important; }
html.s7 #app .s7-pl :is(.active, .on)[class*="chip"] * { color: inherit !important; }
html.s7 #app :is(.vg-badge, .vgd-badge) { color: var(--on-accent) !important; background: var(--c4-or) !important; }   /* бейдж «Новинка/Хит» — оранжевый всегда, текст чёрный */
html.s7 #app :is(.vgd-cat-chip, .legal-page th, .lp-tools-link, .vg-eyebrow) { color: var(--accent-ember) !important; }
html.s7[data-theme="dark"] #app :is(.vgd-cat-chip, .legal-page th, .vg-eyebrow) { color: var(--s7-amber-hi) !important; }
html.s7:not([data-theme="dark"]) #app .lp-tools-link { color: var(--s7-ember-deep) !important; }
html.s7 #app .s7-pl .lp-badge:not(.lp-badge-hot) { color: var(--s7-text2) !important; }
html.s7 #app .s7-pl .lp-badge-hot { color: var(--c4-ink) !important; }

html.s7 #app .s7-pl :is(.ls-pre, .ls-ba-text, .ls-dict-body) { color: var(--s7-text) !important; }
html.s7 #app .s7-pl .ls-ba-badge { background: rgba(242, 238, 230, .1) !important; color: var(--s7-text2) !important; }
html.s7 #app .s7-pl .ls-ba-col.after .ls-ba-badge { background: var(--c4-or) !important; color: var(--c4-ink) !important; }
/* баланс студий в боковой колонке (Мультстудия, Клипы) и зелёные статусы на петроле */
html.s7 #app :is(.ct-bal2, .cp-bal2) :is(span, i, b) { color: var(--text-primary) !important; }
html.s7[data-theme="dark"] #app :is(.logs-badge.ok, .s7-pl b[style*="success"]) { color: #8DE6C6 !important; }
html.s7[data-theme="dark"] #app .logs-link { color: var(--s7-amber) !important; }
/* шапка каталога /generators: стекло было светлым и в тёмной теме — ссылки «пропадали» */
html.s7-vg[data-theme="dark"] #app .vg-hdr { background: rgba(15, 52, 68, .94) !important; border-bottom-color: rgba(224, 149, 90, .3) !important; }
/* светлая тема: плитки каталога и переключатели «Моего бренда» — тёмные постеры, как в тёмной (текст на них светлый) */
html.s7:not([data-theme="dark"]) #app .vg-card.s7-tile { background: var(--c4-plate) !important; }
html.s7:not([data-theme="dark"]) #app .s7-pl :is(.bk-toggle.on, .bk-toggle.active) { background: linear-gradient(160deg, rgba(23, 74, 94, .85), rgba(15, 52, 68, .75)) !important; border-color: var(--c4-or) !important; }
/* Видео-студия (тёмная): контурная кнопка и зелёные «2 из …» на панели — светлее, мелкий текст ≥ 4,5:1 */
html.s7-st[data-theme="dark"] #app .st-cta-ghost { color: var(--s7-amber-hi) !important; border-color: var(--s7-amber-hi) !important; }
html.s7-st[data-theme="dark"] #app .st-wrap :is(.st-badge, .st-quota b) { color: #74DCB6 !important; }
/* каталог и мелкий акцент на светлом (iPhone-замер): кнопка слайда — чёрный текст; приглушённый текст на светлом петроле — светлее;
   мелкий акцент-текст на сером «бумажном» фоне — глубже, чтобы держать 4,5:1 */
html.s7 #app .vg-hslide-btn { color: var(--on-accent) !important; }
html.s7-vg[data-theme="dark"] #app :is(.vg-hero-sub, .vg-cat-count) { color: var(--text-secondary) !important; }
html.s7:not([data-theme="dark"]) #app :is(.vg-eyebrow, .vgd-cat-chip, .legal-page th, .wn-page a:not([class]):not(.s7-pl *)) { color: var(--s7-ember-deep) !important; }

/* 8 · ТЁМНАЯ ТЕМА БЕЗ «ЧЁРНОГО» (правило владельца 03.10, образец css/chat-dark-lift.css): холст — светлый петроль
   (--bg-secondary → --bg-tertiary) с тёплым светом сверху, карточки — --bg-tertiary с медной кромкой, на каждом экране —
   сильная оранжевая плоскость; акцент-текст на светлом петроле — светлый янтарь, приглушённый — вторичный (≥ 4,5:1) */
html.s7[data-theme="dark"] #app {
  background: radial-gradient(70% 420px at 50% -60px, rgba(var(--accent-rgb), .2), transparent 70%), var(--bg-secondary) !important;
  --accent-ember: var(--accent-ember-light); --text-muted: var(--text-secondary);
}
html.s7[data-theme="dark"] #app :is(.s7-pl, .s7-tile) {
  --s7-bg: #1B5368; --s7-bg2: #1B5368; --s7-bg3: #1E5970; --s7-muted: #C5D2D8; --text-muted: #C5D2D8;
}
html.s7[data-theme="dark"] #app .s7-pl {
  background: var(--bg-tertiary) !important;   /* карточка = --bg-tertiary ровно: светлее — и приглушённый/янтарь < 4,5:1 */
  border-color: var(--edge-copper, rgba(224, 149, 90, .45)) !important; box-shadow: var(--shadow-2) !important;
}
html.s7[data-theme="dark"] #app .s7-pl .s7-pl { background: rgba(242, 238, 230, .05) !important; }
html.s7[data-theme="dark"] #app .s7-tile { background-color: var(--bg-tertiary) !important; }
html.s7[data-theme="dark"] #app .vg-card.s7-tile { background: var(--bg-tertiary) !important; }
/* ссылки на светлом петроле — светлый текст с оранжевым подчёркиванием (янтарь там < 4,5:1) */
html.s7[data-theme="dark"] #app :is(p, li, td, dd, .s7-pl) a:not([class]) {
  color: var(--text-primary) !important; text-decoration: underline !important; text-decoration-color: var(--accent-fill) !important;
  text-decoration-thickness: 2px; text-underline-offset: .18em; }

/* поле постера: перенесённые кнопки шапки или одно настоящее число — оранжевая плоскость рядом с плашкой */
html.s7 #app .s7-hero > .s7-field {
  position: relative; z-index: 2; align-self: flex-start; display: flex; flex-wrap: wrap; align-items: center; gap: calc(12px * var(--k, 1));
  max-width: min(100%, calc(720px * var(--k, 1))); padding: calc(16px * var(--k, 1)) calc(20px * var(--k, 1)); border-radius: calc(22px * var(--k, 1));
  background: var(--c4-field); color: var(--c4-ink); box-shadow: 0 calc(26px * var(--k, 1)) calc(50px * var(--k, 1)) calc(-30px * var(--k, 1)) rgba(242, 107, 33, .6);
  --text-primary: var(--c4-ink); --text-secondary: var(--s7-o-text2); --text-muted: var(--s7-o-muted);
}
html.s7 #app .s7-hero > .s7-field > * { margin: 0 !important; }
html.s7 #app .s7-hero > .s7-field :is(a, button)[class] {
  background: var(--c4-plate) !important; color: var(--c4-off) !important; border: 1px solid rgba(15, 52, 68, .9) !important; box-shadow: none !important;
  -webkit-text-fill-color: currentColor; }
html.s7 #app .s7-hero > .s7-field :is(a, button)[class] * { color: inherit !important; }
html.s7 #app .s7-hero > .s7-field :is(span, small, p, [class$="-note"]):not(button *):not(a *) { color: var(--c4-ink) !important; }
html.s7 #app .s7-hero > .s7-field :is([class$="-steps"], [class$="-steps"] > span) { background: transparent !important; border-color: rgba(17, 17, 17, .25) !important; color: var(--c4-ink) !important; }
html.s7 #app .s7-hero > .s7-field.s7-field-n { flex-direction: column; align-items: flex-start; gap: calc(4px * var(--k, 1)); min-width: calc(220px * var(--k, 1)); }
html.s7 #app .s7-field-n b { font: 200 calc(64px * var(--k, 1))/.9 var(--font-num); letter-spacing: -.045em; color: var(--c4-ink); }
html.s7 #app .s7-field-n span { font: 600 calc(11px * var(--k, 1))/1.3 var(--font-num); letter-spacing: .22em; text-transform: uppercase; color: var(--c4-ink); }
/* на ПК поле — справа внизу постера (как поле баланса кабинета), на телефоне — под плашкой */
@media (min-width: 761px) {
  html.s7 #app .s7-hero:not(.s7-narrow) > .s7-field { position: absolute; right: calc(28px * var(--k, 1)); bottom: calc(28px * var(--k, 1)); max-width: min(38%, calc(460px * var(--k, 1))); }
}

/* оранжевые полосы и поля: станции, вкладки, фильтры и выбранное — по правилам оранжевой поверхности */
html.s7 #app .s7-or .s7-h { color: var(--c4-ink) !important; }
html.s7 #app .s7-or .s7-h > .s7-no { color: var(--c4-petrol2); }
html.s7 #app .s7-or .s7-h > .s7-no::after { color: var(--c4-off); }
html.s7 #app .s7-or :is(.active, .on, [aria-pressed="true"], [aria-selected="true"]):is(a, button, [class*="chip"], [class*="tab"]) {
  background: var(--c4-off) !important; color: var(--c4-ink) !important; border-color: var(--c4-off) !important; }
html.s7 #app .s7-or :is(.active, .on, [aria-pressed="true"], [aria-selected="true"]) * { color: var(--c4-ink) !important; }
html.s7 #app .s7-or :is(input, textarea, select) { background: rgba(255, 250, 244, .7) !important; color: var(--c4-ink) !important; border-color: rgba(17, 17, 17, .22) !important; }
html.s7 #app .s7-or :is(input, textarea)::placeholder { color: rgba(17, 17, 17, .6) !important; }
html.s7 #app .s7-or img { filter: none; }
@media (max-width: 760px) { html.s7 #app .s7-hero > .s7-field { width: 100%; max-width: 100%; padding: 14px 16px; } html.s7 #app .s7-field-n b { font-size: 48px; } }
html.s7 #app .s7-hero.s7-narrow > .s7-field { position: relative; right: auto; bottom: auto; }
/* рекомендации робота читаемости 02.10 (CONTRAST_2026_10_02.md, «Волна 7») — то, что не закрыли поверхности выше */
html.s7 #app :is(.lp-what, .lp-badge-soft) { opacity: 1 !important; }
html.s7 #app .cp-stepc-n { opacity: 1 !important; background: none !important; -webkit-text-fill-color: currentColor !important; color: var(--s7-amber) !important; }
html.s7 #app .igh-gcard.soon :is([class$="-gdesc"], [class$="-gsoon"]) { opacity: .85 !important; }
html.s7 #app .s7-pl .ct-case-tag { color: var(--s7-text2) !important; }
html.s7:not([data-theme="dark"]) #app .cp-side-brand em { background: none !important; -webkit-text-fill-color: var(--s7-ember-deep) !important; }
/* второй замер робота (03.10, тёмная): подписи с прозрачностью и подложки бейджей на светлом петроле */
html.s7[data-theme="dark"] #app .s7-pl :is(.ct-case-steps span, .ct-case-tag) { color: var(--s7-text2) !important; opacity: 1 !important; }
html.s7 #app .s7-pl [class$="-hit"] { background: rgba(15, 52, 68, .7) !important; }
html.s7 #app .vg-hslide-btn { background: var(--accent-fill) !important; }
html.s7[data-theme="dark"] #app .cp-side-brand em { background: none !important; -webkit-text-fill-color: var(--accent-ember-light) !important; color: var(--accent-ember-light) !important; }
html.s7 #app .s7-or :is(input, textarea)::placeholder { color: rgba(17, 17, 17, .74) !important; }
html.s7 #app .igh-gcard.soon :is([class$="-gdesc"], [class$="-gsoon"]) { opacity: .95 !important; }
html.s7 #app .s7-pl .logs-badge.ok { color: #8DE6C6 !important; }
html.s7:not([data-theme="dark"]) #app td .logs-badge.ok { color: #145C3F !important; }
html.s7 #app .ls-lesson.soon :is(.ls-lesson-num, .ls-lesson-meta, .ls-lesson-title) { opacity: .95 !important; }
html.s7 #app [class*="chip"] [class$="-sub"] { opacity: .9 !important; }
/* третий замер (03.10): бейджи на светлых плитках — светлым; подписи слайдов каталога над фото — на петроль-таблетке */
html.s7.s7-p-learn-music #app .s7-pl .ls-lesson-badge { color: var(--c4-off) !important; }
html.s7[data-theme="dark"] #app :is(.ak-price-h, .vg-eyebrow) { color: #FAC77E !important; }
html.s7 #app .vg-hslide-cat { opacity: 1 !important; background: rgba(15, 52, 68, .94); padding: 3px 10px; border-radius: 999px; }
html.s7[data-theme="dark"] #app .nb2-tab:not(.active) i, html.s7[data-theme="dark"] #app .s7-pl .nb2-tab:not(.active) i { color: #E2E8EB !important; }
html.s7[data-theme="dark"] #app .ls-kick { color: var(--accent-ember-light) !important; }
html.s7[data-theme="dark"] #app #ig-nb2-mode-chips .nb2-tab .nb2-tab-tx i { color: #E2E8EB !important; }