/* theme.css —— 设计令牌与基础排版
   配色与尺寸严格按实施方案 S1 的 Steam 视觉规范：
   两级导航 #171a21 / #1b2838，卡片 #16202d，输入框 #0e1621，
   hover #2a475e，高亮蓝 #66c0f4，绿色按钮渐变 #75b022→#588a1b，成就金 #d4af37 */

:root {
  --c-deep: #171a21;
  --c-bg: #1b2838;
  --c-card: #16202d;
  --c-card-hi: #1f2d3f;
  --c-input: #0e1621;
  --c-hover: #2a475e;
  --c-line: #2a3f55;
  --c-line-soft: #223449;

  --c-accent: #66c0f4;
  --c-accent-dim: #4a90c2;
  --c-accent-deep: #1a4a70;

  --c-green-a: #75b022;
  --c-green-b: #588a1b;
  --c-gold: #d4af37;
  --c-red-a: #c0392b;
  --c-red-b: #96281b;

  --t-bright: #ffffff;
  --t-primary: #c7d5e0;
  --t-muted: #8f98a0;
  --t-dim: #6b7681;
  --t-ink: #0e1621;

  --fs-xs: 12px;
  --fs-sm: 12px;
  --fs-md: 13px;
  --fs-lg: 15px;
  --fs-xl: 20px;
  --fs-2xl: 26px;

  --r-sm: 2px;
  --r-md: 3px;

  --tap: 44px;
  --gap: 14px;
  --wrap: 1200px;

  /* 顶栏高度。★ 值与 layout.css 里 `.topbar-inner { height: 56px }` **同源** ——
     写一个变量而不是在两处各写一个 px：雅思模考那一屏要"填满顶栏以下"，
     算错了就会出现一条缝或者滚动条。
     ★ 目前没有任何媒体查询改 `.topbar-inner` 的高度，
       所以这里恒为 56；哪天要在窄屏收顶栏，改**这一处**即可。 */
  --topbar-h: 56px;

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei",
    "PingFang SC", "Noto Sans SC", Roboto, Arial, sans-serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  min-height: 100%;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--c-bg);
  color: var(--t-primary);
  font-family: var(--font);
  font-size: var(--fs-md);
  line-height: 1.55;
  -webkit-tap-highlight-color: transparent;
}

body.is-busy {
  cursor: progress;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  font-weight: 500;
  color: var(--t-bright);
  line-height: 1.3;
}

h1 { font-size: var(--fs-2xl); }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); }

p { margin: 0 0 10px; }
p:last-child { margin-bottom: 0; }

a {
  color: var(--c-accent);
  text-decoration: none;
}

a:hover { color: #8fd0ff; }

img,
svg {
  display: block;
  max-width: 100%;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 1px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.text-muted { color: var(--t-muted); }
.text-dim { color: var(--t-dim); }
.text-bright { color: var(--t-bright); }
.text-accent { color: var(--c-accent); }

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: var(--c-input);
}

::-webkit-scrollbar-thumb {
  background: #38495c;
  border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--c-hover);
}