/* ============================================================
   词狂设计系统 v0.1（设计稿）
   基于 Bootstrap 5.3，用 CSS 变量定义全部 token。
   品牌色与顶栏 logo 同色 #0090C5（2026-10-12 起）；亮色默认，暗色用 data-bs-theme。
   ============================================================ */

/* ---------- 0. 全局布局不变量 ---------- */
/* 恒定预留竖向滚动条位：否则"内容不够长、不出现滚动条"的页面（词集/词论等）
   会比"够长、出现滚动条"的页面（词历/钱包等）整体右移半个滚动条宽（实测 7.5px），
   切页时 logo 与整块内容会左右跳动（站长实测报障，见讨论记录/68） */
html {
  overflow-y: scroll;
  scrollbar-gutter: stable;
}

/* ---------- 1. 设计令牌（亮色） ---------- */
:root {
  /* 品牌 */
  --ck-primary: #0090C5;
  --ck-primary-hover: #007AA7;
  --ck-primary-active: #00658A;
  --ck-primary-soft: #E6F4FA;
  --ck-primary-soft-hover: #D6EDF6;
  --ck-on-primary: #FFFFFF;

  /* 中性 */
  --ck-bg: #F5F7FA;
  --ck-surface: #FFFFFF;
  --ck-surface-2: #F0F3F8;
  --ck-border: #E4E9F0;
  --ck-border-strong: #D3DCE6;
  --ck-text: #1B2531;
  --ck-text-2: #55677C;
  --ck-text-3: #616F84;

  /* 语义 */
  --ck-success: #2E9E6B;
  --ck-success-soft: #E5F5EE;
  --ck-warning: #C97A0A;
  --ck-warning-soft: #FBF1E0;
  --ck-danger: #D14B4B;
  --ck-danger-soft: #FAEAEA;

  /* 形状与阴影 */
  --ck-radius-sm: 8px;
  --ck-radius: 12px;
  --ck-radius-lg: 16px;
  --ck-shadow-sm: 0 1px 2px rgba(16, 42, 74, .05);
  --ck-shadow: 0 2px 10px rgba(16, 42, 74, .07);
  --ck-shadow-lg: 0 10px 30px rgba(16, 42, 74, .12);

  /* 字体 */
  --ck-font: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* 布局：全站唯一的内容宽度（顶栏 / 页脚 / 主内容三者同宽，见讨论记录/67）
     --ck-content-w 功能页统一宽度（词历/词集/词论/设置/钱包/学习数据…）
     --ck-form-w    单卡表单页（登录/注册/忘记密码）刻意收窄的宽度  */
  --ck-content-w: 960px;
  --ck-form-w: 420px;
  /* 顶栏高度与品牌 logo（讨论记录/69、/70、/71）：
     ≤767.98px（手机/窄屏）另在下方媒体查询里覆盖为 55px；logo 同步降到 28px
     （否则 40px 的 logo 会顶穿 55px 栏的内容区）。顶部导航栏高度：桌面/平板 65px */
  --ck-navbar-h: 65px;
  --ck-brand-logo-h: 40px;

  /* 动效 */
  --ck-ease: cubic-bezier(.2, .7, .3, 1);
  --ck-fast: .15s;
  --ck-normal: .25s;
}

/* ---------- 1b. 设计令牌（暗色） ---------- */
[data-bs-theme="dark"] {
  --ck-primary: #0090C5;
  --ck-primary-hover: #26A6D6;
  --ck-primary-active: #4FB8DE;
  --ck-primary-soft: #123B49;
  --ck-primary-soft-hover: #17495B;
  --ck-on-primary: #0D1B2A;

  --ck-bg: #0F141B;
  --ck-surface: #171E27;
  --ck-surface-2: #1F2833;
  --ck-border: #2A3542;
  --ck-border-strong: #374454;
  --ck-text: #E8EEF4;
  --ck-text-2: #A5B4C4;
  --ck-text-3: #8798A9;

  --ck-success: #4CBB8A;
  --ck-success-soft: #14332A;
  --ck-warning: #E0A044;
  --ck-warning-soft: #3A2C12;
  --ck-danger: #E07272;
  --ck-danger-soft: #3D1F1F;

  --ck-shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
  --ck-shadow: 0 2px 10px rgba(0, 0, 0, .35);
  --ck-shadow-lg: 0 10px 30px rgba(0, 0, 0, .45);
}

