.studio{--gold:#ffd484;--muted:#aaa4b1;max-width:600px;padding-bottom:calc(108px + env(safe-area-inset-bottom));background:#0e0d12}
[hidden]{display:none!important}
[data-icon]{display:inline-grid;place-items:center;flex:none}
[data-icon] svg{display:block;width:22px;height:22px}
.icon-button{width:40px;height:40px;border-radius:14px;border:1px solid #ffffff20;background:#ffffff0b;color:#eee9f1;padding:0}
.studio-hero{position:relative;isolation:isolate;display:flex;align-items:end;min-height:310px;margin:20px 0 14px;padding:24px;border-radius:28px;overflow:hidden;background:#282131 url('/assets/covers/hero.webp') center 38%/cover}
.studio-hero:before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,#0c0a12f2,transparent 90%),linear-gradient(90deg,#100b1bc9,transparent 90%)}
.studio-hero h1{font-size:clamp(36px,10vw,57px);letter-spacing:-.06em;line-height:.97;margin:10px 0}
.studio-hero p{color:#eee2ec;font-size:13px;margin:0}
.studio-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.idea-card{position:relative;display:block;width:100%;aspect-ratio:4/5;padding:0;border:1px solid #ffffff22;border-radius:20px;overflow:hidden;background:#24202a;color:white;text-align:left;font:inherit}
.idea-card img{width:100%;height:100%;object-fit:cover;display:block}
.idea-card span{position:absolute;inset:auto 0 0;padding:34px 12px 12px;background:linear-gradient(transparent,#09070cf5)}
.idea-card strong,.idea-card small{display:block;overflow-wrap:anywhere}
.idea-card strong{font-size:clamp(12px,3.6vw,17px);line-height:1.15}
.idea-card small{font-size:11px;color:#ffda9c;margin-top:4px}
.studio-nav{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;width:min(100%,600px);margin:auto;padding:8px 8px calc(8px + env(safe-area-inset-bottom));background:#15131bf5;border-top:1px solid #ffffff19}
.studio-nav button{display:grid;grid-template-rows:30px 14px;justify-items:center;align-items:center;gap:3px;width:100%;min-width:0;height:57px;font:inherit}
.studio-nav button span{width:40px;height:30px;border-radius:11px}
.studio-nav button i{font-size:clamp(9px,2.7vw,12px);line-height:14px}
.studio-nav button.active{color:#ffd484}
.studio-nav button.active span{background:#ffcb7520}
.studio-nav #create-nav span{background:#ffd484;color:#211628}
.studio .setting-list button>span{display:flex;align-items:center;gap:10px}
.studio-dialog{max-height:94dvh;overflow:auto;border:1px solid #ffffff22;background:#191620}
.studio-dialog form,.result-panel{padding:16px 18px calc(20px + env(safe-area-inset-bottom))}
.dialog-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:12px}
.dialog-heading h2{margin:0;font-size:20px}
.selected-style{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.selected-style img,.attached img{width:66px;height:72px;object-fit:cover;border-radius:11px;flex:none}
.selected-style h2{font-size:22px;margin:0}
.studio-dialog .drop{min-height:105px;cursor:pointer}
.studio-dialog .drop input{display:block;position:absolute;width:1px;height:1px;opacity:0}
.studio-dialog .drop:focus-within{outline:2px solid #ffd484}
.attached{display:flex;align-items:center;gap:12px;padding:8px;background:#ffffff0a;border:1px solid #ffffff22;border-radius:14px}
.attached div{flex:1;min-width:0}
.attached small{display:block;color:#aaa4b1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#form-error{color:#ffaaa4;font-size:13px;margin:8px 0 0}
.studio .history-item{width:100%;text-align:left;color:inherit;font:inherit}
.history-item img{width:58px;height:65px;object-fit:cover;border-radius:9px;flex:none}
#result-image{display:block;width:100%;max-height:65dvh;object-fit:contain}
#download-result{display:flex;justify-content:center;align-items:center;gap:8px;text-decoration:none}
#admin-modal .dialog-heading{padding:12px;margin:0}
#admin-frame{display:block;width:100%;height:75dvh;border:0}
.admin #credits input{display:block;width:100%;padding:10px;margin:4px 0 9px;border:1px solid #ffffff25;border-radius:8px;background:#110f17;color:white}
.admin .metrics{grid-template-columns:repeat(3,minmax(0,1fr))}
.admin .metrics article{padding:8px;overflow-wrap:anywhere}

/* Studio motion and owner console */
.studio :is(button,a):focus-visible,.studio-dialog :is(button,a):focus-visible,.admin-studio button:focus-visible{outline:2px solid #ffd484;outline-offset:3px}
.studio button,.studio-dialog :is(button,a),.admin-studio button{transition:transform .18s ease,background-color .2s ease,border-color .2s ease,color .2s ease,box-shadow .2s ease}
.studio button:active,.studio-dialog button:active,.admin-studio button:active{transform:scale(.97)}
.studio-nav button span{transition:background-color .2s ease,transform .22s ease}
.studio-nav button:active span{transform:translateY(-2px)}
.studio .view.active,.console-card,.console-overview{animation:studio-enter .32s cubic-bezier(.2,.75,.25,1) both}
.studio-dialog[open]{animation:studio-sheet .28s cubic-bezier(.22,.75,.22,1) both}
.studio-dialog[open]::backdrop{animation:studio-fade .24s ease both}
.studio-dialog #attached:not([hidden]),.history-item[data-stage=completed],.console-feedback:not([hidden]){animation:studio-enter .28s ease both}
.idea-card img{transition:transform .45s cubic-bezier(.2,.75,.25,1)}
@media(hover:hover){.idea-card:hover img{transform:scale(1.05)}.idea-card:hover{border-color:#ffe1a16b}.studio .icon-button:hover,.admin-studio .icon-button:hover{background:#ffffff18}}
.primary[data-loading=true]::before{content:"";display:inline-block;width:13px;height:13px;margin-right:8px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;vertical-align:-3px;animation:studio-spin .8s linear infinite}
.generation-status{display:grid;grid-template-columns:52px minmax(0,1fr);align-items:center;gap:14px;padding:15px;border:1px solid #eac5883b;border-radius:21px;background:linear-gradient(120deg,#302237,#1e1a26 75%);animation:studio-enter .32s ease both}
.generation-status b,.generation-status small{display:block}
.generation-status small{color:#c9bdce;margin-top:4px;font-size:12px}
.generation-orbit{display:grid;place-items:center;position:relative;isolation:isolate;width:52px;height:52px;border-radius:17px;color:#ffe1a8;background:#ffd48412;font-size:25px}
.generation-orbit::after{content:"";position:absolute;inset:5px;border:1px solid #f5d0952b;border-top-color:#ffd484;border-radius:50%;animation:studio-spin 1.8s linear infinite}
.generation-track{display:block;position:relative;overflow:hidden;height:3px;margin-top:12px;border-radius:8px;background:#ffffff17}
.generation-track::before{content:"";position:absolute;inset:0 auto 0 0;width:48%;background:linear-gradient(90deg,transparent,#f5d095,transparent);animation:studio-sweep 1.9s ease-in-out infinite}
.history-item[data-stage=queued] img{opacity:.7}
#admin-modal{overflow:hidden}
#admin-modal .dialog-heading{padding:12px 16px;border-bottom:1px solid #ffffff13;background:#191620}
#admin-frame{height:min(81dvh,820px);background:#100f16}
.admin-studio{max-width:600px;min-height:100dvh;margin:auto;padding:14px clamp(12px,4vw,24px) 28px;background:radial-gradient(ellipse at 98% 0,#38294565,transparent 48%),#100f16}
.console-head,.console-brand,.console-intro,.console-title,.console-list li{display:flex;align-items:center;gap:12px}
.console-head,.console-intro,.console-list li{justify-content:space-between}
.console-brand>span,.console-index{display:grid;place-items:center;flex:none;width:39px;height:39px;border-radius:13px;background:#ffc97919;color:#ffd484}
.console-brand>span{font-size:21px}
.console-brand strong,.console-brand small{display:block}
.console-brand small,.console-title p,.console-list small,.console-metrics small{font-size:12px;color:#bcb2c3}
.console-brand small{margin-top:2px}
.console-overview,.console-card,.console-notice{margin-top:13px;padding:clamp(12px,4vw,20px);border:1px solid #ffffff1c;border-radius:20px;background:#1b1822}
.console-overview{background:linear-gradient(140deg,#322638,#1b1822 80%)}
.console-intro{align-items:flex-start;gap:6px}
.console-intro h1{margin:5px 0 0;font-size:clamp(23px,7vw,34px);line-height:1.05;letter-spacing:-.055em}
.console-pill{display:inline-flex;align-items:center;flex:none;padding:5px 8px;border-radius:999px;background:#ffd48417;color:#ffe0a6;font-size:11px;font-weight:700;white-space:nowrap}
.console-pill[data-kind=completed],.console-feedback[data-kind=completed]{background:#73dfac15;color:#a0edc8}
.console-pill[data-kind=failed],.console-feedback[data-kind=failed]{background:#ff808419;color:#ffb1b6}
.console-pill[data-kind=cancelled]{background:#ffffff12;color:#c4bac9}
.console-metrics,.console-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.console-metrics{margin-top:14px}
.console-metrics article{min-width:0;padding:11px;border:1px solid #ffffff17;border-radius:13px;background:#ffffff07}
.console-metrics b,.console-metrics small{display:block}
.console-metrics b{margin-bottom:3px;font-size:25px;font-variant-numeric:tabular-nums}
.console-title{margin-bottom:14px}
.console-title h2,.console-title p{margin:0}
.console-title h2{font-size:18px;letter-spacing:-.025em}
.console-title p{margin-top:3px}
.console-index{width:33px;height:33px;font-size:11px;font-weight:800}
.console-form label{display:block;min-width:0;font-size:12px;font-weight:700}
.console-form label small{color:#bcb2c3;font-weight:400}
.console-form input{display:block;width:100%;min-width:0;height:44px;margin-top:6px;padding:0 10px;border:1px solid #ffffff21;border-radius:11px;background:#121018;color:#faf5fb;font-size:16px}
.console-form input::placeholder{font-size:12px;color:#9d93a5}
.console-form input:focus{outline:2px solid #ffd484;outline-offset:-1px}
.console-wide{grid-column:1/-1}
.console-form .primary{margin:2px 0 0}
.console-feedback{margin:12px 0 0;padding:10px;border-radius:11px;font-size:13px}
.console-list{list-style:none;margin:0;padding:0}
.console-list li{gap:8px;min-height:49px;padding:8px 0;border-top:1px solid #ffffff13;font-size:13px}
.console-list li>div{min-width:0;overflow-wrap:anywhere}
.console-list small{display:block;margin-top:3px}
.console-list .console-empty{color:#bcb2c3}
#admin-refresh[data-loading=true] svg{animation:studio-spin .9s linear infinite}
@keyframes studio-enter{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}
@keyframes studio-sheet{from{opacity:0;transform:translateY(16px) scale(.99)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes studio-fade{from{opacity:0}to{opacity:1}}
@keyframes studio-spin{to{transform:rotate(360deg)}}
@keyframes studio-sweep{from{transform:translateX(-110%)}to{transform:translateX(225%)}}
@media(prefers-reduced-motion:reduce){
  .studio *, .studio-dialog *, .admin-studio *, .studio-dialog[open], .studio-dialog[open]::backdrop,
  .studio *::before,.studio *::after,.studio-dialog *::before,.studio-dialog *::after,.admin-studio *::before{animation:none!important;transition:none!important}
  .generation-track::before{transform:translateX(55%)}
}
.idea-card em{position:absolute;top:9px;left:9px;max-width:calc(100% - 18px);padding:5px 8px;border-radius:999px;background:#1c1526e8;color:#ffdfa9;font-size:10px;font-weight:800;font-style:normal}
.idea-group{margin:22px 0}
.idea-group h2{margin:0 0 10px;font-size:19px;letter-spacing:-.035em}
.filters{display:flex;gap:7px;flex-wrap:wrap}
.filter-chip,.back-button{background:#211a2b;color:#e1d6e9;border:1px solid #ffffff20;border-radius:999px;padding:8px 11px;font:inherit;font-size:12px}
.filter-chip[aria-pressed=true]{background:#ffda9c;color:#251b20;border-color:#ffda9c;font-weight:800}
.back-button{margin:13px 0 0}
.profile-avatar{overflow:hidden}
.profile-avatar img{width:100%;height:100%;object-fit:cover}
.profile-stats,.topup-packs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-top:12px}
.profile-stats>div,.topup-pack{padding:13px;border:1px solid #ffffff1d;border-radius:15px;background:#1c1723;color:#f9f0ff}
.profile-stats b,.profile-stats small,.topup-pack strong,.topup-pack small{display:block}
.profile-stats b,.topup-pack strong{font-size:21px}
.profile-stats small,.topup-pack small{margin-top:3px;color:#c4b9cc;font-size:11px}
.topup-packs{grid-template-columns:repeat(3,minmax(0,1fr))}
.topup-pack{padding:13px 4px;font:inherit}
.topup-pack[aria-pressed=true]{border-color:#f9d08c;background:#392c38;box-shadow:inset 0 0 0 1px #f9d08c}
.topup-pack .demo-price{margin-top:9px;color:#ffd78f;font-size:12px}
#topup-result,#download-status,#payment-feedback{color:#dfcba8;font-size:13px;line-height:1.4}
#open-bot{width:100%;padding:8px}
.studio .admin-studio{min-height:0;padding:12px 0 10px;background:none}
.payment-settings label,.tribute-state{display:flex;justify-content:space-between;align-items:center;gap:10px}
.payment-settings small{display:block;margin-top:4px;color:#bfb0c7}
.payment-settings input{width:21px;height:21px;accent-color:#ffd484;flex:none}
.tribute-state{margin-top:9px;padding-top:9px;border-top:1px solid #ffffff15}
.payment-settings p:empty,#download-status:empty{display:none}
.studio-header,.header-actions{display:flex;align-items:center;gap:8px}
.header-actions{min-width:0}
.studio-header .logo{font-size:clamp(20px,6.8vw,25px);white-space:nowrap}
.header-balance{display:flex;align-items:center;gap:5px;min-height:40px;min-width:0;padding:0 8px;border:1px solid #ffd48439;border-radius:14px;background:#ffd48412;color:#ffe2ab;white-space:nowrap;font-size:12px}
.header-balance [data-icon] svg{width:15px;height:15px}
.header-balance strong{overflow:hidden;text-overflow:ellipsis}
.header-balance span{color:#ffca75;font-size:15px}
.header-avatar{display:grid;place-items:center;flex:none;overflow:hidden}
.header-avatar img{width:100%;height:100%;object-fit:cover}
.history-preview{position:relative;display:block;flex:none;width:58px;height:65px;border-radius:9px;overflow:hidden;background:#ffffff0a}
.history-preview img{display:block;visibility:hidden}
.history-preview.loaded img{visibility:visible}
.history-preview.unavailable::after{content:'—';position:absolute;inset:0;display:grid;place-items:center;color:#c4b9cc}
@font-face{font-family:Onest;src:url('/assets/fonts/onest-latin.woff2') format('woff2');font-weight:400 800;font-display:swap;unicode-range:U+0000-00FF,U+2000-206F,U+20AC,U+2190-21FF}
@font-face{font-family:Onest;src:url('/assets/fonts/onest-cyrillic.woff2') format('woff2');font-weight:400 800;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
body{font-family:Onest,system-ui,sans-serif}
button,input,textarea{font-family:inherit}
.studio-header{height:54px}
.studio-header .header-balance{height:43px;gap:9px;padding:0 8px 0 11px;border-radius:15px;border-color:#edba6759;background:linear-gradient(125deg,#3d2a24,#211a24);box-shadow:inset 0 1px #ffdda523}
.header-balance .balance-copy{text-align:left;display:grid;gap:1px;line-height:1.1;color:inherit}
.balance-copy small{font-size:8px;letter-spacing:.13em;color:#d7b986}
.balance-copy strong{font-size:14px;font-variant-numeric:tabular-nums}
.header-balance .balance-plus{display:grid;place-items:center;width:24px;height:24px;border-radius:8px;background:#ffda981c;font-size:17px}
.studio-carousel{margin:15px 0 22px}
.slide-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-inline:contain;border-radius:27px}
.slide-track::-webkit-scrollbar{display:none}
.slide-track:focus-visible{outline:2px solid #f8d38f;outline-offset:3px}
.slide-track .studio-hero{flex:0 0 100%;min-width:0;min-height:310px;margin:0;scroll-snap-align:start;scroll-snap-stop:always;border-radius:0;padding:22px}
.slide-track .studio-hero :is(h1,h2){font:700 clamp(34px,9.4vw,55px)/1.02 Onest,system-ui,sans-serif;letter-spacing:-.062em;margin:11px 0 10px;text-wrap:balance}
.slide-track .studio-hero p{max-width:245px;font-size:13px;line-height:1.5;color:#e5dce7}
.slide-track .studio-hero .eyebrow{display:inline-block;font-size:9px;letter-spacing:.14em;color:#ffe0ad}
.slide-track .slide-prompt{background:#332038 url('/assets/covers/neon.webp') center 38%/cover}
.slide-track .slide-channel{background:#273039 url('/assets/covers/coast.webp') center 38%/cover}
.slide-track .studio-hero::before{background:linear-gradient(0deg,#0e0b15fa,transparent 94%),linear-gradient(90deg,#130d19a6,transparent 92%)}
.slide-cta{margin-top:16px;border:1px solid #fff0cb40;border-radius:11px;padding:10px 13px;color:#221a20;background:#ffe1a9;font-size:12px;font-weight:700}
#channel-status:not(:empty){display:block;margin-top:8px;color:#ffe0ad;font-size:11px}
.slider-controls{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;margin-top:9px}
.slider-actions{display:flex;gap:6px;justify-self:end}
.slider-controls>button,.slider-actions button{width:36px;height:36px;border-radius:11px;border:1px solid #ffffff1c;background:#1b1721;color:#f2dfc1;font-size:15px;padding:0}
.slider-controls button:disabled{opacity:.4}
.slider-dots{display:flex;align-items:center;gap:2px}
.slider-dots button{width:28px;height:32px;border:0;background:none;display:grid;place-items:center}
.slider-dots button::before{content:'';width:6px;height:6px;border-radius:20px;background:#a89aad}
.slider-dots button[aria-current=true]::before{width:17px;background:#ffd28c}
.creation-choices{display:grid;gap:12px}
.creation-choice{display:grid;grid-template-columns:42px minmax(0,1fr);align-items:center;gap:4px 13px;text-align:left;padding:17px;border:1px solid #ffffff24;border-radius:18px;background:#211b28;color:#fcf3ff}
.creation-choice strong{grid-column:2;font-size:18px;font-weight:700;letter-spacing:-.035em}
.creation-choice small{grid-column:2;color:#cdbfd2;font-size:12px;line-height:1.45}
.creation-choice [data-icon]{grid-column:1;grid-row:1/3;width:42px;height:42px;border-radius:12px;background:#fff2db14;color:#ffda99}
.preset-choice{background:linear-gradient(125deg,#342635,#211b28 78%);border-color:#ffd28c45}
.studio .view-head h1{font-weight:750;letter-spacing:-.055em}
.studio .section-title h2{font-size:24px;letter-spacing:-.045em}
.input-label textarea{display:block;resize:vertical;width:100%;min-height:66px;margin-top:7px;padding:12px;border:1px solid #413649;border-radius:13px;background:#100e16;color:#fff;font-size:16px;line-height:1.45}
.input-label textarea:focus{outline:2px solid #ffd484;outline-offset:-1px}
.prompt-counter{display:block;text-align:right;color:#b8a9c2;font-size:11px;margin-top:4px}
.prompt-help{padding:9px 11px;margin:9px 0;border:1px solid #ffffff20;border-radius:12px;font-size:12px;color:#decedf}
.prompt-help summary{cursor:pointer;color:#ffdaa4;font-weight:700}