/* ═══════════════════════════════════════════════════════════════════════════════════════════════════════
   VAIMAN · VISUAL V2 · ВОЛНА 6 (01.10) — СТРАНИЦЫ ГЕНЕРАТОРОВ ПОДАЧЕЙ ГЛАВНОЙ (план владельца: «каждый генератор начинается
   с постера: большое оранжевое или петрольное поле, крупное название и настоящие работы этой модели, как станции на главной;
   разделы 01/02/03; живые наведения и появления»). Классы ставит js/gen-v6.js (html.g6, .g6-hero, .g6-st/.g6-or/.g6-pl,
   .g6-h). Токены цвета — из css/cabinet-v4.css (--c4-*); внутри плашек/полей токены темы ПЕРЕОПРЕДЕЛЯЮТСЯ на поверхности —
   тексты страниц сами берут нужный цвет в обеих темах. Светлая тема — «постер на бумаге». Логика страниц не тронута.
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════ */
:root { --g6-s-text: #F2EEE6; --g6-s-text2: #D3DCE0; --g6-s-muted: #B2C3CA; --g6-s-bg: #0F3444; --g6-s-bg2: #174A5E; --g6-s-bg3: #1B5368;
  --g6-s-inset: #0C2C3A; --g6-s-line: rgba(242, 238, 230, .16); --g6-s-amber: #F59B1F; --g6-o-text2: rgba(17, 17, 17, .78); --g6-o-muted: rgba(17, 17, 17, .64);
  --g6-o-line: rgba(17, 17, 17, .18); }

/* 1 · ПОСТЕР-СТАНЦИЯ: кадр полёта, петроль-плашка с огромным названием, оранжевое поле с ценой «от», веер настоящих работ */
html.g6 #app .g6-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; flex-wrap: nowrap !important; gap: calc(16px * var(--k, 1)) !important;
  min-height: calc(540px * var(--k, 1)) !important; padding: calc(40px * var(--k, 1)) !important; margin: calc(10px * var(--k, 1)) 0 calc(28px * 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;
  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.g6 #app .g6-hero::before, html.g6 #app .g6-hero::after { content: none !important; display: none !important; }
html.g6 #app .g6-hero > .g6-bg { position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg, rgba(15, 52, 68, .55) 0%, rgba(15, 52, 68, .15) 45%, rgba(15, 52, 68, 0) 70%),
  var(--g6-bg) center / cover no-repeat, var(--c4-petrol2); transform: scale(1.05); animation: g6zoom 2.4s cubic-bezier(.2, .8, .2, 1) forwards; }
@keyframes g6zoom { to { transform: none; } }
html.g6 #app .g6-hero :is(.vgen-hero-ic, [class$="-hero-ic"]) { display: none !important; }
/* текст — петроль-плашка с оранжевым язычком (как плашки станций главной) */
html.g6 #app .g6-hero > :is([class$="-hero-l"], [class$="-hero-in"]) {
  position: relative; z-index: 2; max-width: min(56%, calc(640px * var(--k, 1))) !important; width: auto !important; flex: none !important; margin: 0 !important; align-self: flex-start !important;
  padding: calc(28px * var(--k, 1)) calc(30px * var(--k, 1)) calc(26px * var(--k, 1)) !important; text-align: left !important;
  border-radius: calc(24px * var(--k, 1)); background: var(--c4-plate); border: 1px solid var(--c4-edge); box-shadow: 0 calc(30px * var(--k, 1)) calc(60px * var(--k, 1)) calc(-30px * var(--k, 1)) rgba(4, 22, 30, .8);
}
html.g6 #app .g6-hero > :is([class$="-hero-l"], [class$="-hero-in"])::before { content: ''; 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.g6 #app .g6-hero [class$="-eyebrow"] { color: var(--c4-amber) !important; }
html.g6 #app .g6-hero h1[class$="-title"] { margin: calc(12px * var(--k, 1)) 0 0 !important; font: 700 clamp(calc(48px * var(--k, 1)), 6vw, calc(112px * var(--k, 1)))/.88 var(--font-display) !important;
  text-transform: uppercase; letter-spacing: .002em !important; color: var(--c4-off) !important; text-align: left !important; }
html.g6 #app .g6-hero h1[class$="-title"] em { font-style: normal; color: var(--c4-or) !important; -webkit-text-fill-color: currentColor !important; background: none !important; }
html.g6 #app .g6-hero :is([class$="-slogan"], [class$="-sub"]) { color: var(--c4-off2) !important; text-align: left !important; max-width: 38em; }
/* оранжевое поле: баланс + цена «от» (их строят страница и pages-v2.js — переставляем только видом) */
html.g6 #app .g6-hero > [class$="-hero-r"] { align-self: flex-start !important; position: relative !important; z-index: 2; inset: auto !important; flex: none !important; width: auto !important; min-width: 0 !important; min-height: 0 !important;
  display: flex !important; flex-direction: row !important; align-items: center !important; gap: calc(16px * var(--k, 1)) !important; padding: calc(14px * var(--k, 1)) calc(20px * var(--k, 1)) !important;
  border-radius: calc(22px * var(--k, 1)) !important; background: var(--c4-field) !important; color: var(--c4-ink) !important; }
