:root {
  --ink: #101534;
  --ink-soft: #4e5572;
  --surface: #ffffff;
  --canvas: #f4f5f9;
  --line: #dedfea;
  --red: #f20f2a;
  --purple: #4b317c;
  --blue: #2563eb;
  --mint: #007a67;
  --orange: #c66700;
  --bus: #b5432f;
  --heavy: #7742a8;
  --radius: 8px;
  --shadow: 0 12px 30px rgba(16, 21, 52, .09);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  color: var(--ink);
  background: var(--canvas);
  font-family: "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
  line-height: 1.5;
}
button, a { font: inherit; }
button { cursor: pointer; }
.shell { width: min(1180px, calc(100% - 32px)); margin: 0 auto; }
.skip-link { position: fixed; left: 12px; top: -48px; z-index: 100; background: #fff; color: var(--ink); padding: 8px 12px; border-radius: 4px; }
.skip-link:focus { top: 12px; }

.site-header { height: 66px; background: #fff; border-bottom: 1px solid var(--line); }
.header-inner { height: 100%; display: flex; align-items: center; gap: 16px; }
.brand-logo { display: block; width: 102px; height: auto; object-fit: contain; }
.header-note { color: #69708a; font-size: 13px; padding-left: 16px; border-left: 1px solid var(--line); }
.header-link { margin-left: auto; color: var(--ink); font-size: 13px; font-weight: 700; text-decoration: none; border-bottom: 1px solid var(--red); padding-bottom: 2px; }
.header-link:hover { color: var(--red); }

.network-hero { overflow: hidden; position: relative; color: white; background: var(--ink); }
.network-hero::before, .network-hero::after { content: ""; position: absolute; pointer-events: none; }
.network-hero::before { inset: 0; opacity: .38; background-image: linear-gradient(rgba(255,255,255,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.12) 1px, transparent 1px); background-size: 38px 38px; mask-image: linear-gradient(90deg, transparent, #000 24%, #000 76%, transparent); }
.network-hero::after { width: 480px; height: 480px; right: -210px; top: -260px; border: 1px solid rgba(242,15,42,.55); border-radius: 50%; box-shadow: 0 0 0 44px rgba(75,49,124,.22), 0 0 0 88px rgba(242,15,42,.08); }
.hero-grid { min-height: 294px; display: grid; grid-template-columns: 1.25fr .75fr; gap: 40px; align-items: center; position: relative; z-index: 1; }
.eyebrow, .section-kicker { margin: 0; color: var(--red); font-size: 12px; font-weight: 800; letter-spacing: .08em; }
.hero-copy h1 { margin: 12px 0 10px; max-width: 720px; font-size: clamp(32px, 4vw, 52px); line-height: 1.15; letter-spacing: 0; }
.hero-copy h1 span { color: #f8b5bd; }
.hero-summary { max-width: 620px; color: #c9cce0; margin: 0; font-size: 15px; }
.network-panel { position: relative; overflow: hidden; align-self: stretch; min-height: 205px; padding: 28px; display: flex; flex-direction: column; justify-content: center; border-left: 1px solid rgba(255,255,255,.28); }
.network-panel::after { content:""; width: 80px; height: 80px; position: absolute; right: 30px; bottom: 26px; border: 1px dashed rgba(255,255,255,.38); border-radius: 50%; }
.network-topline { display: flex; align-items: center; gap: 8px; color: #acb2ce; font-size: 10px; font-weight: 800; letter-spacing: .1em; }
.network-topline i { width: 6px; height: 6px; background: #40ddbe; border-radius: 50%; box-shadow: 0 0 0 5px rgba(64,221,190,.12); }
.network-topline b { color: #d3d7e8; font-size: 11px; letter-spacing: 0; }
.network-count { display: block; font-size: 64px; line-height: .95; margin-top: 16px; font-variant-numeric: tabular-nums; }
.network-label { color: #b9bed6; font-size: 13px; margin-top: 5px; }
.network-cities { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 20px; }
.network-cities span { padding: 4px 8px; border: 1px solid rgba(255,255,255,.24); color: #eef0fa; font-size: 11px; border-radius: 2px; }

.finder { position: relative; z-index: 2; margin-top: -20px; padding: 24px; background: var(--surface); border: 1px solid #e4e5ed; box-shadow: var(--shadow); border-radius: var(--radius); }
.finder-heading, .results-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; }
.finder h2, .results-heading h2 { margin: 5px 0 0; font-size: 22px; letter-spacing: 0; }
.finder-hint, .sort-note { margin: 0; color: #747b92; font-size: 13px; }
.vehicle-filter { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 20px; }
.vehicle-button { min-height: 90px; position: relative; text-align: left; overflow: hidden; border: 1px solid var(--line); border-radius: 6px; padding: 16px; color: var(--ink); background: #fff; transition: border-color .2s ease, background-color .2s ease, color .2s ease, transform .2s ease; }
.vehicle-button::after { content:""; position:absolute; right: -17px; bottom: -17px; width: 54px; height: 54px; border: 1px solid currentColor; opacity: .18; border-radius: 50%; }
.vehicle-button:hover { transform: translateY(-2px); border-color: currentColor; }
.vehicle-button:focus-visible, .chip:focus-visible, .action-button:focus-visible, .close-button:focus-visible { outline: 3px solid rgba(37,99,235,.32); outline-offset: 2px; }
.vehicle-button strong { display: block; font-size: 18px; line-height: 1.1; }
.vehicle-button small { display: block; margin-top: 7px; color: currentColor; opacity: .74; font-size: 12px; }
.vehicle-button[data-kind="all"] { color: var(--ink); background: #f7f7fb; }
.vehicle-button[data-kind="light"] { color: var(--mint); background: #f1fbf8; }
.vehicle-button[data-kind="bus"] { color: var(--bus); background: #fff5f1; }
.vehicle-button[data-kind="heavy"] { color: var(--heavy); background: #f7f2fc; }
.vehicle-button.active { color: white; border-color: var(--ink); background: var(--ink); }
.vehicle-button.active[data-kind="light"] { border-color: var(--mint); background: var(--mint); }
.vehicle-button.active[data-kind="bus"] { border-color: var(--bus); background: var(--bus); }
.vehicle-button.active[data-kind="heavy"] { border-color: var(--heavy); background: var(--heavy); }
.filter-divider { height: 1px; background: var(--line); margin: 20px 0; }
.location-row { display: flex; align-items: center; gap: 18px; }
.region-row { margin-top: 12px; }
.filter-label { flex: 0 0 30px; color: #747b92; font-size: 13px; font-weight: 700; }
.chip-group { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { min-height: 34px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 4px; color: #4e5572; background: #fff; font-size: 13px; font-weight: 700; transition: .18s ease; }
.chip:hover { border-color: var(--purple); color: var(--purple); }
.chip.active { background: var(--purple); border-color: var(--purple); color: #fff; }

.results-section { padding: 48px 0 64px; }
.results-heading h2 span { color: var(--red); }
.sort-note { padding: 6px 10px; border: 1px solid #d8dbe6; border-radius: 3px; font-size: 12px; }
.station-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 22px; }
.station-card { overflow: hidden; display: flex; flex-direction: column; min-width: 0; background: var(--surface); border: 1px solid #e2e4ec; border-radius: var(--radius); box-shadow: 0 4px 10px rgba(16,21,52,.035); transition: transform .22s ease, box-shadow .22s ease; }
.station-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.station-cover-wrap { position: relative; overflow: hidden; aspect-ratio: 16 / 10; background: #e7e9f0; }
.station-cover { width:100%; height:100%; object-fit:cover; display:block; }
.no-photo { display:flex; align-items:center; justify-content:center; color:#6d748b; background:repeating-linear-gradient(135deg, #eef0f5 0 10px, #e6e9f0 10px 20px); font-size:13px; font-weight:800; }
.station-number { position: absolute; top: 12px; left: 12px; color: white; background: rgba(16,21,52,.84); padding: 4px 8px; font-size: 11px; font-weight: 800; }
.station-status { position:absolute; right:12px; top:12px; padding:4px 7px; color:#006e5d; background:#e8fbf6; font-size:11px; font-weight:800; border-radius:3px; }
.station-status.construction { color:#7a3900; background:#fff0cf; box-shadow:0 0 0 1px rgba(198,103,0,.25); }
.station-card.is-construction { border-color:#e4b46c; }
.station-body { display:flex; min-height: 226px; flex:1; flex-direction:column; padding: 16px; }
.station-title-row { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; }
.station-name { margin:0; font-size:17px; line-height:1.35; }
.charge-tag-row { display:flex; flex:0 0 auto; flex-wrap:wrap; justify-content:flex-end; gap:4px; }
.charge-tag { display:inline-flex; align-items:center; min-height:22px; padding:3px 6px; border-radius:3px; font-size:10px; font-weight:800; line-height:1.2; white-space:nowrap; }
.charge-tag.slow { color:#075c9e; background:#e4f3ff; }
.charge-tag.monthly { color:#8a3d00; background:#fff0cf; }
.station-address { min-height: 40px; margin: 8px 0 0; color: #707891; font-size: 12px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.metric-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 14px; }
.metric { padding:7px 6px; min-width:0; background:#f6f7fa; border-left:2px solid #c6cad9; }
.metric:first-child { border-left-color: var(--red); }
.metric b, .metric span { display:block; }
.metric b { color:#242b48; font-size:15px; line-height:1.15; font-variant-numeric: tabular-nums; }
.metric span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#81889e; font-size:10px; margin-top:3px; }
.tag-row { display:flex; flex-wrap:wrap; gap:5px; margin-top:12px; }
.vehicle-tag { padding: 3px 7px; border-radius:3px; font-size:11px; font-weight:800; }
.vehicle-tag.car { color:#007a67; background:#e8faf5; }.vehicle-tag.light { color:#c66700; background:#fff3df; }.vehicle-tag.bus { color:#b5432f; background:#fff0ec; }.vehicle-tag.heavy { color:#7742a8; background:#f1eafa; }.vehicle-tag.length { color:#525b73; background:#eff1f6; }
.station-actions { display:grid; grid-template-columns: 1fr 1fr; gap:8px; margin-top:auto; padding-top:14px; }
.action-button { min-height:42px; border-radius:4px; padding: 0 10px; font-size:13px; font-weight:800; text-decoration:none; display:flex; align-items:center; justify-content:center; transition:.18s ease; }
.action-button.primary { border:1px solid var(--ink); color:white; background:var(--ink); }.action-button.primary:hover { background:var(--red); border-color:var(--red); }
.action-button.secondary { border:1px solid #d6d9e4; color:var(--ink); background:white; }.action-button.secondary:hover { border-color:var(--purple); color:var(--purple); }
.empty-state { padding: 70px 20px; text-align:center; border:1px dashed #cfd3e0; background:#fff; margin-top:22px; }.empty-state strong { font-size:18px; }.empty-state p { color:#747b92; font-size:13px; }.empty-state button { color:#fff; background:var(--ink); border:0; border-radius:4px; padding:10px 16px; font-weight:800; }

.station-dialog { width: min(920px, calc(100% - 24px)); max-height: 88dvh; padding: 20px; color:var(--ink); border:0; border-radius:8px; box-shadow:0 24px 70px rgba(9,13,35,.33); }.station-dialog::backdrop { background:rgba(9,13,35,.6); }.dialog-head { display:flex; align-items:center; justify-content:space-between; gap:16px; padding-bottom:14px; border-bottom:1px solid var(--line); }.close-button { border:1px solid var(--line); border-radius:4px; background:#fff; padding:7px 11px; color:var(--ink); font-size:13px; font-weight:800; }.close-button:hover { border-color:var(--red); color:var(--red); }.detail-title { margin:18px 0 6px; font-size:23px; }.detail-address { color:#687089; font-size:14px; margin:0; }.detail-metrics { display:flex; flex-wrap:wrap; gap:8px; margin:18px 0; }.detail-metrics span { background:#f3f5f9; padding:7px 10px; font-size:13px; font-weight:700; }.detail-metrics .detail-monthly { color:#8a3d00; background:#fff0cf; }.detail-metrics .detail-construction { color:#7a3900; background:#fff0cf; }.gallery { display:grid; grid-template-columns:repeat(2, 1fr); gap:10px; }.gallery img { width:100%; aspect-ratio:16/10; object-fit:cover; border-radius:4px; display:block; }

@media (max-width: 820px) { .network-panel { padding-left:20px; }.station-grid { grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width: 620px) { .shell { width:min(100% - 24px, 1180px); }.site-header { height:58px; }.brand-logo { width:88px; }.header-note { display:none; }.header-link { font-size:12px; }.hero-grid { display:block; padding:38px 0 0; }.hero-copy h1 { font-size:34px; }.hero-summary { font-size:14px; }.network-panel { min-height:150px; margin-top:22px; padding:18px 0 22px; border-left:0; border-top:1px solid rgba(255,255,255,.24); }.network-panel::after { right:0; bottom:14px; }.network-count { font-size:46px; margin-top:11px; }.network-cities { margin-top:12px; }.finder { width:calc(100% - 24px); padding:18px; }.finder-heading, .results-heading { align-items:start; flex-direction:column; gap:7px; }.finder h2, .results-heading h2 { font-size:20px; }.vehicle-filter { grid-template-columns:repeat(2, minmax(0,1fr)); }.vehicle-button { min-height:78px; padding:13px; }.vehicle-button strong { font-size:16px; }.location-row { align-items:flex-start; flex-direction:column; gap:7px; }.filter-label { flex:auto; }.results-section { padding-top:36px; }.station-grid { grid-template-columns:1fr; gap:14px; margin-top:18px; }.station-body { min-height:0; }.charge-tag-row { max-width:132px; }.gallery { grid-template-columns:1fr; }.station-dialog { padding:16px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior:auto !important; transition-duration:.01ms !important; } }