/* =========================================================
   雨后初晴 - Base Layer
   设计 token / Reset / 字体 / 全局样式
   ========================================================= */

/* ============ 设计 Token ============ */
:root {
  /* 主色 */
  --color-primary: #4F7CFF;
  --color-primary-dark: #3B6DE0;
  --color-primary-gradient: linear-gradient(135deg, #4F7CFF, #7B9FFF);
  --color-primary-soft: rgba(79, 124, 255, 0.1);

  /* 语义色 */
  --color-success: #52C41A;
  --color-success-soft: rgba(82, 196, 26, 0.1);
  --color-warning: #FAAD14;
  --color-warning-soft: rgba(250, 173, 20, 0.1);
  --color-danger: #FF4D4F;
  --color-danger-soft: rgba(255, 77, 79, 0.1);

  /* 中性色 */
  --text-primary: #1F2937;
  --text-secondary: #6B7280;
  --text-tertiary: #9CA3AF;
  --border: #E5E7EB;
  --border-light: #F3F4F6;

  /* 背景 */
  --bg-page: #F8FAFC;
  --bg-card: #FFFFFF;
  --bg-overlay: rgba(0, 0, 0, 0.5);

  /* 圆角 */
  --radius-btn: 12px;
  --radius-btn-sm: 8px;
  --radius-card: 16px;
  --radius-modal: 20px;
  --radius-input: 10px;
  --radius-tag: 6px;
  --radius-chip: 20px;

  /* 阴影 */
  --shadow-btn: 0 4px 16px rgba(79, 124, 255, 0.25);
  --shadow-btn-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-card: 0 2px 12px rgba(0, 0, 0, 0.06);
  --shadow-card-hover: 0 8px 32px rgba(79, 124, 255, 0.15);
  --shadow-modal: 0 24px 64px rgba(0, 0, 0, 0.2);
  --shadow-toast: 0 8px 24px rgba(0, 0, 0, 0.15);
  --shadow-focus: 0 0 0 3px rgba(79, 124, 255, 0.2);

  /* 过渡 */
  --ease-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* 字体 */
  --font-sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei",
    "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", "Consolas", "Monaco", monospace;

  /* 布局 */
  --max-width: 1280px;
  --nav-height: 64px;
}

/* ============ 重置 ============ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  padding: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-primary);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 700; line-height: 1.3; }
h1 { font-size: 48px; }
h2 { font-size: 32px; }
h3 { font-size: 20px; }
p { margin: 0; }
a { color: var(--color-primary); text-decoration: none; transition: color .2s; }
a:hover { color: var(--color-primary-dark); }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
img { max-width: 100%; display: block; }
input, textarea { font-family: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }

/* 焦点可见 */
*:focus { outline: 2px solid var(--color-primary); outline-offset: 2px; }
button:focus, a:focus, input:focus { outline: 2px solid var(--color-primary); outline-offset: 2px; }

/* ============ 布局容器 ============ */
/* 主内容区全局避让固定导航栏（导航栏为半透明毛玻璃，内容顶入会透出黑影） */
#main-content {
  padding-top: var(--nav-height);
}

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

/* ============ 通用页面容器 ============ */
.page {
  padding-top: calc(var(--nav-height) + 40px);
  padding-bottom: 60px;
  min-height: 100vh;
}
.page-single {
  max-width: 680px;
  margin: 0 auto;
  padding: 0 24px;
}
.page-wide {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: var(--text-secondary);
  margin-bottom: 24px;
  font-weight: 500;
  transition: color .2s, transform .2s;
}
.back-link:hover { color: var(--color-primary); transform: translateX(-2px); }