
:root{--bg:#f6f8fa;--surface:#fff;--ink:#192a35;--muted:#7b8793;--line:#e8edf0;--green:#178a66;--green-light:#edf8f3;--sidebar:#101f29;--font:Inter,"Segoe UI",Arial,sans-serif}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:14px/1.5 var(--font)}a{color:inherit;text-decoration:none}button,input,select{font:inherit}button,a,input,select{outline-offset:4px}button{cursor:pointer}svg{width:20px;height:20px;flex-shrink:0}h1,h2,h3,p{margin-top:0}h1{font-size:29px;line-height:1.3;letter-spacing:-1px;margin-bottom:8px;font-weight:650}h2{font-size:16px;margin:0;font-weight:650}h3{font-size:15px;margin-bottom:7px}p{color:var(--muted);margin-bottom:16px}small{font-size:12px}code{font:12px/1.6 Consolas,monospace;overflow-wrap:anywhere}pre{white-space:pre-wrap;background:var(--bg);padding:14px;border-radius:8px}.sidebar{width:245px;position:fixed;inset:0 auto 0 0;background:var(--sidebar);color:#a4b3be;padding:30px 19px 0;display:flex;flex-direction:column;z-index:30;overflow-y:auto}.brand{display:flex;align-items:center;gap:10px;color:#f5fafc;font-size:19px;font-weight:650;letter-spacing:-.6px}.brand-icon{background:#41c797;color:#0c3b2b;width:32px;height:32px;display:grid;place-items:center;border-radius:9px;font-size:20px;font-weight:800;letter-spacing:-3px;padding-right:3px}.brand-dot{width:5px;height:5px;border-radius:50%;background:#42ce9c;margin-left:-7px;margin-top:11px}.workspace{border:1px solid #30404a;border-radius:8px;padding:12px 10px;margin:31px 0 26px;display:flex;align-items:center;gap:10px;font-size:12px;color:#e5ecf0}.workspace small{display:block;font-size:10px;color:#8297a6}.workspace-icon{background:#293a46;color:#c0d1db;border-radius:6px;padding:7px;font-size:10px}.nav-label{font-size:9px;letter-spacing:1.7px;color:#657d8e;font-weight:700;padding:0 12px;margin:21px 0 10px}.workspace+.nav-label{margin-top:0}.nav-item{display:flex;align-items:center;gap:12px;padding:11px 13px;margin:4px 0;font-size:12px;border-radius:6px;transition:background .15s}.nav-item svg{width:17px;height:17px}.nav-item:hover{background:#1c303c;color:#fff}.nav-item.active{background:#213e3b;color:#6fe0b2}.nav-dot{width:5px;height:5px;border-radius:50%;background:#4bc99f;margin-left:auto}.sidebar-bottom{margin-top:auto;padding-top:35px}.version{display:flex;align-items:center;gap:7px;font-size:10px;color:#90a5b4;padding:14px 12px}.version>span:last-child{margin-left:auto;color:#5f7889}.tiny-dot{display:inline-block;height:6px;width:6px;background:#30b383;border-radius:50%;margin-right:4px}.profile{display:flex;align-items:center;gap:10px;padding:18px 0;border-top:1px solid #2b3c47;color:#dee8ee;font-size:11px}.profile small{display:block;color:#718b9d;font-size:10px}.profile form{margin-left:auto}.avatar{width:34px;height:34px;background:#daeae2;color:#3e6a58;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:12px;flex-shrink:0}.avatar.small{width:30px;height:30px;font-size:10px}.logout{background:none;border:0;color:#829cac;font-size:20px}.shell{margin-left:245px}.topbar{height:73px;background:white;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 37px}.breadcrumb{font-size:11px;color:#84909b}.breadcrumb span{margin:0 13px;color:#c4cbd1}.breadcrumb strong{font-weight:500;color:#465461}.top-right{display:flex;align-items:center;gap:19px}.self-hosted{font-size:10px;color:#647883}.divider{height:19px;width:1px;background:var(--line)}.main{max-width:1700px;margin:auto;padding:32px 37px 18px}.page-heading{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:26px}.eyebrow{font-size:9px;letter-spacing:1.7px;color:#84939d;font-weight:700;display:block;margin-bottom:8px}.page-heading p{font-size:12px;margin:0}.heading-actions{display:flex;gap:9px;align-items:center}.button{border:1px solid var(--green);background:var(--green);color:white;border-radius:6px;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 15px;font-size:11px;font-weight:600;white-space:nowrap;min-height:36px}.button:hover{filter:brightness(.96)}.button.secondary{background:white;border-color:#dfe5e9;color:#4d5d68}.button.danger{background:white;border-color:#efd8d7;color:#b45049}.button.full{width:100%;font-size:13px;padding:13px;justify-content:space-between}.status-banner{border:1px solid #dfeae5;background:linear-gradient(105deg,#eef7f1,#f9fcfa);border-radius:9px;display:flex;align-items:center;gap:14px;padding:20px;margin-bottom:23px}.status-icon{height:39px;width:39px;border:1px solid #c9e1d4;border-radius:10px;display:grid;place-items:center;color:#358b68;background:#e3f0e8}.status-banner strong{font-size:12px;font-weight:600}.status-banner p{font-size:10px;margin:3px 0 0;color:#75897f}.status-banner>a{margin-left:auto;font-size:10px;color:#3e8065}.status-banner>.badge{margin-left:6px}.badge{display:inline-flex;align-items:center;padding:4px 8px;background:#f3f5f7;border:1px solid #e6eaed;border-radius:5px;font-size:9px;color:#74808a;white-space:nowrap}.badge.green{color:#278562;background:#edf8f1;border-color:#d5eddf}.badge.amber{color:#947136;background:#fffaf0;border-color:#ecdfbc}.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:17px;margin-bottom:23px}.metric{background:white;border:1px solid var(--line);border-radius:9px;padding:20px 21px}.metric>div{display:flex;align-items:center;justify-content:space-between;color:#6e7e8a;font-size:11px}.metric-icon{background:#f6f8fa;border-radius:6px;padding:7px;display:flex;color:#7d909c}.metric-icon svg{width:16px;height:16px}.metric strong{display:block;font-size:34px;font-weight:600;letter-spacing:-1px;line-height:1.25;margin:9px 0}.metric strong.smaller{font-size:26px;line-height:1.63}.metric small{font-size:10px;color:#99a3ab}.metric .tiny-dot{width:5px;height:5px}.panel{background:var(--surface);border:1px solid var(--line);border-radius:9px;margin-bottom:22px;overflow:hidden}.panel-header{padding:20px 22px;display:flex;align-items:center;justify-content:space-between;gap:12px}.panel-header h2{font-size:13px}.panel-header p{font-size:10px;margin:4px 0 0}.dashboard-grid{display:grid;grid-template-columns:1.85fr 1fr;gap:22px}.dashboard-grid>.panel{min-height:307px}.quick-start .panel-header{padding-bottom:10px}.quick-icon{color:#96aba3}.quick-start>a{display:flex;align-items:center;gap:11px;padding:11px 23px;font-size:11px}.quick-start>a:hover{background:#f8faf9}.quick-start>a>span:last-child{margin-left:auto;color:#a4b0b8}.quick-start small{display:block;font-size:9px;color:#99a4ac;margin-top:2px}.step{display:grid;place-items:center;border:1px solid #e4e9ed;background:#f9fafb;width:24px;height:24px;border-radius:50%;font-size:10px;color:#99a5ae}.step.done{background:#e8f7ed;color:#309967;border-color:#e0f1e7}.tip{margin:11px 22px 19px;padding:12px;background:#f6f9f8;border:1px solid #e9efec;border-radius:6px;color:#8d9b94;font-size:10px}.tip strong{color:#5e7669;font-weight:500}.chart-empty{position:relative;min-height:270px;display:grid;place-items:center;padding:20px 20px 47px}.chart-empty>div:nth-child(2){text-align:center;z-index:1;background:#ffffffd9;padding:14px}.chart-empty h3{font-size:12px;font-weight:500;margin:10px 0 5px}.chart-empty p{font-size:10px;max-width:240px;margin:auto;line-height:1.8}.chart-symbol{color:#69ac95;font-size:33px;line-height:1}.chart-grid{position:absolute;inset:0 25px 47px;background:repeating-linear-gradient(0deg,transparent 0,transparent 48px,#edf1f3 49px,#edf1f3 50px)}.chart-axis{position:absolute;bottom:18px;left:28px;right:28px;display:flex;justify-content:space-between;color:#9ea9b1;font-size:9px}.empty{text-align:center;padding:37px 20px 41px}.empty-icon{background:#f1f6f4;color:#86ab9c;width:43px;height:43px;border-radius:10px;display:grid;place-items:center;margin:0 auto 14px}.empty h3{font-size:12px;font-weight:500}.empty p{font-size:11px;margin:0}.count{font-size:9px;background:#f2f5f7;color:#83929c;padding:2px 6px;border-radius:5px;margin-left:4px}.table-link{font-size:10px;color:#359272;white-space:nowrap}.table-wrap{overflow-x:auto}table{width:100%;border-collapse:collapse;text-align:left}th{font-size:9px;letter-spacing:.8px;color:#8897a1;background:#fafbfc;font-weight:500;padding:12px 22px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);white-space:nowrap}td{font-size:11px;padding:16px 22px;border-bottom:1px solid #f0f3f5}tr:last-child td{border-bottom:0}.stream-name{display:flex;align-items:center;gap:11px;font-weight:600;white-space:nowrap}.stream-name small{display:block;font-size:9px;color:#91a0aa;font-weight:400;margin-top:3px}.stream-avatar{width:32px;height:32px;background:#edf3f0;color:#76a38d;display:grid;place-items:center;border-radius:7px}.stream-avatar svg{width:16px;height:16px}.record-dot{display:inline-block;width:5px;height:5px;background:#bdc7ce;border-radius:50%;margin-right:4px}.record-dot.on{background:#d9786d}.bottom-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:22px}.activity-row{display:flex;align-items:center;gap:12px;padding:12px 23px;border-top:1px solid #f4f6f7}.activity-row strong{font-size:10px;font-weight:500}.activity-row small{display:block;color:#9aa7af;font-size:9px;margin-top:2px}.activity-row time{margin-left:auto;font-size:9px;color:#9aa7af}.activity-dot{width:7px;height:7px;border-radius:50%;background:#8abea6;border:2px solid #edf6f0;box-sizing:content-box}.infrastructure>div:not(.panel-header){display:flex;justify-content:space-between;font-size:10px;padding:12px 23px;border-top:1px solid #f4f6f7;color:#7c8c97}.infrastructure strong{font-weight:500;color:#566b78}.status-text{color:#389775}.muted{color:var(--muted)}footer{font-size:9px;color:#8b99a3;margin:14px 0 0}footer>span{margin-left:12px;color:#a8b2ba}.footer-right{float:right}.date-label{font-size:11px;color:#7c8c96}.date-label span{font-size:9px;margin-left:5px;color:#a6b1b8}.form-panel{padding:24px}.form-panel h2{margin-bottom:17px}.form-grid{display:flex;flex-wrap:wrap;align-items:end;gap:15px;margin:14px 0}.form-grid label{flex:1;min-width:180px}.form-grid button{margin-bottom:1px}label{display:block;color:#627580;font-size:11px;font-weight:500;margin-bottom:12px}input,select{display:block;width:100%;border:1px solid #dce4e9;border-radius:6px;background:#fff;color:#344954;padding:10px 11px;min-height:38px;font-size:12px;margin-top:6px}input:focus,select:focus{outline:2px solid #9bd7c1;border-color:#349e79}input[readonly]{background:#f9fbfc;color:#5d7380;font-family:Consolas,monospace;font-size:11px}.notice{padding:13px 17px;border-radius:7px;font-size:12px;margin-bottom:20px;border:1px solid #dae8e2;background:#f1f8f4;color:#397259}.notice.error{border-color:#f2d8d8;background:#fff4f3;color:#a64a49}.notice.warning{background:#fffaf0;border-color:#eee2c7;color:#947744}.notice.info{background:#eff6fa;border-color:#dde9f0;color:#567b91}.actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:17px}.inline{display:inline}.copy-field{display:flex;align-items:stretch;gap:0;margin-top:6px}.copy-field input{margin:0;border-radius:6px 0 0 6px;min-width:0}.copy-field button{border:1px solid #dce4e9;border-left:0;background:#fff;color:#398767;border-radius:0 6px 6px 0;padding:0 14px;font-size:10px}.url-grid{display:grid;grid-template-columns:1fr;gap:3px}.plain{padding:0;margin-bottom:20px}.plain h2{font-size:22px;margin:3px 0}.details{display:grid;grid-template-columns:180px 1fr;font-size:12px;gap:16px;margin:25px 0}.details dt{color:#8797a2}.details dd{margin:0;overflow-wrap:anywhere}.video-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;padding:0 22px 22px}.video-card{border:1px solid var(--line);border-radius:8px;overflow:hidden}.video-card>a{display:block;position:relative;background:#0e202b;aspect-ratio:16/9}.video-card img{width:100%;height:100%;object-fit:cover}.play-overlay{position:absolute;inset:0;display:grid;place-items:center;font-size:26px;color:white}.video-card>div:last-child{padding:16px}.video-card h3{font-size:13px}.video-card p{font-size:11px}.video-placeholder{aspect-ratio:16/9;background:#edf2f4;display:flex;align-items:center;justify-content:center;gap:10px;color:#8398a6}.error-text{color:#b35b50}.search-label{margin:0}.search-label input{margin:0;padding:7px 10px;min-height:32px;font-size:11px}.toast{position:fixed;bottom:25px;left:50%;background:#183d2f;color:#fff;padding:12px 23px;border-radius:8px;box-shadow:0 4px 20px #0002;z-index:100;font-size:12px}.auth-page{min-height:100vh;background:radial-gradient(ellipse at 30% 20%,#e0efe7,transparent 60%),#f4f7f6;display:grid;place-items:center;padding:30px}.auth-card{width:100%;max-width:460px;background:white;padding:40px;border:1px solid #e2ebe6;border-radius:16px;box-shadow:0 20px 70px #253b2710}.auth-card .brand{color:#223b32;margin-bottom:35px;font-size:22px}.auth-card h1{font-size:29px;letter-spacing:-.8px}.auth-card p{font-size:12px;line-height:1.8}.auth-card label{font-size:12px;margin:18px 0}.auth-card li{font-size:12px;color:#667d71;margin-bottom:15px}.auth-card ol{padding-left:18px}.auth-card>p:last-child{font-size:10px;text-align:center;margin:25px 0 0}.login-art{display:flex;align-items:center;justify-content:center;gap:10px;height:100px;background:linear-gradient(110deg,#eff8f1,#f4f8f7);border-radius:12px;margin-bottom:27px}.signal-bar{width:9px;height:23px;border-radius:4px;background:#9dcbb4}.signal-bar:nth-child(2n){height:42px;background:#62b995}.signal-bar:nth-child(3n){height:58px;background:#208e69}.signal-bar:nth-child(4){height:74px;background:#126948}.menu-toggle{display:none}.bar-chart{display:flex;align-items:end;gap:5px;padding:25px;height:260px;overflow:auto}.bar-item{display:flex;flex-direction:column;align-items:center;min-width:17px;height:100%;justify-content:end;flex:1}.bar-item meter{writing-mode:vertical-lr;direction:rtl;height:180px;width:13px;accent-color:#2ca279}.bar-item small{font-size:8px;writing-mode:vertical-lr;margin-top:7px}.player-page{background:#101b24;color:white;min-height:100vh;display:flex;flex-direction:column;padding:20px}.player-page h1{font-size:20px}.player-toolbar{display:flex;align-items:center;gap:10px;margin-bottom:15px;flex-wrap:wrap}.player-toolbar input{width:300px;max-width:100%;margin:0}.player-toolbar button.selected{background:#237c5e;color:white}.player-frame{width:100%;flex:1;min-height:65vh;border:1px solid #263944;border-radius:8px;background:#000}.player-page p{font-size:12px;margin:12px 0 0}@media(min-width:1500px){.main{padding:40px 48px}.metrics{gap:23px}.metric{padding:25px}.dashboard-grid>.panel{min-height:350px}.quick-start>a{padding:14px 25px}.chart-empty{min-height:300px}}@media(max-width:1100px){.sidebar{width:210px;padding:24px 13px}.shell{margin-left:210px}.main{padding:26px 22px}.topbar{padding:0 22px}.metrics{gap:12px}.metric{padding:16px}.dashboard-grid{grid-template-columns:1.4fr 1fr;gap:15px}.status-banner>a{display:none}.metric strong{font-size:28px}.video-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:800px){.sidebar{transform:translateX(-100%);transition:transform .2s}.sidebar.open{transform:translateX(0);box-shadow:10px 0 30px #0003}.shell{margin-left:0}.menu-toggle{display:block;border:0;background:none;font-size:20px;color:#59706b;margin-right:15px}.topbar{justify-content:start;height:60px}.top-right{margin-left:auto}.main{padding:24px 18px}.page-heading{align-items:start}.heading-actions{flex-wrap:wrap;justify-content:end}.page-heading h1{font-size:25px}.metrics{grid-template-columns:repeat(2,1fr)}.dashboard-grid,.bottom-grid{grid-template-columns:1fr}.status-banner{padding:16px}.status-banner>.badge{margin-left:auto}.status-banner p{max-width:280px}.quick-start>a{padding:14px 23px}.details{grid-template-columns:130px 1fr}.footer-right{display:none}.page-heading .eyebrow{font-size:8px}.self-hosted{display:none}}@media(max-width:480px){.main{padding:20px 12px}.topbar{padding:0 14px}.page-heading{display:block}.heading-actions{justify-content:start;margin-top:16px}.status-banner{flex-wrap:wrap}.status-banner .badge{margin-left:53px}.metric{padding:14px}.metric strong{font-size:29px}.metric>div{font-size:10px}.metric-icon{padding:5px}.metric small{font-size:9px}.video-grid{grid-template-columns:1fr}.auth-card{padding:28px}.auth-page{padding:15px}.form-panel{padding:20px}.form-grid{display:block}.form-grid label{min-width:0}.details{grid-template-columns:1fr;gap:7px}.details dd{margin-bottom:12px}.panel-header{padding:18px}.status-banner p{max-width:230px}.search-label input{width:145px}.breadcrumb{font-size:10px}}
