/* Professional interface themes. The photo canvas remains neutral in every theme. */ /* ============================================================================ ЕДИНАЯ СИСТЕМА ДИЗАЙН-ТОКЕНОВ theme.css грузится первым на каждой странице (и в песочнице анализа, где styles.css нет вовсе), поэтому канонический набор токенов живёт здесь. Правило: цвет/отступ/радиус/тень/длительность берём из токена, а не из произвольного значения. Старые имена (--bg, --s1..--s3, --ink, --muted, --brass*, --ok*, --danger*, --info*, --line*) сохранены — на них завязаны HTML, JS и другие таблицы стилей. ========================================================================== */ :root{ --theme-topbar-a:#1a1d25;--theme-topbar-b:#15171d;--theme-input:rgba(10,12,16,.7); --theme-hover:#2b323f;--theme-shadow:rgba(0,0,0,.55);--theme-glow-a:rgba(240,192,116,.10); --theme-glow-b:rgba(86,128,176,.12);--theme-panel:rgba(22,27,35,.98); /* --- Палитра по умолчанию (студийная тема): страховка, если JS не успел выставить data-theme. Дальше её перекрывают html[data-theme=...]. --- */ --bg:#0f1217;--s1:#171b23;--s2:#1d222c;--s3:#232936; --line:rgba(255,255,255,.11);--line2:rgba(255,255,255,.17); --ink:#f3efe6;--ink-2:#dbe2ee;--muted:#bac3d1; --brass:#f0c074;--brass-l:#ffd98a;--brass-d:#b98625; --ok:#63d28c;--ok-l:#9fe6b0;--danger:#e1786d;--danger-l:#ffb4a0; --info:#b9c9ff;--info-l:#d8c5ff;--warn:#efb35c;--warn-l:#ffd08a; /* --- Типографика --- */ --font-sans:Inter,"Segoe UI",system-ui,-apple-system,Arial,sans-serif; --font-serif:Georgia,"Times New Roman",serif; /* Аудитория 35-60 лет: базовый размер интерфейса 16px, «пол» мелкого текста 12px. */ --text-2xs:12px;--text-xs:12.5px;--text-sm:13.5px;--text-base:15px;--text-md:16px; --text-lg:19px;--text-xl:23px;--text-2xl:30px;--text-3xl:38px; --leading-tight:1.15;--leading-snug:1.3;--leading-normal:1.5;--leading-relaxed:1.62; --tracking-tight:-.012em;--tracking-normal:.1px;--tracking-wide:.06em;--tracking-caps:.13em; /* Ограничение длины строки: ~70 знаков — предел комфортного чтения. */ --measure:70ch;--measure-narrow:52ch; /* --- Шкала отступов (шаг 4px) --- */ --space-0:0;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px; --space-5:24px;--space-6:32px;--space-7:48px;--space-8:64px; /* --- Радиусы --- */ --radius-xs:8px;--radius-sm:10px;--radius:14px;--radius-lg:18px;--radius-xl:24px;--radius-pill:999px; /* --- Тени: одна лестница на весь проект, цвет берётся из темы --- */ --shadow-1:0 1px 2px -1px var(--theme-shadow); --shadow-2:0 4px 12px -6px var(--theme-shadow); --shadow-3:0 10px 30px -12px var(--theme-shadow); --shadow-4:0 22px 60px -24px var(--theme-shadow); --shadow-5:0 34px 90px -30px var(--theme-shadow); --shadow-accent:0 6px 18px -8px color-mix(in srgb,var(--brass) 55%,transparent); --shadow-inset-hair:inset 0 1px 0 rgba(255,255,255,.05); /* --- Движение: 150-250 мс, одна функция плавности --- */ --ease:cubic-bezier(.2,.7,.2,1); --ease-out:cubic-bezier(.16,1,.3,1); --dur-1:150ms;--dur-2:190ms;--dur-3:240ms; --transition-color:color var(--dur-1) var(--ease),background-color var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease); --transition-box:background var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease),box-shadow var(--dur-2) var(--ease),color var(--dur-1) var(--ease); /* --- Слои (z-index): один список вместо случайных чисел --- */ --z-base:0;--z-raised:10;--z-sticky:30;--z-nav:80;--z-dropdown:120; --z-overlay:5000;--z-modal:10200;--z-toast:12000;--z-popover:14000;--z-max:20000; /* --- Минимальные размеры целей нажатия --- */ --tap:44px;--tap-compact:38px; } /* Токены, зависящие от палитры: считаются от токенов темы, поэтому работают во всех четырёх темах без дублирования значений. */ html[data-theme]{ /* Поверхности: --s0 «утопленная» (фон страницы), дальше по возрастанию. До этой правки --s0 использовался в tariffs.html, но нигде не объявлялся — объявление там просто отбрасывалось браузером. */ --s0:var(--bg); --surface-0:var(--bg);--surface-1:var(--s1);--surface-2:var(--s2);--surface-3:var(--s3); /* Псевдонимы, которыми исторически пользуются отдельные модули. */ --text:var(--ink);--text-muted:var(--muted);--panel:var(--s1);--card:var(--s1);--paper:var(--s1); --good:var(--ok);--bad:var(--danger); /* Мягкие подложки состояний (плашки, бейджи, подсветка строк). */ --brass-soft:color-mix(in srgb,var(--brass) 12%,transparent); --ok-soft:color-mix(in srgb,var(--ok) 13%,transparent); --warn-soft:color-mix(in srgb,var(--warn) 13%,transparent); --danger-soft:color-mix(in srgb,var(--danger) 13%,transparent); --info-soft:color-mix(in srgb,var(--info) 13%,transparent); /* Границы: обычная — декоративная, --field-border выдерживает 3:1 для полей. */ --field-border:color-mix(in srgb,var(--ink) 52%,transparent); /* Фокус клавиатуры. */ --focus-color:var(--brass-l); --focus-ring:0 0 0 3px color-mix(in srgb,var(--brass) 34%,transparent); /* Латунная заливка главной кнопки и акцентных плиток + текст поверх неё. В светлой теме заливка тёмная, поэтому текст на ней — кремовый. */ --brass-fill-hi:var(--brass-l);--brass-fill-lo:var(--brass); --brass-fill-hover-hi:#ffe09a;--brass-fill-hover-lo:var(--brass-l); --on-brass:#1a1408; } html[data-theme="studio"]{ color-scheme:dark;--bg:#0f1217;--s1:#171b23;--s2:#1d222c;--s3:#232936; --line:rgba(255,255,255,.11);--line2:rgba(255,255,255,.17);--ink:#f3efe6;--ink-2:#dbe2ee;--muted:#bac3d1; --brass:#f0c074;--brass-l:#ffd98a;--brass-d:#b98625;--ok:#63d28c;--ok-l:#9fe6b0; --danger:#e1786d;--danger-l:#ffb4a0;--info:#b9c9ff;--info-l:#d8c5ff;--warn:#efb35c;--warn-l:#ffd08a; } html[data-theme="graphite"]{ color-scheme:dark;--bg:#0d0f10;--s1:#17191a;--s2:#222526;--s3:#303435; --line:rgba(232,238,236,.14);--line2:rgba(232,238,236,.24);--ink:#f2f4f3;--ink-2:#d7dddb;--muted:#abb4b1; --brass:#aeb9b6;--brass-l:#dce3e1;--brass-d:#6f7a77;--ok:#67cf91;--ok-l:#9be3b6; --danger:#e47d75;--danger-l:#ffaaa3;--info:#b9cadc;--info-l:#d5e2ee;--warn:#e7b970;--warn-l:#ffd79b; --brass-fill-hover-hi:#f0f4f3; --theme-topbar-a:#252829;--theme-topbar-b:#17191a;--theme-input:rgba(7,9,10,.82);--theme-hover:#3a3f40; --theme-shadow:rgba(0,0,0,.68);--theme-glow-a:rgba(218,226,223,.035);--theme-glow-b:rgba(94,111,107,.05);--theme-panel:rgba(25,28,29,.99); } html[data-theme="midnight"]{ color-scheme:dark;--bg:#0b1020;--s1:#11192a;--s2:#172137;--s3:#202d46; --line:rgba(198,218,255,.12);--line2:rgba(198,218,255,.21);--ink:#f1f5ff;--ink-2:#d9e4f7;--muted:#b7c6dd; --brass:#84bdf4;--brass-l:#b8dcff;--brass-d:#477daf;--ok:#64d6a2;--ok-l:#92e8bf; --danger:#ef817d;--danger-l:#ffaaa6;--info:#b9c9ff;--info-l:#d9e4ff;--warn:#f0b968;--warn-l:#ffd79e; --brass-fill-hover-hi:#d8ecff; --theme-topbar-a:#15203a;--theme-topbar-b:#0d1425;--theme-input:rgba(5,9,18,.75);--theme-hover:#2a3c5d; --theme-shadow:rgba(2,5,12,.62);--theme-glow-a:rgba(101,164,225,.14);--theme-glow-b:rgba(111,96,202,.12);--theme-panel:rgba(16,24,42,.985); } /* Светлая тема. Здесь «светлый» вариант акцента (--brass-l) намеренно ТЕМНЕЕ базового: на белой бумаге выделение достигается затемнением, а не осветлением. До правки --brass-l:#c88b3d давал ссылкам контраст 2.4:1 при норме AA 4.5:1. */ html[data-theme="ivory"]{ color-scheme:light;--bg:#eeeae2;--s1:#fffdf9;--s2:#f7f3eb;--s3:#eae4d9; --line:rgba(31,39,49,.15);--line2:rgba(31,39,49,.28);--ink:#20262f;--ink-2:#39424e;--muted:#59626e; --brass:#8a5a12;--brass-l:#6f4413;--brass-d:#5c380c;--ok:#1c7045;--ok-l:#155c39;--danger:#a8433a;--danger-l:#8f3228; --info:#3a5a97;--info-l:#4d488a;--warn:#87540f;--warn-l:#6b410c; --theme-topbar-a:#fffdf9;--theme-topbar-b:#f2ede4;--theme-input:#fff; --theme-hover:#e6dfd2;--theme-shadow:rgba(52,42,29,.17);--theme-glow-a:rgba(176,113,34,.10); --theme-glow-b:rgba(75,111,147,.08);--theme-panel:rgba(255,253,248,.99); --brass-fill-hi:#9c661a;--brass-fill-lo:#7d4b12;--brass-fill-hover-hi:#ac7526;--brass-fill-hover-lo:#8a5a12; --on-brass:#fff8ee;--shadow-inset-hair:inset 0 1px 0 rgba(255,255,255,.7); } html[data-theme]{color:var(--ink);background:var(--bg);--brass-light:var(--brass-l);--brass-dark:var(--brass-d)} html[data-theme] body{background:radial-gradient(900px 480px at 80% -8%,var(--theme-glow-a),transparent 60%),radial-gradient(1100px 600px at 6% -4%,var(--theme-glow-b),transparent 60%),var(--bg)} html[data-theme] .topbar{background:linear-gradient(180deg,var(--theme-topbar-a),var(--theme-topbar-b))} html[data-theme] input,html[data-theme] select,html[data-theme] textarea{background:var(--theme-input);color:var(--ink)} html[data-theme] button:not(.brass):hover,html[data-theme] .btn:not(.brass):hover{background:var(--theme-hover)} html[data-theme] .card{box-shadow:0 10px 30px -12px var(--theme-shadow)} html[data-theme="ivory"] .brand::before{filter:drop-shadow(0 7px 12px rgba(50,40,27,.2))} html[data-theme="ivory"] .brandLockupTop{color:#2a3038;text-shadow:none} html[data-theme="ivory"] .brandLockupBottom{color:var(--brass);text-shadow:none} html[data-theme="ivory"] input::placeholder,html[data-theme="ivory"] textarea::placeholder{color:#7b8490} html[data-theme="ivory"] .chk,html[data-theme="ivory"] .auto-card{background:rgba(255,255,255,.58)} html[data-theme="ivory"] textarea.prompt{background:#fff} html[data-theme="ivory"] .art-tip{background:#262b33;color:#fff} html[data-theme="ivory"] .ed-controls .group,html[data-theme="ivory"] .ed-controls .tool-tabs{border-color:var(--line);background:rgba(255,255,255,.42)} html[data-theme="ivory"] .ed-controls .group:not(.collapsed){border-color:var(--line2);background:rgba(255,255,255,.67)} html[data-theme="ivory"] .ed-controls .tool-tab:hover{background:rgba(32,38,47,.06)} html[data-theme="ivory"] .ed-controls .tool-tab.is-active{background:rgba(166,107,37,.13);color:var(--brass-d)} html[data-theme="ivory"] .ed-controls-head{background:rgba(255,253,249,.97)} html[data-theme="ivory"] #fromEditor,html[data-theme="ivory"] .genrf{color:#205c38} html[data-theme="ivory"] .feat p{color:var(--ink-2)} html[data-theme="ivory"] .signature-shell{background:linear-gradient(135deg,#fffaf1,#f2ede4 48%,#e8dfd0)} html[data-theme="ivory"] .signature-card,html[data-theme="ivory"] .signature-card.major{background:linear-gradient(180deg,var(--s1),var(--s2));border-color:var(--line)} html[data-theme="ivory"] .signature-card p{color:var(--ink-2)} html[data-theme="ivory"] .sl-hero{background:radial-gradient(900px 360px at 12% -20%,rgba(166,107,37,.16),transparent 60%),linear-gradient(155deg,#fffdf9,#eee7dc 58%,#ead4ad)} html[data-theme="ivory"] .qcard,html[data-theme="ivory"] .qnote,html[data-theme="ivory"] .empty{background:var(--s1)} html[data-theme="ivory"] .experience-switch,html[data-theme="ivory"] .raster-layer, html[data-theme="ivory"] .server-project,html[data-theme="ivory"] .editor-more-menu, html[data-theme="ivory"] .selection-operation{background:var(--s1);box-shadow:0 12px 30px -20px var(--theme-shadow)} html[data-theme="ivory"] .geometry-modal,html[data-theme="ivory"] .bg-refine-card{ --s1:#171b23;--s2:#1d222c;--s3:#232936; --ink:#f3efe6;--ink-2:#dbe2ee;--muted:#bac3d1;--line:rgba(255,255,255,.11);--line2:rgba(255,255,255,.18); --brass:#f0c074;--brass-l:#ffd98a;--brass-d:#b98625;--theme-hover:#2b323f;--theme-input:rgba(10,12,16,.7); } html[data-theme="ivory"] .adm-wrap code,html[data-theme="ivory"] .gen-out textarea{background:#fff;color:var(--ink)} /* Graphite is intentionally achromatic. Shared components historically used literal gold translucencies, so their main interactive states are bridged to the silver theme token. */ html[data-theme="graphite"] .topnav .steps a.active, html[data-theme="graphite"] .auth-tabs button.active, html[data-theme="graphite"] .pill.on{ color:var(--brass-l);border-color:color-mix(in srgb,var(--brass) 62%,transparent); background:linear-gradient(180deg,color-mix(in srgb,var(--brass) 17%,var(--s2)),color-mix(in srgb,var(--brass) 5%,var(--s1))); } html[data-theme="graphite"] .chk:hover, html[data-theme="graphite"] .auto-drop:hover{border-color:color-mix(in srgb,var(--brass) 48%,transparent);background:color-mix(in srgb,var(--brass) 5%,transparent)} html[data-theme="graphite"] .chk.on, html[data-theme="graphite"] .prompt-mode.on, html[data-theme="graphite"] .asset-type.on{ border-color:color-mix(in srgb,var(--brass) 66%,transparent); background:color-mix(in srgb,var(--brass) 11%,var(--s1)); } html[data-theme="graphite"] .prompt-mode.on{box-shadow:0 0 0 1px color-mix(in srgb,var(--brass) 17%,transparent) inset} html[data-theme="graphite"] .prompt-mode-icon{background:color-mix(in srgb,var(--brass) 10%,transparent)} html[data-theme="graphite"] input:focus, html[data-theme="graphite"] select:focus, html[data-theme="graphite"] textarea:focus{box-shadow:0 0 0 3px color-mix(in srgb,var(--brass) 20%,transparent)} html[data-theme="graphite"] button.brass:hover, html[data-theme="graphite"] .btn.brass:hover, html[data-theme="graphite"] .support-launcher:hover{background:linear-gradient(180deg,#f0f4f3,var(--brass-l))} html[data-theme="graphite"] .ai-generate-card{border-color:color-mix(in srgb,var(--brass) 42%,transparent)} /* The retouching surround never changes: theme colors must not bias color judgement. */ html[data-theme] .workspace-card,html[data-theme] .stage,html[data-theme] .canvasShell, html[data-theme] .previewImage,html[data-theme] .variantThumb{color-scheme:dark} html[data-theme] .workspace-card{background:linear-gradient(180deg,#20252f,#141820)!important} /* Theme picker */ .theme-trigger{display:inline-flex;align-items:center;justify-content:center;width:44px;min-width:44px;min-height:44px;padding:0;white-space:nowrap} .theme-trigger__icon{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:conic-gradient(var(--brass) 0 25%,var(--s3) 25% 50%,var(--ink-2) 50% 75%,var(--s1) 75%);border:1px solid var(--line2);font-size:0;box-shadow:0 2px 8px rgba(0,0,0,.16)} .theme-trigger__label{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important} .theme-trigger--floating{position:fixed;z-index:121;top:62px;right:14px;background:var(--s2)} .account-summary-source{display:none!important} .account-summary{display:grid;grid-template-columns:minmax(74px,auto) auto;align-items:center;gap:9px;min-height:42px;padding:5px 9px;border:1px solid var(--line2);border-radius:11px;background:linear-gradient(180deg,var(--s3),var(--s2));color:var(--ink);text-decoration:none;box-shadow:0 7px 18px -15px var(--theme-shadow);white-space:nowrap} .account-summary[hidden]{display:none!important} .account-summary:hover{border-color:color-mix(in srgb,var(--brass) 50%,transparent);background:var(--theme-hover)} .account-summary:focus-visible{outline:2px solid var(--brass-l);outline-offset:2px} .account-summary__plan{display:flex;align-items:center;gap:6px;min-width:0} .account-summary__plan i{width:8px;height:8px;flex:none;border-radius:50%;background:var(--muted);box-shadow:0 0 0 4px color-mix(in srgb,var(--muted) 13%,transparent)} .account-summary.has-subscription .account-summary__plan i{background:var(--ok-l);box-shadow:0 0 0 4px color-mix(in srgb,var(--ok-l) 14%,transparent)} .account-summary__plan b{max-width:105px;overflow:hidden;text-overflow:ellipsis;color:var(--ink);font-size:12px} .account-summary__included{padding:2px 5px;border-radius:999px;background:color-mix(in srgb,var(--ok-l) 12%,transparent);color:var(--ok-l);font-size:8px;font-style:normal;font-weight:850;letter-spacing:.02em} .account-summary__balances{display:flex;align-items:stretch;border-left:1px solid var(--line);font-variant-numeric:tabular-nums} .account-summary__balances>span{display:grid;grid-template-columns:auto auto;align-items:baseline;gap:4px;padding:0 7px} .account-summary__balances>span+span{border-left:1px solid var(--line)} .account-summary__balances small{color:var(--muted);font-size:9px;font-weight:650} .account-summary__balances strong{color:var(--brass-l);font-size:13px} /* Компактная запись баланса («25 кр.» / «∞») — включается только на телефоне. */ .account-summary__compact{display:none} @media(max-width:1700px){ .topbar .topright:has(.account-summary)>a.btn[href^="/tariffs"]{display:none} } @media(max-width:1450px) and (min-width:761px){ .account-summary{grid-template-columns:minmax(70px,auto) auto;gap:6px;padding:4px 7px} .account-summary__plan b{max-width:84px;font-size:11px} .account-summary__balances>span{grid-template-columns:1fr;padding:0 5px;text-align:center} .account-summary__balances small{font-size:8px;line-height:1} .account-summary__balances strong{font-size:12px;line-height:1.15} } .theme-panel{position:fixed;z-index:var(--z-popover,14000);width:min(420px,calc(100vw - 24px));padding:20px;border:1px solid var(--line2);border-radius:var(--radius-lg,16px);background:var(--theme-panel);box-shadow:var(--shadow-5,0 28px 80px rgba(0,0,0,.42)),var(--shadow-inset-hair,inset 0 1px 0 rgba(255,255,255,.04));backdrop-filter:blur(18px)} .theme-panel[hidden]{display:none!important} .theme-panel__eyebrow{color:var(--brass);font-size:11px;font-weight:850;letter-spacing:var(--tracking-caps,.13em);text-transform:uppercase} .theme-panel__title{margin:4px 44px 15px 0;font-size:var(--text-lg,19px);line-height:var(--leading-tight,1.2);letter-spacing:var(--tracking-tight,-.012em)} .theme-panel__close{position:absolute;top:8px;right:8px;width:44px;height:44px;min-height:44px;padding:0;border:0;background:transparent;color:var(--muted);font-size:25px;line-height:1} .theme-panel__close:hover{color:var(--ink)} .theme-panel__close:focus-visible{outline:2px solid var(--focus-color,var(--brass-l));outline-offset:-2px} .theme-panel__choices{display:grid;grid-template-columns:1fr 1fr;gap:9px} .theme-choice{display:grid;grid-template-columns:42px minmax(0,1fr) 20px;align-items:center;gap:10px;min-height:76px;padding:10px;text-align:left;background:var(--s1);border:1px solid var(--line)} .theme-choice:hover{border-color:var(--line2)} .theme-choice.is-selected{border-color:var(--brass);box-shadow:0 0 0 2px color-mix(in srgb,var(--brass) 18%,transparent);background:color-mix(in srgb,var(--brass) 8%,var(--s1))} .theme-choice__swatch{width:42px;height:48px;border-radius:10px;border:1px solid rgba(255,255,255,.18);box-shadow:inset 0 0 0 7px rgba(255,255,255,.055),0 5px 14px rgba(0,0,0,.16)} .theme-choice__swatch--studio{background:linear-gradient(145deg,#171b23 0 55%,#f0c074 56%)} .theme-choice__swatch--graphite{background:linear-gradient(145deg,#202324 0 55%,#dce3e1 56%)} .theme-choice__swatch--midnight{background:linear-gradient(145deg,#172137 0 55%,#84bdf4 56%)} .theme-choice__swatch--ivory{background:linear-gradient(145deg,#fffdf9 0 55%,#8a5a12 56%);border-color:rgba(32,38,47,.18)} .theme-choice__copy{display:grid;gap:4px;min-width:0} .theme-choice__copy strong{font-size:13px;color:var(--ink)} .theme-choice__copy small{font-size:11px;line-height:1.3;color:var(--muted)} .theme-choice__mark{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--brass);color:var(--bg);font-size:12px;font-weight:900;opacity:0;transform:scale(.75);transition:.15s} .theme-choice.is-selected .theme-choice__mark{opacity:1;transform:none} .theme-panel__note{margin:13px 0 0;padding-top:12px;border-top:1px solid var(--line);color:var(--muted);font-size:11.5px;line-height:1.45} /* Similarity module uses a bundled stylesheet, so its primary surfaces are bridged here. */ html[data-theme] .dropzone,html[data-theme] .panel,html[data-theme] .scorePanel{background:linear-gradient(var(--s2),var(--s1));border-color:var(--line);box-shadow:0 10px 30px -12px var(--theme-shadow)} html[data-theme] .noticeBar span,html[data-theme] .techStrip div{background:color-mix(in srgb,var(--s2) 88%,transparent);border-color:var(--line2);color:var(--ink-2)} html[data-theme] .secondaryButton,html[data-theme] .iconButton,html[data-theme] .tabBar button{background:var(--s3);border-color:var(--line2);color:var(--ink)} html[data-theme] .tabBar button.active{color:var(--brass);background:color-mix(in srgb,var(--brass) 13%,var(--s1));border-color:color-mix(in srgb,var(--brass) 62%,transparent)} html[data-theme] .analysisBlock,html[data-theme] .promptBox,html[data-theme] .faceSelector,html[data-theme] .referencePhotos,html[data-theme] .approvalGate,html[data-theme] .historyCard{background:color-mix(in srgb,var(--s1) 82%,transparent);border-color:var(--line)} html[data-theme] .uploadTarget{color:var(--ink);background:color-mix(in srgb,var(--s3) 34%,transparent);border-color:var(--line2)} html[data-theme] .dropzone h2,html[data-theme] .sectionHeader h2,html[data-theme] .scoreCopy h2,html[data-theme] .analysisBlock h3,html[data-theme] .promptBox h3{color:var(--ink)} html[data-theme] .eyebrow{color:var(--brass)} html[data-theme] .imageMeta,html[data-theme] .statusLine,html[data-theme] .scoreCopy span,html[data-theme] .analysisBlock p,html[data-theme] .promptBox p,html[data-theme] .analysisBlock ul{color:var(--ink-2)} html[data-theme] .uploadTarget small,html[data-theme] .canvasEmpty,html[data-theme] .emptyText,html[data-theme] .appFooter{color:var(--muted)} html[data-theme="ivory"] .scoreDial{background:#fff;border-color:rgba(166,107,37,.22)} html[data-theme="ivory"] th,html[data-theme="ivory"] td{border-color:var(--line)} html[data-theme="ivory"] td{color:var(--ink-2)} html[data-theme="ivory"] .manualScoreSelect,html[data-theme="ivory"] .brandingFields input{background:#fff;color:var(--ink-2);border-color:var(--line2)} @media(max-width:760px){ .theme-trigger--header{min-height:44px} .topbar .topright:has(.account-summary)>a.btn[href^="/tariffs"], .topbar .topright:has(.account-summary)>#logoutBtn{display:none} /* Телефон: вместо трёх колонок с подписями 8px чип показывает точку тарифа и компактный баланс «25 кр.» / «∞» (полная раскладка остаётся десктопу). Подробности — в title/aria-label чипа и на странице тарифов, куда он ведёт. */ .account-summary{display:inline-flex;align-items:center;gap:7px;min-width:0;min-height:44px;padding:5px 11px} .account-summary__plan b,.account-summary__included,.account-summary__balances{display:none} .account-summary__compact{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; color:var(--brass-l);font-size:13.5px;font-weight:800;font-variant-numeric:tabular-nums} } @media(max-width:640px){ .theme-panel{inset:auto 8px calc(10px + env(safe-area-inset-bottom,0px))!important;width:auto;max-height:min(82dvh,620px);overflow:auto;padding:17px;border-radius:15px} .theme-panel__choices{grid-template-columns:1fr} .theme-choice{min-height:68px} .theme-trigger--floating{top:64px;right:14px} /* Пол мелкого текста на телефоне — 12px (аудитория 35-60 лет). */ .theme-panel__eyebrow{font-size:12px} .theme-panel__note{font-size:12.5px} .theme-choice__copy small{font-size:12px} } @media(prefers-reduced-motion:reduce){.theme-choice__mark{transition:none}} /* ---- Мосты к страницам с собственными таблицами стилей ------------------- Эти страницы держат тёмный фон прямо в своём