/* Creator Studio — shared visual system for administrator and student. */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');
:root { color-scheme:dark; --canvas:#0a1326; --surface:#111f38; --line:#263b5b; --muted:#9eafcc; --accent:#6da9ff; }
.creator-brand-logo { display:block;position:relative;width:100%;aspect-ratio:1177/469;overflow:hidden; }
.creator-brand-logo img { position:absolute;display:block;width:106.55%;max-width:none;height:auto;left:-3.99%;top:-85.72%; }
aside.app-sidebar > .brand-header { padding:22px 20px 15px;border:0; }
.brand-home { display:block;width:100%; }
.brand-caption { display:block;margin-top:10px;text-align:center;letter-spacing:2px;color:#85aee2;font-size:8px;font-weight:700; }
body { font-family:'Manrope',system-ui,sans-serif; background:var(--canvas)!important; color:#e9f0f1; font-size:14px; }
code,pre,.font-mono { font-family:'JetBrains Mono',monospace; font-variant-numeric:tabular-nums; }
::-webkit-scrollbar { width:5px;height:5px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:#3c4b50;border-radius:8px; }
body > div > aside.app-sidebar { width:264px; background:#0d1930!important; border-color:var(--line)!important; height:100dvh; }
aside > div:first-child { padding:27px 22px 24px; border:0; }
aside h1 { background:none!important; color:#f1f5f4!important; font-size:18px!important; letter-spacing:-.7px!important; }
aside > div:first-child .w-10 { background:#d3e6ff!important; color:#173f7b!important; box-shadow:none!important; border-radius:12px; }
aside h1 + span { background:none!important;border:0!important;padding:0!important;color:#8da8cc!important;font-size:9px!important;letter-spacing:2px!important; }
aside > div:nth-child(2) { background:#14223c!important;border-color:#2a4164!important;margin:0 16px 20px;padding:12px; }
aside nav { padding:0 14px 18px!important; }
.nav-btn { min-height:43px; padding:11px 13px!important; border-radius:8px!important; font-size:12px!important; font-weight:500!important; color:#a5b7d2!important; margin-bottom:4px; border:1px solid transparent; }
.nav-btn svg { color:#7692bb!important; width:17px;height:17px;flex-shrink:0; }
.nav-btn:hover { background:#1b3051!important;color:#f5f9f8!important; }
.nav-btn.active { background:#183a68!important;color:#c6e0ff!important;border-color:#315d95!important; }
.nav-btn.active svg { color:#7bb5ff!important; }
#adminNavGroup { border-color:var(--line)!important; margin-top:22px;padding-top:19px; }
#adminNavGroup > div { color:#839fc7!important;font-size:9px!important;letter-spacing:1.5px; margin-bottom:8px; }
.sidebar-profile { margin:8px 16px 0;padding:18px 4px;border-top:1px solid var(--line);flex-shrink:0; }
.sidebar-profile > .w-9 { background:#234a7c!important;color:#c2ddff!important;box-shadow:none!important;--tw-ring-shadow:0 0 transparent;flex-shrink:0; border-radius:11px; }
.profile-details { min-width:0; }
#userName { font-size:12px;line-height:1.7; }
#userEmail { overflow:hidden;text-overflow:ellipsis;font-size:10px; }
aside > div:last-child { background:transparent!important;border:0!important;padding:0 20px 18px; }
aside > div:last-child p { font-size:9px;line-height:1.6; }
main { background:var(--canvas)!important; }
main > header { background:rgba(10,19,38,.96)!important; border-color:var(--line)!important;height:86px;padding:0 36px!important;gap:20px; }
#viewTitle { font-size:16px;font-weight:700;letter-spacing:-.4px; }
#viewTitle + span { border:0!important;background:none!important;color:#849dbf!important;font-size:10px!important; }
main > div { padding:32px 36px!important;max-width:1550px!important; }
#quotaText { font-size:11px; }
#quotaBar { background:#5297fa!important; }
header .min-w-\[190px\] { min-width:220px; }
[class~="bg-slate-900/80"], [class~="bg-slate-900/90"],.glass-panel { background-color:var(--surface)!important; }
[class~="bg-slate-950"], [class~="bg-slate-950/80"], [class~="bg-slate-950/60"] { background-color:#0d1930!important; }
[class~="bg-slate-800"], [class~="bg-slate-800/80"] { background-color:#1c3050!important; }
[class*="border-slate-800"],[class*="border-slate-700"] { border-color:var(--line)!important; }
[class*="text-slate-400"] { color:#9eafcc!important; }
[class*="text-slate-500"] { color:#8da6ca!important; }
[class*="rounded-2xl"] { border-radius:14px; }
[class*="shadow-"] { box-shadow:none!important; }
h3,h4 { letter-spacing:-.45px; }
h4.font-black { font-weight:700; }
#view-dashboard > div:first-child { background:#112c52!important;border:1px solid #2b5080!important;padding:32px!important;min-height:195px;display:flex;align-items:center; }
#view-dashboard > div:first-child > div { width:100%; }
#view-dashboard > div:first-child h3 { font-size:30px;line-height:1.25;font-weight:700;max-width:560px;letter-spacing:-1.2px; }
#view-dashboard > div:first-child p { font-size:12px;line-height:1.9;max-width:510px;margin-top:12px;color:#adc4e1!important; }
#view-dashboard > div:first-child span.uppercase { background:transparent!important;border:0!important;padding:0!important;color:#8bb9f6!important;font-size:9px;letter-spacing:2px;margin-bottom:16px; }
#view-dashboard > .grid:nth-child(2) > div { padding:23px!important;align-items:flex-start; }
#view-dashboard > .grid:nth-child(2) h4 { font-size:27px;margin:13px 0 8px;letter-spacing:-1px; }
#view-dashboard > .grid:nth-child(2) span.uppercase { font-size:9px;letter-spacing:1px; }
#view-dashboard > .grid:nth-child(2) .w-12 { width:36px;height:36px;border-radius:10px;background:#1d3558!important;border:0!important; }
#view-dashboard > .grid:nth-child(2) .w-12 svg { width:18px;height:18px; }
#view-dashboard > .grid:last-child > div { padding:24px!important; }
#recentJobsList > div { padding:18px 0!important;background:transparent!important;border:0!important;border-bottom:1px solid var(--line)!important;border-radius:0;gap:12px; }
#recentJobsList > div:last-child { border-bottom:0!important; }
#recentJobsList .font-bold.text-white { font-size:12px;line-height:1.6;font-weight:600; }
button { transition:background-color .18s,border-color .18s,transform .18s;cursor:pointer; }
button:active { transform:translateY(1px); }
button[class*="from-emerald"],#btnStartRender { background:#eda96a!important;color:#23201c!important;border:1px solid #edb37f!important;font-weight:800; }
button[class*="from-emerald"]:hover,#btnStartRender:hover { background:#f4ba87!important; }
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible { outline:2px solid #76adff!important;outline-offset:4px; }
input:not([type=radio]),textarea,select { background:#0a162b!important;border-color:#304c73!important;border-radius:8px!important;padding:12px!important;font-size:12px!important; }
textarea { line-height:1.9!important; }
label:has(input:checked) { border-color:#62a4ff!important;background:#183b6b!important; }
table { min-width:660px;border-collapse:collapse; }
thead { background:#172b49!important;color:#a6bad8!important;font-size:10px;text-transform:uppercase;letter-spacing:.7px; }
th { padding:16px!important;font-weight:600;white-space:nowrap; }
td { padding:18px 16px!important;border-bottom:1px solid var(--line); }
tbody tr:hover { background:#192f50!important; }
section:not(.hidden) { animation:reveal .25s ease-out; }
@keyframes reveal { from { opacity:0;transform:translateY(5px); } to { opacity:1;transform:translateY(0); } }
@media(min-width:1024px) and (max-width:1279px) { #view-dashboard > .grid:nth-child(2) { grid-template-columns:repeat(2,minmax(0,1fr)); } #view-dashboard > div:first-child .md\:flex-row { flex-direction:column;align-items:flex-start; } }
@media(max-width:1023px) { body > div > aside.app-sidebar { width:224px; } main > header { padding:0 22px!important; } main > div { padding:24px 22px!important; } #viewTitle + span { display:none!important; } #view-dashboard > div:first-child h3 { font-size:25px; } }
@media(max-width:767px) { body > .flex-1 { flex-direction:column; } body > div > aside.app-sidebar { width:100%;height:auto;min-height:0;position:relative; } aside > div:first-child { padding:16px 20px; } aside > div:nth-child(2) { margin:0 16px 12px; } aside nav { display:flex;flex-wrap:wrap;gap:4px;max-height:220px; } .nav-btn { flex:1 0 145px;font-size:11px!important; } #adminNavGroup { width:100%;margin:8px 0 0;padding:10px 0 0; } #adminNavGroup .nav-btn { display:inline-flex; } aside nav > div:last-child { width:100%; } .sidebar-profile { padding:12px 4px;margin-top:0; } aside > div:last-child { display:none; } main > header { height:auto;min-height:80px;flex-wrap:wrap;padding:16px 20px!important;gap:12px;position:relative; } header .min-w-\[190px\] { min-width:190px;align-items:flex-start; } #viewTitle { font-size:15px; } main > div { padding:20px 16px!important; } #view-dashboard > div:first-child { padding:24px!important; } #view-dashboard > div:first-child h3 { font-size:26px; } #recentJobsList > div { align-items:flex-start; } #recentJobsList > div > div:last-child { gap:8px; } #recentJobsList .rounded-full { font-size:8px; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important;transition:none!important;scroll-behavior:auto!important; } }

main > header { height:86px!important; }
@media(max-width:767px) { main > header { height:auto!important; } }

/* Blue workspace accents, including runtime-created badges. */
[class*="text-emerald-"], [class*="text-teal-"], [class*="text-cyan-"], [class*="text-sky-"] { color:#82b8ff!important; }
[class~="bg-emerald-500/20"], [class~="bg-emerald-500/10"], [class~="bg-emerald-950"], [class~="bg-emerald-950/20"], [class~="bg-cyan-950"] { background-color:#18365e!important; }
[class~="bg-emerald-500"], [class~="bg-emerald-600"], [class~="bg-teal-600"], [class~="bg-cyan-600"] { background-color:#316fce!important; }
[class*="border-emerald-"], [class*="border-cyan-"] { border-color:#345d91!important; }
#roleBadge { display:inline-flex;align-items:center;white-space:nowrap;padding:5px 9px!important;border-radius:6px!important;font-size:9px!important;letter-spacing:.6px;background:#203e67!important;color:#bcd9ff!important;border:1px solid #3a608f!important; }
aside > div:nth-child(2) > div { gap:8px; }
aside > div:nth-child(2) > div > span:first-child { white-space:nowrap;font-size:10px!important; }
#btnSwitchRole { min-height:34px;font-size:10px!important; }
.phone-preview { width:100%;max-width:292px;margin-inline:auto;padding:9px!important;border-radius:34px!important;background:#080e1c!important;border:2px solid #344b6b!important;box-shadow:0 18px 45px #030a1940!important; }
.phone-preview > .w-20 { width:58px;height:6px;margin:4px auto 10px;background:#2e405d!important; }
.phone-screen { aspect-ratio:9/16;width:100%;border-radius:23px!important;padding:13px!important;flex-shrink:0; }
.phone-screen #previewSubtitleHook { font-size:15px;line-height:1.4; }
.phone-screen #previewSubtitleBody { font-size:10px;line-height:1.5; }
.phone-preview .bg-emerald-600\/80 { background:#255ca0!important; }
label:has(input[type=radio]) { background:#0e1b31!important;border-color:#2b4164!important; }
label:has(input:checked) { background:#183b6b!important;border-color:#62a4ff!important;box-shadow:inset 0 0 0 1px #62a4ff!important; }
label:has(input:focus-visible) { outline:2px solid #a1c8ff;outline-offset:3px; }
input[type=radio].hidden { display:block!important;position:absolute;width:1px;height:1px;opacity:0; }
[data-admin-only].role-hidden { display:none!important; }
body[data-role=user] #view-dashboard > .grid:nth-child(2) { grid-template-columns:repeat(3,minmax(0,1fr)); }
body[data-role=user] #view-dashboard > .grid:last-child > .lg\:col-span-2 { grid-column:1/-1; }
@media(max-width:1023px) { body[data-role=user] #view-dashboard > .grid:nth-child(2) { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:639px) { body[data-role=user] #view-dashboard > .grid:nth-child(2) { grid-template-columns:minmax(0,1fr); } #view-estudio > div:first-child { flex-direction:column;align-items:flex-start;gap:12px; } }

#view-estudio > div:first-child > div:last-child > span:last-child { display:inline-flex;align-items:center;gap:7px; }
.phone-screen > .absolute { background:linear-gradient(180deg,#112e57,#101d35 55%,#080f20)!important; }
body:not([data-role]) [data-admin-only] { display:none!important; }

/* Full-height handset, sized by the available viewport rather than the page. */
.phone-preview { width:min(100%,calc((100dvh - 220px) * .49));max-width:390px;min-width:235px;border-radius:42px!important;border:4px solid #354963!important;padding:5px!important;background:#040910!important;box-shadow:inset 0 0 0 2px #050911,0 20px 48px #02081455!important; }
.phone-preview > .w-20 { display:none; }
.phone-screen { border:0!important;border-radius:32px!important;aspect-ratio:9/19.5;padding:17px!important; }
.phone-screen > .absolute { background:#0b1425!important; }
#view-estudio > .grid > .lg\:col-span-4 { position:sticky;top:108px;align-self:start; }
label.premium-locked { cursor:not-allowed!important;opacity:.55; }
label.premium-locked::after { content:'Bloqueado para alumnos';display:block;margin-top:9px;color:#efbe81;font-size:10px;font-weight:700; }
#studentEditor label { font-size:12px;color:#b6c9e3; }
@media(max-width:1023px) { #view-estudio > .grid > .lg\:col-span-4 { position:static; } .phone-preview { width:min(90%,350px); } }
@media(max-height:650px) and (min-width:1024px) { .phone-preview { min-width:180px; } }

.phone-screen { aspect-ratio:9/19.5!important; }
@media(min-width:1024px) { .phone-preview { width:min(100%,calc((100dvh - 220px) * .46)); } }
/* Real creator workbench */
.legacy-studio { display:none!important; }
/* The approved studio remains the primary creation flow. */
.classic-quick-actions { display:flex;gap:9px;flex-wrap:wrap;margin:18px 0 2px; }
.classic-quick-actions button,.classic-formula-picker button,.classic-preview-toggle { padding:10px 14px;border-radius:9px;border:1px solid #315782;background:#15335b;color:#c4dfff;font-size:11px;font-weight:700; }
.classic-quick-actions button:first-child { background:#edb674;color:#252019;border-color:#edb674; }
#classicStatus { font-size:12px;line-height:1.8;color:#aacaef; }
#classicStatus:empty { display:none; }
#classicStatus.is-error { color:#f2bf83; }
.classic-niche { display:flex;flex-direction:column;gap:10px;padding:17px 15px;border:1px solid #294363;border-radius:12px;background:#0b182d;cursor:pointer;transition:border-color .2s,background .2s; }
.classic-niche input { display:none; }
.classic-niche strong { color:#eff6ff;font-size:12px;line-height:1.6; }
.classic-niche small { color:#9ab4d6;font-size:10px; }
.classic-niche-symbol { color:#80b6ff;font-size:23px; }
.classic-niche.is-selected { border-color:#65a4ff;background:#173a68; }
.classic-formula-picker { display:flex;align-items:end;gap:8px;flex-wrap:wrap;padding-bottom:15px; }
.classic-formula-picker label { flex:1;min-width:180px;font-size:11px;color:#a2bbdb; }
.classic-formula-picker select { display:block;width:100%;margin-top:7px; }
.classic-formula-picker button { font-size:10px;padding:11px; }
.classic-tools { border:1px solid #2b4c75;border-radius:14px;background:#0e1e37;scroll-margin-top:110px; }
.classic-tools > summary { cursor:pointer;padding:18px 20px;color:#d2e5ff;font-size:13px;font-weight:700; }
.classic-tools > summary span { display:block;color:#8faed5;font-size:10px;font-weight:400;margin:7px 0 0 16px; }
.classic-tools[open] > summary { border-bottom:1px solid #294569;margin-bottom:14px; }
#classicTools #realCreativeStudio { padding:12px 18px; }
#classicTools .studio-intro,#classicTools .studio-runtime,#classicTools .studio-preview-column { display:none; }
#classicTools .studio-layout { display:block; }
#classicTools .studio-panel { background:#10223e;padding:18px; }
#classicTools .studio-intro + .studio-runtime + #creativeStatus { padding:0;min-height:0; }
.classic-formula-heading { display:flex;justify-content:space-between;align-items:center;gap:22px;margin-bottom:18px; }
.classic-formula-heading h3 { font-size:23px;font-weight:800;color:#edf5ff; }
.classic-formula-heading p { color:#9bb4d7;font-size:12px;margin-top:9px;line-height:1.8; }
.classic-formula-heading label { font-size:11px;color:#adc5e6;min-width:210px; }
.classic-formula-heading select { display:block;width:100%;margin-top:8px; }
#classicFormulaCount { font-size:11px;color:#85a9da;margin-bottom:20px; }
.classic-formula-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px; }
.classic-formula-card { padding:25px;background:#11223e;border:1px solid #29486e;border-radius:15px;display:flex;flex-direction:column;gap:15px; }
.classic-formula-top { display:flex;justify-content:space-between;align-items:center;gap:12px; }
.classic-formula-top > span { color:#edba7e;font-size:11px;font-weight:800;letter-spacing:1px; }
.classic-formula-top small { color:#90afd7;font-size:9px; }
.classic-formula-card h4 { color:#eaf3ff;font-size:17px;font-weight:800; }
.classic-formula-card > p { color:#a6bedf;font-size:12px;line-height:1.9; }
.classic-formula-example { padding:18px;background:#0a172d;border:1px solid #294263;border-radius:10px;flex:1; }
.classic-formula-example > span { color:#83b5fb;font-size:9px;letter-spacing:1.2px;font-weight:700; }
.classic-formula-example p { color:#c5d9f5;font-size:12px;line-height:1.95;margin-top:12px; }
.classic-formula-card button { align-self:start; }
.classic-phone #classicResultVideo { width:100%;aspect-ratio:9/19.5;object-fit:contain;border-radius:32px;background:#070f1e; }
.classic-preview-caption { color:#8faad1;font-size:10px;line-height:1.8;text-align:center;margin-top:15px; }
.classic-preview-toggle { display:block;margin:14px auto 0; }
#classicPreviewDraft.hidden,#classicResultVideo.hidden,#classicPreviewToggle.hidden { display:none!important; }
.classic-progress-active { animation:classic-progress 1.5s ease-in-out infinite;opacity:.6; }
@keyframes classic-progress { 50% { opacity:1; } }
@media(max-width:760px) { .classic-formula-grid { grid-template-columns:1fr; }.classic-formula-heading { flex-direction:column;align-items:stretch; }.classic-formula-picker button { flex:1; }.classic-quick-actions button { flex:1; }.classic-formula-card { padding:20px; } }
.studio-intro { display:flex;justify-content:space-between;align-items:center;gap:24px;margin:5px 0 22px; }
.studio-eyebrow { font-size:9px;letter-spacing:2px;color:#84a6d6;margin-bottom:10px;font-weight:700; }
.studio-intro h3 { font-size:27px;font-weight:800;letter-spacing:-1px;color:#f2f6ff; }
.studio-intro p { color:#96adcd;font-size:12px;margin-top:8px;line-height:1.8;max-width:650px; }
.studio-runtime { padding:12px 16px;border:1px solid #284568;border-radius:10px;background:#10223f;display:flex;align-items:center;gap:10px;color:#bfdaff;font-size:11px; }
.studio-runtime > span:last-child { margin-left:auto;color:#8ba4c8;font-size:10px; }
.studio-dot { display:inline-block;width:6px;height:6px;border-radius:50%;background:#77aef9;flex-shrink:0; }
#creativeStatus { font-size:12px;color:#b8d4fb;line-height:1.7;min-height:30px;padding:8px 0; }
#creativeStatus.is-error { color:#efbd89; }
.studio-layout { display:grid;grid-template-columns:minmax(0,1fr) minmax(235px,310px);gap:28px;align-items:start; }
.studio-workspace { min-width:0; }
.studio-toolbar { display:flex;gap:9px;align-items:end;margin-bottom:20px; }
.studio-toolbar label { flex:1; }
.studio-toolbar button { margin-bottom:1px;white-space:nowrap; }
.studio-tabs { display:flex;gap:4px;margin-bottom:18px;padding:5px;background:#0d1930;border:1px solid #253a5b;border-radius:10px; }
.studio-tabs button { flex:1;padding:10px 6px;border:0;background:transparent;color:#859fc3;font-size:11px; }
.studio-tabs button[aria-selected=true] { background:#213f69;color:#d7e7ff;border-radius:7px; }
.studio-panel { background:#111f38;border:1px solid #283e60;border-radius:15px;padding:23px;margin-bottom:18px; }
.studio-panel h4 { font-size:15px;color:#e6eeff;font-weight:700;margin-bottom:10px; }
.studio-help { color:#8da6c8;font-size:11px;line-height:1.9;margin:8px 0 18px; }
.studio-form-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:14px 0; }
.studio-wide { grid-column:1/-1; }
#realCreativeStudio label,#creativeConfig label { display:block;font-size:10px;font-weight:600;line-height:1.7;color:#a7bcda; }
#realCreativeStudio input:not([type=checkbox]),#realCreativeStudio select,#realCreativeStudio textarea,#creativeConfig input { display:block;width:100%;margin-top:6px;min-width:0; }
#realCreativeStudio input[type=file] { font-size:10px!important;padding:9px!important; }
#realCreativeStudio button,#view-configuracion button,#view-formulas button,.studio-gallery-card button { padding:9px 13px;border:1px solid #355177;border-radius:8px;background:#1b3152;color:#c7dcf9;font-size:11px;font-weight:600; }
.studio-primary,#realCreativeStudio button.studio-primary,#view-configuracion button.studio-primary,#view-formulas button.studio-primary { display:inline-flex;justify-content:center;align-items:center;background:#eda96a;color:#211d19;border:1px solid #ecb17d;border-radius:8px;font-size:11px;font-weight:800;padding:11px 16px;text-decoration:none; }
.studio-primary:hover { background:#f4bd8c!important; }
.studio-full { width:100%; }
.studio-checks { display:flex;flex-wrap:wrap;gap:12px 20px;margin:20px 0; }
#realCreativeStudio .studio-checks label { display:flex;align-items:center;gap:7px; }
.studio-checks input { accent-color:#6eabff; }
.studio-capacity { font-size:10px;color:#91afd6;line-height:1.8;padding:12px 0;border-top:1px solid #294160; }
.studio-preview-column { position:sticky;top:110px; }
.studio-section-title { display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px;font-size:9px;letter-spacing:1.2px;color:#8ca7cc; }
.studio-handset { width:min(100%,calc((100dvh - 245px) * .46));min-width:210px;max-width:310px;margin:0 auto;border:4px solid #3b4e69;border-radius:37px;padding:5px;background:#040912;box-shadow:0 16px 38px #03091444;overflow:hidden;aspect-ratio:9/19.5; }
.studio-handset > video { width:100%;height:100%;object-fit:contain;background:#060c18;border-radius:27px; }
#creativePreviewEmpty { height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:25px 20px;border-radius:27px;background:#0b1425;color:#a0b8d9; }
#creativePreviewEmpty strong { font-size:14px;color:#e0ebfa; }
#creativePreviewEmpty p { font-size:10px;line-height:1.8;margin:10px 0 28px; }
#creativePreviewEmpty > span { font-size:8px;letter-spacing:1px; }
.preview-monogram { width:43px;height:43px;display:grid;place-items:center;background:#1c3a66;border:1px solid #416ba1;color:#bbd9ff;border-radius:13px;margin-bottom:20px;font-weight:800;font-size:23px; }
.studio-preview-caption { margin:18px auto 0;max-width:270px; }
.studio-preview-caption strong { color:#c4d8f5;font-size:11px; }
.studio-preview-caption p { font-size:9px;line-height:1.9;color:#7f9cc2;margin-top:9px; }
.studio-engine { display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap; }
.studio-engine h4 { margin-bottom:4px; }
.studio-engine p { font-size:10px;color:#90a9cc; }
.studio-chip { display:inline-block;font-size:9px;font-weight:600;color:#b6d4fc;background:#1c385f;border:1px solid #35557f;border-radius:5px;padding:4px 7px; }
.studio-provider { width:100%;display:flex;justify-content:space-between;gap:12px;padding-top:12px;border-top:1px solid #293f60;color:#91a8c9;font-size:10px; }
.studio-provider.locked { color:#bdab98; }
.studio-actions { display:flex;flex-wrap:wrap;gap:8px;margin:12px 0;align-items:center; }
.studio-empty { padding:30px 15px;text-align:center;font-size:12px;color:#8da6c7;line-height:1.9; }
.studio-bank-row { border-top:1px solid #2a4163;padding:18px 0; }
.studio-bank-row strong { font-size:12px;color:#d6e3f7; }
.studio-bank-row span { display:block;color:#89a6cf;font-size:9px;margin-top:5px; }
.studio-bank-row p { font-size:11px;color:#a3b8d6;line-height:1.9;margin-top:10px;white-space:pre-wrap; }
.studio-media-row { display:flex;gap:10px;align-items:center;padding:12px 0;border-top:1px solid #263d60;font-size:10px; }
.studio-media-row a { min-width:0;overflow:hidden;text-overflow:ellipsis;color:#bad4f9; }
.studio-media-row small { margin-left:auto;color:#86a0c2;white-space:nowrap; }
#realCreativeStudio .studio-task-row { display:flex;width:100%;align-items:center;justify-content:space-between;text-align:left;margin-bottom:9px;background:#102039; }
.studio-task-row small { display:block;font-size:9px;color:#8da7cc;margin-top:5px; }
#creativeLog { margin-top:18px;background:#091326;color:#9fb9df;border:1px solid #294465;border-radius:9px;font-size:10px;line-height:1.8;white-space:pre-wrap;overflow-wrap:anywhere;max-height:370px;overflow:auto;padding:16px; }
.studio-gallery-card { background:#111f38;border:1px solid #293f61;border-radius:14px;overflow:hidden; }
.studio-gallery-card video { width:100%;aspect-ratio:9/16;max-height:430px;background:#060d19;object-fit:contain; }
.studio-gallery-card > div { padding:16px; }
.studio-gallery-card h4 { font-size:13px;margin:12px 0;color:#d7e7ff; }
.studio-recent { display:flex;align-items:center;gap:12px;padding:18px 0;border-bottom:1px solid #29405e;font-size:11px; }
.studio-recent a { margin-left:auto;color:#99c2fc; }
#creativeProfileForm { scroll-margin-top:110px; }
@media(min-width:1600px) { .studio-layout { grid-template-columns:minmax(0,1fr) 360px; } .studio-handset { max-width:350px; } }
@media(max-width:1100px) { .studio-layout { grid-template-columns:minmax(0,1fr); } .studio-preview-column { position:static;max-width:350px;width:100%;margin:0 auto; } .studio-handset { width:280px;max-width:100%; } }
@media(max-width:639px) { .studio-intro { flex-direction:column;align-items:flex-start; } .studio-form-grid { grid-template-columns:minmax(0,1fr); } .studio-toolbar { flex-wrap:wrap; } .studio-toolbar label { flex-basis:100%; } .studio-tabs button { font-size:9px;padding:10px 3px!important; } .studio-panel { padding:17px; } .studio-runtime { align-items:flex-start;flex-wrap:wrap; } .studio-runtime > span:last-child { margin-left:16px; } }

/* Account entrance: independent of utility CDN styles and workspace form rules. */
#flowStudio { margin:20px 0 28px;max-width:1100px; }
#flowStudio.hidden { display:none; }
.flow-studio-heading,.flow-connection { display:flex;justify-content:space-between;gap:24px;align-items:flex-start; }
.flow-studio-heading h3 { margin:12px 0;font-size:24px; }
.flow-studio-heading p,.flow-connection p { max-width:690px;color:#9eb5d4;font-size:12px;line-height:1.8; }
.flow-connection { padding:20px 0;margin:18px 0;border-top:1px solid #2b4365;border-bottom:1px solid #2b4365; }
.flow-connection strong { color:#c6ddfc;font-size:12px; }
.flow-instructions { color:#b6cae5;font-size:12px;line-height:1.9;margin-bottom:22px; }
.flow-instructions ol { margin:14px 0;padding-left:22px;list-style:decimal; }
.flow-scenes { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin:22px 0; }
.flow-scene { min-width:0;border:1px solid #304b70;border-radius:12px;padding:20px; }
.flow-scene[hidden] { display:none!important; }
.flow-scene legend { color:#ebf3ff;font-size:14px;font-weight:700;padding:0 9px; }
.flow-scene legend span { color:#85b3ef;font-size:10px;margin-right:8px; }
.flow-scene label { display:grid;gap:9px;font-size:11px;color:#b9cde8;margin:10px 0 18px; }
.flow-scene textarea { width:100%;resize:vertical; }
.flow-duration-summary { align-self:center;color:#91baf1;font-size:12px;line-height:1.8; }
#flowMessage { min-height:22px;margin:20px 0;color:#acc8ee;font-size:12px;line-height:1.8; }
#flowStudio .is-error { color:#f0b793; }
.flow-job { padding:22px 0;border-top:1px solid #2a4264; }
.flow-job header { display:flex;align-items:center;gap:16px;justify-content:space-between; }
.flow-job > p { color:#a3bad9;font-size:12px;line-height:1.8;margin:12px 0; }
.flow-results { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px; }
.flow-results video { display:block;width:100%;aspect-ratio:9/16;background:#0a1325;border-radius:9px; }
.flow-results span,.flow-results a { display:block;color:#afc9ec;font-size:11px;line-height:1.8;margin-top:8px; }
.flow-results a { color:#86b7ff;text-decoration:underline; }
.flow-cut-preview { display:block;width:180px;max-width:100%;margin-top:18px;aspect-ratio:9/16;border-radius:10px;background:#0a1325; }
@media(max-width:760px) { .flow-studio-heading,.flow-connection { flex-direction:column;gap:14px; }.flow-scenes { grid-template-columns:minmax(0,1fr); }.flow-results { grid-template-columns:repeat(2,minmax(0,1fr)); } }
#loginScreen { position:fixed;inset:0;z-index:100;overflow-y:auto;background:#0b1425; }
#loginScreen.hidden { display:none!important; }
#loginScreen * { box-sizing:border-box; }
#loginScreen .login-layout { display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:100dvh; }
#loginScreen .login-brand-panel { position:relative;display:flex;align-items:center;padding:64px clamp(36px,5.4vw,104px) 92px;background:linear-gradient(145deg,#142e57 0%,#0e213e 62%,#0c1c34 100%);border-right:1px solid #2a4061; }
#loginScreen .login-brand-content { width:100%;max-width:580px;margin:0 auto; }
#loginScreen .login-hero-logo { width:100%;max-width:560px;margin:0 0 36px; }
#loginScreen .login-eyebrow { margin:0 0 16px;font-size:10px;line-height:1.5;letter-spacing:2.2px;font-weight:800;color:#9cc1f4; }
#loginScreen h2 { margin:0;color:#f3f7ff;font-size:clamp(32px,3vw,48px);line-height:1.18;letter-spacing:-1.6px;font-weight:800; }
#loginScreen .login-description { margin:22px 0 0;max-width:480px;font-size:14px;line-height:1.9;color:#b5c7e0; }
#loginScreen .login-workflow { display:grid;gap:19px;padding:0;margin:30px 0 0;list-style:none; }
#loginScreen .login-workflow li { display:flex;gap:17px;align-items:flex-start; }
#loginScreen .login-workflow li > span { padding-top:2px;color:#7fa9df;font-family:'JetBrains Mono',monospace;font-size:11px;line-height:1.8; }
#loginScreen .login-workflow strong { color:#e3edfc;font-size:12px;line-height:1.7;font-weight:700; }
#loginScreen .login-workflow p { margin:2px 0 0;color:#91a9cc;font-size:11px;line-height:1.7; }
#loginScreen .login-brand-footer { position:absolute;bottom:27px;left:clamp(36px,5.4vw,104px);right:30px;display:flex;gap:18px;align-items:center;margin:0;color:#a8bddb;font-size:10px;font-weight:600; }
#loginScreen .login-brand-footer span { color:#718caf;font-weight:400; }
#loginScreen .login-access-panel { position:relative;display:flex;align-items:center;justify-content:center;padding:80px clamp(32px,5vw,96px);background:#0b1425; }
#loginScreen .login-access-content { width:100%;max-width:420px; }
#loginScreen .login-access-kicker { display:inline-flex;align-items:center;gap:9px;font-size:9px;letter-spacing:1.6px;font-weight:700;color:#93a9c9; }
#loginScreen .login-access-kicker > span { display:block;width:6px;height:6px;border-radius:50%;background:#75a9ed; }
#loginScreen h1 { margin:23px 0 12px;color:#f4f7ff;font-size:clamp(28px,2.6vw,38px);line-height:1.2;letter-spacing:-1.2px;font-weight:800; }
#loginScreen .login-intro { margin:0;color:#9bb0cf;font-size:13px;line-height:1.8; }
#loginForm { display:grid;gap:24px;margin:36px 0 0;width:100%; }
#loginScreen .login-field { display:grid;gap:10px;min-width:0; }
#loginScreen .login-field > label { display:block;margin:0;color:#dce7f8;font-size:12px;font-weight:600;line-height:1.5;outline:none; }
#loginScreen input { display:block;width:100%;min-width:0;min-height:56px;border:1.5px solid #506989!important;border-radius:10px!important;background:#111f35!important;padding:15px 17px!important;color:#f1f6ff!important;font-family:inherit;font-size:14px!important;line-height:1.5;transition:border-color .18s,background-color .18s;box-shadow:0 2px 2px #050c181a; }
#loginScreen input::placeholder { color:#8196b6;opacity:1; }
#loginScreen input:hover { border-color:#7392b9!important; }
#loginScreen input:focus { border-color:#8cbaff!important;background:#142642!important; }
#loginScreen input:focus-visible { outline:3px solid #78a9f147!important;outline-offset:2px; }
#loginScreen input[aria-invalid=true] { border-color:#dc9c73!important; }
#loginScreen input:-webkit-autofill { -webkit-text-fill-color:#f1f6ff!important;box-shadow:0 0 0 1000px #111f35 inset;caret-color:#f1f6ff; }
#loginScreen .login-password-field { position:relative; }
#loginScreen #loginPassword { padding-right:92px!important; }
#loginScreen .login-password-toggle { position:absolute;top:6px;right:6px;bottom:6px;min-width:72px;padding:8px;border:0;border-radius:6px;background:transparent;color:#a8c8f4;font-family:inherit;font-size:11px;font-weight:700;cursor:pointer; }
#loginScreen .login-password-toggle:hover { background:#253d60;color:#edf5ff; }
#loginScreen #loginStatus { min-height:20px;margin:-6px 0 -10px;color:#f0b793;font-size:12px;line-height:1.7; }
#loginScreen #loginStatus[data-state=loading] { color:#a6bfe1; }
#loginScreen .login-submit { display:flex;align-items:center;justify-content:center;gap:14px;width:100%;min-height:56px;padding:16px 20px;border:1px solid #6392d8;border-radius:10px;background:#3476d7;color:#fff;font-family:inherit;font-size:13px;font-weight:800;cursor:pointer;transition:background .18s,transform .18s; }
#loginScreen .login-submit:hover { background:#4386e5; }
#loginScreen .login-submit:active { transform:translateY(1px); }
#loginScreen .login-submit:disabled { cursor:wait;opacity:.65; }
#loginScreen .login-help { margin:26px 0 0;color:#7e94b5;font-size:11px;line-height:1.9; }
#loginScreen .login-access-footer { position:absolute;bottom:27px;left:24px;right:24px;margin:0;text-align:center;color:#617b9f;font-size:10px; }
@media(min-width:901px) and (max-height:800px) {
  #loginScreen .login-brand-panel { padding-top:38px;padding-bottom:64px; }
  #loginScreen .login-hero-logo { max-width:430px;margin-bottom:24px; }
  #loginScreen h2 { font-size:34px; }
  #loginScreen .login-description { margin-top:16px; }
  #loginScreen .login-workflow { margin-top:22px;gap:12px; }
}
@media(max-width:900px) {
  #loginScreen .login-layout { grid-template-columns:minmax(0,1fr); }
  #loginScreen .login-brand-panel { padding:32px 28px;border-right:0;border-bottom:1px solid #2a4061; }
  #loginScreen .login-brand-content { max-width:460px; }
  #loginScreen .login-hero-logo { max-width:250px;margin:0 0 24px; }
  #loginScreen .login-eyebrow { font-size:9px;margin-bottom:10px; }
  #loginScreen h2 { font-size:28px;letter-spacing:-.8px; }
  #loginScreen h2 br { display:none; }
  #loginScreen h2 br::after { content:' '; }
  #loginScreen .login-description { font-size:12px;line-height:1.8;margin-top:14px; }
  #loginScreen .login-workflow,#loginScreen .login-brand-footer { display:none; }
  #loginScreen .login-access-panel { padding:40px 28px 68px; }
  #loginScreen .login-access-content { max-width:460px; }
  #loginScreen h1 { font-size:30px;margin-top:18px; }
  #loginScreen #loginForm { margin-top:28px;gap:22px; }
  #loginScreen .login-access-footer { bottom:22px; }
}