:root{--navy:#0b2747;--navy2:#071a31;--blue:#0878e9;--cyan:#1ba7ff;--bg:#f3f6fa;--panel:#fff;--text:#153453;--muted:#6e8196;--line:#dde5ee;--shadow:0 8px 22px rgba(35,68,105,.10);--green:#28b96b;--purple:#7c49df;--orange:#ff9818;--red:#ef4654}
*{box-sizing:border-box}html,body{margin:0;font-family:Inter,Segoe UI,Arial,sans-serif;background:var(--bg);color:var(--text)}a{text-decoration:none;color:inherit}button,input,select,textarea{font:inherit}
.app-shell{display:grid;grid-template-columns:255px 1fr;min-height:100vh}aside{background:linear-gradient(180deg,var(--navy),var(--navy2));color:#dce9f5;position:sticky;top:0;height:100vh;padding:10px 12px;overflow-y:auto}.sidebar-logo{height:92px;display:flex;align-items:center;padding:2px 8px 12px}.sidebar-logo img{width:215px;filter:brightness(0) invert(1)}nav a{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:7px;margin:2px 0;color:#b8c9da;font-size:13px}nav a:hover,.nav-home{background:linear-gradient(90deg,#0b8cff,#0872dd);color:#fff}.menu-title{font-size:9px;letter-spacing:.15em;color:#6f8aa6;margin:14px 11px 6px}.sidebar-version{margin-top:22px;border:1px solid #234363;background:#0e2b49;border-radius:9px;padding:10px;display:flex;gap:8px;align-items:center}.sidebar-version img{width:55px;filter:brightness(0) invert(1)}.sidebar-version b,.sidebar-version small{display:block}.sidebar-version small{color:#8eabc4}.copyright{font-size:10px;color:#7893aa;line-height:1.6;padding:12px 8px}
.content-shell{min-width:0}.topbar{height:64px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 28px;position:sticky;top:0;z-index:10}.hamb{border:0;background:none;font-size:20px;margin-right:22px;color:#274866;cursor:pointer}.search{width:min(440px,40vw);background:#f8fafc;border:1px solid #e0e7ef;border-radius:7px;padding:8px 12px;color:#688097}.search input{border:0;outline:0;background:transparent;width:90%;margin-left:7px}.top-actions{margin-left:auto;display:flex;align-items:center;gap:18px;font-size:12px}.admin-avatar{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#587794;color:#fff}.admin-name small,.top-date small{display:block;color:#8193a6}.top-date{text-align:right}
main{padding:26px 28px 40px}.dashboard-head,.page-head{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:20px}.dashboard-head h1,.page-head h1{margin:0;font-size:28px}.dashboard-head p,.page-head p{margin:5px 0 0;color:var(--muted)}.quick-top{display:flex;gap:10px;flex-wrap:wrap}.btn{display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:6px;background:linear-gradient(#1187f1,#056ccc);color:#fff;padding:10px 16px;font-weight:700;box-shadow:0 4px 9px rgba(0,111,214,.18);cursor:pointer}.btn.ghost{background:#fff;color:#244562;border:1px solid var(--line);box-shadow:none}.btn.secondary{background:#536a80}.btn.success{background:var(--green)}.btn.danger{background:var(--red)}
.metric-grid{display:grid;gap:14px;margin-bottom:18px}.metric-grid.five{grid-template-columns:repeat(5,1fr)}.metric-grid.four{grid-template-columns:repeat(4,1fr)}.metric{min-height:112px;border-radius:8px;color:#fff;padding:17px;display:flex;align-items:center;gap:14px;box-shadow:var(--shadow)}.metric.blue{background:linear-gradient(135deg,#1595f9,#096fd8)}.metric.green{background:linear-gradient(135deg,#39c878,#20a95e)}.metric.purple{background:linear-gradient(135deg,#8d5cf0,#6e38d2)}.metric.orange{background:linear-gradient(135deg,#ffa721,#f18409)}.metric.red{background:linear-gradient(135deg,#ff5f67,#e83b4c)}.metric.gray{background:linear-gradient(135deg,#a9aeb4,#858b91)}.metric-icon{width:54px;height:54px;border-radius:8px;background:#ffffff24;display:grid;place-items:center;font-size:29px}.metric strong{display:block;font-size:26px}.metric span{display:block;font-weight:600;margin:2px 0}.metric small{opacity:.85}
.panel,.card{background:#fff;border:1px solid var(--line);border-radius:8px;box-shadow:0 2px 6px rgba(35,68,105,.05);padding:17px}.panel h2,.panel h3{margin-top:0}.resource-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px}.resource-grid.three{grid-template-columns:repeat(3,1fr)}.resource{text-align:center}.resource h3,.traffic-panel h3{text-align:left;font-size:14px}.donut{--pct:25;width:126px;height:126px;border-radius:50%;margin:14px auto;background:conic-gradient(#2b9ee9 calc(var(--pct)*1%),#e8edf3 0);position:relative;display:grid;place-items:center}.donut:after{content:"";position:absolute;width:84px;height:84px;border-radius:50%;background:#fff}.donut b,.donut span{position:relative;z-index:1}.donut b{font-size:22px}.donut span{font-size:10px;color:var(--muted);margin-top:28px;position:absolute}.green-ring{background:conic-gradient(#34bd74 calc(var(--pct)*1%),#e8edf3 0)}.purple-ring{background:conic-gradient(#7550dd calc(var(--pct)*1%),#e8edf3 0)}.resource p{font-size:11px;color:var(--muted)}
.two-col{display:grid;grid-template-columns:1.3fr 1fr;gap:14px;margin-bottom:18px}.three-col{display:grid;grid-template-columns:1fr .9fr 1fr;gap:14px}.section-title{display:flex;justify-content:space-between;align-items:center}.section-title a,.link{color:#0780e8}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse}th,td{border-bottom:1px solid #e5ebf1;padding:10px 9px;text-align:left;font-size:12px}th{color:#6e8296;font-weight:600}td a{color:#0879df}.table-sub{display:block;color:#8798a9}.status-dot{width:9px;height:9px;border-radius:50%;display:inline-block;margin-right:5px}.status-dot.ok{background:#18b755}.status-dot.off{background:#9ba8b4}.quick-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.quick-grid a{min-height:78px;border-radius:7px;background:#148cf1;color:#fff;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;font-size:22px}.quick-grid a:nth-child(2){background:#2dbb68}.quick-grid a:nth-child(3){background:#7550df}.quick-grid a:nth-child(4){background:#f49a18}.quick-grid a:nth-child(5){background:#ee4553}.quick-grid a:nth-child(6){background:#15a9af}.quick-grid a:nth-child(7){background:#40596f}.quick-grid a:nth-child(8){background:#5476a0}.quick-grid span{font-size:10px;margin-top:6px}.bar-chart{height:185px;display:flex;align-items:flex-end;gap:8px;padding:15px 4px 20px;border-bottom:1px solid #dfe7ef}.bar-chart i{flex:1;background:#168ce8;min-height:8px;position:relative}.bar-chart i:after{content:"";position:absolute;bottom:0;left:0;right:0;height:24%;background:#29b867}.bar-chart span{position:absolute;bottom:-18px;font-style:normal;font-size:9px;color:#7b8da0}
.form-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:18px}.form-stack{display:grid;gap:14px}.span-3{grid-column:span 3}label{font-size:11px;color:#637b90}input,select,textarea{width:100%;margin-top:5px;padding:10px;border:1px solid #cfdbe6;border-radius:5px;background:#fff;color:#173650}textarea{resize:vertical}.check{display:flex;align-items:center;gap:7px}.check input,.radio-row input{width:auto;margin:0}.mini-btn{display:inline-block;background:#2d82c7;color:#fff;padding:7px 10px;border-radius:5px}.note,.alert{padding:12px 14px;border-radius:6px;background:#eaf5ff;border:1px solid #cfe9ff;margin:12px 0}.muted{color:var(--muted)}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:18px}.cards.four{grid-template-columns:repeat(4,1fr)}.stat small{display:block;color:var(--muted)}.stat strong{font-size:28px;display:block;margin-top:5px}.small-value{font-size:18px!important}.mono{font-family:Consolas,monospace;background:#f3f7fa;border:1px solid #dae4ed;padding:10px;border-radius:5px;word-break:break-all}
.settings-tabs{background:#267bb7;color:#fff;border-radius:4px;display:flex;overflow:auto;margin-bottom:18px}.settings-tabs a{padding:12px 14px;font-size:11px;white-space:nowrap}.settings-tabs .active{background:#3b8cca}.settings-logo{max-width:320px}.info-list{display:grid;grid-template-columns:190px 1fr}.info-list dt,.info-list dd{margin:0;padding:10px 0;border-bottom:1px solid #e4eaf0}.info-list dt{color:#7f8e9c;font-size:11px}.green-badge{background:#2bb969!important;color:#fff}.radio-row{display:flex;align-items:flex-start;gap:12px;padding:15px 5px;border-bottom:1px solid #e4eaf0}.radio-row span b,.radio-row span small{display:block}.radio-row span small{margin-top:4px}.health-top{display:flex;justify-content:space-between}.health-top span{font-size:11px;color:var(--muted)}.health-ok{color:#1daf5e}.health-bad{color:#e14954}.health-values{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:18px 0}.health-values div{background:#f5f8fb;padding:9px;border-radius:5px}.health-values span,.health-values strong{display:block}.health-values span{font-size:9px;color:#8294a5}.health-values strong{font-size:18px}
.hq-nav{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:18px;padding:8px;background:#fff;border:1px solid var(--line);border-radius:7px}.hq-nav a{padding:8px 10px;border-radius:5px;color:#526b82}.hq-nav a:hover{background:#eaf4fe;color:#0679e3}.studio-shell{display:grid;grid-template-columns:minmax(0,2fr) 1fr;gap:14px}.studio-frame{background:#000;border-radius:8px;overflow:hidden;min-height:500px}.studio-frame iframe{width:100%;height:500px;border:0}.player-layout{grid-template-columns:1fr 1.4fr}
.login-card{max-width:400px;margin:10vh auto;background:#fff;border:1px solid var(--line);border-radius:10px;padding:25px;box-shadow:var(--shadow)}
@media(max-width:1200px){.metric-grid.five{grid-template-columns:repeat(3,1fr)}.resource-grid{grid-template-columns:repeat(2,1fr)}.quick-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:900px){.app-shell{grid-template-columns:1fr}aside{position:fixed;z-index:50;left:-270px;width:255px;transition:.25s}.sidebar-open aside{left:0}.top-actions .top-date,.admin-name{display:none}.metric-grid.five,.metric-grid.four,.resource-grid,.resource-grid.three,.two-col,.three-col,.cards,.cards.four,.form-grid,.studio-shell,.player-layout{grid-template-columns:1fr}.span-3{grid-column:auto}.quick-top{display:none}.search{width:55vw}.topbar{padding:0 14px}main{padding:18px}.studio-frame,.studio-frame iframe{min-height:400px;height:400px}}

.btn.small{padding:6px 10px;font-size:12px;text-decoration:none;display:inline-block}.btn.danger,.danger{background:#8f1d2c;color:#fff}.checks{display:flex;gap:14px;flex-wrap:wrap;margin:14px 0}.login-card{max-width:480px;margin:6vh auto;padding:28px;background:#fff;border-radius:16px}.login-card label{display:block;margin:12px 0 5px}.login-card input{width:100%;padding:10px}.login-card button{margin-top:16px;padding:11px 18px}