:root{
  --sidebar:#101214;--sidebar2:#090b0d;--red:#ed1c24;--red2:#c90d15;--red-soft:#ffe9eb;
  --orange:#ff8b1a;--orange-soft:#fff1df;--blue:#1976ed;--blue-soft:#eaf2ff;
  --green:#18a35a;--green-soft:#e8f8ee;--yellow:#f0b51b;--yellow-soft:#fff5d9;
  --bg:#f4f6f9;--text:#15191f;--muted:#788291;--line:#e6e9ee;--shadow:0 7px 24px rgba(18,25,38,.055)
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text);font-family:Inter,Segoe UI,Roboto,Arial,sans-serif}
.app-shell{min-height:100vh}
.sidebar{width:258px;background:linear-gradient(180deg,#15181c 0%,#090b0d 100%);color:#dce1e7;position:fixed;inset:0 auto 0 0;display:flex;flex-direction:column;padding:12px 15px;z-index:1000}
.brand{padding:0 8px 18px}
.brand-logo{display:block;width:224px;height:91px;object-fit:contain;object-position:left center}
.brand-title{margin-left:15px;margin-top:1px}.brand-title strong{display:block;color:#fff;font-size:17px;line-height:1.1}.brand-title span{display:block;color:#b7c0ca;font-size:14px;margin-top:4px}
.sidebar nav{margin-top:8px}.sidebar a{display:flex;align-items:center;gap:14px;color:#b7c0ca;text-decoration:none;padding:12px 12px;border-radius:9px;margin:4px 0;font-size:14px;transition:.15s}.sidebar a i{width:18px;text-align:center;font-size:17px}.sidebar a:hover{background:#1d2228;color:#fff}.sidebar a.active{background:linear-gradient(90deg,#ed1c24,#d20e17);color:#fff;box-shadow:0 6px 15px rgba(237,28,36,.18)}.sidebar-bottom{margin-top:auto;padding-top:20px;border-top:1px solid rgba(255,255,255,.08)}
.main{margin-left:258px;width:calc(100% - 258px);min-height:100vh}
.topbar{height:68px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 27px;position:sticky;top:0;z-index:900}.topbar h1{font-size:20px;font-weight:750;margin:0;line-height:1}.topbar h1:after{content:"";display:block;width:82px;height:3px;background:var(--red);border-radius:2px;margin-top:17px}.user-area{display:flex;align-items:center;gap:17px}.notify{position:relative;color:#58616d;font-size:19px}.notify-dot{position:absolute;right:-8px;top:-8px;min-width:17px;height:17px;padding:0 4px;border-radius:10px;background:var(--red);color:#fff;font-size:9px;display:grid;place-items:center;border:2px solid #fff;font-weight:800}.user-pill{display:flex;align-items:center;gap:9px;font-size:13px;color:#3d4651}.avatar{width:35px;height:35px;border-radius:50%;background:var(--red);color:#fff;display:grid;place-items:center;font-weight:800}.chevron{font-size:11px;color:#737c87}
.content{padding:24px 27px;max-width:1600px}
.stat-card{background:#fff;border:1px solid var(--line);border-radius:13px;box-shadow:var(--shadow);padding:18px 18px 16px 21px;height:100%;position:relative;overflow:hidden}.stat-card:before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--red)}.stat-card.orange:before{background:var(--orange)}.stat-card.blue:before{background:var(--blue)}
.stat-label{font-size:13px;color:#697482}.stat-value{font-size:28px;line-height:1.05;font-weight:800;margin-top:6px}.stat-note{font-size:11px;color:#8a94a0;margin-top:8px}.stat-icon{width:43px;height:43px;border-radius:12px;background:var(--red-soft);color:var(--red);display:grid;place-items:center;font-size:20px}.stat-card.orange .stat-icon{background:var(--orange-soft);color:var(--orange)}.stat-card.blue .stat-icon{background:var(--blue-soft);color:var(--blue)}
.card-modern{background:#fff;border:1px solid var(--line);border-radius:13px;box-shadow:var(--shadow);overflow:hidden}.card-head{min-height:70px;padding:16px 20px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between}.card-title{display:flex;gap:11px;align-items:flex-start}.card-title>i{color:var(--red);font-size:19px;margin-top:2px}.card-title strong{font-size:16px;font-weight:750}.kpi-sub{font-size:11px;color:#8b95a1;margin-top:2px}.btn-primary{background:var(--red)!important;border-color:var(--red)!important;color:#fff!important;font-weight:700;border-radius:7px}.btn-primary:hover{background:var(--red2)!important;border-color:var(--red2)!important}
.table>:not(caption)>*>*{padding:11px 14px;vertical-align:middle;border-bottom-color:#edf0f3}.table th{font-size:10px;color:#5e6875;font-weight:800;text-transform:uppercase;white-space:nowrap}.table td{font-size:12px}.table tbody tr:hover{background:#fafbfc}.service-icon{width:30px;height:30px;border-radius:8px;background:#f0f3f7;display:grid;place-items:center;color:#3d4855;font-size:14px;flex:none}.service-name{font-weight:700;color:#303944}.date-pill{display:inline-flex;padding:5px 9px;border-radius:10px;font-weight:750;font-size:10px;white-space:nowrap}.date-red{background:#ff5c64;color:#fff}.date-orange{background:#ff7f2b;color:#fff}.date-yellow{background:#ffd653;color:#6b5100}.date-blue{background:#b9d7ff;color:#1260b9}.date-green{background:#bcefcf;color:#168047}
.badge-soft{display:inline-flex;align-items:center;gap:5px;padding:5px 8px;border-radius:9px;font-weight:750;font-size:10px;white-space:nowrap}.badge-soft i{font-size:10px}.badge-green{background:var(--green-soft);color:#168248}.badge-yellow{background:var(--yellow-soft);color:#946000}.badge-orange{background:var(--orange-soft);color:#a75b00}.badge-red{background:var(--red-soft);color:#c41d27}.badge-blue{background:var(--blue-soft);color:#176fd7}.badge-gray{background:#eef0f3;color:#5f6772}
.action-link{color:#28313b;text-decoration:none;font-size:15px}.action-link:hover{color:var(--red)}
.chart-wrap{height:270px;padding:14px 18px 4px}.empty{padding:45px 20px;text-align:center;color:#7f8996}.empty i{display:block;font-size:35px;color:#cbd1d8;margin-bottom:9px}.empty strong{display:block;color:#65707d;font-size:13px}.alert-critical{background:#fff0f1;border-radius:10px;padding:12px 14px}.alert-critical .service-icon{background:#fff;color:var(--red)}.alert-critical strong{font-size:12px}
.quick-card{padding:16px 17px}.quick-icon{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;font-size:18px}
.footer{padding:12px 27px 22px;color:#9aa4b0;font-size:11px}
.form-control,.form-select{border-radius:9px;padding:10px 12px;border-color:#d9e0e8}.form-control:focus,.form-select:focus{border-color:var(--red);box-shadow:0 0 0 .2rem rgba(237,28,36,.08)}.form-label{font-size:13px;font-weight:700}
.login-page{min-height:100vh;background:linear-gradient(135deg,#f2f3f5,#fafafa);display:grid;place-items:center;padding:20px}.login-card{width:min(430px,100%);background:#fff;border:1px solid var(--line);border-radius:20px;padding:35px;box-shadow:0 20px 50px rgba(25,30,40,.09)}.login-logo{text-align:center;margin-bottom:25px}.login-logo img{width:260px;height:100px;object-fit:contain}.login-logo h1{font-size:22px;margin:12px 0 3px}.login-logo p{color:#7a8494;font-size:13px}
.mobile-toggle{display:none;border:0;background:transparent;font-size:24px;margin-right:10px}
@media(max-width:1000px){.sidebar{transform:translateX(-100%);transition:.2s}.main{margin-left:0;width:100%}.mobile-toggle{display:inline-block}.sidebar-open .sidebar{transform:translateX(0)}.content{padding:20px}.topbar{padding:0 20px}.user-pill{display:none}}
@media(max-width:600px){.content{padding:14px}.topbar{height:64px}.stat-value{font-size:23px}.brand-logo{width:210px;height:82px}}