:root{--bg-app:#0b1120;--bg-panel:#111827;--bg-card:#161f31;--bg-card-hover:#1b2740;--border:#1f2a3d;--text:#e5edff;--text-dim:#8a97b0;--text-mute:#5c6a86;--blue:#3b82f6;--green:#22c55e;--purple:#a855f7;--red:#ef4444;--radius:16px;font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif}*{box-sizing:border-box;margin:0;padding:0}body{background:var(--bg-app);color:var(--text);-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}.app-frame{min-height:100vh;display:flex}.app-shell{background:var(--bg-app);flex:1;display:flex;overflow:hidden}.sidebar{background:var(--bg-panel);border-right:1px solid var(--border);flex-direction:column;flex-shrink:0;width:232px;padding:22px 16px;display:flex}.brand{align-items:center;gap:12px;padding:0 8px 26px;display:flex}.brand-logo{color:#fff;background:linear-gradient(135deg,#3b82f6,#6366f1);border-radius:11px;flex-shrink:0;place-items:center;width:38px;height:38px;display:grid}.brand-name{font-size:15px;font-weight:700;line-height:1.2}.brand-sub{color:var(--text-mute);font-size:11px}.nav{flex-direction:column;gap:4px;display:flex}.nav-item{color:var(--text-dim);cursor:pointer;text-align:left;background:0 0;border:none;border-radius:10px;align-items:center;gap:12px;width:100%;padding:11px 12px;font-size:14px;transition:background .15s,color .15s;display:flex}.nav-item:hover{background:var(--bg-card);color:var(--text)}.nav-item.active{color:#fff;background:linear-gradient(90deg,#3b82f638,#3b82f60d);box-shadow:inset 0 0 0 1px #3b82f64d}.nav-spacer{flex:1}.logout{color:var(--text-mute);margin-top:8px}.main{flex-direction:column;flex:1;min-width:0;display:flex}.topbar{border-bottom:1px solid var(--border);align-items:center;gap:16px;padding:18px 26px;display:flex}.search{background:var(--bg-card);border:1px solid var(--border);max-width:340px;color:var(--text-mute);border-radius:10px;flex:1;align-items:center;gap:10px;padding:10px 14px;display:flex}.search input{color:var(--text);background:0 0;border:none;outline:none;width:100%;font-size:14px}.topbar-spacer{flex:1}.icon-btn{background:var(--bg-card);border:1px solid var(--border);width:38px;height:38px;color:var(--text-dim);cursor:pointer;border-radius:10px;place-items:center;display:grid}.avatar{object-fit:cover;border:2px solid #3b82f680;border-radius:50%;width:38px;height:38px}.content{flex:1;padding:24px 26px 32px;overflow-y:auto}.page-title{font-size:20px;font-weight:700}.page-sub{color:var(--text-dim);margin-top:3px;margin-bottom:22px;font-size:13px}.stats-row{grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:18px;display:grid}.stat-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:18px}.stat-head{color:var(--text-dim);justify-content:space-between;align-items:center;font-size:13px;display:flex}.stat-head-left{align-items:center;gap:8px;display:flex}.stat-value{background:linear-gradient(135deg,#dbeafe,#93c5fd);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;margin:14px 0 10px;font-size:28px;font-weight:700}.stat-foot{color:var(--text-mute);align-items:center;gap:8px;font-size:12px;display:flex}.trend{align-items:center;gap:3px;font-weight:600;display:inline-flex}.trend.up{color:var(--green)}.trend.down{color:var(--red)}.grid-2{grid-template-columns:2fr 1fr;gap:16px;margin-bottom:18px;display:grid}.grid-3{grid-template-columns:repeat(3,1fr);gap:16px;display:grid}.panel{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:20px}.panel-head{justify-content:space-between;align-items:flex-start;margin-bottom:18px;display:flex}.panel-title{font-size:15px;font-weight:700}.panel-sub{color:var(--text-dim);margin-top:2px;font-size:12px}.select{background:var(--bg-panel);border:1px solid var(--border);color:var(--text-dim);cursor:pointer;border-radius:8px;align-items:center;gap:6px;padding:6px 10px;font-size:12px;display:flex}.chart-box{width:100%;height:240px}.cost-total{border-bottom:1px solid var(--border);color:var(--text-dim);justify-content:space-between;align-items:center;margin-bottom:16px;padding-bottom:16px;font-size:13px;display:flex}.cost-total b{color:var(--text);font-size:18px}.cost-item{margin-bottom:18px}.cost-item-head{justify-content:space-between;margin-bottom:8px;font-size:13px;display:flex}.cost-item-head b{font-weight:600}.bar-track{background:var(--bg-panel);border-radius:6px;height:7px;position:relative;overflow:hidden}.bar-fill{border-radius:6px;height:100%}.cost-pct{color:var(--text-mute);text-align:right;margin-top:4px;font-size:11px}.donut-wrap{position:relative}.donut-center{text-align:center;pointer-events:none;flex-direction:column;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.donut-center small{color:var(--text-dim);font-size:11px}.donut-center b{font-size:22px}.donut-center span{color:var(--text-mute);font-size:11px}@media (width<=1100px){.stats-row{grid-template-columns:repeat(2,1fr)}.grid-2,.grid-3{grid-template-columns:1fr}}@media (width<=720px){.app-frame{padding:0}.app-shell{border-radius:0;flex-direction:column}.sidebar{flex-direction:row;width:100%;padding:12px;overflow-x:auto}.brand{padding:0 12px 0 4px}.nav{flex-direction:row}.nav-spacer,.logout{display:none}.stats-row{grid-template-columns:1fr}}.toolbar{flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:18px;display:flex}.toolbar .search{flex:0 300px;max-width:300px}.filter-group{flex-wrap:wrap;gap:8px;display:flex}.filter-btn{background:var(--bg-card);border:1px solid var(--border);color:var(--text-dim);cursor:pointer;border-radius:9px;padding:8px 14px;font-size:13px;transition:all .15s}.filter-btn:hover{color:var(--text)}.filter-btn.active{color:#93c5fd;background:#3b82f626;border-color:#3b82f680}.toolbar-spacer{flex:1}.table-wrap{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}table{border-collapse:collapse;width:100%;font-size:13px}thead th{text-align:left;color:var(--text-mute);text-transform:uppercase;letter-spacing:.4px;border-bottom:1px solid var(--border);padding:14px 18px;font-size:12px;font-weight:600}tbody td{border-bottom:1px solid var(--border);color:var(--text-dim);padding:14px 18px}tbody tr:last-child td{border-bottom:none}tbody tr{transition:background .15s}tbody tr:hover{background:var(--bg-card-hover)}td .cell-strong{color:var(--text);font-weight:500}.empty-row{text-align:center;color:var(--text-mute);padding:40px!important}.badge{border-radius:20px;align-items:center;gap:6px;padding:4px 10px;font-size:12px;font-weight:600;display:inline-flex}.badge .dot{background:currentColor;border-radius:50%;width:7px;height:7px}.badge.online,.badge.completed,.badge.success,.badge.low{color:#4ade80;background:#22c55e1f}.badge.warning,.badge.away,.badge.scheduled,.badge.medium,.badge.in-progress{color:#facc15;background:#eab3081f}.badge.critical,.badge.offline,.badge.high{color:#f87171;background:#ef44441f}.badge.info{color:#60a5fa;background:#3b82f61f}.btn{border:1px solid var(--border);background:var(--bg-panel);color:var(--text-dim);cursor:pointer;border-radius:8px;align-items:center;gap:6px;padding:7px 13px;font-size:12px;font-weight:500;transition:all .15s;display:inline-flex}.btn:hover{color:var(--text);border-color:#33415a}.btn.primary{color:#93c5fd;background:#3b82f626;border-color:#3b82f666}.btn.primary:hover{background:#3b82f640}.btn:disabled{opacity:.4;cursor:not-allowed}.mini-stat{align-items:center;gap:14px;display:flex}.mini-stat-icon{border-radius:12px;flex-shrink:0;place-items:center;width:46px;height:46px;display:grid}.mini-stat .stat-value{margin:2px 0 0;font-size:24px}.mini-stat-label{color:var(--text-dim);font-size:13px}.mini-stat-sub{color:var(--text-mute);font-size:11px}.activity-item{border-bottom:1px solid var(--border);align-items:flex-start;gap:12px;padding:13px 0;display:flex}.activity-item:last-child{border-bottom:none}.activity-dot{border-radius:50%;flex-shrink:0;width:9px;height:9px;margin-top:5px}.activity-dot.success{background:#22c55e}.activity-dot.critical{background:#ef4444}.activity-dot.warning{background:#eab308}.activity-dot.info{background:#3b82f6}.activity-text{color:var(--text);font-size:13px}.activity-time{color:var(--text-mute);margin-top:2px;font-size:11px}.team-grid{grid-template-columns:repeat(4,1fr);gap:16px;display:grid}.team-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);text-align:center;padding:22px}.team-avatar{border:2px solid var(--border);border-radius:50%;width:64px;height:64px;margin:0 auto 12px;position:relative}.team-name{font-size:14px;font-weight:600}.team-role{color:var(--text-dim);margin:3px 0 12px;font-size:12px}.insight-grid{grid-template-columns:repeat(2,1fr);gap:16px;display:grid}.insight-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:22px}.insight-head{justify-content:space-between;align-items:center;margin-bottom:12px;display:flex}.insight-icon{color:#fff;background:linear-gradient(135deg,#3b82f6,#8b5cf6);border-radius:11px;place-items:center;width:40px;height:40px;display:grid}.insight-title{margin-bottom:8px;font-size:15px;font-weight:600}.insight-desc{color:var(--text-dim);margin-bottom:14px;font-size:13px;line-height:1.6}.insight-foot{justify-content:space-between;align-items:center;display:flex}.tag{background:var(--bg-panel);color:var(--text-dim);border:1px solid var(--border);border-radius:6px;padding:4px 10px;font-size:11px}.impact{font-size:12px;font-weight:600}@media (width<=1100px){.team-grid{grid-template-columns:repeat(2,1fr)}.insight-grid{grid-template-columns:1fr}}@media (width<=720px){.team-grid{grid-template-columns:1fr}.table-wrap{overflow-x:auto}table{min-width:560px}}