html.g6 #app .g6-hero > [class$="-hero-r"]::before, html.g6 #app .g6-hero > [class$="-hero-r"]::after { content: none !important; }
html.g6 #app .g6-hero > .v2-from, html.g6 #app .g6-hero > [class$="-hero-r"] .v2-from { position: relative !important; inset: auto !important; z-index: 2; margin: 0 !important; }
html.g6 #app .g6-hero > .v2-from { padding: calc(12px * var(--k, 1)) calc(22px * var(--k, 1)) !important; border-radius: calc(22px * var(--k, 1)) !important; background: var(--c4-field) !important; color: var(--c4-ink) !important; }
html.g6 #app .g6-hero .v2-from b { font: 200 calc(54px * var(--k, 1))/.9 var(--font-num) !important; color: var(--c4-ink) !important; }
html.g6 #app .g6-hero > :is([class$="-hero-tr"], [class*="balance-chip"]) { position: absolute !important; z-index: 3; top: calc(24px * var(--k, 1)) !important; right: calc(24px * var(--k, 1)) !important; left: auto !important; bottom: auto !important; height: auto !important; min-height: 0 !important; margin: 0 !important; }
/* веер настоящих работ модели (галерея VAIMAN): три постера 3:4, наведение — карточка выпрямляется и поднимается */
html.g6 #app .g6-works { position: absolute; z-index: 1; right: calc(48px * var(--k, 1)); bottom: calc(40px * var(--k, 1)); top: calc(92px * var(--k, 1)); width: min(44%, calc(660px * var(--k, 1))); }
html.g6 #app .g6-work { position: absolute; bottom: 0; width: 46%; aspect-ratio: 3 / 4; max-height: 100%; margin: 0; border-radius: calc(20px * var(--k, 1)); overflow: hidden;
  border: 1px solid var(--c4-edge); background: var(--c4-petrol2); box-shadow: 0 calc(30px * var(--k, 1)) calc(60px * var(--k, 1)) calc(-24px * var(--k, 1)) rgba(4, 22, 30, .85);
  transform-origin: 50% 100%; transition: transform .45s cubic-bezier(.2, .8, .2, 1), z-index 0s; animation: g6in .8s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i) * 110ms + 200ms); }
html.g6 #app .g6-work:nth-child(1) { left: 0; transform: rotate(-7deg) translateY(4%); z-index: 1; }
html.g6 #app .g6-work:nth-child(2) { left: 27%; transform: rotate(0deg); z-index: 3; }
html.g6 #app .g6-work:nth-child(3) { right: 0; transform: rotate(7deg) translateY(4%); z-index: 2; }
html.g6 #app .g6-n1 .g6-work { left: auto; right: 10%; width: 60%; transform: rotate(-3deg); }
html.g6 #app .g6-n2 .g6-work:nth-child(2) { left: auto; right: 0; transform: rotate(5deg) translateY(2%); }
html.g6 #app .g6-work:hover { transform: rotate(0) translateY(-4%) scale(1.03); z-index: 5; }
html.g6 #app .g6-work img { display: block; width: 100%; height: 100%; object-fit: cover; }
html.g6 #app .g6-work figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: calc(30px * var(--k, 1)) calc(14px * var(--k, 1)) calc(12px * var(--k, 1)); background: linear-gradient(180deg, transparent, rgba(15, 52, 68, .92)); color: var(--c4-off); }
html.g6 #app .g6-work figcaption small { display: block; font: 600 calc(9.5px * var(--k, 1))/1 var(--font-num); letter-spacing: .18em; text-transform: uppercase; color: var(--c4-amber); }
html.g6 #app .g6-work figcaption b { display: block; margin-top: 4px; font: 700 calc(16px * var(--k, 1))/1 var(--font-display); text-transform: uppercase; }
html.g6 #app .g6-work figcaption b::before { content: '.'; color: var(--c4-or); }
@keyframes g6in { from { opacity: 0; translate: 0 calc(30px * var(--k, 1)); } to { opacity: 1; translate: 0 0; } }

/* 2 · СТАНЦИИ РАБОЧЕЙ ЗОНЫ: 01 «.СТУДИЯ» — оранжевое поле с петроль-режимами; 02 «.НАСТРОЙКИ», 03 «.РЕЗУЛЬТАТ» и прочие карточки —
   петроль-плашки с медной кромкой (в ОБЕИХ темах: токены тёмной поверхности переопределены на плашке) */
html.g6 #app .g6-page :is(.g6-pl, .g6-or [class$="-mode"], .g6-or [class*="-mode "], .g6-or [class$="-tab"], .g6-or [class*="-tab "]) {
  --text-primary: var(--g6-s-text); --text-secondary: var(--g6-s-text2); --text-muted: var(--g6-s-muted); --bg-primary: var(--g6-s-bg); --bg-secondary: var(--g6-s-bg2);
  --bg-tertiary: var(--g6-s-bg3); --bg-inset: var(--g6-s-inset); --field-bg: var(--g6-s-inset); --border-light: var(--g6-s-line); --border-strong: var(--c4-edge);
  --accent-ember: var(--g6-s-amber); --chip-on-bg: var(--c4-off); --chip-on-fg: var(--c4-ink); --v2-card-bg: transparent; --v2-card-edge: var(--g6-s-line); --v2-mode-bg: rgba(242, 238, 230, .06);
  --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.g6 #app .g6-page .g6-pl {
  background: var(--c4-plate) !important; border: 1px solid var(--c4-edge) !important; border-radius: calc(26px * 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, .7) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