/* ---------- 2. 基础 ---------- */
body {
  font-family: var(--ck-font);
  background: var(--ck-bg);
  color: var(--ck-text);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 { color: var(--ck-text); font-weight: 700; letter-spacing: -.01em; }
a { color: var(--ck-primary); text-decoration: none; }
a:hover { color: var(--ck-primary-hover); }
::selection { background: var(--ck-primary-soft); }

/* 字阶 */
.ck-display { font-size: 28px; font-weight: 800; letter-spacing: -.02em; }
.ck-h1 { font-size: 24px; font-weight: 700; }
.ck-h2 { font-size: 20px; font-weight: 700; }
.ck-h3 { font-size: 17px; font-weight: 700; }
.ck-body { font-size: 15px; }
.ck-small { font-size: 13px; color: var(--ck-text-2); }
.ck-caption { font-size: 12px; color: var(--ck-text-3); }

/* ---------- 3. 按钮 ---------- */
.btn { border-radius: var(--ck-radius-sm); font-weight: 600; transition: all var(--ck-fast) var(--ck-ease); }
.btn:focus-visible { outline: 2px solid var(--ck-primary); outline-offset: 2px; box-shadow: none; }

.btn-ck {
  --bs-btn-bg: var(--ck-primary); --bs-btn-border-color: var(--ck-primary); --bs-btn-color: var(--ck-on-primary);
  --bs-btn-hover-bg: var(--ck-primary-hover); --bs-btn-hover-border-color: var(--ck-primary-hover); --bs-btn-hover-color: var(--ck-on-primary);
  --bs-btn-active-bg: var(--ck-primary-active); --bs-btn-active-border-color: var(--ck-primary-active); --bs-btn-active-color: var(--ck-on-primary);
}
.btn-ck-outline {
  --bs-btn-color: var(--ck-primary); --bs-btn-border-color: var(--ck-border-strong); --bs-btn-bg: var(--ck-surface);
  --bs-btn-hover-color: var(--ck-primary-hover); --bs-btn-hover-border-color: var(--ck-primary); --bs-btn-hover-bg: var(--ck-primary-soft);
  --bs-btn-active-color: var(--ck-primary-active); --bs-btn-active-bg: var(--ck-primary-soft-hover);
}
.btn-ck-soft {
  --bs-btn-color: var(--ck-primary); --bs-btn-bg: var(--ck-primary-soft); --bs-btn-border-color: transparent;
  --bs-btn-hover-color: var(--ck-primary-hover); --bs-btn-hover-bg: var(--ck-primary-soft-hover);
  --bs-btn-active-bg: var(--ck-primary-soft-hover);
}
.btn-ck-danger-soft {
  --bs-btn-color: var(--ck-danger); --bs-btn-bg: var(--ck-danger-soft); --bs-btn-border-color: transparent;
  --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--ck-danger);
}
.btn-ghost {
  --bs-btn-color: var(--ck-text-2); --bs-btn-bg: transparent; --bs-btn-border-color: transparent;
  --bs-btn-hover-color: var(--ck-text); --bs-btn-hover-bg: var(--ck-surface-2);
}

/* ---------- 4. 徽章 ---------- */
.ck-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 600; line-height: 1.6;
  background: var(--ck-surface-2); color: var(--ck-text-2);
}
.ck-badge-primary { background: var(--ck-primary-soft); color: var(--ck-primary); }
.ck-badge-success { background: var(--ck-success-soft); color: var(--ck-success); }
.ck-badge-warning { background: var(--ck-warning-soft); color: var(--ck-warning); }
.ck-badge-danger  { background: var(--ck-danger-soft);  color: var(--ck-danger); }

/* ---------- 5. 卡片 ---------- */
.ck-card {
  background: var(--ck-surface);
  border: 1px solid var(--ck-border);
  border-radius: var(--ck-radius-lg);
  box-shadow: var(--ck-shadow-sm);
  transition: box-shadow var(--ck-normal) var(--ck-ease), transform var(--ck-normal) var(--ck-ease);
}
.ck-card-hover:hover { box-shadow: var(--ck-shadow); transform: translateY(-2px); }

