/* UGC creation desk. Intentionally scoped to this route and existing Markio tokens. */
.ugc-studio{--ugc-ease:cubic-bezier(.16,1,.3,1);position:relative;padding:32px clamp(24px,3.3vw,72px) 48px;min-height:100vh;background:color-mix(in srgb,var(--bg) 96%,transparent);color:var(--text)}
.ugc-studio button,.ugc-upload-choice button{cursor:pointer;touch-action:manipulation}
.ugc-studio button,.ugc-studio select,.ugc-studio summary,.ugc-studio textarea,.ugc-studio input{font:inherit}
.ugc-studio button{transition:background-color 150ms ease,color 150ms ease,border-color 150ms ease,transform 120ms var(--ugc-ease)}
.ugc-studio button:active{transform:scale(.98)}
.ugc-studio :is(button,select,textarea,input,summary):focus-visible{outline:2px solid var(--text);outline-offset:4px}
.ugc-studio svg{width:18px;height:18px;flex-shrink:0}
.ugc-header{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:32px}
.ugc-header h1{display:flex;align-items:center;gap:12px;font-size:24px;font-weight:500;letter-spacing:-.9px;margin:0 0 9px}
.ugc-header p{color:var(--muted);font-size:13px;margin:0;line-height:1.6}
.ugc-beta{font:10px var(--mono);letter-spacing:1px;color:var(--muted);padding:4px 6px;border:1px solid var(--line-strong);border-radius:4px}
.ugc-save-project{display:flex;align-items:center;justify-content:center;gap:8px;color:var(--text);background:transparent;border:1px solid var(--line-strong);border-radius:8px;padding:10px 14px;min-height:40px;font-size:12px!important;white-space:nowrap}
.ugc-layout{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(300px,1fr);gap:clamp(40px,5vw,96px);align-items:start}
.ugc-editor{min-width:0}
.ugc-section{padding-bottom:22px;margin-bottom:22px;border-bottom:1px solid var(--line)}
.ugc-section:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}
.ugc-section-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}
.ugc-section h2{display:flex;align-items:center;gap:12px;font-size:15px;font-weight:500;letter-spacing:-.3px;margin:0;line-height:1.4}
.ugc-section h2>span{font:11px var(--mono);color:var(--muted);letter-spacing:.3px}
.ugc-quiet{font-size:11px;color:var(--muted);white-space:nowrap}
.ugc-creators{display:grid;grid-template-columns:repeat(4,minmax(0,1fr)) minmax(85px,.85fr);gap:9px}
.ugc-creator{position:relative;padding:0;border:1px solid transparent;border-radius:9px;background:var(--panel);overflow:hidden;text-align:left;aspect-ratio:3/4.35;isolation:isolate}
.ugc-portrait{display:block;position:relative;isolation:isolate;width:100%;height:100%;background:var(--panel-2);overflow:hidden}
.ugc-portrait-fallback{position:absolute;inset:0;display:grid;place-items:center;color:var(--muted)}
.ugc-portrait-fallback svg{width:45%;height:45%;opacity:.5;stroke-width:.7}
.ugc-portrait img{position:relative;width:100%;height:100%;object-fit:cover;filter:saturate(.72);transition:transform 220ms var(--ugc-ease),filter 220ms ease}
.ugc-creator .ugc-portrait::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 35%,rgba(0,0,0,.85) 100%)}
.ugc-creator-label{position:absolute;bottom:11px;left:11px;right:7px;display:flex;flex-direction:column;gap:4px}
.ugc-creator-label strong{font-size:13px;font-weight:500}
.ugc-creator-label small{font-size:10px;color:#d0d0cd;line-height:1.35}
.ugc-creator-check{position:absolute;right:7px;top:7px;width:21px;height:21px;border-radius:50%;background:var(--text);color:var(--bg);display:grid;place-items:center;opacity:0;transform:scale(.85);transition:opacity 150ms ease,transform 180ms var(--ugc-ease)}
.ugc-creator-check svg{width:13px;height:13px;stroke-width:2}
.ugc-creator[aria-pressed=true]{border-color:var(--text);box-shadow:0 0 0 2px var(--bg),0 0 0 3px var(--line-strong)}
.ugc-creator[aria-pressed=true] .ugc-creator-check{opacity:1;transform:scale(1)}
.ugc-upload-creator{display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;gap:8px;padding:12px 7px;min-width:0;border:1px dashed var(--line-strong);border-radius:9px;background:transparent;text-align:center;overflow:hidden}
.ugc-upload-creator>.ugc-portrait{position:absolute;inset:0;z-index:-1;opacity:.22}
.ugc-upload-creator>span:not(.ugc-portrait){font-size:11px;font-weight:500;line-height:1.4}
.ugc-upload-creator>small{font-size:10px;line-height:1.5;color:var(--muted)}
.ugc-upload-creator[aria-pressed=true]{border-style:solid;border-color:var(--text)}
.ugc-upload-symbol{display:grid;place-items:center;width:30px;height:30px;background:var(--panel-2);border-radius:50%;margin-bottom:4px}
.ugc-hint{color:var(--muted);font-size:11px;line-height:1.5;margin:13px 0 0}
.ugc-text-button{display:flex;align-items:center;gap:6px;border:0;background:transparent;font-size:11px!important;color:var(--muted);min-height:30px;padding:0}
.ugc-text-button svg{width:14px;height:14px}
.ugc-starters{background:var(--panel);padding:12px;border:1px solid var(--line-strong);border-radius:9px;margin-bottom:12px;display:flex;gap:6px;flex-wrap:wrap}
.ugc-starters[hidden]{display:none}
.ugc-starters>span{flex-basis:100%;font-size:11px;color:var(--muted);margin-bottom:5px}
.ugc-starters button{border:1px solid var(--line-strong);background:var(--panel-2);border-radius:6px;padding:8px;display:flex;gap:8px;align-items:center;font-size:11px}
.ugc-starters button svg{width:13px;height:13px}
.ugc-script-box{background:var(--panel);border:1px solid var(--line-strong);border-radius:12px;transition:border-color 160ms ease;overflow:hidden}
.ugc-script-box:focus-within{border-color:color-mix(in srgb,var(--text) 55%,transparent)}
.ugc-script-box textarea{display:block;width:100%;height:164px;min-height:130px;max-height:440px;resize:vertical;border:0;border-radius:12px;background:transparent;color:var(--text);padding:19px 20px 12px;font-size:15px;line-height:1.85;letter-spacing:-.2px}
.ugc-script-box textarea:focus-visible{outline-offset:-3px;outline:1px solid var(--line-strong)}
.ugc-studio textarea::placeholder{color:var(--muted);opacity:.85}
.ugc-script-footer{display:flex;justify-content:space-between;gap:12px;padding:12px 20px;font-size:11px;line-height:1.4;color:var(--muted)}
.ugc-script-footer [data-ugc-word-count]{font-variant-numeric:tabular-nums;white-space:nowrap}
.ugc-script-footer .is-long,.ugc-error{color:#dfb897}
.ugc-error{font-size:12px;line-height:1.6;margin:10px 0 0}
.ugc-error:empty{display:none}
.ugc-delivery-row{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:20px}
.ugc-field{display:flex;flex-direction:column;gap:8px;min-width:0}
.ugc-field>span{font-size:11px;color:var(--muted)}
.ugc-field select{width:100%;min-width:0;height:39px;padding:0 10px;border:1px solid var(--line);background:var(--panel);color:var(--text);border-radius:7px;font-size:12px}
.ugc-field textarea{width:100%;resize:vertical;min-height:100px;padding:12px;border:1px solid var(--line-strong);border-radius:7px;background:var(--panel);color:var(--text);font-size:13px;line-height:1.6}
.ugc-direction{margin-top:18px}
.ugc-studio summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:35px;color:var(--muted);font-size:12px}
.ugc-studio summary::-webkit-details-marker{display:none}
.ugc-direction summary>span{display:flex;align-items:center;gap:10px;font-size:10px}
.ugc-direction summary svg{width:13px;height:13px;transition:transform 160ms var(--ugc-ease)}
.ugc-direction[open] summary svg{transform:rotate(45deg)}
.ugc-direction-body{padding-top:12px}
.ugc-product-upload{display:flex;align-items:center;gap:12px;width:100%;background:transparent;border:1px dashed var(--line-strong);border-radius:8px;padding:12px;text-align:left;margin-top:12px}
.ugc-product-upload span{font-size:12px;display:grid;gap:4px}
.ugc-product-upload small{font-size:11px;color:var(--muted)}
.ugc-product-reference{display:flex;align-items:center;gap:12px;margin-top:12px;background:var(--panel);border-radius:8px;padding:8px;font-size:12px}
.ugc-product-reference img{width:44px;height:44px;object-fit:contain;background:var(--panel-2);border-radius:4px}
.ugc-product-reference span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ugc-product-reference button{display:grid;place-items:center;flex-shrink:0;width:32px;height:32px;border:0;border-radius:5px;background:transparent;color:var(--muted)}
.ugc-format-row{display:grid;grid-template-columns:minmax(210px,1fr) minmax(125px,.7fr);gap:24px}
.ugc-formats{display:flex;gap:5px;padding:3px;background:var(--panel);border:1px solid var(--line);border-radius:8px}
.ugc-formats button{display:flex;align-items:center;justify-content:center;gap:8px;flex:1;min-height:31px;border:1px solid transparent;border-radius:5px;background:transparent;color:var(--muted);font-size:11px}
.ugc-formats button[aria-pressed=true]{background:var(--hover);border-color:var(--line-strong);color:var(--text)}
.ugc-ratio-icon{width:9px;height:14px;border:1px solid currentColor;border-radius:2px}
.ugc-ratio-icon[data-ratio="1:1"]{width:12px;height:12px}
.ugc-ratio-icon[data-ratio="16:9"]{width:16px;height:10px}
.ugc-model-options{margin-top:12px}
.ugc-model-options summary{font-size:11px;justify-content:start;gap:5px}
.ugc-model-options summary svg{width:13px;height:13px}
.ugc-model-options[open]>.ugc-delivery-row{margin-top:8px}
.ugc-preview-panel{position:sticky;top:28px;min-width:0;background:var(--panel);padding:20px;border:1px solid var(--line);border-radius:16px}
.ugc-preview-header{display:flex;align-items:center;justify-content:space-between;color:var(--muted);font:10px var(--mono);letter-spacing:1.1px;margin-bottom:18px}
.ugc-preview-header>span:last-child{letter-spacing:0;font-variant-numeric:tabular-nums}
.ugc-preview-stage{height:clamp(320px,47vh,530px);display:flex;align-items:center;justify-content:center;min-width:0;overflow:hidden;background:var(--bg);border-radius:9px}
.ugc-preview-frame{position:relative;aspect-ratio:9/16;height:100%;max-width:100%;overflow:hidden;border-radius:5px;isolation:isolate;background:var(--panel-2)}
.ugc-preview-frame[data-ratio="1:1"]{aspect-ratio:1;height:auto;width:100%;max-height:100%}
.ugc-preview-frame[data-ratio="16:9"]{aspect-ratio:16/9;height:auto;width:100%}
.ugc-preview-portrait{position:absolute;inset:0}
.ugc-preview-frame::after{content:"";position:absolute;inset:50% 0 0;background:linear-gradient(transparent,rgba(0,0,0,.65));pointer-events:none}
.ugc-preview-badge{position:absolute;top:17px;left:18px;color:#eee;font-size:10px;background:rgba(0,0,0,.48);border:1px solid rgba(255,255,255,.18);padding:5px 8px;border-radius:4px}
.ugc-preview-caption{position:absolute;z-index:1;bottom:17%;left:10%;right:10%;text-align:center;color:#fff;font-size:clamp(16px,1.7vw,25px);font-weight:500;line-height:1.25;letter-spacing:-.6px;text-shadow:0 1px 9px #0009;text-wrap:balance;overflow-wrap:anywhere}
.ugc-preview-name{position:absolute;bottom:23px;left:23px;right:23px;z-index:1;font-size:11px;color:#f3f3f1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ugc-frame-corner{position:absolute;z-index:2;width:13px;height:13px;opacity:.6;pointer-events:none}
.ugc-corner-tl{left:8px;top:8px;border-left:1px solid white;border-top:1px solid white}.ugc-corner-tr{right:8px;top:8px;border-right:1px solid white;border-top:1px solid white}.ugc-corner-bl{left:8px;bottom:8px;border-left:1px solid white;border-bottom:1px solid white}.ugc-corner-br{right:8px;bottom:8px;border-right:1px solid white;border-bottom:1px solid white}
.ugc-playback{display:flex;align-items:center;gap:12px;margin-top:16px}
.ugc-playback>button{display:grid;place-items:center;width:35px;height:35px;flex-shrink:0;border:1px solid var(--line-strong);border-radius:50%;background:var(--panel-2);color:var(--text)}
.ugc-playback>button svg{width:14px;height:14px}
.ugc-playback>button:disabled{opacity:.4;cursor:default}
.ugc-playback-track{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.ugc-playback-track input{display:block;width:100%;margin:0;height:12px;accent-color:var(--text);cursor:pointer}
.ugc-playback-track span{font-size:10px;color:var(--muted)}
.ugc-time{font:11px var(--mono);color:var(--muted)}
.ugc-preview-note{font-size:10px;line-height:1.6;color:var(--muted);margin:15px 0 0;padding-top:15px;border-top:1px solid var(--line)}
.ugc-submit-area{padding-top:22px}
.ugc-submit-meta{display:flex;justify-content:space-between;gap:10px;font-size:10px;color:var(--muted);margin-bottom:12px;line-height:1.5}
.ugc-generate{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;min-height:45px;border:1px solid transparent;border-radius:8px;background:var(--text);color:var(--bg);font-size:13px!important;font-weight:500!important}
.ugc-generate svg{width:16px;height:16px}
.ugc-availability{font-size:11px;color:var(--muted);line-height:1.65;margin:12px 0;text-align:center;text-wrap:pretty}
.ugc-save-status{display:block;font-size:10px;color:var(--muted);text-align:center;line-height:1.5}
.ugc-upload-choice{display:flex;gap:12px;padding:15px 0;flex-wrap:wrap}
@media(hover:hover) and (pointer:fine){.ugc-creator:hover .ugc-portrait img{transform:scale(1.035);filter:saturate(1)}.ugc-studio button:hover:not(:disabled){border-color:var(--line-strong)}.ugc-save-project:hover,.ugc-upload-creator:hover,.ugc-starters button:hover,.ugc-product-upload:hover{background:var(--panel-2)}.ugc-text-button:hover{color:var(--text)}.ugc-generate:hover{background:color-mix(in srgb,var(--text) 90%,var(--bg))}}
@media(min-width:1800px){.ugc-studio{padding-top:42px}.ugc-header{margin-bottom:36px}.ugc-layout{grid-template-columns:minmax(0,1.5fr) minmax(360px,1fr)}.ugc-creators{gap:13px}.ugc-creator{max-height:190px}.ugc-creator-label strong{font-size:15px}.ugc-creator-label small{font-size:11px}.ugc-script-box textarea{height:180px}.ugc-preview-panel{padding:26px}.ugc-preview-stage{height:530px}.ugc-section{margin-bottom:24px;padding-bottom:24px}.ugc-section h2{font-size:16px}}
@media(max-width:1150px) and (min-width:721px){.ugc-studio{padding:26px 24px 40px}.ugc-layout{gap:26px;grid-template-columns:minmax(0,1fr) minmax(270px,.8fr)}.ugc-creators{grid-template-columns:repeat(4,minmax(0,1fr))}.ugc-upload-creator{grid-column:1/-1;flex-direction:row;min-height:43px}.ugc-upload-symbol{width:23px;height:23px;margin:0}.ugc-creator-label{left:7px;bottom:8px}.ugc-creator-label small{display:none}.ugc-format-row{grid-template-columns:1fr;gap:15px}.ugc-preview-panel{padding:16px}.ugc-preview-stage{height:380px}.ugc-preview-header{font-size:9px}}
@media(max-width:900px){.ugc-layout{grid-template-columns:1fr}.ugc-preview-panel{position:relative;top:0}.ugc-creators{grid-template-columns:repeat(4,minmax(0,1fr)) minmax(85px,.85fr)}.ugc-upload-creator{grid-column:auto;flex-direction:column}.ugc-creator-label small{display:block}.ugc-format-row{grid-template-columns:minmax(210px,1fr) minmax(125px,.7fr)}.ugc-preview-stage{height:440px}.ugc-preview-frame[data-ratio="1:1"]{width:min(100%,440px)}.ugc-preview-frame[data-ratio="16:9"]{width:min(100%,782px)}.ugc-preview-caption{font-size:24px}}
@media(max-width:720px){.ugc-studio{padding:28px 18px 32px}.ugc-header{align-items:start;gap:12px;margin-bottom:30px}.ugc-header h1{font-size:23px;gap:8px}.ugc-header p{font-size:12px;max-width:22ch}.ugc-save-project{padding:8px 10px;min-height:40px;font-size:11px!important}.ugc-save-project svg{display:none}.ugc-beta{font-size:8px}.ugc-layout{gap:28px}.ugc-section{padding-bottom:23px;margin-bottom:23px}.ugc-section-head{gap:8px;margin-bottom:16px}.ugc-section h2{gap:8px;font-size:14px}.ugc-section h2>span{font-size:10px}.ugc-quiet{font-size:10px}.ugc-creators{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.ugc-creator{aspect-ratio:3/4.5;border-radius:7px}.ugc-creator-label{left:8px;bottom:9px}.ugc-creator-label strong{font-size:12px}.ugc-creator-label small{display:none}.ugc-creator-check{width:18px;height:18px;right:5px;top:5px}.ugc-upload-creator{grid-column:1/-1;min-height:44px;flex-direction:row;gap:9px;padding:8px}.ugc-upload-symbol{width:25px;height:25px;margin:0}.ugc-hint{font-size:11px;max-width:38ch}.ugc-text-button{font-size:10px!important;min-height:36px}.ugc-script-box textarea{height:185px;font-size:16px;padding:16px;line-height:1.7}.ugc-script-footer{padding:10px 14px;font-size:10px;gap:8px}.ugc-delivery-row{gap:12px}.ugc-field select{height:44px;font-size:13px}.ugc-studio summary{min-height:44px}.ugc-format-row{grid-template-columns:1fr;gap:16px}.ugc-formats button{min-height:38px;font-size:12px}.ugc-output .ugc-section-head{margin-bottom:16px}.ugc-preview-panel{padding:16px;border-radius:12px}.ugc-preview-stage{height:410px}.ugc-preview-frame[data-ratio="1:1"]{width:100%}.ugc-preview-caption{font-size:22px}.ugc-playback>button{width:42px;height:42px}.ugc-preview-note{font-size:11px}.ugc-submit-meta{font-size:11px}.ugc-availability{font-size:12px}.ugc-save-status{font-size:11px}.ugc-generate{min-height:48px}.ugc-product-reference button{width:44px;height:44px}.ugc-starters button{min-height:40px}}
@media(prefers-reduced-motion:reduce){.ugc-studio *,.ugc-studio *::before,.ugc-studio *::after{transition:none!important;animation:none!important}.ugc-studio button:active,.ugc-creator:hover .ugc-portrait img{transform:none}}