html.g6 #app .g6-page .g6-pl .g6-pl { background: transparent !important; border: 0 !important; box-shadow: none !important; }
/* 02.10: плашка, у которой страница не дала внутреннего отступа (js pad()) — свой отступ, чтобы рамка не лежала на тексте и слотах */
html.g6 #app .g6-page .g6-pad { padding: calc(18px * var(--k, 1)) calc(18px * var(--k, 1)) calc(20px * var(--k, 1)) !important; }
@media (max-width: 760px) { html.g6 #app .g6-page .g6-pad { padding: 16px 14px 18px !important; } }
/* длинная подпись секции («— ФОТО ОБЯЗАТЕЛЬНО, ВИДЕО И АУДИО ПО ЖЕЛАНИЮ») — отдельной строкой, а не хвостом на краю */
html.g6 #app .g6-page .g6-pad > label > span[style] { display: block; margin-top: 4px; line-height: 1.35; }   /* вложенная карточка — без второй рамки */
html.g6 #app .g6-page .g6-or {
  --text-primary: var(--c4-ink); --text-secondary: var(--g6-o-text2); --text-muted: var(--g6-o-muted); --border-light: var(--g6-o-line); --accent-ember: var(--c4-petrol2);
  --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(--c4-ink); background: var(--c4-field) !important; border: 0 !important; border-radius: calc(28px * var(--k, 1)) !important;
  padding: calc(26px * 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.g6 #app .g6-page .g6-or :is([class$="-mode"], [class*="-mode "], [class$="-tab"], [class*="-tab "]) {
  background: var(--c4-plate) !important; border: 1px solid rgba(15, 52, 68, .9) !important; color: var(--c4-off) !important; border-radius: calc(20px * var(--k, 1)) !important;
  transition: transform .3s cubic-bezier(.2, .8, .2, 1), box-shadow .3s ease !important;
}
@media (hover: hover) { html.g6 #app .g6-page .g6-or :is([class$="-mode"], [class*="-mode "], [class$="-tab"], [class*="-tab "]):hover { transform: translateY(-5px); box-shadow: 0 calc(20px * var(--k, 1)) calc(30px * var(--k, 1)) calc(-16px * var(--k, 1)) rgba(15, 52, 68, .8); } }   /* 03.10 Грок №15: в Safari :hover «залипает» после тапа */
html.g6 #app .g6-page .g6-or :is([class$="-mode"], [class*="-mode "], [class$="-tab"], [class*="-tab "]).active {
  --text-primary: var(--c4-ink); --text-secondary: var(--g6-o-text2); --text-muted: var(--g6-o-muted); --espresso: var(--c4-ink); --cocoa: var(--g6-o-text2); --taupe: var(--g6-o-muted);
  background: var(--c4-off) !important; border-color: var(--c4-off) !important; color: var(--c4-ink) !important;
}
html.g6 #app .g6-page .g6-or :is([class$="-mode"], [class*="-mode "], [class$="-tab"], [class*="-tab "]).active * { color: inherit; }
html.g6 #app .g6-page .g6-own { display: none !important; }
/* заголовок станции: номер Montserrat 200 + огромный Oswald с точкой */
html.g6 #app .g6-h { display: flex; align-items: baseline; gap: calc(14px * var(--k, 1)); margin: 0 0 calc(16px * var(--k, 1)); color: var(--text-primary); }
html.g6 #app .g6-h b { font: 200 calc(46px * var(--k, 1))/.8 var(--font-num); letter-spacing: -.04em; color: var(--accent-ember); }
html.g6 #app .g6-h span { font: 700 clamp(calc(32px * var(--k, 1)), 3.4vw, calc(58px * var(--k, 1)))/.9 var(--font-display); text-transform: uppercase; letter-spacing: .005em; }
html.g6 #app .g6-h span::before { content: '.'; color: var(--c4-or); }
html.g6 #app .g6-or .g6-h span::before { color: var(--c4-off); }
html.g6 #app .g6-or .g6-h b { color: var(--c4-petrol2); }
/* кнопка «Создать» на петроле — оранжевая пилюля как на главной (вид волны 3 сохраняется, только рамка ярче) */
html.g6 #app .g6-page [class$="-generate-btn"], html.g6 #app .g6-page [class$="-generate"] { box-shadow: 0 calc(18px * var(--k, 1)) calc(36px * var(--k, 1)) calc(-16px * var(--k, 1)) rgba(245, 122, 30, .75) !important; }
/* 3 · движение: станции и карточки появляются при прокрутке (прозрачностью — без transform: внутри бывают окна) */
html.g6-motion #app .g6-rv { opacity: 0; transition: opacity .7s ease; }
html.g6-motion #app .g6-rv.g6-in { opacity: 1; }

/* 4 · ТЕЛЕФОН: постер столбиком — кадр-вертикаль, плашка, оранжевое поле, работы рядом строкой */
@media (max-width: 760px) {
  html.g6 #app .g6-hero { min-height: 0 !important; padding: 150px 14px 14px !important; border-radius: 24px !important; gap: 12px !important; }
  html.g6 #app .g6-hero > .g6-bg { background: linear-gradient(180deg, rgba(15, 52, 68, 0) 30%, rgba(15, 52, 68, .6) 100%), var(--g6-bgm) center 20% / cover no-repeat, var(--c4-petrol2); }
  html.g6 #app .g6-hero > :is([class$="-hero-l"], [class$="-hero-in"]) { max-width: 100% !important; padding: 20px 18px 18px !important; }
  html.g6 #app .g6-hero h1[class$="-title"] { font-size: clamp(38px, 12vw, 54px) !important; }
  html.g6 #app .g6-works { position: relative; inset: auto; order: 3; width: 100%; height: auto; aspect-ratio: 2.25 / 1; }
  html.g6 #app .g6-work { width: 32%; top: 0; height: 100%; max-height: none; }
  html.g6 #app .g6-work:nth-child(2) { left: 34%; } html.g6 #app .g6-work:nth-child(3) { right: 0; }
  html.g6 #app .g6-work figcaption { padding: 18px 8px 8px; }
  html.g6 #app .g6-work figcaption b { font-size: 12px; }
  html.g6 #app .g6-hero .v2-from b { font-size: 40px !important; }
  html.g6 #app .g6-page .g6-or { padding: 16px !important; border-radius: 22px !important; }
  html.g6 #app .g6-h b { font-size: 32px; }
  html.g6 #app .g6-h span { font-size: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  html.g6 #app .g6-hero > .g6-bg, html.g6 #app .g6-work { animation: none !important; }
  html.g6 #app .g6-work, html.g6 #app .g6-page .g6-or [class$="-mode"] { transition: none !important; }
}
/* поля ввода и зоны загрузки внутри плашек — утопленный петроль (страницы задают им светлую подложку в светлой теме) */
html.g6 #app .g6-page .g6-pl :is(textarea, input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), select) {
  background: var(--g6-s-inset) !important; color: var(--g6-s-text) !important; border-color: var(--g6-s-line) !important; }