/* ---------- 6. 导航 ---------- */
.ck-navbar {
  background: var(--ck-surface);
  border-bottom: 1px solid var(--ck-border);
  backdrop-filter: blur(8px);
}
/* 顶栏内层与页面内容同宽对齐：Bootstrap 默认 container 在 ≥1200/≥1400 视口下分别是
   1140/1320px，比内容宽出 180~360px，logo 与页面左缘对不齐（讨论记录/67） */
.ck-navbar .container { max-width: var(--ck-content-w); }
.ck-navbar .navbar-brand { font-weight: 800; font-size: 20px; color: var(--ck-primary); letter-spacing: -.02em; }
/* 顶栏高度完全由 --ck-navbar-h 决定：Bootstrap 的 .navbar-brand 自带上下各 5px 内边距，
   会让内容区比 logo 高 10px，把栏撑到 min-height 之上（实测 65px 要求下实际长成 67px）。
   该内边距在图片 logo 上无视觉作用，清零即可让高度精确落在令牌值上（讨论记录/71）。 */
.ck-navbar { min-height: var(--ck-navbar-h); }
.ck-navbar .navbar-brand { padding-top: 0; padding-bottom: 0; }
.ck-navbar .navbar-brand .ck-brand-logo { height: var(--ck-brand-logo-h); width: auto; display: block; }
.ck-navbar .nav-link { color: var(--ck-text-2); font-weight: 600; border-radius: var(--ck-radius-sm); padding: 6px 14px; }
.ck-navbar .nav-link:hover { color: var(--ck-text); background: var(--ck-surface-2); }
.ck-navbar .nav-link.active { color: var(--ck-primary); background: var(--ck-primary-soft); }

/* ---------- 6b. 主导航行（词历/词集/词论：桌面与手机均直接可见） ---------- */
/* 不再使用 Bootstrap 的 navbar-expand 折叠：导航行恒为横向、三个入口始终在栏内 */
.ck-navbar .navbar-nav { flex-direction: row; align-items: center; gap: 2px; }
@media (max-width: 991.98px) {
  /* 小屏收窄间距与字号：三个 2 字词条 + 品牌 + 用户区在 320px 宽度内排得下 */
  .ck-navbar .navbar-nav .nav-link { font-size: 13px; padding: 5px 7px; }
  .ck-navbar .container { gap: 6px; }
}
@media (max-width: 767.98px) {
  /* 手机/窄屏：顶栏 65px → 55px（站长 2026-10-13 口径）；logo 同步 40px → 28px */
  :root { --ck-navbar-h: 55px; --ck-brand-logo-h: 28px; }
}
@media (max-width: 520px) {
  /* 游客页：品牌 + 登录/注册/主题 占第一行，三个导航链接**规整独占第二行**
     （避免品牌/按钮/链接混排时的自动换行，视觉更整齐） */
  .ck-navbar-guest .ck-nav-main { order: 3; flex-basis: 100%; margin: 0 !important; padding: 2px 0 4px; }
}
@media (max-width: 420px) {
  /* 超窄屏（320~420px）再收一档：避免品牌 + 三项导航 + 登录/注册/主题 挤成两行
     （logo 尺寸已由上面的 ≤767.98px 断点统一为 28px，此处不再重复覆盖） */
  .ck-navbar .navbar-nav .nav-link { font-size: 12.5px; padding: 4px 5px; }
}

/* ---------- 7. 词集行（列表页核心组件） ---------- */
.ck-set-row {
  display: flex; align-items: center; gap: 16px;
  padding: 16px 20px;
  background: var(--ck-surface);
  border: 1px solid var(--ck-border);
  border-radius: var(--ck-radius);
  transition: all var(--ck-fast) var(--ck-ease);
}
.ck-set-row:hover { border-color: var(--ck-border-strong); box-shadow: var(--ck-shadow); }
.ck-set-row + .ck-set-row { margin-top: 10px; }
.ck-set-icon {
  width: 44px; height: 44px; flex: none;
  display: grid; place-items: center;
  border-radius: var(--ck-radius);
  background: var(--ck-primary-soft); color: var(--ck-primary);
  font-size: 20px; font-weight: 800;
}
.ck-set-name { font-weight: 700; font-size: 16px; color: var(--ck-text); }
.ck-set-name:hover { color: var(--ck-primary); }
.ck-set-meta { font-size: 13px; color: var(--ck-text-3); display: flex; gap: 12px; flex-wrap: wrap; }

