.network-page {
  --network-green: #075b37;
  --network-green-dark: #0d3d2d;
  --network-orange: #ee6b24;
  --network-line: #d8e7df;
  --network-ink: #132d25;
  --network-muted: #536b60;
  background: #f6faf8;
  color: var(--network-ink);
  min-height: 70vh;
  font-family: Arial, Helvetica, sans-serif;
}
.network-page *, .network-page *::before, .network-page *::after { box-sizing: border-box; }
.network-page button, .network-page input { font: inherit; }
.network-page button { cursor: pointer; }
.network-hero { background: var(--network-green-dark); border-bottom: 4px solid var(--network-orange); color: #fff; }
.network-shell { width: min(1380px, calc(100% - 40px)); margin: 0 auto; }
.network-hero .network-shell { padding: 42px 0 38px; }
.network-eyebrow { color: #b5e8d0; font-size: 12px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
.network-hero h1 { color: #fff; font-size: clamp(34px, 4vw, 52px); line-height: 1.08; margin: 9px 0 13px; font-weight: 800; }
.network-hero p { color: #dcefe5; max-width: 760px; line-height: 1.6; font-size: 16px; margin: 0; }
.network-main { padding: 30px 0 58px; }
.network-intro { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.network-intro p { margin: 0; color: var(--network-muted); font-size: 14px; }
.network-date { display: inline-flex; align-items: center; background: #e4f2ea; color: var(--network-green); border-radius: 999px; padding: 8px 13px; font-size: 12px; font-weight: 700; }
.network-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(290px, .75fr); gap: 20px; align-items: start; }
.network-panel { background: #fff; border: 1px solid var(--network-line); border-radius: 18px; box-shadow: 0 14px 36px rgba(13,61,45,.07); overflow: hidden; }
.network-panel-head { padding: 17px 20px; border-bottom: 1px solid var(--network-line); display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; min-height: 66px; }
.network-crumbs { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; font-weight: 700; }
.network-crumbs button { color: var(--network-green); background: transparent; border: 0; padding: 3px 0; }
.network-crumbs button:hover { text-decoration: underline; }
.network-crumbs .sep { color: #9bb2a6; }
.network-hint { color: var(--network-muted); font-size: 12px; }
.network-map-box { position: relative; background: #eaf4ef; padding: 16px; }
.network-map-box svg { display: block; width: 100%; max-height: 72vh; margin: auto; }
.network-map-box svg[viewBox="0 0 1000 1130"] { max-width: 640px; }
.network-map-box svg:not([viewBox="0 0 1000 1130"]) { max-width: 740px; }
.network-map-box .region { stroke: #fff; stroke-width: 1.4; vector-effect: non-scaling-stroke; cursor: pointer; transition: filter .12s, stroke-width .12s, opacity .12s; }
.network-map-box .region:hover, .network-map-box .region:focus-visible, .network-map-box .region.is-hot { filter: brightness(1.16); stroke: var(--network-orange); stroke-width: 3; outline: none; }
.network-map-box .region.is-muted { opacity: .32; }
.network-map-box .region.is-selected { stroke: var(--network-orange); stroke-width: 3.5; }
.network-map-box .region.is-selected:hover { filter: none; }
.network-map-box .small-region { stroke: #fff; stroke-width: 1.2; vector-effect: non-scaling-stroke; cursor: pointer; }
.network-map-box .small-region:hover, .network-map-box .small-region.is-hot { stroke: var(--network-orange); stroke-width: 2.5; }
.network-map-label { position: absolute; top: 30px; right: 28px; width: min(34%, 260px); pointer-events: none; background: rgba(255,255,255,.92); border: 1px solid var(--network-line); border-radius: 14px; padding: 13px 16px; box-shadow: 0 7px 20px rgba(13,61,45,.08); }
.network-map-label strong { display: block; color: var(--network-green); font-size: clamp(24px, 3vw, 38px); line-height: 1.15; }
.network-map-label span { display: block; color: var(--network-muted); font-size: 12px; line-height: 1.4; }
.network-map-label .label-title { font-weight: 700; color: var(--network-ink); font-size: 15px; }
.network-map-note { border-top: 1px solid var(--network-line); color: var(--network-muted); font-size: 12px; line-height: 1.5; padding: 11px 18px; }
.network-side-head { padding: 20px 20px 15px; border-bottom: 1px solid var(--network-line); }
.network-side-head h2 { font-size: 23px; font-weight: 800; margin: 0 0 4px; color: var(--network-green-dark); }
.network-side-head p { margin: 0; color: var(--network-muted); font-size: 13px; }
.network-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; padding: 15px 18px 0; }
.network-stats[hidden] { display: none; }
.network-stat { background: #eff7f2; border-radius: 10px; padding: 10px; min-width: 0; }
.network-stat strong { display: block; color: var(--network-green); font-size: 19px; line-height: 1.1; overflow-wrap: anywhere; }
.network-stat span { display: block; color: var(--network-muted); font-size: 10px; line-height: 1.3; margin-top: 4px; text-transform: uppercase; letter-spacing: .02em; }
.network-search { margin: 16px 18px 4px; display: flex; align-items: center; gap: 8px; border: 1px solid #bfd8ca; border-radius: 10px; padding: 0 12px; color: var(--network-green); }
.network-search[hidden] { display: none; }
.network-search:focus-within { border-color: var(--network-green); box-shadow: 0 0 0 3px rgba(7,91,55,.11); }
.network-search input { width: 100%; border: 0; outline: 0; padding: 10px 0; background: transparent; color: var(--network-ink); font-size: 14px; }
.network-list { padding: 8px 18px 18px; max-height: 570px; overflow: auto; }
.network-list.is-directory { max-height: none; overflow: visible; }
.network-row { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 12px; background: #fff; border: 0; border-bottom: 1px solid #edf2ee; padding: 11px 5px; text-align: left; color: var(--network-ink); }
.network-row:hover, .network-row:focus-visible { background: #e8f5ed; outline: 0; }
.network-row span { font-size: 14px; font-weight: 700; }
.network-row small { color: var(--network-muted); font-weight: 500; }
.network-row strong { color: var(--network-green); font-size: 15px; white-space: nowrap; }
.network-empty { padding: 22px 5px; color: var(--network-muted); font-size: 14px; }
.network-district { padding: 20px; }
.network-district h3 { margin: 0 0 8px; font-size: 19px; color: var(--network-green-dark); }
.network-district p { margin: 0 0 13px; color: var(--network-muted); font-size: 14px; line-height: 1.5; }
.network-district .network-district-total { background: #e8f5ed; border-left: 4px solid var(--network-green); border-radius: 8px; padding: 14px; margin-bottom: 16px; }
.network-district-total strong { font-size: 28px; color: var(--network-green); display: block; line-height: 1.1; }
.network-district-total span { color: var(--network-muted); font-size: 12px; }
.network-district button { color: var(--network-green); border: 1px solid var(--network-green); border-radius: 8px; background: #fff; padding: 8px 12px; font-size: 13px; font-weight: 700; }
.network-district button:hover { background: #e8f5ed; }
.network-centre-directory { margin-top: 21px; padding-top: 17px; border-top: 1px solid var(--network-line); }
.network-centre-directory h4 { margin: 0 0 6px; color: var(--network-green-dark); font-size: 18px; font-weight: 800; }
.network-centre-summary { font-size: 12px !important; line-height: 1.45 !important; margin-bottom: 13px !important; }
.network-centre-search { display: block; margin-bottom: 9px; }
.network-centre-search span { display: block; color: var(--network-green-dark); font-size: 12px; font-weight: 800; margin-bottom: 6px; }
.network-centre-search input { width: 100%; min-height: 39px; border: 1px solid #bdd7c8; border-radius: 8px; background: #fff; color: var(--network-ink); padding: 7px 10px; font-size: 13px; outline: 0; }
.network-centre-search input:focus { border-color: var(--network-green); box-shadow: 0 0 0 3px rgba(7,91,55,.1); }
.network-centre-showing { color: var(--network-muted); font-size: 11px !important; font-weight: 700; margin: 0 0 10px !important; }
.network-centre-results { max-height: 580px; overflow-y: auto; padding-right: 4px; scrollbar-color: #a7cbb7 #f3f8f5; }
.network-centre-card { background: #fff; border: 1px solid var(--network-line); border-radius: 12px; padding: 12px; margin-bottom: 10px; box-shadow: 0 3px 8px rgba(13,61,45,.035); overflow-wrap: anywhere; }
.network-centre-card[hidden], .network-centre-directory .network-empty[hidden] { display: none; }
.network-centre-head { display: flex; align-items: flex-start; gap: 8px; }
.network-centre-number { flex: none; min-width: 24px; height: 24px; display: inline-grid; place-items: center; border-radius: 7px; background: #e9f6ee; color: var(--network-green); font-size: 11px; font-weight: 800; }
.network-centre-card h5 { margin: 2px 0 0; font-size: 14px; line-height: 1.3; font-weight: 800; color: var(--network-green-dark); }
.network-centre-bank { margin: 5px 0 8px 32px !important; color: var(--network-green) !important; font-size: 12px !important; font-weight: 700; }
.network-centre-details { margin: 0; display: grid; gap: 6px; }
.network-centre-details > div { display: grid; grid-template-columns: 88px minmax(0,1fr); gap: 6px; font-size: 12px; line-height: 1.38; }
.network-centre-details dt { color: var(--network-muted); font-weight: 700; }
.network-centre-details dd { margin: 0; color: var(--network-ink); }
.network-centre-details dd a { color: var(--network-green); font-weight: 800; white-space: nowrap; margin-left: 7px; text-decoration: underline; }
.network-centre-details dd a:hover { color: var(--network-orange); }
.network-tooltip { position: fixed; z-index: 100; pointer-events: none; background: #0d3d2d; color: #fff; border-radius: 8px; padding: 8px 10px; font-size: 12px; box-shadow: 0 8px 22px rgba(0,0,0,.18); display: none; max-width: 250px; }
.network-tooltip.is-visible { display: block; }
.network-tooltip strong { display: block; font-size: 13px; }
.network-footer { background: var(--network-green-dark); color: #e1f2e8; font-size: 13px; }
.network-footer .network-shell { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding: 20px 0; }
.network-footer a { color: #fff; text-decoration: underline; }
@media (max-width: 960px) { .network-grid { grid-template-columns: 1fr; } .network-list { max-height: 420px; } }
@media (max-width: 650px) {
  .network-shell { width: min(calc(100% - 24px), 1380px); }
  .network-hero .network-shell { padding: 31px 0; }
  .network-main { padding: 18px 0 40px; }
  .network-map-box { padding: 10px; }
  .network-map-box svg { max-height: 62vh; }
  .network-map-label { position: static; width: auto; margin-bottom: 10px; padding: 10px 12px; }
  .network-map-label strong { font-size: 25px; }
  .network-stats { grid-template-columns: repeat(2, 1fr); }
}

/* District-level centre map and clickable directory. */
.network-panel.is-district .network-panel-head,
.network-side-head.is-district { background: #f3faff; }
.network-panel.is-district .network-panel-head { min-height: 48px; padding: 12px 18px; }
.network-hint:empty { display: none; }
.network-map-box.is-district { background: #f9fcfd; padding: 16px; }
.network-map-box.is-district .network-map-label {
  position: static;
  width: auto;
  max-width: none;
  display: flex;
  align-items: end;
  flex-wrap: wrap;
  gap: 5px 30px;
  margin: 0 0 12px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.network-map-box.is-district .network-map-label .label-title { font-size: 24px; font-weight: 800; line-height: 1.1; }
.network-map-box.is-district .network-map-label strong { font-size: 48px; line-height: 1; color: #07639b; }
.network-map-box.is-district .network-map-label .label-subtitle {
  display: block;
  margin-top: 6px;
  color: var(--network-muted);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.network-bank-legend { display: flex; flex-basis: 100%; flex-wrap: wrap; gap: 5px 13px; margin-top: 9px; }
.network-legend-item { display: inline-flex !important; align-items: center; gap: 5px; color: #455c52 !important; font-size: 11px !important; white-space: nowrap; }
.network-legend-item i { width: 11px; height: 11px; flex: 0 0 11px; border: 1.5px solid; border-radius: 50%; }
.network-legend-item i.is-missing { border-style: dashed; border-color: #7d8a84; background: transparent; }
.network-map-box.is-district #network-map-host { background: #c9e1ed; overflow: hidden; }
.network-map-box.is-district svg { width: 100%; max-width: none !important; max-height: 76vh; min-height: 500px; }
.network-map-box.is-district .region.is-context { fill: #dcecf2; opacity: .65; }
.network-map-box.is-district .region.is-selected,
.network-map-box.is-district .region.is-selected:hover { fill: #f6fbff; stroke: #0874ae; stroke-width: 2.5; filter: none; cursor: default; }
.network-point { stroke: #fff; stroke-width: 1.5; vector-effect: non-scaling-stroke; cursor: pointer; }
.network-point:hover, .network-point.is-hot { stroke: #ffc64f; stroke-width: 2.5; }
.network-point.is-muted { opacity: .18; }
.network-point.is-selected { stroke: #ffbd37; stroke-width: 3; filter: drop-shadow(0 0 2px #0d3d2d); }
.network-side-head.is-district { padding: 14px 18px 13px; }
.network-side-head.is-district h2 { font-size: 22px; }
.network-side-head.is-district p { font-size: 10px; letter-spacing: .13em; text-transform: uppercase; }
.network-side-head.is-district + .network-stats { grid-template-columns: repeat(3, minmax(0,1fr)); padding: 14px 18px 0; }
.network-side-head.is-district + .network-stats .network-stat { background: #fffdf9; border: 1px solid #e9e2d8; }
.network-side-head.is-district + .network-stats .network-stat strong { color: var(--network-green-dark); font-size: 22px; }
.network-side-head.is-district + .network-stats .network-stat span { font-size: 9px; letter-spacing: .08em; }
.network-selected-detail { margin: 16px 18px 0; border: 1.5px solid #ed7448; border-radius: 14px; background: #fffaf6; overflow: hidden; }
.network-selected-detail[hidden] { display: none; }
.network-detail-head { display: flex; align-items: center; justify-content: space-between; padding: 9px 13px; background: #fff0e8; border-bottom: 1px solid #f1b595; }
.network-detail-head strong { font-size: 11px; letter-spacing: .1em; }
.network-detail-head button { border: 0; background: transparent; color: #6c655e; font-size: 20px; line-height: 1; padding: 0 4px; }
.network-detail-fields { display: grid; gap: 9px; margin: 0; padding: 13px 14px; }
.network-detail-fields > div { min-width: 0; }
.network-detail-fields dt { color: #67766d; font-size: 9px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; }
.network-detail-fields dd { margin: 3px 0 0; color: var(--network-ink); font-size: 13px; font-weight: 700; line-height: 1.4; overflow-wrap: anywhere; }
.network-detail-coordinates { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.network-selected-detail > a { display: block; margin: 0 14px 13px; padding: 9px 12px; border: 1px solid #e1dcd4; border-radius: 999px; background: #fff; color: #07639b; text-align: center; text-decoration: none; font-size: 12px; font-weight: 800; }
.network-selected-detail > a:hover { border-color: #07639b; background: #f4fbff; }
.network-search.is-district { margin: 15px 18px 4px; border-radius: 999px; border-color: #e5ded4; background: #fffdf9; }
.network-list.is-directory { max-height: min(58vh, 600px); overflow-y: auto; padding: 5px 18px 16px; }
.network-centre-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 2px 10px; width: 100%; padding: 8px 5px; border: 0; border-bottom: 1px dashed #e4e9e5; background: transparent; color: var(--network-ink); text-align: left; }
.network-centre-row:hover, .network-centre-row.is-hot { background: #edf8f2; }
.network-centre-row.is-selected { background: #fff0e8; }
.network-centre-row[hidden], .network-list .network-empty[hidden] { display: none; }
.network-centre-row-name { font-size: 12px; font-weight: 800; overflow-wrap: anywhere; }
.network-centre-row-name em { display: inline-block; margin-left: 6px; padding: 2px 5px; border-radius: 999px; background: #edf0ee; color: #66756c; font-size: 9px; font-style: normal; font-weight: 600; white-space: nowrap; }
.network-centre-row-bank { font-size: 10px; font-weight: 800; white-space: nowrap; }
.network-centre-row small { grid-column: 1/-1; color: var(--network-muted); font-size: 10px; line-height: 1.35; }
@media (max-width: 960px) { .network-list.is-directory { max-height: 450px; } }
@media (max-width: 650px) {
  .network-map-box.is-district { padding: 10px; }
  .network-map-box.is-district svg { min-height: 320px; max-height: 56vh; }
  .network-map-box.is-district .network-map-label { gap: 5px 18px; }
  .network-map-box.is-district .network-map-label strong { font-size: 38px; }
  .network-map-box.is-district .network-map-label .label-title { font-size: 20px; }
}