html.g6 #app .g6-page .g6-pl :is(textarea, input)::placeholder { color: var(--g6-s-muted) !important; opacity: 1; }
html.g6 #app .g6-page .g6-pl :is([class*="upload"], [class*="drop"], [class*="-add"]):not(input) { background-color: rgba(242, 238, 230, .05) !important; border-color: rgba(224, 149, 90, .5) !important; color: var(--g6-s-text2) !important; }
/* обёртки колонок (инспектор, боковая панель) — без своей подложки: плашки внутри несут вид сами */
html.g6 #app .g6-page :is([class$="-inspector"], [class$="-aside"], [class$="-sidebar"]) { background: transparent !important; border-color: transparent !important; box-shadow: none !important; }

/* 5 · ХАБЫ /photo /video /music — карточки моделей постерами: настоящая работа модели во всю карточку (галерея VAIMAN),
   у кого её нет — петроль-постер со значком; название Oswald, цена — оранжевая пилюля; подъём при наведении */
html.g6 #app .vhub-card.g6-hc {
  --text-primary: var(--g6-s-text); --text-secondary: var(--g6-s-text2); --text-muted: var(--g6-s-muted);
  position: relative; isolation: isolate; overflow: hidden; align-items: flex-start !important; justify-content: flex-end !important; text-align: left !important;
  min-height: calc(300px * var(--k, 1)); padding: calc(18px * var(--k, 1)) !important; border-radius: calc(24px * var(--k, 1)) !important;
  background: var(--c4-plate) !important; border: 1px solid var(--c4-edge) !important; color: var(--c4-off) !important;
  box-shadow: 0 calc(26px * var(--k, 1)) calc(44px * var(--k, 1)) calc(-28px * var(--k, 1)) rgba(4, 22, 30, .75) !important;
  transition: transform .35s cubic-bezier(.2, .8, .2, 1), opacity .7s ease !important; transition-delay: 0s, calc(var(--i, 0) * 70ms) !important;
}
html.g6 #app .vhub-card.g6-hc:hover { transform: translateY(-6px) !important; border-color: var(--c4-or) !important; }
html.g6 #app .vhub-card.g6-hc-has { aspect-ratio: 3 / 4; min-height: 0; }
html.g6 #app .vhub-card .g6-hc-img { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2, .8, .2, 1); }
html.g6 #app .vhub-card.g6-hc:hover .g6-hc-img { transform: scale(1.05); }
html.g6 #app .vhub-card.g6-hc-has::after { content: ''; position: absolute; z-index: -1; inset: 35% 0 0; background: linear-gradient(180deg, transparent, rgba(15, 52, 68, .94) 70%); pointer-events: none; }
html.g6 #app .vhub-card.g6-hc-has :is(.vhub-icon, .vhub-chip) { display: none !important; }   /* хаб видео: значок — .vhub-chip */
html.g6 #app .vhub-card.g6-hc :is(.vhub-icon, .vhub-chip) { margin: 0 0 auto !important; }
html.g6 #app .vhub-card.g6-hc .vhub-name { font: 700 calc(22px * var(--k, 1))/1 var(--font-display) !important; text-transform: uppercase; letter-spacing: .01em; color: var(--c4-off) !important; text-align: left; }
html.g6 #app .vhub-card.g6-hc .vhub-name::before { content: '.'; color: var(--c4-or); }
html.g6 #app .vhub-card.g6-hc .vhub-desc { color: var(--c4-off2) !important; text-align: left; }
html.g6 #app .vhub-card.g6-hc .vhub-foot { width: 100%; }
html.g6 #app .vhub-card.g6-hc .vhub-cost { padding: calc(5px * var(--k, 1)) calc(12px * var(--k, 1)); border-radius: 999px; background: var(--c4-or); color: var(--c4-ink) !important; font-weight: 700; }
html.g6 #app .vhub-card.g6-hc .vhub-enter { background: var(--c4-or) !important; color: var(--c4-ink) !important; border: 0 !important; }
html.g6 #app .vhub-card.g6-hc .vhub-new { background: var(--c4-off) !important; color: var(--c4-ink) !important; }
html.g6-motion #app .vhub-card.g6-rv:not(.g6-in) { opacity: 0; }

