/* =====================================================
АВТОДОКУМЕНТАЦИЯ SYLVEX: webapp/css/cabinet.css
Файл описывает внешний вид экранов, кнопок, карточек, модальных окон и адаптивных состояний Website Studio.
Комментарии не меняют стили, а помогают найти нужный 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}
/* Fallback notice (website-ui.js shows notices as the SwipeToast bundle; this
   element only when it cannot load): the same bottom right corner and
   colours, above every block. */
.toast{position:fixed;right:32px;bottom:calc(32px + env(safe-area-inset-bottom,0px));z-index:999999999;max-width:min(356px,calc(100vw - 64px));box-sizing:border-box;padding:16px;border-radius:12px;background:#27272a;color:#f5f5f5;font-size:13px;line-height:1.5;opacity:0;transform:translateY(calc(100% + 32px));transition:transform .4s cubic-bezier(.23,1,.32,1),opacity .24s ease;pointer-events:none;box-shadow:0 1px 2px rgba(0,0,0,.05),0 4px 12px rgba(0,0,0,.1)}
.toast.show{opacity:1;transform:none;pointer-events:auto}
@media(max-width:600px){.toast{right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));max-width:calc(100vw - 32px)}}
[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"] .studio{
  --st-bg:#202020;--st-bg-2:#252525;--st-bg-3:#2c2c2c;--st-bg-4:#343434;
  --st-color-scheme:dark;
  --st-success:#66d9a8;--st-danger:#ff8991;--st-warning:#e9bf62;
  --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;
}

/* The website maps its shared light/dark setting to White/Black.
   Standalone Website Studio also retains its original Gray palette. Keep tokens
   available before tools becomes active so body-mounted menus inherit them.
   Some older Studio controls still read --border/--border-strong. */
.view[data-view="tools"] .studio[data-ps-theme="white"]{
  --st-bg:#ffffff;--st-bg-2:#f4f4f6;--st-bg-3:#ebebef;--st-bg-4:#dfdfe4;
  --st-color-scheme:light;
  --st-success:#13764f;--st-danger:#ba2941;--st-warning:#805900;
  --st-line:rgba(0,0,0,.08);--st-line-2:rgba(0,0,0,.13);
  --st-text:#14141a;--st-dim:#54545f;--st-mute:#62626e;
  --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"] .studio[data-ps-theme="black"]{
  --st-bg:#000000;--st-bg-2:#0c0c0d;--st-bg-3:#141415;--st-bg-4:#1c1c1e;
  --st-color-scheme:dark;
  --st-line:rgba(255,255,255,.09);--st-line-2:rgba(255,255,255,.14);
  --st-text:#f5f5f7;--st-dim:#b7b7c0;--st-mute:#9999a4;
  --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:#081326;
  --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}
/* imageQualityBtn stays additionally hidden (JS toggles [hidden] in
   renderImageControls) even in image mode, for every model except
   seedream_5_0_pro - the rule above alone would force it visible. */
.studio-video-composer[data-composer-mode="image"] .image-only.studio-select-pill[hidden]{display:none!important}
.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}
/* The chosen voice keeps the interface colours; only its small avatar shows it. */
#voiceListButton.has-selected-voice{position:relative;isolation:isolate;overflow:hidden}
#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{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 var(--st-line-2,rgba(255,255,255,.14));
  background:var(--st-bg-4,rgba(255,255,255,.08));color:var(--st-text,#fff);font-size:11px;font-weight:800;
}
#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;
}
/* The uploaded file's ×: takes it away without opening the picker. */
.vgen-upload-clear{flex:0 0 auto;width:26px;height:26px;margin-left:auto;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.1);color:inherit;font:inherit;font-size:16px;line-height:26px;cursor:pointer}
.vgen-upload-clear[hidden]{display:none}
.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-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{
  width:100%;
  max-width:520px;
  margin:2px auto 0;
}
.voice-create-head h3{margin:0 0 5px;font-size:18px;line-height:1.1}
.voice-create-head 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-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}
@keyframes voiceUploadSpin{to{transform:rotate(360deg)}}


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-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-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-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-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}
/* Character/Object creation+picker dialog and the resource-delete confirm
   popup are reparented to document.body by their own open logic, like the
   Photo Tool/Catalog modals above - so they read the same mirrored
   --st-* Pro Studio theme tokens (see syncStudioThemeVarsToDocument) with
   each rule's pre-existing color kept only as the fallback. */
