:root{--navy:#0d1b2f;--navy2:#132945;--orange:#f28c28;--blue:#2458a6;--green:#22a06b;--red:#d94d4d;--bg:#f4f7fb;--text:#162235;--muted:#6f7d90;--line:#e5eaf1;--white:#fff;--shadow:0 12px 32px rgba(22,34,53,.08)}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Inter,Arial,sans-serif;color:var(--text);background:var(--bg)}a{text-decoration:none;color:inherit}.app-shell{display:flex;min-height:100vh}.sidebar{position:fixed;left:0;top:0;bottom:0;width:258px;background:linear-gradient(180deg,#0b182b,#102640);color:#d9e3ef;z-index:20;padding:18px 14px;overflow-y:auto}.side-brand{display:flex;gap:12px;align-items:center;padding:8px 8px 22px;border-bottom:1px solid rgba(255,255,255,.08)}.brand-icon{width:42px;height:42px;border-radius:12px;background:linear-gradient(135deg,#f7a13a,#e87517);display:grid;place-items:center;color:white;font-size:20px;box-shadow:0 8px 20px rgba(242,140,40,.28)}.side-brand strong{display:block;font-size:19px;letter-spacing:.7px}.side-brand span{font-size:10px;color:#91a4bb}.nav-caption{font-size:10px;color:#7288a2;letter-spacing:1.5px;font-weight:700;margin:22px 10px 8px}.nav-item{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:9px;color:#c6d2df;font-size:13px;margin:3px 0;position:relative}.nav-item i{width:18px;text-align:center;color:#93a7bf}.nav-item:hover,.nav-item[href="Dashboard.aspx"]{background:rgba(255,255,255,.08);color:white}.nav-item:hover i,.nav-item[href="Dashboard.aspx"] i{color:#f8a345}.api-dot{margin-left:auto;width:7px;height:7px;border-radius:50%;background:#39d98a;box-shadow:0 0 0 4px rgba(57,217,138,.1)}.side-bottom{margin-top:28px;border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:12px;display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.03)}.secure-dot{width:9px;height:9px;background:#39d98a;border-radius:50%;box-shadow:0 0 0 5px rgba(57,217,138,.08)}.side-bottom b,.side-bottom small{display:block}.side-bottom b{font-size:11px;color:#dff6e9}.side-bottom small{font-size:9px;color:#7f95ae;margin-top:2px}.main-content{margin-left:258px;min-width:0;flex:1}.topbar{height:70px;background:white;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 24px;position:sticky;top:0;z-index:10}.top-title span,.top-title small{display:block}.top-title span{font-weight:700;font-size:13px}.top-title small{color:var(--muted);font-size:10px;margin-top:2px}.top-actions{display:flex;align-items:center;gap:10px}.sync-pill{display:flex;align-items:center;gap:7px;padding:7px 10px;background:#f6f8fb;border:1px solid var(--line);border-radius:9px;font-size:9px;color:var(--muted)}.sync-pill i{color:var(--green)}.sync-pill b{color:var(--text);font-weight:600}.icon-btn{border:1px solid var(--line);background:white;width:36px;height:36px;border-radius:9px;display:grid;place-items:center;position:relative;color:#5d6b7e;cursor:pointer}.notif{position:absolute;right:-3px;top:-5px;width:16px;height:16px;border-radius:50%;background:var(--red);color:white;font-size:8px;display:grid;place-items:center}.user-chip{display:flex;align-items:center;gap:8px;padding:4px 8px}.avatar{width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,#173d69,#285c96);color:white;display:grid;place-items:center;font-size:11px;font-weight:700}.user-chip strong,.user-chip span{display:block}.user-chip strong{font-size:10px}.user-chip span{font-size:8px;color:var(--muted);margin-top:2px}.user-chip>i{font-size:9px;color:#9ba7b6}.mobile-menu{display:none}.page-content{padding:24px}.page-head{display:flex;justify-content:space-between;gap:20px;align-items:flex-end;margin-bottom:20px}.page-head h1{margin:3px 0 5px;font-size:27px}.page-head p{margin:0;color:var(--muted);font-size:12px}.eyebrow{font-size:10px;letter-spacing:1.8px;font-weight:800}.eyebrow.dark{color:#d7781f}.filters{display:flex;gap:8px;flex-wrap:wrap}.filters select,.btn-primary,.btn-secondary{border:1px solid var(--line);background:white;height:36px;padding:0 12px;border-radius:8px;color:#4c5a6d;font-size:10px;outline:none}.btn-primary{background:#173d69;color:white;border-color:#173d69}.btn-secondary{color:#166b47}.kpi-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:14px}.kpi-card{background:white;border:1px solid var(--line);border-radius:13px;box-shadow:0 4px 14px rgba(22,34,53,.035);padding:15px;display:flex;gap:12px;align-items:center;position:relative;overflow:hidden}.kpi-card:after{content:"";position:absolute;right:0;top:0;bottom:0;width:3px;background:var(--accent)}.kpi-icon{width:42px;height:42px;border-radius:12px;background:color-mix(in srgb,var(--accent) 12%,white);color:var(--accent);display:grid;place-items:center;font-size:17px}.kpi-body span{display:block;font-size:10px;color:var(--muted);font-weight:600}.kpi-body strong{font-size:21px;display:block;margin:3px 0;color:#17263b}.kpi-body small{font-size:8px;color:#8794a5}.kpi-body small i{color:var(--green)}.accent-orange{--accent:#f28c28}.accent-green{--accent:#22a06b}.accent-blue{--accent:#2864dc}.accent-purple{--accent:#7654c7}.accent-red{--accent:#d94d4d}.accent-cyan{--accent:#0ea5b7}.dashboard-grid{display:grid;gap:14px;margin-bottom:14px}.main-grid{grid-template-columns:2fr 1fr}.second-grid{grid-template-columns:2fr 1fr}.third-grid{grid-template-columns:repeat(3,1fr)}.panel{background:white;border:1px solid var(--line);border-radius:13px;padding:16px;box-shadow:0 4px 14px rgba(22,34,53,.03);min-width:0}.panel-head{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:14px}.panel-head h3{margin:0;font-size:13px}.panel-head p{margin:4px 0 0;font-size:9px;color:var(--muted)}.panel-head a{font-size:9px;color:var(--blue);font-weight:700}.panel-badge{font-size:8px;font-weight:700;background:#fff4e7;color:#c46a12;border:1px solid #ffe0bb;border-radius:20px;padding:5px 8px}.chart-box{height:265px}.donut-wrap{height:190px;position:relative}.donut-center{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;pointer-events:none}.donut-center strong{font-size:23px}.donut-center span{font-size:9px;color:var(--muted)}.legend-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px;font-size:9px}.legend-grid span{display:flex;align-items:center;gap:5px;color:#667487}.legend-grid b{margin-left:auto;color:#26364a}.dot{width:7px;height:7px;border-radius:50%;display:inline-block}.dot.ok{background:#22a06b}.dot.charging{background:#2864dc}.dot.warn{background:#f2a53a}.dot.bad{background:#d94d4d}.table-wrap{overflow:auto}.data-table{width:100%;border-collapse:collapse;font-size:9px}.data-table th{background:#f7f9fc;color:#7a8798;text-align:left;padding:10px;border-bottom:1px solid var(--line);white-space:nowrap}.data-table td{padding:10px;border-bottom:1px solid #edf1f6;white-space:nowrap;color:#445267}.cpo-name{display:flex;align-items:center;gap:8px}.cpo-avatar{width:28px;height:28px;border-radius:8px;background:#eaf1fb;color:#2458a6;display:grid;place-items:center;font-size:9px;font-weight:800}.cpo-name b,.cpo-name small{display:block}.cpo-name b{font-size:9px;color:#223247}.cpo-name small{font-size:7px;color:#8b98a8;margin-top:2px}.uptime{height:5px;width:68px;background:#eaf0f5;border-radius:10px;display:inline-block;margin-right:5px;vertical-align:middle;overflow:hidden}.uptime span{height:100%;display:block;background:#22a06b}.status-pill{font-size:8px;font-weight:700;padding:4px 7px;border-radius:12px}.status-pill.active{background:#e7f7f0;color:#168255}.status-pill.inactive{background:#fdeaea;color:#be3636}.alert-count{width:22px;height:22px;background:#fdeaea;color:#c43f3f;border-radius:50%;display:grid;place-items:center;font-size:9px;font-weight:800}.alert-list{display:flex;flex-direction:column;gap:9px}.alert-item{display:flex;gap:9px;padding:9px;border-radius:9px;border:1px solid var(--line)}.alert-item>i{width:25px;height:25px;border-radius:7px;display:grid;place-items:center;font-size:10px}.alert-item b,.alert-item span,.alert-item small{display:block}.alert-item b{font-size:9px}.alert-item span{font-size:8px;color:#6f7d90;margin:2px 0}.alert-item small{font-size:7px;color:#9aa6b5}.alert-item.danger>i{background:#fdeaea;color:#cc3c3c}.alert-item.warning>i{background:#fff3db;color:#d48815}.alert-item.info>i{background:#eaf1fb;color:#2458a6}.sla-box{margin-top:12px;display:grid;grid-template-columns:1fr 1fr;background:#f7f9fc;border-radius:10px;padding:10px}.sla-box div{padding:0 8px}.sla-box div+div{border-left:1px solid var(--line)}.sla-box span,.sla-box strong{display:block}.sla-box span{font-size:8px;color:var(--muted)}.sla-box strong{font-size:16px;margin-top:2px}.api-health,.stat-list,.compliance-list{display:flex;flex-direction:column}.api-health div,.stat-list div,.compliance-list div{display:flex;align-items:center;justify-content:space-between;padding:9px 0;border-bottom:1px dashed #e7ecf2;font-size:9px}.api-health div:last-child,.stat-list div:last-child,.compliance-list div:last-child{border-bottom:0}.api-health b{font-size:8px}.green-text{color:#15845a}.red-text{color:#c53f3f}.stat-list span{color:var(--muted)}.stat-list strong{font-size:12px}.compliance-list div{justify-content:flex-start;gap:8px}.compliance-list i{width:25px;height:25px;border-radius:7px;background:#edf3fb;color:#2458a6;display:grid;place-items:center}.compliance-list span{flex:1;color:#617083}.compliance-list b{font-size:8px;color:#1c7653}.login-page{background:#071522}.login-shell{min-height:100vh;display:grid;grid-template-columns:1.25fr .75fr}.login-brand-panel{position:relative;padding:45px 55px;color:white;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;background:radial-gradient(circle at 18% 20%,rgba(242,140,40,.22),transparent 27%),radial-gradient(circle at 75% 80%,rgba(36,88,166,.28),transparent 30%),linear-gradient(135deg,#071522,#112c4b)}.login-brand-panel:after{content:"";position:absolute;width:450px;height:450px;border:1px solid rgba(255,255,255,.07);border-radius:50%;right:-190px;top:-170px;box-shadow:0 0 0 70px rgba(255,255,255,.018),0 0 0 140px rgba(255,255,255,.012)}.brand-badge{font-size:22px;font-weight:800;letter-spacing:1px;position:relative;z-index:2}.brand-badge i{color:#f59a36;margin-right:7px}.hero-copy{max-width:750px;position:relative;z-index:2}.hero-copy .eyebrow{color:#f4a64d}.hero-copy h1{font-size:43px;line-height:1.11;margin:12px 0 18px;max-width:720px}.hero-copy>p{font-size:14px;color:#b8c7d9;line-height:1.7;max-width:650px}.hero-stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:35px}.hero-stat-row div{border:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.035);border-radius:12px;padding:13px}.hero-stat-row strong,.hero-stat-row span{display:block}.hero-stat-row strong{font-size:21px;color:#f5a54b}.hero-stat-row span{font-size:8px;color:#9db0c5;margin-top:4px}.login-footer-note{font-size:9px;color:#7f98b4;position:relative;z-index:2}.login-footer-note i{color:#40cb8a;margin-right:5px}.login-form-panel{background:#f7f9fc;display:grid;place-items:center;padding:30px}.login-card{width:min(390px,100%);background:white;border:1px solid #e5eaf1;box-shadow:var(--shadow);border-radius:18px;padding:30px}.mini-logo{display:flex;justify-content:center}.mini-logo span{width:50px;height:50px;border-radius:14px;background:linear-gradient(135deg,#f7a13a,#e87517);color:white;display:grid;place-items:center;font-size:20px;box-shadow:0 10px 24px rgba(242,140,40,.25)}.login-card h2{text-align:center;margin:14px 0 5px;font-size:21px}.subtext{text-align:center;color:#8390a0;font-size:10px;margin:0 0 22px}.field-wrap{margin-bottom:13px}.field-wrap label{display:block;font-size:9px;font-weight:700;margin-bottom:6px;color:#536173}.input-box{display:flex;align-items:center;border:1px solid #dce3ec;border-radius:9px;height:42px;padding:0 12px}.input-box:focus-within{border-color:#f09a3d;box-shadow:0 0 0 3px rgba(242,140,40,.08)}.input-box i{font-size:11px;color:#9aa6b5;margin-right:8px}.input-box input{border:0;outline:0;flex:1;font-size:10px;height:100%;font-family:inherit}.login-row{display:flex;justify-content:space-between;align-items:center;font-size:8px;color:#758295;margin:4px 0 16px}.login-row a{color:#2458a6;font-weight:700}.remember{display:flex;align-items:center;gap:4px}.btn-login{width:100%;height:42px;border:0;border-radius:9px;background:linear-gradient(90deg,#173d69,#245a91);color:white;font-size:11px;font-weight:700;cursor:pointer;box-shadow:0 8px 18px rgba(36,88,166,.18)}.btn-login:hover{filter:brightness(1.06)}.demo-note{text-align:center;font-size:8px;color:#99a5b3;margin-top:12px}.login-message{display:none}.login-message.show{display:block;background:#fdeaea;color:#b63232;font-size:9px;padding:8px;border-radius:7px;margin-bottom:10px}.logout{display:grid!important}
@media(max-width:1100px){.kpi-grid{grid-template-columns:repeat(2,1fr)}.third-grid{grid-template-columns:1fr 1fr}.login-shell{grid-template-columns:1fr 1fr}.hero-copy h1{font-size:33px}.hero-stat-row{grid-template-columns:1fr 1fr}}
@media(max-width:850px){.sidebar{transform:translateX(-100%);transition:.25s}.sidebar.open{transform:translateX(0)}.main-content{margin-left:0}.mobile-menu{display:grid}.sync-pill,.top-title{display:none}.main-grid,.second-grid,.third-grid{grid-template-columns:1fr}.page-head{align-items:flex-start;flex-direction:column}.login-shell{grid-template-columns:1fr}.login-brand-panel{display:none}.login-form-panel{min-height:100vh}}
@media(max-width:600px){.page-content{padding:14px}.kpi-grid{grid-template-columns:1fr}.topbar{padding:0 12px}.user-chip div:not(.avatar),.user-chip>i{display:none}.filters{width:100%}.filters select,.btn-primary,.btn-secondary{flex:1}.page-head h1{font-size:22px}}