@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@500;600;700;800&display=swap');
:root{color-scheme:light;--ink:#17212b;--ink-soft:#52606d;--muted:#7e8993;--line:#e3e8eb;--paper:#f3f5f3;--surface:#fff;--surface-2:#f8faf9;--brand:#d9f36a;--brand-deep:#abc83f;--blue:#8eabff;--danger:#c34e48;--success:#2e815d;--warning:#a96b23;--shadow:0 16px 40px #23333b0e;--radius:18px;--font:"DM Sans","Segoe UI",sans-serif;--display:"Manrope","Segoe UI",sans-serif;--mono:"DM Mono",monospace}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:15px/1.5 var(--font)}button,input,select,textarea{font:inherit}button{cursor:pointer}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #8eabff;outline-offset:2px}::selection{background:#d9f36a;color:#17212b}.hide{display:none!important}.muted{color:var(--muted)}.eyebrow{margin:0 0 7px;color:#86919a;font:500 10px/1.2 var(--mono);letter-spacing:.11em}.tiny{font-size:12px}.btn{border:0;border-radius:10px;min-height:44px;padding:0 17px;display:inline-flex;gap:11px;align-items:center;justify-content:center;font-weight:700;transition:transform .15s,background .15s}.btn:hover{transform:translateY(-1px)}.btn.primary{background:var(--brand);color:#1c271b}.btn.primary:hover{background:#c9e558}.btn.subtle{background:#fff;border:1px solid var(--line);color:var(--ink)}.btn.dark{background:#18252d;color:#f9fbfa}.btn.full{width:100%}.icon-btn{height:40px;min-width:40px;display:inline-grid;place-items:center;border:1px solid var(--line);border-radius:10px;background:#fff;color:#475560;font-size:18px}.icon-btn:hover{background:#f3f6f4}.icon-btn:disabled{opacity:.4;cursor:not-allowed}.icon-btn.danger{color:var(--danger)}input,select,textarea{border:1px solid #dfe5e6;background:white;border-radius:10px;color:var(--ink);padding:11px 13px;min-height:44px;width:100%}textarea{resize:vertical;min-height:155px;line-height:1.65}label{display:block;margin:18px 0 7px;color:#38444d;font-weight:600;font-size:13px}.form-error{min-height:20px;color:#b6423a;font-size:13px}.toast{position:fixed;z-index:100;right:24px;bottom:24px;max-width:min(420px,calc(100vw - 32px));padding:13px 17px;border-radius:11px;background:#17232b;color:white;box-shadow:var(--shadow);opacity:0;transform:translateY(8px);pointer-events:none;transition:.2s}.toast.visible{opacity:1;transform:translateY(0)}.toast.bad{background:#a13834}
/* Sign-in */
.auth-page{min-height:100vh;background:#121d25;display:grid;place-items:center;padding:24px}.auth-wrap{width:min(1040px,100%);min-height:610px;background:#f7f8f5;border-radius:25px;overflow:hidden;display:grid;grid-template-columns:1.05fr .95fr;box-shadow:0 28px 100px #0004}.auth-brand{position:relative;overflow:hidden;background:#15232b;color:#f6f7ef;padding:45px 48px}.auth-brand>img{width:43px;height:43px;margin-bottom:55px}.auth-brand .eyebrow{color:#bbd267}.auth-brand h1{font:800 clamp(40px,5.6vw,67px)/1.04 var(--display);letter-spacing:-.06em;white-space:pre-line;margin:15px 0 17px}.auth-copy{max-width:360px;color:#a9b6b9;font-size:16px}.auth-art{position:absolute;width:460px;height:260px;left:6%;bottom:-24px;border:1px solid #ffffff20;border-radius:50% 50% 0 0/65% 65% 0 0;transform:rotate(-8deg);background:linear-gradient(145deg,#d9f36a18,#8eabff15);box-shadow:inset 0 35px 90px #9fc44c0b}.auth-art:before,.auth-art:after{content:"";position:absolute;border:1px solid #ffffff22;border-radius:50%}.auth-art:before{inset:25px -35px}.auth-art:after{inset:55px -67px}.orb{position:absolute;border-radius:50%;filter:blur(2px)}.orb-a{width:82px;height:82px;background:#d9f36a;left:95px;top:45px;box-shadow:0 0 48px #d9f36a55}.orb-b{width:38px;height:38px;background:#8eabff;right:88px;top:112px}.film-mark{position:absolute;left:47%;top:41%;font:800 91px/.9 var(--display);color:#16242b;text-shadow:0 2px 0 #ffffff55;transform:rotate(8deg)}.art-caption{position:absolute;right:40px;bottom:48px;color:#b1c08d;font:11px var(--mono);letter-spacing:.15em}.auth-card{position:relative;align-self:center;padding:62px clamp(30px,6vw,74px)}.auth-card h2{margin:12px 0 5px;font:800 34px var(--display);letter-spacing:-.04em}.auth-card .muted{margin:0 0 28px}.auth-card label{margin-top:19px}.auth-card input{height:49px}.auth-card button[type=submit]{margin-top:25px}.lang-choice{position:absolute;top:25px;right:30px;display:flex;gap:9px;align-items:center;color:#a0aab0;font:12px var(--mono)}.lang-choice button{border:0;background:transparent;color:#879199;padding:6px}.lang-choice button.chosen{color:#202c34;font-weight:700}.auth-card .tiny{margin-top:26px}
/* Workspace shell */
.shell{min-height:100vh;display:grid;grid-template-columns:240px minmax(0,1fr)}.sidebar{position:sticky;top:0;height:100vh;background:#16232b;color:#dce4e3;padding:24px 15px 17px;display:flex;flex-direction:column}.brand-lockup{display:flex;align-items:center;gap:11px;font:700 17px var(--display);padding:2px 11px 35px}.brand-lockup img{width:34px;height:34px}.brand-lockup b{font-weight:500;color:#b4c0c3}.nav-label{padding:0 12px;color:#849297;font:10px var(--mono);letter-spacing:.12em;margin:0 0 10px}.sidebar nav{display:grid;gap:5px}.nav-item{display:flex;align-items:center;gap:13px;height:44px;border-radius:9px;padding:0 12px;color:#9eaaae;font-size:13px;font-weight:600}.nav-item>span:first-child{width:20px;text-align:center;color:#a8b8bb;font-size:18px}.nav-item:hover,.nav-item.active{background:#ffffff0e;color:#f6f8f5}.nav-item.active{box-shadow:inset 3px 0 var(--brand)}.nav-item.active>span:first-child{color:var(--brand)}.sidebar-bottom{margin-top:auto;display:grid;gap:8px}.nav-item.plain{width:100%;background:transparent;border:0;text-align:left}.plan-card{display:flex;align-items:center;gap:9px;padding:12px 10px;border:1px solid #ffffff17;border-radius:11px;margin-bottom:9px}.plan-card>div{min-width:0;display:grid;gap:3px;flex:1}.plan-card small{font:9px var(--mono);color:#89969a}.plan-card b{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.plan-card>a{color:#d9f36a;font-size:11px}.plan-dot{width:8px;height:8px;align-self:flex-start;margin-top:5px;border-radius:50%;background:#d9f36a;box-shadow:0 0 0 4px #d9f36a1c}.work-area{min-width:0}.topbar{height:70px;display:flex;align-items:center;justify-content:space-between;background:#ffffffb8;border-bottom:1px solid var(--line);padding:0 clamp(20px,4vw,52px);position:sticky;top:0;z-index:5;backdrop-filter:blur(14px)}.crumb{display:flex;align-items:center;gap:10px;font-size:12px;color:#89939a}.crumb i{font-style:normal;color:#b5bec1}.crumb b{color:#34414a}.top-actions{display:flex;align-items:center;gap:15px}.connection{font-size:11px;color:#76827f;display:flex;gap:7px;align-items:center}.connection i,.status-badge i,.live-badge i{width:7px;height:7px;border-radius:50%;background:#55ac7b;display:inline-block;box-shadow:0 0 0 3px #55ac7b20}.avatar{width:36px;height:36px;border-radius:50%;background:#192831;color:#d9f36a;border:0;font-weight:700}.admin-pill{font:10px var(--mono);letter-spacing:.1em;border-radius:5px;background:#e9f2c9;padding:6px 8px;color:#5c6d25}.page-content{max-width:1440px;margin:auto;padding:32px clamp(20px,4vw,52px) 56px}.welcome-row{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:25px}.welcome-row h1{font:800 clamp(26px,3vw,35px)/1.15 var(--display);letter-spacing:-.05em;margin:5px 0 8px}.welcome-row h1 em{font-style:normal;color:#7087ba}.welcome-row .muted{margin:0;font-size:13px}.stats-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px;margin-bottom:20px}.stat-card{position:relative;min-height:132px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:17px 20px;overflow:hidden}.stat-card>span{display:block;color:#6e7a82;font-size:12px;font-weight:600}.stat-card strong{display:block;margin:7px 0 0;font:800 29px/1.1 var(--display);letter-spacing:-.05em}.stat-card small{display:block;margin-top:6px;color:#9aa3a7;font-size:11px}.stat-glyph{position:absolute;right:20px;top:17px;color:#a5bc5a;font-size:24px;opacity:.8}.studio-grid{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(280px,.8fr);gap:16px;margin-bottom:18px}.panel{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}.composer-panel,.browser-panel,.queue-panel,.users-panel{padding:21px}.panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:17px}.panel-head h2{margin:0;font:700 18px var(--display);letter-spacing:-.03em}.panel-head .eyebrow{margin-bottom:4px}.panel-head select{width:auto;min-width:112px}.project-row{display:flex;gap:8px}.project-row select{flex:1}.composer-panel textarea{background:#fbfcfb;min-height:170px}.compose-options{display:flex;align-items:flex-end;justify-content:space-between;gap:15px;margin-top:17px}.compose-options>div:first-child>span{display:block;color:#68747c;font-size:11px;font-weight:600;margin-bottom:8px}.ratio-group{display:flex;gap:5px}.ratio{height:33px;border:1px solid var(--line);background:white;color:#7a858b;border-radius:7px;padding:0 10px;font:11px var(--mono)}.ratio.active{color:#29342c;background:#edf6d5;border-color:#d7e7ad}.hint-chip{display:flex;gap:7px;align-items:center;color:#929c9f;font-size:10px;padding-bottom:5px}.hint-chip span:first-child{border:1px solid #d7dfdf;border-radius:4px;padding:1px 5px;font:10px var(--mono)}.compose-footer{border-top:1px solid #edf0ef;margin-top:20px;padding-top:15px;display:flex;align-items:center;justify-content:space-between}.compose-footer>span{color:#9aa3a5;font-size:11px}.browser-panel{display:flex;flex-direction:column}.browser-panel>p.muted{font-size:12px;line-height:1.65;margin:-5px 0 2px}.browser-panel label{margin-top:15px}.live-badge{display:flex;align-items:center;gap:7px;padding:5px 8px;border-radius:6px;background:#eef3e7;color:#617944;font:10px var(--mono)}.browser-preview{flex:1;min-height:170px;border:1px solid #e6ebeb;border-radius:10px;overflow:hidden;background:#f5f8f7;margin:13px 0}.browser-chrome{height:27px;background:#ebefee;display:flex;align-items:center;gap:5px;padding:0 9px}.browser-chrome>span{width:7px;height:7px;border-radius:50%;background:#c5ceca}.browser-chrome>span:first-child{background:#e8a4a0}.browser-chrome>span:nth-child(2){background:#e7cf8c}.browser-chrome>span:nth-child(3){background:#9cceb2}.browser-chrome div{margin-left:auto;color:#9ca6a6;font-size:9px}.browser-empty{height:calc(100% - 27px);min-height:142px;display:grid;align-content:center;justify-items:center;gap:5px;color:#8a9697}.browser-empty b{font-size:11px;color:#566269}.browser-empty small{font-size:10px}.browser-eye{width:35px;height:35px;border-radius:11px;background:#e7eddb;color:#779348;display:grid;place-items:center;font-size:17px}.browser-panel.is-running .browser-preview{background:#15222a}.browser-panel.is-running .browser-empty{color:#93b45c}.browser-panel.is-running .browser-empty b{color:#eff4e7}.browser-panel.is-running .browser-empty small{color:#a8b2ae}.browser-panel.is-running .browser-eye{background:#d9f36a;color:#1d2b24}.queue-panel{padding:21px}.queue-heading{align-items:center}.queue-tools{display:flex;gap:8px;align-items:center}.queue-tools input[type=search]{width:min(230px,30vw)}.queue-tools select{width:auto;min-width:120px}.queue-list{border-top:1px solid #edf0ef}.empty-state{padding:38px 15px;display:grid;justify-items:center;gap:7px;text-align:center;color:#a2adae}.empty-state>span{font-size:26px;color:#9cb254}.empty-state b{font-size:13px;color:#52616a}.empty-state small{font-size:11px}.job-row{min-height:66px;display:flex;align-items:center;gap:13px;border-bottom:1px solid #edf0ef;padding:10px 3px}.job-icon{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:#eff4e5;color:#829e3e;font-size:16px}.job-copy{flex:1;min-width:0;display:grid;gap:5px}.job-copy b{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.job-copy small{color:#949ea0;font-size:10px}.status-badge{display:inline-flex;align-items:center;gap:7px;padding:5px 8px;border-radius:6px;font-size:10px;white-space:nowrap}.status-badge.good{color:#37805d;background:#e9f4ed}.status-badge.warn{color:#9d6924;background:#fbf1dd}.status-badge.muted{color:#758087;background:#eef0f0}.status-badge.warn i{background:#d49a41;box-shadow:0 0 0 3px #d49a411c}.role-badge{border-radius:6px;padding:5px 8px;font-size:10px;background:#eff2f2;color:#657079}.role-badge.admin{background:#f1f0df;color:#777237}.plan-name{font-size:12px;font-weight:600;text-transform:capitalize}.row-actions{display:flex;justify-content:flex-end;gap:4px}.row-actions .icon-btn{width:33px;height:33px;min-width:33px;border-color:transparent}.row-actions .icon-btn:hover{border-color:var(--line)}
/* Admin + account */
.admin-content{max-width:1400px}.users-panel{padding-bottom:8px}.users-panel .panel-head{align-items:center;flex-wrap:wrap}.table-wrap{overflow-x:auto}table{width:100%;border-collapse:collapse;text-align:left;white-space:nowrap}th{height:42px;color:#899398;font:10px var(--mono);letter-spacing:.07em;border-bottom:1px solid var(--line)}td{height:62px;border-bottom:1px solid #edf0ef;color:#54616a;font-size:12px}.person-cell{display:flex;align-items:center;gap:10px}.person-cell>span:last-child{display:grid;gap:3px}.person-cell b{font-size:12px;color:#35424a}.person-cell small{font-size:10px;color:#99a2a5}.person-avatar{width:34px;height:34px;border-radius:10px;background:#edf2df;color:#738842;display:grid;place-items:center;font-weight:700}.pagination{height:58px;display:flex;align-items:center;justify-content:space-between;color:#899397;font-size:11px}.pagination>div{display:flex;gap:7px}.admin-stats .stat-card:nth-child(2) .stat-glyph{color:#5caa7d}.admin-stats .stat-card:nth-child(3) .stat-glyph{color:#d7a04a}dialog{width:min(660px,calc(100vw - 28px));max-height:90vh;border:1px solid var(--line);border-radius:17px;padding:0;box-shadow:0 25px 90px #17212b44}dialog::backdrop{background:#18252bb3;backdrop-filter:blur(3px)}dialog form{padding:24px}.dialog-head{display:flex;align-items:flex-start;justify-content:space-between;border-bottom:1px solid var(--line);padding-bottom:18px}.dialog-head h2{margin:0;font:700 20px var(--display)}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}.form-grid label{margin-top:14px}.form-grid label>span{display:block;margin-bottom:6px;font-size:12px}.form-grid input,.form-grid select{min-width:0}.dialog-actions{border-top:1px solid var(--line);padding-top:16px;display:flex;justify-content:flex-end;gap:8px}.account-wrap{max-width:680px;margin:7vh auto;padding:20px}.back-link{display:inline-flex;gap:8px;color:#718087;margin:0 0 17px;font-size:13px}.account-panel{padding:30px}.account-panel h1{margin:0 0 7px;font:800 30px var(--display);letter-spacing:-.04em}.account-panel .muted{margin:0 0 19px}.account-panel form{max-width:430px}.account-panel form>.btn{margin-top:15px}.account-panel label{margin-top:16px}
@media(max-width:960px){.shell{grid-template-columns:205px minmax(0,1fr)}.studio-grid{grid-template-columns:1fr}.browser-panel{min-height:370px}.page-content{padding-top:25px}.stats-grid{gap:10px}.stat-card{padding:15px}.auth-brand{padding:38px 34px}.auth-card{padding-inline:38px}}
@media(max-width:680px){.auth-page{padding:0;background:#f6f8f5}.auth-wrap{min-height:100vh;border-radius:0;grid-template-columns:1fr}.auth-brand{min-height:260px;padding:25px 26px}.auth-brand>img{margin-bottom:26px;width:36px;height:36px}.auth-brand h1{font-size:42px;margin:8px 0}.auth-copy{font-size:13px;max-width:310px}.auth-art{width:280px;height:150px;left:auto;right:-28px;bottom:-48px;opacity:.65}.film-mark{font-size:52px}.orb-a{width:52px;height:52px}.orb-b{width:26px;height:26px}.auth-card{padding:45px 27px 36px}.auth-wrap{display:flex;flex-direction:column}.auth-card{flex:1;width:100%}.shell{display:block;padding-bottom:64px}.sidebar{position:fixed;z-index:10;top:auto;bottom:0;left:0;right:0;width:100%;height:62px;padding:7px 6px;background:#16232bf5;display:flex;align-items:center}.brand-lockup,.nav-label,.sidebar-bottom{display:none}.sidebar nav{width:100%;display:flex;justify-content:space-around;gap:2px}.nav-item{height:46px;padding:3px 7px;flex-direction:column;justify-content:center;gap:0;font-size:9px;flex:1}.nav-item>span:first-child{height:20px;font-size:16px}.nav-item.active{box-shadow:inset 0 2px var(--brand)}.topbar{height:58px;padding:0 16px}.connection{display:none}.page-content{padding:22px 14px 30px}.welcome-row{align-items:flex-start;flex-direction:column;gap:14px}.welcome-row h1{font-size:29px}.welcome-row .btn{align-self:stretch}.stats-grid{grid-template-columns:1fr 1fr}.stat-card{min-height:115px;padding:13px}.stat-card:last-child{grid-column:span 2}.studio-grid{gap:12px}.composer-panel,.browser-panel,.queue-panel,.users-panel{padding:16px;border-radius:14px}.panel-head h2{font-size:16px}.compose-options{align-items:flex-start;flex-direction:column}.hint-chip{display:none}.compose-footer{gap:10px}.compose-footer .btn{padding-inline:11px;font-size:12px}.queue-heading{align-items:flex-start;flex-direction:column}.queue-tools{width:100%}.queue-tools input[type=search]{width:auto;flex:1}.queue-tools select{flex:1}.job-row{gap:8px}.job-copy b{max-width:42vw}.job-row>.status-badge{font-size:9px;padding:5px}.admin-content .welcome-row{gap:14px}.admin-content .welcome-row>.btn{width:100%}.users-panel .panel-head .queue-tools{flex-wrap:wrap}.users-panel .panel-head .queue-tools input,.users-panel .panel-head .queue-tools select{width:100%}.users-panel{padding-inline:11px}table{min-width:760px}.form-grid{grid-template-columns:1fr}dialog form{padding:19px}.account-wrap{margin:2vh auto;padding:14px}.account-panel{padding:23px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}