, и внутри заголовка — жёсткий block уронил бы span на свою строку. */ body:not(.can-manage-presets) #screen-preset-editor [data-pa-lite]{display:revert} /* Плитка «Чем править» с 19.08.2026 видна ВСЕМ (без неё у урезанного не было кнопки запуска), поэтому растягивать `#pa-ai-tile` на всю ширину больше не нужно — правило снято. Осталась та же беда у «Тем роликов»: в урезанном режиме из двух плиток видна одна («Форматы тем»), и половина ряда пустует. Уже, чем 1081px, сетка сама сжимается до двух колонок и c2 занимает всю ширину — там не трогаем, иначе span 4 в двухколоночной сетке наплодит implicit-колонок и уедет вбок. */ @media(min-width:1081px){ body:not(.can-manage-presets) #screen-preset-editor #pa-fmt-tile{grid-column:span 4} } /* ⚠ Найдено при этой правке (11.08.2026), баг НЕ новый: общее правило `[data-admin]` весит меньше, чем `#screen-preset-editor .nrg-bento{display:grid}`, и блок «Доступ операторов» (с 20.08.2026 на его месте «Владелец», плюс кнопка «Удалить пресет») показывался non-admin оператору с manage_presets — с красной ошибкой 403 внутри, потому что ручка под админом. Чиним тем же приёмом — весом с ID, локально для этого экрана. ── */ body:not(.is-admin) #screen-preset-editor [data-admin]{display:none} /* ── НОМЕР ПРОГОНА ЗАВОДА (.idchip, 16.08.2026) ───────────────────────────────── Один чип на все экраны: разбор канала, сборка пресета, темы, отдельная тема, бриф, правка пресета агентом, идея кабинета. Номер — это то, что человек переносит с экрана в карточку бага, и выглядеть он обязан везде одинаково: свои «покажем id» на каждом экране разъехались бы и по виду, и по поведению. Это КНОПКА, а не подпись: клик копирует (`fxRunChip` в core.js). Отсюда курсор и отклик на наведение — номер, который выделяют мышью по кускам, попадает в карточку с опечаткой. Глобально, БЕЗ префикса экрана: чип живёт и в оверлеях, которые висят прямо в . ── */ .idchip{ font-family:var(--mono);font-size:11px;letter-spacing:.02em;line-height:1.5; color:var(--ash-2);background:var(--void);border:1px solid var(--hair);border-radius:4px; padding:1px 6px;white-space:nowrap;font-variant-numeric:tabular-nums; cursor:pointer;transition:.14s;vertical-align:baseline;max-width:100%;overflow:hidden; text-overflow:ellipsis} .idchip:hover{color:var(--bone);border-color:var(--hair-hi);background:var(--plate)} .idchip:active{transform:translateY(1px)} /* Вход в журнал («↺ прошлые») — намеренно ССЫЛКОЙ, а не кнопкой: рядом с номером стоит действие («скопировать»), и вторая кнопка того же веса спорила бы с ним за клик. Глобально по той же причине, что `.idchip`: ссылка живёт и на экране, и в оверлее, висящем прямо в . */ .it-hist{font-family:var(--mono);font-size:11px;letter-spacing:.02em;color:var(--ash-2); background:none;border:0;padding:0;cursor:pointer;white-space:nowrap;text-decoration:underline; text-decoration-color:var(--hair-b);text-underline-offset:3px;transition:.14s} .it-hist:hover{color:var(--bone);text-decoration-color:var(--hair-hi)} /* ── Скроллбары: единый тонкий серо-полупрозрачный (WebKit + Firefox). Thumb «плавает» — прозрачная 3px-рамка + background-clip:padding-box. Наследуется на все прокручиваемые области. Скрыть у элемента → `scrollbar-width:none` + `::-webkit-scrollbar{display:none}` (как .nav-scroll / .chat-msgs / .worker-body). Тюнить локально — более специфичным селектором. ── */ :root{scrollbar-width:thin;scrollbar-color:var(--hair-b) transparent} ::-webkit-scrollbar{width:11px;height:11px} ::-webkit-scrollbar-track{background:transparent} ::-webkit-scrollbar-thumb{background-color:var(--hair-b);border:3px solid transparent;border-radius:8px;background-clip:padding-box} ::-webkit-scrollbar-thumb:hover{background-color:rgba(var(--wash-rgb),.22)} ::-webkit-scrollbar-corner{background:transparent} /* ═══════════════════════════════════════════════════════ ATMOSPHERE ═══════════════════════════════════════════════════════ */ .atm{position:fixed;inset:0;pointer-events:none;z-index:0} .atm.glow{background: radial-gradient(45% 28% at 50% -4%, rgba(var(--accent-rgb),.15), transparent 60%), radial-gradient(35% 25% at 14% 110%, rgba(var(--accent-rgb),.05), transparent 55%)} .atm.vig{background:radial-gradient(140% 130% at 50% 20%, transparent 35%, rgba(0,0,0,.70) 100%)} .atm.grain{opacity:.04;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")} /* ═══════════════════════════════════════════════════════ LAYOUT SHELL ═══════════════════════════════════════════════════════ */ .shell{position:relative;z-index:1;height:100%;display:grid;grid-template-rows:48px 1fr} /* нижний статусбар удалён — статус живёт в шапке (.hdr-sys) */ .body{display:grid;grid-template-columns:var(--sidebar) 1fr;min-height:0} /* ═══════════════════════════════════════════════════════ HEADER ═══════════════════════════════════════════════════════ */ .hdr{display:flex;align-items:center;border-bottom:1px solid var(--hair-b);background:linear-gradient(180deg,rgba(16,18,22,.9),rgba(11,12,15,.9));padding:0 16px;gap:14px} .hdr-brand{display:flex;align-items:center;gap:9px;font-family:var(--mono);font-size:14.25px;letter-spacing:.1em;color:var(--bone);flex:none;width:calc(var(--sidebar) - 16px);white-space:nowrap;overflow:hidden} .hdr-brand svg{animation:pulse 3s ease-in-out infinite;flex:none} @keyframes pulse{0%,100%{filter:drop-shadow(0 0 5px rgba(var(--accent-rgb),.5))}50%{filter:drop-shadow(0 0 12px rgba(var(--accent-rgb),.9))}} .hdr-brand b{color:var(--ash);font-weight:400;letter-spacing:.06em;font-size:11.25px} /* Логотип [YT] из логина, уменьшенный под шапку */ .hdr-brand .yt-logo{position:relative;display:inline-flex;align-items:center;font-family:var(--mono);font-weight:700;font-size:20px;letter-spacing:.1em;line-height:1;color:var(--accent-2);user-select:none} .hdr-brand .yt-logo .brk{color:var(--accent);opacity:.7} .breadcrumb{display:flex;align-items:center;gap:6px;font-family:var(--mono);font-size:15px;letter-spacing:.05em;color:var(--ash-2);flex:1;min-width:0} .breadcrumb .bc-sep{color:var(--ash-2);opacity:.4} .breadcrumb .bc-cur{color:var(--ash)} .breadcrumb .bc-lnk{color:var(--ash-2);cursor:pointer;transition:.12s} .breadcrumb .bc-lnk:hover{color:var(--bone)} .hdr-right{display:flex;align-items:center;gap:10px;flex:none} .user-chip{display:flex;align-items:center;gap:8px;padding:5px 11px;border:1px solid var(--hair-b);font-family:var(--mono);font-size:14.25px;letter-spacing:.08em;cursor:pointer;transition:.12s} .user-chip:hover{border-color:var(--hair-hi)} .user-chip .ua{width:20px;height:20px;border-radius:50%;background:linear-gradient(135deg,var(--accent-deep),var(--accent-dim));display:grid;place-items:center;font-size:13.5px;font-weight:700;color:var(--accent-2)} .hdr-ico{all:unset;cursor:pointer;width:28px;height:28px;display:grid;place-items:center;border:1px solid var(--hair);color:var(--ash);font-size:19.5px;transition:.12s} .hdr-ico:hover{border-color:var(--hair-hi);color:var(--accent-2)} /* ═══════════════════════════════════════════════════════ SIDEBAR NAV ═══════════════════════════════════════════════════════ */ .sidebar{border-right:1px solid var(--hair-b);display:flex;flex-direction:column;background:linear-gradient(180deg,rgba(10,11,14,.95),rgba(7,8,10,.95));overflow:hidden;padding:14px 10px} .nav-scroll{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding-right:8px;scrollbar-width:none;-ms-overflow-style:none} .nav-scroll::-webkit-scrollbar{display:none} .nav-footer{flex:none;padding-top:2px;padding-right:8px} .sidebar::-webkit-scrollbar{display:none} .nav-sect{font-family:var(--mono);font-size:12px;letter-spacing:.2em;color:var(--ash-2);padding:10px 10px 6px;text-transform:uppercase;margin-top:4px} .nav-sect:first-child{margin-top:0} .nav-item{all:unset;cursor:pointer;display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:0;border:1px solid transparent;font-size:15px;letter-spacing:.04em;font-weight:600;color:var(--ash);width:100%;transition:.12s;position:relative;text-transform:uppercase;white-space:nowrap;overflow:hidden} .nav-item .ni{font-family:var(--mono);font-size:18px;width:16px;text-align:center;flex:none;color:var(--ash-2);transition:.12s} .nav-item:hover{color:var(--bone);background:rgba(var(--accent-rgb),.04);border-color:var(--hair)} .nav-item:hover .ni{color:var(--accent-2)} .nav-item.active{color:var(--bone);border-color:var(--hair-b);background:linear-gradient(90deg,rgba(var(--accent-rgb),.12),transparent)} .nav-item.active::before{content:'';position:absolute;left:0;top:7px;bottom:7px;width:2px;background:var(--accent);box-shadow:0 0 8px var(--accent)} .nav-item.active .ni{color:var(--accent-2)} .nav-item .n-badge{margin-left:auto;flex:none;position:relative;z-index:1;font-family:var(--mono);font-size:12.75px;padding:2px 7px;background:var(--accent-dim);color:var(--accent-2);border:1px solid rgba(var(--accent-rgb),.2)} /* ── Сворачиваемый сайдбар (иконочный режим): один рычаг --sidebar (280→64), класс .nav-collapsed на :root восстанавливается синхронным скриптом в (без вспышки). Подписи и заголовки секций гаснут через font-size:0 (метки — голые текст-ноды, отдельного элемента под display:none нет), иконки центрируются, бейдж числа сжимается в точку. Тумблер живёт в шапке (.nav-toggle). ── */ .body{transition:grid-template-columns .18s ease} .hdr-brand{transition:width .18s ease} .nav-toggle{all:unset;cursor:pointer;width:28px;height:28px;display:grid;place-items:center;border:1px solid var(--hair);color:var(--ash);font-size:16px;transition:.12s;flex:none} .nav-toggle:hover{border-color:var(--hair-hi);color:var(--accent-2)} :root.nav-collapsed{--sidebar:64px} :root.nav-collapsed .hdr-brand .yt-logo{display:none} :root.nav-collapsed .sidebar{padding:14px 8px} :root.nav-collapsed .nav-scroll{padding-right:0} :root.nav-collapsed .nav-footer{padding-right:0} :root.nav-collapsed .nav-item{font-size:0;gap:0;padding:9px 0;justify-content:center} :root.nav-collapsed .nav-item .ni{font-size:18px} :root.nav-collapsed .nav-sect{font-size:0;padding:8px 0 4px} :root.nav-collapsed .nav-item .n-badge{position:absolute;top:3px;right:5px;margin:0;min-width:8px;width:8px;height:8px;padding:0;font-size:0;border-radius:50%;line-height:0;overflow:hidden} /* ── оверлей «В разработке» поверх контент-области ── */ .wip-overlay{position:absolute;inset:0;z-index:60;background:rgba(4,4,5,.84);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px} .wip-emoji{font-size:62px;line-height:1;animation:wipFloat 3s ease-in-out infinite;filter:drop-shadow(0 0 18px rgba(var(--gold-rgb),.4))} .wip-text{font-size:clamp(34px,5vw,56px);font-weight:800;letter-spacing:.04em;color:var(--gold);text-transform:uppercase;text-align:center;text-shadow:0 0 30px rgba(var(--gold-rgb),.5);animation:wipPulse 2.2s ease-in-out infinite;margin:0} .wip-text .wip-dots::after{content:'';animation:wipDots 1.6s steps(1) infinite} .wip-sub{font-family:var(--mono);font-size:16.5px;letter-spacing:.16em;color:var(--ash-2);text-transform:uppercase} @keyframes wipPulse{0%,100%{transform:scale(1);text-shadow:0 0 20px rgba(var(--gold-rgb),.38);opacity:.9}50%{transform:scale(1.05);text-shadow:0 0 50px rgba(var(--gold-rgb),.95);opacity:1}} @keyframes wipFloat{0%,100%{transform:translateY(0) rotate(-5deg)}50%{transform:translateY(-14px) rotate(5deg)}} @keyframes wipDots{0%{content:''}25%{content:'.'}50%{content:'..'}75%{content:'...'}} .nav-sep{height:1px;background:var(--hair-b);margin:8px 0} .nav-grow{flex:1} .nav-item.danger{color:var(--ash-2)} .nav-item.danger:hover{color:#8388bf;border-color:rgba(99,106,179,.2)} .pa-code{font-family:var(--mono);font-size:12.75px;line-height:1.45;min-height:150px;resize:vertical;white-space:pre;overflow:auto;tab-size:2} #pa-orchestrator{min-height:320px} .pa-prow{display:flex;align-items:center;gap:8px;padding:7px 10px;border:1px solid var(--hair-b);background:rgba(7,8,10,.5);font-size:14px} .pa-card{padding:14px 16px;border:1px solid var(--hair-b);background:rgba(7,8,10,.4);margin-bottom:10px;display:flex;align-items:center;gap:14px;cursor:pointer;transition:.12s} .pa-card:hover{border-color:var(--hair);background:rgba(var(--accent-rgb),.05)} /* Чипы готовых значений (стиль карточек персонажей) — тот же язык, что .chip, но кликабельные */ .pa-chips{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:9px} .pa-chip{padding:4px 11px;border:1px solid var(--hair-b);background:rgba(7,8,10,.5);color:var(--ash-1);font-size:12.5px;cursor:pointer;transition:.12s;white-space:nowrap} .pa-chip:hover{border-color:var(--hair);color:var(--bone)} .pa-chip.on{border-color:rgba(var(--accent-rgb),.5);background:rgba(var(--accent-rgb),.09);color:var(--bone)} .pa-warn{margin-top:9px;padding:8px 11px;border:1px solid rgba(var(--accent-rgb),.3);background:rgba(var(--accent-rgb),.06);color:var(--bone);font-size:12.75px;line-height:1.5} /* `.pa-langs` снят 15.08.2026 вместе с плиткой «Языки упаковки» в редакторе пресета: языки спрашивает карточка упаковки, и ряд селектов живёт там под своим `.lib-three`. */ /* ═══════════════════════════════════════════════════════ MAIN CONTENT ═══════════════════════════════════════════════════════ */ .main{min-height:0;overflow:hidden;display:flex;flex-direction:column;position:relative} /* Хост для лениво-инъектируемых экранов: display:contents — инъектированные .screen участвуют в flex-раскладке .main как прямые дети (роутинг/атомизация экранов). */ #screen-host{display:contents} .screen{display:none;flex:1;min-height:0;overflow-y:auto;overflow-x:hidden} .screen.active{display:flex;flex-direction:column} .scr-pad{padding:20px 22px;flex:1} /* ═══════════════════════════════════════════════════════ SYSTEM STATUS (чип в шапке; заменил нижний статусбар) ═══════════════════════════════════════════════════════ */ .hdr-sys{position:relative;flex:none} .hdr-status{all:unset;cursor:pointer;display:flex;align-items:center;gap:7px;padding:5px 10px;border:1px solid var(--hair);font-family:var(--mono);font-size:12.75px;letter-spacing:.06em;color:var(--ash);transition:.12s;white-space:nowrap} .hdr-status:hover{border-color:var(--hair-hi);color:var(--bone)} .hdr-status b{color:var(--ash);font-weight:700} .hdr-status:hover b{color:var(--bone)} .hdr-status .hs-cap{color:var(--ash-2)} .hdr-status .led,.sys-pop .led{width:7px;height:7px;border-radius:50%;flex:none;background:var(--ash-2)} .hdr-status .led.ok,.sys-pop .led.ok{background:var(--green);box-shadow:0 0 5px rgba(var(--green-rgb),.5)} .hdr-status .led.warn,.sys-pop .led.warn{background:var(--amber);box-shadow:0 0 5px rgba(var(--amber-rgb),.5)} .hdr-status .led.err,.sys-pop .led.err{background:var(--err-2);box-shadow:0 0 5px rgba(var(--err-rgb),.6)} .sys-pop .led.run{background:var(--accent-2);box-shadow:0 0 5px rgba(var(--accent-rgb),.6)} .hdr-status .led.off,.sys-pop .led.off{background:var(--ash-2);box-shadow:none} .sys-pop{position:absolute;right:0;top:calc(100% + 8px);z-index:300;width:320px;background:var(--plate-pop);border:1px solid var(--hair-b);border-radius:8px;padding:12px 14px;box-shadow:0 12px 32px rgba(0,0,0,.55)} .sys-pop .sp-hd{display:flex;align-items:baseline;gap:8px;font-size:15px;font-weight:700;color:var(--bone);margin-bottom:8px} .sys-pop .sp-hd .ago{margin-left:auto;font-family:var(--mono);font-size:11.5px;font-weight:400;color:var(--ash-2)} .sys-pop .sp-row{display:flex;align-items:center;gap:9px;padding:6px 0;font-size:14px;color:var(--ash);border-top:1px solid var(--hair)} .sys-pop .sp-row b{color:var(--bone);font-weight:600} .sys-pop .sp-row .st{margin-left:auto;font-family:var(--mono);font-size:11.5px;color:var(--ash-2)} .sys-pop .sp-note{font-family:var(--mono);font-size:11.5px;color:var(--ash-2);line-height:1.55;padding-top:6px;border-top:1px solid var(--hair)} /* ═══════════════════════════════════════════════════════ COMMON COMPONENTS ═══════════════════════════════════════════════════════ */ /* Section header */ .sect{margin-bottom:20px} .sect-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px} .sect-hd h2{font-size:15px;letter-spacing:.2em;text-transform:uppercase;font-weight:800;color:var(--bone);display:flex;align-items:center;gap:9px} .sect-hd h2::before{content:'';width:5px;height:5px;background:var(--accent);box-shadow:0 0 6px var(--accent);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);flex:none} .sect-hd .sh-r{font-family:var(--mono);font-size:13.5px;letter-spacing:.06em;color:var(--ash-2)} /* То же для «Настроек»: шеврон вплотную к заголовку (кнопка «↺ Обновить» остаётся справа) */ #screen-apikeys .sect-hd{cursor:pointer;user-select:none} #screen-apikeys .sect-hd h2::after{content:'▾';font-family:var(--mono);font-size:12px;color:var(--ash-2);transition:transform .18s;flex:none;margin-left:2px} #screen-apikeys .sect-hd.sect-collapsed h2::after{transform:rotate(-90deg)} .sect-hidden{display:none !important} /* Page title */ .page-title{font-size:24px;font-weight:800;letter-spacing:.04em;color:var(--bone);margin-bottom:4px} .page-sub{font-family:var(--mono);font-size:14.25px;letter-spacing:.06em;color:var(--ash-2);margin-bottom:20px} /* Status chips */ .chip{display:inline-flex;align-items:center;gap:5px;font-family:var(--mono);font-size:12px;letter-spacing:.1em;padding:3px 9px;text-transform:uppercase;white-space:nowrap;font-weight:700} .chip.run{color:var(--accent-2);border:1px solid rgba(var(--accent-rgb),.3);background:rgba(var(--accent-rgb),.06)} .chip.ok{color:var(--accent-2);border:1px solid rgba(var(--accent-rgb),.25);background:rgba(var(--accent-rgb),.04)} .chip.grn{color:var(--green);border:1px solid rgba(var(--green-rgb),.4);background:rgba(var(--green-rgb),.07)} .chip.wait{color:var(--ash);border:1px solid var(--hair-b)} .chip.err{color:var(--err-2);border:1px solid rgba(var(--err-rgb),.25);background:rgba(var(--err-rgb),.05)} .chip.amber{color:var(--amber);border:1px solid rgba(var(--amber-rgb),.3);background:rgba(var(--amber-rgb),.05)} .chip .chip-dot{width:5px;height:5px;border-radius:50%;flex:none} .chip.run .chip-dot{background:var(--accent);box-shadow:0 0 5px var(--accent);animation:blink 1.4s steps(2,end) infinite} .chip.ok .chip-dot{background:var(--accent)} .chip.grn .chip-dot{background:var(--green)} .chip.wait .chip-dot{background:var(--ash-2)} .chip.err .chip-dot{background:var(--err-2)} .chip.amber .chip-dot{background:var(--amber)} @keyframes blink{50%{opacity:.2}} /* Progress bar */ .pbar{height:3px;background:var(--plate-hi);border-radius:0;overflow:hidden} .pbar .pb{height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-2));box-shadow:0 0 6px rgba(var(--accent-rgb),.5);transition:width .4s} .pbar.cyan .pb{background:linear-gradient(90deg,var(--accent-deep),var(--accent));box-shadow:0 0 6px rgba(var(--accent-rgb),.4)} .pbar.green .pb{background:linear-gradient(90deg,var(--green-dim),var(--green));box-shadow:0 0 6px rgba(var(--green-rgb),.4)} /* Buttons `all:unset` сбрасывает и белый-пробел, и нешринкуемость нативной кнопки: в тесном flex-ряду .btn ужимался (flex-shrink по умолчанию 1) и подпись ломалась пополам — «＋ ДОБАВИТЬ / ПОЛЬЗОВАТЕЛЯ» в две строки. Чинили это точечно инлайном (screens/settings.html), теперь правило одно на класс: подпись кнопки НЕ переносится, ширину кнопке даёт её текст. Кому нужна тянущаяся кнопка (`style="flex:1"` в pipeline) — инлайн перебивает это. */ .btn{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:7px;padding:9px 18px;border:1px solid var(--hair-b);font-size:15.75px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--ash);transition:.14s;white-space:nowrap;flex:none} .btn:hover{border-color:var(--hair-hi);color:var(--bone);background:rgba(var(--accent-rgb),.04)} .btn.primary{background:linear-gradient(180deg,var(--accent-2),var(--accent-deep));border-color:var(--accent);color:#fff;box-shadow:0 0 12px rgba(var(--accent-rgb),.35);padding:10px 22px} .btn.primary:hover{box-shadow:0 0 22px rgba(var(--accent-rgb),.6);background:linear-gradient(180deg,#6a71c2,#101da5)} .btn.sm{padding:6px 12px;font-size:13.5px} .btn.ghost{border-color:transparent;color:var(--ash-2)} .btn.ghost:hover{border-color:var(--hair-b);color:var(--ash)} .btn.cyan{border-color:var(--accent-deep);color:var(--accent-2);background:rgba(var(--accent-rgb),.04)} .btn.cyan:hover{background:rgba(var(--accent-rgb),.08);box-shadow:0 0 10px rgba(var(--accent-rgb),.2)} /* Семантические варианты (2026-07-13): вместо инлайн-перекрасок кнопок */ .btn.success{background:var(--green);border-color:var(--green);color:#07140f;font-weight:800} .btn.success:hover{background:var(--green-2);border-color:var(--green-2)} .btn.danger{color:var(--err-2);border-color:rgba(var(--err-2-rgb),.5);background:rgba(var(--err-rgb),.06)} .btn.danger:hover{background:rgba(var(--err-rgb),.16);border-color:var(--err-2);color:var(--bone)} .btn.warn{color:var(--amber-2);border-color:rgba(var(--amber-rgb),.35)} .btn.warn:hover{background:rgba(var(--amber-rgb),.12);border-color:var(--amber-2)} .btn .bi{font-size:21px} /* Input */ .inp-wrap{margin-bottom:14px} .inp-lbl{font-family:var(--mono);font-size:12.75px;letter-spacing:.14em;color:var(--ash-2);text-transform:uppercase;margin-bottom:6px;display:flex;justify-content:space-between} .inp-lbl span{color:var(--ash)} .inp{width:100%;background:var(--plate-2);border:1px solid var(--hair-b);color:var(--bone);font-family:var(--mono);font-size:16.5px;letter-spacing:.04em;padding:10px 13px;outline:none;transition:.14s;appearance:none} .inp:focus{border-color:var(--accent);box-shadow:inset 0 0 16px rgba(var(--accent-rgb),.04)} /* Поле с ошибкой валидации (.bad вешает JS до первого ввода); .csel-btn — видимый суррогат скрытого select */ .inp.bad,#screen-new-run .csel-btn.bad,#screen-ideas .csel-btn.bad{border-color:var(--err-2);box-shadow:inset 0 0 12px rgba(var(--err-rgb),.06)} /* Тёмные числовые поля (цепочки моделей / настройки рана) — под стиль приложения */ input.chn-num{background:var(--plate-2);border:1px solid var(--hair-b);border-radius:6px;color:var(--bone);font-family:var(--mono);font-size:15px;padding:3px 5px;text-align:center;outline:none;appearance:textfield} input.chn-num:focus{border-color:var(--accent-2)} .inp::placeholder{color:var(--ash-2)} select.inp{cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23828d96'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:32px} /* ══ .csel — КАСТОМНЫЙ ДРОПДАУН, база на всё приложение (§7 дизайн-системы) ══════════════════ Нативный прячется (логика читает .value/.options и слушает `change`), а показываются .csel-btn + .csel-panel. Обёртку вешает сквозной проход `_cselSweep` в core.js — руками ничего звать не нужно. Этот блок — ОБЩИЙ. Поэкранные копии ниже (#screen-new-run, #screen-ideas, #screen-kitgen, #screen-runs/admin/presets, #screen-niche-finder, #set-wrap) появились раньше него и остаются как размерные варианты: они выигрывают специфичностью, поэтому вид тех экранов не меняется. Новые экраны своих копий заводить НЕ должны — только переопределять размеры. */ /* Ширина по умолчанию — по месту (список в строке инструментов не должен занимать всю строку). `.inp-wrap` — канонический контейнер поля формы, там дропдаун во всю ширину, как обычное поле. */ .csel{position:relative;display:inline-block;vertical-align:middle;width:auto;min-width:150px;max-width:100%} .inp-wrap > .csel{width:100%} .csel > select{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;margin:0;padding:0} .csel-btn{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px; background:var(--plate-2);border:1px solid var(--hair-b);border-radius:6px;color:var(--bone); font-family:var(--mono);font-size:14px;letter-spacing:.04em;padding:8px 12px;cursor:pointer; transition:.14s;min-width:0} .csel-btn:hover{border-color:var(--hair-hi)} .csel-btn:focus-visible{border-color:var(--accent);outline:none} .csel.open .csel-btn{border-color:var(--accent);box-shadow:inset 0 0 16px rgba(var(--accent-rgb),.06)} .csel-btn.bad{border-color:var(--err-2);box-shadow:inset 0 0 12px rgba(var(--err-rgb),.06)} .csel-btn.dis{opacity:.5;cursor:default} .csel-lbl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0} .csel-arrow{color:var(--ash-2);font-size:12px;flex:none;transition:transform .15s} .csel.open .csel-arrow{transform:rotate(180deg);color:var(--accent-2)} .csel-panel{position:absolute;z-index:60;top:calc(100% + 6px);left:0;min-width:100%;width:max-content; max-width:min(420px,90vw);background:var(--plate-hi);border:1px solid var(--hair-hi);border-radius:8px; box-shadow:0 22px 50px -18px rgba(0,0,0,.85);padding:5px;max-height:300px;overflow-y:auto;display:none} .csel.open .csel-panel{display:block} .csel-opt{padding:8px 11px;border-radius:5px;font-family:var(--mono);font-size:13.5px;color:var(--ash); cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:.1s} .csel-opt:hover{background:rgba(var(--accent-rgb),.16);color:var(--bone)} .csel-opt.sel{color:var(--accent-2)} /* Недоступный пункт (движка нет в системе и т.п.) — виден, но не выбирается, как в нативном списке */ .csel-opt.dis{opacity:.4;cursor:default} .csel-opt.dis:hover{background:none;color:var(--ash)} /* Поиск по списку (` (§7 дизайн-системы) */ #screen-ideas .csel{position:relative;width:100%} #screen-ideas .csel > select.inp{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;margin:0;padding:0} #screen-ideas .csel-btn{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--plate-2);border:1px solid var(--hair-b);border-radius:6px;color:var(--bone);font-family:var(--mono);font-size:16px;letter-spacing:.04em;padding:10px 13px;cursor:pointer;transition:.14s;min-width:0} #screen-ideas .csel-btn:hover{border-color:var(--hair-hi)} #screen-ideas .csel.open .csel-btn{border-color:var(--acc);box-shadow:inset 0 0 16px rgba(var(--accent-rgb),.06)} #screen-ideas .csel-lbl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0} #screen-ideas .csel-arrow{color:var(--ash-2);font-size:12px;flex:none;transition:transform .15s} #screen-ideas .csel.open .csel-arrow{transform:rotate(180deg);color:var(--acc-2)} #screen-ideas .csel-panel{position:absolute;z-index:60;top:calc(100% + 6px);left:0;right:0;background:var(--plate-hi);border:1px solid var(--hair-hi);border-radius:8px;box-shadow:0 22px 50px -18px rgba(0,0,0,.85);padding:5px;max-height:280px;overflow-y:auto;display:none} #screen-ideas .csel.open .csel-panel{display:block} #screen-ideas .csel-opt{padding:9px 11px;border-radius:5px;font-family:var(--mono);font-size:15px;color:var(--ash);cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:.1s} #screen-ideas .csel-opt:hover{background:rgba(var(--accent-rgb),.16);color:var(--bone)} #screen-ideas .csel-opt.sel{color:var(--acc-2)} /* ── ТЕМЫ ПО ПРЕСЕТУ: кнопка у выбора пресета + список внутри общего оверлея .kg-ov ── Оверлей, а не полоса на экране: тем десяток с разбором по фазам, и вклиненные между формой и «Моими идеями» они отодвигали бы главное действие экрана вниз на пол-экрана. Оболочка — та же `.kg-ov`, что у правки поля во весь экран: второй модалки в продукте не заводим. */ #screen-ideas .it-call{width:100%;margin-top:10px;display:flex;align-items:center;gap:9px;padding:9px 11px; background:var(--plate);border:1px solid var(--hair-b);border-radius:7px;cursor:pointer; font-family:var(--ui);font-size:13.5px;text-align:left;color:var(--ash);transition:.14s} #screen-ideas .it-call:hover{color:var(--bone);border-color:var(--acc);background:var(--accent-dim)} #screen-ideas .it-call:disabled{opacity:.5;cursor:default;color:var(--ash-2); border-color:var(--hair-b);background:var(--plate)} #screen-ideas .it-call .it-ic{color:var(--acc-2);flex:none} #screen-ideas .it-call .it-n{margin-left:auto;font-family:var(--mono);font-size:11px; letter-spacing:.06em;color:var(--acc-2);background:rgba(var(--accent-rgb),.12); border:1px solid rgba(var(--accent-rgb),.28);border-radius:9px;padding:1px 8px;font-weight:700} #screen-ideas .it-call .it-n:empty{display:none} /* Форма, только что заполненная темой: подсветка вместо перехода на другой экран — «В работу» заполняет поля ВЫШЕ, и без отметки это выглядело бы как «кнопка ничего не сделала». */ #screen-ideas .ideas-bento.it-lit .ib-brief,#screen-ideas .ideas-bento.it-lit .ib-name, #screen-ideas .ideas-bento.it-lit .ib-preset{border-color:var(--acc); box-shadow:0 0 0 1px var(--accent-deep),0 0 26px -8px var(--acc);transition:box-shadow .5s,border-color .5s} /* ⚠ Псевдонимы цветов объявлены НА ЭКРАНАХ (`#screen-kitgen{--ok-2:…}`), а оверлей живёт в — вне любого из них. Без этой строки `var(--ok-2)`/`var(--warn)`/`var(--bad)` внутри `.kg-ov` не разрешаются ни во что: отметка «держит» рисовалась бы цветом текста. Найдено при переносе тем (13.08.2026) — те же имена уже звал `.kg-ov .kg-src.on` из конструктора. */ .kg-ov{--acc:var(--accent);--acc-2:var(--accent-2);--acc-deep:var(--accent-deep); --acc-rgb:var(--accent-rgb);--ok:var(--green);--ok-2:var(--green-2);--bad:var(--err-2); --warn:var(--amber-2)} /* ── ОКНО ТЕМ ДЕРЖИТ ПОЛНУЮ ВЫСОТУ, А НЕ РАСТЁТ ПО СОДЕРЖИМОМУ (16.08.2026) ── Короб оверлея по умолчанию высотой по содержимому (`max-height:100%` потолок задаёт, а не высоту). На пустом списке он выходил ~240px — и открытый дропдаун «Раздумья» (панель `.csel` — обычный абсолютный узел ВНУТРИ прокручиваемого тела, а не системное окно) торчал из него на две сотни пикселей, добавляя телу полосу прокрутки. Скролл появлялся ровно от того, что список выбора не помещался в окно. Поэтому окно тем — фиксированной высоты: тело всегда выше любой панели выбора, и открытие дропдауна больше ничего не двигает. Заодно список тем получает всю доступную высоту, ради которой окно и открывают. Высота — 80% экрана: по десятой доле сверху и снизу (решение оператора 16.08.2026). Окно во весь экран перестаёт читаться как окно — не видно, что за ним, и нечего задеть мышью, чтобы закрыть; полосы фона по краям возвращают и то и другое, а панели выбора 80% хватает с запасом вплоть до экрана в 600px высотой. Правка точечная (`#it-ov`), прочие оверлеи не трогает: у них внутри одно поле или картинка. */ #it-ov{padding:10vh 14px} #it-ov .kg-ov-bx{height:100%} #it-ov .kg-ov-bd{flex:1;min-height:0} /* Панель выбора в строке заказа не должна прокручиваться сама: восемь ступеней шкалы раздумий занимают ~275px, и общий потолок в 280 задевал их вплотную — на другом рендере шрифта это вторая полоса прокрутки внутри первой. Список форматов (их бывает до двадцати) по-прежнему упирается в потолок и прокручивается — так и надо. */ #it-ov .it-bar .csel-panel{max-height:320px} /* ⚠ СТРОКА ЗАКАЗА ОБЯЗАНА ЖИТЬ В ОДИН РЯД (16.08.2026). Она стоит НАД списком тем, и каждый её перенос — это минус ряд карточек в окне: селектор «Раздумья» с шириной по умолчанию сложил строку в три ряда. Поэтому короб тем расширен до общего потолка `.kg-ov-bx` (1180px, задаётся в `ideas.js`), а числовые поля ужаты до ширины своих двух цифр. ⚠ ШИРИНУ СПИСКА ЗАДАЁТ `.csel`, А НЕ `.inp`: сквозной проход `_cselSweep` (core.js) прячет настоящий покажет другую раскладку, чем видит оператор. */ .kg-ov .it-bar{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap;padding-bottom:14px; border-bottom:1px solid var(--hair)} .kg-ov .it-f{display:flex;flex-direction:column;gap:5px} .kg-ov .it-f .inp-lbl{font-family:var(--mono);font-size:11px;letter-spacing:.08em; text-transform:uppercase;color:var(--ash-2)} .kg-ov .it-f .inp{width:120px} .kg-ov .it-f.num .inp{width:96px} /* «10», «20», «6» — больше туда не вводят */ .kg-ov .it-f.think .inp,.kg-ov .it-f.think .csel{width:214px} /* по самой длинной подписи шкалы */ .kg-ov .it-f.model .inp{width:186px} /* «OpenRouter · google/gemini-2.5-pro» — самая длинная */ /* Раздумья при не-Claude движке: селектор гаснет вместе с подписью — у Gemini и OpenRouter бюджета нет вовсе, и рабочий на вид селектор молча ничего бы не менял. */ .kg-ov .it-f.off{opacity:.45} .kg-ov .it-f.off .inp{cursor:not-allowed} .kg-ov .it-f.wide{flex:1;min-width:160px} .kg-ov .it-f.wide .inp{width:100%} .kg-ov .it-bar .it-go{flex:none} .kg-ov .it-note{border:1px solid var(--hair-b);border-radius:6px;background:var(--plate); padding:11px 13px;margin-top:14px;font-size:13.5px;line-height:1.6;color:var(--ash)} .kg-ov .it-note b{color:var(--bone)} .kg-ov .it-note.bad{box-shadow:inset 3px 0 0 var(--bad)} .kg-ov .it-note.warn{box-shadow:inset 3px 0 0 var(--warn)} .kg-ov .it-sect{display:flex;align-items:center;gap:9px;margin:20px 0 10px;font-family:var(--mono); font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--bone)} .kg-ov .it-sect .it-r{margin-left:auto;font-weight:400;font-size:11.5px;letter-spacing:.03em; text-transform:none;font-family:var(--ui);color:var(--ash-2)} .kg-ov .it-list{display:flex;flex-direction:column;gap:10px} .kg-ov .it-card{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:0 10px; align-items:start;background:var(--plate);border:1px solid var(--hair-b);border-radius:6px; padding:12px 14px;transition:.14s} .kg-ov .it-card:hover{border-color:var(--hair-hi)} .kg-ov .it-card.ok{box-shadow:inset 3px 0 0 var(--ok-2)} .kg-ov .it-card.warn{box-shadow:inset 3px 0 0 var(--warn)} .kg-ov .it-card.bad{box-shadow:inset 3px 0 0 var(--bad);opacity:.85} .kg-ov .it-card.none{box-shadow:inset 3px 0 0 var(--ash-2);opacity:.85} .kg-ov .it-mark{font-family:var(--mono);font-size:15px;color:var(--ash-2);line-height:1.5} .kg-ov .it-card.ok .it-mark{color:var(--ok-2)} .kg-ov .it-card.warn .it-mark{color:var(--warn)} .kg-ov .it-card.bad .it-mark{color:var(--bad)} /* ОТРАБОТАННАЯ ТЕМА — ГАСНЕТ, А НЕ ПРЯЧЕТСЯ (20.08.2026). Оператор помечает взятые темы, чтобы не перечитывать их в следующем прогоне; убери мы её из списка — сломался бы счётчик секции («Проверено — 10» и девять карточек) и пропала бы возможность снять галочку. Гасим цветом и снимаем полосу вердикта: карточка остаётся на месте и читается, просто уходит на второй план. Кнопка «В работу» гаснет вместе с ней, но НЕ отключается: тему берут повторно (сериями). */ .kg-ov .it-card.done{opacity:.42;box-shadow:inset 3px 0 0 var(--ash-2)} .kg-ov .it-card.done .it-t{color:var(--ash);text-decoration:line-through; text-decoration-color:var(--ash-2)} .kg-ov .it-card.done:hover{opacity:.72} .kg-ov .it-act{display:flex;flex-direction:column;align-items:flex-end;gap:7px} .kg-ov .it-done{display:flex;align-items:center;gap:6px;cursor:pointer;user-select:none; font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase; color:var(--ash-2);white-space:nowrap} .kg-ov .it-done:hover{color:var(--bone)} /* Галочка — ТЁМНАЯ, как везде в продукте (та же лепка, что у `.nrg-stop` / `.kg-chk`): нативный чекбокс рисуется белым квадратом и на тёмной карточке светится ярче самой темы. `accent-color` красит только ОТМЕЧЕННОЕ состояние, фон пустого остаётся системным — поэтому `appearance:none` и своя коробка. Отмеченная — зелёная, в цвет «держит» и подписи «отработана». */ .kg-ov .it-done input{appearance:none;-webkit-appearance:none;width:15px;height:15px;flex:none; margin:0;cursor:pointer;border:1px solid rgba(var(--wash-rgb),.5);border-radius:4px; background:rgba(0,0,0,.35);position:relative;transition:.12s} .kg-ov .it-done:hover input{border-color:var(--ok-2)} .kg-ov .it-done input:checked{background:var(--ok-2);border-color:var(--ok-2)} .kg-ov .it-done input:checked::after{content:'';position:absolute;left:4px;top:1px;width:4px; height:8px;border:solid var(--plate);border-width:0 2px 2px 0;transform:rotate(45deg)} .kg-ov .it-card.done .it-done{color:var(--ok-2)} .kg-ov .it-t{font-size:16px;font-weight:700;color:var(--bone);line-height:1.35} .kg-ov .it-g{font-size:14px;color:var(--ash);line-height:1.55;margin-top:5px} .kg-ov .it-more{margin-top:7px;font-size:12.5px;color:var(--ash-2);line-height:1.6} .kg-ov .it-more b{color:var(--ash);font-weight:600} .kg-ov .it-v{font-family:var(--mono);font-size:12px;color:var(--ok-2);margin-top:6px} .kg-ov .it-card.warn .it-v,.kg-ov .it-card.bad .it-v{color:var(--warn)} /* «Сверх заказа» — свёрнутая секция под списком: темы проверены и держат, но в заказ не вошли. Заголовок свёртки собран из тех же .it-sect/.it-r, что и обычные секции: это такая же секция, просто закрытая по умолчанию. */ .kg-ov .it-over>summary{display:flex;align-items:center;gap:9px;margin:20px 0 10px;cursor:pointer; font-family:var(--mono);font-size:11.5px;font-weight:700;letter-spacing:.1em; text-transform:uppercase;color:var(--ash);list-style:none} .kg-ov .it-over>summary::-webkit-details-marker{display:none} .kg-ov .it-over>summary::before{content:'▸';font-size:12px;color:var(--ash-2)} .kg-ov .it-over[open]>summary::before{content:'▾'} .kg-ov .it-over>summary:hover{color:var(--bone)} .kg-ov .it-over>summary .it-r{margin-left:auto;font-weight:400;font-size:11.5px;letter-spacing:.03em; text-transform:none;font-family:var(--ui);color:var(--ash-2)} .kg-ov .it-rej{margin:0;padding:0;list-style:none;font-size:13px;color:var(--ash-2)} .kg-ov .it-rej li{display:flex;gap:8px;align-items:baseline;padding:6px 0; border-top:1px solid var(--hair)} .kg-ov .it-rej .it-mark{color:var(--bad);font-size:13px} /* Лента «Мои идеи» */ #screen-ideas .ideas-list{display:flex;flex-direction:column;gap:10px} #screen-ideas .idea-card{position:relative;background:var(--plate-2);border:1px solid var(--hair-b);border-radius:var(--cut);padding:15px 17px 15px 19px;overflow:hidden;transition:border-color .15s} #screen-ideas .idea-card:hover{border-color:var(--hair-hi)} #screen-ideas .idea-card::before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--ash-2)} #screen-ideas .idea-card.is-generating::before{background:var(--amber-2);box-shadow:0 0 8px rgba(196,143,60,.5)} #screen-ideas .idea-card.is-ready::before{background:var(--green);box-shadow:0 0 8px rgba(var(--green-rgb),.5)} #screen-ideas .idea-card.is-implemented::before{background:var(--acc);box-shadow:0 0 8px var(--acc)} #screen-ideas .idea-card.is-queued::before{background:var(--ash-2)} #screen-ideas .ic-queue{margin-top:11px;font-family:var(--mono);font-size:13px;letter-spacing:.02em;color:var(--ash);display:flex;align-items:center;gap:8px} #screen-ideas .ic-queue b{color:var(--acc-2);font-variant-numeric:tabular-nums;font-weight:700} #screen-ideas .idea-card.is-failed::before{background:var(--err-2);box-shadow:0 0 8px rgba(var(--err-2-rgb),.4)} #screen-ideas .idea-card.is-archived{opacity:.66} #screen-ideas .idea-card.is-archived::before{background:var(--ash-2)} #screen-ideas #idea-name{width:100%;font-family:var(--mono);font-size:14px} #screen-ideas .ic-id{font-family:var(--mono);font-size:11px;letter-spacing:.02em;color:var(--ash-2);background:var(--void);border:1px solid var(--hair);border-radius:4px;padding:1px 6px;white-space:nowrap;font-variant-numeric:tabular-nums} #screen-ideas .ic-runlink{margin-top:11px;font-family:var(--mono);font-size:12.5px;color:var(--acc-2);display:inline-flex;align-items:center;gap:7px;padding:8px 12px;border:1px solid var(--hair-b);border-left:2px solid var(--acc);border-radius:6px;background:rgba(var(--accent-rgb),.06);cursor:pointer;transition:.14s;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} #screen-ideas .ic-runlink:hover{border-color:var(--hair-hi);background:rgba(var(--accent-rgb),.12);color:var(--bone)} #screen-ideas .ideas-arch{margin-top:22px;border-top:1px solid var(--hair-b);padding-top:6px} #screen-ideas .ideas-arch-hd{display:flex;align-items:center;gap:11px;font-family:var(--mono);font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ash-2);cursor:pointer;padding:12px 2px;user-select:none;transition:color .14s} #screen-ideas .ideas-arch-hd:hover{color:var(--ash)} #screen-ideas .ideas-arch-hd .ar-caret{color:var(--acc-2);font-size:11px;transition:transform .16s} #screen-ideas .ideas-arch.open .ideas-arch-hd .ar-caret{transform:rotate(90deg)} #screen-ideas .ideas-arch-hd .ar-cnt{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--acc-2);background:rgba(var(--accent-rgb),.12);border:1px solid rgba(var(--accent-rgb),.28);border-radius:9px;padding:1px 9px;font-weight:700} #screen-ideas .ideas-arch-body{display:none;flex-direction:column;gap:10px;margin-top:6px} #screen-ideas .ideas-arch.open .ideas-arch-body{display:flex} #screen-ideas .ic-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap} #screen-ideas .ic-title{font-family:var(--ui);font-size:17px;font-weight:700;color:var(--bone);min-width:0} #screen-ideas .ic-preset{font-family:var(--mono);font-size:11.5px;letter-spacing:.03em;color:var(--ash-2);display:inline-flex;align-items:center;gap:5px} #screen-ideas .ic-spacer{flex:1} #screen-ideas .ic-date{font-family:var(--mono);font-size:11px;letter-spacing:.03em;color:var(--ash-2);font-variant-numeric:tabular-nums;white-space:nowrap} #screen-ideas .ic-src{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:var(--ash);background:var(--plate-hi);border:1px solid var(--hair-b);border-radius:4px;padding:2px 7px;display:inline-flex;align-items:center;gap:5px;white-space:nowrap} #screen-ideas .ic-src .sic{font-size:10px;color:var(--acc-2)} #screen-ideas .ic-brief{margin-top:11px;border:1px solid var(--hair);border-left:2px solid rgba(var(--accent-rgb),.4);border-radius:6px;background:rgba(11,12,15,.5);padding:9px 12px} #screen-ideas .ic-brief .lbl{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ash-2);display:block;margin-bottom:5px} /* Шапка плитки брифа: подпись слева, «⧉ Копировать» прижата вправо. Кнопка приглушена до наведения — она есть у КАЖДОЙ карточки, и в полный контраст ряд карточек читался бы как ряд кнопок. Высота шапки задаётся подписью: кнопка компактнее обычной .btn.sm, чтобы плитка брифа не подросла ради неё. */ #screen-ideas .ic-brief-hd{display:flex;align-items:center;gap:10px;margin-bottom:5px} #screen-ideas .ic-brief-hd .lbl{margin-bottom:0} #screen-ideas .ic-brief .ic-copy{margin-left:auto;flex:none;padding:2px 8px;font-size:11px;line-height:1.6;color:var(--ash-2);border-color:var(--hair)} #screen-ideas .ic-brief .ic-copy:hover{color:var(--accent-2);border-color:var(--accent)} #screen-ideas .ic-brief .txt{font-family:var(--mono);font-size:12.5px;line-height:1.5;color:var(--ash);white-space:pre-wrap;max-height:88px;overflow:auto} #screen-ideas .chip.gen{color:var(--amber-2);border:1px solid rgba(var(--amber-rgb),.35);background:rgba(var(--amber-rgb),.06)} #screen-ideas .chip.gen .chip-dot{background:var(--amber-2);box-shadow:0 0 5px var(--amber);animation:blink 1.4s steps(2,end) infinite} #screen-ideas .ic-body{margin-top:11px} #screen-ideas .ic-working{font-family:var(--mono);font-size:13px;color:var(--amber-2);display:flex;align-items:center;gap:9px} #screen-ideas .ic-scan{flex:1;max-width:220px;height:3px;border-radius:5px;background:var(--track);overflow:hidden;position:relative} #screen-ideas .ic-scan::after{content:'';position:absolute;top:0;bottom:0;width:40%;left:-40%;border-radius:5px;background:linear-gradient(90deg,transparent,var(--amber-2),transparent);animation:ideaScan 1.25s ease-in-out infinite} @keyframes ideaScan{0%{left:-40%}100%{left:100%}} #screen-ideas .idea-summary{white-space:pre-wrap;font-family:var(--ui);font-size:14px;line-height:1.6;color:var(--ash);max-height:260px;overflow:auto;padding:13px 15px;border:1px solid var(--hair);border-radius:6px;background:var(--void)} #screen-ideas .idea-summary::-webkit-scrollbar{width:9px} #screen-ideas .idea-summary::-webkit-scrollbar-thumb{background:var(--plate-hi);border-radius:5px} #screen-ideas .ic-error{padding:11px 14px;border:1px solid rgba(var(--err-rgb),.25);border-left:2px solid var(--err-2);border-radius:6px;background:rgba(var(--err-rgb),.05);color:var(--err-2);font-size:13.5px;line-height:1.5} #screen-ideas .ic-flag-why{padding:10px 13px;margin-bottom:9px;border:1px solid rgba(var(--err-rgb),.25);border-left:2px solid var(--err-2);border-radius:6px;background:rgba(var(--err-rgb),.05);color:var(--err-2);font-size:12.75px;line-height:1.5;white-space:pre-wrap;font-family:var(--mono)} #screen-ideas .ic-flag-scen{margin-top:9px} #screen-ideas .ic-flag-scen>summary{cursor:pointer;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ash-2);padding:5px 0;user-select:none} #screen-ideas .ic-flag-scen[open]>summary{color:var(--ash);margin-bottom:6px} #screen-ideas .ic-acts{display:flex;gap:8px;margin-top:13px;flex-wrap:wrap} #screen-ideas .idea-empty{display:flex;flex-direction:column;align-items:center;gap:11px;padding:46px 20px;border:1px dashed var(--hair-b);border-radius:var(--cut);background:rgba(11,12,15,.4);text-align:center} #screen-ideas .idea-empty .glyph{font-size:30px;color:var(--acc-2);opacity:.75;line-height:1} #screen-ideas .idea-empty .t{font-family:var(--ui);font-size:15px;color:var(--ash);font-weight:600} #screen-ideas .idea-empty .s{font-family:var(--mono);font-size:12px;letter-spacing:.03em;color:var(--ash-2);max-width:380px;line-height:1.6} @media(max-width:820px){#screen-ideas .ideas-bento{grid-template-columns:1fr}} /* ══ ПОИСК НИШ (Niche Finder, админ) — по «Дизайн-система.md», эталон «В генерации». Жил в