/* Wonderphase AI — design system v9 ("Marquee"). Loaded after ursacore.css.
   1 tokens · 2 theme-safe fixes for older components · 3 top bar · 4 primitives (u-*) · 5 studio shell (st-*) · 6 running jobs · 7 responsive
   Rule for every new page: colours come from tokens only — never a hex literal that depends on the theme. */

/* ───────────────────────── 1 · tokens ───────────────────────── */
:root{
  /* surfaces (dark is the default world) */
  --bg:#0b0908;--p1:#141110;--p2:#1c1715;--p3:#272019;--p4:#342a22;--pop:#16120f;
  --line:rgba(255,244,235,.12);--line2:rgba(255,244,235,.26);
  --tx:#faf7f2;--mu:#d3ccc4;--dim:#a49c93;
  /* brand + the vivid set. *-tx = readable as text on a surface · *-soft = tinted fill */
  --red:#E8322E;--hot:#ff5a3c;--hot-tx:#ff8a6e;--hot-soft:rgba(255,90,60,.15);
  --pink:#E8322E;--pink-tx:#ff8a6e;--pink-soft:rgba(232,50,46,.15);
  --gold:#ffc53d;--gold-tx:#ffd166;--gold-soft:rgba(255,197,61,.14);
  --mint:#3df5a6;--mint-tx:#62f7b6;--mint-soft:rgba(61,245,166,.13);
  --violet:#8f6bff;--violet-tx:#b7a2ff;--violet-soft:rgba(143,107,255,.17);
  --cyan:#35d6ff;--cyan-tx:#7fe4ff;--cyan-soft:rgba(53,214,255,.14);
  --ok:#3df5a6;
  --on-vivid:#160a05;            /* text on gold / mint / cyan fills */
  --inv-bg:var(--tx);--inv-tx:#0b0908;   /* inverted pills: active tab, toast */
  --media-ink:#faf7f2;--glass:rgba(12,10,9,.66);--glass-line:rgba(255,244,235,.26);
  --edge:inset 0 1px 0 rgba(255,244,235,.07);--lift:0 14px 34px -18px rgba(0,0,0,.6);--pop-shadow:0 30px 80px -24px rgba(0,0,0,.78);
  --grad-hot:linear-gradient(135deg,#e02a26,#ff5a3c 62%,#ff8a4e);
  --grad-deal:linear-gradient(135deg,#c81e1a,#E8322E);
  --grad-gold:linear-gradient(135deg,#ffb020,#ffd866);
  --cta-bg:var(--p2);--cta-line:var(--line2);--cta-tx:var(--tx);
  /* one colour per studio — used for wayfinding only (nav dot, page kicker, focus rings) */
  --c-explore:var(--hot);--c-image:var(--violet);--c-video:var(--hot);--c-film:var(--gold);--c-audio:var(--cyan);--c-ugc:var(--pink);--c-game:var(--mint);--c-library:#cdbfb0;
  --acc:var(--hot);--acc-tx:var(--hot-tx);--acc-soft:var(--hot-soft);
  --panel:404px;
}
html[data-theme="light"] body{
  --bg:#f3eee4;--p1:#fcf9f2;--p2:#f1ebde;--p3:#e7dfce;--p4:#dbd1bd;--pop:#fcf9f2;
  --line:rgba(28,19,12,.14);--line2:rgba(28,19,12,.3);
  --tx:#1b1510;--mu:#564a3f;--dim:#7d7062;
  --red:#cf2420;--hot:#e8432a;--hot-tx:#c2361b;--hot-soft:rgba(224,70,40,.12);
  --pink:#cf2420;--pink-tx:#b3261c;--pink-soft:rgba(207,36,32,.11);
  --gold:#f5b21a;--gold-tx:#8a5a00;--gold-soft:rgba(245,178,26,.2);
  --mint:#14c98a;--mint-tx:#0a7a4e;--mint-soft:rgba(20,201,138,.15);
  --violet:#6f4be8;--violet-tx:#5a3ad0;--violet-soft:rgba(111,75,232,.12);
  --cyan:#0fa9d6;--cyan-tx:#0a6f8f;--cyan-soft:rgba(15,169,214,.13);
  --ok:#0a7a4e;--inv-bg:#1b1510;--inv-tx:#fcf9f2;
  --edge:inset 0 1px 0 rgba(255,255,255,.8);--lift:0 14px 34px -20px rgba(60,40,25,.32);--pop-shadow:0 30px 80px -26px rgba(50,32,18,.38);
  --c-library:#7d7062;
}
body[data-page="image"]{--acc:var(--violet);--acc-tx:var(--violet-tx);--acc-soft:var(--violet-soft)}
body[data-page="video"],body[data-page="explore"]{--acc:var(--hot);--acc-tx:var(--hot-tx);--acc-soft:var(--hot-soft)}
body[data-page="film"]{--acc:var(--gold);--acc-tx:var(--gold-tx);--acc-soft:var(--gold-soft)}
body[data-page="audio"]{--acc:var(--cyan);--acc-tx:var(--cyan-tx);--acc-soft:var(--cyan-soft)}
body[data-page="ugc"]{--acc:var(--pink);--acc-tx:var(--pink-tx);--acc-soft:var(--pink-soft)}
body[data-page="game"]{--acc:var(--mint);--acc-tx:var(--mint-tx);--acc-soft:var(--mint-soft)}
/* anything drawn on a film or photo keeps the dark world, in both themes */
.on-media,.row-media,.pending,.fcard,.wtile,.uslot,.ptile:not(.new),.cmp-card .m,.tool .tm,.xm,.creator,.gtype,.mcard .mm,.pk-detail .dm,.hx,.holo,.vcard,.hcard,.gi,.corex-stage,.u-thumb,.vbooth{
  --tx:#faf7f2;--mu:#d3ccc4;--dim:#a49c93;--line:rgba(255,244,235,.2);--line2:rgba(255,244,235,.32);color:#faf7f2;
  --cta-bg:rgba(17,14,12,.55);--cta-line:rgba(255,255,255,.26);--cta-tx:#faf7f2;--hot-tx:#ffb39f}
html.theme-switch *,html.theme-switch *::before,html.theme-switch *::after{transition:none!important;animation-duration:0s!important}

/* ───────────────────────── 2 · theme-safe fixes for older components ───────────────────────── */
body{background:var(--bg);color:var(--tx)}
.cta{background:var(--cta-bg);border-color:var(--cta-line);color:var(--cta-tx)}
html[data-theme="light"] .cta{color:var(--cta-tx)}
.cta:hover,html[data-theme="light"] .cta:hover{border-color:var(--hot)}
.cta.hot,html[data-theme="light"] .cta.hot{background:var(--grad-hot);border-color:transparent;color:#fff}
.btn.hot{color:var(--hot-tx);border-color:color-mix(in srgb,var(--hot) 55%,transparent);background:var(--hot-soft)}
.hx-kick,.holo-kick{color:var(--hot-tx);border-color:color-mix(in srgb,var(--hot) 45%,transparent);background:var(--hot-soft)}
.trg{background:var(--p1);color:var(--tx);border-color:var(--line)}
html[data-theme="light"] .trg{color:var(--tx)}
.trg:hover,.trg[aria-expanded="true"]{background:var(--p3);border-color:var(--hot)}
.trg .dot{box-shadow:0 0 0 2px var(--bg);background:var(--pink)}
.trg.avatar,.acct-head .av{background:linear-gradient(135deg,#c81e1a,var(--hot));border-color:transparent}
.trg.avatar span,.acct-head .av{color:#fff}
.drop,.ipop,.picker,.sheet{background:var(--pop);border-color:var(--line2);box-shadow:var(--edge),var(--pop-shadow)}
html[data-theme="light"] .drop,html[data-theme="light"] .ipop,html[data-theme="light"] .picker,html[data-theme="light"] .sheet{background:var(--pop);box-shadow:var(--edge),var(--pop-shadow)}
.menu button:hover,.menu a:hover{background:var(--p2)}
.menu .mi2{background:var(--p3)}.menu .mi2 svg{color:var(--mu)}
.menu small{color:var(--dim)}
.note-it{border-bottom-color:var(--line)}
.note-it .tagn{color:var(--hot-tx);background:var(--hot-soft);align-self:flex-start}
.note-it p,html[data-theme="light"] .note-it p{color:var(--mu)}
.cred-row a.hot{background:var(--grad-hot)}
.ichip{background:var(--p2);color:var(--dim)}
pre.code{background:var(--bg);color:var(--mu)}
.seg2 button.on,.ftabs button.on{background:var(--inv-bg);color:var(--inv-tx);border-color:var(--inv-bg)}
html[data-theme="light"] .ftabs button.on{color:var(--inv-tx)}
.seg2 button.on b{color:var(--pink)}
.toast{background:var(--inv-bg);color:var(--inv-tx)}
html[data-theme="light"] .toast{color:var(--inv-tx)}
.wave i{background:#faf7f2}
.udock,.dockwrap{background:var(--p1)}
.dbar{border-top-color:var(--line)}
.dslot{background:var(--p2);border-color:var(--line2)}
.bdg.NEW{background:var(--violet);color:#fff}
html[data-theme="light"] .bdg.NEW{background:var(--violet);color:#fff}
.bdg.TOP{background:var(--grad-hot);color:#fff}
.bdg.FAST,html[data-theme="light"] .bdg.FAST{background:var(--mint);color:var(--on-vivid)}
.bdg.BUDGET{background:var(--gold);color:var(--on-vivid)}
.bdg.SOON,html[data-theme="light"] .bdg.SOON{background:var(--p4);color:var(--mu)}
.tagx{background:var(--grad-deal)}
.tagx.alt,html[data-theme="light"] .tagx.alt{background:var(--violet-soft);color:var(--violet-tx)}
.spec{background:var(--p3);color:var(--mu)}
.empty{border-color:var(--line2)}
.lline{background:none}
::selection{background:var(--hot);color:#fff}
.pk-search input:focus-visible,.st-prompt textarea:focus-visible{outline:0}
.pk-search:focus-within{box-shadow:inset 0 -2px 0 var(--acc)}
.row-media .btn,.on-media .btn,.u-thumb .btn{background:rgba(17,14,12,.62);border-color:rgba(255,255,255,.3);color:#faf7f2}
.row-media .btn:hover,.on-media .btn:hover{background:rgba(17,14,12,.82);border-color:#fff}

/* ───────────────────────── 3 · top bar ───────────────────────── */
.top{background:color-mix(in srgb,var(--bg) 86%,transparent)}
html[data-theme="light"] .top{background:color-mix(in srgb,var(--bg) 88%,transparent)}
.nav a{position:relative;--c:var(--hot)}
.nav a[data-tab="image"]{--c:var(--c-image)}.nav a[data-tab="video"]{--c:var(--c-video)}.nav a[data-tab="film"]{--c:var(--c-film)}.nav a[data-tab="audio"]{--c:var(--c-audio)}
.nav a[data-tab="ugc"]{--c:var(--c-ugc)}.nav a[data-tab="game"]{--c:var(--c-game)}.nav a[data-tab="library"]{--c:var(--c-library)}.nav a[data-tab="pricing"]{--c:var(--pink)}
.nav a{padding:8px 11px}
.nav a:hover{color:var(--tx);background:var(--p2);box-shadow:none;text-decoration:none}
.nav a.on{background:var(--p3);color:var(--tx);box-shadow:none}
.nav a.on::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--c);box-shadow:0 0 10px var(--c);flex:none}
.nav a.on::after{content:none}
.upg{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 12px;border-radius:11px;font-weight:600;font-size:13.5px;color:#fff;background:var(--grad-deal);box-shadow:0 8px 22px -10px var(--pink);white-space:nowrap;transition:transform .15s,box-shadow .15s}
.upg:hover{transform:translateY(-1px);box-shadow:0 12px 26px -10px var(--pink)}
.upg i{font-style:italic;font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.04em;background:rgba(0,0,0,.24);border-radius:5px;padding:2px 5px}
#tr-jobs{border-color:color-mix(in srgb,var(--mint) 50%,transparent);color:var(--mint-tx)}
#tr-jobs svg{width:15px;height:15px;animation:spin 1.1s linear infinite;color:var(--mint)}
#tr-jobs.warn{border-color:color-mix(in srgb,var(--gold) 55%,transparent);color:var(--gold-tx)}#tr-jobs.warn svg{animation:none;color:var(--gold)}
@keyframes spin{to{transform:rotate(360deg)}}
.trg.wide svg{color:var(--gold)}
.ribbon{display:flex;align-items:center;justify-content:center;gap:12px;min-height:34px;padding:6px 44px 6px 14px;background:var(--grad-deal);color:#fff;font-size:13px;font-weight:500;text-align:center;position:relative;z-index:61}
.ribbon b{font-weight:700}.ribbon a{text-decoration:underline;text-underline-offset:3px;font-weight:600;white-space:nowrap}
.ribbon button{position:absolute;right:10px;top:50%;transform:translateY(-50%);width:24px;height:24px;border-radius:50%;border:0;background:rgba(0,0,0,.22);color:#fff;font-size:12px;line-height:1}
body:not(.has-rib) .ribbon{display:none}
body.has-rib{--rib:34px}

/* ───────────────────────── 4 · primitives ───────────────────────── */
.u-page{max-width:1280px;margin:0 auto;padding:28px clamp(14px,3vw,40px) 80px}
.u-page.wide{max-width:1480px}.u-page.narrow{max-width:900px}
.u-kicker{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--acc-tx);background:var(--acc-soft);border:1px solid color-mix(in srgb,var(--acc) 40%,transparent);padding:6px 11px;border-radius:999px}
.u-kicker i{width:6px;height:6px;border-radius:50%;background:var(--acc);box-shadow:0 0 10px var(--acc)}
.u-h1{font-family:var(--disp);font-weight:800;font-size:clamp(26px,3.6vw,46px);letter-spacing:-.025em;line-height:1.04;text-transform:uppercase;margin:14px 0 10px}
.u-h1 em{font-style:normal;background:var(--grad-hot);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.u-h2{font-size:clamp(18px,2vw,24px);font-weight:700;text-transform:uppercase;letter-spacing:.005em;margin:0}
.u-lede{color:var(--mu);font-size:15.5px;max-width:68ch;line-height:1.55}
.u-sub{color:var(--dim);font-size:13px;line-height:1.5}
.u-sechead{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:38px 0 14px}
.u-sechead p{color:var(--mu);font-size:14px;margin-top:5px;max-width:70ch}
.u-sechead a.more{color:var(--acc-tx);font-size:13px;font-weight:600;white-space:nowrap}

.u-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:0 16px;border-radius:12px;border:1px solid var(--line2);background:var(--p2);color:var(--tx);font-weight:600;font-size:14px;white-space:nowrap;cursor:pointer;transition:transform .15s,border-color .15s,background .15s,box-shadow .15s}
.u-btn:hover{border-color:var(--hot);background:var(--p3)}
.u-btn:focus-visible,.u-tabs button:focus-visible,.u-opt:focus-visible,.u-tile:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.u-btn.pri{border-color:transparent;background:var(--grad-hot);color:#fff;box-shadow:0 10px 28px -10px rgba(232,50,46,.6),inset 0 1px 0 rgba(255,255,255,.24)}
.u-btn.pri:hover{transform:translateY(-1px);box-shadow:0 14px 34px -10px rgba(232,50,46,.75),inset 0 1px 0 rgba(255,255,255,.28)}
.u-btn.deal{border-color:transparent;background:var(--grad-deal);color:#fff;box-shadow:0 10px 28px -12px var(--pink)}
.u-btn.gold{border-color:transparent;background:var(--grad-gold);color:var(--on-vivid)}
.u-btn.inv{border-color:transparent;background:var(--inv-bg);color:var(--inv-tx)}
.u-btn.ghost{background:transparent}
.u-btn.sm{min-height:32px;padding:0 11px;font-size:12.5px;border-radius:9px}
.u-btn.lg{min-height:50px;padding:0 24px;font-size:15.5px;border-radius:14px}
.u-btn.block{width:100%}
.u-btn[disabled]{opacity:.5;cursor:not-allowed;transform:none}
.u-btn svg{width:15px;height:15px;flex:none}
.u-link{color:var(--acc-tx);font-weight:600;cursor:pointer;background:none;border:0;padding:0;font-size:inherit}
.u-link:hover{text-decoration:underline;text-underline-offset:3px}

.u-tag{display:inline-flex;align-items:center;gap:5px;font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:3px 7px;border-radius:6px;background:var(--p3);color:var(--mu);white-space:nowrap}
.u-tag.hot{background:var(--hot-soft);color:var(--hot-tx)}.u-tag.pink{background:var(--pink-soft);color:var(--pink-tx)}.u-tag.gold{background:var(--gold-soft);color:var(--gold-tx)}
.u-tag.mint{background:var(--mint-soft);color:var(--mint-tx)}.u-tag.violet{background:var(--violet-soft);color:var(--violet-tx)}.u-tag.cyan{background:var(--cyan-soft);color:var(--cyan-tx)}
.u-tag.solid-pink{background:var(--pink);color:#fff}.u-tag.solid-gold{background:var(--gold);color:var(--on-vivid)}.u-tag.solid-mint{background:var(--mint);color:var(--on-vivid)}.u-tag.solid-violet{background:var(--violet);color:#fff}.u-tag.solid-hot{background:var(--grad-hot);color:#fff}
.u-deal{display:inline-block;font-family:var(--mono);font-size:10.5px;font-weight:700;font-style:italic;letter-spacing:.03em;text-transform:uppercase;color:#fff;background:var(--pink);padding:3px 8px;border-radius:5px;transform:skewX(-8deg);white-space:nowrap}
.u-deal.gold{background:var(--gold);color:var(--on-vivid)}.u-deal.mint{background:var(--mint);color:var(--on-vivid)}.u-deal.violet{background:var(--violet)}
.u-strike{color:var(--dim);text-decoration:line-through;text-decoration-thickness:1.5px}

.u-tabs{display:inline-flex;gap:4px;padding:4px;border-radius:14px;background:var(--p1);border:1px solid var(--line);max-width:100%;overflow-x:auto;scrollbar-width:none}
.u-tabs::-webkit-scrollbar{display:none}
.u-tabs button,.u-tabs a{display:inline-flex;align-items:center;gap:7px;border:0;background:transparent;border-radius:10px;padding:9px 15px;font-size:13.5px;font-weight:600;color:var(--mu);white-space:nowrap;cursor:pointer;transition:.15s}
.u-tabs button:hover,.u-tabs a:hover{color:var(--tx);background:var(--p2)}
.u-tabs .on{background:var(--inv-bg);color:var(--inv-tx)}
.u-tabs .on:hover{background:var(--inv-bg);color:var(--inv-tx)}
.u-tabs.big button,.u-tabs.big a{padding:12px 20px;font-size:14.5px}
.u-tabs.line{background:none;border:0;border-bottom:1px solid var(--line);border-radius:0;padding:0;gap:22px}
.u-tabs.line button,.u-tabs.line a{border-radius:0;padding:12px 2px;background:none;position:relative}
.u-tabs.line .on{background:none;color:var(--tx)}
.u-tabs.line .on::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--acc)}
.u-tabs .n{font-family:var(--mono);font-size:10px;font-weight:600;opacity:.7}

.u-card{position:relative;border:1px solid var(--line);border-radius:18px;background:var(--p1);padding:20px;box-shadow:var(--edge),var(--lift)}
.u-card.pad0{padding:0;overflow:hidden}
.u-card.hl{border-color:color-mix(in srgb,var(--acc) 60%,transparent);box-shadow:var(--edge),0 22px 54px -24px var(--acc)}
.u-card.lift{transition:transform .18s,border-color .18s,box-shadow .18s}
.u-card.lift:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--hot) 45%,transparent)}
.u-grid{display:grid;gap:12px}
.u-grid.c2{grid-template-columns:repeat(2,minmax(0,1fr))}.u-grid.c3{grid-template-columns:repeat(3,minmax(0,1fr))}.u-grid.c4{grid-template-columns:repeat(4,minmax(0,1fr))}.u-grid.c5{grid-template-columns:repeat(5,minmax(0,1fr))}
.u-grid.auto{grid-template-columns:repeat(auto-fill,minmax(var(--min,220px),1fr))}
.u-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.u-row.between{justify-content:space-between}
.u-num{font-family:var(--disp);font-weight:800;letter-spacing:-.03em;line-height:1}

.u-field{display:flex;flex-direction:column;gap:6px}
.u-field>label,.u-label{font-size:12.5px;font-weight:600;color:var(--mu);display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.u-field>label small,.u-label small{font-weight:400;color:var(--dim);font-size:11.5px}
.u-input,.u-field input[type="text"],.u-field input[type="url"],.u-field input[type="email"],.u-field textarea,.u-field select{width:100%;background:var(--p2);border:1px solid var(--line);border-radius:12px;padding:11px 13px;font-size:14.5px;color:var(--tx);outline:0;transition:border-color .15s,box-shadow .15s}
.u-field textarea{resize:vertical;min-height:92px;line-height:1.5}
.u-input:focus,.u-field input:focus,.u-field textarea:focus,.u-field select:focus{border-color:var(--acc);box-shadow:0 0 0 3px var(--acc-soft)}
.u-field .hint{font-size:11.5px;color:var(--dim)}
.u-field .err{font-size:11.5px;color:var(--hot-tx)}
.u-prefix{display:flex;align-items:stretch}
.u-prefix span{display:flex;align-items:center;padding:0 11px;background:var(--p3);border:1px solid var(--line);border-right:0;border-radius:12px 0 0 12px;color:var(--dim);font-size:13.5px}
.u-prefix input{border-radius:0 12px 12px 0!important}
.u-switch{position:relative;display:inline-flex;align-items:center;gap:10px;cursor:pointer;font-size:13.5px}
.u-switch input{position:absolute;opacity:0;pointer-events:none}
.u-switch i{width:40px;height:23px;border-radius:999px;background:var(--p4);border:1px solid var(--line2);position:relative;transition:.18s;flex:none}
.u-switch i::after{content:"";position:absolute;top:2px;left:2px;width:17px;height:17px;border-radius:50%;background:var(--tx);transition:.18s}
.u-switch input:checked+i{background:var(--mint);border-color:transparent}
.u-switch input:checked+i::after{left:19px;background:#06301c}

/* option pills (segmented choice) and visual tiles */
.u-opts{display:flex;flex-wrap:wrap;gap:6px}
.u-opt{border:1px solid var(--line);background:var(--p2);color:var(--mu);border-radius:10px;padding:8px 12px;font-size:13px;font-weight:500;cursor:pointer;transition:.14s;white-space:nowrap}
.u-opt:hover{border-color:var(--line2);color:var(--tx)}
.u-opt.on{border-color:var(--acc);background:var(--acc-soft);color:var(--tx);box-shadow:inset 0 0 0 1px var(--acc)}
.u-opt small{display:block;font-size:10.5px;color:var(--dim);font-weight:400}
.u-tile{position:relative;display:block;width:100%;padding:0;border:2px solid transparent;border-radius:14px;overflow:hidden;background:#000;text-align:left;cursor:pointer;aspect-ratio:16/9;transition:border-color .15s,transform .15s}
.u-tile:hover{transform:translateY(-2px);border-color:var(--line2)}
.u-tile.on{border-color:var(--acc);box-shadow:0 0 0 3px var(--acc-soft)}
.u-tile img,.u-tile video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.u-tile video{opacity:0;transition:opacity .25s}.u-tile.playing video{opacity:1}
.u-tile .cap{position:absolute;left:0;right:0;bottom:0;padding:22px 10px 8px;background:linear-gradient(transparent,rgba(8,6,5,.92));color:#faf7f2;font-size:12.5px;font-weight:600;line-height:1.25;pointer-events:none}
.u-tile .cap small{display:block;font-weight:400;font-size:10.5px;color:#d3ccc4}
.u-tile .ck{position:absolute;top:7px;right:7px;width:22px;height:22px;border-radius:50%;background:var(--acc);color:var(--on-vivid);display:none;place-items:center;font-size:12px;font-weight:800}
.u-tile.on .ck{display:grid}
/* media card with hover-play: <a|button class="u-thumb" data-v="…mp4"><img><video muted loop playsinline preload="none"></video><span class="lab">…</span><span class="cap"><b>…</b><span>…</span></span></a> */
.u-thumb{position:relative;display:block;padding:0;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:#000;aspect-ratio:16/9;text-align:left;cursor:pointer;transition:transform .18s,border-color .18s}
.u-thumb.tall{aspect-ratio:9/16}.u-thumb.sq{aspect-ratio:1/1}
.u-thumb:hover{transform:translateY(-2px);border-color:var(--hot)}
.u-thumb img,.u-thumb video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.u-thumb video{opacity:0;transition:opacity .3s}.u-thumb.playing video{opacity:1}
.u-thumb .lab{position:absolute;left:9px;top:9px;z-index:2;font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;background:var(--glass);border:1px solid var(--glass-line);border-radius:999px;padding:4px 9px;color:#faf7f2}
.u-thumb .cap{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:32px 12px 10px;background:linear-gradient(transparent,rgba(8,6,5,.92));pointer-events:none}
.u-thumb .cap b{display:block;font-size:14px;font-weight:600;color:#faf7f2}.u-thumb .cap span{font-size:11.5px;color:#d3ccc4}
.u-thumb:hover .cap span{color:#ffb39f}

.u-empty{border:1px dashed var(--line2);border-radius:18px;padding:44px 22px;text-align:center;color:var(--mu);display:flex;flex-direction:column;align-items:center;gap:8px}
.u-empty .ic{width:46px;height:46px;border-radius:14px;background:var(--acc-soft);color:var(--acc-tx);display:grid;place-items:center;margin-bottom:4px}
.u-empty .ic svg{width:22px;height:22px}
.u-empty b{font-size:18px;color:var(--tx);text-transform:uppercase;letter-spacing:.01em}
.u-empty p{max-width:46ch;font-size:14px}
.u-empty .u-btn{margin-top:8px}
.u-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;counter-reset:st}
.u-steps>div{counter-increment:st;border:1px solid var(--line);border-radius:14px;background:var(--p1);padding:14px;font-size:13px;color:var(--mu)}
.u-steps>div::before{content:counter(st);display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--acc);color:var(--on-vivid);font-weight:800;font-size:12px;margin-bottom:9px}
.u-steps b{display:block;color:var(--tx);font-size:14px;margin-bottom:3px}
.u-avatar{width:var(--s,44px);height:var(--s,44px);border-radius:50%;background:linear-gradient(135deg,#c81e1a,var(--hot));display:grid;place-items:center;color:#fff;font-weight:700;font-size:calc(var(--s,44px)*.4);overflow:hidden;flex:none;background-size:cover;background-position:center}
.u-avatar img{width:100%;height:100%;object-fit:cover}
.u-meter{height:6px;border-radius:6px;background:var(--p3);overflow:hidden}.u-meter i{display:block;height:100%;border-radius:6px;background:var(--grad-hot)}
.u-table{width:100%;border-collapse:collapse;font-size:13.5px}
.u-table th{text-align:left;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);font-weight:500;padding:10px 12px;border-bottom:1px solid var(--line)}
.u-table td{padding:11px 12px;border-bottom:1px solid var(--line);color:var(--mu);vertical-align:top}
.u-table td b{color:var(--tx);font-weight:600}
.u-table tr:last-child td{border-bottom:0}
.u-note{font-size:12px;color:var(--dim);line-height:1.55}
.u-help{display:inline-grid;place-items:center;width:17px;height:17px;border-radius:50%;border:1px solid var(--line2);color:var(--dim);font-size:10.5px;font-weight:700;cursor:help;flex:none}

/* ───────────────────────── 5 · studio shell — controls in a left column, results beside it ───────────────────────── */
.st{display:grid;grid-template-columns:var(--panel) minmax(0,1fr);grid-template-rows:minmax(0,1fr);height:calc(100vh - var(--top) - var(--rib,0px));overflow:hidden}
.st-panel{display:flex;flex-direction:column;min-height:0;border-right:1px solid var(--line);background:var(--p1)}
.st-head{padding:14px 16px 0}
.st-title{display:flex;align-items:center;gap:10px}
.st-title h1{font-size:19px;font-weight:700;text-transform:uppercase;letter-spacing:.01em}
.st-title .dot{width:9px;height:9px;border-radius:50%;background:var(--acc);box-shadow:0 0 12px var(--acc);flex:none}
.st-head .u-tabs{margin-top:12px;display:flex;width:100%}
.st-head .u-tabs button{flex:1;justify-content:center;padding:9px 8px}
.st-scroll{flex:1;min-height:0;overflow-y:auto;padding:14px 16px 18px;display:flex;flex-direction:column;gap:16px;scrollbar-width:thin;scrollbar-color:var(--line2) transparent}
.st-sec{display:flex;flex-direction:column;gap:8px}
.st-lbl{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;color:var(--tx)}
.st-lbl .n{display:grid;place-items:center;width:19px;height:19px;border-radius:50%;background:var(--acc-soft);color:var(--acc-tx);font-size:10.5px;font-weight:800;flex:none}
.st-lbl small{margin-left:auto;font-weight:400;color:var(--dim);font-size:11.5px}
.st-hint{font-size:12px;color:var(--dim);line-height:1.45}
.st-model{display:grid;grid-template-columns:92px minmax(0,1fr) auto;gap:12px;align-items:center;width:100%;text-align:left;border:1px solid var(--line);background:var(--p2);border-radius:14px;padding:8px;cursor:pointer;transition:.15s}
.st-model:hover,.st-model[aria-expanded="true"]{border-color:var(--acc)}
.st-model .pv{position:relative;aspect-ratio:16/10;border-radius:9px;overflow:hidden;background:#000;display:grid;place-items:center;font-family:var(--mono);font-weight:700;color:#faf7f2}
.st-model .pv img,.st-model .pv video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.st-model .mt{min-width:0}
.st-model .mt small{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.st-model .mt b{display:flex;align-items:center;gap:2px;font-size:15px;font-weight:600;white-space:nowrap;overflow:hidden}
.st-model .mt b .bdg{flex:none;vertical-align:0}
.st-model .mt>span{display:block;font-size:11.5px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.st-model .chg{font-size:12px;font-weight:600;color:var(--acc-tx);padding-right:6px}
.st-prompt{background:var(--p2);border:1px solid var(--line);border-radius:14px;transition:border-color .15s,box-shadow .15s}
.st-prompt:focus-within{border-color:var(--acc);box-shadow:0 0 0 3px var(--acc-soft)}
.st-prompt textarea{display:block;width:100%;min-height:118px;max-height:300px;resize:vertical;background:transparent;border:0;outline:0;padding:12px 13px 6px;font-size:14.5px;line-height:1.5;color:var(--tx)}
.st-prompt .tools{display:flex;align-items:center;gap:8px;padding:6px 8px 8px}
.st-prompt .tools .count{margin-left:auto;padding-right:6px}
.st-set{display:grid;grid-template-columns:78px minmax(0,1fr);gap:8px 10px;align-items:center}
.st-set>span{font-size:12.5px;color:var(--mu)}
.st-set .u-opts{gap:5px}
.st-set .u-opt{padding:7px 10px;font-size:12.5px}
.st-set select{width:100%;appearance:none;-webkit-appearance:none;background:var(--p2);border:1px solid var(--line);border-radius:10px;padding:8px 11px;font-size:13px;color:var(--tx)}
.st-foot{padding:12px 16px 14px;border-top:1px solid var(--line);background:var(--p1)}
.st-foot .gen{min-height:54px}
.st-foot .bal{display:flex;justify-content:space-between;gap:10px;margin-top:8px;font-size:11.5px;color:var(--dim)}
.st-foot .bal a{color:var(--acc-tx);font-weight:600}
.st-main{min-width:0;overflow-y:auto;padding:16px clamp(14px,2.2vw,30px) 70px;scrollbar-width:thin;scrollbar-color:var(--line2) transparent}
.st-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px;position:sticky;top:-16px;z-index:5;padding:10px 0;background:linear-gradient(var(--bg) 78%,transparent)}
.st-main .rows{gap:12px}
.st-main .row{grid-template-columns:minmax(0,1.55fr) minmax(230px,1fr)}
.st-main .row.tall{grid-template-columns:minmax(0,280px) minmax(0,1fr)}
.st-main .sec-t{margin-top:34px}
.aspect-ic{display:inline-block;border:1.5px solid currentColor;border-radius:2.5px;vertical-align:-2px;margin-right:6px;opacity:.8}

.st-main .u-grid.img{grid-auto-rows:150px;grid-auto-flow:dense}.st-main .u-grid.img .u-thumb{aspect-ratio:auto;height:100%}.st-main .u-grid.img .u-thumb.tall{grid-row:span 2}

/* ───────────────────────── 6 · running jobs ───────────────────────── */
.pending em{font-style:normal;font-size:11.5px;color:#d3ccc4;opacity:.85}
.pending.failed{background:radial-gradient(circle at 50% 120%,rgba(255,197,61,.22),transparent 60%),repeating-linear-gradient(115deg,#12100e 0 14px,#171411 14px 28px)}
.pending.failed span{text-transform:none;letter-spacing:0;font-family:var(--ui);font-size:13px;max-width:44ch;line-height:1.45}
.bar i{background:var(--grad-hot)}
.lab2.live{display:inline-flex;align-items:center;gap:6px;color:#bff7df;border-color:rgba(61,245,166,.5)}
.lab2.live i{width:6px;height:6px;border-radius:50%;background:#3df5a6;box-shadow:0 0 10px #3df5a6;animation:pulse 1.4s infinite}
.toast a{margin-left:12px;font-weight:700;text-decoration:underline;text-underline-offset:3px;color:inherit;pointer-events:auto}
.toast.act{pointer-events:auto}
.job-it .pending.mini{position:static;display:block;padding:0;background:none;margin:6px 0 2px;text-align:left}
.job-it .pending.mini .bar{width:100%;background:var(--p3)}
.job-it .pending.mini span{display:block;margin-top:5px;font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.job-it.bad .tagn{color:var(--gold-tx);background:var(--gold-soft)}
.job-it small a,.job-it small .lnk{color:var(--acc-tx);font-weight:600;background:none;border:0;padding:0;font-size:inherit;cursor:pointer}

/* ───────────────────────── 7 · responsive ───────────────────────── */
@media (max-width:1560px){.core{display:none}}
@media (max-width:1400px){.nav .tagx{display:none}.nav a{padding:8px 9px;font-size:13.5px}.top{gap:12px}}
@media (max-width:1180px){:root{--panel:372px}.u-grid.c5{grid-template-columns:repeat(3,minmax(0,1fr))}.u-grid.c4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:980px){
  .st{grid-template-columns:1fr;grid-template-rows:auto;height:auto;overflow:visible}
  .st-panel{border-right:0;border-bottom:1px solid var(--line)}
  .st-scroll,.st-main{overflow:visible}
  .st-foot{position:sticky;bottom:0;z-index:6;box-shadow:0 -14px 30px -18px rgba(0,0,0,.6)}
  .st-bar{position:static;background:none}
  .st-main .row,.st-main .row.tall{grid-template-columns:1fr}
  .ribbon{display:none!important}body.has-rib{--rib:0px}
  .nav a.on::after{display:none}
  .upg i{display:none}
  .u-grid.c3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .u-grid.c2,.u-grid.c3,.u-grid.c4,.u-grid.c5{grid-template-columns:1fr}
  .u-page{padding:20px 14px 70px}
  .upg{padding:0 10px;font-size:12.5px}
  .st-set{grid-template-columns:1fr}
  .st-model{grid-template-columns:76px minmax(0,1fr) auto}
}
@media (prefers-reduced-motion:reduce){#tr-jobs svg,.lab2.live i{animation:none}.u-btn,.u-card.lift,.u-thumb,.u-tile{transition:none}}

/* ───────────────────────── palette 3 · EMBER & IVORY (chosen by Kumar, 5 Oct 2026) ─────────────────────────
   Neutral black / paper surfaces. Red-orange is used ONLY for the primary action. Offers, tags and wayfinding are ivory. No pink. */
:root{
  --bg:#0b0b0b;--p1:#141414;--p2:#1d1d1d;--p3:#262626;--p4:#323232;--pop:#161616;
  --line:rgba(255,255,255,.12);--line2:rgba(255,255,255,.26);--tx:#f7f5f1;--mu:#c9c5be;--dim:#9c9891;
  --red:#ff4b2b;--hot:#ff4b2b;--hot-tx:#ff7a5c;--hot-soft:rgba(255,75,43,.14);
  --pink:#f7f5f1;--pink-tx:#f7f5f1;--pink-soft:rgba(247,245,241,.1);
  --gold:#f7f5f1;--gold-tx:#f7f5f1;--gold-soft:rgba(247,245,241,.1);
  --violet:#f7f5f1;--violet-tx:#f7f5f1;--violet-soft:rgba(247,245,241,.1);
  --cyan:#f7f5f1;--cyan-tx:#f7f5f1;--cyan-soft:rgba(247,245,241,.1);
  --on-vivid:#0b0b0b;--inv-bg:#f7f5f1;--inv-tx:#0b0b0b;
  --grad-hot:linear-gradient(135deg,#ff4b2b,#ff6a3d);--grad-deal:linear-gradient(#f7f5f1,#f7f5f1);--grad-gold:linear-gradient(#f7f5f1,#f7f5f1);
  --c-explore:#f7f5f1;--c-image:#f7f5f1;--c-video:#f7f5f1;--c-film:#f7f5f1;--c-audio:#f7f5f1;--c-ugc:#f7f5f1;--c-game:#f7f5f1;--c-library:#f7f5f1;
}
html[data-theme="light"] body{
  --bg:#ffffff;--p1:#ffffff;--p2:#f5f5f4;--p3:#ececea;--p4:#dededb;--pop:#ffffff;
  --line:rgba(0,0,0,.11);--line2:rgba(0,0,0,.24);--tx:#141414;--mu:#4f4b45;--dim:#77726a;
  --red:#e63d1e;--hot:#e63d1e;--hot-tx:#c93216;--hot-soft:rgba(230,61,30,.1);
  --pink:#141414;--pink-tx:#141414;--pink-soft:rgba(20,20,20,.07);
  --gold:#141414;--gold-tx:#141414;--gold-soft:rgba(20,20,20,.07);
  --violet:#141414;--violet-tx:#141414;--violet-soft:rgba(20,20,20,.07);
  --cyan:#141414;--cyan-tx:#141414;--cyan-soft:rgba(20,20,20,.07);
  --on-vivid:#ffffff;--inv-bg:#141414;--inv-tx:#ffffff;
  --grad-hot:linear-gradient(135deg,#e63d1e,#ff5a36);--grad-deal:linear-gradient(#141414,#141414);--grad-gold:linear-gradient(#141414,#141414);
  --c-explore:#141414;--c-image:#141414;--c-video:#141414;--c-film:#141414;--c-audio:#141414;--c-ugc:#141414;--c-game:#141414;--c-library:#141414;
}
body[data-page]{--acc:var(--hot);--acc-tx:var(--hot-tx);--acc-soft:var(--hot-soft)}
body::before{display:none}
.u-deal,.u-deal.violet,.u-tag.solid-pink,.u-tag.solid-violet,.tagx,.u-btn.deal,.bdg.NEW,html[data-theme="light"] .bdg.NEW{background:var(--inv-bg);color:var(--inv-tx);box-shadow:none}
.tagx.alt,html[data-theme="light"] .tagx.alt,.bdg.BUDGET,.bdg.FAST,html[data-theme="light"] .bdg.FAST{background:var(--p3);color:var(--tx)}
.trg.avatar,.acct-head .av,.u-avatar{background:var(--p3);border-color:var(--line2)}
.trg.avatar span,.acct-head .av,.u-avatar{color:var(--tx)}
.trg.wide svg{color:var(--tx)}
.trg .dot{background:var(--hot)}
.seg2 button.on b{color:var(--inv-tx)}
.u-switch input:checked+i{background:var(--tx)}.u-switch input:checked+i::after{background:var(--bg)}
.u-steps>div::before,.u-tile .ck{background:var(--tx);color:var(--bg)}

/* lead fixes after page reviews */
.u-btn.gold{background:var(--inv-bg);color:var(--inv-tx)}
#portal{z-index:90}
.px-promo{background:var(--inv-bg)!important;color:var(--inv-tx)!important}
body[data-page="library"]{--acc:var(--hot);--acc-tx:var(--hot-tx);--acc-soft:var(--hot-soft)}
/* palette 3: section labels are plain tags (ink on light grey), only their small dot keeps the ember accent */
.u-kicker{color:var(--tx);background:var(--p2);border-color:var(--line)}
.u-kicker i{background:var(--hot);box-shadow:none}
/* the body grew only to the viewport height, so the sticky top bar let go after ~one screen of scrolling */
body{height:auto;min-height:100%}
/* palette 3: secondary "send to another studio" buttons on result cards are neutral, not red */
.btn.hot,html[data-theme="light"] .btn.hot{color:var(--tx);border-color:var(--line2);background:var(--p2)}
.btn.hot:hover{border-color:var(--tx);background:var(--p3)}
/* ───────── the one footer (22 Oct): lean and thin, same on every page ───────── */
.ursa-foot{margin-top:34px;padding:14px clamp(16px,4vw,56px) 16px;border-top:1px solid var(--line);background:var(--p1);color:var(--mu);font-size:12.5px}
.st-main .ursa-foot{margin:34px calc(-1 * clamp(14px,2.2vw,30px)) -70px}
.uf-row{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.uf-brand{font-family:var(--word);font-size:17px;color:var(--tx);white-space:nowrap;text-decoration:none}
.uf-brand em{font-style:italic;color:var(--hot)}
.uf-links{display:flex;flex-wrap:wrap;align-items:center;gap:2px 0;flex:1;min-width:0}
.uf-links a{color:var(--mu);text-decoration:none;padding:4px 7px;border-radius:6px;white-space:nowrap}
.uf-links a:hover{color:var(--tx);background:var(--p2)}
.uf-links a.uf-site{color:var(--tx);font-weight:600}
.uf-social{display:flex;align-items:center;gap:4px;margin-left:auto}
.uf-social a{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;color:var(--mu);transition:color .15s,background .15s}
.uf-social a:hover{color:var(--tx);background:var(--p2)}
.uf-social svg{width:16px;height:16px}
.uf-legal{margin:8px 0 0;font-size:11.5px;color:var(--dim);line-height:1.5}
@media (max-width:760px){
  .ursa-foot{padding:16px 16px 18px;text-align:center}
  .st-main .ursa-foot{margin:30px -14px -70px}
  .uf-row{flex-direction:column;gap:10px}
  .uf-links{justify-content:center;gap:0;flex:none}
  .uf-links a{padding:5px 6px;font-size:12.5px}
  .uf-social{margin:0;gap:8px}
  .uf-social a{width:34px;height:34px}
  .uf-legal{margin-top:10px;font-size:11px}
}