:root{--navy:#08294a;--blue:#2878f0;--cyan:#12b3c2;--violet:#7442e8;--danger:#ed4654;--ok:#149b4b;--warning:#f39a08}.networkCenter{grid-template-columns:230px minmax(0,1fr);background:#f3f7fb;color:#102947}.networkCenter aside{background:var(--navy);border:0;color:#fff;padding:14px;min-height:100vh}.centerBrand{padding:0 15px 28px}.centerBrand>span{width:72px;height:84px;clip-path:polygon(50% 0,100% 15%,100% 70%,50% 100%,0 70%,0 15%);border-radius:0;background:#14b8ca;font-size:20px}.centerBrand strong{font-size:25px;line-height:.9}.centerBrand b{color:#13b5c5}.centerBrand small{margin-top:28px;font-size:8px;letter-spacing:1px;color:#294967}.networkCenter nav{gap:5px}.networkCenter nav a{display:flex;gap:14px;align-items:center;color:#e6eef7;font-size:15px;font-weight:650;padding:14px 15px}.networkCenter nav a.active,.networkCenter nav a:hover{background:#13b4c4;color:#fff}.featureState{border-top:1px solid #244867;margin:22px 12px 8px;padding-top:17px;display:grid;gap:10px;font-size:11px}.featureState small{color:#58738d}.featureState span{color:#c9d7e4}.featureState span::first-letter{color:#2ccf96}.featureState .warn{color:#ffd492}.networkCenter .device{margin-top:auto;border:1px solid #1f5b8e;border-radius:7px;background:#0b3966}.centerMain{padding:0 30px 16px}.centerHeader{height:86px;margin:0 -30px 16px;padding:14px 30px;border-bottom:1px solid #d9e3ef;background:#fff;align-items:center}.centerHeader h1{font-size:30px}.centerHeader p,.cockpitIntro p{margin:4px 0 0;color:#6d8098;font-size:13px}.operator{display:grid;grid-template-columns:auto auto;gap:0 12px;align-items:center}.operator .live{grid-row:1/3;margin-right:10px;color:var(--ok);border-color:#bce9d0;background:#effbf4}.operator b{font-size:14px}.operator small{color:#718399}.cockpitIntro{display:flex;align-items:end;justify-content:space-between;margin-bottom:10px}.cockpitIntro h2{font-size:19px}.cockpitIntro form{display:flex;gap:10px}.cockpitIntro select,.cockpitIntro input,.cockpitIntro button{height:43px;border:1px solid #d6e1ed;border-radius:7px;background:#fff;padding:0 14px;color:#17304d}.cockpitIntro select{min-width:150px}.cockpitIntro input{width:190px}.cockpitIntro button{border-color:var(--navy);background:var(--navy);color:#fff;font-weight:700}.healthStrip{display:flex;align-items:center;gap:0;border:1px solid #d9e3ee;border-radius:8px;background:#fff;min-height:50px;padding:8px 16px;margin-bottom:15px}.healthStrip span{padding:0 16px;border-right:1px solid #e3eaf1;white-space:nowrap;font-size:13px}.healthStrip span:first-child{padding-left:0}.healthStrip .scope{margin-left:auto;border:0;border-radius:18px;background:#fff6e6;color:#c26b00;font-size:11px;font-weight:700}.dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:7px;background:var(--ok)}.dot.warn{background:var(--warning)}.dot.bad{background:var(--danger)}.kpiRow{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:13px;margin-bottom:15px}.kpi{position:relative;min-height:112px;border:1px solid #dce5ef;border-radius:8px;background:#fff;padding:16px 19px;box-shadow:0 7px 18px #193b6310;cursor:pointer}.kpi::before{content:"";position:absolute;left:-1px;top:-1px;bottom:-1px;width:5px;border-radius:8px 0 0 8px;background:var(--accent,var(--blue))}.kpi small,.kpi em{display:block;color:#6b7f98;font-size:11px;font-style:normal}.kpi strong{display:block;margin:10px 0 7px;font-size:30px;line-height:1}.kpi em{color:var(--accent,var(--blue));font-weight:700}.kpi.cyan{--accent:var(--cyan)}.kpi.red{--accent:var(--danger)}.kpi.orange{--accent:var(--warning)}.kpi.violet{--accent:var(--violet)}.kpi.green{--accent:var(--ok)}.analysisGrid{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(320px,1fr);gap:14px;margin-bottom:15px}.centerPanel{border:1px solid #dce5ef;border-radius:9px;background:#fff;padding:17px 21px;box-shadow:0 7px 18px #193b630c;min-width:0}.centerPanel h2{font-size:18px}.centerPanel .sub{margin:4px 0 12px;color:#74869d;font-size:11px}.flowChart{width:100%;height:225px;display:block}.chartLegend{display:flex;justify-content:flex-end;gap:22px;color:#637791;font-size:11px}.chartLegend i{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px}.topIp{padding:10px 0;border-top:1px solid #edf1f5;cursor:pointer}.topIp:first-of-type{border-top:0}.topIp div{display:flex;justify-content:space-between;font-weight:700}.bar{height:8px;margin-top:7px;border-radius:8px;background:#e8eef5;overflow:hidden}.bar i{display:block;height:100%;border-radius:8px;background:var(--blue)}.bottomGrid{display:grid;grid-template-columns:1.55fr 1fr .72fr;gap:14px}.incidentItem{display:grid;grid-template-columns:16px 1fr auto;align-items:center;gap:10px;padding:12px 8px;border-top:1px solid #e8eef4;cursor:pointer}.incidentItem b,.incidentItem small{display:block}.incidentItem small{margin-top:4px;color:#718399}.severity{min-width:78px;text-align:center;padding:6px;border-radius:16px;background:#feecee;color:var(--danger);font-size:11px;font-weight:700}.severity.High{background:#fff4df;color:#c36e00}.appflowBox{border:1px solid #f3c875;border-radius:8px;background:#fff8e9;padding:13px;color:#c46f00}.appflowBox b,.appflowBox small{display:block}.appflowBox small{margin-top:5px}.appflowList{display:grid;gap:11px;margin:17px 0;font-size:13px}.appflowList span::before{content:"•";color:var(--cyan);font-size:22px;vertical-align:-2px;margin-right:8px}.healthList{display:grid}.healthRow{display:flex;justify-content:space-between;padding:10px 4px;border-top:1px solid #edf1f5;font-size:12px}.healthRow b{color:var(--ok);font-size:11px}.healthRow b.warn{color:#d67a00}.centerLoading{padding:80px;text-align:center;color:#6b7d92}.emptyState{padding:28px;text-align:center;color:#74869d}.networkCenter dialog{width:min(820px,calc(100vw - 32px))}.drawerEvents{display:grid;gap:8px}.drawerEvents a{display:block;padding:12px;border:1px solid #dde6ef;border-radius:6px;text-decoration:none;color:#17304d}.centerFooter{margin-top:10px;text-align:right;color:#7e8ea2;font-size:9px}
@media(max-width:1250px){.kpiRow{grid-template-columns:repeat(3,1fr)}.bottomGrid{grid-template-columns:1fr 1fr}.healthPanel{grid-column:1/-1}}
@media(max-width:1000px){.networkCenter{grid-template-columns:1fr}.networkCenter aside{min-height:auto}.centerBrand,.featureState,.networkCenter .device{display:none}.networkCenter nav{grid-template-columns:repeat(4,1fr)}.networkCenter nav a{justify-content:center}.centerMain{padding:0 16px 16px}.centerHeader{margin:0 -16px 16px;padding:14px 16px}.cockpitIntro{align-items:stretch;gap:12px;flex-direction:column}.cockpitIntro form{flex-wrap:wrap}.healthStrip{overflow-x:auto}.analysisGrid{grid-template-columns:1fr}}
@media(max-width:650px){.networkCenter nav{grid-template-columns:repeat(2,minmax(0,1fr))}.networkCenter nav a{justify-content:flex-start;min-width:0}.centerHeader{height:auto;flex-direction:column;align-items:stretch;gap:10px}.centerHeader h1{font-size:23px}.operator{display:block}.operator .live{display:inline-flex}.operator b,.operator small{display:none}.cockpitIntro form>*{flex:1 1 100%}.kpiRow,.bottomGrid{grid-template-columns:1fr}.centerPanel{padding:15px}.healthStrip .scope{display:none}.flowChart{height:190px}.incidentItem{grid-template-columns:14px 1fr}.incidentItem .severity{grid-column:2}.analysisGrid{display:block}.analysisGrid>*+*{margin-top:14px}}
@media(max-width:650px){.networkCenter nav a{padding:12px 8px;gap:8px;font-size:13px;overflow-wrap:anywhere}}