/* 列表行操作区：桌面横向排在行尾；手机整行下移右对齐（防按钮被挤压换行） */
.ck-set-actions { display: flex; align-items: center; gap: 8px; flex: none; }
.ck-set-actions .btn { white-space: nowrap; }
@media (max-width: 575.98px) {
  /* 手机：允许换行。操作区不参与收缩（flex:none）——放得下就留在同一行，
     放不下则整块换到第二行右对齐；按钮文字永不竖排（见 .ck-set-actions .btn） */
  .ck-set-row { flex-wrap: wrap; row-gap: 10px; padding: 14px 16px; }
  .ck-set-actions { margin-left: auto; }
}

/* ---------- 8. 表单 ---------- */
.form-control, .form-select {
  background: var(--ck-surface); color: var(--ck-text);
  border: 1px solid var(--ck-border-strong); border-radius: var(--ck-radius-sm);
  transition: border-color var(--ck-fast), box-shadow var(--ck-fast);
}
.form-control:focus, .form-select:focus {
  background: var(--ck-surface); color: var(--ck-text);
  border-color: var(--ck-primary);
  box-shadow: 0 0 0 3px var(--ck-primary-soft);
}
.form-control::placeholder { color: var(--ck-text-3); }
.form-check-input:checked { background-color: var(--ck-primary); border-color: var(--ck-primary); }

/* 下拉框指示图标：隐藏默认箭头，用独立元素画品牌色 chevron（杜绝叠影，全站统一）
   用法：<span class="ck-select"><select class="form-select">…</select></span> */
.ck-select { position: relative; display: inline-block; }
.ck-select > .form-select {
  background-image: none;            /* 隐藏 Bootstrap 默认箭头 */
  padding-right: 2.2rem;
}
.ck-select::after {
  content: "";
  position: absolute; top: 50%; right: .65rem;
  width: 15px; height: 15px;
  transform: translateY(-50%);
  background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%230090C5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  pointer-events: none;
}
[data-bs-theme="dark"] .ck-select::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%235B9BD9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
}

/* ---------- 9. 进度条 ---------- */
.ck-progress { height: 8px; border-radius: 999px; background: var(--ck-surface-2); overflow: hidden; }
.ck-progress > i { display: block; height: 100%; border-radius: 999px; background: var(--ck-primary); transition: width var(--ck-normal) var(--ck-ease); }

/* ---------- 10. 空状态 ---------- */
.ck-empty { text-align: center; padding: 64px 24px; color: var(--ck-text-3); }
.ck-empty .ck-empty-icon { font-size: 40px; margin-bottom: 12px; opacity: .6; }

/* ---------- 10b. 图标（内联 SVG 精灵图） ---------- */
/* 风格：24px 栅格 / 2px 描边 / 圆角端点 / currentColor（自动随主题与文字色变化）。
   尺寸随字号（1em）：正文里与文字同排，空态里由 .ck-empty-icon 的 font-size 决定。 */
.ck-i { width: 1em; height: 1em; flex: none; display: inline-block; vertical-align: -.125em; }

/* ---------- 10c. 动效无障碍 ---------- */
/* 尊重系统「减少动态效果」：关闭翻转与位移类过渡，避免眩晕 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .ck-card-hover:hover { transform: none; }
}

/* ---------- 10d. 单词卡键盘焦点 ---------- */
.ck-flip:focus-visible {
  outline: 2px solid var(--ck-primary);
  outline-offset: 4px;
  border-radius: var(--ck-radius-lg);
}

/* ---------- 11. 统计数字 ---------- */
.ck-stat { padding: 20px 24px; }
.ck-stat .ck-stat-num { font-size: 26px; font-weight: 800; color: var(--ck-primary); letter-spacing: -.02em; }
.ck-stat .ck-stat-label { font-size: 13px; color: var(--ck-text-2); margin-top: 2px; }