/* 6 · ТИРАЖ: длинное имя модели не рвётся посреди слова (было «DREAMACTO|R», «UPSCA|LE») — шрифт заголовка ужимает
   gen-v6.js по ширине плашки; на узких страницах (герой уже 820 px на ПК) плашка — во всю ширину героя */
html.g6 #app .g6-hero h1[class$="-title"] { overflow-wrap: normal !important; word-break: normal !important; hyphens: manual !important; }
html.g6 #app .g6-hero.g6-narrow > :is([class$="-hero-l"], [class$="-hero-in"]) { max-width: 100% !important; align-self: stretch !important; }
/* 7 · хабы, подпись постера: имя + строка + цена — у нижнего края над градиентом (было: имя в шапке, поверх лица);
   на телефоне постер тоже колонкой (страница там раскладывает карточку сеткой «значок | текст»); имя не обрезается */
html.g6 #app .vhub-card.g6-hc-has { display: flex !important; flex-direction: column !important; }
html.g6 #app .vhub-card.g6-hc-has .vhub-name { margin-top: auto !important; }
html.g6 #app .vhub-card.g6-hc-has > :is(.vhub-name, .vhub-desc) { align-self: flex-start !important; text-align: left !important; }   /* телефон видео-хаба: было align-self:end → справа */
html.g6 #app .vhub-card.g6-hc-has :is(.vhub-foot, .vhub-cost) { margin-top: calc(12px * var(--k, 1)) !important; }
html.g6 #app .vhub-card.g6-hc .vhub-name { height: auto !important; min-height: 0 !important; white-space: normal !important; overflow: visible !important; text-overflow: clip !important; justify-content: flex-start !important; }
@media (max-width: 760px) {
  html.g6 #app .vhub-card.g6-hc-has { aspect-ratio: 16 / 11; }
  html.g6 #app .vhub-card.g6-hc-has::after { inset: 15% 0 0; background: linear-gradient(180deg, transparent, rgba(15, 52, 68, .92) 55%); }   /* подпись читается и на пёстром кадре */
  html.g6 #app .vhub-card.g6-hc .vhub-name { font-size: 19px !important; }
}

/* 02.10 (Мария, Seedance 2.0 на iPhone): подпись шага «03 ⚡ Сила генерации — СКОРОСТЬ И КАЧЕСТВО» — хвост переносился под
   квадрат номера. На телефоне пояснение — своей строкой; чипы Апскейла — длинное «Четырёхкратное» переносится внутри чипа. */
@media (max-width: 760px) {
  html.g6 #app .g6-page .sd2-label:has(> .sd2-step) > span[style] { display: block; margin-top: 4px; line-height: 1.35; }
  html.g6 #app .g6-page .ups-chip { min-width: 0; }
  html.g6 #app .g6-page .ups-chip-sub { overflow-wrap: anywhere; hyphens: auto; }
}

/* 02.10 (сигнал чата «AI ЧАТЫ»): кнопка «Вставить» (vm-paste) на петроль-плашке была #B8460A — светлый акцент-текст на тёмном
   (контраст ≈ 2,3:1). На плашке — янтарь поверхности. Счётчик символов поверх поля наезжал на длинный промпт — полю нижний отступ. */
html.g6 #app .g6-page .g6-pl .vm-paste-btn, html.g6 #app .g6-page .g6-st .vm-paste-btn {
  color: #F7B25A !important; background: rgba(245, 122, 30, .14) !important; border-color: rgba(245, 155, 31, .45) !important;
}
/* 02.10 (второй сигнал: Seedance 2.0 на iPhone «Улучшить» наезжает на текст): в Safari нижний отступ поля прокручивается вместе
   с текстом — кнопки и счётчик ПОВЕРХ поля всё равно закрывают строки. Выносим их из поля: строка под полем (кнопка слева, счётчик справа). */
/* 03.10 (ревизия Грока №3, №17): строку ставит класс g6-tarow из gen-v6.js rows() — :has() по концу атрибута class ломался на
   «sdp-char-counter warn» (>4000 знаков счётчик снова ложился на текст) и не работает в iOS < 15.4 */
html.g6 #app .g6-page .g6-tarow {
  display: flex !important; flex-wrap: wrap; align-items: center; gap: calc(8px * var(--k, 1)) calc(10px * var(--k, 1));
}
html.g6 #app .g6-page .g6-tarow > textarea { flex: 1 1 100%; order: 0; min-width: 0; max-width: 100%; }
html.g6 #app .g6-page .g6-tarow > :not(textarea):not(.vm-paste-btn) {
  position: static !important; inset: auto !important; transform: none !important; order: 2; margin: 0 !important;
}
html.g6 #app .g6-page .g6-tarow > .g6-cnt { order: 3; margin-left: auto !important; width: auto !important; text-align: right !important; }

