:root {
  --ink: #132238;
  --muted: #65758b;
  --line: #dce5ee;
  --paper: #f6f9fc;
  --card: #ffffff;
  --blue: #1d67d8;
  --blue-deep: #124aa5;
  --teal: #1f9b9a;
  --gold: #e4a62d;
  --shadow: 0 20px 55px rgba(34, 64, 102, 0.1);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; color: var(--ink); background: radial-gradient(circle at 10% 0%, #eef5ff 0, transparent 34rem), var(--paper); }
a { color: inherit; }
.site-header { background: rgba(255,255,255,.86); border-bottom: 1px solid rgba(211,224,237,.9); position: sticky; top: 0; z-index: 10; backdrop-filter: blur(18px); }
.header-inner { width: min(1440px, calc(100% - 48px)); margin: auto; height: 68px; display: flex; align-items: center; justify-content: space-between; }
.brand { text-decoration: none; font-weight: 800; letter-spacing: -.02em; }
nav { display: flex; gap: 8px; color: var(--muted); font-size: .93rem; } nav a { padding: 9px 12px; border-radius: 9px; text-decoration: none; } nav a:hover, nav a.active { color: var(--blue-deep); background: #eaf2ff; }
.page-shell { width: min(1440px, calc(100% - 48px)); margin: 0 auto; padding: 56px 0 80px; }
.intro { display: flex; align-items: end; justify-content: space-between; gap: 32px; margin-bottom: 30px; }
.eyebrow { margin: 0 0 10px; color: var(--blue); font-size: .72rem; font-weight: 800; letter-spacing: .18em; }
h1 { margin: 0; font-size: clamp(2.3rem, 5vw, 4.6rem); letter-spacing: -.055em; line-height: .98; }
.lede { color: var(--muted); max-width: 670px; margin: 18px 0 0; font-size: 1.04rem; line-height: 1.7; }
.stat-strip { display: flex; gap: 22px; flex-wrap: wrap; justify-content: end; }
.stat-strip div { min-width: 92px; border-left: 2px solid var(--line); padding-left: 14px; } .stat-strip strong { display:block; font-size: 1.65rem; letter-spacing: -.04em; } .stat-strip span { display:block; margin-top: 3px; color: var(--muted); font-size:.78rem; }
.controls { display: flex; align-items: end; gap: 12px; flex-wrap: wrap; padding: 16px; border: 1px solid var(--line); background: rgba(255,255,255,.72); border-radius: 16px; box-shadow: 0 8px 24px rgba(38,69,105,.04); }
.search-box { flex: 1 1 320px; position: relative; } .search-box input, select { width: 100%; border: 1px solid #d3dfeb; background: white; border-radius: 10px; padding: 12px 38px 12px 14px; color: var(--ink); font: inherit; outline: none; } .search-box input:focus, select:focus { border-color: #7da9eb; box-shadow: 0 0 0 3px #dceaff; }
.search-icon { position:absolute; right: 13px; top: 9px; font-size: 1.35rem; color: var(--muted); } .select-box { width: 190px; display:flex; flex-direction:column; gap:6px; color:var(--muted); font-size:.75rem; font-weight:700; } .select-box select { padding-right: 12px; }
.text-button { border: 0; background: transparent; color: var(--blue); padding: 12px 4px; cursor: pointer; font: inherit; font-size:.88rem; }
.map-layout { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(300px, .75fr); gap: 18px; margin-top: 18px; }
.map-card, .detail-card, .city-results { background: var(--card); border: 1px solid var(--line); border-radius: 19px; box-shadow: var(--shadow); }
.map-card { overflow: hidden; } .map-toolbar { padding: 17px 20px; display:flex; align-items:center; justify-content:space-between; gap:20px; border-bottom:1px solid #edf2f7; } .map-title { display:flex; align-items:center; gap:9px; color:var(--muted); font-size:.85rem; } .live-dot { width:8px;height:8px;border-radius:50%;background:var(--teal); box-shadow:0 0 0 5px #dff7f3; }
.legend { display:flex; align-items:center; gap:5px; color:var(--muted); font-size:.72rem; } .legend i { width:19px;height:9px;border-radius:3px; display:block; } .legend-none{background:#e9eff5}.legend-low{background:#c9e9e6}.legend-mid{background:#76c8c2}.legend-high{background:#2f8f9a}.legend-top{background:#165a81}
.map-stage { min-height: 530px; position: relative; background: linear-gradient(135deg,#f8fbfe,#edf5fb); } #city-map { display:block; width:100%; height:auto; min-height:530px; } .city-shape { stroke:#fff; stroke-width: .7; vector-effect:non-scaling-stroke; cursor:pointer; transition: opacity .15s, filter .15s; } .city-shape:hover, .city-shape.selected { stroke:#102d54; stroke-width:1.8; filter: drop-shadow(0 2px 4px rgba(15,52,89,.24)); } .city-shape.dimmed { opacity:.14; }
.tooltip { position:absolute; pointer-events:none; opacity:0; transform:translate(-50%,-120%); background:#12253d; color:#fff; padding:8px 11px; border-radius:8px; font-size:.78rem; white-space:nowrap; transition:opacity .1s; box-shadow:0 8px 18px rgba(17,40,68,.22); } .tooltip.show{opacity:1}.map-error{position:absolute;inset:40% 10%;padding:16px;background:#fff4e8;border:1px solid #f2cf9d;border-radius:10px;color:#81551a;text-align:center}.map-note { margin:0; padding: 12px 20px 16px; color:var(--muted); font-size:.76rem; line-height:1.55; border-top:1px solid #edf2f7; }
.detail-card { min-height: 590px; padding: 28px; } .detail-empty { height:100%; min-height:520px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; color:var(--muted); } .detail-mark { width:58px;height:58px;display:grid;place-items:center;border-radius:18px;background:#eaf2ff;color:var(--blue);font-size:2rem;margin-bottom:18px; } .detail-empty h2{margin:0;color:var(--ink);font-size:1.25rem}.detail-empty p{max-width:220px;line-height:1.6;font-size:.88rem}
.detail-kicker { color:var(--blue); font-size:.73rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; } .detail-content h2 { margin:8px 0 5px; font-size:2rem; letter-spacing:-.04em; } .detail-province { margin:0;color:var(--muted); } .detail-badges { display:flex;gap:7px;flex-wrap:wrap;margin:21px 0; } .badge { border-radius:99px; padding:6px 10px; background:#edf4ff;color:#245da9;font-size:.73rem; } .badge.gold{background:#fff4d9;color:#9a6a12}.badge.gray{background:#f0f3f6;color:#65758b}
.detail-grid { display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:22px 0; } .metric { background:#f7fafc;border:1px solid #ebf1f5;border-radius:12px;padding:13px; } .metric strong{display:block;font-size:1.45rem;letter-spacing:-.04em}.metric span{display:block;margin-top:3px;color:var(--muted);font-size:.73rem}.detail-link { display:flex;align-items:center;justify-content:space-between;padding:13px 14px;border:1px solid #dce8f5;border-radius:11px;color:var(--blue-deep);text-decoration:none;font-weight:700;font-size:.86rem; } .detail-link:hover{background:#f2f7ff}.detail-footnote{font-size:.75rem;line-height:1.6;color:var(--muted);margin-top:18px}
.city-results { margin-top:18px; padding:24px; } .results-heading{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:16px}.results-heading h2{margin:0;font-size:1.2rem}.results-heading span{color:var(--muted);font-size:.8rem}.city-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}.city-item{border:1px solid #e5edf4;background:#fbfdff;border-radius:11px;padding:12px 13px;text-align:left;cursor:pointer;color:var(--ink);font:inherit}.city-item:hover,.city-item.selected{border-color:#8cb5ed;background:#f1f6ff}.city-item strong{display:block;font-size:.9rem}.city-item span{display:block;margin-top:4px;color:var(--muted);font-size:.72rem}.city-item em{float:right;color:var(--blue);font-style:normal;font-size:.72rem}
.site-footer{width:min(1440px,calc(100% - 48px));margin:0 auto;padding:22px 0 34px;color:var(--muted);font-size:.78rem;display:flex;justify-content:space-between;gap:20px}.site-footer a{color:var(--blue);text-decoration:none}.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}
@media(max-width:980px){.intro{display:block}.stat-strip{justify-content:start;margin-top:24px}.map-layout{grid-template-columns:1fr}.detail-card{min-height:0}.detail-empty{min-height:250px}.city-list{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:640px){.header-inner,.page-shell,.site-footer{width:min(100% - 28px,1440px)}.header-inner{height:58px}.brand{font-size:.9rem}nav{gap:0;font-size:.76rem}nav a{padding:8px 6px}.page-shell{padding-top:35px}.map-toolbar{display:block}.legend{margin-top:12px}.map-stage,#city-map{min-height:360px}.detail-card{padding:22px}.city-results{padding:18px}.city-list{grid-template-columns:repeat(2,minmax(0,1fr))}.site-footer{display:block}.site-footer a{display:block;margin-top:8px}}