@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;600;700;800&display=swap');
/* Design system ported as-is from the sibling hotspot-watch-cloudflare app (same PLN UPT
   Palangkaraya visual identity — sidebar, masthead, cards, tables, map chrome) so
   Lightning Watch reads as the same family of app. `--bolt` is the one new token, for
   the lightning-strike layer/accents this app adds (hotspot-watch's `--coral` flame
   color has no equivalent meaning here). */
:root { --ink: #16233b; --muted: #6b7c93; --line: #e3e8f0; --paper: #f5f7fa; --card: #ffffff; --teal: #00438b; --lime: #eaf3ff; --coral: #ff7a1a; --blue-strong: #00438b; --blue-soft: #eaf2fb; --blue-dark: #081d43; --critical: #e5484d; --warning: #f5a623; --warning-ink: #8a5a05; --moderate: #2f7cd6; --safe: #21a366; --recur: #7c3aed; --recur-soft: #f3ecfe; --bolt: #f2b705; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; padding-bottom: 72px; color: var(--ink); background: var(--paper); font-family: Manrope, sans-serif; }
.layout { display: flex; align-items: flex-start; min-height: 100vh; }
.sidebar { width: 224px; flex-shrink: 0; position: sticky; top: 0; height: 100vh; overflow-y: auto; overflow-x: hidden; background: linear-gradient(180deg, var(--blue-strong), var(--blue-dark)); padding: 20px 14px; transition: width .18s ease, padding .18s ease; }
.sidebar.collapsed { width: 60px; padding: 20px 8px; }
.sidebar.collapsed .sidebar-brand { justify-content: center; padding: 0 0 14px; }
.sidebar.collapsed .sidebar-brand > div { display: none; }
.sidebar.collapsed .sidebar-link { justify-content: center; padding: 9px 0; }
.sidebar.collapsed .sidebar-link span { display: none; }
.sidebar-toggle { display: flex; align-items: center; justify-content: center; width: 100%; margin: 0 0 12px; padding: 6px 0; border: 1px solid rgba(255,255,255,.14); border-radius: 8px; background: rgba(255,255,255,.05); color: #b9cdec; cursor: pointer; }
.sidebar-toggle:hover { background: rgba(255,255,255,.1); color: #fff; }
.sidebar-toggle svg { width: 14px; height: 14px; flex-shrink: 0; transition: transform .18s ease; }
.sidebar.collapsed .sidebar-toggle svg { transform: rotate(180deg); }
.language-switch { display: flex; align-items: center; gap: 3px; margin: 0 0 13px; padding: 3px; border: 1px solid rgba(255,255,255,.17); border-radius: 9px; background: rgba(4,31,76,.24); }
.language-switch-label { flex: 1; padding: 0 5px; color: #b9cdec; font: 700 10px 'DM Mono', monospace; letter-spacing: .04em; text-transform: uppercase; }
.language-switch button { min-width: 31px; padding: 5px 6px; border: 0; border-radius: 6px; background: transparent; color: #b9cdec; cursor: pointer; font: 700 10px 'DM Mono', monospace; letter-spacing: .04em; transition: background .16s ease, color .16s ease, box-shadow .16s ease; }
.language-switch button:hover { color: #fff; background: rgba(255,255,255,.12); }
.language-switch button.active { color: #08265a; background: #fff; box-shadow: 0 1px 5px rgba(0,0,0,.16); }
.sidebar.collapsed .language-switch { justify-content: center; margin-bottom: 13px; }
.sidebar.collapsed .language-switch-label { display: none; }
.sidebar-brand { display: flex; align-items: center; gap: 12px; padding: 0 6px 16px; margin-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,.14); }
.sidebar-mark { display: grid; place-items: center; width: 36px; height: 36px; flex-shrink: 0; }
.sidebar-mark img { width: 100%; height: 100%; object-fit: contain; display: block; }
.sidebar-brand strong { display: block; color: #fff; font-size: 14px; }
.sidebar-brand small { display: block; color: #a9c1e6; font-size: 11px; }
.sidebar-nav { display: flex; flex-direction: column; gap: 3px; }
.sidebar-link { display: flex; align-items: center; gap: 11px; padding: 9px 11px; border-radius: 9px; color: #b9cdec; text-decoration: none; font: 600 13px Manrope, sans-serif; }
.sidebar-link svg { width: 17px; height: 17px; flex-shrink: 0; }
.sidebar-link:hover { background: rgba(255,255,255,.08); color: #fff; }
.sidebar-link.active { background: rgba(255,255,255,.14); color: #fff; box-shadow: inset 3px 0 0 var(--bolt); }
.app-shell { position: relative; flex: 1; min-width: 0; max-width: 1240px; margin: auto; padding: 22px 26px 26px; }
.app-shell-fluid { max-width: none; }
.masthead, .url-row, .results-heading, footer { display: flex; align-items: center; }.masthead { justify-content: space-between; gap: 20px; border-bottom: 1px solid var(--line); padding-bottom: 14px; }.brand-wrap, .utility-right { display: flex; align-items: center; gap: 14px; }.brand { display: flex; align-items: center; gap: 12px; color: var(--blue-strong); text-decoration: none; font-weight: 800; }.brand-mark { display: grid; width: 38px; height: 38px; place-items: center; color: #f8fbff; background: linear-gradient(135deg, var(--blue-strong), var(--moderate)); font: 500 11px 'DM Mono', monospace; border-radius: 9px; }.danantara-logo, .pln-logo { display: flex; align-items: center; }
.danantara-logo { height: 26px; }
.pln-logo { height: 34px; }
.danantara-logo img, .pln-logo img { height: 100%; width: auto; max-width: 150px; display: block; object-fit: contain; }.source-status, label, .eyebrow, .summary-item span, th, .group-tag, .coordinate, footer, .text-button { font: 500 11px 'DM Mono', monospace; }.source-status { color: var(--muted); }.source-status i { display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: var(--coral); }.source-status.success i { background: var(--safe); }.source-status.loading i { background: var(--warning); animation: pulse 1s infinite; }.source-status.error i { background: var(--critical); }.source-status.warning i { background: var(--warning); } @keyframes pulse { 50% { opacity: .35; } }
.hero { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 14px 30px; padding: 32px 0 24px; }.hero > div:first-child { flex: 1 1 260px; min-width: 260px; }.eyebrow { margin: 0 0 8px; color: var(--teal); text-transform: uppercase; }.hero h1 { max-width: 700px; margin: 0; font-size: clamp(24px, 2.8vw, 36px); line-height: 1.15; letter-spacing: -.5px; text-transform: uppercase; font-weight: 800; }.hero h1 em { color: var(--teal); font-style: normal; }.lede { max-width: 100%; margin: 14px 0 0; color: var(--muted); font-size: 14px; line-height: 1.6; }.hero-rule { min-width: 140px; padding: 10px 0 0 16px; border-left: 2px solid var(--bolt); }.hero-rule span, .hero-rule small { display: block; color: var(--muted); font: 500 10px 'DM Mono', monospace; }.hero-rule strong { display: block; margin: 3px 0; color: var(--teal); font: 700 16px 'DM Mono', monospace; }
.controls { display: grid; grid-template-columns: 1.7fr .75fr .75fr .75fr .95fr; gap: 14px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); box-shadow: 0 1px 2px rgba(16,24,40,.04); color: var(--ink); }.controls.controls-3col { grid-template-columns: repeat(3, 1fr); }.controls.controls-2col { grid-template-columns: repeat(2, 1fr); }.controls.controls-4col { grid-template-columns: repeat(4, 1fr); }.controls label { display: block; margin-bottom: 6px; color: var(--muted); text-transform: uppercase; letter-spacing: .3px; }.controls input, .controls select { width: 100%; min-width: 0; padding: 9px 10px; border: 1px solid var(--line); border-radius: 8px; outline: 0; background: #fbfcfe; color: var(--ink); font: 500 13px 'DM Mono', monospace; }.controls input:focus, .controls select:focus { border-color: var(--blue-strong); box-shadow: 0 0 0 3px rgba(0,67,139,.12); }.controls select option { color: var(--ink); }
.update-meta { margin: 8px 0 0; color: var(--muted); font: 500 11px 'DM Mono', monospace; text-transform: uppercase; }
.status-pill { display: inline-block; padding: 3px 8px; border-radius: 999px; font: 700 10px 'DM Mono', monospace; letter-spacing: .3px; text-transform: uppercase; }
.status-pill.critical { color: #fff; background: var(--critical); }
.status-pill.warning { color: var(--warning-ink); background: var(--warning); }
.status-pill.moderate { color: #fff; background: var(--moderate); }
.status-pill.safe { color: #fff; background: var(--safe); }
.status-pill.none { color: #fff; background: var(--blue-strong); }
.status-pill.lightning { color: #5c4400; background: #fff3cf; }
.summary { display: grid; grid-template-columns: repeat(4, 1fr); margin: 14px 0; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--card); box-shadow: 0 1px 2px rgba(16,24,40,.04); }.summary-item { min-height: 84px; padding: 15px 18px; border-right: 1px solid var(--line); }.summary-item:last-child { border-right: 0; }.summary-item span { display: block; color: var(--muted); text-transform: uppercase; }.summary-item strong { display: block; margin-top: 12px; color: var(--teal); font: 500 24px 'DM Mono', monospace; }.summary-item.accent { background: linear-gradient(135deg, var(--blue-soft), #dce9fa); }.summary-item.accent span, .summary-item.accent strong { color: var(--blue-strong); }
.results-panel { padding: 20px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); box-shadow: 0 1px 2px rgba(16,24,40,.04); }.results-heading { justify-content: space-between; margin-bottom: 18px; }.results-heading h2 { margin: 0; font-size: 21px; }.text-button:disabled { opacity: .45; cursor: not-allowed; }.message { padding: 11px 13px; border-radius: 8px; color: var(--teal); background: var(--blue-soft); font-size: 12px; }.table-wrap { overflow-x: auto; } table { width: 100%; border-collapse: collapse; min-width: 700px; } th { padding: 12px 11px 9px; color: var(--muted); text-align: left; text-transform: uppercase; border-bottom: 1px solid var(--line); } td { padding: 11px 11px; border-bottom: 1px solid var(--line); font-size: 13px; vertical-align: middle; } td strong { font-weight: 700; }.group-tag { display: inline-block; padding: 4px 7px; border-radius: 6px; color: var(--blue-strong); background: var(--blue-soft); text-transform: uppercase; }.distance { color: var(--warning-ink); font: 500 15px 'DM Mono', monospace; }.coordinate { color: var(--muted); }.map-link { display: grid; width: 28px; height: 28px; border-radius: 8px; place-items: center; color: var(--blue-strong); border: 1px solid var(--line); text-decoration: none; font-size: 17px; }.map-link:hover { background: var(--blue-soft); border-color: #cfe1ff; }

.map-panel { padding: 20px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); box-shadow: 0 1px 2px rgba(16,24,40,.04); }
.map-lede-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; }
.map-count-inline { flex-shrink: 0; color: var(--blue-strong); font-weight: 700; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.map-fullscreen-btn { position: absolute; bottom: 26px; right: 8px; z-index: 1000; display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,.96); color: var(--blue-strong); cursor: pointer; box-shadow: 0 2px 8px rgba(16,24,40,.16); }
.map-fullscreen-btn svg { width: 15px; height: 15px; flex-shrink: 0; }
.map-fullscreen-btn:hover { background: var(--blue-soft); }
.map-fullscreen-btn.active { background: var(--blue-strong); color: #fff; border-color: var(--blue-strong); }
.map-basemap-btn { right: 44px; }
.map-basemap-btn[aria-pressed="true"] { background: var(--blue-strong); color: #fff; border-color: var(--blue-strong); }
.map-locate-btn { right: 80px; }
.map-locate-btn.locating svg { animation: map-locate-spin 1s linear infinite; }
@keyframes map-locate-spin { to { transform: rotate(360deg); } }
.my-location-icon { background: none; border: none; }
.my-location-dot { display: block; width: 14px; height: 14px; border-radius: 50%; background: #4285f4; border: 3px solid #fff; box-shadow: 0 0 0 2px rgba(66,133,244,.35), 0 1px 4px rgba(0,0,0,.4); }
.map-panel:fullscreen { background: var(--card); padding: 16px; overflow-y: auto; }
.map-fullscreen-title { display: none; margin: 0 0 10px; color: var(--ink); font: 800 30px Manrope, sans-serif; letter-spacing: -.3px; white-space: nowrap; }
#map-title { max-width: none; white-space: nowrap; font-size: clamp(15px, 2.6vw, 32px); }
@media (max-width: 760px) {
  #map-title { font-size: clamp(13px, 4.6vw, 22px); white-space: normal; line-height: 1.2; }
  .map-fullscreen-title { font-size: clamp(15px, 5.5vw, 22px); white-space: normal; line-height: 1.2; }
}
.map-panel:fullscreen .map-fullscreen-title { display: block; }
.map-fullscreen-logos { display: none; align-items: center; gap: 16px; margin: 0 0 10px; }
.map-panel:fullscreen .map-fullscreen-logos { display: flex; }
.map-fullscreen-logos img { height: 28px; width: auto; max-width: 140px; object-fit: contain; display: block; }
.location-check-panel { display: flex; flex-direction: column; gap: 8px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); margin: 14px 0 0; }
.location-check-label { align-self: flex-start; display: flex; align-items: center; gap: 5px; margin: 0; padding: 0; border: 0; background: none; flex-shrink: 0; color: var(--blue-strong); font: 700 11px 'DM Mono', monospace; text-transform: uppercase; letter-spacing: .3px; white-space: nowrap; cursor: pointer; }
.location-check-label svg { width: 11px; height: 11px; flex-shrink: 0; transition: transform .15s ease; }
.location-check-panel.collapsed .location-check-label svg { transform: rotate(-90deg); }
.location-check-panel.collapsed .location-check-body { display: none; }
.location-check-body { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; }
.location-check-fields { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.location-check-fields input { width: 128px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink); font: 500 12px 'DM Mono', monospace; outline: 0; }
.location-check-fields input:focus { border-color: var(--blue-strong); box-shadow: 0 0 0 3px rgba(0,67,139,.12); }
#location-search-input { width: 220px; font-family: Manrope, sans-serif; }
.location-check-divider { flex-shrink: 0; color: var(--muted); font: 600 10px 'DM Mono', monospace; text-transform: uppercase; letter-spacing: .3px; white-space: nowrap; }
.location-check-go-btn { padding: 7px 14px; border: 0; border-radius: 8px; background: var(--blue-strong); color: #fff; font: 700 11px 'DM Mono', monospace; cursor: pointer; }
.location-check-go-btn:hover { background: var(--blue-dark); }
.location-check-clear-btn { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--muted); font-size: 13px; cursor: pointer; }
.location-check-clear-btn:hover { background: var(--line); color: var(--ink); }
.location-check-result { color: var(--muted); font: 500 11px 'DM Mono', monospace; }
.location-check-result.location-check-error { color: var(--critical); }
.location-check-icon { background: transparent; border: none; font-size: 22px; line-height: 1; text-align: center; filter: drop-shadow(0 1px 2px rgba(0,0,0,.45)); }
.toggle-panel { padding: 10px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); margin-bottom: 14px; }
.toggle-panel-header { display: flex; align-items: center; gap: 6px; width: 100%; margin: 0; padding: 0; border: 0; background: none; color: var(--blue-strong); font: 700 11px 'DM Mono', monospace; text-transform: uppercase; letter-spacing: .3px; cursor: pointer; }
.toggle-panel-header svg { width: 11px; height: 11px; flex-shrink: 0; transition: transform .15s ease; }
.toggle-panel.collapsed .toggle-panel-header svg { transform: rotate(-90deg); }
.toggle-panel-body { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.toggle-panel.collapsed .toggle-panel-body { display: none; }
.toggle-panel-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.toggle-panel-label { flex-shrink: 0; min-width: 84px; color: var(--muted); font: 700 10px Manrope, sans-serif; text-transform: uppercase; letter-spacing: .2px; }
.filter-toggle-panel { padding: 0; border: 0; background: none; }
.filter-toggle-panel .toggle-panel-body { margin-top: 8px; }
.map-toggle-group { display: flex; flex-wrap: wrap; gap: 6px; }
.toggle-chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 999px; border: 1px solid var(--line); background: #fff; cursor: pointer; font: 600 11px Manrope, sans-serif; color: var(--ink); -webkit-user-select: none; user-select: none; transition: opacity .15s; }
.toggle-chip input { margin: 0; accent-color: var(--teal); cursor: pointer; }
.toggle-chip .toggle-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.toggle-chip.off { opacity: .4; }
.toggle-dot.towers { background: var(--blue-strong); }
.toggle-dot.gardu-induk { width: 13px; height: 13px; border-radius: 0; background: none; display: inline-flex; color: #f9a825; }
.toggle-dot.gardu-induk svg { width: 100%; height: 100%; display: block; }
.toggle-dot.lightning { width: 13px; height: 13px; border-radius: 0; background: none; display: inline-flex; color: var(--bolt); }
.toggle-dot.lightning svg { width: 100%; height: 100%; display: block; }
.toggle-dot.kawasan-hutan { background: #2e7d32; }
.toggle-dot.logging { background: #7b4b23; }
.toggle-dot.hti { background: #c0ca33; }
.toggle-dot.tambang { background: #5c6bc0; }
.toggle-dot.sawit { background: #c2185b; }
.toggle-dot.soil { background: #a97142; }
.toggle-dot.rain { background: #2e7dd6; }
.map-frame-wrap { position: relative; border: 1px solid var(--line); border-radius: 12px; background: var(--blue-soft); overflow: hidden; }
.tier-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 6px; vertical-align: middle; flex-shrink: 0; }
.tier-dot.critical { background: var(--critical); }
.tier-dot.warning { background: var(--warning); }
.tier-dot.moderate { background: var(--moderate); }
.tier-dot.safe { background: var(--safe); }
.tier-dot.lightning { background: var(--bolt); }
.mini-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 9px 14px; border: 1px solid var(--line); border-radius: 999px; background: #fff; margin: 14px 0; box-shadow: 0 1px 2px rgba(16,24,40,.04); font: 500 11px 'DM Mono', monospace; }
.mini-legend-label { color: var(--muted); text-transform: uppercase; letter-spacing: .3px; font-weight: 700; }
.mini-legend-item { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); white-space: nowrap; }
.map-legend-stack { position: absolute; top: 10px; right: 10px; z-index: 1000; display: flex; flex-direction: column; gap: 8px; max-width: calc(100% - 20px); }
.map-legend-overlay { border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.96); box-shadow: 0 4px 14px rgba(16,24,40,.16); font: 500 10px 'DM Mono', monospace; }
.map-legend-title { display: flex; align-items: center; gap: 5px; margin: 0; padding: 6px 10px; border: 0; background: none; color: var(--ink); font: 700 10px 'DM Mono', monospace; text-transform: uppercase; letter-spacing: .3px; white-space: nowrap; cursor: pointer; }
.map-legend-title svg { width: 11px; height: 11px; flex-shrink: 0; transition: transform .15s ease; }
.map-legend-overlay.expanded .map-legend-title svg { transform: rotate(180deg); }
.map-legend-body { display: none; flex-direction: column; gap: 5px; padding: 0 10px 8px; }
.map-legend-overlay.expanded .map-legend-body { display: flex; }
.map-legend-item { display: flex; align-items: center; gap: 5px; padding: 0; color: var(--ink); white-space: nowrap; }
.map-legend-code { color: var(--muted); font-size: 9px; margin-left: auto; padding-left: 8px; }
.map-legend-note { color: var(--muted); font: 500 9px 'DM Mono', monospace; line-height: 1.4; white-space: normal; padding-top: 2px; border-top: 1px solid var(--line); margin-top: 2px; max-width: 220px; }
.legend-swatch-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.map-sources-toggle { margin: 14px 0 0; }
.map-sources { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.map-source-item { display: inline-flex; align-items: center; gap: 3px; background: var(--blue-soft); border: 1px solid var(--line); border-radius: 999px; padding: 3px 9px; color: var(--muted); font: 500 9.5px 'DM Mono', monospace; white-space: nowrap; text-decoration: none; }
.map-source-item b { color: var(--ink); font-weight: 700; }
.map-source-link { cursor: pointer; transition: background-color .15s, border-color .15s; }
.map-source-link:hover { background: #fff; border-color: var(--blue-strong); }
.map-source-link:hover b { text-decoration: underline; }
#leaflet-map { width: 100%; height: min(75vh, 820px); min-height: 420px; }
@media (min-width: 761px) {
  .map-shell { min-height: calc(100vh - 72px); padding-bottom: 18px; }
  .map-panel { min-height: calc(100vh - 150px); display: flex; flex-direction: column; }
  .map-frame-wrap { flex: 1 1 auto; min-height: 0; }
  #leaflet-map { height: clamp(600px, calc(100vh - 220px), 980px); }
  .map-panel:fullscreen { height: 100vh; min-height: 0; padding: 16px; border-radius: 0; }
  .map-panel:fullscreen #leaflet-map { height: calc(100vh - 140px); min-height: 0; }
}
#leaflet-map .leaflet-overlay-pane svg { pointer-events: none; }
.leaflet-popup.compact-popup .leaflet-popup-content-wrapper { border-radius: 10px; box-shadow: 0 8px 20px rgba(16,24,40,.18); }
.leaflet-popup.compact-popup .leaflet-popup-content { margin: 10px 12px; line-height: 1.4; }
.tower-marker-popup { width: 100%; font-family: Manrope, sans-serif; }
.tower-marker-popup h3 { margin: 0 0 5px; font-size: 12.5px; color: var(--ink); font-weight: 800; line-height: 1.25; }
.tower-marker-popup .popup-badges { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 7px; }
.tower-marker-popup .popup-badges .status-pill { margin: 0; padding: 2px 7px; font-size: 9px; }
.tower-marker-popup .popup-detail-grid { display: grid; grid-template-columns: auto 1fr; column-gap: 8px; row-gap: 3px; align-items: baseline; margin: 0; }
.tower-marker-popup .popup-detail-grid dt { margin: 0; color: var(--muted); font: 600 8px 'DM Mono', monospace; text-transform: uppercase; letter-spacing: .3px; white-space: nowrap; }
.tower-marker-popup .popup-detail-grid dd { margin: 0; min-width: 0; overflow-wrap: break-word; color: var(--ink); font-size: 10.5px; font-weight: 600; line-height: 1.3; }
.tower-marker-popup .popup-sigap-link { display: block; margin-top: 9px; padding: 6px 10px; border-radius: 7px; background: var(--blue-strong); color: #fff; text-align: center; text-decoration: none; font: 700 10px 'DM Mono', monospace; }
.tower-marker-popup .popup-sigap-link:hover { background: var(--blue-dark); }
.gardu-induk-icon { display: grid; place-items: center; width: 22px; height: 22px; background: transparent; border: none; color: #a8650a; filter: drop-shadow(0 1px 2px rgba(0,0,0,.45)); }
.gardu-induk-icon svg { width: 20px; height: 20px; }
.status-pill.strike-fresh { margin-left: 6px; color: #5c4400; background: var(--bolt); animation: pulse 1.2s infinite; }
.legend-bolt { display: inline-flex; width: 12px; height: 12px; flex-shrink: 0; vertical-align: middle; }
.legend-bolt svg { width: 100%; height: 100%; }
.target-table-row.near-tower { background: rgba(229, 72, 77, .07); }
.badge-near-tower { display: inline-block; margin-left: 4px; padding: 1px 6px; border-radius: 999px; background: var(--critical); color: #fff; font: 700 9px 'DM Mono', monospace; letter-spacing: .3px; animation: pulse 1.2s infinite; }
.circuit-breakdown-label { margin: 4px 0 6px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; font: 700 9px 'DM Mono', monospace; }
.badge-storm, .badge-calm { display: inline-block; padding: 2px 8px; border-radius: 999px; font: 700 10px 'DM Mono', monospace; letter-spacing: .3px; white-space: nowrap; }
.badge-storm { background: var(--critical); color: #fff; animation: pulse 1.2s infinite; }
.badge-calm { background: var(--lime); color: var(--muted); }
.target-table-type { color: var(--muted); }
.map-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.primary-button, .secondary-button { display: inline-flex; align-items: center; justify-content: center; padding: 11px 15px; border-radius: 9px; text-decoration: none; font: 700 13px 'DM Mono', monospace; }
.primary-button { background: linear-gradient(135deg, var(--blue-strong), var(--moderate)); color: #fff; }
.secondary-button { background: var(--blue-soft); color: var(--blue-strong); border: 1px solid var(--line); }
.location-check-back { margin-left: auto; white-space: nowrap; flex-shrink: 0; }

.section-label { margin: 26px 0 8px; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; font: 700 11px 'DM Mono', monospace; }
.section-label:first-of-type { margin-top: 10px; }
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin: 18px 0; }
.kpi-card { display: flex; align-items: center; gap: 13px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); box-shadow: 0 1px 2px rgba(16,24,40,.04); }
.kpi-icon { display: grid; place-items: center; flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; font-size: 20px; }
.kpi-icon-danger { background: #fde3e3; }
.kpi-icon-pending { background: #fef1cf; }
.kpi-icon-info { background: var(--blue-soft); }
.kpi-icon-bolt { background: #fff3cf; }
.kpi-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.kpi-label { color: var(--muted); text-transform: uppercase; letter-spacing: .3px; font: 700 9.5px 'DM Mono', monospace; }
.kpi-value { color: var(--teal); font: 700 20px 'DM Mono', monospace; line-height: 1.15; }
.kpi-note { color: var(--muted); font-size: 10.5px; line-height: 1.3; }

/* Dashboard banner/panel chrome — ported from hotspot-watch-cloudflare's own
   tower-dashboard.css (a separate stylesheet in that app; folded in here since this
   app's Dashboard is one page, not a whole separate CSS file). */
.report-banner { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 16px; background: linear-gradient(135deg, var(--blue-strong) 0%, var(--blue-dark) 100%); color: #fff; padding: 24px 26px 22px; border-radius: 14px; margin: 16px 0; }
.report-banner h1 { margin: 0; font-size: clamp(22px, 3vw, 32px); line-height: 1.2; letter-spacing: -.5px; text-transform: uppercase; font-weight: 800; }
.report-banner h1 em { color: var(--bolt); font-style: normal; }
.banner-sub { margin: 10px 0 5px; font-size: 13px; color: #dfeefd; max-width: 720px; line-height: 1.5; }
.banner-meta { margin: 0; font: 600 12px 'DM Mono', monospace; color: #bcd4f2; text-transform: uppercase; letter-spacing: .4px; }
.report-panel { margin-bottom: 16px; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); background: #fff; box-shadow: 0 1px 2px rgba(16,24,40,.04); }
.panel-title-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: linear-gradient(135deg, var(--blue-strong), var(--moderate)); color: #fff; padding: 11px 16px; font: 700 12px 'DM Mono', monospace; text-transform: uppercase; letter-spacing: .5px; }
.report-panel .chart-body { padding: 16px; }
.report-panel .combo-chart-legend { margin-top: 0; padding: 0 16px 16px; }
.report-footer { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; background: linear-gradient(135deg, var(--blue-strong), var(--blue-dark)); color: #eaf3ff; padding: 13px 18px; border-radius: 10px; font: 500 12px 'DM Mono', monospace; margin-top: 4px; }
.report-footer strong { color: var(--bolt); }
.report-footer a { color: #fff; }

.chart-card { padding: 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); box-shadow: 0 1px 2px rgba(16,24,40,.04); margin: 16px 0; }
.chart-card h2 { margin: 0 0 14px; font-size: 15px; color: var(--ink); }
.chart-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.chart-card-head h2 { margin: 0; }
.chart-card-head-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.chart-body { min-height: 40px; }
.chart-empty { padding: 11px 13px; border-radius: 8px; color: var(--teal); background: var(--blue-soft); font-size: 12px; }
.chart-range-note { display: block; margin: 8px 0 0; color: var(--muted); font-size: 10.5px; line-height: 1.4; }

/* Combo chart (stacked bar of strike counts + line overlay of peak current) — the
   pattern this app's Dashboard borrows from UIP3B Kalimantan's own SIGAP APP "Chart
   Analysis" page (amCharts XYChart: ColumnSeries stack + LineSeries overlay per
   category/year). Rebuilt here as plain inline SVG (no charting library — same
   lightweight-chart convention already used by hotspot-watch's donut/daily-chart and
   row-watch's charts.js) rather than pulling in amCharts for two series on one page. */
.combo-chart { display: block; width: 100%; height: auto; }
.combo-chart-bar { fill: var(--bolt); }
.combo-chart-line { fill: none; stroke: var(--blue-strong); stroke-width: 2; }
.combo-chart-dot { fill: var(--blue-strong); }
.combo-chart-axis { stroke: var(--line); stroke-width: 1; }
.combo-chart-label { font: 600 9.5px 'DM Mono', monospace; fill: var(--muted); }
.combo-chart-value { font: 700 9.5px 'DM Mono', monospace; fill: var(--ink); }
/* Line-overlay value labels (avg/max peak-current style pairs) — smaller and set in the
   app's sans-serif (Manrope) rather than the bold monospace bar labels use: these numbers
   appear once per bucket on both series at once, so a lighter, tighter face keeps two
   nearby labels from reading as visually "loud" as the single bar count underneath them. */
.combo-chart-line-value { font: 600 8px 'Manrope', sans-serif; letter-spacing: -.1px; }
.combo-chart-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px; }
.combo-chart-legend span { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font: 500 10.5px 'DM Mono', monospace; }
.combo-chart-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; }
.combo-chart-legend i.line { width: 14px; height: 0; border-top: 2px solid var(--blue-strong); border-radius: 0; }
.combo-chart-legend i.line.line-max { border-top-color: var(--critical); }

/* SIGAP Petir's stacked bar chart (buildStackedBarChart in charts.js) — multi-year
   Sambaran stack + Gangguan marker + Tinggi Tower line, one bar per tower. */
.stacked-chart-highlight { fill: var(--blue-soft); }
.stacked-chart-marker { fill: #ff0a54; stroke: #fff; stroke-width: 1.4; animation: pulse 1.2s infinite; }
.stacked-chart-sublabel { font: 500 8.5px 'DM Mono', monospace; fill: var(--muted); }
.stacked-chart-label-center { fill: var(--blue-strong); font-weight: 700; }
.stacked-chart-line { fill: none; stroke-width: 1.6; stroke-dasharray: 3 3; }
.target-table-row.center-tower { background: var(--blue-soft); }

/* Sequential heatmap (charts.js's buildHeatmapTable()/buildHeatmapScale()) — a real
   <table>, not SVG, so it gets native text wrap + tooltips + <th> a11y for free. Cell
   background is set inline per-value (computed magnitude color); these rules are the
   fixed chrome around that. */
.heatmap-scroll { overflow-x: auto; }
/* min-width: 0 opts out of the app-wide `table { min-width: 700px }` floor (meant for the
   wide operational data tables). A heatmap has its own real minimum — the row head plus
   `.heatmap-cell`'s own min-width per column — so the 700px floor only forces a spurious
   horizontal scroll whenever the grid sits in a narrower column than the full panel
   (e.g. beside the box-plot summary panel), hiding the last year/month entirely. */
.heatmap-table { border-collapse: separate; border-spacing: 2px; width: 100%; min-width: 0; }
/* width: 1% + white-space: nowrap is the standard auto-table-layout trick for "shrink
   this column to its content, let the other columns take the rest" — without it, a
   width:100% table with auto layout gives the row-head column a share of any leftover
   width proportional to nothing in particular, leaving a wide blank rectangle to the
   left of short, right-aligned codes like "SPT-PBN" (reported live: visibly wasted space
   on both the left, from the oversized column, and effectively the right, since the data
   columns were left narrower than they could be). The corner cell has no text at all, so
   it must NOT set its own min-width either — that alone was forcing a floor wider than
   any actual row-head label ever needed. */
.heatmap-corner, .heatmap-row-head { width: 1%; white-space: nowrap; }
.heatmap-col-head { padding: 0 0 6px; color: var(--muted); font: 700 9.5px 'DM Mono', monospace; text-align: center; white-space: nowrap; }
.heatmap-row-head { padding: 0 10px 0 0; color: var(--ink); font: 700 10px 'DM Mono', monospace; text-align: right; }
.heatmap-cell { min-width: 42px; height: 26px; text-align: center; font: 700 9px 'DM Mono', monospace; font-variant-numeric: tabular-nums; border-radius: 4px; }
.heatmap-cell-with-comparison { height: 34px; line-height: 1.1; }
.heatmap-cell-primary, .heatmap-cell-comparison { display: block; }
.heatmap-cell-comparison { margin-top: 2px; font-size: 7.5px; font-weight: 600; opacity: .88; white-space: nowrap; }
.heatmap-cell-empty { background: var(--paper); color: var(--muted); font-weight: 500; }
.heatmap-scale { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.heatmap-scale-bar { flex: 0 1 160px; height: 10px; border-radius: 5px; background: linear-gradient(90deg, #eaf2fb, #00438b, #081d43); }
.heatmap-scale-label { color: var(--muted); font: 500 9.5px 'DM Mono', monospace; white-space: nowrap; }
/* Group-header row (buildHeatmapTable's optional `group` field — used by the density
   heatmap to break circuits out by ULTG; the thunder-hours heatmap never sets `group`
   and so never renders these). A muted full-width band, not another data row, so it
   reads as a section divider rather than a 19th circuit. */
.heatmap-group-row th { padding: 8px 4px 3px; border: none; background: transparent; color: var(--muted); font: 700 9px 'DM Mono', monospace; letter-spacing: .05em; text-transform: uppercase; text-align: left; }

/* Diverging-heatmap figure: grid + vertical colorbar + a box-plot summary panel beside
   it (charts.js's buildHeatmapVerticalScale()/buildBoxPlot()). `align-items: stretch` is
   load-bearing — it's what makes the colorbar and its tick labels grow to the grid's own
   height, which varies with the circuit count, instead of needing a hard-coded px height
   that would drift the moment a circuit is added or dropped. */
/* Padded on the figure itself, not just #wwlln-density-body's own .chart-body padding —
   the colorbar and box-plot columns sit outside that inner padded box, so without this
   they'd sit flush against the panel's white edge (top/bottom and the box plot's right
   side) while only the grid had real breathing room. */
.heatmap-figure { display: grid; grid-template-columns: minmax(0, 3fr) auto minmax(0, 2fr); align-items: stretch; gap: 16px; padding: 14px 16px 4px; }
.heatmap-figure-main .chart-body { padding: 0; }
.heatmap-figure-main { min-width: 0; }
.heatmap-figure-scale { display: flex; flex-direction: column; gap: 6px; }
.heatmap-figure-scale > div { flex: 1 1 auto; display: flex; }
.heatmap-figure-side { min-width: 0; display: flex; flex-direction: column; }
.heatmap-side-title { margin: 0 0 6px; color: var(--muted); font: 700 9.5px 'DM Mono', monospace; letter-spacing: .04em; text-transform: uppercase; }
/* Collapsible "Rincian per Sirkit" (native <details>/<summary> — no JS needed for the
   toggle itself, keyboard/screen-reader accessible for free) — collapsed by default per
   an explicit space-saving request, since the headline trend chart above it already
   carries the "at a glance" takeaway and the per-circuit grid is detail a reader opts
   into, not something every visit needs open. */
.heatmap-subsection { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.heatmap-subsection > summary.heatmap-subsection-title {
  cursor: pointer; list-style: none; user-select: none; display: flex; align-items: center; gap: 6px;
}
.heatmap-subsection > summary.heatmap-subsection-title::-webkit-details-marker { display: none; }
.heatmap-subsection > summary.heatmap-subsection-title::before {
  content: '\25B8'; display: inline-block; color: var(--blue-strong); font-size: 11px;
  transition: transform .15s ease;
}
.heatmap-subsection[open] > summary.heatmap-subsection-title::before { transform: rotate(90deg); }
.heatmap-subsection > summary.heatmap-subsection-title:hover { color: var(--blue-strong); }
.heatmap-subsection-count { color: var(--muted); font-weight: 500; text-transform: none; letter-spacing: 0; }
.heatmap-subsection > summary.heatmap-subsection-title:hover .heatmap-subsection-count { color: inherit; }
/* Everything inside <details> besides <summary> keeps its previous top spacing, now
   relative to the summary line instead of a plain <p>. */
.heatmap-subsection > summary.heatmap-subsection-title { margin-bottom: 6px; }
.heatmap-side-note { display: block; margin-top: 6px; color: var(--muted); font-size: 10px; line-height: 1.45; }
.heatmap-axis-x { margin: 6px 0 0; color: var(--muted); font: 600 9.5px 'DM Mono', monospace; text-align: center; }
.heatmap-vscale { flex: 1 1 auto; display: flex; gap: 6px; min-height: 150px; padding: 4px 0; }
/* Stacked solid blocks (one <div> per charts.js DIVERGING_SOLID_STEPS entry, top =
   highest), not a gradient — matches the binned/"solid" cell colors exactly instead of
   implying a precision the 7-step cells don't have. */
.heatmap-vscale-bar { width: 12px; border-radius: 6px; border: 1px solid var(--line); overflow: hidden; display: flex; flex-direction: column; }
.heatmap-vscale-step { flex: 1 1 0; }
.heatmap-vscale-ticks { display: flex; flex-direction: column; justify-content: space-between; color: var(--muted); font: 500 9.5px 'DM Mono', monospace; white-space: nowrap; }
.heatmap-vscale-mid { color: var(--ink); font-weight: 700; }
.heatmap-vscale-mid small { display: block; color: var(--muted); font: 500 8.5px 'DM Mono', monospace; }
.heatmap-vscale-unit { color: var(--muted); font: 500 8.5px 'DM Mono', monospace; line-height: 1.3; }
/* Box fill is set inline per group (buildBoxPlot's `color` — one per year here, see
   dashboard.js) since it carries categorical identity now, not one fixed hue; the #8fb4d9
   here is only the fallback for a caller that passes no color. Structural lines
   (whisker/cap/median/outlier) stay a fixed ink-based neutral regardless of fill so they
   read against any of the year colors, not just blue. */
.box-plot-box { fill: #8fb4d9; stroke: rgba(22,35,59,.55); stroke-width: 1.2; }
.box-plot-median { stroke: var(--ink); stroke-width: 1.8; }
.box-plot-whisker, .box-plot-cap { stroke: rgba(22,35,59,.55); stroke-width: 1.2; }
.box-plot-outlier { fill: none; stroke: rgba(22,35,59,.55); stroke-width: 1.2; }
/* The "sorot sirkit" highlight marker (buildBoxPlot's highlightValue) — bolt yellow reads
   as a spotlight against every year color above without colliding with any of them, and
   isn't already claimed by another meaning on this chart (unlike the pink-red diamond
   SIGAP Petir's own chart uses for Gangguan events). */
.box-plot-highlight { fill: var(--bolt); stroke: var(--ink); stroke-width: 1.2; }
.box-plot-year-label { font: 700 9.5px 'DM Mono', monospace; fill: var(--ink); }
.box-plot-source-label { font-size: 9px; }
/* Narrow: the whole figure wraps to one column — grid, then colorbar, then box plot, each
   at full width. Keeping the colorbar alongside would cost the grid ~80px, which is
   exactly the margin that decides whether all 5 year columns fit without a scroll on a
   390px phone; the grid reading is the point of the panel, so it wins the width. */
@media (max-width: 900px) {
  .heatmap-figure { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "main scale" "side side"; }
  .heatmap-figure-main { grid-area: main; }
  .heatmap-figure-scale { grid-area: scale; }
  .heatmap-figure-side { grid-area: side; margin-top: 4px; }
}

.wwlln-caveat { margin: 0 0 14px; padding: 11px 14px; border-radius: 8px; background: var(--blue-soft); color: var(--teal); font-size: 12px; line-height: 1.5; }
.heatmap-subsection .wwlln-caveat p { margin: 0 0 8px; }
.heatmap-subsection .wwlln-caveat p:last-child { margin-bottom: 0; }

/* Headline trend line/area (charts.js's buildTrendLineChart()) — the "at a glance"
   seasonal shape a value grid alone doesn't give. A genuinely solid, high-contrast
   two-tone fill+line (medium-blue area at real opacity under a dark-navy line) replaced
   an earlier low-opacity single-hue wash that read as pale/gradient-like rather than a
   deliberate color choice. Labels use Manrope (this app's body sans-serif, already
   loaded at 700/800), not the DM Mono every other chart's axis/callout text uses —
   narrower proportional glyphs at the same legibility, so this specific chart reads
   "modern" and takes less horizontal room per label, without reskinning any shared
   class other charts also depend on. */
.trend-line-area { fill-opacity: .55; }
.trend-line-path { fill: none; stroke-width: 2.6; stroke-linejoin: round; stroke-linecap: round; }
.trend-line-dot { fill: var(--card); stroke-width: 2; }
.trend-line-tick-label { font: 600 10px Manrope, sans-serif; fill: var(--muted); }
.trend-line-month-label { font: 700 10px Manrope, sans-serif; fill: var(--muted); letter-spacing: -.01em; }
.trend-line-callout { font: 800 11.5px Manrope, sans-serif; fill: var(--ink); letter-spacing: -.01em; }
.trend-line-callout-max { fill: var(--critical); }
.trend-line-callout-min { fill: var(--blue-dark); }

/* Filter row above the density heatmap figure (ULTG scope + circuit-highlight picker) —
   same .inline-select control as #trend-scope above, just two of them side by side in
   their own row since .panel-title-bar's gradient banner has no room for form controls. */
.heatmap-filter-row { display: flex; flex-wrap: wrap; gap: 14px; padding: 12px 16px 0; }
.heatmap-filter { display: flex; align-items: center; gap: 7px; color: var(--muted); font: 700 10px 'DM Mono', monospace; }
.heatmap-filter .inline-select { min-width: 168px; }

.donut-wrap { display: grid; place-items: center; margin-bottom: 12px; }
.donut-wrap svg { width: 168px; height: 168px; }
.donut-center-label { font-family: 'DM Mono', monospace; font-weight: 700; fill: var(--ink); }
.donut-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.donut-legend li { display: flex; align-items: center; gap: 8px; color: var(--ink); font: 500 11.5px 'DM Mono', monospace; }
.donut-legend .legend-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.donut-legend .legend-count { margin-left: auto; color: var(--muted); }
.donut-legend-empty { color: var(--muted); }

.donut-wrap-row { display: flex; justify-content: center; align-items: flex-start; gap: 18px; flex-wrap: wrap; margin-bottom: 12px; }
.donut-mini { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.donut-mini svg { width: 108px; height: 108px; }
.donut-mini span { color: var(--muted); text-transform: uppercase; letter-spacing: .3px; font: 700 10px 'DM Mono', monospace; }

.scope-toggle { display: inline-flex; gap: 4px; flex-shrink: 0; }
.scope-toggle-btn { padding: 5px 10px; border: 1px solid var(--line); border-radius: 7px; background: #fbfcfe; color: var(--muted); cursor: pointer; font: 700 10px 'DM Mono', monospace; }
.scope-toggle-btn:hover:not(.active) { background: var(--blue-soft); }
.scope-toggle-btn.active { background: var(--blue-strong); color: #fff; border-color: var(--blue-strong); }

.inline-select { padding: 6px 8px; border: 1px solid var(--line); border-radius: 7px; background: #fbfcfe; color: var(--ink); outline: 0; font: 500 11px 'DM Mono', monospace; }
.inline-select:focus { border-color: var(--blue-strong); box-shadow: 0 0 0 3px rgba(0,67,139,.12); }

.report-charts { display: grid; grid-template-columns: 1.6fr 1fr; gap: 16px; }
.report-charts .chart-card { margin: 0; display: flex; flex-direction: column; }

.target-card { margin: 16px 0; }
.target-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.target-card-head h2 { margin: 0; }
.target-progress-label { color: var(--teal); font: 700 12px 'DM Mono', monospace; }

/* "Kolom" column-visibility toggle (SIGAP Petir's Detail Tower table) — ported from
   hotspot-watch-cloudflare's own inspection-report.js/hotspot-tower.css Target Inspeksi
   table, same button+panel markup and behavior (see sigap-petir.js's colHiddenAttr()). */
.column-toggle { position: relative; }
.column-toggle-btn { display: flex; align-items: center; gap: 6px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; background: #fbfcfe; color: var(--ink); font: 700 12px 'DM Mono', monospace; cursor: pointer; }
.column-toggle-btn:hover { background: var(--blue-soft); }
.column-toggle-btn svg { width: 12px; height: 12px; transition: transform .15s ease; }
.column-toggle[data-open="true"] .column-toggle-btn svg { transform: rotate(180deg); }
.column-toggle-panel { position: absolute; top: calc(100% + 6px); right: 0; z-index: 20; display: flex; flex-direction: column; gap: 2px; min-width: 150px; padding: 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); box-shadow: 0 10px 24px rgba(8,29,67,.16); }
.column-toggle-panel[hidden] { display: none; }
.column-toggle-option { display: flex; align-items: center; gap: 8px; padding: 5px 6px; border-radius: 6px; color: var(--ink); font: 500 12px 'DM Mono', monospace; cursor: pointer; }
.column-toggle-option:hover { background: var(--paper); }
.column-toggle-option input { margin: 0; accent-color: var(--blue-strong); }
.target-cutoff-note { display: block; margin: 4px 0 10px; color: var(--muted); font-size: 11px; line-height: 1.4; }
.target-table { width: 100%; table-layout: auto; }
.target-table th { padding: 5px 7px 4px; font-size: 9px; font-weight: 700; }
.target-table td { padding: 4px 7px; font-size: 11px; vertical-align: middle; line-height: 1.3; }
.target-table-icon { text-align: center; font-size: 11px; }
.target-table-tower { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.target-table-tower strong { color: var(--ink); font-size: 11.5px; }
.target-table-sub { color: var(--muted); font-size: 10px; }
.target-table-distance, .target-table-time, .target-table-source { color: var(--muted); font: 500 10px 'DM Mono', monospace; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.target-table-status { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.target-table-action { text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.target-table-map-link { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 6px; border: 0; background: none; padding: 0; margin: 0; text-decoration: none; color: var(--blue-strong); cursor: pointer; }
.target-table-map-link svg { width: 13px; height: 13px; display: block; }
.target-table-map-link:hover { background: var(--blue-soft); }
@media (max-width: 700px) {
  .target-table th { padding: 4px 5px 3px; font-size: 8.5px; }
  .target-table td { padding: 3px 5px; font-size: 10.5px; }
}
/* CIGRE per-line performance table (renderCigrePerformanceTable in dashboard.js).
   Each ULTG is a distinct report block, following the Inspection Report's grouped-table
   pattern. The repeated header preserves context on desktop; on a phone each circuit
   becomes a compact labelled card, so no horizontal scrolling is required. */
.cigre-table-group { overflow: hidden; margin-bottom: 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--card); }
.cigre-panel-title-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cigre-infographic-btn { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; min-height: 29px; padding: 5px 9px; border: 1px solid rgba(255,255,255,.55); border-radius: 7px; color: #063b60; background: #ffe04a; font: 700 10px 'DM Mono', monospace; letter-spacing: .015em; cursor: pointer; box-shadow: 0 1px 0 rgba(0,0,0,.08); }
.cigre-infographic-btn:hover { background: #fff06b; }
.cigre-infographic-btn:focus-visible { outline: 3px solid rgba(255,224,74,.55); outline-offset: 2px; }
.cigre-infographic-btn:disabled { cursor: wait; opacity: .72; }
.cigre-infographic-btn svg { width: 14px; height: 14px; }
.cigre-table-group:last-child { margin-bottom: 0; }
.cigre-table-group-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 11px; color: var(--blue-strong); background: var(--blue-soft); font: 700 11px 'DM Mono', monospace; letter-spacing: .035em; text-transform: uppercase; cursor: pointer; list-style: none; user-select: none; }
.cigre-table-group-header::-webkit-details-marker { display: none; }
.cigre-table-group-header::before { content: '▾'; flex: 0 0 auto; font-size: 12px; transition: transform .15s ease; }
.cigre-table-group:not([open]) .cigre-table-group-header::before { transform: rotate(-90deg); }
.cigre-table-group-header strong { margin-right: auto; }
.cigre-table-group[open] .cigre-table-group-header { border-bottom: 1px solid var(--line); }
.cigre-table-group-header strong { color: inherit; }
.cigre-table-group-header span { padding: 3px 7px; border-radius: 999px; color: var(--blue-strong); background: #fff; font-size: 9px; white-space: nowrap; }
.cigre-table-wrap { margin: 0; }
.cigre-table { min-width: 1230px; }
.cigre-table th { padding: 7px 8px 6px; background: #fbfcfe; font-size: 9.5px; line-height: 1.25; }
.cigre-table td { padding: 6px 8px; font-size: 11.5px; line-height: 1.35; }
.cigre-table .cigre-num { text-align: right; font: 500 11.5px 'DM Mono', monospace; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cigre-table th.cigre-num { text-align: right; font: 700 9.5px 'DM Mono', monospace; }
.cigre-column-toggle .column-toggle-panel { max-height: 310px; overflow-y: auto; }
.cigre-slash { color: var(--muted); padding: 0 1px; }
.cigre-footing-fallback { margin-left: 2px; color: var(--warning); font: 700 8px 'DM Mono', monospace; vertical-align: super; }
@media (max-width: 760px) {
  .cigre-panel-title-bar { align-items: flex-start; }
  .cigre-infographic-btn { padding: 5px 7px; font-size: 9px; }
  .cigre-table-group-header { padding: 8px 9px; font-size: 10px; }
  .cigre-table-wrap { overflow-x: visible; }
  .cigre-table, .cigre-table tbody { display: block; min-width: 0; }
  .cigre-table thead { display: none; }
  .cigre-table tbody { padding: 8px; }
  .cigre-table tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin-bottom: 9px; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
  .cigre-table tr:last-child { margin-bottom: 0; }
  .cigre-table td, .cigre-table .cigre-num { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 7px 8px; border: 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); text-align: left; font-size: 11px; line-height: 1.3; white-space: normal; }
  .cigre-table td:nth-child(even) { border-right: 0; }
  .cigre-table td:nth-last-child(-n + 2) { border-bottom: 0; }
  .cigre-table td::before { content: attr(data-label); color: var(--muted); font: 700 8.5px 'DM Mono', monospace; letter-spacing: .02em; text-transform: uppercase; }
  .cigre-table td[data-cigre-col="sirkit"], .cigre-table td[data-cigre-col="critical-phase"], .cigre-table td[data-cigre-col="tower"] { grid-column: 1 / -1; border-right: 0; }
  .cigre-table td[data-cigre-col="sirkit"] { background: #fbfcfe; }
  .cigre-table td[hidden] { display: none; }
}

/* "Sirkit per ULTG & Jalur Transmisi" (renderCircuitStormBreakdown in map.js) — one
   collapsible <details> per ULTG instead of one long flat table, modeled on
   hotspot-watch-cloudflare's own Target Inspeksi ULTG groups (per-group summary line +
   progress meter). A group with an active strike opens by default so it's seen without a
   click; a quiet group (the common case) starts collapsed so a page full of "Aman" rows
   doesn't bury the one group that actually needs attention. */
.storm-group { border: 1px solid var(--line); border-radius: 10px; margin-bottom: 8px; overflow: hidden; background: var(--card); }
.storm-group:last-child { margin-bottom: 0; }
.storm-group > summary.storm-group-summary {
  cursor: pointer; list-style: none; user-select: none; display: flex; align-items: center;
  gap: 10px; padding: 10px 12px; background: var(--bg-soft, rgba(16,24,40,.02));
}
.storm-group > summary.storm-group-summary::-webkit-details-marker { display: none; }
.storm-group > summary.storm-group-summary::before {
  content: '\25B8'; flex: 0 0 auto; color: var(--blue-strong); font-size: 11px;
  transition: transform .15s ease;
}
.storm-group[open] > summary.storm-group-summary::before { transform: rotate(90deg); }
.storm-group[open] > summary.storm-group-summary { border-bottom: 1px solid var(--line); }
.storm-group-name { flex: 1 1 auto; min-width: 0; color: var(--ink); font: 700 11px 'DM Mono', monospace; letter-spacing: .04em; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.storm-group-meter { flex: 0 0 72px; height: 6px; border-radius: 999px; background: var(--lime); overflow: hidden; }
.storm-group-meter-fill { display: block; height: 100%; background: var(--critical); border-radius: inherit; }
.storm-group-badge { flex: 0 0 auto; padding: 3px 9px; border-radius: 999px; font: 700 10px 'DM Mono', monospace; letter-spacing: .02em; white-space: nowrap; color: var(--muted); background: var(--blue-soft); }
.storm-group-badge.active { color: #fff; background: var(--critical); animation: pulse 1.2s infinite; }
.storm-group-table { margin: 0; }
.storm-group-table thead { display: none; }
@media (max-width: 640px) {
  .storm-group-name { font-size: 10px; }
  .storm-group-meter { flex-basis: 44px; }
}

/* Lightning Analysis — a short executive layer above the full technical Statistic
   report. It intentionally has its own layout vocabulary so leaders see priorities
   first, while the detailed dashboard remains available without duplicating it. */
.analysis-shell { max-width: 1500px; padding-bottom: 34px; }
.analysis-hero { position: relative; display: flex; justify-content: space-between; align-items: flex-end; gap: 28px; overflow: hidden; min-height: 178px; margin: 0 0 16px; padding: 28px 30px; border-radius: 16px; color: #fff; background: linear-gradient(118deg, #071f46 0%, #00438b 60%, #1266be 100%); box-shadow: 0 8px 24px rgba(8,29,67,.18); }
.analysis-hero::after { content: ''; position: absolute; inset: 0 0 0 auto; width: min(55%, 720px); opacity: .2; background: repeating-linear-gradient(90deg, transparent 0 54px, rgba(255,255,255,.42) 55px 57px, transparent 58px 100px), linear-gradient(135deg, transparent 0 40%, rgba(255,255,255,.6) 40.4% 40.7%, transparent 41%); mask-image: linear-gradient(90deg, transparent, #000 30%); pointer-events: none; }
.analysis-hero-copy, .analysis-hero-meta { position: relative; z-index: 1; }
.analysis-eyebrow, .analysis-overline { margin: 0 0 7px; color: var(--muted); text-transform: uppercase; letter-spacing: .8px; font: 700 9.5px 'DM Mono', monospace; }
.analysis-hero .analysis-eyebrow { color: #bcd4f2; }
.analysis-hero h1 { margin: 0; font-size: clamp(29px, 3.4vw, 44px); line-height: 1.04; letter-spacing: -.8px; text-transform: uppercase; }
.analysis-hero-copy > p:last-child { max-width: 650px; margin: 10px 0 0; color: #eaf3ff; font-size: 13px; line-height: 1.55; }
.analysis-hero-meta { display: flex; flex-direction: column; flex: 0 0 auto; min-width: 158px; padding-left: 16px; border-left: 3px solid var(--bolt); }
.analysis-hero-meta span, .analysis-hero-meta small { color: #bcd4f2; font: 600 10px 'DM Mono', monospace; text-transform: uppercase; }
.analysis-hero-meta strong { margin: 4px 0; color: #fff; font: 700 18px 'DM Mono', monospace; }
.analysis-toolbar { display: flex; align-items: end; flex-wrap: wrap; gap: 12px 16px; margin-bottom: 18px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); box-shadow: 0 1px 2px rgba(16,24,40,.04); }
.analysis-toolbar label { display: flex; flex: 0 1 240px; flex-direction: column; gap: 5px; color: var(--muted); text-transform: uppercase; letter-spacing: .3px; font: 700 9.5px 'DM Mono', monospace; }
.analysis-toolbar select { width: 100%; padding: 7px 9px; border: 1px solid var(--line); border-radius: 7px; outline: 0; background: #fbfcfe; color: var(--ink); font: 500 11px 'DM Mono', monospace; }
.analysis-toolbar select:focus { border-color: var(--blue-strong); box-shadow: 0 0 0 3px rgba(0,67,139,.12); }
.analysis-toolbar button { min-height: 33px; padding: 8px 18px; border: 0; border-radius: 8px; background: var(--blue-strong); color: #fff; font: 700 11px 'DM Mono', monospace; cursor: pointer; }
.analysis-toolbar button:hover { background: var(--blue-dark); }
.analysis-kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 10px 0 14px; }
.analysis-kpi { display: flex; align-items: center; gap: 13px; min-width: 0; padding: 15px; border: 1px solid var(--line); border-radius: 13px; background: var(--card); box-shadow: 0 1px 2px rgba(16,24,40,.04); }
.analysis-kpi-icon { display: grid; place-items: center; flex: 0 0 43px; width: 43px; height: 43px; border-radius: 50%; font-size: 21px; font-weight: 800; }
.analysis-kpi-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.analysis-kpi-icon.bolt svg { fill: currentColor; stroke: none; }
.analysis-kpi-icon.bolt { color: #a56b00; background: #fff3cf; }
.analysis-kpi-icon.tower { color: var(--blue-strong); background: var(--blue-soft); }
.analysis-kpi-icon.network { color: #a8650a; background: #fff0dc; }
.analysis-kpi-icon.warning { color: var(--critical); background: #fde3e3; }
.analysis-kpi > div { min-width: 0; }
.analysis-kpi > div > span { display: block; overflow: hidden; color: var(--muted); text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; letter-spacing: .25px; font: 700 9px 'DM Mono', monospace; }
.analysis-kpi strong { display: block; overflow: hidden; margin: 4px 0 3px; color: var(--blue-dark); text-overflow: ellipsis; white-space: nowrap; font: 800 clamp(18px, 2vw, 24px) 'DM Mono', monospace; }
.analysis-kpi small { display: block; overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; font-size: 10px; }
.analysis-kpi small .status-pill { margin-right: 4px; vertical-align: 1px; }
.analysis-insight { display: flex; align-items: flex-start; gap: 9px; margin: 0 0 16px; padding: 11px 14px; border-left: 3px solid var(--bolt); border-radius: 0 9px 9px 0; background: #fff8df; color: #5c4400; font-size: 12px; line-height: 1.5; }
.analysis-insight strong { flex: 0 0 auto; }
.analysis-main-grid { display: grid; grid-template-columns: minmax(0, 1.22fr) minmax(310px, .78fr); gap: 16px; }
.analysis-card { border: 1px solid var(--line); border-radius: 14px; background: var(--card); box-shadow: 0 1px 2px rgba(16,24,40,.04); }
.analysis-main-grid .analysis-card { min-width: 0; padding: 18px; }
.analysis-card-head { display: flex; align-items: start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.analysis-card-head h2 { margin: 0; font-size: 16px; line-height: 1.25; }
.analysis-card-head .analysis-overline { margin-bottom: 5px; }
.analysis-unit { flex: 0 0 auto; padding: 4px 7px; border-radius: 999px; background: var(--blue-soft); color: var(--blue-strong); font: 700 9px 'DM Mono', monospace; }
.analysis-chart { min-height: 210px; }
.analysis-chart .combo-chart { min-height: 210px; }
.analysis-card-note { margin: 8px 0 0; color: var(--muted); font-size: 10.5px; line-height: 1.45; }
.analysis-priority-card { margin-top: 16px; padding: 18px; }
.analysis-priority-card .analysis-card-head { align-items: center; }
.analysis-priority-card .analysis-card-head > a { color: var(--blue-strong); text-decoration: none; white-space: nowrap; font: 700 11px 'DM Mono', monospace; }
.analysis-priority-card .analysis-card-head > a span { padding-left: 3px; font-size: 17px; vertical-align: -1px; }
.analysis-priority-table { overflow: hidden; border: 1px solid var(--line); border-radius: 10px; }
.analysis-priority-heading, .analysis-priority-row { display: grid; grid-template-columns: 1.1fr .85fr 1fr .75fr 1.3fr; align-items: center; column-gap: 10px; }
.analysis-priority-heading { padding: 8px 12px; background: var(--paper); color: var(--muted); text-transform: uppercase; font: 700 9px 'DM Mono', monospace; }
.analysis-priority-row { padding: 10px 12px; border-top: 1px solid var(--line); color: var(--ink); text-decoration: none; font: 500 12px 'DM Mono', monospace; transition: background .15s ease; }
.analysis-priority-row:hover { background: var(--blue-soft); }
.analysis-priority-row > strong { color: var(--blue-dark); }
.analysis-priority-row > span:last-child { color: var(--blue-strong); text-align: right; font-family: Manrope, sans-serif; font-size: 11px; }
.analysis-priority-row > span:last-child b { padding-left: 4px; font-size: 18px; vertical-align: -1px; }
.status-pill.high { color: #8a3f00; background: #ffd2a4; }
.analysis-technical { margin-top: 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); overflow: hidden; }
.analysis-technical summary { display: flex; align-items: center; justify-content: space-between; padding: 13px 16px; color: var(--blue-dark); cursor: pointer; list-style: none; }
.analysis-technical summary::-webkit-details-marker { display: none; }
.analysis-technical summary > span:first-child { display: flex; align-items: baseline; gap: 10px; }
.analysis-technical summary strong { font-size: 13px; text-transform: uppercase; }
.analysis-technical summary small { color: var(--muted); font-size: 11px; }
.analysis-technical[open] summary { border-bottom: 1px solid var(--line); background: var(--blue-soft); }
.analysis-technical-body { padding: 16px; }
.analysis-technical-body p { max-width: 760px; margin: 0 0 12px; color: var(--muted); font-size: 12px; line-height: 1.55; }
.analysis-secondary-button { display: inline-flex; padding: 8px 11px; border: 1px solid var(--line); border-radius: 8px; color: var(--blue-strong); background: #fff; text-decoration: none; font: 700 11px 'DM Mono', monospace; }
.analysis-secondary-button:hover { background: var(--blue-soft); }
.tla-shell { max-width: 1600px; padding-bottom: 35px; }
.tla-controls { display: grid; grid-template-columns: repeat(3, minmax(180px, 1fr)) auto; align-items: end; gap: 12px; margin: 0 0 10px; padding: 17px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
.tla-controls label { display: grid; gap: 5px; color: var(--muted); font: 700 10px 'DM Mono', monospace; text-transform: uppercase; }
.tla-controls select, .tla-controls input { width: 100%; min-height: 36px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 7px; background: #fbfcfe; color: var(--ink); font: 600 12px 'DM Mono', monospace; }
.tla-controls button, .tla-panel-head button { min-height: 36px; padding: 8px 13px; border: 0; border-radius: 7px; background: var(--blue-strong); color: #fff; font: 700 11px 'DM Mono', monospace; cursor: pointer; }
.tla-panel-head button:disabled { opacity: .5; cursor: default; }
.tla-status { min-height: 18px; margin: 0 0 14px; color: var(--muted); font: 600 11px 'DM Mono', monospace; }
.tla-data-note { margin: -7px 0 14px; color: #8a3f00; font-size: 11px; line-height: 1.45; }
.tla-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 15px; }
.tla-kpis article { padding: 15px; border: 1px solid var(--line); border-radius: 11px; background: var(--card); }
.tla-kpis span, .tla-kpis small { display: block; color: var(--muted); font: 600 10px 'DM Mono', monospace; }
.tla-kpis strong { display: block; margin: 7px 0; color: var(--blue-dark); font: 800 clamp(20px, 2vw, 29px) 'DM Mono', monospace; }
.tla-panel { margin: 0 0 15px; padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
.tla-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.tla-panel-head h2 { margin: 0; font-size: 16px; }
.tla-panel-head span { color: var(--muted); font-size: 10px; }
.tla-frontier svg { width: 100%; max-height: 290px; }
.tla-frontier text { fill: var(--muted); font: 10px 'DM Mono', monospace; }
.tla-table { width: 100%; border-collapse: collapse; font: 11px 'DM Mono', monospace; }
.tla-table th, .tla-table td { padding: 9px 10px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
.tla-table th { background: var(--paper); color: var(--muted); text-transform: uppercase; font-size: 9px; }
.tla-table td small, .tla-table td strong { display: block; }
.tla-table td small { margin-bottom: 2px; color: var(--muted); font-size: 9px; }
.tla-table td a { color: var(--blue-strong); text-decoration: none; font-weight: 700; }
.tla-method-note { padding: 13px 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); color: var(--muted); font-size: 12px; line-height: 1.6; }
.tla-method-note summary { color: var(--blue-dark); cursor: pointer; font-weight: 700; }
.tla-method-note p { max-width: 1100px; }
@media (max-width: 1100px) { .tla-controls { grid-template-columns: repeat(3, minmax(0, 1fr)); }.tla-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .tla-controls { grid-template-columns: 1fr 1fr; }.tla-controls label:first-child, .tla-controls label:nth-child(2), .tla-controls button { grid-column: 1 / -1; }.tla-kpis { gap: 8px; }.tla-kpis article { padding: 10px; }.tla-kpis strong { font-size: 17px; }.tla-panel-head { align-items: start; flex-direction: column; } }
@media (max-width: 1100px) { .analysis-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 820px) { .analysis-hero { align-items: flex-start; flex-direction: column; min-height: 0; padding: 24px 20px; }.analysis-hero-meta { padding-left: 12px; }.analysis-main-grid { grid-template-columns: 1fr; }.analysis-risk-card { min-height: 0; }.analysis-priority-heading, .analysis-priority-row { grid-template-columns: 1fr .85fr 1fr .85fr; }.analysis-priority-heading span:last-child, .analysis-priority-row span:last-child { display: none; } }
@media (max-width: 560px) { .analysis-shell { padding: 12px 12px 24px; }.analysis-hero { margin-top: 0; border-radius: 12px; }.analysis-hero h1 { font-size: 28px; }.analysis-hero-copy > p:last-child { font-size: 12px; }.analysis-toolbar { align-items: stretch; display: grid; grid-template-columns: 1fr auto; gap: 10px; }.analysis-toolbar label { flex: none; grid-column: 1 / -1; }.analysis-toolbar button { grid-column: 2; }.analysis-toolbar label:first-child { grid-column: 1; }.analysis-toolbar label:nth-child(2) { grid-column: 2; }.analysis-toolbar label:nth-child(2) select { min-width: 112px; }.analysis-kpi-grid { gap: 9px; }.analysis-kpi { align-items: flex-start; gap: 8px; padding: 11px; }.analysis-kpi-icon { flex-basis: 32px; width: 32px; height: 32px; font-size: 15px; }.analysis-kpi > div > span { font-size: 7.5px; }.analysis-kpi strong { font-size: 16px; }.analysis-kpi small { font-size: 8.5px; }.analysis-insight { font-size: 11px; }.analysis-insight strong { display: none; }.analysis-main-grid .analysis-card, .analysis-priority-card { padding: 14px; }.analysis-card-head h2 { font-size: 14px; }.analysis-chart, .analysis-chart .combo-chart { min-height: 180px; }.analysis-priority-table { border: 0; border-radius: 0; }.analysis-priority-heading { display: none; }.analysis-priority-row { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 5px 8px; margin-bottom: 8px; padding: 12px; border: 1px solid var(--line); border-radius: 9px; background: #fff; }.analysis-priority-row > strong { grid-column: 1; font-size: 13px; }.analysis-priority-row > span:nth-child(2) { grid-column: 2; grid-row: 1; }.analysis-priority-row > span:nth-child(3) { grid-column: 1; color: var(--muted); font-size: 10px; }.analysis-priority-row > span:nth-child(3)::after { content: ' /line/yr'; }.analysis-priority-row > span:nth-child(4) { grid-column: 2; color: var(--muted); font-size: 10px; }.analysis-technical summary > span:first-child { align-items: flex-start; flex-direction: column; gap: 3px; }.analysis-technical summary small { line-height: 1.35; } }

.map-actions, .fab-download { z-index: 40; }
.fab-download { position: fixed; bottom: 22px; right: 22px; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, var(--blue-strong), var(--moderate)); color: #fff; border: none; box-shadow: 0 6px 18px rgba(8,29,67,.35); cursor: pointer; transition: transform .15s ease, box-shadow .15s ease; }
.fab-download svg { width: 20px; height: 20px; }
.fab-download:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(8,29,67,.42); }
.fab-download:disabled { opacity: .55; cursor: not-allowed; transform: none; }

.global-bottom-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 900; display: flex; flex-direction: column; box-shadow: 0 -2px 10px rgba(8,29,67,.12); }
.global-bottom-bar-info { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 22px; background: var(--card); border-top: 1px solid var(--line); color: var(--muted); font: 500 11px 'DM Mono', monospace; }
.global-bottom-bar-info strong { color: var(--ink); }
.global-bottom-bar-brand { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 7px 22px; background: linear-gradient(90deg, var(--blue-dark), var(--blue-strong)); color: #eaf3ff; font: 600 11px 'DM Mono', monospace; }
.global-bottom-bar-org { display: flex; align-items: center; gap: 7px; font-weight: 700; white-space: nowrap; }
.global-bottom-bar-org-mark { color: var(--bolt); font-size: 14px; }
.global-bottom-bar-tagline { opacity: .85; white-space: nowrap; }

footer { justify-content: space-between; margin-top: 18px; color: var(--muted); } footer a { color: var(--blue-strong); text-decoration: none; }

@media (max-width: 760px) { .layout { display: block; } .sidebar { position: static; width: 100%; height: auto; display: flex; align-items: center; gap: 10px; padding: 12px 16px; overflow-x: auto; } .sidebar-brand { border-bottom: 0; padding: 0; margin: 0; flex-shrink: 0; } .sidebar-brand > div { display: none; } .sidebar-nav { flex-direction: row; gap: 2px; flex-shrink: 0; } .sidebar-link { padding: 8px 9px; } .sidebar-link span { display: none; } .sidebar-toggle { display: none; } .language-switch { flex-shrink: 0; margin: 0; padding: 3px; }.language-switch-label { display: none; }.app-shell { padding: 16px 14px; }.hero { display: block; padding: 20px 0 18px; }.hero h1 { letter-spacing: -.3px; font-size: clamp(20px, 6.5vw, 28px); line-height: 1.22; }.lede { margin-top: 10px; font-size: 13px; }.hero-rule { min-width: 0; margin-top: 14px; padding: 8px 0 0 12px; border-left: 3px solid var(--bolt); }.hero-rule strong { margin: 3px 0; font-size: 14px; line-height: 1.35; }.controls, .controls.controls-3col, .controls.controls-2col, .controls.controls-4col { grid-template-columns: 1fr; padding: 14px; }.toggle-panel-row { flex-direction: column; align-items: flex-start; }.summary { grid-template-columns: repeat(2, 1fr); }.summary-item:nth-child(2) { border-right: 0; }.summary-item:nth-child(-n+2) { border-bottom: 1px solid var(--line); }.results-panel { padding: 14px; }.results-heading { align-items: start; gap: 12px; }.kpi-grid { grid-template-columns: repeat(2, 1fr); }.report-charts { grid-template-columns: 1fr; }body { padding-bottom: 108px; }.global-bottom-bar-info { flex-direction: column; align-items: flex-start; gap: 2px; padding: 6px 14px; }.global-bottom-bar-brand { padding: 6px 14px; gap: 8px; }.global-bottom-bar-tagline { display: none; } }