/* ═══ 02.10 ЧИТАЕМОСТЬ — contrast_scan.py (WCAG 4,5:1, крупный 3:1), правила ПОВЕРХНОСТЕЙ; токены ember-light не тронуты ═══ */
/* оранжевое поле студии (.g6-or): приглушённый чёрный 64 % давал 3,7:1 → 80 % (≈5:1) */
html.g6 #app .g6-page .g6-or { --g6-o-muted: rgba(17, 17, 17, .8); --g6-o-text2: rgba(17, 17, 17, .86); --text-muted: var(--g6-o-muted); --taupe: var(--g6-o-muted); --text-secondary: var(--g6-o-text2); --cocoa: var(--g6-o-text2); }
/* шаг-«плашка» 01/02 — оранжевая заливка: цифра чёрная (было янтарь по оранжевому 1,1:1) */
html.g6 #app .g6-page :is(.pxv-step, .go-step, .sd2-step, .lyr-step, .pers-step, .scov-step, .stem-step, .suno-step) { color: var(--c4-ink) !important; }
/* петроль-плашка: янтарь светлее (#F59B1F на верхе плашки #174A5E = 4,4:1 → #F7B25A 5,3:1); псевдонимы страниц --ember-d/-l
   считались от светлой темы (#A83F08 / #F57A1E по петролю 1,7–3,7:1) */
html.g6 #app .g6-page .g6-pl { --g6-s-amber: #F7B25A; --accent-ember: #F7B25A; --ember: #F7B25A; --accent-ember-dark: #F7B25A; --accent-ember-light: #F7B25A; --ember-d: #F7B25A; --ember-l: #F7B25A; }
/* выбранный чип на плашке — светлая пилюля: внутри тёмные тексты (было светло-серое по off-white 1,6:1) */
html.g6 #app .g6-page .g6-pl :is([class$="-chip"], [class*="-chip "]):not(.trn-ar-chip):is(.active, .on, [aria-pressed="true"]) {
  --text-primary: var(--c4-ink); --text-secondary: rgba(17, 17, 17, .82); --text-muted: rgba(17, 17, 17, .74); --espresso: var(--c4-ink);
  --cocoa: rgba(17, 17, 17, .82); --taupe: rgba(17, 17, 17, .74); --accent-ember: #B8460A; --ember: #B8460A; --ember-d: #9E3C08; --ember-l: #B8460A;
  --accent-ember-dark: #9E3C08; --accent-ember-light: #B8460A;
}
/* тёмная тема: активная вкладка-режим на плашке оранжевая — подпись чёрная (было 72 % → 4,35:1); в светлой она петроль — не трогаем */
html.g6[data-theme="dark"] #app .g6-page .g6-pl :is([class$="-tab"], [class*="-tab "]).active :is([class$="-tab-sub"]) { color: rgba(17, 17, 17, .84) !important; }
/* подписи «— КАЧЕСТВО И ЦЕНА» (opacity .55 → 3,5:1) и инлайн-пометки «— ВЫБЕРИТЕ РЕЖИМ» */
html.g6 #app .g6-page [class$="-label-cap"], html.g6 #app .g6-page :is(label, [class$="-label"]) > span[style*="opacity"] { opacity: .86 !important; }
html.g6 #app .g6-page .g6-or [class$="-label-cap"] { opacity: 1 !important; }
/* подсказки форматов в зонах загрузки («JPG, PNG, WebP» opacity .7 → 3,0–4,4:1) */
html.g6 #app .g6-page :is([class$="upload-hint"], [class$="zone-h"], [class$="upload-sub"], [class$="up-sub"], [class$="zone-hint"]) { opacity: 1 !important; }
/* светлая тема: «стеклянные» светлые подложки страниц внутри петроль-плашки (светлый текст по светлому 1,0–1,6:1) */
html.g6:not([data-theme="dark"]) #app .g6-page .g6-pl :is(.conv-drop-zone, .conv-effect, .fsw-zone, .ls-toggle-row, .lyr-fact, .lyr-hints, .lyr-photo-add,
  .pers-empty, .scov-upload-zone, .sd15-zone, .stem-empty, .stem-type-tab, .voc-empty, .voc-upload) { background: rgba(242, 238, 230, .06) !important; }
