/* 爆款雷达 · 设计令牌与基础样式 */
:root {
  --bg: #06080d;
  --bg-2: #0b0f17;
  --surface: rgba(255, 255, 255, 0.035);
  --surface-2: rgba(255, 255, 255, 0.06);
  --surface-solid: #0f141d;
  --line: rgba(255, 255, 255, 0.07);
  --line-2: rgba(255, 255, 255, 0.12);
  --text: #eef1f7;
  --text-2: #a3abbd;
  --text-3: #6b7489;
  --accent: #ff5a5f;
  --accent-2: #ff9a3c;
  --accent-grad: linear-gradient(135deg, #ff4d6d 0%, #ff7a45 55%, #ffb547 100%);
  --cyan: #46d3f5;
  --green: #2fd18b;
  --amber: #ffb547;
  --danger: #ff5c7a;

  --dy: #fe2c55;
  --xhs: #ff2442;
  --gzh: #07c160;
  --sph: #fa9d3b;

  --radius: 14px;
  --radius-lg: 20px;
  --shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 20px 40px -24px rgba(0, 0, 0, 0.8);
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  --font-num: "SF Pro Display", -apple-system, "DIN Alternate", "Helvetica Neue", Arial, sans-serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font: 14px/1.6 var(--font);
  -webkit-font-smoothing: antialiased;
  letter-spacing: 0.01em;
}
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; color: inherit; }
::selection { background: rgba(255, 90, 95, 0.35); }

.num { font-family: var(--font-num); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; padding: 0 18px; border-radius: 11px; border: 1px solid var(--line-2);
  background: var(--surface-2); cursor: pointer; font-weight: 500; white-space: nowrap;
  transition: transform .2s var(--ease), background .2s, border-color .2s, opacity .2s;
}
.btn:hover { background: rgba(255, 255, 255, 0.09); border-color: rgba(255, 255, 255, 0.18); }
.btn:active { transform: scale(0.98); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-primary {
  border: 0; color: #fff; background: var(--accent-grad);
  box-shadow: 0 10px 30px -10px rgba(255, 90, 95, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.12) inset;
}
.btn-primary:hover { background: var(--accent-grad); filter: brightness(1.08); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--text-2); }
.btn-ghost:hover { color: var(--text); background: var(--surface-2); }
.btn-sm { height: 32px; padding: 0 12px; border-radius: 9px; font-size: 13px; }

.input {
  width: 100%; height: 46px; padding: 0 14px; border-radius: 12px;
  border: 1px solid var(--line-2); background: rgba(255, 255, 255, 0.03); outline: none;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.input::placeholder { color: var(--text-3); }
.input:focus { border-color: rgba(255, 122, 69, 0.7); box-shadow: 0 0 0 4px rgba(255, 90, 95, 0.14); background: rgba(255, 255, 255, 0.05); }

.spinner {
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.35); border-top-color: #fff;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}