/* Network overview extends the existing Kaspa visual system. */
.network-overview{margin:0 0 36px;min-width:0}
.network-overview-head{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:22px}
.network-overview-title{font:400 19px/1.4 var(--font);letter-spacing:-.5px;margin:0 0 4px}
.network-overview-subtitle{font-size:12px;color:var(--muted);margin:0}
.network-overview-controls{display:flex;align-items:center;justify-content:flex-end;gap:15px;min-width:0}
.network-overview-status{font:10px/1.6 var(--font);color:var(--muted);max-width:230px;text-align:right}
.network-overview-refresh{display:flex;gap:8px;align-items:center;border:1px solid #38564f;padding:9px 13px;min-height:42px;font:11px/1.5 var(--font);color:var(--mint);white-space:nowrap;transition:background .2s,border-color .2s}
.network-overview-refresh:hover{background:#142c26;border-color:var(--mint)}
.network-overview-refresh:disabled{opacity:.5;cursor:wait}
.network-stat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;align-items:start}
.network-stat{background:linear-gradient(145deg,#101c1d,#0a1114);border:1px solid var(--line);padding:22px 20px 0;position:relative;overflow:hidden;min-width:0;transition:border-color .2s}
.network-stat:before{content:'';position:absolute;top:0;left:0;width:34px;height:2px;background:var(--mint);opacity:.65}
.network-stat:hover{border-color:#375a52}
.network-stat-title{display:flex;align-items:center;gap:9px;color:#b9d3cb;font:400 12px/1.4 var(--font);min-height:36px;margin:0 0 17px}
.network-stat-title svg{width:21px;height:21px;flex:0 0 auto;fill:none;stroke:var(--mint);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;opacity:.9}
.network-stat-figure{display:flex;align-items:baseline;gap:7px;min-height:43px;min-width:0}
.network-stat-value{font:400 clamp(26px,2.3vw,36px)/1.25 var(--font);letter-spacing:-1.3px;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.network-stat-unit{font:400 10px/1.4 var(--font);color:var(--muted);white-space:nowrap}
.network-stat-note{display:block;font-size:11px;line-height:1.6;color:#a5bbb3;min-height:18px;margin:8px 0 0}
.network-stat-aux{font-size:10px;color:var(--muted);min-height:18px;line-height:1.6;margin:3px 0 0;font-variant-numeric:tabular-nums}
.network-stat-aux:empty{visibility:hidden}
.network-stat-state{display:flex;gap:6px;align-items:center;color:#79998c;font-size:9px;margin:11px 0 14px;line-height:1.5}
.network-stat-state:before{content:'';height:4px;width:4px;min-width:4px;border-radius:50%;background:var(--mint)}
.network-stat[data-metric-status=stale] .network-stat-state{color:#c6a26c}
.network-stat[data-metric-status=stale] .network-stat-state:before{background:#c6a26c}
.network-stat[data-metric-status=offline] .network-stat-state{color:#a99592}
.network-stat[data-metric-status=offline] .network-stat-state:before{background:#a99592}
.network-stat[data-metric-status=connecting] .network-stat-state{color:var(--muted)}
.network-stat[data-metric-status=connecting] .network-stat-state:before{background:var(--muted)}
.network-stat details{border-top:1px solid #233133;margin:0 -20px;padding:0 20px;font-size:11px;color:var(--muted)}
.network-stat summary{list-style:none;cursor:pointer;min-height:42px;display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:10px;color:#8da89e}
.network-stat summary::-webkit-details-marker{display:none}
.network-stat summary:after{content:'+';font:16px/1 var(--font);color:var(--mint)}
.network-stat details[open] summary:after{content:'−'}
.network-stat summary:focus-visible{outline:2px solid var(--mint);outline-offset:2px}
.network-stat details p{font-size:11px;line-height:1.75;margin:0 0 13px}
.network-stat details p strong{font-weight:400;color:#c6d6cf}
.network-stat-source{display:block;color:var(--mint);font-size:10px;overflow-wrap:anywhere;line-height:1.6;margin:5px 0 17px}
.network-stat-source:hover{text-decoration:underline}
.network-stat-time{display:block;color:#80988e;font-size:9px;margin-top:3px}
.network-supply-meter{appearance:none;border:0;height:3px;width:100%;display:block;margin:7px 0 -10px;background:#203b33;color:var(--mint)}
.network-supply-meter::-webkit-meter-bar{border:0;border-radius:0;background:#203b33;height:3px}
.network-supply-meter::-webkit-meter-optimum-value{background:var(--mint)}
.network-supply-meter::-moz-meter-bar{background:var(--mint)}
.network-overview-foot{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;margin-top:15px;color:#758f85;font-size:10px;line-height:1.75}
.network-overview-foot p{margin:0;max-width:740px}
.network-overview-foot a{color:#a1c9b8;white-space:nowrap}
.network-overview-foot a:hover{color:var(--mint);text-decoration:underline}
@media(min-width:1500px){.network-stat{padding-top:25px;padding-bottom:0}.network-stat-title{font-size:13px}}
@media(max-width:1050px){.network-stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.network-stat-value{font-size:34px}.network-stat-title{min-height:24px}.network-overview-head{align-items:flex-start}.network-overview-controls{flex-direction:column-reverse;align-items:flex-end;gap:7px}.network-overview-status{font-size:9px}}
@media(max-width:600px){.network-overview{margin-bottom:27px}.network-overview-head{gap:12px;margin-bottom:18px}.network-overview-title{font-size:17px}.network-overview-subtitle{font-size:11px;max-width:175px;line-height:1.7}.network-overview-controls{max-width:145px}.network-overview-refresh{min-height:40px;font-size:10px;padding:8px 10px}.network-overview-status{max-width:145px;line-height:1.5}.network-stat-grid{gap:10px}.network-stat{padding:15px 12px 0}.network-stat-title{font-size:10px;gap:7px;min-height:32px;margin-bottom:13px}.network-stat-title svg{width:18px;height:18px}.network-stat-figure{gap:5px;min-height:35px;flex-wrap:wrap;row-gap:0}.network-stat-value{font-size:29px;letter-spacing:-1px}.network-stat-unit{font-size:9px}.network-stat-note{font-size:10px;line-height:1.6;min-height:32px;margin-top:6px}.network-stat-aux{font-size:9px;line-height:1.5;min-height:27px}.network-stat-state{font-size:8px;margin-top:8px;margin-bottom:11px}.network-stat details{margin:0 -12px;padding:0 12px}.network-stat summary{font-size:9px;min-height:40px}.network-stat details p{font-size:10px}.network-stat-source{font-size:9px}.network-overview-foot{display:block;font-size:9px;margin-top:12px}.network-overview-foot>a{display:inline-block;margin-top:9px}.network-supply-meter{margin-top:4px}}
@media(prefers-reduced-motion:reduce){.network-stat,.network-overview-refresh{transition:none}}
.network-stat-directory{font:400 12px/1.5 var(--font);color:var(--mint);display:flex;align-items:center;gap:10px;min-height:43px}
.network-stat-directory:hover{text-decoration:underline}
.network-stat-directory span{font-size:19px}
.network-stat[data-metric-status=external] .network-stat-state{color:#85a295}
.network-stat[data-metric-status=external] .network-stat-state:before{background:transparent;border:1px solid #85a295;width:5px;height:5px}
@media(max-width:600px){.network-stat-directory{font-size:10px;gap:6px;min-height:35px}}
.network-external{margin-top:45px;padding-top:30px;border-top:1px solid var(--line)}
.network-external-heading{display:flex;justify-content:space-between;align-items:start;gap:25px;margin-bottom:24px}
.network-external-heading h3{font-size:23px;margin:12px 0}
.network-external-heading p{font-size:12px;line-height:1.8;color:var(--muted);max-width:700px;margin:0}
.network-external-heading>.text-link{flex-shrink:0;margin-top:10px}
.network-external-grid{display:grid;gap:20px;grid-template-columns:repeat(2,minmax(0,1fr))}
.network-external-grid .network-stat{min-width:0}
@media(max-width:600px){
 .network-external-heading{flex-direction:column;gap:12px}
 .network-external-heading>.text-link{margin:0}
}
