:root{
  --bg:#050c13;
  --bg2:#07111b;
  --panel:#0b1825;
  --panel2:#0d1d2c;
  --line:#1f3447;
  --line2:#29445e;
  --text:#eef6ff;
  --muted:#8da2b5;
  --blue:#2684ff;
  --blue2:#48a1ff;
  --green:#2ce38d;
  --amber:#f5b83d;
  --red:#ff424f;
  --shadow:0 18px 50px rgba(0,0,0,.30);
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:radial-gradient(circle at 50% 0,#0e2031 0,#07111b 44%,#050c13 100%);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}
button,input,select{font:inherit}
button{color:inherit}
button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:2px solid var(--blue2);outline-offset:2px}
[hidden]{display:none!important}

.app-shell{height:100vh;min-height:780px;display:grid;grid-template-rows:68px auto 1fr 30px}
.topbar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 22px;border-bottom:1px solid var(--line);background:rgba(5,13,21,.94);backdrop-filter:blur(16px);position:relative;z-index:4}
.brand{display:flex;align-items:baseline;gap:12px}
.brand-mark{font-size:34px;font-weight:900;letter-spacing:-2px}
.brand-sub{font-size:25px;font-weight:300;letter-spacing:-1.2px;font-family:'Segoe UI Light','Helvetica Neue',Arial,sans-serif}
.alpha-badge{font-size:9px;letter-spacing:.08em;border:1px solid #2b5d8e;color:#8fc6ff;border-radius:999px;padding:4px 7px;vertical-align:middle}
.topnav{display:flex;gap:10px}
.nav-item,.secondary,.link-button{font:inherit;color:var(--text);background:transparent;border:0;cursor:pointer}
.nav-item{padding:13px 28px;border-radius:8px;color:#c6d2dd}
.nav-item:hover{background:#0b1c2c}
.nav-item.active{background:linear-gradient(180deg,#123864,#0b2b50);box-shadow:inset 0 -2px 0 var(--blue2);color:#fff}
.top-actions{display:flex;justify-content:flex-end;align-items:center;gap:14px}
.operator-state{display:flex;align-items:center;gap:7px;font-size:11px;color:#d8e7f5;border:1px solid #274158;background:#0a1723;padding:7px 10px;border-radius:7px}
.avatar{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#24394e}

.alert-bar{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:9px 18px;background:#30250b;border-bottom:1px solid #785c18;color:#ffe5a4;font-size:12px}
.alert-bar.bad{background:#321217;border-color:#8e2e39;color:#ffd3d8}
.alert-bar b{margin-right:8px}
.alert-bar button{background:transparent;border:0;color:inherit;font-size:22px;cursor:pointer;line-height:1}

main{min-height:0}
.view{height:100%;min-height:0}
.view.active{display:block}
.workspace{height:100%;display:grid;grid-template-columns:300px minmax(620px,1fr) 310px;gap:12px;padding:12px;min-height:0}
.rail,.center-stage{display:flex;flex-direction:column;gap:12px;min-height:0}
.panel{background:linear-gradient(180deg,rgba(16,33,49,.97),rgba(9,23,35,.97));border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow)}
.left-rail .panel,.right-rail .panel{padding:12px}
.panel.compact{padding-bottom:8px}
.panel-title{display:flex;justify-content:space-between;gap:8px;margin-bottom:10px;font-weight:700}
.panel-title>div>span,.panel-title>span,.row-title>div>span{font-size:16px}
.panel-title small,.row-title small{display:block;font-size:11px;font-weight:400;color:var(--muted);margin-top:2px}
.row-title{align-items:center}
.mini-state{font-size:8px!important;letter-spacing:.08em;border:1px solid #236b4b;color:#78efb8;padding:4px 6px;border-radius:999px;height:max-content}
.mini-state.armed{border-color:#286bb0;color:#83beff}
.mini-state.bad{border-color:#94404a;color:#ff9aa4}

.source-list{display:grid;gap:5px}
.source{width:100%;display:grid;grid-template-columns:34px 1fr 16px;align-items:center;gap:8px;text-align:left;color:var(--text);background:#0c1a28;border:1px solid #1c3348;border-radius:8px;padding:9px 10px;cursor:pointer}
.source:hover{border-color:#315571}
.source.active{border-color:var(--blue);background:linear-gradient(90deg,#102c4f,#11223a);box-shadow:0 0 0 1px rgba(38,132,255,.2) inset}
.source:disabled{opacity:.55;cursor:not-allowed}
.source b{display:block;font-size:13px}
.source small{display:block;color:var(--muted);font-size:10px;margin-top:2px}
.source i{width:14px;height:14px;border:2px solid #4b6175;border-radius:50%}
.source.active i{border:4px solid var(--blue2)}
.source-icon{font-size:22px;color:#e6f2ff}

.more-sources{margin-top:8px}
.more-sources summary{cursor:pointer;color:#b8cada;font-size:11px}
.more-source-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:8px}
.more-source-grid button:last-child{grid-column:1/-1}
.full{width:100%;margin-top:8px}
.secondary{border:1px solid #2b455d;background:#102233;padding:9px 12px;border-radius:7px}
.secondary:hover:not(:disabled){border-color:#3f6b93;background:#13293d}
.secondary:disabled{opacity:.45;cursor:not-allowed}
.primary-outline{border-color:#277bca;color:#dcedff}
.danger-outline{border-color:#7a3540;color:#ffc5cc}
.danger-text{color:#ff8f9b!important}

.toggle-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px;border-top:1px solid rgba(61,86,107,.28)}
.toggle-row:first-of-type{border-top:0}
.toggle-row span{display:block}
.toggle-row b{display:block;font-size:12px}
.toggle-row small{display:block;font-size:10px;color:var(--muted);margin-top:2px}
.toggle-row input{display:none}
.toggle-row em{width:38px;height:22px;border-radius:20px;background:#405266;position:relative;flex:0 0 auto}
.toggle-row em:after{content:"";width:16px;height:16px;background:#dbe8f2;border-radius:50%;position:absolute;left:3px;top:3px;transition:.16s}
.toggle-row input:checked+em{background:var(--blue)}
.toggle-row input:checked+em:after{left:19px}
.toggle-row input:disabled+em{opacity:.35}
.disabled-row{opacity:.6}
.meter-label{display:flex;justify-content:space-between;font-size:9px;color:#8199ad;margin:4px 8px}
.meter{height:4px;background:#1e2d3a;border-radius:5px;overflow:hidden;margin:0 8px 4px}
.meter span{display:block;width:0;height:100%;background:linear-gradient(90deg,var(--green),#d6e733,#f8c746);transition:width .08s}

.quality-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.quality-grid button{background:#0c1927;border:1px solid #263d53;color:#d8e5ef;padding:9px 5px;border-radius:7px;cursor:pointer}
.quality-grid button.active{border-color:var(--blue);background:#143860}
.quality-grid button:disabled{opacity:.5;cursor:not-allowed}
.quality-grid b,.quality-grid small{display:block}
.quality-grid b{font-size:11px}
.quality-grid small{font-size:9px;color:#9fb3c5;margin-top:3px}
details{margin-top:8px;border-top:1px solid rgba(61,86,107,.35);padding-top:8px;color:#c4d3df;font-size:11px}
summary{cursor:pointer}
.advanced-copy{color:var(--muted);padding:8px 0 2px}
.inline-options{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:8px;border-top:1px solid rgba(61,86,107,.28)}
.inline-options label{font-size:9px;color:var(--muted)}
.inline-options select{width:100%;margin-top:4px;background:#081520;color:#edf6ff;border:1px solid #2a4258;border-radius:6px;padding:6px}

.center-stage{min-width:0}
.preview-panel{padding:10px;display:flex;flex-direction:column;min-height:0}
.preview-head{display:flex;justify-content:space-between;align-items:center;padding:2px 4px 8px;font-size:13px}
.preview-meta{display:flex;gap:8px;color:#b9c9d7;font-size:11px}
.status-dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:4px}
.status-dot.ready{background:var(--green);box-shadow:0 0 12px rgba(44,227,141,.55)}
.status-dot.recording{background:var(--red);box-shadow:0 0 12px rgba(255,66,79,.55)}
.status-dot.paused{background:var(--amber);box-shadow:0 0 12px rgba(245,184,61,.45)}
.status-dot.error{background:var(--red);box-shadow:0 0 12px rgba(255,66,79,.65)}

.preview-frame{position:relative;aspect-ratio:16/9;background:#02060a;border:1px solid #1b3c5b;border-radius:8px;overflow:hidden}
.preview-frame canvas,.preview-frame>video#previewVideo{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#02060a}
.preview-frame canvas{display:block}
.preview-frame>video#previewVideo{display:none}
.preview-empty{position:absolute;inset:0;display:grid;place-content:center;text-align:center;background:radial-gradient(circle at center,#163860 0,#081521 50%,#050c13 100%);pointer-events:none}
.vixl-hero{font-size:82px;font-weight:900;letter-spacing:-5px;background:linear-gradient(90deg,#fff,#8cc2ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-sub{font-size:12px;letter-spacing:5px;color:#a8c5dc}
.preview-frame #cameraOverlay{position:absolute;display:none;left:16px;bottom:16px;width:26%;aspect-ratio:16/9;object-fit:cover;border:2px solid var(--blue2);border-radius:9px;background:#000;box-shadow:0 12px 25px rgba(0,0,0,.45)}
.preview-frame #cameraOverlay[data-position="bottom-right"]{left:auto;right:16px;bottom:16px;top:auto}
.preview-frame #cameraOverlay[data-position="top-left"]{left:16px;right:auto;top:16px;bottom:auto}
.preview-frame #cameraOverlay[data-position="top-right"]{left:auto;right:16px;top:16px;bottom:auto}
.countdown-overlay{position:absolute;inset:0;z-index:10;background:rgba(1,5,10,.74);display:grid;place-content:center;text-align:center;backdrop-filter:blur(6px)}
.countdown-overlay strong{font-size:120px;line-height:1;color:#fff}
.countdown-overlay span{font-size:13px;letter-spacing:.08em;color:#b9cada}

.status-strip{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:0;margin-top:8px;border:1px solid #1e3448;border-radius:8px;background:#091623;overflow:hidden}
.state-main,.stat{padding:9px 12px;display:flex;align-items:center;gap:7px}
.state-main{border-right:1px solid #243b50}
.state-main b{font-size:14px}
.state-main small,.stat small{display:block;color:var(--muted);font-size:9px}
.stat{display:block;border-right:1px solid #243b50}
.stat:last-child{border-right:0}
.stat b{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.transport{display:grid;grid-template-columns:1fr 1.15fr 1fr 1fr 1fr;gap:10px;align-items:center;padding:14px 14px 4px}
.transport-btn,.record-btn{border:0;color:#fff;background:transparent;cursor:pointer}
.transport-btn{display:grid;place-items:center;gap:4px;padding:8px}
.transport-btn:disabled,.record-btn:disabled{opacity:.35;cursor:not-allowed}
.transport-btn span{display:grid;place-items:center;width:54px;height:44px;border:1px solid #2a4358;border-radius:8px;background:#0c1a28;font-size:21px}
.transport-btn b{font-size:11px}
.transport-btn small{font-size:9px;color:#9db0c0;border:1px solid #334b5f;border-radius:4px;padding:1px 5px}
.record-btn{display:grid;place-items:center;gap:5px}
.record-btn span{width:70px;height:70px;border-radius:50%;background:var(--red);border:8px solid #111d28;box-shadow:0 0 0 3px #f1f5f8,0 0 0 7px #1f3447,0 0 24px rgba(255,66,79,.25)}
.record-btn b{font-size:15px}
.record-btn small{font-size:10px;color:#9db0c0}

.completion-card{margin:10px 8px 2px;padding:10px 12px;border:1px solid #1c8056;background:#0b2f25;border-radius:8px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.completion-card>div:first-child{display:flex;align-items:center;gap:10px}
.completion-card b,.completion-card small{display:block}
.completion-card small{color:#9ecab6;font-size:10px;margin-top:2px}
.completion-check{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--green);color:#062015;font-weight:900}
.completion-actions{display:flex;gap:7px}

.system-app-panel{padding:12px}
.tag{border:1px solid #2b5d8e;color:#8fc6ff;border-radius:999px;padding:5px 8px;font-size:9px}
.preset-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.preset-grid label{font-size:10px;color:#9db0c0}
.preset-grid select{width:100%;margin-top:4px;background:#0a1723;border:1px solid #274158;color:#fff;padding:8px;border-radius:6px;font-size:11px}
.system-actions{display:flex;gap:8px;margin-top:10px}
.protocol-strip{margin-top:9px;padding-top:8px;border-top:1px solid rgba(61,86,107,.28);display:flex;gap:18px;flex-wrap:wrap;color:#7f94a6;font-size:9px}
.protocol-strip b{color:#c5d8e8;font-weight:600}

.right-rail .grow{flex:1;min-height:0}
.health-row{display:grid;grid-template-columns:28px 1fr;gap:9px;align-items:center;padding:9px 2px;border-bottom:1px solid rgba(61,86,107,.28)}
.health{width:24px;height:24px;display:grid;place-items:center;border-radius:50%;font-weight:800}
.health.ok{background:var(--green);color:#062015}
.health.warn{background:var(--amber);color:#291d02}
.health.bad{background:var(--red);color:#fff}
.health.muted{background:#35495b;color:#aec0cf}
.health-row b{display:block;font-size:12px}
.health-row small{color:var(--muted);font-size:10px}
.all-ready{margin-top:9px;padding:10px;border:1px solid #1c8056;background:#0b3527;color:#7df6ba;border-radius:7px;text-align:center;font-weight:700;font-size:12px}
.all-ready.warn{border-color:#80651e;background:#342a0d;color:#ffd46c}
.all-ready.bad{border-color:#84323b;background:#351116;color:#ff9aa4}

.info-list{margin:0}
.info-list>div{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px solid rgba(61,86,107,.23);font-size:11px}
.info-list>div:last-child{border-bottom:0}
.info-list dt{color:#a9bac8}
.info-list dd{margin:0;text-align:right}
.recent-list{display:grid;gap:7px;overflow:auto}
.record-item{width:100%;display:grid;grid-template-columns:36px 1fr;gap:9px;align-items:center;text-align:left;padding:9px;border:1px solid #21394e;border-radius:7px;background:#0a1825;color:var(--text);cursor:pointer}
.record-item:hover{border-color:#385d7b}
.record-item b{display:block;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.record-item small{display:block;color:var(--muted);font-size:9px;margin-top:4px}
.record-thumb{width:34px;height:30px;border-radius:5px;display:grid;place-items:center;background:#102b46;color:#79baff;font-size:11px}
.empty-list{padding:18px;color:var(--muted);text-align:center;font-size:11px}
.link-button{color:#65adff;font-size:10px}

.page-view{padding:18px 22px 22px;overflow:auto}
.page-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px}
.page-head h1{margin:0;font-size:24px}
.page-head p{margin:4px 0 0;color:var(--muted);font-size:12px}
.page-actions{display:flex;gap:8px}
.recordings-layout{display:grid;grid-template-columns:minmax(720px,1.5fr) minmax(360px,.75fr);gap:14px}
.recordings-table-panel,.manifest-panel{padding:12px}
.recordings-header,.recording-row{display:grid;grid-template-columns:minmax(240px,2fr) 1fr 100px 100px minmax(220px,1.2fr);gap:10px;align-items:center}
.recordings-header{padding:8px 10px;color:#7f95a7;font-size:9px;text-transform:uppercase;letter-spacing:.08em;border-bottom:1px solid #253c51}
.recording-row{padding:10px;border-bottom:1px solid rgba(61,86,107,.24);font-size:11px}
.recording-row.selected{background:#0d253b}
.recording-name{background:transparent;border:0;color:#e8f3fc;text-align:left;cursor:pointer;min-width:0}
.recording-name b,.recording-name small{display:block}
.recording-name b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.recording-name small{font-size:9px;color:var(--muted);margin-top:3px}
.row-actions{display:flex;gap:6px;flex-wrap:wrap}
.row-actions button{background:#102233;border:1px solid #2a4358;color:#d9e9f6;border-radius:5px;padding:5px 7px;font-size:9px;cursor:pointer}
.recordings-empty{padding:40px;text-align:center;color:var(--muted)}
.manifest-panel pre{margin:0;max-height:65vh;overflow:auto;background:#06111a;border:1px solid #1f3447;border-radius:7px;padding:12px;color:#bcd0e1;font-size:10px;line-height:1.5;white-space:pre-wrap;word-break:break-word}

.settings-grid{display:grid;grid-template-columns:repeat(2,minmax(340px,1fr));gap:14px;max-width:1100px}
.settings-panel{padding:14px}
.setting-row{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:12px 0;border-bottom:1px solid rgba(61,86,107,.28)}
.setting-row:last-child{border-bottom:0}
.setting-row b,.setting-row small{display:block}
.setting-row b{font-size:12px}
.setting-row small{font-size:10px;color:var(--muted);margin-top:3px}
.field-row{display:grid;gap:6px;font-size:10px;color:var(--muted)}
.field-row input{background:#081520;border:1px solid #2a4258;color:#edf6ff;border-radius:6px;padding:9px}
.identity-box{display:grid;grid-template-columns:130px 1fr;gap:8px;margin-top:12px;font-size:10px}
.identity-box span{color:var(--muted)}
.identity-box code{color:#cce4fb;overflow:hidden;text-overflow:ellipsis}
.storage-summary{display:grid;gap:5px}
.storage-summary strong{font-size:14px}
.storage-summary span{font-size:11px;color:#9eb1c2}
.settings-note{color:#8499aa;font-size:10px;line-height:1.5;margin:12px 0 0}

.footer{display:flex;justify-content:space-between;align-items:center;padding:0 16px;color:#72879a;font-size:9px;border-top:1px solid #1d3142;background:#06101a}

@media(max-width:1240px){
  .workspace{grid-template-columns:270px minmax(560px,1fr)}
  .right-rail{display:none}
  .preset-grid{grid-template-columns:repeat(2,1fr)}
  .recordings-layout{grid-template-columns:1fr}
}
@media(max-width:900px){
  .app-shell{height:auto;min-height:100vh}
  .topbar{grid-template-columns:1fr auto}
  .topnav{display:none}
  .workspace{grid-template-columns:1fr;height:auto}
  .left-rail{order:2}.center-stage{order:1}.right-rail{display:flex;order:3}
  .transport{grid-template-columns:repeat(5,1fr)}
  .system-actions{flex-wrap:wrap}
  .settings-grid{grid-template-columns:1fr}
  .recordings-header{display:none}
  .recording-row{grid-template-columns:1fr;gap:6px}
  .page-view{padding:12px}
}

.gain-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:8px 0}
.gain-grid label{display:grid;gap:5px;color:#9fb3c5;font-size:9px}
.gain-grid input[type="range"]{width:100%}
.recovery-panel{margin-top:12px;padding:10px;border:1px solid #7b6021;background:#2f260d;border-radius:7px;color:#ffd36a}
.recovery-panel>b{display:block;margin-bottom:8px;font-size:11px}
.recovery-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:7px 0;border-top:1px solid rgba(255,211,106,.18)}
.recovery-row:first-child{border-top:0}
.recovery-row span b,.recovery-row span small{display:block}
.recovery-row span b{font-size:10px;color:#ffe9a9}
.recovery-row span small{font-size:9px;color:#cdbb83;margin-top:3px}


/* v0.5 polish */
.alert-copy{display:flex;align-items:baseline;gap:10px;min-width:0}
.alert-copy small{font-size:9px;opacity:.75;border:1px solid currentColor;border-radius:999px;padding:2px 6px;white-space:nowrap}
.alert-bar.ok{background:#0b3023;border-color:#1d815a;color:#91f3c2}
.preview-fit-label{display:flex;align-items:center;gap:5px;margin-left:5px;color:#849bad;font-size:9px}
.preview-fit-label select{background:#07131e;color:#dceaf5;border:1px solid #29445c;border-radius:5px;padding:4px 6px;font-size:9px}
.preview-frame[data-fit="fit"]>canvas:not([hidden]),
.preview-frame[data-fit="fit"]>#previewVideo{object-fit:contain}
.preview-frame[data-fit="fill"]>canvas:not([hidden]),
.preview-frame[data-fit="fill"]>#previewVideo{object-fit:cover}
.preview-frame[data-fit="actual"]>canvas:not([hidden]),
.preview-frame[data-fit="actual"]>#previewVideo{object-fit:scale-down}
.integration-title-actions{display:flex;align-items:center;gap:9px}
.integration-title-actions .link-button{font-size:9px;border:1px solid #2b4a64;border-radius:5px;padding:5px 8px}
#integrationContent{border-top:1px solid rgba(61,86,107,.24);padding-top:10px}
.settings-actions{margin-top:12px}
.completion-actions{flex-wrap:wrap;justify-content:flex-end}
.record-item span:nth-child(2){min-width:0}
.recording-name small.internal-filename{opacity:.75;margin-top:2px}
.show-handoff-badge{display:inline-flex;align-items:center;gap:5px;border:1px solid #275f8f;color:#91caff;border-radius:999px;padding:3px 7px;font-size:8px}
.bridge-detected{color:#7df3ba}

/* v0.6 online-candidate layout */
.workspace{grid-template-columns:310px minmax(640px,1fr) 300px}
.mode-list{display:grid;gap:5px}
.mode-card{width:100%;display:grid;grid-template-columns:34px 1fr 16px;align-items:center;gap:8px;text-align:left;color:var(--text);background:#0c1a28;border:1px solid #1c3348;border-radius:8px;padding:9px 10px;cursor:pointer}
.mode-card:hover{border-color:#315571}.mode-card.active{border-color:var(--blue);background:linear-gradient(90deg,#102c4f,#11223a);box-shadow:0 0 0 1px rgba(38,132,255,.2) inset}.mode-card:disabled{opacity:.55;cursor:not-allowed}
.mode-card b,.mode-card small{display:block}.mode-card b{font-size:12px}.mode-card small{font-size:9px;color:var(--muted);margin-top:2px}.mode-card i{width:14px;height:14px;border:2px solid #4b6175;border-radius:50%}.mode-card.active i{border:4px solid var(--blue2)}.mode-icon{font-size:20px;color:#e6f2ff}
.vixl-workflows{margin-top:8px}.compact-source-list .source{padding-top:8px;padding-bottom:8px}
.recommendation{font-size:8px;letter-spacing:.04em;border:1px solid #2a5f8e;color:#93caff;border-radius:999px;padding:4px 7px;height:max-content}
.layout-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.layout-grid button{display:grid;gap:5px;justify-items:center;background:#0b1926;border:1px solid #284057;border-radius:7px;color:#dbe7f0;padding:7px 4px;cursor:pointer;min-width:0}.layout-grid button:hover{border-color:#3e6686}.layout-grid button.active{border-color:var(--blue);background:#12385f}.layout-grid b{font-size:8px;line-height:1.15;text-align:center}.layout-thumb{display:block;width:42px;height:27px;border:1px solid #46647d;background:#102232;border-radius:4px;position:relative;overflow:hidden}.layout-thumb.pip:after{content:"";position:absolute;right:3px;bottom:3px;width:13px;height:8px;background:#738ca1;border-radius:2px}.layout-thumb.presenter-content:before{content:"";position:absolute;left:3px;top:3px;bottom:3px;width:24px;background:#526b80;border-radius:2px}.layout-thumb.presenter-content:after{content:"";position:absolute;right:3px;top:3px;bottom:3px;width:9px;background:#8aa2b6;border-radius:2px}.layout-thumb.side:before{content:"";position:absolute;left:3px;top:3px;bottom:3px;width:16px;background:#526b80}.layout-thumb.side:after{content:"";position:absolute;right:3px;top:3px;bottom:3px;width:16px;background:#8aa2b6}.layout-thumb.presenter-large:before{content:"";position:absolute;left:3px;top:6px;bottom:6px;width:10px;background:#526b80}.layout-thumb.presenter-large:after{content:"";position:absolute;right:3px;top:3px;bottom:3px;width:23px;background:#8aa2b6}.layout-thumb.device:after{content:"";position:absolute;left:15px;top:2px;width:12px;height:21px;border:2px solid #93aabd;border-radius:4px}
.composition-badge{font-size:8px;letter-spacing:.07em;border-radius:999px;padding:3px 7px;margin-left:6px}.composition-badge.direct{border:1px solid #35516a;color:#9eb2c3}.composition-badge.composited{border:1px solid #236d9d;color:#7bc7ff;background:#0a2940}
.composition-strip{display:grid;grid-template-columns:1fr 30px 1fr 1fr;margin-top:8px;border:1px solid #20384b;border-radius:8px;background:#081522;overflow:hidden}.composition-strip>div{padding:9px 12px;border-right:1px solid #243c50}.composition-strip>div:last-child{border-right:0}.composition-strip small,.composition-strip b,.composition-strip span{display:block}.composition-strip small{font-size:8px;color:#7e95a8;text-transform:uppercase;letter-spacing:.06em}.composition-strip b{font-size:11px;margin-top:2px}.composition-strip span{font-size:8px;color:#92a7b8;margin-top:2px}.composition-strip .composition-arrow{display:grid;place-items:center;font-size:17px;color:#6c93b4;padding:0}
.profile-panel{padding:12px}.profile-quality-grid{grid-template-columns:repeat(4,1fr)}.profile-quality-grid button{min-height:64px}.profile-quality-grid button em{display:block;font-style:normal;font-size:8px;color:#7890a3;margin-top:4px}.profile-quality-grid .advanced-profile{border-style:dashed}
.audio-camera-panel details{margin-bottom:0}
.preview-frame.composited>#recordCanvas{display:block!important;position:absolute;inset:0;width:100%;height:100%;object-fit:contain;z-index:2}.preview-frame.composited>#programCanvas,.preview-frame.composited>#previewVideo,.preview-frame.composited>#cameraOverlay{visibility:hidden}.preview-frame:not(.composited)>#recordCanvas{display:none!important}
#recordCanvas{background:#02060a}
.health-row[data-health="camera"] small{max-width:190px}
@media(max-width:1240px){.workspace{grid-template-columns:285px minmax(560px,1fr)}.layout-grid{grid-template-columns:repeat(2,1fr)}.profile-quality-grid{grid-template-columns:repeat(2,1fr)}}
.all-ready.muted-ready{border-color:#35516a;background:#0b1c2a;color:#aac0d2}