body { margin: 0; font-family: Arial, sans-serif; background: radial-gradient(circle at top, #faf5e7 0, #f3ecdc 38%, #ece4d2 100%); color: #17312d; }
.app-shell { width: min(1360px, calc(100vw - 24px)); margin: 0 auto; padding: 24px 0 40px; }
.hero, .main-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 16px; }
.panel { background: rgba(255,255,255,.88); border: 1px solid rgba(23,49,45,.08); border-radius: 24px; box-shadow: 0 20px 60px rgba(53,47,34,.08); backdrop-filter: blur(6px); }
.hero-copy, .hero-meta, .toolbar, .side-panel, .map-header, .table-panel, .note-panel, .projection-panel, .kpi-card, .detail-card { padding: 18px; }
.hero-meta { display: flex; flex-direction: column; gap: 16px; }
.hero-stats, .kpi-grid, .detail-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 12px; margin-top: 18px; }
.executive-summary { margin-top: 18px; padding: 18px; }
.executive-head { display: flex; justify-content: space-between; gap: 12px; align-items: start; }
.executive-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.executive-item { padding: 14px; border-radius: 18px; background: rgba(11,114,133,.05); border: 1px solid rgba(11,114,133,.08); }
.executive-item span { display: block; color: #6a7a77; font-size: 12px; text-transform: uppercase; }
.executive-item strong { display: block; margin-top: 6px; font-size: 20px; }
.executive-item small { display: block; margin-top: 6px; color: #5f6f6c; }
.side-panel { position: sticky; top: 18px; align-self: start; display: grid; gap: 14px; }
.eyebrow, .pill, .chip { display: inline-flex; border-radius: 999px; padding: 8px 12px; }
.eyebrow, .pill { background: rgba(23,49,45,.08); color: #17312d; }
.pill { gap: 8px; align-items: center; flex-wrap: wrap; }
.pill-boundary, .boundary-chip { display: inline-flex; align-items: center; border-radius: 999px; padding: 6px 10px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.pill-boundary.official, .boundary-chip.official { background: rgba(47,158,68,.12); color: #2b8a3e; }
.pill-boundary.synthetic, .boundary-chip.synthetic { background: rgba(230,119,0,.14); color: #c05600; }
.pill-boundary.neutral, .boundary-chip.neutral { background: rgba(16,42,67,.1); color: #274654; }
.toolbar { display: flex; flex-wrap: wrap; gap: 16px; margin: 16px 0; }
.toolbar-group { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.toolbar-group label { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: #5f6f6c; font-weight: 700; }
.chip { border: 1px solid rgba(0,0,0,.12); background: #fff; cursor: pointer; }
.chip.active { background: #17312d; color: #fff; }
h1 { font-size: clamp(34px, 5vw, 58px); line-height: .95; margin: 16px 0; }
h2, h3 { margin: 0; }
.lede, .map-subtitle, .subtle, .metric-delta { color: #5f6f6c; line-height: 1.6; }
.hero-stat-value, .metric-value, .projection-year { font-size: 28px; font-weight: 700; margin-top: 8px; }
.metric-label { text-transform: uppercase; font-size: 12px; color: #5f6f6c; }
.map-panel { overflow: hidden; }
.map-panel { position: relative; }
.app-shell { position: relative; }
.map-legend { margin: 0 18px 16px; padding: 14px 16px; border-radius: 18px; background: linear-gradient(180deg, rgba(246,243,236,.92), rgba(255,255,255,.82)); box-shadow: inset 0 1px 0 rgba(255,255,255,.7); }
.panel-inset { border-radius: 18px; background: linear-gradient(180deg, rgba(250,246,239,.92), rgba(255,255,255,.76)); box-shadow: inset 0 1px 0 rgba(255,255,255,.85); }
.legend-head { display: flex; justify-content: space-between; gap: 12px; align-items: end; margin-bottom: 10px; }
.legend-title { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: #35514b; font-weight: 700; }
.legend-caption, .legend-range, .legend-item small { color: #6a7a77; }
.legend-range { font-weight: 700; font-size: 13px; }
.legend-ramp { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-bottom: 12px; }
.legend-ramp span { display: block; height: 14px; border-radius: 999px; animation: legendRise .45s ease both; }
.legend-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; }
.legend-item { display: flex; gap: 10px; align-items: start; }
.legend-item strong { display: block; font-size: 13px; }
.legend-swatch { width: 12px; height: 12px; border-radius: 999px; margin-top: 4px; box-shadow: 0 0 0 2px rgba(255,255,255,.8), 0 0 0 3px rgba(23,49,45,.12); }
#map { height: 520px; border-top: 1px solid rgba(23,49,45,.08); }
.map-inspector { position: absolute; right: 18px; bottom: 18px; z-index: 500; min-width: 220px; max-width: 280px; padding: 14px 16px; border-radius: 20px; background: rgba(16,42,67,.92); color: #f8fbfa; box-shadow: 0 18px 40px rgba(16,42,67,.28); backdrop-filter: blur(8px); animation: inspectorRise .18s ease; }
.map-inspector.hovered { background: rgba(23,49,45,.9); }
.map-inspector.pinned { background: linear-gradient(135deg, rgba(16,42,67,.96), rgba(166,30,77,.92)); }
.map-inspector-kicker { font-size: 11px; text-transform: uppercase; letter-spacing: .12em; opacity: .74; }
.map-inspector-title { font-size: 22px; font-weight: 700; margin-top: 8px; line-height: 1.05; }
.map-inspector-meta { margin-top: 6px; color: rgba(248,251,250,.76); }
.map-inspector-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 14px; }
.map-inspector-grid div { padding: 10px 12px; border-radius: 14px; background: rgba(255,255,255,.1); }
.map-inspector-grid span, .popup-grid span { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; opacity: .72; }
.map-inspector-grid strong, .popup-grid strong { display: block; margin-top: 4px; font-size: 18px; }
.leaflet-popup-content-wrapper { border-radius: 16px; box-shadow: 0 18px 40px rgba(23,49,45,.18); }
.leaflet-popup-content { margin: 12px 14px; line-height: 1.5; }
.leaflet-interactive { transition: fill-opacity .18s ease, stroke-width .18s ease, opacity .18s ease; }
.map-popup { min-width: 240px; }
.map-popup-head { display: flex; justify-content: space-between; gap: 10px; align-items: start; }
.popup-rank, .hover-pill { display: inline-flex; align-items: center; border-radius: 999px; padding: 7px 11px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; background: rgba(240,140,0,.12); color: #a65c00; }
.popup-region { margin-top: 6px; color: #5f6f6c; }
.boundary-chip { margin-top: 10px; }
.popup-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 14px; }
.popup-grid div { padding: 10px 12px; border-radius: 14px; background: rgba(23,49,45,.05); }
.popup-landuses { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.popup-landuses span { display: inline-flex; border-radius: 999px; padding: 6px 10px; background: rgba(11,114,133,.08); color: #245762; font-size: 12px; }
.selected-card { padding: 16px 18px; }
.selected-head { display: flex; justify-content: space-between; gap: 12px; align-items: start; }
.ghost-button, .export-button { border: 1px solid rgba(23,49,45,.14); background: rgba(255,255,255,.78); color: #17312d; border-radius: 999px; padding: 9px 14px; cursor: pointer; font-weight: 600; }
.ghost-button:hover, .export-button:hover { background: #17312d; color: #fff; }
.selected-metrics { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 14px 0; }
.selected-metrics div { padding: 12px; border-radius: 14px; background: rgba(23,49,45,.05); }
.selected-metrics strong { display: block; font-size: 22px; }
.selected-metrics span { color: #6a7a77; font-size: 12px; text-transform: uppercase; }
.hover-facts { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.hover-facts span { display: inline-flex; border-radius: 999px; padding: 6px 10px; background: rgba(16,42,67,.06); color: #274654; font-size: 12px; }
.selected-landuses { display: grid; gap: 8px; }
.landuse-row { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid rgba(23,49,45,.08); }
.export-panel { padding: 18px; }
.export-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.anomaly-strip { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 14px; }
.anomaly-flag { display: inline-flex; border-radius: 999px; padding: 8px 12px; font-size: 12px; font-weight: 600; }
.anomaly-flag.warning { background: rgba(240,140,0,.12); color: #b05a00; }
.anomaly-flag.alert { background: rgba(224,49,49,.12); color: #c92a2a; }
.anomaly-flag.signal { background: rgba(11,114,133,.12); color: #0b7285; }
.compare-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.compare-card { padding: 14px; border-radius: 18px; background: rgba(123,44,191,.06); border: 1px solid rgba(123,44,191,.12); }
.compare-empty { background: rgba(16,42,67,.04); border-color: rgba(16,42,67,.08); }
.compare-title, .story-title { font-size: 18px; font-weight: 700; }
.compare-metric { display: flex; justify-content: space-between; gap: 10px; padding-top: 10px; margin-top: 10px; border-top: 1px solid rgba(23,49,45,.08); }
.compare-metric span { color: #6a7a77; font-size: 12px; text-transform: uppercase; }
.compare-delta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(23,49,45,.08); }
.compare-delta div { padding: 12px 14px; border-radius: 16px; background: rgba(166,30,77,.05); }
.compare-delta span { display: block; color: #6a7a77; font-size: 12px; text-transform: uppercase; }
.compare-delta strong { display: block; margin-top: 4px; font-size: 20px; }
.compare-delta small { display: block; margin-top: 8px; color: #5f6f6c; }
.delta-bar { margin-top: 10px; height: 10px; border-radius: 999px; background: rgba(16,42,67,.08); overflow: hidden; }
.delta-bar i { display: block; height: 100%; border-radius: 999px; animation: barGrow .4s ease; }
.delta-bar.positive i { background: linear-gradient(90deg, #2f9e44, #74b816); }
.delta-bar.negative i { background: linear-gradient(90deg, #e03131, #f76707); }
.story-card { margin-top: 12px; padding: 16px; border-radius: 18px; background: linear-gradient(135deg, rgba(11,114,133,.08), rgba(240,140,0,.08)); border: 1px solid rgba(11,114,133,.12); }
.story-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.presentation-card p { margin: 10px 0 0; }
.presentation-actions { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 10px; }
.projection-topline { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 14px; color: #35514b; }
.projection-bars { display: grid; gap: 10px; }
.projection-bar-row { display: grid; grid-template-columns: 72px 1fr; gap: 12px; align-items: center; }
.projection-bar-row label { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: #5f6f6c; font-weight: 700; }
.projection-bar { height: 12px; border-radius: 999px; background: rgba(16,42,67,.08); overflow: hidden; }
.projection-bar span { display: block; height: 100%; border-radius: 999px; animation: barGrow .4s ease; }
.bar-normal { background: linear-gradient(90deg, #0b7285, #15aabf); }
.bar-injected { background: linear-gradient(90deg, #a61e4d, #e64980); }
.projection-actions { margin-top: 14px; }
.insight-stack { display: grid; gap: 10px; margin-bottom: 14px; }
.insight-line { margin: 0; padding: 12px 14px; border-radius: 16px; background: rgba(16,42,67,.05); color: #274654; line-height: 1.6; }
.intro-overlay-backdrop { position: fixed; inset: 0; z-index: 1200; display: grid; place-items: center; background: radial-gradient(circle at top, rgba(16,42,67,.82), rgba(11,24,31,.88)); backdrop-filter: blur(8px); }
.intro-overlay-card { width: min(760px, calc(100vw - 32px)); padding: 32px; border-radius: 28px; background: linear-gradient(135deg, rgba(255,255,255,.94), rgba(244,238,225,.92)); box-shadow: 0 36px 90px rgba(0,0,0,.28); border: 1px solid rgba(255,255,255,.55); animation: introRise .45s ease; }
.intro-overlay-card h2 { font-size: clamp(32px, 5vw, 52px); line-height: .95; margin: 14px 0; }
.intro-overlay-actions, .guide-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.guide-card { position: fixed; left: 24px; bottom: 24px; z-index: 1100; width: min(360px, calc(100vw - 32px)); padding: 18px; border-radius: 22px; background: rgba(255,255,255,.94); box-shadow: 0 22px 60px rgba(16,42,67,.18); border: 1px solid rgba(23,49,45,.08); animation: inspectorRise .24s ease; }
.guide-title { font-size: 20px; font-weight: 700; margin-top: 6px; }
.range-wrap { display: flex; gap: 12px; align-items: center; }
input[type=range] { width: 100%; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 10px 0; border-bottom: 1px solid rgba(0,0,0,.08); text-align: left; }
tbody tr { cursor: pointer; transition: background-color .15s ease, transform .15s ease; }
tbody tr.hovered { background: rgba(240,140,0,.08); }
tbody tr.selected { background: rgba(16,42,67,.1); }
tbody tr.compared { background: rgba(123,44,191,.08); }
tbody tr:hover { background: rgba(11,114,133,.06); }
.empty-state { padding: 24px; text-align: center; color: #5f6f6c; }
.hotspot-wrap { background: transparent; border: 0; }
.hotspot { position: relative; width: 40px; height: 40px; display: grid; place-items: center; }
.hotspot-pulse { position: absolute; inset: 6px; border-radius: 999px; background: rgba(166,30,77,.22); animation: hotspotPulse 1.8s ease-out infinite; }
.hotspot-core { position: absolute; width: 14px; height: 14px; border-radius: 999px; background: #a61e4d; box-shadow: 0 0 0 4px rgba(255,255,255,.82); }
.hotspot-label { position: absolute; top: -6px; right: -2px; min-width: 20px; height: 20px; display: grid; place-items: center; border-radius: 999px; background: #102a43; color: #fff; font-size: 11px; font-weight: 700; box-shadow: 0 6px 16px rgba(16,42,67,.22); }
.hotspot-2 .hotspot-core { background: #d9480f; }
.hotspot-2 .hotspot-pulse { background: rgba(217,72,15,.2); }
.hotspot-3 .hotspot-core { background: #f08c00; }
.hotspot-3 .hotspot-pulse { background: rgba(240,140,0,.2); }
@keyframes legendRise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes hotspotPulse { 0% { transform: scale(.8); opacity: .85; } 70% { transform: scale(1.8); opacity: 0; } 100% { transform: scale(1.8); opacity: 0; } }
@keyframes barGrow { from { width: 0; } }
@keyframes inspectorRise { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes introRise { from { opacity: 0; transform: translateY(18px) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
@media (max-width: 960px) { .hero, .main-grid { grid-template-columns: 1fr; } .hero-stats, .kpi-grid, .detail-grid, .legend-grid, .selected-metrics, .map-inspector-grid, .popup-grid, .compare-grid, .compare-delta, .executive-grid { grid-template-columns: 1fr; } .side-panel { position: static; } #map { height: 360px; } .legend-head, .selected-head, .executive-head { flex-direction: column; align-items: start; } .map-inspector { position: static; margin: 0 18px 18px; max-width: none; } .intro-overlay-card, .guide-card { width: calc(100vw - 24px); } .guide-card { left: 12px; bottom: 12px; } }