/* Wonderphase AI — UGC Studio. Built on the studio shell (ui.css .st-*); colours come from tokens only.
   Literals appear only on top of pictures / footage (always-dark overlays). */

/* ───────── left column (v24: one composer card, pills with menus, big + tiles, model card) ───────── */
.ug .st-scroll{position:relative;gap:14px}
.ug .st-scroll>*{flex:none} /* a column flexbox shrinks overflow:hidden children (the Scene card collapsed to 2px) */
.ug-out{display:inline-flex;gap:3px;padding:3px;margin-top:10px;border-radius:12px;background:var(--p2);border:1px solid var(--line)}
.ug-out button{display:inline-flex;align-items:center;gap:7px;padding:7px 16px;border:0;border-radius:9px;background:transparent;color:var(--mu);font-size:13px;font-weight:600;cursor:pointer;transition:.14s}
.ug-out button svg{width:16px;height:16px}
.ug-out button.on{background:var(--tx);color:var(--bg)}
.ug-out button:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
/* the composer: textarea, writer row and the pills live in one card */
.ug-box{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:18px;background:var(--p2);transition:border-color .15s,box-shadow .15s}
.ug-box:focus-within{border-color:var(--acc);box-shadow:0 0 0 3px var(--acc-soft)}
.ug-box textarea{display:block;width:100%;min-height:92px;max-height:260px;resize:vertical;background:transparent;border:0;outline:0;padding:14px 14px 4px;font-size:14.5px;line-height:1.5;color:var(--tx);font-family:inherit}
.ug-box textarea::placeholder{color:var(--dim)}
.ug-tools{display:flex;align-items:center;justify-content:space-between;padding:0 10px 10px 10px}
.ug-write{display:inline-flex;align-items:center;gap:6px;padding:7px 11px;border:1px solid var(--line);border-radius:8px;background:var(--p1);color:var(--tx);font-size:12.5px;font-weight:600;cursor:pointer;transition:.14s}
.ug-write svg{width:14px;height:14px;color:var(--acc)}
.ug-write:hover{border-color:var(--acc)}
.ug-write[disabled]{opacity:.6;cursor:progress}
.ug-count{font-family:var(--mono);font-size:11px;color:var(--dim);padding-right:4px}
.ug-count.ok{color:var(--mint-tx)}
.ug-count.off{color:var(--gold-tx)}
.ug-settings{display:flex;flex-wrap:wrap;gap:6px;padding:10px;border:1px solid var(--line);border-radius:14px;background:var(--p2)}
.ug-pill{display:inline-flex;align-items:center;gap:6px;max-width:100%;padding:7px 8px 7px 9px;border:1px solid var(--line);border-radius:8px;background:var(--p1);color:var(--tx);font-size:12.5px;font-weight:600;cursor:pointer;transition:.14s}
.ug-pill .ic{display:inline-flex;color:var(--mu)}
.ug-pill .ic svg,.ug-pill>svg{width:14px;height:14px}
.ug-pill>svg{color:var(--dim);margin-left:-2px}
.ug-pill .v{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px}
.ug-pill .aspect-ic{margin:0}
.ug-pill:hover,.ug-pill[aria-expanded="true"]{border-color:var(--acc);background:var(--p2)}
.ug-pill:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.ug-step{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:8px;background:var(--p1);font-size:12.5px;font-weight:600}
.ug-step button{width:30px;height:32px;border:0;background:transparent;color:var(--mu);font-size:16px;cursor:pointer;border-radius:8px}
.ug-step button:hover{color:var(--tx)}
.ug-step span{font-family:var(--mono);font-size:11.5px;min-width:30px;text-align:center}
/* Scene: hook and setting as two full rows, Auto until chosen */
.ug-scene{border:1px solid var(--line);border-radius:14px;background:var(--p2);overflow:hidden}
.ug-scene .h{padding:9px 14px 5px;font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.ug-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;width:100%;padding:11px 12px 11px 14px;border:0;border-top:1px solid var(--line);background:transparent;color:var(--tx);text-align:left;font:inherit;cursor:pointer;transition:background .14s}
.ug-row:hover,.ug-row[aria-expanded="true"]{background:var(--p3)}
.ug-row:focus-visible{outline:2px solid var(--acc);outline-offset:-2px}
.ug-row .k{font-size:12.5px;font-weight:600;color:var(--mu);width:92px}
.ug-row .v{font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:right}
.ug-row svg{width:16px;height:16px;color:var(--dim)}
/* the menu a pill opens */
.ug-menu{position:absolute;z-index:6;min-width:200px;max-width:calc(100% - 16px);max-height:320px;overflow:auto;padding:6px;border:1px solid var(--line2);border-radius:14px;background:var(--p1);box-shadow:0 18px 50px rgba(20,12,8,.18),0 2px 8px rgba(20,12,8,.08);scrollbar-width:thin}
.ug-menu .h{padding:7px 10px 5px;font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.ug-menu .l{display:flex;flex-direction:column;gap:1px}
.ug-menu .l button{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;padding:8px 10px;border:0;border-radius:9px;background:transparent;color:var(--tx);font-size:13px;font-weight:500;text-align:left;cursor:pointer}
.ug-menu .l button span{display:flex;flex-direction:column;min-width:0}
.ug-menu .l button small{font-size:11px;color:var(--dim);font-weight:400}
.ug-menu .l button:hover,.ug-menu .l button:focus-visible{background:var(--p2);outline:0}
.ug-menu .l button.on{background:var(--acc-soft);color:var(--tx)}
.ug-menu .l button i{font-style:normal;color:var(--acc-tx);font-weight:700}
.ug-warn{color:var(--gold-tx);background:var(--gold-soft);border-radius:9px;padding:7px 10px;font-size:12.5px}
.ug-warn[hidden]{display:none}
/* Product and Creator: two square tiles, + when empty, the picture when filled */
.ug-tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ug-tiles.one{grid-template-columns:1fr}
.ug-tile{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;aspect-ratio:1/0.82;padding:12px;border:1.5px dashed var(--line2);border-radius:18px;background:var(--p1);color:var(--tx);cursor:pointer;overflow:hidden;text-align:center;transition:border-color .15s,background .15s}
.ug-tile:hover{border-color:var(--acc);background:var(--p2)}
.ug-tile:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.ug-tile .pl{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--p2);color:var(--acc-tx)}
.ug-tile .pl svg{width:20px;height:20px}
.ug-tile .cap.empty{display:flex;flex-direction:column;gap:2px}
.ug-tile .cap.empty b{font-size:13.5px;font-weight:700}
.ug-tile .cap.empty small{font-size:11px;color:var(--dim)}
.ug-tile.has{border-style:solid;border-color:var(--line);padding:0;justify-content:flex-end;align-items:stretch;background:#000}
.ug-tile.has img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 20%}
.ug-tile.has .cap{position:relative;z-index:1;display:flex;flex-direction:column;align-items:flex-start;padding:28px 10px 10px;text-align:left;background:linear-gradient(180deg,transparent,rgba(0,0,0,.72));color:#faf7f2}
.ug-tile.has .cap small{font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;opacity:.8}
.ug-tile.has .cap b{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.ug-tile.has .chg{position:absolute;z-index:2;top:8px;right:8px;padding:4px 9px;border-radius:999px;background:#faf7f2;color:#0b0b0b;font-size:11px;font-weight:700}
.ug-tile.has:hover{border-color:var(--acc)}
.ug #ug-model .mt b{white-space:normal;line-height:1.2;row-gap:3px;flex-wrap:wrap}
@media (max-width:420px){.ug-tile{aspect-ratio:auto;min-height:120px}}

/* product / creator tiles reuse .st-model, with a square picture */
.ug-pick{grid-template-columns:72px minmax(0,1fr) auto}
.ug-pick .pv{aspect-ratio:1/1;border-radius:10px}
.ug-pick.face .pv img{object-position:50% 18%}
.ug-pick .mt b{display:block;text-overflow:ellipsis}
.ug .st-model:focus-visible,.ug .enh:focus-visible,.ug .st-set select:focus-visible,.ug .gen:focus-visible,.ug .u-link:focus-visible,.ug-sheet .u-link:focus-visible{outline:2px solid var(--acc);outline-offset:2px}

/* six ad formats: portrait posters, hover plays the sample */
.ug-formats{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:8px}
.ug-fmt{aspect-ratio:3/4.3}
.ug-fmt img,.ug-fmt video{object-position:50% 22%}
.ug-fmt .cap{padding:26px 8px 8px;font-size:12px}
.ug-fmt .cap small{margin-top:2px;line-height:1.25}
/* the tick: ui.css paints it in --tx with --bg ink, which reads in both themes (a white ink vanished on the ivory dark-theme fill) */
.ug-fmt .ck,.ug-pgrid .ck{color:var(--bg);box-shadow:0 0 0 2px rgba(8,6,5,.35)}
.ug-fdesc b{color:var(--tx);font-weight:600}
.ug-sub{font-size:12.5px;font-weight:600;color:var(--mu);display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.ug-sub small{font-weight:400;color:var(--dim);font-size:11.5px}
.ug-set{margin-top:6px}
.ug-set label{cursor:pointer}
.ug .st-set select{background-image:linear-gradient(45deg,transparent 50%,var(--dim) 50%),linear-gradient(135deg,var(--dim) 50%,transparent 50%);background-position:calc(100% - 17px) 50%,calc(100% - 12px) 50%;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:32px;cursor:pointer}
.ug .st-set select:focus{border-color:var(--acc)}
.ug .enh svg{color:var(--acc)}
.ug .enh[disabled]{opacity:.6;cursor:progress}
.ug .st-prompt textarea[readonly]{opacity:.55;cursor:progress}
.ug-count{font-family:var(--mono);font-size:11px;color:var(--dim)}
.ug-count.ok{color:var(--mint-tx)}
.ug-count.off{color:var(--gold-tx)}

/* footer: what you are about to make, the button, the balance, the rule */
.ug-sum{font-size:12px;color:var(--mu);margin-bottom:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ug-sum b{color:var(--tx);font-weight:600;margin-right:6px}
.ug .st-foot .bal b{color:var(--tx)}
.ug-rule{margin-top:9px}
.ug-rule .u-link{font-size:inherit}
.ug-rule.m{display:none}
.ug-flash{animation:ug-flash 1.3s ease-out 1}
@keyframes ug-flash{0%,45%{box-shadow:0 0 0 6px var(--acc-soft),0 0 0 7px color-mix(in srgb,var(--acc) 55%,transparent);border-radius:12px}100%{box-shadow:0 0 0 6px transparent,0 0 0 7px transparent;border-radius:12px}}

/* ───────── right side ───────── */
.ug-tlede{max-width:74ch;margin-bottom:10px}
.ug-filter{margin-bottom:14px}
.ug-wall{align-items:start}
.ug-tpl{cursor:default}
.ug-tpl.on{border-color:var(--acc);box-shadow:0 0 0 3px var(--acc-soft)}
.ug-use{position:absolute;inset:0;z-index:3;width:100%;height:100%;border:0;border-radius:inherit;background:transparent;cursor:pointer}
.ug-use:focus-visible{outline:2px solid var(--acc);outline-offset:-3px}
.ug-snd{position:absolute;right:9px;top:9px;z-index:4;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--glass);border:1px solid var(--glass-line);color:#faf7f2;cursor:pointer;opacity:0;transition:opacity .15s,background .15s}
.ug-snd svg{width:17px;height:17px}
.ug-tpl:hover .ug-snd,.ug-tpl:focus-within .ug-snd,.ug-tpl.loud .ug-snd{opacity:1}
/* on footage: always an ivory chip with dark ink, whatever the theme (the old --pink fill turned ivory-on-white in dark mode) */
.ug-tpl.loud .ug-snd{background:#faf7f2;border-color:transparent;color:#0b0b0b}
.ug-snd:focus-visible{outline:2px solid #fff;outline-offset:2px}
.ug-on{display:none;position:absolute;left:9px;top:36px;z-index:2;font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;background:#faf7f2;color:#0b0b0b;border-radius:999px;padding:4px 9px}
.ug-tpl.on .ug-on{display:block}
@media (hover:none){.ug-snd{opacity:1}}
.ug-rules{margin-top:12px}
.ug-rules>b{display:block;margin-bottom:8px;font-size:15px}
.ug-rules ol,.ug-rules ul{display:grid;gap:7px;padding-left:20px;color:var(--mu);font-size:13.5px;line-height:1.5}
.ug-rules ol li::marker{color:var(--acc-tx);font-weight:700}
/* portrait results: keep the 9:16 frame a sensible size beside its details */
.ug .st-main .row.tall .row-media{max-height:min(72vh,560px);min-height:0}
.ug .st-main .row.tall .row-media video{object-fit:cover}

/* ───────── pickers (inside the core sheet) ───────── */
.ug-sheet{display:flex;flex-direction:column;gap:14px}
.ug-stabs{align-self:flex-start}
.ug-sheet-lede{color:var(--mu);font-size:14px;line-height:1.5;max-width:70ch}
.ug-pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(138px,1fr));gap:10px}
.ug-cell{position:relative}
.ug-pgrid .u-tile{aspect-ratio:3/4}
.ug-pgrid .u-tile img{object-position:50% 20%}
.ug-pgrid.sq .u-tile{aspect-ratio:1/1}
.ug-pgrid.sq .u-tile img{object-position:50% 50%}
.ug-new{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;padding:12px;border:1.5px dashed color-mix(in srgb,var(--acc) 60%,transparent);border-radius:14px;background:var(--acc-soft);color:var(--tx);cursor:pointer;aspect-ratio:3/4;transition:border-color .15s,transform .15s}
.ug-pgrid.sq .ug-new{aspect-ratio:1/1}
.ug-new:hover{border-color:var(--acc);transform:translateY(-2px)}
.ug-new:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.ug-new svg{width:26px;height:26px;color:var(--acc-tx)}
.ug-new b{font-size:13.5px;font-weight:600}
.ug-new small{font-size:11px;color:var(--mu);line-height:1.35}
.ug-del{position:absolute;left:7px;top:7px;z-index:3;min-width:24px;height:24px;padding:0 7px;border-radius:999px;border:1px solid rgba(255,244,235,.3);background:rgba(12,10,9,.72);color:#faf7f2;font-size:11px;font-weight:600;line-height:1;cursor:pointer}
.ug-del.arm{background:#faf7f2;border-color:transparent;color:#0b0b0b}
.ug-del:focus-visible{outline:2px solid #fff;outline-offset:2px}
.ug-form{display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);gap:18px;align-items:start}
.ug-fields{display:flex;flex-direction:column;gap:12px;min-width:0}
.ug-photo{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;min-height:300px;padding:16px;text-align:center;border:1.5px dashed var(--line2);border-radius:16px;background:var(--p2) center/cover no-repeat;color:var(--mu);font-size:13.5px;font-weight:600;cursor:pointer;overflow:hidden;transition:border-color .15s}
.ug-photo:hover,.ug-photo:focus-within{border-color:var(--acc);color:var(--tx)}
.ug-photo:focus-within{box-shadow:0 0 0 3px var(--acc-soft)}
.ug-photo svg{width:22px;height:22px}
.ug-photo small{font-weight:400;font-size:11.5px;color:var(--dim)}
.ug-photo.has{border-style:solid;border-color:var(--acc);justify-content:flex-end}
.ug-photo.has svg,.ug-photo.has small{display:none}
.ug-photo.has span{background:rgba(12,10,9,.72);color:#faf7f2;border-radius:999px;padding:6px 12px;font-size:12px}
.ug-file{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.ug-consent{display:flex;align-items:flex-start;gap:10px;padding:11px 12px;border:1px solid color-mix(in srgb,var(--acc) 45%,transparent);border-radius:12px;background:var(--acc-soft);font-size:13.5px;line-height:1.45;color:var(--tx);cursor:pointer}
.ug-consent input{width:18px;height:18px;margin-top:1px;flex:none;accent-color:var(--pink)}
.ug-consent input:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
/* form errors: a boxed line with a warning mark, and the field it is about gets a solid frame (palette 3 has no error red) */
.ug-err{display:flex;align-items:flex-start;gap:9px;padding:9px 12px;border:1px solid var(--line2);border-left:3px solid var(--tx);border-radius:10px;background:var(--p2);font-size:13px;font-weight:600;line-height:1.45;color:var(--tx)}
.ug-err::before{content:"!";flex:none;display:grid;place-items:center;width:18px;height:18px;margin-top:1px;border-radius:50%;background:var(--tx);color:var(--bg);font-size:12px;font-weight:800}
.ug-err[hidden]{display:none}
.ug-photo.bad{border-style:solid;border-width:2px;border-color:var(--tx);color:var(--tx)}
.ug-sheet .u-field input.bad{border-color:var(--tx);border-width:2px}
.ug-consent.bad{border-width:2px;border-color:var(--tx)}
.ug-acts{justify-content:flex-end;margin-top:2px}

/* ───────── responsive ───────── */
@media (max-width:980px){
  .ug-rule.d{display:none}.ug-rule.m{display:block;margin-top:0}
  .ug-sum{margin-bottom:6px}
  .ug .st-main .row.tall .row-media{max-height:70vh}
}
@media (max-width:640px){
  .ug-form{grid-template-columns:1fr}
  .ug-photo{min-height:190px}
  .ug-pgrid{grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:8px}
  .ug-wall{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px}
  .ug-wall .cap b{font-size:12.5px}
  .ug-acts .u-btn{flex:1}
  .ug-tlede{font-size:12.5px}
}
@media (prefers-reduced-motion:reduce){.ug-flash{animation:none}.ug-new,.ug-snd,.ug-photo{transition:none}.ug-new:hover{transform:none}}
/* tiles: a quiet frame in both themes (the core tile lets its black base show through the border) */
.ug-fmt,.ug-pgrid .u-tile{background-clip:padding-box;border-color:var(--line)}
.ug-fmt:hover,.ug-pgrid .u-tile:hover{border-color:var(--line2)}
.ug-fmt.on,.ug-pgrid .u-tile.on{border-color:var(--acc)}
.ug #ug-model .mt b{white-space:normal;flex-wrap:wrap;line-height:1.2;row-gap:3px}
/* ui.css ".st-model .mt span" (meant for the sub-line) also greys and resizes the model badge inside <b>; give the badge its own ink back */
.ug .st-model .mt b>.bdg{display:inline-block;font-size:8.5px;line-height:1.3;overflow:visible;white-space:nowrap}
.ug .st-model .mt b>.bdg.TOP{color:#fff}
.ug .st-model .mt b>.bdg.FAST,.ug .st-model .mt b>.bdg.BUDGET{color:var(--tx)}
.ug .st-model .mt b>.bdg.SOON{color:var(--mu)}
.ug .st-model .mt b>.bdg.NEW{color:var(--inv-tx)}
.ug-sheet>*{flex:none}
@media (max-width:980px){
  /* one column: the portrait frame fills the card width instead of leaving a strip beside it */
  .ug .st-main .row.tall .row-media{aspect-ratio:auto;width:100%;height:min(70vh,calc((100vw - 30px) * 16 / 9));max-height:none}
  .ug .st-main .row.tall .row-media video{object-fit:contain}
}
@media (max-width:640px){.ug .st-main .row.tall .row-media video{object-fit:cover}}