.visual-create-modal{position:fixed;inset:0;z-index:999999;background:rgba(8,8,10,.76);backdrop-filter:blur(18px);display:none;color:var(--st-text, #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:var(--st-bg-2, #202020);border:1px solid var(--st-border, 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:var(--st-line, rgba(255,255,255,.08));color:var(--st-text, #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;color:var(--st-text, #f4f4f4)}
.visual-field{display:flex;flex-direction:column;gap:7px;font-size:12px;color:var(--st-dim, #bdbdbd);font-weight:800}
.visual-field input,.visual-field select,.visual-field textarea{width:100%;border:1px solid var(--st-border, rgba(255,255,255,.12));border-radius:16px;background:var(--st-bg-3, #2b2b2b);color:var(--st-text, #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 var(--st-border, rgba(255,255,255,.20));border-radius:18px;background:var(--st-bg-3, #2b2b2b);color:var(--st-dim, #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;color:#fff}
.visual-create-hint{margin:0;color:var(--st-mute, #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:var(--st-bg-2, #292929);border:1px solid var(--st-border, 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:var(--st-text, #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:var(--st-mute, #aaa);font-size:12px;font-weight:700}
.visual-create-save{margin-top:auto;min-height:50px;border:0;border-radius:16px;background:var(--st-accent, #2563eb);color:var(--st-accent-text, #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 var(--st-border, rgba(255,255,255,.12));border-radius:16px;background:var(--st-bg-3, #242424);color:var(--st-text, #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:var(--st-text, #e8e8e8);font:inherit;text-align:center;padding:0;cursor:pointer}
.visual-picker-thumb{display:block;aspect-ratio:1;border-radius:18px;background:var(--st-bg-4, #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:var(--st-invert-bg, #f4f4f4);color:var(--st-invert-text, #111);display:none;place-items:center;font-weight:900}
.visual-picker-card.selected .visual-picker-thumb{border-color:var(--st-invert-bg, #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:var(--st-bg-2, #202020);border:1px solid var(--st-border, 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:var(--st-text, #fff);line-height:1.2;text-align:center}
.resource-delete-confirm-text{margin-top:8px;color:var(--st-dim, 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 var(--st-border, rgba(255,255,255,.14));background:var(--st-bg-3, #2b2b2b);color:var(--st-text, #fff)}
.resource-delete-action{border:0;background:var(--st-accent, #0b63ff);color:var(--st-accent-text, #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;
}
.website-studio .studio-frame-card:disabled{
  cursor:default;
  opacity:.48;
  transform:none;
}
.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;
}

/* =====================================================
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,
.studio-video-composer[data-video-section="motion"] .studio-video-tools{
  gap:12px;
}
.studio-video-composer[data-video-section="edit"] .studio-frame-row,
.studio-video-composer[data-video-section="motion"] .studio-frame-row{
  display:none;
}
.studio-video-composer[data-video-section="edit"] .video-edit-only,
.studio-video-composer[data-video-section="motion"] .video-edit-only{
  display:flex;
}
.studio-video-composer[data-video-section="motion"] #imageObjectButton{
  display:none;
}
.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;
}
.view[data-view="tools"].active .studio-video-edit-upload{
  background:var(--st-bg-3);
  box-shadow:var(--st-depth-1);
}
.view[data-view="tools"].active .studio-video-edit-upload-icon{color:var(--st-text)}
.view[data-view="tools"].active .studio-video-edit-upload b{color:var(--st-text)}
.view[data-view="tools"].active .studio-video-edit-upload small{color:var(--st-dim)}
.studio-video-edit-upload-remove{
  display:none;
}
.studio-video-edit-upload.has-video-edit-preview .studio-video-edit-upload-remove{
  display:flex;
  align-items:center;
  justify-content:center;
  position:absolute;
  left:10px;
  top:10px;
  z-index:3;
  width:24px;
  height:24px;
  border-radius:50%;
  background:rgba(0,0,0,.58);
  color:#fff;
  font-size:16px;
  font-weight:900;
  line-height:1;
  cursor:pointer;
}
.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;
}
/* Uploads block (Website Studio UI fix): wraps the three existing upload
   buttons above in one horizontal block with a "Загрузки" label on the
   left - visual grouping only, the buttons/ids/handlers are unchanged. */
.video-uploads-block{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-height:64px;
  border-radius:18px;
  background:#242424;
  padding:10px 14px;
  margin-top:4px;
}
.video-uploads-block-label{
  font-size:13px;
  font-weight:700;
  color:#d7d7d7;
  white-space:nowrap;
}
.video-uploads-block .video-add-icon-row{
  margin-top:0;
}
.view[data-view="tools"].active .video-uploads-block{
  background:var(--st-bg-2);
  box-shadow:var(--st-depth-1);
}
.view[data-view="tools"].active .video-uploads-block-label{
  color:var(--st-dim);
}
.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:8px 4px;border-radius:8px;
  background:transparent;border:0;color:var(--st-text, #F3F3F3);
  font-family:inherit;font-size:12px;font-weight:500;cursor:pointer;box-shadow:none;
}
.hd-new:hover{background:transparent;color:var(--st-accent,#8aa8ff)}
.hd-section{display:flex;flex-direction:column;gap:2px;padding:0 4px}
.hd-history-filters{display:flex;flex-wrap:wrap;gap:3px;padding:0 8px 7px}
.hd-history-filters button{padding:5px 8px;border:1px solid transparent;border-radius:8px;background:transparent;color:var(--st-mute,#85858d);font:inherit;font-size:10.5px;line-height:1;cursor:pointer}
.hd-history-filters button:hover{color:var(--st-text,#f3f3f3)}
.hd-history-filters button.active{border-color:var(--st-border-strong,var(--st-line-2));color:var(--st-text,#f3f3f3);background:transparent}
.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:8px 9px;border-radius:8px;
  background:transparent;border:none;color:var(--st-text, #F3F3F3);font-family:inherit;
  font-size:11.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-img.generation-result-fallback{width:100%;aspect-ratio:1;height:auto;margin-top:4px;border-radius:12px}
.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}
.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:2px;padding:2px 8px;min-width:0}
.hd-item-row .hd-item{flex:1;text-align:left}
.hd-item.act{background:transparent;box-shadow:inset 0 0 0 1px var(--st-border-strong,var(--st-line-2))}
/* =====================================================
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}
.history-title-copy{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.history-pin{display:inline-block;flex:0 0 auto;width:11px;height:11px;margin-left:auto;color:var(--st-accent,var(--sx-accent,#7f9cff));vertical-align:-1px}
.hd-item,.hd-item b,.sx-sidebar-history-text,.studio-grid-project-open b{display:flex;align-items:center;min-width:0;gap:5px}
.history-title-tooltip{position:fixed;z-index:1000030;box-sizing:border-box;max-width:min(320px,calc(100vw - 24px));padding:7px 10px;border:1px solid var(--st-border,var(--sx-border,rgba(127,127,127,.2)));border-radius:9px;background:var(--st-bg-2,var(--sx-bg,#151517));color:var(--st-text,var(--sx-text,#f3f3f3));box-shadow:0 10px 26px rgba(0,0,0,.18);font:600 11px/1.35 Inter,system-ui,sans-serif;white-space:normal;overflow-wrap:anywhere;pointer-events:none}
.history-item-menu{position:relative;flex:0 0 auto;color:var(--st-text,var(--sx-text,#f3f3f3))}
.history-item-menu>summary{box-sizing:border-box;width:22px;height:22px;display:grid;place-items:center;border:0;border-radius:6px;background:transparent;color:var(--st-mute,var(--sx-text-mute,#85858d));font-size:10px;line-height:1;letter-spacing:.6px;cursor:pointer;list-style:none;transition:opacity .14s ease,color .14s ease,background .14s ease}
.history-item-menu>summary::-webkit-details-marker{display:none}.history-item-menu>summary:hover,.history-item-menu[open]>summary{background:var(--st-bg-3,var(--sx-bg-2,rgba(127,127,127,.12)));color:var(--st-text,var(--sx-text,#f3f3f3))}
.history-item-menu>div{position:absolute;z-index:80;top:calc(100% + 3px);right:0;box-sizing:border-box;min-width:118px;padding:4px;border:1px solid var(--st-border,var(--sx-border,rgba(127,127,127,.22)));border-radius:10px;background:var(--st-bg-2,var(--sx-bg,#151517));box-shadow:0 12px 32px rgba(0,0,0,.24)}
.history-item-menu>div button{display:block;width:100%;padding:7px 9px;border:0;border-radius:7px;background:transparent;color:inherit;font:inherit;font-size:11px;text-align:left;cursor:pointer}
.history-item-menu>div button:hover{background:var(--st-bg-3,var(--sx-bg-2,rgba(127,127,127,.12)))}.history-item-menu>div button.danger{color:var(--st-danger,#ef6464)}
@media (hover:hover) and (pointer:fine){
  :is(.hd-item-row,.sx-sidebar-history-row,.edit-session-row,.studio-grid-project)>.history-item-menu>summary{opacity:0;pointer-events:none}
  :is(.hd-item-row,.sx-sidebar-history-row,.edit-session-row,.studio-grid-project):hover>.history-item-menu>summary,
  :is(.hd-item-row,.sx-sidebar-history-row,.edit-session-row,.studio-grid-project):focus-within>.history-item-menu>summary,
  :is(.hd-item-row,.sx-sidebar-history-row,.edit-session-row,.studio-grid-project)>.history-item-menu[open]>summary{opacity:.78;pointer-events:auto}
  :is(.hd-item-row,.sx-sidebar-history-row,.edit-session-row,.studio-grid-project)>.history-item-menu>summary:hover{opacity:1}
}

/* ===== 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:var(--st-text, #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:var(--st-accent-bg, #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:var(--st-bg-3, #2c2c2c);
  color:var(--st-text, #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:var(--st-text, #f3f3f3);
  font-size:13px;
  line-height:1.15;
  font-weight:700;
}

/* =====================================================
CSS-БЛОК: .image-model-desc
Отвечает за внешний вид соответствующего элемента интерфейса: размер, расположение, цвета, состояния и адаптацию.
===================================================== */
.image-model-desc{
  color:var(--st-dim, #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:var(--st-text, #f3f3f3);
  font-size:13px;
  opacity:0;
}

/* A model turned off in the Admin Console: shown, not selectable. */
.image-model-row.is-unavailable{opacity:.45;cursor:not-allowed}
.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;
}

/* Grid Mode keeps its original generation-triggered pulse unchanged -
   only the normal (classic) Pro Studio workspace below has it removed. */
body.ai-generating .view[data-view="tools"].active .studio.grid-mode::before,
.view[data-view="tools"].active .studio.grid-mode.is-generating::before,
.view[data-view="tools"].active .studio.grid-mode.generating::before,
.view[data-view="tools"].active .studio.grid-mode: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.grid-mode::after,
.view[data-view="tools"].active .studio.grid-mode.is-generating::after,
.view[data-view="tools"].active .studio.grid-mode.generating::after,
.view[data-view="tools"].active .studio.grid-mode:has(.typing)::after{
  opacity:.22 !important;
  animation:aiNetworkDrift 14s linear infinite !important;
}

/* Normal (classic) Pro Studio workspace: the dotted background stays
   visually static during generation - no pulse/flicker. Grid Mode above
   and the separate Edit workspace are untouched by this. */
body.ai-generating .view[data-view="tools"].active .studio:not(.grid-mode)::before,
.view[data-view="tools"].active .studio:not(.grid-mode).is-generating::before,
.view[data-view="tools"].active .studio:not(.grid-mode).generating::before,
.view[data-view="tools"].active .studio:not(.grid-mode):has(.typing)::before{
  opacity:.16 !important;
  animation:none !important;
  filter:brightness(.72) !important;
}

body.ai-generating .view[data-view="tools"].active .studio:not(.grid-mode)::after,
.view[data-view="tools"].active .studio:not(.grid-mode).is-generating::after,
.view[data-view="tools"].active .studio:not(.grid-mode).generating::after,
.view[data-view="tools"].active .studio:not(.grid-mode):has(.typing)::after{
  opacity:.06 !important;
  animation:none !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;
}

/* The chat area of the classic workspace is clean (no dotted grid). */
.view[data-view="tools"].active .chat-area{
  background-color:#000 !important;
  background-image:none !important;
  animation:none !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;
  }
}
/* ===== Pro Studio page background: the classic workspace is clean; only
   Grid Mode keeps its dots ===== */
.view[data-view="tools"].active .studio{
  background-color:#000 !important;
  background-image:none !important;
  animation:none !important;
}
.view[data-view="tools"].active .studio.grid-mode{
  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;
}
.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;
}

/* Grid Mode keeps its original generation-triggered dot animation here
   unchanged; the normal (classic) workspace below no longer moves/
   brightens its dotted background when generation starts. */
body.ai-generating .view[data-view="tools"].active .studio.grid-mode,
.view[data-view="tools"].active .studio.grid-mode: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{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center !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;
}
/* Keep the existing row for other modes and older messages. */
.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;
}

/* A generation's references as the React Bits Stack (website-studio.js
   renderReferenceStack), with the Website's 120px cards (the Mini App's
   are 96px). The box is the card size; the fan opens up and to the right
   of it, so it keeps room there. The stack sits at the right, by the
   screen edge, whatever the length of the prompt (or with none). Until the
   stack is live the previous pile inside stays visible. */
.view[data-view="tools"].active .msg .bubble .msg-ref-stack{
  position:relative !important;
  display:block !important;
  width:120px !important;
  height:120px !important;
  margin:18px 38px 12px auto !important;
  touch-action:pan-y !important;
}
/* The stack sits on the workspace itself: the message holding it has no
   bubble (background, border, shadow) under the cards. */
.view[data-view="tools"].active .msg.user .bubble:has(> .msg-ref-stack){
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  padding:0 !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
.view[data-view="tools"].active .msg .bubble .msg-ref-stack .msg-ref-stack-root{
  width:100% !important;
  height:100% !important;
}
.view[data-view="tools"].active .msg .bubble .msg-ref-stack .stack-card-content img{
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  max-height:none !important;
  object-fit:cover !important;
}

/* Every image request reference shares one compact center, regardless of count. */
.view[data-view="tools"].active .msg.user .bubble .msg-ref-pile{
  position:relative !important;
  display:block !important;
  width:82px !important;
  height:78px !important;
  margin:0 0 6px !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  cursor:pointer !important;
  overflow:visible !important;
  touch-action:manipulation !important;
}

.view[data-view="tools"].active .msg.user .bubble .msg-ref-pile:focus-visible{
  outline:2px solid #8fc4ff !important;
  outline-offset:3px !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;
}

.view[data-view="tools"].active .msg.user .bubble .msg-ref-pile .msg-ref-img{
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  width:54px !important;
  height:54px !important;
  aspect-ratio:1 !important;
  box-sizing:border-box !important;
  border-radius:14px !important;
  overflow:hidden !important;
  background:rgba(255,255,255,.08) !important;
  border:1px solid rgba(255,255,255,.14) !important;
  display:block !important;
  transform:translate(-50%,-50%) translate(var(--pile-x),var(--pile-y)) rotate(var(--pile-angle)) !important;
  transition:transform 220ms ease !important;
  box-shadow:0 3px 8px rgba(0,0,0,.18) !important;
}

.view[data-view="tools"].active .msg.user .bubble .msg-ref-pile.is-expanded .msg-ref-img{
  transform:translate(-50%,-50%) translate(var(--pile-open-x),var(--pile-open-y)) rotate(var(--pile-open-angle)) !important;
}

@media (hover:hover) and (pointer:fine){
  .view[data-view="tools"].active .msg.user .bubble .msg-ref-pile:hover .msg-ref-img{
    transform:translate(-50%,-50%) translate(var(--pile-open-x),var(--pile-open-y)) rotate(var(--pile-open-angle)) !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-user-prompt{
  margin-top:4px !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;
}
.gen-img-open.gen-img-static{cursor:default!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;
}
.image-viewer-download{
  position:absolute !important;
  top:12px !important;
  right:58px !important;
  width:38px !important;
  height:38px !important;
  display:grid !important;
  place-items:center !important;
  padding:0 !important;
  border:0 !important;
  border-radius:999px !important;
  background:rgba(255,255,255,.14) !important;
  color:#fff !important;
  cursor:pointer !important;
  z-index:2 !important;
}
.image-viewer-download[hidden]{display:none !important}
.image-viewer-download svg{width:19px;height:19px}

/* 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. Grid Mode only: the
   classic workspace is clean. */
.view[data-view="tools"].active .studio.grid-mode{
  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;
}
/* Grid Mode keeps the original brightness pulse on its own dotted
   backdrop unchanged. The normal (classic) workspace just below no
   longer pulses/flickers when generation starts - same dots, no filter
   animation, so the background stays visually static. */
body.ai-generating .view[data-view="tools"].active .studio.grid-mode,
.view[data-view="tools"].active .studio.grid-mode: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)}
}
body.ai-generating .view[data-view="tools"].active .studio:not(.grid-mode),
.view[data-view="tools"].active .studio:not(.grid-mode):has(.typing){
  animation:none !important;
  filter:none !important;
}
.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;
}

.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);
}

/* =====================================================
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%}

.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-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{
  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-meta: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,

/* =====================================================
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;
}
.generation-info-preview-logo{box-sizing:border-box;width:100%;height:auto;aspect-ratio:4/3;max-height:min(38vh,340px);background:#fff}
.generation-info-preview-logo img{object-fit:contain}

/* =====================================================
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-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
   Mounted on document.body, outside .studio, so the --st-* custom
   properties Pro Studio's own Gray/White/Black cycle defines are never in
   scope here - every var(--st-*, fallback) below always fell back to its
   hardcoded dark-theme default regardless of the active theme, which is
   the root cause of the reported light-theme white-on-white contrast bug.
   Fixed by switching to the app-wide tokens already defined at :root /
   [data-theme="light"] (see top of this file) - those ARE in scope for
   any body-level element and already used the same way by other
   non-Studio UI (nav, chat panel, hero cards, ...). */
.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, var(--surface-2));border:1px solid var(--st-border, var(--border));
  box-shadow:0 34px 100px rgba(0,0,0,.5);color:var(--st-text, var(--text));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, var(--text-mute));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, var(--text))}
.photo-tool-head>button{
  width:36px;height:36px;flex:0 0 36px;border-radius:11px;border:1px solid var(--st-border, var(--border));
  background:var(--st-bg, var(--surface));color:var(--st-text, var(--text));font-size:23px;cursor:pointer
}

.photo-tool-demo{position:relative;aspect-ratio:4/3;border-radius:16px;overflow:hidden;background:var(--bg-1)}
.photo-tool-demo video,.photo-tool-demo img{width:100%;height:100%;display:block;object-fit:cover}

.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)}

.logo-reference-catalog{min-width:0;margin:0 0 14px;padding:12px;border:1px solid var(--border);border-radius:16px;background:var(--surface-2)}
.logo-reference-catalog>header{display:flex;flex-direction:column;gap:3px;margin-bottom:10px}.logo-reference-catalog>header b{font-size:13px;color:var(--text)}.logo-reference-catalog>header small{font-size:10px;color:var(--text-mute)}
/* Generic one-row horizontal carousel used by Logo/Tattoo/Hair&Beard
   preset lists: the scrollable track is the existing preset grid element
   itself (swipe/trackpad/wheel scroll it natively), running edge-to-edge
   in its container. The prev/next arrows are absolutely positioned on
   top of it (never flex siblings that would shrink the track), so they
   never claim their own opaque strip of layout - cards scroll freely
   underneath them and are only ever clipped at the track's own edge
   (its native overflow-x:auto), not by any arrow-side mask/gradient. */
.preset-carousel{position:relative}
.preset-carousel-track{width:100%}
.preset-carousel-arrow{position:absolute;top:0;bottom:0;z-index:2;width:30px;display:grid;place-items:center;border:0;background:none;padding:0;margin:0;cursor:pointer;color:var(--st-text,var(--text));font-size:22px;line-height:1;text-shadow:0 1px 3px rgba(0,0,0,.65),0 0 6px rgba(0,0,0,.4)}
.preset-carousel-arrow.prev{left:0}
.preset-carousel-arrow.next{right:0}
.preset-carousel-arrow:active{transform:scale(.85)}
@media(max-width:900px){.preset-carousel-arrow{display:none}}
.logo-reference-grid{display:flex;gap:8px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:2px 2px 10px}
.logo-reference-grid::-webkit-scrollbar{display:none}
.logo-reference-card{position:relative;flex:0 0 92px;scroll-snap-align:start;padding:5px;border:1px solid var(--border);border-radius:12px;background:#fff;color:#242529;text-align:left;cursor:pointer;overflow:hidden}
.logo-reference-card.selected{border:2px solid var(--text);padding:4px;box-shadow:0 0 0 2px color-mix(in srgb,var(--text) 12%,transparent)}
.logo-reference-card img{display:block;width:100%;aspect-ratio:1/1;object-fit:contain;border-radius:7px;background:#fff}.logo-reference-card span{display:block;overflow:hidden;margin:5px 1px 1px;font-size:9px;line-height:1.3;text-overflow:ellipsis;white-space:nowrap}
/* Replace Object's row of the user's existing Pro Studio Objects, placed
   right under the Before/After preview - same carousel/card look as the
   Logo reference row above, reusing imageObjects() data only. */
.replace-object-objects-row{min-width:0;margin:10px 0 0}
.replace-object-objects-row>header{margin-bottom:8px}.replace-object-objects-row>header b{font-size:12px;color:var(--text)}
.replace-object-objects-grid{display:flex;gap:8px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:2px 2px 10px}
.replace-object-objects-grid::-webkit-scrollbar{display:none}
.replace-object-object-card{position:relative;flex:0 0 76px;scroll-snap-align:start;display:flex;flex-direction:column;align-items:center;gap:5px;padding:5px;border:1px solid var(--border);border-radius:12px;background:var(--surface);color:var(--text);text-align:center;cursor:pointer;overflow:hidden}
.replace-object-object-card.selected{border:2px solid var(--text);padding:4px;box-shadow:0 0 0 2px color-mix(in srgb,var(--text) 12%,transparent)}
.replace-object-object-thumb{display:block;width:100%;aspect-ratio:1/1;border-radius:7px;background:var(--bg-1);overflow:hidden}
.replace-object-object-thumb img{display:block;width:100%;height:100%;object-fit:cover}
.replace-object-object-thumb.is-placeholder{display:grid;place-items:center}
.replace-object-object-plus{font-size:22px;font-weight:300;color:var(--text-mute)}
.replace-object-object-card span:last-child{display:block;overflow:hidden;font-size:9px;line-height:1.3;text-overflow:ellipsis;white-space:nowrap}

.generation-result-reference{display:flex;align-items:center;gap:6px;margin-top:5px}.generation-result-reference img{width:26px;height:26px;object-fit:contain;border:1px solid var(--border);border-radius:6px;background:#fff}.generation-result-reference small{overflow:hidden;color:var(--text-mute);font-size:9px;text-overflow:ellipsis;white-space:nowrap}
.generation-info-svg-download{display:inline-flex;align-items:center;justify-content:center;min-height:34px;padding:0 12px;border:1px solid var(--border);border-radius:10px;background:var(--surface);color:var(--text);font:inherit;font-size:11px;font-weight:700;text-decoration:none;cursor:pointer}

.photo-tool-char-counter{display:block;text-align:right;font-size:11px;color:var(--text-dim);margin:-6px 2px 2px}
.photo-tool-generate{
  min-height:46px;border:0;border-radius:14px;background:var(--primary);color:#fff;
  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(255,255,255,.35);border-top-color:#fff;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(--border);background:var(--surface);
  color:var(--text);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:var(--text-dim)}

.photo-tool-modal.replace-object-mask-editor-modal{z-index:1000010;align-items:center;justify-content:center;padding:18px}
.photo-tool-dialog.replace-object-mask-editor-dialog{width:min(980px,calc(100vw - 36px));height:min(760px,calc(100dvh - 36px));max-width:none;max-height:none;overflow:hidden;border-radius:22px;display:flex;flex-direction:column;align-items:center;box-sizing:border-box;padding:16px}
.replace-object-mask-editor-dialog .photo-tool-head{width:100%;flex:0 0 auto}
.replace-object-mask-editor-dialog .photo-tool-head{align-items:center}
.replace-object-mask-editor-dialog .photo-tool-head p{margin:6px 0 0;color:var(--text-dim);font-size:12px;line-height:1.4}
.replace-object-mask-canvas-wrap{position:relative;display:flex;align-items:center;justify-content:center;align-self:stretch;width:100%;flex:1 1 auto;min-height:0;max-width:100%;border-radius:16px;overflow:hidden;background:#111318}
.replace-object-mask-canvas-wrap canvas{display:block;max-width:100%;max-height:100%;touch-action:none;cursor:crosshair;background:#111318}
.replace-object-editor-loading{position:absolute;inset:0;display:grid;place-items:center;color:rgba(255,255,255,.72);font-size:13px;pointer-events:none}
.replace-object-editor-loading[hidden]{display:none}
.replace-object-mask-toolbar{display:flex;align-items:center;justify-content:flex-end;gap:8px;width:100%;flex:0 0 auto;margin-top:12px}
.replace-object-brush-size{display:flex;align-items:center;gap:8px;flex:1 1 180px;min-width:120px;color:var(--text-dim);font-size:11px}
.replace-object-brush-size input{flex:1;min-width:50px;accent-color:var(--primary)}
.replace-object-brush-size b{min-width:42px;color:var(--text);font-size:11px;text-align:right}
.replace-object-mask-toolbar button{min-height:40px;padding:0 13px;border:1px solid var(--border);border-radius:12px;background:var(--surface);color:var(--text);font:inherit;font-size:12px;font-weight:700;cursor:pointer}
.replace-object-mask-toolbar button:disabled{opacity:.42;cursor:default}
.replace-object-mask-toolbar button.save{background:var(--primary);border-color:var(--primary);color:#fff}

/* Desktop/tablet only: the single-column tools (Tattoo, Replace Object)
   let their Before/After block stretch to the full ~900px dialog width,
   which reads as an oversized slab on desktop compared to every other
   Photo Tool's two-column layout, whose own demo column is naturally
   ~400px wide (884px inner dialog width, two equal grid columns, minus
   the demo column's own padding). Cap it to that same ~400px so Tattoo/
   Replace Object read as the same size as the rest; mobile (<=680px) is
   already naturally narrow and is left untouched. */

@media(max-width:600px){.photo-tool-modal.replace-object-mask-editor-modal{padding:8px}.photo-tool-dialog.replace-object-mask-editor-dialog{width:calc(100vw - 16px);height:calc(100dvh - 16px);padding:11px;border-radius:18px}.replace-object-mask-editor-dialog .photo-tool-head{margin-bottom:10px}.replace-object-mask-editor-dialog .photo-tool-head h3{font-size:19px}.replace-object-mask-editor-dialog .photo-tool-head p{font-size:11px}.replace-object-mask-toolbar{flex-wrap:wrap;gap:6px;margin-top:9px}.replace-object-brush-size{flex:1 0 100%;min-width:0}.replace-object-mask-toolbar button{flex:1 1 auto;min-height:40px;padding:0 8px;font-size:11px}}
.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-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)}
/* Wide screens: the photo and video catalogs in the workspace, from the
   studio's edge to the right edge and from under its top bar down to the
   composer (placeCatalogInWorkspace in the JS). Nothing is dimmed and the
   composer stays usable; the × stays put outside the scrolling list. */
.catalog-in-workspace:is(.photo-catalog-modal,.video-templates-overlay){background:transparent!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;pointer-events:none}
.catalog-in-workspace :is(.photo-catalog-dialog,.video-templates-panel){position:fixed!important;width:auto!important;height:auto!important;max-width:none!important;max-height:none!important;margin:0!important;transform:none!important;overflow-y:auto!important;pointer-events:auto;box-shadow:0 20px 60px rgba(0,0,0,.22)!important}
.catalog-in-workspace #photoCatalogGrid{column-count:6}
.catalog-in-workspace:not(.kling-effects-overlay) .video-templates-grid{column-count:7}
.catalog-in-workspace>.catalog-workspace-close{position:fixed!important;left:auto!important;bottom:auto!important;z-index:3;display:grid;place-items:center;width:36px!important;height:36px!important;padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;color:var(--st-text, #fff)!important;font-size:30px!important;font-weight:300!important;line-height:1!important;cursor:pointer;pointer-events:auto;filter:drop-shadow(0 0 1.5px rgba(255,255,255,.95)) drop-shadow(0 0 4px rgba(255,255,255,.6)) drop-shadow(0 1px 3px rgba(0,0,0,.3))}
.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))
}


.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-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-tool-head h3{font-size:20px}
  
  .logo-reference-card{flex:0 0 78px}
  
  
}

/* 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%)}
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:none!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-БЛОК: .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%;
  /* The whole reference, centred; the rest of the side stays empty. */
  object-fit:contain;
}

/* =====================================================
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;
}

/* With the reference fitted whole, its empty sides stay plain: the
   placeholder shows only when there is no video (or it failed to load). */
.video-template-preview:has(> video[src]:not([src=""]):not([style*="none"])) .video-template-preview-fallback{visibility:hidden}

.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 ПО ШИРИНЕ САМОГО БЛОКА
Website Studio может быть узким внутри широкого окна браузера.
Этот слой повторяет мобильную логику видео/фото/озвучки не по 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 шире Website Studio.
===================================================== */
.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;
}

/* Edit video / Motion control keep the composer's level: the upload
   card takes what the uploads row leaves of the video column height. */
.studio-video-composer.is-compact[data-video-section="edit"] .studio-video-tools,
.studio-video-composer.is-compact[data-video-section="motion"] .studio-video-tools{
  gap:8px;
}
.studio-video-composer.is-compact[data-video-section="edit"] .studio-video-edit-upload,
.studio-video-composer.is-compact[data-video-section="motion"] .studio-video-edit-upload{
  min-height:0;
  padding:8px 14px;
  border-radius:24px;
}
.studio-video-composer.is-compact[data-video-section="edit"] .studio-video-edit-upload b,
.studio-video-composer.is-compact[data-video-section="motion"] .studio-video-edit-upload b{
  font-size:16px;
}
.studio-video-composer.is-compact[data-video-section="edit"] .studio-video-edit-upload small,
.studio-video-composer.is-compact[data-video-section="motion"] .studio-video-edit-upload small{
  font-size:12px;
}
.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 .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-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 Website Studio 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}.studio-grid-node-header{display:flex;align-items:center;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 textarea{width:100%;height:82px;resize:none}.studio-grid-node-result{height:44px;display:flex;align-items:center}.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 Website Studio 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:none!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"] .studio-grid-node-icon{background:rgba(98,123,255,.2);color:#b2c0ff}.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-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}}

/* Intelligent Grid planning, reference review and result versions. */
.studio-grid-node[data-type="montage"] .studio-grid-node-icon{background:rgba(80,154,255,.16);color:#8fc0ff}
.studio-grid-node[data-type="task"] .studio-grid-node-result:has(.studio-grid-reference-requests){height:auto;min-height:44px;max-height:244px;overflow:auto;align-items:stretch;padding:8px}
.studio-grid-reference-requests{width:100%;display:grid;gap:7px}.studio-grid-reference-requests>b{font-size:8px;letter-spacing:.05em}
.studio-grid-reference-requests article{position:relative;min-height:52px;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:5px;padding:7px;border:1px solid rgba(255,255,255,.09);border-radius:9px;background:rgba(255,255,255,.035)}
.studio-grid-reference-requests article>span{min-width:0;display:grid;gap:2px}.studio-grid-reference-requests strong,.studio-grid-reference-requests small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.studio-grid-reference-requests strong{font-size:8px}.studio-grid-reference-requests small{color:#858b98;font-size:6px}.studio-grid-reference-requests input{width:100%;min-width:0;height:24px;margin-top:3px;padding:0 7px;border:1px solid rgba(255,255,255,.1);border-radius:7px;background:#202127;color:#f5f5f7;font-size:7px;outline:0}.studio-grid-reference-requests input:focus{border-color:#7467ff}
.studio-grid-reference-requests article>img{width:38px;height:38px;object-fit:cover}.studio-grid-reference-requests button,.studio-grid-reference-requests select{min-height:25px;border:1px solid rgba(255,255,255,.1);border-radius:7px;background:#2b2d34;color:#f5f5f7;font-size:7px}
.studio-grid-reference-requests article>button[data-grid-clear-reference]{position:absolute;right:3px;top:3px;width:18px;height:18px;min-height:18px;padding:0;border:0;border-radius:50%}.studio-grid-reference-continue{width:100%;height:29px}
.studio-grid-result-versions{display:flex;align-items:center;gap:4px;margin-left:auto}.studio-grid-result-versions button{width:20px;height:20px;padding:0;border:1px solid rgba(255,255,255,.1);border-radius:6px;background:rgba(255,255,255,.06);color:inherit;font-size:7px}.studio-grid-result-versions button.active{border-color:#6f87ff;background:#6f87ff;color:#fff}
.studio-grid-latest-error{position:absolute;left:10px;right:10px;top:4px;z-index:1;overflow:hidden;color:#ff9ba5;font-size:6px;text-overflow:ellipsis;white-space:nowrap}

/* 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-sync{display:block;margin:0 9px 5px;color:var(--st-mute,var(--text-dim));font-size:8px}
.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-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-toggle{display:flex;align-items:center;gap:5px;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-attachment{position:relative;min-width:92px;max-width:128px;display:flex;align-items:center;gap:5px;padding:3px 23px 3px 4px}.studio-grid-attachment img,.studio-grid-attachment>i{flex:0 0 auto;object-fit:cover}.studio-grid-attachment>i{display:grid;place-items:center;font-style:normal}.studio-grid-attachment span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.studio-grid-attachment button{position:absolute}
@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-settings{display:flex;gap:5px;overflow-x:auto;scrollbar-width:none}.studio-grid-node-settings::-webkit-scrollbar{display:none}.studio-grid-node-result{min-height:74px}.studio-grid-text-output{width:100%;height:70px!important;min-height:70px;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-audio{width:100%;height:34px}.studio-grid-header #studioGridRunWorkflow.running{border-color:#dd6874;color:#ff9ca5}
@media(max-width:700px){.studio-grid-node{min-height:258px!important}.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{display:flex;align-items:center;flex:0 0 auto}.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}.studio-grid-project-open{flex:1;min-width:0;display:flex;align-items:center;justify-content:space-between;gap:10px;border:0;background:transparent;color:inherit;text-align:left;padding:0}@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{
  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-create-open .voice-create-head{border-bottom:1px solid var(--st-line)}
.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{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-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-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-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-icon{background:var(--st-accent-bg)!important;color:var(--st-accent)!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-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-reference-requests article{border-color:var(--st-border)!important;background:var(--st-bg-3)!important}.view[data-view="tools"].active .studio-grid-reference-requests small{color:var(--st-mute)!important}.view[data-view="tools"].active .studio-grid-reference-requests button,.view[data-view="tools"].active .studio-grid-reference-requests select,.view[data-view="tools"].active .studio-grid-reference-requests input{border-color:var(--st-border)!important;background:var(--st-bg-4)!important;color:var(--st-text)!important}.view[data-view="tools"].active .studio-grid-result-versions button{border-color:var(--st-border)!important;background:var(--st-bg-4)!important;color:var(--st-text)!important}.view[data-view="tools"].active .studio-grid-result-versions button.active{border-color:var(--st-accent)!important;background:var(--st-accent)!important;color:var(--st-accent-text)!important}

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

/* =====================================================
CSS-БЛОК: Website Studio (html.website-studio, see isWebEmbed() in cabinet.js)
Скрывает элементы навигации/переключатели, дублирующие то, что уже есть у
сайта sylvex.ai (нижняя панель Home/Profile/Shop/Settings, переключатель
темы Pro Studio, переключатель Обычный/Сетка) - сайт уже даёт свою
навигацию, тему и вкладку Grid Mode. На Telegram Website Studio эти правила не
действуют, поскольку класс website-studio там никогда не выставляется.
===================================================== */
html.website-studio .nav,
html.website-studio .view[data-view="tools"] .studio-bar,
html.website-studio #histDrawer,
html.website-studio #histBackdrop,
html.website-studio #aiAssistantFab,
html.website-studio #aiAssistantModal,
html.website-studio .settings-ai-assistant-row{display:none!important}

/* The Website owns navigation, history and the global page header. Pro
   Studio contributes only its workspace/composer there, with a clean solid
   surface instead of the Telegram Studio's decorative dot layers. */
html.website-studio .view[data-view="tools"].active .studio:not(.grid-mode)::before,
html.website-studio .view[data-view="tools"].active .studio:not(.grid-mode)::after{
  display:none!important;
  content:none!important;
}
html.website-studio .view[data-view="tools"].active .studio:not(.grid-mode),
html.website-studio .view[data-view="tools"].active .studio:not(.grid-mode) .chat-area{
  background-color:var(--st-bg)!important;
  background-image:none!important;
}

/* Inline coordinates are calculated from the actual clicked control. These
   declarations win over the old mobile bottom-sheet !important rules. */
html.website-studio body > #modelPop.web-studio-anchored-pop{
  right:auto!important;
  bottom:auto!important;
  transform:none!important;
}

/* Desktop-width website workspace: the Studio's fixed, phone-sized
   generation cards/thumbnails stay exactly as they are for Telegram, but a
   wide website viewport gets visibly larger cards and previews instead of
   the same compact sizing simply stretched across a monitor. */
@media (min-width:900px){
  html.website-studio .generation-result-mini-card,
  html.website-studio .generation-result-card-shell{width:380px}
  html.website-studio .generation-result-thumb{width:84px;height:84px;flex:0 0 84px;border-radius:16px}
  html.website-studio .generation-result-fallback{font-size:18px}
}

/* Hairstyle & Beard reference catalog: neutral, locally bundled silhouette assets. */
.hair-beard-catalog{min-width:0;margin:0 0 14px;padding:12px;border:1px solid var(--st-border,rgba(255,255,255,.09));border-radius:18px;background:var(--st-bg-3,#111216)}
.hair-beard-tabs{display:flex;gap:7px;overflow-x:auto;padding:0 0 11px;scrollbar-width:none;-webkit-overflow-scrolling:touch}.hair-beard-tabs::-webkit-scrollbar{display:none}
.hair-beard-tab{flex:0 0 auto;min-height:36px;padding:0 14px;border:1px solid var(--st-border,rgba(255,255,255,.12));border-radius:999px;background:transparent;color:var(--st-dim,rgba(255,255,255,.68));font:inherit;font-size:12px;font-weight:650;cursor:pointer;white-space:nowrap}.hair-beard-tab.active{background:var(--st-invert-bg,#f1f3f5);border-color:var(--st-invert-bg,#f1f3f5);color:var(--st-invert-text,#111216)}
.hair-beard-grid{display:flex;gap:9px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:1px 3px 10px 1px;overscroll-behavior:contain}
.hair-beard-grid::-webkit-scrollbar{display:none}
.hair-beard-card{position:relative;flex:0 0 98px;scroll-snap-align:start;padding:5px;border:1px solid var(--st-border,rgba(255,255,255,.1));border-radius:13px;background:var(--st-bg-2,#18191d);color:var(--st-text,#f3f3f3);text-align:left;cursor:pointer;transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease}.hair-beard-card:active{transform:scale(.98)}.hair-beard-card.selected{border-color:var(--st-text,#fff);box-shadow:0 0 0 1px var(--st-text,#fff)}
.hair-beard-card-image{display:block;width:100%;aspect-ratio:1;overflow:hidden;border-radius:9px;background:#fff}.hair-beard-card-image img{display:block;width:100%;height:100%;object-fit:contain}.hair-beard-card-name{display:block;min-height:30px;padding:6px 3px 2px;font-size:10px;line-height:1.15;font-weight:650;overflow-wrap:anywhere}.hair-beard-card-check{position:absolute;right:9px;top:9px;width:20px;height:20px;display:grid;place-items:center;border-radius:50%;background:#111;color:#fff;border:1px solid rgba(255,255,255,.82);font-size:12px;opacity:0;transform:scale(.8);transition:.16s}.hair-beard-card.selected .hair-beard-card-check{opacity:1;transform:scale(1)}

.tattoo-catalog{min-width:0;margin:0 0 14px;padding:12px;border:1px solid var(--st-border,rgba(255,255,255,.09));border-radius:18px;background:var(--st-bg-3,#111216)}
.tattoo-catalog>header{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:9px}.tattoo-catalog>header>b{font-size:12px;font-weight:700}.tattoo-catalog>header>small{font-size:10px;color:var(--st-mute,rgba(255,255,255,.5))}
.tattoo-reference-grid{display:flex;gap:9px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:none;overscroll-behavior:contain;padding:1px 3px 10px 1px}
.tattoo-reference-grid::-webkit-scrollbar{display:none}
.tattoo-reference-card{flex:0 0 112px;scroll-snap-align:start;padding:5px;border:1px solid var(--st-border,rgba(255,255,255,.1));border-radius:13px;background:var(--st-bg-2,#18191d);color:var(--st-text,#f3f3f3);text-align:left;cursor:pointer;transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease}.tattoo-reference-card:active{transform:scale(.98)}.tattoo-reference-card.selected{border-color:var(--st-text,#fff);box-shadow:0 0 0 1px var(--st-text,#fff)}
.tattoo-reference-card>span{display:block;width:100%;aspect-ratio:4/5;overflow:hidden;border-radius:9px;background:#fff}.tattoo-reference-card img{display:block;width:100%;height:100%;object-fit:cover}.tattoo-reference-card>b{display:block;min-height:28px;padding:6px 3px 2px;font-size:10px;line-height:1.15;font-weight:650;overflow-wrap:anywhere}

@media(max-width:680px){.tattoo-catalog{padding:9px;margin-bottom:10px}.tattoo-reference-grid{gap:7px}.tattoo-reference-card{flex:0 0 94px;padding:4px;border-radius:11px}.tattoo-reference-card>b{font-size:10px;min-height:26px}}

@media(max-width:680px){.hair-beard-catalog{padding:9px;margin-bottom:10px}.hair-beard-tabs{gap:6px;padding-bottom:9px}.hair-beard-tab{min-height:34px;padding:0 11px;font-size:11px}.hair-beard-grid{gap:7px}.hair-beard-card{flex:0 0 84px;padding:4px;border-radius:11px}.hair-beard-card-name{font-size:10px;min-height:28px}.hair-beard-card-check{right:7px;top:7px}}

/* Pre-generation reference preview (shown the instant a Hair&Beard
   preset / Tattoo reference is selected, before Generate runs) - reuses
   .photo-tool-demo's own box sizing, just swaps in a plain contained
   image instead of the demo video/placeholder. */

/* Full-screen desktop Edit workspace: deliberately isolated from the Photo Tool modal. */
.edit-workspace{position:fixed;inset:0;z-index:1000020;display:none;overflow:hidden;background:#080809;color:#f4f4f5;font-family:inherit}
.edit-workspace.is-open{display:block}
.edit-workspace-main{position:absolute;inset:0;background:#09090a;overflow:hidden}
.edit-workspace-grid{position:absolute;inset:0;background-image:radial-gradient(#353539 1px,transparent 1.1px);background-size:30px 30px;opacity:.65;pointer-events:none}
.edit-workspace-stage{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;min-width:0;min-height:0;padding:38px 38px 125px 38px;overflow:hidden}
.edit-workspace-image{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;transform:scale(var(--workspace-zoom,1));transform-origin:center;box-shadow:0 14px 48px rgba(0,0,0,.44)}
.edit-workspace-upload{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;width:min(760px,82vw);height:min(620px,76vh);border:1px dashed #55565b;border-radius:15px;background:#141416;color:#eee;cursor:pointer}.edit-workspace-upload span{font-size:44px;color:#aaa}.edit-workspace-upload small{color:#8c8d93}
.edit-workspace-panel{position:absolute;z-index:2;right:22px;top:50%;transform:translateY(-50%);box-sizing:border-box;width:386px;max-height:calc(100dvh - 94px);padding:18px;border:1px solid #303034;border-radius:18px;background:rgba(26,26,29,.97);box-shadow:0 16px 52px rgba(0,0,0,.32);overflow:auto;scrollbar-width:thin;scrollbar-color:#4a4a4e transparent;display:flex;flex-direction:column;gap:16px}
.edit-workspace-presets{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.edit-workspace-presets button,.edit-workspace-subtle{min-height:38px;padding:6px 10px;border:1px solid #39393e;border-radius:10px;background:#222226;color:#e6e6e8;font:inherit;font-size:12px;cursor:pointer}.edit-workspace-presets button.active,.edit-workspace-presets button:hover{border-color:#aaa;background:#343438;color:#fff}
.edit-workspace-range{position:relative;display:grid!important;grid-template-columns:1fr auto;gap:10px!important;color:#e0e0e2;font-size:12px!important}.edit-workspace-range output{margin:0!important;color:#aaa;font-size:11px;font-variant-numeric:tabular-nums}.edit-workspace-range input[type=range]{grid-column:1/-1;width:100%;height:4px;margin:1px 0 4px;accent-color:#f2f2f3}
.edit-workspace-panel>h3{margin:2px 0 0;font-size:17px}.edit-workspace-color{flex-direction:row!important;align-items:center;justify-content:space-between}.edit-workspace-color input{width:42px;height:28px;padding:2px;border:1px solid #414247;border-radius:7px;background:#242529}
.edit-workspace-generate{min-height:42px;padding:0 19px;border:0;border-radius:10px;background:#f2f2f3;color:#171719;font:inherit;font-size:13px;font-weight:700;cursor:pointer}.edit-workspace-generate:hover{background:#fff}.edit-workspace-generate:disabled{opacity:.45;cursor:not-allowed}.edit-workspace-panel>.edit-workspace-generate{width:100%;margin-top:2px}
.edit-workspace-orbit{height:168px;display:grid;place-items:center;border:1px solid #303034;border-radius:14px;background:radial-gradient(ellipse at center,#252529,#1c1c1f 68%)}.edit-orbit-rings{position:relative;width:150px;height:118px;display:grid;place-items:center}.edit-orbit-rings i,.edit-orbit-rings b{position:absolute;width:136px;height:78px;border:1px solid #67676d;border-radius:50%;transform:rotate(-24deg)}.edit-orbit-rings b{transform:rotate(54deg);border-color:#45454b}.edit-orbit-rings span{width:32px;height:32px;border:1px solid #b6b6ba;border-radius:50%;background:linear-gradient(135deg,#555,#161619)}.edit-orbit-rings em{position:absolute;right:21px;top:10px;color:#ddd;font-style:normal;font-size:12px}
.edit-workspace-light-head{display:flex;align-items:center;gap:7px;overflow-x:auto}.edit-workspace-light-chip,.edit-workspace-add-light{flex:0 0 auto;min-height:35px;padding:0 11px;border:1px solid #3b3b40;border-radius:10px;background:#222226;color:#bcbcc0;font:inherit;font-size:11px;cursor:pointer}.edit-workspace-light-chip.active{border-color:#a4a4a8;background:#343438;color:#fff}.edit-workspace-light-chip i{display:inline-block;width:8px;height:8px;margin-right:6px;border-radius:50%;background:var(--light-color)}.edit-workspace-add-light{font-size:17px}.edit-workspace-light-tools{display:flex;justify-content:flex-end;gap:6px;margin-top:-10px}.edit-workspace-light-tools button{width:31px;height:28px;border:1px solid #38383d;border-radius:8px;background:#222226;color:#ddd;cursor:pointer}.edit-workspace-light-tools button.muted{opacity:.4}.edit-workspace-control-card{display:flex;flex-direction:column;gap:14px;padding:14px;border:1px solid #343439;border-radius:13px;background:#202023}.edit-workspace-hex{display:flex;align-items:center;justify-content:space-between;font-size:12px}.edit-workspace-hex span{display:flex;align-items:center;gap:8px}.edit-workspace-hex i{width:24px;height:24px;border:1px solid #555;border-radius:7px;background:var(--swatch)}.edit-workspace-hex input[aria-label="HEX color"]{width:78px;border:0;background:transparent;color:#eee;font:inherit;font-size:12px}.edit-workspace-hex input[type=color]{width:26px;height:26px;padding:0;border:0;background:transparent}
.edit-workspace-model,.edit-workspace-select-row select{width:100%;min-height:39px;padding:0 10px;border:1px solid #3b3b40;border-radius:9px;background:#242428;color:#eee;font:inherit;font-size:12px}.edit-workspace-segment{display:flex;padding:3px;border-radius:10px;background:#121214}.edit-workspace-segment button{flex:1;height:33px;border:0;border-radius:7px;background:transparent;color:#aaa;font:inherit;cursor:pointer}.edit-workspace-segment button.active{background:#3b3b40;color:white}.edit-workspace-section-title{font-size:12px}.edit-workspace-dimensions{display:flex;align-items:center;gap:7px}.edit-workspace-dimensions label{display:flex;align-items:center;gap:6px;flex:1;color:#aaa;font-size:10px}.edit-workspace-dimensions input{width:70px;min-width:0;height:31px;padding:0 7px;border:1px solid #39393e;border-radius:7px;background:#222226;color:#eee}.edit-workspace-settings{display:flex;flex-direction:column;gap:14px}.edit-workspace-settings summary{cursor:pointer;font-size:12px;font-weight:700}.edit-workspace-select-row,.edit-workspace-switch-row{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:11px}.edit-workspace-select-row select{width:145px;min-height:31px}.edit-workspace-switch-row input{accent-color:#eee}
.edit-workspace-language-list{max-height:48vh;overflow:auto;border:1px solid #343439;border-radius:11px}.edit-workspace-language-list button{display:flex;align-items:center;gap:10px;width:100%;min-height:51px;padding:6px 11px;border:0;border-bottom:1px solid #303034;background:transparent;color:#eee;text-align:left;cursor:pointer}.edit-workspace-language-list button.active{background:#303034}.edit-workspace-language-list button>span{flex:1;font-size:12px}.edit-workspace-language-list small{display:block;margin-top:3px;color:#999;font-size:10px}.edit-workspace-language-list button>b{color:#ccc}.edit-language-flag{width:24px;height:16px;border-radius:3px;background:linear-gradient(#fff 33%,#333 33% 66%,#cf3434 66%)}.edit-language-flag.f0{background:linear-gradient(#333 33%,#d33 33% 66%,#f4ca32 66%)}.edit-language-flag.f1{background:linear-gradient(#3a6bdc 50%,#f0d84a 50%)}.edit-language-flag.f2{background:linear-gradient(#fff 33%,#3563b7 33% 66%,#d44848 66%)}
.edit-workspace-translate-search{display:flex;flex-direction:column;gap:8px;font-size:11px}.edit-workspace-translate-search input{height:37px;padding:0 11px;border:1px solid #3a3a3f;border-radius:9px;background:#222226;color:#eee;font:inherit}.edit-workspace-action{position:absolute;z-index:2;left:50%;bottom:98px;transform:translateX(-50%);box-sizing:border-box;width:min(800px,calc(100vw - 450px));padding:13px 15px;border:1px solid #303034;border-radius:15px;background:rgba(26,26,29,.97);box-shadow:0 12px 36px rgba(0,0,0,.35)}.edit-workspace-action textarea{box-sizing:border-box;display:block;width:100%;min-height:46px;max-height:135px;resize:vertical;padding:8px 7px;border:0;background:transparent;color:#f5f5f6;font:inherit;font-size:13px;outline:none}.edit-workspace-action textarea::placeholder{color:#a5a5aa}.edit-workspace-action>p{margin:0 0 10px;color:#d1d1d4;font-size:12px}.edit-workspace-action-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.edit-workspace-action-row>button:not(.edit-workspace-generate){min-height:31px;padding:0 10px;border:1px solid #39393e;border-radius:8px;background:#242428;color:#ddd;font:inherit;font-size:11px;cursor:pointer}.edit-workspace-action-row>button.active{background:#414146;border-color:#737378}.edit-workspace-action-row select,.edit-workspace-model-label{height:34px;display:inline-flex;align-items:center;padding:0 10px;border:1px solid #39393e;border-radius:8px;background:#242428;color:#eee;font:inherit;font-size:11px}.edit-workspace-action-row .edit-workspace-generate{margin-left:auto}.edit-workspace-action-row input[type=range]{width:120px;accent-color:#eee}.edit-workspace-action-row output{color:#bbb;font-size:11px}.edit-workspace-action-row label{display:flex;align-items:center;gap:5px;color:#bbb;font-size:11px}.edit-workspace-action-row label input{width:84px;height:31px;padding:0 6px;border:1px solid #39393e;border-radius:7px;background:#222226;color:#eee}

.edit-workspace-dock{position:absolute;z-index:3;left:50%;bottom:17px;transform:translateX(-50%);display:flex;align-items:center;justify-content:flex-start;gap:3px;box-sizing:border-box;width:max-content;max-width:calc(100vw - 36px);height:59px;padding:6px;border:1px solid #303034;border-radius:15px;background:rgba(26,26,29,.98);box-shadow:0 10px 32px rgba(0,0,0,.4);overflow-x:auto;scrollbar-width:none}.edit-workspace-dock::-webkit-scrollbar{display:none}.edit-workspace-tab{display:flex;align-items:center;justify-content:center;gap:7px;flex:0 0 auto;height:43px;padding:0 11px;border:0;border-radius:9px;background:transparent;color:#aaa;font:inherit;font-size:11px;cursor:pointer;white-space:nowrap}.edit-workspace-tab i{font-size:15px;font-style:normal}.edit-workspace-tab:hover{background:#29292e;color:#fff}.edit-workspace-tab.active{background:#3a3a40;color:#fff}
.edit-workspace-canvas-actions{position:absolute;z-index:2;right:21px;bottom:18px;display:flex;gap:6px;transform:translateY(-69px)}.edit-workspace-canvas-actions button,.edit-workspace-change-image{height:36px;padding:0 11px;border:1px solid #3c3c41;border-radius:9px;background:#222226;color:#eee;font:inherit;font-size:11px;cursor:pointer}.edit-workspace-canvas-actions button:disabled{opacity:.4;cursor:default}.edit-workspace-close{position:absolute;z-index:4;right:20px;top:17px;width:37px;height:37px;border:1px solid #3b3b40;border-radius:10px;background:#222226;color:#eee;font-size:23px;cursor:pointer}
@media(max-width:999px){.edit-workspace{display:none!important}}
@media(min-width:1000px) and (max-width:1320px){.edit-workspace-panel{width:340px;right:14px}.edit-workspace-action{width:min(720px,calc(100vw - 385px))}.edit-workspace-tab{padding:0 8px;font-size:10px}.edit-workspace-dock{max-width:calc(100vw - 36px)}}
@media(min-width:1000px) and (max-height:760px){.edit-workspace-panel{max-height:calc(100dvh - 70px);padding:13px;gap:11px}.edit-workspace-orbit{height:120px}.edit-workspace-action{bottom:89px;padding:9px 12px}.edit-workspace-dock{bottom:12px;height:53px}.edit-workspace-tab{height:39px}.edit-workspace-close{top:12px;right:14px}}

/* Edit inherits the same palette as Pro Studio, including when mounted on body. */
.edit-workspace{
  --edit-primary:#296ce8;
  --edit-primary-hover:#2562d3;
  --edit-bg:var(--st-bg,#070708);
  --edit-surface:var(--st-bg-2,#111112);
  --edit-surface-raised:var(--st-bg-3,#0f0f10);
  --edit-text:var(--st-text,#fff);
  --edit-muted:var(--st-dim,#a3a3a3);
  --edit-subtle:var(--st-mute,#7f7f7f);
  --edit-border:var(--st-border,#ffffff14);
  --edit-border-strong:var(--st-border-strong,#ffffff1f);
  --edit-selected:var(--st-accent-bg,#ffffff1a);
  --edit-radius-small:8px;
  --edit-radius-medium:12px;
  --edit-radius-large:16px;
  --edit-radius-xlarge:20px;
  font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;
  background:var(--edit-bg);
  color:var(--edit-text);
}
.edit-workspace-main{background:var(--edit-bg)}
.edit-workspace-panel,.edit-workspace-action,.edit-workspace-dock{border-color:var(--edit-border);background-color:var(--edit-surface)}
.edit-workspace-panel{border-radius:var(--edit-radius-xlarge)}
.edit-workspace-control-card{border-color:var(--edit-border);border-radius:var(--edit-radius-medium);background:var(--edit-surface-raised)}
.edit-workspace-generate{border-radius:var(--edit-radius-medium);background:var(--edit-primary);color:#fff}
.edit-workspace-generate:hover{background:var(--edit-primary-hover)}
.edit-workspace-switch-row input{accent-color:var(--edit-primary)}
.edit-workspace-tab{border-radius:var(--edit-radius-small);color:var(--edit-muted)}
.edit-workspace-tab:hover,.edit-workspace-tab.active{background:var(--edit-selected);color:var(--edit-text)}
.edit-workspace-presets button.active,.edit-workspace-action-row>button.active,.edit-workspace-light-chip.active{background:var(--edit-selected);border-color:var(--edit-border-strong);color:var(--edit-text)}
.edit-workspace-action-row>button:not(.edit-workspace-generate),.edit-workspace-action-row select,.edit-workspace-model-label,.edit-workspace-canvas-actions button,.edit-workspace-change-image,.edit-workspace-close{border-color:var(--edit-border);border-radius:var(--edit-radius-small);background:var(--edit-surface-raised);color:var(--edit-text)}
.edit-workspace-close{border-radius:var(--edit-radius-medium)}
.edit-workspace-action textarea::placeholder,.edit-workspace-action-row output,.edit-workspace-range output{color:var(--edit-muted)}

/* Edit workspace: image-sized selection canvas beneath floating tools. */
body.edit-workspace-open{overflow:hidden}
.edit-workspace-stage{box-sizing:border-box;inset:0;padding:0;overflow:hidden}
.edit-workspace-frame{position:relative;flex:none;box-shadow:0 14px 48px #0006;background-color:#c7c7c7;background-image:linear-gradient(45deg,#eee 25%,transparent 25%),linear-gradient(-45deg,#eee 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#eee 75%),linear-gradient(-45deg,transparent 75%,#eee 75%);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0}
.edit-workspace-frame .edit-workspace-image{position:absolute;max-width:none;max-height:none;transform:none;box-shadow:none;object-fit:fill;user-select:none;-webkit-user-drag:none}
#editWorkspaceMask{position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:crosshair;opacity:.55}
.edit-workspace-action{width:min(880px,calc(100vw - 80px))}
.edit-workspace-action-row label input[type="checkbox"]{width:17px;height:17px;accent-color:var(--edit-primary)}
.edit-workspace[data-mode="expand"] .edit-workspace-action-row label input{width:64px}
.edit-workspace-status{position:absolute;bottom:80px;left:50%;transform:translateX(-50%);max-width:90vw;color:var(--edit-muted,#aaa);font-size:11px;text-align:center;pointer-events:none}
.edit-workspace-canvas-actions{top:18px;bottom:auto;right:70px;transform:none;max-width:calc(100% - 100px);flex-wrap:wrap}
.edit-workspace[data-busy="true"] button,.edit-workspace[data-busy="true"] input{cursor:default}
.edit-workspace.is-dragging::after{content:'Drop image to open';position:absolute;inset:12px;z-index:10;display:grid;place-items:center;border:2px dashed #9890ff;border-radius:18px;background:#151327dd;color:#fff;font-size:24px;pointer-events:none}
.edit-workspace-language-list button[hidden]{display:none}
/* Compact tool dock, matching the DaVinci reference; names remain accessible. */
.edit-workspace-dock{border-radius:999px;background:#242426eb;backdrop-filter:blur(18px);height:55px}
.edit-workspace-tab{border-radius:999px;min-width:42px}
.edit-workspace-tab:not(.active) span{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.edit-workspace-tab.active{padding-inline:17px}
.edit-workspace-action{border-radius:24px;background:#242426e8;backdrop-filter:blur(18px)}
.edit-workspace-action-row button:disabled{opacity:.4;cursor:default}
.edit-sketch-chain-hint{display:inline-flex;align-items:center;min-height:31px;color:var(--edit-muted);font-size:11px}

/* One infinite world fills the viewport, including the area behind every tool. */
.edit-workspace-stage{overflow:hidden;touch-action:none;cursor:grab;outline:none}
.edit-workspace-stage.is-panning,.edit-workspace-stage.is-panning *{cursor:grabbing!important}
.edit-workspace-world{position:absolute;left:0;top:0;width:0;height:0;overflow:visible;transform-origin:0 0;will-change:transform}
.edit-workspace-frame{position:absolute;user-select:none}
.edit-workspace-world>.edit-workspace-upload{position:absolute;left:0;top:0;transform:translate(-50%,-50%)}
/* The upload block sits in a host the PixelCard mounts into (website-studio.js mountEditUploadPixel). */
.edit-workspace-world>.edit-workspace-upload-host{position:absolute;left:0;top:0;width:min(760px,82vw);height:min(620px,76vh);transform:translate(-50%,-50%)}
.edit-workspace-upload-host .edit-workspace-upload{width:100%;height:100%}
.edit-workspace-grid{background-image:radial-gradient(circle at 1px 1px,#45454d 1px,transparent 1.1px)}
.edit-workspace-stage.can-pan #editWorkspaceMask{cursor:grab}
.edit-workspace-panel,.edit-workspace-action,.edit-workspace-dock{background:color-mix(in srgb,var(--edit-surface) 88%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:var(--st-depth-2);scrollbar-color:var(--edit-subtle) transparent}
.edit-camera-panel-title{display:flex;flex-direction:column;gap:4px}
.edit-camera-panel-title h3{margin:0;font-size:16px;font-weight:600}
.edit-camera-panel-title span{font-size:10px;color:var(--edit-muted)}
.edit-workspace-panel-camera{gap:12px;padding:18px}
.edit-workspace-panel-camera .edit-workspace-orbit{display:block;height:auto;min-height:0;padding:0 3px 10px;border-radius:16px;background:rgba(9,11,14,.32)}
.edit-camera-svg{display:block;width:100%;height:220px;overflow:visible;touch-action:none;user-select:none}
.edit-camera-floor{fill:#ffffff02;stroke:#ffffff08;stroke-width:1}
.edit-camera-guide{fill:none;stroke:#8b8c9c44;stroke-width:1;stroke-dasharray:3 5;pointer-events:none}
.edit-camera-ring{fill:none;stroke-width:1.7;cursor:grab;pointer-events:stroke}
.edit-camera-ring.horizontal{stroke:#759affb0}
.edit-camera-ring.vertical{stroke:#5fd8b0c0}
.edit-camera-ring.unavailable{stroke:#66697745;stroke-dasharray:3 5;pointer-events:none}
.edit-camera-sight{stroke:#dcdff138;stroke-width:1;stroke-dasharray:4 4;fill:none;pointer-events:none}
.edit-camera-zoom-rail{stroke:#dedff0a0;stroke-width:2;fill:none;cursor:grab;pointer-events:stroke}
.edit-camera-subject{pointer-events:none}
.edit-camera-subject rect{fill:#2b2d35;stroke:#bec4df88;stroke-width:1}
.edit-camera-subject text{fill:#aeb4c8;font-size:21px}
.edit-camera-handle,.edit-camera-body{cursor:grab;outline:none}
.edit-camera-handle .hit,.edit-camera-body .hit{fill:transparent;stroke:none}
.edit-camera-handle .dot{stroke:#111318;stroke-width:2}
.edit-camera-handle.horizontal .dot{fill:#7c9dff}
.edit-camera-handle.vertical .dot{fill:#6ce1ba}
.edit-camera-body path{fill:#e5e9ff;stroke:#141823;stroke-width:1.5}
.edit-camera-body>circle:not(.hit){fill:#262c40;stroke:#a6b8ff;stroke-width:1}
.edit-camera-handle:focus .dot,.edit-camera-handle:hover .dot{stroke:white;stroke-width:2}
.edit-camera-body:focus path,.edit-camera-body:hover path{fill:white;stroke:#7da2ff;stroke-width:2}
.edit-camera-axis{fill:#767b8d;font-size:9px;letter-spacing:1.3px}
.edit-camera-label{fill:#b7bed1;font-size:11px;font-variant-numeric:tabular-nums}
.edit-camera-legend{display:flex;justify-content:center;gap:14px;font-size:9px;color:#9399ad}
.edit-camera-legend span{display:flex;align-items:center;gap:4px}
.edit-camera-legend i{width:5px;height:5px;border-radius:50%;background:#dfe4f7}
.edit-camera-legend i.horizontal{background:#7c9dff}.edit-camera-legend i.vertical{background:#6ce1ba}
.edit-camera-help{margin:0;font-size:11px;line-height:1.5;color:var(--edit-muted)}
.edit-workspace-panel-camera .edit-workspace-range{display:grid;grid-template-columns:85px minmax(0,1fr) 57px;gap:8px;align-items:center;min-height:30px}
.edit-workspace-panel-camera .edit-workspace-range span{font-size:11px}
.edit-workspace-panel-camera .edit-workspace-range input{width:100%;min-width:0;margin:0}
.edit-workspace-panel-camera .edit-workspace-range output{font-size:11px;text-align:right;font-variant-numeric:tabular-nums}
.edit-camera-limits{display:flex;justify-content:space-between;gap:8px;font-size:9px;color:#858b9d}
.edit-workspace-panel-camera .edit-workspace-presets button{min-height:32px;font-size:11px}
.edit-workspace-panel-camera .edit-workspace-presets button.active{background:#657bb529;border-color:#879fee77}
.edit-workspace[data-busy="true"] .edit-camera-svg{pointer-events:none;opacity:.6}
@media(min-width:1000px) and (max-height:760px){.edit-workspace-panel-camera{gap:8px;padding:13px}.edit-camera-svg{height:180px}.edit-camera-help{font-size:10px}.edit-workspace-panel-camera .edit-workspace-range{min-height:27px}}

/* Relighting: each source keeps its own direction, color and intensity. */
.edit-workspace-panel-lighting{gap:10px;padding:16px;max-height:calc(100dvh - 150px)}
.edit-workspace-panel-upscale{gap:12px;max-height:calc(100dvh - 150px);overflow:hidden}
.edit-workspace-panel-upscale>*{flex-shrink:0}
.edit-workspace-panel-upscale>.edit-upscale-options{flex:1 1 auto;min-height:0;overflow:auto;display:flex;flex-direction:column;gap:12px;scrollbar-width:thin;padding-right:4px}
.edit-upscale-options>*{flex-shrink:0}
.edit-upscale-help{margin:0;color:var(--edit-muted);font-size:11px;line-height:1.5}
.edit-upscale-summary{display:grid;grid-template-columns:auto 1fr;gap:7px 10px;align-items:center;font-size:11px;color:var(--edit-muted)}
.edit-upscale-summary b{text-align:right;font-weight:500;color:var(--edit-text);font-variant-numeric:tabular-nums}
.edit-upscale-controls{display:flex;flex-direction:column;gap:12px;padding-top:14px}
.edit-upscale-faces{display:flex;flex-direction:column;gap:12px;border:0;border-top:1px solid var(--edit-border);margin:0;padding:12px 0 0;min-width:0}
.edit-upscale-faces legend{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.edit-upscale-faces:disabled{opacity:.4}
.edit-sr-model-selector{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;padding:4px;border:1px solid var(--edit-border);border-radius:12px;background:var(--edit-surface-raised)}
.edit-sr-model-selector button{display:flex;min-width:0;min-height:48px;flex-direction:column;align-items:flex-start;justify-content:center;gap:2px;padding:7px 9px;border:1px solid transparent;border-radius:9px;background:transparent;color:var(--edit-text);font:inherit;text-align:left;cursor:pointer}
.edit-sr-model-selector button.active{border-color:color-mix(in srgb,var(--edit-primary) 48%,var(--edit-border));background:color-mix(in srgb,var(--edit-primary) 16%,var(--edit-surface))}.edit-sr-model-selector b{font-size:11px}.edit-sr-model-selector small{color:var(--edit-muted);font-size:8px;line-height:1.3}
.edit-sr-toolbar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}.edit-sr-toolbar button{min-height:34px;padding:5px 8px;border:1px solid var(--edit-border);border-radius:9px;background:var(--edit-surface-raised);color:var(--edit-text);font:inherit;font-size:10px;font-weight:700;cursor:pointer}.edit-sr-toolbar button.active{border-color:#aa6bff;background:color-mix(in srgb,#aa6bff 16%,var(--edit-surface))}.edit-sr-toolbar button:disabled{opacity:.42;cursor:not-allowed}
.edit-sr-region-tabs{display:flex;gap:6px;overflow-x:auto;padding:1px 1px 4px;scrollbar-width:none}.edit-sr-region-tabs::-webkit-scrollbar{display:none}.edit-sr-region-tabs button{--region:#aa6bff;display:grid;place-items:center;flex:0 0 29px;width:29px;height:29px;padding:0;border:1px solid var(--region);border-radius:8px;background:transparent;color:var(--region);font:inherit;font-size:10px;font-weight:800;cursor:pointer}.edit-sr-region-tabs button.green{--region:#3fc978}.edit-sr-region-tabs button.blue{--region:#4da9ff}.edit-sr-region-tabs button.orange{--region:#ff9b42}.edit-sr-region-tabs button.active{background:var(--region);color:#fff}
.edit-sr-empty-card,.edit-sr-region-card{padding:11px;border:1px solid var(--edit-border);border-radius:12px;background:var(--edit-surface-raised)}.edit-sr-empty-card{display:flex;flex-direction:column;gap:5px}.edit-sr-empty-card b{font-size:11px}.edit-sr-empty-card span{color:var(--edit-muted);font-size:9px;line-height:1.45}
.edit-sr-region-card{display:flex;flex-direction:column;gap:9px}.edit-sr-region-card>header{display:flex;align-items:center;gap:8px}.edit-sr-region-card>header>span{display:grid;place-items:center;width:28px;height:28px;border-radius:8px;background:#aa6bff;color:#fff;font-size:10px;font-weight:850}.edit-sr-region-card>header div{min-width:0;flex:1}.edit-sr-region-card>header b,.edit-sr-region-card>header small{display:block}.edit-sr-region-card>header b{font-size:11px}.edit-sr-region-card>header small{margin-top:2px;color:var(--edit-muted);font-size:8px}.edit-sr-region-card>header>button{width:25px;height:25px;border:1px solid var(--edit-border);border-radius:8px;background:var(--edit-surface);color:var(--edit-text);cursor:pointer}
.edit-sr-region-card>label{display:flex;flex-direction:column;gap:5px;color:var(--edit-muted);font-size:9px;font-weight:700}.edit-sr-region-card textarea{box-sizing:border-box;width:100%;min-height:68px;padding:8px 9px;border:1px solid var(--edit-border);border-radius:8px;background:var(--edit-surface);color:var(--edit-text);font:inherit;font-size:10px;line-height:1.45;outline:none;resize:vertical}.edit-sr-region-card label>small{text-align:right;color:var(--edit-subtle);font-size:8px}.edit-sr-optional{float:right;color:var(--edit-subtle);font-size:8px;font-weight:500}
.edit-sr-reference{position:relative}.edit-sr-reference>button:first-child{display:flex;align-items:center;justify-content:center;gap:7px;width:100%;min-height:48px;padding:5px;border:1px dashed var(--edit-border-strong);border-radius:9px;background:var(--edit-surface);color:var(--edit-text);font:inherit;font-size:9px;font-weight:700;cursor:pointer;overflow:hidden}.edit-sr-reference img{width:38px;height:38px;border-radius:7px;object-fit:cover}.edit-sr-reference>button:last-child{position:absolute;right:5px;top:5px;width:21px;height:21px;border:0;border-radius:50%;background:#000b;color:#fff;cursor:pointer}
.edit-sr-reference-limit{margin:0;color:var(--edit-subtle);font-size:9px;line-height:1.4}
.edit-sr-overlay{position:absolute;inset:0;z-index:4;pointer-events:none;touch-action:none}.edit-sr-overlay.drawing{pointer-events:auto;cursor:crosshair}.edit-sr-region{--region:#aa6bff;position:absolute;padding:0;border:2px solid var(--region);background:color-mix(in srgb,var(--region) 13%,transparent);color:#fff;pointer-events:auto;cursor:pointer;box-shadow:0 0 0 1px #0008}.edit-sr-region.green{--region:#3fc978}.edit-sr-region.blue{--region:#4da9ff}.edit-sr-region.orange{--region:#ff9b42}.edit-sr-region.selected{border-width:3px;box-shadow:0 0 0 2px #fff,0 0 15px var(--region)}.edit-sr-region.failed{border-style:dashed}.edit-sr-region span{position:absolute;left:-2px;top:-2px;display:grid;place-items:center;min-width:22px;height:22px;padding:0 4px;border-radius:6px 6px 6px 0;background:var(--region);color:#fff;font-size:9px;font-weight:850;transform:translateY(-100%)}.edit-sr-draft{position:absolute;border:2px dashed #aa6bff;background:#aa6bff24;pointer-events:none}
.edit-sr-guide-lines{position:absolute;inset:0;z-index:0;width:1px;height:1px;overflow:visible;pointer-events:none}.edit-sr-guide-line{fill:none;stroke:#ad73ff;stroke-width:2;stroke-linecap:round;vector-effect:non-scaling-stroke;filter:drop-shadow(0 0 5px #9657ed88);animation:edit-sr-line-in .35s ease both}
.edit-sr-reference-node{position:absolute;left:0;top:0;z-index:7;box-sizing:border-box;width:64px;height:64px;overflow:visible;border:1px solid #b57aff;border-radius:12px;background:color-mix(in srgb,var(--edit-surface) 90%,#9f62ff 10%);box-shadow:0 7px 22px #0005,0 0 0 3px #9f62ff16;color:var(--edit-text);cursor:grab;outline:none;touch-action:none;user-select:none}.edit-sr-reference-node:hover,.edit-sr-reference-node:focus-visible,.edit-sr-reference-node.selected{border-color:#d8bcff;box-shadow:0 8px 24px #0006,0 0 0 3px #a66cff38}.edit-sr-reference-node.is-moving{cursor:grabbing;z-index:9}.edit-sr-reference-node>span{display:grid;width:100%;height:100%;place-items:center;color:#cda9ff;font-size:27px;font-weight:300}.edit-sr-reference-node>img{display:block;width:100%;height:100%;border-radius:11px;object-fit:cover}.edit-sr-reference-node>b{position:absolute;left:-8px;top:-8px;display:grid;min-width:20px;height:20px;padding:0 3px;place-items:center;border:2px solid var(--edit-surface);border-radius:7px;background:#9f62ff;color:#fff;font-size:9px}.edit-sr-reference-node>i{position:absolute;right:-6px;bottom:-6px;display:grid;width:18px;height:18px;place-items:center;border:2px solid var(--edit-surface);border-radius:50%;background:#58b8ff;color:#07111c;font-size:8px;font-style:normal;font-weight:900}
@keyframes edit-sr-line-in{from{opacity:0;stroke-dasharray:2 12}to{opacity:1;stroke-dasharray:0 0}}
.edit-workspace-panel-upscale .edit-workspace-range{display:grid;grid-template-columns:112px minmax(0,1fr) 28px;gap:8px!important;align-items:center;min-height:27px}
.edit-workspace-panel-upscale .edit-workspace-range span{font-size:11px}
.edit-workspace-panel-upscale .edit-workspace-range input[type=range]{grid-column:auto;width:100%;min-width:0;margin:0}
.edit-workspace-panel-upscale .edit-workspace-range output{text-align:right;font-size:11px;font-variant-numeric:tabular-nums}
.edit-workspace-panel-lighting>*{flex-shrink:0}
.edit-light-title{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.edit-light-title h3{font-size:16px;font-weight:600;margin:0}
.edit-light-title span{font-size:10px;color:var(--edit-muted)}
.edit-light-orbit{border-radius:18px;background:rgba(9,11,14,.32);overflow:hidden;padding-bottom:12px}
.edit-light-svg{display:block;width:100%;height:225px;touch-action:none;user-select:none}
.edit-light-grid{fill:none;stroke:#718098;stroke-opacity:.10;stroke-width:.6;pointer-events:none}
.edit-light-ring{fill:none;stroke-width:1.8;cursor:grab;pointer-events:stroke}
.edit-light-ring.horizontal{stroke:#678cff}.edit-light-ring.vertical{stroke:#b461ff}
.edit-light-beam{pointer-events:none;transition:fill .15s,opacity .15s}
.edit-light-subject{pointer-events:none}.edit-light-subject rect{fill:#161b26;stroke:#65749a;stroke-width:1.4}.edit-light-subject text{fill:#9aa9ce;font-size:20px}
.edit-light-handle{cursor:grab;outline:none}.edit-light-handle .hit,.edit-light-lamp .hit{fill:transparent;stroke:none}
.edit-light-handle .dot{stroke:#12151d;stroke-width:1.5}.edit-light-handle.horizontal .dot{fill:#a6bdff}.edit-light-handle.vertical .dot{fill:#d197ff}
.edit-light-handle:focus-visible .dot,.edit-light-handle:hover .dot{stroke:white;stroke-width:2}
.edit-light-lamp{cursor:pointer;outline:none;color:var(--light-color)}.edit-light-lamp .halo{fill:currentColor;pointer-events:none}
.edit-light-lamp path{fill:currentColor;stroke:#111a;stroke-width:.6}.edit-light-lamp .lamp-left{filter:brightness(.65)}.edit-light-lamp .lamp-right{filter:brightness(.85)}
.edit-light-lamp text{fill:#a3afc9;font-size:9px;pointer-events:none}.edit-light-lamp.off{opacity:.35}.edit-light-lamp.active text{fill:white}
.edit-light-lamp.active .lamp-top,.edit-light-lamp:focus-visible path,.edit-light-lamp:hover path{stroke:#edf1ff;stroke-width:1}
.edit-light-legend{display:flex;justify-content:center;gap:18px;font-size:9px;color:#8d97ae}.edit-light-legend span{display:flex;gap:5px;align-items:center}
.edit-light-legend i{width:5px;height:5px;border-radius:50%;background:#a6bdff}.edit-light-legend span:nth-child(2) i{background:#d197ff}
.edit-light-source-row{display:flex;gap:7px;min-width:0}.edit-light-source-row .edit-workspace-light-head{flex:1;min-width:0;padding:2px}
.edit-workspace-panel-lighting .edit-workspace-light-chip{font-size:11px;min-height:31px}.edit-workspace-light-chip.off i{opacity:.3}.edit-workspace-light-chip.off{color:var(--edit-muted)}
.edit-light-actions{display:flex;justify-content:space-between;gap:12px}.edit-light-actions button{padding:4px 7px;font:inherit;font-size:11px;color:var(--edit-muted);border:0;background:transparent;cursor:pointer}
.edit-light-actions button[aria-pressed="true"]{color:#d5c0ff}.edit-light-actions button:disabled,.edit-workspace-add-light:disabled{opacity:.35;cursor:default}
.edit-workspace-panel-lighting .edit-workspace-presets{gap:5px}.edit-workspace-panel-lighting .edit-workspace-presets button{min-height:28px;font-size:10px;padding:4px}
.edit-workspace-panel-lighting .edit-workspace-presets button.active{border-color:#aa83ec88;background:#845dc429}
.edit-workspace-panel-lighting .edit-workspace-range{display:grid;grid-template-columns:80px minmax(0,1fr) 52px;gap:8px!important;align-items:center;min-height:27px;font-size:11px}
.edit-workspace-panel-lighting .edit-workspace-range input[type=range]{grid-column:auto;width:100%;min-width:0;margin:0;accent-color:#a689ed}
.edit-workspace-panel-lighting .edit-workspace-range output{text-align:right;font-size:11px;font-variant-numeric:tabular-nums}
.edit-light-color-row{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:11px}
.edit-light-color-row label{display:flex;align-items:center;gap:15px}.edit-light-color-row input[type="color"]{width:30px;height:26px;border:0;padding:0;background:none;cursor:pointer}
.edit-light-color-row input[data-light-hex]{width:86px;background:var(--edit-surface-raised);color:var(--edit-text);border:1px solid var(--edit-border);border-radius:7px;padding:6px;font:inherit;text-align:center}
.edit-workspace[data-busy="true"] .edit-light-svg{pointer-events:none;opacity:.6}
@media(min-width:1000px) and (max-height:800px){.edit-workspace-panel-lighting{gap:7px;padding:12px}.edit-light-svg{height:180px}.edit-workspace-panel-lighting .edit-camera-help{font-size:10px}}
@media(prefers-reduced-motion:reduce){.edit-light-beam{transition:none}}

/* Session history stays in the existing infinite world. New results arrive
   inside their reserved cards; animations never represent numerical progress. */
.edit-chain-node{position:absolute;left:0;top:0;overflow:visible;cursor:grab;outline:none;touch-action:none}
.edit-chain-node:focus-visible .edit-workspace-frame{outline:2px solid color-mix(in srgb,var(--edit-muted) 75%,transparent);outline-offset:4px}
.edit-chain-node.is-moving{z-index:2}
.edit-workspace-stage.is-moving-node,.edit-workspace-stage.is-moving-node *{cursor:grabbing!important}
.edit-chain-node .edit-workspace-frame{inset:0;width:100%;height:100%;border-radius:10px;box-shadow:0 4px 18px var(--st-shadow);outline:1px solid var(--edit-border-strong);overflow:hidden}
.edit-chain-node.is-entering .edit-workspace-frame{animation:edit-chain-enter .55s ease both}
.edit-chain-node .edit-workspace-image{opacity:0;transition:opacity .65s ease;z-index:1}
.edit-chain-node[data-media="ready"] .edit-workspace-image{opacity:1}
.edit-chain-node #editWorkspaceMask{z-index:2}
.edit-chain-node[data-status="pending"] .edit-workspace-frame,.edit-chain-node[data-status="failed"] .edit-workspace-frame{background:var(--edit-surface);background-image:none}
.edit-chain-caption{position:absolute;top:100%;left:0;width:100%;padding:10px 0;color:var(--edit-muted);font-size:11px;line-height:1.4;text-align:center;white-space:nowrap;cursor:grab;user-select:none}
.edit-chain-lines{position:absolute;inset:0;width:1px;height:1px;overflow:visible;pointer-events:none}
.edit-chain-line{fill:none;stroke:var(--edit-subtle);stroke-width:1.5;vector-effect:non-scaling-stroke;marker-end:url(#edit-chain-arrow);animation:edit-chain-appear .55s ease both}
#edit-chain-arrow path{fill:none;stroke:var(--edit-subtle);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.edit-workspace-world.is-advancing{transition:transform .55s cubic-bezier(.2,.7,.2,1)}
.edit-chain-wait{position:absolute;inset:0;overflow:hidden;background:var(--edit-surface);opacity:1;transition:opacity .6s ease;pointer-events:none;border-radius:inherit}
.edit-chain-wait i{position:absolute;width:85%;height:110%;left:-20%;top:-25%;border-radius:50%;background:radial-gradient(ellipse,color-mix(in srgb,var(--st-accent,#6d9bff) 25%,transparent),transparent 70%);filter:blur(14px);animation:edit-chain-float 7s ease-in-out infinite alternate}
.edit-chain-wait i:nth-child(2){left:35%;top:30%;background:radial-gradient(ellipse,color-mix(in srgb,var(--st-success,#66d9a8) 18%,transparent),transparent 70%);animation-duration:9s;animation-delay:-3s}
.edit-chain-wait i:nth-child(3){left:25%;top:-20%;background:radial-gradient(ellipse,color-mix(in srgb,var(--edit-text) 9%,transparent),transparent 70%);animation-duration:11s;animation-delay:-5s}
.edit-chain-node[data-media="ready"] .edit-chain-wait,.edit-chain-node[data-media="error"] .edit-chain-wait,.edit-chain-node[data-status="failed"] .edit-chain-wait{opacity:0;visibility:hidden;transition:opacity .6s ease,visibility 0s .6s}
.edit-chain-node[data-media="ready"] .edit-chain-wait i,.edit-chain-node[data-status="failed"] .edit-chain-wait i,.edit-chain-node[data-media="error"] .edit-chain-wait i{animation:none}
.edit-chain-failure,.edit-chain-media-error{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:18px;border:0;background:var(--edit-surface);color:var(--edit-text);font:inherit;font-size:12px;text-align:center}
.edit-chain-failure span{font-size:11px;line-height:1.5;color:var(--edit-muted)}
.edit-chain-media-error{width:100%;height:100%;cursor:pointer}
@keyframes edit-chain-float{from{transform:translate(-8%,-6%) scale(.9)}to{transform:translate(35%,28%) scale(1.15)}}
@keyframes edit-chain-appear{from{opacity:0}to{opacity:1}}
@keyframes edit-chain-enter{from{opacity:0;transform:translateX(10px) scale(.98)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.edit-chain-node,.edit-workspace-world.is-advancing,.edit-chain-node .edit-workspace-image,.edit-chain-wait,.edit-chain-line{transition:none}.edit-chain-wait i,.edit-chain-line,.edit-chain-node.is-entering .edit-workspace-frame{animation:none}}

/* Shared appearance: native controls and body-mounted Edit use the same
   resolved palette as Pro Studio. Media pixels and light swatches are content. */
.view[data-view="tools"] .studio,.edit-workspace{color-scheme:var(--st-color-scheme,dark);color:var(--st-text)}
.edit-workspace{--edit-violet:light-dark(#7938b2,#c69aff)}
.edit-workspace-grid{background-image:radial-gradient(circle at 1px 1px,var(--st-grid-line,rgba(128,128,128,.22)) 1px,transparent 1.1px);opacity:1}
.edit-workspace-upload{border-color:var(--edit-border-strong);background:var(--edit-surface);color:var(--edit-text)}
.edit-workspace-upload span,.edit-workspace-upload small{color:var(--edit-muted)}
.edit-workspace-panel{scrollbar-color:var(--edit-subtle) transparent}
.edit-workspace-presets button,.edit-workspace-subtle,.edit-workspace-light-chip,.edit-workspace-add-light,
.edit-workspace-light-tools button,.edit-workspace-model,.edit-workspace-select-row select,
.edit-workspace-dimensions input,.edit-workspace-translate-search input,.edit-workspace-action-row label input,
.edit-workspace-color input{border-color:var(--edit-border-strong);background:var(--edit-surface-raised);color:var(--edit-text)}
.edit-workspace-presets button:hover,.edit-workspace-presets button.active,.edit-workspace-light-chip.active,
.edit-workspace-action-row>button.active{border-color:color-mix(in srgb,var(--edit-muted) 70%,transparent);background:var(--edit-selected);color:var(--edit-text)}
.edit-workspace-range,.edit-workspace-action textarea,.edit-workspace-hex input[aria-label="HEX color"]{color:var(--edit-text)}
.edit-workspace-dimensions label,.edit-workspace-action>p,.edit-workspace-action-row label{color:var(--edit-muted)}
.edit-workspace input::placeholder,.edit-workspace textarea::placeholder{color:var(--edit-subtle);opacity:1}
.edit-workspace-segment{background:var(--edit-bg)}
.edit-workspace-segment button{color:var(--edit-muted)}
.edit-workspace-segment button.active{background:var(--edit-surface-raised);color:var(--edit-text)}
.edit-workspace-language-list,.edit-workspace-language-list button{border-color:var(--edit-border);color:var(--edit-text)}
.edit-workspace-language-list button.active{background:var(--edit-selected)}
.edit-workspace-language-list small,.edit-workspace-language-list button>b{color:var(--edit-muted)}
.edit-workspace-hex i{border-color:var(--edit-border-strong)}
.edit-workspace-orbit,.edit-workspace-panel-camera .edit-workspace-orbit,.edit-light-orbit{border-color:var(--edit-border);background:color-mix(in srgb,var(--edit-bg) 60%,transparent)}
.edit-workspace-panel-camera .edit-workspace-range input,
.edit-workspace-panel-upscale .edit-workspace-range input[type=range]{accent-color:var(--edit-primary)}
.edit-workspace-panel-lighting .edit-workspace-range input[type=range]{accent-color:var(--edit-violet)}
.edit-workspace-panel-lighting .edit-workspace-presets button.active{border-color:var(--edit-violet);background:color-mix(in srgb,var(--edit-violet) 12%,transparent)}
.edit-camera-floor{fill:color-mix(in srgb,var(--edit-text) 2%,transparent);stroke:var(--edit-border)}
.edit-camera-guide,.edit-camera-ring.unavailable{stroke:var(--edit-border-strong)}
.edit-camera-sight{stroke:var(--edit-subtle)}
.edit-camera-zoom-rail{stroke:var(--edit-muted)}
.edit-camera-subject rect,.edit-light-subject rect{fill:var(--edit-surface-raised);stroke:var(--edit-subtle)}
.edit-camera-subject text,.edit-light-subject text{fill:var(--edit-muted)}
.edit-camera-handle .dot,.edit-light-handle .dot{stroke:var(--edit-bg)}
.edit-camera-handle.horizontal .dot,.edit-light-handle.horizontal .dot{fill:var(--st-accent,#6d9bff)}
.edit-camera-ring.horizontal,.edit-light-ring.horizontal{stroke:var(--st-accent,#6d9bff)}
.edit-camera-handle.vertical .dot{fill:var(--st-success,#66d9a8)}
.edit-camera-ring.vertical{stroke:var(--st-success,#66d9a8)}
.edit-light-handle.vertical .dot{fill:var(--edit-violet)}
.edit-light-ring.vertical{stroke:var(--edit-violet)}
.edit-camera-handle:focus .dot,.edit-camera-handle:hover .dot,
.edit-light-handle:focus-visible .dot,.edit-light-handle:hover .dot{stroke:var(--edit-text)}
.edit-camera-body path{fill:var(--edit-text);stroke:var(--edit-bg)}
.edit-camera-body>circle:not(.hit){fill:var(--edit-surface);stroke:var(--st-accent,#6d9bff)}
.edit-camera-body:focus path,.edit-camera-body:hover path{fill:var(--edit-text);stroke:var(--st-accent,#6d9bff)}
.edit-camera-axis{fill:var(--edit-subtle)}
.edit-camera-label,.edit-light-lamp text{fill:var(--edit-muted)}
.edit-light-lamp.active text{fill:var(--edit-text)}
.edit-camera-legend,.edit-light-legend,.edit-camera-limits{color:var(--edit-muted)}
.edit-camera-legend i{background:var(--edit-muted)}
.edit-camera-legend i.horizontal,.edit-light-legend i{background:var(--st-accent,#6d9bff)}
.edit-camera-legend i.vertical{background:var(--st-success,#66d9a8)}
.edit-light-legend span:nth-child(2) i{background:var(--edit-violet)}
.edit-light-grid{stroke:var(--edit-text);stroke-opacity:.09}
.edit-light-lamp.active .lamp-top,.edit-light-lamp:focus-visible path,.edit-light-lamp:hover path{stroke:var(--edit-text)}
.edit-light-actions button[aria-pressed="true"]{color:var(--edit-violet)}
.edit-workspace.is-dragging::after{border-color:var(--st-accent,#6d9bff);background:color-mix(in srgb,var(--edit-surface) 90%,transparent);color:var(--edit-text)}

/* Grid details missing from the existing --st-* theme rules. Preserve
   semantic statuses and connection highlighting in either appearance. */
.studio-grid-clarification{color:var(--st-text)}
.studio-grid-clarification:before{color:var(--st-accent)}
.studio-grid-node.locked:before{color:var(--st-warning)}
.studio-grid-drawer-new{background:var(--st-bg-3);color:var(--st-text);border-color:var(--st-border)}

.studio-grid-video-viewer[hidden]{display:none!important}.studio-grid-video-viewer{position:fixed;z-index:140000;inset:0;display:grid;place-items:center;padding:24px}.studio-grid-video-viewer-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}.studio-grid-video-viewer>section{position:relative;z-index:1;width:min(1120px,calc(100vw - 48px));height:min(78dvh,760px);display:grid;place-items:center;overflow:hidden;border:1px solid rgba(255,255,255,.16);border-radius:22px;background:#050505;box-shadow:0 28px 100px rgba(0,0,0,.65)}.studio-grid-video-viewer video{display:block;width:100%;height:100%;object-fit:contain;background:#050505}.studio-grid-video-viewer section>button{position:absolute;z-index:2;right:14px;top:14px;width:38px;height:38px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.2);border-radius:50%;background:rgba(12,12,14,.78);color:#fff;font-size:24px;line-height:1;cursor:pointer;backdrop-filter:blur(10px)}body.studio-grid-media-viewer-open{overflow:hidden}@media(max-width:700px){.studio-grid-video-viewer{padding:8px}.studio-grid-video-viewer>section{width:calc(100vw - 16px);height:min(82dvh,760px);border-radius:16px}.studio-grid-video-viewer section>button{right:9px;top:9px}}
.view[data-view="tools"].active .studio-grid-port.connection-source{background:var(--st-accent)!important}
.view[data-view="tools"].active .studio-grid-edges path{stroke:var(--st-dim)!important}
.view[data-view="tools"].active .studio-grid-edges g:hover path{stroke:var(--st-danger)!important}
.view[data-view="tools"].active .studio-grid-edges .studio-grid-edge-hit{stroke:transparent!important;stroke-opacity:0!important;stroke-width:18!important;pointer-events:stroke!important}
.view[data-view="tools"].active .studio-grid-edges .studio-grid-edge-line{stroke-width:2!important;pointer-events:none!important}
.view[data-view="tools"].active .studio-grid-edges g:hover .studio-grid-edge-hit{stroke:transparent!important;stroke-opacity:0!important}
.view[data-view="tools"].active .studio-grid-edges g:hover .studio-grid-edge-line{stroke:var(--st-danger)!important;stroke-width:4!important}
.studio-grid-video-viewer section>.studio-grid-video-download{left:14px;right:auto;font-size:0}
.studio-grid-video-viewer section>.studio-grid-video-download[hidden]{display:none!important}
.studio-grid-video-download svg{width:18px;height:18px}
.studio-grid-video-error{position:absolute;z-index:2;left:50%;bottom:18px;max-width:calc(100% - 36px);margin:0;padding:8px 12px;border-radius:10px;background:rgba(12,12,14,.84);color:#fff;font-size:12px;text-align:center;transform:translateX(-50%)}
.studio-grid-video-error[hidden]{display:none!important}
.studio-grid-media-preview video{pointer-events:none}
.studio-grid-download-menu[hidden]{display:none!important}.studio-grid-download-menu{position:fixed;z-index:150500;width:220px;box-sizing:border-box;padding:10px;border:1px solid var(--st-border,rgba(255,255,255,.12));border-radius:14px;background:var(--st-bg-2,#202126);color:var(--st-text,#f5f5f7);box-shadow:0 18px 50px rgba(0,0,0,.42);backdrop-filter:blur(18px)}.studio-grid-download-menu>strong{display:block;margin:0 0 8px;font-size:11px}.studio-grid-download-menu>div{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}.studio-grid-download-menu>div button{height:42px;padding:0;overflow:hidden;border:1px solid var(--st-border,rgba(255,255,255,.12));border-radius:8px;background:var(--st-bg-3,#15161a);color:inherit;cursor:pointer}.studio-grid-download-menu>div img{display:block;width:100%;height:100%;object-fit:cover}.studio-grid-download-menu .studio-grid-download-all{width:100%;height:32px;margin-top:8px;display:flex;align-items:center;justify-content:center;gap:7px;border:0;border-radius:9px;background:var(--st-text,#f5f5f7);color:var(--st-bg,#111);font:700 10px/1 inherit;cursor:pointer}.studio-grid-download-all svg{width:14px;height:14px}
.view[data-view="tools"].active .studio-grid-node-tools button.running,
.view[data-view="tools"].active .studio-grid-header #studioGridRunWorkflow.running{color:var(--st-danger)!important;background:color-mix(in srgb,var(--st-danger) 12%,transparent)!important;border-color:var(--st-danger)!important}

/* Edit sessions share the site theme and float over the same infinite canvas. */
.edit-workspace-sidebar{position:absolute;z-index:4;left:16px;top:16px;bottom:88px;width:224px;box-sizing:border-box;display:flex;flex-direction:column;gap:16px;padding:16px;border:1px solid var(--edit-border);border-radius:20px;background:color-mix(in srgb,var(--edit-surface) 90%,transparent);color:var(--edit-text);backdrop-filter:blur(12px);box-shadow:var(--st-depth-2)}
.edit-workspace-sidebar header{display:flex;align-items:center;justify-content:space-between;font-size:18px}
.edit-workspace-sidebar button,.edit-sidebar-toggle{font:inherit;color:var(--edit-text);border:1px solid var(--edit-border);background:var(--edit-surface-raised);border-radius:10px;cursor:pointer}
.edit-workspace-sidebar header button{width:30px;height:30px;font-size:22px}
.edit-workspace-sidebar nav{display:grid;gap:4px;padding-bottom:14px;border-bottom:1px solid var(--edit-border)}
.edit-workspace-sidebar nav button{text-align:left;padding:10px;border-color:transparent;background:transparent}
.edit-workspace-sidebar nav button[aria-current],.edit-workspace-sidebar button:hover,.edit-session-item.active{background:var(--edit-selected);border-color:var(--edit-border-strong)}
.edit-workspace-sidebar .edit-session-new{padding:11px 8px;font-size:12px;font-weight:600}
.edit-workspace-sidebar h3{font-size:12px;font-weight:500;margin:0;color:var(--edit-muted)}
.edit-workspace-sidebar #editSessionList{flex:1;min-height:0;overflow:auto;scrollbar-width:thin;display:flex;flex-direction:column;gap:8px}
.edit-workspace-sidebar .edit-session-item{display:flex;align-items:center;gap:9px;padding:7px;text-align:left;flex:none}
.edit-session-row{display:flex;align-items:center;gap:2px;min-width:0}.edit-session-row>.edit-session-item{flex:1;min-width:0}.edit-session-row>.history-item-menu{margin-left:auto}
.edit-session-item img{width:40px;height:44px;object-fit:contain;border-radius:5px;background:transparent}
.edit-session-item span{display:grid;gap:5px;min-width:0}.edit-session-item b{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:11px;font-weight:500}.edit-session-item small{font-size:10px;color:var(--edit-muted)}
.edit-session-empty,#editSessionSync{font-size:11px;line-height:1.5;color:var(--edit-muted)}
.edit-session-more{padding:9px;font-size:11px!important}
.edit-sidebar-toggle{position:absolute;z-index:4;top:18px;left:18px;width:40px;height:38px;font-size:20px}
.edit-workspace[data-sidebar="true"] .edit-sidebar-toggle,.edit-workspace[data-sidebar="false"] .edit-workspace-sidebar{display:none}
.edit-workspace[data-sidebar="true"] .edit-workspace-canvas-actions{max-width:calc(100% - 335px)}
.edit-workspace[data-sidebar="true"] .edit-workspace-action{left:calc(50% + 120px);width:min(880px,calc(100vw - 310px))}
.edit-workspace[data-sidebar="true"] .edit-workspace-status{left:calc(50% + 120px);max-width:calc(100vw - 310px)}
/* On the website, retain the actual Pro Studio sidebar and its interactions.
   A separate history slot prevents background gallery refreshes from replacing
   Edit sessions. The canvas itself still fills the entire workspace. */
body.edit-workspace-open #sxSidebar.has-edit-history{z-index:1000021}
body.edit-workspace-open :is(.sx-account-menu,.sx-search-overlay){z-index:1000022}
.sx-sidebar.has-edit-history #sxSidebarHistory{display:none!important}
.sx-sidebar.has-grid-history #sxSidebarHistory{display:none!important}
.sx-sidebar.has-workspace-history #sxSidebarHistory{display:none!important}
#workspaceSidebarHistory .sx-sidebar-history-item{width:100%;flex-shrink:0;border:0;background:transparent;text-align:left;font-family:inherit;cursor:pointer}
#workspaceSidebarHistory .sx-sidebar-history-item:hover{background:var(--sx-bg-2);color:var(--sx-text)}
#workspaceSidebarHistory .sx-sidebar-history-item.active{background:transparent;color:var(--sx-text);box-shadow:inset 0 0 0 1px var(--sx-border,var(--edit-border-strong))}
.workspace-sidebar-history-heading{padding:2px 6px 0;color:var(--sx-text-mute);font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.workspace-history-star{flex:0 0 auto;margin-left:4px;font-size:10px;line-height:1;color:var(--sx-text-mute)}
.sx-sidebar.is-collapsed #workspaceSidebarHistory .workspace-sidebar-history-heading{display:none}
.sx-sidebar .sx-sidebar-newchat{border:0!important;background:transparent!important;box-shadow:none!important;font-size:12px!important}
.sx-sidebar .sx-sidebar-history-item{border:0!important;background:transparent;font-size:11.5px!important}
.sx-sidebar .sx-sidebar-history-item.active{box-shadow:inset 0 0 0 1px var(--sx-border,var(--edit-border-strong))}
.sx-sidebar-history-row{position:relative;display:flex;align-items:center;gap:2px;width:100%;min-width:0}
.sx-sidebar .sx-sidebar-history-list{gap:4px}
.sx-sidebar-history-row>.sx-sidebar-history-item{flex:1;min-width:0;font-size:11.5px!important}
.sx-sidebar-history-row>.history-item-menu{margin-right:2px}
#editSidebarHistory .sx-sidebar-history-item{flex-shrink:0;border:0;background:transparent;text-align:left;font-family:inherit;cursor:pointer}
#editSidebarHistory .sx-sidebar-history-item:hover{background:var(--sx-bg-2);color:var(--sx-text)}
#editSidebarHistory .sx-sidebar-history-item.active{background:transparent;color:var(--sx-text);box-shadow:inset 0 0 0 1px var(--sx-border,var(--edit-border-strong))}
#editSidebarHistory button:disabled{opacity:.5;cursor:default}
#editSidebarHistory #editSessionSync{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
#editSidebarHistory .edit-sidebar-history-heading{padding:2px 6px 0;color:var(--sx-text-mute);font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.sx-sidebar.is-collapsed #editSidebarHistory .edit-sidebar-history-heading{display:none}
#studioGridSidebarHistory .sx-sidebar-history-item{width:100%;flex-shrink:0;border:0;background:transparent;text-align:left;font-family:inherit;cursor:pointer}
#studioGridSidebarHistory .sx-sidebar-history-item:hover{background:var(--sx-bg-2);color:var(--sx-text)}
#studioGridSidebarHistory .sx-sidebar-history-item.active{background:transparent;color:var(--sx-text);box-shadow:inset 0 0 0 1px var(--sx-border,var(--edit-border-strong))}
#studioGridSidebarHistory button:disabled{opacity:.5;cursor:default}
.studio-grid-sidebar-history-heading{padding:2px 6px 0;color:var(--sx-text-mute);font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
#studioGridSidebarHistory>[data-grid-sync-status]{padding:0 6px;color:var(--sx-text-mute);font-size:10px;line-height:1.35}
.sx-sidebar.is-collapsed #studioGridSidebarHistory :is(.studio-grid-sidebar-history-heading,[data-grid-sync-status]){display:none}
.edit-workspace[data-shared-sidebar="true"] :is(.edit-workspace-action,.edit-workspace-status,.edit-workspace-dock){left:calc(50% + var(--sx-sidebar-w,256px)/2);max-width:calc(100% - var(--sx-sidebar-w,256px) - 36px)}
.edit-workspace[data-shared-sidebar="true"] .edit-workspace-action{width:min(880px,calc(100% - var(--sx-sidebar-w,256px) - 60px))}
.edit-workspace[data-shared-sidebar="true"] .edit-workspace-canvas-actions{max-width:calc(100% - var(--sx-sidebar-w,256px) - 100px)}
/* Let real image alpha reveal the canvas grid; never flatten it onto a card. */
.edit-chain-node[data-status="ready"] .edit-workspace-frame{background:transparent;box-shadow:none}

.edit-workspace-panel-camera>*{flex-shrink:0}

/* Expand adds canvas around the untouched image. Only the new margins have
   a checker preview; the source's own alpha keeps showing the workspace. */
.edit-chain-node.is-expanding{z-index:2}
.edit-chain-node.is-expanding .edit-workspace-frame{border-radius:0;outline:none}
.edit-expand-preview{position:absolute;inset:0;pointer-events:none}
.edit-expand-margin{position:absolute;background-color:var(--st-accent-bg,rgba(109,155,255,.12));background-image:repeating-conic-gradient(color-mix(in srgb,var(--edit-text) 7%,transparent) 0% 25%,transparent 0% 50%);background-size:16px 16px}
.edit-expand-handles{position:absolute;z-index:3;pointer-events:none;outline:calc(1px * var(--edit-expand-ui-scale,1)) dashed var(--st-accent,#6d9bff)}
.edit-expand-handles button{position:absolute;pointer-events:auto;width:28px;height:28px;display:grid;place-items:center;padding:0;border:1px solid var(--edit-border-strong);border-radius:8px;background:var(--edit-surface-raised);color:var(--edit-text);font:inherit;font-size:18px;line-height:1;touch-action:none;user-select:none;transform:translate(-50%,-50%) scale(var(--edit-expand-ui-scale,1));box-shadow:0 2px 8px var(--st-shadow,rgba(0,0,0,.25))}
.edit-expand-handles button:hover,.edit-expand-handles button:focus-visible{background:var(--st-accent,#6d9bff);color:var(--st-accent-text,#fff)}
.edit-expand-handles [data-expand-handle="left"]{left:0;top:50%;cursor:ew-resize}
.edit-expand-handles [data-expand-handle="right"]{left:100%;top:50%;cursor:ew-resize}
.edit-expand-handles [data-expand-handle="top"]{left:50%;top:0;cursor:ns-resize}
.edit-expand-handles [data-expand-handle="bottom"]{left:50%;top:100%;cursor:ns-resize}
.edit-expand-handles button:disabled{cursor:default;opacity:.4}
.edit-workspace-action-expand .edit-expand-dimensions{justify-content:flex-start;flex-wrap:wrap}
.edit-workspace[data-mode="expand"] .edit-expand-dimensions label input{width:84px}
.edit-expand-offsets{font-size:11px;color:var(--edit-muted)}
.edit-expand-offsets summary{cursor:pointer;width:fit-content;padding:4px 0}
.edit-expand-offsets .edit-workspace-action-row{flex-wrap:wrap;margin-top:8px}
.edit-workspace-action-expand textarea{min-height:46px;height:46px}

/* Two Background modes; photo and color are compact replacement choices. */
.edit-background-controls{display:grid;gap:12px}
.edit-background-footer{display:flex;align-items:center;justify-content:space-between;gap:16px}
.edit-background-toolbar,.edit-background-replacement{display:flex;align-items:center;gap:10px}
.edit-background-toolbar{flex-wrap:wrap}
.edit-background-mode{min-width:150px;min-height:40px;padding:10px 18px;border:1px solid var(--edit-border);border-radius:11px;background:var(--edit-surface-raised);color:var(--edit-text);font:inherit;font-size:12px;cursor:pointer}
.edit-background-mode[aria-pressed="true"]{border-color:var(--edit-primary);background:var(--edit-selected)}
.edit-background-choice{position:relative}
.edit-background-replace{position:relative;overflow:hidden;display:grid;place-items:center;padding-left:34px}
.edit-background-replace span{position:relative;z-index:1}
.edit-background-choice-image{display:none;position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.edit-background-upload{position:absolute;z-index:2;left:5px;top:50%;transform:translateY(-50%);width:26px;height:28px;padding:0;border:0;border-radius:0;box-shadow:none;background:transparent;color:var(--edit-text);font:20px/28px system-ui;text-align:center;cursor:pointer}
.edit-background-color{position:relative;display:block;flex:none;width:26px;height:26px;border:1px solid var(--edit-border-strong);border-radius:50%;background:var(--background-choice-color);cursor:pointer}
.edit-background-color input{position:absolute;inset:0;width:100%;height:100%;padding:0;opacity:0;cursor:pointer}
.edit-background-clear{position:absolute;z-index:2;top:-6px;right:-6px;width:18px;height:18px;padding:0;border:1px solid var(--edit-border-strong);border-radius:50%;background:var(--edit-surface-raised);color:var(--edit-text);font:14px/16px system-ui;cursor:pointer}
.edit-background-controls[data-background-choice="transparent"] :is(.edit-background-upload,.edit-background-color),
.edit-background-controls[data-background-choice="color"] .edit-background-upload,
.edit-background-controls:is([data-background-choice="transparent"],[data-background-choice="replace"]) .edit-background-clear{display:none}
.edit-background-controls[data-background-choice="image"] .edit-background-choice-image{display:block}
.edit-background-controls[data-background-choice="image"] .edit-background-replace:after{content:"";position:absolute;inset:0;background:#0007}
.edit-background-controls[data-background-choice="image"] :is(.edit-background-replace span,.edit-background-upload){color:#fff}
.edit-background-controls[data-background-choice="color"] .edit-background-replace{background:var(--background-choice-color);color:var(--background-choice-text)}
.edit-background-controls:is([data-background-choice="transparent"],[data-background-choice="color"]) .edit-background-replace{padding-left:18px}
.edit-background-controls button:focus-visible,.edit-background-color:focus-within{outline:2px solid var(--edit-primary);outline-offset:3px}
.edit-workspace-action-background textarea{box-sizing:border-box;width:100%;height:62px;min-height:62px}

/* Store purchases on the pay screen: renewal note and methods a product
   cannot use (e.g. above the Telegram Stars invoice limit). */
.view[data-view="pay"] .pay-store-note{margin:12px 0 0;padding:10px 12px;border-radius:12px;background:var(--surface);color:var(--text);color:color-mix(in srgb,var(--text) 78%,transparent);font-size:12.5px;line-height:1.45}
.view[data-view="pay"] .pm-card.is-unavailable{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}
.view[data-view="pay"] .pm-card[hidden]{display:none}
/* Telegram Store is priced in Stars only: no USD equivalents or rates. */
.view[data-view="shop"] .sb-usd,.view[data-view="shop"] .sb-rate,.view[data-view="pay"] .pay-usd{display:none}

/* Sketch uses the same full-screen canvas as the other Edit tools. */
.edit-sketch-workbench{position:absolute;z-index:1;inset:0;color:var(--edit-text);overflow:hidden}
.edit-workspace[data-sidebar="true"] .edit-sketch-workbench{left:240px}
.edit-workspace[data-shared-sidebar="true"] .edit-sketch-workbench{left:var(--sx-sidebar-w,256px)}
/* Keep the complete Edit chain visible while drawing. The sketch paper is a
   transparent interaction layer above it; the active photo is still rendered
   inside the paper so strokes remain pixel-accurate. */
.edit-workspace[data-drawing="true"] .edit-workspace-stage{visibility:visible;pointer-events:none}
.edit-workspace[data-drawing="true"] .edit-workspace-canvas-actions{display:none}
.edit-workspace[data-drawing="true"] .edit-workspace-status{visibility:hidden}
.edit-workspace[data-drawing="true"] .edit-sketch-paper-area{background-color:transparent;background-image:none}
.edit-sketch-tools{position:absolute;z-index:5;box-sizing:border-box;top:70px;right:22px;bottom:215px;width:270px;min-height:0;overflow:auto;scrollbar-width:thin;display:flex;flex-direction:column;gap:12px;padding:14px;border:1px solid var(--edit-border);border-radius:16px;background:color-mix(in srgb,var(--edit-surface) 92%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:var(--st-depth-2)}
.edit-sketch-tools>*{flex-shrink:0}.edit-sketch-tools h3{font-size:15px;margin:0}.edit-sketch-tools p{font-size:11px;line-height:1.5;margin:0;color:var(--edit-muted)}
.edit-sketch-workbench button{font:inherit;font-size:11px;color:var(--edit-text);background:var(--edit-surface-raised);border:1px solid var(--edit-border);border-radius:8px;cursor:pointer;min-height:30px;padding:6px 8px}
.edit-sketch-workbench button:hover{border-color:var(--edit-border-strong);background:var(--edit-selected)}
.edit-sketch-workbench button[aria-pressed="true"]{border-color:var(--edit-primary);background:var(--edit-selected);color:var(--edit-text)}
.edit-sketch-workbench button:disabled{opacity:.4;cursor:default}.edit-sketch-workbench :is(button,input):focus-visible{outline:2px solid var(--edit-primary);outline-offset:2px}
.edit-sketch-primary-tools{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;position:relative}
.edit-sketch-primary-tools>button,.edit-sketch-tool-menu>summary{box-sizing:border-box;display:flex;align-items:center;justify-content:flex-start;gap:8px;min-height:43px;padding:7px 9px;border:1px solid var(--edit-border);border-radius:9px;background:var(--edit-surface-raised);color:var(--edit-text);font-size:10px;cursor:pointer;list-style:none}
.edit-sketch-primary-tools>button b,.edit-sketch-tool-menu>summary b{width:21px;font-size:19px;line-height:20px;text-align:center;font-weight:500}.edit-sketch-primary-tools>button span,.edit-sketch-tool-menu>summary span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.edit-sketch-tool-menu>summary i{margin-left:auto;font-style:normal;color:var(--edit-muted)}
.edit-sketch-tool-menu>summary::-webkit-details-marker{display:none}.edit-sketch-tool-menu>summary:hover,.edit-sketch-tool-menu>summary[aria-pressed="true"],.edit-sketch-tool-menu[open]>summary{border-color:var(--edit-primary);background:var(--edit-selected)}
.edit-sketch-tool-menu{position:relative}
.edit-sketch-tool-popover{position:absolute;z-index:30;box-sizing:border-box;width:230px;display:flex;flex-direction:column;align-items:flex-end;pointer-events:auto}
.edit-sketch-tool-strip{box-sizing:border-box;width:49px;display:flex;flex-direction:column;gap:4px;padding:5px;border:1px solid var(--edit-border);border-right-color:var(--edit-border-strong);border-radius:12px 0 0 12px;background:var(--edit-surface);box-shadow:var(--st-depth-3)}
.edit-sketch-tool-popover button{box-sizing:border-box;display:grid;place-items:center;width:38px;height:38px;min-height:38px;padding:0;background:var(--edit-surface-raised)}
.edit-sketch-tool-popover button b{font-size:19px;line-height:1;font-weight:500}.edit-sketch-tool-popover button span{display:none}.edit-sketch-tool-popover[data-tool-popover="element"] button{font-size:21px}
.edit-sketch-more{box-sizing:border-box;width:230px;margin-top:6px;padding:8px;border:1px solid var(--edit-border);border-radius:12px;background:var(--edit-surface);box-shadow:var(--st-depth-3)}
.edit-sketch-more>span{display:block;margin:0 0 7px;color:var(--edit-muted);font-size:10px}.edit-sketch-more>div{display:grid;grid-template-columns:repeat(6,1fr);gap:5px}.edit-sketch-more button{width:31px;height:31px;min-height:31px}
.edit-sketch-color-row{display:flex;flex-wrap:wrap;gap:9px;align-items:center;font-size:11px}
.edit-sketch-workbench label{display:flex;align-items:center;gap:6px;font-size:11px;min-width:0}
.edit-sketch-workbench input{font:inherit;color:var(--edit-text);accent-color:var(--edit-primary)}
.edit-sketch-workbench input[type=color]{width:27px;height:27px;border:1px solid var(--edit-border);border-radius:7px;padding:2px;background:var(--edit-surface-raised);cursor:pointer}
.edit-sketch-workbench input[type=number],.edit-sketch-workbench input[type=text]{box-sizing:border-box;width:100%;min-width:0;padding:7px;border:1px solid var(--edit-border);border-radius:7px;background:var(--edit-surface-raised)}
.edit-sketch-palette{display:grid;grid-template-columns:repeat(6,1fr);gap:7px}
.edit-sketch-palette button{box-sizing:border-box;width:24px;height:24px;min-height:24px;aspect-ratio:1;justify-self:center;padding:0;border-radius:50%!important;background:var(--swatch);border-color:var(--edit-border-strong)}.edit-sketch-palette button:hover{background:var(--swatch);outline:2px solid var(--edit-primary)}
.edit-sketch-workbench .edit-sketch-range{display:grid;grid-template-columns:42px minmax(0,1fr) 30px;font-size:11px}.edit-sketch-range input{width:100%;min-width:0}.edit-sketch-range output{text-align:right;font-variant-numeric:tabular-nums}
.edit-sketch-style{display:grid;gap:10px;border-top:1px solid var(--edit-border);padding-top:9px}.edit-sketch-style>summary{cursor:pointer;font-size:11px}.edit-sketch-style>*:not(summary){margin-top:9px}
.edit-sketch-object{display:grid;gap:8px;font-size:11px}.edit-sketch-object>span{display:flex;justify-content:space-between}.edit-sketch-object>div{display:flex;flex-wrap:wrap;gap:5px}.edit-sketch-object small{color:var(--edit-muted);line-height:1.5}
.edit-sketch-document{font-size:11px;border-top:1px solid var(--edit-border);padding-top:10px}.edit-sketch-document summary{cursor:pointer;padding:4px 0}.edit-sketch-document>div{display:flex;gap:7px;margin:10px 0}.edit-sketch-document>label{margin-top:9px}
.edit-sketch-history{display:flex;flex-wrap:wrap;gap:5px;padding-top:4px}
.edit-sketch-paper-area{position:absolute;inset:0;min-width:0;overflow:hidden;touch-action:none;background-color:var(--edit-bg);background-image:radial-gradient(var(--edit-border-strong) 1px,transparent 1px);background-size:20px 20px}
.edit-sketch-paper{position:absolute;top:50%;left:50%;transform-origin:center;box-shadow:0 8px 32px var(--st-shadow,rgba(0,0,0,.15))}
.edit-sketch-reference,.edit-sketch-canvas,.edit-sketch-selection{position:absolute;inset:0;width:100%;height:100%}
.edit-sketch-reference{object-fit:fill;pointer-events:none;user-select:none}
.edit-sketch-canvas,.edit-sketch-selection{touch-action:none}
.edit-sketch-canvas{cursor:crosshair;outline:none}.edit-sketch-selection{pointer-events:none}
.edit-sketch-paper-area[data-tool=select] .edit-sketch-canvas{cursor:default}.edit-sketch-paper-area[data-tool=hand],.edit-sketch-paper-area[data-tool=hand] .edit-sketch-canvas{cursor:grab}.edit-sketch-paper-area.is-panning,.edit-sketch-paper-area.is-panning .edit-sketch-canvas{cursor:grabbing}
.edit-sketch-view-controls{position:absolute;top:72px;left:22px;z-index:4;display:flex;align-items:center;gap:4px;padding:4px;border:1px solid var(--edit-border);border-radius:11px;background:var(--edit-surface);box-shadow:0 3px 12px var(--st-shadow,rgba(0,0,0,.2));font-size:11px}.edit-sketch-view-controls output{padding:0 6px;font-variant-numeric:tabular-nums;color:var(--edit-muted)}
.edit-sketch-view-controls button,.edit-sketch-floating-actions button{border-color:var(--edit-border-strong)!important;background:var(--edit-surface)!important;color:var(--edit-text)!important;opacity:1!important}
.edit-sketch-view-controls button:hover,.edit-sketch-floating-actions button:hover{border-color:#c7c7cb!important;background:#fff!important;color:#111!important}
.edit-sketch-hint{position:absolute;bottom:202px;left:12px;right:320px;text-align:center;pointer-events:none;font-size:10px;color:var(--edit-muted)}
.edit-sketch-transform{position:absolute;inset:0;z-index:3;pointer-events:none}.edit-sketch-handle{position:absolute!important;box-sizing:border-box;width:12px;height:12px;min-height:0!important;padding:0!important;border:2px solid var(--edit-primary)!important;border-radius:3px!important;background:#fff!important;pointer-events:auto;transform:translate(-50%,-50%) scale(var(--edit-sketch-control-scale,1));transform-origin:center}
.edit-sketch-handle-n,.edit-sketch-handle-s{cursor:ns-resize}.edit-sketch-handle-e,.edit-sketch-handle-w{cursor:ew-resize}.edit-sketch-handle-ne,.edit-sketch-handle-sw{cursor:nesw-resize}.edit-sketch-handle-nw,.edit-sketch-handle-se{cursor:nwse-resize}
.edit-sketch-floating-actions{position:absolute;display:flex;gap:4px;pointer-events:auto;transform:translate(-50%,-100%) scale(var(--edit-sketch-control-scale,1));transform-origin:center bottom}.edit-sketch-floating-actions button{display:grid;place-items:center;width:29px;height:29px;min-height:29px;padding:0;border-radius:8px;box-shadow:0 3px 10px var(--st-shadow,rgba(0,0,0,.2));font-size:16px;font-weight:700}.edit-sketch-floating-actions [data-transform="rotate"]{cursor:grab}.edit-sketch-floating-actions [data-transform="rotate"]:active{cursor:grabbing}
.edit-sketch-inline-text{position:absolute!important;z-index:5;box-sizing:border-box!important;margin:0;padding:0 3px!important;border:2px solid var(--edit-primary)!important;border-radius:2px!important;background:var(--edit-surface)!important;font-weight:600!important;line-height:1!important;transform-origin:top left}
.edit-sketch-workbench [hidden]{display:none!important}.edit-sketch-workbench[inert]{opacity:.6;pointer-events:none}
.edit-workspace-action-sketch textarea{height:54px;min-height:54px;width:100%;box-sizing:border-box}
.edit-workspace-dock{overflow-x:auto;scrollbar-width:thin}.edit-workspace-tab{flex-shrink:0}
@media(min-width:1000px) and (max-height:760px){.edit-sketch-tools{top:58px;bottom:195px;padding:10px;gap:9px}.edit-sketch-view-controls{top:58px}.edit-sketch-hint{bottom:184px}}

/* Telegram Stars subscription management (subActiveModal, confirmations). */
.sub-active-overlay .sa-note,.sub-active-overlay .sa-result{margin:12px 0 0;font-size:12.5px;line-height:1.45;color:color-mix(in srgb,var(--text) 78%,transparent)}
.sub-active-overlay .sa-result{padding:10px 12px;border-radius:12px;background:color-mix(in srgb,#19c37d 14%,var(--surface));color:var(--text)}
.sub-active-overlay .sa-result.is-error{background:color-mix(in srgb,#e5484d 16%,var(--surface))}
.sub-active-overlay .sa-actions{flex-direction:column}
.sub-active-overlay .sa-actions > button{width:100%}
.sx-confirm-overlay{z-index:1000060}
.sx-confirm-overlay .sx-confirm{max-width:420px;padding:20px}
.sx-confirm-overlay .sx-confirm h3{margin:0 0 10px;font-size:17px}
.sx-confirm-overlay .sx-confirm p{margin:0 0 8px;font-size:13.5px;line-height:1.45;color:color-mix(in srgb,var(--text) 82%,transparent)}
.sx-confirm-overlay .sx-confirm-actions{flex-direction:column}
.sx-confirm-overlay .sx-confirm-actions > button{width:100%}

/* ===================================================
   Колокольчик уведомлений (SYLVEX Team) и окно «Связаться с SYLVEX»
   =================================================== */
.notif-btn{position:relative}
.notif-btn[hidden]{display:none}
.notif-dot{position:absolute;top:7px;right:8px;width:9px;height:9px;border-radius:50%;background:#ef4444;box-shadow:0 0 0 2px var(--bg,#0b0b14)}
.notif-dot[hidden]{display:none}
.notif-pop{position:absolute;top:46px;right:0;width:min(360px,calc(100vw - 28px));max-height:min(70vh,520px);display:none;flex-direction:column;border-radius:16px;background:rgba(10,10,20,.95);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:1000040;overflow:hidden}
[data-theme="light"] .notif-pop{background:rgba(255,255,255,.97)}
.notif-pop.show{display:flex;animation:fadeUp .2s ease both}
.notif-head{padding:12px 14px;border-bottom:1px solid var(--border);font-size:14px}
.notif-list{overflow-y:auto;padding:6px;display:flex;flex-direction:column;gap:6px}
.notif-empty{padding:22px 14px;color:var(--text-dim);font-size:13px;text-align:center;line-height:1.45}
.notif-item{padding:10px 12px;border-radius:12px;background:var(--surface);border:1px solid var(--border)}
.notif-item.unread{border-color:color-mix(in srgb,var(--primary,#7c5cff) 55%,transparent);background:color-mix(in srgb,var(--primary,#7c5cff) 10%,var(--surface))}
.notif-item header{display:flex;justify-content:space-between;gap:10px;align-items:baseline;margin-bottom:4px}
.notif-item header b{font-size:12.5px}
.notif-item time{font-size:11px;color:var(--text-dim);white-space:nowrap}
.notif-item p{margin:0;font-size:13px;line-height:1.45;white-space:pre-wrap;word-break:break-word}
.notif-item img{display:block;max-width:100%;max-height:220px;margin-top:8px;border-radius:10px;object-fit:cover}
.notif-links{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.notif-link{padding:6px 10px;border-radius:9px;border:1px solid var(--border-strong);background:transparent;color:var(--text);font-size:12px;cursor:pointer}
.support-sub{margin:0 0 10px;color:var(--text-dim);font-size:12px;line-height:1.45}
.support-email-label small{opacity:.7}
#supportSendBtn:disabled{opacity:.6;pointer-events:none}

/* ===================================================
   Нижняя навигация: автоскрытие при прокрутке вниз (initNavAutoHide)
   =================================================== */
.app>.nav{transition:transform .28s cubic-bezier(.2,.7,.2,1),opacity .22s ease}
.app>.nav.nav-autohide{transform:translateX(-50%) translateY(calc(100% + 24px + env(safe-area-inset-bottom)));opacity:0;pointer-events:none}
@media (prefers-reduced-motion:reduce){.app>.nav{transition:none}}

/* Browser Website Studio (opened outside Telegram). Telegram never gets these
   classes: html.browser-app is set only without Telegram initData. */
html.browser-app .tb-stats{display:none}
.user-guest{display:none}
html.browser-guest .view[data-view="home"] .user-card .user-row,
html.browser-guest .view[data-view="home"] .user-card .balance-row{display:none}
html.browser-guest .user-guest{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
/* Browser Website Studio: until the session check answers, show neither the
   account card nor the guest card - never a previous account's data. */
html.browser-auth-pending .view[data-view="home"] .user-card .user-row,
html.browser-auth-pending .view[data-view="home"] .user-card .balance-row{visibility:hidden}
/* Telegram-only account features never show in the browser app (connecting
   a Telegram account, Telegram invite links). */
html.browser-app .profile-linked-mini,
html.browser-app .profile-referrals-mini,
html.browser-app .profile-invite-row{display:none}
.user-guest-title{font-size:18px;font-weight:700;color:var(--text)}
.user-guest-sub{font-size:13px;line-height:1.45;color:var(--text);opacity:.78;max-width:320px}
.user-guest-btn{margin-top:8px}
/* Mobile browser (html.browser-app only; --bvh is set from the visible
   browser viewport in cabinet.js): Pro Studio fills exactly the visible area
   between the browser bars and the device's safe areas, so its whole bottom
   control block stays above the browser controls. */
html.browser-app .view[data-view="tools"].active .studio{
  height:calc(var(--bvh,1vh) * 100 - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px))
}
@media(max-width:680px){
  html.browser-app .photo-tool-modal{padding-top:max(10px,env(safe-area-inset-top,0px));padding-bottom:max(10px,env(safe-area-inset-bottom,0px))}
  html.browser-app .photo-tool-dialog{max-height:calc(var(--bvh,1vh) * 100 - 20px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px))}
}
/* Browser Website Studio keyboard (cabinet.js initBrowserKeyboard): no
   keyboard-close button - the browser's own Done / hide closes it - and the
   Pro Studio input window fills only the area the keyboard leaves visible
   (--vv-top/--vv-h from visualViewport), so it stays below the address bar
   and right above the keyboard. Telegram is unchanged. */
html.browser-app .mobile-keyboard-close{display:none!important}
html.browser-app :is(body.device-mobile,body.device-tablet) .view[data-view="tools"].active .studio-input.composer-input-window{
  top:var(--vv-top,0px)!important;bottom:auto!important;
  height:var(--vv-h,100dvh)!important;max-height:var(--vv-h,100dvh)!important
}
/* Browser Website Studio only: Pro Studio's workspace background is plain - no
   dot/grid pattern (classic and Grid Mode, idle or generating). Only the
   pattern layer goes; the background color, nodes, connections and every
   control stay as they are. Telegram keeps the pattern. */
html.browser-app body .view[data-view="tools"].active .studio-grid-canvas.studio-grid-canvas{
  background-image:none!important
}
/* Browser Website Studio: no SYLVEX Assistant button or its Settings row; on a
   phone/tablet browser the Pro Studio Grid switch is hidden (Edit is left
   out of the tool lists in cabinet.js). Telegram and desktop unchanged. */
html.browser-app #aiAssistantFab,
html.browser-app .settings-ai-assistant-row{display:none!important}
/* Text chat: internal SYLVEX links offered by the assistant. */
.sylvex-chat-link{
  display:inline-flex;align-items:center;margin:6px 4px 2px 0;padding:7px 12px;border:1px solid var(--st-line-2,rgba(255,255,255,.14));
  border-radius:999px;background:var(--st-bg-2,#16161b);color:var(--st-text,#ececf1);font:600 13px/1.2 inherit;cursor:pointer
}
.sylvex-chat-link:hover{border-color:#1687ff}
.knowledge-workspace-modal.kw-close-covered .knowledge-workspace-close{visibility:hidden;pointer-events:none}

/* =====================================================
   Pro Studio → Music: Music Player block (MusicDock in cabinet.js).
   Sits where the tool cards are in the other modes; matte surfaces on the
   Pro Studio theme tokens.
   ===================================================== */
.studio-music-player{display:none;position:relative;flex-direction:column;justify-content:center;gap:10px;min-width:0;padding:14px;border-radius:18px;background:var(--st-bg-3,#2c2c2c);box-shadow:var(--st-depth-1,none);color:var(--st-text,#ececec)}
.studio-video-composer[data-composer-mode="music"] .studio-music-player{display:flex}
/* Music Player → divider → prompt, the same structure as Voice. Applied
   only where the page has the player block (cabinet.js marks the composer
   .has-music-player); other copies of the markup keep the old layout. */
.studio-video-composer.has-music-player[data-composer-mode="music"] .studio-video-panel{grid-template-columns:clamp(220px,28vw,430px) minmax(0,1fr);padding:18px 24px 24px}
.studio-video-composer.has-music-player[data-composer-mode="music"] .studio-prompt-column{border-left:1px solid rgba(255,255,255,.10);padding-left:24px}
.view[data-view="tools"].active .studio-video-composer.has-music-player[data-composer-mode="music"] .studio-prompt-column{border-color:var(--st-border-strong)}
@media(max-width:900px){
  .studio-video-composer.has-music-player[data-composer-mode="music"] .studio-video-panel{padding:14px}
  .studio-video-composer.has-music-player[data-composer-mode="music"] .studio-prompt-column{border-left:0;border-top:1px solid rgba(255,255,255,.10);padding-left:0;padding-top:12px}
}
@media(max-width:560px){
  .studio-video-composer.has-music-player[data-composer-mode="music"] .studio-prompt-column{border-top:1px solid rgba(255,255,255,.10);padding-top:12px}
}
.studio-video-composer.is-compact.has-music-player[data-composer-mode="music"] .studio-prompt-column{border-left:0;border-top:1px solid rgba(255,255,255,.10);padding-left:0;padding-top:12px}
:is(body.device-mobile,body.device-tablet) .studio-video-composer.has-music-player[data-composer-mode="music"] .studio-prompt-column{--mobile-prompt-column-top:12px}
.studio-audio-player.is-docked{display:none!important}
.studio-music-player svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.smp-top{display:flex;align-items:center;gap:12px;min-width:0}
.smp-cover{position:relative;flex:0 0 auto;width:76px;height:76px;overflow:hidden;border-radius:14px;background:var(--st-bg-4,#3a3a3a);display:grid;place-items:center;color:var(--st-mute,#8a8a8a)}
.smp-cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.smp-cover-icon{width:26px!important;height:26px!important}
.smp-cover img:not([hidden])+.smp-cover-icon{display:none}
.smp-meta{display:flex;flex:1;min-width:0;flex-direction:column;gap:4px}
.smp-title{overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:14.5px;font-weight:700;line-height:1.25;word-break:break-word}
.smp-sub{overflow:hidden;color:var(--st-mute,#8a8a8a);font-size:12px;white-space:nowrap;text-overflow:ellipsis}
.studio-music-player.is-empty .smp-title{font-weight:600;color:var(--st-dim,#bdbdbd)}
.smp-icon{flex:0 0 auto;display:grid;place-items:center;width:34px;height:34px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--st-dim,#cfcfcf);cursor:pointer;transition:background .15s,color .15s}
.smp-icon:hover:not(:disabled){background:var(--st-bg-4,#3a3a3a);color:var(--st-text,#fff)}
.smp-icon:disabled{opacity:.35;cursor:default}
.smp-icon.is-muted{color:var(--st-mute,#8a8a8a)}
.smp-progress{position:relative;height:16px;margin:2px 0 -4px;cursor:pointer;touch-action:none;outline:0}
.smp-progress:before{content:"";position:absolute;left:0;right:0;top:6px;height:4px;border-radius:2px;background:var(--st-line-2,rgba(255,255,255,.14))}
.smp-progress-fill{position:absolute;left:0;top:6px;height:4px;border-radius:2px;background:var(--st-text,#f1f1f1)}
.smp-progress-knob{position:absolute;top:3px;width:10px;height:10px;margin-left:-5px;border-radius:50%;background:var(--st-text,#f1f1f1);opacity:0;transition:opacity .15s}
.smp-progress:hover .smp-progress-knob,.smp-progress:focus-visible .smp-progress-knob,.studio-music-player.is-playing .smp-progress-knob{opacity:1}
.studio-music-player.is-empty .smp-progress{cursor:default}
.smp-times{display:flex;justify-content:space-between;color:var(--st-mute,#8a8a8a);font-size:11.5px;font-variant-numeric:tabular-nums}
.smp-controls{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:6px}
.smp-transport{display:flex;align-items:center;gap:6px}
.smp-play{display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:var(--st-text,#f1f1f1);color:var(--st-bg,#171717);cursor:pointer;transition:transform .15s}
.smp-play svg{width:20px;height:20px}
.smp-play:hover:not(:disabled){transform:scale(1.04)}
.smp-play:disabled{opacity:.35;cursor:default}
.smp-pill{justify-self:start;min-width:44px;height:28px;padding:0 10px;border:1px solid var(--st-line-2,rgba(255,255,255,.14));border-radius:14px;background:transparent;color:var(--st-dim,#cfcfcf);font-family:inherit;font-size:12px;font-weight:600;line-height:1;font-variant-numeric:tabular-nums;cursor:pointer}
.smp-pill.is-changed{border-color:transparent;background:var(--st-bg-4,#3a3a3a);color:var(--st-text,#fff)}
.smp-pill:disabled{opacity:.35;cursor:default}
.smp-volume{justify-self:end;display:flex;align-items:center;gap:2px;min-width:0}
.smp-volume-slider{width:72px;height:4px;accent-color:var(--st-text,#f1f1f1);cursor:pointer}
.smp-list{position:absolute;z-index:30;left:8px;right:8px;bottom:calc(100% + 8px);max-height:280px;overflow-y:auto;padding:6px;border:1px solid var(--st-border,rgba(255,255,255,.1));border-radius:16px;background:var(--st-bg-2,#232323);box-shadow:0 18px 44px rgba(0,0,0,.45)}
.smp-list[hidden]{display:none}
.smp-list-head{padding:6px 8px 8px;color:var(--st-mute,#8a8a8a);font-size:11.5px;font-weight:600;text-transform:uppercase;letter-spacing:.06em}
.smp-list-item{display:flex;align-items:center;gap:10px;width:100%;padding:6px 8px;border:0;border-radius:11px;background:transparent;color:var(--st-text,#ececec);font:inherit;font-size:13px;text-align:left;cursor:pointer}
.smp-list-item:hover{background:var(--st-bg-3,#2c2c2c)}
.smp-list-item.is-current{background:var(--st-bg-4,#3a3a3a)}
.smp-list-cover{flex:0 0 auto;width:34px;height:34px;overflow:hidden;border-radius:8px;background:var(--st-bg-4,#3a3a3a)}
.smp-list-cover img{width:100%;height:100%;object-fit:cover}
.smp-list-title{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.smp-eq{display:flex;align-items:flex-end;gap:2px;height:12px}
.smp-eq b{width:3px;border-radius:1px;background:currentColor;animation:smp-eq .9s ease-in-out infinite}
.smp-eq b:nth-child(2){animation-delay:.2s}.smp-eq b:nth-child(3){animation-delay:.4s}
@keyframes smp-eq{0%,100%{height:3px}50%{height:12px}}
@media(prefers-reduced-motion:reduce){.smp-eq b{animation:none;height:8px}}
/* Phones and narrow composers: player on top, then the divider and prompt. */
@media(max-width:900px){
  .studio-music-player{padding:12px;gap:8px}
  .smp-cover{width:60px;height:60px;border-radius:12px}
  .smp-volume-slider{width:56px}
}
.studio-video-composer.is-compact .studio-music-player{padding:12px;gap:8px}
.studio-video-composer.is-compact .smp-cover{width:60px;height:60px;border-radius:12px}

/* Browser Website Studio: Edit Profile save error and the separate Delete account
   section (never shown inside Telegram), plus its confirmation dialog. */
.ep-error{margin:10px 2px 0;color:#e5484d;font-size:13px;line-height:1.4}
.ep-danger{display:none}
html.browser-app .ep-danger{display:block;margin-top:22px}
.ep-danger .ep-section-title{color:#e5484d}
.ep-danger-text{margin:-4px 0 12px;color:var(--text-dim);font-size:13px;line-height:1.45}
.ep-danger-btn{width:100%;padding:11px;border:1px solid rgba(229,72,77,.55);border-radius:12px;background:transparent;color:#e5484d;font:inherit;font-weight:650;cursor:pointer}
.ep-danger-btn:hover{background:rgba(229,72,77,.08)}
.ep-danger-btn.solid{border-color:#e5484d;background:#e5484d;color:#fff}
.ep-danger-btn[disabled]{opacity:.45;cursor:default}
.delete-account-sheet p{margin:0 0 12px;color:var(--text-dim);font-size:13.5px;line-height:1.5}
.delete-account-sheet .ep-input{margin-bottom:10px}
.delete-account-sheet .ep-actions{display:flex;gap:8px;margin-top:6px}
.delete-account-sheet .ep-actions>*{flex:1}

/* Grid nodes as the React Bits ProfileCard: a frame (.studio-grid-node-card)
   holding a tile (header, settings, references, prompt, result) and a
   footer (status and cost, then the actions as the card's Contact button).
   The tokens are the card's dark and light themes; js/cabinet.js tilts the
   frame on hover (tiltStrength 3, intro; holo, glare and parallax are 0). */
.studio-grid-node{--pc-radius:15px;--pc-frame:rgba(38,35,46,.66);--pc-frame-edge:rgba(255,255,255,.08);--pc-frame-highlight:rgba(255,255,255,.07);--pc-frame-shadow:0 22px 44px -20px rgba(0,0,0,.8),0 6px 16px -8px rgba(0,0,0,.5);--pc-tile:linear-gradient(180deg,#3a3644 0%,#27242f 100%);--pc-tile-edge:rgba(255,255,255,.07);--pc-tile-highlight:rgba(255,255,255,.12);--pc-tile-shadow:0 4px 10px -4px rgba(0,0,0,.7);--pc-ink:#f4f4f5;--pc-muted:rgba(244,244,245,.6);--pc-hover:brightness(1.12);--pc-press:brightness(.8);--pc-well:rgba(0,0,0,.24);--pc-menu:#27242f;--pc-status:rgba(244,244,245,.38);--pc-edge:var(--pc-frame-edge);perspective:1000px;-webkit-tap-highlight-color:transparent}
.studio[data-ps-theme="white"] .studio-grid-node{--pc-frame:rgba(240,240,243,.8);--pc-frame-edge:rgba(24,24,27,.07);--pc-frame-highlight:rgba(255,255,255,.95);--pc-frame-shadow:0 22px 44px -22px rgba(24,24,27,.3),0 6px 16px -10px rgba(24,24,27,.16);--pc-tile:linear-gradient(180deg,#ffffff 0%,#f6f6f8 100%);--pc-tile-edge:rgba(24,24,27,.08);--pc-tile-highlight:#ffffff;--pc-tile-shadow:0 4px 10px -5px rgba(24,24,27,.25);--pc-ink:#27272a;--pc-muted:rgba(39,39,42,.6);--pc-hover:brightness(.97);--pc-press:brightness(.92);--pc-well:rgba(24,24,27,.045);--pc-menu:#ffffff;--pc-status:rgba(39,39,42,.3)}
.studio-grid-node[data-status="RUNNING"]{--pc-status:var(--st-accent,#6f87ff);--pc-edge:var(--st-accent,#6f87ff)}
.studio-grid-node[data-status="COMPLETED"]{--pc-status:#22c55e;--pc-edge:#22c55e}
.studio-grid-node[data-status="FAILED"]{--pc-status:var(--st-danger,#e96771);--pc-edge:var(--st-danger,#e96771)}
.studio-grid-node[data-status="STALE"],.studio-grid-node[data-status="WAITING"]{--pc-status:var(--st-warning,#e9bf62);--pc-edge:var(--st-warning,#e9bf62)}
.studio-grid-node-card{position:relative;display:flex;flex-direction:column;gap:10px;box-sizing:border-box;min-height:inherit;padding:10px;border-radius:calc(var(--pc-radius) + 10px);background:var(--pc-frame);box-shadow:var(--pc-frame-shadow);-webkit-backdrop-filter:blur(20px) saturate(1.6);backdrop-filter:blur(20px) saturate(1.6);color:var(--pc-ink);transform:var(--pc-transform,none)}
.studio-grid-node-rim{position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:inset 0 0 0 1px var(--pc-edge),inset 0 1px 0 var(--pc-frame-highlight)}
.studio-grid-node.selected .studio-grid-node-rim{box-shadow:inset 0 0 0 2px var(--st-accent,#6f87ff),inset 0 1px 0 var(--pc-frame-highlight)}
.studio-grid-node-tile{position:relative;display:flex;flex:1;flex-direction:column;gap:8px;min-width:0;padding:10px;border-radius:var(--pc-radius);background:var(--pc-tile);box-shadow:inset 0 0 0 1px var(--pc-tile-edge),inset 0 1px 0 var(--pc-tile-highlight),var(--pc-tile-shadow)}
.studio-grid-node-header{height:28px;gap:9px;padding:0}
.studio-grid-node-icon{width:26px;height:26px;flex:none;border-radius:9px;box-shadow:inset 0 0 0 1px var(--pc-tile-edge);font-size:12px;font-style:normal}
.studio-grid-node-header b{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--pc-ink);font-size:14px;font-weight:600;line-height:1.25;letter-spacing:-.01em}
.studio-grid-node-header button{width:26px;height:26px;flex:none;padding:0;border:0;border-radius:50%;background:transparent;color:var(--pc-muted);font-size:15px;transition:background .2s ease,color .2s ease}
.studio-grid-node-header button svg{width:14px;height:14px;margin:auto}
.studio-grid-node-header button:hover{background:var(--pc-well);color:var(--pc-ink)}
.studio-grid-node-body{display:flex;flex-direction:column;gap:8px;padding:0}
.studio-grid-director-label{color:var(--pc-muted);font-size:12px;font-weight:600}
.studio-grid-node-settings{gap:6px;padding-right:18px;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 22px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 22px),transparent)}
.studio-grid-node-settings select,.studio-grid-node-settings input,.studio-grid-toggle{flex:0 0 auto;box-sizing:border-box;height:28px;min-width:64px;max-width:122px;padding:0 9px;border:0;border-radius:10px;outline:0;background:var(--pc-well);box-shadow:inset 0 0 0 1px var(--pc-tile-edge);color:var(--pc-ink);font-family:inherit;font-size:10px;font-weight:600}
.studio-grid-node-settings select:first-child{min-width:118px;max-width:146px}
.studio-grid-node-settings select:focus,.studio-grid-node-settings input:focus{box-shadow:inset 0 0 0 1px var(--pc-ink)}
.studio-grid-node-settings option{background:var(--pc-menu);color:var(--pc-ink)}
.studio-grid-input-summary{gap:6px}
.studio-grid-input-summary span{height:26px;gap:6px;padding:0 9px;border-radius:9px;background:var(--pc-well);box-shadow:inset 0 0 0 1px var(--pc-tile-edge);color:var(--pc-ink);font-size:9.5px;font-weight:600}
.studio-grid-attachments{gap:6px}
.studio-grid-attachments>button{flex:none;display:flex;align-items:center;justify-content:center;gap:6px;height:30px;padding:0 12px;border:0;border-radius:calc(var(--pc-radius) * .75);background:var(--pc-well);box-shadow:inset 0 0 0 1px var(--pc-tile-edge);color:var(--pc-ink);font-family:inherit;font-size:11px;font-weight:600;cursor:pointer;transition:filter .2s ease,transform .2s ease}
.studio-grid-attachments>button i{font-size:13px;font-style:normal}
.studio-grid-attachment{height:30px;box-sizing:border-box;border-radius:calc(var(--pc-radius) * .75);background:var(--pc-well);box-shadow:inset 0 0 0 1px var(--pc-tile-edge);color:var(--pc-ink)}
.studio-grid-attachment img,.studio-grid-attachment>i{width:24px;height:24px;border-radius:8px;background:var(--pc-tile)}
.studio-grid-attachment span{font-size:9.5px;font-weight:600}
.studio-grid-attachment button{right:4px;top:5px;width:20px;height:20px;padding:0;border:0;border-radius:50%;background:var(--pc-tile);color:var(--pc-ink);font-size:12px}
.studio-grid-node textarea{box-sizing:border-box;height:72px;padding:10px 11px;border:0;border-radius:12px;outline:0;background:var(--pc-well);box-shadow:inset 0 0 0 1px var(--pc-tile-edge);color:var(--pc-ink);font-family:inherit;font-size:11px;font-weight:500;line-height:1.45}
.studio-grid-node textarea:focus{box-shadow:inset 0 0 0 1px var(--pc-ink)}
.studio-grid-node textarea::placeholder{color:var(--pc-muted)}
.studio-grid-node .studio-grid-text-output{padding:9px 0;background:transparent;box-shadow:none;font-size:10.5px}
.studio-grid-node-result{gap:9px;margin:0;padding:0 11px;border-radius:12px;background:var(--pc-well);box-shadow:inset 0 0 0 1px var(--pc-tile-edge);color:var(--pc-muted);font-size:10.5px}
.studio-grid-node-result>i{width:28px;height:28px;flex:none;display:grid;place-items:center;border-radius:9px;background:var(--pc-tile);box-shadow:inset 0 0 0 1px var(--pc-tile-edge),var(--pc-tile-shadow);color:var(--pc-ink);font-size:12px;font-style:normal}
.studio-grid-node-footer{display:flex;align-items:center;gap:5px;min-width:0;padding:0 0 0 6px}
.studio-grid-node-meta{display:flex;flex:1;flex-direction:column;gap:3px;min-width:0}
.studio-grid-node-status{overflow:hidden;color:var(--pc-muted);font-size:9px;font-weight:600;letter-spacing:.02em;line-height:1.25;white-space:nowrap;text-overflow:ellipsis}
.studio-grid-node-status:before{content:"";display:inline-block;width:6px;height:6px;margin:0 6px 1px 0;border-radius:50%;background:var(--pc-status);vertical-align:middle}
.studio-grid-node-cost{order:-1;overflow:hidden;color:var(--pc-ink);font-size:12px;font-weight:600;line-height:1.25;white-space:nowrap;text-overflow:ellipsis}
.studio-grid-node-footer button{display:flex;align-items:center;justify-content:center;flex:none;height:32px;padding:0 9px;border:0;border-radius:calc(var(--pc-radius) * .75);background:var(--pc-tile);box-shadow:inset 0 0 0 1px var(--pc-tile-edge),inset 0 1px 0 var(--pc-tile-highlight),var(--pc-tile-shadow);color:var(--pc-ink);font-family:inherit;font-size:11px;font-weight:600;cursor:pointer;transition:filter .2s ease,transform .2s ease}
.studio-grid-node-footer [data-grid-more]{width:32px;padding:0}
.studio-grid-node-footer button:disabled{opacity:.55;cursor:default}
.studio-grid-node-footer button:active,.studio-grid-attachments>button:active{filter:var(--pc-press);transform:scale(.96);transition-duration:0s}
.studio-grid-node-footer button:focus-visible,.studio-grid-attachments>button:focus-visible{outline:2px solid var(--pc-ink);outline-offset:2px}
@media(hover:hover){
  .studio-grid-node-footer button:hover,.studio-grid-attachments>button:hover{filter:var(--pc-hover)}
  .studio-grid-node-footer button:hover:active,.studio-grid-attachments>button:hover:active{filter:var(--pc-press)}
}

/* Pro Studio composer: one level in every mode. The video section is the
   reference: its left column is 228px tall in the wide layout, 150px in the
   compact one (composer up to 900px) and 164px on phones, and its prompt
   column matches (145px when compact). Every mode's left blocks fill
   exactly that height and the prompt column keeps the video's, so the
   panel, the mode tabs and the blocks above never move on a mode switch
   (or into Edit video). Voice dialogue keeps its own layout. */
.studio-video-composer{--sx-media-h:228px;--sx-prompt-h:228px}
.studio-video-composer.is-compact{--sx-media-h:150px;--sx-prompt-h:145px}
@media(max-width:560px){.studio-video-composer.is-compact{--sx-media-h:164px}}
.studio-video-composer:not([data-composer-mode="voice"][data-voice-workspace="dialogue"]) .studio-video-panel>:is(.studio-media-column,.studio-voice-full){height:var(--sx-media-h);min-height:0;box-sizing:border-box}
.studio-video-composer:not([data-composer-mode="voice"][data-voice-workspace="dialogue"]) .studio-video-panel>.studio-prompt-column{height:var(--sx-prompt-h);min-height:0;box-sizing:border-box}
.studio-video-composer:not([data-composer-mode="voice"][data-voice-workspace="dialogue"]) .studio-video-panel>.studio-prompt-column textarea{flex:1 1 auto;height:auto!important;min-height:0!important}
/* Video: the frames (or the Edit video upload) take what the uploads row leaves. */
.studio-video-composer .studio-video-tools>*{flex:0 0 auto}
.studio-video-composer .studio-video-tools>:is(.studio-frame-row,.studio-video-edit-upload){flex:1 1 auto;min-height:0}
/* Image: Styles, Character, Upload and Object grow into two equal rows. */
.studio-video-composer .studio-media-column>.image-visual-grid{flex:1 1 auto;min-height:0;margin:0;grid-template-rows:repeat(2,minmax(0,1fr))}
.studio-video-composer .image-visual-grid .studio-image-tool{min-height:0}
/* Voice: Create voice and the voice list grow; Upload keeps the video's uploads row. */
.studio-video-composer .studio-voice-full>.vgen-actions{flex:1 1 auto;min-height:0}
.studio-video-composer .studio-voice-full .vgen-btn{min-height:0}
.studio-video-composer .studio-voice-full>.vgen-upload-row{flex:0 0 auto;min-height:64px;height:64px;box-sizing:border-box}
.studio-video-composer.is-compact .studio-voice-full>.vgen-upload-row{min-height:58px;height:58px}
/* Text: the upload block fills the whole column. */
.studio-video-composer .studio-text-tools>.studio-image-tool{flex:1 1 auto;min-height:0}
/* Music: the player spreads over the column; compact, it tightens to fit. */
.studio-video-composer .studio-music-player{justify-content:space-between}
.studio-video-composer.is-compact .studio-music-player{gap:3px;padding:8px 12px}
.studio-video-composer.is-compact .studio-music-player .smp-cover{width:46px;height:46px}

/* The mode switch is the React Bits RubberSegment. Its plain tabs, the same
   size, show from the first paint and give way to it once it mounts
   (data-segment, see mode_segment/src/host.css). The Grid side panel is the
   Dock; its markup stays hidden unless the bundle cannot load. */
.studio-grid-node-tools:not([data-dock-failed]){visibility:hidden}

/* Text mode: one upload tile - a big "upload a file" button and, under it,
   the kinds to add directly (photo, video, audio, photo link, video link,
   document) instead of the attach sheet. */
.studio-text-tools .text-upload-tile{display:flex;flex-direction:column;align-items:stretch;justify-content:center;gap:12px;padding:12px;cursor:default}
.text-upload-main{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:0;border:0;border-radius:12px;background:transparent;color:inherit;font:inherit;cursor:pointer}
.text-upload-main-ico{width:56px;height:56px;display:grid;place-items:center;border-radius:50%;background:var(--st-bg-4,rgba(255,255,255,.08));color:var(--st-text,#f4f4f4)}
.studio-text-tools .text-upload-main #textUploadVal{align-self:center;font-size:13px;font-weight:600}
.text-upload-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.text-upload-actions button{width:38px;height:38px;display:grid;place-items:center;padding:0;border:0;border-radius:50%;background:var(--st-bg-4,rgba(255,255,255,.08));color:var(--st-dim,#d7d7d7);cursor:pointer}
.text-upload-actions button:hover{color:var(--st-text,#fff)}
.studio-video-composer.is-compact .text-upload-tile{gap:8px;padding:8px}
.studio-video-composer.is-compact .text-upload-main{gap:4px}
.studio-video-composer.is-compact .text-upload-main-ico{width:40px;height:40px}
.studio-video-composer.is-compact .text-upload-main-ico svg{width:22px;height:22px}
.studio-video-composer.is-compact .text-upload-actions button{width:32px;height:32px}
.studio-video-composer.is-compact .text-upload-actions svg{width:16px;height:16px}

/* =====================================================
CSS-БЛОК: ThoughtLine — ход генерации
Pro Studio shows the line (js/vendor/thought-line) in the chat; it takes
the studio theme's text colour.
===================================================== */
.sx-thought-slot{--sx-thought-danger:var(--st-danger,#e96771)}
.generation-thought{display:flex;align-items:center;min-height:32px;max-width:100%;padding:4px 2px;--sx-thought-color:var(--st-text,#f3f3f3)}
.generation-thought-msg{max-width:78% !important}
.sx-thought-host{max-width:100%}

/* =====================================================
CSS-БЛОК: Pro Studio prompt message
The prompt sent for a generation stays in the workspace: a light-blue
block on the right, at most half of the workspace wide (wider on phones).
With references, the prompt under the stack gets the same block.
===================================================== */
.view[data-view="tools"].active #chatArea .msg.user{max-width:50%}
.view[data-view="tools"].active #chatArea .msg.user .bubble,
.view[data-view="tools"].active #chatArea .msg.user .bubble:has(> .msg-ref-stack) > .msg-ref-user-prompt{background:#dbeafe;color:#0b2447;border:1px solid #bfdbfe;border-radius:18px;border-bottom-right-radius:6px;padding:11px 14px;box-shadow:none;overflow-wrap:anywhere}
.view[data-view="tools"].active #chatArea .msg.user .bubble:has(> .msg-ref-stack) > .msg-ref-user-prompt{margin-top:8px!important}
@media (max-width:700px){.view[data-view="tools"].active #chatArea .msg.user{max-width:80%}}
/* The retry under a failed generation. */
.generation-retry{margin:2px 0 0 2px}
/* A long prompt starts folded (foldLongPrompts): a small bare arrow in the
   bottom-right corner opens it and, turned up, folds it back. */
#chatArea .msg-prompt{position:relative}
#chatArea .msg-prompt-text{line-height:1.45;overflow:hidden;overflow-wrap:anywhere}
#chatArea .msg-prompt.is-long{padding-bottom:16px}
#chatArea .msg-prompt.is-long:not(.is-open) .msg-prompt-text{-webkit-mask-image:linear-gradient(#000 calc(100% - 1.45em),rgba(0,0,0,.25));mask-image:linear-gradient(#000 calc(100% - 1.45em),rgba(0,0,0,.25))}
#chatArea .msg-prompt-toggle{display:none;position:absolute;right:-8px;bottom:-6px;width:22px;height:22px;min-width:0;min-height:0;padding:0!important;margin:0;border:0!important;border-radius:0;background:none!important;box-shadow:none!important;color:inherit;opacity:.65;cursor:pointer;place-items:center}
#chatArea .msg-prompt-toggle:hover{opacity:1}
#chatArea .msg-prompt.is-long .msg-prompt-toggle{display:grid}
#chatArea .msg-prompt-toggle svg{width:15px;height:15px;transition:transform .2s ease}
#chatArea .msg-prompt.is-open .msg-prompt-toggle svg{transform:rotate(180deg)}

/* =====================================================
CSS-БЛОК: catalog block
The approved catalog block is the video template's window
(.video-template-*): an image catalog item opens in it too - the item on
the left, its title and description, the dashed upload area, the item's
fields and Generate (no aspect ratio for a picture).
===================================================== */
.quick-image-detail-modal{z-index:1000001}
.quick-image-detail-modal:not(.show){display:none}
/* Two layers of the one reference: the picture (a video's cover) blurred
   across the whole side, and the reference itself fitted whole on top. */
.video-template-preview::before{content:"";position:absolute;inset:-48px;z-index:0;background:var(--catalog-backdrop,none) center/cover no-repeat;filter:blur(32px) brightness(.62) saturate(1.15);pointer-events:none}
.quick-image-detail-modal .video-template-preview img{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:contain}
.quick-image-detail-modal .video-template-details{min-height:0;max-height:min(620px,calc(100vh - 36px));overflow-y:auto}
.quick-image-detail-modal .video-template-details h3[hidden]{display:none}
.quick-image-detail-modal .video-template-upload{position:relative;flex:0 0 auto;background-position:center;background-size:cover;background-repeat:no-repeat;font:inherit}
.quick-image-detail-modal .video-template-upload.has-image{border-style:solid}
.quick-image-detail-modal .video-template-upload.has-image>span,.quick-image-detail-modal .video-template-upload.has-image>b,.quick-image-detail-modal .video-template-upload.has-image>small{display:none}
.quick-image-detail-modal .video-template-upload.is-uploading>b{display:block;margin:auto;padding:6px 10px;border-radius:10px;background:rgba(0,0,0,.58)}
.quick-image-detail-remove{display:none;position:absolute;z-index:3;right:10px;top:10px;width:28px;height:28px;border-radius:50%;background:rgba(9,10,12,.72);color:#fff;font-style:normal;font-size:19px;line-height:26px;text-align:center}
.quick-image-detail-modal .video-template-upload.has-image .quick-image-detail-remove{display:block}
.quick-image-detail-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.quick-image-detail-fields:empty{display:none}
.quick-image-detail-fields label{display:flex;min-width:0;flex-direction:column;gap:5px}
.quick-image-detail-fields label span{color:rgba(255,255,255,.62);font-size:12px;font-weight:600}
.quick-image-detail-fields label input,.quick-image-detail-modal textarea{min-width:0;height:46px;padding:0 14px;border:1px solid rgba(255,255,255,.12);border-radius:16px;background:rgba(255,255,255,.06);color:#fff;font:inherit;font-size:14px;outline:none}
.quick-image-detail-modal textarea{flex:0 0 auto;height:auto;min-height:74px;padding:12px 14px;resize:none}
.quick-image-detail-modal textarea[hidden]{display:none}
.quick-image-detail-fields label input::placeholder,.quick-image-detail-modal textarea::placeholder{color:rgba(255,255,255,.45)}
.quick-image-extra-upload{min-height:72px;border:2px dashed rgba(255,255,255,.16);border-radius:16px;background:rgba(255,255,255,.05) center/cover no-repeat;color:#fff;display:flex;align-items:center;justify-content:center;gap:8px;font:inherit;font-size:13px;font-weight:700;cursor:pointer;overflow:hidden}
.quick-image-extra-upload span{font-size:22px;font-weight:300}
.quick-image-extra-upload.uploading{opacity:.55}
.quick-image-extra-upload.has-image{border-style:solid;text-shadow:0 1px 5px #000}
.quick-image-detail-modal .video-template-generate{flex:0 0 auto}
.quick-image-detail-modal .video-template-generate:disabled{opacity:.45;cursor:default}
@media(max-width:560px){
  .quick-image-detail-modal .video-template-details{max-height:88vh}
  .quick-image-detail-fields{grid-template-columns:1fr;gap:8px}
  .quick-image-detail-fields label input,.quick-image-detail-modal textarea{height:40px;border-radius:12px;font-size:13px}
  .quick-image-detail-modal textarea{height:auto;min-height:60px}
  .quick-image-extra-upload{min-height:54px;border-radius:12px;font-size:12px}
}
/* Phones: the reference viewer is one column - the picture on top, small,
   and its description, fields and buttons under it. */
@media(max-width:560px){
  .video-template-modal{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);width:calc(100% - 16px);max-width:420px;max-height:calc(100vh - 24px)}
  .video-template-preview{min-height:0;height:min(30vh,220px)}
  .video-template-details,.quick-image-detail-modal .video-template-details{min-height:0;max-height:none;overflow-y:auto}
}

/* =====================================================
CSS-БЛОК: photo tool windows
The banner fills the left side edge to edge (the top on a phone). The
right side: the gradient "Быстрый инструмент", the tool's title and a
short line, the upload areas as dashed tiles with a thin ＋, a pill text
field, the preset row with page dots, and a gradient Generate pill on
the right. Everything fits on one screen, no scrolling.
===================================================== */
#photoToolDialog:has(.ptool-layout){--ptool-grad:linear-gradient(90deg,#2f8fb8,#86d36a);width:min(980px,calc(100vw - 32px));height:min(700px,calc(100vh - 40px));height:min(700px,calc(100dvh - 40px));max-width:none;max-height:none;padding:0;display:flex;overflow:hidden;border-radius:24px;background:var(--st-bg, var(--surface))}
#photoToolDialog:has(.ptool-layout) #photoToolModalBody{display:flex;flex:1;min-width:0;min-height:0}
.ptool-layout{position:relative;flex:1;min-width:0;min-height:0;display:grid;grid-template-columns:minmax(0,46%) minmax(0,1fr)}
.ptool-banner{min-width:0;min-height:0;background:linear-gradient(160deg,var(--ptool-a),var(--ptool-b));background-size:cover;background-position:center}
.ptool-close{position:absolute;z-index:3;top:12px;right:12px;width:34px;height:34px;padding:0;border:0;border-radius:50%;background:rgba(10,10,12,.55);color:#fff;font-size:20px;line-height:34px;text-align:center;cursor:pointer;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.ptool-work{position:relative;min-width:0;min-height:0;display:flex;flex-direction:column;gap:12px;padding:22px 22px 20px;overflow:visible;color:var(--st-text, var(--text))}
.ptool-head{flex:0 0 auto;padding-right:40px}
.ptool-kicker{display:inline-block;background:var(--ptool-grad);-webkit-background-clip:text;background-clip:text;color:transparent;font-size:26px;font-weight:800;line-height:1.15;letter-spacing:-.01em}
.ptool-head h3{margin:4px 0 0;font-size:18px;font-weight:700;line-height:1.2;color:var(--st-text, var(--text))}
.ptool-head p{margin:5px 0 0;font-size:14px;line-height:1.35;color:var(--st-dim, var(--text-mute))}

/* Upload areas: a label, then a dashed tile with a thin ＋. */
.ptool-zones{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
.ptool-zone{position:relative;flex:1 1 0;min-height:0;display:flex;flex-direction:column;gap:6px}
.ptool-zone-head{flex:0 0 auto;display:flex;align-items:baseline;gap:8px}
.ptool-zone-head b{font-size:13px;font-weight:500;color:var(--st-mute, var(--text-mute))}
.ptool-zone-head small{font-size:12px;color:var(--st-mute, var(--text-mute))}
.ptool-zone-body{position:relative;flex:1 1 auto;min-height:0;display:flex;align-items:center;justify-content:center;gap:10px}
.ptool-divider{flex:0 0 auto;width:100%;height:0;margin:10px 0;border:0;border-top:1px solid var(--st-line-2, var(--border))}
.ptool-add{flex:0 0 auto;height:min(100%,88px);min-height:40px;aspect-ratio:1;padding:0;border:2px dashed rgba(127,127,127,.45);border-radius:18px;background:transparent;color:var(--st-mute, var(--text-mute));display:grid;place-items:center;cursor:pointer;transition:border-color .15s ease,color .15s ease,background .15s ease}
.ptool-zone:not(.has-items) .ptool-add{height:min(100%,160px);border-radius:24px}
.ptool-add:hover{border-color:var(--st-text, var(--text));color:var(--st-text, var(--text));background:var(--st-bg-2, var(--surface-2))}
.ptool-add>span{position:relative;width:38%;aspect-ratio:1;font-size:0}
.ptool-add>span::before,.ptool-add>span::after{content:"";position:absolute;left:50%;top:50%;border-radius:2px;background:currentColor;transform:translate(-50%,-50%)}
.ptool-add>span::before{width:100%;height:2px}
.ptool-add>span::after{width:2px;height:100%}
.ptool-ref{position:relative;flex:0 0 auto;margin:0;height:min(100%,88px);min-height:40px;aspect-ratio:1;border-radius:16px;overflow:hidden;background:var(--st-bg-2, var(--surface-2))}
.ptool-zone[data-max="1"] .ptool-ref{height:min(100%,190px);aspect-ratio:auto;max-width:100%}
.ptool-zone[data-max="1"] .ptool-ref img{width:auto;max-width:100%;min-width:40px}
.ptool-ref img{display:block;width:100%;height:100%;object-fit:cover}
.ptool-ref.is-openable{cursor:zoom-in}
.ptool-ref-x{position:absolute;top:6px;right:6px;width:22px;height:22px;padding:0;border:0;border-radius:50%;background:rgba(0,0,0,.6);color:#fff;font-size:14px;line-height:22px;text-align:center;cursor:pointer}
.ptool-zone-hint{flex:0 0 auto;font-size:11px;text-align:center;color:var(--st-dim, var(--text-mute))}
.ptool-zone-tag{position:absolute;left:6px;bottom:6px;padding:3px 9px;border-radius:999px;background:#0e8a60;color:#fff;font-size:10px;font-weight:700;pointer-events:none}
.ptool-zone-badge{position:absolute;left:6px;bottom:6px;z-index:1;width:42px;height:42px;border-radius:11px;overflow:hidden;background:#fff;box-shadow:0 4px 14px rgba(0,0,0,.28)}
.ptool-zone-badge img{display:block;width:100%;height:100%;object-fit:cover}
.ptool-zone-badge button{position:absolute;top:2px;right:2px;width:16px;height:16px;padding:0;border:0;border-radius:50%;background:rgba(0,0,0,.62);color:#fff;font-size:11px;line-height:16px;cursor:pointer}

/* The text field: one pill. */
.ptool-work textarea{flex:0 0 auto;width:100%;height:54px;min-height:54px;box-sizing:border-box;resize:none;padding:16px 22px;border:1.5px solid var(--st-line-2, var(--border));border-radius:999px;background:var(--st-bg, var(--surface));color:var(--st-text, var(--text));font:inherit;font-size:14px;line-height:1.4;outline:none;overflow-y:auto;scrollbar-width:none;box-shadow:0 2px 10px rgba(0,0,0,.04)}
.ptool-work textarea::-webkit-scrollbar{display:none}
.ptool-work textarea::placeholder{color:var(--st-dim, var(--text-mute))}
.ptool-work textarea:focus{border-color:var(--st-dim, var(--text-mute))}
.ptool-work .photo-tool-char-counter{align-self:flex-end;margin:-8px 14px -4px;font-size:11px;color:var(--st-dim, var(--text-mute))}

/* Generate: a gradient pill on the right. */
.ptool-work .photo-tool-generate{flex:0 0 auto;align-self:flex-end;width:auto;min-width:190px;height:50px;margin:0;padding:0 34px;border:0;border-radius:999px;background:var(--ptool-grad);color:#fff;font-size:17px;font-weight:600;letter-spacing:.01em}
.ptool-work .photo-tool-generate:disabled{opacity:1;background:var(--st-bg-3, var(--surface-2));color:var(--st-dim, var(--text-mute))}
#uploadPanel.for-photo-tool{z-index:1000006 !important}
#studioGridReferencePanel.for-photo-tool{z-index:1000006 !important}
body:has(#photoToolModal.show) #visualCreateModal{z-index:1000007 !important}

/* Built-in references: a row of portrait cards with page dots. */
.ptool-work :is(.tattoo-catalog,.logo-reference-catalog,.hair-beard-catalog,.replace-object-objects-row){flex:0 0 auto;margin:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none}
.ptool-work :is(.tattoo-catalog,.logo-reference-catalog,.replace-object-objects-row)>header{display:flex;flex-direction:row;align-items:center;text-align:left;justify-content:space-between;gap:8px;margin:0 0 6px;padding:0}
.ptool-work :is(.tattoo-catalog,.logo-reference-catalog,.replace-object-objects-row)>header b{font-size:13px;font-weight:500;color:var(--st-mute, var(--text-mute))}
.ptool-work :is(.tattoo-catalog,.logo-reference-catalog,.replace-object-objects-row)>header small{display:none}
.ptool-pages{display:flex;gap:7px;margin-left:auto}
.ptool-pages[hidden]{display:none}
.ptool-pages button{width:9px;height:9px;padding:0;border:0;border-radius:50%;background:var(--st-line-2, rgba(127,127,127,.3));cursor:pointer}
.ptool-pages button.active{background:var(--ptool-grad)}
.ptool-work .preset-carousel{position:relative;margin:0;padding:0}
.ptool-work .preset-carousel-arrow{display:none}
.ptool-work .preset-carousel-track{display:flex;gap:6px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:2px}
.ptool-work .preset-carousel-track::-webkit-scrollbar{display:none}
.ptool-work :is(.tattoo-reference-card,.logo-reference-card,.hair-beard-card,.replace-object-object-card){flex:0 0 58px !important;width:58px !important;min-width:0 !important;height:72px;margin:0;padding:0 !important;border:0 !important;border-radius:10px !important;overflow:hidden;background:var(--st-bg-2, var(--surface-2)) !important;box-shadow:none !important;cursor:pointer;scroll-snap-align:start}
.ptool-work :is(.tattoo-reference-card,.logo-reference-card,.hair-beard-card,.replace-object-object-card) :is(span,.hair-beard-card-image){display:block;width:100%;height:100%;margin:0;padding:0;border-radius:0;background:none}
.ptool-work :is(.tattoo-reference-card,.logo-reference-card,.hair-beard-card,.replace-object-object-card) img{display:block;width:58px !important;height:72px !important;max-width:none;object-fit:cover;border-radius:0}
.ptool-work :is(.tattoo-reference-card>b,.logo-reference-card>span,.hair-beard-card-name,.hair-beard-card-check,.replace-object-object-card>b,.replace-object-object-card>small){display:none !important}
.ptool-work .replace-object-object-card{position:relative}
.ptool-work .replace-object-object-card span:last-child{position:absolute;left:0;right:0;bottom:0;height:auto;padding:10px 3px 3px;background:linear-gradient(transparent,rgba(0,0,0,.6));color:#fff;font-size:9px;line-height:1.2;text-align:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.ptool-work .replace-object-object-card .replace-object-object-thumb{height:100%}
.ptool-work .replace-object-object-card.is-create span:last-child{background:none;color:var(--st-dim, var(--text-mute))}
.ptool-work .replace-object-object-plus{display:grid;place-items:center;width:100%;height:100%;font-size:22px}
.ptool-work :is(.tattoo-reference-card,.logo-reference-card,.hair-beard-card,.replace-object-object-card).selected{outline:2px solid var(--st-text, var(--text));outline-offset:-2px}

/* Hair & beard: the category switch, the page dots and the colour pill on one line. */
.ptool-hair{position:relative;flex:0 0 auto;display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;column-gap:10px;row-gap:6px}
.ptool-hair .hair-beard-catalog{display:contents}
.ptool-hair .preset-carousel{grid-column:1 / -1;grid-row:2}
.ptool-hair .ptool-pages{grid-column:2;grid-row:1}
.ptool-work .hair-beard-tabs{grid-column:1;grid-row:1;display:flex;gap:4px;margin:0;padding:0;overflow-x:auto;scrollbar-width:none}
.ptool-work .hair-beard-tabs::-webkit-scrollbar{display:none}
.ptool-work .hair-beard-tab{flex:0 0 auto;height:30px;min-height:0;padding:0 12px;border:0;border-radius:999px;background:transparent;color:var(--st-dim, var(--text-mute));font:inherit;font-size:12px;font-weight:600;cursor:pointer}
.ptool-work .hair-beard-tab.active{background:var(--st-bg-2, var(--surface-2));color:var(--st-text, var(--text))}
.ptool-dropdown{position:relative;z-index:4;grid-column:3;grid-row:1}
.ptool-dropdown>summary{display:flex;align-items:center;gap:7px;height:30px;padding:0 12px;border-radius:999px;background:var(--st-bg-2, var(--surface-2));font-size:12px;font-weight:600;list-style:none;cursor:pointer;white-space:nowrap}
.ptool-dropdown>summary::-webkit-details-marker{display:none}
.ptool-dropdown>summary::after{content:"";width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(-135deg);margin-top:3px;transition:transform .2s}
.ptool-dropdown[open]>summary::after{transform:rotate(45deg);margin-top:-3px}
.ptool-dots{display:flex;gap:3px;font-style:normal}
.ptool-dots:empty{display:none}
.ptool-dots b{width:10px;height:10px;border-radius:50%;background:var(--swatch);box-shadow:0 0 0 1px rgba(127,127,127,.35)}

/* The colour window: the parts on the left, the picker on the right. */
.ptool-dropdown-panel{position:absolute;right:0;bottom:calc(100% + 8px);display:grid;grid-template-columns:auto 196px;gap:12px;padding:12px;border-radius:18px;background:var(--st-bg, var(--surface));border:1px solid var(--st-line-2, var(--border));box-shadow:0 18px 50px rgba(0,0,0,.28)}
.ptool-color-parts{display:flex;flex-direction:column;gap:4px;min-width:140px}
.ptool-color-part{display:flex;align-items:center;gap:4px}
.ptool-color-reset{width:20px;height:20px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--st-dim, var(--text-mute));font-size:15px;line-height:20px;cursor:pointer}
.ptool-color-reset:disabled{visibility:hidden}
.ptool-color-name{flex:1;display:flex;align-items:center;gap:9px;height:34px;padding:0 12px 0 5px;border:0;border-radius:999px;background:transparent;color:var(--st-text, var(--text));font:inherit;cursor:pointer;text-align:left}
.ptool-color-part.is-active .ptool-color-name{background:var(--st-accent-bg, rgba(91,141,255,.16))}
.ptool-color-name b{font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
:is(.ptool-color-name,.ptool-color-hex) i{flex:0 0 auto;width:24px;height:24px;border-radius:50%;background:var(--swatch);box-shadow:0 0 0 1px rgba(127,127,127,.35)}
:is(.ptool-color-name,.ptool-color-hex) i.is-original{background:linear-gradient(135deg,#fff 46%,#e5484d 46% 54%,#fff 54%)}
.ptool-color-editor{display:flex;flex-direction:column;gap:9px}
.ptool-color-sv{position:relative;height:96px;border-radius:10px;cursor:crosshair;touch-action:none;background:linear-gradient(transparent,#000),linear-gradient(90deg,#fff,hsl(var(--hue) 100% 50%))}
.ptool-color-sv i{position:absolute;width:12px;height:12px;margin:-6px 0 0 -6px;border:2px solid #fff;border-radius:50%;box-shadow:0 0 0 1px rgba(0,0,0,.35);pointer-events:none}
.ptool-color-hue{width:100%;height:10px;margin:0;border-radius:999px;background:linear-gradient(90deg,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00);-webkit-appearance:none;appearance:none;outline:none;cursor:pointer}
.ptool-color-hue::-webkit-slider-thumb{width:14px;height:14px;border:2px solid #fff;border-radius:50%;background:transparent;box-shadow:0 0 0 1px rgba(0,0,0,.35);-webkit-appearance:none;appearance:none}
.ptool-color-hue::-moz-range-thumb{width:12px;height:12px;border:2px solid #fff;border-radius:50%;background:transparent;box-shadow:0 0 0 1px rgba(0,0,0,.35)}
.ptool-color-row{display:flex;align-items:center;gap:6px}
.ptool-color-tool{flex:0 0 auto;width:30px;height:30px;padding:5px;border:1px solid var(--st-line-2, var(--border));border-radius:9px;background:transparent;color:var(--st-text, var(--text));cursor:pointer}
.ptool-color-tool svg{display:block;width:100%;height:100%}
.ptool-color-hex{flex:1;min-width:0;display:flex;align-items:center;gap:6px;height:30px;padding:0 8px 0 5px;border:1px solid var(--st-line-2, var(--border));border-radius:9px}
.ptool-color-hex i{width:18px;height:18px}
.ptool-color-hex input{width:100%;min-width:0;padding:0;border:0;background:transparent;color:var(--st-text, var(--text));font:inherit;font-size:12px;outline:none;text-transform:uppercase}
.ptool-color-hex input::placeholder{text-transform:none;color:var(--st-dim, var(--text-mute))}
.ptool-color-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
.ptool-color-grid button{aspect-ratio:1;padding:0;border:0;border-radius:50%;background:var(--swatch);box-shadow:inset 0 0 0 1px rgba(127,127,127,.3);cursor:pointer}
.ptool-color-grid button.active{box-shadow:0 0 0 2px var(--st-bg, var(--surface)),0 0 0 3.5px var(--st-text, var(--text))}

/* Captions follow the Pro Studio theme: dark on White, light on Black/Gray. */
#uploadPanel .upload-photo-center-sub{color:var(--st-dim, var(--text-mute))!important}
.upload-panel-empty{padding:18px;color:var(--st-mute, var(--text-mute));font-size:13px}
.photo-tool-dialog.replace-object-mask-editor-dialog{background:var(--st-bg, var(--surface));color:var(--st-text, var(--text));border-color:var(--st-line-2, var(--border))}
.replace-object-mask-editor-dialog .photo-tool-head small,.replace-object-mask-editor-dialog .photo-tool-head p,.replace-object-brush-size{color:var(--st-dim, var(--text-dim))}
.replace-object-mask-editor-dialog .photo-tool-head h3,.replace-object-brush-size b{color:var(--st-text, var(--text))}
.replace-object-mask-editor-dialog .photo-tool-head>button{border-color:var(--st-line-2, var(--border));background:var(--st-bg-2, var(--surface));color:var(--st-text, var(--text))}
.replace-object-mask-canvas-wrap,.replace-object-mask-canvas-wrap canvas{background:var(--st-bg-2, #111318)}
.replace-object-editor-loading{color:var(--st-dim, rgba(255,255,255,.72))}
.replace-object-mask-toolbar button{border-color:var(--st-line-2, var(--border));background:var(--st-bg-2, var(--surface));color:var(--st-text, var(--text))}
.replace-object-mask-toolbar button.save{border-color:var(--primary);background:var(--primary);color:#fff}

/* Phone: the banner on top as a strip, the rest under it on one screen. */
@media(max-width:680px){
  .photo-tool-modal:has(.ptool-layout){padding:8px;align-items:center}
  #photoToolDialog:has(.ptool-layout){width:100%;height:calc(100vh - 16px);height:calc(100dvh - 16px);border-radius:22px}
  html.browser-app #photoToolDialog:has(.ptool-layout){height:calc(var(--bvh,1vh) * 100 - 16px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px))}
  .ptool-layout{grid-template-columns:minmax(0,1fr);grid-template-rows:clamp(70px,15dvh,140px) minmax(0,1fr)}
  .ptool-close{top:10px;right:10px}
  .ptool-work{gap:10px;padding:14px 16px 16px}
  .ptool-head{padding-right:0}
  .ptool-kicker{font-size:21px}
  .ptool-head h3{margin-top:2px;font-size:16px}
  .ptool-head p{margin-top:3px;font-size:12.5px}
  .ptool-divider{margin:8px 0}
  .ptool-zone:not(.has-items) .ptool-add{height:min(100%,140px)}
  .ptool-zone[data-max="1"] .ptool-ref{height:min(100%,170px)}
  .ptool-work textarea{height:48px;min-height:48px;padding:13px 18px}
  .ptool-work .photo-tool-generate{align-self:stretch;height:48px}
  .ptool-dropdown-panel{grid-template-columns:minmax(0,1fr);width:calc(100vw - 48px);max-width:340px}
  .ptool-color-parts{display:grid;grid-template-columns:1fr 1fr;gap:2px;min-width:0}
  .ptool-color-name{height:30px}
  .ptool-color-name b{font-size:12px}
  .ptool-color-sv{height:84px}
  .ptool-color-grid{gap:5px;max-width:220px}
}
@media(max-width:680px) and (max-height:720px){
  .ptool-head p{display:none}
}
@media(max-width:680px) and (max-height:620px){
  .ptool-layout{grid-template-rows:56px minmax(0,1fr)}
  .ptool-kicker{font-size:17px}
}

/* Generation results (stage 2): several photos fanned in one card, the
   video itself in its card, kind icons instead of words, the actions as
   small icons with their name on hover, the picker for several photos and,
   on wide screens, the result card in the centre with the media on the
   left and the details on the right. */
.generation-result-thumb.is-video{width:96px;flex-basis:96px;height:64px}
.generation-result-video{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none}
.generation-result-fallback .generation-kind-icon{width:22px;height:22px}
.generation-result-fan{position:relative;display:block;width:84px;height:72px;margin:2px 4px 2px 2px}
.generation-result-fan-card{position:absolute;top:4px;left:12px;width:58px;height:62px;padding:0;overflow:hidden;border:2px solid var(--st-bg-2,#141518);border-radius:12px;background:var(--st-bg-3,#24262b);box-shadow:0 6px 14px -8px rgba(0,0,0,.6);cursor:pointer;z-index:calc(10 - var(--fan-i));transform:translateX(calc((var(--fan-i) - (var(--fan-count) - 1) / 2) * 7px)) rotate(calc((var(--fan-i) - (var(--fan-count) - 1) / 2) * 8deg));transform-origin:50% 90%;transition:transform .25s cubic-bezier(.22,1,.36,1)}
.generation-result-fan:hover .generation-result-fan-card{transform:translateX(calc((var(--fan-i) - (var(--fan-count) - 1) / 2) * 12px)) rotate(calc((var(--fan-i) - (var(--fan-count) - 1) / 2) * 13deg))}
.generation-result-fan-card img{display:block;width:100%;height:100%;object-fit:cover}
.generation-result-fan-card:focus-visible{outline:2px solid var(--st-accent,#8fc4ff);outline-offset:2px}
.generation-result-fan-count{position:absolute;right:0;bottom:0;z-index:20;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--st-text,#f3f3f3);color:var(--st-bg,#0b0b0d);font-size:10.5px;font-weight:700;line-height:18px;text-align:center}
.msg-action-btn[data-tip]{position:relative}
@media (hover:hover){
  .msg-action-btn[data-tip]::after{content:attr(data-tip);position:absolute;left:50%;bottom:calc(100% + 6px);z-index:30;padding:5px 8px;border-radius:8px;background:var(--st-text,#f3f3f3);color:var(--st-bg,#0b0b0d);font-size:11.5px;font-weight:600;line-height:1.2;white-space:nowrap;opacity:0;pointer-events:none;transform:translate(-50%,4px);transition:opacity .15s ease,transform .15s ease}
  .msg-action-btn[data-tip]:hover::after,.msg-action-btn[data-tip]:focus-visible::after{opacity:1;transform:translate(-50%,0)}
}
.gen-picker{position:fixed;z-index:400;width:min(320px,calc(100vw - 16px));box-sizing:border-box;padding:12px;border:1px solid var(--st-border,rgba(255,255,255,.1));border-radius:16px;background:var(--st-bg-2,#141518);color:var(--st-text,#f3f3f3);box-shadow:0 18px 40px -18px rgba(0,0,0,.7);font-family:inherit}
.gen-picker-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px;font-size:13.5px}
.gen-picker-all{padding:4px 8px;border:0;border-radius:8px;background:transparent;color:var(--st-dim,rgba(255,255,255,.6));font:600 12px inherit;font-family:inherit;cursor:pointer}
.gen-picker-all:hover{color:var(--st-text,#f3f3f3)}
.gen-picker-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:8px;max-height:240px;overflow-y:auto}
.gen-picker-item{position:relative;aspect-ratio:1;padding:0;overflow:hidden;border:2px solid transparent;border-radius:12px;background:var(--st-bg-3,#24262b);cursor:pointer;opacity:.55;transition:opacity .15s ease,border-color .15s ease}
.gen-picker-item.is-on{border-color:var(--st-text,#f3f3f3);opacity:1}
.gen-picker-item img{display:block;width:100%;height:100%;object-fit:cover}
.gen-picker-check{position:absolute;top:5px;right:5px;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--st-text,#f3f3f3);color:var(--st-bg,#0b0b0d);opacity:0;transition:opacity .15s ease}
.gen-picker-item.is-on .gen-picker-check{opacity:1}
.gen-picker-check .generation-action-icon{width:12px;height:12px;flex-basis:12px}
.gen-picker-go{width:100%;height:38px;margin-top:12px;border:0;border-radius:12px;background:var(--st-text,#f3f3f3);color:var(--st-bg,#0b0b0d);font:700 13.5px inherit;font-family:inherit;cursor:pointer}
.gen-picker-go:disabled{opacity:.4;cursor:default}
.generation-info-actions button{display:flex;align-items:center;gap:8px}
.generation-info-used{display:flex;flex-wrap:wrap;gap:8px}
.generation-info-used img,.generation-info-used video{width:44px;height:44px;border-radius:10px;object-fit:cover;border:1px solid var(--st-border,rgba(255,255,255,.1))}
@media (min-width:1000px){
  .generation-info-drawer-backdrop{justify-content:center;align-items:center;padding:24px}
  .generation-info-drawer{display:flex;flex-direction:column;width:min(1080px,94vw);height:auto;max-height:min(780px,92vh);padding:18px 20px 20px;border:1px solid var(--st-border,rgba(255,255,255,.1));border-radius:22px}
  .generation-info-body{display:flex;flex:1;min-height:0}
  .generation-info-layout{display:grid;flex:1;grid-template-columns:minmax(0,1.3fr) minmax(300px,1fr);gap:22px;min-height:0}
  .generation-info-media{display:flex;align-items:center;justify-content:center;min-height:0;max-height:min(680px,80vh);overflow:auto;border-radius:16px;background:var(--st-bg-2,#141518)}
  .generation-info-media>*{margin:0!important}
  .generation-info-media img,.generation-info-media video{max-width:100%;max-height:min(660px,78vh);object-fit:contain}
  .generation-info-details{display:flex;flex-direction:column;min-height:0;overflow-y:auto;padding-right:4px}
  .generation-info-actions{display:flex!important;flex-wrap:wrap;gap:8px}
  .generation-info-actions button{position:relative;justify-content:center;width:42px;height:42px;padding:0!important}
  .generation-info-actions .generation-action-icon{width:18px;height:18px;flex-basis:18px}
  .generation-info-action-label{position:absolute;left:50%;bottom:calc(100% + 6px);z-index:30;padding:5px 8px;border-radius:8px;background:var(--st-text,#f3f3f3);color:var(--st-bg,#0b0b0d);font-size:11.5px;font-weight:600;line-height:1.2;white-space:nowrap;opacity:0;pointer-events:none;transform:translate(-50%,4px);transition:opacity .15s ease,transform .15s ease}
  .generation-info-actions button:hover .generation-info-action-label,.generation-info-actions button:focus-visible .generation-info-action-label{opacity:1;transform:translate(-50%,0)}
  .generation-info-used-section{margin-top:auto;padding-top:12px}
}

/* The generation card's picture fills its block; a video plays there at
   once, silent, with no player: full screen top left, sound top right. */
.generation-info-preview.generation-info-preview-button{display:block;width:100%;height:auto;max-height:min(46vh,420px);aspect-ratio:auto}
.generation-info-preview.generation-info-preview-button img{width:100%;height:auto;max-height:min(46vh,420px);object-fit:contain}
.generation-info-video{position:relative;margin:0 0 14px;border-radius:16px;overflow:hidden;background:#000}
.generation-info-video-player{display:block;width:100%;max-height:min(46vh,420px);object-fit:contain;background:#000}
.generation-info-video-btn{position:absolute;top:10px;z-index:2;display:flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;border:0;border-radius:50%;background:rgba(0,0,0,.52);color:#fff;cursor:pointer;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.generation-info-video-btn[hidden]{display:none}
.generation-info-video-btn svg{width:18px;height:18px}
.generation-info-video-btn.is-open{left:10px}
.generation-info-video-btn.is-sound{right:10px}
@media (min-width:1000px){
  .generation-info-media{position:relative;min-height:min(560px,70vh)}
  .generation-info-media>.generation-info-preview-button,.generation-info-media>.generation-info-video{position:absolute;inset:0;width:100%;height:100%;max-height:none;border:0;border-radius:16px;background:transparent}
  .generation-info-media>.generation-info-video{background:#000}
  .generation-info-media>.generation-info-preview-button img,.generation-info-media .generation-info-video-player{width:100%;height:100%;max-width:none;max-height:none;object-fit:contain}
}
/* The site's sidebar stays on screen: the card is centred in the room to
   its right instead of sliding under it. */
@media (min-width:1000px){
  html.website-studio .generation-info-drawer-backdrop{padding-left:calc(var(--sx-sidebar-w,256px) + 24px)}
  html.website-studio .generation-info-drawer{width:min(1080px,calc(100vw - var(--sx-sidebar-w,256px) - 48px))}
}

/* =====================================================
CSS-БЛОК: нижняя панель Pro Studio (компьютер)
One look for every left-hand control in every mode: tiles (styles,
character, upload, object, start and end image, voices, text file) and the
upload rows with their round buttons share colour, radius, padding, gaps
and type. Voice input sits with Generate at the right edge in every mode.
Phones keep their own panel for now.
===================================================== */
@media (min-width:901px){
  body:not(.device-mobile):not(.device-tablet) .view[data-view="tools"].active .studio-video-composer :is(.studio-image-tool,.studio-frame-card,.vgen-btn,.vgen-upload-row,.video-uploads-block,.text-upload-tile){
    border:0;border-radius:14px;background:var(--st-bg-3);color:var(--st-dim);box-shadow:var(--st-depth-1);padding:12px;gap:8px;
  }
  body:not(.device-mobile):not(.device-tablet) .view[data-view="tools"].active .studio-video-composer :is(.studio-image-tool,.studio-frame-card)>span:last-child,
  body:not(.device-mobile):not(.device-tablet) .view[data-view="tools"].active .studio-video-composer :is(.vgen-btn-lbl,.vgen-upload-lbl,.video-uploads-block-label){
    align-self:flex-start;text-align:left;font-size:12px;font-weight:500;line-height:1.2;color:var(--st-dim);
  }
  body:not(.device-mobile):not(.device-tablet) .view[data-view="tools"].active .studio-video-composer :is(.studio-image-tool,.studio-frame-card,.vgen-btn){align-items:flex-start;text-align:left}
  body:not(.device-mobile):not(.device-tablet) .view[data-view="tools"].active .studio-video-composer :is(.vgen-upload-lbl,.video-uploads-block-label){align-self:center}
  body:not(.device-mobile):not(.device-tablet) .view[data-view="tools"].active .studio-video-composer :is(.studio-frame-ico,.vgen-btn-ico) svg{width:20px;height:20px}
  body:not(.device-mobile):not(.device-tablet) .view[data-view="tools"].active .studio-video-composer :is(.video-add-icon-row,.vgen-upload-icons,.text-upload-actions){gap:8px}
  body:not(.device-mobile):not(.device-tablet) .view[data-view="tools"].active .studio-video-composer :is(.video-add-icon-btn,.vgen-uico,.text-upload-actions button){
    width:36px;height:36px;flex:0 0 36px;margin:0;border:0;border-radius:50%;background:var(--st-bg-4);color:var(--st-text);box-shadow:none;
  }
  body:not(.device-mobile):not(.device-tablet) .view[data-view="tools"].active .studio-video-composer :is(.video-add-icon-btn,.vgen-uico,.text-upload-actions button) svg{width:17px;height:17px}
  body:not(.device-mobile):not(.device-tablet) .view[data-view="tools"].active .studio-video-composer :is(.studio-media-column,.image-visual-grid,.vgen-actions){gap:8px}
  body:not(.device-mobile):not(.device-tablet) .view[data-view="tools"].active .studio-video-composer :is(.video-uploads-block,.vgen-upload-row){min-height:60px;height:auto;margin-top:0}

  /* Voice input and Generate together at the right edge, in every mode. */
  body:not(.device-mobile):not(.device-tablet) .studio-video-composer:not([data-composer-mode="text"]) .studio-control-row #micBtn{
    position:sticky;top:auto;bottom:auto;left:auto;right:168px;flex:0 0 48px;width:48px;height:48px;margin-left:auto;border-radius:50%;
    border:1px solid var(--st-line-2,rgba(255,255,255,.13));background:var(--st-bg-3,#202020);color:var(--st-text,#eee);box-shadow:var(--st-depth-1,none);
  }
  body:not(.device-mobile):not(.device-tablet) .studio-video-composer:not([data-composer-mode="text"]) .studio-control-row #micBtn.rec{background:#1687ff;border-color:#46a1ff;color:#fff}
  body:not(.device-mobile):not(.device-tablet) .studio-video-composer:not([data-composer-mode="text"]) .studio-control-row #sendBtn{margin-left:0;width:160px;min-width:160px}
  /* A row wider than the panel scrolls under them; they stay in view. */
  body:not(.device-mobile):not(.device-tablet) .studio-video-composer .studio-control-row #sendBtn{position:sticky;right:0;z-index:3;box-shadow:-8px 0 0 0 var(--st-bg-2,#1c1c1c)}
  body:not(.device-mobile):not(.device-tablet) .studio-video-composer .studio-control-row #micBtn{position:sticky;right:168px;z-index:3;box-shadow:-16px 0 14px -6px var(--st-bg-2,#1c1c1c)!important}
  body:not(.device-mobile):not(.device-tablet) .studio-video-composer[data-composer-mode="text"] .studio-control-row #micBtn{right:48px}
  body:not(.device-mobile):not(.device-tablet) .studio-video-composer .studio-control-row #sendBtn:disabled{opacity:1}
  body:not(.device-mobile):not(.device-tablet) .studio-video-composer:not([data-composer-mode="text"]) .text-recording-bar{right:0;background:var(--st-bg-2,#202020)}
  body:not(.device-mobile):not(.device-tablet) .studio-video-composer[data-composer-mode="text"] .studio-control-row #micBtn{margin-left:auto}
}
:is(body.device-mobile,body.device-tablet) .studio-video-composer:not([data-composer-mode="text"]) #micBtn{display:none!important}
@media (max-width:900px){.studio-video-composer:not([data-composer-mode="text"]) #micBtn{display:none!important}}

/* Video: a chosen Character fills the whole Uploads block; an uploaded
   file and a Character exclude each other, so the other button dims. */
.video-uploads-block.has-character{
  position:relative;overflow:hidden;
  background-image:linear-gradient(90deg,rgba(0,0,0,.74),rgba(0,0,0,.22)),var(--video-character-bg)!important;
  background-size:cover!important;background-position:center 28%!important;
}
.video-uploads-block.has-character .video-uploads-block-label{color:#fff!important;text-shadow:0 1px 6px rgba(0,0,0,.6)}
.video-uploads-block.has-character .video-add-icon-btn{background:rgba(12,12,12,.55)!important;color:#fff!important;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.video-add-icon-btn.is-locked{opacity:.38}

/* The cross on the chosen Character or Object cancels the choice. */
.visual-deselect-btn{position:absolute;top:8px;left:8px;z-index:5;width:26px;height:26px;padding:0;border:0;border-radius:50%;display:grid;place-items:center;background:rgba(12,12,12,.76);color:#fff;font:700 17px/1 inherit;cursor:pointer}
.visual-deselect-btn:hover{background:rgba(12,12,12,.92)}

/* A photo still uploading shows in its tile at once. */
.studio-image-tool.is-uploading{position:relative;overflow:hidden}
.studio-image-tool.is-uploading::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(47,111,189,.12),rgba(47,111,189,.42),rgba(47,111,189,.12));transform:translateX(-100%);animation:sylvexUploadSweep 1.4s ease-in-out infinite;pointer-events:none}

/* =====================================================
CSS-БЛОК: Grid Mode — референсы, списки
The "+ Референс" window (History / Characters / Objects over the upload of
a new file) and small arrows on every Grid list, model choice included.
===================================================== */
.grid-ref-panel .grid-ref-card{padding-top:18px}
.grid-ref-tabs{display:flex;gap:4px;margin:0 44px 12px 0;padding:4px;border-radius:999px;background:var(--st-bg-3,#2a2a2a);width:max-content;max-width:100%}
.grid-ref-tabs button{height:32px;padding:0 14px;border:0;border-radius:999px;background:transparent;color:var(--st-dim,#b9b9bf);font:600 13px/1 inherit;cursor:pointer}
.grid-ref-tabs button.active{background:var(--st-invert-bg,#f4f4f4);color:var(--st-invert-text,#111)}
.grid-ref-grid .grid-ref-create,.grid-ref-grid .grid-ref-visual{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;overflow:hidden}
.grid-ref-grid .grid-ref-create span{width:34px;height:34px;display:grid;place-items:center;border-radius:12px;background:var(--st-bg-4,rgba(255,255,255,.08));color:var(--st-text,#f3f3f3);font-size:18px}
.grid-ref-grid .grid-ref-create b,.grid-ref-grid .grid-ref-visual b{font-size:11px;font-weight:600;color:var(--st-dim,#c8c8cc);text-align:center;padding:0 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.grid-ref-grid .grid-ref-visual b{position:absolute;left:0;right:0;bottom:0;padding:16px 6px 6px;background:linear-gradient(transparent,rgba(0,0,0,.72));color:#fff}
.grid-ref-grid .grid-ref-visual:disabled{opacity:.45;cursor:default}
.studio-grid-node-settings select{appearance:none;-webkit-appearance:none;padding-right:20px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%238a8f99' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 8px center;background-size:8px 5px}

/* =====================================================
CSS-БЛОК: Edit — модель, референсы, ползунки, фокус
The model is plain text with a small arrow and its Pro Studio icon; the +
beside it adds a reference; sliders are thin and grey; no blue outline on
press anywhere in Edit.
===================================================== */
.edit-model-picker{position:relative;display:flex;align-items:center}
.edit-model-current{display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 4px;border:0;background:transparent;color:var(--edit-text);font:500 13px/1 inherit;cursor:pointer;white-space:nowrap}
.edit-model-current:hover{color:var(--edit-text);opacity:.85}
.edit-model-chevron{width:9px;height:6px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;opacity:.7}
.edit-model-icon{width:16px;height:16px;display:inline-grid;place-items:center;flex:0 0 16px}
.edit-model-icon img,.edit-model-icon svg{width:16px;height:16px;object-fit:contain}
.edit-model-menu{position:absolute;z-index:30;left:0;bottom:calc(100% + 8px);width:250px;max-height:340px;overflow:auto;padding:6px;border:1px solid var(--edit-border-strong);border-radius:var(--edit-radius-medium);background:var(--edit-surface);box-shadow:0 18px 50px rgba(0,0,0,.4)}
.edit-model-menu[hidden]{display:none}
.edit-model-group small{display:block;padding:8px 8px 4px;color:var(--edit-subtle);font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.edit-model-group button{width:100%;display:flex;align-items:center;gap:9px;height:34px;padding:0 8px;border:0;border-radius:var(--edit-radius-small);background:transparent;color:var(--edit-text);font:500 12.5px/1 inherit;text-align:left;cursor:pointer}
.edit-model-group button:hover,.edit-model-group button.active{background:var(--edit-selected)}
.edit-workspace-action-row>button.edit-extra-ref-add{width:30px;min-width:30px;height:30px;padding:0;border:0;background:transparent;box-shadow:none;color:var(--edit-text);font:400 22px/1 inherit;display:grid;place-items:center;cursor:pointer}
.edit-workspace-action-row>button.edit-extra-ref-add:hover{opacity:.75}
.edit-extra-ref{position:relative;flex:0 0 32px;width:32px;height:32px;border-radius:8px;overflow:hidden;background:var(--edit-surface-raised)}
.edit-extra-ref img{width:100%;height:100%;object-fit:cover;display:block}
.edit-extra-ref button{position:absolute;top:1px;right:1px;width:15px;height:15px;padding:0;border:0;border-radius:50%;background:rgba(0,0,0,.7);color:#fff;font:700 11px/15px inherit;cursor:pointer}
/* Thin grey sliders that stay easy to see. */
.edit-workspace input[type=range]{-webkit-appearance:none;appearance:none;height:3px;border-radius:99px;background:color-mix(in srgb,var(--edit-muted) 42%,transparent);outline:0}
.edit-workspace input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;background:var(--edit-muted);border:2px solid var(--edit-surface);box-shadow:0 0 0 1px color-mix(in srgb,var(--edit-muted) 60%,transparent);cursor:pointer}
.edit-workspace input[type=range]::-moz-range-thumb{width:10px;height:10px;border-radius:50%;background:var(--edit-muted);border:2px solid var(--edit-surface);cursor:pointer}
.edit-workspace input[type=range]::-moz-range-track{height:3px;border-radius:99px;background:color-mix(in srgb,var(--edit-muted) 42%,transparent)}
/* No blue outline on press; keyboard focus keeps a quiet grey ring. */
.edit-workspace :focus{outline:none}
.edit-workspace button:focus-visible{outline:1px solid color-mix(in srgb,var(--edit-muted) 70%,transparent);outline-offset:2px}
.edit-chain-node[data-active="true"] .edit-workspace-frame{outline:2px solid color-mix(in srgb,var(--edit-muted) 75%,transparent)}
/* Individual photo selection, using the existing Studio download popover. */
.generation-image-download-picker{position:fixed!important;inset:0;margin:auto;width:280px;height:fit-content;max-width:calc(100vw - 32px);max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);overflow:auto;overscroll-behavior:contain}
.generation-image-download-picker>header{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px;font-size:12px}
.generation-image-download-picker>header button{border:0;background:transparent;color:inherit;font:inherit;font-size:20px;cursor:pointer}
.generation-image-download-picker>div{grid-template-columns:repeat(2,minmax(0,1fr));max-height:280px;overflow:auto}
.generation-image-download-picker>div button{position:relative;height:96px}
.generation-image-download-picker>div button.is-selected{border-color:var(--st-text,#f5f5f7);box-shadow:inset 0 0 0 2px var(--st-text,#f5f5f7)}
.generation-image-download-picker>div button>span{position:absolute;left:4px;bottom:4px;padding:1px 5px;border-radius:5px;background:rgba(0,0,0,.65);color:#fff;font:inherit;font-size:10px;font-weight:700;line-height:16px}
.generation-image-download-picker>div button>i{position:absolute;right:4px;top:4px;display:none;width:20px;height:20px;border-radius:50%;background:var(--st-text,#f5f5f7);color:var(--st-bg,#111);font:inherit;font-size:12px;font-weight:700;line-height:20px}
.generation-image-download-picker>div button.is-selected>i{display:block}
.generation-image-download-picker>footer{display:grid;gap:6px;margin-top:8px}
.generation-image-download-picker>footer button{height:34px;border:1px solid var(--st-border,rgba(255,255,255,.12));border-radius:9px;background:var(--st-bg-3,#15161a);color:inherit;font:inherit;font-size:11px;cursor:pointer}
.generation-image-download-picker>footer button[data-generation-picker-download]{background:var(--st-text,#f5f5f7);color:var(--st-bg,#111);font-weight:700}
.generation-image-download-picker button:disabled{opacity:.5;cursor:default}
.generation-image-download-picker>p{margin:8px 0 0;font-size:10px;line-height:1.4;opacity:.7}

.catalog-reference-picking #sxWebsiteStudioShell,.catalog-reference-picking #sxSidebar{visibility:hidden}
.catalog-reference-picking #studioGridReferencePanel{z-index:2147482000}