/* ---------- 12. 单词卡 ---------- */
.ck-flashcard {
  position: relative;
  min-height: 320px;
  display: grid; place-items: center;
  background: var(--ck-surface);
  border: 1px solid var(--ck-border);
  border-radius: var(--ck-radius-lg);
  box-shadow: var(--ck-shadow);
  cursor: pointer;
  user-select: none;
  transition: transform var(--ck-normal) var(--ck-ease), box-shadow var(--ck-normal) var(--ck-ease);
}
.ck-flashcard:hover { box-shadow: var(--ck-shadow-lg); }
.ck-flashcard .ck-word { font-size: 40px; font-weight: 800; letter-spacing: -.02em; }
.ck-flashcard .ck-meaning { font-size: 18px; color: var(--ck-text-2); }

/* ---------- 13. 工具 ---------- */
.ck-text-2 { color: var(--ck-text-2); }
.ck-text-3 { color: var(--ck-text-3); }
.ck-divider { border-top: 1px solid var(--ck-border); }
.ck-token-swatch { height: 56px; border-radius: var(--ck-radius-sm); border: 1px solid var(--ck-border); }


/* ---------- 14. 单词卡学习页（沉浸布局 + 翻转卡）（原 03.html 页面样式） ---------- */
/* ===== 学习页专属：整页沉浸布局 ===== */
  body { display: flex; flex-direction: column; min-height: 100vh; }
.ck-study-main { flex: 1; display: flex; flex-direction: column; }
.ck-study-wrap {
    flex: 1; display: flex; align-items: center; justify-content: center;
    padding: 20px 0;
  }
.ck-study-layout {
    display: grid; grid-template-columns: 280px minmax(0, 640px);
    gap: 24px; width: 100%; max-width: 960px;
    align-items: center;   /* 左矮右高，两卡沿水平中线对齐 */
  }
/* 主卡区：高度只由卡片决定，翻页箭头用绝对定位挂到卡下方，
     否则箭头那行会抬高右列，把白卡顶离中线 */
  .ck-study-stage { position: relative; }
.ck-study-nav {
    position: absolute; top: calc(100% + 16px); left: 0; right: 0;
  }
@media (max-width: 767px) {
    .ck-study-layout { grid-template-columns: 1fr; }
    .ck-study-side { order: 2; }
    .ck-study-nav { position: static; margin-top: 16px; }
  }
/* 左侧栏：自然高度（左矮右高） */
  .ck-study-side .ck-card { display: flex; flex-direction: column; }
/* 单词卡：大卡 + 卡组叠层 */
  .ck-deck { position: relative; }
.ck-deck::before, .ck-deck::after {
    content: ""; position: absolute; inset: 0;
    background: var(--ck-surface); border: 1px solid var(--ck-border);
    border-radius: var(--ck-radius-lg); z-index: 0;
  }