html.g6:not([data-theme="dark"]) #app .g6-page .g6-pl :is(.conv-effect, .stem-type-tab).active { background: rgba(245, 122, 30, .16) !important; }
/* шаги «Голоса»: активный шаг — оранжевая заливка, текст чёрный (было янтарь/белый по оранжевому 1,3–2,6:1) */
html.g6 #app .g6-page .voc-step.active, html.g6 #app .g6-page .voc-step.active * { color: var(--c4-ink) !important; }
html.g6 #app .g6-page .voc-step.active .voc-step-n { background: rgba(17, 17, 17, .12) !important; }
/* подпись работы в витрине героя: подложка темнее там, где стоит строка генератора (янтарь по фото 1,8:1) */
html.g6 #app .g6-work figcaption { background: linear-gradient(180deg, rgba(15, 52, 68, 0), rgba(15, 52, 68, .82) 36%, rgba(15, 52, 68, .96)); }
/* хабы: тёмная подложка под подписью карточки с картинкой — страница гасила ::after (opacity 0 до наведения), текст по фото 1,6:1 */
html.g6 #app .vhub-card.g6-hc-has::after { opacity: 1 !important; inset: 30% 0 0 !important; background: linear-gradient(180deg, rgba(15, 52, 68, 0), rgba(15, 52, 68, .86) 40%, rgba(15, 52, 68, .96)) !important; }
html.g6:not([data-theme="dark"]) #app :is(.vhub-eyebrow) { color: #9E3C08 !important; }
html.g6:not([data-theme="dark"]) #app .vhub-group-sub { color: #3A474E !important; }
/* Grok 1.5: вкладки на плашке — серый светлой темы зашит в странице (#56636A по петролю 1,9:1) */
html.g6 #app .g6-page .g6-pl .g15-tab:not(.active), html.g6 #app .g6-page .g6-pl .g15-tab:not(.active) .g15-tab-cnt { color: var(--g6-s-text2) !important; }
/* HappyHorse: выбранная версия — оранжевая заливка, текст чёрный (был светлый 1,6:1) */
html.g6[data-theme="dark"] #app .g6-page .hh-ver-seg.active { color: var(--c4-ink) !important; }   /* в светлой заливка темнее — белый 5:1 */
/* Grok Video: выбранный режим — светлая тема петроль (чёрный текст 1,5:1), тёмная оранжевый (светлый 2,5:1) */
html.g6:not([data-theme="dark"]) #app .g6-page .gv-mode.active :is(.gv-mode-tt, .gv-mode-sub, .gv-mode-desc) { color: var(--c4-off) !important; }
html.g6[data-theme="dark"] #app .g6-page .gv-mode.active :is(.gv-mode-tt, .gv-mode-sub, .gv-mode-desc) { color: var(--c4-ink) !important; }
/* кнопки «✨ Улучшить / Режиссёр / Команда» на плашке: в части страниц цвет #A83F08 зашит (1,7:1) */
html.g6 #app .g6-page .g6-pl :is([id$="-boost"], [class$="-boost"], [class$="-boost-t"], [id$="-director-btn"], [id$="-team-btn"]) { color: #F7B25A !important; }
/* подпись генератора в витрине героя и слоган героя (петроль-карточка в обеих темах) */
html.g6 #app .g6-work figcaption small { color: #F7B25A; }
html.g6 #app .g6-hero [class$="-slogan"] b { color: #F7B25A !important; }
/* Nano Banana 2, тёмная тема: подрежимы на оранжевом — полупрозрачный петроль даёт бурый фон, чёрный 3,0:1 → белый 5,2:1 */
html.g6[data-theme="dark"] #app .g6-page .g6-or .nb2-smode:not(.active), html.g6[data-theme="dark"] #app .g6-page .g6-or .nb2-smode:not(.active) * { color: #FFFFFF !important; }
/* светлая тема: ссылки/вкладки по персиковому фону */
html.g6:not([data-theme="dark"]) #app .dr-off a { color: #9E3C08 !important; }
html.g6:not([data-theme="dark"]) #app .gds-tab:not(.active) span { color: #3A474E !important; }
html.g6[data-theme="dark"] #app .g6-page :is([id$="-boost"], [class$="-boost"], [class$="-boost-t"]):not(.g6-or *) { color: #F7B25A !important; }   /* тёмная тема вне плашки (форма Seedance/Omni) */
/* 03.10: Omni в станции 01 (режимы «go-modes-grid» стали оранжевым полем) — переключатель версии в тёмной теме: полупрозрачный петроль
   на оранжевом даёт бурый #896946, чёрный 86 % = 3,3:1 → белый 5,0:1 (как подрежимы Nano Banana 2) */
html.g6[data-theme="dark"] #app .g6-page .g6-or .go-ver-seg:not(.active) { color: #FFFFFF !important; }

/* ═══ 8 · 04.10 ХАБЫ /photo /video — «иконки маленькими в левый угол карточки, и там же визуализация стильная и сильная»
   (Вячеслав). Карточка = работа ЭТОЙ модели во всю площадь: ролик-тизер (видео) или смена 2–4 работ (фото); значок 34 px
   в петроль-кружке с медной кромкой слева сверху, «Новинка» рядом; полоски-счётчик работ справа сверху. Слои ставит
   js/gen-v6.js (.g6-hc-media / .g6-hc-top / .g6-hc-dots). Подпись, цена и стрелка — прежние, на тёмной подложке снизу. */
