* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: "PingFang SC", "Microsoft YaHei", sans-serif; background: #eef0f4; color: #333; height: 100vh; display: flex; flex-direction: column; overflow: hidden; }

/* ── header ── */
header { background: linear-gradient(135deg, #1a237e 0%, #283593 100%); color: #fff; padding: 10px 16px; flex-shrink: 0; box-shadow: 0 2px 8px rgba(0,0,0,0.2); }
#title-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; gap: 12px; }
h1 { font-size: 15px; font-weight: 700; letter-spacing: 0.3px; white-space: nowrap; }
h1 .sub { font-size: 11px; color: #9fa8da; font-weight: 400; margin-left: 8px; }

/* stats cards */
#stats-bar { display: flex; gap: 6px; flex-shrink: 0; }
.stat-card { background: rgba(255,255,255,0.1); border-radius: 6px; padding: 4px 10px; text-align: center; min-width: 64px; border: 1px solid rgba(255,255,255,0.15); }
.stat-val { font-size: 14px; font-weight: 700; color: #ffcc80; line-height: 1.2; }
.stat-lbl { font-size: 9px; color: #9fa8da; margin-top: 1px; white-space: nowrap; }

/* controls */
#controls { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ctrl-group { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #c5cae9; }
.ctrl-group label { white-space: nowrap; font-size: 11px; }
.ctrl-group.checks label { display: flex; align-items: center; gap: 3px; cursor: pointer; }
select { background: rgba(255,255,255,0.12); color: #e8eaf6; border: 1px solid rgba(255,255,255,0.25); border-radius: 4px; padding: 3px 6px; font-size: 11px; cursor: pointer; }
select option { background: #1a237e; color: #e8eaf6; }
input[type=checkbox] { accent-color: #ffab40; cursor: pointer; }
.range-slider { width: 100px; }
#price-display, #area-display { font-size: 10px; color: #9fa8da; white-space: nowrap; min-width: 80px; }
.noUi-target { background: rgba(255,255,255,0.2); border: none; box-shadow: none; height: 3px; }
.noUi-connect { background: #ffab40; }
.noUi-handle { background: #fff; border: 2px solid #ffab40; border-radius: 50%; width: 13px !important; height: 13px !important; top: -5px !important; right: -6px !important; box-shadow: 0 1px 4px rgba(0,0,0,0.3); cursor: pointer; }
.noUi-handle::before, .noUi-handle::after { display: none; }
#brush-btn, #reset-btn, #story-toggle-btn { padding: 4px 10px; border: none; border-radius: 4px; cursor: pointer; font-size: 11px; transition: background 0.15s; }
#brush-btn { background: rgba(255,255,255,0.15); color: #e8eaf6; border: 1px solid rgba(255,255,255,0.25); }
#brush-btn.active { background: #ffab40; color: #1a237e; border-color: #ffab40; }
#reset-btn { background: #ef5350; color: #fff; }
#reset-btn:hover { background: #c62828; }
#story-toggle-btn { background: rgba(255,255,255,0.15); color: #e8eaf6; border: 1px solid rgba(255,255,255,0.25); }

/* ── main layout ── */
main { display: flex; flex: 1; gap: 6px; padding: 6px; overflow: hidden; }

/* ── story panel ── */
#story-panel { width: 210px; flex-shrink: 0; background: #fff; border-radius: 10px; display: flex; flex-direction: column; box-shadow: 0 2px 12px rgba(0,0,0,0.12); overflow: hidden; transition: width 0.3s; }
#story-header { background: linear-gradient(135deg, #1a237e, #3949ab); color: #fff; padding: 9px 12px; font-size: 13px; font-weight: 600; display: flex; justify-content: space-between; align-items: center; }
#story-close-btn { background: none; border: none; color: rgba(255,255,255,0.7); cursor: pointer; font-size: 14px; padding: 0 2px; line-height: 1; }
#story-close-btn:hover { color: #fff; }
#story-content { flex: 1; padding: 12px; overflow-y: auto; }
#story-title { font-size: 12px; font-weight: 700; color: #1a237e; margin-bottom: 8px; line-height: 1.4; }
#story-text { font-size: 11.5px; color: #555; line-height: 1.65; }
#story-insight { margin-top: 10px; }
.insight-card { background: #fff8e1; border-left: 3px solid #ffab40; border-radius: 0 6px 6px 0; padding: 7px 9px; font-size: 11px; color: #5d4037; line-height: 1.5; }
.insight-card b { color: #e65100; }

/* progress dots */
#story-progress { display: flex; justify-content: center; gap: 7px; padding: 8px 12px 4px; }
.step-dot { width: 8px; height: 8px; border-radius: 50%; background: #e0e0e0; cursor: pointer; transition: background 0.2s, transform 0.2s; }
.step-dot.active { background: #1a237e; transform: scale(1.3); }
.step-dot.done { background: #9fa8da; }

#story-nav { padding: 8px 12px 10px; display: flex; align-items: center; gap: 4px; border-top: 1px solid #f0f0f0; }
#story-nav button { flex: 1; padding: 5px 4px; font-size: 11px; border: 1px solid #3949ab; border-radius: 4px; cursor: pointer; background: #fff; color: #3949ab; transition: all 0.15s; }
#story-nav button:hover:not(:disabled) { background: #3949ab; color: #fff; }
#story-nav button:disabled { opacity: 0.35; cursor: default; }
#step-indicator { font-size: 10px; color: #aaa; white-space: nowrap; text-align: center; min-width: 30px; }

/* ── map ── */
#map-wrap { flex: 1.5; position: relative; border-radius: 10px; overflow: hidden; box-shadow: 0 2px 12px rgba(0,0,0,0.12); }
#map { width: 100%; height: 100%; }
#map-legend { position: absolute; bottom: 28px; right: 10px; background: rgba(255,255,255,0.96); border-radius: 8px; padding: 8px 11px; font-size: 11px; color: #555; z-index: 1000; border: 1px solid #e0e0e0; box-shadow: 0 2px 8px rgba(0,0,0,0.12); }
#map-legend canvas { display: block; margin: 4px 0 2px; border-radius: 2px; }
#map-legend .leg-row { display: flex; justify-content: space-between; font-size: 10px; color: #999; }

/* ── right panel ── */
#right-panel { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
#bar-wrap, #trend-wrap { flex: 1; background: #fff; border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; min-height: 0; box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
#bar-header { margin-bottom: 6px; flex-shrink: 0; }
#metric-select { width: 100%; background: #fff; color: #333; border: 1px solid #e0e0e0; border-radius: 5px; padding: 4px 6px; font-size: 11.5px; cursor: pointer; }
#bar { flex: 1; width: 100%; min-height: 0; overflow: visible; }

/* trend tabs */
#trend-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; flex-shrink: 0; }
#trend-header h2 { font-size: 13px; color: #555; }
#trend-header h2 small { font-size: 11px; color: #aaa; margin-left: 6px; }
#trend { flex: 1; width: 100%; min-height: 0; overflow: visible; }

/* ── tooltip ── */
#tooltip { position: fixed; background: rgba(26,35,126,0.96); color: #e8eaf6; padding: 9px 12px; border-radius: 7px; font-size: 12px; pointer-events: none; opacity: 0; transition: opacity 0.1s; z-index: 9999; line-height: 1.7; border: 1px solid rgba(255,255,255,0.15); box-shadow: 0 4px 20px rgba(0,0,0,0.35); max-width: 230px; }

/* ── D3 chart ── */
.axis text { fill: #999; font-size: 10px; }
.axis path, .axis line { stroke: #ebebeb; }
.bar-rect { cursor: pointer; transition: opacity 0.2s; }
.bar-rect.dimmed { opacity: 0.12; }
.bar-rect.selected { stroke: #1a237e; stroke-width: 2; filter: brightness(1.05); }
.bar-focus { pointer-events: none; }
.bar-label { font-size: 9px; fill: #666; pointer-events: none; }
.grid line { stroke: #f5f5f5; stroke-dasharray: 2,3; }
.trend-line { fill: none; stroke-width: 2.5; }
.trend-line-all { stroke: #ccc; stroke-width: 1.5; stroke-dasharray: 4,3; }
.crosshair-line { stroke: #999; stroke-width: 1; stroke-dasharray: 3,3; pointer-events: none; }
.crosshair-dot { fill: #e53935; stroke: #fff; stroke-width: 2; pointer-events: none; }
.brush .selection { fill: #3949ab; fill-opacity: 0.12; stroke: #3949ab; stroke-width: 1; }
.scatter-dot { opacity: 0.55; transition: opacity 0.15s; }
.scatter-dot:hover { opacity: 1; }

/* panel toggle */
.panel-toggle { background: none; border: 1px solid #e0e0e0; border-radius: 4px; color: #aaa; font-size: 10px; cursor: pointer; padding: 2px 6px; line-height: 1; transition: all 0.15s; flex-shrink: 0; }
.panel-toggle:hover { background: #f0f0f0; color: #555; }
#bar-header { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; flex-shrink: 0; }
#metric-select { flex: 1; }
#bar-wrap.collapsed, #trend-wrap.collapsed { flex: 0 0 auto; }
#bar-wrap.collapsed svg, #trend-wrap.collapsed #trend-header > :not(.panel-toggle),
#bar-wrap.collapsed #bar-header > :not(.panel-toggle) { }
#bar-wrap.collapsed #bar, #trend-wrap.collapsed .tab-pane,
#bar-wrap.collapsed .bar-label { display: none; }
#trend-wrap.collapsed .tab-row, #trend-wrap.collapsed #trend-hint { display: none; }
#bar-wrap.collapsed { min-height: 0; padding-bottom: 8px; }
#trend-wrap.collapsed { min-height: 0; padding-bottom: 8px; }

.leaflet-control-attribution { font-size: 9px !important; }
.brush-cursor { cursor: crosshair !important; }