.ck-deck::before { transform: rotate(-1.6deg) translateY(6px); opacity: .5; }
.ck-deck::after { transform: rotate(1.1deg) translateY(3px); opacity: .75; }
.ck-flip { perspective: 1600px; position: relative; z-index: 1; }
.ck-flip-inner { position: relative; min-height: 460px; transition: transform .45s var(--ck-ease); transform-style: preserve-3d; }
.ck-flip.flipped .ck-flip-inner { transform: rotateY(180deg); }
.ck-face { position: absolute; inset: 0; display: grid; place-items: center; backface-visibility: hidden; -webkit-backface-visibility: hidden; padding: 40px; }
.ck-face.back { transform: rotateY(180deg); }
.ck-word-xl { font-size: 52px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
.ck-word-lg { font-size: 30px; font-weight: 800; letter-spacing: -.01em; }
@media (max-width: 767px) { .ck-flip-inner { min-height: 340px; } .ck-word-xl { font-size: 38px; } }
.ck-card-actions { position: absolute; top: 16px; right: 16px; display: flex; gap: 2px; z-index: 2; }
.ck-icon-btn { border: none; background: none; color: var(--ck-text-3); padding: 6px 9px; border-radius: 8px; font-size: 18px; }
.ck-icon-btn:hover { color: var(--ck-primary); background: var(--ck-primary-soft); }
.ck-icon-btn.starred { color: var(--ck-warning); }
.ck-card-index { position: absolute; top: 18px; left: 20px; z-index: 2; font-size: 13px; color: var(--ck-text-3); font-weight: 600; }
.ck-nav-btn {
    width: 56px; height: 56px; border-radius: 50%;
    display: grid; place-items: center; font-size: 24px;
    background: var(--ck-surface); color: var(--ck-primary);
    border: 1px solid var(--ck-border-strong); box-shadow: var(--ck-shadow-sm);
    transition: all var(--ck-fast) var(--ck-ease);
  }
.ck-nav-btn:hover { background: var(--ck-primary); color: var(--ck-on-primary); border-color: var(--ck-primary); transform: translateY(-2px); box-shadow: var(--ck-shadow); }
.ck-nav-btn:disabled { opacity: .35; pointer-events: none; }
kbd {
    background: var(--ck-surface-2); border: 1px solid var(--ck-border-strong);
    border-bottom-width: 2px; border-radius: 6px; padding: 1px 7px;
    font-size: 12px; color: var(--ck-text-2); font-family: inherit;
  }


/* ---------- 15. 设置页（头像 / 设置行）（原 13.html 页面样式） ---------- */
.ck-avatar {
    width: 64px; height: 64px; border-radius: 50%;
    background: var(--ck-primary-soft); color: var(--ck-primary);
    display: grid; place-items: center; font-size: 26px; font-weight: 800;
  }
.ck-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
/* 头像裁切舞台（设置页 Modal）：拖动/缩放预览，画布始终铺满方形裁切框 */
.ck-avatar-stage {
    width: 256px; max-width: 100%; aspect-ratio: 1 / 1; margin: 0 auto;
    overflow: hidden; position: relative; touch-action: none;
    cursor: grab; border-radius: 8px; background: var(--ck-surface-2);
  }
.ck-avatar-stage:active { cursor: grabbing; }
.ck-avatar-stage canvas { display: block; width: 100%; height: 100%; }
.ck-set-group + .ck-set-group { border-top: 1px solid var(--ck-border); }
.ck-set-row2 { display: flex; align-items: center; gap: 16px; padding: 16px 0; }
.ck-set-row2 .grow { flex: 1; }


/* ---------- 16. 单词表（表格 / 遮罩 / 分段控件 / 图标按钮）（原 02.html 页面样式） ---------- */
.ck-mask { filter: blur(6px); cursor: pointer; transition: filter .2s var(--ck-ease); border-radius: 4px; }
.ck-mask:hover { filter: blur(3px); }
.ck-mask.revealed { filter: none; cursor: text; }
.ck-word-table { width: 100%; }
.ck-word-table td, .ck-word-table th { padding: 10px 14px; border-bottom: 1px solid var(--ck-border); }
.ck-word-table tbody tr:hover { background: var(--ck-surface-2); }
.ck-word-table .ck-en { font-weight: 700; }
.ck-icon-btn { border: none; background: none; color: var(--ck-text-3); padding: 4px 8px; border-radius: 6px; }
.ck-seg .btn { border-color: var(--ck-border-strong); color: var(--ck-text-2); background: var(--ck-surface); }
.ck-seg .btn.active { background: var(--ck-primary-soft); color: var(--ck-primary); border-color: var(--ck-primary); font-weight: 700; }


/* ---------- 16b. 错词本表格（复用 16 节）（原 11.html 页面样式） ---------- */


/* ---------- 17. 测试页（选项 / 计时器）（原 04.html 页面样式） ---------- */
.ck-option {
    display: flex; align-items: center; gap: 12px;
    width: 100%; text-align: left;
    padding: 14px 18px; margin-bottom: 10px;
    background: var(--ck-surface); color: var(--ck-text);
    border: 1px solid var(--ck-border-strong); border-radius: var(--ck-radius);
    font-size: 15px; transition: all var(--ck-fast) var(--ck-ease); cursor: pointer;
  }
.ck-option:hover { border-color: var(--ck-primary); background: var(--ck-primary-soft); }
.ck-option .ck-opt-key {
    width: 28px; height: 28px; flex: none; display: grid; place-items: center;
    border-radius: 8px; background: var(--ck-surface-2); color: var(--ck-text-2);
    font-weight: 700; font-size: 13px;
  }
.ck-option.picked { border-color: var(--ck-primary); background: var(--ck-primary-soft); }
.ck-option.picked .ck-opt-key { background: var(--ck-primary); color: var(--ck-on-primary); }
.ck-timer { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--ck-text-2); }