html.g6 #app .vhub-card.g6-hc { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }   /* стекло карточки над роликами — лишняя перерисовка */
html.g6 #app .vhub-card .g6-hc-media {
  position: absolute; z-index: -2; inset: 0; overflow: hidden; border-radius: inherit; background: var(--c4-petrol2);
  transition: transform .8s cubic-bezier(.2, .8, .2, 1);
}
html.g6 #app .vhub-card .g6-hc-media > :is(img, video) {
  position: absolute; z-index: auto; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; display: block;
}
html.g6 #app .vhub-card.g6-hc:hover .g6-hc-media { transform: scale(1.04); }
html.g6 #app .vhub-card.g6-hc:hover .g6-hc-media > .g6-hc-img { transform: none; }
/* ролик: постер виден, пока тизер не пошёл; потом ролик проявляется поверх */
html.g6 #app .vhub-card .g6-hc-media > video { opacity: 0; transition: opacity .5s ease; }
html.g6 #app .vhub-card .g6-hc-media.is-live > video { opacity: 1; }
/* фото: работы сменяются наплывом, активная медленно наезжает */
html.g6 #app .vhub-card .g6-hc-media > .g6-hc-sl { opacity: 0; transform: scale(1.001); transition: opacity 1.1s ease, transform 6.5s linear !important; }
html.g6 #app .vhub-card .g6-hc-media > .g6-hc-sl.on { opacity: 1; transform: scale(1.07); }
html.g6 #app .vhub-card.g6-hc:hover .g6-hc-media > .g6-hc-sl.on { transform: scale(1.07); }
/* значок + «Новинка» — левый верхний угол поверх работы */
html.g6 #app .vhub-card .g6-hc-top {
  position: absolute; z-index: 3; top: calc(12px * var(--k, 1)); left: calc(12px * var(--k, 1)); right: calc(56px * var(--k, 1));
  display: flex; align-items: center; gap: calc(8px * var(--k, 1)); pointer-events: none;
}
html.g6 #app .vhub-card .g6-hc-ico {
  flex: none; display: grid; place-items: center; width: calc(34px * var(--k, 1)); height: calc(34px * var(--k, 1)); border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, var(--g6-s-bg3) 0%, var(--g6-s-inset) 78%); border: 1.5px solid rgba(224, 149, 90, .85);
  box-shadow: 0 calc(6px * var(--k, 1)) calc(16px * var(--k, 1)) calc(-6px * var(--k, 1)) rgba(4, 22, 30, .9), inset 0 1px 0 rgba(242, 238, 230, .14);
}
html.g6 #app .vhub-card .g6-hc-ico img { width: 76%; height: 76%; object-fit: contain; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .45)); }
html.g6 #app .vhub-card .g6-hc-top .vhub-new {
  position: static !important; inset: auto !important; margin: 0 !important; flex: none;
  padding: calc(5px * var(--k, 1)) calc(10px * var(--k, 1)) !important; font-size: calc(10.5px * var(--k, 1)) !important; line-height: 1 !important;
  box-shadow: 0 calc(6px * var(--k, 1)) calc(14px * var(--k, 1)) calc(-6px * var(--k, 1)) rgba(4, 22, 30, .9) !important;
}
/* полоски «сколько работ» — правый верхний угол, активная оранжевая */
html.g6 #app .vhub-card .g6-hc-dots {
  position: absolute; z-index: 3; top: calc(26px * var(--k, 1)); right: calc(14px * var(--k, 1)); display: flex; gap: calc(4px * var(--k, 1)); pointer-events: none;
}
html.g6 #app .vhub-card .g6-hc-dots i {
  display: block; width: calc(12px * var(--k, 1)); height: calc(3px * var(--k, 1)); border-radius: 2px;
  background: rgba(242, 238, 230, .55); box-shadow: 0 0 calc(4px * var(--k, 1)) rgba(4, 22, 30, .8); transition: background .4s, width .4s;
}
html.g6 #app .vhub-card .g6-hc-dots i.on { width: calc(20px * var(--k, 1)); background: var(--c4-or); }
/* сверху — лёгкая тень под значок и полоски (светлые кадры), снизу — прежняя подложка подписи */
html.g6 #app .vhub-card.g6-hc-has::before {
  content: ''; position: absolute; z-index: -1; inset: 0 0 auto; height: calc(84px * var(--k, 1)); pointer-events: none; border-radius: inherit;
  background: linear-gradient(180deg, rgba(12, 44, 58, .55), rgba(12, 44, 58, 0));
}
html.g6 #app .vhub-card.g6-hc-has::after { inset: 34% 0 0 !important; background: linear-gradient(180deg, rgba(15, 52, 68, 0), rgba(15, 52, 68, .86) 42%, rgba(15, 52, 68, .97)) !important; }
/* карточка без своей работы — прежний петроль-постер с крупным значком */
html.g6 #app .vhub-card.g6-hc:not(.g6-hc-has) { aspect-ratio: 3 / 4; min-height: 0; }
@media (max-width: 760px) {
  /* телефон: карточка почти квадратная — работа видна над подписью, а не только полоской */
  html.g6 #app .vhub-card.g6-hc-has { aspect-ratio: 1 / 1; }
  html.g6 #app .vhub-card.g6-hc:not(.g6-hc-has) { aspect-ratio: auto; }
  html.g6 #app .vhub-card.g6-hc-has::after { inset: 36% 0 0 !important; background: linear-gradient(180deg, rgba(15, 52, 68, 0), rgba(15, 52, 68, .88) 46%, rgba(15, 52, 68, .97)) !important; }
  html.g6 #app .vhub-card .g6-hc-ico { width: 32px; height: 32px; }
  html.g6 #app .vhub-card .g6-hc-dots { top: 24px; }
}
/* 34″ (окно 2560+): значок и метки крупнее вместе с карточкой (--k на хабе = 1, карточка 460+ px) */
@media (min-width: 2560px) {
  html.g6 #app .vhub-card .g6-hc-top { top: 16px; left: 16px; gap: 10px; }
  html.g6 #app .vhub-card .g6-hc-ico { width: 46px; height: 46px; border-width: 2px; }
  html.g6 #app .vhub-card .g6-hc-top .vhub-new { padding: 7px 13px !important; font-size: 13px !important; }
  html.g6 #app .vhub-card .g6-hc-dots { top: 36px; right: 18px; gap: 5px; }
  html.g6 #app .vhub-card .g6-hc-dots i { width: 16px; height: 4px; }
  html.g6 #app .vhub-card .g6-hc-dots i.on { width: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  html.g6 #app .vhub-card .g6-hc-media, html.g6 #app .vhub-card .g6-hc-media > .g6-hc-sl { transition: none !important; transform: none !important; }
}