:root{--bg:#0f1115;--panel:#171a21;--panel-2:#1e2430;--border:#2b3342;--text:#f3f6fb;--muted:#aab4c3;--green:#1f8f4e;--green-soft:#174f31;--red:#b63b3b;--red-soft:#5b2323;--gray:#5f6673;--gray-soft:#323844;--accent:#4da3ff;--shadow:0 10px 25px #00000040;--radius:14px}*{box-sizing:border-box}html,body{margin:0;padding:0}body{background:var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}button,input{font:inherit}button{background:var(--panel-2);color:var(--text);cursor:pointer;border:0;border-radius:10px;padding:10px 14px}button:hover{filter:brightness(1.08)}button.primary{background:var(--accent);color:#08111d;font-weight:700}button.danger{background:var(--red)}.topbar{border-bottom:1px solid var(--border);z-index:20;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#0f1115f2;justify-content:space-between;align-items:center;height:56px;padding:0 18px;display:flex;position:sticky;top:0}.brand{letter-spacing:.2px;font-size:18px;font-weight:700}.top-actions{align-items:center;gap:10px;display:flex}.icon-btn{background:var(--panel-2);width:40px;height:40px;color:var(--text);border:0;border-radius:10px;justify-content:center;align-items:center;padding:0;font-size:20px;line-height:1;display:inline-flex}.container{padding:18px}.grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;display:grid}.panel{background:linear-gradient(180deg,#ffffff05,#ffffff03),var(--panel);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);flex-direction:column;min-height:170px;display:flex;position:relative;overflow:visible}.panel-header{border-bottom:1px solid var(--border);justify-content:space-between;align-items:flex-start;gap:12px;padding:12px 14px;display:flex}.panel-title-wrap{flex:1;min-width:0}.title-row{align-items:stretch;gap:8px;min-width:0;display:flex}.panel-title{white-space:nowrap;text-overflow:ellipsis;min-width:0;font-size:24px;font-weight:700;overflow:hidden}.panel-subtitle{color:var(--muted);white-space:nowrap;text-overflow:ellipsis;margin-top:4px;font-size:12px;overflow:hidden}.twitch-box{border:1px solid var(--border);color:#9146ff;background:#ffffff0a;border-radius:10px;flex:none;justify-content:center;align-self:stretch;align-items:center;gap:8px;min-height:100%;padding:0 10px;line-height:1;text-decoration:none;display:inline-flex}.twitch-box:hover{background:#ffffff14}.twitch-logo{flex:none;width:18px;height:18px;display:inline-block}.twitch-dot{background:#6b7280;border-radius:999px;flex:none;width:8px;height:8px;display:inline-block}.twitch-dot.live{background:#ef4444;box-shadow:0 0 8px #ef4444a6}.panel-body{flex:1;grid-template-columns:1fr 1fr;min-height:0;display:grid}.panel-menu-open{z-index:200}.menu-wrap{z-index:50;position:relative}.menu{border:1px solid var(--border);min-width:170px;box-shadow:var(--shadow);z-index:1000;background:#1b2029;border-radius:12px;display:none;position:absolute;top:46px;right:0;overflow:hidden}.menu.open{display:block}.menu button{text-align:left;background:0 0;border-radius:0;width:100%;padding:12px 14px}.menu button:hover{background:#ffffff0d}.input-card,.output-col,.output-card{min-height:0}.input-card,.output-card{flex-direction:column;gap:6px;padding:12px;display:flex}.input-card{border-right:1px solid var(--border)}.output-col{grid-template-rows:1fr;display:grid}.output-col.split{grid-template-rows:1fr 1fr}.output-col.split .output-card:first-child{border-bottom:1px solid var(--border)}.panel-body>.input-card:only-child{border-bottom-left-radius:calc(var(--radius) - 1px);border-bottom-right-radius:calc(var(--radius) - 1px)}.panel-body>.input-card:first-child{border-bottom-left-radius:calc(var(--radius) - 1px)}.panel-body>.output-col:last-child>.output-card:last-child,.output-col.split>.output-card:last-child{border-bottom-right-radius:calc(var(--radius) - 1px)}.state-green{background:linear-gradient(180deg,#1f8f4e29,#1f8f4e0f),var(--green-soft)}.state-gray{background:linear-gradient(180deg,#5f667329,#5f66730f),var(--gray-soft)}.state-red{background:linear-gradient(180deg,#b63b3b2e,#b63b3b0f),var(--red-soft)}.section-label{letter-spacing:.6px;text-transform:uppercase;opacity:.9;font-size:14px;font-weight:1000}.section-head{justify-content:space-between;align-items:stretch;gap:10px;display:flex}.section-meta{flex-direction:column;justify-content:space-between;min-height:38px;display:flex}.section-bitrate{white-space:nowrap;justify-content:flex-end;align-items:center;min-height:38px;font-size:30px;font-weight:800;line-height:1;display:flex}.status-line{color:#ebf0f8;opacity:.95;font-size:13px}.metrics{grid-template-columns:1fr 1fr;gap:8px 10px;margin-top:auto;display:grid}.metric{background:#ffffff0d;border:1px solid #ffffff0d;border-radius:10px;padding:8px}.metric .label{color:var(--muted);margin-bottom:4px;font-size:11px}.metric .value{font-size:14px;font-weight:700}.add-tile{border:2px dashed var(--border);border-radius:var(--radius);cursor:pointer;-webkit-user-select:none;user-select:none;appearance:none;width:100%;min-height:170px;color:inherit;background:#ffffff04;justify-content:center;align-items:center;padding:0;transition:all .15s;display:flex}.add-tile:hover{border-color:var(--accent);background:#4da3ff0f;transform:translateY(-1px)}.plus{color:var(--muted);font-size:54px;line-height:1}.footer-note{color:var(--muted);padding:10px 2px 0;font-size:12px}.badge{color:var(--muted);background:#ffffff0d;border-radius:999px;align-items:center;gap:6px;padding:5px 9px;font-size:11px;display:inline-flex}.panel-error{color:#ffb8b8;padding:0 14px 12px;font-size:12px}.modal-backdrop{z-index:100;background:#0000008c;justify-content:center;align-items:center;padding:20px;display:flex;position:fixed;inset:0}.modal{border:1px solid var(--border);width:min(520px,100%);box-shadow:var(--shadow);background:#191f29;border-radius:16px;overflow:hidden}.modal-header,.modal-body,.modal-footer{padding:16px 18px}.modal-header{border-bottom:1px solid var(--border);font-size:18px;font-weight:700}.modal-body{gap:12px;display:grid}.modal-footer{border-top:1px solid var(--border);justify-content:flex-end;gap:10px;display:flex}.field{gap:6px;display:grid}.field label{color:var(--muted);font-size:13px}input[type=text],input[type=number]{border:1px solid var(--border);width:100%;color:var(--text);background:#0f141c;border-radius:10px;outline:none;padding:12px 13px}input:focus{border-color:var(--accent);box-shadow:0 0 0 3px #4da3ff26}.help{color:var(--muted);font-size:12px;line-height:1.4}@media (max-width:1100px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (max-width:720px){.grid,.panel-body{grid-template-columns:1fr}.input-card{border-right:0;border-bottom:1px solid var(--border)}.panel-body>.input-card:first-child{border-bottom-left-radius:0}.panel-body>.input-card:only-child{border-bottom-left-radius:calc(var(--radius) - 1px);border-bottom-right-radius:calc(var(--radius) - 1px)}.panel-body>.output-col:last-child>.output-card:last-child{border-bottom-right-radius:calc(var(--radius) - 1px);border-bottom-left-radius:calc(var(--radius) - 1px)}}