@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700&display=swap');
:root{--ink:#15231e;--sub:#66736e;--paper:#f4f5ef;--card:#fbfcf8;--line:#dfe3dc;--dark:#19372d;--green:#257f60;--lime:#c9f36d;--red:#c9574f;--amber:#c48a32;--shadow:0 18px 50px rgba(28,50,42,.07)}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:Manrope,system-ui,sans-serif}.topbar{height:68px;border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 34px;background:rgba(244,245,239,.94);position:sticky;top:0;z-index:10;backdrop-filter:blur(16px)}.logo{display:flex;align-items:center;gap:10px;font-weight:700;font-size:19px}.logo-shape{width:27px;height:27px;background:var(--dark);color:var(--lime);border-radius:50% 50% 50% 9px;display:grid;place-items:center}.topbar nav{display:flex;gap:7px;margin-left:58px}.topbar nav button{border:0;background:transparent;color:var(--sub);padding:9px 13px;border-radius:7px;font:600 12px Manrope}.topbar nav button.active{background:#e6e9e2;color:var(--ink)}.top-actions{margin-left:auto;display:flex;align-items:center;gap:16px}.system-ok{font:500 10px 'DM Mono';text-transform:uppercase;color:var(--green);display:flex;align-items:center;gap:7px}.system-ok i{width:7px;height:7px;border-radius:50%;background:#55bb83;box-shadow:0 0 0 4px rgba(85,187,131,.13)}.lang{display:flex;border:1px solid #d5dad3;padding:2px;border-radius:8px}.lang button{border:0;background:transparent;color:#8a948f;padding:5px 7px;border-radius:5px;font:500 10px 'DM Mono';cursor:pointer}.lang button.active{background:var(--dark);color:white}.avatar{width:31px;height:31px;background:#dce4da;border-radius:50%;display:grid;place-items:center;font-size:10px;font-weight:700}.content{width:min(1260px,calc(100% - 56px));margin:auto;padding:44px 0 30px}.intro{display:flex;justify-content:space-between;align-items:end;margin-bottom:28px}.kicker{margin:0 0 7px;font:500 10px 'DM Mono';letter-spacing:1.1px;text-transform:uppercase;color:var(--green)}h1{font-size:31px;line-height:1.15;letter-spacing:-1.3px;margin:0}.intro>div>p:last-child{color:var(--sub);font-size:12px;margin:9px 0 0}.timebox{text-align:right}.timebox strong{font:500 15px 'DM Mono'}.timebox span{display:block;color:var(--sub);font-size:10px;margin-top:5px}.metrics{display:grid;grid-template-columns:1.25fr 1fr 1fr 1fr;background:var(--dark);border-radius:13px;color:white;overflow:hidden;margin-bottom:17px}.metric{padding:21px 23px;border-right:1px solid rgba(255,255,255,.1)}.metric:last-child{border:0}.metric label{display:block;color:#a9beb6;font-size:10px;margin-bottom:12px}.metric strong{font:600 24px 'DM Mono'}.metric strong small{font-size:9px;color:#a9beb6}.metric p{margin:8px 0 0;color:#9cb0a8;font-size:9px}.metric .good{color:var(--lime)}.workspace{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(330px,.72fr);gap:17px}.card{background:var(--card);border:1px solid var(--line);border-radius:13px;box-shadow:var(--shadow)}.chart-card,.sim-card,.incident-card,.events-card{padding:22px}.card-head{display:flex;justify-content:space-between;align-items:start}.card-head h2{font-size:13px;margin:0 0 4px}.card-head p{font-size:9px;color:var(--sub);margin:0}.tag{font:500 9px 'DM Mono';text-transform:uppercase;background:#e6eee9;color:var(--green);border-radius:5px;padding:5px 7px}.legend{display:flex;gap:14px;color:var(--sub);font-size:8px}.legend span{display:flex;align-items:center;gap:5px}.legend i{width:13px;border-top:2px solid var(--green)}.legend .threshold-key{border-top:1px dashed var(--red)}.chartbox{height:250px;position:relative;margin-top:15px;padding-left:27px}.chartbox svg{width:100%;height:225px;overflow:visible}.grid-line{stroke:#e5e8e2}.threshold-line{stroke:var(--red);stroke-dasharray:5 6}.series{fill:none;stroke:var(--green);stroke-width:2.5;stroke-linejoin:round}.area{fill:url(#chartFill)}.dot{fill:var(--card);stroke:var(--green);stroke-width:2}.axis-y{position:absolute;left:0;height:225px;display:flex;flex-direction:column;justify-content:space-between;font:8px 'DM Mono';color:#97a09c}.axis-x{display:flex;justify-content:space-between;margin-left:26px;font:8px 'DM Mono';color:#97a09c}.device{display:flex;align-items:center;padding:16px 0;border-bottom:1px solid var(--line)}.device-icon{width:38px;height:38px;background:#e5eee8;border-radius:9px;display:grid;place-items:center;color:var(--green);margin-right:10px}.device div{display:flex;flex-direction:column;gap:3px}.device strong{font-size:11px}.device small{font-size:8px;color:var(--sub)}.device-value{margin-left:auto;font:500 15px 'DM Mono'}.rule-progress{margin:17px 0}.rule-row{display:flex;justify-content:space-between;font-size:9px;color:var(--sub);margin-bottom:8px}.rule-row strong{color:var(--ink)}.progress{display:grid;grid-template-columns:1fr 1fr;gap:4px}.progress i{height:5px;background:#dfe4de;border-radius:5px}.progress i.on{background:var(--amber)}.button-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}.button-grid button{border:1px solid #d7ddd5;background:#f8faf6;padding:10px 7px;border-radius:7px;font:600 9px Manrope;color:#35443e;cursor:pointer}.button-grid .primary{background:var(--dark);border-color:var(--dark);color:white}.button-grid button:disabled{opacity:.35}.button-grid .reset{grid-column:1/-1;border:0;background:transparent;color:var(--sub)}.lower{display:grid;grid-template-columns:1fr 1.55fr;gap:17px;margin-top:17px}.state-pill{font:500 8px 'DM Mono';padding:5px 8px;border-radius:20px;background:#e4eee8;color:var(--green)}.state-pill.open{background:#f8e7e5;color:var(--red)}.state-pill.acknowledged{background:#f7efd9;color:#976d27}.state-pill.recovering{background:#e4eff0;color:#397987}.empty{min-height:112px;display:flex;align-items:center;gap:13px}.empty-mark{width:39px;height:39px;border:1px solid #cddbd3;border-radius:50%;display:grid;place-items:center;color:var(--green)}.empty strong,.alert-title strong{display:block;font-size:11px}.empty p,.alert-title p{font-size:9px;color:var(--sub);margin:4px 0}.incident-active{padding-top:19px}.alert-title{display:flex;gap:11px;align-items:center}.alert-title>span{width:34px;height:34px;background:#f7e5e3;color:var(--red);display:grid;place-items:center;border-radius:50%;font-weight:700}.incident-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin-top:15px}.incident-stats div{background:#f0f2ed;border-radius:6px;padding:9px}.incident-stats span{display:block;color:var(--sub);font-size:7px}.incident-stats strong{font:500 9px 'DM Mono'}.events{list-style:none;margin:12px 0 0;padding:0;max-height:152px;overflow:auto}.events li{display:grid;grid-template-columns:19px 1fr auto;gap:9px;padding:8px 1px;border-bottom:1px solid #ebeee8}.event-dot{width:18px;height:18px;border:1px solid #ccd9d1;border-radius:50%;display:grid;place-items:center;color:var(--green);font-size:7px}.events strong{display:block;font-size:9px}.events p{font-size:8px;color:var(--sub);margin:2px 0}.events time{font:7px 'DM Mono';color:#97a09c}.footer{display:flex;justify-content:space-between;padding-top:18px;color:#8a948f;font-size:8px}.footer a{color:var(--green);text-decoration:none}@media(max-width:900px){.topbar nav{display:none}.workspace,.lower{grid-template-columns:1fr}.metrics{grid-template-columns:1fr 1fr}.metric:nth-child(2){border-right:0}}@media(max-width:600px){.topbar{padding:0 17px}.system-ok,.avatar{display:none}.content{width:calc(100% - 28px);padding-top:28px}.timebox{display:none}h1{font-size:25px}.metric{padding:16px}.metric strong{font-size:18px}.legend{display:none}.button-grid{grid-template-columns:1fr}.button-grid .reset{grid-column:auto}}