:root{--navy:#103b48;--ink:#17313b;--muted:#6f7e84;--canvas:#f5f8f7;--line:#e4ece9;--aqua:#13aa9c;--mint:#dff5ed;--amber:#ffbe4f;--coral:#ef7669;--white:#fff}*{box-sizing:border-box}body{margin:0;background:var(--canvas);font-family:"DM Sans",sans-serif;color:var(--ink)}.app-shell{min-height:100vh;display:grid;grid-template-columns:244px 1fr}.sidebar{background:var(--navy);color:#c6d9d9;padding:28px 16px;display:flex;flex-direction:column;position:sticky;top:0;height:100vh}.brand{color:#fff;font:700 19px Manrope,sans-serif;display:flex;gap:10px;align-items:center;padding:0 10px 44px}.brand-mark{display:grid;place-items:center;width:28px;height:28px;border-radius:8px;background:var(--aqua);font-weight:800}.brand b{color:#8de4d6}nav{display:grid;gap:6px}.nav-item{color:#b8cccc;text-decoration:none;padding:13px 12px;border-radius:9px;font-size:14px;display:flex;gap:12px;align-items:center;transition:.2s}.nav-item:hover,.nav-item.active{color:#fff;background:#245360}.nav-item span{font-size:18px;width:19px;text-align:center}.sidebar-footer{margin-top:auto;font-size:12px;padding:12px 10px;color:#91b2b3}.secure-dot{display:inline-block;background:#59d5a7;width:7px;height:7px;border-radius:50%;margin-right:7px}.topbar{height:72px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 38px}.breadcrumb{font-size:14px;color:var(--muted)}.breadcrumb i{font-style:normal;padding:0 10px;color:#bdc8c8}.breadcrumb strong{color:var(--ink)}.top-actions{display:flex;align-items:center;gap:20px}.icon-button,.menu-button,.more{border:0;background:none;color:var(--ink);cursor:pointer}.icon-button{position:relative;font-size:20px}.notice{position:absolute;top:0;right:0;width:6px;height:6px;background:var(--coral);border-radius:50%;border:1px solid white}.avatar{width:34px;height:34px;border-radius:50%;background:#e2f2ee;color:var(--navy);display:grid;place-items:center;font-size:11px;font-weight:bold}.menu-button{display:none;font-size:22px}.content{padding:38px;max-width:1500px;margin:auto}.hero-row{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:24px}.eyebrow,.panel-label{font-size:10px;font-weight:700;letter-spacing:1.2px;color:var(--aqua);margin:0 0 6px}.hero-row h1{font:800 27px Manrope,sans-serif;margin:0}.subtitle{margin:6px 0 0;color:var(--muted);font-size:14px}.filters{display:flex;gap:9px}.filter,.export{background:#fff;border:1px solid var(--line);border-radius:8px;padding:10px 13px;color:#40545a;font:500 13px "DM Sans";cursor:pointer}.filter span{padding-left:18px}.export{background:var(--navy);color:#fff;border-color:var(--navy)}.status-strip{min-height:35px;display:flex;align-items:center;gap:9px;padding:8px 13px;border:1px solid #d9eee8;background:#f2fbf8;border-radius:8px;color:#50716d;font-size:11px;margin-bottom:24px}.status-pulse{width:7px;height:7px;border-radius:50%;background:var(--aqua);box-shadow:0 0 0 3px #c9f2e8}.strip-divider{height:13px;width:1px;background:#c7dfd9}.security-note{margin-left:auto;color:#28816f}.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:18px}.kpi-card,.panel{background:#fff;border:1px solid var(--line);border-radius:12px}.kpi-card{padding:17px}.kpi-head{display:flex;justify-content:space-between;align-items:center;color:#718088;font-size:10px;font-weight:700;letter-spacing:.7px}.card-icon{display:grid;place-items:center;border-radius:7px;width:27px;height:27px;font-size:16px}.amber{background:#fff3da;color:#bd7b08}.mint{background:#e5f7f1;color:#159d7e}.blue{background:#e9f0fc;color:#416bc5}.purple{background:#f1eafe;color:#805cbe}.kpi-card strong{font:700 27px Manrope,sans-serif;display:block;margin:15px 0 8px;letter-spacing:-1px}.trend{font-size:12px;font-weight:700}.trend span{margin-left:3px}.trend small{font-size:10px;color:#93a0a4;font-weight:400;margin-left:3px}.positive{color:#0f9e7f}.neutral{color:#53768b}.dashboard-grid,.bottom-grid{display:grid;grid-template-columns:1.55fr 1fr;gap:18px;margin-top:18px}.panel{padding:21px;min-height:290px}.panel-heading{display:flex;justify-content:space-between;align-items:flex-start}.panel h2{font:700 16px Manrope,sans-serif;margin:0}.more{color:#91a0a3;font-weight:700;letter-spacing:1px}.legend{display:flex;gap:17px;font-size:11px;color:#74858a;margin:19px 0 4px}.legend-dot{display:inline-block;border-radius:50%;height:7px;width:7px;margin-right:5px}.navy{background:var(--navy)}.aqua{background:var(--aqua)}.coral{background:var(--coral)}.chart-wrap{height:178px}.chart-wrap svg{height:100%;width:100%;overflow:visible}.chart-axis{font-size:10px;color:#95a1a4;display:flex;justify-content:space-between;padding:0 5px}.state-list{display:grid;gap:16px;margin:26px 0 22px}.state-row{display:grid;grid-template-columns:25px 1fr 37px;gap:9px;align-items:center;font-size:12px}.bar{height:7px;background:#edf2f1;border-radius:10px;overflow:hidden}.bar i{height:100%;display:block;background:var(--aqua);border-radius:inherit}.state-row strong{font-size:11px;text-align:right}.panel-link{font-size:12px;color:#168875;text-decoration:none;font-weight:700}.panel-link span{padding-left:7px}.bottom-grid{grid-template-columns:1fr 1fr}.donut-layout{display:flex;align-items:center;gap:35px;margin-top:25px}.donut{height:145px;width:145px;border-radius:50%;background:conic-gradient(var(--aqua) 0 57%,var(--navy) 57% 88%,var(--coral) 88% 100%);display:grid;place-items:center}.donut:before{content:"";position:absolute;width:103px;height:103px;background:#fff;border-radius:50%}.donut>div{z-index:1;text-align:center;display:grid}.donut b{font:700 21px Manrope}.donut small{font-size:10px;color:var(--muted)}.equipment-legend{display:grid;gap:17px;flex:1}.equipment-legend div{display:grid;grid-template-columns:10px 1fr auto;gap:6px;align-items:center;font-size:12px;color:#68797f}.equipment-legend b{color:var(--ink);font-size:12px}.counter{display:grid;place-items:center;background:#fff0ef;color:#d7564e;font-size:12px;font-weight:bold;border-radius:50%;height:23px;width:23px}.attention-list{display:grid;gap:0;margin:19px 0 14px}.attention-list>div{display:grid;grid-template-columns:8px 1fr auto;gap:11px;align-items:center;padding:11px 0;border-bottom:1px solid #edf1f0}.priority{width:7px;height:7px;border-radius:50%}.high{background:#ed6a5e}.medium{background:#f7b53e}.low{background:#5eafc7}.attention-list p{margin:0;display:grid;gap:3px;font-size:12px}.attention-list small{font-size:10px;color:#9aa5a6}.attention-list strong{font-size:14px}.toast{position:fixed;bottom:24px;right:24px;background:#173b47;color:#fff;padding:13px 17px;border-radius:8px;font-size:12px;box-shadow:0 8px 24px #173b4733;transform:translateY(100px);opacity:0;transition:.3s}.toast.show{transform:translateY(0);opacity:1}@media(max-width:1050px){.app-shell{grid-template-columns:76px 1fr}.brand{padding-left:8px;padding-right:8px}.brand>span:last-child,.nav-item{font-size:0}.nav-item{justify-content:center}.nav-item span{font-size:18px}.sidebar-footer{font-size:0}.sidebar-footer .secure-dot{margin:0}.dashboard-grid{grid-template-columns:1.2fr 1fr}.content{padding:28px}}@media(max-width:760px){.app-shell{display:block}.sidebar{position:fixed;z-index:10;left:-244px;width:244px;transition:.25s;box-shadow:5px 0 20px #102e3944}.sidebar.open{left:0}.brand>span:last-child,.nav-item{font-size:14px}.nav-item{justify-content:flex-start}.sidebar-footer{font-size:12px}.sidebar-footer .secure-dot{margin-right:7px}.menu-button{display:block}.topbar{height:60px;padding:0 18px}.breadcrumb{display:none}.content{padding:24px 16px}.hero-row{align-items:flex-start;flex-direction:column}.hero-row h1{font-size:24px}.filters{width:100%;overflow:auto;padding-bottom:2px}.filter,.export{white-space:nowrap}.status-strip{flex-wrap:wrap}.security-note{margin-left:0;width:100%}.kpi-grid{grid-template-columns:repeat(2,1fr);gap:10px}.kpi-card{padding:14px}.kpi-card strong{font-size:23px}.dashboard-grid,.bottom-grid{grid-template-columns:1fr;gap:12px;margin-top:12px}.panel{min-height:270px;padding:17px}.donut-layout{gap:18px}.donut{height:125px;width:125px}.donut:before{height:89px;width:89px}}@media(max-width:370px){.kpi-grid{grid-template-columns:1fr}.donut-layout{flex-direction:column;align-items:flex-start}}
