:root {
  --navy-950: #061725;
  --navy-900: #071d2d;
  --navy-800: #0d2d41;
  --ink: #123040;
  --ink-soft: #58717d;
  --paper: #eef4f2;
  --surface: #f9fcfb;
  --surface-soft: #e7f1ef;
  --cyan: #46d9d2;
  --cyan-dark: #087f86;
  --amber: #ffbd56;
  --line: rgba(23, 75, 86, 0.14);
  --shadow: 0 28px 70px rgba(5, 34, 48, 0.16);
  --radius-lg: 20px;
  --radius-md: 13px;
  --content: 1360px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
button, input, select { font: inherit; }
button { cursor: pointer; }
button:focus-visible, input:focus-visible, select:focus-visible, a:focus-visible {
  outline: 3px solid rgba(255, 189, 86, 0.92);
  outline-offset: 3px;
}
[hidden] { display: none !important; }

.sr-only {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}
.skip-link {
  background: var(--amber);
  color: var(--navy-950);
  left: 18px;
  padding: 10px 16px;
  position: fixed;
  top: -80px;
  z-index: 99;
}
.skip-link:focus { top: 16px; }

.app-shell {
  min-height: 100vh;
  overflow: hidden;
  position: relative;
  background:
    radial-gradient(circle at 90% 2%, rgba(70, 217, 210, 0.13), transparent 24rem),
    linear-gradient(180deg, var(--navy-950) 0 438px, var(--paper) 438px 100%);
}
.content-width {
  margin-inline: auto;
  max-width: var(--content);
  padding-inline: 34px;
  position: relative;
  width: 100%;
}

.topbar {
  align-items: center;
  color: #eafbf8;
  display: flex;
  justify-content: space-between;
  padding-block: 26px;
}
.brand { align-items: center; color: inherit; display: flex; gap: 13px; text-decoration: none; }
.brand > span:last-child { display: flex; flex-direction: column; }
.brand strong { font-size: 15px; letter-spacing: 0.14em; }
.brand small { color: rgba(230, 250, 247, 0.46); font-size: 8px; letter-spacing: 0.2em; margin-top: 5px; }
.brand-mark {
  align-items: center;
  border: 1px solid rgba(70, 217, 210, 0.66);
  color: var(--cyan);
  display: flex;
  font-family: Georgia, serif;
  font-size: 25px;
  height: 42px;
  justify-content: center;
  letter-spacing: -5px;
  padding-right: 5px;
  transform: skew(-9deg);
  width: 42px;
}
.brand-mark span { color: var(--amber); font-size: 18px; margin-left: 4px; }
.standard-badge { border: 1px solid rgba(224, 249, 245, 0.25); border-radius: 999px; color: rgba(224, 249, 245, 0.76); font-size: 11px; letter-spacing: 0.14em; padding: 9px 14px; }

.hero {
  align-items: end;
  color: #eefdf9;
  display: flex;
  gap: 36px;
  justify-content: space-between;
  min-height: 252px;
  padding-bottom: 55px;
  padding-top: 24px;
}
.hero-copy { max-width: 830px; }
.eyebrow { align-items: center; color: var(--cyan); display: flex; font-size: 11px; font-weight: 750; letter-spacing: 0.18em; margin: 0 0 22px; }
.eyebrow span { background: var(--amber); border-radius: 50%; height: 7px; margin-right: 10px; width: 7px; }
.hero h1 { font-size: clamp(44px, 6vw, 78px); letter-spacing: -0.075em; line-height: 0.98; margin: 0; }
.hero h1 em { color: var(--amber); font-style: normal; }
.hero-intro { color: rgba(232, 250, 247, 0.68); font-size: 14px; line-height: 1.9; margin: 24px 0 0; max-width: 760px; }
.dataset-signal { border-left: 1px solid rgba(70, 217, 210, 0.38); display: grid; gap: 7px; min-width: 205px; padding-left: 19px; }
.dataset-signal > span:not(.signal-dot) { color: rgba(232, 250, 247, 0.44); font-size: 9px; letter-spacing: 0.18em; }
.dataset-signal strong { color: var(--cyan); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 11px; letter-spacing: 0.06em; }
.signal-dot { background: var(--cyan); border-radius: 50%; box-shadow: 0 0 0 6px rgba(70, 217, 210, 0.13); height: 7px; margin-bottom: 3px; width: 7px; }
.signal-dot.error { background: #ff7d70; box-shadow: 0 0 0 6px rgba(255, 125, 112, 0.13); }

.query-card {
  background: rgba(248, 252, 251, 0.98);
  border: 1px solid rgba(188, 220, 216, 0.75);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding-bottom: 16px;
  padding-top: 17px;
  z-index: 2;
}
.search-row { align-items: end; display: grid; gap: 12px; grid-template-columns: minmax(280px, 1fr) 190px 190px auto; }
.search-box { align-items: center; display: flex; min-height: 48px; }
.search-box svg { fill: none; height: 25px; margin-left: 3px; margin-right: 12px; min-width: 25px; stroke: var(--cyan-dark); stroke-linecap: round; stroke-width: 1.8; width: 25px; }
.search-box input { background: transparent; border: 0; color: var(--ink); font-size: 17px; min-width: 0; outline: 0; padding: 10px 0; width: 100%; }
.search-box input::placeholder { color: #82959d; }
.select-field { display: grid; gap: 5px; }
.select-field span { color: #7b9199; font-size: 9px; letter-spacing: 0.08em; }
.select-field select { background: #e7f1ef; border: 1px solid #c8ddda; border-radius: 9px; color: var(--ink); min-height: 43px; outline: 0; padding: 0 11px; width: 100%; }
.quiet-button { background: transparent; border: 1px solid #c8ddda; border-radius: 9px; color: #3d6470; min-height: 43px; padding: 0 14px; }
.quiet-button:hover { background: #dcece9; }
.query-tools { align-items: center; border-top: 1px solid var(--line); display: flex; justify-content: space-between; margin-top: 12px; padding-top: 13px; }
.quick-search, .export-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 8px; }
.quick-search > span { color: #7b9199; font-size: 11px; margin-right: 2px; }
.quick-search button, .export-actions button { background: transparent; border: 1px solid #c5dad7; border-radius: 999px; color: #365765; font-size: 11px; padding: 6px 10px; transition: 0.16s ease; }
.quick-search button:hover, .export-actions button:hover { background: var(--cyan); border-color: var(--cyan); color: var(--navy-950); }
.export-actions button { border: 0; color: #2c6872; font-weight: 700; }

.stats-grid { display: grid; gap: 13px; grid-template-columns: repeat(4, 1fr); padding-bottom: 38px; padding-top: 28px; }
.stat-card { background: rgba(255, 255, 255, 0.48); border: 1px solid rgba(185, 211, 209, 0.72); border-radius: var(--radius-md); min-height: 118px; padding: 17px 18px; position: relative; }
.stat-card::after { background: var(--cyan); content: ""; height: 2px; left: 18px; opacity: 0.28; position: absolute; right: 18px; top: 0; }
.stat-card span { color: #718a94; display: block; font-size: 11px; letter-spacing: 0.08em; }
.stat-card strong { color: var(--ink); display: block; font-family: Georgia, serif; font-size: 31px; letter-spacing: -0.04em; margin-top: 12px; }
.stat-card small { color: #879da4; display: block; font-size: 10px; margin-top: 8px; }
.stat-card-accent { background: var(--navy-800); border-color: rgba(70, 217, 210, 0.4); }
.stat-card-accent::after { background: var(--amber); opacity: 1; }
.stat-card-accent span, .stat-card-accent small { color: rgba(218, 247, 242, 0.64); }
.stat-card-accent strong { color: var(--cyan); }
.stat-card-unit strong { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 22px; letter-spacing: -0.08em; margin-top: 17px; }

.workspace { align-items: start; display: grid; gap: 18px; grid-template-columns: minmax(0, 0.96fr) minmax(510px, 1.04fr); }
.panel { background: rgba(255, 255, 255, 0.72); border: 1px solid rgba(179, 207, 205, 0.82); border-radius: var(--radius-lg); box-shadow: 0 15px 44px rgba(29, 74, 82, 0.07); overflow: hidden; }
.panel-heading { align-items: end; display: flex; justify-content: space-between; padding: 25px 25px 18px; }
.panel-heading p, .detail-kicker, .compare-heading p { color: var(--cyan-dark); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 10px; letter-spacing: 0.17em; margin: 0 0 8px; }
.panel-heading h2, .detail-heading h2, .compare-heading h2 { font-size: 27px; letter-spacing: -0.045em; margin: 0; }
.panel-heading > span { color: #71909a; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 11px; }
.result-columns { color: #82989f; display: grid; font-size: 9px; grid-template-columns: minmax(180px, 1fr) 70px 83px 48px; letter-spacing: 0.07em; padding: 0 18px 9px 25px; }
.result-columns span:not(:first-child) { text-align: right; }
.result-list { border-top: 1px solid var(--line); max-height: 706px; overflow: auto; overscroll-behavior: contain; scrollbar-color: #aac5c1 transparent; }
.result-row { align-items: center; border-bottom: 1px solid rgba(21, 69, 84, 0.08); display: grid; gap: 10px; grid-template-columns: minmax(180px, 1fr) 70px 83px 48px; min-height: 58px; padding: 0 14px 0 0; transition: background 0.15s ease; }
.result-row:hover { background: #e9f5f2; }
.result-row.selected { background: #d9f2ed; box-shadow: inset 3px 0 var(--cyan-dark); }
.station-button { align-items: center; align-self: stretch; background: transparent; border: 0; color: inherit; display: flex; min-width: 0; padding: 10px 0 10px 25px; text-align: left; }
.station-name { display: flex; flex-direction: column; min-width: 0; }
.station-name strong { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.station-name small { color: #718a93; font-size: 10px; margin-top: 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-number { color: #335e6a; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 11px; text-align: right; }
.compare-toggle { align-items: center; background: transparent; border: 1px solid #bcd3cf; border-radius: 50%; color: #5f7d85; display: flex; height: 27px; justify-content: center; justify-self: end; line-height: 1; padding: 0; width: 27px; }
.compare-toggle:hover, .compare-toggle.active { background: var(--cyan-dark); border-color: var(--cyan-dark); color: #fff; }
.compare-toggle.active { font-size: 0; }
.compare-toggle.active::after { content: "✓"; font-size: 13px; }

.detail-panel { background: var(--surface); padding: 25px 27px 11px; position: sticky; top: 18px; }
.detail-topline { align-items: center; display: flex; justify-content: space-between; }
.detail-actions { display: flex; flex-wrap: wrap; gap: 7px; }
.small-action { background: #e3f1ee; border: 1px solid #bed9d4; border-radius: 999px; color: #1d636c; font-size: 10px; padding: 7px 10px; }
.small-action:hover { background: var(--cyan); border-color: var(--cyan); color: var(--navy-950); }
.detail-heading { align-items: end; display: flex; justify-content: space-between; margin-top: 8px; }
.detail-heading h2 { font-size: 35px; }
.detail-heading p { color: #6e8991; font-size: 12px; margin: 7px 0 0; }
.station-id { color: var(--cyan-dark); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 19px; letter-spacing: 0.05em; }
.location-line { border-bottom: 1px solid var(--line); color: #718990; display: flex; flex-wrap: wrap; font-size: 10px; gap: 13px; padding: 17px 0 19px; }
.location-line span::before { color: var(--amber); content: "•"; margin-right: 5px; }
.metric-grid { display: grid; gap: 8px; grid-template-columns: repeat(4, 1fr); padding: 18px 0 2px; }
.metric-card { background: #e8f4f0; border: 1px solid #d1e7e2; border-radius: 9px; min-width: 0; padding: 12px 11px; }
.metric-card span { color: #718d94; display: block; font-size: 9px; line-height: 1.35; min-height: 24px; }
.metric-card strong { display: block; font-family: Georgia, serif; font-size: 19px; letter-spacing: -0.05em; margin-top: 8px; white-space: nowrap; }
.detail-section { border-top: 1px solid var(--line); margin-top: 21px; padding-top: 18px; }
.section-title { align-items: center; display: flex; gap: 10px; margin-bottom: 12px; }
.section-title span { color: var(--amber); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 10px; }
.section-title h3 { font-size: 14px; letter-spacing: 0.02em; margin: 0; }
.detail-rows { display: grid; grid-template-columns: 1fr 1fr; }
.detail-row { align-items: center; border-bottom: 1px dashed rgba(21, 69, 84, 0.1); display: flex; gap: 10px; justify-content: space-between; min-height: 35px; padding: 6px 0; }
.detail-row:nth-child(odd) { padding-right: 14px; }
.detail-row:nth-child(even) { border-left: 1px solid rgba(21, 69, 84, 0.07); padding-left: 14px; }
.detail-row span { color: #6f8890; font-size: 10px; line-height: 1.35; }
.detail-row strong { color: #274b58; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 11px; text-align: right; }
.wind-cards { display: grid; gap: 8px; }
.wind-card { background: #edf6f3; border: 1px solid #d5e9e5; border-radius: 10px; display: grid; gap: 9px; grid-template-columns: 0.7fr 1.1fr 0.9fr 1fr; padding: 10px 11px; }
.wind-card > div { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.wind-card span { color: #819ca1; font-size: 9px; }
.wind-card strong { color: #245565; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 11px; overflow-wrap: anywhere; }
.extreme-grid { display: grid; gap: 8px; grid-template-columns: repeat(3, 1fr); }
.extreme-grid > div { background: #eef6f4; border: 1px solid #dcece8; border-radius: 8px; padding: 11px; }
.extreme-grid span { color: #819ca1; display: block; font-size: 9px; }
.extreme-grid strong { display: block; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 12px; margin-top: 8px; }
.source-note { background: #fff7e8; border: 1px solid #f0ddb8; border-radius: 9px; color: #6d5a38; font-size: 10px; line-height: 1.65; margin: 17px 0 5px; padding: 10px 12px; }

.loading-state, .empty-state { align-items: center; color: #748d95; display: flex; flex-direction: column; justify-content: center; min-height: 270px; padding: 28px; text-align: center; }
.loading-state strong, .empty-state strong { color: var(--ink); font-size: 14px; margin-top: 12px; }
.loading-state p, .empty-state p { font-size: 11px; line-height: 1.6; margin: 7px 0 0; }
.empty-state button { background: var(--cyan-dark); border: 0; border-radius: 999px; color: #fff; margin-top: 15px; padding: 8px 14px; }
.loader { animation: spin 0.8s linear infinite; border: 2px solid #c7dbd7; border-right-color: var(--cyan-dark); border-radius: 50%; height: 25px; width: 25px; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .loader { animation: none; } * { transition-duration: 0.01ms !important; } }

.compare-panel { background: var(--navy-800); border: 1px solid rgba(70, 217, 210, 0.35); border-radius: var(--radius-lg); color: #eafaf7; margin-top: 18px; overflow: hidden; padding: 23px 25px 25px; }
.compare-heading { align-items: end; display: flex; justify-content: space-between; margin-bottom: 17px; }
.compare-heading p { color: var(--cyan); }
.compare-heading > div:last-child { align-items: center; display: flex; gap: 10px; }
.compare-heading > div:last-child span { color: rgba(234, 250, 247, 0.62); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 10px; }
.compare-heading button { background: transparent; border: 1px solid rgba(234, 250, 247, 0.24); border-radius: 999px; color: #eafaf7; font-size: 10px; padding: 7px 10px; }
.compare-table-wrap { overflow: auto; }
.compare-table-wrap table { border-collapse: collapse; font-size: 11px; min-width: 680px; width: 100%; }
.compare-table-wrap th, .compare-table-wrap td { border-bottom: 1px solid rgba(234, 250, 247, 0.13); padding: 10px 12px; text-align: right; }
.compare-table-wrap th:first-child, .compare-table-wrap td:first-child { background: var(--navy-800); color: rgba(234, 250, 247, 0.62); left: 0; position: sticky; text-align: left; z-index: 1; }
.compare-table-wrap thead th:first-child { z-index: 2; }
.compare-table-wrap th { color: var(--cyan); }
.compare-remove { background: transparent; border: 0; color: var(--amber); font-size: 15px; margin-left: 4px; padding: 3px; }
.compare-mobile-list { display: none; }

.data-note { align-items: start; display: grid; gap: 28px; grid-template-columns: 220px 1fr; padding-bottom: 28px; padding-top: 35px; }
.data-note > div { align-items: center; display: flex; gap: 11px; }
.note-index { color: var(--amber); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 12px; }
.data-note h2 { font-size: 14px; margin: 0; }
.data-note p { color: #647e87; font-size: 10px; line-height: 1.8; margin: 0; }
.footer { border-top: 1px solid rgba(29, 78, 88, 0.12); color: #8a9da2; display: flex; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 9px; justify-content: space-between; letter-spacing: 0.1em; padding-bottom: 32px; padding-top: 23px; }
.toast { background: var(--navy-900); border: 1px solid rgba(70, 217, 210, 0.4); border-radius: 999px; bottom: 24px; color: #fff; font-size: 12px; left: 50%; opacity: 0; padding: 10px 16px; pointer-events: none; position: fixed; transform: translate(-50%, 20px); transition: 0.2s ease; z-index: 50; }
.toast.visible { opacity: 1; transform: translate(-50%, 0); }
.noscript { background: #fff1cf; bottom: 0; color: #493b22; left: 0; padding: 12px; position: fixed; right: 0; text-align: center; z-index: 100; }

@media (max-width: 1080px) {
  .search-row { grid-template-columns: minmax(250px, 1fr) 170px 170px auto; }
  .workspace { grid-template-columns: minmax(0, 1fr) minmax(440px, 0.95fr); }
  .metric-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .app-shell { background: linear-gradient(180deg, var(--navy-950) 0 445px, var(--paper) 445px 100%); }
  .content-width { padding-inline: 19px; }
  .hero { align-items: start; flex-direction: column; min-height: 290px; padding-bottom: 40px; }
  .dataset-signal { min-width: 0; }
  .search-row { grid-template-columns: 1fr 1fr; }
  .search-box { grid-column: 1 / -1; }
  .quiet-button { align-self: end; justify-self: stretch; }
  .query-tools { align-items: flex-start; flex-direction: column; gap: 12px; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); padding-bottom: 25px; padding-top: 19px; }
  .workspace { display: flex; flex-direction: column; }
  .results-panel, .detail-panel { width: 100%; }
  .detail-panel { position: relative; top: auto; }
  .result-list { max-height: 480px; }
  .data-note { grid-template-columns: 1fr; gap: 10px; }
}
@media (max-width: 540px) {
  .topbar { padding-top: 20px; }
  .standard-badge { font-size: 9px; padding: 7px 9px; }
  .brand strong { font-size: 13px; }
  .hero { padding-top: 30px; }
  .hero h1 { font-size: 49px; }
  .hero-intro { font-size: 13px; }
  .query-card { border-radius: 14px; padding-inline: 14px; }
  .search-row { grid-template-columns: 1fr; }
  .search-box { grid-column: auto; }
  .stats-grid { gap: 9px; }
  .stat-card { min-height: 108px; padding: 15px 14px; }
  .stat-card strong { font-size: 27px; }
  .stat-card-unit strong { font-size: 17px; }
  .result-columns, .result-row { grid-template-columns: minmax(132px, 1fr) 49px 62px 37px; }
  .result-columns { padding-left: 15px; padding-right: 9px; }
  .result-row { gap: 6px; padding-right: 8px; }
  .station-button { padding-left: 15px; }
  .row-number { font-size: 10px; }
  .detail-panel { padding-inline: 17px; }
  .detail-heading h2 { font-size: 30px; }
  .station-id { font-size: 15px; }
  .detail-rows { grid-template-columns: 1fr; }
  .detail-row:nth-child(odd) { padding-right: 0; }
  .detail-row:nth-child(even) { border-left: 0; padding-left: 0; }
  .wind-card { grid-template-columns: 1fr 1fr; }
  .extreme-grid { grid-template-columns: 1fr; }
  .compare-panel { padding-inline: 16px; }
  .compare-heading { align-items: start; flex-direction: column; gap: 12px; }
  .footer { flex-direction: column; gap: 8px; }
  .toast { bottom: 16px; max-width: calc(100vw - 28px); text-align: center; white-space: nowrap; }
}

@media (max-width: 700px) {
  .compare-table-wrap { display: none; }
  .compare-mobile-list { display: grid; gap: 16px; }
  .compare-mobile-stations { display: grid; gap: 7px; }
  .compare-mobile-station {
    align-items: center;
    background: rgba(234, 250, 247, 0.06);
    border: 1px solid rgba(234, 250, 247, 0.14);
    border-radius: 10px;
    color: #eafaf7;
    display: grid;
    gap: 9px;
    grid-template-columns: auto minmax(0, 1fr) auto;
    min-height: 42px;
    padding: 7px 10px;
    text-align: left;
  }
  .compare-mobile-station:hover { background: rgba(70, 217, 210, 0.12); border-color: rgba(70, 217, 210, 0.38); }
  .compare-mobile-index { color: var(--cyan); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 9px; }
  .compare-mobile-station strong { font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .compare-mobile-remove { color: var(--amber); font-size: 17px; line-height: 1; }
  .compare-mobile-metrics { display: grid; gap: 8px; }
  .compare-mobile-metric { border: 1px solid rgba(234, 250, 247, 0.13); border-radius: 10px; overflow: hidden; }
  .compare-mobile-metric h3 { color: rgba(234, 250, 247, 0.62); font-size: 10px; font-weight: 500; letter-spacing: 0.02em; margin: 0; padding: 9px 10px 8px; }
  .compare-mobile-values { display: grid; gap: 1px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .compare-mobile-value { background: rgba(234, 250, 247, 0.055); display: grid; gap: 5px; min-width: 0; padding: 9px 10px 10px; }
  .compare-mobile-value span { color: var(--cyan); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .compare-mobile-value strong { color: #f4fcfa; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 11px; overflow-wrap: anywhere; }
  .compare-mobile-value:only-child { grid-column: 1 / -1; }
}