/* =====================================================
АВТОДОКУМЕНТАЦИЯ SYLVEX: webapp/css/cabinet.css
Файл описывает внешний вид экранов, кнопок, карточек, модальных окон и адаптивных состояний Mini App.
Комментарии не меняют стили, а помогают найти нужный UI-блок.
===================================================== */
/* =====================================================
CSS-БЛОК: :root
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
:root{
  /* ChatGPT-like dark palette */
  --bg-0:#212121;--bg-1:#171717;--bg-2:#2f2f2f;
  --surface:#2f2f2f;--surface-2:#3a3a3a;
  --border:rgba(255,255,255,0.08);--border-strong:rgba(255,255,255,0.14);
  --text:#ececec;--text-dim:#b4b4b4;--text-mute:#8e8e93;
  --primary:#10a37f;--primary-2:#0e8e6e;--accent:#10a37f;
  --grad-primary:#10a37f;
  --grad-card:#2f2f2f;
  --shadow-lg:0 12px 32px -12px rgba(0,0,0,.6);
  --radius:22px;--blur:24px;
  --miniapp-icon-size:18px;
  --miniapp-icon-box:34px;
}
.ui-svg-icon{display:block;width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ico .ui-svg-icon,.mi .ui-svg-icon,.pm-ico .ui-svg-icon,.home-quick-icon .ui-svg-icon,.thumb .ui-svg-icon,.pico .ui-svg-icon{width:20px;height:20px}.chev .ui-svg-icon,.pm-arr .ui-svg-icon{width:16px;height:16px}
/* =====================================================
CSS-БЛОК: [data-theme="light"]
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
[data-theme="light"]{
  --bg-0:#ffffff;--bg-1:#f7f7f8;--bg-2:#ffffff;
  --surface:#f4f4f4;--surface-2:#ececec;
  --border:rgba(0,0,0,0.08);--border-strong:rgba(0,0,0,0.14);
  --text:#0d0d0d;--text-dim:#52525b;--text-mute:#8e8e98;
  --primary:#10a37f;--primary-2:#0e8e6e;--accent:#10a37f;
  --grad-primary:#10a37f;
  --grad-card:#ffffff;
  --shadow-lg:0 8px 24px -10px rgba(0,0,0,.10);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;height:100%;background:var(--bg-0);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Inter",system-ui,sans-serif;overflow:hidden;-webkit-font-smoothing:antialiased}
body{background:var(--bg-0);background-attachment:fixed}
body::before{content:none}
.app{position:relative;z-index:1;max-width:480px;margin:0 auto;height:100vh;display:flex;flex-direction:column;padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom)}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:14px 18px 10px}
.brand{display:flex;align-items:center;gap:10px}
.brand-logo{width:36px;height:36px;border-radius:11px;background:transparent;display:grid;place-items:center;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);position:relative;overflow:hidden}
.brand-logo::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 30% 20%,rgba(255,255,255,.4),transparent 50%)}
.brand-logo svg{position:relative;z-index:1}
.brand-name{font-weight:800;letter-spacing:3px;font-size:14px}
.icon-btn{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:var(--surface);backdrop-filter:blur(var(--blur));-webkit-backdrop-filter:blur(var(--blur));border:1px solid var(--border);color:var(--text);cursor:pointer;transition:.2s transform;font-size:14px;font-weight:600}
.icon-btn:active{transform:scale(.94)}
.topbar-actions{display:flex;gap:8px;position:relative}
.lang-pop{position:absolute;top:46px;right:0;min-width:160px;padding:6px;border-radius:14px;background:rgba(10,10,20,.92);border:1px solid var(--border-strong);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:0 20px 50px -10px rgba(0,0,0,.7);z-index:30;display:none}
[data-theme="light"] .lang-pop{background:rgba(255,255,255,.95)}
.lang-pop.show{display:block;animation:fadeUp .2s ease both}
.lang-pop button{display:flex;width:100%;align-items:center;gap:10px;padding:9px 10px;background:transparent;border:none;color:var(--text);font-size:13px;cursor:pointer;border-radius:10px;text-align:left}
.lang-pop button:hover{background:var(--surface-2)}
.lang-pop button.sel{background:var(--surface-2);color:#93c5fd}
.lang-flag{width:22px;display:inline-block;text-align:center}
.scroll{flex:1;overflow-y:auto;padding:6px 16px 120px;scroll-behavior:smooth}
.scroll::-webkit-scrollbar{width:0}
.view{display:none;animation:fadeUp .35s ease both}
.view.active{display:block}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.user-card{position:relative;padding:18px;border-radius:24px;overflow:hidden;background:var(--grad-card);border:1px solid var(--border-strong);box-shadow:var(--shadow-lg)}
.user-card::after{content:"";position:absolute;inset:0;background:radial-gradient(400px 200px at 110% -30%,rgba(255,255,255,0.14),transparent 60%);pointer-events:none}
.user-row{display:flex;align-items:center;gap:14px;position:relative;z-index:1}
.avatar{width:64px;height:64px;border-radius:20px;background:var(--primary);display:grid;place-items:center;font-weight:800;color:#fff;font-size:22px;letter-spacing:1px;position:relative}
.avatar .dot{position:absolute;right:-2px;bottom:-2px;width:16px;height:16px;border-radius:50%;background:#34d399;border:3px solid var(--bg-0)}
.user-meta{flex:1;min-width:0}
.user-name{font-size:18px;font-weight:700;display:flex;align-items:center;gap:6px}
.badge{font-size:10px;padding:3px 8px;border-radius:999px;background:rgba(16,163,127,.18);color:#19c37d;border:1px solid rgba(16,163,127,.35);letter-spacing:.5px}
.user-sub{font-size:13px;color:var(--text-dim);margin-top:2px}
.id-pill{margin-top:8px;display:inline-flex;align-items:center;gap:6px;font-size:11px;color:var(--text-dim);background:rgba(255,255,255,.05);padding:4px 10px;border-radius:999px;border:1px solid var(--border)}
.balance-row{margin-top:16px;display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-radius:18px;background:rgba(0,0,0,.35);border:1px solid var(--border);position:relative;z-index:1}
[data-theme="light"] .balance-row{background:rgba(255,255,255,.55)}
.balance-label{font-size:12px;color:var(--text-dim);text-transform:uppercase;letter-spacing:1.5px}
.balance-val{font-size:22px;font-weight:800;color:var(--text)}
.topup{border:none;cursor:pointer;color:#fff;font-weight:600;font-size:13px;padding:10px 16px;border-radius:14px;background:var(--primary)}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}
.stat{padding:14px;border-radius:18px;text-align:center;background:var(--surface);border:1px solid var(--border);backdrop-filter:blur(var(--blur));-webkit-backdrop-filter:blur(var(--blur))}
.stat-val{font-size:18px;font-weight:700}
.stat-lbl{font-size:11px;color:var(--text-mute);margin-top:2px;letter-spacing:.5px}
.section-title{display:flex;align-items:center;justify-content:space-between;margin:22px 4px 12px}
.section-title h3{margin:0;font-size:15px;font-weight:600;letter-spacing:.3px}
.section-title a{color:var(--text-dim);font-size:12px;text-decoration:none;cursor:pointer}
.hero-carousel{margin-top:14px;position:relative;overflow:hidden;border-radius:22px}
.hero-track{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:8px}
.hero-track::-webkit-scrollbar{display:none}
.hero-slide{flex:0 0 100%;scroll-snap-align:center;padding:20px;border-radius:22px;position:relative;overflow:hidden;border:1px solid var(--border-strong);min-height:160px;display:flex;flex-direction:column;justify-content:space-between}
.hero-slide.s1{background-image:linear-gradient(90deg,rgba(0,0,0,.2),transparent 62%),url('../assets/hero-ai/openai.jpg')}
.hero-slide.s2{background-image:linear-gradient(90deg,rgba(2,7,28,.16),transparent 62%),url('../assets/hero-ai/gemini.jpg')}
.hero-slide.s3{background-image:linear-gradient(90deg,rgba(0,0,0,.18),transparent 62%),url('../assets/hero-ai/flux.jpg')}
.hero-slide.s4{background-image:linear-gradient(90deg,rgba(0,0,0,.18),transparent 62%),url('../assets/hero-ai/kling.jpg')}
.hero-slide.s5{background-image:linear-gradient(90deg,rgba(0,0,0,.18),transparent 62%),url('../assets/hero-ai/runway.jpg')}
.hero-slide.s6{background-image:linear-gradient(90deg,rgba(2,4,24,.18),transparent 62%),url('../assets/hero-ai/suno.jpg')}
.hero-slide.s7{background-image:linear-gradient(90deg,rgba(0,0,0,.18),transparent 62%),url('../assets/hero-ai/elevenlabs.jpg')}
.hero-slide.s8{background-image:linear-gradient(90deg,rgba(0,22,30,.18),transparent 62%),url('../assets/hero-ai/seedream.jpg')}
.hero-slide.s9{background-image:linear-gradient(90deg,rgba(1,4,30,.18),transparent 62%),url('../assets/hero-ai/seedance.jpg')}
.hero-slide.s10{background-image:linear-gradient(90deg,rgba(0,0,0,.2),transparent 62%),url('../assets/hero-ai/grok.jpg')}
.hero-slide.s11{background-image:linear-gradient(90deg,rgba(8,4,38,.18),transparent 62%),url('../assets/hero-ai/heygen-avatar.jpg')}
.hero-slide.s12{background-image:linear-gradient(90deg,rgba(2,4,22,.22),transparent 62%),url('../assets/hero-ai/ideogram.jpg')}
.hero-slide.s13{background-image:linear-gradient(90deg,rgba(10,4,5,.22),transparent 62%),url('../assets/hero-ai/recraft.jpg')}
.hero-slide.s14{background-image:linear-gradient(90deg,rgba(2,8,22,.22),transparent 62%),url('../assets/hero-ai/qwen.jpg')}
.hero-slide.s15{background-image:linear-gradient(90deg,rgba(8,7,24,.22),transparent 62%),url('../assets/hero-ai/nano-banana.jpg')}
.hero-slide.s16{background-image:linear-gradient(90deg,rgba(1,8,21,.22),transparent 62%),url('../assets/hero-ai/imagen.jpg')}
.hero-slide.s17{background-image:linear-gradient(90deg,rgba(1,8,21,.22),transparent 62%),url('../assets/hero-ai/veo.jpg')}
.hero-slide.ai-brand-slide{min-height:190px;background-size:cover;background-position:center;isolation:isolate}.hero-slide.ai-brand-slide::before{display:none}.hero-slide.ai-brand-slide::after{content:"";position:absolute;z-index:-1;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.72) 0%,rgba(0,0,0,.48) 38%,transparent 72%)}.ai-brand-copy{position:relative;max-width:58%}.ai-banner-brand{display:inline-flex;align-items:center;gap:7px;margin-bottom:10px;color:#fff;font-size:11px;font-weight:750;letter-spacing:.04em}.ai-banner-brand i{width:25px;height:25px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.28);border-radius:8px;background:rgba(255,255,255,.12);backdrop-filter:blur(8px)}.ai-banner-brand svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.hero-slide.ai-brand-slide p{max-width:100%}.hero-slide.ai-brand-slide .cta{box-shadow:0 8px 24px rgba(0,0,0,.2)}
.hero-slide::before{content:"";position:absolute;right:-30px;top:-30px;width:160px;height:160px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.22),transparent 60%)}
.hero-slide h2{margin:0 0 6px;font-size:19px;font-weight:700;position:relative}
.hero-slide h2{color:#fff !important}
.hero-slide p{margin:0;color:rgba(255,255,255,.9) !important;font-size:13px;position:relative;max-width:80%}
[data-theme="light"] .hero-slide p{color:rgba(255,255,255,.9) !important}
.hero-slide .cta{margin-top:14px;align-self:flex-start;display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:13px;background:#fff;color:#0f1228;font-weight:600;font-size:13px;border:none;cursor:pointer;position:relative}
.dots{display:none !important}
.dot-i{display:none !important;width:0;height:0;opacity:0;pointer-events:none}
.dot-i.act{display:none !important;width:0;background:transparent}

/* Infinite AI logos strip under the carousel */
.ai-strip{margin-top:14px;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.ai-strip-track{display:flex;gap:8px;width:max-content;animation:ai-marquee 72s linear infinite}
.ai-chip{--model-color:var(--primary);flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;gap:7px;height:36px;padding:0 11px 0 8px;border-radius:11px;background:color-mix(in srgb,var(--model-color) 9%,var(--surface));border:1px solid color-mix(in srgb,var(--model-color) 38%,var(--border));color:var(--model-color);font-size:11.5px;font-weight:700;letter-spacing:.2px;white-space:nowrap}.ai-chip i{width:23px;height:23px;display:grid;place-items:center;border-radius:7px;background:color-mix(in srgb,var(--model-color) 17%,var(--surface));font-style:normal}.ai-chip svg{width:15px;height:15px;color:var(--model-color);fill:currentColor;stroke:currentColor}.ai-chip i .model-brand-logo{width:15px;height:15px;object-fit:contain}.ai-model-mask{width:15px;height:15px;display:block;background:currentColor;-webkit-mask:var(--ai-model-icon) center/contain no-repeat;mask:var(--ai-model-icon) center/contain no-repeat}.ai-chip b{color:inherit;font-size:inherit}.ai-openai{--model-color:#16a37f}.ai-gemini,.ai-google,.ai-lyria{--model-color:#4285f4}.ai-flux{--model-color:#e05a47}.ai-qwen{--model-color:#7357ff}.ai-nanoBanana{--model-color:#f4c542}.ai-grok{--model-color:#a8adb8}.ai-kling{--model-color:#ef476f}.ai-veo{--model-color:#34a853}.ai-runway{--model-color:#f2b134}.ai-seedance,.ai-byteplus{--model-color:#5b8cff}.ai-sora{--model-color:#59b8ff}.ai-suno{--model-color:#ff5c9a}.ai-elevenlabs{--model-color:#ad7cff}.ai-ideogram{--model-color:#ff785a}.ai-recraft{--model-color:#f04b7a}.ai-seedream{--model-color:#55c989}.ai-minimax,.ai-hailuo{--model-color:#ff7048}.ai-pixverse{--model-color:#b052ff}.ai-heygen{--model-color:#6e68ff}.ai-luma{--model-color:#45bfe8}
[data-theme="light"] .ai-chip{background:#f4f4f4}
@keyframes ai-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.tools{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.tool{position:relative;padding:16px;border-radius:20px;cursor:pointer;background:var(--surface);border:1px solid var(--border);backdrop-filter:blur(var(--blur));-webkit-backdrop-filter:blur(var(--blur));transition:.25s;overflow:hidden}
.tool:active{transform:scale(.97)}
.tool .ico{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;background:var(--surface-2);color:var(--text-dim);margin-bottom:10px;font-size:20px;border:1px solid var(--border)}
.tool h4{margin:0;font-size:14px;font-weight:600}
.tool p{margin:4px 0 0;font-size:12px;color:var(--text-mute);line-height:1.4}
.tool::after{content:none}
.tool .knowledge-card-image{display:block;width:calc(100% + 32px);max-width:none;aspect-ratio:1/1;margin:-16px -16px 13px;object-fit:cover;background:var(--surface-2)}.knowledge-card-copy{min-width:0}
.gen-pills{display:flex;gap:8px;overflow-x:auto;padding:4px 2px;scrollbar-width:none;margin-bottom:14px}
.gen-pills::-webkit-scrollbar{display:none}
.gen-pill{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;padding:9px 14px;border-radius:14px;background:var(--surface);border:1px solid var(--border);color:var(--text-dim);font-size:13px;font-weight:500;cursor:pointer;backdrop-filter:blur(var(--blur));-webkit-backdrop-filter:blur(var(--blur))}
.gen-pill.act{background:var(--primary);color:#fff;border-color:transparent}
.chat-panel{margin-top:16px;padding:14px;border-radius:22px;background:linear-gradient(180deg,rgba(10,10,22,.7),rgba(10,10,22,.4));border:1px solid var(--border-strong);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:0 20px 50px -20px rgba(0,0,0,.7)}
[data-theme="light"] .chat-panel{background:linear-gradient(180deg,rgba(255,255,255,.85),rgba(255,255,255,.6))}
.chat-head{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.chat-head .ico{width:32px;height:32px;border-radius:10px;background:var(--primary);display:grid;place-items:center;color:#fff;font-size:14px}
.chat-head .title{font-size:14px;font-weight:600}
.chat-head .sub{font-size:11px;color:var(--text-mute)}
.chat-controls{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ctrl{display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:14px;background:var(--surface-2);border:1px solid var(--border);cursor:pointer;transition:.2s}
.ctrl:active{transform:scale(.98)}
.ctrl .ci{width:30px;height:30px;border-radius:9px;background:var(--surface);color:var(--text-dim);display:grid;place-items:center;font-size:14px;flex:0 0 auto;border:1px solid var(--border)}
.ctrl .cb{flex:1;min-width:0}
.ctrl .ck{font-size:10px;color:var(--text-mute);text-transform:uppercase;letter-spacing:.5px}
.ctrl .cv{font-size:13px;font-weight:600;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ctrl .ch{color:var(--text-mute);font-size:12px}
.chat-input{margin-top:12px;display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:16px;background:rgba(0,0,0,.4);border:1px solid var(--border)}
[data-theme="light"] .chat-input{background:rgba(255,255,255,.7)}
.chat-input input{flex:1;background:transparent;border:none;color:var(--text);font-size:14px;outline:none;font-family:inherit}
.chat-input input::placeholder{color:var(--text-mute)}
.chat-send{width:36px;height:36px;border-radius:11px;border:none;background:var(--primary);color:#fff;cursor:pointer;display:grid;place-items:center}
.hist{display:flex;flex-direction:column;gap:10px}
.profile-gallery-filters{display:flex;gap:7px;overflow-x:auto;margin:0 0 12px;padding:1px 1px 5px;scrollbar-width:none}.profile-gallery-filters::-webkit-scrollbar{display:none}.profile-gallery-filters button{flex:0 0 auto;padding:7px 11px;border:1px solid var(--border);border-radius:999px;background:var(--surface);color:var(--text-dim);font:inherit;font-size:11px;cursor:pointer}.profile-gallery-filters button.active{background:var(--text);border-color:var(--text);color:var(--bg-0)}.profile-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.profile-gallery-state{grid-column:1/-1;padding:32px 16px;border:1px dashed var(--border-strong);border-radius:18px;color:var(--text-dim);text-align:center;font-size:13px}.profile-gallery-card{min-width:0;overflow:hidden;border:1px solid var(--border);border-radius:17px;background:var(--surface)}.profile-gallery-preview{position:relative;width:100%;aspect-ratio:1/1;padding:0;display:block;overflow:hidden;border:0;background:var(--surface-2);color:var(--text);cursor:pointer}.profile-gallery-preview>img,.profile-gallery-preview>video{width:100%;height:100%;display:block;object-fit:cover}.profile-gallery-placeholder{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;color:var(--text-dim)}.profile-gallery-placeholder svg{width:34px;height:34px}.profile-gallery-placeholder span{font-size:11px}.profile-gallery-play{position:absolute;left:50%;top:50%;width:38px;height:38px;display:grid;place-items:center;border-radius:50%;transform:translate(-50%,-50%);background:rgba(0,0,0,.58);color:#fff}.profile-gallery-play svg{width:20px;height:20px}.profile-gallery-copy{padding:9px 10px 7px}.profile-gallery-copy b,.profile-gallery-copy small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.profile-gallery-copy b{font-size:11.5px}.profile-gallery-copy small{margin-top:3px;color:var(--text-mute);font-size:9.5px}.profile-gallery-actions{display:grid;grid-template-columns:repeat(5,1fr);gap:2px;padding:0 7px 8px}.profile-gallery-actions button{height:30px;display:grid;place-items:center;padding:0;border:0;border-radius:8px;background:transparent;color:var(--text-dim);cursor:pointer}.profile-gallery-actions button:hover,.profile-gallery-actions button:active{background:var(--surface-2);color:var(--text)}.profile-gallery-actions button.danger{color:#ef7777}.profile-gallery-actions svg,.profile-gallery-preview svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.profile-gallery-text-modal{position:fixed;inset:0;z-index:120000;display:none;align-items:center;justify-content:center;padding:18px;background:rgba(0,0,0,.58)}.profile-gallery-text-modal.show{display:flex}.profile-gallery-text-modal section{width:min(480px,100%);max-height:75vh;overflow:auto;padding:16px;border:1px solid rgba(255,255,255,.12);border-radius:20px;background:#202020;color:#eee}.profile-gallery-text-modal header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.profile-gallery-text-modal header button{width:32px;height:32px;border:0;border-radius:50%;background:#303030;color:#ddd;font-size:20px}.profile-gallery-text-modal section>div{font-size:13px;line-height:1.6;white-space:pre-wrap}
.home-quick-tools{position:relative;overflow:hidden;touch-action:pan-y;padding-bottom:16px}.home-quick-card{width:100%;min-height:116px;padding:18px;border:1px solid var(--border);border-radius:18px;background:#111;color:#fff;font:inherit;text-align:left;cursor:pointer;display:flex;align-items:flex-end;gap:12px;position:relative;overflow:hidden;isolation:isolate;transition:transform .38s cubic-bezier(.22,.75,.25,1),opacity .24s ease}.home-quick-card:active{transform:scale(.985)}.home-quick-preview{position:absolute;z-index:-2;inset:0;display:block;overflow:hidden;background:var(--surface-2)}.home-quick-preview img,.home-quick-preview video{display:block;width:100%;height:100%;object-fit:cover}.home-quick-card::after{content:"";position:absolute;z-index:-1;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.78),rgba(0,0,0,.34) 62%,rgba(0,0,0,.12))}.home-quick-copy{min-width:0;padding-right:30px;text-shadow:0 2px 10px rgba(0,0,0,.8)}.home-quick-card b{display:block;font-size:15px;line-height:1.2}.home-quick-card small{display:block;margin-top:5px;color:rgba(255,255,255,.76);font-size:11px;line-height:1.3}.home-quick-card i{position:absolute;right:17px;top:50%;transform:translateY(-50%);color:#fff;font-size:22px;font-style:normal;text-shadow:0 2px 8px #000}.home-quick-tools.is-swiping .home-quick-card{opacity:0;transform:translateX(-50px)}.home-quick-dots{position:absolute;left:0;right:0;bottom:3px;display:flex;justify-content:center;gap:4px}.home-quick-dots span{width:4px;height:4px;border-radius:99px;background:var(--text-mute);opacity:.42;transition:.25s}.home-quick-dots span.active{width:13px;opacity:.9;background:var(--text-dim)}
.hist-item{display:flex;align-items:center;gap:12px;padding:12px;border-radius:16px;background:var(--surface);border:1px solid var(--border);backdrop-filter:blur(var(--blur));-webkit-backdrop-filter:blur(var(--blur))}
.thumb{width:48px;height:48px;border-radius:14px;flex:0 0 auto;background:var(--surface-2);border:1px solid var(--border);display:grid;place-items:center;color:var(--text-dim);font-size:18px}
.hist-body{flex:1;min-width:0}
.hist-title{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hist-sub{font-size:12px;color:var(--text-mute);margin-top:2px}
.chip{font-size:10px;padding:4px 8px;border-radius:999px;background:rgba(59,130,246,.14);color:#93c5fd;border:1px solid rgba(59,130,246,.32);white-space:nowrap}
.chip.done{background:var(--surface-2);color:var(--text-dim);border-color:var(--border)}
.chip.pending{background:var(--surface);color:var(--text-mute);border-color:var(--border)}
.list{display:flex;flex-direction:column;gap:8px}
.row{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:16px;background:var(--surface);border:1px solid var(--border);backdrop-filter:blur(var(--blur));-webkit-backdrop-filter:blur(var(--blur));cursor:pointer}
.row .ico{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;background:var(--surface-2);color:var(--text-dim);font-size:16px;flex:0 0 auto;border:1px solid var(--border)}
.row .label{flex:1;font-size:14px;min-width:0}
.row .label small{display:block;color:var(--text-mute);font-size:11px;margin-top:2px;font-weight:400}
.row .chev{color:var(--text-mute)}
.row .val{font-size:13px;color:var(--text-dim)}
.switch{position:relative;width:46px;height:26px;border-radius:999px;background:rgba(255,255,255,.1);border:1px solid var(--border);cursor:pointer;transition:.25s;flex:0 0 auto}
.switch::after{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:#fff;transition:.25s;box-shadow:0 2px 6px rgba(0,0,0,.4)}
.switch.on{background:var(--primary);border-color:transparent}
.switch.on::after{left:22px}
.shop-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.pack{position:relative;padding:16px;border-radius:20px;background:var(--surface);border:1px solid var(--border);overflow:hidden;text-align:center}
.pack.pop{border-color:rgba(59,130,246,.45);background:var(--surface-2)}
.pack .pico{font-size:30px;margin-bottom:4px}
.pack .pn{font-size:13px;color:var(--text-dim)}
.pack .pa{font-size:20px;font-weight:800;color:var(--text);margin:4px 0}
.pack .pp{font-size:13px;font-weight:600;margin-bottom:10px}
.pack button{width:100%;padding:9px;border-radius:12px;border:none;color:#fff;background:var(--primary);font-weight:600;font-size:13px;cursor:pointer}
.pack .pop-tag{position:absolute;top:8px;right:8px;font-size:9px;padding:3px 7px;border-radius:999px;background:rgba(59,130,246,.22);color:#93c5fd;border:1px solid rgba(59,130,246,.45);text-transform:uppercase;letter-spacing:.5px}
.nav{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom) + 12px);transform:translateX(-50%);width:min(380px,calc(100% - 32px));display:flex;justify-content:space-between;align-items:center;padding:6px;border-radius:20px;background:rgba(6,6,13,.78);backdrop-filter:blur(24px) saturate(140%);-webkit-backdrop-filter:blur(24px) saturate(140%);border:1px solid var(--border-strong);box-shadow:0 20px 50px -20px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.02) inset;z-index:10}
[data-theme="light"] .nav{background:rgba(255,255,255,.7)}
.nav-btn{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 2px;border-radius:14px;cursor:pointer;color:var(--text-mute);background:transparent;border:none;font-size:9px;font-weight:500;letter-spacing:.3px;transition:.2s}
.nav-btn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8}
.nav-btn:active{transform:scale(.94);color:var(--text)}
.nav-btn.active{color:var(--text)}
[data-theme="light"] .nav-btn{color:var(--text-dim)}
[data-theme="light"] .nav-btn.active{color:var(--text)}

/* Compact stats in topbar */
.tb-stats{display:flex;align-items:center;gap:6px;margin-right:2px}
.tb-stat{display:inline-flex;align-items:center;gap:4px;padding:6px 9px;border-radius:10px;background:var(--surface);border:1px solid var(--border);color:var(--text-dim);font-size:11px;font-weight:600;line-height:1}
.tb-stat b{color:var(--text);font-weight:700}
.tb-stat svg{color:var(--primary)}

/* Home socials row (replaces stats block) */
.home-socials{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:14px;padding:10px 12px;border-radius:18px;background:var(--surface);border:1px solid var(--border)}
.home-idea-ai{margin-top:12px;padding:14px;border:1px solid var(--border);border-radius:20px;background:var(--surface);box-shadow:0 14px 38px rgba(0,0,0,.08)}.home-idea-ai>header{display:flex;align-items:center;gap:8px;margin-bottom:10px}.home-idea-ai>header span{display:flex;align-items:center;gap:7px}.home-idea-ai>header img{width:25px;height:25px;object-fit:contain}.home-idea-ai>header b{font-size:12px}.home-idea-ai>header small{margin-left:auto;color:var(--text-dim);font-size:8px}.home-idea-chat{max-height:170px;display:flex;flex-direction:column;gap:7px;overflow-y:auto;margin-bottom:9px}.home-idea-chat p{max-width:88%;margin:0;padding:8px 10px;border-radius:13px;background:var(--surface-2);font-size:10px;line-height:1.4;white-space:pre-wrap}.home-idea-chat p.user{align-self:flex-end;background:var(--primary);color:#fff}.home-idea-attachment{width:54px;height:54px;position:relative;margin-bottom:8px;overflow:hidden;border-radius:12px}.home-idea-attachment img{width:100%;height:100%;object-fit:cover}.home-idea-attachment button{position:absolute;right:2px;top:2px;width:19px;height:19px;border:0;border-radius:50%;background:rgba(0,0,0,.7);color:#fff}.home-idea-ai form{display:flex;align-items:flex-end;gap:8px;padding:7px;border:1px solid var(--border-strong);border-radius:16px;background:var(--bg)}.home-idea-ai textarea{min-width:0;flex:1;min-height:40px;max-height:100px;resize:none;padding:8px;border:0;outline:0;background:transparent;color:var(--text);font:11px/1.4 inherit}.home-idea-ai form>div{display:flex;gap:5px}.home-idea-ai form button{width:34px;height:34px;border:1px solid var(--border);border-radius:50%;background:var(--surface-2);color:var(--text);font-size:17px}.home-idea-ai form button.send{border:0;background:var(--primary);color:#fff}.home-idea-ai form button.live{background:#ef4f63;color:#fff;animation:homeIdeaPulse 1.2s infinite}.home-idea-go{width:100%;height:38px;margin-top:8px;border:0;border-radius:12px;background:var(--primary);color:#fff;font-size:10px;font-weight:800}@keyframes homeIdeaPulse{50%{box-shadow:0 0 0 7px rgba(239,79,99,.12)}}@media(max-width:700px){.home-idea-ai>header small{max-width:125px;text-align:right}.home-idea-chat{max-height:145px}}
.home-idea-ai{position:relative;margin-top:12px;padding:0;border:0;border-radius:999px;background:linear-gradient(145deg,color-mix(in srgb,var(--surface) 96%,var(--text) 4%),color-mix(in srgb,var(--surface-2) 94%,var(--bg) 6%));box-shadow:inset 0 1px 0 color-mix(in srgb,var(--text) 12%,transparent),inset 0 -1px 0 color-mix(in srgb,var(--bg) 35%,transparent),0 8px 18px rgba(0,0,0,.18),0 2px 5px rgba(0,0,0,.12)}.home-idea-ai form{height:50px;display:flex;align-items:center;gap:2px;padding:4px 7px;border:0;border-radius:999px;background:transparent}.home-idea-ai textarea{height:40px;min-height:40px;max-height:40px;flex:1;padding:11px 8px;overflow:hidden;resize:none;border:0;outline:0;background:transparent;color:var(--text);font:500 12px/18px inherit}.home-idea-ai textarea::placeholder{color:var(--text-dim)}.home-idea-ai form button{width:34px;height:34px;flex:0 0 34px;display:grid;place-items:center;padding:0;border:0;border-radius:50%;background:transparent;color:var(--text)}.home-idea-ai form button.attach{font-size:23px;font-weight:300}.home-idea-ai form button.voice svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;filter:drop-shadow(0 1px 2px rgba(0,0,0,.22))}.home-idea-ai form button.send{border:0;background:transparent;color:var(--text);font-size:25px;font-weight:800;text-shadow:0 1px 3px rgba(0,0,0,.24)}.home-idea-ai form button[hidden]{display:none!important}.home-idea-ai form button.live{background:color-mix(in srgb,var(--text) 11%,transparent);color:var(--text);animation:homeIdeaThemePulse 1.1s infinite}.home-idea-ai form button.live svg{fill:none;stroke:currentColor}.home-idea-attachment{position:absolute;z-index:3;left:5px;top:5px;width:40px;height:40px;margin:0;border-radius:50%;box-shadow:0 2px 7px rgba(0,0,0,.28)}.home-idea-attachment button{right:-2px;top:-2px;width:17px;height:17px}.home-idea-ai:has(.home-idea-attachment:not([hidden])) form{padding-left:49px}@keyframes homeIdeaThemePulse{50%{box-shadow:0 0 0 6px color-mix(in srgb,var(--text) 7%,transparent),0 3px 9px rgba(0,0,0,.18)}}
.home-idea-ai{border:1px solid color-mix(in srgb,var(--text) 28%,var(--border))!important;background:color-mix(in srgb,var(--surface) 91%,var(--text) 9%)!important;box-shadow:0 10px 28px rgba(0,0,0,.24),0 0 0 3px color-mix(in srgb,var(--text) 5%,transparent),inset 0 1px 0 color-mix(in srgb,#fff 16%,transparent)!important}.home-idea-ai textarea::placeholder{color:color-mix(in srgb,var(--text) 68%,transparent)!important}.home-idea-ai form button{color:var(--text)!important}
.hsoc{flex:1;display:grid;place-items:center;height:38px;border-radius:12px;background:var(--surface-2);border:1px solid var(--border);color:var(--text-dim);transition:.2s;text-decoration:none}
.hsoc svg{width:18px;height:18px}
.hsoc:active{transform:scale(.92)}
.hsoc.ig:hover{color:#e1306c}
.hsoc.fb:hover{color:#1877f2}
.hsoc.tg:hover{color:#229ed9}
.hsoc.xx:hover{color:#fff}
.hsoc.yt:hover{color:#ff0033}
.hsoc.tt:hover{color:#25f4ee}
.hsoc.sx{border:1px solid color-mix(in srgb,var(--primary) 55%,var(--border));color:var(--primary);cursor:pointer}.hsoc.sx:hover{background:color-mix(in srgb,var(--primary) 14%,var(--surface-2))}

.community-head{display:flex;align-items:center;justify-content:space-between;margin:2px 0 14px}.community-head small{font-size:10px;letter-spacing:1.6px;color:var(--text-dim)}.community-head h2{margin:2px 0 0;font-size:22px}.community-head button{display:flex;align-items:center;gap:6px;padding:9px 12px;border:0;border-radius:12px;background:var(--primary);color:#fff;font-weight:700}.community-head button svg,.community-post footer svg,.community-modal svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}.community-tabs{display:flex;gap:8px;margin-bottom:12px}.community-tabs button{padding:7px 11px;border:1px solid var(--border);border-radius:999px;background:var(--surface);color:var(--text-dim)}.community-tabs button.active{background:var(--text);color:var(--bg)}.community-feed{display:grid;gap:14px}.community-state{padding:36px 18px;text-align:center;border:1px dashed var(--border-strong);border-radius:18px;color:var(--text-dim)}.community-post{overflow:hidden;border:1px solid var(--border);border-radius:20px;background:var(--surface)}.community-post>header{display:flex;align-items:center;gap:10px;padding:12px}.community-avatar{width:38px;height:38px;flex:0 0 38px;display:grid;place-items:center;overflow:hidden;border-radius:50%;background:var(--surface-2);font-size:11px;font-weight:800}.community-avatar img{width:100%;height:100%;object-fit:cover}.community-post header div{min-width:0}.community-post header b,.community-post header small{display:block}.community-post header b{font-size:13px}.community-post header small{margin-top:2px;font-size:10px;color:var(--text-dim)}.community-media img,.community-media video{display:block;width:100%;max-height:520px;object-fit:cover;background:#090909}.community-audio,.community-text{min-height:160px;padding:24px;display:flex;align-items:center;justify-content:center;background:var(--surface-2)}.community-audio{flex-direction:column;gap:16px}.community-audio>svg{width:34px;height:34px;fill:none;stroke:currentColor}.community-audio audio{width:100%}.community-text{white-space:pre-wrap;line-height:1.6}.community-post>p{margin:0;padding:11px 13px 0;font-size:12px;line-height:1.5}.community-post footer{display:flex;gap:6px;padding:9px}.community-post footer button{display:flex;align-items:center;gap:5px;padding:7px 9px;border:0;border-radius:10px;background:transparent;color:var(--text-dim)}.community-post footer button.liked{color:#f05b73}.community-post footer button.liked svg{fill:currentColor}.community-modal{position:fixed;inset:0;z-index:130000;display:none;align-items:flex-end;justify-content:center;padding:16px;background:rgba(0,0,0,.65)}.community-modal.show{display:flex}.community-modal>section{width:min(520px,100%);max-height:78vh;display:flex;flex-direction:column;padding:16px;border:1px solid rgba(255,255,255,.12);border-radius:22px;background:var(--bg);color:var(--text)}.community-modal header{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}.community-modal header small{color:var(--text-dim)}.community-modal header h3{margin:2px 0}.community-modal header>button{width:34px;height:34px;display:grid;place-items:center;border:0;border-radius:50%;background:var(--surface);color:var(--text)}.community-publish-list,.community-comments{overflow:auto;display:grid;gap:8px}.community-publish-list>button{display:flex;align-items:center;gap:10px;padding:11px;border:1px solid var(--border);border-radius:13px;background:var(--surface);color:var(--text);text-align:left}.community-publish-list svg{width:22px;height:22px;fill:none;stroke:currentColor}.community-publish-list b{font-size:12px}.community-comments>div{display:flex;gap:9px}.community-comments .community-avatar{width:32px;height:32px;flex-basis:32px}.community-comments p{margin:0;padding:8px 10px;border-radius:12px;background:var(--surface);font-size:12px}.community-comments p b{display:block;margin-bottom:3px}.community-modal form{display:flex;gap:8px;margin-top:12px}.community-modal form input{min-width:0;flex:1;padding:11px 13px;border:1px solid var(--border);border-radius:12px;background:var(--surface);color:var(--text)}.community-modal form button{width:42px;border:0;border-radius:12px;background:var(--primary);color:#fff}

/* Readability for secondary profile details and discovery controls on dark themes. */
[data-theme="dark"] .user-sub,
[data-theme="dark"] #homeUserHandle,
[data-theme="dark"] #profileUserHandle,
[data-theme="dark"] .id-pill,
[data-theme="dark"] #homeUserId,
[data-theme="dark"] #profileUserId{color:#c8cbd2}
[data-theme="dark"] .id-pill{background:rgba(255,255,255,.075);border-color:rgba(255,255,255,.14)}
[data-theme="dark"] .hsoc{color:#d6d8df;background:color-mix(in srgb,var(--surface-2) 88%,white 12%);border-color:rgba(255,255,255,.14)}
[data-theme="dark"] .ai-chip{color:#d2d5dc;background:color-mix(in srgb,var(--surface) 90%,white 10%);border-color:rgba(255,255,255,.13)}
.ai-banner-brand i{overflow:hidden}
.ai-banner-brand img{width:18px;height:18px;display:block;object-fit:contain;border-radius:4px}
.ai-banner-brand img.logo-wide{width:21px;height:21px}
.ai-chip i .public-ai-logo{width:17px;height:17px;display:block;object-fit:contain;border-radius:4px}
[data-theme="dark"] .app :where(.ico,.mi,.pm-ico,.pm-arr,.chev,.home-quick-icon,.thumb,.pico,.modal-close) .ui-svg-icon{color:#e6e8ed;stroke:#e6e8ed;opacity:1;filter:drop-shadow(0 1px 1px rgba(0,0,0,.45))}
[data-theme="dark"] .app :where(.row .ico,.home-quick-icon,.thumb,.pm-ico){background:color-mix(in srgb,var(--surface-2) 82%,white 18%);border-color:rgba(255,255,255,.16)}
[data-theme="dark"] .app :where(.chev,.pm-arr) .ui-svg-icon{color:#cfd2d9;stroke:#cfd2d9}

/* "Open" chip — green, button-like */
.chip.open{background:rgba(16,163,127,.18);color:#19c37d;border:1px solid rgba(16,163,127,.45);font-weight:600;cursor:pointer;padding:6px 12px;border-radius:999px;font-size:11px;transition:.2s}
.chip.open:hover{background:rgba(16,163,127,.28)}
.chip.open:active{transform:scale(.95)}
.profile-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:14px}
.mini{padding:14px;border-radius:16px;background:var(--surface);border:1px solid var(--border);backdrop-filter:blur(var(--blur));-webkit-backdrop-filter:blur(var(--blur))}
.mini .k{font-size:11px;color:var(--text-mute);letter-spacing:.5px;text-transform:uppercase}
.mini .v{font-size:18px;font-weight:700;margin-top:4px}
.toast{position:fixed;left:50%;top:18px;transform:translate(-50%,-80px);background:rgba(6,6,13,.92);color:#fff;padding:10px 16px;border-radius:14px;border:1px solid var(--border-strong);font-size:13px;z-index:50;transition:.3s;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
.toast.show{transform:translate(-50%,0)}
body:has(.view[data-view="tools"].active) .toast{background:var(--st-bg-3, rgba(6,6,13,.92));color:var(--st-text, #fff);border-color:var(--st-border, var(--border-strong))}
[dir="rtl"] .brand-name{letter-spacing:1px}
/* === Connect with us (Settings) === */
.connect-card{margin-top:8px;padding:16px 16px 18px;border-radius:22px;background:var(--grad-card);border:1px solid var(--border-strong);box-shadow:var(--shadow-lg);position:relative;overflow:hidden}
.connect-card::after{content:"";position:absolute;inset:0;background:radial-gradient(320px 160px at 100% -20%,rgba(59,130,246,.18),transparent 60%);pointer-events:none}
.connect-head{position:relative;z-index:1;margin-bottom:14px}
.connect-head h3{margin:0;font-size:14px;font-weight:700;letter-spacing:.3px}
.connect-head small{display:block;color:var(--text-dim);font-size:11.5px;margin-top:3px;font-weight:400}
.socials{position:relative;z-index:1;display:flex;gap:10px;justify-content:space-between}
.social{flex:1;display:grid;place-items:center;height:46px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid var(--border);color:#cdd3eb;text-decoration:none;transition:transform .2s ease,box-shadow .25s ease,background .2s ease,color .2s ease;backdrop-filter:blur(var(--blur));-webkit-backdrop-filter:blur(var(--blur));position:relative}
[data-theme="dark"] .social{color:#dde0e7;background:rgba(255,255,255,.075);border-color:rgba(255,255,255,.15)}
[data-theme="light"] .social{background:rgba(255,255,255,.7);color:#1f2547}
.social svg{width:20px;height:20px}
.social::before{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:0 0 0 0 rgba(59,130,246,0);transition:box-shadow .3s ease;pointer-events:none}
.social:hover{transform:translateY(-2px);background:rgba(59,130,246,.14);color:#bfdbfe;border-color:rgba(59,130,246,.35)}
.social:hover::before{box-shadow:0 0 22px 2px rgba(59,130,246,.45),inset 0 0 14px rgba(59,130,246,.18)}
.social:active{transform:scale(.94)}
.social.tg:hover{color:#7dd3fc;border-color:rgba(56,189,248,.45)}
.social.tg:hover::before{box-shadow:0 0 22px 2px rgba(56,189,248,.5),inset 0 0 14px rgba(56,189,248,.2)}
.social.wa:hover{color:#86efac;border-color:rgba(34,197,94,.45)}
.social.wa:hover::before{box-shadow:0 0 22px 2px rgba(34,197,94,.45),inset 0 0 14px rgba(34,197,94,.2)}
.social.ig:hover{color:#f0abfc;border-color:rgba(217,70,239,.45)}
.social.ig:hover::before{box-shadow:0 0 22px 2px rgba(217,70,239,.45),inset 0 0 14px rgba(217,70,239,.2)}
.social.vb:hover{color:#93c5fd;border-color:rgba(59,130,246,.45)}
.social.vb:hover::before{box-shadow:0 0 22px 2px rgba(59,130,246,.45),inset 0 0 14px rgba(59,130,246,.2)}
.studio-search{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:18px;background:var(--surface);border:1px solid var(--border);backdrop-filter:blur(var(--blur));-webkit-backdrop-filter:blur(var(--blur));margin-bottom:14px}
.studio-search svg{flex:0 0 auto;color:var(--text-mute)}
.studio-search input{flex:1;background:transparent;border:none;outline:none;color:var(--text);font-size:14px;font-family:inherit}
.studio-search input::placeholder{color:var(--text-mute)}
.studio-search .kbd{font-size:10px;padding:3px 7px;border-radius:7px;background:var(--surface-2);border:1px solid var(--border);color:var(--text-mute);letter-spacing:.5px}
.studio-head{display:flex;align-items:center;justify-content:space-between;margin:6px 4px 12px}
.studio-head h2{margin:0;font-size:20px;font-weight:700;letter-spacing:.2px}
.studio-head .tag{font-size:10px;padding:4px 9px;border-radius:999px;background:rgba(59,130,246,.16);color:#93c5fd;border:1px solid rgba(59,130,246,.35);letter-spacing:.5px;text-transform:uppercase}
.cat-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-bottom:14px}
.cat{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 6px;border-radius:16px;background:var(--surface);border:1px solid var(--border);cursor:pointer;transition:.2s;backdrop-filter:blur(var(--blur));-webkit-backdrop-filter:blur(var(--blur))}
.cat:active{transform:scale(.95)}
.cat .ci{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;font-size:18px;background:var(--surface-2);color:var(--text-dim);border:1px solid var(--border);transition:.25s}
.cat .cl{font-size:11px;color:var(--text-dim);font-weight:500}
.cat.act{background:rgba(59,130,246,.12);border-color:rgba(59,130,246,.45)}
.cat.act .ci{background:var(--primary);color:#fff;border-color:transparent}
.cat.act .cl{color:var(--text)}
.price-bar{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom) + 86px);transform:translate(-50%,30px);width:min(440px,calc(100% - 24px));display:none;align-items:center;gap:12px;padding:10px 12px 10px 18px;border-radius:20px;background:rgba(6,6,13,.92);backdrop-filter:blur(24px) saturate(140%);-webkit-backdrop-filter:blur(24px) saturate(140%);border:1px solid var(--border-strong);box-shadow:0 24px 50px -15px rgba(0,0,0,.4),0 0 0 1px rgba(255,255,255,.04) inset;z-index:11;opacity:0;transition:.35s cubic-bezier(.2,.8,.2,1)}
[data-theme="light"] .price-bar{background:rgba(255,255,255,.92)}
.price-bar.show{display:flex;opacity:1;transform:translate(-50%,0)}
.price-bar .pl{font-size:11px;color:var(--text-mute);text-transform:uppercase;letter-spacing:1px}
.price-bar .pv{font-size:18px;font-weight:800;color:var(--text);line-height:1}
.price-bar .pbtn{margin-left:auto;border:none;cursor:pointer;color:#fff;font-weight:700;font-size:13px;padding:12px 18px;border-radius:14px;background:var(--primary);display:inline-flex;align-items:center;gap:8px}
.modal-overlay{position:fixed;inset:0;background:rgba(2,2,8,.7);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:none;align-items:flex-end;justify-content:center;z-index:100;opacity:0;transition:.25s}
.modal-overlay.show{display:flex;opacity:1}
.modal{width:min(440px,100%);background:linear-gradient(180deg,rgba(14,14,26,.98),rgba(6,6,13,.98));border:1px solid var(--border-strong);border-radius:26px 26px 0 0;padding:18px 18px calc(18px + env(safe-area-inset-bottom));box-shadow:0 -20px 60px -10px rgba(0,0,0,.8);transform:translateY(40px);transition:.3s cubic-bezier(.2,.8,.2,1)}
[data-theme="light"] .modal{background:linear-gradient(180deg,#fff,#f6f7fb)}
.modal-overlay.show .modal{transform:translateY(0)}
.modal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.modal-head .mt{display:flex;align-items:center;gap:10px}
.modal-head .mi{width:38px;height:38px;border-radius:12px;background:var(--primary);display:grid;place-items:center;color:#fff;font-size:18px}
.modal-head h3{margin:0;font-size:16px;font-weight:700}
.modal-head .ms{font-size:12px;color:var(--text-mute);margin-top:2px}
.modal-close{width:34px;height:34px;border-radius:11px;background:var(--surface);border:1px solid var(--border);color:var(--text);cursor:pointer;display:grid;place-items:center;font-size:18px}
.modal textarea{width:100%;min-height:120px;padding:14px;border-radius:16px;background:rgba(0,0,0,.45);border:1px solid var(--border);color:var(--text);font-size:14px;font-family:inherit;outline:none;resize:none}
[data-theme="light"] .modal textarea{background:rgba(255,255,255,.7)}
.modal textarea::placeholder{color:var(--text-mute)}
.modal-actions{display:flex;gap:10px;margin-top:12px}
.btn-ghost{flex:1;padding:13px;border-radius:14px;background:var(--surface);border:1px solid var(--border);color:var(--text);font-weight:600;cursor:pointer;font-size:14px;font-family:inherit}
.btn-primary{flex:1;padding:13px;border-radius:14px;border:none;color:#fff;background:var(--primary);font-weight:700;cursor:pointer;font-size:14px;font-family:inherit;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.scroll.studio-mode{overflow:hidden;padding:0;display:flex;flex-direction:column;min-height:0}
.studio{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;height:100%;animation:fadeUp .35s ease both}
.studio-top{flex:0 0 auto;padding:10px 14px 8px;display:flex;flex-direction:column;gap:8px;border-bottom:1px solid var(--border);background:linear-gradient(180deg,rgba(6,6,14,.6),rgba(6,6,14,0));position:relative;z-index:5}
.studio[data-ps-theme="white"] .studio-top{background:linear-gradient(180deg,rgba(255,255,255,.6),rgba(255,255,255,0))}
.studio[data-ps-theme="black"] .studio-top{background:linear-gradient(180deg,rgba(0,0,0,.7),rgba(0,0,0,0))}
.studio-top .studio-search{margin:0;padding:10px 12px;border-radius:14px}
.model-select{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:14px;background:var(--surface);border:1px solid var(--border);backdrop-filter:blur(var(--blur));-webkit-backdrop-filter:blur(var(--blur));cursor:pointer;position:relative}
.model-select .mdot{width:8px;height:8px;border-radius:50%;background:#60a5fa;box-shadow:0 0 12px 2px rgba(96,165,250,.7)}
.model-select .mlbl{font-size:11px;color:var(--text-mute);text-transform:uppercase;letter-spacing:.6px}
.model-select .mval{font-size:13px;font-weight:600}
.model-select .mchv{margin-left:auto;color:var(--text-mute);font-size:13px}
.model-pop{position:absolute;top:48px;left:0;right:0;padding:6px;border-radius:14px;background:rgba(8,8,18,.96);border:1px solid var(--border-strong);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:0 20px 50px -10px rgba(0,0,0,.7);z-index:25;display:none}
[data-theme="light"] .model-pop{background:rgba(255,255,255,.96)}
.model-pop.show{display:block;animation:fadeUp .18s ease both}
.model-pop button{display:flex;width:100%;align-items:center;gap:10px;padding:10px 12px;background:transparent;border:none;color:var(--text);font-size:13px;cursor:pointer;border-radius:10px;text-align:left;font-family:inherit}
.model-pop button:hover{background:var(--surface-2)}
.model-pop button.sel{background:var(--surface-2);color:#93c5fd}
.mode-strip{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:2px 0 4px}
.mode-strip[hidden]{display:none!important}
.mode-strip::-webkit-scrollbar{display:none}
.mode-ico{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 10px 6px;border-radius:14px;background:var(--surface);border:1px solid var(--border);cursor:pointer;color:var(--text-dim);transition:.2s;min-width:64px}
.mode-ico .mi{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;font-size:15px;background:rgba(96,165,250,.12);color:#93c5fd;transition:.2s}
.mode-ico .ml{font-size:10px;font-weight:500;letter-spacing:.3px}
.mode-ico:active{transform:scale(.94)}
.mode-ico.act{border-color:rgba(96,165,250,.55);background:linear-gradient(160deg,rgba(96,165,250,.18),rgba(59,130,246,.05));box-shadow:0 0 0 1px rgba(96,165,250,.35),0 10px 24px -10px rgba(59,130,246,.6),inset 0 0 18px rgba(96,165,250,.18);color:var(--text)}
.mode-ico.act .mi{background:linear-gradient(135deg,#60a5fa,#3b82f6);color:#fff;box-shadow:0 6px 18px -4px rgba(59,130,246,.8)}
.chat-area{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;padding:16px 14px 16px;display:flex;flex-direction:column;gap:14px;scroll-behavior:smooth;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.chat-area::-webkit-scrollbar{width:0}
.msg{display:flex;flex-direction:column;max-width:88%;gap:6px;animation:fadeUp .25s ease both}
.msg.user{align-self:flex-end;align-items:flex-end}
.msg.ai{align-self:flex-start;align-items:flex-start}
.bubble{padding:11px 14px;border-radius:18px;font-size:14px;line-height:1.45;border:1px solid var(--border);backdrop-filter:blur(var(--blur));-webkit-backdrop-filter:blur(var(--blur))}
.msg.user .bubble{background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff;border-color:transparent;border-bottom-right-radius:6px;box-shadow:0 10px 24px -10px rgba(37,99,235,.65)}
.msg.ai .bubble{background:var(--surface-2);color:var(--text);border-bottom-left-radius:6px}
/* Single-row, icon-only, semi-transparent message action bar - shared by
   user/AI text messages, error bubbles and generation result cards. Fixed
   equal-size buttons in a non-wrapping flex row so it can never overlap
   itself, on mobile or desktop. */
.msg-actions{display:flex;flex-wrap:nowrap;align-items:center;gap:6px;margin-top:2px}
.msg-action-btn{flex:0 0 auto;width:30px;height:30px;padding:0;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.10);color:var(--text-dim);border-radius:10px;display:grid;place-items:center;cursor:pointer;transition:.15s;opacity:.72}
.msg-action-btn:hover{opacity:1;color:var(--text);background:rgba(255,255,255,.14)}
.msg-action-btn:active{transform:scale(.9)}
.msg-action-btn[disabled]{cursor:default;opacity:.4}
.msg-action-btn .generation-action-icon{width:15px;height:15px}
.msg-action-btn.is-playing{color:var(--accent,#3b82f6);border-color:var(--accent,#3b82f6);opacity:1}
.msg-action-report.is-sent{color:#22c55e;border-color:rgba(34,197,94,.4)}
.ai-avatar{width:24px;height:24px;border-radius:8px;background:var(--surface-2);border:1px solid var(--border);display:inline-grid;place-items:center;color:var(--text-dim);font-size:11px;font-weight:700;margin-bottom:4px}
.typing{display:none !important}
.typing span{display:none !important;width:0;height:0;opacity:0;animation:none !important}
.typing span:nth-child(2){animation:none !important}.typing span:nth-child(3){animation:none !important}
@keyframes tdot{0%,80%,100%{transform:scale(.6);opacity:0}40%{transform:scale(.6);opacity:0}}
.studio-input{flex:0 0 auto;position:relative;padding:10px 12px 10px;background:linear-gradient(180deg,rgba(6,6,14,0),rgba(6,6,14,.92) 30%);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-top:1px solid var(--border);z-index:5}
[data-theme="light"] .studio-input{background:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,255,255,.95) 30%)}
.studio-input-row{display:flex;align-items:flex-end;gap:8px;padding:8px 10px 8px 8px;border-radius:20px;background:var(--surface-2);border:1px solid var(--border-strong);position:relative}
.sib{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;border:none;cursor:pointer;flex:0 0 auto;background:var(--surface);color:var(--text);border:1px solid var(--border);transition:.2s}
.sib:active{transform:scale(.92)}
.sib.plus{background:linear-gradient(135deg,#1e293b,#0f172a);color:#93c5fd;border-color:rgba(96,165,250,.3)}
[data-theme="light"] .sib.plus{background:#eef2ff;color:#2563eb;border-color:rgba(37,99,235,.2)}
.sib.send{background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff;border-color:transparent;box-shadow:0 8px 18px -6px rgba(37,99,235,.7)}
.sib.mic.rec{background:linear-gradient(135deg,#ef4444,#dc2626);color:#fff;border-color:transparent;animation:pulse 1.2s infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(239,68,68,.5)}50%{box-shadow:0 0 0 8px rgba(239,68,68,0)}}
.studio-input textarea{flex:1;min-height:38px;max-height:140px;resize:none;background:transparent;border:none;outline:none;color:var(--text);font-size:14px;font-family:inherit;padding:9px 4px;line-height:1.4}
.studio-input textarea::placeholder{color:var(--text-mute)}
.plus-pop{position:absolute;left:6px;bottom:54px;min-width:200px;padding:6px;border-radius:16px;background:rgba(8,8,18,.96);border:1px solid var(--border-strong);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:0 20px 50px -10px rgba(0,0,0,.7);z-index:30;display:none}
[data-theme="light"] .plus-pop{background:rgba(255,255,255,.96)}
.plus-pop.show{display:block;animation:fadeUp .18s ease both}
.plus-pop button{display:flex;width:100%;align-items:center;gap:10px;padding:10px 12px;background:transparent;border:none;color:var(--text);font-size:13px;cursor:pointer;border-radius:11px;text-align:left;font-family:inherit}
.plus-pop button:hover{background:var(--surface-2)}
.plus-pop .pi{width:28px;height:28px;border-radius:9px;background:rgba(96,165,250,.15);color:#93c5fd;display:grid;place-items:center;font-size:14px}

/* ============================================================
   SYLVEX brand logo + dropdown (header)
   ============================================================ */
.brand{display:flex;align-items:center;gap:10px;background:transparent;border:none;padding:4px 8px 4px 4px;margin:0;cursor:pointer;color:var(--text);border-radius:12px;transition:background .2s}
.brand:hover{background:var(--surface)}
.brand:active{transform:scale(.97)}
.brand-logo-img{width:32px;height:32px;border-radius:9px;object-fit:contain;background:transparent;padding:2px;filter:contrast(1.05) brightness(1.05);box-shadow:none}
[data-theme="light"] .brand-logo-img{background:transparent;box-shadow:none}
.brand .brand-name{font-weight:800;letter-spacing:3px;font-size:14px}
.brand-chv{color:var(--text-dim);transition:transform .2s}
.brand[aria-expanded="true"] .brand-chv{transform:rotate(180deg)}
.brand-pop{position:absolute;top:60px;left:14px;min-width:240px;padding:6px;border-radius:14px;background:rgba(10,10,14,.96);border:1px solid var(--border-strong);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:0 24px 60px -12px rgba(0,0,0,.8);z-index:40;display:none}
[data-theme="light"] .brand-pop{background:rgba(255,255,255,.98)}
.brand-pop.show{display:block;animation:fadeUp .18s ease both}
.brand-pop button{display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:100%;padding:10px 12px;background:transparent;border:none;color:var(--text);font-family:inherit;font-size:13px;text-align:left;cursor:pointer;border-radius:10px}
.brand-pop button:hover{background:var(--surface-2)}
.brand-pop .bp-k{font-weight:600;letter-spacing:.3px}
.brand-pop small{font-size:11px;color:var(--text-mute);font-weight:400}
.brand-pop .bp-div{height:1px;background:var(--border);margin:4px 6px}

/* ============================================================
   Pro Studio — strict monochrome AI workspace (ChatGPT/Claude-like)
   ============================================================ */
.studio{--st-bg:#0a0a0d;--st-bg-2:#101014;--st-line:rgba(255,255,255,.06);--st-line-2:rgba(255,255,255,.10);--st-text:#ececf1;--st-dim:#8e8ea0;--st-mute:#6b6b78;--st-bubble-user:#202024;--st-bubble-ai:transparent;background:var(--st-bg)}

.studio-bar{position:relative;flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid var(--st-line);background:var(--st-bg)}
.studio-bar-right{display:flex;align-items:center;gap:4px;flex:0 0 auto}
/* CX Pro / mode switch stays visually centered in the bar regardless of the
   left (History) and right (Theme, Home) icon groups' combined width. */
.studio-bar>.studio-brand-cluster{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:1;pointer-events:auto}
.studio-title{display:flex;align-items:center;gap:10px;min-width:0}
.studio-logo{width:30px;height:30px;border-radius:8px;object-fit:contain;background:transparent;padding:0;filter:brightness(1.2) contrast(1.05);box-shadow:none}
.studio[data-ps-theme="white"] .studio-logo{background:transparent;box-shadow:none;filter:contrast(1.05)}
.studio-title .st-name{font-size:14px;font-weight:600;color:var(--st-text);letter-spacing:.2px;line-height:1.1}
.studio-title .st-model{font-size:11px;color:var(--st-mute);margin-top:2px;letter-spacing:.3px}
.studio-new{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:transparent;border:1px solid var(--st-line-2);color:var(--st-dim);cursor:pointer;transition:.15s}
.studio-new:hover{background:var(--st-bg-2);color:var(--st-text)}
.studio-new:active{transform:scale(.94)}

/* Conversation area */
.studio .chat-area{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;padding:18px 14px 22px;display:flex;flex-direction:column;gap:18px;background:var(--st-bg);scroll-behavior:smooth;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.studio .chat-area::-webkit-scrollbar{width:0}
.studio .msg{max-width:100%;gap:6px}
.studio .msg.user{align-self:flex-end;align-items:flex-end;max-width:86%}
.studio .msg.ai{align-self:stretch;align-items:flex-start;max-width:100%}
.studio .bubble{padding:12px 14px;border-radius:16px;font-size:14.5px;line-height:1.55;border:none;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none;background:transparent;color:var(--st-text);white-space:pre-wrap;word-wrap:break-word}
.studio .msg.user .bubble{background:var(--st-bubble-user);color:var(--st-text);border:1px solid var(--st-line);border-bottom-right-radius:6px;box-shadow:none}
.studio .msg.ai .bubble{background:transparent;color:var(--st-text);border:none;padding-left:0;padding-right:0;border-bottom-left-radius:16px}
.studio .ai-avatar{width:26px;height:26px;border-radius:8px;background:transparent;color:var(--st-text);font-weight:700;font-size:11px;letter-spacing:.5px;display:inline-grid;place-items:center;margin-bottom:6px;border:1px solid var(--st-line-2);background-image:url('../assets/logo.png');background-size:18px 18px;background-repeat:no-repeat;background-position:center;text-indent:-9999px}
.studio[data-ps-theme="white"] .ai-avatar{background-color:transparent;filter:brightness(0)}
/* Always visible (not hover-only - there is no reliable hover on touch)
   but kept semi-transparent so it stays visually quiet until used. */
/* Frameless, icon-only: no box/frame/background - sits directly on the
   card, slightly smaller than the app-wide .msg-action-btn default. */
.studio .msg-actions{opacity:.8;gap:10px}
.studio .msg-action-btn{background:transparent;border:none;color:var(--st-dim);width:26px;height:26px;border-radius:8px}
.studio .msg-action-btn:hover{color:var(--st-text);background:var(--st-bg-2);opacity:1}
.studio .msg-action-btn .generation-action-icon{width:13px;height:13px}
.studio .msg-action-btn.is-playing{color:var(--accent)}
.studio .msg-action-report.is-sent{color:#22c55e;border-color:rgba(34,197,94,.4)}

/* Small, calm generation-failure notice - deliberately understated (no
   red, no warning iconography, no title) so it reads as a quiet system
   note inside the chat, not an alarming error. */
.msg-error .bubble.error-bubble{background:var(--surface-2);color:var(--text-dim);border-radius:14px;padding:9px 13px;font-size:13px;line-height:1.4}
.studio .msg-error .bubble.error-bubble{background:var(--st-bg-2);color:var(--st-dim)}

/* Pro Studio subscription-required card - a clean, theme-adaptive upgrade
   card (reads the same --st-* variables as the rest of Pro Studio, so it
   follows the Gray/White/Black toggle automatically). No gold/yellow -
   the accent is the app's own primary color, kept purely as the CTA. The
   model marquee reuses .ai-strip/.ai-chip verbatim (see
   renderSubscriptionRequiredCard) so it's visually secondary to the
   title/text/CTA above it, exactly like the Home screen's own strip. */
.pro-subscription-card{
  position:relative;min-width:240px;max-width:320px;padding:16px 16px 14px;border-radius:18px;
  background:var(--st-bg-2);border:1px solid var(--st-line-2);
  box-shadow:0 18px 40px -22px rgba(0,0,0,.5);overflow:hidden
}
.pro-subscription-title{position:relative;z-index:1;font-size:14.5px;font-weight:750;color:var(--st-text);margin-bottom:5px}
.pro-subscription-text{position:relative;z-index:1;font-size:12.5px;line-height:1.45;color:var(--st-dim);margin-bottom:12px}
.pro-subscription-cta{
  position:relative;z-index:1;display:block;width:100%;min-height:38px;border:0;border-radius:12px;cursor:pointer;
  background:var(--primary);color:#fff;font:inherit;font-size:13px;font-weight:750;
  letter-spacing:.2px;transition:transform .15s ease
}
.pro-subscription-cta:active{transform:scale(.97)}
.pro-subscription-models{position:relative;z-index:1;margin-top:12px}
.studio .typing,
.studio .typing span{display:none !important;opacity:0 !important;animation:none !important}

/* Input area — dark gray, rounded, minimal */
.studio .studio-input{flex:0 0 auto;position:relative;padding:10px 12px calc(12px + env(safe-area-inset-bottom));background:var(--st-bg);border-top:1px solid var(--st-line);backdrop-filter:none;-webkit-backdrop-filter:none}
.studio .studio-input-row{display:flex;align-items:flex-end;gap:6px;padding:8px 8px 8px 6px;border-radius:18px;background:var(--st-bg-2);border:1px solid var(--st-line-2);box-shadow:none}
.studio .sib{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;border:1px solid transparent;background:transparent;color:var(--st-dim);cursor:pointer;flex:0 0 auto;box-shadow:none;transition:.15s}
.studio .sib:hover{background:var(--st-line);color:var(--st-text)}
.studio .sib:active{transform:scale(.93)}
.studio .sib.send{background:var(--st-invert-bg);color:var(--st-invert-text);border:none;box-shadow:none}
.studio .sib.send:hover{background:var(--st-invert-bg);opacity:.88;color:var(--st-invert-text)}
.studio .studio-input textarea{flex:1;min-height:36px;max-height:160px;resize:none;background:transparent;border:none;outline:none;color:var(--st-text);font-size:15px;font-family:inherit;padding:9px 6px;line-height:1.45}
.studio .studio-input textarea::placeholder{color:var(--st-mute)}

/* When Pro Studio is the active view, neutralize background + give it the full screen feel */
html:has(.view[data-view="tools"].active),
body:has(.view[data-view="tools"].active),
body:has(.view[data-view="tools"].active) .app,
body:has(.view[data-view="tools"].active) .scroll,
body:has(.view[data-view="tools"].active) .view[data-view="tools"]{
  background:#202020 !important;
  color:#f3f3f3;
}
body:has(.view[data-view="tools"].active) .scroll{padding:0}
body:has(.view[data-view="tools"].active) .app{max-width:none}
.scroll.studio-mode{padding:0;background:#202020}
.view[data-view="tools"]{height:100%}
.view[data-view="tools"].active{display:flex;flex-direction:column}
.view[data-view="tools"] .studio{flex:1 1 auto;min-height:0}

/* Close button (modal) — minimal */
.modal-close{background:transparent;border:1px solid var(--st-line-2,rgba(255,255,255,.1));color:var(--text-dim);box-shadow:none}
.modal-close:hover{background:var(--surface);color:var(--text)}

/* ============================================================
   Pro Studio v2 — fixed 60px header, scroll body, fixed input
   Strict monochrome, ChatGPT/Claude-like
   ============================================================ */

/* Hide global topbar while inside Pro Studio (studio owns the header). */
body:has(.view[data-view="tools"].active) .topbar{display:none}
/* Hide bottom nav entirely inside Pro Studio (Home button in top bar instead). */
body:has(.view[data-view="tools"].active) .nav{display:none}
/* Studio fixed input no longer needs to clear bottom nav. */
.view[data-view="tools"].active .studio-input{padding-bottom:calc(12px + env(safe-area-inset-bottom)) !important}

/* SYLVEX brand in top bar: non-clickable, transparent logo */
.brand{cursor:default !important;background:transparent !important}
.brand:hover{background:transparent !important;transform:none !important}
.brand-logo-img{background:transparent !important;box-shadow:none !important;filter:brightness(1.2) !important;padding:0 !important}

/* Language code pill (replaces flags) */
.icon-btn.lang-code{font-weight:700;font-size:12px;letter-spacing:1px;text-transform:uppercase}
.lang-code-pill{display:inline-grid;place-items:center;min-width:30px;height:20px;padding:0 6px;border-radius:6px;background:var(--surface-2);color:var(--text);font-size:10.5px;font-weight:700;letter-spacing:1px;text-transform:uppercase}

/* Override studio surface to strict dark palette */
/* =====================================================
CSS-БЛОК: .view[data-view="tools"].active .studio
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.view[data-view="tools"].active .studio{
  --st-bg:#202020;--st-bg-2:#252525;--st-bg-3:#2c2c2c;--st-bg-4:#343434;
  --st-line:rgba(255,255,255,.06);--st-line-2:rgba(255,255,255,.10);
  --st-text:#F3F3F3;--st-dim:#8D8D92;--st-mute:#6b6b75;
  --st-bubble-user:#24262B;--st-bubble-ai:transparent;
  --st-border:rgba(255,255,255,.10);--st-border-strong:rgba(255,255,255,.16);
  --st-grid-line:rgba(255,255,255,.05);
  --st-accent:#5b8dff;--st-accent-2:#7ea3ff;--st-accent-bg:rgba(91,141,255,.16);--st-accent-text:#eaf0ff;
  --st-invert-bg:#F3F3F3;--st-invert-text:#202020;
  --st-logo-invert:1;
  --st-shadow:rgba(0,0,0,.45);
  --st-depth-1:inset 0 1px 0 rgba(255,255,255,.05),inset 0 -1px 0 rgba(0,0,0,.3),0 1px 2px rgba(0,0,0,.3);
  --st-depth-2:inset 0 1px 0 rgba(255,255,255,.04),0 10px 26px -12px rgba(0,0,0,.55);
  --st-depth-active:inset 0 1px 3px rgba(0,0,0,.4);
  background:#202020;
}

/* Pro Studio's own local theme (White/Black), independent of the app-wide
   light/dark appearance - cycled by the single studioThemeBtn button
   (SYLVEX.cycleStudioTheme in cabinet.js), read from [data-ps-theme] on
   .studio. Matches the exact specificity chain of the rule above (and of
   every other ".view[data-view=tools].active .studio*" override further
   down this file) so it reliably wins instead of being silently shadowed.
   "Gray" is simply the absence of [data-ps-theme] - the rule above,
   unchanged - so existing users see no difference until they press the
   new toggle. --border/--border-strong are pinned too, since a few
   Pro-Studio-scoped rules (e.g. .studio-top) still read those app-wide
   vars for their border color. */
.view[data-view="tools"].active .studio[data-ps-theme="white"]{
  --st-bg:#ffffff;--st-bg-2:#f4f4f6;--st-bg-3:#ebebef;--st-bg-4:#dfdfe4;
  --st-line:rgba(0,0,0,.08);--st-line-2:rgba(0,0,0,.13);
  --st-text:#14141a;--st-dim:#54545f;--st-mute:#8b8b96;
  --st-bubble-user:#eef1f7;--st-bubble-ai:transparent;
  --border:rgba(0,0,0,.10);--border-strong:rgba(0,0,0,.16);
  --st-border:rgba(0,0,0,.10);--st-border-strong:rgba(0,0,0,.16);
  --st-grid-line:rgba(20,20,26,.09);
  --st-accent:#2f6fed;--st-accent-2:#5b8dff;--st-accent-bg:rgba(47,111,237,.09);--st-accent-text:#ffffff;
  --st-invert-bg:#2f6fed;--st-invert-text:#ffffff;
  --st-logo-invert:0;
  --st-shadow:rgba(20,20,30,.14);
  --st-depth-1:inset 0 1px 0 rgba(255,255,255,.9),inset 0 -1px 0 rgba(20,20,30,.05),0 1px 2px rgba(20,20,30,.07);
  --st-depth-2:inset 0 1px 0 rgba(255,255,255,.75),0 12px 28px -14px rgba(20,20,30,.22);
  --st-depth-active:inset 0 1px 3px rgba(20,20,30,.10);
  background:#ffffff;
}
.view[data-view="tools"].active .studio[data-ps-theme="black"]{
  --st-bg:#000000;--st-bg-2:#0c0c0d;--st-bg-3:#141415;--st-bg-4:#1c1c1e;
  --st-line:rgba(255,255,255,.09);--st-line-2:rgba(255,255,255,.14);
  --st-text:#f5f5f7;--st-dim:#9a9aa2;--st-mute:#6f6f78;
  --st-bubble-user:#161617;--st-bubble-ai:transparent;
  --border:rgba(255,255,255,.10);--border-strong:rgba(255,255,255,.16);
  --st-border:rgba(255,255,255,.10);--st-border-strong:rgba(255,255,255,.16);
  --st-grid-line:rgba(255,255,255,.09);
  --st-accent:#6d9bff;--st-accent-2:#89b0ff;--st-accent-bg:rgba(109,155,255,.18);--st-accent-text:#f3f6ff;
  --st-invert-bg:#f5f5f7;--st-invert-text:#000000;
  --st-logo-invert:1;
  --st-shadow:rgba(0,0,0,.6);
  --st-depth-1:inset 0 1px 0 rgba(255,255,255,.06),inset 0 -1px 0 rgba(0,0,0,.5),0 1px 3px rgba(0,0,0,.55);
  --st-depth-2:inset 0 1px 0 rgba(255,255,255,.05),0 12px 30px -12px rgba(0,0,0,.7);
  --st-depth-active:inset 0 1px 4px rgba(0,0,0,.6);
  background:#000000;
}

/* Header — fixed 60px */
/* =====================================================
CSS-БЛОК: .view[data-view="tools"].active .studio-bar
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.view[data-view="tools"].active .studio-bar{
  position:relative;height:60px;flex:0 0 60px;
  display:flex;justify-content:space-between;align-items:center;
  padding:0 12px;
  background:color-mix(in srgb, var(--st-bg) 92%, transparent);
  backdrop-filter:blur(20px) saturate(140%);-webkit-backdrop-filter:blur(20px) saturate(140%);
  border-bottom:1px solid var(--st-line);
  z-index:6;
}
/* =====================================================
CSS-БЛОК: .sb-icon
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.sb-icon{
  width:40px;height:40px;border-radius:12px;display:grid;place-items:center;
  background:transparent;border:none;color:var(--st-text);cursor:pointer;transition:.15s;
}
.sb-icon:hover{background:var(--st-bg-2)}
.sb-icon:active{transform:scale(.94)}
/* =====================================================
CSS-БЛОК: .sb-brand
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.sb-brand{
  justify-self:center;display:inline-flex;align-items:center;gap:8px;
  padding:7px 12px 7px 7px;border-radius:999px;
  background:var(--st-bg-2);border:1px solid var(--st-line-2);
  color:var(--st-text);cursor:pointer;font-family:inherit;
  transition:.15s;
}
.sb-brand:hover{background:var(--st-bg-3)}
.sb-brand:active{transform:scale(.97)}
.sb-brand-logo{width:22px;height:22px;border-radius:6px;object-fit:contain;background:transparent;padding:0;filter:brightness(1.2)}
[data-theme="light"] .sb-brand-logo{filter:contrast(1.05)}
.sb-brand-name{font-size:13px;font-weight:600;letter-spacing:1.5px}
.sb-brand-chv{color:var(--st-dim);transition:transform .2s}
.sb-brand[aria-expanded="true"] .sb-brand-chv{transform:rotate(180deg)}

/* Model dropdown attached to brand pill */
/* =====================================================
CSS-БЛОК: .view[data-view="tools"].active .model-pop
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.view[data-view="tools"].active .model-pop{
  position:absolute;top:56px;left:50%;transform:translateX(-50%);
  min-width:230px;padding:6px;border-radius:14px;
  background:var(--st-bg-2);border:1px solid var(--st-line-2);
  box-shadow:0 24px 60px -12px rgba(0,0,0,.85);
  z-index:25;display:none;
}
.view[data-view="tools"].active .model-pop.show{display:block;animation:fadeUp .18s ease both}
/* =====================================================
CSS-БЛОК: .view[data-view="tools"].active .model-pop button
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.view[data-view="tools"].active .model-pop button{
  display:flex;width:100%;align-items:center;gap:10px;padding:10px 12px;
  background:transparent;border:none;color:var(--st-text);font-family:inherit;
  font-size:13px;cursor:pointer;border-radius:10px;text-align:left;
}
.view[data-view="tools"].active .model-pop button:hover{background:var(--st-line)}
.view[data-view="tools"].active .model-pop button.sel{background:var(--st-line-2)}
/* =====================================================
CSS-БЛОК: .view[data-view="tools"].active .model-pop .mp-div
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.view[data-view="tools"].active .model-pop .mp-div{
  height:1px;background:var(--st-line);margin:6px 8px;
}
/* =====================================================
CSS-БЛОК: .view[data-view="tools"].active .model-pop .mp-label
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.view[data-view="tools"].active .model-pop .mp-label{
  padding:6px 12px 4px;font-size:10px;letter-spacing:1.2px;
  color:var(--st-mute);text-transform:uppercase;
}

/* Layout: header + scroll chat + fixed input, with room for bottom nav */
/* =====================================================
CSS-БЛОК: .view[data-view="tools"].active .studio
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.view[data-view="tools"].active .studio{
  display:flex;flex-direction:column;height:100vh;
}
/* =====================================================
CSS-БЛОК: .view[data-view="tools"].active .chat-area
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.view[data-view="tools"].active .chat-area{
  flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;
  padding:18px 16px 24px;display:flex;flex-direction:column;gap:18px;
  background:#202020;scroll-behavior:smooth;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
}

/* User/AI bubbles */
.view[data-view="tools"].active .msg.user{align-self:flex-end;align-items:flex-end;max-width:80%}
.view[data-view="tools"].active .msg.ai{align-self:flex-start;align-items:flex-start;max-width:88%}
/* =====================================================
CSS-БЛОК: .view[data-view="tools"].active .msg.user .bubble
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.view[data-view="tools"].active .msg.user .bubble{
  background:var(--st-bubble-user);color:var(--st-text);border:1px solid var(--st-line-2);
  border-radius:18px;border-bottom-right-radius:6px;padding:11px 14px;
}

/* =====================================================
CSS-БЛОК: .view[data-view="tools"].active .msg.ai .bubble
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.view[data-view="tools"].active .msg.ai .bubble{
  background:transparent !important;
  color:var(--st-text);
  border:0 !important;
  border-radius:0;
  padding:0;
  box-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

/* Fixed input — sits above bottom nav (nav ≈ 76px including safe area) */
/* =====================================================
CSS-БЛОК: .view[data-view="tools"].active .studio-input
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.view[data-view="tools"].active .studio-input{
  flex:0 0 auto;padding:10px 12px calc(86px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg,color-mix(in srgb, var(--st-bg) 0%, transparent),var(--st-bg) 30%);
  border-top:1px solid var(--st-line);
}
/* Keyboard offset: when on-screen keyboard opens, lift only the studio input
   above it and completely hide the fixed bottom nav until the keyboard closes. */
:root{--kb:0px}
/* =====================================================
CSS-БЛОК: body.kb-open .view[data-view="tools"].active .studio-input
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
:is(body.device-mobile,body.device-tablet).composer-input-window-open{overflow:hidden!important}
:is(body.device-mobile,body.device-tablet) .view[data-view="tools"].active .studio-input.composer-input-window{
    position:fixed!important;
    inset:0!important;
    z-index:100040!important;
    width:100vw!important;
    height:100dvh!important;
    max-height:100dvh!important;
    box-sizing:border-box!important;
    margin:0!important;
    padding:calc(env(safe-area-inset-top,0px) + 10px) 10px calc(env(safe-area-inset-bottom,0px) + 10px)!important;
    border:0!important;
    border-radius:0!important;
    background:var(--st-bg, #202020)!important;
    transform:none!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
}
:is(body.device-mobile,body.device-tablet) .studio-input.composer-input-window .studio-mode-tabs{flex:0 0 auto}
:is(body.device-mobile,body.device-tablet) .studio-input.composer-input-window .studio-video-panel{flex:1 0 auto;margin-bottom:8px}
:is(body.device-mobile,body.device-tablet) .studio-input.composer-input-window .studio-prompt-column{scroll-margin-bottom:90px}
:is(body.device-mobile,body.device-tablet) .studio-input.composer-input-window .studio-prompt-column textarea{min-height:124px!important;padding-right:0!important}
:is(body.device-mobile,body.device-tablet) .studio-input.composer-input-window .mobile-keyboard-close{display:grid}
:is(body.device-mobile,body.device-tablet) .studio-input.composer-input-window .studio-control-row{
    position:sticky;
    bottom:0;
    z-index:12;
    padding:8px 0 calc(env(safe-area-inset-bottom,0px) + 4px);
    background:linear-gradient(180deg,color-mix(in srgb, var(--st-bg, #202020) 0%, transparent),var(--st-bg, #202020) 28%);
}
:is(body.device-mobile,body.device-tablet) .studio-input.composer-input-window textarea:not(:placeholder-shown)~.text-mic-floating{
    opacity:.28;
    background:rgba(32,32,32,.18);
}
:is(body.device-mobile,body.device-tablet) .studio-input.composer-input-window textarea:not(:placeholder-shown)+.mobile-keyboard-close{
    opacity:.28;
    border-color:transparent;
    background:color-mix(in srgb, var(--st-bg, #202020) 18%, transparent);
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
}
/* =====================================================
CSS-БЛОК: body.kb-open .view[data-view="tools"].active .chat-area
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
:is(body.device-mobile,body.device-tablet).kb-open .view[data-view="tools"].active .chat-area{
  padding-bottom:calc(var(--kb) + 24px);
}
/* =====================================================
CSS-БЛОК: body.kb-open .nav
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
:is(body.device-mobile,body.device-tablet).kb-open .nav{
  display:none;
}
/* =====================================================
CSS-БЛОК: .view[data-view="tools"].active .studio-input-row
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.view[data-view="tools"].active .studio-input-row{
  display:flex;align-items:flex-end;gap:4px;
  padding:6px 6px 6px 6px;border-radius:22px;
  background:#141518;border:1px solid var(--st-line-2);
}
/* =====================================================
CSS-БЛОК: .view[data-view="tools"].active .studio-input textarea
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.view[data-view="tools"].active .studio-input textarea{
  flex:1;min-height:38px;max-height:160px;resize:none;background:transparent;
  border:none;outline:none;color:var(--st-text);font-size:15px;font-family:inherit;
  padding:9px 8px;line-height:1.45;
}
.view[data-view="tools"].active .studio-input textarea::placeholder{color:var(--st-mute)}
/* =====================================================
CSS-БЛОК: .view[data-view="tools"].active .sib
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.view[data-view="tools"].active .sib{
  width:38px;height:38px;border-radius:12px;display:grid;place-items:center;
  background:transparent;border:1px solid transparent;color:var(--st-dim);
  cursor:pointer;flex:0 0 auto;transition:.15s;box-shadow:none;
}
.view[data-view="tools"].active .sib:hover{background:var(--st-line);color:var(--st-text)}
.view[data-view="tools"].active .sib:active{transform:scale(.92)}
.view[data-view="tools"].active .sib.send{background:var(--st-invert-bg);color:var(--st-invert-text);border:none}
.view[data-view="tools"].active .sib.send:hover{background:var(--st-invert-bg);color:var(--st-invert-text);opacity:.88}

/* =====================================================
CSS-БЛОК: .view[data-view="tools"].active .studio-video-composer
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.view[data-view="tools"].active .studio-video-composer{
  padding:8px 8px calc(86px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg,color-mix(in srgb, var(--st-bg) 0%, transparent),var(--st-bg) 22%);
  border-top:0;
}
/* =====================================================
CSS-БЛОК: .studio-mode-tabs
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.studio-mode-tabs{
  width:100%;display:flex;align-items:center;gap:10px;overflow-x:auto;
  scrollbar-width:none;padding:0;margin:0 0 8px;
}
.studio-mode-tabs::-webkit-scrollbar{display:none}
/* =====================================================
CSS-БЛОК: .studio-mini-tabs,.studio-mode-tab
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.studio-mini-tabs,.studio-mode-tab{
  flex:0 0 auto;display:flex;align-items:center;border-radius:999px;
  background:#252525;border:1px solid rgba(255,255,255,.08);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.view[data-view="tools"].active .studio-mini-tabs,
.view[data-view="tools"].active .studio-mode-tab{
  background:var(--st-bg-2);border:1px solid var(--st-border);
  box-shadow:var(--st-depth-1);
}
.studio-mini-tabs{gap:4px;padding:5px}
/* =====================================================
CSS-БЛОК: .studio-mini-tab
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.studio-mini-tab{
  width:52px;height:44px;border:0;border-radius:999px;background:transparent;
  color:#d8d8d8;display:grid;place-items:center;cursor:pointer;
}
/* =====================================================
CSS-БЛОК: .sr-only
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.sr-only{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0,0,0,0) !important;
  white-space:nowrap !important;
  border:0 !important;
}
.studio-emoji-icon{font-size:19px;line-height:1;display:inline-grid;place-items:center}
.studio-mini-tab.active{background:#f4f4f4;color:#111}
.view[data-view="tools"].active .studio-mini-tab{color:var(--st-dim)}
.view[data-view="tools"].active .studio-mini-tab.active{background:var(--st-invert-bg);color:var(--st-invert-text)}
.studio-mini-tab:active,.studio-mode-tab:active,.studio-frame-card:active,.studio-select-pill:active,.vgen-btn:active,.vgen-upload-row:active{transform:scale(.98)}
/* =====================================================
CSS-БЛОК: .studio-mode-tab
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.studio-mode-tab{
  height:52px;gap:8px;padding:0 18px;border:0;color:#b8b8b8;
  font-family:inherit;font-size:15px;font-weight:700;cursor:pointer;
}
.studio-mode-tab.active{background:#4a4a4a;color:#f4f4f4}
.studio-mode-tab svg{flex:0 0 auto;color:currentColor}
.view[data-view="tools"].active .studio-mode-tab{color:var(--st-dim)}
.view[data-view="tools"].active .studio-mode-tab.active{background:var(--st-bg-4);color:var(--st-text)}
.studio-video-composer[data-composer-mode="video"] .image-only{display:none !important}
.studio-video-composer[data-composer-mode="video"] .music-only{display:none !important}
.studio-video-composer[data-composer-mode="video"] .voice-only{display:none !important}
.studio-video-composer[data-composer-mode="image"] .video-only{display:none !important}
.studio-video-composer[data-composer-mode="image"] .music-only{display:none !important}
.studio-video-composer[data-composer-mode="image"] .voice-only{display:none !important}
.studio-video-composer[data-composer-mode="music"] .video-only,
.studio-video-composer[data-composer-mode="music"] .image-only,
.studio-video-composer[data-composer-mode="music"] .image-video-only{display:none !important}
.studio-video-composer[data-composer-mode="music"] .voice-only.studio-mode-tab{display:none !important}
.studio-video-composer[data-composer-mode="voice"] .video-only,
.studio-video-composer[data-composer-mode="voice"] .image-only,
.studio-video-composer[data-composer-mode="voice"] .image-video-only{display:none !important}
.studio-video-composer[data-composer-mode="voice"] .music-only.studio-mode-tab{display:none !important}
.studio-video-composer[data-composer-mode="image"] .image-only.studio-mode-tab{display:flex}
.studio-video-composer[data-composer-mode="image"] .image-only.studio-select-pill{display:flex}
.studio-video-composer[data-composer-mode="music"] .music-only.studio-mode-tab{display:flex}
.studio-video-composer[data-composer-mode="music"] .music-only.studio-select-pill{display:flex}
.studio-video-composer[data-composer-mode="music"] .studio-video-panel{grid-template-columns:1fr;padding:28px 24px 24px}
.studio-video-composer[data-composer-mode="music"] .studio-prompt-column{border-left:0;padding-left:0}
.studio-video-composer[data-composer-mode="voice"] .voice-only.studio-mode-tab{display:flex}
.studio-video-composer[data-composer-mode="voice"] .voice-only.studio-select-pill{display:flex}
.studio-video-composer[data-composer-mode="voice"] .studio-video-panel{
  grid-template-columns:clamp(220px,28vw,430px) minmax(0,1fr);
  padding:18px 24px 24px;
}
.studio-video-composer[data-composer-mode="voice"][data-voice-workspace="dialogue"] .studio-video-panel{
  grid-template-columns:clamp(460px,42vw,600px) minmax(0,1fr);
}
.studio-video-composer[data-composer-mode="voice"] .studio-prompt-column{
  border-left:1px solid rgba(255,255,255,.10);
  padding-left:24px;
}
.studio-video-composer[data-composer-mode="voice"] .voice-tool-panel{display:grid}
.studio-video-composer[data-composer-mode="voice"] .studio-divider{display:none}

/* =====================================================
СТИЛИ ОСНОВНОЙ ПАНЕЛИ «ОЗВУЧКА»
Повторяет структуру из HTML-кода: две кнопки сверху и строка загрузки снизу.
Каждая кнопка открывает свой раздел: создание голоса, список голосов или загрузку файла.
===================================================== */
.studio-voice-full{
  display:none;
  flex-direction:column;
  gap:8px;
  min-width:0;
}
.studio-video-composer[data-composer-mode="voice"] .studio-voice-full{display:flex}
.studio-video-composer[data-composer-mode="voice"][data-voice-workspace="voiceover"] .dialogue-only{display:none!important}
.studio-video-composer[data-composer-mode="voice"][data-voice-workspace="dialogue"] .voiceover-only{display:none!important}
.studio-video-composer[data-composer-mode="voice"][data-voice-workspace="dialogue"] .dialogue-only{display:block!important}
.vgen-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}
.vgen-btn{
  min-height:152px;
  border:0;
  border-radius:16px;
  background:#2c2c2c;
  color:#d7d7d7;
  display:flex;
  flex-direction:column-reverse;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  padding:14px 12px 16px;
  text-align:center;
  font:inherit;
  cursor:pointer;
}
.vgen-btn.active{border-color:rgba(255,255,255,.28);background:#343434}
.vgen-btn-ico{display:grid;place-items:center;color:#d8d8d8;flex:0 0 auto}
.view[data-view="tools"].active .vgen-btn{
  background:var(--st-bg-3);color:var(--st-dim);box-shadow:var(--st-depth-1);
}
.view[data-view="tools"].active .vgen-btn.active{background:var(--st-bg-4);border-color:var(--st-line-2)}
.view[data-view="tools"].active .vgen-btn-ico{color:var(--st-dim)}
.vgen-btn-lbl{
  align-self:center;
  font-size:13px;
  line-height:1.15;
  font-weight:500;
}
.voice-list-button-avatar{
  width:42px;height:42px;border-radius:50%;overflow:hidden;display:grid;place-items:center;
  background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.2);
}
.voice-list-button-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.voice-list-button-avatar.is-generated{background:linear-gradient(135deg,var(--voice-c1),var(--voice-c2) 52%,var(--voice-c3))}
.voice-list-button-avatar span{font-size:10px;font-weight:600;letter-spacing:.4px}
#voiceListButton .vgen-btn-lbl{max-width:100%;font-weight:400;overflow-wrap:anywhere;white-space:normal}
#voiceListButton.has-selected-voice{
  position:relative;isolation:isolate;overflow:hidden;background-size:cover;background-position:center;
}
#voiceListButton.has-selected-voice:not(.has-selected-voice-image){
  background:linear-gradient(145deg,var(--voice-c1),var(--voice-c2) 52%,var(--voice-c3));
}
#voiceListButton.has-selected-voice::after{
  content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,transparent 25%,rgba(0,0,0,.68));pointer-events:none;
}
#voiceListButton.has-selected-voice .voice-list-button-avatar{
  position:absolute;left:9px;top:9px;width:34px;height:34px;border:2px solid rgba(255,255,255,.82);box-shadow:0 4px 14px rgba(0,0,0,.38);
}
#voiceListButton.has-selected-voice .vgen-btn-lbl{color:#fff;text-shadow:0 1px 5px rgba(0,0,0,.75);z-index:1}
.voice-list-card-play{display:none}
#voiceListButton.has-selected-voice .voice-list-card-play{
  display:grid;place-items:center;position:absolute;right:9px;top:9px;z-index:3;
  width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,.62);
  background:rgba(12,12,12,.62);color:#fff;font-size:11px;font-weight:800;
  box-shadow:0 4px 14px rgba(0,0,0,.34);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
#voiceListButton.has-selected-voice .voice-list-card-play:active{transform:scale(.92)}
#voiceListButton.has-selected-voice .voice-list-card-play.is-loading{pointer-events:none}
.vgen-upload-row{
  min-height:92px;
  border:0;
  border-radius:16px;
  background:#2c2c2c;
  color:#f0f0f0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:12px 14px;
  font-family:inherit;
  font-size:14px;
  cursor:pointer;
}
.vgen-upload-row.active{border-color:rgba(255,255,255,.26)}
.vgen-upload-row.has-voice-upload{
  position:relative;
  overflow:hidden;
}
.vgen-upload-lbl{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:13px;
  font-weight:800;
}
.voice-upload-control-badge{
  position:absolute;
  left:10px;
  top:10px;
  z-index:3;
  min-width:34px;
  height:24px;
  padding:0 8px;
  border-radius:999px;
  display:grid;
  place-items:center;
  background:rgba(22,119,255,.86);
  color:#fff;
  font-size:11px;
  font-weight:900;
  box-shadow:0 6px 18px rgba(0,0,0,.22);
}
.vgen-upload-icons{
  display:flex;
  align-items:center;
  gap:4px;
}
.vgen-uico{
  width:34px;
  height:34px;
  border-radius:50%;
  background:#444;
  border:3px solid #3a3a3a;
  display:grid;
  place-items:center;
  color:#e6e6e6;
  margin-left:-8px;
}
.vgen-uico:first-child{
  margin-left:0;
}
.voice-tool-panel{
  grid-column:1 / -1;
  display:none;
  grid-template-columns:1fr;
  gap:8px;
  width:100%;
}
.voice-tool-panel[hidden]{display:none!important}
.voice-workspace-base{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}
.voice-workspace-tile,.voice-workspace-upload{
  min-width:0;
  min-height:48px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:14px;
  background:#2b2b2b;
  color:#f4f4f4;
  font:inherit;
  font-size:13px;
  font-weight:800;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:0 13px;
  cursor:pointer;
}
.view[data-view="tools"].active .voice-workspace-tile,
.view[data-view="tools"].active .voice-workspace-upload{
  background:var(--st-bg-3);color:var(--st-text);border:1px solid var(--st-line-2);
  box-shadow:var(--st-depth-1);
}
.voice-workspace-tile.active,.voice-workspace-upload.active{border-color:rgba(255,255,255,.28);background:#333}
.voice-workspace-upload{
  grid-column:1 / -1;
  min-height:34px;
  border-radius:8px;
}
.voice-workspace-upload b{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.voice-workspace-upload span{display:flex;align-items:center;gap:5px;flex:0 0 auto}
.voice-workspace-upload i{
  width:27px;
  height:27px;
  border-radius:50%;
  background:#4b4b4b;
  display:grid;
  place-items:center;
  font-style:normal;
  color:#dcdcdc;
}
.voice-workspace-sheet{
  border:1px solid rgba(255,255,255,.16);
  border-radius:18px;
  background:rgba(17,17,17,.92);
  box-shadow:0 22px 54px -28px rgba(0,0,0,.95);
  padding:14px;
  color:#f4f4f4;
}
.voice-sheet-title{font-size:12px;font-weight:900;margin-bottom:6px;color:#ececec}
.voice-list-sheet{
  width:min(68vw,320px);
  max-height:42vh;
  overflow:auto;
  padding:0;
}
.voice-list-rows{display:flex;flex-direction:column;gap:5px;padding:10px}
.voice-list-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) 28px;
  align-items:center;
  min-height:25px;
  border-radius:4px;
  overflow:hidden;
  background:#424242;
}
.voice-list-row.active{outline:1px solid rgba(255,255,255,.45)}
.voice-list-row button{
  min-width:0;
  height:100%;
  border:0;
  background:transparent;
  color:#f6f6f6;
  font:inherit;
  font-size:12px;
  font-weight:900;
  text-align:left;
  padding:0 8px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.voice-list-row .voice-list-play{
  text-align:center;
  padding:0;
  color:#fff;
}
.voice-style-rows{
  display:flex;
  flex-direction:column;
  gap:7px;
  max-height:calc(74vh - 70px);
  overflow-y:auto;
  padding:0 2px 4px;
  -webkit-overflow-scrolling:touch;
}
.voice-style-row{
  position:relative;
  display:grid;
  grid-template-columns:40px minmax(0,1fr) 22px 34px;
  align-items:center;
  gap:10px;
  min-height:46px;
  padding:6px 8px;
  border-radius:14px;
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.08);
  color:#f4f4f4;
  cursor:pointer;
}
.voice-style-row.selected{
  border-color:rgba(255,255,255,.72);
  background:rgba(255,255,255,.12);
}
.voice-style-row-avatar{
  width:40px;
  height:40px;
  border-radius:50%;
  display:grid;
  place-items:center;
  overflow:hidden;
  background:rgba(255,255,255,.08);
  color:#fff;
}
.voice-style-row-avatar.is-generated{
  position:relative;
  background:
    radial-gradient(circle at 22% 18%,color-mix(in srgb,var(--voice-c1) 88%,transparent),transparent 58%),
    radial-gradient(circle at 82% 26%,color-mix(in srgb,var(--voice-c2) 88%,transparent),transparent 62%),
    radial-gradient(circle at 48% 92%,color-mix(in srgb,var(--voice-c3) 92%,transparent),transparent 64%),
    rgba(255,255,255,.13);
  border:1px solid rgba(255,255,255,.34);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.38),0 6px 18px rgba(0,0,0,.18);
  backdrop-filter:blur(14px) saturate(145%);
  -webkit-backdrop-filter:blur(14px) saturate(145%);
}
.voice-style-row-avatar.is-generated::after{content:"";position:absolute;inset:1px;border-radius:inherit;background:linear-gradient(145deg,rgba(255,255,255,.34),rgba(255,255,255,.04) 48%,rgba(255,255,255,.13));opacity:.5;pointer-events:none}
.voice-generated-initials{position:relative;z-index:1;font-size:10px;font-weight:950;letter-spacing:.6px;color:rgba(255,255,255,.94);text-shadow:0 1px 5px rgba(0,0,0,.38)}
.voice-style-row-avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.voice-style-row-name{
  min-width:0;
  overflow:hidden;
  white-space:nowrap;
  font-size:13px;
  font-weight:400;
}
.voice-style-row-name > span{display:block;white-space:nowrap}
.voice-style-row-name > span[aria-hidden="true"]{display:none}
.voice-style-row-copy{display:flex;flex-direction:column;min-width:0;gap:2px;overflow:hidden}
.voice-style-row-copy small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:rgba(255,255,255,.58);font-size:10px;font-weight:600}
.voice-style-row-check{
  color:#fff;
  font-size:13px;
  font-weight:900;
  text-align:center;
}
.voice-style-row-play{
  width:30px;
  height:30px;
  border:0;
  border-radius:999px;
  background:rgba(255,255,255,.10);
  color:#fff;
  display:grid;
  place-items:center;
  font:inherit;
  font-size:11px;
  font-weight:900;
  cursor:pointer;
}
.voice-preview-loading-dot{
  width:9px;height:9px;border-radius:50%;background:#fff;display:block;
  animation:voicePreviewPulse .8s ease-in-out infinite alternate;
}
@keyframes voicePreviewPulse{
  from{opacity:.28;transform:scale(.7);box-shadow:0 0 0 0 rgba(255,255,255,.2)}
  to{opacity:1;transform:scale(1);box-shadow:0 0 0 5px rgba(255,255,255,0)}
}
.voice-style-row .visual-delete-btn{
  left:auto;
  right:42px;
  top:50%;
  transform:translateY(-50%);
  width:18px;
  height:18px;
  font-size:13px;
}
.voice-tool-panel.voice-list-open{
  position:fixed;
  inset:0;
  z-index:999999;
  display:flex !important;
  align-items:flex-end;
  justify-content:center;
  padding:0;
  background:rgba(0,0,0,.62);
}
.voice-tool-panel.voice-list-open[hidden]{display:none!important}
.voice-tool-panel.voice-list-open .voice-style-panel-card{
  width:100%;
  max-height:74vh;
}
@media (min-width:641px){
  .voice-tool-panel.voice-list-open{
    align-items:center;
    padding:calc(18px + env(safe-area-inset-top)) 18px calc(18px + env(safe-area-inset-bottom));
    background:rgba(0,0,0,.56);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
  }
  .voice-tool-panel.voice-list-open .voice-style-panel-card{
    width:min(560px,calc(100vw - 36px));
    max-height:min(76vh,680px);
    border-radius:24px;
    padding:14px;
    background:rgba(18,18,24,.88);
    border:1px solid rgba(255,255,255,.10);
    box-shadow:0 28px 90px rgba(0,0,0,.72);
    backdrop-filter:blur(22px) saturate(140%);
    -webkit-backdrop-filter:blur(22px) saturate(140%);
  }
  .voice-style-rows{
    max-height:calc(min(76vh,680px) - 70px);
  }
}
@media (max-width:640px){
  .voice-tool-panel.voice-list-open .voice-style-panel-card{width:100vw;max-width:none;padding-left:8px;padding-right:8px}
  .voice-style-row{grid-template-columns:42px minmax(0,1fr) 18px 32px;gap:7px;padding:6px;min-height:52px}
  .voice-style-row-avatar{width:42px;height:42px}
  .voice-style-row-name.is-marquee{display:flex;width:max-content;max-width:none;overflow:visible;animation:voiceNameMarquee 9s linear infinite}
  .voice-style-row-name.is-marquee > span{display:block;flex:none;padding-right:32px}
  .voice-style-row-name.is-marquee > span[aria-hidden="true"]{display:block}
}
@keyframes voiceNameMarquee{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}
.voice-tool-panel.voice-create-open{
  position:fixed;
  inset:0;
  z-index:999998;
  display:flex!important;
  align-items:center;
  justify-content:center;
  padding:18px;
  background:rgba(0,0,0,.38);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.voice-tool-panel.voice-create-open[hidden]{display:none!important}
.voice-tool-panel.voice-create-open .voice-create-sheet{
  position:relative;
  width:min(92vw,520px);
  height:min(78vh,680px);
  max-width:none;
  margin:0;
  border-radius:26px;
  background:rgba(18,18,20,.88);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 28px 90px rgba(0,0,0,.75);
  backdrop-filter:blur(22px) saturate(140%);
  -webkit-backdrop-filter:blur(22px) saturate(140%);
  overflow:hidden auto;
  padding:52px 14px 14px;
}
.voice-tool-panel.voice-upload-open{
  position:fixed;
  inset:0;
  z-index:999998;
  display:flex!important;
  align-items:center;
  justify-content:center;
  padding:18px;
  background:rgba(0,0,0,.38);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.voice-tool-panel.voice-upload-open[hidden]{display:none!important}
.voice-tool-panel.voice-upload-open .voice-upload-sheet{
  position:relative;
  width:min(92vw,520px);
  height:min(78vh,680px);
  max-width:none;
  margin:0;
  border-radius:26px;
  background:rgba(18,18,20,.88);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 28px 90px rgba(0,0,0,.75);
  backdrop-filter:blur(22px) saturate(140%);
  -webkit-backdrop-filter:blur(22px) saturate(140%);
  overflow:hidden auto;
  padding:52px 14px 14px;
}
.voice-tool-panel.voice-upload-open .voice-upload-head{
  margin:-52px -14px 14px;
  min-height:52px;
  padding:9px 56px 9px 18px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.voice-tool-panel.voice-upload-open .voice-upload-head h3{
  margin:0;
  color:#f3f3f3;
  font-size:14px;
  font-weight:800;
  line-height:1.15;
}
.voice-tool-panel.voice-upload-open .voice-upload-head p{
  display:none;
}
.voice-upload-close{
  z-index:2;
}
.voice-tool-panel.voice-create-open .voice-create-head{
  margin:-52px -14px 14px;
  min-height:52px;
  padding:9px 56px 9px 18px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.voice-tool-panel.voice-create-open .voice-create-head h3{
  margin:0;
  color:#f3f3f3;
  font-size:14px;
  font-weight:800;
  line-height:1.15;
}
.voice-tool-panel.voice-create-open .voice-create-head p{
  display:none;
}
.voice-create-close{
  z-index:2;
}
.voice-tool-panel.voice-create-open .voice-create-grid{
  grid-template-columns:minmax(0,1fr) 132px;
  gap:12px;
}
.voice-clone-field,.voice-select-btn,.voice-param-number{
  width:100%;
  min-height:44px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:14px;
  background:rgba(255,255,255,.07);
  color:#f4f4f4;
  font:inherit;
  outline:0;
  transition:border-color .18s ease,background .18s ease,box-shadow .18s ease;
}
.voice-clone-field{
  padding:0 13px;
  font-size:13px;
  font-weight:700;
}
.voice-clone-field:focus,.voice-select.open .voice-select-btn,.voice-param-number:focus{
  border-color:rgba(59,130,246,.58);
  background:rgba(255,255,255,.095);
  box-shadow:0 0 0 3px rgba(59,130,246,.16);
}
.voice-select{
  position:relative;
  width:100%;
}
.voice-select-btn{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto 18px;
  align-items:center;
  gap:8px;
  padding:0 12px;
  cursor:pointer;
  text-align:left;
}
.voice-select-btn span{
  color:#9d9d9d;
  font-size:10px;
  font-weight:800;
}
.voice-select-btn b{
  color:#f4f4f4;
  font-size:13px;
  line-height:1;
  white-space:nowrap;
}
.voice-select-btn i{
  color:#cfcfcf;
  font-style:normal;
  transition:transform .18s ease;
}
.voice-select.open .voice-select-btn i{transform:rotate(180deg)}
.voice-select-menu{
  position:absolute;
  left:0;
  right:0;
  top:calc(100% + 6px);
  z-index:4;
  display:none;
  padding:6px;
  border-radius:14px;
  background:#242424;
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 18px 44px rgba(0,0,0,.48);
}
.voice-select.open .voice-select-menu{display:block}
.voice-select-menu button{
  width:100%;
  min-height:34px;
  border:0;
  border-radius:10px;
  background:transparent;
  color:#e8e8e8;
  font:inherit;
  font-size:12px;
  font-weight:800;
  text-align:left;
  padding:0 10px;
  cursor:pointer;
}
.voice-select-menu button.active,.voice-select-menu button:hover{
  background:rgba(59,130,246,.22);
}
.voice-style-groups{
  max-height:calc(74vh - 70px);
  overflow-y:auto;
  padding:0 2px 4px;
  -webkit-overflow-scrolling:touch;
}
.voice-style-group{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.voice-style-group + .voice-style-group{
  margin-top:16px;
}
.voice-style-group-title{
  color:rgba(255,255,255,.72);
  font-size:12px;
  font-weight:900;
  letter-spacing:.04em;
  text-transform:uppercase;
  padding:0 2px;
}
.voice-style-grid{
  max-height:none!important;
  overflow:visible!important;
  padding:0!important;
}
.voice-style-card{
  min-width:0;
}
.voice-style-thumb{
  position:relative;
}
.voice-style-play{
  position:absolute;
  right:8px;
  bottom:8px;
  width:30px;
  height:30px;
  border:0;
  border-radius:999px;
  background:rgba(0,0,0,.54);
  color:#fff;
  display:grid;
  place-items:center;
  font:inherit;
  font-size:12px;
  font-weight:900;
  cursor:pointer;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.voice-style-play:disabled{
  opacity:.6;
  cursor:wait;
}
.voice-create-sheet,.voice-upload-sheet{
  width:100%;
  max-width:520px;
  margin:2px auto 0;
}
.voice-create-head h3,.voice-upload-sheet h3{margin:0 0 5px;font-size:18px;line-height:1.1}
.voice-create-head p,.voice-upload-sheet p{margin:0 0 13px;color:#b8b8b8;font-size:11px;line-height:1.35;max-width:330px}
.voice-create-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(120px,.8fr);
  gap:12px;
}
.voice-create-fields{display:flex;flex-direction:column;gap:10px}
.voice-clone-profile-row{
  display:grid;
  grid-template-columns:82px minmax(0,1fr);
  gap:10px;
  align-items:stretch;
}
.voice-clone-main-fields{
  display:flex;
  flex-direction:column;
  gap:10px;
  min-width:0;
}
.voice-clone-avatar-picker{
  width:82px;
  min-height:98px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:18px;
  background:rgba(255,255,255,.055);
  color:#f4f4f4;
  display:grid;
  place-items:center;
  overflow:hidden;
  cursor:pointer;
}
.voice-clone-avatar-picker span{
  width:34px;
  height:34px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:rgba(59,130,246,.22);
  color:#bfdbfe;
  font-size:22px;
  font-weight:900;
}
.voice-clone-avatar-picker img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.voice-clone-avatar-picker.has-avatar{
  background:#181818;
}
.voice-create-recorder{
  min-height:104px;
  border:1px solid rgba(255,255,255,.22);
  border-radius:8px;
  display:grid;
  place-items:center;
  gap:8px;
  padding:12px;
}
.voice-create-recorder button{
  width:30px;
  height:30px;
  border:0;
  border-radius:50%;
  background:#f04f78;
  color:#fff;
  font:inherit;
  font-weight:900;
  cursor:pointer;
}
.voice-create-recorder button.recording{background:#d92727}
.voice-speech-settings{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.voice-speech-settings b,.voice-preview-block b{font-size:11px}
.voice-speech-settings label{
  display:grid;
  grid-template-columns:88px minmax(0,1fr) 38px;
  align-items:center;
  gap:8px;
  font-size:11px;
  color:#f0f0f0;
}
.voice-speech-settings input[type=range]{width:100%;accent-color:#1f75ff}
.voice-speech-settings em{
  border:1px solid rgba(255,255,255,.26);
  border-radius:6px;
  padding:3px 4px;
  text-align:center;
  font-style:normal;
  font-size:9px;
}
.voice-preview-block{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.voice-preview-placeholder{
  height:38px;
  border-radius:7px;
  background:#575757;
  display:flex;
  align-items:center;
  padding:0 12px;
  color:#d6d6d6;
  font-size:11px;
}
.voice-upload-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.voice-upload-select{text-align:left;cursor:pointer;margin-bottom:12px}
.voice-upload-purpose-btn{
  min-height:48px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:3px;
  white-space:normal;
}
.voice-upload-purpose-btn span{font-size:13px;font-weight:800;color:#f5f5f5}
.voice-upload-purpose-btn small{font-size:10px;line-height:1.25;color:#aaa;font-weight:500}
.voice-upload-top-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-bottom:12px;
}
.voice-upload-select-wrap{
  position:relative;
  min-width:0;
}
.voice-upload-select-btn{
  width:100%;
  min-height:48px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:14px;
  background:rgba(255,255,255,.07);
  color:#f4f4f4;
  display:grid;
  grid-template-columns:minmax(0,1fr) 18px;
  grid-template-rows:auto auto;
  align-items:center;
  gap:2px 8px;
  padding:8px 12px;
  font:inherit;
  text-align:left;
  cursor:pointer;
  transition:border-color .18s ease,background .18s ease,box-shadow .18s ease;
}
.voice-upload-select-btn span{
  grid-column:1;
  color:#9d9d9d;
  font-size:10px;
  font-weight:800;
}
.voice-upload-select-btn b{
  grid-column:1;
  min-width:0;
  color:#f4f4f4;
  font-size:12px;
  line-height:1.15;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.voice-upload-select-btn i{
  grid-column:2;
  grid-row:1 / span 2;
  color:#cfcfcf;
  font-style:normal;
  transition:transform .18s ease;
}
.voice-upload-select-wrap.open .voice-upload-select-btn{
  border-color:rgba(59,130,246,.58);
  background:rgba(255,255,255,.095);
  box-shadow:0 0 0 3px rgba(59,130,246,.16);
}
.voice-upload-select-wrap.open .voice-upload-select-btn i{transform:rotate(180deg)}
.voice-upload-select-menu{
  position:absolute;
  left:0;
  right:0;
  top:calc(100% + 6px);
  z-index:5;
  display:none;
  max-height:260px;
  overflow-y:auto;
  padding:6px;
  border-radius:14px;
  background:#242424;
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 18px 44px rgba(0,0,0,.48);
}
.voice-upload-select-wrap.open .voice-upload-select-menu{display:block}
.voice-upload-select-menu button{
  width:100%;
  min-height:38px;
  border:0;
  border-radius:10px;
  background:transparent;
  color:#e8e8e8;
  font:inherit;
  text-align:left;
  padding:7px 10px;
  cursor:pointer;
}
.voice-upload-select-menu button b{
  display:block;
  font-size:12px;
  line-height:1.15;
}
.voice-upload-select-menu button small{
  display:block;
  margin-top:3px;
  color:#a9a9a9;
  font-size:10px;
  line-height:1.2;
}
.voice-upload-select-menu button.active,.voice-upload-select-menu button:hover{
  background:rgba(59,130,246,.22);
}
.voice-upload-controls{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
  margin-bottom:10px;
}
.voice-upload-controls-modern{
  padding:12px;
  border-radius:18px;
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.10);
}
.voice-upload-chip,.voice-upload-speaker-btn{
  min-width:0;
  border:1px solid rgba(255,255,255,.14);
  border-radius:12px;
  background:rgba(255,255,255,.07);
  color:#f2f2f2;
  min-height:42px;
  padding:8px 10px;
  font:inherit;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:2px;
  cursor:pointer;
}
.voice-upload-chip span,.voice-upload-speaker-btn span{
  color:#a9a9a9;
  font-size:10px;
  line-height:1.1;
}
.voice-upload-chip b,.voice-upload-speaker-btn b{
  max-width:100%;
  color:#fff;
  font-size:12px;
  line-height:1.15;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.voice-upload-chip.disabled,.voice-upload-chip:disabled{
  opacity:.52;
  cursor:not-allowed;
}
.voice-upload-speakers{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
  margin-bottom:10px;
}

.voice-speaker-composer{display:flex;align-items:center;gap:7px;flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;margin:0 0 8px;color:var(--muted,#969ba5);font-size:12px}
.voice-speaker-composer::-webkit-scrollbar{display:none}.voice-speaker-composer-label{flex:0 0 auto}
.voice-speaker-composer button{flex:0 0 auto;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.065);color:inherit;border-radius:999px;padding:5px 9px 5px 5px;font:inherit;cursor:pointer}
.voice-speaker-composer button:active{transform:scale(.97);background:rgba(255,255,255,.12)}
.voice-speaker-composer .voice-speaker-chip.active{border-color:#3f8eed;background:rgba(39,119,216,.2);color:#fff}
.voice-upload-drop{
  width:100%;
  min-height:120px;
  border:1px dashed rgba(255,255,255,.22);
  border-radius:18px;
  background:rgba(255,255,255,.045);
  color:#f4f4f4;
  display:grid;
  place-items:center;
  gap:8px;
  font:inherit;
  cursor:pointer;
}
.voice-upload-drop span{
  width:54px;
  height:54px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:18px;
  display:grid;
  place-items:center;
  font-size:30px;
  font-weight:300;
  background:rgba(255,255,255,.08);
}
.voice-upload-drop b{font-size:12px;color:#dcdcdc}
.voice-upload-drop small{
  max-width:85%;
  color:#999;
  font-size:10px;
  line-height:1.25;
  text-align:center;
}
.voice-preview-row.disabled{
  opacity:.48;
  cursor:not-allowed;
}
.voice-preview-row.disabled .voice-preview-pick{
  cursor:not-allowed;
}
.voice-upload-file-row{
  display:block;
  margin-top:12px;
}
.voice-upload-preview{
  position:relative;
  min-height:132px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:18px;
  background:#202020;
  overflow:hidden;
}
.voice-upload-preview video{
  display:block;
  width:100%;
  max-height:260px;
  aspect-ratio:16/9;
  background:#111;
  object-fit:contain;
}
.voice-upload-audio-box{
  min-height:120px;
  display:grid;
  place-items:center;
  gap:12px;
  padding:18px;
}
.voice-upload-audio-box > span{
  width:48px;
  height:48px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:rgba(255,255,255,.10);
  color:#f4f4f4;
  font-size:22px;
}
.voice-upload-audio-box audio{
  width:100%;
}
.voice-upload-preview-meta{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px 12px;
}
.voice-upload-preview-meta b,
.voice-upload-preview-meta small{
  display:block;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
}
.voice-upload-preview-meta b{
  color:#f4f4f4;
  font-size:12px;
  white-space:nowrap;
}
.voice-upload-preview-meta small{
  margin-top:4px;
  color:#a9a9a9;
  font-size:10px;
}
.voice-upload-replace{
  position:absolute;
  right:10px;
  top:10px;
  min-height:32px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:999px;
  padding:0 12px;
  background:rgba(0,0,0,.48);
  color:#fff;
  font:inherit;
  font-size:11px;
  font-weight:850;
  cursor:pointer;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.voice-upload-preview.loading{
  min-height:132px;
  display:grid;
  place-items:center;
  align-content:center;
  gap:8px;
  padding:18px;
  text-align:center;
}
.voice-upload-preview.loading b{
  color:#f4f4f4;
  font-size:13px;
}
.voice-upload-preview.loading small{
  max-width:100%;
  color:#a9a9a9;
  font-size:10px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.voice-upload-loader{
  width:34px;
  height:34px;
  border-radius:50%;
  border:3px solid rgba(255,255,255,.14);
  border-top-color:#2563eb;
  animation:voiceUploadSpin .8s linear infinite;
}
@keyframes voiceUploadSpin{to{transform:rotate(360deg)}}
.voice-upload-actions{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:12px;
}
.voice-upload-primary{
  flex:1;
  min-height:46px;
  border:0;
  border-radius:16px;
  background:#2563eb;
  color:#fff;
  font:inherit;
  font-size:13px;
  font-weight:900;
  cursor:pointer;
  box-shadow:0 14px 34px rgba(37,99,235,.28);
}
.voice-upload-primary:disabled{
  opacity:.42;
  cursor:not-allowed;
  box-shadow:none;
}
.voice-upload-clear:disabled{
  opacity:.42;
  cursor:not-allowed;
}
.voice-upload-note{
  margin-top:12px;
  padding:10px 12px;
  border-radius:16px;
  background:rgba(255,255,255,.045);
  color:#dcdcdc;
  border:1px solid rgba(255,255,255,.08);
}
.voice-upload-note b{
  display:block;
  font-size:12px;
  color:#f4f4f4;
}
.voice-upload-note small{
  display:block;
  margin-top:4px;
  font-size:10px;
  line-height:1.3;
  color:#a9a9a9;
}
@media(max-width:560px){
  .voice-upload-top-grid{grid-template-columns:1fr}
  .voice-upload-controls{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
  .voice-upload-speakers{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
  .voice-upload-speaker-btn{min-height:40px;padding:7px 8px}
  .voice-upload-drop{min-height:108px}
}

body > #modelPop.music-duration-wheel-pop{
  position:fixed!important;
  left:50%!important;
  right:auto!important;
  top:50%!important;
  bottom:auto!important;
  transform:translate(-50%,-50%)!important;
  width:min(330px,calc(100% - 28px))!important;
  min-width:0!important;
  max-width:330px!important;
  max-height:none!important;
  padding:14px!important;
  border-radius:24px!important;
  overflow:hidden!important;
  background:rgba(24,24,26,.96)!important;
  border:1px solid rgba(255,255,255,.11)!important;
  box-shadow:0 28px 90px rgba(0,0,0,.72)!important;
}
.music-duration-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;color:#fff}
.music-duration-head b{font-size:15px}
.music-duration-head span{padding:6px 10px;border-radius:10px;background:rgba(47,111,189,.32);font-size:14px;font-weight:850;font-variant-numeric:tabular-nums}
.music-duration-wheel-labels{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:5px;color:#919197;font-size:10px;font-weight:800;text-align:center;text-transform:uppercase;letter-spacing:.06em}
.music-duration-wheels{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.music-duration-wheels::after{content:"";position:absolute;left:0;right:0;top:50%;height:38px;transform:translateY(-50%);border-top:1px solid rgba(255,255,255,.11);border-bottom:1px solid rgba(255,255,255,.11);pointer-events:none}
.music-duration-wheel{height:190px;overflow-y:auto;scroll-snap-type:y mandatory;scrollbar-width:none;padding:76px 0}
.music-duration-wheel::-webkit-scrollbar{display:none}
.music-duration-wheel button{display:block;width:100%;height:38px;scroll-snap-align:center;border:0;background:transparent;color:#777;font:750 17px/1 inherit;font-variant-numeric:tabular-nums;cursor:pointer;transition:color .15s ease,transform .15s ease}
.music-duration-wheel button.active{color:#fff;transform:scale(1.12)}
.music-duration-wheel button:disabled{opacity:.18;cursor:not-allowed}
.music-duration-hint{margin:8px 2px 12px;color:#8f8f95;font-size:10px;line-height:1.35;text-align:center}
.music-duration-save{width:100%;min-height:44px;border:0;border-radius:14px;background:#2f6fbd;color:#fff;font:850 14px/1 inherit;cursor:pointer}
.voice-tool-card{
  min-width:0;
  border:1px solid rgba(255,255,255,.10);
  border-radius:18px;
  background:rgba(255,255,255,.045);
  padding:12px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.voice-tool-copy{display:flex;flex-direction:column;gap:4px;min-width:0}
.voice-tool-copy b{font-size:13px;color:#f4f4f4;line-height:1.25}
.voice-tool-copy span{font-size:12px;color:#a9a9a9;line-height:1.35}
.voice-tool-files{display:flex;flex-wrap:wrap;gap:6px;min-height:28px;align-items:center}
.voice-tool-file,.voice-tool-empty{
  max-width:100%;
  border-radius:999px;
  padding:7px 10px;
  background:rgba(255,255,255,.08);
  color:#e6e6e6;
  font-size:12px;
  line-height:1;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.voice-tool-empty{color:#9b9b9b}
.voice-tool-actions{display:flex;gap:8px;align-items:center}
.voice-tool-actions-wrap{flex-wrap:wrap}
.voice-tool-actions button{
  min-height:36px;
  border:0;
  border-radius:999px;
  padding:0 12px;
  background:#333;
  color:#f4f4f4;
  font:inherit;
  font-size:12px;
  font-weight:800;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  cursor:pointer;
}
.voice-tool-actions button:first-child{background:#2a61aa}
.voice-tool-actions button.recording{background:#a63434}
.voice-tool-actions button:disabled{opacity:.42;cursor:not-allowed}
.voice-tool-input{
  width:100%;
  border:1px solid rgba(255,255,255,.10);
  border-radius:14px;
  background:#202020;
  color:#f4f4f4;
  padding:10px 12px;
  font:inherit;
  font-size:13px;
  outline:0;
}
.voice-tool-audio{width:100%;height:34px}

.voice-tool-panel.voice-create-open .voice-create-recorder{
  position:relative;
  min-height:98px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:18px;
  background:rgba(255,255,255,.05);
  display:grid;
  place-items:center;
  overflow:hidden;
}
.voice-rec-round,.voice-upload-round{
  width:46px!important;
  height:46px!important;
  border-radius:50%!important;
  display:grid!important;
  place-items:center!important;
  border:0!important;
  color:#fff!important;
  font:inherit!important;
  font-weight:900!important;
  transition:transform .28s ease,opacity .28s ease,background .18s ease!important;
}
.voice-rec-round{
  background:#e34a64!important;
  z-index:2;
}
.voice-rec-round.recording{
  background:#d92727!important;
  box-shadow:0 0 0 6px rgba(217,39,39,.18);
}
.voice-upload-round{
  background:#3a3a3a!important;
}
.voice-create-recorder.recording-mode .voice-upload-round{
  transform:translateY(-34px) scale(.72);
  opacity:0;
  pointer-events:none;
}
.voice-record-live{
  position:absolute;
  left:10px;
  right:10px;
  bottom:8px;
  height:22px;
  display:flex;
  align-items:end;
  justify-content:center;
  gap:4px;
  color:#f4f4f4;
  font-size:10px;
  font-weight:900;
}
.voice-record-live span{
  width:4px;
  border-radius:999px;
  background:#ef5b72;
  animation:voice-live-wave .74s ease-in-out infinite alternate;
}
.voice-record-live span:nth-child(1){height:8px}
.voice-record-live span:nth-child(2){height:16px;animation-delay:.08s}
.voice-record-live span:nth-child(3){height:11px;animation-delay:.16s}
.voice-record-live span:nth-child(4){height:18px;animation-delay:.24s}
.voice-record-live b{margin-left:4px;line-height:18px}
@keyframes voice-live-wave{to{transform:scaleY(.45);opacity:.62}}
.voice-audio-file-card{
  width:100%;
  display:grid;
  grid-template-columns:34px minmax(0,1fr) 28px;
  align-items:center;
  gap:8px;
  padding:0 8px;
}
.voice-file-icon{
  width:34px;
  height:34px;
  border-radius:12px;
  display:grid;
  place-items:center;
  background:rgba(59,130,246,.22);
  color:#93c5fd;
  font-size:18px;
  font-weight:900;
}
.voice-audio-file-card b,.voice-audio-file-card small{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.voice-audio-file-card b{font-size:12px;color:#f4f4f4}
.voice-audio-file-card small{font-size:10px;color:#a9a9a9;margin-top:2px}
.voice-trash-btn{
  width:28px!important;
  height:28px!important;
  border-radius:50%!important;
  background:rgba(255,255,255,.08)!important;
  color:#f1f1f1!important;
  border:0!important;
  font-size:14px!important;
}
.voice-tool-panel.voice-create-open .voice-speech-settings{
  margin-top:14px;
  padding:12px;
  border-radius:18px;
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.10);
}
.voice-tool-panel.voice-create-open .voice-speech-settings b,
.voice-tool-panel.voice-create-open .voice-preview-block b{
  font-size:12px;
  color:#f4f4f4;
}
.voice-param-row{
  display:grid!important;
  grid-template-columns:94px minmax(0,1fr) 58px!important;
  align-items:center;
  gap:10px!important;
  color:#f0f0f0;
}
.voice-param-row span{
  font-size:11px;
  font-weight:800;
}
.voice-param-row input[type=range]{
  width:100%;
  accent-color:#3b82f6;
}
.voice-param-number{
  min-height:34px;
  padding:0 6px;
  text-align:center;
  font-size:12px;
  font-weight:900;
}
.voice-tool-panel.voice-create-open .voice-preview-block{
  margin-top:14px;
  padding:12px;
  border-radius:18px;
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.10);
}

/* Optional voice-studio extensions. Kept under voice-only selectors so the
   existing image, video, music and text composers retain their layout. */
.voice-quick-actions{display:flex;align-items:center;gap:7px;margin-top:9px}
.voice-quick-actions button,.voice-editor-toolbar button{
  width:34px;height:34px;padding:0;border:1px solid rgba(255,255,255,.1);border-radius:10px;
  background:#292929;color:#b8b8b8;display:grid;place-items:center;cursor:pointer;transition:.18s ease;
}
.voice-quick-actions button:hover,.voice-editor-toolbar button:hover,.voice-quick-actions button.active{
  color:#fff;border-color:rgba(67,145,255,.55);background:#303b4c;
}
.voice-quick-actions svg,.voice-editor-toolbar svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.voice-tools-toggle{width:30px;height:28px;padding:0;border:1px solid rgba(255,255,255,.1);border-radius:9px;background:#292929;color:#aaa;display:grid;place-items:center;cursor:pointer}
.voice-tools-toggle svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.voice-tools-toggle[aria-expanded="true"]{color:#fff;border-color:rgba(67,145,255,.55);background:#303b4c}
.voice-tools-toggle[aria-expanded="true"] svg{transform:rotate(180deg)}
.voice-horizontal-tools{min-width:0}
.studio-voice-full>.voice-horizontal-tools{order:-1;margin:0 0 4px;padding:8px;border:1px solid rgba(255,255,255,.08);border-radius:14px;background:rgba(255,255,255,.025);overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none}
.studio-voice-full>.voice-horizontal-tools.dialogue-only{display:flex!important;flex-direction:column;gap:10px;padding:0;border:0;border-radius:0;background:transparent;overflow:visible}
.studio-voice-full>.voice-horizontal-tools::-webkit-scrollbar{display:none}
.voice-tool-guide{position:fixed;z-index:10100;width:210px;box-sizing:border-box;padding:10px;border:1px solid rgba(88,156,255,.48);border-radius:11px;background:rgba(38,38,40,.97);color:#eee;box-shadow:0 14px 34px rgba(0,0,0,.38);pointer-events:none;opacity:1;transform:translateY(0);transition:opacity .22s ease,transform .22s ease;animation:voiceToolGuideIn .24s ease}
.voice-tool-guide.is-leaving{opacity:0;transform:translateY(5px)}
.voice-tool-guide-head{display:flex!important;align-items:center;gap:7px;margin-bottom:4px}.voice-tool-guide-icon{width:23px;height:23px;flex:0 0 23px;border-radius:7px;background:#286dc0;color:#fff;display:grid!important;place-items:center}.voice-tool-guide-icon svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.voice-tool-guide b,.voice-tool-guide span{display:block}.voice-tool-guide b{font-size:11px;font-weight:600}.voice-tool-guide>span:last-child{font-size:10px;line-height:1.35;color:#aaa}
.voice-editor-toolbar button.voice-tool-guide-active{color:#fff!important;border-color:#4f9cff!important;background:#286dc0!important;box-shadow:0 0 0 4px rgba(50,132,235,.18),0 0 18px rgba(40,126,235,.42);transform:translateY(-1px)}
@keyframes voiceToolGuideIn{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}
.voice-addon-drawer{
  margin-top:9px;padding:12px;border:1px solid rgba(255,255,255,.1);border-radius:14px;background:#252525;
  color:#eee;box-shadow:0 18px 44px rgba(0,0,0,.26)
}
.voice-addon-drawer[hidden]{display:none!important}
.voice-addon-drawer[data-kind="emotion"],.voice-addon-drawer[data-kind="pause"],.voice-addon-drawer[data-kind="effects"]{padding:4px 0;border:0;border-radius:0;background:transparent;box-shadow:none}
.voice-addon-drawer.voice-addon-modal{
  position:fixed!important;left:50%!important;top:50%!important;right:auto!important;bottom:auto!important;
  z-index:1000050!important;width:min(430px,calc(100vw - 28px));max-height:min(76vh,620px);overflow-y:auto;
  margin:0!important;padding:16px!important;border-radius:22px!important;transform:translate(-50%,-50%);
  background:#252525!important;box-shadow:0 0 0 100vmax rgba(0,0,0,.64),0 28px 80px rgba(0,0,0,.62)!important
}
.voice-addon-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.voice-addon-head b{font-size:13px;font-weight:600}.voice-addon-head button{border:0;background:transparent;color:#999;font-size:20px;cursor:pointer}
.voice-addon-options{display:flex;flex-wrap:nowrap;gap:7px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;padding-bottom:2px}
.voice-addon-options::-webkit-scrollbar{display:none}
.voice-addon-options>button,.voice-addon-options>span{flex:0 0 auto;white-space:nowrap}
.voice-addon-options button,.voice-addon-primary{
  min-height:34px;padding:7px 11px;border:1px solid rgba(255,255,255,.1);border-radius:10px;background:#303030;color:#ddd;cursor:pointer
}
.voice-addon-options button:hover,.voice-addon-options button.active,.voice-addon-primary{border-color:#377fdb;background:#245d9f;color:#fff}
.voice-inline-option-strip{display:flex;align-items:center;gap:12px;width:100%;min-width:0;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;white-space:nowrap;padding:3px 0;direction:ltr}
.voice-inline-option-strip::-webkit-scrollbar{display:none}
.voice-inline-option-strip b{flex:0 0 auto;color:#f2f2f2;font-size:12px;font-weight:700}
.voice-inline-option-strip button{flex:0 0 auto;border:0;border-radius:0;background:transparent;color:#aaa;padding:3px 0;font:inherit;font-size:11px;line-height:1.3;cursor:pointer;white-space:nowrap}
.voice-inline-option-strip button:hover{color:#fff;background:transparent}
.voice-inline-option-strip .voice-inline-add{font-size:20px;line-height:1;color:#eee;padding:0 1px}
.voice-dialogue-open-tools{display:flex;flex-direction:column;gap:7px;margin-top:0;min-width:0}
.voice-dialogue-row{display:flex;align-items:center;gap:10px;min-width:0;padding:7px 9px;border:1px solid rgba(255,255,255,.09);border-radius:11px;background:rgba(255,255,255,.025)}
.voice-dialogue-row>b,.voice-dialogue-row-title{flex:0 0 auto;color:#ededed;font-size:11px;font-weight:700;white-space:nowrap}
.voice-dialogue-row-title{display:flex;align-items:center;gap:5px}
.voice-dialogue-row-title>button,.voice-dialogue-add-speaker{width:22px;height:22px;flex:0 0 22px;padding:0;border:0;border-radius:50%;background:#3a3a3a;color:#f1f1f1;font-size:17px;line-height:1;cursor:pointer}
.voice-dialogue-row-items{display:flex;align-items:center;gap:9px;min-width:0;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none}
.voice-dialogue-row-items::-webkit-scrollbar{display:none}
.voice-dialogue-option{flex:0 0 auto;padding:2px 0;border:0;background:transparent;color:#aaa;font:inherit;font-size:10px;line-height:1.3;white-space:nowrap;cursor:pointer}
.voice-dialogue-option:hover{color:#fff}
.voice-dialogue-speaker-row{width:100%;box-sizing:border-box;flex-direction:column;align-items:stretch;gap:9px;padding:10px 12px}.voice-dialogue-speaker-row>b{align-self:flex-start}.voice-dialogue-speaker-row .voice-dialogue-row-items{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:stretch;gap:8px;width:100%;overflow:visible}.voice-speaker-card{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:stretch;min-width:0;border-radius:10px;background:#303030;overflow:hidden}.voice-speaker-card.is-empty{grid-template-columns:1fr}.voice-speaker-card>.voice-speaker-chip{width:100%;min-width:0}.voice-speaker-card>.voice-speaker-replace{width:auto;min-width:49px;height:auto;margin:0;padding:3px 6px;border:0;border-left:1px solid rgba(255,255,255,.08);border-radius:0;background:rgba(255,255,255,.035);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;color:#b9c7d8;cursor:pointer}.voice-speaker-card>.voice-speaker-replace small{font-size:7px;line-height:1}.voice-speaker-card>.voice-speaker-remove{position:absolute;top:1px;right:1px;z-index:2;width:16px;height:16px;margin:0;padding:0;border:0;border-radius:50%;background:#242424;color:#aaa;font-size:12px;line-height:16px}.voice-speaker-card>.voice-speaker-remove+.voice-speaker-replace{padding-right:16px}
.voice-custom-option-form{display:flex;align-items:center;gap:7px;margin-top:10px}
.voice-custom-option-form input{min-width:0;flex:1;height:36px;box-sizing:border-box;padding:0 10px;border:1px solid rgba(255,255,255,.11);border-radius:10px;background:#1f1f1f;color:#eee;outline:none}
.voice-custom-option-form button{height:36px;flex:0 0 auto;padding:0 10px;border:1px solid #377fdb;border-radius:10px;background:#245d9f;color:#fff;display:flex;align-items:center;gap:5px;cursor:pointer}
.voice-custom-option-form button svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round}
.voice-custom-option-form button span{font-size:10px}
.voice-addon-field{width:100%;box-sizing:border-box;margin:5px 0 9px;padding:10px;border:1px solid rgba(255,255,255,.11);border-radius:10px;background:#1f1f1f;color:#eee;outline:none}
.voice-addon-setting{display:grid;grid-template-columns:105px 1fr 40px;align-items:center;gap:8px;margin:9px 0;font-size:11px;color:#aaa}
.voice-addon-setting input{width:100%;accent-color:#2784ef}.voice-addon-setting output{text-align:right;color:#ddd;font-variant-numeric:tabular-nums}
.voice-editor-addons,.voice-text-estimate{display:none}
.studio-video-composer[data-composer-mode="voice"] .voice-editor-addons{display:block;width:100%;min-width:0;margin-bottom:5px}
.studio-video-composer[data-composer-mode="voice"] .voice-addon-drawer{grid-column:1/-1}
.voice-template-strip{display:flex;flex-wrap:nowrap;gap:6px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;padding:7px 0}.voice-template-strip::-webkit-scrollbar{display:none}
.voice-template-strip button{flex:0 0 auto;padding:5px 9px;border:1px solid rgba(255,255,255,.08);border-radius:999px;background:#292929;color:#929292;font-size:10px;cursor:pointer}
.voice-template-strip button.active{color:#fff;border-color:#377fdb;background:#245d9f}
.voice-editor-toolbar{display:flex;width:100%;min-width:0;flex-direction:row;align-items:center;justify-content:flex-start;gap:10px;overflow-x:auto;scrollbar-width:none;direction:ltr;padding:9px;border:1px solid rgba(255,255,255,.09);border-radius:11px;background:rgba(255,255,255,.025)}.voice-editor-toolbar::-webkit-scrollbar{display:none}.voice-horizontal-tools.dialogue-only .voice-editor-toolbar{box-sizing:border-box;flex-direction:column;align-items:stretch;gap:9px;padding:10px 12px;overflow:visible}.voice-horizontal-tools.dialogue-only .voice-tools-block-title{align-self:flex-start}.voice-horizontal-tools.dialogue-only .voice-tool-secondary-group{display:grid;grid-template-columns:repeat(3,32px);gap:6px;align-self:flex-end;direction:ltr}
.voice-tools-block-title{flex:0 0 auto;color:#ededed;font-size:11px;font-weight:700;white-space:nowrap}
.voice-tool-primary-group,.voice-tool-secondary-group{display:flex;flex-direction:row;align-items:center;gap:5px;direction:rtl}
.voice-tool-separator{display:block;width:1px;height:26px;flex:0 0 1px;background:rgba(255,255,255,.11)}
.voice-editor-toolbar button{flex:0 0 32px;width:32px;height:30px;border-radius:9px}
.studio-control-row .voice-bottom-labeled{width:auto;max-width:none;padding:0 12px;gap:7px;white-space:nowrap}
.studio-control-row .voice-bottom-labeled span{font-size:11px}
.studio-control-row .voice-settings-round{width:38px;min-width:38px;height:38px;padding:0;border-radius:50%;justify-content:center;margin-left:auto}
@media(min-width:901px){
  .studio-video-composer[data-composer-mode="voice"] .studio-control-row .voice-settings-round{margin-left:0}
}
.voice-general-settings-pop{border-radius:22px!important;box-shadow:0 0 0 100vmax rgba(0,0,0,.64),0 28px 80px rgba(0,0,0,.62)!important}
.studio-video-composer[data-composer-mode="voice"] .voice-text-estimate{display:flex;justify-content:flex-end;gap:12px;margin:-2px 48px 5px 0;color:#858585;font-size:10px;font-variant-numeric:tabular-nums}
.studio-video-composer[data-composer-mode="voice"] .studio-prompt-column textarea{min-height:96px}
.voice-text-tool-loading{opacity:.5;pointer-events:none}
.voice-translation-grid{display:grid;grid-template-columns:1fr 34px 1fr;gap:7px;align-items:center}
.voice-translation-grid .voice-addon-field{margin:0}.voice-translation-swap{width:34px;height:34px;border:1px solid rgba(255,255,255,.1);border-radius:9px;background:#303030;color:#ddd;display:grid;place-items:center;cursor:pointer}
.voice-translation-grid select.voice-addon-field{height:38px;padding:0 30px 0 10px;appearance:none;-webkit-appearance:none;background-color:#292929;background-image:linear-gradient(45deg,transparent 50%,#8e8e8e 50%),linear-gradient(135deg,#8e8e8e 50%,transparent 50%);background-position:calc(100% - 14px) 16px,calc(100% - 9px) 16px;background-size:5px 5px,5px 5px;background-repeat:no-repeat;color:#e7e7e7;border-color:rgba(255,255,255,.13);font:inherit;font-size:12px}
.voice-translation-swap svg,.voice-translation-actions svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.voice-translation-result{min-height:88px;max-height:190px;overflow:auto;margin-top:9px;padding:10px;border:1px solid rgba(255,255,255,.1);border-radius:10px;background:#1e1e1e;color:#ddd;font-size:13px;white-space:pre-wrap}
.voice-translation-actions{display:flex;gap:7px;margin-top:7px}.voice-translation-actions button{width:34px;height:32px;border:1px solid rgba(255,255,255,.1);border-radius:9px;background:#303030;color:#ddd;display:grid;place-items:center;cursor:pointer}
.voice-translation-actions[hidden],.voice-translation-result[hidden]{display:none!important}
.voice-speaker-composer button{position:relative}.voice-speaker-chip{display:flex;align-items:center;gap:7px}.voice-speaker-avatar{width:28px;height:28px;flex:0 0 28px;border-radius:50%;overflow:hidden;display:grid;place-items:center;background:#3a3a3a;color:#eee;font-size:9px}.voice-speaker-avatar img{width:100%;height:100%;object-fit:cover}.voice-speaker-copy{display:flex;flex-direction:column;align-items:flex-start;max-width:108px;line-height:1.1}.voice-speaker-copy b{font-size:10px;font-weight:500;color:#ddd}.voice-speaker-copy small{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:9px;color:#999}.voice-speaker-remove{margin-left:3px;color:#aaa;font-size:14px;line-height:1}
.voice-speaker-replace{color:#aaa;font-size:14px;line-height:1}.voice-speaker-replace:hover,.voice-speaker-replace:focus-visible{color:#fff;background:rgba(255,255,255,.1)}
.voice-dialogue-row .voice-speaker-chip{position:relative;flex:0 0 auto;min-height:36px;padding:3px 7px;border:0;border-radius:9px;background:#303030;color:#ddd;cursor:pointer}
.voice-dialogue-row .voice-speaker-chip.active{background:#244f83;color:#fff}
.voice-caret-menu{position:fixed;z-index:100080;width:232px;padding:7px;border:1px solid rgba(255,255,255,.12);border-radius:14px;background:rgba(35,35,37,.98);box-shadow:0 22px 60px rgba(0,0,0,.55);color:#ddd}
.voice-caret-menu[hidden],.voice-dialogue-bottom-sheet[hidden]{display:none!important}
.voice-caret-menu hr{height:1px;margin:5px 6px;border:0;background:rgba(255,255,255,.09)}
.voice-caret-menu-item{position:relative}
.voice-caret-menu-item>button{display:grid;grid-template-columns:22px minmax(0,1fr) 12px;align-items:center;gap:7px;width:100%;min-height:34px;padding:5px 8px;border:0;border-radius:9px;background:transparent;color:#d8d8d8;text-align:left;font:inherit;font-size:12px;cursor:pointer}
.voice-caret-menu-item>button:hover,.voice-caret-menu-item:focus-within>button{background:#303b4c;color:#fff}
.voice-caret-menu-item>button span{display:grid;place-items:center}.voice-caret-menu svg,.voice-dialogue-mobile-toolbar svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.voice-caret-menu-item>button i{font-style:normal;color:#777;text-align:right}
.voice-caret-submenu{display:none;position:absolute;left:calc(100% + 7px);top:auto;bottom:-7px;width:210px;max-height:min(420px,70vh);overflow-y:auto;padding:7px;border:1px solid rgba(255,255,255,.12);border-radius:13px;background:#242426;box-shadow:0 18px 48px rgba(0,0,0,.5)}
.voice-caret-menu-item:hover>.voice-caret-submenu,.voice-caret-menu-item:focus-within>.voice-caret-submenu,.voice-caret-menu-item.submenu-open>.voice-caret-submenu{display:block}
.voice-caret-submenu::before{content:"";position:absolute;right:100%;top:0;width:9px;height:100%}
.voice-caret-submenu>button,.voice-dialogue-sheet-items>button{display:block;width:100%;min-height:32px;padding:6px 9px;border:0;border-radius:8px;background:transparent;color:#c9c9c9;text-align:left;font:inherit;font-size:11px;cursor:pointer}
.voice-caret-submenu>button:hover,.voice-dialogue-sheet-items>button:hover{background:#303b4c;color:#fff}.voice-caret-submenu>button:disabled,.voice-dialogue-sheet-items>button:disabled{opacity:.38;cursor:not-allowed}
.voice-dialogue-marker-rail{display:flex;align-items:center;gap:6px;max-width:100%;overflow-x:auto;scrollbar-width:none;margin:0 0 7px;padding:2px 0}.voice-dialogue-marker-rail::-webkit-scrollbar{display:none}.voice-dialogue-marker-rail[hidden]{display:none!important}
.voice-dialogue-marker{display:grid;grid-template-columns:28px max-content minmax(60px,150px);align-items:center;gap:6px;flex:0 0 auto;padding:4px 8px 4px 4px;border:1px solid rgba(255,255,255,.09);border-radius:999px;background:#292929;color:inherit;font:inherit;min-width:0;cursor:pointer}.voice-dialogue-marker b{font-size:10px;font-weight:500;color:#ddd}.voice-dialogue-marker small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#888;font-size:9px}
.voice-dialogue-marker-data{display:none!important}
.voice-dialogue-mobile-toolbar{display:none;position:fixed;left:8px;right:8px;bottom:calc(var(--kb,0px) + env(safe-area-inset-bottom,0px) + 7px);z-index:100040;align-items:center;gap:6px;overflow-x:auto;scrollbar-width:none;padding:6px;border:1px solid rgba(255,255,255,.1);border-radius:13px;background:rgba(34,34,36,.96);box-shadow:0 12px 32px rgba(0,0,0,.4)}.voice-dialogue-mobile-toolbar::-webkit-scrollbar{display:none}
.voice-dialogue-mobile-toolbar>button{display:flex;align-items:center;gap:5px;flex:0 0 auto;min-height:32px;padding:5px 9px;border:0;border-radius:9px;background:#2d2d2f;color:#bbb;font:inherit;font-size:10px;white-space:nowrap}
.voice-dialogue-mobile-toolbar{display:none!important}
.voice-dialogue-bottom-sheet{position:fixed;inset:0;z-index:100070;display:block;background:transparent}
.voice-dialogue-sheet-card{position:absolute;left:var(--voice-menu-left,12px);bottom:var(--voice-menu-bottom,120px);width:var(--voice-menu-width,276px);max-height:min(52vh,420px);overflow:hidden;padding:8px;border:1px solid rgba(255,255,255,.09);border-radius:14px;background:rgba(13,13,15,.88);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:0 16px 44px rgba(0,0,0,.5)}
.voice-dialogue-sheet-card header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:9px}.voice-dialogue-sheet-card header b{font-size:13px;font-weight:600}.voice-dialogue-sheet-card header button{width:30px;height:30px;border:0;border-radius:50%;background:#333;color:#aaa;font-size:19px}
.voice-dialogue-sheet-items{display:flex;flex-direction:column;align-items:stretch;gap:0;max-height:min(42vh,340px);overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none}.voice-dialogue-sheet-items::-webkit-scrollbar{display:none}.voice-dialogue-sheet-items>button{flex:0 0 auto;width:100%;min-height:34px;padding:7px 9px;white-space:normal;border:0;border-radius:8px;background:transparent;color:#d2d2d5}.voice-dialogue-sheet-items>button:hover,.voice-dialogue-sheet-items>button:active{background:rgba(255,255,255,.07);color:#fff}
.voice-dialogue-sheet-items>button.is-danger{border-color:rgba(239,82,82,.35);color:#ff8c8c;background:rgba(126,35,35,.25)}
.studio-video-composer[data-composer-mode="voice"] .studio-prompt-column textarea{min-height:132px}
.mobile-keyboard-close{display:none;position:absolute;right:11px;top:9px;z-index:4;width:30px;height:30px;padding:0;border:1px solid rgba(255,255,255,.1);border-radius:9px;background:#303030;color:#aaa;place-items:center;cursor:pointer}
.studio-video-composer[data-composer-mode="text"] .mobile-keyboard-close{right:48px}
.mobile-keyboard-close svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.studio-prompt-column.voice-editor-fullscreen{position:fixed!important;inset:0!important;z-index:10020!important;padding:calc(env(safe-area-inset-top,0px) + 14px) 14px calc(env(safe-area-inset-bottom,0px) + 14px)!important;border:0!important;background:#202020!important;display:flex!important}
.studio-prompt-column.voice-editor-fullscreen .voice-editor-addons{display:block!important;min-height:0}
.studio-prompt-column.voice-editor-fullscreen textarea{flex:1 1 auto!important;max-height:none!important;min-height:220px!important;font-size:17px!important}
.studio-prompt-column.voice-editor-fullscreen .studio-control-row{flex:0 0 auto}
.voice-translation-fullscreen{position:fixed!important;inset:0!important;z-index:10030!important;margin:0!important;border-radius:0!important;padding:calc(env(safe-area-inset-top,0px) + 18px) 16px calc(env(safe-area-inset-bottom,0px) + 18px)!important;background:#202020!important;display:flex!important;flex-direction:column}
.voice-translation-fullscreen .voice-translation-result{flex:1;max-height:none;font-size:16px}
@media(max-width:900px){
  .studio-video-composer[data-composer-mode="voice"][data-voice-workspace="dialogue"] .studio-video-panel{grid-template-columns:1fr}
  .voice-quick-actions{justify-content:flex-start;overflow-x:auto;scrollbar-width:none}.voice-addon-drawer{position:relative;z-index:4}
  .studio-voice-full>.vgen-actions{order:0}
  .studio-voice-full>.vgen-upload-row{order:1}
  .studio-voice-full>.voice-horizontal-tools{order:2;margin:4px 0 0;overflow:visible}
  .studio-voice-full>.voice-tool-panel{order:3}
  .studio-voice-full>.voice-horizontal-tools::-webkit-scrollbar{display:none}
  .voice-editor-toolbar{width:max-content;min-width:100%;flex-direction:row;align-items:center;gap:8px;overflow:visible;direction:ltr}
  .voice-horizontal-tools.dialogue-only .voice-editor-toolbar{width:100%;min-width:0;overflow-x:auto}
  .voice-tool-primary-group,.voice-tool-secondary-group{flex-direction:row;align-items:center;gap:5px;direction:ltr}
  .voice-tool-separator{width:1px;height:26px;flex:0 0 1px}
  .studio-control-row .voice-bottom-labeled{padding:0 10px}
  .studio-control-row .voice-bottom-labeled span{font-size:10px}
  .voice-editor-addons{margin-top:2px}.voice-addon-setting{grid-template-columns:88px 1fr 34px}
  .voice-dialogue-open-tools{gap:6px}
  .voice-dialogue-row{align-items:center;flex-direction:row;gap:8px;padding:8px;overflow:hidden}
  .voice-dialogue-row-items{width:auto;flex:1 1 auto;overflow-x:auto;overflow-y:hidden;flex-wrap:nowrap;gap:7px 11px}
  .voice-dialogue-speaker-row{width:100%;align-items:stretch;flex-direction:column;gap:8px;padding:10px;overflow:visible}
  .voice-dialogue-speaker-row .voice-dialogue-row-items{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%;overflow:visible;gap:7px}
  .voice-horizontal-tools.dialogue-only .voice-editor-toolbar{width:100%;min-width:0;flex-direction:column;align-items:stretch;gap:8px;padding:10px;overflow:visible}
  .voice-horizontal-tools.dialogue-only .voice-tool-secondary-group{display:grid;grid-template-columns:repeat(3,32px);align-self:flex-end;gap:6px}
  .voice-dialogue-option{font-size:10px}
  .studio-prompt-column.voice-editor-fullscreen{padding-top:calc(env(safe-area-inset-top,0px) + 72px)!important}
}
:is(body.device-mobile,body.device-tablet).kb-open .mobile-keyboard-close{display:grid}
.voice-wave-player{
  display:grid;
  grid-template-columns:38px minmax(0,1fr) 34px 34px;
  align-items:center;
  gap:8px;
}
.voice-wave-player button{
  width:36px;
  height:36px;
  border:0;
  border-radius:50%;
  background:#2563eb;
  color:#fff;
  font:inherit;
  font-size:12px;
  font-weight:900;
}
.voice-waveform{
  height:34px;
  display:flex;
  align-items:center;
  gap:2px;
  overflow:hidden;
}
.voice-waveform span{
  flex:1;
  min-width:2px;
  border-radius:999px;
  background:linear-gradient(180deg,#7fb0ff,#2563eb);
}
.voice-wave-player time{
  color:#dcdcdc;
  font-size:10px;
  font-weight:800;
  text-align:center;
}
.voice-create-footer{
  position:sticky;
  bottom:-14px;
  margin:14px -14px -14px;
  padding:12px 14px 14px;
  background:linear-gradient(180deg,rgba(18,18,20,0),rgba(18,18,20,.96) 35%);
}
.voice-create-submit{
  width:100%;
  min-height:48px;
  border:0;
  border-radius:16px;
  background:#2563eb;
  color:#fff;
  font:inherit;
  font-size:14px;
  font-weight:900;
  cursor:pointer;
  box-shadow:0 14px 34px rgba(37,99,235,.32);
}
.voice-create-submit:disabled{
  opacity:.42;
  cursor:not-allowed;
  box-shadow:none;
}
@media(max-width:560px){
  .voice-tool-panel.voice-create-open .voice-create-grid{
    grid-template-columns:1fr;
  }
  .voice-clone-profile-row{
    grid-template-columns:74px minmax(0,1fr);
  }
  .voice-clone-avatar-picker{
    width:74px;
    min-height:98px;
  }
  .voice-tool-panel.voice-create-open .voice-create-recorder{
    min-height:92px;
  }
  .voice-param-row{
    grid-template-columns:82px minmax(0,1fr) 54px!important;
  }
}

/* =====================================================
CSS-БЛОК: .studio-video-panel
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.studio-video-panel{
  display:grid;grid-template-columns:clamp(220px,28vw,430px) minmax(0,1fr);gap:24px;
  padding:18px 24px 24px;border-radius:28px;background:#202020;
  border:1px solid rgba(255,255,255,.10);box-shadow:0 18px 54px -26px rgba(0,0,0,.9);
}
.image-setting-disabled{opacity:.48;cursor:not-allowed!important}
.image-setting-disabled span:last-child{font-size:11px;line-height:1.15;color:#bdbdbd;white-space:normal}
.visual-create-modal{position:fixed;inset:0;z-index:999999;background:rgba(8,8,10,.76);backdrop-filter:blur(18px);display:none;color:#f4f4f4;padding:calc(14px + env(safe-area-inset-top)) 12px calc(14px + env(safe-area-inset-bottom))}
.visual-create-modal.show{display:block}
.visual-create-card{position:relative;min-height:min(720px,100%);max-height:100%;padding:16px;display:flex;flex-direction:column;gap:14px;max-width:540px;margin:0 auto;border-radius:28px;background:#202020;border:1px solid rgba(255,255,255,.10);box-shadow:0 22px 70px rgba(0,0,0,.55);overflow-y:auto}
.visual-create-card.is-busy{overflow:hidden}
.visual-create-head{display:flex;align-items:center;gap:12px}
.visual-create-head button{border:0;background:rgba(255,255,255,.08);color:#f4f4f4;font:inherit;font-weight:900;padding:0;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-size:28px;line-height:1}
.visual-create-head button:disabled{opacity:.45}
.visual-create-head h3{margin:0;font-size:19px;font-weight:900}
.visual-field{display:flex;flex-direction:column;gap:7px;font-size:12px;color:#bdbdbd;font-weight:800}
.visual-field input,.visual-field select,.visual-field textarea{width:100%;border:1px solid rgba(255,255,255,.12);border-radius:16px;background:#2b2b2b;color:#f4f4f4;padding:13px 14px;font:inherit;outline:0;transition:border-color .18s ease,background .18s ease,box-shadow .18s ease}
.visual-field input:focus,.visual-field select:focus,.visual-field textarea:focus{border-color:rgba(37,99,235,.85);box-shadow:0 0 0 3px rgba(37,99,235,.18)}
.visual-field input:disabled,.visual-field select:disabled,.visual-field textarea:disabled{opacity:.58}
.visual-field textarea{min-height:82px;resize:none}
.visual-photo-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.visual-photo-slot:first-child{grid-column:1 / -1;min-height:150px}
.visual-photo-slot{position:relative;min-height:116px;border:1px dashed rgba(255,255,255,.20);border-radius:18px;background:#2b2b2b;color:#dcdcdc;display:grid;place-items:center;font:inherit;overflow:hidden}
.visual-photo-slot span{font-size:28px}.visual-photo-slot b{font-size:12px}
.visual-photo-slot img{width:100%;height:100%;display:block;object-fit:cover}
.visual-photo-slot em{position:absolute;top:8px;right:8px;width:26px;height:26px;border-radius:50%;background:rgba(0,0,0,.72);display:grid;place-items:center;font-style:normal;font-weight:900}
.visual-create-hint{margin:0;color:#aaa;font-size:12px;line-height:1.45}
.visual-create-loading-overlay{position:absolute;inset:0;z-index:20;display:grid;place-items:center;padding:24px;border-radius:inherit;background:rgba(8,8,10,.68);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)}
.visual-create-loading{width:min(320px,100%);min-height:170px;padding:26px 22px;border-radius:24px;background:#292929;border:1px solid rgba(255,255,255,.13);box-shadow:0 24px 70px rgba(0,0,0,.58);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:13px;color:#fff;text-align:center;font-size:14px;font-weight:850}
.visual-create-loading span{width:42px;height:42px;border-radius:50%;border:4px solid rgba(255,255,255,.18);border-top-color:#fff;animation:sylvexUploadSpin .8s linear infinite}
.visual-create-loading strong{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:#22c55e;color:#fff;font-size:28px;line-height:1}
.visual-create-loading b{font-size:15px;line-height:1.35}
.visual-create-loading small{color:#aaa;font-size:12px;font-weight:700}
.visual-create-save{margin-top:auto;min-height:50px;border:0;border-radius:16px;background:#2563eb;color:#fff;font:inherit;font-weight:900;box-shadow:0 14px 34px rgba(37,99,235,.32)}
.visual-create-save:disabled{opacity:.4;cursor:not-allowed}
.visual-picker-new{min-height:48px;border:1px solid rgba(255,255,255,.12);border-radius:16px;background:#242424;color:#fff;font:inherit;font-weight:900}
.visual-picker-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:12px;overflow-y:auto;padding-bottom:20px}
.visual-picker-card{position:relative;border:0;background:transparent;color:#e8e8e8;font:inherit;text-align:center;padding:0;cursor:pointer}
.visual-picker-thumb{display:block;aspect-ratio:1;border-radius:18px;background:#303030;overflow:hidden;border:2px solid transparent}
.visual-picker-thumb img{width:100%;height:100%;display:block;object-fit:cover}
.visual-picker-name{display:block;margin-top:7px;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.visual-picker-check{position:absolute;top:6px;right:6px;width:22px;height:22px;border-radius:50%;background:#f4f4f4;color:#111;display:none;place-items:center;font-weight:900}
.visual-picker-card.selected .visual-picker-thumb{border-color:#f4f4f4;box-shadow:0 0 0 2px rgba(255,255,255,.18)}
.visual-picker-card.selected .visual-picker-check{display:grid}
.visual-delete-btn{position:absolute;top:6px;left:6px;width:24px;height:24px;border:0;border-radius:50%;display:grid;place-items:center;background:rgba(0,0,0,.72);color:#fff;font:900 18px/1 inherit;cursor:pointer;z-index:4}
.visual-delete-btn:active{transform:scale(.94)}
.resource-delete-confirm{position:fixed;inset:0;z-index:1000000;display:grid;place-items:center;padding:18px;background:rgba(0,0,0,.58);opacity:0;pointer-events:none;transition:opacity .18s ease}
.resource-delete-confirm.show{opacity:1;pointer-events:auto}
.resource-delete-confirm-card{width:min(360px,100%);border-radius:24px;background:#202020;border:1px solid rgba(255,255,255,.12);box-shadow:0 24px 70px rgba(0,0,0,.55);padding:18px;transform:translateY(10px) scale(.98);transition:transform .18s ease}
.resource-delete-confirm.show .resource-delete-confirm-card{transform:translateY(0) scale(1)}
.resource-delete-confirm-title{font-size:19px;font-weight:900;color:#fff;line-height:1.2;text-align:center}
.resource-delete-confirm-text{margin-top:8px;color:rgba(255,255,255,.68);font-size:14px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.resource-delete-confirm-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}
.resource-delete-confirm-actions button{height:46px;border-radius:16px;font:inherit;font-weight:900;cursor:pointer}
.resource-delete-cancel{border:1px solid rgba(255,255,255,.14);background:#2b2b2b;color:#fff}
.resource-delete-action{border:0;background:#0b63ff;color:#fff}
.resource-delete-confirm-actions button:active{transform:scale(.98)}
.studio-media-column{display:flex;flex-direction:column;gap:8px;min-width:0}
.video-edit-only{display:none}
.studio-frame-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}
/* =====================================================
CSS-БЛОК: .studio-frame-card,.studio-image-tool
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.studio-frame-card,.studio-image-tool{
  min-height:152px;border:0;border-radius:16px;background:#2c2c2c;color:#d7d7d7;
  display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;
  gap:10px;padding:14px 12px 16px;text-align:center;font-family:inherit;cursor:pointer;
}
.view[data-view="tools"].active .studio-frame-card,
.view[data-view="tools"].active .studio-image-tool{
  background:var(--st-bg-3);color:var(--st-dim);
  box-shadow:var(--st-depth-1);
}
.view[data-view="tools"].active .studio-frame-ico{color:var(--st-dim)}
.view[data-view="tools"].active .studio-links-btn{
  background:var(--st-bg-3);color:var(--st-text);
  box-shadow:var(--st-depth-1);
}
.view[data-view="tools"].active .studio-link-icons span{
  background:var(--st-bg-4);border:3px solid var(--st-bg-3);color:var(--st-text);
}
/* =====================================================
CSS-БЛОК: .studio-frame-card span:last-child,.studio-image-tool span:last-child
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.studio-frame-card span:last-child,.studio-image-tool span:last-child{
  align-self:center;font-size:13px;line-height:1.15;font-weight:500;
}

.studio-text-tools .studio-image-tool.text-upload-file-selected{
  position:relative;
  color:#fff;
  border:1px solid rgba(255,255,255,.16);
}

.studio-text-tools .studio-image-tool.text-upload-has-preview{
  background-size:cover;
  background-position:center;
}

.studio-text-tools .studio-image-tool.text-upload-has-preview > *{
  position:relative;
  z-index:1;
}

.studio-text-tools .studio-image-tool.text-upload-has-video-preview{
  position:relative;
  overflow:hidden;
  color:#fff;
  background:#191919;
}

.studio-text-tools .studio-image-tool.text-upload-has-video-preview::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:linear-gradient(180deg,rgba(0,0,0,.04),rgba(0,0,0,.66));
  pointer-events:none;
}

.studio-text-tools .studio-image-tool.text-upload-has-video-preview > *{
  position:relative;
  z-index:2;
}

.studio-text-tools .studio-image-tool .text-upload-video-preview{
  position:absolute;
  inset:0;
  z-index:0;
  width:100%;
  height:100%;
  object-fit:cover;
  pointer-events:none;
}

.studio-text-tools .studio-image-tool[data-text-upload-kind="video"] .studio-frame-ico::after{
  content:"▶";
  font-size:13px;
  font-weight:900;
}

.studio-text-tools .studio-image-tool[data-text-upload-kind="audio"] .studio-frame-ico::after{
  content:"♪";
  font-size:18px;
  font-weight:900;
}

.studio-text-tools .studio-image-tool[data-text-upload-kind="file"] .studio-frame-ico::after{
  content:"TXT";
  font-size:10px;
  font-weight:900;
}
/* =====================================================
CSS-БЛОК: .studio-frame-card.has-frame-preview
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.studio-frame-card.has-frame-preview{
  position:relative;
  overflow:hidden;
  color:#fff;
}
/* =====================================================
CSS-БЛОК: .studio-frame-card.has-frame-preview::after
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.studio-frame-card.has-frame-preview::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.08),rgba(0,0,0,.58));
  z-index:1;
}
/* =====================================================
CSS-БЛОК: .studio-frame-card.has-frame-preview > *:not(.studio-frame-preview)
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.studio-frame-card.has-frame-preview > *:not(.studio-frame-preview){
  position:relative;
  z-index:2;
}
/* =====================================================
CSS-БЛОК: .studio-frame-preview
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.studio-frame-preview{
  position:absolute;
  inset:0;
  z-index:0;
  display:block;
}
.studio-frame-preview,
.studio-frame-preview video,
.studio-frame-preview img{
  width:100%;
  height:100%;
  display:block;
}

.studio-frame-preview video,
.studio-frame-preview img{
  object-fit:cover;
}

/* =====================================================
CSS-БЛОК: .studio-frame-preview video
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.studio-frame-preview video{
  background:#000;
}
.studio-frame-ico{color:#cfcfcf;display:flex;align-items:center;justify-content:center}
.studio-image-tool{min-height:64px;text-align:left;padding:9px 10px 10px;border-radius:13px;gap:6px}
.studio-image-tool span:last-child{align-self:flex-start;font-size:12px;line-height:1.15}
.studio-image-tool svg{width:18px;height:18px}
/* =====================================================
CSS-БЛОК: .studio-links-btn
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.studio-links-btn{
  min-height:92px;border:0;border-radius:16px;background:#2c2c2c;color:#f0f0f0;
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:12px 14px;font-family:inherit;font-size:14px;cursor:pointer;
}
.studio-link-icons{display:flex;align-items:center;gap:4px}
/* =====================================================
CSS-БЛОК: .studio-link-icons span
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.studio-link-icons span{
  width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  background:#444;border:3px solid #3a3a3a;color:#e6e6e6;margin-left:-8px;
}
.studio-link-icons span:first-child{margin-left:0}
.studio-video-composer[data-video-section="edit"] .studio-video-tools{
  gap:12px;
}
.studio-video-composer[data-video-section="edit"] .studio-frame-row{
  display:none;
}
.studio-video-composer[data-video-section="edit"] .video-edit-only{
  display:flex;
}
.studio-video-edit-upload{
  position:relative;
  min-height:128px;
  border:0;
  border-radius:24px;
  background:#2c2c2c;
  color:#f3f3f3;
  overflow:hidden;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:18px 16px;
  font:inherit;
  text-align:center;
  cursor:pointer;
}
 .studio-video-edit-upload-icon{
   display:grid;
   place-items:center;
   color:#fff;
   transform:scale(.72);
}
.studio-video-edit-upload b{
  position:relative;
  z-index:2;
  font-size:14px;
  line-height:1.2;
  font-weight:700;
  color:#fff;
}
.studio-video-edit-upload small{
  position:relative;
  z-index:2;
  color:#cfcfcf;
  font-size:11px;
  line-height:1.2;
}
.studio-video-edit-preview{
  position:absolute;
  inset:0;
  z-index:1;
  display:block;
  background:#111;
}
.studio-video-edit-preview video{
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:.52;
}
.studio-video-edit-preview::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.1),rgba(0,0,0,.58));
}
.studio-video-edit-preview span{
  position:absolute;
  right:12px;
  top:12px;
  z-index:2;
  height:24px;
  padding:0 8px;
  border-radius:999px;
  display:flex;
  align-items:center;
  background:rgba(0,0,0,.58);
  color:#fff;
  font-size:10px;
  font-weight:900;
}
.studio-video-edit-upload.has-video-edit-preview .studio-video-edit-upload-icon{
  position:relative;
  z-index:2;
}
.studio-video-composer[data-video-section="edit"] .studio-links-btn{
  min-height:68px;
  border-radius:18px;
  background:#2c2c2c;
  padding:10px 14px;
  font-size:14px;
  font-weight:700;
}
.studio-video-composer[data-video-section="edit"] .studio-link-icons span{
  width:36px;
  height:36px;
  border-radius:50%;
  background:#444;
  border:3px solid #3a3a3a;
  color:#f1f1f1;
  margin-left:-6px;
}
.studio-video-composer[data-video-section="edit"] .studio-link-icons svg{
  width:16px;
  height:16px;
}
/* Video mode's "Add" control: three always-visible circular icon buttons
   (media/character/object) replacing the old single button + dropdown. */
.video-add-icon-row{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:4px;
}
.video-add-icon-btn{
  position:relative;
  width:44px;
  height:44px;
  flex:0 0 44px;
  padding:0;
  border:0;
  border-radius:50%;
  background:#2c2c2c;
  color:#f0f0f0;
  display:grid;
  place-items:center;
  cursor:pointer;
  overflow:hidden;
}
.view[data-view="tools"].active .video-add-icon-btn{
  background:var(--st-bg-3);color:var(--st-text);box-shadow:var(--st-depth-1);
}
.video-add-icon-btn svg{position:relative;z-index:1}
.video-add-icon-btn .video-reference-control-badge{
  left:auto!important;
  top:auto!important;
  right:-2px!important;
  bottom:-2px!important;
  min-width:14px!important;
  width:14px!important;
  height:14px!important;
  padding:0!important;
  font-size:0!important;
}
.studio-music-tools{display:none}
/* =====================================================
CSS-БЛОК: .studio-prompt-column
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.studio-prompt-column{
  position:relative;min-width:0;display:flex;flex-direction:column;border-left:1px solid rgba(255,255,255,.10);
  padding-left:24px;
}
.view[data-view="tools"].active .studio-prompt-column{border-color:var(--st-border-strong)}
.text-mic-floating{
  position:absolute;top:5px;right:2px;z-index:3;width:38px;height:38px;border-radius:50%;
  border:1px solid rgba(255,255,255,.13);background:#202020;color:#eee;display:grid;place-items:center;cursor:pointer;
}
.studio-video-composer[data-composer-mode="text"] .image-video-only{display:none!important}
.text-mic-floating.rec{
  background:#1687ff;border-color:#46a1ff;color:#fff;box-shadow:0 0 0 4px rgba(22,135,255,.17),0 8px 24px rgba(0,92,210,.35);
  animation:textMicBluePulse 1.15s ease-in-out infinite;
}
.studio-video-composer[data-composer-mode="text"] .studio-prompt-column textarea{padding-right:48px}
.text-recording-bar{
  position:absolute;left:24px;right:48px;top:5px;z-index:2;height:38px;padding:0;
  border:0;background:#202020;display:flex;align-items:center;gap:10px;color:#858585;
}
.text-recording-bar[hidden]{display:none!important}
.text-recording-bar time{font-size:12px;margin-left:auto;font-variant-numeric:tabular-nums;color:#858585}
.text-recording-equalizer{height:26px;flex:1;min-width:60px;display:flex;align-items:center;justify-content:flex-start;gap:4px;overflow:hidden}
.text-recording-equalizer i{width:3px;height:22px;border-radius:99px;background:#858585;transform:scaleY(.18);transition:transform 70ms linear;transform-origin:center}
.studio-prompt-column.text-mic-active textarea{visibility:hidden}
@keyframes textMicBluePulse{50%{box-shadow:0 0 0 7px rgba(22,135,255,.08),0 8px 26px rgba(0,92,210,.42)}}
@media(max-width:900px){.text-recording-bar{left:0}}
/* =====================================================
CSS-БЛОК: .view[data-view="tools"].active .studio-video-composer textarea
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.view[data-view="tools"].active .studio-video-composer textarea{
  width:100%;flex:1 1 auto;min-height:132px;max-height:220px;padding:8px 0;
  background:transparent;border:0;outline:0;resize:none;color:var(--st-text);
  font-size:17px;line-height:1.45;font-family:inherit;
}
.view[data-view="tools"].active .studio-video-composer textarea::placeholder{color:var(--st-mute)}
.studio-prompt-column textarea.has-animated-placeholder::placeholder{color:transparent!important}
.animated-prompt-placeholder{
  position:absolute;left:24px;right:0;top:8px;z-index:1;min-width:0;
  color:#858585;font-size:17px;line-height:1.45;font-family:inherit;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none;
}
.animated-prompt-placeholder[hidden]{display:none!important}
.animated-prompt-placeholder i{display:none;font-style:normal;margin-inline-start:1px}
.animated-prompt-placeholder.is-animated i{display:inline;animation:animatedPromptCursorBlink 1s steps(1,end) infinite}
.studio-video-composer[data-composer-mode="text"] .animated-prompt-placeholder{right:48px}
.studio-prompt-column.text-mic-active .animated-prompt-placeholder{display:none!important}
.studio-prompt-column.voice-editor-fullscreen .animated-prompt-placeholder{left:14px;right:14px;top:calc(env(safe-area-inset-top,0px) + 22px)}
.studio-video-composer.is-compact .animated-prompt-placeholder{left:0}
@media(max-width:900px){.animated-prompt-placeholder{left:0}.studio-video-composer[data-composer-mode="text"] .animated-prompt-placeholder{right:92px}}
@keyframes animatedPromptCursorBlink{0%,49%{opacity:1}50%,100%{opacity:0}}
/* =====================================================
CSS-БЛОК: .studio-control-row
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.studio-control-row{
  display:flex;align-items:center;gap:8px;min-width:0;overflow-x:auto;scrollbar-width:none;
  padding-top:10px;
}
.studio-control-row::-webkit-scrollbar{display:none}
/* =====================================================
CSS-БЛОК: .studio-select-pill
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.studio-select-pill{
  flex:0 0 auto;min-height:44px;border-radius:999px;background:#202020;color:#eeeeee;
  border:1px solid rgba(255,255,255,.13);display:flex;align-items:center;gap:8px;
  padding:0 14px;font-family:inherit;font-size:15px;white-space:nowrap;cursor:pointer;
}
.view[data-view="tools"].active .studio-select-pill{
  background:var(--st-bg-3);color:var(--st-text);
  border:1px solid var(--st-line-2);
  box-shadow:var(--st-depth-1);
}
.view[data-view="tools"].active .studio-select-pill:active{
  box-shadow:var(--st-depth-active);
}
.studio-select-pill.voice-only span{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.studio-select-pill.wide{padding-left:0;min-width:192px;justify-content:center}
.composer-model-icon{
  width:18px;height:18px;flex:0 0 18px;display:grid;place-items:center;overflow:hidden;margin-right:6px;
}
.composer-model-icon .model-brand-logo{
  width:16px !important;height:16px !important;max-width:16px !important;max-height:16px !important
}
.view[data-view="tools"].active .composer-model-icon .model-brand-logo{
  filter:brightness(0) invert(var(--st-logo-invert, 1)) !important;
}
.view[data-view="tools"].active .composer-model-icon .model-brand-logo.svg-current{
  color:var(--st-text, #f3f3f3) !important;
  filter:none !important;
}
.ratio-box[hidden]{display:none !important}
.pill-meter{width:3px;height:24px;border-radius:2px;background:#e8e8e8;box-shadow:5px -4px 0 -1px #e8e8e8,10px 3px 0 -1px #e8e8e8}
.ratio-box{width:22px;height:22px;border-radius:5px;border:2px solid #d8d8d8;display:inline-grid;place-items:center;font-size:8px;font-weight:800;line-height:1;color:#d8d8d8}
.view[data-view="tools"].active .ratio-box{border-color:var(--st-dim);color:var(--st-dim)}
.ratio-box::after{content:attr(data-ratio)}
.image-count-pill{min-width:120px;justify-content:center;font-weight:700}
.image-count-pill b{font-size:15px}
.image-count-pill span{color:#9a9a9a;font-size:18px;line-height:1}
.image-settings-pill{width:48px;min-width:48px;justify-content:center;padding:0;border-radius:50%}
/* =====================================================
CSS-БЛОК: .studio-audio-player
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.studio-audio-player{
  position:fixed;left:12px;right:12px;bottom:calc(92px + env(safe-area-inset-bottom));
  z-index:99990;display:none;align-items:center;gap:7px;margin:0;padding:6px 9px 8px;
  min-height:48px;border-radius:15px;background:rgba(24,24,24,.78);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 14px 42px -24px rgba(0,0,0,.9);color:#f4f4f4;
  max-width:760px;margin-left:auto;margin-right:auto;pointer-events:auto;
}
body:has(.view[data-view="tools"].active) .studio-audio-player{
  background:color-mix(in srgb, var(--st-bg-3, #181818) 78%, transparent);
  border:1px solid var(--st-border, rgba(255,255,255,.08));
  box-shadow:var(--st-depth-2, none);
  color:var(--st-text, #f4f4f4);
}
/* =====================================================
CSS-БЛОК: body:has(.view[data-view="tools"].active) .studio-audio-player
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
body:has(.view[data-view="tools"].active) .studio-audio-player{
  bottom:calc(8px + env(safe-area-inset-bottom));
}
/* =====================================================
CSS-БЛОК: .studio-audio-player.is-visible
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.studio-audio-player.is-visible{
  display:flex;
}
/* =====================================================
CSS-БЛОК: .studio-track-art
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.studio-track-art{
  width:32px;height:32px;border-radius:9px;background:
    radial-gradient(circle at 65% 35%,rgba(200,20,30,.9),transparent 35%),
    linear-gradient(135deg,#231019,#9b1018 48%,#150c12 49%);
  flex:0 0 auto;overflow:hidden;
}
.studio-track-art img{width:100%;height:100%;display:block;object-fit:cover}
.studio-track-title{font-size:12px;font-weight:700;min-width:58px;max-width:none;flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.studio-player-controls{display:flex;align-items:center;gap:2px}
/* =====================================================
CSS-БЛОК: .studio-player-controls button,.studio-player-icon
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.studio-player-controls button,.studio-player-icon{
  width:29px;height:29px;border:0;background:transparent;color:#f4f4f4;
  display:grid;place-items:center;cursor:pointer;padding:0;border-radius:50%;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;
}
.studio-player-controls button:active,.studio-player-icon:active{transform:scale(.94);background:rgba(255,255,255,.10)}
.studio-player-controls button:disabled{opacity:.35;cursor:default}
.studio-time,.studio-duration{display:none;font-size:12px;font-weight:700;color:#eeeeee;white-space:nowrap}
.studio-duration{color:#9a9a9a}
.studio-progress{position:absolute;left:48px;right:12px;bottom:2px;height:5px;border-radius:999px;background:transparent;overflow:hidden;cursor:pointer}
.studio-progress::before{content:"";position:absolute;left:0;right:0;top:50%;height:2px;border-radius:999px;background:#5a5a5a;transform:translateY(-50%)}
.studio-progress span{position:absolute;left:0;top:50%;display:block;width:0;height:2px;border-radius:999px;background:#efefef;transform:translateY(-50%)}
.studio-audio-player>#studioVolumeBtn,.studio-audio-player>.studio-volume-popover{display:none!important}
.studio-player-icon:last-child{font-size:22px;color:#bdbdbd;line-height:1;background:transparent}
body:has(.view[data-view="tools"].active) .studio-player-controls button,
body:has(.view[data-view="tools"].active) .studio-player-icon{color:var(--st-text, #f4f4f4)}
body:has(.view[data-view="tools"].active) .studio-time,
body:has(.view[data-view="tools"].active) .studio-duration{color:var(--st-dim, #eeeeee)}
body:has(.view[data-view="tools"].active) .studio-progress::before{background:var(--st-line-2, #5a5a5a)}
body:has(.view[data-view="tools"].active) .studio-progress span{background:var(--st-text, #efefef)}
/* =====================================================
CSS-БЛОК: .studio-volume-popover
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.studio-volume-popover{
  position:absolute;right:42px;bottom:44px;width:132px;padding:8px 10px;border-radius:14px;
  background:#202020;border:1px solid rgba(255,255,255,.12);box-shadow:0 18px 34px -18px rgba(0,0,0,.9);z-index:1;
}
body:has(.view[data-view="tools"].active) .studio-volume-popover{
  background:var(--st-bg-3, #202020);border:1px solid var(--st-border, rgba(255,255,255,.12));
}
.studio-volume-popover:not([hidden]){display:block}
.studio-volume-popover input{width:100%;display:block;accent-color:#efefef}
.image-seed-pop .image-size-sheet-title{font-size:15px;font-weight:700}
.image-seed-row .image-size-label{display:flex;align-items:center;gap:8px}
.image-seed-hex{font-size:13px;color:var(--st-dim, #d8d8d8)}
.image-seed-head{position:relative;display:flex;align-items:center;gap:8px;padding:8px 10px 12px;font-size:15px;font-weight:800;color:var(--st-text, #f4f4f4)}
/* =====================================================
CSS-БЛОК: .image-seed-back,.image-seed-info
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.image-seed-back,.image-seed-info{
  width:28px;height:28px;border:0;border-radius:50%;background:var(--st-bg-3, rgba(255,255,255,.06));
  color:var(--st-text, #f4f4f4);display:grid;place-items:center;padding:0;font:inherit;cursor:pointer
}
.image-seed-info{font-size:14px}
/* =====================================================
CSS-БЛОК: .image-seed-tooltip
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.image-seed-tooltip{
  position:absolute;left:10px;right:10px;top:42px;z-index:2;padding:10px 12px;border-radius:12px;
  background:var(--st-bg-3, #202020);border:1px solid var(--st-border, rgba(255,255,255,.12));box-shadow:0 18px 34px -18px rgba(0,0,0,.9);
  color:var(--st-dim, #dcdcdc);font-size:12px;line-height:1.35;font-weight:500
}
.image-seed-tooltip[hidden]{display:none}
/* =====================================================
CSS-БЛОК: .image-seed-input
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.image-seed-input{
  width:calc(100% - 20px);margin:0 10px 8px;min-height:48px;border-radius:12px;
  border:1px solid var(--st-border, rgba(255,255,255,.14));background:var(--st-bg-2, rgba(255,255,255,.04));
  color:var(--st-text, #f4f4f4);font:inherit;font-size:15px;padding:0 14px;outline:none;box-sizing:border-box
}
.image-seed-input:focus{border-color:var(--st-border-strong, rgba(255,255,255,.32));background:var(--st-bg-3, rgba(255,255,255,.07))}
.image-seed-input:disabled{opacity:.48;cursor:not-allowed}
.image-seed-disabled-note{margin:-2px 12px 10px;color:var(--st-mute, rgba(255,255,255,.52));font-size:12px;line-height:1.35}
.recraft-tool-row{cursor:default}
.recraft-tool-row .image-size-check{font-size:12px;color:var(--st-dim, rgba(255,255,255,.72))}
/* =====================================================
CSS-БЛОК: .studio-generate
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.studio-generate{
  flex:0 0 auto;min-height:48px;border:0;border-radius:999px;padding:0 22px;
  background:#244f86;color:#a7a7a7;font-family:inherit;font-size:15px;font-weight:700;
  cursor:pointer;white-space:nowrap;
}
.studio-generate:not(:disabled){background:#2f6fbd;color:#fff}
.studio-generate:disabled{cursor:not-allowed;opacity:.9}
.studio-send-arrow{display:none;width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.studio-video-composer[data-composer-mode="text"] .studio-generate{
  position:absolute;
  right:0;
  bottom:0;
  z-index:9;
  width:40px;
  min-width:40px;
  height:40px;
  min-height:40px;
  box-sizing:border-box;
  padding:0;
  display:grid;
  place-items:center;
  border-radius:50%;
}
.studio-video-composer[data-composer-mode="text"] .studio-generate-label{display:none}
.studio-video-composer[data-composer-mode="text"] .studio-send-arrow{display:block}
.studio-video-composer[data-composer-mode="text"] .studio-control-row{position:relative;padding-right:92px!important}
.studio-video-composer[data-composer-mode="text"] .studio-control-row::after{
  content:"";position:absolute;right:0;bottom:0;z-index:7;width:88px;height:40px;
  border-radius:22px 0 0 22px;background:#202020;pointer-events:none
}
.studio-video-composer[data-composer-mode="text"] .text-mic-floating{
  top:auto;right:44px;bottom:0;z-index:14;width:40px;height:40px;box-sizing:border-box;background:#202020
}
.studio-input.composer-input-window[data-composer-mode="text"] .studio-control-row{position:sticky}
.studio-input.composer-input-window[data-composer-mode="text"] textarea:not(:placeholder-shown)~.text-mic-floating{opacity:1;background:#202020}

@media(max-width:900px){
  .studio-video-composer[data-composer-mode="text"] .studio-prompt-column textarea{padding-right:92px!important}
  .studio-video-composer[data-composer-mode="text"] .studio-control-row{position:static!important;padding-right:0!important}
  .studio-video-composer[data-composer-mode="text"] .studio-control-row::after{top:0;right:0;bottom:auto;width:88px;height:40px;border-radius:0 0 0 22px}
  .studio-video-composer[data-composer-mode="text"] .studio-generate{top:0;right:0;bottom:auto}
  .studio-video-composer[data-composer-mode="text"] .text-mic-floating{top:0;right:44px;bottom:auto}
  .studio-mode-tab{height:46px;padding:0 14px;font-size:13px}
  .studio-mini-tab{width:44px;height:38px}
  .studio-mode-tabs{
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .studio-mode-tabs::-webkit-scrollbar{display:none}
  .studio-mode-tab{
    flex:0 0 auto;
    white-space:nowrap;
  }
/* =====================================================
CSS-БЛОК: .studio-control-row
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
  .studio-control-row{
    flex-wrap:nowrap;
    overflow-x:auto;
    overflow-y:hidden;
    gap:8px;
    padding-top:10px;
    padding-bottom:2px;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x proximity;
  }
  .studio-control-row::-webkit-scrollbar{display:none}
  .studio-control-row .studio-select-pill,
  .studio-control-row .image-count-pill,
  .studio-control-row .image-settings-pill,
  .studio-control-row .studio-generate{
    flex:0 0 auto;
    min-height:34px;
    height:34px;
    padding:0 14px;
    font-size:11px;
    line-height:1;
    gap:5px;
    white-space:nowrap;
    scroll-snap-align:start;
  }
/* =====================================================
CSS-БЛОК: .studio-control-row .studio-select-pill.wide
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
  .studio-control-row .studio-select-pill.wide{
    order:0;
    width:auto;
    min-width:auto;
    justify-content:center;
    margin-right:0;
  }
  .studio-control-row .studio-select-pill svg,
  .studio-control-row .image-settings-pill svg{
    width:16px;
    height:16px;
  }
  .studio-control-row .image-count-pill{min-width:88px;justify-content:center}
  .studio-control-row .image-count-pill b{font-size:11px;line-height:1}
  .studio-control-row .image-count-pill span{font-size:13px;line-height:1}
  .studio-control-row .image-settings-pill{width:34px;min-width:34px;padding:0;justify-content:center}
  .studio-control-row .studio-generate{margin-left:0;border-radius:999px}
  .studio-video-panel{grid-template-columns:1fr;padding:14px;border-radius:22px;gap:12px}
  .image-visual-grid,
  .studio-frame-row,
  .vgen-actions{grid-template-columns:repeat(2,minmax(0,1fr))}
  .studio-video-composer[data-composer-mode="music"] .studio-video-panel{padding:18px 14px}
  .studio-prompt-column{border-left:0;border-top:1px solid rgba(255,255,255,.10);padding-left:0;padding-top:12px}
  .studio-video-composer[data-composer-mode="music"] .studio-prompt-column{border-top:0;padding-top:0}
  .studio-video-composer[data-composer-mode="voice"] .studio-prompt-column{
    border-left:0;
    border-top:1px solid rgba(255,255,255,.10);
    padding-left:0;
    padding-top:12px;
  }
  .view[data-view="tools"].active .studio-video-composer textarea{min-height:86px;font-size:15px}
  .studio-frame-card,.vgen-btn{min-height:74px}
  .studio-image-tool{min-height:74px;padding:10px 9px;border-radius:12px}
  .studio-image-tool span:last-child{font-size:11px}
  .studio-links-btn,.vgen-upload-row{min-height:58px}
  .studio-audio-player{gap:4px;padding:5px 7px 8px;overflow:visible;border-radius:14px;flex-wrap:nowrap;min-height:46px;left:7px;right:7px}
  .studio-track-art{width:30px;height:30px}
  .studio-track-title{min-width:42px;max-width:none;flex:1 1 auto;font-size:11px}
  .studio-player-controls{gap:0}
  .studio-player-controls button,.studio-player-icon{width:27px;height:27px}
  .studio-progress{left:43px;right:10px}
  .studio-volume-popover{right:42px;bottom:38px}
}

/* Hide bottom nav while in Pro Studio? Keep it but lighten background */

/* ===== Bottom sheet (Plus actions) ===== */
/* =====================================================
CSS-БЛОК: .sheet-overlay
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.sheet-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.55);
  display:none;align-items:flex-end;justify-content:center;
  z-index:120;opacity:0;transition:opacity .25s;
}
.sheet-overlay.show{display:flex;opacity:1}
/* =====================================================
CSS-БЛОК: .sheet
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.sheet{
  width:min(480px,100%);background:#141518;
  border:1px solid var(--st-line-2,rgba(255,255,255,.1));border-bottom:none;
  border-radius:22px 22px 0 0;padding:8px 10px calc(14px + env(safe-area-inset-bottom));
  transform:translateY(40px);transition:transform .28s cubic-bezier(.2,.8,.2,1);
  box-shadow:0 -24px 60px -10px rgba(0,0,0,.9);
}
.sheet-overlay.show .sheet{transform:translateY(0)}
.sheet-grab{width:42px;height:4px;border-radius:2px;background:rgba(255,255,255,.18);margin:6px auto 10px}
.sheet-list{display:flex;flex-direction:column;gap:2px;padding:4px}
/* =====================================================
CSS-БЛОК: .sheet-list button
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.sheet-list button{
  display:flex;align-items:center;gap:12px;width:100%;
  padding:13px 14px;background:transparent;border:none;color:#F3F3F3;
  font-family:inherit;font-size:14.5px;text-align:left;cursor:pointer;
  border-radius:12px;transition:background .15s;
}
.sheet-list button:hover,.sheet-list button:active{background:#24262B}
.sheet-list .si{width:32px;height:32px;border-radius:10px;background:#24262B;color:#F3F3F3;display:grid;place-items:center;font-size:17px;flex:0 0 auto}
.sheet-div{height:1px;background:rgba(255,255,255,.06);margin:6px 14px}

/* ===== History drawer ===== */
/* =====================================================
CSS-БЛОК: .hist-drawer
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.hist-drawer{
  position:fixed;top:0;left:0;bottom:0;width:84%;max-width:320px;
  background:var(--st-bg, #0B0B0D);border-right:1px solid var(--st-line);
  transform:translateX(-100%);transition:transform .28s cubic-bezier(.2,.8,.2,1);
  z-index:130;padding:14px 10px env(safe-area-inset-bottom);overflow-y:auto;
  display:flex;flex-direction:column;gap:14px;
}
.hist-drawer.show{transform:translateX(0)}
/* =====================================================
CSS-БЛОК: .hd-backdrop
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.hd-backdrop{
  position:fixed;inset:0;background:rgba(0,0,0,.5);
  opacity:0;pointer-events:none;transition:opacity .25s;z-index:125;
}
.hd-backdrop.show{opacity:1;pointer-events:auto}
/* =====================================================
CSS-БЛОК: .hd-head
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.hd-head{
  position:sticky;
  top:0;
  z-index:20;
  display:flex;
  align-items:center;
  justify-content:center;
  height:56px;
  background:color-mix(in srgb, var(--st-bg, #0B0B0D) 92%, transparent);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}
/* =====================================================
CSS-БЛОК: .hd-close
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.hd-close{
  position:absolute;
  left:12px;
  top:50%;
  transform:translateY(-50%);
  width:36px;
  height:36px;
  border:none;
  background:transparent;
  color:var(--st-text, #F3F3F3);
  font-size:26px;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  z-index:21;
}
/* =====================================================
CSS-БЛОК: .hd-close:hover
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.hd-close:hover {
  background: var(--st-bg-3, #17181C);
  color: var(--st-text, #F3F3F3);
}
/* =====================================================
CSS-БЛОК: .hd-title
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.hd-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--st-text, #F3F3F3);
  letter-spacing: .3px;
  flex: 1;
  text-align: center;
  pointer-events: none;
}
.hd-user-card{margin:0 6px;padding:12px;border:1px solid var(--st-border, rgba(255,255,255,.08));border-radius:14px;background:var(--st-bg-2, #131315);color:var(--st-text, #f3f3f3);box-shadow:var(--st-depth-1, none)}.hd-user-main{display:flex;align-items:center;gap:10px;min-width:0}.hd-user-avatar{width:38px;height:38px;flex:0 0 38px;display:grid;place-items:center;overflow:hidden;border-radius:12px;background:var(--st-bg-3, #24262b);color:var(--st-text, #fff);font-size:13px;font-weight:750}.hd-user-avatar img{width:100%;height:100%;object-fit:cover}.hd-user-identity{display:flex;flex-direction:column;min-width:0}.hd-user-identity strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;line-height:1.3}.hd-user-identity span{margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--st-mute, #85858d);font-size:10.5px}.hd-user-stats{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:11px;padding-top:10px;border-top:1px solid var(--st-line, rgba(255,255,255,.06))}.hd-user-stats div{display:flex;flex-direction:column;gap:3px;min-width:0}.hd-user-stats span{color:var(--st-mute, #777780);font-size:9.5px;line-height:1.2}.hd-user-stats b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--st-text, #ededee);font-size:12px;font-weight:650}
/* =====================================================
CSS-БЛОК: .hd-new
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.hd-new{
  display:flex;align-items:center;gap:8px;margin:0 6px;
  padding:10px 12px;border-radius:12px;
  background:var(--st-bg-3, #17181C);border:1px solid var(--st-line-2);color:var(--st-text, #F3F3F3);
  font-family:inherit;font-size:13px;font-weight:500;cursor:pointer;
  box-shadow:var(--st-depth-1, none);
}
.hd-new:hover{background:var(--st-bg-4, #24262B)}
.hd-section{display:flex;flex-direction:column;gap:2px;padding:0 4px}
.hd-type-section{display:flex;flex-direction:column;gap:2px;padding:4px 0 8px;border-bottom:1px solid var(--st-line, rgba(255,255,255,.04))}
.hd-type-section:last-child{border-bottom:0}
.hd-label{font-size:10.5px;letter-spacing:1.2px;color:var(--st-mute, #6b6b75);text-transform:uppercase;padding:8px 10px 4px}
/* =====================================================
CSS-БЛОК: .hd-item
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.hd-item{
  text-align:left;padding:10px 12px;border-radius:10px;
  background:transparent;border:none;color:var(--st-text, #F3F3F3);font-family:inherit;
  font-size:13.5px;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.hd-item:hover{background:var(--st-bg-3, #17181C)}

/* Pro Studio chat image result */
.msg .bubble img.gen-img{display:block;max-width:100%;border-radius:12px;margin-top:4px}
.gen-img-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.gen-img-grid .gen-img{width:100%;height:auto;margin:0}
.gen-media-list{display:flex;flex-direction:column;gap:10px;margin-top:8px}
/* =====================================================
CSS-БЛОК: .gen-media-card
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.gen-media-card{
  position:relative;
  overflow:visible;
  border-radius:0;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}
.gen-media-card .gen-img-open{width:100%}
/* =====================================================
CSS-БЛОК: .gen-result-actions
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.gen-result-actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:8px;
}
/* =====================================================
CSS-БЛОК: .gen-action-btn
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.gen-action-btn{
  min-height:34px;
  padding:0 12px;
  border:0;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  background:var(--st-bg-3, rgba(255,255,255,.12));
  color:var(--st-text, #fff);
  font-size:12px;
  font-weight:700;
  cursor:pointer;
  text-decoration:none;
  box-shadow:var(--st-depth-1, none);
}
.generation-action-icon{width:16px;height:16px;flex:0 0 16px;display:block}
/* =====================================================
CSS-БЛОК: .gen-telegram-btn
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.gen-telegram-btn{
  background:rgba(47,111,189,.96);
  color:#fff;
}
.gen-action-btn:active{transform:scale(.98)}
.gen-video,
.gen-audio{
  display:block;
  width:100%;
}
.gen-video{max-height:360px;background:transparent;border-radius:12px}
.gen-audio{padding:10px}
/* =====================================================
CSS-БЛОК: .gen-file-card
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.gen-file-card{
  min-height:64px;
  padding:14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.gen-file-card .gen-result-actions{margin-top:0;flex-shrink:0}
.gen-file-label{font-size:14px;color:#f3f3f3}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(239,68,68,.55)}50%{box-shadow:0 0 0 10px rgba(239,68,68,0)}}

/* ===== Compact model pill & history rows (TZ rev) ===== */
.sb-brand-sm{padding:4px 10px;font-size:12px;gap:6px;border-radius:14px;height:28px}
.sb-brand-sm .sb-brand-name{font-weight:600;letter-spacing:.2px}
.hd-item-row{display:flex;align-items:center;gap:4px;padding:0 8px}
.hd-item-row .hd-item{flex:1;text-align:left}
.hd-item.act{background:rgba(255,255,255,.06)}
/* =====================================================
CSS-БЛОК: .hd-more
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.hd-more{
  margin:2px 8px 0;
  min-height:34px;
  border:0;
  border-radius:10px;
  background:rgba(255,255,255,.045);
  color:rgba(255,255,255,.66);
  font-size:12px;
  font-weight:700;
  text-align:left;
  padding:0 12px;
  cursor:pointer;
}
.hd-more:active{transform:scale(.99)}
.hd-del{background:transparent;border:0;color:#888;font-size:18px;line-height:1;padding:6px 8px;cursor:pointer;border-radius:6px}
.hd-del:hover{background:rgba(255,255,255,.06);color:#fff}

/* ===== Shop redesign ===== */
.balance-usd{margin-top:2px;font-size:11.5px;color:var(--text-mute);font-weight:500;letter-spacing:.2px}

.shop-balance{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;
  padding:16px 18px;margin:8px 0 14px;border-radius:18px;
  background:linear-gradient(140deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  border:1px solid var(--bd);box-shadow:0 8px 24px -16px rgba(0,0,0,.5)}
.sb-left{display:flex;flex-direction:column;gap:2px}
.sb-label{font-size:11px;letter-spacing:.6px;text-transform:uppercase;color:var(--text-mute)}
.sb-val{font-size:26px;font-weight:700;letter-spacing:-.5px;color:var(--text);display:flex;align-items:baseline;gap:6px}
.sb-bolt{font-size:18px}
.sb-usd{font-size:12px;color:var(--text-mute)}
.sb-rate{font-size:11px;color:var(--text-mute);padding:5px 9px;border:1px solid var(--bd);border-radius:999px;background:rgba(255,255,255,.03)}

.sub-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;margin:8px 0 18px}
@media(min-width:760px){.sub-grid{grid-template-columns:1fr 1fr;gap:14px}}
.sub-card{position:relative;padding:14px 10px 12px;border-radius:18px;
  background:linear-gradient(160deg,#1f1f1f,#0e0e0e);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 18px 40px -22px rgba(0,0,0,.7);
  display:flex;flex-direction:column;gap:10px;overflow:hidden;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  animation:subFade .5s ease}
.sub-card::before{content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;
  background:radial-gradient(circle at 20% 0%,rgba(255,255,255,.08),transparent 60%)}
.sub-card:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.16);box-shadow:0 22px 50px -22px rgba(0,0,0,.85)}
.sub-card-gold{background:linear-gradient(160deg,#2a2010,#0e0e0e);border-color:rgba(201,168,76,.35)}
.sub-card-gold::before{background:radial-gradient(circle at 20% 0%,rgba(201,168,76,.18),transparent 65%)}
.sub-badge{position:absolute;top:14px;right:14px;background:#e85d3a;color:#fff;font-size:11px;font-weight:700;letter-spacing:.5px;padding:4px 9px;border-radius:999px;box-shadow:0 4px 12px -4px rgba(232,93,58,.7);z-index:1}
.sub-card-gold .sub-badge{background:linear-gradient(135deg,#c9a84c,#f0d78c);color:#1a1407}
.sub-title{font-size:14px;font-weight:700;letter-spacing:-.2px;color:var(--text);position:relative;z-index:1}
.sub-period{font-size:11px;color:var(--text-mute);position:relative;z-index:1}
.sub-prices{display:flex;flex-direction:column;gap:2px;position:relative;z-index:1}
.sub-price-now{font-size:18px;font-weight:700;color:var(--text);letter-spacing:-.5px}
.sub-price-now .sep{color:var(--text-mute);margin:0 4px;font-weight:400}
.sub-price-old{font-size:12px;color:var(--text-mute);text-decoration:line-through;text-decoration-color:rgba(232,93,58,.7);text-decoration-thickness:1.5px}
.sub-perks{list-style:none;margin:6px 0 4px;padding:0;display:flex;flex-direction:column;gap:6px;position:relative;z-index:1}
.sub-perks li{font-size:11px;line-height:1.35;color:var(--text-dim,#bbb);padding-left:15px;position:relative}
.sub-perks li::before{content:"✓";position:absolute;left:0;top:0;color:#4ade80;font-weight:700;font-size:12px}
.sub-card-gold .sub-perks li::before{color:#f0d78c}
.sub-cta{margin-top:6px;padding:10px 8px;border-radius:12px;border:0;cursor:pointer;
  background:#fff;color:#0a0a0a;font-weight:700;font-size:14px;letter-spacing:.2px;
  transition:transform .15s ease, box-shadow .2s ease;position:relative;z-index:1}
.sub-cta:hover{box-shadow:0 8px 22px -8px rgba(255,255,255,.4)}
.sub-cta:active{transform:scale(.98)}
.sub-card-gold .sub-cta{background:linear-gradient(135deg,#f0d78c,#c9a84c);color:#1a1407}
.paypal-subscribe-panel{position:relative;margin:12px 0 20px;padding:14px;border-radius:14px;
  background:rgba(255,255,255,.04);border:1px solid var(--bd);z-index:1}
.paypal-subscribe-title{font-size:14px;font-weight:700;color:var(--text)}
.paypal-subscribe-note{font-size:11.5px;color:var(--text-mute);margin:3px 0 12px}
.paypal-subscribe-wrap{position:relative;z-index:1;min-height:45px;margin-top:6px}
.paypal-subscribe-wrap:empty{display:none}
.paypal-subscribe-panel .paypal-subscribe-wrap:not([hidden]):empty{display:block}
@keyframes subFade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

.tok-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:6px 0 14px}
@media(min-width:520px){.tok-grid{grid-template-columns:repeat(3,1fr)}}
.tok-card{display:flex;flex-direction:column;align-items:center;gap:2px;padding:16px 10px;border-radius:16px;
  background:rgba(255,255,255,.04);border:1px solid var(--bd);cursor:pointer;
  transition:transform .15s ease, background .2s ease, border-color .2s ease;animation:subFade .4s ease}
.tok-card:hover{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.18);transform:translateY(-2px)}
.tok-card:active{transform:scale(.97)}
.tok-amount{font-size:22px;font-weight:700;letter-spacing:-.5px;color:var(--text)}
.tok-unit{font-size:13px;color:var(--text-mute);margin-top:-2px}
.tok-price{margin-top:6px;font-size:14px;font-weight:600;color:#fff;padding:5px 12px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid var(--bd)}

.admin-cta{width:100%;display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:14px;margin:6px 0 18px;border-radius:14px;cursor:pointer;
  background:transparent;border:1px dashed rgba(255,255,255,.18);color:var(--text);
  transition:background .2s ease, border-color .2s ease}
.admin-cta:hover{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.3)}
.admin-cta span{font-size:14px;font-weight:600}
.admin-cta small{font-size:11.5px;color:var(--text-mute)}

/* ===== Pay view ===== */
.pay-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:4px 0 14px}
.pay-back{width:36px;height:36px;display:flex;align-items:center;justify-content:center;
  border-radius:10px;background:rgba(255,255,255,.05);border:1px solid var(--bd);cursor:pointer;color:var(--text)}
.pay-back:hover{background:rgba(255,255,255,.09)}
.pay-head-title{font-size:16px;font-weight:700;color:var(--text)}
.pay-user{display:flex;align-items:center;gap:12px;padding:14px;border-radius:16px;
  background:rgba(255,255,255,.04);border:1px solid var(--bd);margin-bottom:12px}
.pay-user .avatar{width:42px;height:42px;font-size:14px}
.pay-user-name{font-size:14px;font-weight:600;color:var(--text)}
.pay-user-handle{font-size:12px;color:var(--text-mute)}
.pay-summary{padding:4px 16px;border-radius:16px;background:rgba(255,255,255,.04);border:1px solid var(--bd);margin-bottom:18px}
.pay-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid var(--bd)}
.pay-row:last-child{border-bottom:0}
.pay-row-k{font-size:12.5px;color:var(--text-mute)}
.pay-row-v{font-size:14px;color:var(--text);font-weight:500;text-align:right}
.pay-row-v-strong{font-weight:600}
.pay-row-total .pay-row-v{font-size:18px;font-weight:700;letter-spacing:-.3px}
.pay-usd{display:block;font-size:11px;color:var(--text-mute);font-weight:400;margin-top:2px}
.pay-methods{display:flex;flex-direction:column;gap:10px;margin:6px 0 20px}
.pm-card{display:flex;align-items:center;gap:14px;padding:14px;border-radius:14px;
  background:linear-gradient(135deg,rgba(255,255,255,.05),rgba(255,255,255,.02));
  border:1px solid var(--bd);cursor:pointer;text-align:left;color:var(--text);width:100%;
  transition:transform .15s ease, border-color .2s ease, box-shadow .25s ease;animation:subFade .35s ease}
.pm-card:hover{border-color:rgba(255,255,255,.22);box-shadow:0 10px 28px -16px rgba(0,0,0,.6);transform:translateY(-1px)}
.pm-card:active{transform:scale(.985)}
.pm-ico{width:44px;height:44px;display:flex;align-items:center;justify-content:center;
  font-size:22px;border-radius:12px;background:rgba(255,255,255,.06);border:1px solid var(--bd)}
.pm-body{flex:1;min-width:0}
.pm-title{font-size:14px;font-weight:600;color:var(--text)}
.pm-sub{font-size:11.5px;color:var(--text-mute);margin-top:2px}
.pm-arr{color:var(--text-mute);font-size:18px}

/* ===== Subscription state & modals ===== */
/* =====================================================
CSS-БЛОК: .sub-cta-active
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.sub-cta-active{
  background:#fff !important;
  color:#0a0a0a !important;
  font-weight:700;
  cursor:default;
  box-shadow:none;
}

/* =====================================================
CSS-БЛОК: .sub-card-gold .sub-cta-active
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.sub-card-gold .sub-cta-active{
  background:linear-gradient(135deg,#f0d78c,#c9a84c) !important;
  color:#1a1407 !important;
}
/* =====================================================
CSS-БЛОК: .sub-countdown
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.sub-countdown{
  margin:8px 0 4px;
  padding:0;
  border-radius:0;
  background:transparent;
  border:none;
}
/* =====================================================
CSS-БЛОК: .sub-cd-label
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.sub-cd-label{
  display:none;
}
/* =====================================================
CSS-БЛОК: .sub-cd-val
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.sub-cd-val{
  font-size:13px;
  font-weight:600;
  color:#fff;
  margin-top:0;
  line-height:1.35;
}
/* =====================================================
CSS-БЛОК: .sub-card-gold .sub-cd-val
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.sub-card-gold .sub-cd-val{
  color:#fff;
}
.pro-badge{cursor:pointer;user-select:none}
.pro-badge:active{transform:scale(.94)}
.sub-info-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.sub-info-grid > div{padding:10px 12px;border-radius:12px;background:var(--surface);border:1px solid var(--border)}
.sub-info-grid .k{font-size:11px;color:var(--text-dim);text-transform:uppercase;letter-spacing:.8px}
.sub-info-grid .v{font-size:14px;font-weight:700;margin-top:2px}

/* Edit profile & pickers */
.ep-label{display:block;font-size:12px;color:var(--text-dim);text-transform:uppercase;letter-spacing:1px;margin-bottom:8px}
.ep-input{width:100%;padding:12px 14px;border-radius:12px;background:var(--surface);border:1px solid var(--border-strong);color:var(--text);font-size:14px;outline:none}
.ep-input:focus{border-color:var(--primary)}
.avatar-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.av-opt{width:100%;aspect-ratio:1;padding:0;border-radius:14px;overflow:hidden;background:var(--surface);border:2px solid var(--border);cursor:pointer;display:grid;place-items:center;color:var(--text-dim);font-weight:700;font-size:12px}
.av-opt img{width:100%;height:100%;object-fit:cover;display:block}
.av-opt.sel{border-color:var(--primary);box-shadow:0 0 0 2px rgba(16,163,127,.25)}
.theme-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.th-opt{padding:6px;border-radius:14px;background:var(--surface);border:2px solid var(--border);cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:6px}
.th-opt.sel{border-color:var(--primary)}
.th-sw{width:100%;aspect-ratio:1;border-radius:10px;display:grid;place-items:center;border:1px solid var(--border)}
.th-sw-inner{width:60%;height:60%;border-radius:8px}
.th-lbl{font-size:11px;color:var(--text-dim)}
.ep-section-title{margin:20px 0 12px;padding-top:16px;border-top:1px solid var(--border);font-size:16px;font-weight:750}.profile-color-field{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;padding:11px;border-radius:13px;background:var(--surface);border:1px solid var(--border)}.profile-color-field>span:first-child{font-size:12px;color:var(--surface-text,var(--text-dim))}.profile-color-field>span:last-child{display:flex;align-items:center;gap:8px}.profile-color-field input[type=color]{width:38px;height:32px;padding:2px;border:1px solid var(--border-strong);border-radius:8px;background:transparent;cursor:pointer}.profile-color-field output{font:11px ui-monospace,SFMono-Regular,monospace;color:var(--surface-text,var(--text))}.profile-reset{width:100%;margin-top:13px;padding:11px;border:1px solid var(--border-strong);border-radius:12px;background:transparent;color:var(--text);font-weight:650;cursor:pointer}.row,.mini,.tool,.hist-item,.profile-color-field{--local-text:var(--surface-text,var(--text))}.row .label>span,.mini .v,.tool h4,.hist-title{color:var(--local-text)}#homeUserName,#profileUserName{color:var(--nickname-color,var(--text))}.btn-primary,.topup,.gen-pill.act,.chat-send,.pack button{color:var(--button-text,#fff)}
@media(max-width:380px){.theme-grid{grid-template-columns:repeat(3,1fr)}}

/* Native scroll-snap, matching the hero carousel above. */
.home-quick-tools{cursor:grab;user-select:none;touch-action:auto}.home-quick-tools.is-dragging{cursor:grabbing}.home-quick-track{display:flex;width:100%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}.home-quick-track::-webkit-scrollbar{display:none}.home-quick-track .home-quick-card{flex:0 0 100%;width:100%;scroll-snap-align:center;cursor:inherit;transition:none}.home-quick-track .home-quick-card:active{transform:none}.home-quick-tools.is-swiping .home-quick-card{opacity:1;transform:none}

/* Referrals */
.ref-title{display:flex;align-items:center;gap:9px;margin:6px 0 16px;font-size:17px}.ref-title svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.ref-link-box{display:flex;align-items:center;gap:8px;padding:7px 7px 7px 14px;border-radius:12px;background:var(--surface);border:1px solid var(--border-strong);font-size:12px;color:var(--text);font-family:ui-monospace,SFMono-Regular,Menlo,monospace}.ref-link-box>span{min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ref-copy{width:34px;height:34px;flex:0 0 34px;display:grid;place-items:center;border:0;border-radius:9px;background:var(--surface-2,var(--border));color:var(--text);cursor:pointer}.ref-copy:active{transform:scale(.94)}.ref-copy svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8}.ref-summary{display:flex;align-items:center;justify-content:space-between;margin-top:10px;padding:10px 12px;border-radius:12px;background:var(--surface);border:1px solid var(--border);font-size:12px;color:var(--text-dim)}.ref-summary b{font-size:15px;color:var(--text)}.ref-rules{display:inline-block;margin-top:13px;color:var(--text-dim);font-size:12px;text-decoration:underline;text-underline-offset:3px}
.ref-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}
.ref-stats > div{padding:10px;border-radius:12px;background:var(--surface);border:1px solid var(--border);text-align:center}
.ref-stats .k{font-size:10px;color:var(--text-dim);text-transform:uppercase;letter-spacing:.8px}
.ref-stats .v{font-size:15px;font-weight:800;margin-top:2px}

/* Modal buttons (reused) */
.btn-primary,.btn-ghost{border:none;cursor:pointer;padding:12px 14px;border-radius:12px;font-size:14px;font-weight:600}
.btn-primary{background:var(--primary);color:#fff}
.btn-ghost{background:var(--surface);color:var(--text);border:1px solid var(--border)}

.knowledge-workspace-modal[hidden]{display:none!important}.knowledge-workspace-modal{position:fixed;z-index:100500;inset:0;display:flex;align-items:stretch;justify-content:center;padding:12px;background:rgba(0,0,0,.68);opacity:0;pointer-events:none;transition:opacity .22s ease;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}.knowledge-workspace-modal.show{opacity:1;pointer-events:auto}.knowledge-workspace-shell{position:relative;width:min(1240px,100%);height:100%;overflow:hidden;border:1px solid var(--border-strong);border-radius:24px;background:var(--bg);box-shadow:0 30px 100px rgba(0,0,0,.5);transform:translateY(16px) scale(.985);transition:transform .25s ease}.knowledge-workspace-modal.show .knowledge-workspace-shell{transform:none}.knowledge-workspace-shell iframe{display:block;width:100%;height:100%;border:0;background:var(--bg)}.knowledge-workspace-close{position:absolute;z-index:8;right:14px;top:14px;display:grid;place-items:center;width:40px;height:40px;border:1px solid var(--border-strong);border-radius:50%;background:rgba(24,24,24,.88);color:#eee;font-size:25px;line-height:1;cursor:pointer;backdrop-filter:blur(14px)}@media(max-width:700px){.knowledge-workspace-modal{padding:0}.knowledge-workspace-shell{border:0;border-radius:0}.knowledge-workspace-close{right:10px;top:calc(10px + env(safe-area-inset-top))}}

/* ===== Shop image safety fix ===== */
.view[data-view="shop"] img,
.view[data-view="pay"] img{
  display:block;
  max-width:100%;
  height:auto;
  object-fit:cover;
}

.view[data-view="shop"] .avatar,
.view[data-view="pay"] .avatar{
  overflow:hidden;
  flex:0 0 auto;
}

.view[data-view="shop"] .avatar img,
.view[data-view="pay"] .avatar img{
  width:100%;
  height:100%;
  max-width:100%;
  max-height:100%;
  object-fit:cover;
  border-radius:inherit;
}

.view[data-view="shop"] .user-card img,
.view[data-view="shop"] .shop-balance img,
.view[data-view="shop"] .sub-card img,
.view[data-view="shop"] .tok-card img,
.view[data-view="pay"] .pay-user img{
  max-height:120px;
  object-fit:cover;
  border-radius:inherit;
}

/* ===== Align subscription buttons at bottom ===== */
/* =====================================================
CSS-БЛОК: .view[data-view="shop"] .sub-grid
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.view[data-view="shop"] .sub-grid{
  align-items:stretch;
}

/* =====================================================
CSS-БЛОК: .view[data-view="shop"] .sub-card
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.view[data-view="shop"] .sub-card{
  height:100%;
  display:flex;
  flex-direction:column;
}


/* =====================================================
CSS-БЛОК: .view[data-view="shop"] .sub-cta
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.view[data-view="shop"] .sub-cta{
  margin-top:auto;
}

/* ===== Active subscription modal: centered block ===== */
/* =====================================================
CSS-БЛОК: .sub-active-overlay
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.sub-active-overlay{
  align-items:center !important;
  justify-content:center !important;
  padding:18px !important;
}

/* =====================================================
CSS-БЛОК: .sub-active-overlay.show
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.sub-active-overlay.show{
  display:flex !important;
  opacity:1;
}

/* =====================================================
CSS-БЛОК: .sub-active-overlay .sub-active-modal
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.sub-active-overlay .sub-active-modal{
  position:relative !important;
  width:min(390px,calc(100% - 28px)) !important;
  max-height:calc(100vh - 72px) !important;
  overflow:auto !important;
  border-radius:26px !important;
  padding:20px 18px 18px !important;
  background:rgba(22,22,24,.74) !important;
  border:1px solid rgba(255,255,255,.16) !important;
  box-shadow:0 24px 80px -28px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.08) !important;
  backdrop-filter:blur(26px) saturate(150%) !important;
  -webkit-backdrop-filter:blur(26px) saturate(150%) !important;
  transform:scale(.96) !important;
  transition:transform .25s ease, opacity .25s ease !important;
}

/* =====================================================
CSS-БЛОК: .sub-active-overlay.show .sub-active-modal
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.sub-active-overlay.show .sub-active-modal{
  transform:scale(1) !important;
}

/* =====================================================
CSS-БЛОК: .sub-active-overlay .modal-head
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.sub-active-overlay .modal-head{
  padding-right:42px;
  margin-bottom:14px;
}

/* =====================================================
CSS-БЛОК: .sub-active-overlay .sub-active-close
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.sub-active-overlay .sub-active-close{
  position:absolute !important;
  top:14px !important;
  right:14px !important;
  width:34px !important;
  height:34px !important;
  border-radius:50% !important;
  background:rgba(255,255,255,.08) !important;
  border:1px solid rgba(255,255,255,.14) !important;
  color:#fff !important;
  display:grid !important;
  place-items:center !important;
  z-index:5 !important;
}

/* =====================================================
CSS-БЛОК: .sub-active-overlay .sub-info-grid > div
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.sub-active-overlay .sub-info-grid > div{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
}

/* =====================================================
CSS-БЛОК: .sub-active-overlay .btn-primary
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.sub-active-overlay .btn-primary{
  background:#fff;
  color:#0a0a0a;
  font-weight:800;
}

/* =====================================================
CSS-БЛОК: [data-theme="light"] .sub-active-overlay .sub-active-modal
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
[data-theme="light"] .sub-active-overlay .sub-active-modal{
  background:rgba(255,255,255,.78) !important;
  border:1px solid rgba(0,0,0,.10) !important;
  box-shadow:0 24px 70px -28px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.7) !important;
}

/* =====================================================
CSS-БЛОК: [data-theme="light"] .sub-active-overlay .sub-active-close
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
[data-theme="light"] .sub-active-overlay .sub-active-close{
  background:rgba(0,0,0,.06) !important;
  border:1px solid rgba(0,0,0,.10) !important;
  color:#111 !important;
}

/* ===== Image model picker sheet ===== */
/* =====================================================
CSS-БЛОК: .view[data-view="tools"].active .model-pop:has(.image-model-sheet-list)
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.model-pop:has(.image-model-sheet-list){
  position:fixed !important;
  left:50% !important;
  right:auto !important;
  top:auto !important;
  bottom:0 !important;
  transform:translateX(-50%) !important;
  width:min(480px,100%) !important;
  max-height:72vh !important;
  overflow-y:auto !important;
  padding:10px 10px calc(16px + env(safe-area-inset-bottom)) !important;
  border-radius:24px 24px 0 0 !important;
  background:var(--st-bg-2, #141518) !important;
  border:1px solid var(--st-border, rgba(255,255,255,.10)) !important;
  border-bottom:none !important;
  box-shadow:var(--st-depth-2, none), 0 -24px 70px -18px var(--st-shadow, rgba(0,0,0,.95)) !important;
  z-index:140 !important;
}

/* =====================================================
CSS-БЛОК: .model-pop:has(.image-model-sheet-list)::before
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.model-pop:has(.image-model-sheet-list)::before{
  content:"";
  display:block;
  width:42px;
  height:4px;
  border-radius:999px;
  background:var(--st-line-2, rgba(255,255,255,.20));
  margin:2px auto 12px;
}

/* =====================================================
CSS-БЛОК: .image-model-sheet-title
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.image-model-sheet-title{
  padding:0 6px 10px;
  color:var(--st-dim, #f3f3f3);
  font-size:15px;
  font-weight:700;
}

/* =====================================================
CSS-БЛОК: .image-model-sheet-list
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.image-model-sheet-list{
  display:flex;
  flex-direction:column;
  gap:4px;
}

/* =====================================================
CSS-БЛОК: .view[data-view="tools"].active .model-pop button.image-model-row
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.view[data-view="tools"].active .model-pop button.image-model-row{
  width:100%;
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 10px;
  border:0;
  border-radius:14px;
  background:transparent;
  color:#f3f3f3;
  text-align:left;
  font-family:inherit;
}

.view[data-view="tools"].active .model-pop button.image-model-row:hover,
.view[data-view="tools"].active .model-pop button.image-model-row:active,
.view[data-view="tools"].active .model-pop button.image-model-row.active,
.view[data-view="tools"].active .model-pop button.image-model-row.sel{
  background:#24262b;
}

/* =====================================================
CSS-БЛОК: .image-model-icon
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.image-model-icon{
  width:36px;
  height:36px;
  flex:0 0 36px;
  display:grid;
  place-items:center;
  border-radius:12px;
  background:#2c2c2c;
  color:#f3f3f3;
  font-size:17px;
  font-weight:700;
}

/* =====================================================
CSS-БЛОК: .image-model-text
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.image-model-text{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:3px;
}

/* =====================================================
CSS-БЛОК: .image-model-name
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.image-model-name{
  color:#f3f3f3;
  font-size:13px;
  line-height:1.15;
  font-weight:700;
}

/* =====================================================
CSS-БЛОК: .image-model-desc
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.image-model-desc{
  color:#8d8d92;
  font-size:11px;
  line-height:1.25;
  font-weight:400;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* =====================================================
CSS-БЛОК: .image-model-check
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.image-model-check{
  width:22px;
  height:22px;
  flex:0 0 22px;
  display:grid;
  place-items:center;
  border-radius:50%;
  color:#f3f3f3;
  font-size:13px;
  opacity:0;
}

.image-model-row.active .image-model-check,
.image-model-row.sel .image-model-check{
  opacity:1;
}

/* ===== Pro Studio top title: not a model picker ===== */
/* =====================================================
CSS-БЛОК: .view[data-view="tools"].active .sb-brand
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.view[data-view="tools"].active .sb-brand{
  pointer-events:none !important;
  cursor:default !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  padding:0 !important;
}

.view[data-view="tools"].active .sb-brand:hover,
.view[data-view="tools"].active .sb-brand:active{
  background:transparent !important;
  transform:none !important;
}

/* =====================================================
CSS-БЛОК: .view[data-view="tools"].active .sb-brand-chv
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.view[data-view="tools"].active .sb-brand-chv{
  display:none !important;
}


/* ===== AI particles: static by default, animated only during generation ===== */
/* =====================================================
CSS-БЛОК: .view[data-view="tools"].active .studio::before
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.view[data-view="tools"].active .studio::before{
  opacity:.16 !important;
  background-size:22px 22px,36px 36px,220px 220px !important;
  background-position:0 0,11px 16px,-120px -120px !important;
  animation:none !important;
  filter:brightness(.72) !important;
}

/* =====================================================
CSS-БЛОК: .view[data-view="tools"].active .studio::after
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.view[data-view="tools"].active .studio::after{
  opacity:.06 !important;
  background-size:52px 52px !important;
  animation:none !important;
}

body.ai-generating .view[data-view="tools"].active .studio::before,
.view[data-view="tools"].active .studio.is-generating::before,
.view[data-view="tools"].active .studio.generating::before,
.view[data-view="tools"].active .studio:has(.typing)::before{
  opacity:.52 !important;
  animation:aiParticlesMove 10s linear infinite, aiParticlesGlow 2.2s ease-in-out infinite !important;
  filter:brightness(1.25) !important;
}

body.ai-generating .view[data-view="tools"].active .studio::after,
.view[data-view="tools"].active .studio.is-generating::after,
.view[data-view="tools"].active .studio.generating::after,
.view[data-view="tools"].active .studio:has(.typing)::after{
  opacity:.22 !important;
  animation:aiNetworkDrift 14s linear infinite !important;
}
/* ===== Restore compact transparent image model picker after router changes ===== */
@media(max-width:560px){
  body > #modelPop.image-model-floating-pop,
  .view[data-view="tools"].active .model-pop.image-model-floating-pop,
  .view[data-view="tools"].active .model-pop:has(.image-model-sheet-list){
    position:fixed !important;
    left:8px !important;
    right:auto !important;
    top:auto !important;
    bottom:calc(58px + env(safe-area-inset-bottom)) !important;
    width:64vw !important;
    max-width:315px !important;
    min-width:245px !important;
    max-height:64vh !important;
    overflow-y:auto !important;
    transform:none !important;
    padding:8px 0 10px !important;
    border-radius:18px !important;
    background:color-mix(in srgb, var(--st-bg-2, #14151b) 65%, transparent) !important;
    border:1px solid var(--st-border, rgba(255,255,255,.10)) !important;
    box-shadow:var(--st-depth-2, none), 0 24px 70px -18px var(--st-shadow, rgba(0,0,0,.92)) !important;
    backdrop-filter:blur(18px) saturate(140%) !important;
    -webkit-backdrop-filter:blur(18px) saturate(140%) !important;
    z-index:999999 !important;
  }

  body > #modelPop.image-model-floating-pop::before,
  .view[data-view="tools"].active .model-pop.image-model-floating-pop::before,
  .view[data-view="tools"].active .model-pop:has(.image-model-sheet-list)::before{
    display:none !important;
    content:none !important;
  }

  body > #modelPop.image-model-floating-pop .image-model-sheet-title,
  .view[data-view="tools"].active .model-pop.image-model-floating-pop .image-model-sheet-title,
  .view[data-view="tools"].active .model-pop:has(.image-model-sheet-list) .image-model-sheet-title{
    position:sticky !important;
    top:0 !important;
    z-index:6 !important;
    padding:0 12px 8px !important;
    margin:0 0 6px !important;
    font-size:11px !important;
    line-height:1.1 !important;
    font-weight:700 !important;
    color:var(--st-dim, #cfcfd4) !important;
    background:color-mix(in srgb, var(--st-bg-2, #14151b) 88%, transparent) !important;
    border-bottom:1px solid var(--st-line, rgba(255,255,255,.08)) !important;
    backdrop-filter:blur(14px) saturate(140%) !important;
    -webkit-backdrop-filter:blur(14px) saturate(140%) !important;
  }

  body > #modelPop.image-model-floating-pop .image-model-sheet-list,
  .view[data-view="tools"].active .model-pop.image-model-floating-pop .image-model-sheet-list,
  .view[data-view="tools"].active .model-pop:has(.image-model-sheet-list) .image-model-sheet-list{
    display:flex !important;
    flex-direction:column !important;
    gap:0 !important;
  }

  body > #modelPop.image-model-floating-pop button.image-model-row,
  .view[data-view="tools"].active .model-pop.image-model-floating-pop button.image-model-row,
  .view[data-view="tools"].active .model-pop:has(.image-model-sheet-list) button.image-model-row{
    width:100% !important;
    min-height:auto !important;
    height:auto !important;
    display:flex !important;
    align-items:flex-start !important;
    gap:9px !important;
    padding:8px 10px !important;
    border-radius:0 !important;
    background:transparent !important;
  }

  body > #modelPop.image-model-floating-pop button.image-model-row.active,
  body > #modelPop.image-model-floating-pop button.image-model-row.sel,
  .view[data-view="tools"].active .model-pop.image-model-floating-pop button.image-model-row.active,
  .view[data-view="tools"].active .model-pop.image-model-floating-pop button.image-model-row.sel,
  .view[data-view="tools"].active .model-pop:has(.image-model-sheet-list) button.image-model-row.active,
  .view[data-view="tools"].active .model-pop:has(.image-model-sheet-list) button.image-model-row.sel{
    margin:0 4px !important;
    width:calc(100% - 8px) !important;
    border-radius:11px !important;
    background:var(--st-accent-bg, rgba(48,48,48,.40)) !important;
  }

  body > #modelPop.image-model-floating-pop .image-model-icon,
  .view[data-view="tools"].active .model-pop.image-model-floating-pop .image-model-icon,
  .view[data-view="tools"].active .model-pop:has(.image-model-sheet-list) .image-model-icon{
    width:32px !important;
    height:32px !important;
    flex:0 0 32px !important;
    border-radius:9px !important;
    background:transparent !important;
    overflow:hidden !important;
  }

  body > #modelPop.image-model-floating-pop .image-model-icon svg,
  .view[data-view="tools"].active .model-pop.image-model-floating-pop .image-model-icon svg,
  .view[data-view="tools"].active .model-pop:has(.image-model-sheet-list) .image-model-icon svg{
    width:28px !important;
    height:28px !important;
    display:block !important;
  }

  body > #modelPop.image-model-floating-pop .image-model-text,
  .view[data-view="tools"].active .model-pop.image-model-floating-pop .image-model-text,
  .view[data-view="tools"].active .model-pop:has(.image-model-sheet-list) .image-model-text{
    flex:1 !important;
    min-width:0 !important;
    display:flex !important;
    flex-direction:column !important;
    gap:3px !important;
  }

  body > #modelPop.image-model-floating-pop .image-model-name,
  .view[data-view="tools"].active .model-pop.image-model-floating-pop .image-model-name,
  .view[data-view="tools"].active .model-pop:has(.image-model-sheet-list) .image-model-name{
    font-size:11px !important;
    line-height:1.15 !important;
    font-weight:800 !important;
    letter-spacing:0 !important;
    color:var(--st-text, #f3f3f3) !important;
  }

  body > #modelPop.image-model-floating-pop .image-model-desc,
  .view[data-view="tools"].active .model-pop.image-model-floating-pop .image-model-desc,
  .view[data-view="tools"].active .model-pop:has(.image-model-sheet-list) .image-model-desc{
    display:block !important;
    overflow:visible !important;
    white-space:normal !important;
    height:auto !important;
    max-height:none !important;
    -webkit-line-clamp:unset !important;
    -webkit-box-orient:unset !important;
    font-size:9px !important;
    line-height:1.2 !important;
    font-weight:400 !important;
    color:var(--st-dim, #a7a7ad) !important;
  }

  body > #modelPop.image-model-floating-pop .image-model-check,
  .view[data-view="tools"].active .model-pop.image-model-floating-pop .image-model-check,
  .view[data-view="tools"].active .model-pop:has(.image-model-sheet-list) .image-model-check{
    width:18px !important;
    height:18px !important;
    flex:0 0 18px !important;
    font-size:11px !important;
    margin-top:6px !important;
  }
}
/* ===== Hide model button stripe icon ===== */
.view[data-view="tools"].active .studio-control-row .studio-select-pill.wide .pill-meter,
.view[data-view="tools"].active .studio-control-row .studio-select-pill.wide > svg,
.view[data-view="tools"].active .studio-video-composer .studio-select-pill.wide .pill-meter,
.view[data-view="tools"].active .studio-video-composer .studio-select-pill.wide > svg{
  display:none !important;
}

.view[data-view="tools"].active .studio-control-row .studio-select-pill.wide,
.view[data-view="tools"].active .studio-video-composer .studio-select-pill.wide{
  padding-left:12px !important;
  gap:0 !important;
}
/* ===== Floating aspect ratio picker like reference ===== */
@media(max-width:560px){
/* =====================================================
CSS-БЛОК: body > #modelPop.image-size-floating-pop
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
  body > #modelPop.image-size-floating-pop{
    position:fixed !important;
    left:8px !important;
    right:auto !important;
    top:auto !important;
    bottom:calc(58px + env(safe-area-inset-bottom)) !important;
    width:64vw !important;
    max-width:315px !important;
    min-width:245px !important;
    max-height:64vh !important;
    overflow-y:auto !important;
    padding:12px 10px 12px !important;
    border-radius:22px !important;
    background:color-mix(in srgb, var(--st-bg-2, #14151b) 82%, transparent) !important;
    border:1px solid var(--st-border, rgba(255,255,255,.12)) !important;
    box-shadow:var(--st-depth-2, none), 0 24px 70px -18px var(--st-shadow, rgba(0,0,0,.92)) !important;
    backdrop-filter:blur(18px) saturate(140%) !important;
    -webkit-backdrop-filter:blur(18px) saturate(140%) !important;
    z-index:999999 !important;
  }

/* =====================================================
CSS-БЛОК: body > #modelPop.image-size-floating-pop::before
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
  body > #modelPop.image-size-floating-pop::before{
    display:none !important;
    content:none !important;
  }

/* =====================================================
CSS-БЛОК: body > #modelPop.image-size-floating-pop .image-size-sheet-title
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
  body > #modelPop.image-size-floating-pop .image-size-sheet-title{
    position:sticky !important;
    top:0 !important;
    z-index:5 !important;
    padding:2px 4px 14px !important;
    margin:0 0 10px !important;
    font-size:20px !important;
    line-height:1.15 !important;
    font-weight:800 !important;
    color:var(--st-dim, #cfcfd4) !important;
    background:color-mix(in srgb, var(--st-bg-2, #14151b) 85%, transparent) !important;
    border-bottom:1px solid var(--st-line, rgba(255,255,255,.10)) !important;
    backdrop-filter:blur(14px) saturate(140%) !important;
    -webkit-backdrop-filter:blur(14px) saturate(140%) !important;
  }

/* =====================================================
CSS-БЛОК: body > #modelPop.image-size-floating-pop .image-size-sheet-list
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
  body > #modelPop.image-size-floating-pop .image-size-sheet-list{
    display:flex !important;
    flex-direction:column !important;
    gap:8px !important;
  }

/* =====================================================
CSS-БЛОК: body > #modelPop.image-size-floating-pop button.image-size-row
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
  body > #modelPop.image-size-floating-pop button.image-size-row{
    width:100% !important;
    min-height:72px !important;
    display:grid !important;
    grid-template-columns:46px 1fr 24px !important;
    align-items:center !important;
    gap:12px !important;
    padding:0 16px !important;
    border:0 !important;
    border-radius:14px !important;
    background:transparent !important;
    color:var(--st-text, #f3f3f3) !important;
    text-align:left !important;
    font-family:inherit !important;
  }

  body > #modelPop.image-size-floating-pop button.image-size-row.active,
  body > #modelPop.image-size-floating-pop button.image-size-row.sel{
    background:var(--st-accent-bg, rgba(255,255,255,.12)) !important;
  }

/* =====================================================
CSS-БЛОК: body > #modelPop.image-size-floating-pop .image-size-icon
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
  body > #modelPop.image-size-floating-pop .image-size-icon{
    width:30px !important;
    height:30px !important;
    display:block !important;
    border:3px solid var(--st-dim, #cfcfd4) !important;
    border-radius:8px !important;
    opacity:.92 !important;
  }

/* =====================================================
CSS-БЛОК: body > #modelPop.image-size-floating-pop .image-size-icon[data-ratio="1:1"]
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
  body > #modelPop.image-size-floating-pop .image-size-icon[data-ratio="1:1"]{
    width:30px !important;
    height:30px !important;
  }

/* =====================================================
CSS-БЛОК: body > #modelPop.image-size-floating-pop .image-size-icon[data-ratio="4:3"]
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
  body > #modelPop.image-size-floating-pop .image-size-icon[data-ratio="4:3"]{
    width:32px !important;
    height:25px !important;
  }

/* =====================================================
CSS-БЛОК: body > #modelPop.image-size-floating-pop .image-size-icon[data-ratio="3:4"]
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
  body > #modelPop.image-size-floating-pop .image-size-icon[data-ratio="3:4"]{
    width:25px !important;
    height:32px !important;
  }

/* =====================================================
CSS-БЛОК: body > #modelPop.image-size-floating-pop .image-size-icon[data-ratio="9:16"]
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
  body > #modelPop.image-size-floating-pop .image-size-icon[data-ratio="9:16"]{
    width:24px !important;
    height:34px !important;
  }

/* =====================================================
CSS-БЛОК: body > #modelPop.image-size-floating-pop .image-size-icon[data-ratio="16:9"]
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
  body > #modelPop.image-size-floating-pop .image-size-icon[data-ratio="16:9"]{
    width:36px !important;
    height:22px !important;
  }

/* =====================================================
CSS-БЛОК: body > #modelPop.image-size-floating-pop .image-size-icon[data-ratio="auto"]
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
  body > #modelPop.image-size-floating-pop .image-size-icon[data-ratio="auto"]{
    width:32px !important;
    height:32px !important;
  }

/* =====================================================
CSS-БЛОК: body > #modelPop.image-size-floating-pop .image-size-label
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
  body > #modelPop.image-size-floating-pop .image-size-label{
    font-size:22px !important;
    line-height:1 !important;
    font-weight:700 !important;
    color:var(--st-text, #f4f4f4) !important;
  }

/* =====================================================
CSS-БЛОК: body > #modelPop.image-size-floating-pop .image-size-check
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
  body > #modelPop.image-size-floating-pop .image-size-check{
    font-size:22px !important;
    line-height:1 !important;
    color:var(--st-accent, #f4f4f4) !important;
    opacity:0 !important;
  }

  body > #modelPop.image-size-floating-pop button.image-size-row.active .image-size-check,
  body > #modelPop.image-size-floating-pop button.image-size-row.sel .image-size-check{
    opacity:1 !important;
  }
}
/* ===== Aspect ratio picker: narrower centered + smaller icons ===== */
@media(max-width:560px){
/* =====================================================
CSS-БЛОК: body > #modelPop.image-size-floating-pop
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
  body > #modelPop.image-size-floating-pop{
    left:50% !important;
    right:auto !important;
    transform:translateX(-50%) !important;
    width:58vw !important;
    max-width:280px !important;
    min-width:220px !important;
    padding:10px 8px 10px !important;
  }

/* =====================================================
CSS-БЛОК: body > #modelPop.image-size-floating-pop button.image-size-row
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
  body > #modelPop.image-size-floating-pop button.image-size-row{
    min-height:58px !important;
    grid-template-columns:34px 1fr 20px !important;
    gap:10px !important;
    padding:0 12px !important;
    border-radius:13px !important;
  }

/* =====================================================
CSS-БЛОК: body > #modelPop.image-size-floating-pop .image-size-icon
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
  body > #modelPop.image-size-floating-pop .image-size-icon{
    width:22px !important;
    height:22px !important;
    border-width:2px !important;
    border-radius:6px !important;
  }

  body > #modelPop.image-size-floating-pop .image-size-icon[data-ratio="1:1"]{
    width:18px !important;
    height:18px !important;
  }

/* =====================================================
CSS-БЛОК: body > #modelPop.image-size-floating-pop .image-size-icon[data-ratio="4:3"]
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
  body > #modelPop.image-size-floating-pop .image-size-icon[data-ratio="4:3"]{
    width:24px !important;
    height:18px !important;
  }

/* =====================================================
CSS-БЛОК: body > #modelPop.image-size-floating-pop .image-size-icon[data-ratio="3:4"]
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
  body > #modelPop.image-size-floating-pop .image-size-icon[data-ratio="3:4"]{
    width:18px !important;
    height:24px !important;
  }

/* =====================================================
CSS-БЛОК: body > #modelPop.image-size-floating-pop .image-size-icon[data-ratio="4:5"]
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
  body > #modelPop.image-size-floating-pop .image-size-icon[data-ratio="4:5"]{
    width:18px !important;
    height:24px !important;
  }

/* =====================================================
CSS-БЛОК: body > #modelPop.image-size-floating-pop .image-size-icon[data-ratio="5:4"]
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
  body > #modelPop.image-size-floating-pop .image-size-icon[data-ratio="5:4"]{
    width:24px !important;
    height:18px !important;
  }

/* =====================================================
CSS-БЛОК: body > #modelPop.image-size-floating-pop .image-size-icon[data-ratio="9:16"]
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
  body > #modelPop.image-size-floating-pop .image-size-icon[data-ratio="9:16"]{
    width:17px !important;
    height:25px !important;
  }

/* =====================================================
CSS-БЛОК: body > #modelPop.image-size-floating-pop .image-size-icon[data-ratio="16:9"]
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
  body > #modelPop.image-size-floating-pop .image-size-icon[data-ratio="16:9"]{
    width:26px !important;
    height:16px !important;
  }

/* =====================================================
CSS-БЛОК: body > #modelPop.image-size-floating-pop .image-size-icon[data-ratio="21:9"]
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
  body > #modelPop.image-size-floating-pop .image-size-icon[data-ratio="21:9"]{
    width:28px !important;
    height:13px !important;
    border-radius:5px !important;
  }

/* =====================================================
CSS-БЛОК: body > #modelPop.image-size-floating-pop .image-size-icon[data-ratio="auto"]
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
  body > #modelPop.image-size-floating-pop .image-size-icon[data-ratio="auto"]{
    width:22px !important;
    height:22px !important;
  }

/* =====================================================
CSS-БЛОК: body > #modelPop.image-size-floating-pop .image-size-label
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
  body > #modelPop.image-size-floating-pop .image-size-label{
    font-size:19px !important;
  }

/* =====================================================
CSS-БЛОК: body > #modelPop.image-size-floating-pop .image-size-check
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
  body > #modelPop.image-size-floating-pop .image-size-check{
    font-size:18px !important;
  }
}
/* ===== Aspect ratio picker: text same size as bottom buttons ===== */
@media(max-width:560px){
/* =====================================================
CSS-БЛОК: body > #modelPop.image-size-floating-pop .image-size-sheet-title
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
  body > #modelPop.image-size-floating-pop .image-size-sheet-title{
    font-size:11px !important;
    line-height:1 !important;
    font-weight:700 !important;
    letter-spacing:.2px !important;
    padding:2px 4px 10px !important;
    margin:0 0 6px !important;
  }

/* =====================================================
CSS-БЛОК: body > #modelPop.image-size-floating-pop button.image-size-row
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
  body > #modelPop.image-size-floating-pop button.image-size-row{
    min-height:42px !important;
    grid-template-columns:28px 1fr 16px !important;
    gap:7px !important;
    padding:0 10px !important;
    border-radius:11px !important;
  }

/* =====================================================
CSS-БЛОК: body > #modelPop.image-size-floating-pop .image-size-label
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
  body > #modelPop.image-size-floating-pop .image-size-label{
    font-size:11px !important;
    line-height:1 !important;
    font-weight:700 !important;
    letter-spacing:.1px !important;
  }

/* =====================================================
CSS-БЛОК: body > #modelPop.image-size-floating-pop .image-size-check
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
  body > #modelPop.image-size-floating-pop .image-size-check{
    font-size:12px !important;
    line-height:1 !important;
  }

/* =====================================================
CSS-БЛОК: body > #modelPop.image-size-floating-pop .image-size-icon
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
  body > #modelPop.image-size-floating-pop .image-size-icon{
    width:18px !important;
    height:18px !important;
    border-width:2px !important;
    border-radius:5px !important;
  }

/* =====================================================
CSS-БЛОК: body > #modelPop.image-size-floating-pop .image-size-icon[data-ratio="4:3"]
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
  body > #modelPop.image-size-floating-pop .image-size-icon[data-ratio="4:3"]{
    width:20px !important;
    height:15px !important;
  }

  body > #modelPop.image-size-floating-pop .image-size-icon[data-ratio="3:4"],
  body > #modelPop.image-size-floating-pop .image-size-icon[data-ratio="4:5"]{
    width:15px !important;
    height:20px !important;
  }

/* =====================================================
CSS-БЛОК: body > #modelPop.image-size-floating-pop .image-size-icon[data-ratio="5:4"]
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
  body > #modelPop.image-size-floating-pop .image-size-icon[data-ratio="5:4"]{
    width:20px !important;
    height:15px !important;
  }

/* =====================================================
CSS-БЛОК: body > #modelPop.image-size-floating-pop .image-size-icon[data-ratio="9:16"]
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
  body > #modelPop.image-size-floating-pop .image-size-icon[data-ratio="9:16"]{
    width:14px !important;
    height:21px !important;
  }

/* =====================================================
CSS-БЛОК: body > #modelPop.image-size-floating-pop .image-size-icon[data-ratio="16:9"]
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
  body > #modelPop.image-size-floating-pop .image-size-icon[data-ratio="16:9"]{
    width:22px !important;
    height:14px !important;
  }

/* =====================================================
CSS-БЛОК: body > #modelPop.image-size-floating-pop .image-size-icon[data-ratio="21:9"]
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
  body > #modelPop.image-size-floating-pop .image-size-icon[data-ratio="21:9"]{
    width:24px !important;
    height:11px !important;
    border-radius:4px !important;
  }

/* =====================================================
CSS-БЛОК: body > #modelPop.image-size-floating-pop .image-size-icon[data-ratio="auto"]
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
  body > #modelPop.image-size-floating-pop .image-size-icon[data-ratio="auto"]{
    width:18px !important;
    height:18px !important;
  }
}
/* ===== Aspect ratio picker: half-width narrow sheet ===== */
@media(max-width:560px){
/* =====================================================
CSS-БЛОК: body > #modelPop.image-size-floating-pop
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
  body > #modelPop.image-size-floating-pop{
    left:50% !important;
    right:auto !important;
    transform:translateX(-50%) !important;
    width:29vw !important;
    max-width:140px !important;
    min-width:118px !important;
    padding:8px 5px 8px !important;
    border-radius:16px !important;
  }

/* =====================================================
CSS-БЛОК: body > #modelPop.image-size-floating-pop .image-size-sheet-title
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
  body > #modelPop.image-size-floating-pop .image-size-sheet-title{
    font-size:9px !important;
    line-height:1.05 !important;
    padding:2px 3px 7px !important;
    margin:0 0 4px !important;
    white-space:normal !important;
  }

/* =====================================================
CSS-БЛОК: body > #modelPop.image-size-floating-pop .image-size-sheet-list
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
  body > #modelPop.image-size-floating-pop .image-size-sheet-list{
    gap:4px !important;
  }

/* =====================================================
CSS-БЛОК: body > #modelPop.image-size-floating-pop button.image-size-row
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
  body > #modelPop.image-size-floating-pop button.image-size-row{
    min-height:34px !important;
    grid-template-columns:20px 1fr 10px !important;
    gap:4px !important;
    padding:0 6px !important;
    border-radius:9px !important;
  }

/* =====================================================
CSS-БЛОК: body > #modelPop.image-size-floating-pop .image-size-label
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
  body > #modelPop.image-size-floating-pop .image-size-label{
    font-size:10px !important;
    line-height:1 !important;
    font-weight:700 !important;
  }

/* =====================================================
CSS-БЛОК: body > #modelPop.image-size-floating-pop .image-size-check
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
  body > #modelPop.image-size-floating-pop .image-size-check{
    font-size:9px !important;
  }

/* =====================================================
CSS-БЛОК: body > #modelPop.image-size-floating-pop .image-size-icon
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
  body > #modelPop.image-size-floating-pop .image-size-icon{
    width:14px !important;
    height:14px !important;
    border-width:1.5px !important;
    border-radius:4px !important;
  }

/* =====================================================
CSS-БЛОК: body > #modelPop.image-size-floating-pop .image-size-icon[data-ratio="4:3"]
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
  body > #modelPop.image-size-floating-pop .image-size-icon[data-ratio="4:3"]{
    width:16px !important;
    height:12px !important;
  }

  body > #modelPop.image-size-floating-pop .image-size-icon[data-ratio="3:4"],
  body > #modelPop.image-size-floating-pop .image-size-icon[data-ratio="4:5"]{
    width:12px !important;
    height:16px !important;
  }

/* =====================================================
CSS-БЛОК: body > #modelPop.image-size-floating-pop .image-size-icon[data-ratio="5:4"]
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
  body > #modelPop.image-size-floating-pop .image-size-icon[data-ratio="5:4"]{
    width:16px !important;
    height:12px !important;
  }

/* =====================================================
CSS-БЛОК: body > #modelPop.image-size-floating-pop .image-size-icon[data-ratio="9:16"]
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
  body > #modelPop.image-size-floating-pop .image-size-icon[data-ratio="9:16"]{
    width:11px !important;
    height:17px !important;
  }

/* =====================================================
CSS-БЛОК: body > #modelPop.image-size-floating-pop .image-size-icon[data-ratio="16:9"]
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
  body > #modelPop.image-size-floating-pop .image-size-icon[data-ratio="16:9"]{
    width:18px !important;
    height:11px !important;
  }

/* =====================================================
CSS-БЛОК: body > #modelPop.image-size-floating-pop .image-size-icon[data-ratio="21:9"]
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
  body > #modelPop.image-size-floating-pop .image-size-icon[data-ratio="21:9"]{
    width:19px !important;
    height:8px !important;
    border-radius:3px !important;
  }

/* =====================================================
CSS-БЛОК: body > #modelPop.image-size-floating-pop .image-size-icon[data-ratio="auto"]
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
  body > #modelPop.image-size-floating-pop .image-size-icon[data-ratio="auto"]{
    width:14px !important;
    height:14px !important;
  }
}
/* ===== SAFE Pro Studio dots: only background, no layout layers ===== */

/* Отключаем старые опасные слои точек */
.view[data-view="tools"].active .studio::before,
.view[data-view="tools"].active .studio::after,
.view[data-view="tools"].active .chat-area::before{
  content:none !important;
  display:none !important;
  animation:none !important;
}

/* Точки ставим прямо на чёрный фон чата */
/* =====================================================
CSS-БЛОК: .view[data-view="tools"].active .chat-area
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.view[data-view="tools"].active .chat-area{
  background-color:#000 !important;
  background-image:
    radial-gradient(circle,rgba(255,255,255,.45) 0 .65px,transparent 1.25px),
    radial-gradient(circle,rgba(255,255,255,.25) 0 .55px,transparent 1.15px) !important;
  background-size:22px 22px,38px 38px !important;
  background-position:0 0,11px 17px !important;
  animation:none !important;
}

/* При генерации только фон двигается, блоки не трогаем */
body.ai-generating .view[data-view="tools"].active .chat-area,
.view[data-view="tools"].active .chat-area:has(.typing){
  background-image:
    radial-gradient(circle,rgba(255,255,255,.85) 0 .65px,transparent 1.25px),
    radial-gradient(circle,rgba(255,255,255,.45) 0 .55px,transparent 1.15px) !important;
  animation:safeStudioDotsMove 8s linear infinite !important;
}

@keyframes safeStudioDotsMove{
/* =====================================================
CSS-БЛОК: from
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
  from{
    background-position:0 0,11px 17px;
  }
/* =====================================================
CSS-БЛОК: to
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
  to{
    background-position:22px 22px,49px 55px;
  }
}
/* ===== Pro Studio top mode buttons: same compact size as inner controls ===== */
@media(max-width:560px){
/* =====================================================
CSS-БЛОК: .view[data-view="tools"].active .studio-mode-tabs
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
  .view[data-view="tools"].active .studio-mode-tabs{
    gap:6px !important;
    margin:0 0 6px !important;
    padding:0 0 2px !important;
  }

/* =====================================================
CSS-БЛОК: .view[data-view="tools"].active .studio-mini-tabs
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
  .view[data-view="tools"].active .studio-mini-tabs{
    height:34px !important;
    min-height:34px !important;
    padding:3px !important;
    gap:3px !important;
    border-radius:999px !important;
  }

/* =====================================================
CSS-БЛОК: .view[data-view="tools"].active .studio-mini-tab
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
  .view[data-view="tools"].active .studio-mini-tab{
    width:34px !important;
    height:28px !important;
    min-width:34px !important;
    min-height:28px !important;
    border-radius:999px !important;
    padding:0 !important;
  }

/* =====================================================
CSS-БЛОК: .view[data-view="tools"].active .studio-mini-tab svg
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
  .view[data-view="tools"].active .studio-mini-tab svg{
    width:14px !important;
    height:14px !important;
  }

/* =====================================================
CSS-БЛОК: .view[data-view="tools"].active .studio-mode-tab
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
  .view[data-view="tools"].active .studio-mode-tab{
    height:34px !important;
    min-height:34px !important;
    padding:0 10px !important;
    gap:5px !important;
    border-radius:999px !important;
    font-size:11px !important;
    line-height:1 !important;
    font-weight:700 !important;
  }

/* =====================================================
CSS-БЛОК: .view[data-view="tools"].active .studio-mode-tab svg
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
  .view[data-view="tools"].active .studio-mode-tab svg{
    width:15px !important;
    height:15px !important;
  }
}
/* ===== SAFE Pro Studio dots on the whole black page background ===== */
/* =====================================================
CSS-БЛОК: .view[data-view="tools"].active .studio
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.view[data-view="tools"].active .studio{
  background-color:#000 !important;
  background-image:
    radial-gradient(circle,rgba(255,255,255,.45) 0 .65px,transparent 1.25px),
    radial-gradient(circle,rgba(255,255,255,.25) 0 .55px,transparent 1.15px) !important;
  background-size:22px 22px,38px 38px !important;
  background-position:0 0,11px 17px !important;
  animation:none !important;
}
.view[data-view="tools"].active .studio[data-ps-theme="white"]{background-color:#ffffff !important}
.view[data-view="tools"].active .studio[data-ps-theme="black"]{background-color:#000000 !important}

/* =====================================================
CSS-БЛОК: .view[data-view="tools"].active .chat-area
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.view[data-view="tools"].active .chat-area{
  background-color:transparent !important;
  background-image:none !important;
}

body.ai-generating .view[data-view="tools"].active .studio,
.view[data-view="tools"].active .studio:has(.typing){
  background-image:
    radial-gradient(circle,rgba(255,255,255,.85) 0 .7px,transparent 1.35px),
    radial-gradient(circle,rgba(255,255,255,.45) 0 .6px,transparent 1.25px) !important;
  animation:safeStudioDotsMove 8s linear infinite !important;
}

/* ===== Upload large center panel ===== */
/* =====================================================
CSS-БЛОК: .upload-panel-backdrop
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.upload-panel-backdrop{
  position:fixed !important;
  inset:0 !important;
  z-index:999998 !important;
  display:none !important;
  align-items:center !important;
  justify-content:center !important;
  padding:18px !important;
  background:rgba(0,0,0,.38) !important;
  backdrop-filter:blur(8px) !important;
  -webkit-backdrop-filter:blur(8px) !important;
}

/* =====================================================
CSS-БЛОК: .upload-panel-backdrop.show
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.upload-panel-backdrop.show{
  display:flex !important;
}

/* =====================================================
CSS-БЛОК: .upload-panel-card
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.upload-panel-card{
  position:relative !important;
  width:min(92vw,520px) !important;
  height:min(78vh,680px) !important;
  border-radius:26px !important;
  background:color-mix(in srgb, var(--st-bg-2, #121214) 88%, transparent) !important;
  border:1px solid var(--st-border, rgba(255,255,255,.10)) !important;
  box-shadow:var(--st-depth-2, none), 0 28px 90px var(--st-shadow, rgba(0,0,0,.75)) !important;
  backdrop-filter:blur(22px) saturate(140%) !important;
  -webkit-backdrop-filter:blur(22px) saturate(140%) !important;
  overflow:hidden !important;
}

/* =====================================================
CSS-БЛОК: .upload-panel-title
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.upload-panel-title{
  height:52px !important;
  display:flex !important;
  align-items:center !important;
  padding:0 18px !important;
  font-size:14px !important;
  font-weight:800 !important;
  color:var(--st-text, #f3f3f3) !important;
  border-bottom:1px solid var(--st-line, rgba(255,255,255,.08)) !important;
}

/* =====================================================
CSS-БЛОК: .upload-panel-body
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.upload-panel-body{
  height:calc(100% - 52px) !important;
  padding:14px !important;
}

/* =====================================================
CSS-БЛОК: .upload-panel-close
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.upload-panel-close{
  position:absolute !important;
  top:10px !important;
  right:12px !important;
  width:32px !important;
  height:32px !important;
  border:0 !important;
  border-radius:50% !important;
  background:var(--st-bg-3, rgba(255,255,255,.08)) !important;
  color:var(--st-text, #fff) !important;
  font-size:22px !important;
  line-height:1 !important;
  display:grid !important;
  place-items:center !important;
}

/* ===== Upload panel lower half: centered photo upload button ===== */
/* =====================================================
CSS-БЛОК: .upload-panel-actions
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.upload-panel-actions{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
}

/* =====================================================
CSS-БЛОК: .upload-photo-center-btn
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.upload-photo-center-btn{
  width:min(72%,260px) !important;
  min-height:138px !important;
  border:1px dashed rgba(255,255,255,.20) !important;
  border-radius:24px !important;
  background:rgba(255,255,255,.045) !important;
  color:#f3f3f3 !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:7px !important;
  padding:18px !important;
}

/* =====================================================
CSS-БЛОК: .upload-photo-center-btn:active
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.upload-photo-center-btn:active{
  transform:scale(.985) !important;
}

/* =====================================================
CSS-БЛОК: .upload-photo-center-icon
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.upload-photo-center-icon{
  width:54px !important;
  height:54px !important;
  border-radius:18px !important;
  display:grid !important;
  place-items:center !important;
  background:rgba(255,255,255,.08) !important;
  color:#fff !important;
}

/* =====================================================
CSS-БЛОК: .upload-photo-center-icon svg
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.upload-photo-center-icon svg{
  width:30px !important;
  height:30px !important;
  display:block !important;
}

/* =====================================================
CSS-БЛОК: .upload-photo-center-title
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.upload-photo-center-title{
  font-size:13px !important;
  font-weight:800 !important;
  line-height:1 !important;
}

/* =====================================================
CSS-БЛОК: .upload-photo-center-sub
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.upload-photo-center-sub{
  font-size:11px !important;
  line-height:1.2 !important;
  color:rgba(255,255,255,.52) !important;
}

/* ===== Upload draft page: split exactly in half ===== */
/* =====================================================
CSS-БЛОК: .upload-panel-body
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.upload-panel-body{
  display:flex !important;
  flex-direction:column !important;
  height:calc(100% - 52px) !important;
  padding:0 !important;
  gap:0 !important;
}

/* =====================================================
CSS-БЛОК: .upload-panel-half
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.upload-panel-half{
  height:50% !important;
  min-height:0 !important;
  overflow:hidden !important;
  padding:14px !important;
}

/* Горизонтальная линия-разделитель пополам */
/* =====================================================
CSS-БЛОК: .upload-panel-generated
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.upload-panel-generated{
  border-bottom:1px solid rgba(255,255,255,.16) !important;
}

/* Preview overlay shown when tapping a generated thumbnail inside the
   upload history panel (was entirely unstyled before). */
.upload-image-preview{
  display:none !important;
  position:absolute !important;
  inset:0 !important;
  z-index:5 !important;
  align-items:center !important;
  justify-content:center !important;
  padding:16px !important;
  background:color-mix(in srgb, var(--st-shadow, rgba(0,0,0,.6)) 70%, transparent) !important;
  border-radius:inherit !important;
}
.upload-image-preview.show{display:flex !important}
.upload-preview-card{
  position:relative;width:100%;max-width:340px;max-height:100%;
  display:flex;flex-direction:column;gap:12px;padding:14px;
  border-radius:20px;background:var(--st-bg-2, #1c1c1c);
  border:1px solid var(--st-border, rgba(255,255,255,.12));
  box-shadow:var(--st-depth-2, 0 20px 60px rgba(0,0,0,.5));
  overflow:hidden;
}
.upload-preview-close{
  position:absolute;right:10px;top:10px;z-index:2;width:32px;height:32px;
  border:0;border-radius:50%;background:var(--st-bg-3, rgba(255,255,255,.1));
  color:var(--st-text, #fff);font-size:22px;line-height:1;
  display:grid;place-items:center;cursor:pointer;
}
#uploadPreviewImg{
  width:100%;max-height:50vh;border-radius:14px;object-fit:contain;
  background:var(--st-bg-3, #111);
}
.upload-preview-select{
  min-height:46px;border:0;border-radius:14px;
  background:var(--st-invert-bg, #fff);color:var(--st-invert-text, #111);
  font:inherit;font-size:14px;font-weight:800;cursor:pointer;
}

/* Верхняя часть — история генерации фото */
/* =====================================================
CSS-БЛОК: .upload-generated-grid
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.upload-generated-grid{
  height:calc(100% - 42px) !important;
  overflow-y:auto !important;
  display:grid !important;
  grid-template-columns:repeat(4,1fr) !important;
  gap:8px !important;
  align-content:start !important;
  padding-right:2px !important;
}

/* Нижняя часть — загрузка фото */
/* =====================================================
CSS-БЛОК: .upload-panel-actions
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.upload-panel-actions{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
}

/* ===== Upload lower draft photos: top-left row ===== */
/* =====================================================
CSS-БЛОК: .upload-panel-actions
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.upload-panel-actions{
  display:block !important;
  padding:14px !important;
  text-align:left !important;
  align-items:initial !important;
  justify-content:initial !important;
}

/* =====================================================
CSS-БЛОК: .upload-photo-grid
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.upload-photo-grid{
  width:100% !important;
  height:100% !important;
  display:flex !important;
  flex-wrap:wrap !important;
  align-items:flex-start !important;
  align-content:flex-start !important;
  justify-content:flex-start !important;
  gap:8px !important;
}

/* =====================================================
CSS-БЛОК: .upload-photo-thumb
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.upload-photo-thumb{
  position:relative !important;
  width:58px !important;
  height:58px !important;
  flex:0 0 58px !important;
  border:1px solid rgba(255,255,255,.14) !important;
  border-radius:14px !important;
  overflow:hidden !important;
  background:rgba(255,255,255,.055) !important;
  color:#fff !important;
  padding:0 !important;
  display:grid !important;
  place-items:center !important;
}

/* =====================================================
CSS-БЛОК: .upload-photo-thumb img
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.upload-photo-thumb img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  display:block !important;
}

.upload-photo-thumb video{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  display:block !important;
  background:#111 !important;
}

.upload-media-uploading::after,
.studio-links-btn.is-uploading::after,
.studio-video-edit-upload.is-uploading::after{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  background:linear-gradient(90deg, rgba(47,111,189,.12), rgba(47,111,189,.42), rgba(47,111,189,.12)) !important;
  transform:translateX(-100%) !important;
  animation:sylvexUploadSweep 1.4s ease-in-out infinite !important;
  pointer-events:none !important;
}

.uploading-ring{
  position:absolute !important;
  inset:8px !important;
  border:2px solid rgba(255,255,255,.28) !important;
  border-top-color:#fff !important;
  border-radius:999px !important;
  animation:sylvexUploadSpin .9s linear infinite !important;
  z-index:3 !important;
}

@keyframes sylvexUploadSweep{
  0%{ transform:translateX(-100%); }
  100%{ transform:translateX(100%); }
}

@keyframes sylvexUploadSpin{
  to{ transform:rotate(360deg); }
}

/* =====================================================
CSS-БЛОК: .upload-photo-add
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.upload-photo-add{
  border-style:dashed !important;
  background:rgba(255,255,255,.045) !important;
}

/* =====================================================
CSS-БЛОК: .upload-photo-add-icon
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.upload-photo-add-icon{
  width:28px !important;
  height:28px !important;
  display:grid !important;
  place-items:center !important;
  color:#fff !important;
}

/* =====================================================
CSS-БЛОК: .upload-photo-add-text
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.upload-photo-add-text{
  display:none !important;
}

/* =====================================================
CSS-БЛОК: .upload-photo-remove
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.upload-photo-remove{
  position:absolute !important;
  top:3px !important;
  right:3px !important;
  width:16px !important;
  height:16px !important;
  border-radius:999px !important;
  display:grid !important;
  place-items:center !important;
  background:rgba(0,0,0,.68) !important;
  color:#fff !important;
  font-size:13px !important;
  line-height:1 !important;
  font-weight:900 !important;
}

/* =====================================================
CSS-БЛОК: .upload-video-center-btn
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.upload-video-center-btn{
  margin-left:10px !important;
}

/* =====================================================
CSS-БЛОК: .upload-video-thumb
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.upload-video-thumb{
  background:rgba(36,103,210,.24) !important;
  border-color:rgba(88,148,255,.42) !important;
}

/* =====================================================
CSS-БЛОК: .video-reference-control-badge
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.video-reference-control-badge{
  position:absolute !important;
  left:10px !important;
  top:10px !important;
  z-index:2 !important;
  min-width:34px !important;
  height:24px !important;
  padding:0 8px !important;
  border-radius:999px !important;
  display:grid !important;
  place-items:center !important;
  background:rgba(22,119,255,.84) !important;
  color:#fff !important;
  font-size:11px !important;
  font-weight:900 !important;
  letter-spacing:0 !important;
}

/* =====================================================
CSS-БЛОК: .studio-links-btn.has-video-reference
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.studio-links-btn.has-video-reference{
  position:relative !important;
}
/* ===== Upload empty state: big upload button exactly centered ===== */
/* =====================================================
CSS-БЛОК: .upload-panel-actions:has(.upload-photo-grid.empty)
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.upload-panel-actions:has(.upload-photo-grid.empty){
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:14px !important;
}

/* =====================================================
CSS-БЛОК: .upload-photo-grid.empty
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.upload-photo-grid.empty{
  width:100% !important;
  height:100% !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  align-content:center !important;
  text-align:center !important;
}

/* =====================================================
CSS-БЛОК: .upload-photo-grid.empty .upload-photo-center-btn
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.upload-photo-grid.empty .upload-photo-center-btn{
  margin:auto !important;
}
/* ===== Upload choose button: slightly higher and centered in lower block ===== */
/* =====================================================
CSS-БЛОК: .upload-panel-actions
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.upload-panel-actions{
  position:relative !important;
}

/* =====================================================
CSS-БЛОК: .upload-choose-photos-btn
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.upload-choose-photos-btn{
  position:absolute !important;
  left:50% !important;
  bottom:28px !important;
  transform:translateX(-50%) !important;
  margin:0 !important;
}

/* =====================================================
CSS-БЛОК: .upload-choose-photos-btn:active
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.upload-choose-photos-btn:active{
  transform:translateX(-50%) scale(.985) !important;
}
/* ===== Upload choose button: bigger blue button ===== */
/* =====================================================
CSS-БЛОК: .upload-choose-photos-btn
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.upload-choose-photos-btn{
  height:44px !important;
  min-width:172px !important;
  padding:0 24px !important;
  border-radius:999px !important;
  background:#1677ff !important;
  color:#fff !important;
  font-size:14px !important;
  font-weight:800 !important;
  box-shadow:0 14px 34px rgba(22,119,255,.38) !important;
}

/* =====================================================
CSS-БЛОК: .upload-choose-photos-btn:active
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.upload-choose-photos-btn:active{
  transform:translateX(-50%) scale(.985) !important;
}
/* ===== Upload choose button: same style as Generate button ===== */
/* =====================================================
CSS-БЛОК: .upload-choose-photos-btn
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.upload-choose-photos-btn{
  min-height:40px !important;
  height:40px !important;
  min-width:auto !important;
  padding:0 22px !important;
  border:0 !important;
  border-radius:999px !important;
  background:#2f6fbd !important;
  color:#fff !important;
  font-family:inherit !important;
  font-size:15px !important;
  font-weight:700 !important;
  cursor:pointer !important;
  white-space:nowrap !important;
  box-shadow:none !important;
}

/* =====================================================
CSS-БЛОК: .upload-choose-photos-btn[hidden]
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.upload-choose-photos-btn[hidden]{
  display:none !important;
}

/* =====================================================
CSS-БЛОК: .upload-choose-photos-btn:active
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.upload-choose-photos-btn:active{
  transform:translateX(-50%) scale(.98) !important;
}

/* ===== Composer selected images: small thumbnails with delete cross ===== */
/* =====================================================
CSS-БЛОК: .composer-image-draft
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.composer-image-draft{
  width:100% !important;
  display:flex !important;
  flex-wrap:wrap !important;
  gap:6px !important;
  padding:0 2px 7px !important;
  align-items:center !important;
}

/* =====================================================
CSS-БЛОК: .composer-image-draft[hidden]
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.composer-image-draft[hidden]{
  display:none !important;
}

/* =====================================================
CSS-БЛОК: .composer-image-thumb
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.composer-image-thumb{
  position:relative !important;
  width:42px !important;
  height:42px !important;
  min-width:42px !important;
  max-width:42px !important;
  flex:0 0 42px !important;
  border:1px solid rgba(255,255,255,.14) !important;
  border-radius:11px !important;
  overflow:hidden !important;
  background:rgba(255,255,255,.06) !important;
  padding:0 !important;
  display:block !important;
}

/* =====================================================
CSS-БЛОК: .composer-image-thumb img
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.composer-image-thumb img{
  width:42px !important;
  height:42px !important;
  max-width:42px !important;
  max-height:42px !important;
  object-fit:cover !important;
  display:block !important;
}

/* =====================================================
CSS-БЛОК: .composer-image-remove
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.composer-image-remove{
  position:absolute !important;
  top:2px !important;
  right:2px !important;
  width:14px !important;
  height:14px !important;
  border-radius:999px !important;
  display:grid !important;
  place-items:center !important;
  background:rgba(0,0,0,.72) !important;
  color:#fff !important;
  font-size:11px !important;
  line-height:1 !important;
  font-weight:900 !important;
  z-index:2 !important;
}
/* ===== User sent reference photos in chat: medium preview, not full size ===== */
/* =====================================================
CSS-БЛОК: .view[data-view="tools"].active .msg.user .bubble .msg-ref-img-row
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.view[data-view="tools"].active .msg.user .bubble .msg-ref-img-row{
  display:flex !important;
  flex-wrap:wrap !important;
  justify-content:flex-end !important;
  gap:8px !important;
  margin-top:8px !important;
}

.view[data-view="tools"].active .msg.user .bubble .msg-ref-video-row{
  display:flex !important;
  flex-wrap:wrap !important;
  justify-content:flex-end !important;
  gap:8px !important;
  margin-top:8px !important;
}

/* =====================================================
CSS-БЛОК: .view[data-view="tools"].active .msg.user .bubble .msg-ref-img
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.view[data-view="tools"].active .msg.user .bubble .msg-ref-img{
  width:52px !important;
  height:52px !important;
  max-width:52px !important;
  max-height:52px !important;
  flex:0 0 auto !important;
  border-radius:16px !important;
  overflow:hidden !important;
  background:rgba(255,255,255,.08) !important;
  border:1px solid rgba(255,255,255,.14) !important;
  display:block !important;
}

/* =====================================================
CSS-БЛОК: .view[data-view="tools"].active .msg.user .bubble .msg-ref-img img
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.view[data-view="tools"].active .msg.user .bubble .msg-ref-img img{
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  max-height:none !important;
  object-fit:cover !important;
  display:block !important;
  margin:0 !important;
  border-radius:0 !important;
}

.view[data-view="tools"].active .msg.user .bubble .msg-ref-video{
  width:52px !important;
  height:52px !important;
  max-width:52px !important;
  max-height:52px !important;
  flex:0 0 auto !important;
  border-radius:16px !important;
  overflow:hidden !important;
  background:#000 !important;
  border:1px solid rgba(255,255,255,.14) !important;
  display:block !important;
}

.view[data-view="tools"].active .msg.user .bubble .msg-ref-video video{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  display:block !important;
  background:#000 !important;
}

.view[data-view="tools"].active .msg.user .bubble .msg-attachment{
  display:block;
  margin-top:8px;
  overflow:hidden;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.08);
}

.view[data-view="tools"].active .msg.user .bubble .msg-attachment-image img{
  display:block;
  width:170px;
  max-width:48vw;
  max-height:230px;
  object-fit:cover;
  border-radius:16px;
}

.view[data-view="tools"].active .msg.user .bubble .msg-attachment-video video{
  display:block;
  width:220px;
  max-width:58vw;
  max-height:260px;
  background:#000;
}

.view[data-view="tools"].active .msg.user .bubble .msg-attachment-audio{
  padding:8px;
}

.view[data-view="tools"].active .msg.user .bubble .msg-attachment-audio audio{
  display:block;
  width:230px;
  max-width:58vw;
}

.view[data-view="tools"].active .msg.user .bubble .msg-attachment-file{
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  color:var(--st-text);
  text-decoration:none;
}

.view[data-view="tools"].active .msg.user .bubble .msg-attachment-file b{
  font-size:12px;
  line-height:1.2;
  max-width:190px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.view[data-view="tools"].active .msg.user .bubble > img,
.view[data-view="tools"].active .msg.user .bubble img.gen-img{
  width:auto !important;
  max-width:170px !important;
  max-height:210px !important;
  object-fit:cover !important;
  border-radius:16px !important;
}

/* ===== Upload panel generated history: same size as lower uploaded photos ===== */
/* =====================================================
CSS-БЛОК: .upload-generated-grid
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.upload-generated-grid{
  display:flex !important;
  flex-wrap:wrap !important;
  align-content:flex-start !important;
  justify-content:flex-start !important;
  gap:8px !important;
  padding:12px !important;
  overflow-y:auto !important;
}

/* =====================================================
CSS-БЛОК: .upload-generated-thumb
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.upload-generated-thumb{
  position:relative !important;
  width:58px !important;
  height:58px !important;
  min-width:58px !important;
  max-width:58px !important;
  flex:0 0 58px !important;
  border:1px solid rgba(255,255,255,.14) !important;
  border-radius:14px !important;
  overflow:hidden !important;
  background:rgba(255,255,255,.06) !important;
  padding:0 !important;
}

/* =====================================================
CSS-БЛОК: .upload-generated-thumb img
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.upload-generated-thumb img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  display:block !important;
}

/* =====================================================
CSS-БЛОК: .upload-generated-thumb .upload-thumb-check
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.upload-generated-thumb .upload-thumb-check{
  position:absolute !important;
  right:4px !important;
  bottom:4px !important;
}

/* ===== Full image viewer ===== */
/* =====================================================
CSS-БЛОК: .gen-img-open
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.gen-img-open{
  border:0 !important;
  background:transparent !important;
  padding:0 !important;
  margin:0 !important;
  display:block !important;
  cursor:pointer !important;
}

/* =====================================================
CSS-БЛОК: .image-viewer-backdrop
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.image-viewer-backdrop{
  position:fixed !important;
  inset:0 !important;
  z-index:9999999 !important;
  display:none !important;
  align-items:center !important;
  justify-content:center !important;
  background:rgba(0,0,0,.88) !important;
  padding:18px !important;
}

/* =====================================================
CSS-БЛОК: .image-viewer-backdrop.show
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.image-viewer-backdrop.show{
  display:flex !important;
}

/* =====================================================
CSS-БЛОК: .image-viewer-card
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.image-viewer-card{
  position:relative !important;
  width:100% !important;
  height:100% !important;
  max-width:980px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}

/* =====================================================
CSS-БЛОК: .image-viewer-img
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.image-viewer-img{
  max-width:100% !important;
  max-height:82vh !important;
  object-fit:contain !important;
  border-radius:18px !important;
  display:block !important;
  touch-action:pan-y !important;
}

/* =====================================================
CSS-БЛОК: .image-viewer-nav
Стрелки навигации между изображениями одной генерации; видны только при нескольких изображениях.
===================================================== */
.image-viewer-nav{
  position:absolute !important;
  top:50% !important;
  width:42px !important;
  height:42px !important;
  display:none !important;
  align-items:center !important;
  justify-content:center !important;
  transform:translateY(-50%) !important;
  border:0 !important;
  border-radius:999px !important;
  background:rgba(0,0,0,.44) !important;
  color:#fff !important;
  font-size:30px !important;
  line-height:1 !important;
  cursor:pointer !important;
  z-index:2 !important;
}
.image-viewer-backdrop.has-multiple .image-viewer-nav{display:flex !important}
.image-viewer-nav:active{transform:translateY(-50%) scale(.94) !important}
.image-viewer-prev{left:8px !important}
.image-viewer-next{right:8px !important}
.image-viewer-counter{
  position:absolute !important;
  left:50% !important;
  bottom:10px !important;
  display:none !important;
  transform:translateX(-50%) !important;
  padding:5px 9px !important;
  border-radius:999px !important;
  background:rgba(0,0,0,.52) !important;
  color:#fff !important;
  font-size:12px !important;
  font-weight:700 !important;
  z-index:2 !important;
}
.image-viewer-backdrop.has-multiple .image-viewer-counter{display:block !important}

/* =====================================================
CSS-БЛОК: .image-viewer-close
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.image-viewer-close{
  position:absolute !important;
  top:12px !important;
  right:12px !important;
  width:38px !important;
  height:38px !important;
  border:0 !important;
  border-radius:999px !important;
  background:rgba(255,255,255,.14) !important;
  color:#fff !important;
  font-size:26px !important;
  line-height:1 !important;
  z-index:2 !important;
}

/* Uploaded image previews are displayed only inside the Upload button background */
#composerImageDraft,
.composer-image-draft,
.composer-image-draft.show {
  display: none !important;
}

/* =====================================================
CSS-БЛОК: .model-brand-logo
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.model-brand-logo {
  width: 22px;
  height: 22px;
  display: block;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: .96;
}

/* =====================================================
CSS-БЛОК: .image-model-icon
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.image-model-icon {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  display: grid;
  place-items: center;
  background: transparent;
  color: #f3f3f3;
}

/* =====================================================
CSS-БЛОК: .image-model-icon img
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.image-model-icon img {
  width: 22px;
  height: 22px;
}

/* =====================================================
CSS-БЛОК: .model-row-badge
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.model-row-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 10px;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
  white-space: nowrap;
}

/* =====================================================
CSS-БЛОК: .model-row-badge.pink
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.model-row-badge.pink {
  background: rgba(255, 120, 210, .2);
  color: #ff9bdd;
}

/* =====================================================
CSS-БЛОК: .model-row-badge.yellow
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.model-row-badge.yellow {
  background: rgba(255, 220, 90, .18);
  color: #ffe05e;
}

/* =====================================================
CSS-БЛОК: .model-row-badge.red
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.model-row-badge.red {
  background: rgba(255, 100, 80, .18);
  color: #ff826d;
}

/* =====================================================
CSS-БЛОК: .model-row-badge.green
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.model-row-badge.green {
  background: rgba(70, 220, 150, .18);
  color: #61e6ad;
}
/* =====================================================
CSS-БЛОК: .model-brand-logo
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.model-brand-logo{
  width:22px !important;
  height:22px !important;
  display:block !important;
  object-fit:contain !important;
  filter:brightness(0) invert(1) !important;
  opacity:.96 !important;
}

/* =====================================================
CSS-БЛОК: .image-model-icon
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.image-model-icon{
  width:32px !important;
  height:32px !important;
  flex:0 0 32px !important;
  display:grid !important;
  place-items:center !important;
  background:transparent !important;
  border-radius:0 !important;
  color:#f3f3f3 !important;
  font-size:17px !important;
  font-weight:700 !important;
}

/* =====================================================
CSS-БЛОК: .image-model-icon img
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.image-model-icon img{
  width:22px !important;
  height:22px !important;
  display:block !important;
  object-fit:contain !important;
}

/* =====================================================
CSS-БЛОК: .model-row-badge
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.model-row-badge{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  margin-left:10px !important;
  padding:4px 12px !important;
  border-radius:999px !important;
  font-size:11px !important;
  font-weight:800 !important;
  letter-spacing:.04em !important;
  white-space:nowrap !important;
  vertical-align:middle !important;
}

/* =====================================================
CSS-БЛОК: .model-row-badge.pink
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.model-row-badge.pink{
  background:rgba(255,120,210,.2) !important;
  color:#ff9bdd !important;
}

/* =====================================================
CSS-БЛОК: .model-row-badge.yellow
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.model-row-badge.yellow{
  background:rgba(255,220,90,.18) !important;
  color:#ffe05e !important;
}

/* =====================================================
CSS-БЛОК: .model-row-badge.red
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.model-row-badge.red{
  background:rgba(255,100,80,.18) !important;
  color:#ff826d !important;
}

/* =====================================================
CSS-БЛОК: .model-row-badge.green
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.model-row-badge.green{
  background:rgba(70,220,150,.18) !important;
  color:#61e6ad !important;
}

/* ===== Model sheet compact text size: image/video unified ===== */
/* =====================================================
CSS-БЛОК: .image-model-row .image-model-name
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.image-model-row .image-model-name {
  font-size: 14px !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
  letter-spacing: -.01em !important;
}

/* =====================================================
CSS-БЛОК: .image-model-row .image-model-desc
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.image-model-row .image-model-desc {
  font-size: 12px !important;
  line-height: 1.25 !important;
  font-weight: 500 !important;
  opacity: .62 !important;
}

/* =====================================================
CSS-БЛОК: .image-model-row .model-row-badge
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.image-model-row .model-row-badge {
  display: none !important;
}

/* ===== Final override: custom SVG model logos ===== */
/* =====================================================
CSS-БЛОК: .model-brand-logo.svg-current
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.model-brand-logo.svg-current {
  color: #f3f3f3 !important;
  filter: none !important;
}

/* Inside Pro Studio's model picker, monochrome model logos must invert to
   dark in White theme (never a white-on-white silhouette) and stay light
   in Gray/Black - driven by --st-logo-invert, forwarded from the active
   Pro Studio theme. Scoped to #modelPop so the app-wide AI chips/banner
   logos elsewhere (which follow the app's own light/dark theme) are
   untouched. */
body > #modelPop .model-brand-logo {
  filter: brightness(0) invert(var(--st-logo-invert, 1)) !important;
}
body > #modelPop .model-brand-logo.svg-current {
  color: var(--st-text, #f3f3f3) !important;
  filter: none !important;
}

.dots,
.dot-i{
  display:none !important;
}
/* Hide homepage carousel dots */
/* =====================================================
CSS-БЛОК: .dot-i
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.hero-carousel .dots,
.hero-carousel .dot-i,
.dots,
.dot-i{
  display:none !important;
  opacity:0 !important;
  pointer-events:none !important;
}
/* Hide Pro Studio generation typing dots */
.view[data-view="tools"] .typing,
.view[data-view="tools"] .typing span,
.studio .typing,
.studio .typing span,
.msg.ai .typing,
.msg.ai .typing span{
  display:none !important;
  opacity:0 !important;
  width:0 !important;
  height:0 !important;
  animation:none !important;
  pointer-events:none !important;
}

/* Pro Studio decorative background: a subtle dotted matrix (not Grid Mode -
   purely decorative), drawn as a plain background-image directly on .studio
   itself, never a pseudo-element/overlay - the two attempts at a
   pseudo-element-based decoration above were disabled specifically
   because an absolutely-positioned overlay layer risks sitting above
   content and swallowing clicks. A background-image can never intercept
   pointer events, so this is safe by construction. Two staggered layers of
   small round dots (like the original "SAFE Pro Studio dots" attempt above,
   which used the same two-layer/offset trick) give an evenly distributed,
   brick-like dot pattern rather than a harsh square grid. Colors come from
   --st-grid-line, set per Gray/White/Black theme above, so the dots stay
   subtle and correctly-contrasted in all three. */
.view[data-view="tools"].active .studio{
  background-image:
    radial-gradient(circle, var(--st-grid-line) 1px, transparent 1.3px),
    radial-gradient(circle, var(--st-grid-line) 1px, transparent 1.3px) !important;
  background-size:26px 26px, 26px 26px !important;
  background-position:0 0, 13px 13px !important;
}
body.ai-generating .view[data-view="tools"].active .studio,
.view[data-view="tools"].active .studio:has(.typing){
  background-image:
    radial-gradient(circle, var(--st-grid-line) 1px, transparent 1.3px),
    radial-gradient(circle, var(--st-grid-line) 1px, transparent 1.3px) !important;
  background-size:26px 26px, 26px 26px !important;
  background-position:0 0, 13px 13px !important;
  animation:studioGridPulse 2.6s ease-in-out infinite !important;
}
@keyframes studioGridPulse{
  0%,100%{filter:brightness(1)}
  50%{filter:brightness(1.16)}
}
.view[data-view="tools"].active .chat-area{
  background-image:none !important;
}

.view[data-view="tools"].active .studio::before,
.view[data-view="tools"].active .studio::after,
.view[data-view="tools"].active .chat-area::before,
.view[data-view="tools"].active .chat-area::after{
  content:none !important;
  display:none !important;
  background:none !important;
  animation:none !important;
}

/* Pro Studio image generation compact UX */
.generation-loading-msg,
.generation-result-msg{
  max-width:78% !important;
}

.text-loading-msg{
  max-width:78% !important;
}

.text-loading-dots{
  display:inline-flex;
  align-items:center;
  gap:5px;
  min-height:34px;
  padding:10px 13px;
  border-radius:14px;
  background:#141518;
  border:1px solid rgba(255,255,255,.10);
}

.text-loading-dots span{
  width:7px;
  height:7px;
  border-radius:50%;
  background:rgba(255,255,255,.82);
  animation:textDotsBlink 1.05s ease-in-out infinite;
}

.text-loading-dots span:nth-child(2){animation-delay:.14s}
.text-loading-dots span:nth-child(3){animation-delay:.28s}

@keyframes textDotsBlink{
  0%,80%,100%{opacity:.28;transform:translateY(0)}
  40%{opacity:1;transform:translateY(-3px)}
}

/* =====================================================
CSS-БЛОК: .generation-loading-card
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.generation-loading-card{
  position:relative;
  overflow:hidden;
  min-width:190px;
  padding:14px 16px;
  border-radius:16px;
  background:#141518;
  border:1px solid rgba(255,255,255,.10);
  color:#f3f3f3;
}
.view[data-view="tools"].active .generation-loading-card{
  background:var(--st-bg-2);border:1px solid var(--st-border);color:var(--st-text);
}

/* =====================================================
CSS-БЛОК: .generation-loading-border
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.generation-loading-border{
  position:absolute;
  inset:0;
  border-radius:inherit;
  padding:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),rgba(255,255,255,.72),rgba(255,255,255,.18),transparent);
  background-size:220% 100%;
  animation:generationBorderSweep 1.6s linear infinite;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  pointer-events:none;
}

/* =====================================================
CSS-БЛОК: .generation-loading-title
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.generation-loading-title{
  position:relative;
  z-index:1;
  font-size:14px;
  font-weight:650;
  letter-spacing:.01em;
}

/* =====================================================
CSS-БЛОК: .generation-loading-progress
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.generation-loading-progress{
  position:relative;
  z-index:1;
  height:6px;
  margin-top:12px;
  border-radius:999px;
  overflow:hidden;
  background:rgba(255,255,255,.10);
}
.view[data-view="tools"].active .generation-loading-progress{background:var(--st-bg-3)}

/* =====================================================
CSS-БЛОК: .generation-loading-progress span
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.generation-loading-progress span{
  display:block;
  height:100%;
  width:0;
  border-radius:inherit;
  background:linear-gradient(90deg,#fff,rgba(255,255,255,.66));
  transition:width .55s ease;
}
.view[data-view="tools"].active .generation-loading-progress span{
  background:linear-gradient(90deg,var(--st-accent),var(--st-accent-2));
}

/* =====================================================
CSS-БЛОК: .generation-loading-percent
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.generation-loading-percent{
  position:relative;
  z-index:1;
  margin-top:7px;
  font-size:12px;
  font-weight:700;
  color:rgba(255,255,255,.68);
}
.view[data-view="tools"].active .generation-loading-percent{color:var(--st-mute)}
.view[data-view="tools"].active .generation-loading-border{
  background:linear-gradient(90deg,transparent,var(--st-accent-bg),var(--st-accent),var(--st-accent-bg),transparent);
  background-size:220% 100%;
}

.generation-balance-msg{max-width:78% !important}
/* =====================================================
CSS-БЛОК: .generation-balance-card
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.generation-balance-card{
  min-width:220px;max-width:300px;padding:14px 16px;border-radius:16px;
  background:#141518;border:1px solid rgba(255,255,255,.10);color:#f3f3f3;
  box-shadow:0 16px 34px -24px rgba(0,0,0,.9)
}
.view[data-view="tools"].active .generation-balance-card{
  background:var(--st-bg-2);border:1px solid var(--st-border);color:var(--st-text);
}
.generation-balance-title{font-size:14px;font-weight:750;margin-bottom:6px}
.generation-balance-text{font-size:12.5px;line-height:1.45;color:rgba(255,255,255,.66);margin-bottom:12px}
.view[data-view="tools"].active .generation-balance-text{color:var(--st-dim)}
/* =====================================================
CSS-БЛОК: .generation-balance-prompt
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.generation-balance-prompt{
  display:block;color:rgba(255,255,255,.86);font-size:13px;line-height:1.35;margin-bottom:8px;
  overflow:hidden;text-overflow:ellipsis
}
.view[data-view="tools"].active .generation-balance-prompt{color:var(--st-text)}
.generation-balance-actions{display:flex;gap:8px;flex-wrap:wrap}
/* =====================================================
CSS-БЛОК: .generation-balance-actions button
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.generation-balance-actions button{
  min-height:34px;border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:0 12px;
  background:rgba(255,255,255,.06);color:#f3f3f3;font:inherit;font-size:12.5px;font-weight:650;cursor:pointer
}
.generation-balance-actions button:first-child{background:#244f86;border-color:rgba(255,255,255,.10)}
.generation-balance-actions button:active{transform:scale(.97)}
.view[data-view="tools"].active .generation-balance-actions button{
  background:var(--st-bg-3);border:1px solid var(--st-border);color:var(--st-text);
}
.view[data-view="tools"].active .generation-balance-actions button:first-child{
  background:var(--st-accent);border-color:var(--st-accent);color:var(--st-accent-text);
}

@keyframes generationBorderSweep{
  from{background-position:220% 0}
  to{background-position:-220% 0}
}

/* =====================================================
CSS-БЛОК: .generation-result-mini-card
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.generation-result-mini-card{
  display:flex;
  align-items:center;
  gap:10px;
  width:280px;
  max-width:100%;
  padding:8px;
  border-radius:16px;
  background:#141518;
  border:1px solid rgba(255,255,255,.10);
  color:#f3f3f3;
  cursor:pointer;
  text-align:left;
  font-family:inherit;
}
.view[data-view="tools"].active .generation-result-mini-card{
  background:var(--st-bg-2);border:1px solid var(--st-border);color:var(--st-text);box-shadow:var(--st-depth-1);
}

.generation-result-card-shell{
  position:relative;
  width:280px;
  max-width:100%;
}
.generation-result-card-shell .generation-result-mini-card{width:100%;padding-right:42px}
.generation-result-share{
  position:absolute;right:8px;top:8px;z-index:2;width:30px;height:30px;padding:0;
  display:grid;place-items:center;border-radius:10px;border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.08);color:#f3f3f3;cursor:pointer
}
.view[data-view="tools"].active .generation-result-share{
  border:1px solid var(--st-border);background:var(--st-bg-3);color:var(--st-text);
}
.generation-result-share:active{transform:scale(.94)}

.generation-result-mini-card:active{transform:scale(.98)}

/* =====================================================
CSS-БЛОК: .generation-result-voice-card
Показывает сгенерированную озвучку прямо в карточке результата.
Внутри карточки находятся кнопка воспроизведения и HTML-аудиоплеер без внешних ссылок.
===================================================== */
.generation-result-voice-card{
  cursor:default;
  align-items:flex-start;
}

.generation-result-voice-card:active{transform:none}

.generation-result-voice-card .generation-result-meta{
  flex:1;
  gap:6px;
}

.generation-result-inline-audio{
  display:block;
  width:100%;
  height:34px;
  margin-top:2px;
  border-radius:999px;
  color-scheme:dark;
}

.generation-result-play-btn{
  width:100%;
  justify-content:center;
  margin-top:2px;
}

.generation-info-inline-audio{
  margin:0 0 14px;
}

.generation-info-media-player{
  display:block;
  width:100%;
  max-height:260px;
  margin:0 0 14px;
  border-radius:16px;
  background:#141518;
  border:1px solid rgba(255,255,255,.10);
}
.generation-info-media-player{background:var(--st-bg-3);border:1px solid var(--st-border)}

.generation-info-preview-button{
  cursor:pointer;
}
/* =====================================================
CSS-БЛОК: .generation-result-thumb
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.generation-result-thumb{
  width:58px;
  height:58px;
  flex:0 0 58px;
  overflow:hidden;
  border-radius:12px;
  background:#24262b;
  border:1px solid rgba(255,255,255,.08);
}
.view[data-view="tools"].active .generation-result-thumb,
.view[data-view="tools"].active .generation-result-image-thumb{
  background:var(--st-bg-3);border:1px solid var(--st-border);
}

/* =====================================================
CSS-БЛОК: .generation-result-thumb img
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.generation-result-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
/* =====================================================
CSS-БЛОК: .generation-result-fallback
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.generation-result-fallback{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,.08);
  color:#fff;
  font-size:14px;
  font-weight:900;
}
.view[data-view="tools"].active .generation-result-fallback{
  background:var(--st-bg-4);color:var(--st-text);
}

/* =====================================================
CSS-БЛОК: .generation-result-meta
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.generation-result-meta{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:3px;
}

/* Multi-image variant: the shell is a plain <div> (can't nest a <button>
   inside the per-image buttons), so .generation-result-meta becomes its
   own <button> here and needs its default button chrome reset. */
.generation-result-mini-card-multi{cursor:default}
.generation-result-mini-card-multi:active{transform:none}
.generation-result-mini-card-multi .generation-result-meta{
  flex:1;
  min-width:0;
  padding:0;
  border:0;
  background:transparent;
  color:inherit;
  font:inherit;
  text-align:left;
  cursor:pointer;
}
.generation-result-thumb-multi{
  width:auto;
  height:auto;
  flex:0 0 auto;
  overflow:visible;
  background:transparent;
  border:0;
}
.generation-result-image-grid{
  display:grid;
  grid-template-columns:repeat(2,58px);
  grid-auto-rows:58px;
  gap:6px;
}
.generation-result-image-thumb{
  width:58px;
  height:58px;
  padding:0;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
  background:#24262b;
  cursor:pointer;
}
.generation-result-image-thumb:active{transform:scale(.97)}
.generation-result-image-thumb img{width:100%;height:100%;display:block;object-fit:cover}
.generation-result-meta:focus-visible,.generation-result-image-thumb:focus-visible{outline:2px solid #8fc4ff;outline-offset:2px}

/* =====================================================
CSS-БЛОК: .generation-result-title
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.generation-result-title{
  font-size:13px;
  font-weight:700;
}

/* =====================================================
CSS-БЛОК: .generation-result-sub
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.generation-result-sub{
  font-size:11px;
  color:rgba(255,255,255,.58);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.generation-result-cost{font-size:11px;font-weight:750;color:#8fc4ff}
.generation-result-prompt{
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;
  font-size:11px;line-height:1.35;color:rgba(255,255,255,.72);white-space:normal
}
.view[data-view="tools"].active .generation-result-sub{color:var(--st-mute)}
.view[data-view="tools"].active .generation-result-cost{color:var(--st-accent)}
.view[data-view="tools"].active .generation-result-prompt{color:var(--st-dim)}
.view[data-view="tools"].active .generation-result-meta:focus-visible,
.view[data-view="tools"].active .generation-result-image-thumb:focus-visible{outline-color:var(--st-accent)}

/* =====================================================
CSS-БЛОК: .generation-info-drawer-backdrop
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.generation-info-drawer-backdrop{
  position:fixed;
  inset:0;
  display:none;
  justify-content:flex-end;
  background:rgba(0,0,0,.42);
  z-index:120;
}
.generation-info-drawer-backdrop{background:color-mix(in srgb, var(--st-shadow) 60%, transparent)}

.generation-info-drawer-backdrop.show{display:flex}

/* =====================================================
CSS-БЛОК: .generation-info-drawer
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.generation-info-drawer{
  width:min(360px,88vw);
  height:100%;
  padding:18px 16px calc(18px + env(safe-area-inset-bottom));
  background:#0b0b0d;
  border-left:1px solid rgba(255,255,255,.10);
  box-shadow:-24px 0 60px rgba(0,0,0,.45);
  overflow-y:auto;
  color:#f3f3f3;
}
.generation-info-drawer{
  background:var(--st-bg);border-left:1px solid var(--st-border);color:var(--st-text);
  box-shadow:var(--st-depth-2);
}

/* =====================================================
CSS-БЛОК: .generation-info-head
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.generation-info-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
}

/* =====================================================
CSS-БЛОК: .generation-info-kicker
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.generation-info-kicker{
  color:rgba(255,255,255,.48);
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.12em;
}
.generation-info-kicker{color:var(--st-mute)}

/* =====================================================
CSS-БЛОК: .generation-info-head h3
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.generation-info-head h3{
  margin:3px 0 0;
  font-size:18px;
}

/* =====================================================
CSS-БЛОК: .generation-info-close
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.generation-info-close{
  width:34px;
  height:34px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.10);
  background:#141518;
  color:#f3f3f3;
  font-size:20px;
  cursor:pointer;
}
.generation-info-close{
  border:1px solid var(--st-border);background:var(--st-bg-3);color:var(--st-text);
}

/* =====================================================
CSS-БЛОК: .generation-info-preview
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.generation-info-preview{
  width:72px;
  height:72px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:16px;
  overflow:hidden;
  background:#141518;
  padding:0;
  margin:0 0 14px;
  position:relative;
}
.generation-info-preview{
  border:1px solid var(--st-border);background:var(--st-bg-3);
}

/* =====================================================
CSS-БЛОК: .generation-info-preview img
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.generation-info-preview img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* =====================================================
CSS-БЛОК: .generation-info-image-grid
Сетка всех изображений одной генерации в развёрнутой карточке деталей.
===================================================== */
.generation-info-image-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
  margin:0 0 14px;
}
.generation-info-image-button{
  aspect-ratio:1;
  min-width:0;
  padding:0;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  border-radius:16px;
  background:#141518;
  cursor:pointer;
}
.generation-info-image-button{
  border:1px solid var(--st-border);background:var(--st-bg-3);
}
.generation-info-image-button img{width:100%;height:100%;display:block;object-fit:cover}
.generation-info-image-button:active{transform:scale(.98)}
.generation-info-image-button:focus-visible{outline:2px solid #8fc4ff;outline-offset:2px}
/* =====================================================
CSS-БЛОК: .generation-info-video-preview
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.generation-info-video-preview{
  display:flex;
  align-items:center;
  justify-content:center;
}
/* =====================================================
CSS-БЛОК: .generation-info-video-preview::after
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.generation-info-video-preview::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-35%,-50%);
  border-left:14px solid rgba(255,255,255,.9);
  border-top:9px solid transparent;
  border-bottom:9px solid transparent;
}
/* =====================================================
CSS-БЛОК: .generation-info-video-preview span
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.generation-info-video-preview span{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size:13px;
  font-weight:900;
  background:rgba(255,255,255,.08);
}
.generation-info-video-preview span{background:var(--st-bg-4);color:var(--st-text)}
/* =====================================================
CSS-БЛОК: .generation-info-audio-preview
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.generation-info-audio-preview{
  display:flex;
  align-items:center;
  justify-content:center;
}
/* =====================================================
CSS-БЛОК: .generation-info-audio-preview span
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.generation-info-audio-preview span{
  width:42px;
  height:42px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,.10);
  color:#fff;
  font-size:18px;
  font-weight:900;
}
.generation-info-audio-preview span{background:var(--st-bg-4);color:var(--st-text)}

/* =====================================================
CSS-БЛОК: .generation-info-section
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.generation-info-section{
  padding:12px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  background:#141518;
  margin-bottom:10px;
}
.generation-info-section{
  border:1px solid var(--st-border);background:var(--st-bg-2);
}

/* =====================================================
CSS-БЛОК: .generation-info-row
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.generation-info-row{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:7px 0;
  border-bottom:1px solid rgba(255,255,255,.06);
  font-size:12px;
}

.generation-info-row:last-child{border-bottom:none}
.generation-info-row span{color:rgba(255,255,255,.55)}
.generation-info-row b{font-weight:650;text-align:right;word-break:break-word}
.generation-info-label{font-size:11px;color:rgba(255,255,255,.55);margin-bottom:6px}
.generation-info-text{margin:0;font-size:13px;line-height:1.45;color:#f3f3f3;white-space:pre-wrap}
.generation-info-row{border-bottom:1px solid var(--st-line)}
.generation-info-row span,
.generation-info-label{color:var(--st-mute)}
.generation-info-row b,
.generation-info-text{color:var(--st-text)}
.generation-prompt-block:not(.is-expanded) .generation-info-text{
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;overflow:hidden
}
.generation-prompt-toggle{
  margin-top:8px;padding:0;border:0;background:transparent;color:#78b7ff;
  font:inherit;font-size:12px;font-weight:750;cursor:pointer
}
.generation-info-ref-row{display:flex;gap:8px;overflow-x:auto}
.generation-info-ref-row img{width:54px;height:54px;border-radius:10px;object-fit:cover;border:1px solid rgba(255,255,255,.10)}
.generation-info-ref-row img{border:1px solid var(--st-border)}
.generation-info-actions{display:grid;grid-template-columns:1fr;gap:8px;margin-top:12px}
/* =====================================================
CSS-БЛОК: .generation-info-actions button
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.generation-info-actions button,
.generation-info-actions a{
  min-height:40px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.10);
  background:#f3f3f3;
  color:#0b0b0d;
  font-weight:750;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  font-family:inherit;
  font-size:13px;
  gap:8px;
}
.generation-info-actions button,
.generation-info-actions a{
  border:1px solid var(--st-border);background:var(--st-invert-bg);color:var(--st-invert-text);
}

/* Photo operation workspace */
.photo-tool-modal{
  position:fixed;inset:0;z-index:1000000;display:none;align-items:center;justify-content:center;
  padding:20px;background:rgba(0,0,0,.68);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)
}
.photo-tool-modal.show{display:flex}
.photo-tool-dialog{
  width:min(920px,calc(100vw - 32px));max-height:min(760px,calc(100vh - 40px));overflow:auto;
  border-radius:26px;background:var(--st-bg-2, #18191d);border:1px solid var(--st-border, rgba(255,255,255,.11));
  box-shadow:var(--st-depth-2, none), 0 34px 100px var(--st-shadow, rgba(0,0,0,.62));color:var(--st-text, #f3f3f3);padding:18px
}
.photo-tool-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:16px}
.photo-tool-head small{display:block;color:var(--st-mute, rgba(255,255,255,.48));font-size:11px;text-transform:uppercase;letter-spacing:.1em}
.photo-tool-head h3{margin:4px 0 0;font-size:24px;line-height:1.15;color:var(--st-text, inherit)}
.photo-tool-head>button{
  width:36px;height:36px;flex:0 0 36px;border-radius:11px;border:1px solid var(--st-border, rgba(255,255,255,.10));
  background:var(--st-bg-3, rgba(255,255,255,.07));color:var(--st-text, #fff);font-size:23px;cursor:pointer
}
.photo-tool-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,1fr);gap:18px}
.photo-tool-demo-column,.photo-tool-work-column{
  min-width:0;padding:13px;border-radius:20px;background:var(--st-bg-3, #111216);border:1px solid var(--st-border, rgba(255,255,255,.08))
}
.photo-tool-demo{position:relative;aspect-ratio:4/3;border-radius:16px;overflow:hidden;background:#24262c}
.photo-tool-demo video,.photo-tool-demo img{width:100%;height:100%;display:block;object-fit:cover}
.photo-tool-compare{touch-action:pan-y;user-select:none;-webkit-user-select:none}
.photo-tool-compare .photo-tool-after,.photo-tool-compare .photo-tool-before{position:absolute;inset:0}
.photo-tool-compare .photo-tool-before{z-index:2;clip-path:inset(0 calc(100% - var(--compare-position)) 0 0)}
.photo-tool-compare-line{position:absolute;z-index:3;top:0;bottom:0;left:var(--compare-position);width:2px;background:#fff;box-shadow:0 0 12px rgba(0,0,0,.7);transform:translateX(-1px);pointer-events:none}
.photo-tool-compare-line::after{content:"↔";position:absolute;left:50%;top:50%;width:35px;height:35px;border-radius:50%;display:grid;place-items:center;transform:translate(-50%,-50%);background:rgba(14,15,18,.82);border:2px solid #fff;color:#fff;font-size:15px}
.photo-tool-compare input[type="range"]{position:absolute;z-index:5;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;touch-action:pan-y}
.photo-tool-compare-label{position:absolute;z-index:4;top:10px;padding:5px 8px;border-radius:999px;background:rgba(0,0,0,.58);color:#fff;font-size:9px;letter-spacing:.08em;text-transform:uppercase;pointer-events:none}.photo-tool-compare-label.before{left:10px}.photo-tool-compare-label.after{right:10px}
.photo-tool-demo-placeholder{
  position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;
  gap:7px;padding:22px;text-align:center;color:rgba(255,255,255,.75);
  background:radial-gradient(circle at 50% 40%,rgba(72,128,195,.28),transparent 42%),linear-gradient(145deg,#292c33,#17181c)
}
.photo-tool-demo.demo-missing video{display:none}
.photo-tool-demo.demo-missing .photo-tool-demo-placeholder{display:flex}
.photo-tool-demo-placeholder span{
  width:60px;height:60px;border-radius:50%;border:2px solid rgba(255,255,255,.26);
  box-shadow:0 0 0 10px rgba(255,255,255,.04);animation:photoToolPulse 1.8s ease-in-out infinite
}
.photo-tool-demo-placeholder b{font-size:15px}
.photo-tool-demo-placeholder small{font-size:11px;color:rgba(255,255,255,.47)}
.photo-tool-demo-column>p{margin:12px 4px 2px;color:var(--st-dim, rgba(255,255,255,.66));font-size:13px;line-height:1.45}
.photo-tool-work-column{display:flex;flex-direction:column;gap:12px}
.photo-tool-library{min-width:0;padding:10px;border:1px solid var(--st-border, rgba(255,255,255,.09));border-radius:15px;background:var(--st-bg-2, rgba(255,255,255,.025))}
.photo-tool-library>small{display:block;margin:0 0 8px;color:var(--st-mute, rgba(255,255,255,.58));font-size:10px}
.photo-tool-library>div{display:flex;gap:7px;overflow-x:auto;padding-bottom:2px;scrollbar-width:none}.photo-tool-library>div::-webkit-scrollbar{display:none}
.photo-tool-library button{position:relative;flex:0 0 52px;width:52px;height:52px;border:1px solid rgba(255,255,255,.12);border-radius:12px;background:#24262b;color:#fff;overflow:hidden;display:grid;place-items:center;cursor:pointer}.photo-tool-library button:disabled{opacity:.38}.photo-tool-library button.create{flex-basis:68px;width:68px;display:flex;flex-direction:column;gap:2px}.photo-tool-library button i{font-style:normal;font-size:16px}.photo-tool-library button b{font-size:8px}.photo-tool-library button img{width:100%;height:100%;object-fit:cover}
.photo-tool-mask-note{display:flex;align-items:center;gap:10px;padding:10px;border:1px solid rgba(77,177,255,.22);border-radius:14px;background:rgba(44,124,188,.10)}.photo-tool-mask-note>span{width:26px;height:26px;flex:0 0 26px;border-radius:50%;background:#3fbb78;box-shadow:0 0 0 5px rgba(63,187,120,.12)}.photo-tool-mask-note div{min-width:0}.photo-tool-mask-note b,.photo-tool-mask-note small{display:block}.photo-tool-mask-note b{font-size:11px}.photo-tool-mask-note small{margin-top:2px;color:rgba(255,255,255,.54);font-size:9px;line-height:1.35}
.photo-tool-mask-editor{padding:10px;border:1px solid rgba(77,177,255,.22);border-radius:15px;background:rgba(44,124,188,.08)}.photo-tool-mask-editor>header{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}.photo-tool-mask-editor>header b,.photo-tool-mask-editor>header small{display:block}.photo-tool-mask-editor>header b{font-size:11px}.photo-tool-mask-editor>header small{margin-top:2px;color:rgba(255,255,255,.54);font-size:9px}.photo-tool-mask-editor>header button{padding:6px 9px;border:1px solid rgba(255,255,255,.12);border-radius:9px;background:rgba(255,255,255,.07);color:#fff;font:inherit;font-size:9px}.photo-tool-mask-editor>div{position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:11px;background:#191a1e}.photo-tool-mask-editor img,.photo-tool-mask-editor canvas{position:absolute;inset:0;width:100%;height:100%}.photo-tool-mask-editor img{object-fit:contain}.photo-tool-mask-editor canvas{z-index:2;touch-action:none;cursor:crosshair}
.photo-tool-upload-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.photo-tool-upload-grid.count-1{grid-template-columns:1fr}
.photo-tool-upload-slot{
  position:relative;min-height:135px;border-radius:15px;border:1px dashed rgba(255,255,255,.20);
  background:rgba(255,255,255,.035);color:#f3f3f3;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:5px;padding:10px;overflow:hidden;cursor:pointer
}
.photo-tool-upload-slot.has-file{border-style:solid;border-color:rgba(120,183,255,.55)}
.photo-tool-upload-slot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.photo-tool-upload-slot.has-file::after{content:"";position:absolute;inset:35% 0 0;background:linear-gradient(transparent,rgba(0,0,0,.86))}
.photo-tool-upload-slot b,.photo-tool-upload-slot small{position:relative;z-index:1}
.photo-tool-upload-slot b{font-size:13px}
.photo-tool-upload-slot small{max-width:100%;font-size:10px;color:rgba(255,255,255,.58);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.photo-tool-upload-slot.has-file b,.photo-tool-upload-slot.has-file small{margin-top:auto;text-shadow:0 1px 4px #000}
.photo-tool-upload-plus{font-size:34px;font-weight:300;color:rgba(255,255,255,.55)}
.photo-tool-upload-slot i{
  position:absolute;right:7px;top:7px;z-index:3;width:26px;height:26px;border-radius:50%;
  display:grid;place-items:center;background:rgba(0,0,0,.68);font-style:normal;font-size:18px
}
.photo-tool-work-column textarea{
  width:100%;min-height:64px;resize:vertical;border-radius:13px;border:1px solid var(--st-border, rgba(255,255,255,.11));
  background:var(--st-bg-2, rgba(255,255,255,.045));color:var(--st-text, #fff);padding:11px 12px;font:inherit;font-size:13px;outline:none;box-sizing:border-box
}
.photo-tool-generate{
  min-height:46px;border:0;border-radius:14px;background:var(--st-invert-bg, #f1f3f5);color:var(--st-invert-text, #111216);
  display:flex;align-items:center;justify-content:center;gap:8px;font:inherit;font-size:14px;font-weight:800;cursor:pointer
}
.photo-tool-generate:disabled{opacity:.42;cursor:not-allowed}
.photo-tool-spinner{width:16px;height:16px;border-radius:50%;border:2px solid rgba(0,0,0,.22);border-top-color:#111;animation:photoToolSpin .75s linear infinite}
.photo-tool-catalog{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.photo-tool-catalog-card{
  min-width:0;border-radius:18px;border:1px solid var(--st-border, rgba(255,255,255,.09));background:var(--st-bg-3, #111216);
  color:var(--st-text, #f3f3f3);padding:9px;text-align:left;cursor:pointer
}
.photo-tool-catalog-card .photo-tool-demo{aspect-ratio:16/8}
.photo-tool-catalog-card>span{display:flex;flex-direction:column;gap:4px;padding:10px 5px 5px}
.photo-tool-catalog-card>span>b{font-size:15px}
.photo-tool-catalog-card>span>small{font-size:11px;line-height:1.35;color:rgba(255,255,255,.56)}
.photo-catalog-dialog{width:min(1180px,calc(100vw - 24px));background:color-mix(in srgb, var(--st-bg-2, #121218) 55%, transparent);backdrop-filter:blur(18px)}
.photo-catalog-tabs{display:flex;gap:7px;margin:0 0 12px;overflow-x:auto;scrollbar-width:none}.photo-catalog-tabs::-webkit-scrollbar{display:none}.photo-catalog-tabs button{flex:0 0 auto;padding:8px 12px;border:1px solid var(--st-border, rgba(255,255,255,.1));border-radius:999px;background:var(--st-bg-3, rgba(255,255,255,.06));color:var(--st-dim, rgba(255,255,255,.66));font:700 11px inherit;cursor:pointer}.photo-catalog-tabs button.active{background:var(--st-invert-bg, #f4f5f7);color:var(--st-invert-text, #111318);border-color:var(--st-invert-bg, #f4f5f7)}
.photo-catalog-grid{
  display:block;column-count:5;column-gap:8px
}
.photo-catalog-card{
  position:relative;display:block;width:100%;min-width:0;min-height:0;margin:0 0 8px;padding:0;border-radius:14px;border:0;
  background:#191a1f;color:#f3f3f3;text-align:left;overflow:hidden;cursor:pointer;
  box-shadow:0 10px 30px rgba(0,0,0,.22);break-inside:avoid;page-break-inside:avoid
}
.photo-catalog-card.square{aspect-ratio:1/1}
.photo-catalog-card.wide{aspect-ratio:16/9}
.photo-catalog-card.tall{aspect-ratio:9/16}
.photo-catalog-card>img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;background:#24262c}
.photo-catalog-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 42%,rgba(0,0,0,.76))}
.photo-catalog-card>span{position:absolute;z-index:2;left:7px;right:7px;bottom:7px;display:flex;flex-direction:column;gap:2px}
.photo-catalog-card>span>b{font-size:10.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.photo-catalog-card>span>small{font-size:8px;color:rgba(255,255,255,.68)}
.photo-catalog-card.no-caption::after{display:none}.photo-catalog-card.minimal-caption::after{background:linear-gradient(180deg,transparent 62%,rgba(0,0,0,.5))}.photo-catalog-card.minimal-caption>span{left:8px;right:8px;bottom:7px;display:block;background:transparent}.photo-catalog-card.minimal-caption>span>b{display:block;color:rgba(255,255,255,.88);font-size:9px;font-weight:650;text-shadow:0 1px 5px rgba(0,0,0,.95)}
.photo-catalog-tool-card{aspect-ratio:auto;min-height:150px}.photo-catalog-tool-card .photo-tool-demo{height:150px;aspect-ratio:auto;border-radius:inherit}.photo-catalog-tool-card>span{pointer-events:none}.photo-catalog-tool-card::after{pointer-events:none}
.photo-catalog-empty{
  grid-column:1/-1;min-height:220px;border-radius:18px;border:1px dashed var(--st-border, rgba(255,255,255,.14));
  display:grid;place-items:center;padding:24px;text-align:center;color:var(--st-mute, rgba(255,255,255,.55))
}
.quick-image-detail-dialog{width:min(760px,calc(100vw - 24px))}.quick-image-detail-layout{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(260px,.95fr);gap:16px}.quick-image-detail-reference{min-width:0}.quick-image-detail-reference img{display:block;width:100%;max-height:52vh;aspect-ratio:1/1;object-fit:cover;border-radius:18px;background:#191a1f}.quick-image-detail-reference p{margin:9px 2px 0;color:var(--st-dim, rgba(255,255,255,.58));font-size:11px;line-height:1.45}.quick-image-detail-form{display:flex;flex-direction:column;gap:10px}.quick-image-detail-upload{position:relative;min-height:180px;overflow:hidden;border:1px dashed rgba(255,255,255,.22);border-radius:17px;background:rgba(255,255,255,.04) center/cover no-repeat;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;font:inherit;cursor:pointer}.quick-image-detail-upload.has-image::after{content:"";position:absolute;inset:35% 0 0;background:linear-gradient(transparent,rgba(0,0,0,.78))}.quick-image-detail-upload span,.quick-image-detail-upload b,.quick-image-detail-upload small{position:relative;z-index:1}.quick-image-detail-upload span{font-size:28px}.quick-image-detail-upload b{font-size:13px}.quick-image-detail-upload small{font-size:9px;color:rgba(255,255,255,.58)}.quick-image-detail-upload.has-image b,.quick-image-detail-upload.has-image small{margin-top:auto;text-shadow:0 1px 5px #000}.quick-image-detail-form textarea{width:100%;min-height:105px;box-sizing:border-box;resize:vertical;border:1px solid var(--st-border, rgba(255,255,255,.11));border-radius:15px;background:var(--st-bg-2, rgba(255,255,255,.045));color:var(--st-text, #fff);padding:12px;font:inherit;font-size:12px;outline:none}.quick-image-detail-form textarea[hidden]{display:none}

.quick-image-detail-visual{display:grid;place-items:center;width:100%;min-height:300px;max-height:55vh;padding:12px;box-sizing:border-box;overflow:hidden;border-radius:18px;background:linear-gradient(145deg,rgba(255,255,255,.07),rgba(255,255,255,.015));border:1px solid rgba(255,255,255,.08);box-shadow:inset 0 0 45px rgba(255,255,255,.025)}.quick-image-detail-visual #quickImageDetailImage{display:block;width:auto;height:auto;max-width:100%;max-height:calc(55vh - 24px);aspect-ratio:auto;object-fit:contain;border-radius:13px;background:transparent}.quick-image-detail-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.quick-image-detail-fields label{display:flex;min-width:0;flex-direction:column;gap:4px}.quick-image-detail-fields label span{padding-left:2px;color:rgba(255,255,255,.58);font-size:9px}.quick-image-detail-fields label input{min-width:0;height:38px;padding:0 10px;border:1px solid var(--st-border, rgba(255,255,255,.11));border-radius:11px;background:var(--st-bg-2, rgba(255,255,255,.045));color:var(--st-text, #fff);font:inherit;font-size:11px;outline:none}.quick-image-extra-upload{min-height:58px;border:1px dashed rgba(255,255,255,.17);border-radius:11px;background:rgba(255,255,255,.04) center/cover no-repeat;color:#fff;display:flex;align-items:center;justify-content:center;gap:6px;font:inherit;font-size:10px;overflow:hidden}.quick-image-extra-upload.uploading{opacity:.55}.quick-image-extra-upload.has-image{border-style:solid;text-shadow:0 1px 5px #000}.quick-image-extra-upload span{font-size:18px}
.quick-image-detail-form #quickImageDetailGenerate[hidden]{display:none}.quick-image-detail-form #quickImageDetailGenerate{position:sticky;bottom:0;z-index:5;flex:0 0 auto;box-shadow:0 -10px 26px rgba(0,0,0,.28)}.quick-image-detail-form #quickImageDetailGenerate.is-ready{background:var(--st-invert-bg, #f4f6f8);color:var(--st-invert-text, #101216);opacity:1}
.quick-image-detail-upload.has-image::after{display:none}
.quick-image-detail-upload.has-image>span,.quick-image-detail-upload.has-image>b,.quick-image-detail-upload.has-image>small{display:none}
.quick-image-detail-upload.is-uploading>b{display:block;margin:auto;padding:6px 9px;border-radius:9px;background:rgba(0,0,0,.58);color:#fff;text-shadow:0 1px 5px #000}
.quick-image-detail-remove{display:none;position:absolute;z-index:3;right:8px;top:8px;width:25px;height:25px;border-radius:50%;background:rgba(9,10,12,.72);color:#fff;font-style:normal;font-size:19px;line-height:23px;text-align:center;box-shadow:0 2px 10px rgba(0,0,0,.35)}
.quick-image-detail-upload.has-image .quick-image-detail-remove{display:block}

.expired-subscription-modal{
  position:fixed;inset:0;z-index:1200000;display:none;align-items:center;justify-content:center;
  padding:18px;background:rgba(0,0,0,.68);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)
}
.expired-subscription-modal.show{display:flex}
.expired-subscription-card{
  position:relative;width:min(440px,calc(100vw - 30px));padding:28px;border-radius:26px;
  background:linear-gradient(145deg,#24262c,#15161a);border:1px solid rgba(255,255,255,.12);
  box-shadow:0 34px 100px rgba(0,0,0,.64);color:#f5f5f5;text-align:center
}
.expired-subscription-close{
  position:absolute;right:12px;top:12px;width:34px;height:34px;border-radius:50%;border:0;
  background:rgba(255,255,255,.08);color:#fff;font-size:22px;cursor:pointer
}
.expired-subscription-badge{
  display:inline-flex;padding:6px 11px;border-radius:999px;background:rgba(70,139,224,.18);
  color:#8fc4ff;font-size:10px;font-weight:900;letter-spacing:.12em
}
.expired-subscription-card h2{margin:14px 0 7px;font-size:25px}
.expired-subscription-card>p{margin:0 auto 18px;max-width:350px;color:rgba(255,255,255,.62);font-size:13px;line-height:1.45}
.expired-subscription-user{
  display:flex;align-items:center;gap:12px;padding:12px;border-radius:16px;
  background:rgba(255,255,255,.055);text-align:left;margin-bottom:13px
}
.expired-subscription-user>span{
  width:48px;height:48px;flex:0 0 48px;border-radius:50%;overflow:hidden;background:#383b43;
  display:grid;place-items:center;font-size:14px;font-weight:850
}
.expired-subscription-user>span img{width:100%;height:100%;object-fit:cover}
.expired-subscription-user>div{min-width:0;display:flex;flex-direction:column;gap:2px}
.expired-subscription-user b{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.expired-subscription-user small{font-size:11px;color:rgba(255,255,255,.54)}
.expired-subscription-user em{margin-top:2px;font-size:10px;font-style:normal;color:#f0aa68}
.expired-subscription-plans{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.expired-subscription-plans button{
  min-height:112px;padding:14px;border-radius:17px;border:1px solid rgba(255,255,255,.11);
  background:rgba(255,255,255,.065);color:#fff;display:flex;flex-direction:column;
  justify-content:space-between;align-items:flex-start;text-align:left;cursor:pointer
}
.expired-subscription-plans button:last-child{background:linear-gradient(145deg,#315f96,#21466f)}
.expired-subscription-plans span{display:flex;flex-direction:column;gap:3px}
.expired-subscription-plans b{font-size:16px}
.expired-subscription-plans small{font-size:10px;color:rgba(255,255,255,.58)}
.expired-subscription-plans strong{font-size:13px}
@media(max-width:480px){
  .expired-subscription-card{padding:24px 16px 16px;border-radius:23px}
  .expired-subscription-plans{grid-template-columns:1fr}
  .expired-subscription-plans button{min-height:80px}
}
.subscription-celebration{position:fixed;inset:0;z-index:1200100;display:grid;place-items:center;padding:20px;background:rgba(2,4,10,.76);backdrop-filter:blur(14px);opacity:0;transition:opacity .28s ease;overflow:hidden}
.subscription-celebration.show{opacity:1}
.subscription-celebration-card{position:relative;z-index:2;width:min(390px,100%);padding:34px 24px 24px;border:1px solid rgba(255,255,255,.14);border-radius:28px;background:linear-gradient(150deg,rgba(35,41,55,.96),rgba(13,16,24,.98));box-shadow:0 30px 90px rgba(0,0,0,.55),inset 0 1px rgba(255,255,255,.12);color:#fff;text-align:center;transform:translateY(18px) scale(.94);transition:transform .36s cubic-bezier(.2,.9,.25,1.2)}
.subscription-celebration.show .subscription-celebration-card{transform:none}
.subscription-celebration-card>button:first-child{position:absolute;right:14px;top:12px;width:32px;height:32px;border:0;border-radius:50%;background:rgba(255,255,255,.08);color:#fff;font-size:23px;line-height:1;cursor:pointer}
.subscription-celebration-mark{display:grid;place-items:center;width:72px;height:72px;margin:0 auto 18px;border-radius:50%;background:linear-gradient(145deg,#3ba7ff,#2867e8);box-shadow:0 12px 34px rgba(45,128,255,.42)}
.subscription-celebration-mark svg{width:36px;height:36px;fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.subscription-celebration-card h2{margin:0 0 8px;font-size:25px}
.subscription-celebration-card p{margin:0;color:rgba(255,255,255,.68);font-size:14px;line-height:1.5}
.subscription-celebration-card>strong{display:block;margin:16px 0 20px;color:#82bdff;font-size:15px}
.subscription-celebration-go{width:100%;min-height:50px;border:0;border-radius:15px;background:#f4f7fb;color:#10131a;font:700 14px inherit;cursor:pointer}
.subscription-confetti{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.subscription-confetti i{--c:#4ba9ff;position:absolute;top:-24px;left:calc(var(--i) * 3.57%);width:8px;height:15px;border-radius:2px;background:var(--c);opacity:.9;animation:sylvex-confetti 2.8s calc(var(--i) * -.08s) linear infinite}
.subscription-confetti i:nth-child(3n){--c:#f2c94c}.subscription-confetti i:nth-child(3n + 1){--c:#bb77ff}
@keyframes sylvex-confetti{to{transform:translate3d(35px,110vh,0) rotate(760deg)}}
[data-theme="light"] .subscription-celebration{background:rgba(235,240,249,.76)}
[data-theme="light"] .subscription-celebration-card{background:rgba(255,255,255,.96);color:#111827;border-color:rgba(20,30,50,.1)}
[data-theme="light"] .subscription-celebration-card p{color:rgba(17,24,39,.62)}
@keyframes photoToolSpin{to{transform:rotate(360deg)}}
@keyframes photoToolPulse{50%{transform:scale(.88);opacity:.55}}
@media(max-width:680px){
  .photo-tool-modal{padding:10px;align-items:flex-end}
  .photo-tool-dialog{width:100%;max-height:92vh;padding:14px;border-radius:24px 24px 18px 18px}
  .photo-tool-layout{grid-template-columns:1fr}
  .photo-tool-demo-column .photo-tool-demo{aspect-ratio:16/8}
  .photo-tool-catalog{grid-template-columns:1fr}
  .photo-catalog-dialog{width:calc(100% - 10px);padding:8px;border-radius:18px}
  .photo-catalog-grid{column-count:4;column-gap:5px}
  .photo-catalog-card{margin-bottom:5px;border-radius:10px}
  .photo-catalog-card>span{left:5px;right:5px;bottom:5px}
  .photo-catalog-card>span>b{font-size:8px}
  .photo-catalog-card>span>small{display:none}
  .photo-catalog-tabs{margin-bottom:8px}.photo-catalog-tabs button{padding:7px 10px;font-size:9px}.quick-image-detail-dialog{width:100%}.quick-image-detail-layout{grid-template-columns:1fr;overflow-y:auto}.quick-image-detail-reference img{max-height:34vh}.quick-image-detail-upload{min-height:112px}.quick-image-detail-form textarea{min-height:76px}
  .photo-tool-upload-slot{min-height:112px}
  .photo-tool-head h3{font-size:20px}
  .quick-image-detail-visual{min-height:210px;max-height:36vh}.quick-image-detail-visual #quickImageDetailImage{max-height:calc(36vh - 24px)}.quick-image-detail-fields{grid-template-columns:1fr}
}

/* Brand-specific full-screen generators reuse the existing Pro Studio composer. */
body.brand-generator-active{--brand-accent:#6f8dff;--brand-accent-2:#40d69b}
body[data-brand-generator="seedance"]{--brand-accent:#8f4dff;--brand-accent-2:#66ef99}
body[data-brand-generator="seedream"]{--brand-accent:#29a6ff;--brand-accent-2:#33d69b}
body[data-brand-generator="suno"]{--brand-accent:#ff5b76;--brand-accent-2:#ff9a37}
body[data-brand-generator="grok"]{--brand-accent:#d5d8de;--brand-accent-2:#8d96a8}
body[data-brand-generator="openai"]{--brand-accent:#10a37f;--brand-accent-2:#67e0bd}
body[data-brand-generator="gemini"]{--brand-accent:#4285f4;--brand-accent-2:#c267ed}
body[data-brand-generator="flux"]{--brand-accent:#f26f52;--brand-accent-2:#ffba53}
body[data-brand-generator="kling"]{--brand-accent:#ef476f;--brand-accent-2:#8f62ff}
body[data-brand-generator="runway"]{--brand-accent:#f1b23f;--brand-accent-2:#f0e5bd}
body[data-brand-generator="elevenlabs"]{--brand-accent:#9b72ff;--brand-accent-2:#e2d8ff}
body[data-brand-generator="heygen"]{--brand-accent:#695dff;--brand-accent-2:#24d2c3}
.brand-generator-head{position:sticky;z-index:110;top:0;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:58px;padding:8px 12px;border-bottom:1px solid color-mix(in srgb,var(--brand-accent) 38%,transparent);background:color-mix(in srgb,var(--bg-0) 90%,var(--brand-accent) 10%);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.brand-generator-head[data-brand="suno"]{min-height:220px;align-items:flex-end;padding:14px 16px;overflow:hidden;background:#09070a}
.brand-generator-head-video,.brand-generator-head-shade{position:absolute;inset:0;width:100%;height:100%}.brand-generator-head-video{z-index:0;display:block;object-fit:contain;background:#09070a;pointer-events:none}.brand-generator-head-shade{z-index:1;background:linear-gradient(180deg,rgba(10,7,11,.03),rgba(10,7,11,.16) 55%,rgba(10,7,11,.80))}.brand-generator-head[data-brand="suno"] .brand-generator-name,.brand-generator-head[data-brand="suno"] .brand-generator-actions{position:relative;z-index:2}.brand-generator-head[data-brand="suno"] .brand-generator-name b{color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.8)}.brand-generator-head[data-brand="suno"] .brand-generator-actions>button{background:rgba(20,13,20,.62);border-color:rgba(255,255,255,.28);color:#fff;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.brand-generator-name,.brand-generator-actions{display:flex;align-items:center;gap:9px}.brand-generator-name img,.brand-generator-name>span{width:27px;height:27px;border-radius:8px;object-fit:contain;background:color-mix(in srgb,var(--brand-accent) 18%,transparent)}.brand-generator-name>span::before{content:"";display:block;width:100%;height:100%;background:linear-gradient(135deg,var(--brand-accent),var(--brand-accent-2));clip-path:polygon(8% 65%,25% 30%,42% 68%,62% 18%,92% 74%,82% 88%,61% 43%,43% 92%,24% 55%,17% 79%)}.brand-generator-name b{font-size:14px;color:var(--brand-accent-2)}.brand-generator-actions>button{height:36px;border:1px solid color-mix(in srgb,var(--brand-accent) 32%,var(--border));background:color-mix(in srgb,var(--surface) 90%,var(--brand-accent) 10%);color:var(--text);cursor:pointer}.brand-generator-balance{display:flex;align-items:center;gap:7px;padding:0 7px 0 11px;border-radius:13px}.brand-generator-balance i,.brand-generator-balance em{font-style:normal}.brand-generator-balance i{color:#ffd43b}.brand-generator-balance b{font-size:11px}.brand-generator-balance em{width:21px;height:21px;border-radius:50%;display:grid;place-items:center;background:var(--brand-accent);color:#fff;font-size:16px}.brand-generator-avatar,.brand-generator-close{width:36px;border-radius:50%;padding:0;display:grid;place-items:center;overflow:hidden}.brand-generator-avatar{font-size:10px;font-weight:800}.brand-generator-avatar img{width:100%;height:100%;object-fit:cover}.brand-generator-avatar .dot{display:none}.brand-generator-close{font-size:22px;line-height:1}
body.brand-generator-active [data-view="tools"] .studio{position:relative;min-height:100dvh;background-color:color-mix(in srgb,var(--bg-0) 94%,var(--brand-accent) 6%);background-image:radial-gradient(circle at 1px 1px,color-mix(in srgb,var(--brand-accent) 14%,transparent) 1px,transparent 0);background-size:22px 22px}
body.brand-generator-active .view[data-view="tools"].active .studio-bar{display:none!important;height:0!important;min-height:0!important;flex-basis:0!important;padding:0!important;border:0!important;overflow:hidden!important}
body.brand-generator-active [data-view="tools"] .studio-grid-workspace{display:none!important}
body.brand-generator-active #chatArea .brand-generator-old{display:none!important}
body.brand-generator-active #studioComposer .studio-mode-tabs{display:none!important}
body.brand-generator-active #studioComposer .studio-control-row>.studio-select-pill.wide{display:none!important}
body.brand-generator-active #studioComposer{width:min(920px,calc(100% - 28px));margin:0 auto max(18px,env(safe-area-inset-bottom));background:color-mix(in srgb,var(--surface) 92%,var(--brand-accent) 8%)}
body.brand-generator-active #chatArea{background:transparent;padding-top:24px}
body.brand-generator-active #studioComposer{border-color:color-mix(in srgb,var(--brand-accent) 44%,var(--border));box-shadow:0 18px 60px color-mix(in srgb,var(--brand-accent) 12%,transparent)}
body.brand-generator-active .studio-select-pill{border-color:color-mix(in srgb,var(--brand-accent) 30%,var(--border))}
body.brand-generator-active .send-btn,body.brand-generator-active .studio-send{background:linear-gradient(135deg,var(--brand-accent),var(--brand-accent-2))!important}
body.brand-generator-active,body.brand-generator-active .app,body.brand-generator-active .scroll,body.brand-generator-active .view[data-view="tools"].active{background-color:color-mix(in srgb,#15161a 92%,var(--brand-accent) 8%)!important}
body.brand-generator-active .view[data-view="tools"].active .studio,body.brand-generator-active #chatArea{background-color:color-mix(in srgb,#17181c 94%,var(--brand-accent) 6%)!important;background-image:radial-gradient(circle at 1px 1px,color-mix(in srgb,var(--brand-accent) 22%,transparent) 1.15px,transparent 1.25px)!important;background-size:22px 22px!important}
body.brand-generator-active #studioComposer,body.brand-generator-active .studio-video-panel{background:linear-gradient(145deg,color-mix(in srgb,#22242a 90%,var(--brand-accent) 10%),color-mix(in srgb,#17191e 94%,var(--brand-accent-2) 6%))!important;border-color:color-mix(in srgb,var(--brand-accent) 38%,rgba(255,255,255,.1))!important}
body.brand-generator-active .studio-prompt-column textarea{color:#f5f7fa!important}
body.brand-generator-active .studio-prompt-column textarea::placeholder{color:color-mix(in srgb,var(--brand-accent-2) 42%,#9b9da5)!important}
body.brand-generator-active .studio-frame-card,body.brand-generator-active .studio-image-tool,body.brand-generator-active .vgen-btn,body.brand-generator-active .vgen-upload-row{background:color-mix(in srgb,#292b31 88%,var(--brand-accent) 12%)!important;border:1px solid color-mix(in srgb,var(--brand-accent) 30%,rgba(255,255,255,.1))!important;color:#f2f3f6!important}
body.brand-generator-active .studio-frame-card:hover,body.brand-generator-active .studio-image-tool:hover,body.brand-generator-active .vgen-btn:hover{border-color:color-mix(in srgb,var(--brand-accent) 62%,rgba(255,255,255,.15))!important;box-shadow:0 8px 24px color-mix(in srgb,var(--brand-accent) 14%,transparent)}
body.brand-generator-active .studio-select-pill{background:color-mix(in srgb,#292b31 86%,var(--brand-accent) 14%)!important;border-color:color-mix(in srgb,var(--brand-accent) 38%,rgba(255,255,255,.1))!important;color:#f5f6f8!important}
body.brand-generator-active .ratio-box{border-color:var(--brand-accent-2)!important;color:var(--brand-accent-2)!important}
body.brand-generator-active .studio-generate{background:linear-gradient(135deg,var(--brand-accent),var(--brand-accent-2))!important;border-color:transparent!important;color:#fff!important;box-shadow:0 10px 28px color-mix(in srgb,var(--brand-accent) 30%,transparent)!important}
body.brand-generator-active .studio-generate:disabled{filter:saturate(.35);opacity:.48;box-shadow:none!important}
body.brand-generator-active .studio .msg.user .bubble{background:color-mix(in srgb,#26282e 82%,var(--brand-accent) 18%)!important;border:1px solid color-mix(in srgb,var(--brand-accent) 28%,transparent)!important}
body.brand-generator-active .studio .msg.ai .bubble{color:#f3f4f7!important}
.brand-music-showcase{width:min(920px,calc(100% - 28px));margin:14px auto 12px;flex:0 0 auto}.brand-music-genres{display:flex;gap:12px;padding:8px 4px 13px;overflow-x:auto;scrollbar-width:none}.brand-music-genres::-webkit-scrollbar{display:none}.brand-music-genres button{min-width:66px;height:48px;padding:0 15px;border:1px solid rgba(255,126,43,.48);border-radius:14px;background:linear-gradient(145deg,#d54c24,#aa3828);color:#ffd4a7;font-size:14px;font-weight:800;box-shadow:inset 0 0 18px rgba(255,163,53,.12);cursor:pointer}.brand-music-genres button.is-active{color:#fff0ba;border-color:#ffae38;box-shadow:0 0 22px rgba(255,104,25,.28),inset 0 0 16px rgba(255,189,45,.22)}.brand-music-slider{position:relative;height:250px;display:flex;align-items:center;justify-content:center;overflow:hidden;touch-action:pan-y;user-select:none}.brand-music-card{position:absolute;width:210px;height:230px;padding:0;border:1px solid rgba(255,105,29,.42);border-radius:26px;overflow:hidden;background:#1c171d;color:#fff;box-shadow:0 18px 40px rgba(0,0,0,.28);transition:transform .35s ease,opacity .35s ease,filter .35s ease;cursor:pointer}.brand-music-card img{width:100%;height:100%;display:block;object-fit:cover;pointer-events:none}.brand-music-card span{position:absolute;left:12px;right:12px;bottom:12px;padding:10px 12px;border:1px solid rgba(255,122,25,.3);border-radius:14px;background:rgba(67,24,10,.82);backdrop-filter:blur(12px);font-size:12px;font-weight:800;text-align:center}.brand-music-card[data-pos="0"]{z-index:5;transform:translateX(0) scale(1);opacity:1}.brand-music-card[data-pos="-1"]{z-index:4;transform:translateX(-78%) scale(.82);opacity:.78;filter:saturate(.75)}.brand-music-card[data-pos="1"]{z-index:4;transform:translateX(78%) scale(.82);opacity:.78;filter:saturate(.75)}.brand-music-card[data-pos="-2"]{z-index:3;transform:translateX(-132%) scale(.66);opacity:.32}.brand-music-card[data-pos="2"]{z-index:3;transform:translateX(132%) scale(.66);opacity:.32}.brand-music-nav{position:absolute;z-index:8;top:50%;width:43px;height:43px;border:1px solid rgba(255,125,34,.42);border-radius:50%;display:grid;place-items:center;background:rgba(37,26,28,.84);color:#fff;font-size:29px;line-height:1;transform:translateY(-50%);backdrop-filter:blur(12px);cursor:pointer}.brand-music-nav.prev{left:12px}.brand-music-nav.next{right:12px}.brand-music-player{position:relative;min-height:116px;border:1px solid #ff8a1f;border-radius:26px;overflow:hidden;background:#a93a0b;color:#fff;box-shadow:0 18px 44px rgba(115,29,0,.3)}.brand-music-player-bg{position:absolute;inset:-22px;background-image:linear-gradient(90deg,rgba(138,49,0,.6),rgba(255,27,64,.38)),var(--brand-music-cover);background-size:cover;background-position:center;filter:blur(15px) saturate(1.45);transform:scale(1.12)}.brand-music-player:after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,rgba(218,104,0,.48),rgba(255,0,70,.34))}.brand-music-player-inner{position:relative;z-index:2;min-height:116px;display:flex;align-items:center;gap:16px;padding:15px 20px;background:rgba(79,20,8,.26);backdrop-filter:blur(12px)}.brand-music-cover{width:76px;height:76px;flex:0 0 76px;border-radius:17px;overflow:hidden;border:1px solid rgba(255,190,92,.5);box-shadow:0 10px 24px rgba(0,0,0,.28)}.brand-music-cover img{width:100%;height:100%;object-fit:cover}.brand-music-player-body{min-width:0;flex:1}.brand-music-player-body>b{display:block;margin-bottom:7px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px}.brand-music-timeline{display:grid;grid-template-columns:42px 1fr 42px;align-items:center;gap:8px}.brand-music-timeline time{font-size:10px;color:rgba(255,255,255,.82);text-align:center}.brand-music-timeline input{width:100%;height:3px;accent-color:#fff}.brand-music-controls{display:flex;align-items:center;justify-content:center;gap:15px;margin-top:8px}.brand-music-controls button{width:28px;height:28px;padding:0;border:0;border-radius:50%;display:grid;place-items:center;background:transparent;color:#fff;font-size:12px;cursor:pointer}.brand-music-controls button.is-active{background:rgba(255,255,255,.18);color:#ffd091}.brand-music-controls .brand-music-play{width:38px;height:38px;background:#fff;color:#5b2513;font-size:16px;box-shadow:0 8px 22px rgba(0,0,0,.22)}body[data-brand-generator="suno"] #chatArea{order:3;flex:0 0 auto;min-height:0;padding-top:8px}body[data-brand-generator="suno"] .brand-music-showcase{order:2}body[data-brand-generator="suno"] #studioComposer{order:4;border-color:#d87532!important}body[data-brand-generator="suno"] .brand-generator-head{order:1}
@media(max-width:680px){.brand-generator-head{min-height:52px;padding:7px 10px}.brand-generator-head[data-brand="suno"]{min-height:190px;padding:10px}.brand-generator-name b{max-width:116px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}.brand-generator-actions{gap:5px}.brand-generator-balance{height:32px!important;padding:0 5px 0 8px}.brand-generator-balance b{font-size:10px}.brand-generator-balance em{width:19px;height:19px}.brand-generator-avatar,.brand-generator-close{width:32px!important;height:32px!important}body.brand-generator-active #studioComposer{width:calc(100% - 16px);margin-bottom:8px}}
@media(max-width:680px){.brand-music-showcase{width:calc(100% - 16px);margin:8px auto 10px}.brand-music-slider{height:205px}.brand-music-card{width:160px;height:188px;border-radius:21px}.brand-music-card[data-pos="-1"]{transform:translateX(-72%) scale(.8)}.brand-music-card[data-pos="1"]{transform:translateX(72%) scale(.8)}.brand-music-nav{width:36px;height:36px;font-size:24px}.brand-music-nav.prev{left:5px}.brand-music-nav.next{right:5px}.brand-music-player{min-height:102px;border-radius:22px}.brand-music-player-inner{min-height:102px;gap:10px;padding:12px}.brand-music-cover{width:58px;height:58px;flex-basis:58px;border-radius:13px}.brand-music-player-body>b{font-size:12px}.brand-music-timeline{grid-template-columns:34px 1fr 34px;gap:4px}.brand-music-controls{gap:8px;margin-top:5px}.brand-music-controls .brand-music-play{width:34px;height:34px}}

/* Pro Studio video option rows without ratio icons */
/* =====================================================
CSS-БЛОК: body > #modelPop.image-size-floating-pop button.image-size-row.no-ratio-icon
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
body > #modelPop.image-size-floating-pop button.image-size-row.no-ratio-icon{
  grid-template-columns:1fr 24px !important;
}

/* =====================================================
CSS-БЛОК: body > #modelPop.music-settings-pop .music-settings-sheet
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
body > #modelPop.music-settings-pop .music-settings-sheet{
  display:flex;
  flex-direction:column;
  gap:18px;
  padding:0 2px 4px;
}

/* =====================================================
CSS-БЛОК: body > #modelPop.music-settings-pop .music-settings-section
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
body > #modelPop.music-settings-pop .music-settings-section{
  display:flex;
  flex-direction:column;
  gap:10px;
}

/* =====================================================
CSS-БЛОК: body > #modelPop.music-settings-pop .music-settings-section h4
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
body > #modelPop.music-settings-pop .music-settings-section h4{
  margin:0;
  padding:0 4px;
  color:var(--st-dim, #cfcfd4);
  font-size:13px;
  line-height:1.2;
  font-weight:800;
}

/* =====================================================
CSS-БЛОК: body > #modelPop.music-settings-pop .music-settings-options
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
body > #modelPop.music-settings-pop .music-settings-options{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

/* =====================================================
CSS-БЛОК: body > #modelPop.music-settings-pop .music-setting-chip
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
body > #modelPop.music-settings-pop .music-setting-chip{
  min-height:36px;
  border:0;
  border-radius:999px;
  padding:0 13px;
  background:var(--st-bg-3, rgba(255,255,255,.06));
  color:var(--st-text, #f1f1f1);
  font:inherit;
  font-size:13px;
  font-weight:700;
  cursor:pointer;
  box-shadow:var(--st-depth-1, none);
}

body > #modelPop.music-settings-pop .music-setting-chip.active,
body > #modelPop.music-settings-pop .music-setting-chip.sel{
  background:var(--st-accent, rgba(255,255,255,.16));
  color:var(--st-accent-text, #fff);
}

/* =====================================================
CSS-БЛОК: body > #modelPop.music-settings-pop .music-settings-clear
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
body > #modelPop.music-settings-pop .music-settings-clear{
  align-self:flex-start;
  border:0;
  background:transparent;
  color:var(--st-mute, rgba(255,255,255,.52));
  font:inherit;
  font-size:14px;
  font-weight:700;
  padding:2px 4px 4px;
  cursor:pointer;
}

/* Central music settings dialog, styled like the voice creation workspace. */
.music-settings-modal{
  position:fixed;
  inset:0;
  z-index:999998;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
  background:rgba(0,0,0,.38);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  opacity:0;
  pointer-events:none;
  transition:opacity .18s ease;
}
.music-settings-modal.show{opacity:1;pointer-events:auto}
.music-settings-dialog{
  position:relative;
  display:flex;
  flex-direction:column;
  width:min(92vw,520px);
  max-height:min(78vh,680px);
  border-radius:26px;
  overflow:hidden;
  background:color-mix(in srgb, var(--st-bg-2, #121214) 88%, transparent);
  border:1px solid var(--st-border, rgba(255,255,255,.10));
  box-shadow:var(--st-depth-2, none), 0 28px 90px var(--st-shadow, rgba(0,0,0,.75));
  backdrop-filter:blur(22px) saturate(140%);
  -webkit-backdrop-filter:blur(22px) saturate(140%);
  color:var(--st-text, #f3f3f3);
}
.music-settings-dialog>header{
  min-height:52px;
  padding:10px 56px 10px 18px;
  border-bottom:1px solid var(--st-line, rgba(255,255,255,.08));
}
.music-settings-dialog>header h3{margin:0;font-size:14px;font-weight:800;line-height:1.2}
.music-settings-dialog>header p{margin:4px 0 0;color:var(--st-dim, #a9a9ad);font-size:11px;line-height:1.35}
.music-settings-close{
  position:absolute;
  top:10px;
  right:12px;
  z-index:2;
  width:32px;
  height:32px;
  border:0;
  border-radius:50%;
  background:var(--st-bg-3, rgba(255,255,255,.08));
  color:var(--st-text, #fff);
  font:400 25px/1 inherit;
  cursor:pointer;
}
.music-settings-modal-body{display:flex;flex-direction:column;gap:18px;padding:16px 16px 20px;overflow-y:auto}
.music-modal-section{display:flex;flex-direction:column;gap:9px}
.music-modal-section h4{margin:0;color:var(--st-dim, #cfcfd4);font-size:13px;font-weight:800}
.music-modal-options{display:flex;flex-wrap:wrap;gap:8px}
.music-modal-chip{
  min-height:36px;
  padding:0 13px;
  border:1px solid transparent;
  border-radius:999px;
  background:var(--st-bg-3, rgba(255,255,255,.07));
  color:var(--st-text, #f1f1f1);
  font:700 13px/1 inherit;
  cursor:pointer;
  box-shadow:var(--st-depth-1, none);
}
.music-modal-chip.active{background:var(--st-accent-bg, rgba(47,111,189,.36));border-color:var(--st-accent, rgba(110,171,245,.62));color:var(--st-text, #fff)}
.music-settings-dialog>footer{display:grid;grid-template-columns:minmax(100px,.65fr) minmax(140px,1fr);gap:10px;padding:12px 16px calc(14px + env(safe-area-inset-bottom));border-top:1px solid var(--st-line, rgba(255,255,255,.08))}
.music-settings-dialog>footer button{min-height:46px;border-radius:15px;font:800 14px/1 inherit;cursor:pointer}
.music-settings-reset{border:1px solid var(--st-border, rgba(255,255,255,.12));background:var(--st-bg-3, rgba(255,255,255,.06));color:var(--st-text, #ddd)}
.music-settings-save{border:0;background:var(--st-accent, #2f6fbd);color:var(--st-accent-text, #fff)}

@media(max-width:560px){
  .music-settings-modal{padding:10px}
  .music-settings-dialog{width:100%;max-height:84vh;border-radius:22px}
  .music-settings-modal-body{padding:14px 13px 18px;gap:16px}
  .music-modal-options{gap:6px}
  .music-modal-chip{min-height:34px;padding:0 11px;font-size:12px}
}

/* =====================================================
CSS-БЛОК: .voice-preview-row
Строка выбора Gemini TTS голоса с отдельной кнопкой прослушивания.
Позволяет послушать голос прямо в Mini App перед выбором.
===================================================== */
body > #modelPop.image-size-floating-pop .voice-preview-row{
  display:flex;
  align-items:center;
  gap:8px;
  padding:0;
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  background:rgba(255,255,255,.045);
}

body > #modelPop.image-size-floating-pop .voice-preview-row.active,
body > #modelPop.image-size-floating-pop .voice-preview-row.sel{
  border-color:rgba(96,165,250,.55);
  background:rgba(96,165,250,.12);
}

body > #modelPop.image-size-floating-pop .voice-preview-pick{
  flex:1;
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  min-height:44px;
  padding:10px 12px;
  border:0;
  background:transparent;
  color:inherit;
  font:inherit;
  text-align:left;
}
body > #modelPop.image-size-floating-pop .voice-sheet-avatar{width:34px;height:34px;border-radius:11px;flex:0 0 34px}
body > #modelPop.image-size-floating-pop .voice-preview-pick .voice-style-row-copy{flex:1}
body > #modelPop.image-size-floating-pop .voice-preview-pick .voice-style-row-copy b{font-size:12px;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

body > #modelPop.image-size-floating-pop .voice-preview-play{
  width:36px;
  height:36px;
  flex:0 0 36px;
  margin-right:6px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.10);
  border-radius:50%;
  background:rgba(255,255,255,.08);
  color:#fff;
  font-size:13px;
  line-height:1;
}

body > #modelPop.image-size-floating-pop .voice-preview-play:disabled{
  opacity:.7;
}

/* =====================================================
CSS-БЛОК: .view[data-view="tools"].active .studio-select-pill.video-sound-on
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.view[data-view="tools"].active .studio-select-pill.video-sound-on{
  border-color:var(--st-accent) !important;
  background:var(--st-accent-bg) !important;
  color:var(--st-accent) !important;
}

/* =====================================================
CSS-БЛОК: .view[data-view="tools"].active .studio-select-pill.video-sound-off
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.view[data-view="tools"].active .studio-select-pill.video-sound-off{
  opacity:.82;
}

/* =====================================================
CSS-БЛОК: .view[data-view="tools"].active .studio-select-pill.video-sound-disabled
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.view[data-view="tools"].active .studio-select-pill.video-sound-disabled{
  opacity:.45;
}

/* Pro Studio: chat background and transparent generated content.
   Longhand background-color only (not the `background` shorthand) so this
   doesn't reset background-image and clobber the decorative grid drawn on
   .studio further down. .chat-area itself stays transparent so that grid
   shows through the scrollable content area, not just the edges. */
.view[data-view="tools"].active .studio{
  background-color:var(--st-bg) !important;
}
.view[data-view="tools"].active .chat-area{
  background-color:transparent !important;
}

.view[data-view="tools"].active .msg.ai .bubble,
.view[data-view="tools"].active .gen-media-card,
.view[data-view="tools"].active .gen-img-grid,
.view[data-view="tools"].active .gen-media-list,
.view[data-view="tools"].active .gen-file-card{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

/* =====================================================
CSS-БЛОК: .image-visual-inline-row
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.image-visual-inline-row{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  margin:10px 0 0;
}

/* =====================================================
CSS-БЛОК: .image-visual-pill
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.image-visual-pill{
  flex:1 1 0;
  min-width:0;
  justify-content:center;
  font-weight:700;
}

/* =====================================================
CSS-БЛОК: .image-visual-pill span
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.image-visual-pill span{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* =====================================================
CSS-БЛОК: .image-visual-pill.image-setting-disabled
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.image-visual-pill.image-setting-disabled{
  opacity:.45;
  cursor:not-allowed;
}

/* =====================================================
CSS-БЛОК: .image-visual-grid
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.image-visual-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
    margin:0 0 14px;
    width:100%;
}

/* =====================================================
CSS-БЛОК: .image-visual-grid .studio-image-tool
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.image-visual-grid .studio-image-tool{
    width:100%;
    min-height:74px;
    justify-content:space-between;
    text-align:left;
}

.image-visual-grid .studio-image-tool span:last-child,
.image-visual-grid .studio-image-tool span{
    text-align:left;
}

/* =====================================================
CSS-БЛОК: .studio-prompt-column textarea
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.studio-prompt-column textarea{
    margin-top:0;
}

/* ===== Pro Studio video templates ===== */
/* =====================================================
CSS-БЛОК: .video-template-intro
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.video-template-intro{
  position:fixed;
  left:50%;
  bottom:calc(96px + env(safe-area-inset-bottom));
  transform:translateX(-50%);
  width:min(360px,calc(100% - 28px));
  z-index:99990;
  padding:8px;
  border-radius:18px;
  background:rgba(18,18,24,.9);
  border:1px solid rgba(255,255,255,.1);
  box-shadow:0 18px 46px rgba(0,0,0,.42);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
}
/* =====================================================
CSS-БЛОК: .video-template-intro button
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.video-template-intro button{
  width:auto;
  min-width:140px;
  max-width:180px;
  height:40px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:0 16px;

  border:0;
  border-radius:999px;

  background:#2f6fbd;
  color:#fff;

  font:700 14px/1 inherit;
  cursor:pointer;

  box-shadow:none;
  transition:background .18s ease, transform .12s ease;
}

/* =====================================================
CSS-БЛОК: .video-template-intro button:hover
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.video-template-intro button:hover{
  background:#565656;
}

/* =====================================================
CSS-БЛОК: .video-template-intro button:active
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.video-template-intro button:active{
  transform:scale(.98);
}

/* =====================================================
CSS-БЛОК: .video-templates-overlay
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.video-templates-overlay{
  position:fixed;
  inset:0;
  z-index:99991;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  background:rgba(0,0,0,.22);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  overflow:hidden;
  padding-top:12vh;
}
/* =====================================================
CSS-БЛОК: .video-templates-panel
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.video-templates-panel{
  position:relative;
  width:min(1180px,calc(100% - 24px));
  max-height:68vh;
  overflow-y:auto;
  margin:0;
  padding:12px;
  border-radius:22px;
  background:color-mix(in srgb, var(--st-bg-2, #121218) 40%, transparent);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}
.video-templates-close,
.video-template-modal-close{
  position:fixed;
  right:18px;
  top:calc(14px + env(safe-area-inset-top));
  width:46px;
  height:46px;
  border:0;
  border-radius:50%;
  background:var(--st-bg-3, rgba(255,255,255,.08));
  color:var(--st-text, #fff);
  font-size:34px;
  line-height:1;
  cursor:pointer;
  z-index:2;
}

/* =====================================================
CSS-БЛОК: .video-templates-grid
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.video-templates-grid{
  display:block;
  column-count:5;
  column-gap:8px;
}
.video-templates-heading{
  margin:0 0 10px;
  padding:0 50px 0 4px;
  color:var(--st-text, #fff);
  font-size:18px;
  font-weight:850;
}
.kling-effects-overlay .video-templates-panel{
  width:min(860px,calc(100% - 24px));
  max-height:70vh;
  background:color-mix(in srgb, var(--st-bg-2, #121218) 55%, transparent);
}
.kling-effects-overlay .video-templates-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  column-count:auto;
  grid-auto-flow:dense;
}
/* =====================================================
CSS-БЛОК: .video-template-card
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.video-template-card{
  position:relative;
  display:block;
  width:100%;
  min-height:112px;
  margin:0 0 8px;
  border:0;
  border-radius:14px;
  overflow:hidden;
  background:#191a1f;
  color:#fff;
  text-align:left;
  cursor:pointer;
  box-shadow:0 10px 30px rgba(0,0,0,.22);
  break-inside:avoid;
  page-break-inside:avoid;
}
.video-template-card.square{min-height:0;aspect-ratio:1/1}
.video-template-card.wide{min-height:0;aspect-ratio:16/9}
.video-template-card.tall{min-height:0;aspect-ratio:9/16}
.kling-effects-overlay .video-template-card{
  min-height:0;
  aspect-ratio:1/1;
  margin:0;
}
.kling-effects-overlay .video-template-card.square{
  aspect-ratio:1/1;
}
.kling-effects-overlay .video-template-card.wide{
  grid-column:span 2;
  aspect-ratio:2/1;
}
.kling-effects-overlay .video-template-card.tall{
  grid-row:span 2;
  aspect-ratio:1/2;
}
/* =====================================================
CSS-БЛОК: .video-template-card video
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.video-template-card video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}
/* =====================================================
CSS-БЛОК: .video-template-card-poster
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.video-template-card-poster{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  background:
    radial-gradient(circle at 30% 20%,rgba(76,153,255,.44),transparent 34%),
    radial-gradient(circle at 80% 70%,rgba(255,255,255,.18),transparent 32%),
    linear-gradient(135deg,#17191f,#343844);
}
/* =====================================================
CSS-БЛОК: .video-template-card-poster span
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.video-template-card-poster span{
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:rgba(0,0,0,.32);
  color:#fff;
  font-size:20px;
  padding-left:3px;
}
/* =====================================================
CSS-БЛОК: .video-template-card-shade
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.video-template-card-shade{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,0) 35%,rgba(0,0,0,.72) 100%);
}
/* =====================================================
CSS-БЛОК: .video-template-card-title
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.video-template-card-title{
  position:absolute;
  left:7px;
  right:7px;
  bottom:8px;
  color:#fff;
  font-size:10.5px;
  font-weight:850;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
/* =====================================================
CSS-БЛОК: .video-template-card-cost
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.video-template-card-cost{
  display:none;
}
/* =====================================================
CSS-БЛОК: .video-templates-empty
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.video-templates-empty{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:220px;
  border-radius:22px;
  color:var(--st-dim, rgba(255,255,255,.72));
  background:var(--st-bg-2, rgba(255,255,255,.05));
  border:1px solid var(--st-border, rgba(255,255,255,.08));
}
/* =====================================================
CSS-БЛОК: .video-template-card-poster span
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.video-template-card-poster span{
  width:30px;
  height:30px;
  font-size:13px;
}
/* =====================================================
CSS-БЛОК: .video-template-modal-backdrop
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.video-template-modal-backdrop{
  position:fixed;
  inset:0;
  z-index:99993;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
  background:rgba(0,0,0,.42);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
/* =====================================================
CSS-БЛОК: .video-template-modal
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.video-template-modal{
  position:relative;
  display:grid;
  grid-template-columns:minmax(260px,1fr) minmax(300px,1fr);
  gap:0;
  width:min(960px,calc(100% - 18px));
  max-height:min(620px,calc(100vh - 36px));
  padding:0;
  border-radius:26px;
  overflow:hidden;
  background:linear-gradient(135deg,rgba(21,21,22,.82),rgba(35,33,31,.72));
  border:1px solid rgba(255,255,255,.1);
  backdrop-filter:blur(24px) saturate(135%);
  -webkit-backdrop-filter:blur(24px) saturate(135%);
  box-shadow:0 30px 90px rgba(0,0,0,.6);
}
/* =====================================================
CSS-БЛОК: .video-template-modal-close
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.video-template-modal-close{
  position:absolute;
  top:16px;
  right:16px;
}
/* =====================================================
CSS-БЛОК: .video-template-preview
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.video-template-preview{
  position:relative;
  min-height:430px;
  background:#0b0b0d;
  border-right:1px solid rgba(255,255,255,.08);
  overflow:hidden;
}
/* =====================================================
CSS-БЛОК: .video-template-preview video
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.video-template-preview video{
  width:100%;
  height:100%;
  object-fit:cover;
}

/* =====================================================
CSS-БЛОК: .video-template-preview video
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.video-template-preview video{
  position:absolute;
  inset:0;
  z-index:2;
}

/* =====================================================
CSS-БЛОК: .video-template-preview-fallback
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.video-template-preview-fallback{
  position:absolute;
  inset:0;
  z-index:1;
}

.video-template-preview video:not([src]),
.video-template-preview video[src=""]{
  display:none;
}

.video-template-preview-fallback{width:100%;height:100%;display:grid;place-items:center;gap:12px;align-content:center;color:#fff;text-align:center;background:radial-gradient(circle at 35% 22%,rgba(73,142,255,.36),transparent 34%),radial-gradient(circle at 75% 72%,rgba(255,255,255,.13),transparent 32%),linear-gradient(135deg,#111217,#30323b)}
.video-template-preview-fallback span{width:72px;height:72px;display:grid;place-items:center;border-radius:50%;background:rgba(255,255,255,.12);font-size:30px;padding-left:4px}
.video-template-preview-fallback b{max-width:80%;font-size:24px}
.video-template-details{display:flex;flex-direction:column;gap:14px;padding:34px 32px 24px;color:#fff}
.video-template-details h3{margin:0;font-size:24px;line-height:1.12}
.video-template-details p{margin:0;color:rgba(255,255,255,.66);font-size:15px;line-height:1.45}
.video-template-upload{min-height:190px;border:2px dashed rgba(255,255,255,.16);border-radius:26px;background:rgba(255,255,255,.05);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;cursor:pointer;overflow:hidden}
.video-template-upload.has-file{position:relative;align-items:stretch;justify-content:flex-end;padding:0}.video-template-upload.has-file img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.video-template-upload.has-file span{position:relative;z-index:1;padding:14px;background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.66));font-weight:800}.video-template-upload-icon{width:58px;height:58px;display:grid;place-items:center;border-radius:50%;background:rgba(255,255,255,.09);font-size:24px}.video-template-upload b{font-size:20px}.video-template-upload small{color:rgba(255,255,255,.62);font-size:13px}.video-template-ratios{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.video-template-ratios button{min-height:58px;border-radius:20px;border:1px solid transparent;background:rgba(255,255,255,.08);color:#fff;font:800 15px/1 inherit;display:flex;align-items:center;justify-content:center;gap:10px;cursor:pointer}.video-template-ratios button.active{border-color:#fff;background:rgba(47,111,189,.36)}.video-template-ratios button > span:last-child{display:flex;flex-direction:column;align-items:flex-start;gap:2px}.video-template-ratios button b{font-size:15px;line-height:1}.video-template-ratios button small{font-size:9px;line-height:1;color:rgba(255,255,255,.58);font-weight:750}.video-template-ratio-icon{display:block;flex:0 0 auto;border:2px solid rgba(255,255,255,.82);border-radius:7px;background:rgba(255,255,255,.12);box-shadow:inset 0 0 0 2px rgba(0,0,0,.16)}.video-template-ratio-icon[data-ratio="16:9"]{width:28px;height:17px}.video-template-ratio-icon[data-ratio="1:1"]{width:22px;height:22px}.video-template-ratio-icon[data-ratio="9:16"]{width:17px;height:28px}.video-template-generate{margin-top:auto;min-height:58px;border:0;border-radius:22px;background:#1f5da6;color:#fff;font:850 17px/1 inherit;cursor:pointer}

@media(max-width:900px){
.video-templates-panel{width:min(620px,calc(100% - 12px));height:64vh}
.video-templates-grid{column-count:4;column-gap:7px}
.kling-effects-overlay .video-templates-panel{width:min(560px,calc(100% - 12px));height:62vh}
.kling-effects-overlay .video-templates-grid{column-count:auto;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}
/* =====================================================
CSS-БЛОК: .video-template-modal
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.video-template-modal{
grid-template-columns:minmax(180px,240px) minmax(0,1fr);
width:calc(100% - 20px);
max-width:720px;
}
.video-template-preview{min-height:260px}
.video-template-details{padding:18px}
}

@media(max-width:560px){
.video-templates-heading{font-size:14px;margin-bottom:8px}
.kling-effects-overlay .video-templates-panel{width:calc(100% - 10px);height:58vh;padding:8px;border-radius:18px}
.kling-effects-overlay .video-templates-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}
.kling-effects-overlay .video-template-card{border-radius:10px}
.kling-effects-overlay .video-template-card-title{font-size:8px;left:5px;right:5px;bottom:5px}
/* =====================================================
CSS-БЛОК: .video-template-modal
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.video-template-modal{
grid-template-columns:minmax(120px,150px) minmax(0,1fr);
width:calc(100% - 12px);
max-width:420px;
max-height:88vh;
}
.video-template-preview{min-height:180px}
.video-template-details{padding:14px;gap:10px}
.video-template-details h3{font-size:17px}
.video-template-details p{font-size:12px;line-height:1.35}
.video-template-upload{min-height:110px;border-radius:16px}
.video-template-upload-icon{width:36px;height:36px;font-size:16px}
.video-template-upload b{font-size:14px}
.video-template-upload small{font-size:10px}
.video-template-ratios{gap:6px}
.video-template-ratios button{min-height:42px;font-size:11px;border-radius:12px;gap:6px}
.video-template-ratios button b{font-size:11px}
.video-template-ratios button small{display:none}
.video-template-ratio-icon[data-ratio="16:9"]{width:20px;height:12px}
.video-template-ratio-icon[data-ratio="1:1"]{width:16px;height:16px}
.video-template-ratio-icon[data-ratio="9:16"]{width:12px;height:20px}
.video-template-generate{min-height:42px;font-size:13px;border-radius:14px}
}


.studio-panel-divider{
  display:none;
  width:100%;
  height:1px;
  background:rgba(255,255,255,.10);
  margin:0 0 24px;
}

.studio-video-composer[data-composer-mode="voice"] .studio-panel-divider{
  display:none;
}

/* =====================================================
АДАПТИВ PRO STUDIO ПО ШИРИНЕ САМОГО БЛОКА
Mini App может быть узким внутри широкого окна браузера.
Этот слой повторяет мобильную логику видео/фото/озвучки не по viewport,
а по реальной ширине composer-блока, чтобы кнопки перестраивались вовремя.
===================================================== */
.studio-video-composer{
  container-type:inline-size;
}

@container (max-width:900px){
  .studio-mode-tabs{
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    gap:6px !important;
  }

  .studio-mode-tabs::-webkit-scrollbar{display:none}

  .studio-mode-tab{
    flex:0 0 auto;
    height:46px;
    padding:0 14px;
    font-size:13px;
    white-space:nowrap;
  }

  .studio-mini-tab{
    width:44px;
    height:38px;
  }

  .studio-video-panel{
    grid-template-columns:1fr !important;
    padding:14px !important;
    border-radius:22px;
    gap:12px;
  }

  .studio-prompt-column{
    border-left:0 !important;
    border-top:1px solid rgba(255,255,255,.10);
    padding-left:0 !important;
    padding-top:12px;
  }

  .studio-video-composer[data-composer-mode="music"] .studio-prompt-column{
    border-top:0;
    padding-top:0;
  }

  .image-visual-grid,
  .studio-frame-row,
  .vgen-actions{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }

  .studio-frame-card,
  .vgen-btn{
    min-height:74px;
  }

  .studio-links-btn,
  .vgen-upload-row{
    min-height:58px;
  }

  .studio-image-tool{
    min-height:54px;
    padding:8px 9px;
    border-radius:12px;
  }

  .studio-image-tool span:last-child,
  .vgen-btn-lbl{
    font-size:11px;
  }

  .studio-control-row{
    flex-wrap:nowrap;
    overflow-x:auto;
    overflow-y:hidden;
    gap:8px;
    padding-top:10px;
    padding-bottom:2px;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x proximity;
  }

  .studio-control-row::-webkit-scrollbar{display:none}

  .studio-control-row .studio-select-pill,
  .studio-control-row .image-count-pill,
  .studio-control-row .image-settings-pill,
  .studio-control-row .studio-generate{
    flex:0 0 auto;
    min-height:34px;
    height:34px;
    padding:0 14px;
    font-size:11px;
    line-height:1;
    gap:5px;
    white-space:nowrap;
    scroll-snap-align:start;
  }

  .studio-control-row .studio-select-pill.wide{
    order:0;
    width:auto;
    min-width:auto;
    justify-content:center;
    margin-right:0;
  }

  .studio-control-row .image-settings-pill{
    width:34px;
    min-width:34px;
    padding:0;
    justify-content:center;
  }

  .studio-control-row .studio-generate{
    margin-left:0;
    border-radius:999px;
  }

  .view[data-view="tools"].active .studio-video-composer textarea{
    min-height:86px;
    font-size:15px;
  }
}

/* =====================================================
FALLBACK ДЛЯ АДАПТИВА PRO STUDIO
JavaScript добавляет класс is-compact, когда сам composer уже узкий.
Это страхует Telegram WebView и desktop-режим, где viewport шире Mini App.
===================================================== */
.studio-video-composer.is-compact .studio-mode-tabs{
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  gap:6px !important;
}

.studio-video-composer.is-compact .studio-mode-tabs::-webkit-scrollbar{display:none}

.studio-video-composer.is-compact .studio-mode-tab{
  flex:0 0 auto;
  height:46px;
  padding:0 14px;
  font-size:13px;
  white-space:nowrap;
}

.studio-video-composer.is-compact .studio-mini-tab{
  width:44px;
  height:38px;
}

.studio-video-composer.is-compact .studio-video-panel{
  grid-template-columns:1fr !important;
  padding:14px !important;
  border-radius:22px;
  gap:12px;
}

.studio-video-composer.is-compact .studio-prompt-column{
  border-left:0 !important;
  border-top:1px solid rgba(255,255,255,.10);
  padding-left:0 !important;
  padding-top:12px;
}

.studio-video-composer.is-compact[data-composer-mode="music"] .studio-prompt-column{
  border-top:0;
  padding-top:0;
}

.studio-video-composer.is-compact .image-visual-grid,
.studio-video-composer.is-compact .studio-frame-row,
.studio-video-composer.is-compact .vgen-actions{
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
}

.studio-video-composer.is-compact .studio-frame-card,
.studio-video-composer.is-compact .vgen-btn{
  min-height:74px;
}

.studio-video-composer.is-compact .studio-links-btn,
.studio-video-composer.is-compact .vgen-upload-row{
  min-height:58px;
}

.studio-video-composer.is-compact[data-video-section="edit"] .studio-video-tools{
  gap:12px;
}
.studio-video-composer.is-compact[data-video-section="edit"] .studio-video-edit-upload{
  min-height:128px;
  border-radius:24px;
}
.studio-video-composer.is-compact[data-video-section="edit"] .studio-video-edit-upload b{
  font-size:20px;
}
.studio-video-composer.is-compact[data-video-section="edit"] .studio-video-edit-upload small{
  font-size:13px;
}
.studio-video-composer.is-compact[data-video-section="edit"] .studio-links-btn{
  min-height:84px;
  border-radius:22px;
  font-size:19px;
}
.studio-video-composer.is-compact[data-video-section="edit"] .studio-link-icons span{
  width:48px;
  height:48px;
}
.studio-video-composer.is-compact[data-video-section="edit"] .video-add-menu{
  gap:8px;
  padding:8px;
  border-radius:22px;
}
.studio-video-composer.is-compact[data-video-section="edit"] .video-add-menu button{
  min-height:76px;
  border-radius:18px;
}
.studio-video-composer.is-compact[data-video-section="edit"] .video-add-menu button span{
  width:42px;
  height:42px;
}

.studio-video-composer.is-compact .studio-image-tool{
  min-height:74px;
  padding:10px 9px;
  border-radius:12px;
}

.studio-video-composer.is-compact .studio-image-tool span:last-child,
.studio-video-composer.is-compact .vgen-btn-lbl{
  font-size:11px;
}

.studio-video-composer.is-compact .studio-control-row{
  flex-wrap:nowrap;
  overflow-x:auto;
  overflow-y:hidden;
  gap:8px;
  padding-top:10px;
  padding-bottom:2px;
  -webkit-overflow-scrolling:touch;
  scroll-snap-type:x proximity;
}

.studio-video-composer.is-compact .studio-control-row::-webkit-scrollbar{display:none}

.studio-video-composer.is-compact .studio-control-row .studio-select-pill,
.studio-video-composer.is-compact .studio-control-row .image-count-pill,
.studio-video-composer.is-compact .studio-control-row .image-settings-pill,
.studio-video-composer.is-compact .studio-control-row .studio-generate{
  flex:0 0 auto;
  min-height:34px;
  height:34px;
  padding:0 14px;
  font-size:11px;
  line-height:1;
  gap:5px;
  white-space:nowrap;
  scroll-snap-align:start;
}

.studio-video-composer.is-compact .studio-control-row .studio-select-pill.wide{
  order:0;
  width:auto;
  min-width:auto;
  justify-content:center;
  margin-right:0;
}

.studio-video-composer.is-compact .studio-control-row .image-settings-pill{
  width:34px;
  min-width:34px;
  padding:0;
  justify-content:center;
}

.studio-video-composer.is-compact .studio-control-row .studio-generate{
  margin-left:0;
  border-radius:999px;
}

.view[data-view="tools"].active .studio-video-composer.is-compact textarea{
  min-height:86px;
  font-size:15px;
}

/* =====================================================
ЕДИНЫЙ РАЗМЕР ИКОНОК MINI APP
Финальный слой нормализует визуальный размер иконок на desktop и mobile.
Видео-каталог не включен в эти селекторы намеренно.
===================================================== */
.app :where(
  .icon-btn,
  .nav-btn,
  .hsoc,
  .social,
  .studio-search,
  .mode-ico,
  .msg-actions button,
  .studio-new,
  .sb-icon,
  .studio-mini-tab,
  .studio-mode-tab,
  .studio-frame-card,
  .studio-image-tool,
  .studio-links-btn,
  .studio-video-edit-upload,
  .studio-select-pill,
  .image-settings-pill,
  .image-count-pill,
  .studio-generate,
  .vgen-btn,
  .vgen-upload-row,
  .vgen-uico,
  .voice-workspace-tile,
  .voice-workspace-upload,
  .voice-upload-drop,
  .voice-upload-chip,
  .voice-upload-speaker-btn,
  .voice-trash-btn,
  .generation-info-close,
  .studio-player-controls button,
  .studio-player-icon,
  .upload-photo-thumb,
  .upload-photo-add-icon,
  .upload-photo-center-icon
) svg,
.app .tb-stat svg,
.app .studio-link-icons svg,
.app .studio-video-edit-upload-icon svg,
.app .studio-frame-ico svg,
.app .vgen-btn-ico svg,
.app .voice-workspace-upload svg,
.app .voice-trash-btn svg,
body > #modelPop:not(.video-template-modal) svg,
body > #modelPop:not(.video-template-modal) .model-brand-logo {
  width:var(--miniapp-icon-size) !important;
  height:var(--miniapp-icon-size) !important;
  max-width:var(--miniapp-icon-size) !important;
  max-height:var(--miniapp-icon-size) !important;
  flex:0 0 var(--miniapp-icon-size) !important;
}

.app :where(.tool .ico,.cat .ci,.chat-head .ico,.ctrl .ci,.row .ico,.mode-ico .mi,.studio-link-icons span,.vgen-uico,.voice-workspace-upload i){
  width:var(--miniapp-icon-box) !important;
  height:var(--miniapp-icon-box) !important;
  min-width:var(--miniapp-icon-box) !important;
  flex-basis:var(--miniapp-icon-box) !important;
  font-size:var(--miniapp-icon-size) !important;
}

.app :where(.studio-emoji-icon,.studio-frame-ico,.vgen-btn-ico,.upload-photo-add-icon,.upload-photo-center-icon,.voice-upload-drop span,.voice-upload-audio-box > span,.generation-info-audio-preview span){
  font-size:var(--miniapp-icon-size) !important;
  line-height:1 !important;
}

.app :where(.studio-player-controls button,.studio-player-icon,.studio-new,.sb-icon,.icon-btn,.image-settings-pill){
  width:var(--miniapp-icon-box) !important;
  height:var(--miniapp-icon-box) !important;
}
/* One active Pro Studio generation per user. History and completed-result
   actions stay outside these selectors and remain fully interactive. */
body.prostudio-job-locked #studioComposer,
body.prostudio-job-locked #modelBtn {
  opacity: .52;
  filter: saturate(.55);
  transition: opacity .18s ease, filter .18s ease;
}

body.prostudio-job-locked #studioComposer,
body.prostudio-job-locked #modelBtn,
body.prostudio-job-locked #modelPop {
  pointer-events: none;
  user-select: none;
}

body.prostudio-job-locked #sendBtn.has-active-job {
  opacity: 1;
  filter: none;
}

body.prostudio-job-locked #sendBtn.has-active-job .studio-generate-label {
  display: inline-flex;
  white-space: nowrap;
}

body.prostudio-job-locked #sendBtn.has-active-job .studio-send-arrow {
  display: none;
}

/* Text composer: voice input and send are the final two controls in the
   horizontal bottom row. They participate in its normal scroll flow. */
.studio-video-composer[data-composer-mode="text"] .studio-control-row{
  position:relative;
  padding-right:0!important;
}
.studio-video-composer[data-composer-mode="text"] .studio-control-row::after{
  display:none!important;
}
.studio-video-composer[data-composer-mode="text"] .studio-control-row .text-mic-floating,
.studio-video-composer[data-composer-mode="text"] .studio-control-row .studio-generate{
  position:static!important;
  inset:auto!important;
  flex:0 0 40px;
  width:40px;
  min-width:40px;
  height:40px;
  min-height:40px;
  box-sizing:border-box;
  border-radius:50%;
  display:grid;
  place-items:center;
}
.studio-video-composer[data-composer-mode="text"] .text-recording-bar{
  right:0;
}

:is(body.device-mobile,body.device-tablet) .studio-video-composer[data-composer-mode="text"] .studio-prompt-column textarea{padding-right:42px!important}
:is(body.device-mobile,body.device-tablet) .studio-video-composer[data-composer-mode="text"] .mobile-keyboard-close{right:8px}
:is(body.device-mobile,body.device-tablet).kb-open .studio-video-composer[data-composer-mode="text"] .mobile-keyboard-close,
:is(body.device-mobile,body.device-tablet) .studio-input.composer-input-window[data-composer-mode="text"] .mobile-keyboard-close{display:grid!important}

/* Mobile prompt baseline: the textarea and its animated placeholder share
   one typography and one padding model. Keyboard/viewport behavior is kept
   separate from these purely visual rules. */
:is(body.device-mobile,body.device-tablet) .studio-video-composer .studio-prompt-column{
  --mobile-prompt-font-size:15px;
  --mobile-prompt-line-height:1.45;
  --mobile-prompt-padding-top:8px;
  --mobile-prompt-padding-right:0px;
  --mobile-prompt-padding-bottom:8px;
  --mobile-prompt-padding-left:0px;
  --mobile-prompt-column-top:12px;
}
:is(body.device-mobile,body.device-tablet) .studio-video-composer[data-composer-mode="music"] .studio-prompt-column{
  --mobile-prompt-column-top:0px;
}
:is(body.device-mobile,body.device-tablet) .studio-video-composer .studio-prompt-column textarea{
  padding:var(--mobile-prompt-padding-top) var(--mobile-prompt-padding-right) var(--mobile-prompt-padding-bottom) var(--mobile-prompt-padding-left)!important;
  font-family:inherit;
  font-size:var(--mobile-prompt-font-size)!important;
  font-weight:inherit;
  line-height:var(--mobile-prompt-line-height);
  letter-spacing:inherit;
  text-align:inherit;
  direction:inherit;
}
:is(body.device-mobile,body.device-tablet) .studio-video-composer[data-composer-mode="text"] .studio-prompt-column{
  --mobile-prompt-padding-right:42px;
}
:is(body.device-mobile,body.device-tablet) .studio-video-composer .animated-prompt-placeholder{
  box-sizing:border-box;
  top:var(--mobile-prompt-column-top);
  left:0;
  right:0;
  padding:var(--mobile-prompt-padding-top) var(--mobile-prompt-padding-right) var(--mobile-prompt-padding-bottom) var(--mobile-prompt-padding-left);
  font-family:inherit;
  font-size:var(--mobile-prompt-font-size);
  font-weight:inherit;
  line-height:var(--mobile-prompt-line-height);
  letter-spacing:inherit;
  text-align:inherit;
  direction:inherit;
  white-space:normal;
  overflow-wrap:normal;
  word-break:normal;
  text-overflow:clip;
}
:is(body.device-mobile,body.device-tablet) .studio-prompt-column.voice-editor-fullscreen .animated-prompt-placeholder{
  top:0;
  left:0;
  right:0;
  padding-top:calc(env(safe-area-inset-top,0px) + 22px);
  padding-left:14px;
  padding-right:14px;
}
:is(body.device-mobile,body.device-tablet) .animated-prompt-placeholder:not(.is-animated) i{
  display:none!important;
  animation:none!important;
}
/* SYLVEX Share is an isolated public presentation layer above Pro Studio. */
.generation-share-page{position:fixed;inset:0;z-index:12000;display:none;overflow:auto;background:radial-gradient(circle at 50% -10%,rgba(35,126,255,.18),transparent 42%),var(--bg,#0b0d12);color:var(--text,#fff);padding:env(safe-area-inset-top) 16px env(safe-area-inset-bottom)}
.generation-share-page.is-open{display:block}.generation-share-open{overflow:hidden}
.generation-share-standalone .app{visibility:hidden}.generation-share-standalone .generation-share-page{visibility:visible}.generation-share-standalone .generation-share-brand>button{display:none}
.generation-share-shell{width:min(760px,100%);margin:0 auto;padding:20px 0 44px}
.generation-share-brand{display:flex;align-items:center;gap:11px;margin-bottom:18px}.generation-share-brand img{width:42px;height:42px;border-radius:13px;object-fit:cover}.generation-share-brand div{display:flex;flex-direction:column}.generation-share-brand b{font-size:18px;letter-spacing:.08em}.generation-share-brand span{font-size:12px;opacity:.58}.generation-share-brand>button{margin-left:auto;width:38px;height:38px;border:0;border-radius:50%;background:rgba(255,255,255,.09);color:inherit;font-size:25px}
.generation-share-card{overflow:hidden;border:1px solid rgba(255,255,255,.1);border-radius:24px;background:rgba(24,27,35,.94);box-shadow:0 24px 70px rgba(0,0,0,.35)}
.generation-share-media{display:grid;place-items:center;min-height:260px;max-height:68vh;background:#080a0e}.generation-share-media>img,.generation-share-media>video{display:block;width:100%;max-height:68vh;object-fit:contain}.generation-share-media audio{width:calc(100% - 36px);margin:16px 18px 24px}.generation-share-cover{aspect-ratio:1;width:min(380px,80%)!important;border-radius:20px;margin:28px auto 10px;object-fit:cover!important}.generation-share-audio-mark{display:grid;place-items:center;width:150px;height:150px;margin:36px auto 10px;border-radius:28px;background:linear-gradient(145deg,#2386ff,#795cff);font-size:46px;font-weight:700}
.generation-share-details{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:rgba(255,255,255,.07);border-top:1px solid rgba(255,255,255,.08)}.generation-share-details>div{display:flex;flex-direction:column;gap:5px;padding:14px 16px;background:rgba(19,22,29,.98)}.generation-share-details span,.generation-share-prompt>span{font-size:11px;opacity:.55;text-transform:uppercase;letter-spacing:.06em}.generation-share-details b{font-size:14px;font-weight:500;overflow:hidden;text-overflow:ellipsis}
.generation-share-prompt{padding:18px;border-top:1px solid rgba(255,255,255,.08)}.generation-share-prompt p{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;margin:8px 0 0;font-size:14px;line-height:1.55;white-space:pre-wrap}.generation-share-prompt.is-expanded p{display:block}.generation-share-prompt button{border:0;background:none;color:#62a8ff;padding:9px 0 0;font-size:13px}
.generation-share-actions{display:flex;flex-wrap:wrap;gap:9px;padding:0 18px 20px}.generation-share-actions button,.generation-share-actions a{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:42px;padding:10px 14px;border:1px solid rgba(255,255,255,.1);border-radius:13px;background:rgba(255,255,255,.07);color:inherit;text-decoration:none;font:inherit;font-size:13px}.generation-share-actions svg{width:17px;height:17px}.generation-share-actions button:last-child{background:#2386ff;border-color:#2386ff}
.generation-share-loading,.generation-share-error{display:flex;min-height:55vh;align-items:center;justify-content:center;flex-direction:column;gap:8px;text-align:center}.generation-share-error span{opacity:.6;font-size:13px}
@media(max-width:600px){.generation-share-page{padding-left:0;padding-right:0}.generation-share-shell{padding-top:12px}.generation-share-brand{padding:0 14px}.generation-share-card{border-radius:22px 22px 0 0}.generation-share-media{min-height:220px}.generation-share-details{grid-template-columns:1fr 1fr}.generation-share-actions{display:grid;grid-template-columns:1fr}.generation-share-actions button,.generation-share-actions a{width:100%}}

/* SYLVEX Community */
body:has(.view[data-view="community"].active){background:#070a10;color:#f5f5f7}body:has(.view[data-view="community"].active) .app{max-width:none;background:#070a10}body:has(.view[data-view="community"].active) .topbar,body:has(.view[data-view="community"].active) .app>.nav{display:none}body:has(.view[data-view="community"].active) .scroll{padding:0;background:#070a10}.view[data-view="community"].active{display:block;min-height:100vh}.community-app{--community-purple:#8b4dff;min-height:100vh;display:grid;grid-template-columns:230px minmax(420px,720px) minmax(240px,300px);justify-content:center;background:radial-gradient(circle at 55% -15%,rgba(94,54,177,.13),transparent 32%),#070a10;color:#f7f7fa}.community-app button,.community-app input{font:inherit}.community-sidebar{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;padding:25px 18px 16px;border-right:1px solid #1c202a;background:#090c12}.community-brand{display:flex;align-items:center;gap:12px;padding:0 8px 28px;border:0;background:none;color:#fff;text-align:left}.community-brand img,.community-top-title img{width:40px;height:40px;object-fit:contain;filter:brightness(0) saturate(100%) invert(42%) sepia(95%) saturate(4041%) hue-rotate(247deg) brightness(104%)}.community-brand span,.community-top-title span{display:flex;flex-direction:column}.community-brand b,.community-top-title b{font-size:20px;letter-spacing:1.2px}.community-brand small,.community-top-title small{color:#a65bff;font-size:13px}.community-sidebar nav{display:grid;gap:7px}.community-sidebar nav button,.community-exit{height:48px;display:flex;align-items:center;gap:13px;padding:0 13px;border:0;border-radius:10px;background:transparent;color:#e5e7ec;text-align:left}.community-sidebar nav button.active{background:linear-gradient(100deg,#43247d,#5a37a0)}.community-sidebar svg,.community-topbar svg,.community-compose svg,.community-mobile-nav svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.community-exit{margin-top:auto;border-top:1px solid #1d212b;border-radius:0;color:#b6b9c2}.community-center{min-width:0;padding:0 18px 88px;border-right:1px solid #1c202a}.community-topbar{position:sticky;top:0;z-index:8;height:78px;display:flex;align-items:center;gap:16px;background:rgba(7,10,16,.93);backdrop-filter:blur(18px)}.community-top-title,.community-mobile-menu{display:none}.community-search{height:40px;flex:1;display:flex;align-items:center;gap:8px;padding:0 13px;border:1px solid #202631;border-radius:11px;background:#10141c;color:#8d93a2}.community-search svg{width:17px}.community-search input{width:100%;border:0;outline:0;background:none;color:#fff;font-size:12px}.community-top-actions{display:flex;gap:7px}.community-top-actions button,.community-mobile-menu{width:38px;height:38px;place-items:center;border:0;border-radius:50%;background:transparent;color:#f2f2f5}.community-top-actions button{display:grid}.community-top-actions .community-add{background:linear-gradient(145deg,#a04cff,#6235eb)}.community-stories{display:flex;gap:17px;overflow:auto;padding:10px 2px 15px;scrollbar-width:none}.community-stories button{width:58px;flex:0 0 58px;border:0;background:none;color:#d8d9df}.community-stories i{position:relative;width:53px;height:53px;display:grid;place-items:center;padding:2px;border-radius:50%;background:linear-gradient(145deg,#c04dff,#554aff);font-style:normal}.community-stories i>span{width:100%;height:100%;display:grid;place-items:center;overflow:hidden;border:2px solid #090c12;border-radius:50%;background:#181c26;font-size:11px;font-weight:800}.community-stories img{width:100%;height:100%;object-fit:cover}.community-stories i b{position:absolute;right:-2px;bottom:-1px;width:19px;height:19px;display:grid;place-items:center;border:2px solid #090c12;border-radius:50%;background:#7840f2}.community-stories small{display:block;overflow:hidden;margin-top:6px;font-size:9px;text-overflow:ellipsis;white-space:nowrap}.community-compose{display:grid;grid-template-columns:40px 1fr;gap:10px;padding:13px;border:1px solid #1d222d;border-radius:14px;background:#0d1119}.community-compose>button{border:0;background:none;color:#888e9c;text-align:left}.community-compose>div{grid-column:2;display:grid;grid-template-columns:repeat(3,1fr);gap:5px}.community-compose>div button{height:38px;display:flex;align-items:center;justify-content:center;gap:6px;border:1px solid #202533;border-radius:8px;background:#111522;color:#d8c5ff;font-size:11px}.community-compose>div svg{width:16px;height:16px}.community-feed{margin-top:14px}.community-post{border-color:#1d222c;border-radius:14px;background:#0c1017}.community-post>header{padding:14px 15px}.community-post header b em{color:#9450ff;font-size:9px;font-style:normal}.community-more{margin-left:auto;border:0;background:none;color:#858a96}.community-post>p{padding:0 15px 12px;font-size:13px}.community-media{margin:0 14px;overflow:hidden;border-radius:11px}.community-media img,.community-media video{max-height:620px;border-radius:11px;object-fit:contain}.community-post footer{padding:10px 13px}.community-post footer .community-save{margin-left:auto}.community-right{position:sticky;top:0;height:100vh;overflow:auto;padding:96px 18px 20px;background:#090c12}.community-right section{padding:15px;border:1px solid #1c222c;border-radius:13px;background:#0d1118}.community-right section+section{margin-top:14px}.community-right h3{margin:0;font-size:13px}.community-right p{margin:5px 0 14px;color:#7f8592;font-size:10px}.community-right section>button{width:100%;height:38px;margin-top:12px;border:0;border-radius:8px;background:#6134aa;color:#fff}.community-chat-preview{display:grid;gap:4px}.community-chat-preview span{margin-top:7px;font-size:11px;font-weight:700}.community-chat-preview small{color:#858b98;font-size:9px}.community-right #communityPopular{display:grid;gap:7px;margin-top:12px}.community-right #communityPopular>button{display:flex;align-items:center;gap:8px;padding:5px 0;border:0;background:none;color:#fff;text-align:left}.community-right #communityPopular .community-avatar{width:32px;height:32px;flex-basis:32px}.community-right #communityPopular>button>span:nth-child(2){min-width:0;flex:1}.community-right #communityPopular b,.community-right #communityPopular small{display:block}.community-right #communityPopular b{font-size:10px}.community-right #communityPopular small{color:#787f8d;font-size:8px}.community-right #communityPopular i{padding:6px;border:1px solid #54318a;border-radius:6px;color:#a76cff;font-size:8px;font-style:normal}.community-mobile-nav{display:none}
@media(max-width:900px){.community-app{grid-template-columns:72px minmax(0,680px)}.community-sidebar{padding:22px 10px}.community-brand{justify-content:center;padding:0 0 26px}.community-brand img{width:38px}.community-brand span,.community-sidebar nav span,.community-exit span{display:none}.community-sidebar nav button,.community-exit{justify-content:center;padding:0}.community-right{display:none}}
@media(max-width:640px){.community-app{display:block;padding-bottom:70px}.community-sidebar{display:none}.community-center{padding:0 10px 82px;border:0}.community-topbar{height:72px;gap:8px;justify-content:space-between}.community-mobile-menu{display:grid}.community-top-title{display:flex;align-items:center;gap:8px}.community-top-title img{width:29px;height:29px}.community-top-title b{font-size:16px}.community-top-title small{font-size:10px}.community-search{display:none}.community-top-actions button:first-child{display:none}.community-top-actions button{width:33px;height:33px}.community-top-actions .community-add{display:none}.community-stories{padding-top:4px}.community-compose{padding:10px}.community-compose>div button{font-size:10px}.community-feed{gap:11px}.community-media{margin:0 8px}.community-post>header{padding:12px 10px}.community-post>p{padding:0 10px 10px}.community-mobile-nav{position:fixed;z-index:30;left:0;right:0;bottom:0;height:68px;display:grid;grid-template-columns:repeat(5,1fr);align-items:center;padding-bottom:max(5px,env(safe-area-inset-bottom));border-top:1px solid #1d222d;background:rgba(8,11,17,.96)}.community-mobile-nav button{display:flex;flex-direction:column;align-items:center;gap:3px;border:0;background:none;color:#858b99;font-size:8px}.community-mobile-nav button.active{color:#9754ff}.community-mobile-nav .create{width:46px;height:46px;justify-self:center;justify-content:center;border-radius:50%;background:linear-gradient(145deg,#9b4cff,#6136e7);color:#fff}.community-app.menu-open .community-sidebar{position:fixed;z-index:40;inset:0 auto 0 0;width:250px;height:100vh;display:flex;padding:24px 18px;box-shadow:30px 0 70px rgba(0,0,0,.6)}.community-app.menu-open .community-sidebar .community-brand span,.community-app.menu-open .community-sidebar nav span,.community-app.menu-open .community-exit span{display:flex}.community-app.menu-open .community-sidebar nav button,.community-app.menu-open .community-exit{justify-content:flex-start;padding:0 13px}}

/* Community inherits the active Mini App theme and uses the main green accent. */
.home-socials .hsoc{min-width:0;flex:1 1 0;height:38px;padding:0;border-radius:12px}.home-socials .hsoc>svg,.home-socials .hsoc>img{width:18px;height:18px;display:block;object-fit:contain}.home-socials .hsoc.sx>img{filter:none}.community-app{--community-purple:var(--primary);background:var(--bg);color:var(--text)}body:has(.view[data-view="community"].active),body:has(.view[data-view="community"].active) .app,body:has(.view[data-view="community"].active) .scroll{background:var(--bg);color:var(--text)}.community-sidebar,.community-right{background:var(--surface);border-color:var(--border)}.community-center{border-color:var(--border)}.community-brand,.community-sidebar nav button,.community-exit,.community-top-actions button{color:var(--text)}.community-brand img,.community-top-title img{filter:none}.community-brand small,.community-top-title small,.community-post header b em,.community-mobile-nav button.active{color:var(--primary)}.community-sidebar nav button.active,.community-top-actions .community-add,.community-stories i,.community-stories i b,.community-right section>button,.community-mobile-nav .create{background:var(--primary);color:var(--button-text,#fff)}.community-topbar{background:color-mix(in srgb,var(--bg) 92%,transparent)}.community-search,.community-compose,.community-post,.community-right section{background:var(--surface);border-color:var(--border);color:var(--text)}.community-search input{color:var(--text)}.community-compose>div button{background:var(--surface-2);border-color:var(--border);color:var(--primary)}.community-stories button{color:var(--text)}.community-stories i>span{border-color:var(--bg);background:var(--surface-2)}.community-stories i b{border-color:var(--bg)}.community-post footer button,.community-more{color:var(--text-dim)}.community-right #communityPopular>button{color:var(--text)}.community-right #communityPopular i{border-color:var(--primary);color:var(--primary)}.community-mobile-nav{border-color:var(--border);background:color-mix(in srgb,var(--bg) 94%,transparent)}
[data-theme="dark"] .home-socials .hsoc.sx>img{filter:brightness(3.15) contrast(1.08) drop-shadow(.35px 0 0 currentColor) drop-shadow(-.35px 0 0 currentColor) drop-shadow(0 .35px 0 currentColor) drop-shadow(0 -.35px 0 currentColor);transform:scale(1.08)}[data-theme="dark"] .community-brand img,[data-theme="dark"] .community-top-title img{filter:brightness(2.4)}

.community-brand img,.community-top-title img{width:30px;height:30px;filter:grayscale(1) brightness(1.7) sepia(.08) saturate(1.3);animation:communityLogoShine 4.8s ease-in-out infinite;filter:grayscale(1) brightness(1.85) drop-shadow(0 0 5px rgba(255,210,225,.18))}@keyframes communityLogoShine{0%,60%,100%{opacity:.9;transform:scale(1)}72%{opacity:1;transform:scale(1.035);filter:grayscale(1) brightness(2.7) drop-shadow(0 0 9px rgba(255,220,230,.35))}}
.community-stories,.community-compose{display:none}.community-user-card{width:100%;display:flex;align-items:center;gap:11px;margin:8px 0 12px;padding:12px;border:1px solid var(--border);border-radius:16px;background:var(--surface);color:var(--text);text-align:left}.community-user-identity{min-width:0;display:flex;flex-direction:column}.community-user-identity b{font-size:13px}.community-user-identity small{margin-top:3px;color:var(--text-dim);font-size:9px}.community-user-stats{margin-left:auto;display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.community-user-stats i{display:flex;flex-direction:column;align-items:center;font-style:normal}.community-user-stats b{font-size:13px}.community-user-stats small{color:var(--text-dim);font-size:8px}.community-new-post{width:100%;height:42px;border:0;border-radius:12px;background:var(--primary);color:var(--button-text,#fff);font-weight:750}.community-avatar[data-rank="2"]{box-shadow:0 0 0 2px #62b67c}.community-avatar[data-rank="3"]{box-shadow:0 0 0 2px #42d8b0,0 0 12px rgba(66,216,176,.3)}.community-avatar[data-rank="4"]{box-shadow:0 0 0 2px #dfbd55,0 0 16px rgba(223,189,85,.4)}.community-avatar[data-rank="5"]{box-shadow:0 0 0 2px #fff,0 0 18px var(--primary);animation:communityRankGlow 2s ease-in-out infinite}@keyframes communityRankGlow{50%{box-shadow:0 0 0 3px #fff,0 0 26px var(--primary)}}.community-side-user{height:auto!important;padding:11px!important;border:1px solid var(--border)!important;border-radius:14px!important;background:var(--surface-2)!important}.community-side-user>span:last-child{display:flex;min-width:0;flex-direction:column}.community-side-user b{overflow:hidden;font-size:11px;text-overflow:ellipsis;white-space:nowrap}.community-side-user small{color:var(--text-dim);font-size:8px}.community-author-button{display:flex;align-items:center;gap:10px;border:0;background:none;color:var(--text);text-align:left}.community-author-button>span:last-child{display:flex;flex-direction:column}.community-author-actions{margin-left:auto;display:flex;gap:5px}.community-author-actions button{padding:6px 8px;border:1px solid var(--primary);border-radius:8px;background:none;color:var(--primary);font-size:8px}.community-caption{display:-webkit-box!important;overflow:hidden;-webkit-line-clamp:3;-webkit-box-orient:vertical}.community-photo-grid{display:grid;gap:3px;max-height:650px}.community-photo-grid img{width:100%;height:100%;min-height:0;object-fit:cover}.community-photo-grid.count-2{grid-template-columns:1fr 1fr}.community-photo-grid.count-3,.community-photo-grid.count-4{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}.community-photo-grid.count-3 img:first-child{grid-row:1/3}.community-post footer svg{width:18px;height:18px;fill:none;stroke:currentColor}.community-menu-backdrop{display:none}.community-app.menu-open .community-menu-backdrop{position:fixed;z-index:39;inset:0;display:block;border:0;background:rgba(0,0,0,.42)}.community-modal textarea{width:100%;resize:none;margin-bottom:10px;padding:11px;border:1px solid var(--border);border-radius:12px;background:var(--surface);color:var(--text);line-height:1.4}.community-publish-choice{display:flex;align-items:center;gap:10px;padding:11px;border:1px solid var(--border);border-radius:13px;background:var(--surface);color:var(--text)}.community-publish-choice input{accent-color:var(--primary)}.community-publish-choice svg{width:21px;height:21px;fill:none;stroke:currentColor}.community-publish-choice b{font-size:11px}.community-publish-submit{height:43px;margin-top:12px;border:0;border-radius:12px;background:var(--primary);color:var(--button-text,#fff);font-weight:750}.community-profile-card{text-align:center}.community-profile-card>.community-avatar{width:82px;height:82px;margin:8px auto}.community-profile-card h2{margin:12px 0 3px}.community-profile-card h2 em{color:var(--primary);font-style:normal}.community-profile-card>p{margin:0;color:var(--text-dim)}.community-profile-card>div{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-top:18px}.community-profile-card>div span{display:flex;flex-direction:column;padding:9px 3px;border-radius:10px;background:var(--surface-2)}.community-profile-card>div small{margin-top:3px;color:var(--text-dim);font-size:8px}.community-profile-card footer{display:flex;gap:8px;margin-top:14px}.community-profile-card footer button{flex:1;height:40px;border:1px solid var(--primary);border-radius:10px;background:none;color:var(--primary)}.community-profile-card footer button:first-child{background:var(--primary);color:var(--button-text,#fff)}
@media(max-width:640px){.community-user-card{align-items:flex-start;flex-wrap:wrap}.community-user-stats{width:100%;margin:5px 0 0;gap:4px}.community-author-actions{display:none}.community-photo-grid{max-height:520px}.community-side-user>span:last-child{display:flex!important}.community-sidebar .community-side-user{justify-content:flex-start!important}.community-menu-backdrop{display:none}}

/* Community stage 1: fixed navigation, social hub and stable overlays. */
body.community-menu-visible{overflow:hidden}.community-delete-post{width:32px;height:32px;display:grid;place-items:center;margin-left:auto;border:0;border-radius:9px;background:transparent;color:var(--text-dim)}.community-delete-post svg{width:16px!important;height:16px!important}.community-delete-post:hover{background:rgba(255,255,255,.07);color:#fff}.community-notification-button{position:relative}.community-notification-button i{position:absolute;right:1px;top:1px;min-width:15px;height:15px;display:grid;place-items:center;padding:0 3px;border:2px solid var(--bg);border-radius:9px;background:#ff4967;color:#fff;font-size:7px;font-style:normal}.community-notification-button i[hidden]{display:none}.community-hub{position:fixed;z-index:140000;inset:0;display:none;align-items:stretch;justify-content:flex-end;background:rgba(0,0,0,.48);backdrop-filter:blur(5px)}.community-hub.show{display:flex}.community-hub>section{width:min(460px,100%);height:100dvh;display:flex;flex-direction:column;border-left:1px solid var(--border);background:var(--bg);color:var(--text);box-shadow:-24px 0 70px rgba(0,0,0,.4)}.community-hub>section>header{height:68px;display:flex;align-items:center;justify-content:space-between;padding:0 16px;border-bottom:1px solid var(--border)}.community-hub>section>header b{font-size:15px}.community-hub>section>header button{width:36px;height:36px;display:grid;place-items:center;border:0;border-radius:50%;background:var(--surface);color:var(--text)}.community-hub>section>header svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2}.community-hub main{min-height:0;flex:1;display:flex;flex-direction:column;padding:12px;overflow:hidden}.community-hub-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin-bottom:12px}.community-hub-tabs button{height:35px;border:0;border-radius:10px;background:var(--surface);color:var(--text-dim);font-size:9px}.community-hub-tabs button.active{background:var(--primary);color:var(--button-text,#fff)}.community-hub main>h4{margin:10px 4px 7px;font-size:11px}.community-hub-list,.community-notifications{min-height:0;overflow-y:auto;display:grid;gap:6px}.community-hub-list>button,.community-hub-list>div{min-height:58px;display:flex;align-items:center;gap:10px;padding:8px;border:1px solid var(--border);border-radius:13px;background:var(--surface);color:var(--text);text-align:left}.community-hub-list>button>span:nth-child(2),.community-hub-list>div>span:nth-child(2){min-width:0;flex:1}.community-hub-list b,.community-hub-list small{display:block}.community-hub-list b{font-size:11px}.community-hub-list small{overflow:hidden;margin-top:3px;color:var(--text-dim);font-size:8px;text-overflow:ellipsis;white-space:nowrap}.community-hub-list i{color:var(--text-dim);font-style:normal}.community-hub-list>div>button{padding:6px 8px;border:0;border-radius:8px;background:var(--primary);color:#fff;font-size:8px}.community-chat-messages{min-height:0;flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:8px;padding:4px}.community-chat-messages article{max-width:82%;align-self:flex-start;padding:9px 11px;border-radius:14px 14px 14px 4px;background:var(--surface)}.community-chat-messages article.own{align-self:flex-end;border-radius:14px 14px 4px 14px;background:color-mix(in srgb,var(--primary) 26%,var(--surface))}.community-chat-messages article b{font-size:8px;color:var(--primary)}.community-chat-messages article p{margin:3px 0;white-space:pre-wrap;font-size:11px;line-height:1.4}.community-chat-messages article time,.community-notifications time{color:var(--text-dim);font-size:7px}.community-chat-form{display:flex;gap:7px;margin-top:10px}.community-chat-form input{min-width:0;flex:1;height:43px;padding:0 13px;border:1px solid var(--border);border-radius:13px;background:var(--surface);color:var(--text);outline:0}.community-chat-form button{width:43px;border:0;border-radius:13px;background:var(--primary);color:#fff}.community-chat-form svg{width:18px;height:18px;fill:none;stroke:currentColor}.community-notifications article{display:flex;gap:10px;padding:10px;border-radius:13px;background:var(--surface)}.community-notifications article.unread{box-shadow:inset 3px 0 var(--primary)}.community-notifications article>div{min-width:0}.community-notifications b{font-size:10px}.community-notifications p{margin:3px 0;color:var(--text-dim);font-size:9px}.community-media video{background:#000}
@media(max-width:640px){.community-mobile-nav{grid-template-columns:repeat(4,1fr)!important;height:70px!important;padding-bottom:max(6px,env(safe-area-inset-bottom))!important;transform:translateZ(0)}.community-mobile-nav .create span{display:none}.community-app.menu-open .community-sidebar{top:0!important;bottom:0!important;height:100dvh!important}.community-hub>section{border:0}.community-hub main{padding-bottom:calc(82px + env(safe-area-inset-bottom))}}

/* Community stage 1 corrections */
.community-delete-post{color:#fff!important}.community-delete-post svg{width:14px!important;height:14px!important;stroke-width:2.4!important}.community-topbar{background:var(--bg)!important;backdrop-filter:none!important}.community-hub>section>header,.community-hub-tabs{background:var(--bg)}body.community-menu-visible>.community-sidebar{position:fixed!important;z-index:140002!important;left:0!important;top:0!important;bottom:0!important;width:250px!important;height:100dvh!important;display:flex!important;padding:24px 18px!important;box-shadow:30px 0 70px rgba(0,0,0,.65)!important;background:var(--surface)!important}body.community-menu-visible>.community-sidebar .community-brand span,body.community-menu-visible>.community-sidebar nav span,body.community-menu-visible>.community-sidebar .community-exit span{display:flex!important}body.community-menu-visible>.community-sidebar nav button,body.community-menu-visible>.community-sidebar .community-exit{justify-content:flex-start!important;padding:0 13px!important}body.community-menu-visible>.community-menu-backdrop{position:fixed!important;z-index:140001!important;inset:0!important;display:block!important;border:0!important;background:rgba(0,0,0,.58)!important}body>.community-mobile-nav{display:none!important}
@media(max-width:640px){body:has(.view[data-view="community"].active)>.community-mobile-nav{position:fixed!important;z-index:139900!important;left:0!important;right:0!important;bottom:0!important;display:grid!important;grid-template-columns:repeat(5,1fr)!important;height:72px!important;background:var(--bg)!important;opacity:1!important;backdrop-filter:none!important;box-shadow:0 -8px 24px rgba(0,0,0,.24)}body:has(.view[data-view="community"].active)>.community-mobile-nav .create{grid-column:3;width:48px;height:48px;margin-top:-8px}.community-hub>section,.community-hub>section>header,.community-hub main{background:var(--bg)!important}}

/* Community interaction polish */
.community-topbar{transition:transform .24s ease,opacity .2s ease;background:var(--surface)!important;border-bottom:1px solid var(--border);box-shadow:0 8px 22px rgba(0,0,0,.16)}.community-post,.community-modal>section,.community-hub>section,.community-hub>section>header,.community-hub main,.community-hub-tabs,.community-hub-list>button,.community-hub-list>div,.community-notifications>button{background:var(--surface)!important}.community-modal>section{opacity:1!important}.community-video-ui{position:absolute;z-index:3;inset:9px 9px auto 9px;display:flex;align-items:center;justify-content:space-between;pointer-events:none}.community-video-ui button,.community-video-ui time{height:28px;display:grid;place-items:center;border:0;border-radius:14px;background:rgba(0,0,0,.72);color:#fff;font-size:9px;box-shadow:0 2px 10px rgba(0,0,0,.28);pointer-events:auto}.community-video-ui button{width:28px;font-size:14px}.community-video-ui time{min-width:46px;padding:0 9px}.community-media{position:relative}.community-media video{width:100%;height:100%;object-fit:contain}.community-audio{position:relative;overflow:hidden}.community-music-cover{width:100%;height:min(280px,52vw);border-radius:12px;object-fit:cover}.community-audio audio{position:relative;z-index:2}.community-chat-messages article{display:flex;align-items:flex-end;gap:7px;padding:7px!important;background:transparent!important}.community-chat-messages article>div{padding:8px 10px;border-radius:14px 14px 14px 4px;background:var(--surface-2)}.community-chat-messages article.own>div{border-radius:14px 14px 4px 14px;background:color-mix(in srgb,var(--primary) 28%,var(--surface-2))}.community-message-avatar{width:25px;height:25px;flex:0 0 25px;display:grid;place-items:center;overflow:hidden;border-radius:50%;background:var(--surface-2);font-size:7px;font-weight:800}.community-message-avatar img{width:100%;height:100%;object-fit:cover}.community-chat-messages article.own{flex-direction:row-reverse}.community-chat-messages article.pending{opacity:.7}.community-chat-messages article.failed{opacity:.55}.community-chat-messages article.failed>div{box-shadow:inset 0 0 0 1px #ef6072}.community-notifications>button{width:100%;display:flex;gap:10px;padding:10px;border:0;border-radius:13px;color:var(--text);text-align:left}.community-notifications>button.unread{box-shadow:inset 3px 0 var(--primary)}.community-notifications>button>div{min-width:0}.community-notifications>button b{font-size:10px}.community-notifications>button p{margin:3px 0;color:var(--text-dim);font-size:9px}.community-state>button{display:block;margin:12px auto 0;padding:8px 12px;border:0;border-radius:9px;background:var(--primary);color:#fff}.community-modal.show~*{}body:has(#communityPublishModal.show)>.community-mobile-nav{transform:translateY(125%)!important;pointer-events:none!important}
@media(max-width:640px){body:has(.view[data-view="community"].active)>.community-mobile-nav{gap:5px;padding:7px 7px max(7px,env(safe-area-inset-bottom))!important;border:0!important;background:var(--surface)!important;transition:transform .24s ease,opacity .2s ease!important}.community-mobile-nav button{height:48px;justify-content:center;border:1px solid var(--border)!important;border-radius:13px!important;background:var(--surface-2)!important;color:var(--text-dim)!important}.community-mobile-nav button.active{color:var(--primary)!important}.community-mobile-nav .create{margin-top:-12px!important;border:0!important;background:var(--primary)!important;color:var(--button-text,#fff)!important;box-shadow:0 7px 22px color-mix(in srgb,var(--primary) 35%,transparent)}body.community-chrome-hidden:has(.view[data-view="community"].active)>.community-mobile-nav{transform:translateY(120%);opacity:0;pointer-events:none}.view[data-view="community"].active .community-topbar{position:sticky;top:0;border-radius:0 0 15px 15px}.community-chrome-hidden .view[data-view="community"].active .community-topbar{transform:translateY(-110%);opacity:0;pointer-events:none}.community-modal{z-index:150000!important}.community-modal>section{padding-bottom:max(16px,env(safe-area-inset-bottom))}.community-music-cover{height:min(300px,62vw)}}

/* Community visual corrections: unified chrome and theme-safe controls. */
.community-brand img,.community-top-title img{animation:none!important;filter:none!important;border-radius:7px;object-fit:contain;transform:none!important}.community-topbar{border:0!important;border-radius:0!important;background:var(--surface)!important;box-shadow:none!important}.community-delete-post{margin-left:auto!important;color:var(--text)!important}.community-post>footer .community-delete-post{order:10}.community-post>footer .community-delete-post svg{width:17px!important;height:17px!important}.community-video-ui button svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}.community-publish-types{grid-template-columns:repeat(2,1fr)!important}.community-post,.community-modal>section,.community-hub>section,.community-hub main,.community-hub-list>button,.community-hub-list>div,.community-notifications>button,.community-comments .community-comment>div{background:color-mix(in srgb,var(--surface) 88%,transparent)!important;backdrop-filter:blur(12px)}[data-theme="light"] .community-mobile-menu,[data-theme="light"] .community-top-actions button{color:#111!important}[data-theme="light"] .community-post footer button,[data-theme="light"] .community-post footer button.liked{color:#111!important}[data-theme="light"] .community-post footer button svg{stroke:#111!important}[data-theme="dark"] .community-post footer button,[data-theme="dark"] .community-post footer button.liked{color:#fff!important}[data-theme="dark"] .community-post footer button svg{stroke:#fff!important}
@media(max-width:640px){body:has(.view[data-view="community"].active)>.community-mobile-nav{gap:0!important;padding:4px 5px max(5px,env(safe-area-inset-bottom))!important;border-top:1px solid var(--border)!important;border-radius:0!important;background:color-mix(in srgb,var(--surface) 90%,transparent)!important;box-shadow:0 -8px 24px rgba(0,0,0,.18)!important;backdrop-filter:blur(16px)!important}.community-mobile-nav button{height:50px;border:0!important;border-radius:0!important;background:transparent!important}.community-mobile-nav .create{width:48px!important;height:48px!important;margin-top:-10px!important;border-radius:50%!important;background:var(--primary)!important}.view[data-view="community"].active .community-topbar{border-radius:0!important}}

/* ProStudio Grid */
.studio-layout-switch{display:flex;flex:0 0 auto;gap:2px;margin-left:auto;padding:3px;border:1px solid rgba(255,255,255,.1);border-radius:12px;background:rgba(255,255,255,.045)}.studio-layout-switch button{height:28px;padding:0 10px;border:0;border-radius:9px;background:transparent;color:var(--text-dim);font-size:10px;font-weight:700;white-space:nowrap}.studio-layout-switch button.active{background:#fff;color:#111}.studio-grid-workspace[hidden]{display:none!important}.studio.grid-mode{position:relative;overflow:hidden}.studio.grid-mode #chatArea,.studio.grid-mode #studioComposer{display:none!important}.studio-grid-workspace{position:relative;height:calc(100dvh - 73px);min-height:560px;overflow:hidden;background:#0c0d10;color:#f7f7f8}.studio-grid-header{position:absolute;z-index:8;top:14px;left:16px;right:16px;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px 12px;border:1px solid rgba(255,255,255,.09);border-radius:16px;background:rgba(24,25,30,.9);box-shadow:0 12px 36px rgba(0,0,0,.22);backdrop-filter:blur(18px)}.studio-grid-header>div{min-width:130px}.studio-grid-header small{display:block;color:#777d8b;font-size:7px;font-weight:800;letter-spacing:1.4px}.studio-grid-header input{width:min(230px,24vw);padding:2px 0;border:0;outline:0;background:transparent;color:#fff;font:700 13px/1.2 inherit}.studio-grid-header nav{display:flex;gap:5px;overflow-x:auto;scrollbar-width:none}.studio-grid-header nav::-webkit-scrollbar{display:none}.studio-grid-header nav button{height:30px;flex:0 0 auto;padding:0 10px;border:1px solid rgba(255,255,255,.09);border-radius:10px;background:#22242a;color:#e9e9ec;font-size:9px;font-weight:700}.studio-grid-canvas{position:absolute;inset:0;overflow:hidden;cursor:grab;touch-action:none;background-color:#0c0d10;background-image:radial-gradient(circle,rgba(255,255,255,.105) 1px,transparent 1.2px);background-size:22px 22px}.studio-grid-canvas.is-panning{cursor:grabbing}.studio-grid-stage{position:absolute;left:0;top:0;width:2600px;height:1600px;transform-origin:0 0;will-change:transform}.studio-grid-edges{position:absolute;inset:0;width:2600px;height:1600px;overflow:visible;pointer-events:none}.studio-grid-edges path{fill:none;stroke:rgba(151,157,172,.7);stroke-width:2}.studio-grid-edges circle{fill:#b7bdc9}.studio-grid-nodes{position:absolute;inset:0}.studio-grid-node{position:absolute;width:276px;min-height:190px;overflow:visible;border:1px solid rgba(255,255,255,.12);border-radius:17px;background:#1b1c20;box-shadow:0 18px 44px rgba(0,0,0,.35)}.studio-grid-node.selected{border-color:rgba(102,128,255,.75);box-shadow:0 0 0 2px rgba(87,113,255,.16),0 18px 44px rgba(0,0,0,.38)}.studio-grid-node-header{height:38px;display:flex;align-items:center;gap:8px;padding:0 10px;border-bottom:1px solid rgba(255,255,255,.07);cursor:grab;user-select:none}.studio-grid-node-icon{width:21px;height:21px;display:grid;place-items:center;border-radius:7px;background:rgba(94,120,255,.16);color:#9db0ff;font-size:11px}.studio-grid-node[data-type=image] .studio-grid-node-icon{background:rgba(42,197,145,.15);color:#65e1b6}.studio-grid-node[data-type=video] .studio-grid-node-icon{background:rgba(177,85,255,.16);color:#ca8eff}.studio-grid-node[data-type=music] .studio-grid-node-icon{background:rgba(255,76,145,.15);color:#ff8ab9}.studio-grid-node[data-type=voice] .studio-grid-node-icon{background:rgba(255,167,70,.15);color:#ffc37c}.studio-grid-node-header b{flex:1;font-size:10px}.studio-grid-node-header button{width:24px;height:24px;border:0;border-radius:50%;background:transparent;color:#777d87;font-size:16px}.studio-grid-node-body{padding:10px}.studio-grid-node textarea{width:100%;height:82px;resize:none;padding:10px;border:1px solid rgba(255,255,255,.08);border-radius:12px;outline:0;background:#131418;color:#f3f3f4;font:500 10px/1.45 inherit}.studio-grid-node textarea:focus{border-color:rgba(118,139,255,.65)}.studio-grid-node textarea::placeholder{color:#646974}.studio-grid-node-result{height:44px;display:flex;align-items:center;gap:8px;margin-top:8px;padding:0 10px;border-radius:11px;background:rgba(255,255,255,.045);color:#787e89;font-size:9px}.studio-grid-node-result i{width:22px;height:22px;display:grid;place-items:center;border-radius:7px;background:rgba(255,255,255,.07);font-style:normal}.studio-grid-node-footer{display:flex;justify-content:flex-end;padding:0 10px 10px}.studio-grid-node-footer button{height:29px;padding:0 11px;border:0;border-radius:9px;background:#30333b;color:#f2f2f4;font-size:9px;font-weight:700}.studio-grid-node-footer button:hover{background:#586ff5}.studio-grid-port{position:absolute;top:50%;width:12px;height:12px;border:2px solid #1b1c20;border-radius:50%;background:#aab1be;transform:translateY(-50%)}.studio-grid-port.in{left:-6px}.studio-grid-port.out{right:-6px}.studio-grid-tools{position:absolute;z-index:9;left:16px;bottom:16px;display:flex;align-items:center;gap:4px;padding:5px;border:1px solid rgba(255,255,255,.09);border-radius:13px;background:rgba(27,28,33,.92);backdrop-filter:blur(16px)}.studio-grid-tools button{width:31px;height:31px;border:0;border-radius:9px;background:transparent;color:#f5f5f6;font-size:16px}.studio-grid-tools span{min-width:42px;color:#9297a2;font-size:9px;text-align:center}
.view[data-view="tools"].active .studio-layout-switch{background:var(--st-bg-2);border:1px solid var(--st-line)}
.view[data-view="tools"].active .studio-layout-switch button{color:var(--st-dim)}
.view[data-view="tools"].active .studio-layout-switch button.active{background:var(--st-invert-bg);color:var(--st-invert-text);box-shadow:var(--st-depth-1)}
@media(max-width:700px){.studio-layout-switch{padding:2px}.studio-layout-switch button{height:26px;padding:0 7px;font-size:8px}.studio-grid-workspace{height:calc(100dvh - 66px);min-height:0;overflow:auto}.studio-grid-header{position:sticky;top:0;left:auto;right:auto;display:block;margin:8px;padding:10px}.studio-grid-header>div{display:flex;align-items:center;gap:8px}.studio-grid-header input{width:100%;font-size:12px}.studio-grid-header nav{margin-top:8px}.studio-grid-canvas{position:relative;inset:auto;height:auto;min-height:calc(100dvh - 160px);overflow:visible;cursor:default;touch-action:pan-y;background-size:18px 18px}.studio-grid-stage{position:relative;width:100%!important;height:auto!important;transform:none!important;padding:18px 12px 86px}.studio-grid-edges{display:none}.studio-grid-nodes{position:relative;display:flex;flex-direction:column;gap:28px}.studio-grid-node{position:relative!important;left:auto!important;top:auto!important;width:100%;min-height:180px}.studio-grid-node:not(:last-child):after{content:"";position:absolute;left:50%;bottom:-28px;width:2px;height:28px;background:linear-gradient(#828896,#3d414a)}.studio-grid-tools{position:fixed;left:50%;bottom:72px;transform:translateX(-50%)}.studio-grid-tools button:nth-of-type(n+3),.studio-grid-tools span{display:none}}

.studio-bar .studio-layout-switch{position:absolute;left:50%;top:50%;z-index:2;margin:0;transform:translate(-50%,-50%)}

/* Community publisher: three compact, equally sized media types. */
.community-publish-types{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-bottom:12px}.community-publish-types button{height:46px;display:flex;align-items:center;justify-content:center;gap:6px;border:1px solid var(--border);border-radius:11px;background:var(--surface-2);color:var(--text-dim)}.community-publish-types button.active{border-color:var(--primary);color:var(--primary)}.community-publish-types span,.community-publish-choice>span{width:17px;height:17px;display:grid;place-items:center;flex:0 0 17px}.community-publish-types svg,.community-publish-choice svg{width:17px!important;height:17px!important;fill:none;stroke:currentColor}.community-publish-types b{font-size:10px}.community-publish-choice[hidden],.community-caption-field[hidden]{display:none}.community-publish-choice input:disabled{opacity:.45}.community-caption-field{position:relative;margin-top:10px}.community-caption-field textarea{margin:0;padding:11px 11px 25px}.community-caption-field small{position:absolute;right:10px;bottom:8px;color:var(--text-dim);font-size:8px}

/* Keep every Community publication uniformly compact. */
.community-feed{justify-items:center}.community-post{width:50%;min-width:280px}.community-media{height:260px}.community-media img,.community-media video,.community-photo-grid{height:100%;max-height:none}.community-photo-grid{width:100%}.community-photo-grid img{object-fit:cover}.community-audio{height:100%;min-height:0;padding:16px}.community-caption{min-height:0}@media(max-width:640px){.community-post{width:100%;min-width:0}.community-media{height:min(72vw,360px)}}

/* Likes stay white and update without rebuilding the feed. */
.community-post footer button.liked,.community-comment footer button.liked{color:#fff}.community-post footer button.liked svg,.community-comment footer button.liked svg{fill:currentColor}.community-post footer button:disabled,.community-comment footer button:disabled{opacity:.7}

/* Community comment actions, timestamps and replies. */
.community-comments{gap:10px}.community-comment{display:flex;gap:9px}.community-comment.reply{margin-left:34px}.community-comment>.community-avatar{width:32px;height:32px;flex:0 0 32px}.community-comment>div{min-width:0;flex:1;padding:9px 10px;border-radius:12px;background:var(--surface)}.community-comment header{display:flex;margin:0 0 4px;gap:8px}.community-comment header b{font-size:11px}.community-comment time{margin-left:auto;color:var(--text-dim);font-size:8px}.community-comment>div>small{display:block;margin-bottom:3px;color:var(--primary);font-size:8px}.community-comment p{margin:0;padding:0;background:none;white-space:pre-wrap;overflow-wrap:anywhere}.community-comment footer{display:flex;flex-wrap:wrap;gap:9px;margin-top:7px}.community-comment footer button{display:flex;align-items:center;gap:3px;padding:0;border:0;background:none;color:var(--text-dim);font-size:8px}.community-comment footer svg{width:11px!important;height:11px!important}.community-replying{display:flex;align-items:center;padding:7px 10px;margin-top:8px;border-radius:9px;background:var(--surface);color:var(--text-dim);font-size:9px}.community-replying[hidden]{display:none}.community-replying button{margin-left:auto;border:0;background:none;color:var(--text);font-size:16px}.community-comments-empty{color:var(--text-dim);text-align:center}@media(max-width:420px){.community-comment.reply{margin-left:20px}}

.creative-catalog{position:fixed;inset:0;z-index:135000;display:none;align-items:flex-end;justify-content:center;padding:10px;background:rgba(0,0,0,.72);backdrop-filter:blur(10px)}.creative-catalog.show{display:flex}.creative-catalog>section{width:min(720px,100%);height:min(86vh,820px);overflow:hidden;display:flex;flex-direction:column;border:1px solid rgba(255,255,255,.12);border-radius:26px 26px 18px 18px;background:#111216;color:#f4f4f6;box-shadow:0 25px 80px rgba(0,0,0,.5)}.creative-catalog header{display:flex;justify-content:space-between;gap:15px;padding:20px 20px 15px;border-bottom:1px solid rgba(255,255,255,.08)}.creative-catalog header small{color:#8f93a1;font-size:10px;letter-spacing:1.5px;text-transform:uppercase}.creative-catalog header h2{margin:4px 0;font-size:22px}.creative-catalog header p{margin:0;color:#9296a3;font-size:12px}.creative-catalog header button{width:36px;height:36px;flex:0 0 36px;border:0;border-radius:50%;background:#24262d;color:#fff;font-size:24px}.creative-catalog main{overflow:auto;padding:16px}.creative-group+.creative-group{margin-top:22px}.creative-group h3{margin:0 0 10px;font-size:14px}.creative-group>div{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.creative-group button{min-height:78px;display:flex;align-items:center;gap:11px;padding:11px;border:1px solid rgba(255,255,255,.09);border-radius:16px;background:linear-gradient(145deg,#1c1e25,#15161b);color:#f5f5f6;text-align:left}.creative-group button:active{transform:scale(.98)}.creative-group i{width:38px;height:38px;flex:0 0 38px;display:grid;place-items:center;border-radius:12px;background:linear-gradient(145deg,rgba(112,87,255,.35),rgba(34,187,214,.2));font-style:normal}.creative-group i svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8}.creative-group span{min-width:0}.creative-group b,.creative-group small{display:block}.creative-group b{font-size:12px}.creative-group small{display:-webkit-box;margin-top:4px;overflow:hidden;color:#8f93a1;font-size:9px;line-height:1.35;-webkit-line-clamp:2;-webkit-box-orient:vertical}@media(max-width:420px){.creative-catalog{padding:5px}.creative-catalog>section{height:88vh;border-radius:22px 22px 14px 14px}.creative-catalog main{padding:12px}.creative-group>div{gap:7px}.creative-group button{min-height:72px;padding:9px}.creative-group i{width:32px;height:32px;flex-basis:32px}}

/* Stage 2 UI-only refinements. */
[data-theme="light"] .brand-logo-img{filter:brightness(0)!important}
.nav-btn{position:relative;border-radius:15px;transition:color .2s ease,background .2s ease,box-shadow .2s ease}
.nav-btn.active{color:#58c99c!important;background:linear-gradient(145deg,rgba(52,211,153,.17),rgba(16,163,127,.07));box-shadow:inset 0 0 0 1px rgba(88,201,156,.18),0 7px 20px rgba(16,163,127,.08);backdrop-filter:blur(12px)}
.nav-btn.active svg{stroke:#58c99c}
.view[data-view="profile"]>.user-card,.view[data-view="home"]>.user-card{background:var(--profile-cover,var(--grad-card));background-size:cover}
.profile-grid .mini,.profile-balance-action{cursor:pointer;transition:transform .16s ease,border-color .16s ease}
.profile-grid .mini:active,.profile-balance-action:active{transform:scale(.98);border-color:color-mix(in srgb,var(--primary) 48%,var(--border))}
#editProfileModal{align-items:center;overflow-y:auto;padding:18px}
#editProfileModal>.sheet{width:min(520px,100%);max-height:min(88dvh,820px);overflow-y:auto;overscroll-behavior:contain;background:var(--bg-0);color:var(--text);border-color:var(--border-strong);touch-action:pan-y}
#editProfileModal .sheet-grab{position:sticky;top:0;z-index:2;background:var(--text-mute)}
#editProfileModal .th-sw{background-size:cover!important}
[data-theme="dark"] :is(.balance-label,.balance-usd,.mini .k,.row .label small,.ms,.ep-label,.th-lbl){color:#c6c8ce}

.ai-banner-brand i{width:29px;height:29px}.ai-banner-brand img{width:21px;height:21px}.ai-banner-brand img.logo-wide{width:24px;height:24px}.ai-banner-brand svg{width:18px;height:18px}
.ai-chip{height:34px;padding:0 8px;border:0!important;background:transparent!important;box-shadow:none!important;gap:8px}.ai-chip i{width:26px;height:26px;background:transparent!important}.ai-chip i .public-ai-logo,.ai-chip i .model-brand-logo{width:20px;height:20px}.ai-model-mask,.ai-chip svg{width:19px;height:19px}.ai-chip b{color:var(--text-dim)}
[data-theme="dark"] .ai-chip b{color:#d9dbe1}
.sub-card:not(.sub-card-gold){background:var(--surface);color:var(--text);border-color:var(--border-strong)}
.sub-card:not(.sub-card-gold) :is(.sub-title,.sub-price,.sub-perks,.sub-period){color:var(--text)}
[data-theme="light"] .sub-card-gold{color:#fff}.sub-card-gold :is(.sub-title,.sub-price,.sub-perks,.sub-period){color:inherit}
[data-theme="light"] :is(.ton-price,.ton-amount,[data-currency="TON"],.crypto-ton-price){color:#111!important}
.studio-brand-cluster{min-width:0;display:flex;align-items:center;justify-content:center;gap:2px}.studio-brand-cluster .sb-brand{justify-self:auto}.studio-bar .studio-layout-switch{position:static!important;left:auto!important;top:auto!important;margin:0!important;transform:none!important;padding:2px;border-radius:9px}.studio-layout-switch button{height:24px;padding:0 7px;border-radius:7px;font-size:8px}
.support-email{width:100%;height:43px;padding:0 13px;border:1px solid var(--border-strong);border-radius:12px;outline:0;background:var(--surface);color:var(--text)}.support-email:focus{border-color:var(--primary)}.support-email-label{display:block;margin:3px 0 7px;color:var(--text-dim);font-size:11px}.support-field-error{display:block;min-height:17px;padding:3px 2px;color:#ef6c78;font-size:10px}
.profile-cover-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.profile-cover-option{height:62px;border:2px solid transparent;border-radius:13px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);cursor:pointer}.profile-cover-option.sel{border-color:var(--primary)}
.sylvex-ai-assistant-fab{position:fixed;z-index:90000;width:58px;height:58px;padding:7px;border:1px solid rgba(82,217,166,.34);border-radius:50%;background:color-mix(in srgb,var(--surface) 92%,transparent);box-shadow:0 10px 30px rgba(0,0,0,.3);touch-action:none;cursor:grab}.sylvex-ai-assistant-fab img{width:100%;height:100%;object-fit:contain}.sylvex-ai-assistant-fab.is-dragging{cursor:grabbing}.ai-assistant-modal{position:fixed;z-index:140000;inset:0;display:none;background:var(--bg-0);color:var(--text)}.ai-assistant-modal.show{display:block}.ai-assistant-modal>section{height:100dvh;display:flex;flex-direction:column}.ai-assistant-modal header{height:60px;display:flex;align-items:center;justify-content:space-between;padding:env(safe-area-inset-top) 15px 0;border-bottom:1px solid var(--border);background:var(--surface)}.ai-assistant-modal header span{display:flex;align-items:center;gap:9px}.ai-assistant-modal header img{width:29px;height:29px;object-fit:contain}.ai-assistant-modal header button{width:38px;height:38px;border:0;border-radius:50%;background:var(--surface-2);color:var(--text);font-size:25px}.ai-assistant-chat{flex:1;display:flex;flex-direction:column;gap:10px;overflow-y:auto;padding:18px 14px}.ai-assistant-empty{margin:auto;color:var(--text-dim)}.ai-assistant-message{max-width:82%;padding:11px 13px;border-radius:16px;background:var(--surface);white-space:pre-wrap;overflow-wrap:anywhere}.ai-assistant-message.user{align-self:flex-end;background:var(--primary);color:#fff}.ai-assistant-message.ai{align-self:flex-start}.ai-assistant-composer{display:flex;align-items:flex-end;gap:8px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));border-top:1px solid var(--border);background:var(--bg-0)}.ai-assistant-composer textarea{flex:1;max-height:130px;min-height:44px;resize:none;padding:11px 13px;border:1px solid var(--border-strong);border-radius:15px;outline:0;background:var(--surface);color:var(--text);font:14px/1.45 inherit}.ai-assistant-composer button{width:44px;height:44px;border:0;border-radius:50%;background:var(--primary);color:#fff;font-size:20px}
@media(max-width:700px){#editProfileModal{align-items:flex-start;padding:0}#editProfileModal>.sheet{width:100%;max-height:none;min-height:100dvh;border-radius:0;padding:calc(10px + env(safe-area-inset-top)) 16px calc(24px + env(safe-area-inset-bottom))!important}.studio-layout-switch button{height:22px;padding:0 4px;font-size:7px}.studio-brand-cluster{gap:1px}.studio-brand-cluster .sb-brand{padding-right:7px}.studio-brand-cluster .sb-brand-name{font-size:11px}}
.profile-save-status{position:fixed;z-index:10000;left:50%;bottom:max(22px,env(safe-area-inset-bottom));max-width:min(88vw,420px);padding:10px 15px;border:1px solid var(--border);border-radius:999px;background:color-mix(in srgb,var(--surface) 94%,transparent);color:var(--text);font-size:12px;font-weight:650;box-shadow:0 12px 35px rgba(0,0,0,.28);backdrop-filter:blur(16px);opacity:0;pointer-events:none;transform:translate(-50%,18px);transition:opacity .2s ease,transform .2s ease}.profile-save-status.show{opacity:1;transform:translate(-50%,0)}.profile-save-status.saving::before{content:'';display:inline-block;width:11px;height:11px;margin-right:8px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;vertical-align:-2px;animation:profileSaveSpin .75s linear infinite}.profile-save-status.saved{border-color:color-mix(in srgb,#34c98b 55%,var(--border))}.profile-save-status.queued{border-color:color-mix(in srgb,#e7ad48 55%,var(--border))}@keyframes profileSaveSpin{to{transform:rotate(360deg)}}
.community-post{content-visibility:auto;contain-intrinsic-size:520px}.community-photo-grid img{background:var(--surface-2)}
.tb-stat{border:0;font:inherit}.shop-tabs{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin:8px 0 14px;padding:4px;border:1px solid var(--border);border-radius:14px;background:var(--surface)}.shop-tabs button{height:38px;border:0;border-radius:10px;background:transparent;color:var(--text-dim);font:700 12px inherit}.shop-tabs button.active{background:var(--text);color:var(--bg-0)}[data-shop-panel][hidden]{display:none!important}[data-theme="light"] .tok-price{color:#111;border-color:rgba(0,0,0,.12);background:rgba(0,0,0,.05)}
.ai-assistant-dragging,.ai-assistant-dragging body{overflow:hidden!important;overscroll-behavior:none!important;touch-action:none!important}.sylvex-ai-assistant-fab{user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;overscroll-behavior:contain}.ai-assistant-modal header span b{font-size:15px}.spending-stats-modal .spending-total{display:flex;align-items:flex-end;justify-content:space-between;padding:14px;border-radius:14px;background:var(--surface-2)}.spending-total small{color:var(--text-dim)}.spending-total b{font-size:20px}.spending-chart-empty{height:150px;display:flex;align-items:flex-end;gap:7px;margin-top:12px;padding:15px;border:1px solid var(--border);border-radius:15px;background:var(--surface-2)}.spending-chart-empty span{flex:1;min-height:12px;border-radius:6px 6px 2px 2px;background:color-mix(in srgb,var(--primary) 65%,var(--surface))}.spending-note{color:var(--text-dim);font-size:10px;line-height:1.45}
.view[data-view="settings"] .connect-card .socials{flex-wrap:wrap;justify-content:flex-start}.view[data-view="settings"] .connect-card .social{flex:1 1 46px;max-width:62px}
.community-publisher-loading{min-height:150px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--text-dim);text-align:center}.community-publisher-loading i{width:25px;height:25px;border:3px solid color-mix(in srgb,var(--text) 18%,transparent);border-top-color:var(--primary);border-radius:50%;animation:communityPublisherSpin .75s linear infinite}.community-publisher-loading b{color:var(--text);font-size:12px}.community-publisher-loading small{font-size:9px}.community-publish-submit:disabled{opacity:.45;pointer-events:none}@keyframes communityPublisherSpin{to{transform:rotate(360deg)}}
[data-theme="light"] .community-brand img,[data-theme="light"] .community-top-title img{filter:brightness(0)!important}[data-theme="dark"] .community-brand img,[data-theme="dark"] .community-top-title img{filter:brightness(0) invert(1)!important}
[data-theme="light"] .sub-cd-val,[data-theme="light"] .sub-card-gold .sub-cd-val{color:#111!important}

/* AI model presentation shown before entering the standard Pro Studio. */
.brand-presentation{position:fixed;z-index:160000;inset:0;display:none;padding:14px;background:var(--bg-0);color:#fff}.brand-presentation.show{display:block}.brand-presentation>section{position:relative;width:100%;height:100%;min-height:420px;display:flex;align-items:flex-end;overflow:hidden;border:1px solid rgba(255,255,255,.13);border-radius:26px;background:#0d0e12}.brand-presentation>section:before{content:"";position:absolute;inset:0;background-image:linear-gradient(180deg,rgba(5,6,9,.05),rgba(5,6,9,.22) 42%,rgba(5,6,9,.96) 91%),var(--brand-presentation-art);background-size:cover;background-position:center;transform:scale(1.015)}.brand-presentation>section:after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 72% 18%,color-mix(in srgb,var(--primary) 20%,transparent),transparent 42%);pointer-events:none}.brand-presentation-close{position:absolute;z-index:3;right:16px;top:16px;width:42px;height:42px;display:grid;place-items:center;padding:0;border:1px solid rgba(255,255,255,.22);border-radius:50%;background:rgba(8,9,12,.4);color:#fff;font-size:27px;line-height:1;backdrop-filter:blur(14px)}.brand-presentation-content{position:relative;z-index:2;width:min(560px,100%);padding:clamp(26px,6vw,64px)}.brand-presentation-logo{width:72px;height:72px;display:grid;place-items:center;margin-bottom:20px;padding:11px;border:1px solid rgba(255,255,255,.18);border-radius:22px;background:rgba(13,14,18,.48);box-shadow:0 18px 45px rgba(0,0,0,.3);backdrop-filter:blur(14px)}.brand-presentation-logo img{width:100%;height:100%;object-fit:contain;border-radius:12px}.brand-presentation-mark{width:42px;height:42px;background:linear-gradient(135deg,#fff,var(--primary));clip-path:polygon(50% 0,100% 30%,82% 100%,18% 100%,0 30%)}.brand-presentation-content small{display:block;margin-bottom:10px;color:rgba(255,255,255,.64);font-size:10px;font-weight:800;letter-spacing:1.8px;text-transform:uppercase}.brand-presentation-content h1{margin:0;color:#fff;font-size:clamp(34px,7vw,64px);line-height:.98;letter-spacing:-2px}.brand-presentation-content p{max-width:500px;margin:18px 0 26px;color:rgba(255,255,255,.74);font-size:clamp(13px,2vw,17px);line-height:1.55}.brand-presentation-open{min-height:50px;padding:0 22px;border:1px solid rgba(255,255,255,.16);border-radius:15px;background:#fff;color:#111;font-size:13px;font-weight:800;box-shadow:0 15px 35px rgba(0,0,0,.25)}.brand-presentation[data-brand="suno"]>section:after{background:radial-gradient(circle at 75% 18%,rgba(255,82,54,.28),transparent 45%)}.brand-presentation[data-brand="seedance"]>section:after{background:radial-gradient(circle at 75% 18%,rgba(133,76,255,.3),transparent 45%)}.brand-presentation[data-brand="kling"]>section:after{background:radial-gradient(circle at 75% 18%,rgba(238,44,94,.24),transparent 45%)}
@media(max-width:640px){.brand-presentation{padding:0}.brand-presentation>section{min-height:100dvh;border:0;border-radius:0}.brand-presentation-content{padding:28px 20px max(34px,env(safe-area-inset-bottom))}.brand-presentation-logo{width:62px;height:62px;margin-bottom:16px;border-radius:19px}.brand-presentation-content h1{font-size:40px}.brand-presentation-open{width:100%;padding:0 14px}.brand-presentation-close{top:max(14px,env(safe-area-inset-top));right:14px}}

/* Informative ending of the Mini App home page. */
.home-faq{margin-top:34px}.home-faq>header{margin-bottom:14px}.home-faq>header small{display:block;margin-bottom:5px;color:var(--text-dim);font-size:8px;font-weight:800;letter-spacing:1.7px}.home-faq>header h3{margin:0;color:var(--text);font-size:20px;letter-spacing:-.45px}.home-faq-list{display:grid;gap:7px}.home-faq-list details{overflow:hidden;border:1px solid var(--border);border-radius:15px;background:var(--surface);color:var(--text);box-shadow:0 7px 20px rgba(0,0,0,.05)}.home-faq-list summary{min-height:51px;display:flex;align-items:center;gap:12px;padding:0 15px;list-style:none;cursor:pointer;font-size:11px;font-weight:750}.home-faq-list summary::-webkit-details-marker{display:none}.home-faq-list summary span{width:25px;height:25px;display:grid;place-items:center;margin-left:auto;border-radius:50%;background:var(--surface-2);color:var(--text-dim);font-size:16px;font-weight:400;transition:transform .22s ease}.home-faq-list details[open] summary span{transform:rotate(45deg)}.home-faq-list p{margin:0;padding:0 15px 15px;color:var(--text-dim);font-size:10px;line-height:1.55}.home-legal-footer{margin:28px 0 4px;padding:22px 18px 14px;border:1px solid var(--border);border-radius:22px;background:linear-gradient(145deg,var(--surface),color-mix(in srgb,var(--surface-2) 90%,var(--primary) 10%));box-shadow:0 14px 38px rgba(0,0,0,.08)}.home-legal-brand{display:flex;align-items:center;gap:11px}.home-legal-brand img{width:36px;height:36px;object-fit:contain}.home-legal-brand span{display:flex;flex-direction:column}.home-legal-brand b{color:var(--text);font-size:13px;letter-spacing:.35px}.home-legal-brand small{margin-top:3px;color:var(--text-dim);font-size:8px}.home-legal-footer nav{display:flex;flex-wrap:wrap;gap:8px 18px;margin:20px 0 17px}.home-legal-footer nav a{color:var(--text);font-size:9px;text-decoration:none}.home-legal-footer nav a:hover{text-decoration:underline;text-underline-offset:3px}.home-legal-bottom{display:flex;justify-content:space-between;gap:12px;padding-top:13px;border-top:1px solid var(--border);color:var(--text-dim);font-size:8px}
@media(max-width:420px){.home-faq{margin-top:28px}.home-faq>header h3{font-size:18px}.home-legal-footer{padding:19px 15px 13px}.home-legal-footer nav{flex-direction:column;gap:10px}.home-legal-bottom{font-size:7px}}

/* Settings menu search and compact app version information. */
.settings-menu-search{position:relative;margin:12px 0 19px}.settings-menu-search>label{display:block;margin:0 3px 7px;color:var(--text-dim);font-size:9px;font-weight:750}.settings-menu-search>div:first-of-type{height:46px;display:flex;align-items:center;gap:9px;padding:0 13px;border:1px solid var(--border);border-radius:14px;background:var(--surface);box-shadow:0 8px 22px rgba(0,0,0,.05)}.settings-menu-search svg{width:17px;height:17px;fill:none;stroke:var(--text-dim);stroke-width:1.8}.settings-menu-search input{min-width:0;flex:1;border:0;outline:0;background:transparent;color:var(--text);font:11px/1.3 inherit}.settings-menu-search input::placeholder{color:var(--text-dim)}.settings-menu-results{position:absolute;z-index:30;left:0;right:0;top:72px;max-height:320px;overflow-y:auto;padding:6px;border:1px solid var(--border);border-radius:15px;background:color-mix(in srgb,var(--surface) 96%,transparent);box-shadow:0 18px 44px rgba(0,0,0,.24);backdrop-filter:blur(18px)}.settings-menu-results[hidden]{display:none}.settings-menu-results button{width:100%;display:flex;align-items:center;gap:10px;padding:10px;border:0;border-radius:10px;background:transparent;color:var(--text);text-align:left}.settings-menu-results button:active{background:var(--surface-2)}.settings-menu-results button span{min-width:0;display:flex;flex:1;flex-direction:column}.settings-menu-results button b{font-size:10px}.settings-menu-results button small{margin-top:3px;overflow:hidden;color:var(--text-dim);font-size:8px;text-overflow:ellipsis;white-space:nowrap}.settings-menu-results button i{color:var(--text-dim);font-size:18px;font-style:normal}.settings-menu-results>p{margin:0;padding:15px;color:var(--text-dim);font-size:10px;text-align:center}.app-version-modal{position:fixed;z-index:170000;inset:0;display:grid;place-items:center;padding:20px;background:rgba(0,0,0,.48);backdrop-filter:blur(8px);opacity:0;transition:opacity .18s ease}.app-version-modal[hidden]{display:none}.app-version-modal.show{opacity:1}.app-version-modal>section{position:relative;width:min(330px,100%);padding:28px 22px 20px;border:1px solid var(--border);border-radius:24px;background:var(--surface);color:var(--text);box-shadow:0 28px 70px rgba(0,0,0,.36);text-align:center;transform:translateY(10px) scale(.97);transition:transform .18s ease}.app-version-modal.show>section{transform:none}.app-version-modal>section>button{position:absolute;right:11px;top:11px;width:33px;height:33px;border:0;border-radius:50%;background:var(--surface-2);color:var(--text);font-size:22px}.app-version-modal img{width:52px;height:52px;object-fit:contain;margin-bottom:12px}.app-version-modal section>small{display:block;color:var(--text-dim);font-size:8px;font-weight:800;letter-spacing:1.5px}.app-version-modal h3{margin:8px 0 3px;font-size:20px}.app-version-modal section>p{margin:0;color:var(--text-dim);font-size:10px}.app-version-modal dl{margin:19px 0 0;padding-top:12px;border-top:1px solid var(--border)}.app-version-modal dl div{display:flex;justify-content:space-between;gap:15px;padding:6px 0}.app-version-modal dt,.app-version-modal dd{margin:0;font-size:9px}.app-version-modal dt{color:var(--text-dim)}.app-version-modal dd{color:var(--text);font-weight:700;text-align:right}
@media(max-width:759px){.view[data-view="shop"] .sub-card{min-height:300px;padding:20px 17px 17px;border-radius:22px}.view[data-view="shop"] .sub-title{font-size:18px}.view[data-view="shop"] .sub-period{font-size:13px}.view[data-view="shop"] .sub-price-now{font-size:24px}.view[data-view="shop"] .sub-perks li{font-size:13px;line-height:1.45}.view[data-view="shop"] .sub-cta{min-height:48px;font-size:15px}}

/* Suno standalone generator — live UI based on the supplied Canva/SVG layout. */
body[data-brand-generator="suno"] .view[data-view="tools"].active .studio{overflow-y:auto;align-content:flex-start;background-color:#181419!important;background-image:radial-gradient(circle at 1px 1px,rgba(226,61,89,.28) 1.15px,transparent 1.3px)!important;background-size:24px 24px!important}
body[data-brand-generator="suno"] .brand-generator-head{position:relative;top:auto;width:100%;min-height:286px;padding:0 22px 16px;border-bottom:1px solid rgba(231,53,82,.5);background:#08060a!important}
body[data-brand-generator="suno"] .brand-generator-head-video{inset:58px 50% auto auto;width:min(470px,42vw);height:190px;object-fit:contain;transform:translateX(50%)}
body[data-brand-generator="suno"] .brand-generator-head-shade{background:linear-gradient(180deg,rgba(5,4,7,.04),rgba(5,4,7,.08) 62%,rgba(5,4,7,.75))}
.suno-brand-topline{position:absolute;z-index:4;left:0;right:0;top:0;height:58px;display:flex;align-items:center;padding:0 18px;border-bottom:1px solid rgba(255,255,255,.035);background:#0e1822;color:#f5f5f6}.suno-brand-topline>button{width:34px;height:34px;padding:0;border:0;background:transparent;color:#fff;font-size:30px;font-weight:200;line-height:1;cursor:pointer}.suno-brand-topline>span{height:38px;display:flex;align-items:center;gap:9px;margin-left:10px;padding:0 13px;border-radius:11px;background:#172432}.suno-brand-topline img{width:23px;height:23px;object-fit:contain;filter:brightness(0) invert(1)}.suno-brand-topline b{font-size:13px;font-weight:600;letter-spacing:.02em}.suno-brand-topline>i{margin-left:auto;color:#fff;font-size:18px;font-style:normal;letter-spacing:3px}
body[data-brand-generator="suno"] .brand-generator-name{position:absolute!important;z-index:4!important;left:22px;bottom:16px}body[data-brand-generator="suno"] .brand-generator-name img{width:30px;height:30px;border-radius:8px;background:transparent}body[data-brand-generator="suno"] .brand-generator-name b{font-size:14px;color:#fff}
body[data-brand-generator="suno"] .brand-generator-actions{position:absolute!important;z-index:4!important;right:18px;bottom:14px}body[data-brand-generator="suno"] .brand-generator-actions>button{height:38px}body[data-brand-generator="suno"] .brand-generator-balance{border-color:rgba(255,161,75,.45);background:rgba(26,20,27,.84)}body[data-brand-generator="suno"] .brand-generator-balance em{background:#ff4c68}body[data-brand-generator="suno"] .brand-generator-avatar,body[data-brand-generator="suno"] .brand-generator-close{width:38px;height:38px}
body[data-brand-generator="suno"] .brand-music-showcase{width:min(1080px,calc(100% - 32px));margin:15px auto 14px}body[data-brand-generator="suno"] .brand-music-genres{justify-content:center;gap:12px;padding:0 4px 18px}body[data-brand-generator="suno"] .brand-music-genres button{min-width:76px;height:52px;border-radius:14px;background:linear-gradient(145deg,#dd5129,#b93c2b);color:#ffd8a8;font-size:15px}body[data-brand-generator="suno"] .brand-music-genres button.is-active{border-color:#ffb737;background:linear-gradient(145deg,#e85d29,#c74626);color:#fff5c7}
body[data-brand-generator="suno"] .brand-music-slider{height:278px}body[data-brand-generator="suno"] .brand-music-card{width:216px;height:248px;border-radius:26px}body[data-brand-generator="suno"] .brand-music-card[data-pos="-1"]{transform:translateX(-82%) scale(.84)}body[data-brand-generator="suno"] .brand-music-card[data-pos="1"]{transform:translateX(82%) scale(.84)}body[data-brand-generator="suno"] .brand-music-card[data-pos="-2"]{transform:translateX(-143%) scale(.68)}body[data-brand-generator="suno"] .brand-music-card[data-pos="2"]{transform:translateX(143%) scale(.68)}body[data-brand-generator="suno"] .brand-music-card span{bottom:10px;border-radius:13px;background:rgba(76,24,17,.82);color:#fff}
body[data-brand-generator="suno"] .brand-music-player{width:min(1060px,100%);min-height:126px;margin:0 auto;border-color:#ff8c22;border-radius:26px;background:#b44308}body[data-brand-generator="suno"] .brand-music-player-inner{min-height:126px;padding:15px 24px}body[data-brand-generator="suno"] .brand-music-cover{width:82px;height:82px;flex-basis:82px}body[data-brand-generator="suno"] .brand-music-player-body>b{font-size:15px}body[data-brand-generator="suno"] .brand-music-controls .brand-music-play{width:44px;height:44px}
body[data-brand-generator="suno"] #chatArea{width:min(1060px,calc(100% - 32px));margin:0 auto;padding:8px 0 0;background:transparent!important;background-image:none!important}
body[data-brand-generator="suno"] #studioComposer{width:min(1060px,calc(100% - 32px));min-height:280px;margin:12px auto 26px;padding:10px;border:1px solid #d87555!important;border-radius:28px;background:rgba(49,38,41,.95)!important;box-shadow:0 18px 54px rgba(0,0,0,.25)!important}
body[data-brand-generator="suno"] #studioComposer .studio-video-panel{min-height:258px;border:0!important;border-radius:22px;background:#292427!important}body[data-brand-generator="suno"] #studioComposer .studio-prompt-column{min-height:238px;padding:18px 20px}body[data-brand-generator="suno"] #chatInput{min-height:160px;color:#f8e7df!important;font-size:15px;line-height:1.5}body[data-brand-generator="suno"] #chatInput::placeholder{color:#b99886!important}body[data-brand-generator="suno"] #studioComposer .animated-prompt-placeholder{color:#c5a18d!important}body[data-brand-generator="suno"] #studioComposer .studio-control-row{gap:9px;margin-top:auto}body[data-brand-generator="suno"] #studioComposer .studio-select-pill{min-height:42px;border-color:#bd624b!important;border-radius:999px;background:#342a2c!important;color:#dbc1b5!important}body[data-brand-generator="suno"] #studioComposer .studio-generate{min-height:42px;border-radius:999px;background:linear-gradient(135deg,#d26549,#9f7165)!important}
@media(max-width:700px){body[data-brand-generator="suno"] .brand-generator-head{min-height:235px;padding:0 10px 12px}body[data-brand-generator="suno"] .brand-generator-head-video{top:50px;width:min(330px,78vw);height:142px}.suno-brand-topline{height:50px;padding:0 9px}.suno-brand-topline>button{width:31px;height:31px;font-size:27px}.suno-brand-topline>span{height:34px;margin-left:5px;padding:0 10px}.suno-brand-topline b{font-size:11px}.suno-brand-topline img{width:20px;height:20px}body[data-brand-generator="suno"] .brand-generator-name{left:10px;bottom:10px}body[data-brand-generator="suno"] .brand-generator-name img{width:25px;height:25px}body[data-brand-generator="suno"] .brand-generator-name b{font-size:12px}body[data-brand-generator="suno"] .brand-generator-actions{right:8px;bottom:8px;gap:4px}body[data-brand-generator="suno"] .brand-generator-actions>button{height:32px!important}body[data-brand-generator="suno"] .brand-generator-avatar,body[data-brand-generator="suno"] .brand-generator-close{width:32px!important;height:32px!important}body[data-brand-generator="suno"] .brand-music-showcase{width:calc(100% - 14px);margin-top:10px}body[data-brand-generator="suno"] .brand-music-genres{justify-content:flex-start;gap:9px;padding-bottom:12px}body[data-brand-generator="suno"] .brand-music-genres button{min-width:62px;height:45px;padding:0 12px;font-size:13px}body[data-brand-generator="suno"] .brand-music-slider{height:218px}body[data-brand-generator="suno"] .brand-music-card{width:158px;height:198px;border-radius:22px}body[data-brand-generator="suno"] .brand-music-card[data-pos="-1"]{transform:translateX(-72%) scale(.82)}body[data-brand-generator="suno"] .brand-music-card[data-pos="1"]{transform:translateX(72%) scale(.82)}body[data-brand-generator="suno"] .brand-music-player{min-height:104px;border-radius:20px}body[data-brand-generator="suno"] .brand-music-player-inner{min-height:104px;padding:11px 12px;gap:10px}body[data-brand-generator="suno"] .brand-music-cover{width:60px;height:60px;flex-basis:60px}body[data-brand-generator="suno"] .brand-music-player-body>b{font-size:11px}body[data-brand-generator="suno"] #chatArea{width:calc(100% - 14px)}body[data-brand-generator="suno"] #studioComposer{width:calc(100% - 14px);min-height:235px;margin-top:9px;border-radius:23px}body[data-brand-generator="suno"] #studioComposer .studio-video-panel{min-height:213px;border-radius:18px}body[data-brand-generator="suno"] #studioComposer .studio-prompt-column{min-height:198px;padding:14px 13px}body[data-brand-generator="suno"] #chatInput{min-height:125px;font-size:13px}}

/* ProStudio Grid V2 — real canvas foundation. */
.studio-grid-workspace{height:calc(100dvh - 58px);min-height:0}.studio-grid-header{left:78px;right:78px;pointer-events:auto}.studio-grid-canvas{position:absolute!important;inset:0!important;height:auto!important;min-height:0!important;overflow:hidden!important;cursor:grab!important;touch-action:none!important;overscroll-behavior:none}.studio-grid-stage{position:absolute!important;left:0!important;top:0!important;width:1px!important;height:1px!important;padding:0!important;transform-origin:0 0!important}.studio-grid-edges{position:absolute;width:1px!important;height:1px!important;overflow:visible!important}.studio-grid-nodes{position:absolute!important;inset:0!important;display:block!important}.studio-grid-node{position:absolute!important;width:276px!important;min-height:208px!important;touch-action:none}.studio-grid-node:after{display:none!important}.studio-grid-node[data-type="task"]{border-color:rgba(107,133,255,.42)}.studio-grid-node[data-type="task"] .studio-grid-node-icon{background:rgba(98,123,255,.2);color:#b2c0ff}.studio-grid-node[data-status="RUNNING"]{border-color:#6f87ff}.studio-grid-node[data-status="COMPLETED"]{border-color:#39bd88}.studio-grid-node[data-status="FAILED"]{border-color:#e96771}.studio-grid-node[data-status="STALE"]{border-color:#dda84a}.studio-grid-node.locked:before{content:"●";position:absolute;z-index:2;right:34px;top:12px;color:#e8b75a;font-size:8px}.studio-grid-node-header{cursor:inherit}.studio-grid-node-result{overflow:hidden}.studio-grid-node-result img{width:100%;height:100%;object-fit:cover;border-radius:8px}.studio-grid-node-footer{align-items:center;gap:5px}.studio-grid-node-footer>button{padding:0 9px}.studio-grid-node-status{margin-right:auto;color:#7f8590;font-size:7px;font-weight:800;letter-spacing:.08em}.studio-grid-port{z-index:4;width:18px;height:18px;padding:0;border:3px solid #1b1c20;cursor:crosshair}.studio-grid-port.out{right:-9px}.studio-grid-port.in{left:-9px}.studio-grid-node.connecting .studio-grid-port.out{background:#6f87ff;box-shadow:0 0 0 5px rgba(111,135,255,.18)}.studio-grid-node-tools{position:absolute;z-index:10;left:14px;top:50%;display:flex;flex-direction:column;gap:4px;padding:5px;border:1px solid rgba(255,255,255,.1);border-radius:15px;background:rgba(25,26,31,.94);box-shadow:0 14px 38px rgba(0,0,0,.3);backdrop-filter:blur(16px);transform:translateY(-50%)}.studio-grid-node-tools button{width:43px;height:42px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:0;border:0;border-radius:10px;background:transparent;color:#c7cad1}.studio-grid-node-tools button:hover{background:#30323a;color:#fff}.studio-grid-node-tools i{font-size:13px;font-style:normal}.studio-grid-node-tools span{font-size:6px}.studio-grid-tools{left:auto;right:14px;bottom:14px;flex-direction:column}.studio-grid-tools span{min-width:31px}.studio-grid-context{position:fixed;z-index:150000;width:168px;display:grid;gap:3px;padding:6px;border:1px solid rgba(255,255,255,.11);border-radius:14px;background:rgba(25,26,31,.97);box-shadow:0 18px 50px rgba(0,0,0,.46);backdrop-filter:blur(18px)}.studio-grid-context[hidden]{display:none!important}.studio-grid-context button{min-height:36px;display:flex;align-items:center;gap:9px;padding:0 10px;border:0;border-radius:9px;background:transparent;color:#ecedf0;font-size:10px;text-align:left}.studio-grid-context button:hover{background:#34363e}.studio-grid-context i{width:20px;font-style:normal;text-align:center}
@media(max-width:700px){.studio-grid-workspace{position:relative;height:calc(100dvh - 58px);overflow:hidden}.studio-grid-header{position:absolute;top:8px;left:64px;right:8px;display:flex;margin:0;padding:7px 9px}.studio-grid-header>div{display:block}.studio-grid-header small{display:none}.studio-grid-header input{font-size:10px}.studio-grid-header nav{margin:0}.studio-grid-header nav button{height:27px;padding:0 7px;font-size:7px}.studio-grid-header nav button:first-child{display:none}.studio-grid-node-tools{left:7px;top:70px;transform:none}.studio-grid-node-tools button{width:42px;height:40px}.studio-grid-tools{right:7px;bottom:max(72px,env(safe-area-inset-bottom))}.studio-grid-node{width:250px!important;min-height:196px!important}.studio-grid-node textarea{height:72px}.studio-grid-port{width:24px;height:24px}.studio-grid-port.in{left:-12px}.studio-grid-port.out{right:-12px}.studio-grid-context{left:8px!important;right:8px!important;top:auto!important;bottom:max(12px,env(safe-area-inset-bottom));width:auto;padding:10px;border-radius:20px}.studio-grid-context button{min-height:44px;font-size:12px}}

/* Grid controls live in the shared Pro Studio drawer and compact side rail. */
.studio.grid-mode .studio-grid-header{display:none!important}
.studio.grid-mode .studio-grid-node{left:var(--grid-x,0px)!important;top:var(--grid-y,0px)!important}
.studio-grid-node-tools{top:50%;max-height:calc(100% - 88px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none}
.studio-grid-node-tools::-webkit-scrollbar{display:none}
.studio-grid-node-tools hr{width:28px;height:1px;flex:0 0 auto;margin:3px auto;border:0;background:rgba(255,255,255,.12)}
.studio-grid-node-tools .studio-grid-tool-primary{background:rgba(111,135,255,.16);color:#dbe2ff}
.studio-grid-node-tools button.running{background:rgba(232,91,105,.17);color:#ffadb5}
.hd-grid-project{width:100%;min-height:52px;display:flex;align-items:center;gap:10px;margin:4px 0;padding:8px 10px;border:0;border-radius:12px;background:transparent;color:inherit;text-align:left}
.hd-grid-project:hover,.hd-grid-project.active{background:rgba(255,255,255,.08)}
.hd-grid-project span{min-width:0;display:grid;gap:3px;flex:1}.hd-grid-project b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}.hd-grid-project small{color:var(--text-dim);font-size:9px}.hd-grid-project i{font-style:normal}.hd-empty{padding:20px 8px;color:var(--text-dim);font-size:11px;text-align:center}
.hd-grid-actions{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:0 0 9px;padding-bottom:9px;border-bottom:1px solid rgba(255,255,255,.07)}
.hd-grid-actions button{min-height:42px;display:flex;align-items:center;justify-content:center;gap:6px;padding:0 8px;border:1px solid rgba(255,255,255,.08);border-radius:11px;background:#17181c;color:#f3f3f3;font:600 10px/1 inherit}.hd-grid-actions i{font-style:normal;font-size:13px}
.studio-grid-drawer{position:fixed;z-index:142;top:0;bottom:0;left:0;width:84%;max-width:320px;box-sizing:border-box;display:flex;flex-direction:column;gap:12px;padding:14px 10px max(14px,env(safe-area-inset-bottom));overflow-y:auto;border-right:1px solid rgba(255,255,255,.08);background:#0b0b0d;color:#f3f3f3;transform:translateX(-100%);transition:transform .28s cubic-bezier(.2,.8,.2,1)}
.studio-grid-drawer.show{transform:translateX(0)}.studio-grid-drawer-backdrop{position:fixed;z-index:141;inset:0;pointer-events:none;background:rgba(0,0,0,.52);opacity:0;transition:opacity .25s}.studio-grid-drawer-backdrop.show{pointer-events:auto;opacity:1}
.studio-grid-drawer-head{position:sticky;top:-14px;z-index:2;height:56px;flex:0 0 56px;display:flex;align-items:center;justify-content:center;background:rgba(11,11,13,.94);backdrop-filter:blur(16px)}.studio-grid-drawer-head strong{font-size:14px}.studio-grid-drawer-head button{position:absolute;left:8px;width:36px;height:36px;border:0;background:transparent;color:#fff;font-size:26px}
.studio-grid-drawer-user{display:flex;align-items:center;gap:10px;margin:0 6px;padding:12px;border:1px solid rgba(255,255,255,.08);border-radius:14px;background:#131315}.studio-grid-drawer-avatar{width:38px;height:38px;flex:0 0 38px;display:grid;place-items:center;overflow:hidden;border-radius:12px;background:#24262b;font-size:13px;font-weight:750}.studio-grid-drawer-avatar img{width:100%;height:100%;object-fit:cover}.studio-grid-drawer-user>div:nth-child(2){min-width:0;display:grid;gap:2px;flex:1}.studio-grid-drawer-user b,.studio-grid-drawer-user span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.studio-grid-drawer-user b{font-size:12px}.studio-grid-drawer-user span{color:#85858d;font-size:9px}.studio-grid-drawer-user>strong{font-size:10px;white-space:nowrap}
.studio-grid-drawer-new{min-height:42px;display:flex;align-items:center;gap:8px;margin:0 6px;padding:0 12px;border:1px solid rgba(255,255,255,.09);border-radius:12px;background:#17181c;color:#fff;font:600 12px/1 inherit}.studio-grid-drawer-new i,.studio-grid-drawer-actions i,.studio-grid-drawer-project i{font-style:normal}.studio-grid-drawer-actions{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:0 6px}.studio-grid-drawer-actions button{min-height:42px;display:flex;align-items:center;justify-content:center;gap:5px;border:1px solid rgba(255,255,255,.08);border-radius:11px;background:#17181c;color:#fff;font:600 9px/1 inherit}
.studio-grid-drawer-list{display:flex;flex-direction:column;gap:3px;padding:4px}.studio-grid-drawer-project{width:100%;min-height:52px;display:flex;align-items:center;gap:8px;padding:8px 10px;border:0;border-radius:12px;background:transparent;color:#f3f3f3;text-align:left}.studio-grid-drawer-project.active{background:rgba(255,255,255,.08)}.studio-grid-drawer-project span{min-width:0;display:grid;gap:3px;flex:1}.studio-grid-drawer-project b,.studio-grid-drawer-project small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.studio-grid-drawer-project b{font-size:12px}.studio-grid-drawer-project small{color:#85858d;font-size:9px}
.studio-grid-node textarea[data-grid-prompt]{overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;touch-action:pan-y;cursor:text}
.studio-grid-node-header [data-grid-expand-text]{font-size:14px;color:#aeb3be}.studio-grid-node-header [data-grid-expand-text]:hover{background:rgba(255,255,255,.08);color:#fff}
.studio-grid-text-editor[hidden]{display:none!important}.studio-grid-text-editor{position:fixed;z-index:170000;inset:0;display:grid;place-items:center;padding:18px;background:rgba(0,0,0,.72);backdrop-filter:blur(12px)}.studio-grid-text-editor section{width:min(920px,100%);height:min(760px,calc(100dvh - 36px));display:grid;grid-template-rows:auto minmax(0,1fr) auto;overflow:hidden;border:1px solid rgba(255,255,255,.11);border-radius:22px;background:#15161a;color:#f4f5f7;box-shadow:0 30px 90px rgba(0,0,0,.55)}.studio-grid-text-editor header{min-height:64px;display:flex;align-items:center;gap:12px;padding:0 18px;border-bottom:1px solid rgba(255,255,255,.08)}.studio-grid-text-editor header>div{min-width:0;display:grid;gap:3px;flex:1}.studio-grid-text-editor header small{color:#777d88;font-size:8px;font-weight:800;letter-spacing:1.3px}.studio-grid-text-editor header strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:15px}.studio-grid-text-editor header button{width:38px;height:38px;border:0;border-radius:50%;background:#23252b;color:#fff;font-size:24px}.studio-grid-text-editor textarea{width:100%;height:100%;box-sizing:border-box;resize:none;padding:22px;border:0;outline:0;overflow-y:auto;background:#111216;color:#f4f5f7;font:500 15px/1.65 inherit;overscroll-behavior:contain}.studio-grid-text-editor footer{min-height:66px;display:flex;align-items:center;justify-content:flex-end;gap:8px;padding:0 18px;border-top:1px solid rgba(255,255,255,.08)}.studio-grid-text-editor footer button{height:38px;padding:0 17px;border:1px solid rgba(255,255,255,.1);border-radius:11px;background:#23252b;color:#fff;font:700 11px/1 inherit}.studio-grid-text-editor footer button.primary{border-color:#fff;background:#fff;color:#101116}.studio-grid-editor-open{overflow:hidden!important}
@media(max-width:700px){.studio-grid-text-editor{padding:0}.studio-grid-text-editor section{width:100%;height:100dvh;border:0;border-radius:0}.studio-grid-text-editor header{padding-top:env(safe-area-inset-top)}.studio-grid-text-editor textarea{padding:18px 15px;font-size:14px}.studio-grid-text-editor footer{padding-bottom:env(safe-area-inset-bottom)}}
.studio-grid-node-settings select,.studio-grid-node-settings input,.studio-grid-toggle{border:1px solid rgba(255,255,255,.075)!important;background:#232428!important;background-image:none!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;color:#e7e8eb!important;text-shadow:none!important}.studio-grid-node-settings select{appearance:auto}.studio-grid-node-settings select:focus{border-color:rgba(255,255,255,.18)!important;outline:none}.studio-grid-toggle{min-height:27px;display:flex;align-items:center;gap:5px;padding:0 8px;border-radius:8px;font:600 8px/1 inherit;white-space:nowrap}.studio-grid-toggle input{width:13px;height:13px;margin:0;accent-color:#777f91}
.studio-grid-attachments{display:flex;gap:5px;overflow-x:auto;scrollbar-width:none}.studio-grid-attachments::-webkit-scrollbar{display:none}.studio-grid-attachments>button{height:34px;min-width:72px;display:flex;align-items:center;justify-content:center;gap:4px;padding:0 8px;border:1px dashed rgba(255,255,255,.14);border-radius:9px;background:#202125;color:#c9ccd2;font:600 8px/1 inherit}.studio-grid-attachments>button i{font-style:normal;font-size:13px}.studio-grid-attachment{position:relative;height:34px;min-width:92px;max-width:128px;display:flex;align-items:center;gap:5px;padding:3px 23px 3px 4px;border:1px solid rgba(255,255,255,.07);border-radius:9px;background:#202125}.studio-grid-attachment img,.studio-grid-attachment>i{width:27px;height:27px;flex:0 0 27px;border-radius:6px;object-fit:cover;background:#2b2c31}.studio-grid-attachment>i{display:grid;place-items:center;font-style:normal}.studio-grid-attachment span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:7px}.studio-grid-attachment button{position:absolute;right:3px;top:7px;width:19px;height:19px;border:0;border-radius:50%;background:#303137;color:#ddd;font-size:12px}
@media(max-width:700px){
  .studio-grid-node-tools{top:8px;bottom:auto;max-height:calc(100dvh - 92px);transform:none}
  .studio-grid-tools button:nth-of-type(n+3){display:grid!important}
  .studio-grid-tools span{display:block!important}
}

/* Grid Phase 2 — executable node controls and compact persisted results. */
.studio-grid-edges{pointer-events:auto!important}.studio-grid-edges g{cursor:pointer}.studio-grid-edges g:hover path{stroke:#ff7d89;stroke-width:4}.studio-grid-node{min-height:272px!important}.studio-grid-node-body{gap:7px}.studio-grid-node-settings{display:flex;gap:5px;overflow-x:auto;scrollbar-width:none}.studio-grid-node-settings::-webkit-scrollbar{display:none}.studio-grid-node-settings select,.studio-grid-node-settings input{height:27px;min-width:72px;max-width:122px;padding:0 8px;border:1px solid rgba(255,255,255,.1);border-radius:8px;background:#24262c;color:#dfe2e9;font:600 8px/1 inherit;outline:0}.studio-grid-node-settings select:first-child{min-width:126px;max-width:146px}.studio-grid-node-result{min-height:74px}.studio-grid-text-output{width:100%;height:70px!important;min-height:70px;padding:8px;border:0!important;border-radius:7px;background:#1a1b20!important;color:#e9ebf0!important;font-size:9px!important;line-height:1.45;resize:none}.studio-grid-result-list{width:100%;display:grid;grid-template-columns:repeat(4,1fr);gap:4px}.studio-grid-result-list button{height:55px;padding:0;overflow:hidden;border:1px solid transparent;border-radius:7px;background:#15161a}.studio-grid-result-list button.active{border-color:#6f87ff;box-shadow:0 0 0 2px rgba(111,135,255,.2)}.studio-grid-result-list img,.studio-grid-media-preview video{width:100%;height:100%;object-fit:cover}.studio-grid-media-preview{position:relative;width:100%;height:74px;padding:0;overflow:hidden;border:0;border-radius:8px;background:#111}.studio-grid-media-preview span{position:absolute;left:50%;top:50%;width:28px;height:28px;display:grid;place-items:center;border-radius:50%;background:rgba(0,0,0,.65);color:#fff;transform:translate(-50%,-50%)}.studio-grid-audio{width:100%;height:34px}.studio-grid-node-cost{white-space:nowrap;color:#e9bf62;font-size:8px;font-weight:800}.studio-grid-node[data-status="RUNNING"] .studio-grid-node-status{color:#8da0ff}.studio-grid-node[data-status="FAILED"] .studio-grid-node-status{color:#ff8991}.studio-grid-node[data-status="COMPLETED"] .studio-grid-node-status{color:#66d9a8}.studio-grid-header #studioGridRunWorkflow.running{border-color:#dd6874;color:#ff9ca5}
@media(max-width:700px){.studio-grid-node{min-height:258px!important}.studio-grid-node-settings select,.studio-grid-node-settings input{height:30px;font-size:9px}.studio-grid-node textarea[data-grid-prompt]{height:60px}.studio-grid-node-result{min-height:66px}}

/* Grid directional ports and connection guidance. */
.studio-grid-port.side-left{left:-9px!important;right:auto!important;transform:translateY(-50%)}
.studio-grid-port.side-right{left:auto!important;right:-9px!important;top:50%!important;transform:translateY(-50%)}
.studio-grid-port.side-top{top:-9px!important;bottom:auto!important;transform:translateX(-50%)}
.studio-grid-port.side-bottom{left:50%!important;right:auto!important;top:auto!important;bottom:-9px!important;transform:translateX(-50%)}
.studio-grid-port.connection-source,.studio-grid-port.connection-compatible{border-color:#182044;background:#6280ff;box-shadow:0 0 0 5px rgba(98,128,255,.2),0 0 18px rgba(98,128,255,.62)}
.studio-grid-port.connection-compatible{animation:studioGridPortPulse 1.15s ease-in-out infinite}
.studio-grid-port.connection-incompatible{opacity:.2}
.studio-grid-clarification{width:100%;color:#dce3ff;font-size:9px;line-height:1.4}
.studio-grid-clarification:before{content:"Уточнение";display:block;margin-bottom:3px;color:#8098ff;font-size:7px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
@keyframes studioGridPortPulse{50%{box-shadow:0 0 0 8px rgba(98,128,255,.08),0 0 22px rgba(98,128,255,.72)}}
@media(max-width:700px){.studio-grid-node{width:276px!important;min-height:272px!important}.studio-grid-port.side-left{left:-12px!important}.studio-grid-port.side-right{right:-12px!important}.studio-grid-port.side-top{top:-12px!important}.studio-grid-port.side-bottom{bottom:-12px!important}}
.studio-grid-input-summary{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none}.studio-grid-input-summary span{height:24px;display:flex;align-items:center;gap:5px;flex:0 0 auto;padding:0 7px;border-radius:7px;background:rgba(104,130,255,.12);color:#aebcff;font-size:7px;font-weight:700}.studio-grid-input-summary img{width:18px;height:18px;border-radius:5px;object-fit:cover}
.studio-grid-projects{position:absolute;z-index:20;top:66px;right:16px;width:min(330px,calc(100% - 32px));max-height:min(520px,70dvh);overflow:hidden;border:1px solid rgba(255,255,255,.12);border-radius:17px;background:rgba(24,25,30,.98);box-shadow:0 22px 60px rgba(0,0,0,.48);backdrop-filter:blur(20px)}.studio-grid-projects[hidden]{display:none!important}.studio-grid-projects>header{height:48px;display:flex;align-items:center;justify-content:space-between;padding:0 12px;border-bottom:1px solid rgba(255,255,255,.08)}.studio-grid-projects>header b{font-size:11px}.studio-grid-projects>header button{width:30px;height:30px;border:0;border-radius:50%;background:#30323a;color:#fff;font-size:20px}.studio-grid-projects>div{display:grid;gap:5px;max-height:calc(min(520px,70dvh) - 48px);overflow-y:auto;padding:7px}.studio-grid-projects>div>p{padding:24px;color:#858b98;font-size:10px;text-align:center}.studio-grid-project{min-height:52px;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 11px;border:1px solid transparent;border-radius:11px;background:#202127;color:#f2f3f6;text-align:left}.studio-grid-project.active{border-color:#657eff;background:rgba(82,105,229,.16)}.studio-grid-project span{min-width:0}.studio-grid-project b,.studio-grid-project small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.studio-grid-project b{font-size:10px}.studio-grid-project small{margin-top:4px;color:#858b98;font-size:7px}.studio-grid-project i{color:#889aff;font-size:18px;font-style:normal}@media(max-width:700px){.studio-grid-projects{top:58px;right:0;left:auto;width:calc(100vw - 16px);max-height:65dvh}.studio-grid-header nav button{padding:0 6px!important}.studio-grid-header nav{gap:3px!important}}

/* =====================================================
CSS-БЛОК: Pro Studio theme overrides — Voice mode, Visual Picker/Create,
Music duration wheel, resource-delete confirm.
These components were previously hardcoded to the dark palette regardless
of the active Pro Studio theme. Companion override rules below (same
pattern as .voice-workspace-tile / .vgen-btn above) make every surface,
border and text color follow --st-* so White/Gray/Black all apply
consistently across the full Voice ecosystem and shared pickers.
===================================================== */
.view[data-view="tools"].active .vgen-upload-row{background:var(--st-bg-3);color:var(--st-text);box-shadow:var(--st-depth-1)}
.view[data-view="tools"].active .vgen-upload-row.active{border-color:var(--st-line-2)}
.view[data-view="tools"].active .voice-list-button-avatar{background:var(--st-bg-4);color:var(--st-text);border:1px solid var(--st-border)}
.view[data-view="tools"].active .vgen-uico{background:var(--st-bg-4);border-color:var(--st-bg-3);color:var(--st-text)}
.view[data-view="tools"].active .voice-workspace-tile.active,
.view[data-view="tools"].active .voice-workspace-upload.active{border-color:var(--st-border-strong);background:var(--st-bg-4)}
.view[data-view="tools"].active .voice-workspace-upload i{background:var(--st-bg-4);color:var(--st-text)}

.view[data-view="tools"].active .voice-workspace-sheet{background:var(--st-bg-2);border:1px solid var(--st-border);box-shadow:var(--st-depth-2);color:var(--st-text)}
.view[data-view="tools"].active .voice-sheet-title{color:var(--st-text)}
.view[data-view="tools"].active .voice-list-row{background:var(--st-bg-3)}
.view[data-view="tools"].active .voice-list-row button{color:var(--st-text)}
.view[data-view="tools"].active .voice-list-row .voice-list-play{color:var(--st-text)}

.view[data-view="tools"].active .voice-style-row{background:var(--st-bg-3);border:1px solid var(--st-border);color:var(--st-text)}
.view[data-view="tools"].active .voice-style-row.selected{border-color:var(--st-border-strong);background:var(--st-bg-4)}
.view[data-view="tools"].active .voice-style-row-avatar{background:var(--st-bg-4);color:var(--st-text)}
.view[data-view="tools"].active .voice-style-row-copy small{color:var(--st-mute)}
.view[data-view="tools"].active .voice-style-row-check{color:var(--st-text)}
.view[data-view="tools"].active .voice-style-row-play{background:var(--st-bg-4);color:var(--st-text)}
.view[data-view="tools"].active .voice-preview-loading-dot{background:var(--st-text)}
.view[data-view="tools"].active .voice-style-group-title{color:var(--st-mute)}

.view[data-view="tools"].active .voice-tool-panel.voice-list-open .voice-style-panel-card,
.view[data-view="tools"].active .voice-tool-panel.voice-create-open .voice-create-sheet,
.view[data-view="tools"].active .voice-tool-panel.voice-upload-open .voice-upload-sheet{
  background:var(--st-bg-2);border:1px solid var(--st-border);box-shadow:var(--st-depth-2);
}
.view[data-view="tools"].active .voice-tool-panel.voice-upload-open .voice-upload-head,
.view[data-view="tools"].active .voice-tool-panel.voice-create-open .voice-create-head{border-bottom:1px solid var(--st-line)}
.view[data-view="tools"].active .voice-tool-panel.voice-upload-open .voice-upload-head h3,
.view[data-view="tools"].active .voice-tool-panel.voice-create-open .voice-create-head h3{color:var(--st-text)}
.view[data-view="tools"].active .voice-create-head p,
.view[data-view="tools"].active .voice-upload-sheet p{color:var(--st-mute)}

.view[data-view="tools"].active .voice-clone-field,
.view[data-view="tools"].active .voice-select-btn,
.view[data-view="tools"].active .voice-param-number{background:var(--st-bg-3);border:1px solid var(--st-border);color:var(--st-text)}
.view[data-view="tools"].active .voice-clone-field:focus,
.view[data-view="tools"].active .voice-select.open .voice-select-btn,
.view[data-view="tools"].active .voice-param-number:focus{border-color:var(--st-accent);background:var(--st-bg-4);box-shadow:0 0 0 3px var(--st-accent-bg)}
.view[data-view="tools"].active .voice-select-btn span{color:var(--st-mute)}
.view[data-view="tools"].active .voice-select-btn b{color:var(--st-text)}
.view[data-view="tools"].active .voice-select-btn i{color:var(--st-dim)}
.view[data-view="tools"].active .voice-select-menu{background:var(--st-bg-3);border:1px solid var(--st-border);box-shadow:var(--st-depth-2)}
.view[data-view="tools"].active .voice-select-menu button{color:var(--st-dim)}
.view[data-view="tools"].active .voice-select-menu button.active,
.view[data-view="tools"].active .voice-select-menu button:hover{background:var(--st-accent-bg);color:var(--st-text)}

.view[data-view="tools"].active .voice-clone-avatar-picker{background:var(--st-bg-3);border:1px solid var(--st-border);color:var(--st-text)}
.view[data-view="tools"].active .voice-clone-avatar-picker span{background:var(--st-accent-bg);color:var(--st-accent)}
.view[data-view="tools"].active .voice-clone-avatar-picker.has-avatar{background:var(--st-bg-4)}
.view[data-view="tools"].active .voice-create-recorder{border:1px solid var(--st-border)}
.view[data-view="tools"].active .voice-speech-settings label{color:var(--st-text)}
.view[data-view="tools"].active .voice-speech-settings em{border:1px solid var(--st-border);color:var(--st-text)}
.view[data-view="tools"].active .voice-preview-placeholder{background:var(--st-bg-3);color:var(--st-dim)}

.view[data-view="tools"].active .voice-upload-purpose-btn span{color:var(--st-text)}
.view[data-view="tools"].active .voice-upload-purpose-btn small{color:var(--st-mute)}
.view[data-view="tools"].active .voice-upload-select-btn{background:var(--st-bg-3);border:1px solid var(--st-border);color:var(--st-text)}
.view[data-view="tools"].active .voice-upload-select-btn span{color:var(--st-mute)}
.view[data-view="tools"].active .voice-upload-select-btn b{color:var(--st-text)}
.view[data-view="tools"].active .voice-upload-select-btn i{color:var(--st-dim)}
.view[data-view="tools"].active .voice-upload-select-wrap.open .voice-upload-select-btn{border-color:var(--st-accent);background:var(--st-bg-4);box-shadow:0 0 0 3px var(--st-accent-bg)}
.view[data-view="tools"].active .voice-upload-select-menu{background:var(--st-bg-3);border:1px solid var(--st-border);box-shadow:var(--st-depth-2)}
.view[data-view="tools"].active .voice-upload-select-menu button{color:var(--st-dim)}
.view[data-view="tools"].active .voice-upload-select-menu button small{color:var(--st-mute)}
.view[data-view="tools"].active .voice-upload-select-menu button.active,
.view[data-view="tools"].active .voice-upload-select-menu button:hover{background:var(--st-accent-bg);color:var(--st-text)}

.view[data-view="tools"].active .voice-upload-controls-modern{background:var(--st-bg-2);border:1px solid var(--st-border)}
.view[data-view="tools"].active .voice-upload-chip,
.view[data-view="tools"].active .voice-upload-speaker-btn{background:var(--st-bg-3);border:1px solid var(--st-border);color:var(--st-text)}
.view[data-view="tools"].active .voice-upload-chip span,
.view[data-view="tools"].active .voice-upload-speaker-btn span{color:var(--st-mute)}
.view[data-view="tools"].active .voice-upload-chip b,
.view[data-view="tools"].active .voice-upload-speaker-btn b{color:var(--st-text)}

.view[data-view="tools"].active .voice-speaker-composer{color:var(--st-mute)}
.view[data-view="tools"].active .voice-speaker-composer button{border:1px solid var(--st-border);background:var(--st-bg-3);color:var(--st-text)}
.view[data-view="tools"].active .voice-speaker-composer button:active{background:var(--st-bg-4)}
.view[data-view="tools"].active .voice-speaker-composer .voice-speaker-chip.active{border-color:var(--st-accent);background:var(--st-accent-bg);color:var(--st-text)}

.view[data-view="tools"].active .voice-upload-drop{background:var(--st-bg-2);border:1px dashed var(--st-border-strong);color:var(--st-text)}
.view[data-view="tools"].active .voice-upload-drop span{background:var(--st-bg-3);border:1px solid var(--st-border);color:var(--st-text)}
.view[data-view="tools"].active .voice-upload-drop b{color:var(--st-text)}
.view[data-view="tools"].active .voice-upload-drop small{color:var(--st-mute)}
.view[data-view="tools"].active .voice-upload-preview{background:var(--st-bg-3);border:1px solid var(--st-border)}
.view[data-view="tools"].active .voice-upload-preview video{background:var(--st-bg)}
.view[data-view="tools"].active .voice-upload-audio-box>span{background:var(--st-bg-4);color:var(--st-text)}
.view[data-view="tools"].active .voice-upload-preview-meta b{color:var(--st-text)}
.view[data-view="tools"].active .voice-upload-preview-meta small{color:var(--st-mute)}
.view[data-view="tools"].active .voice-upload-preview.loading b{color:var(--st-text)}
.view[data-view="tools"].active .voice-upload-preview.loading small{color:var(--st-mute)}
.view[data-view="tools"].active .voice-upload-note{background:var(--st-bg-2);border:1px solid var(--st-border);color:var(--st-dim)}
.view[data-view="tools"].active .voice-upload-note b{color:var(--st-text)}
.view[data-view="tools"].active .voice-upload-note small{color:var(--st-mute)}
.view[data-view="tools"].active .voice-upload-primary{background:var(--st-invert-bg);color:var(--st-invert-text);box-shadow:none}

.view[data-view="tools"].active .voice-tool-card{background:var(--st-bg-2);border:1px solid var(--st-border)}
.view[data-view="tools"].active .voice-tool-copy b{color:var(--st-text)}
.view[data-view="tools"].active .voice-tool-copy span{color:var(--st-mute)}
.view[data-view="tools"].active .voice-tool-file,
.view[data-view="tools"].active .voice-tool-empty{background:var(--st-bg-3);color:var(--st-text)}
.view[data-view="tools"].active .voice-tool-empty{color:var(--st-mute)}
.view[data-view="tools"].active .voice-tool-actions button{background:var(--st-bg-3);color:var(--st-text)}
.view[data-view="tools"].active .voice-tool-actions button:first-child{background:var(--st-accent);color:var(--st-accent-text)}
.view[data-view="tools"].active .voice-tool-input{background:var(--st-bg-2);border:1px solid var(--st-border);color:var(--st-text)}

.view[data-view="tools"].active .voice-tool-panel.voice-create-open .voice-create-recorder{background:var(--st-bg-2);border:1px solid var(--st-border)}
.view[data-view="tools"].active .voice-upload-round{background:var(--st-bg-4)!important}
.view[data-view="tools"].active .voice-record-live{color:var(--st-text)}
.view[data-view="tools"].active .voice-audio-file-card b{color:var(--st-text)}
.view[data-view="tools"].active .voice-audio-file-card small{color:var(--st-mute)}
.view[data-view="tools"].active .voice-file-icon{background:var(--st-accent-bg);color:var(--st-accent)}
.view[data-view="tools"].active .voice-trash-btn{background:var(--st-bg-3)!important;color:var(--st-text)!important}
.view[data-view="tools"].active .voice-tool-panel.voice-create-open .voice-speech-settings,
.view[data-view="tools"].active .voice-tool-panel.voice-create-open .voice-preview-block{background:var(--st-bg-2);border:1px solid var(--st-border)}
.view[data-view="tools"].active .voice-tool-panel.voice-create-open .voice-speech-settings b,
.view[data-view="tools"].active .voice-tool-panel.voice-create-open .voice-preview-block b{color:var(--st-text)}
.view[data-view="tools"].active .voice-param-row{color:var(--st-text)}

.view[data-view="tools"].active .voice-quick-actions button,
.view[data-view="tools"].active .voice-editor-toolbar button,
.view[data-view="tools"].active .voice-tools-toggle{background:var(--st-bg-3);color:var(--st-dim);border:1px solid var(--st-border)}
.view[data-view="tools"].active .voice-quick-actions button:hover,
.view[data-view="tools"].active .voice-editor-toolbar button:hover,
.view[data-view="tools"].active .voice-quick-actions button.active,
.view[data-view="tools"].active .voice-tools-toggle[aria-expanded="true"]{color:var(--st-text);border-color:var(--st-accent);background:var(--st-accent-bg)}
.view[data-view="tools"].active .studio-voice-full>.voice-horizontal-tools{border:1px solid var(--st-border);background:var(--st-bg-2)}

.voice-tool-guide{background:var(--st-bg-3);color:var(--st-text);border:1px solid var(--st-accent);box-shadow:var(--st-depth-2)}
.voice-tool-guide-icon{background:var(--st-accent);color:var(--st-accent-text)}
.voice-tool-guide>span:last-child{color:var(--st-mute)}
.view[data-view="tools"].active .voice-editor-toolbar button.voice-tool-guide-active{border-color:var(--st-accent)!important;background:var(--st-accent-bg)!important;color:var(--st-text)!important}

.view[data-view="tools"].active .voice-addon-drawer{background:var(--st-bg-2);color:var(--st-text);border:1px solid var(--st-border)}
.view[data-view="tools"].active .voice-addon-drawer.voice-addon-modal{background:var(--st-bg-2)!important}
.view[data-view="tools"].active .voice-addon-head b{color:var(--st-text)}
.view[data-view="tools"].active .voice-addon-head button{color:var(--st-mute)}
.view[data-view="tools"].active .voice-addon-options button,
.view[data-view="tools"].active .voice-addon-primary{background:var(--st-bg-3);color:var(--st-dim);border:1px solid var(--st-border)}
.view[data-view="tools"].active .voice-addon-options button:hover,
.view[data-view="tools"].active .voice-addon-options button.active,
.view[data-view="tools"].active .voice-addon-primary{border-color:var(--st-accent);background:var(--st-accent-bg);color:var(--st-text)}

.view[data-view="tools"].active .voice-inline-option-strip b{color:var(--st-text)}
.view[data-view="tools"].active .voice-inline-option-strip button,
.view[data-view="tools"].active .voice-inline-option-strip .voice-inline-add{color:var(--st-mute)}
.view[data-view="tools"].active .voice-inline-option-strip button:hover{color:var(--st-text)}

.view[data-view="tools"].active .voice-dialogue-row{border:1px solid var(--st-border);background:var(--st-bg-2)}
.view[data-view="tools"].active .voice-dialogue-row>b,
.view[data-view="tools"].active .voice-dialogue-row-title{color:var(--st-text)}
.view[data-view="tools"].active .voice-dialogue-row-title>button,
.view[data-view="tools"].active .voice-dialogue-add-speaker{background:var(--st-bg-4);color:var(--st-text)}
.view[data-view="tools"].active .voice-dialogue-option{color:var(--st-mute)}
.view[data-view="tools"].active .voice-dialogue-option:hover{color:var(--st-text)}
.view[data-view="tools"].active .voice-speaker-card{background:var(--st-bg-3)}
.view[data-view="tools"].active .voice-speaker-card>.voice-speaker-replace{border-left:1px solid var(--st-border);background:var(--st-bg-2);color:var(--st-dim)}
.view[data-view="tools"].active .voice-speaker-card>.voice-speaker-remove{background:var(--st-bg-4);color:var(--st-mute)}

.view[data-view="tools"].active .voice-custom-option-form input,
.view[data-view="tools"].active .voice-addon-field{background:var(--st-bg-2);border:1px solid var(--st-border);color:var(--st-text)}
.view[data-view="tools"].active .voice-addon-setting{color:var(--st-mute)}
.view[data-view="tools"].active .voice-addon-setting output{color:var(--st-dim)}

.view[data-view="tools"].active .voice-template-strip button{background:var(--st-bg-3);color:var(--st-mute);border:1px solid var(--st-border)}
.view[data-view="tools"].active .voice-template-strip button.active{color:var(--st-accent-text);border-color:var(--st-accent);background:var(--st-accent)}
.view[data-view="tools"].active .voice-editor-toolbar{border:1px solid var(--st-border);background:var(--st-bg-2)}
.view[data-view="tools"].active .voice-tools-block-title{color:var(--st-text)}
.view[data-view="tools"].active .voice-tool-separator{background:var(--st-line-2)}
.view[data-view="tools"].active .studio-video-composer[data-composer-mode="voice"] .voice-text-estimate{color:var(--st-mute)}

.view[data-view="tools"].active .voice-translation-swap,
.view[data-view="tools"].active .voice-translation-actions button{background:var(--st-bg-3);border:1px solid var(--st-border);color:var(--st-dim)}
.view[data-view="tools"].active .voice-translation-grid select.voice-addon-field{background-color:var(--st-bg-2);color:var(--st-text);border-color:var(--st-border)}
.view[data-view="tools"].active .voice-translation-result{background:var(--st-bg-2);color:var(--st-dim);border:1px solid var(--st-border)}

.view[data-view="tools"].active .voice-speaker-avatar{background:var(--st-bg-4);color:var(--st-text)}
.view[data-view="tools"].active .voice-speaker-copy b{color:var(--st-dim)}
.view[data-view="tools"].active .voice-speaker-copy small{color:var(--st-mute)}
.view[data-view="tools"].active .voice-speaker-remove,
.view[data-view="tools"].active .voice-speaker-replace{color:var(--st-mute)}
.view[data-view="tools"].active .voice-speaker-replace:hover,
.view[data-view="tools"].active .voice-speaker-replace:focus-visible{color:var(--st-text);background:var(--st-accent-bg)}
.view[data-view="tools"].active .voice-dialogue-row .voice-speaker-chip{background:var(--st-bg-3);color:var(--st-dim)}
.view[data-view="tools"].active .voice-dialogue-row .voice-speaker-chip.active{background:var(--st-accent-bg);color:var(--st-text)}

.voice-caret-menu{background:var(--st-bg-2);border:1px solid var(--st-border);box-shadow:var(--st-depth-2);color:var(--st-dim)}
.voice-caret-menu hr{background:var(--st-line)}
.voice-caret-menu-item>button{color:var(--st-dim)}
.voice-caret-menu-item>button:hover,
.voice-caret-menu-item:focus-within>button{background:var(--st-accent-bg);color:var(--st-text)}
.voice-caret-menu-item>button i{color:var(--st-mute)}
.view[data-view="tools"].active .voice-caret-submenu{background:var(--st-bg-3);border:1px solid var(--st-border);box-shadow:var(--st-depth-2)}
.view[data-view="tools"].active .voice-caret-submenu>button,
.view[data-view="tools"].active .voice-dialogue-sheet-items>button{color:var(--st-dim)}
.view[data-view="tools"].active .voice-caret-submenu>button:hover,
.view[data-view="tools"].active .voice-dialogue-sheet-items>button:hover{background:var(--st-accent-bg);color:var(--st-text)}

.view[data-view="tools"].active .voice-dialogue-marker{background:var(--st-bg-3);border:1px solid var(--st-border);color:var(--st-text)}
.view[data-view="tools"].active .voice-dialogue-marker b{color:var(--st-dim)}
.view[data-view="tools"].active .voice-dialogue-marker small{color:var(--st-mute)}
.voice-dialogue-mobile-toolbar{background:var(--st-bg-2);border:1px solid var(--st-border)}
.voice-dialogue-mobile-toolbar>button{background:var(--st-bg-3);color:var(--st-dim)}
.voice-dialogue-sheet-card{background:var(--st-bg-2);border:1px solid var(--st-border);box-shadow:var(--st-depth-2)}
.voice-dialogue-sheet-card header button{background:var(--st-bg-3);color:var(--st-mute)}

.view[data-view="tools"].active .mobile-keyboard-close{background:var(--st-bg-3);border:1px solid var(--st-border);color:var(--st-dim)}
.view[data-view="tools"].active .studio-prompt-column.voice-editor-fullscreen,
.view[data-view="tools"].active .voice-translation-fullscreen{background:var(--st-bg)!important}

.view[data-view="tools"].active .voice-wave-player button{background:var(--st-accent);color:var(--st-accent-text)}
.view[data-view="tools"].active .voice-waveform span{background:linear-gradient(180deg,var(--st-accent-2),var(--st-accent))}
.view[data-view="tools"].active .voice-wave-player time{color:var(--st-mute)}
.view[data-view="tools"].active .voice-create-footer{background:linear-gradient(180deg,transparent,var(--st-bg-2) 35%)}
.view[data-view="tools"].active .voice-create-submit{background:var(--st-invert-bg);color:var(--st-invert-text);box-shadow:none}

.music-duration-wheel-pop{background:var(--st-bg-2)!important;border:1px solid var(--st-border)!important;box-shadow:var(--st-depth-2)!important}
.music-duration-head{color:var(--st-text)}
.music-duration-head span{background:var(--st-accent-bg);color:var(--st-accent)}
.music-duration-wheel-labels{color:var(--st-mute)}
.music-duration-wheels::after{border-color:var(--st-line)}
.music-duration-wheel button{color:var(--st-mute)}
.music-duration-wheel button.active{color:var(--st-text)}
.music-duration-hint{color:var(--st-mute)}
.music-duration-save{background:var(--st-invert-bg);color:var(--st-invert-text)}

.view[data-view="tools"].active .studio-video-panel{background:var(--st-bg-2);border:1px solid var(--st-border);box-shadow:var(--st-depth-2)}
.view[data-view="tools"].active .image-setting-disabled span:last-child{color:var(--st-mute)}

.visual-create-modal{color:var(--st-text)}
.visual-create-card{background:var(--st-bg-2);border:1px solid var(--st-border);box-shadow:var(--st-depth-2)}
.visual-create-head button{background:var(--st-bg-3);color:var(--st-text)}
.visual-field{color:var(--st-mute)}
.visual-field input,
.visual-field select,
.visual-field textarea{background:var(--st-bg-3);border:1px solid var(--st-border);color:var(--st-text)}
.visual-field input:focus,
.visual-field select:focus,
.visual-field textarea:focus{border-color:var(--st-accent);box-shadow:0 0 0 3px var(--st-accent-bg)}
.visual-photo-slot{background:var(--st-bg-3);border:1px dashed var(--st-border-strong);color:var(--st-dim)}
.visual-create-hint{color:var(--st-mute)}
.visual-create-loading{background:var(--st-bg-3);border:1px solid var(--st-border);box-shadow:var(--st-depth-2);color:var(--st-text)}
.visual-create-loading small{color:var(--st-mute)}
.visual-create-save{background:var(--st-invert-bg);color:var(--st-invert-text);box-shadow:none}
.visual-picker-new{background:var(--st-bg-3);border:1px solid var(--st-border);color:var(--st-text)}
.visual-picker-card{color:var(--st-text)}
.visual-picker-thumb{background:var(--st-bg-3)}
.visual-picker-check{background:var(--st-invert-bg);color:var(--st-invert-text)}
.visual-picker-card.selected .visual-picker-thumb{border-color:var(--st-accent);box-shadow:0 0 0 2px var(--st-accent-bg)}

.resource-delete-confirm-card{background:var(--st-bg-2);border:1px solid var(--st-border);box-shadow:var(--st-depth-2)}
.resource-delete-confirm-title{color:var(--st-text)}
.resource-delete-confirm-text{color:var(--st-dim)}
.resource-delete-cancel{background:var(--st-bg-3);border:1px solid var(--st-border);color:var(--st-text)}
.resource-delete-action{background:var(--st-accent);color:var(--st-accent-text)}

/* Grid Mode: project drawer + project switcher panel (desktop-only canvas). */
.view[data-view="tools"].active .studio-grid-drawer{background:var(--st-bg-2)!important;color:var(--st-text)!important;border-right:1px solid var(--st-border)}
.view[data-view="tools"].active .studio-grid-drawer-head{background:color-mix(in srgb, var(--st-bg-2) 94%, transparent)!important}
.view[data-view="tools"].active .studio-grid-drawer-head button{color:var(--st-text)}
.view[data-view="tools"].active .studio-grid-drawer-user{border:1px solid var(--st-border);background:var(--st-bg-3)!important}
.view[data-view="tools"].active .studio-grid-drawer-avatar{background:var(--st-bg-4)!important;color:var(--st-text)}
.view[data-view="tools"].active .studio-grid-drawer-user span{color:var(--st-mute)}
.view[data-view="tools"].active .studio-grid-drawer-new,
.view[data-view="tools"].active .studio-grid-drawer-actions button{border:1px solid var(--st-border);background:var(--st-bg-3)!important;color:var(--st-text)!important}
.view[data-view="tools"].active .studio-grid-drawer-project{color:var(--st-text)!important}
.view[data-view="tools"].active .studio-grid-drawer-project.active{background:var(--st-accent-bg)!important}
.view[data-view="tools"].active .studio-grid-drawer-project small{color:var(--st-mute)}
.view[data-view="tools"].active .studio-grid-projects{background:var(--st-bg-2)!important;border:1px solid var(--st-border)!important;box-shadow:var(--st-depth-2)!important}
.view[data-view="tools"].active .studio-grid-projects>header{border-bottom:1px solid var(--st-line)}
.view[data-view="tools"].active .studio-grid-projects>header button{background:var(--st-bg-3)!important;color:var(--st-text)!important}
.view[data-view="tools"].active .studio-grid-projects>div>p{color:var(--st-mute)}
.view[data-view="tools"].active .studio-grid-project{background:var(--st-bg-3)!important;color:var(--st-text)!important}
.view[data-view="tools"].active .studio-grid-project.active{border-color:var(--st-accent)!important;background:var(--st-accent-bg)!important}
.view[data-view="tools"].active .studio-grid-project small{color:var(--st-mute)!important}
.view[data-view="tools"].active .studio-grid-project i{color:var(--st-accent)!important}

/* Upload history panel: centered "choose photo" button + preview overlay. */
.upload-photo-center-btn{border-color:var(--st-border-strong)!important;background:var(--st-bg-3)!important;color:var(--st-text)!important}
.upload-photo-center-icon{background:var(--st-bg-4)!important;color:var(--st-text)!important}
.upload-photo-center-sub{color:var(--st-mute)!important}
.upload-panel-generated{border-bottom:1px solid var(--st-line)!important}

/* =====================================================
CSS-БЛОК: Grid Mode canvas — full theme coverage
Nodes, ports, edges, canvas dot-grid, node-tool rail, zoom rail, context
menu, fullscreen text editor, node settings/attachments and result strip
were all hardcoded to one dark palette regardless of the active Pro
Studio theme. Bring every structural surface, border and neutral text
color onto --st-* so White/Gray/Black apply consistently through the
whole Grid ecosystem. Status/semantic colors (running/completed/failed/
stale state, per-type node icon colors, cost readout, locked indicator,
delete-edge hover) are left as intentional, theme-independent semantic
color, same policy already applied to badges and danger states elsewhere
in Pro Studio. Layout, sizing and interaction logic are untouched.
===================================================== */
.view[data-view="tools"].active .studio-grid-workspace{background:var(--st-bg)!important;color:var(--st-text)!important}
.view[data-view="tools"].active .studio-grid-header{border:1px solid var(--st-border)!important;background:color-mix(in srgb, var(--st-bg-2) 90%, transparent)!important;box-shadow:var(--st-depth-2)!important}
.view[data-view="tools"].active .studio-grid-header small{color:var(--st-mute)!important}
.view[data-view="tools"].active .studio-grid-header input{color:var(--st-text)!important}
.view[data-view="tools"].active .studio-grid-header input::placeholder{color:var(--st-mute)!important}
.view[data-view="tools"].active .studio-grid-header nav button{border:1px solid var(--st-border)!important;background:var(--st-bg-3)!important;color:var(--st-text)!important}

.view[data-view="tools"].active .studio-grid-canvas{background-color:var(--st-bg)!important;background-image:radial-gradient(circle,var(--st-grid-line,rgba(255,255,255,.105)) 1px,transparent 1.2px)!important}
.view[data-view="tools"].active .studio-grid-edges path{stroke:var(--st-line-2)!important}
.view[data-view="tools"].active .studio-grid-edges circle{fill:var(--st-dim)!important}

.view[data-view="tools"].active .studio-grid-node{border:1px solid var(--st-border)!important;background:var(--st-bg-2)!important;box-shadow:var(--st-depth-2)!important}
.view[data-view="tools"].active .studio-grid-node.selected{border-color:var(--st-accent)!important;box-shadow:0 0 0 2px var(--st-accent-bg),var(--st-depth-2)!important}
.view[data-view="tools"].active .studio-grid-node-header{border-bottom:1px solid var(--st-line)!important}
.view[data-view="tools"].active .studio-grid-node-header button{color:var(--st-mute)!important}
.view[data-view="tools"].active .studio-grid-node-header button:hover{background:var(--st-bg-3)!important;color:var(--st-text)!important}
.view[data-view="tools"].active .studio-grid-node-icon{background:var(--st-accent-bg)!important;color:var(--st-accent)!important}
.view[data-view="tools"].active .studio-grid-node textarea{border:1px solid var(--st-border)!important;background:var(--st-bg-3)!important;color:var(--st-text)!important}
.view[data-view="tools"].active .studio-grid-node textarea:focus{border-color:var(--st-accent)!important}
.view[data-view="tools"].active .studio-grid-node textarea::placeholder{color:var(--st-mute)!important}
.view[data-view="tools"].active .studio-grid-node-header [data-grid-expand-text]{color:var(--st-dim)!important}
.view[data-view="tools"].active .studio-grid-node-header [data-grid-expand-text]:hover{background:var(--st-bg-3)!important;color:var(--st-text)!important}
.view[data-view="tools"].active .studio-grid-node-result{background:var(--st-bg-3)!important;color:var(--st-mute)!important}
.view[data-view="tools"].active .studio-grid-node-result i{background:var(--st-bg-4)!important}
.view[data-view="tools"].active .studio-grid-node-footer button{background:var(--st-bg-4)!important;color:var(--st-text)!important}
.view[data-view="tools"].active .studio-grid-node-footer button:hover{background:var(--st-accent)!important;color:var(--st-accent-text)!important}
.view[data-view="tools"].active .studio-grid-node-status{color:var(--st-mute)!important}

.view[data-view="tools"].active .studio-grid-port{border-color:var(--st-bg-2)!important;background:var(--st-dim)!important}
.view[data-view="tools"].active .studio-grid-port.connection-source,
.view[data-view="tools"].active .studio-grid-port.connection-compatible{border-color:var(--st-bg-2)!important;background:var(--st-accent)!important;box-shadow:0 0 0 5px var(--st-accent-bg),0 0 18px var(--st-accent-bg)!important}
.view[data-view="tools"].active .studio-grid-node.connecting .studio-grid-port.out{background:var(--st-accent)!important;box-shadow:0 0 0 5px var(--st-accent-bg)!important}

.view[data-view="tools"].active .studio-grid-tools{border:1px solid var(--st-border)!important;background:color-mix(in srgb, var(--st-bg-2) 92%, transparent)!important}
.view[data-view="tools"].active .studio-grid-tools button{color:var(--st-text)!important}
.view[data-view="tools"].active .studio-grid-tools span{color:var(--st-mute)!important}

.view[data-view="tools"].active .studio-grid-node-tools{border:1px solid var(--st-border)!important;background:color-mix(in srgb, var(--st-bg-2) 94%, transparent)!important;box-shadow:var(--st-depth-2)!important}
.view[data-view="tools"].active .studio-grid-node-tools hr{background:var(--st-line-2)!important}
.view[data-view="tools"].active .studio-grid-node-tools button{color:var(--st-dim)!important}
.view[data-view="tools"].active .studio-grid-node-tools button:hover{background:var(--st-bg-3)!important;color:var(--st-text)!important}
.view[data-view="tools"].active .studio-grid-node-tools .studio-grid-tool-primary{background:var(--st-accent-bg)!important;color:var(--st-accent)!important}

.view[data-view="tools"].active .studio-grid-context{border:1px solid var(--st-border)!important;background:color-mix(in srgb, var(--st-bg-2) 97%, transparent)!important;box-shadow:var(--st-depth-2)!important}
.view[data-view="tools"].active .studio-grid-context button{color:var(--st-text)!important}
.view[data-view="tools"].active .studio-grid-context button:hover{background:var(--st-accent-bg)!important}

.view[data-view="tools"].active .studio-grid-text-editor{background:color-mix(in srgb, var(--st-shadow) 72%, transparent)!important}
.view[data-view="tools"].active .studio-grid-text-editor section{border:1px solid var(--st-border)!important;background:var(--st-bg-2)!important;color:var(--st-text)!important;box-shadow:var(--st-depth-2)!important}
.view[data-view="tools"].active .studio-grid-text-editor header{border-bottom:1px solid var(--st-line)!important}
.view[data-view="tools"].active .studio-grid-text-editor header small{color:var(--st-mute)!important}
.view[data-view="tools"].active .studio-grid-text-editor header button{background:var(--st-bg-3)!important;color:var(--st-text)!important}
.view[data-view="tools"].active .studio-grid-text-editor textarea{background:var(--st-bg)!important;color:var(--st-text)!important}
.view[data-view="tools"].active .studio-grid-text-editor footer{border-top:1px solid var(--st-line)!important}
.view[data-view="tools"].active .studio-grid-text-editor footer button{border:1px solid var(--st-border)!important;background:var(--st-bg-3)!important;color:var(--st-text)!important}
.view[data-view="tools"].active .studio-grid-text-editor footer button.primary{border-color:var(--st-invert-bg)!important;background:var(--st-invert-bg)!important;color:var(--st-invert-text)!important}

.view[data-view="tools"].active .studio-grid-node-settings select,
.view[data-view="tools"].active .studio-grid-node-settings input,
.view[data-view="tools"].active .studio-grid-toggle{border:1px solid var(--st-border)!important;background:var(--st-bg-3)!important;color:var(--st-text)!important}
.view[data-view="tools"].active .studio-grid-node-settings select:focus{border-color:var(--st-border-strong)!important}
.view[data-view="tools"].active .studio-grid-toggle input{accent-color:var(--st-mute)!important}

.view[data-view="tools"].active .studio-grid-attachments>button{border-color:var(--st-border-strong)!important;background:var(--st-bg-3)!important;color:var(--st-dim)!important}
.view[data-view="tools"].active .studio-grid-attachment{border:1px solid var(--st-border)!important;background:var(--st-bg-3)!important}
.view[data-view="tools"].active .studio-grid-attachment img,
.view[data-view="tools"].active .studio-grid-attachment>i{background:var(--st-bg-4)!important}
.view[data-view="tools"].active .studio-grid-attachment button{background:var(--st-bg-4)!important;color:var(--st-text)!important}

.view[data-view="tools"].active .studio-grid-text-output{background:var(--st-bg-3)!important;color:var(--st-text)!important}
.view[data-view="tools"].active .studio-grid-result-list button{background:var(--st-bg-3)!important}
.view[data-view="tools"].active .studio-grid-result-list button.active{border-color:var(--st-accent)!important;box-shadow:0 0 0 2px var(--st-accent-bg)!important}
.view[data-view="tools"].active .studio-grid-media-preview{background:var(--st-bg)!important}

.view[data-view="tools"].active .studio-grid-drawer-list .hd-empty{color:var(--st-mute)!important}