/* ---------- 18. 词历（月历网格）（原 08.html 页面样式） ---------- */
.ck-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.ck-cal-head { text-align: center; font-size: 12px; color: var(--ck-text-3); padding: 6px 0; font-weight: 600; }
.ck-day {
    min-height: 74px; padding: 6px 8px;
    border: 1px solid var(--ck-border); border-radius: var(--ck-radius-sm);
    background: var(--ck-surface); font-size: 13px;
    display: flex; flex-direction: column; gap: 2px;
    transition: all var(--ck-fast) var(--ck-ease);
  }
.ck-day:hover { border-color: var(--ck-border-strong); box-shadow: var(--ck-shadow-sm); }
.ck-day.dim { opacity: .35; background: transparent; }
.ck-day .d-num { font-weight: 700; color: var(--ck-text-2); }
.ck-day .d-mark { font-size: 11px; color: var(--ck-text-2); line-height: 1.4; }
.ck-day.has-study { background: var(--ck-primary-soft); border-color: transparent; }
.ck-day.has-study .d-num { color: var(--ck-primary); }
.ck-day.today { outline: 2px solid var(--ck-primary); outline-offset: -2px; }
.ck-day.today .d-num { color: var(--ck-primary); }
@media (max-width: 576px) { .ck-day { min-height: 56px; padding: 4px 6px; } .ck-day .d-mark { font-size: 10px; } }


/* ---------- 19. 词集流（chip / 危险名）（原 09.html 页面样式） ---------- */
.ck-chip {
    padding: 4px 14px; border-radius: 999px; font-size: 13px; font-weight: 600;
    background: var(--ck-surface); color: var(--ck-text-2);
    border: 1px solid var(--ck-border-strong); cursor: pointer;
    transition: all var(--ck-fast) var(--ck-ease); user-select: none;
  }
.ck-chip:hover { border-color: var(--ck-primary); color: var(--ck-primary); }
.ck-chip.on { background: var(--ck-primary); border-color: var(--ck-primary); color: var(--ck-on-primary); }
.ck-name-danger { color: var(--ck-danger); }
.ck-name-danger:hover { color: var(--ck-danger); }


/* ---------- 20. 钱包（面额 / 支付 / 套餐 / 沙箱）（原 12.html 页面样式） ---------- */
.ck-amount {
    padding: 14px 0; text-align: center; cursor: pointer;
    border: 1px solid var(--ck-border-strong); border-radius: var(--ck-radius);
    background: var(--ck-surface); transition: all var(--ck-fast) var(--ck-ease); user-select: none;
  }
.ck-amount:hover { border-color: var(--ck-primary); }
.ck-amount.on { border-color: var(--ck-primary); background: var(--ck-primary-soft); }
.ck-amount .a-num { font-size: 20px; font-weight: 800; color: var(--ck-primary); }
.ck-amount .a-label { font-size: 12px; color: var(--ck-text-3); }
.ck-pay {
    display: flex; align-items: center; gap: 10px; padding: 12px 16px; cursor: pointer;
    border: 1px solid var(--ck-border-strong); border-radius: var(--ck-radius);
    background: var(--ck-surface); transition: all var(--ck-fast) var(--ck-ease); user-select: none;
  }
.ck-pay.on { border-color: var(--ck-primary); background: var(--ck-primary-soft); }
.ck-plan {
    border: 1px solid var(--ck-border-strong); border-radius: var(--ck-radius-lg);
    padding: 20px; background: var(--ck-surface); position: relative; height: 100%;
  }
