:root{--bg:#0f1115;--panel:#1a1d23;--panel2:#20242d;--line:#343a46;--text:#dee5ef;--muted:#8f9cab;--accent:#22c8ff;--green:#20c58a;--red:#ff4f65}
*{box-sizing:border-box;font-family:Inter,Segoe UI,Arial,sans-serif}html,body{height:100%}body{margin:0;background:#0d1014;color:var(--text)}
.hidden{display:none!important}.error{color:var(--red)}.muted{color:var(--muted)}
#loginScreen{display:none}#loginScreen.is-visible{display:grid}#appShell{display:none}#appShell.is-visible{display:grid}
input,select,textarea,button{width:100%;padding:10px;border-radius:10px;border:1px solid #3b4452;background:#131920;color:var(--text);margin:6px 0}
button{background:#1c6f90;border-color:#2eaad7;font-weight:600;cursor:pointer}button.ghost{background:#2a303a}button.danger{background:#7a2634;border-color:#c3495b}
.login-wrap{height:100vh;place-items:center}.login-card{width:min(420px,92vw);background:var(--panel);padding:22px;border:1px solid var(--line);border-radius:14px}
.app{height:100vh;grid-template-rows:58px 1fr 36px}
.topbar{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;background:#161a21;border-bottom:1px solid var(--line)}
.brand{font-weight:800;letter-spacing:.08em}.top-nav{display:flex;gap:8px;align-items:center}.top-nav button{width:auto;margin:0;min-width:96px}.nav-btn.active{background:#145a75}
.main{padding:10px;overflow:auto}.page{display:none}.page.active{display:block}
.page-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.head-actions{display:flex;gap:8px;align-items:center}.head-actions>*{width:auto;min-width:110px;margin:0}
.vmix-home{margin-bottom:10px;padding:10px;border:1px solid #3f4a59;border-radius:10px;background:#131922;color:#9fd1ee}
.cardlike{margin-bottom:10px;padding:10px;border:1px solid #3f4a59;border-radius:10px;background:#121820}
.project-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:10px}
.project-card{background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid var(--line);padding:12px;border-radius:12px}
.project-card .actions{display:flex;gap:6px}.project-card .actions button{width:auto;padding:8px 10px}
.workspace{display:grid;grid-template-columns:280px 1fr 420px;gap:10px}.panel{background:linear-gradient(180deg,#1f232b,#1a1e25);border:1px solid var(--line);border-radius:12px;padding:10px;min-height:0;overflow:auto}
.row{display:flex;justify-content:space-between;align-items:center;gap:10px}.mt{margin-top:12px}
.subnav{margin:8px 0 10px;padding:8px;border:1px solid #33465a;border-radius:10px;background:#121923}
.seg-nav-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.seg-nav-actions button{width:auto;margin:0;padding:6px 10px}
.drag-handle{font-size:16px;opacity:.65;cursor:grab;padding-right:4px}
.segment-list,.action-stack,.rows{display:grid;gap:8px}.segment-item,.action-item{background:#141b23;border:1px solid #3a4f64;border-radius:10px;padding:10px}
.segment-item{display:grid;grid-template-columns:24px 1fr auto;align-items:center;gap:8px}
.segment-item.active-seg{outline:2px solid var(--accent)}
.seg-actions{display:flex;gap:6px}.seg-actions button{width:auto;margin:0;padding:5px 8px;font-size:12px}
.run-controls{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.run-controls button{width:auto;margin:0;padding:8px 12px;min-width:90px}.badge{padding:7px 12px;border-radius:999px;background:#334455}
.grid-head,.r-row{display:grid;grid-template-columns:44px 1.7fr 100px 90px 80px;gap:10px;align-items:center;min-width:650px}
.grid-head{position:sticky;top:0;background:#1e2d3e;color:#a1c5df;border:1px solid #37607e;border-radius:10px;padding:8px;font-size:12px}
.rows{margin-top:8px}.r-row{padding:10px;background:#131c25;border:1px solid #36556f;border-radius:10px;cursor:pointer}.r-row.active{outline:2px solid var(--accent)}.r-row.current{border-color:var(--green)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.playlist-inspector{margin:8px 0;padding:8px;border:1px solid #3a4f64;border-radius:10px;background:#111821;max-height:180px;overflow:auto}
.playlist-entry{padding:4px 6px;border-bottom:1px solid #243548;font-size:12px}
.playlist-entry.active{background:#1f394f;color:#caebff}
.cmd-param-editor{margin-top:8px;border:1px solid #33465a;border-radius:10px;padding:8px;background:#121923}
.cmd-param-row{display:grid;grid-template-columns:160px 1fr;gap:8px;align-items:center;margin-bottom:6px}
.statusbar{padding:8px 14px;background:#171b22;border-top:1px solid var(--line);font-size:13px}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.6);display:grid;place-items:center;z-index:20}.modal-card{width:min(900px,94vw);max-height:90vh;overflow:auto;background:#1d2129;border:1px solid #445164;border-radius:14px;padding:12px}
.command-list{display:grid;grid-template-columns:1fr 1fr;gap:8px}.command-item{padding:10px;border:1px solid #3d4a5d;border-radius:10px;background:#141b23;cursor:pointer}
@media (max-width:1200px){.workspace{grid-template-columns:1fr}.panel{min-height:260px}.head-actions{flex-wrap:wrap}}