/* Onest — свой хостинг (18.10.2026; static/fonts, лицензия OFL.txt рядом): файлы v11 с Google Fonts, переменные по весу. Браузер качает подмножество, только если на странице есть его символы: cyrillic и latin нужны всегда (preload в ), ruble — ₽, math — ≈ ≤ ≥ и стрелки, symbols — ⅓ и ✓ (эти три вырезаны из latin-ext / math / symbols Google: 1–3 КБ вместо 18–28), latin-ext — редкие буквы вроде ł ő. Вес 400–800, как было (900 сводится к 800). Тот же блок — в style.css, seo.css и юр. страницах (сверяет tests/test_self_hosted_font.py); новый файл шрифта — новый ?v= во всех копиях и в preload. */ @font-face{font-family:'Onest';font-style:normal;font-weight:400 800;font-display:swap;src:url("/static/fonts/onest-math.woff2?v=1") format('woff2');unicode-range:U+2190,U+2192,U+2196-2199,U+21A9,U+21B6-21B7,U+21BA-21BB,U+2248,U+2260,U+2264-2265,U+27F5-27F6} @font-face{font-family:'Onest';font-style:normal;font-weight:400 800;font-display:swap;src:url("/static/fonts/onest-symbols.woff2?v=1") format('woff2');unicode-range:U+2153-215E,U+2713} @font-face{font-family:'Onest';font-style:normal;font-weight:400 800;font-display:swap;src:url("/static/fonts/onest-latin-ext.woff2?v=1") format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20BC,U+20BE-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:'Onest';font-style:normal;font-weight:400 800;font-display:swap;src:url("/static/fonts/onest-ruble.woff2?v=1") format('woff2');unicode-range:U+20BD} @font-face{font-family:'Onest';font-style:normal;font-weight:400 800;font-display:swap;src:url("/static/fonts/onest-cyrillic.woff2?v=1") format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116} @font-face{font-family:'Onest';font-style:normal;font-weight:400 800;font-display:swap;src:url("/static/fonts/onest-latin.woff2?v=1") format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} :root{--bg:#16130F;--ink-photo:#3A1109;--ink-video:#3A2606;--ink-audio:#06321F;--ink-chat:#10142E;--ink-error:#3A0A12;--card:#241F19;--card2:#2E2820;--brd:#3A332A;--tx:#F5F0E8;--tx2:#B5AC9E;--tx3:#9A9281;--violet:#FF6B5C;--cyan:#8C9BFF;--photo:#FF6B5C;--video:#FFB23E;--audio:#3DD68C;--chat:#8C9BFF;--gold:#FFCB6B;--promo-pink:#D6246E;--success:#3DD68C;--error:#FB7185;--grad:linear-gradient(135deg,#FF6B5C 0%,#FFB23E 100%);--grad-soft:linear-gradient(135deg,rgba(255,107,92,.16),rgba(255,178,62,.12));--vdim:rgba(255,107,92,.12);--vbrd:rgba(255,107,92,.32);--r:16px;--rs:12px;--font:'Onest',system-ui,-apple-system,'Segoe UI',sans-serif;--font-sans:var(--font);--font-disp:var(--font);--font-mono:var(--font)} /* Один шрифт — Onest (17.10.2026): роли disp/sans/mono остались переменными, но все указывают на него. Иерархия — размером, весом и регистром, цифры — табличные (tnum). Моноширинный — только код в ответах чата. */ *{margin:0;padding:0;box-sizing:border-box} :focus-visible{outline:2px solid var(--chat);outline-offset:2px} :focus:not(:focus-visible){outline:none} body{font-family:var(--font-sans);background:var(--bg);color:var(--tx);min-height:100vh;-webkit-font-smoothing:antialiased;line-height:1.5;font-feature-settings:"tnum" 1} h1,h2,.ph,.pg-title,.pg-center,.sec-title,.page.sub>h2,.page.sub>.ph{font-family:var(--font-disp);letter-spacing:-.03em;font-weight:800} h3,h4{font-family:var(--font-sans);letter-spacing:-.02em} .grad-tx{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} .gold{color:var(--gold)}.muted{color:var(--tx2)}.small{font-size:12px}.block{display:block}.hidden{display:none!important}.full{width:100%}.center{text-align:center}.mt12{margin-top:12px}.mt16{margin-top:16px}.mb12{margin-bottom:12px} /* HEADER */ .header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;position:sticky;top:0;background:var(--bg);z-index:100;border-bottom:1px solid transparent;transition:border-color .2s} body.scrolled .header{border-bottom-color:var(--brd)} .header-left{display:flex;align-items:center;gap:8px;min-width:0} .header-brand{display:flex;align-items:center;gap:7px;font-size:17px;font-weight:800;letter-spacing:-.045em;line-height:1} .svg-defs{position:absolute;width:0;height:0;overflow:hidden} .brand-mark{display:block;width:1.5em;height:1.5em;flex-shrink:0} .brand-word{min-width:0;overflow:hidden} .header-actions{display:flex;align-items:center;gap:8px} .icon-btn{width:34px;height:34px;border-radius:50%;border:none;background:var(--card);color:var(--tx);display:flex;align-items:center;justify-content:center;cursor:pointer} .balance-chip{display:flex;align-items:center;gap:5px;background:var(--card);border:1px solid var(--brd);padding:6px 10px;border-radius:999px;font-family:var(--font-mono);font-size:13px;font-weight:600} /* Монета-токен (17.10.2026): SVG-монета — золото, чеканный ободок и «W» как в знаке логотипа. Буква «W» в разметке остаётся для экранного диктора и копирования, но не рисуется: все монеты (шапка, баланс, цена, история, награды) — один рисунок. */ .coin{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;background:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cdefs%3E%3ClinearGradient%20id='g'%20x1='0'%20y1='0'%20x2='1'%20y2='1'%3E%3Cstop%20offset='0'%20stop-color='%23FFD98A'/%3E%3Cstop%20offset='.5'%20stop-color='%23FFCB6B'/%3E%3Cstop%20offset='1'%20stop-color='%23FFB23E'/%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle%20cx='12'%20cy='12'%20r='12'%20fill='url%28%23g%29'/%3E%3Ccircle%20cx='12'%20cy='12'%20r='9.6'%20fill='none'%20stroke='%233A2606'%20stroke-opacity='.24'%20stroke-width='1.1'/%3E%3Cpath%20d='M6.8%209.2%208.9%2015.1%2012%2010.8%2015.1%2015.1%2017.2%209.2'%20fill='none'%20stroke='%233A2606'%20stroke-width='2.4'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat;color:transparent;-webkit-text-fill-color:transparent;text-shadow:none;font-size:10px;font-weight:800;flex-shrink:0;box-shadow:0 2px 5px -2px rgba(0,0,0,.55);user-select:none} .coin.lg{width:24px;height:24px;font-size:12px} .topup-btn{padding:7px 14px;border:none;background:var(--violet);color:#fff;border-radius:999px;font-size:12px;font-weight:700;cursor:pointer} /* CONTENT */ .content{padding:0 16px} .page{display:none;padding-bottom:calc(74px + var(--sab))}.page.active{display:block;animation:pageFade .22s ease} /* opacity-only (no transform) so fixed .gen-bar isn't reparented mid-animation */ @keyframes pageFade{from{opacity:0}to{opacity:1}} /* Страница, открытая при загрузке (pg-boot в разметке, снимает showPage), не проявляется: первый кадр при opacity 0 Chrome не засчитывает в LCP, а дальше анимация идёт на композиторе без перерисовки — арт промо из разметки ждал бы app.js (19.10.2026) */ .page.pg-boot{animation:none} .create-form:not(.hidden){animation:formFade .2s ease} @keyframes formFade{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}} /* Уменьшить движение (G3.5): без шиммеров, спиннеров и выездов; индикатор генерации не застывает, а медленно «дышит» прозрачностью */ @media(prefers-reduced-motion:reduce){.page.active,.create-form:not(.hidden){animation:none}.ref-spin,.dot-badge.active,.chat-typing span,.skel::after,.gal-gen::before,.tpl-loading .gal-gen-spin,.create-form .gen-btn.gen-ready,.create-form .gen-btn.gen-ready::before{animation:none!important}.create-form .gen-btn.gen-ready::before{display:none}.gal-gen-spin,.ni-arc,.gs-arc{animation:gbreath 2.4s ease-in-out infinite!important}.toast,.sheet,.seg-ind,.slider-toggle,.slider-toggle::before,.field-label,.pkg,.info-card,.tu-bar,.tu-bar:not(.show){transition:none!important}.tu-buy-p.tick{animation:none}.wd-ov,.wd-sheet{animation:none!important}} @keyframes gbreath{50%{opacity:.4}} .pg-title{font-size:24px;font-weight:800;line-height:1.15;margin-bottom:16px} .pg-center{font-size:24px;font-weight:800;line-height:1.15;margin-bottom:16px} .page.sub>h2,.page.sub>.ph{font-size:24px;font-weight:800;letter-spacing:-.03em;line-height:1.15;margin:4px 0 16px} /* SECTIONS */ .home-hook{padding:16px 0 10px} /* Промо-карусель главной (спека docs/specs/2026-10-16-home-promo-carousel-design.md): лента во всю ширину экрана, слайд 86 % (соседи выглядывают по краям), 4:3; текст — вёрсткой поверх арта, размер — от ширины слайда (cqw) с px-фолбэком; мазок подзаголовка — --promo-pink (белый текст 4,8:1); шаг автопрокрутки = длительность promoBar (полоска активной точки). */ .promo{margin:4px -16px 18px} .promo-car{position:relative;display:flex;gap:8px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch} .promo-car::-webkit-scrollbar{display:none} .promo-slide{position:relative;flex:0 0 86%;aspect-ratio:4/3;border:0;border-radius:20px;padding:0;overflow:hidden;background:var(--card);color:#fff;text-align:left;font:inherit;cursor:pointer;scroll-snap-align:center;scroll-snap-stop:always;container-type:inline-size;opacity:.5;transition:opacity .35s ease,transform .15s ease} .promo-slide.on{opacity:1} .promo-slide:active{transform:scale(.985)} .promo-slide::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(0,0,0,.66) 0%,rgba(0,0,0,.42) 40%,rgba(0,0,0,0) 70%)} .promo-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% 50%} .promo-txt{position:absolute;z-index:2;inset:0 auto 0 0;width:66%;padding:20px 0 18px 18px;padding:6.6cqw 0 6cqw 6cqw;display:flex;flex-direction:column;align-items:flex-start} .promo-t{display:block;font-family:var(--font-disp);font-weight:800;font-size:22px;font-size:7cqw;line-height:1.02;letter-spacing:-.03em;text-transform:uppercase;text-shadow:0 2px 10px rgba(0,0,0,.5);overflow-wrap:break-word} .promo-acc{display:block;color:var(--gold)} .promo-sub{display:block;margin-top:10px;margin-top:3.4cqw;rotate:-2deg;transform-origin:left center} .promo-sub span{background:var(--promo-pink);color:#fff;font-weight:800;font-style:italic;font-size:12px;font-size:max(11px,3.8cqw);line-height:1.6;padding:.18em .55em;border-radius:6px;-webkit-box-decoration-break:clone;box-decoration-break:clone} .promo-cta{margin-top:auto;display:inline-flex;align-items:center;gap:6px;background:var(--gold);color:var(--ink-video);font-weight:800;font-size:13px;font-size:max(12px,4.4cqw);line-height:1.2;padding:9px 14px;padding:2.8cqw 4.6cqw;border-radius:999px;box-shadow:0 4px 14px rgba(0,0,0,.35)} .promo-cta svg{width:1.1em;height:1.1em;flex:none;animation:promoNudge 1.6s ease-in-out infinite} .promo-slide.on .promo-img{animation:promoZoom 6s ease-out both} .promo-slide.on .promo-t,.promo-slide.on .promo-sub,.promo-slide.on .promo-cta{animation:promoIn .55s cubic-bezier(.2,.8,.2,1) both} .promo-slide.on .promo-sub{animation-delay:.08s} .promo-slide.on .promo-cta{animation-delay:.16s} .promo-dots{display:flex;justify-content:center;gap:6px;margin-top:10px} /* До app.js первый слайд — из разметки (.promo-pre, index.html): он и держит место под карусель (CLS), по центру — там же, где его поставит app.js. Точки: пустые не видны (один слайд), но до app.js место под них держится — иначе «Тренды» съезжали на 16 px */ .promo-dots:empty{display:none} .promo-car.promo-pre{justify-content:center} .promo-pre+.promo-dots:empty{display:block;height:6px} .promo-dots i{display:block;width:6px;height:6px;border-radius:999px;background:var(--brd);overflow:hidden;transition:width .3s ease} .promo-dots i.on{width:22px} .promo-dots b{display:block;width:0;height:100%;border-radius:inherit;background:var(--gold)} .promo-dots i.on b{animation:promoBar 5s linear both} .promo.hold .promo-dots i.on b{animation-play-state:paused} @keyframes promoZoom{from{transform:scale(1)}to{transform:scale(1.06)}} @keyframes promoIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} @keyframes promoNudge{0%,100%{transform:translateX(0)}50%{transform:translateX(3px)}} @keyframes promoBar{from{width:0}to{width:100%}} @media(prefers-reduced-motion:reduce){.promo-slide{transition:none}.promo-slide.on .promo-img,.promo-slide.on .promo-t,.promo-slide.on .promo-sub,.promo-slide.on .promo-cta,.promo-cta svg{animation:none}.promo-dots i{transition:none}.promo-dots i.on b{animation:none;width:100%}} .hook-title{font-family:var(--font-disp);font-size:26px;line-height:1.1;font-weight:800;letter-spacing:-.035em;margin-bottom:14px} .hook-actions{display:flex;gap:10px} .sec{margin-bottom:28px} .sec-title{display:flex;align-items:center;gap:8px;font-size:16px;font-weight:700;margin-bottom:14px} .bar{width:3px;height:17px;background:var(--violet);border-radius:2px;display:inline-block} .sec-lbl{display:block;font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.08em;color:var(--tx3);margin-bottom:10px} /* TRENDS */ .trends-grid{--tr-cols:3;--tr-gap:2px;display:flex;flex-direction:column;gap:var(--tr-gap);margin:0 -16px 12px;container-type:inline-size} .tr-row{display:grid;grid-template-columns:repeat(var(--tr-cols),minmax(0,1fr));grid-template-rows:calc((100cqw - (var(--tr-cols) - 1) * var(--tr-gap)) / var(--tr-cols) * 16 / 9);gap:var(--tr-gap)} .tr-row.tr-hero{grid-template-rows:calc(100cqw * 9 / 16)} .tr-row .trend-t{aspect-ratio:auto;min-height:0} .tr-hero>.trend-t{grid-column:1/-1} .tr-hh{grid-column:span 2;display:grid;grid-template-rows:repeat(2,minmax(0,1fr));gap:var(--tr-gap);min-height:0} @supports not (width:1cqw){.tr-row,.tr-row.tr-hero{grid-template-rows:none}.tr-row>.trend-t{aspect-ratio:9/16}.tr-hero>.trend-t{aspect-ratio:16/9}.tr-hh{aspect-ratio:9/8}} .trend-w .trend-cap{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .tr-filters{min-height:96px;margin:-4px 0 12px} .tr-seg{display:flex;gap:2px;padding:3px;margin-bottom:8px;background:var(--card);border:1px solid var(--brd);border-radius:999px} .tr-mode{position:relative;flex:1;min-height:34px;border:0;border-radius:999px;background:none;color:var(--tx2);font:600 13px/1.2 var(--font-sans);cursor:pointer;transition:background .15s,color .15s} .tr-mode::after{content:"";position:absolute;inset:-5px 0} .tr-mode.on{background:var(--card2);color:var(--tx)} .tr-chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:0 -16px;padding:5px 16px} .tr-chips::-webkit-scrollbar{display:none} .tr-chip{position:relative;flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 14px;border:1px solid var(--brd);background:var(--card2);color:var(--tx2);border-radius:999px;font:600 13px/1.2 var(--font-sans);white-space:nowrap;cursor:pointer;transition:background .15s,color .15s,border-color .15s} .tr-chip::after{content:"";position:absolute;inset:-5px -3px} .tr-chip-ico{display:inline-flex} .tr-chip-ico svg{width:17px;height:17px} .tr-mode:not(.on):active,.tr-chip:not(.on):active{background:var(--brd)} .tr-chip.on{background:var(--video);border-color:var(--video);color:var(--ink-video)} .trends-grid>.gal-more{margin:12px 16px 0} .trend-t{aspect-ratio:9/16;background:var(--card);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:var(--tx2);cursor:pointer;position:relative;overflow:hidden} .trend-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block} .trend-t.has-media::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(0,0,0,0) 32%,rgba(0,0,0,.45) 55%,rgba(0,0,0,.8) 78%,rgba(0,0,0,.92) 100%)} /* Название тренда — в две строки (capTwoHtml), низ плитки под ним темнее (26.10.2026) */ .trend-cap .cap-l{display:block} .trend-t.has-media .trend-cap{position:absolute;left:8px;right:8px;bottom:8px;z-index:2;color:#fff;font-size:11px;font-weight:800;letter-spacing:.02em;line-height:1.2;text-transform:uppercase;text-shadow:0 1px 5px rgba(0,0,0,.85)} .trend-top{position:absolute;top:6px;left:6px;right:6px;z-index:3;display:flex;flex-wrap:wrap-reverse;align-items:center;gap:4px;pointer-events:none} .trend-badge{min-width:0} .trend-badge-ico{width:26px;height:26px;border-radius:50%;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)} .trend-badge-pill{display:inline-flex;align-items:flex-start;gap:3px;max-width:100%;padding:4px 7px;border-radius:10px;background:rgba(22,19,15,.72);color:#fff;font-size:11px;font-weight:700;line-height:1.2;text-align:left;text-transform:uppercase;letter-spacing:.2px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)} .trend-t:active{background:var(--card2)} .tbadge{position:relative;overflow:hidden;flex-shrink:0;margin-left:auto;display:inline-flex;align-items:center;gap:3px;padding:2px 7px;border-radius:999px;font-size:11px;font-weight:800;line-height:1.35;letter-spacing:.6px;text-transform:uppercase;white-space:nowrap;box-shadow:0 2px 8px rgba(0,0,0,.35)} .tbadge svg{width:11px;height:11px;flex-shrink:0;margin-left:-2px} .tbadge-new{background:var(--grad);color:var(--ink-photo)} .tbadge-top{background:var(--gold);color:var(--ink-video)} .tbadge-hit{background:var(--photo);color:var(--ink-photo)} .tbadge-vip{background:rgba(14,11,8,.86);color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold),0 2px 8px rgba(0,0,0,.35)} .tbadge-viral{background:var(--video);color:var(--ink-video)} /* Нейросеть шаблона в углу плитки (вместо плашки, 26.10.2026): без подложки — читаемость держит тень; марка жирным, остальное тоньше. Всегда в правом верхнем углу: не влезла рядом с меткой «Фото + видео» — метка уходит строкой ниже (wrap-reverse у .trend-top); рядом с камерой делится на две строки «марка / версия» — высотой с иконку. */ .tmodel{margin-left:auto;min-width:0;max-width:100%;padding-right:1px;color:#fff;font-size:11px;font-weight:800;line-height:1.15;letter-spacing:.01em;text-align:right;text-shadow:0 1px 2px rgba(0,0,0,.85),0 0 10px rgba(0,0,0,.55)} .tmodel i{font-style:normal;font-weight:500;opacity:.85} .trend-badge-ico+.tmodel{max-width:calc(100% - 30px)} .tbadge-top::after,.tbadge-vip::after{content:"";position:absolute;top:-2px;bottom:-2px;left:0;width:45%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.65),transparent);transform:translateX(-160%) skewX(-18deg);animation:tbadge-shine 4.6s ease-in-out infinite;pointer-events:none} .tbadge-vip::after{background:linear-gradient(105deg,transparent,rgba(255,203,107,.5),transparent);animation-delay:1.4s} @keyframes tbadge-shine{0%,72%{transform:translateX(-160%) skewX(-18deg)}100%{transform:translateX(330%) skewX(-18deg)}} @media(prefers-reduced-motion:reduce){.tbadge::after{display:none}} .btn-outline{padding:12px;border:1px solid var(--brd);background:var(--card);color:var(--tx2);border-radius:var(--r);font-size:13px;cursor:pointer} .icon-btn:active,.chat-ic:active,.wd-close:active,.dlg-del:active,.btn-outline:active,.period-tab:active,.rtab:active{background:var(--card2)} /* TEMPLATES */ .tpl-bar{position:sticky;top:var(--header-h,56px);z-index:20;margin:0 -16px 6px;padding:2px 0 4px} .tpl-filt,.tpl-subs{display:flex;gap:6px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none} .tpl-filt::-webkit-scrollbar,.tpl-subs::-webkit-scrollbar{display:none} .tpl-filt{padding:4px 16px} .tpl-subs{padding:6px 16px} .tpl-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px;margin:0 -16px} .tpl-thumb{position:relative;min-width:0;aspect-ratio:9/16;background:var(--card2);overflow:hidden} .tpl-thumb.has-media{cursor:pointer} .tpl-thumb.has-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block} .tpl-thumb.has-media:active{transform:scale(.98)} .tpl-thumb-cap{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:22px 8px 8px;font-size:11px;font-weight:700;letter-spacing:.04em;color:#fff;text-transform:uppercase;line-height:1.2;overflow-wrap:anywhere;-webkit-hyphens:auto;hyphens:auto;background:linear-gradient(to top,rgba(0,0,0,.78),rgba(0,0,0,.6) calc(100% - 18px),rgba(0,0,0,0))} .tpl-chip,.tpl-sub{position:relative;flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;padding:10px 14px;border:1px solid var(--brd);background:var(--card2);color:var(--tx2);border-radius:999px;box-shadow:0 4px 12px -4px rgba(0,0,0,.55);font-family:var(--font-sans);font-size:13px;font-weight:600;line-height:1.2;white-space:nowrap;cursor:pointer;transition:background .15s,color .15s,border-color .15s} .tpl-chip::after{content:"";position:absolute;inset:-4px -3px} .tpl-chip-ico{display:inline-flex} .tpl-chip-ico svg{width:17px;height:17px} .tpl-sub{padding:8px 12px;font-size:12px} .tpl-sub::after{content:"";position:absolute;inset:-6px -3px} .tpl-chip:not(.active):active,.tpl-sub:not(.active):active{background:var(--brd)} .tpl-chip.active{background:var(--photo);border-color:var(--photo);color:var(--ink-photo)} .tpl-sub.active{background:var(--card2);border-color:var(--photo);color:var(--tx)} /* TEXT / CHAT */ .chat-bar{display:flex;align-items:center;gap:8px;padding:8px 16px;position:fixed;left:0;right:0;top:var(--header-h,56px);z-index:90;background:var(--bg)} .chat-ic{position:relative;width:38px;height:38px;border-radius:12px;border:1px solid var(--brd);background:var(--card);color:var(--tx);display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0} .chat-ic svg{width:18px;height:18px} .chat-ic::after{content:"";position:absolute;inset:-4px} .chat-model{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;height:38px;border-radius:999px;border:1px solid var(--vbrd);background:var(--vdim);color:var(--tx);font-weight:700;font-size:14px;cursor:pointer} .chat-model-chev{width:14px;height:14px;color:var(--violet)} .chat-scroll{min-height:60vh;padding-top:54px;padding-bottom:calc(150px + var(--sab))} #page-text .chat-scroll{padding-bottom:calc(170px + var(--sab))} .chat-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:64px 20px 0;gap:5px} .chat-empty-t{font-weight:700;font-size:16px}.chat-empty-s{color:var(--tx2);font-size:13px} #chat-list{display:flex;flex-direction:column;gap:9px;padding-top:4px} .msg{max-width:80%;padding:8px 12px 5px;border-radius:18px;font-size:14.5px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere} .msg.grouped{margin-top:-5px} .msg-c{display:block;cursor:text} /* Re-enable text selection inside chat bubbles. Telegram's iOS webview injects a global *{-webkit-user-select:none}, so this must be !important to win, and must cover inline children (code/b/pre) so fragments stay selectable. */ .msg-c,.msg-c *{-webkit-user-select:text!important;user-select:text!important;-webkit-touch-callout:default!important} .msg-t{display:block;text-align:right;font-size:11px;line-height:1;margin-top:4px;font-variant-numeric:tabular-nums} .msg.user{align-self:flex-end;background:var(--violet);color:var(--ink-photo);border-bottom-right-radius:6px} .msg.user .msg-t{color:rgba(58,17,9,.85)} .msg.bot{align-self:flex-start;background:var(--card2);border:1px solid var(--brd);color:var(--tx);border-bottom-left-radius:6px} .msg.bot .msg-t{color:var(--tx3)} .msg.err{align-self:flex-start;background:rgba(251,113,133,.12);border:1px solid rgba(251,113,133,.38);color:var(--error);border-bottom-left-radius:6px} .msg.err .msg-t{color:var(--error)} .msg code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;background:rgba(255,255,255,.09);padding:1px 5px;border-radius:5px;font-size:13px} .msg pre{background:var(--bg);border:1px solid var(--brd);border-radius:10px;padding:10px 12px;overflow-x:auto;margin:6px 0} .msg pre code{background:none;padding:0} .chat-typing{align-self:flex-start;background:var(--card2);border:1px solid var(--brd);border-radius:18px;border-bottom-left-radius:6px;display:flex;gap:5px;padding:13px 15px} .chat-typing span{width:7px;height:7px;border-radius:50%;background:var(--tx2);animation:ctyp 1.1s infinite} .chat-typing span:nth-child(2){animation-delay:.18s}.chat-typing span:nth-child(3){animation-delay:.36s} @keyframes ctyp{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}} .chat-input-bar{position:fixed;left:0;right:0;bottom:calc(80px + var(--sab));z-index:90;display:flex;align-items:flex-end;gap:8px;padding:8px 16px;background:linear-gradient(to top,var(--bg) 72%,rgba(22,19,15,0))} .chat-input{flex:1;max-height:120px;padding:11px 15px;border:1px solid var(--brd);border-radius:20px;background:var(--card2);color:var(--tx);font-size:14px;font-family:inherit;resize:none;line-height:1.4;overflow-y:auto;scrollbar-width:none;-ms-overflow-style:none} .chat-input::-webkit-scrollbar{display:none;width:0;height:0} .chat-input:focus{outline:none;border-color:var(--violet)} .chat-send{width:42px;height:42px;border-radius:50%;border:none;background:var(--grad);color:var(--ink-photo);display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0} .chat-send:disabled{opacity:.4;cursor:not-allowed}.chat-send svg{width:19px;height:19px} /* Chat — periwinkle accent */ #page-text,[data-zone="chat"]{--z:var(--chat);--zdim:rgba(140,155,255,.13);--zbrd:rgba(140,155,255,.34);--zink:var(--ink-chat)} #page-text .chat-model{border-color:var(--zbrd);background:var(--zdim)} #page-text .chat-model-chev{color:var(--z)} #page-text .msg.user{background:var(--z);color:var(--zink)} #page-text .msg.user .msg-t{color:rgba(16,20,46,.8)} #page-text .msg.user code{background:rgba(16,20,46,.12)} #page-text .chat-input:focus{border-color:var(--z)} #page-text .chat-send{background:var(--z);color:var(--zink)} #page-support{--z:var(--gold);--zdim:rgba(255,203,107,.13);--zbrd:rgba(255,203,107,.34);--zink:var(--ink-video)} .sup-logo{display:block;width:120px;height:120px;margin-bottom:8px;border-radius:50%} #page-support .msg.user{background:var(--z);color:var(--zink)} #page-support .msg.user .msg-t{color:rgba(58,38,6,.8)} #page-support .msg.user code{background:rgba(58,38,6,.12)} #page-support .chat-input:focus{border-color:var(--z)} #page-support .chat-send{background:var(--z);color:var(--zink)} .sup-head{padding:0 0 8px} .sup-head .ph{font-size:24px;font-weight:800;letter-spacing:-.03em;line-height:1.15;margin-top:4px} /* как у остальных экранов (G1.6): был голый h2 — 24/700 по умолчанию браузера */ .sup-scroll{padding-top:8px} #sup-list{display:flex;flex-direction:column;gap:9px;padding-top:4px} .sup-input-bar{background:linear-gradient(to top,var(--bg) 72%,rgba(22,19,15,0))} .sup-attach{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;color:var(--tx2);background:var(--card2);border:1px solid var(--brd)} .sup-attach:active{opacity:.7} .sup-preview{position:fixed;left:0;right:0;bottom:calc(136px + var(--sab));z-index:91;padding:4px 16px;display:flex;align-items:center;gap:8px} .sup-preview img{width:56px;height:56px;object-fit:cover;border-radius:10px;border:1px solid var(--brd)} .sup-preview .sup-rm{width:22px;height:22px;border-radius:50%;background:var(--card2);border:1px solid var(--brd);color:var(--tx2);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:14px;line-height:1} .sup-msg-img{max-width:220px;border-radius:12px;margin-top:4px;cursor:pointer} #page-support .msg.system{align-self:center;background:var(--card2);border:1px solid var(--brd);color:var(--tx2);border-radius:12px;font-size:13px;text-align:center;max-width:85%} #page-support .msg.system .msg-t{color:var(--tx3)} .sup-count{position:absolute;right:16px;bottom:100%;padding:0 4px 2px;font-family:var(--font-mono);font-size:11px;line-height:1;color:var(--tx3);font-variant-numeric:tabular-nums;pointer-events:none} .sup-count.over{color:var(--error)} #page-support .msg.user.failed{opacity:.72} .sup-retry{position:relative;margin-left:auto;padding:0;border:0;background:none;font-family:inherit;font-weight:700;text-decoration:underline;cursor:pointer} #page-support .msg.user .sup-retry{color:var(--zink);opacity:1} .sup-retry::after{content:"";position:absolute;inset:-17px -8px} .dlg-new{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:13px;border:1px dashed rgba(140,155,255,.34);background:rgba(140,155,255,.13);color:var(--chat);border-radius:12px;font-weight:700;font-size:14px;cursor:pointer;margin-bottom:12px;font-family:inherit} .dlg-new svg{width:16px;height:16px} .dlg-item{display:flex;align-items:center;gap:10px;padding:11px 14px;border-radius:12px;background:var(--card2);border:1px solid transparent;margin-bottom:8px;cursor:pointer} .dlg-item.active{border-color:rgba(140,155,255,.34)} .dlg-main{flex:1;min-width:0;text-align:left} .dlg-title{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .dlg-sub{font-size:12px;color:var(--tx3)} .dlg-del{width:30px;height:30px;border:none;background:none;color:var(--tx3);cursor:pointer;flex-shrink:0;display:flex;align-items:center;justify-content:center} .dlg-del svg{width:16px;height:16px} /* CREATE */ .type-toggle{display:flex;position:relative;background:var(--card);border-radius:999px;padding:4px;margin-bottom:20px;border:1px solid var(--brd);box-shadow:inset 0 2px 4px rgba(0,0,0,.45),inset 0 -1px 0 rgba(255,255,255,.04)} .seg-ind{position:absolute;top:4px;left:4px;width:calc(50% - 4px);height:calc(100% - 8px);border-radius:999px;background-color:var(--violet);background-image:linear-gradient(180deg,rgba(255,255,255,.4) 0%,rgba(255,255,255,.12) 46%,rgba(255,255,255,0) 54%,rgba(0,0,0,.08) 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.65),inset 0 -1px 2px rgba(0,0,0,.2),0 4px 10px -4px rgba(0,0,0,.75);transition:transform .25s cubic-bezier(.4,0,.2,1);z-index:0} .type-toggle.seg-video .seg-ind{transform:translateX(100%)} .type-toggle.seg3 .seg-ind{width:calc(33.333% - 2.67px)} .type-toggle.seg3.seg-audio .seg-ind{transform:translateX(200%)} .tbtn{flex:1;position:relative;z-index:1;padding:11px 10px;border:none;background:transparent;color:var(--tx2);border-radius:999px;font-size:13px;font-weight:700;letter-spacing:.06em;cursor:pointer;transition:color .2s} .tbtn.active{color:var(--ink-photo)} .type-toggle.seg-video .tbtn.active{color:var(--ink-video)} .type-toggle.seg3.seg-audio .tbtn.active{color:var(--ink-audio)} .ccard{background:var(--card);border:1px solid var(--brd);border-radius:var(--r);padding:16px;margin-bottom:10px} .clabel{font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.08em;color:var(--tx3)} .model-ico{width:38px;height:38px;border-radius:12px;background:var(--vdim);border:1px solid var(--vbrd);display:flex;align-items:center;justify-content:center;color:var(--violet)} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} /* «Создать» — композер (спека docs/specs/2026-10-16-create-composer-design.md): одна карточка «медиа → промпт → модель», чипы под ней */ .cmp{background:var(--card);border:1px solid var(--brd);border-radius:var(--r);overflow:hidden;transition:border-color .2s} .cmp:focus-within{border-color:var(--z,var(--brd))} .cmp-model{display:flex;align-items:center;gap:12px;width:100%;padding:12px 14px;border:none;border-top:1px solid var(--brd);background:none;color:var(--tx);font-family:inherit;text-align:left;cursor:pointer} .cmp-model:active{background:var(--card2)} .cmp-model .model-ico{flex-shrink:0} .cmp-model .model-logo{width:40px;height:40px} .cmp-model-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px} .cmp-model-name{display:flex;align-items:center;gap:7px;font-size:15px;font-weight:700;letter-spacing:-.02em} .cmp-model-badge{display:inline-flex}.cmp-model-badge:empty{display:none} .cmp-model-name .tbadge,.msx-name .tbadge{margin-left:0} .cmp-model-tag{font-size:12px;color:var(--tx2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .cmp-price{display:inline-flex;align-items:center;gap:4px;flex-shrink:0;font-family:var(--font-mono);font-size:13px;font-weight:700;color:var(--tx2);white-space:nowrap} .cmp-chev{width:18px;height:18px;flex-shrink:0;color:var(--tx3)} .opts{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px} .opt{position:relative;display:inline-flex;align-items:center;gap:6px;max-width:100%;min-height:40px;padding:0 12px;border:1px solid var(--brd);border-radius:999px;background:var(--card);color:var(--tx);font-family:var(--font-mono);font-size:13px;font-weight:700;cursor:pointer} .opt:active{background:var(--card2)} .opt::after{content:"";position:absolute;inset:-3px 0} .opt-ico{width:16px;height:16px;flex-shrink:0;color:var(--tx2)} .opt .set-val{white-space:nowrap} .opt.ratio-locked,.opt.dur-locked{color:var(--tx2);border-style:dashed} /* Seedance: «Как на фото / в видео» втрое длиннее подписи Kling — в чипе переносится, если не влезает в ряд, а не вылезает за экран */ .opt.ratio-locked.ratio-long .set-val{white-space:normal;overflow-wrap:anywhere;line-height:1.2} .opt-sw{font-family:var(--font-sans);font-weight:600} .opt-sw.on{background:var(--zdim);border-color:var(--zbrd)} .opt-sw.on .opt-ico{color:var(--z)} .opt-cb{position:absolute;width:1px;height:1px;margin:0;opacity:0;pointer-events:none} .opt-sw:has(.opt-cb:focus-visible){outline:2px solid var(--chat);outline-offset:2px} .sheet-list.sheet-grid{display:grid;gap:8px} .sheet-g3{grid-template-columns:repeat(3,1fr)} .sheet-g4{grid-template-columns:repeat(4,1fr)} .sheet-item.sg{flex-direction:column;justify-content:center;gap:6px;min-height:52px;padding:10px 4px;background:var(--card);border-color:var(--brd);font-family:var(--font-mono);font-size:15px;font-weight:700} .sheet-item.sg.active{background:var(--zdim,var(--vdim));border-color:var(--z,var(--violet))} .sheet-item.sg .sg-sub{display:inline-flex;align-items:center;gap:3px;font-family:var(--font);font-size:12px;font-weight:700;color:var(--tx2)} /* цена под качеством фото */ .rg{width:24px;height:24px;color:var(--tx2)} .sheet-item.sg.active .rg{color:var(--z,var(--violet))} .sheet-list:has(.msx){gap:6px} .sheet-item.msx{justify-content:flex-start;align-items:center;gap:12px;padding:12px;background:rgba(245,240,232,.045);border-color:var(--brd);text-align:left;font-weight:400} /* строка модели — плиткой, а не голым текстом по шторке (23.10.2026) */ .msx-logo{width:46px;height:46px;flex-shrink:0;object-fit:contain;filter:drop-shadow(0 2px 5px rgba(0,0,0,.45))} span.msx-logo{display:flex;align-items:center;justify-content:center;border-radius:12px;background:var(--card);filter:none} .msx-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px} .msx-name{display:flex;align-items:center;gap:7px;font-size:15px;font-weight:700;color:var(--tx)} .msx-desc{font-size:12px;line-height:1.35;color:var(--tx2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .msx-specs{display:flex;flex-wrap:wrap;gap:5px;margin-top:4px} .msx-specs span{padding:1px 7px;border:1px solid var(--brd);border-radius:7px;background:var(--card);font-family:var(--font-mono);font-size:11px;font-weight:700;color:var(--tx2)} .cmp-media{display:flex;align-items:center;gap:14px;padding:14px 14px 0} .cmp-media-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;font-size:12px;line-height:1.4;color:var(--tx2)} .cmp-media-tx b{font-size:14px;font-weight:700;color:var(--tx)} .cmp-link{position:relative;align-self:flex-start;margin-top:6px;padding:0;border:none;background:none;font-family:inherit;font-size:12px;font-weight:600;color:var(--gold);text-align:left;cursor:pointer} .cmp-link::after{content:"";position:absolute;inset:-12px -6px} .cmp-media .up-area{margin:0} .cmp-media .ref-area.has-files{flex:1} .cmp-media .ref-area.has-files~.cmp-media-tx{display:none} .cmp-media .ref-area:not(.has-files) .ref-add{width:92px;height:116px} .cmp-media .ref-area:not(.has-files) .ref-add>svg{width:40px;height:40px;padding:10px;border-radius:50%;background:var(--z);color:var(--zink)} .cmp .ref-chip-thumb{width:64px;height:84px} .cmp .ref-area.has-files .ref-add{width:64px;height:84px} .cmp .ref-chip:not(.ref-chip-img){flex-direction:column;justify-content:center;height:84px;max-width:96px;border-radius:var(--rs)} .cmp-prompt{position:relative;padding:12px 14px 10px} .cmp .cmp-area{display:block;width:100%;min-height:84px;max-height:240px;padding:0;border:none;border-radius:0;background:none;color:var(--tx);font-size:15px;line-height:1.5} .cmp .cmp-area:focus-visible{outline:none} .cmp-tabs{display:flex;margin:0 14px;border-bottom:1px solid var(--brd)} .cmp-tab{position:relative;flex:1;padding:12px 0 10px;border:none;background:none;color:var(--tx3);font-family:inherit;font-size:14px;font-weight:600;cursor:pointer} .cmp-tab.active{color:var(--tx)} .cmp-tab.active::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;border-radius:2px;background:var(--z)} .cmp-tab-n{margin-left:5px;font-family:var(--font-mono);font-size:11px;font-weight:700;color:var(--z)} .cmp-tab-n:empty{display:none} .el-row{flex-wrap:wrap;align-items:flex-start} .el-row .ref-area,.el-row .ref-area.has-files{flex:0 1 auto} .cmp .ref-add{flex-direction:column;gap:2px} .ref-add-cap{font-size:12px;font-weight:700;color:var(--tx)} .ref-add-n{font-family:var(--font-mono);font-size:11px;color:var(--tx2)} .el-row .ref-area:not(.has-files) .ref-add>svg{width:32px;height:32px;padding:7px;margin-bottom:4px} .cmp-media.el-some .ref-area:not(.has-files) .ref-add{width:64px;height:84px} .cmp-media.el-some .ref-area:not(.has-files) .ref-add>svg{width:22px;height:22px;padding:0;margin:0;background:none;color:var(--z)} .cmp-note{margin:8px 14px 0;font-size:12px;line-height:1.4;color:var(--tx3)} .cmp-note:empty{display:none} .cmp-frames{display:flex;align-items:center;gap:10px;padding:14px 14px 0} .cmp-frames .frame-up{flex:1;min-width:0;height:132px;padding:24px 8px 8px} .cmp-frames .frame-up.has-img{height:auto;padding:0} .cmp-arr{display:flex;align-items:center;justify-content:center;width:30px;height:30px;flex-shrink:0;border-radius:50%;background:var(--card2);color:var(--tx2)} .cmp-arr svg{width:16px;height:16px} .fu-tag{position:absolute;top:7px;left:7px;padding:2px 6px;border-radius:6px;background:var(--card2);font-family:var(--font-mono);font-size:11px;font-weight:700;color:var(--tx2)} .fu-tag.req{color:var(--z)} .fu-tag-inline{position:static;align-self:flex-start;margin-top:4px} .fu-ico{width:22px;height:22px;color:var(--z)} .fu-title{font-size:13px;font-weight:700;color:var(--tx)} .fu-hint{font-family:var(--font-mono);font-size:11px;color:var(--tx2)} .frame-up.fu-solo{width:92px;height:116px;flex-shrink:0} .fu-solo.has-img{height:116px;min-height:0}.fu-solo.has-img .up-thumb{height:100%;object-fit:cover} .fu-plus svg{width:40px;height:40px;padding:10px;border-radius:50%;background:var(--z);color:var(--zink)} .cmp~.field-hint{margin-top:10px} #audio-style-btn{min-width:0;font-family:var(--font-sans);font-weight:600} #audio-style-btn .set-val{overflow:hidden;text-overflow:ellipsis} .opt-seg{display:flex;gap:2px;padding:3px;border:1px solid var(--brd);border-radius:999px;background:var(--card)} .opt-seg .pill{position:relative;flex:none;padding:8px 14px;border-color:transparent} .opt-seg .pill::after{content:"";position:absolute;inset:-6px 0} .up-area{margin-bottom:12px} .ref-area{display:flex;flex-wrap:wrap;gap:8px;align-items:center} .up-btn{width:56px;height:56px;border-radius:var(--rs);border:1.5px dashed var(--vbrd);background:var(--vdim);display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0} .up-thumb{width:100%;height:100%;object-fit:cover;border-radius:var(--rs)} /* When a frame holds an image, show the WHOLE photo (it's the literal first frame), not a cropped zoom — grow the box to the photo and contain it. */ .frame-up.has-img{height:auto;min-height:100px;max-height:300px;padding:0;background:var(--card);border-style:solid} .frame-up.has-img .up-thumb{height:auto;max-height:300px;object-fit:contain} .up-x{position:absolute;top:4px;right:4px;width:22px;height:22px;border-radius:50%;border:none;background:rgba(0,0,0,.7);color:#fff;font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center} .up-fname{font-size:11px;color:var(--violet);text-align:center;word-break:break-all} .frame-up{position:relative;overflow:hidden} .ref-chip{display:flex;align-items:center;gap:4px;background:var(--vdim);border:1px solid var(--vbrd);border-radius:8px;padding:6px 8px;font-size:11px;max-width:120px} .ref-chip-img{position:relative;padding:0;background:none;border:1px solid var(--brd);border-radius:var(--rs);overflow:visible;max-width:none} .ref-chip-thumb{width:56px;height:56px;object-fit:cover;border-radius:var(--rs);display:block} .ref-chip-img .ref-chip-x{position:absolute;top:-6px;right:-6px;width:20px;height:20px;border-radius:50%;background:rgba(0,0,0,.75);color:#fff;font-size:11px;display:flex;align-items:center;justify-content:center;border:none;cursor:pointer;padding:0} .ref-chip-name{color:var(--tx);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .ref-chip-x{border:none;background:none;color:var(--tx2);font-size:14px;cursor:pointer;padding:0 2px;flex-shrink:0} /* Saved reference library ("Мой референс") */ .ref-sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px} .ref-sec-head h3{font-size:17px;font-weight:800;letter-spacing:-.02em;line-height:1.25} .ref-sec-n{font-size:12px;font-weight:600;color:var(--tx3);white-space:nowrap} .ref-sec-desc{margin:4px 0 12px;font-size:13px;line-height:1.4;color:var(--tx2)} .ref-lib{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px} .ref-lib .ref-cell,.ref-lib .ref-add-tile{width:auto;height:auto;aspect-ratio:3/4;border-radius:14px} .ref-guide{position:relative;display:flex;align-items:center;gap:10px;margin-top:12px;padding:12px 14px;border-radius:var(--r);border:1px solid var(--brd);background:var(--card);color:var(--gold);cursor:pointer;text-decoration:none} .ref-guide-t{flex:1;min-width:0;font-size:13px;line-height:1.35;color:var(--tx2)} .ref-guide-t b{font-weight:700;color:var(--tx)} .ref-lib:empty{min-height:78px} .ref-cell{position:relative;width:78px;height:78px;border-radius:var(--rs);overflow:hidden;border:1px solid var(--brd);cursor:pointer;flex-shrink:0} .ref-cell:active{border-color:var(--violet)} .ref-img{width:100%;height:100%;object-fit:cover;display:block} .ref-x{position:absolute;top:3px;right:3px;width:22px;height:22px;border-radius:50%;border:none;background:rgba(0,0,0,.7);color:#fff;font-size:14px;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0} .ref-add-tile{width:78px;height:78px;border-radius:var(--rs);border:1.5px dashed var(--vbrd);background:var(--vdim);color:var(--violet);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;cursor:pointer;font-family:inherit;font-size:11px;font-weight:600;flex-shrink:0} .ref-add-tile svg{width:20px;height:20px} /* Frames (video) */ .frame-up{height:100px;border-radius:var(--rs);border:1.5px dashed var(--vbrd);background:var(--vdim);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;cursor:pointer;font-size:11px;color:var(--tx2)} textarea{width:100%;padding:14px;border:1px solid var(--brd);border-radius:var(--rs);background:var(--card2);color:var(--tx);font-size:14px;font-family:inherit;resize:none} textarea:focus{outline:none;border-color:var(--z,var(--violet))} textarea::placeholder{color:var(--tx3)} /* Toggle switch */ .switch{position:relative;width:44px;height:24px;flex-shrink:0} .switch input{opacity:0;width:0;height:0} .slider-toggle{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background:var(--brd);border-radius:12px;transition:.3s;box-shadow:inset 0 0 0 1.5px var(--tx3)} .slider-toggle::before{content:'';position:absolute;height:18px;width:18px;left:3px;bottom:3px;background:var(--tx);border-radius:50%;transition:.3s} .switch input:checked+.slider-toggle{background:var(--violet);box-shadow:none} .switch input:checked+.slider-toggle::before{transform:translateX(20px)} /* Pills */ .pill-row{display:flex;gap:6px;margin-bottom:4px} .pill{flex:1;padding:10px;border:none;border:1px solid var(--brd);background:transparent;color:var(--tx2);border-radius:999px;font-size:13px;font-weight:600;cursor:pointer;transition:all .15s} .pill.active{background:var(--violet);color:var(--ink-photo);border-color:var(--violet)} /* Advanced panel */ /* Generate button */ .gen-btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:16px;border:none;background:var(--grad);color:var(--ink-photo);border-radius:999px;font-family:var(--font-sans);font-size:15px;font-weight:700;cursor:pointer;margin-top:6px} .gen-btn:active{opacity:.85}.gen-btn:disabled{opacity:.4;cursor:not-allowed} /* generate CTA sits in normal flow at the end of the page (not pinned) */ .gen-bar{display:flex;margin-top:14px} .gen-bar .gen-btn{margin:0;width:100%} /* «Создать» на всю высоту (17.10.2026, по референсу): карточка-композер тянется до низа экрана (растёт поле промпта), чипы настроек + «Сгенерировать» — одним блоком над нижним меню. Карточка длиннее экрана (Seedance с элементами) — блок липнет к низу (sticky), страница прокручивается под ним. DOM прежний: #video-settings — display:contents, порядок задаёт order. */ #page-create.active{display:flex;flex-direction:column;min-height:calc(var(--tg-viewport-stable-height,100vh) - var(--header-h,56px))} #page-create>.create-form{flex:1 0 auto;display:flex;flex-direction:column} #video-settings{display:contents} #page-create .cmp{flex:1 0 auto;display:flex;flex-direction:column} #page-create .cmp-prompt{flex:1 0 auto;display:flex;flex-direction:column} #page-create .cmp .cmp-area{flex:1 0 auto;min-height:96px;max-height:none} /* 96, не 132: на iPhone 14 в Telegram (шапка 150 px) видео-вкладка была длиннее экрана на 32 px */ #page-create .create-form .opts{order:2;position:sticky;bottom:calc(60px + max(6px,var(--sab)) + 68px);z-index:6;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:12px -16px 0;padding:14px 16px 2px;background:linear-gradient(180deg,rgba(22,19,15,0),var(--bg) 14px)} #page-create .create-form .opts::-webkit-scrollbar{display:none} #page-create .create-form .opt{flex:0 0 auto} #page-create #form-audio .opts{flex-wrap:wrap;overflow:visible} #page-create #form-audio .opts #audio-style-btn{flex:1 1 120px;min-width:0} #page-create #form-audio .opts #audio-style-btn .set-val{white-space:nowrap} #page-create #form-audio .opt-seg{flex:none} #page-create #form-audio .opt-seg .pill{padding:8px 11px} #page-create .create-form>.gen-bar{order:3;position:sticky;bottom:calc(60px + max(6px,var(--sab)));z-index:6;align-items:center;height:68px;margin:0 -16px;padding:8px 16px;background:var(--bg)} #page-create .create-form>.gen-bar .gen-btn{margin:0} body.kb-open #page-create .create-form .opts{bottom:68px} body.kb-open #page-create .create-form>.gen-bar{bottom:0} /* Cost badge on the generate CTA — a high-contrast "minted slot" so the token price reads at a glance: dark warm chip + gold coin jewel + bright cream number. */ .tok{display:flex;align-items:center;gap:5px;background:var(--ink-photo);color:#FFE3C2;padding:5px 13px 5px 6px;border-radius:999px;font-family:var(--font-mono);font-size:15px;font-weight:800;letter-spacing:.02em;box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 3px 9px -3px rgba(58,17,9,.55)} /* Create — zone color-coding (photo=coral / video=amber / audio=jade) */ #form-image,[data-zone="photo"]{--z:var(--photo);--zdim:rgba(255,107,92,.12);--zbrd:rgba(255,107,92,.34);--zink:var(--ink-photo)} #form-video,[data-zone="video"]{--z:var(--video);--zdim:rgba(255,178,62,.13);--zbrd:rgba(255,178,62,.34);--zink:var(--ink-video)} #form-audio,[data-zone="audio"]{--z:var(--audio);--zdim:rgba(61,214,140,.13);--zbrd:rgba(61,214,140,.36);--zink:var(--ink-audio)} /* «Сгенерировать» (17.10.2026): пока для генерации чего-то не хватает — спокойная тёмная кнопка (цвет зоны только в рамке и «+»); всё готово (.gen-ready, genReadySync в app.js) — глянцевая заливка цвета зоны, «щелчок» при включении и бегущий блик. Только вид. */ .create-form .gen-btn{position:relative;overflow:hidden;isolation:isolate;background:var(--card2);color:var(--tx);border:1px solid var(--zbrd);box-shadow:inset 0 1px 0 rgba(255,255,255,.05);transition:background-color .3s,color .3s,border-color .3s,box-shadow .3s} .create-form .gen-btn .btn-plus{color:var(--z)} .create-form .gen-btn .tok{background:var(--bg);color:var(--tx);box-shadow:none} .create-form .gen-btn.gen-ready{background-color:var(--z);background-image:linear-gradient(180deg,rgba(255,255,255,.34) 0%,rgba(255,255,255,.1) 46%,rgba(255,255,255,0) 54%,rgba(0,0,0,.1) 100%);color:var(--zink);border-color:rgba(255,255,255,.22);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 -2px 6px rgba(0,0,0,.16),0 10px 22px -12px rgba(0,0,0,.85);animation:genPop .5s cubic-bezier(.3,1.5,.5,1)} .create-form .gen-btn.gen-ready .btn-plus{color:currentColor} .create-form .gen-btn.gen-ready .tok{background:var(--zink);color:#FFF3E6} .create-form .gen-btn.gen-ready::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(110deg,rgba(255,255,255,0) 38%,rgba(255,255,255,.55) 50%,rgba(255,255,255,0) 62%);transform:translateX(-100%);animation:genSheen 3.6s ease-in-out .7s infinite} .create-form .gen-btn.gen-off{opacity:.6} @keyframes genPop{0%{transform:scale(.96)}60%{transform:scale(1.02)}100%{transform:scale(1)}} @keyframes genSheen{0%{transform:translateX(-100%)}45%,100%{transform:translateX(100%)}} .create-form .pill.active{background:var(--z);border-color:var(--z);color:var(--zink)} .create-form .model-ico{background:var(--zdim);border-color:var(--zbrd);color:var(--z)} .create-form .up-btn{border-color:var(--zbrd);background:var(--zdim);color:var(--z)} /* Видео-форма (G2.2): плитки кадров, имя файла в кадре, чипы роликов и тумблер звука были кораллом зоны фото */ .create-form .frame-up{border-color:var(--zbrd);background:var(--zdim)}.create-form .frame-up.has-img{background:var(--card)} .create-form .up-fname{color:var(--z)} .create-form .ref-chip:not(.ref-chip-img){background:var(--zdim);border-color:var(--zbrd)} .create-form .opt-sw.on{background:var(--zdim);border-color:var(--zbrd)} .type-toggle.seg-video .seg-ind{background-color:var(--video)} .type-toggle.seg3.seg-audio .seg-ind{background-color:var(--audio)} /* Skeletons: home (trends, categories) and History */ .skel{position:relative;overflow:hidden;background:var(--card2)} .skel::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.07) 45%,rgba(255,107,92,.06) 55%,transparent);animation:shimmer 1.5s ease-in-out infinite} @keyframes shimmer{100%{transform:translateX(100%)}} .trend-t.skel,.tpl-thumb.skel,.gal-item.hist-skel{cursor:default;border-color:transparent}.gal-item.hist-skel{aspect-ratio:1} .home-err{grid-column:1/-1;display:flex;flex-direction:column;align-items:center;text-align:center;padding:28px 16px 8px;gap:5px}.home-err .home-retry{margin-top:12px;min-height:44px;padding:12px 28px} /* Gallery */ .hist-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px} .hist-head .pg-title{margin-bottom:0} .grid-toggle{display:inline-flex;flex-shrink:0;background:var(--card);border:1px solid var(--brd);border-radius:999px;padding:3px;gap:2px} .gt-btn{display:flex;align-items:center;justify-content:center;width:36px;height:30px;border:none;background:none;border-radius:999px;color:var(--tx3);cursor:pointer;transition:background .15s,color .15s} .gt-btn svg{width:17px;height:17px} .gt-btn.active{background:var(--card2);color:var(--tx)} .gal-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px} .gal-grid.cols-4{grid-template-columns:repeat(4,1fr);gap:6px} /* «4 в ряд» — чистые плитки (26.10.2026, владелец): цветных точек нет — ни типа, ни «новое» (новое и так в зелёной рамке .gal-new), подписи нейросети тоже нет (убрана по просьбе владельца); тип и модель — в aria-label карточки */ .gal-grid.cols-4 .gal-tag{display:none} .gal-grid.cols-4 .gal-meta{display:none} .gal-grid.cols-4 .gal-gen-t{display:none}.gal-grid.cols-4 .gal-gen-spin{width:26px;height:26px} .gal-grid.cols-4 .gal-pending .gal-gen{gap:4px;padding-bottom:18px}.gal-grid.cols-4 .gal-pending .gal-gen-spin{width:20px;height:20px;border-width:2.5px}.gal-grid.cols-4 .gal-pend-t{display:block;letter-spacing:.02em}.gal-grid.cols-4 .gal-pending .gal-meta{display:flex;padding:12px 5px 4px}.gal-grid.cols-4 .gal-pending .gal-model{font-size:11px} /* «в работе» и в 4 колонки: время и название (hist-pend) */ .gal-grid img,.gal-grid video{width:100%;aspect-ratio:1;object-fit:cover;border-radius:var(--rs)} .gal-vthumb-load{background:var(--card2)} .tpl-loading{display:flex;justify-content:center;align-items:center;min-height:240px} .gal-more{grid-column:1/-1;margin-top:4px;padding:13px;border:1px solid var(--brd);border-radius:999px;background:var(--card);color:var(--tx);font-family:var(--font);font-size:14px;font-weight:600;cursor:pointer;transition:background .15s} .gal-more:active{background:var(--card2)} .gal-more:disabled{opacity:.6;cursor:default} .gal-more-auto{grid-column:1/-1;display:flex;justify-content:center;align-items:center;min-height:56px} .gal-more-auto .gal-more{flex:1} .gal-more-spin{width:24px;height:24px;border-radius:50%;border:2.5px solid var(--brd);border-top-color:var(--photo);animation:galSpin .8s linear infinite} @media(prefers-reduced-motion:reduce){.gal-more-spin{animation:none}} .gal-item{position:relative;cursor:pointer;border-radius:var(--rs);overflow:hidden} .gal-item:active{opacity:.8} .gal-item img,.gal-item video{width:100%;aspect-ratio:1;object-fit:cover;display:block} .gal-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:38px;height:38px;border-radius:50%;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;color:#fff;pointer-events:none} .gal-play svg{width:18px;height:18px;margin-left:2px} .gal-audio{width:100%;aspect-ratio:1;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,rgba(61,214,140,.14),rgba(61,214,140,.05));color:var(--audio)} .gal-audio svg{width:34px;height:34px} .gal-tag{position:absolute;top:7px;left:7px;z-index:2;font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;padding:3px 7px;border-radius:7px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);pointer-events:none} .gal-tag-photo{background:rgba(255,107,92,.9);color:var(--ink-photo)} .gal-tag-video{background:rgba(255,178,62,.92);color:var(--ink-video)} .gal-tag-audio{background:rgba(61,214,140,.92);color:var(--ink-audio)} .gal-new::after{content:"";position:absolute;inset:0;border:2px solid var(--success);border-radius:inherit;pointer-events:none;z-index:2} .gal-new-b{position:absolute;top:7px;right:7px;z-index:3;font-size:11px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;padding:3px 7px;border-radius:7px;background:var(--success);color:var(--ink-audio);pointer-events:none} .gal-grid.cols-4 .gal-new-b{display:none} .gal-meta{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:space-between;gap:6px;padding:16px 8px 8px;background:linear-gradient(to top,rgba(22,19,15,.85),rgba(22,19,15,.65) 60%,rgba(22,19,15,0));pointer-events:none} .gal-model{font-size:11px;font-weight:600;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 3px rgba(0,0,0,.8)} .gal-cost{font-family:var(--font-mono);font-size:11px;color:#fff;opacity:.85;flex-shrink:0;text-shadow:0 1px 3px rgba(0,0,0,.8)} .gal-gen{width:100%;aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:13px;position:relative;overflow:hidden;isolation:isolate;background:linear-gradient(135deg,var(--card2),var(--card))} .gal-gen::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.06) 50%,transparent 65%);background-size:220% 100%;animation:galShimmer 1.5s linear infinite} .gal-item .gal-pend-img{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;filter:brightness(.42) saturate(.8)} /* что создаётся: исходное фото или превью шаблона, притушено (hist-pend) */ .gal-pending.has-bg .gal-pend-t{color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.8)} .gal-gen-spin{width:36px;height:36px;border-radius:50%;border:3px solid rgba(255,255,255,.13);border-top-color:var(--photo);animation:galSpin .8s linear infinite;z-index:1} .gal-gen-t{font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--tx2);z-index:1} .gal-pending-photo .gal-gen{background:linear-gradient(135deg,rgba(255,107,92,.16),rgba(255,107,92,.04))} .gal-pending-video .gal-gen{background:linear-gradient(135deg,rgba(255,178,62,.16),rgba(255,178,62,.05))}.gal-pending-video .gal-gen-spin{border-top-color:var(--video)} .gal-pending-audio .gal-gen{background:linear-gradient(135deg,rgba(61,214,140,.14),rgba(61,214,140,.05))}.gal-pending-audio .gal-gen-spin{border-top-color:var(--audio)} .gal-failed{cursor:default}.gal-failed:active{opacity:1} /* Карточка провала (G2.10): квадрат, как соседние плитки. Раньше «корзина» уходила на новую строку, карточка вытягивалась выше квадрата, ряд сетки рос — у соседних плиток подпись отрывалась от картинки. Теперь значок — в углу напротив типа, заголовок — 2 строки, причина — 3 (на ≤ 340 px — 2, и «Повторить» без подписи), кнопки — в одну строку; лишнее обрезается многоточием. */ .gal-fail{position:relative;width:100%;aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:30px 8px 10px;text-align:center;overflow:hidden;background:linear-gradient(135deg,var(--card2),var(--card));border:1px solid var(--brd);border-radius:var(--rs)} .gal-fail-ic{position:absolute;top:7px;right:7px;width:20px;height:20px;color:var(--error)}.gal-fail-ic svg{width:100%;height:100%;display:block} .gal-fail-t{flex-shrink:0;font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.04em;line-height:1.3;text-transform:uppercase;color:var(--tx);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .gal-fail-r{font-size:11px;line-height:1.3;color:var(--tx2);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} .gal-fail-acts{flex-shrink:0;display:flex;flex-wrap:nowrap;align-items:center;justify-content:center;gap:8px;margin-top:2px} .gal-fail-retry,.gal-fail-del{position:relative;flex-shrink:0;min-height:32px;border:1px solid var(--brd);border-radius:999px;cursor:pointer;transition:background .15s} .gal-fail-retry::after{content:"";position:absolute;inset:-7px -4px}.gal-fail-del::after{content:"";position:absolute;inset:-7px -8px -7px -4px} /* 44 px в высоту; между кнопками 8 px — зоны встречаются посередине, не налезают */ .gal-fail-retry{display:flex;align-items:center;gap:4px;padding:0 9px;background:var(--card2);color:var(--tx);font-family:var(--font-sans);font-size:12px;font-weight:600;white-space:nowrap}.gal-fail-retry:active{background:var(--brd)} .gal-fail-del{width:32px;display:flex;align-items:center;justify-content:center;background:transparent;color:var(--tx3)}.gal-fail-del svg{width:15px;height:15px}.gal-fail-del:active{color:var(--error);border-color:rgba(251,113,133,.4)} .gal-fail-retry svg{width:13px;height:13px;flex-shrink:0} @media (max-width:340px){.gal-fail-r{-webkit-line-clamp:2}.gal-fail-retry{width:32px;padding:0;justify-content:center}.gal-fail-retry span{display:none}} /* 4 колонки (плитка 68–91 px): тип — точкой слева, значок — справа вверху, только кнопки (на ≤ 340 px — 28 px, иначе не встают в ряд) */ .gal-grid.cols-4 .gal-fail{padding:22px 2px 6px;gap:0} .gal-grid.cols-4 .gal-fail-ic{top:5px;right:5px;width:14px;height:14px} .gal-grid.cols-4 .gal-fail-t,.gal-grid.cols-4 .gal-fail-r,.gal-grid.cols-4 .gal-fail-retry span{display:none} .gal-grid.cols-4 .gal-fail-acts{gap:4px;margin-top:0} .gal-grid.cols-4 .gal-fail-retry{width:32px;padding:0;justify-content:center} .gal-grid.cols-4 .gal-fail-retry::after,.gal-grid.cols-4 .gal-fail-del::after{inset:-6px -2px} @media (max-width:340px){.gal-grid.cols-4 .gal-fail-retry,.gal-grid.cols-4 .gal-fail-del{width:28px;min-height:28px}.gal-grid.cols-4 .gal-fail-retry::after,.gal-grid.cols-4 .gal-fail-del::after{inset:-8px -2px}} /* Ряд сетки не тянет плитки за самой высокой: подпись .gal-meta остаётся на своей картинке */ .gal-grid{align-items:start} @keyframes galShimmer{0%{background-position:220% 0}100%{background-position:-220% 0}} @keyframes galSpin{to{transform:rotate(360deg)}} /* Gen Detail */ .detail-media{margin-bottom:12px;border-radius:var(--r);overflow:hidden;text-align:center;background:var(--card);cursor:pointer} .detail-media img,.detail-media video{width:100%;max-height:55vh;object-fit:contain;display:block;border-radius:var(--r)} .detail-media.detail-audio{padding:18px;cursor:default} .media-lightbox{display:none;position:fixed;inset:0;background:rgba(0,0,0,.95);z-index:300;align-items:center;justify-content:center;cursor:zoom-out;padding:calc(16px + var(--sat)) 16px calc(16px + var(--sab))} .media-lightbox.open{display:flex} #lb-content{position:relative;display:inline-block;max-width:100%;max-height:100%} #lb-content img,#lb-content video{max-width:calc(100vw - 32px);max-height:calc(100vh - 32px - var(--sat) - var(--sab));max-height:calc(100dvh - 32px - var(--sat) - var(--sab));object-fit:contain;border-radius:8px;display:block} .media-lightbox .lb-close{position:absolute;top:8px;right:8px;width:44px;height:44px;border:none;background:rgba(0,0,0,.6);border-radius:50%;color:#fff;font-size:24px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:301;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)} .detail-audio audio{width:100%;display:block} /* Themed audio player (replaces native