.ck-plan.rec { border-color: var(--ck-primary); box-shadow: var(--ck-shadow); }
.ck-plan .p-price { font-size: 30px; font-weight: 800; color: var(--ck-primary); }
.ck-flow-pos { color: var(--ck-success); font-weight: 600; }
.ck-flow-neg { color: var(--ck-danger); font-weight: 600; }
/* 沙箱收银台：仅复用既有令牌，不新增 --ck-* */
  .ck-cashier-amount { font-size: 30px; font-weight: 800; color: var(--ck-warning); }
@keyframes ck-pop { 0% { transform: scale(.9); opacity: .4; } 60% { transform: scale(1.06); } 100% { transform: scale(1); opacity: 1; } }
.ck-pop { animation: ck-pop var(--ck-normal) var(--ck-ease); }


/* ---------- 21. 数据页（横向条形图）（原 16.html 页面样式） ---------- */
.ck-bar-row { display: flex; align-items: center; gap: 10px; height: 30px; }
.ck-bar-label { width: 42px; font-size: 13px; color: var(--ck-text-2); }
.ck-bar-track { flex: 1; background: var(--ck-surface-2); border-radius: 6px; height: 14px; overflow: hidden; }
.ck-bar-fill { height: 100%; background: var(--ck-primary); border-radius: 6px; }
.ck-bar-val { width: 40px; text-align: right; font-size: 13px; color: var(--ck-text-2); }


/* ---------- 22. 落地页（hero / 特性卡 / 演示卡）（原 17.html 页面样式） ---------- */
.ck-hero {
    padding: 60px 0 40px;
    text-align: center;
  }
.ck-feature-card {
    padding: 24px;
    border: 1px solid var(--ck-border);
    border-radius: var(--ck-radius-lg);
    background: var(--ck-surface);
    height: 100%;
    transition: all var(--ck-fast) var(--ck-ease);
  }
.ck-feature-card:hover {
    border-color: var(--ck-border-strong);
    box-shadow: var(--ck-shadow);
    transform: translateY(-2px);
  }
.ck-feature-icon {
    font-size: 32px;
    margin-bottom: 12px;
  }
.ck-demo-card {
    border: 1px solid var(--ck-border);
    border-radius: var(--ck-radius-lg);
    background: var(--ck-surface);
    box-shadow: var(--ck-shadow-lg);
    overflow: hidden;
  }


/* ---------- 23. 杂项（词币数值）（原 10.html 页面样式） ---------- */
.ck-coin { color: var(--ck-warning); font-weight: 700; }

/* ---------- 24. 语义工具类（替代模板内联样式） ---------- */
.fw-semibold { font-weight: 600; }
.ck-field-sm { max-width: 220px; }
.ck-card--success { border-color: var(--ck-success); }
.ck-card--danger { border-color: var(--ck-danger); }
.ck-card--success-soft { border-color: var(--ck-success); background: var(--ck-success-soft); }
.ck-card--danger-soft { border-color: var(--ck-danger); background: var(--ck-danger-soft); }
.ck-footer-link { color: var(--ck-text-2); text-decoration: none; }
.ck-footer-link:hover { color: var(--ck-primary); }

/* ---------- 26. 页面定位条（面包屑式页头，讨论记录/72） ---------- */
/* 取代原「24px/700 主色大标题」行：标题降为定位信息（17px/600），
   把注意力让给内容；同时补上全站此前缺失的 h1 语义与「我在哪」链路。 */
.ck-crumbs {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  margin-bottom: 12px; color: var(--ck-text-3);
}
.ck-crumbs a { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; color: var(--ck-text-2); text-decoration: none; }
.ck-crumbs a:hover { color: var(--ck-primary); }
.ck-crumbs .ck-crumbs-sep { font-size: 14px; opacity: .5; }
.ck-crumbs .ck-crumbs-current { font-size: 17px; font-weight: 600; line-height: 1.4; color: var(--ck-text); margin: 0; }
.ck-crumbs .ck-crumbs-home .ck-i { font-size: 15px; }

/* ---------- 25. 页脚与粘性导航 ---------- */
.ck-footer { max-width: var(--ck-content-w); }
.ck-navbar.is-scrolled { box-shadow: var(--ck-shadow-sm); }