:root {
  color-scheme: dark;
  --page: #080c12;
  --surface: #0d131b;
  --ink: #f4f6f8;
  --muted: #98a3af;
  --quiet: #66717d;
  --line: #303a46;
  --signal: #e42330;
  --signal-deep: #b81420;
  --signal-soft: rgba(228, 35, 48, 0.12);
  --positive: #ff4854;
  --danger: #ff6b70;
  font-family: Inter, "SF Pro Display", "SF Pro Text", "Noto Sans SC",
    "Microsoft YaHei UI", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { background: var(--page); }

body {
  position: relative;
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background-color: var(--page);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0 0 auto;
  height: 500px;
  pointer-events: none;
  background-image: url("/assets/night-arc-bg.png");
  background-repeat: no-repeat;
  background-position: top center;
  background-size: max(1440px, 100vw) auto;
  opacity: 0.52;
}

.site-header {
  position: absolute;
  z-index: 2;
  left: 50%;
  transform: translateX(-50%);
}
main, footer { position: relative; z-index: 1; }

button, input { font: inherit; }

.site-header {
  width: min(1080px, calc(100% - 40px));
  margin: 0 auto;
  padding: 25px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand { display: inline-flex; color: inherit; text-decoration: none; }
.brand strong, .brand small { display: block; }
.brand strong {
  color: #dce1e7;
  font-size: 0.72rem;
  font-weight: 720;
  letter-spacing: 0.19em;
}
.brand small {
  margin-top: 5px;
  color: var(--quiet);
  font-size: 0.66rem;
  letter-spacing: 0.05em;
}
.header-note { color: var(--quiet); font-size: 0.72rem; letter-spacing: 0.08em; }

main { width: min(760px, calc(100% - 32px)); margin: 38px auto 76px; }
.hero { margin-bottom: 28px; }
.eyebrow {
  margin: 0 0 12px;
  color: #b8c1cc;
  font-size: 0.68rem;
  font-weight: 760;
  letter-spacing: 0.38em;
}
h1 {
  margin: 0;
  color: #f0f2f5;
  font-family: "Noto Serif SC", "Songti SC", SimSun, serif;
  font-size: clamp(3.05rem, 7.3vw, 4.9rem);
  font-weight: 480;
  line-height: 1.02;
  letter-spacing: -0.055em;
}
.hero-copy {
  max-width: 650px;
  margin: 18px 0 0;
  color: #a6afb9;
  font-size: 0.94rem;
  line-height: 1.72;
  letter-spacing: 0.01em;
}

.query-card {
  padding: 28px;
  border: 1px solid #394451;
  border-radius: 17px;
  background-color: rgba(14, 20, 28, 0.9);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.025), 0 24px 64px rgba(0,0,0,0.18);
  backdrop-filter: blur(12px);
}
.mode-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mode-button {
  min-height: 50px;
  padding: 10px 16px;
  border: 1px solid #303a46;
  border-radius: 11px;
  color: #929ca8;
  background: transparent;
  cursor: pointer;
  transition: border-color 160ms ease, color 160ms ease, background-color 160ms ease;
}
.mode-button:hover { color: #d9dee4; border-color: #4a5663; }
.mode-button.active {
  color: #fff;
  border-color: var(--signal);
  background-color: var(--signal-soft);
  box-shadow: inset 0 0 0 1px rgba(228,35,48,0.08);
  font-weight: 720;
}
.history-fields {
  margin-top: 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 18px;
}
.history-fields[hidden] { display: none; }
label span {
  display: block;
  margin: 0 0 9px;
  color: #abb4bf;
  font-size: 0.76rem;
  font-weight: 650;
  letter-spacing: 0.025em;
}
label em { color: #6e7884; font-style: normal; font-weight: 450; }
input {
  width: 100%;
  min-height: 50px;
  padding: 0 14px;
  border: 1px solid #37414d;
  border-radius: 10px;
  color: var(--ink);
  background-color: #0d131a;
  color-scheme: dark;
  -webkit-text-fill-color: var(--ink);
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
input::-webkit-datetime-edit { color: var(--ink); }
input:hover { border-color: #505c69; }
input:focus {
  outline: none;
  border-color: var(--signal);
  box-shadow: 0 0 0 3px rgba(228,35,48,0.13);
}
.field-tip {
  grid-column: 1 / -1;
  margin: -1px 0 0;
  color: #818b97;
  font-size: 0.73rem;
  line-height: 1.55;
}
.primary-button {
  width: 100%;
  min-height: 56px;
  margin-top: 22px;
  padding: 15px 22px;
  border: 1px solid #ff3a45;
  border-radius: 11px;
  color: #fff;
  background-color: #cf1723;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 9px 28px rgba(184,20,32,0.2);
  font-weight: 760;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background-color 160ms ease, transform 160ms ease;
}
.primary-button:hover { background-color: var(--signal); transform: translateY(-1px); }
.primary-button:focus-visible { outline: 3px solid rgba(255,255,255,0.68); outline-offset: 3px; }
.primary-button:disabled {
  color: #bdc3c9;
  background-color: #3a2026;
  border-color: #684049;
  box-shadow: none;
  cursor: wait;
  transform: none;
}

.status { min-height: 28px; padding: 15px 4px 0; color: var(--muted); font-size: 0.82rem; }
.status.error { color: var(--danger); }
.results { display: grid; grid-template-columns: 1fr; gap: 0; margin-top: 8px; }
.results[hidden] { display: none; }
.result-heading {
  margin: 0 5px 10px;
  padding: 0 0 3px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
}
.result-heading h2 {
  margin: 0;
  color: #eef1f4;
  font-family: "Noto Serif SC", "Songti SC", SimSun, serif;
  font-size: 1.65rem;
  font-weight: 520;
  letter-spacing: -0.035em;
}
.result-heading span { color: #8c97a3; font-size: 0.73rem; text-align: right; }
.rate-card {
  position: relative;
  padding: 19px 30px 17px;
  border: 1px solid #36414d;
  border-bottom: 0;
  background-color: rgba(15,21,29,0.91);
}
.rate-card:first-of-type {
  border-radius: 15px 15px 0 0;
  border-left: 3px solid var(--signal);
}
.rate-card:last-child {
  border-bottom: 1px solid #36414d;
  border-radius: 0 0 15px 15px;
}
.rate-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}
.rate-index {
  display: block;
  margin-bottom: 6px;
  color: #788492;
  font-size: 0.69rem;
  font-weight: 720;
  letter-spacing: 0.12em;
}
.rate-name {
  margin: 0;
  color: #f0f2f5;
  font-size: 0.93rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.rate-value {
  margin: 9px 0 0;
  color: #f8f9fa;
  font-family: "SF Pro Display", Inter, "Noto Sans SC", system-ui, sans-serif;
  font-size: 2.7rem;
  font-weight: 480;
  line-height: 1;
  letter-spacing: -0.045em;
  font-variant-numeric: tabular-nums lining-nums;
}
.rate-value small {
  margin-left: 9px;
  color: #8d98a5;
  font-family: Inter, "Noto Sans SC", system-ui, sans-serif;
  font-size: 0.69rem;
  font-weight: 450;
  letter-spacing: 0;
}
.comparison {
  flex: 0 0 auto;
  margin-top: 6px;
  padding: 7px 10px;
  border: 1px solid rgba(255,72,84,0.36);
  border-radius: 999px;
  color: var(--positive);
  background-color: rgba(228,35,48,0.1);
  font-size: 0.73rem;
  font-weight: 780;
  font-variant-numeric: tabular-nums;
}
.comparison.negative {
  color: #aeb7c1;
  border-color: #44505d;
  background-color: #161e27;
}
.rate-meta {
  margin: 12px 0 0;
  padding: 9px 0 0;
  border-top: 1px solid #34404c;
  display: flex;
  flex-wrap: wrap;
  gap: 5px 18px;
  color: #8995a2;
  font-size: 0.75rem;
  line-height: 1.55;
  font-variant-numeric: tabular-nums;
}
.rate-meta p { margin: 0; }
.rate-meta strong { color: #d8dde3; font-weight: 700; }
.source-error { color: var(--danger); }
.rate-card.unavailable .rate-value { color: #66717d; font-size: 2.1rem; }

.method-note {
  margin-top: 27px;
  padding: 0 5px;
  color: #6e7985;
  font-size: 0.72rem;
  line-height: 1.68;
}
.method-note h2 {
  margin: 0 0 7px;
  color: #9ba5b0;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.05em;
}
.method-note p { margin: 0; }
footer {
  width: min(1080px, calc(100% - 40px));
  margin: 0 auto;
  padding: 24px 0 32px;
  display: flex;
  justify-content: space-between;
  border-top: 1px solid #202832;
  color: #59636f;
  font-size: 0.68rem;
  letter-spacing: 0.04em;
}
.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: 580px) {
  body::before { background-size: 980px auto; opacity: 0.46; }
  .site-header { width: min(100% - 28px,1080px); padding: 18px 0; }
  .site-header { position: relative; left: auto; transform: none; }
  .header-note { display: none; }
  main { width: min(100% - 24px,760px); margin-top: 24px; }
  .hero { margin-bottom: 23px; }
  h1 { font-size: clamp(2.55rem,14vw,3.4rem); letter-spacing: -0.065em; }
  .hero-copy { margin-top: 14px; font-size: 0.82rem; line-height: 1.65; }
  .query-card { padding: 16px; border-radius: 15px; }
  .mode-switch { gap: 6px; }
  .mode-button { min-height: 45px; padding: 9px; }
  .history-fields { margin-top: 19px; grid-template-columns: 1fr; gap: 14px; }
  .field-tip { grid-column: auto; }
  .primary-button { min-height: 52px; margin-top: 18px; }
  .result-heading {
    margin-top: 2px;
    align-items: flex-start;
    flex-direction: column;
    gap: 5px;
  }
  .result-heading h2 { font-size: 1.45rem; }
  .result-heading span { text-align: left; line-height: 1.45; }
  .rate-card { padding: 21px 19px; }
  .rate-top { gap: 10px; }
  .rate-name { font-size: 0.85rem; }
  .rate-value { font-size: 2.25rem; }
  .rate-value small { display: block; margin: 7px 0 0; line-height: 1.35; }
  .comparison { margin-top: 0; padding: 6px 8px; font-size: 0.66rem; }
  .rate-meta { display: grid; gap: 5px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}