/* StrobFX visual identity. Layout, icons and colors; no external fonts or assets. */
:root{--bg:#060e13;--panel:#0b151c;--line:#203441;--muted:#9fb8c9;--ink:#f2f7fb;--accent:#3dcfff;--accent-dark:#082737;--radius:12px;font-family:"Segoe UI",Inter,Arial,sans-serif}
body{background:radial-gradient(ellipse at 64% 0,#09233370,transparent 58%),var(--bg);min-height:100vh}
button,input,select,textarea{font-size:.9rem}
button,a,input,select,textarea{transition:background-color .16s,border-color .16s,box-shadow .16s,color .16s}
input,select,textarea{background:#0b171f;border-color:#243c4b;border-radius:8px;color:var(--ink)}
input:hover,select:hover,textarea:hover{border-color:#3c6177}
input:focus,select:focus,textarea:focus{border-color:var(--accent)}
input::placeholder,textarea::placeholder{color:#90aabd}
label{font-size:.875rem;font-weight:550}
h1{font-size:1.55rem;font-weight:600;letter-spacing:-.035em}h2{font-weight:600}
.eyebrow{color:#80a0b6;letter-spacing:.13em;font-size:.65rem}
.icon{width:21px;height:21px;flex:none;vertical-align:middle;display:inline-block}
.icon-slot{display:inline-flex;align-items:center;justify-content:center;flex:none}
.icon-slot:empty{width:21px;height:21px}
.brand-logo{display:block;width:190px;height:auto;max-width:100%;mix-blend-mode:screen}
.wordmark{display:block;flex:none;line-height:0}
.wordmark{position:relative;perspective:650px;mix-blend-mode:screen}
.brand-logo{transform:rotateX(var(--brand-rx,0deg)) rotateY(var(--brand-ry,0deg));filter:brightness(var(--brand-light,1));transition:transform .36s ease-out,filter .36s ease-out;transform-origin:center}
.brand-tracking .brand-logo{transition:transform .12s ease-out,filter .16s ease-out}
.topbar{min-height:76px;height:76px;padding:0 2.5vw;gap:35px;background:#070f16e8;border-bottom:1px solid #1b3341;box-shadow:0 4px 30px #0002}
.topbar nav{gap:25px}.nav-item{display:flex;align-items:center;gap:8px;color:#b1c4d1;border-bottom-width:3px;font-weight:550;font-size:.875rem;white-space:nowrap;position:relative}
.nav-item>.icon-slot .icon{width:18px;height:18px;color:#829ead}.nav-item.active{color:#e8faff;background:radial-gradient(ellipse at bottom,#0875aa35,transparent 75%);border-bottom-color:#28d4ff}.nav-item.active .icon{color:#48d5ff}
.nav-item:hover{color:#fff}.nav-item.active:after{content:"";height:8px;position:absolute;bottom:-4px;left:15%;right:15%;background:#0bd3ff60;filter:blur(8px)}
.account{gap:17px;min-width:0}.private-badge{display:flex;align-items:center;gap:8px;padding:10px 12px;background:#0d1b24;color:#c3d4df;border:1px solid #203644;font-size:.76rem;white-space:nowrap}.private-badge .icon{width:18px;height:18px}
.account-identity{display:flex;align-items:center;gap:9px;min-width:0}.account-avatar{height:33px;width:33px;display:grid;place-items:center;background:linear-gradient(145deg,#123b51,#091720);border:1px solid #35627c;border-radius:50%;color:#92e1ff;font-size:.7rem;font-weight:650;flex:none}.account-identity>span:last-child{max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.84rem}
.icon-button{display:grid;place-items:center;width:34px;height:38px;padding:0;border-radius:7px}.icon-button:hover{background:#173344}.icon-button .icon{width:18px}
.workspace{max-width:1660px;padding:25px 3vw 0}.page-heading{margin-bottom:22px;align-items:center}.page-heading h1{margin-top:5px}.usage{gap:6px;font-size:.8rem;min-width:260px}.usage small{font-size:.65rem;color:#8ca9bc}
#quota-progress{appearance:none;display:block;width:100%;height:6px;border:0;border-radius:20px;overflow:hidden;background:#203440;color:#14c8fa}
#quota-progress::-webkit-progress-bar{background:#203440;border-radius:20px}#quota-progress::-webkit-progress-value{background:linear-gradient(90deg,#007fb8,#22d4ff);border-radius:20px}#quota-progress::-moz-progress-bar{background:linear-gradient(90deg,#007fb8,#22d4ff);border-radius:20px}
.studio-grid{grid-template-columns:minmax(320px,425px) minmax(0,1fr);gap:24px}
.composer{padding:18px 20px;background:linear-gradient(150deg,#0b171fd9,#081219f2);border:1px solid #1a3444;box-shadow:0 10px 28px #0002}
.composer-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;gap:12px;padding-bottom:16px;border-bottom:1px solid #17303f}
.creation-mode{display:flex;align-items:center;justify-content:center;gap:10px;background:linear-gradient(180deg,#07426970,#05273c70);border:1px solid #068ed0;border-radius:9px;padding:11px 20px;box-shadow:inset 0 0 18px #009fff13,0 0 12px #00aaff10;font-size:.875rem;font-weight:600;color:#e6f8ff;min-width:128px}
.creation-mode .icon{color:#c3edff}.composer-caption{font-size:.56rem;letter-spacing:.14em;color:#728fa2}
.model-picker{gap:10px;border:0;padding:0;margin:0 0 13px;align-items:end}.model-symbol{width:45px;height:46px;background:#0d1d27;border:1px solid #264453;border-radius:9px;color:#eafaff}.model-symbol .icon{width:26px;height:26px}.model-control select{font-size:1rem;font-weight:550;margin-top:7px}
.advanced{margin:16px 0 20px;font-size:.81rem}.advanced summary{margin:0}.advanced[open] summary{margin-bottom:12px}.advanced select{margin-top:7px}
.field-heading{margin:19px 0 9px}.field-heading>label,.field-heading>span:first-child{display:flex;align-items:center;gap:10px;font-size:.875rem;font-weight:550}.field-heading .icon{color:#e0edf4;width:20px;height:20px}
.prompt-box{border-color:#243c4b;background:#0a171f;border-radius:9px}.prompt-box:focus-within{box-shadow:0 0 0 3px #00c2ff0c}.prompt-editor{min-height:138px;padding:12px 13px;font-size:.875rem;line-height:1.65}.prompt-editor.empty:before{color:#9fbdd0}.prompt-footer{font-size:.68rem;color:#90afc3;padding:0 12px 10px;flex-direction:row}.prompt-tip{font-size:.68rem;line-height:1.5;color:#819caf;margin-top:8px}
.prompt-mention{color:#a6ecff;background:#074664;border:1px solid #247596;padding:1px 4px;border-radius:5px}.mention-menu{background:#0c2331;border-color:#2b5d78}.mention-option[aria-selected="true"],.mention-option:hover{background:#164462}
.settings-grid{gap:14px;grid-template-columns:1fr 1fr}.settings-grid label{display:flex;align-items:center;gap:6px;font-size:.8rem;margin-bottom:7px}.settings-grid label .icon{width:15px;height:15px}.settings-grid select{font-size:.92rem;font-weight:550}
.duration-row{border:0;padding:16px 0 7px}.duration-row label{display:flex;align-items:center;gap:10px}.duration-row .icon{width:20px;height:20px}.duration-input input{width:72px;min-height:36px;text-align:center}.duration-input span{font-size:.8rem;color:#b5cbd9}
.toggle-row{padding:13px 0 7px}.toggle-row label{display:flex;align-items:center;gap:10px}.toggle-row small{font-size:.7rem;color:#9ab5c7}.toggle-row input{width:40px;height:23px;background:#243846;border-color:#39515f}.toggle-row input:before{height:17px;width:17px;top:2px;left:2px;background:#becdd6}.toggle-row input:checked{background:#00b9f1;border-color:#27d4ff;box-shadow:0 0 12px #00aaff28}.toggle-row input:checked:before{background:white;left:19px}
.primary{background:linear-gradient(180deg,#075584,#063552);color:#ecfaff;border:1px solid #21c7ff;border-radius:9px;box-shadow:inset 0 0 18px #139bd633,0 0 15px #00bbff20;min-height:52px;font-size:.95rem;font-weight:600;gap:12px}
.primary:hover:not(:disabled){background:linear-gradient(180deg,#08689d,#07476a);border-color:#a1eeff;box-shadow:inset 0 0 15px #34d2ff20,0 0 20px #00baff35}.primary:active:not(:disabled){background:#074768}.primary:disabled{box-shadow:none;border-color:#376078;color:#9aafbd;opacity:.6}
.generate-button{min-height:55px;margin-top:20px;border-width:2px;box-shadow:inset 0 0 20px #10b5ed29,0 0 18px #08bbff25}.generate-copy{display:flex;align-items:center;gap:11px}.generate-copy>.icon-slot .icon{width:25px;height:25px}.generate-button .icon{width:23px;height:23px}.cost-note{font-size:.7rem;color:#9bb9cd;margin-top:10px;line-height:1.65}
.secondary{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:linear-gradient(180deg,#122632,#0d1b24);border-color:#2a4556;border-radius:8px;color:#e3edf4;font-size:.82rem;min-height:40px}.secondary:hover:not(:disabled){background:#17384b;border-color:#42778f}.secondary .icon{width:18px;height:18px}.text-button{display:inline-flex;gap:7px;align-items:center;font-size:.8rem}.text-button .icon{width:16px;height:16px}
.monitor-card{background:#0a171e;border:1px solid #1c3645;border-radius:12px;padding:14px 14px 0;box-shadow:0 12px 30px #0002}.output-heading{margin:0 1px 12px;gap:18px;flex-direction:row;align-items:center}.output-heading h2{font-size:.95rem}.output-heading .small{font-size:.72rem;text-align:right;line-height:1.5}.preview{background:radial-gradient(ellipse at center,#102c3d55,transparent 66%),#050d13;border:1px solid #19313f;border-radius:8px;aspect-ratio:16/9;min-height:270px}.preview video{background:#02080c;max-height:720px}.monitor-footer{border:0;background:none;padding:13px 5px;font-size:.64rem;color:#87a9bd;letter-spacing:.045em}.monitor-footer>span:first-child{display:flex;align-items:center;gap:7px}.monitor-footer>span:first-child:before{content:"";width:5px;height:5px;background:#3acffc;border-radius:50%;box-shadow:0 0 8px #33cbff60}
.empty-preview{padding:40px 20px}.frame-icon{width:74px;height:64px;background:linear-gradient(140deg,#0c3149,#06131e);border:1px solid #1f5c7c;border-radius:16px;box-shadow:0 0 35px #007bb519;margin-bottom:24px}.frame-icon .icon{width:36px;height:36px;stroke-width:1.3;color:#81e1ff}.preview-kicker{display:block;font-size:.57rem;letter-spacing:.18em;color:#5e91ae;margin-bottom:13px}.empty-preview h3{font-size:clamp(1rem,1.4vw,1.35rem);font-weight:500;color:#cce4f2;letter-spacing:-.025em}.empty-preview p{color:#81a1b7;font-size:.8rem;line-height:1.7}.empty-preview>.icon{color:var(--accent);width:36px;height:36px;margin-bottom:20px}
.result-info{padding:16px 4px 20px}.result-info p{color:#aec8d8;font-size:.85rem;line-height:1.7}.metadata{color:#8fadc0;font-size:.75rem}.recent-heading{margin:27px 0 12px}.recent-heading h2{font-size:.88rem}.recent-heading h2>span{color:#779bb0;font-weight:400}.empty-history{background:#0a171d60;border-color:#203847;padding:21px;gap:16px}.empty-history-icon .icon{width:29px;height:29px;color:#50839e}.empty-history strong{color:#bed3df}.empty-history p{color:#7e9fb4;font-size:.76rem}
.job-row,.history-card{background:#0b1a23;border-color:#203b4b}.job-row:hover,.history-card:hover{background:#102633;border-color:#397a9d}.job-copy strong{color:#e0edf5}.job-copy span{color:#84a6bc}.status{font-size:.65rem;background:#06364a;padding:4px 7px;border-radius:5px;color:#80dcff}.status.failed,.status.unknown,.status.unavailable{background:#3b2621;color:#ffc49e}.status.cancelled{background:#22313b;color:#adbdc9}
.dropzone{background:#0a1d2850;border-color:#2b5269}.dropzone:hover,.dropzone.dragging{background:#0a3144;border-color:#4bd6ff}.dropzone .upload-plus{margin-bottom:5px}.reference-card img{border-color:#2d576e}.reference-card span{color:#95c9e4}.banner{background:#0c2432;border-color:#27536b;align-items:flex-start;line-height:1.5}.banner strong{color:#c2eaff}.banner span{color:#9bbacf}.error{background:#301d20;border-color:#683844}
.consumption-card,.pack-card,.pack-editor,.activation-card{background:linear-gradient(145deg,#0e1f2a,#0a151d);border-color:#22404f;box-shadow:0 6px 22px #0001}.consumption-cost{color:#67ddff}.consumption-table th{background:#102734;color:#9bc5db}.consumption-table td{border-color:#203c4a}.consumption-table-wrap{border-color:#254555}.consumption-metric{border-color:#213c4a}.user-status strong{color:#d8f1ff}.danger-button{color:#ffbdad;border-color:#65403c}.danger-button:hover:not(:disabled){background:#342426;border-color:#ab6959}
.login-screen{background:radial-gradient(ellipse at 25% 42%,#053c5d45,transparent 54%);padding:25px 5vw}.login-brand .brand-logo{width:255px}.login-brand>.eyebrow{border:1px solid #284453;border-radius:7px;padding:10px 14px;color:#98bccc;font-size:.65rem}.login-main{max-width:1160px;grid-template-columns:minmax(0,1fr) 420px;gap:80px;margin:65px auto}.login-intro h1{font-size:clamp(3rem,5.5vw,5.3rem);line-height:1.08;font-weight:600;letter-spacing:-.055em;margin:23px 0}.login-intro h1 span{color:#64d9ff}.login-intro>p{color:#93b0c3;font-size:1rem;line-height:1.8}.model-label{display:inline-flex;align-items:center;gap:9px;border-color:#1d4258;color:#a8e8ff;margin-top:40px;font-size:.65rem;padding-top:20px}.model-label .icon{width:18px;height:18px}.model-label span:last-child{font-size:.6rem;letter-spacing:.08em;margin-left:10px;color:#7496ab}
.login-card{background:linear-gradient(145deg,#102330,#09151f);border-color:#24485f;box-shadow:0 18px 80px #0005,0 0 40px #007dba08;padding:32px;border-radius:16px}.lock-icon{display:grid;place-items:center;width:44px;height:44px;border:1px solid #276180;background:#08314a;border-radius:11px;margin-bottom:23px}.lock-icon .icon{width:22px;height:22px;color:#9de7ff}.login-card h2{font-weight:600}.login-card label{color:#c0d4e1;font-size:.8rem}.login-card input{background:#07151f}.login-card .primary{margin-top:28px}.login-footer{border-color:#183644}.login-footer a,.studio-footer a{display:inline-flex;align-items:center;gap:8px}.login-footer .icon,.studio-footer .icon{width:13px;height:13px}
.activation-shell{max-width:680px}.activation-shell>.wordmark{width:250px;margin:0 auto}.activation-card{border-radius:16px;padding:32px}.activation-card h1{font-weight:600}.recovery-codes{background:#071720;border-color:#244755;color:#c9ecff}.studio-footer{border-color:#1a3443;color:#7497af;font-size:.7rem}
#notice{background:#0e2d40;border-color:#33738e;color:#e4f6ff;box-shadow:0 10px 35px #0007}
@media(min-width:1400px){.studio-grid{gap:24px}.preview{min-height:360px}}
@media(max-width:1250px){.topbar{gap:23px;padding:0 24px}.topbar nav{gap:17px}.brand-logo{width:160px}.private-badge{display:none}.account{gap:10px}.account-identity>span:last-child{max-width:95px}.studio-grid{grid-template-columns:minmax(300px,370px) minmax(0,1fr);gap:20px}.workspace{padding:24px 25px 0}.composer{padding:17px}.composer-caption{font-size:.5rem}.nav-item>.icon-slot{display:none}}
@media(max-width:1000px){.topbar{gap:19px}.topbar nav{gap:15px}.nav-item{font-size:.8rem}.account-identity>span:last-child{display:none}.brand-logo{width:155px}.preview{min-height:300px}.output-heading{align-items:flex-start;flex-direction:column;gap:5px}.output-heading .small{text-align:left}.login-main{gap:35px;grid-template-columns:minmax(0,1fr) 370px}.login-intro h1{font-size:3.5rem}.login-card{padding:26px}.composer-caption{display:none}}
@media(max-width:760px){.topbar{height:auto;min-height:106px;row-gap:4px;padding:7px 18px 0;flex-wrap:wrap;column-gap:15px}.brand-logo{width:156px}.topbar .wordmark{order:1}.topbar .account{order:2;margin-left:auto}.account-identity>span:last-child{display:block;max-width:115px;font-size:.76rem}.account-avatar{width:29px;height:29px;font-size:.6rem}.topbar nav{order:3;display:flex;width:100%;height:42px;gap:16px;overflow-x:auto;justify-content:space-between}.nav-item{font-size:.76rem;flex:none;padding:0 1px;gap:4px}.nav-item.active:after{display:none}.workspace{padding:19px 16px 0}.page-heading{flex-direction:row;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:19px}.page-heading h1{font-size:1.4rem}.page-heading .eyebrow{font-size:.58rem}.usage{min-width:0;flex:1;max-width:300px;text-align:right;font-size:.73rem}.usage small{font-size:.57rem;max-width:200px;margin-left:auto}.studio-grid{grid-template-columns:minmax(0,1fr);gap:22px}.composer{padding:18px}.composer-caption{display:block;font-size:.57rem}.composer-heading{margin-bottom:18px}.output-panel{margin:0}.preview{min-height:220px}.output-heading{flex-direction:row;align-items:center}.output-heading .small{font-size:.64rem;text-align:right}.output-heading h2{font-size:.85rem}.empty-preview{padding:28px 12px}.empty-preview h3{font-size:1.08rem}.empty-preview p{font-size:.76rem}.frame-icon{width:56px;height:49px;margin-bottom:16px;border-radius:12px}.frame-icon .icon{width:29px;height:29px}.preview-kicker{font-size:.5rem}.monitor-card{padding:12px 10px 0}.monitor-footer{font-size:.58rem;padding:12px 2px}.prompt-footer{flex-direction:row;gap:8px}.settings-grid{grid-template-columns:1fr 1fr}.login-screen{padding:20px}.login-brand .brand-logo{width:200px}.login-main{grid-template-columns:minmax(0,1fr);max-width:440px;margin:35px auto;gap:28px}.login-intro h1{font-size:2.8rem;margin:12px 0}.login-intro>p{display:block;font-size:.87rem}.model-label{display:none}.login-card{padding:25px}.login-footer{font-size:.67rem}.activation-shell{padding:0 16px;margin-top:20px}.activation-shell>.wordmark{width:210px}.activation-card{padding:24px 20px;margin-top:20px}.consumption-card,.pack-card,.pack-editor{padding:20px}.quota-controls{flex-wrap:wrap}}
@media(max-width:410px){.brand-logo{width:144px}.account-identity>span:last-child{max-width:90px}.topbar{padding-left:14px;padding-right:14px}.topbar nav{gap:10px}.nav-item{font-size:.71rem}.usage{max-width:none;flex-basis:100%;text-align:left;margin-top:0}.usage small{margin:0;max-width:none}.page-heading{gap:12px}.page-heading h1{font-size:1.35rem}.output-heading{flex-direction:column;align-items:flex-start}.output-heading .small{text-align:left}.composer{padding:16px}.composer-caption{font-size:.5rem}.creation-mode{padding:10px 16px;min-width:118px}.settings-grid{gap:12px}.cost-note{font-size:.66rem}.login-intro h1{font-size:2.5rem}.login-card{padding:22px}.status{white-space:normal}.pagination{gap:10px}.pagination .secondary{font-size:.75rem;padding:10px}.monitor-footer>span:first-child{max-width:65%}}
@media(prefers-reduced-motion:reduce){button,a,input,select,textarea{transition:none}.nav-item.active:after{display:none}.brand-logo{transform:none;filter:none;transition:none}}
@media(hover:none),(pointer:coarse){.brand-logo{transform:none;filter:none;transition:none}}

/* The black pixels stay black; screen blending lights only the neon lettering. */
.wordmark::after{content:"";position:absolute;inset:0;background:url('/static/strobfx-ai-logo.png') center/100% 100% no-repeat;mix-blend-mode:screen;pointer-events:none;opacity:0;filter:blur(5px) brightness(1.35);transform:rotateX(var(--brand-rx,0deg)) rotateY(var(--brand-ry,0deg));transition:opacity .2s,transform .12s ease-out}
.wordmark.brand-tracking::after{opacity:.48}
@media(prefers-reduced-motion:reduce){.wordmark::after{display:none}.brand-logo{transform:none!important}}