:root{color-scheme:dark;--bg:#050816;--panel:rgba(13,22,45,.92);--panel-2:rgba(18,29,57,.84);--border:rgba(148,163,184,.16);--text:#f8fafc;--muted:#94a3b8;--blue:#38bdf8;--violet:#8b5cf6;--green:#34d399;--orange:#fb923c}
*{margin:0;padding:0;box-sizing:border-box}body{min-height:100vh;background:radial-gradient(circle at 20% 0%,rgba(56,189,248,.08),transparent 30%),radial-gradient(circle at 80% 10%,rgba(139,92,246,.08),transparent 30%),var(--bg);color:var(--text);font-family:Inter,Arial,sans-serif}button,select{font:inherit}button{cursor:pointer}.app{display:flex;min-height:100vh}
.sidebar{width:250px;min-height:100vh;padding:22px 16px;background:rgba(7,13,30,.94);border-right:1px solid var(--border);position:fixed;left:0;top:0;bottom:0;z-index:20}.brand{display:flex;align-items:center;gap:12px;padding:8px;margin-bottom:35px}.brand-icon{width:42px;height:42px;display:grid;place-items:center;border-radius:12px;background:linear-gradient(135deg,var(--blue),var(--violet));font-weight:800;font-size:20px;box-shadow:0 0 25px rgba(56,189,248,.2)}.brand strong{display:block;font-size:16px}.brand small{color:var(--muted);font-size:11px}.menu{display:flex;flex-direction:column;gap:6px}.menu a{color:var(--muted);text-decoration:none;padding:13px 14px;border-radius:10px;display:flex;gap:12px;align-items:center;transition:.2s}.menu a:hover,.menu a.active{color:var(--text);background:rgba(56,189,248,.08)}.menu a.active{border:1px solid rgba(56,189,248,.15)}.sidebar-footer{position:absolute;left:20px;right:20px;bottom:25px;padding:12px;border-radius:10px;background:rgba(52,211,153,.06);color:var(--muted);font-size:12px}
.main{width:calc(100% - 250px);margin-left:250px}.topbar{min-height:82px;padding:18px 30px;border-bottom:1px solid var(--border);background:rgba(5,8,22,.72);backdrop-filter:blur(14px);display:flex;align-items:center;justify-content:space-between;gap:20px}.topbar h1{font-size:22px}.topbar p{color:var(--muted);font-size:13px;margin-top:3px}.top-actions{display:flex;align-items:center;gap:10px}.icon-btn,.menu-toggle{width:40px;height:40px;border:1px solid var(--border);background:var(--panel);color:var(--text);border-radius:10px}.menu-toggle{display:none}.user{display:flex;align-items:center;gap:10px;margin-left:8px}.avatar{width:38px;height:38px;display:grid;place-items:center;border-radius:50%;background:linear-gradient(135deg,var(--violet),var(--blue));font-weight:700}.user strong{display:block;font-size:13px}.user small{color:var(--green);font-size:11px}
.content{padding:30px}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.card{background:var(--panel);border:1px solid var(--border);border-radius:16px;box-shadow:0 15px 45px rgba(0,0,0,.12)}.stat-card{padding:20px;display:flex;align-items:center;gap:15px}.stat-icon{width:48px;height:48px;display:grid;place-items:center;border-radius:13px;font-size:20px}.stat-icon.blue{color:var(--blue);background:rgba(56,189,248,.1)}.stat-icon.violet{color:var(--violet);background:rgba(139,92,246,.1)}.stat-icon.green{color:var(--green);background:rgba(52,211,153,.1)}.stat-icon.orange{color:var(--orange);background:rgba(251,146,60,.1)}.stat-card span{display:block;color:var(--muted);font-size:12px}.stat-card strong{display:block;margin:5px 0;font-size:25px}.stat-card small{font-size:11px}.positive{color:var(--green)}.warning-text{color:var(--orange)}
.grid{display:grid;grid-template-columns:2fr 1fr;gap:18px;margin-top:18px}.chart-card,.status-card{padding:20px}.card-header{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:20px}.card-header h2{font-size:16px}.card-header p{color:var(--muted);font-size:12px;margin-top:4px}select{background:var(--panel-2);color:var(--text);border:1px solid var(--border);border-radius:8px;padding:8px 10px}
.chart{height:230px;position:relative;display:flex;align-items:end;padding:20px 10px 0}.chart-line{position:absolute;left:10px;right:10px;top:50%;border-top:1px dashed var(--border)}.chart-bars{width:100%;height:100%;display:flex;align-items:end;gap:12px;position:relative}.chart-bars i{flex:1;display:block;border-radius:6px 6px 2px 2px;background:linear-gradient(to top,var(--violet),var(--blue));opacity:.85}
.service{display:flex;justify-content:space-between;align-items:center;padding:14px 0;border-bottom:1px solid var(--border);font-size:13px}.service:last-child{border-bottom:0}.service div{display:flex;align-items:center;gap:8px}.status-dot{width:8px;height:8px;border-radius:50%;display:inline-block;background:var(--green);box-shadow:0 0 10px rgba(52,211,153,.5)}.status-dot.warning{background:var(--orange);box-shadow:0 0 10px rgba(251,146,60,.5)}.online{color:var(--green);font-size:12px}
.table-card{margin-top:18px;padding:20px}.btn{border:0;border-radius:9px;padding:9px 15px;color:white}.btn.primary{background:linear-gradient(135deg,var(--blue),var(--violet))}.table-wrapper{overflow-x:auto}table{width:100%;border-collapse:collapse;font-size:13px}th{text-align:left;color:var(--muted);font-weight:500;font-size:11px;padding:12px;border-bottom:1px solid var(--border)}td{padding:15px 12px;border-bottom:1px solid var(--border)}.badge{display:inline-flex;padding:5px 9px;border-radius:20px;font-size:11px}.badge.success{color:var(--green);background:rgba(52,211,153,.08)}.badge.warning{color:var(--orange);background:rgba(251,146,60,.08)}.action{border:0;background:transparent;color:var(--muted)}footer{padding:20px 30px 30px;color:var(--muted);font-size:11px}
@media(max-width:1100px){.stats{grid-template-columns:repeat(2,1fr)}.grid{grid-template-columns:1fr}}@media(max-width:760px){.sidebar{transform:translateX(-100%);transition:.25s}.sidebar.open{transform:translateX(0)}.main{width:100%;margin-left:0}.menu-toggle{display:block}.topbar{padding:15px 18px}.top-actions .icon-btn{display:none}.user div:last-child{display:none}.content{padding:18px}.stats{grid-template-columns:1fr}.chart-bars{gap:5px}}