.network-note { padding:16px 20px; border-left:3px solid #c79525; background:#fff8e9; color:#72521d; font-size:13px; line-height:1.65; }
.network-metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); margin:24px 0; gap:12px; }
.network-metrics > div { background:#fff; border:1px solid #d9e3eb; border-radius:12px; padding:18px; }
.network-metrics b { display:block; font-size:24px; letter-spacing:-.03em; }
.network-metrics span { font-size:11px; color:#5d7486; }
.network-tools { display:flex; align-items:end; justify-content:space-between; gap:20px; flex-wrap:wrap; margin:22px 0; }
.network-tools label { display:flex; flex-direction:column; gap:8px; font-size:12px; width:min(100%,460px); }
.network-tools select { width:100%; padding:12px; min-height:44px; background:#fff; border:1px solid #b6cbd9; border-radius:8px; font:13px var(--font); }
.network-kmz { background:#15384a; color:#fff; padding:12px 18px; border-radius:30px; font-size:12px; }
.network-map-frame { border:1px solid #bfcfc9; border-radius:16px; overflow:hidden; background:#f3f7f5; }
.network-map { display:block; width:100%; height:auto; }
.map-grid-label { font:11px var(--mono); fill:#537366; }
.map-area-label { font:11px var(--mono); letter-spacing:.04em; fill:#406b55; }
.map-node-label { font:600 12px var(--font); fill:#17384a; }
.map-fat-number { font:600 9px var(--font); fill:#17384a; }
.network-map-key { display:flex; gap:16px; flex-wrap:wrap; padding:15px; border-top:1px solid #c5d8cd; font-size:10px; color:#466755; background:#fff; }
.network-map-key i { width:18px; height:3px; display:inline-block; vertical-align:middle; margin-right:5px; }
.network-selection { display:flex; flex-direction:column; gap:7px; padding:18px 20px; background:#eaf3f8; border:1px solid #cadfe9; border-radius:10px; margin:16px 0 28px; }
.network-selection b { font-size:15px; }.network-selection span { font-size:13px; color:#476779; }
.topology-scroll { overflow-x:auto; background:#fff; border:1px solid #dae4eb; border-radius:14px; }
.network-topology { width:100%; min-width:820px; display:block; }
.topo-node rect { fill:#eef5f9; stroke:#88a9bd; }.topo-title { font:600 15px var(--font); fill:#17384a; }.topo-label { font:11px var(--font); fill:#3f6177; }
.network-core-grid { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:6px; }
.network-core-grid > span { text-align:center; padding:9px 2px; border-radius:6px; font:500 13px var(--mono); border:1px solid #d2dfe6; }
.network-core-grid small { display:block; font-size:7px; margin-top:3px; }
.core-service { background:#137da4; color:white; }.core-idle { background:#f1cc6e; color:#4c370b; }.core-spare { background:#e9eef2; color:#617686; }
.network-core-key { display:flex; gap:20px; flex-wrap:wrap; font-size:11px; margin:16px 0; }.network-core-key span:nth-child(1) { color:#137da4; }.network-core-key span:nth-child(2) { color:#8a6315; }.network-core-key span:nth-child(3) { color:#617686; }
.network-register,.bi-build { border:1px solid #d5e2ea; border-radius:10px; background:white; margin-top:14px; padding:18px; }
.network-register summary,.bi-build summary { cursor:pointer; font-size:14px; font-weight:600; }.network-register[open] summary { margin-bottom:18px; }
.bi-shell { border:1px solid #ccd8e1; border-radius:15px; overflow:hidden; background:#edf2f6; box-shadow:0 20px 44px -36px #15384a; }
.bi-header { display:flex; gap:16px; align-items:center; flex-wrap:wrap; background:#15384a; color:white; padding:22px; border-bottom:3px solid #e6b850; }
.bi-header > div { margin-right:auto; flex:1 1 300px; }.bi-header strong { font-size:17px; }.bi-header small { display:block; opacity:.65; font-size:10px; margin-top:6px; padding-left:28px; }
.bi-mark { color:#f2cd61; padding-right:10px; }.bi-header label { display:flex; flex-direction:column; gap:4px; font-size:10px; flex:0 1 240px; min-width:0; }
.bi-header select { max-width:100%; min-height:38px; border:1px solid #597686; border-radius:5px; background:#234b60; color:white; padding:8px; font:12px var(--font); }
.bi-header button { border:1px solid #7290a1; color:white; background:transparent; padding:10px 13px; border-radius:5px; cursor:pointer; margin-top:16px; }
#bi-content { padding:20px; }.bi-cards { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.bi-cards article { background:white; padding:19px; border-radius:9px; border-top:3px solid #128bb8; min-width:0; }
.bi-cards span { display:block; font-size:11px; color:#5b7282; }.bi-cards b { display:block; margin-top:9px; font-size:clamp(22px,2.3vw,31px); letter-spacing:-.05em; overflow-wrap:anywhere; }.bi-cards small { display:block; font-size:9px; color:#597486; margin-top:5px; }
.bi-count { font-size:10px; color:#627c8e; margin:16px 0; }.bi-charts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }.bi-charts .ftth-chart { border:0; border-radius:9px; padding:20px; }.bi-charts .ftth-chart h3 { font-size:15px; }
.bi-foot { padding:15px 22px; font-size:11px; color:#577184; background:#e1e9f0; margin:0; }.bi-build p,.bi-build li { font-size:12px; color:#506b7c; line-height:1.65; }
@media(max-width:860px){.network-metrics,.bi-cards { grid-template-columns:repeat(2,minmax(0,1fr)); }.bi-charts { grid-template-columns:1fr; }.network-core-grid { grid-template-columns:repeat(8,minmax(0,1fr)); }.network-map-frame #network-map { overflow-x:auto; }.network-map { min-width:700px; }}
@media(max-width:480px){.network-metrics b { font-size:20px; }.network-metrics > div { padding:14px; }.network-core-grid { grid-template-columns:repeat(6,minmax(0,1fr)); }#bi-content { padding:12px; }.bi-header { padding:16px; }.bi-header strong { font-size:15px; }.bi-cards article { padding:14px; }}