/* ==========================================================================
   CET-4 刷题站 —— 设计系统
   --------------------------------------------------------------------------
   访客模式：Operate（用户是来完成任务的：刷题、复习、看进度）
   色彩策略：Restrained —— 颜色只承担动作、选中、状态、导航职责，不做装饰
   排版策略：单一字族 + 固定 rem 阶梯（产品界面不随视口缩放正文字号）
   主色选择：青蓝 (hue ≈ 200) —— 取自"知识/学习"的语义，刻意避开
             AI 界面惯用的紫蓝渐变（impeccable 明确列为反模式）
   明暗：本设计以深色为基底（长时间刷题场景，夜间宿舍使用居多）
   ========================================================================== */

/* ---------- 设计令牌 ---------- */
:root {
  /* 表面层次：深蓝灰基调，冷暖克制，用明度而非色相区分层级 */
  --surface-base:      oklch(0.19 0.012 250);   /* 页面底色 */
  --surface-raised:    oklch(0.235 0.014 250);  /* 卡片、面板 */
  --surface-overlay:   oklch(0.275 0.015 250);  /* 浮层、下拉、悬浮态 */
  --surface-sunken:    oklch(0.155 0.012 250);  /* 输入框、内嵌区 */

  /* 文字：全部带轻微蓝调，避免纯白纯灰的廉价感 */
  --text-primary:      oklch(0.955 0.008 250);
  --text-secondary:    oklch(0.76 0.014 250);
  --text-tertiary:     oklch(0.60 0.016 250);
  --text-inverse:      oklch(0.18 0.02 250);

  /* 主色：青蓝。用于主操作、当前选中、链接 */
  --accent:            oklch(0.72 0.135 205);
  --accent-hover:      oklch(0.78 0.14 205);
  --accent-active:     oklch(0.66 0.13 205);
  --accent-subtle:     oklch(0.32 0.05 205);
  --accent-on:         oklch(0.17 0.03 205);

  /* 语义色：结果反馈与状态 */
  --success:           oklch(0.74 0.15 155);
  --success-subtle:    oklch(0.30 0.055 155);
  --success-on:        oklch(0.17 0.03 155);

  --danger:            oklch(0.70 0.17 22);
  --danger-subtle:     oklch(0.31 0.075 22);
  --danger-on:         oklch(0.17 0.04 22);

  --warning:           oklch(0.79 0.14 75);
  --warning-subtle:    oklch(0.32 0.055 75);

  /* 描边：深色界面上用低对比描边代替阴影做分组 */
  --border:            oklch(0.32 0.014 250);
  --border-strong:     oklch(0.42 0.018 250);
  --border-accent:     oklch(0.50 0.10 205);

  /* 焦点环 */
  --focus-ring:        oklch(0.78 0.14 205 / 0.55);

  /* 排版阶梯：产品界面的固定比例（1.14 – 1.25） */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
               "Hiragino Sans GB", "Microsoft YaHei", "Source Han Sans SC",
               "Noto Sans CJK SC", sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", "JetBrains Mono",
               Consolas, "Liberation Mono", monospace;

  --fs-xs:   0.75rem;    /* 12px 辅助标记 */
  --fs-sm:   0.8125rem;  /* 13px 元信息、标签 */
  --fs-base: 0.9375rem;  /* 15px 正文、控件 */
  --fs-md:   1.0625rem;  /* 17px 次级标题 */
  --fs-lg:   1.3125rem;  /* 21px 区块标题 */
  --fs-xl:   1.625rem;   /* 26px 页面标题 */
  --fs-2xl:  2.125rem;   /* 34px 关键数值 */
  --fs-3xl:  2.75rem;    /* 44px 题目主词 */

  --lh-tight: 1.25;
  --lh-snug:  1.45;
  --lh-base:  1.65;
  --lh-relaxed: 1.75;

  /* 间距：4px 基准 */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.25rem;
  --sp-6: 1.5rem;
  --sp-7: 1.75rem;
  --sp-8: 2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;

  --radius-sm: 6px;
  --radius:    10px;
  --radius-lg: 14px;

  /* 过渡：产品界面 150–250ms，只传达状态变化 */
  --t-fast: 130ms cubic-bezier(0.4, 0, 0.2, 1);
  --t-base: 190ms cubic-bezier(0.4, 0, 0.2, 1);

  --maxw: 1180px;
}

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

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

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

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--text-primary);
  background: var(--surface-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* 深色界面下略增字重以补偿视觉重量 */
  font-weight: 400;
}

h1, h2, h3, h4 {
  margin: 0;
  line-height: var(--lh-tight);
  font-weight: 600;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

p { margin: 0; }

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

a {
  color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

/* 数字统一用等宽字形，让统计数值对齐 */
.tnum { font-variant-numeric: tabular-nums; }

/* ---------- 浏览器默认部件主题化 ----------
   impeccable 特别强调这是"页面是被构建而不是被拼装"的最廉价信号。
   选中态、光标、滚动条、焦点环都从调色板取色。 */
::selection {
  background: var(--accent-subtle);
  color: var(--text-primary);
}

:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* 滚动条 */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: 10px;
  border: 2px solid transparent;
  background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background-clip: content-box; background-color: var(--text-tertiary); }

input, textarea { caret-color: var(--accent); }

/* ---------- 布局骨架 ---------- */
.app {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--sp-5);
}

@media (max-width: 640px) {
  .container { padding-inline: var(--sp-4); }
}

/* ---------- 顶栏 ---------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in oklch, var(--surface-base) 88%, transparent);
  backdrop-filter: blur(12px) saturate(140%);
  border-bottom: 1px solid var(--border);
}

.topbar__inner {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  height: 58px;
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-weight: 600;
  font-size: var(--fs-md);
  letter-spacing: -0.02em;
  color: var(--text-primary);
  text-decoration: none;
  flex-shrink: 0;
}

/* 品牌标记：绘制的 SVG（不用 emoji 充当图标，impeccable 明令禁止） */
.brand__mark {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  color: var(--accent);
}

.brand__sub {
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
  font-weight: 400;
  letter-spacing: 0;
  padding-left: var(--sp-3);
  margin-left: var(--sp-1);
  border-left: 1px solid var(--border);
}

.nav {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  margin-left: auto;
}

.nav__link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text-secondary);
  text-decoration: none;
  border: none;
  background: none;
  cursor: pointer;
  transition: color var(--t-fast), background var(--t-fast);
  white-space: nowrap;
}

.nav__link:hover { color: var(--text-primary); background: var(--surface-raised); }

.nav__link[aria-current="page"] {
  color: var(--text-primary);
  background: var(--surface-raised);
}

.nav__link svg { width: 17px; height: 17px; flex-shrink: 0; }

.nav__user {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding-left: var(--sp-4);
  margin-left: var(--sp-2);
  border-left: 1px solid var(--border);
}

.nav__nickname {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  max-width: 8em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 移动端导航收起为底部标签栏 */
@media (max-width: 720px) {
  .nav { display: none; }
  .nav__user { border-left: none; margin-left: auto; padding-left: 0; }
  .brand__sub { display: none; }
}

/* ---------- 按钮 ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  font-size: var(--fs-base);
  font-weight: 550;
  line-height: 1.2;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
  background: var(--surface-raised);
  color: var(--text-primary);
  border-color: var(--border);
}

.btn:hover:not(:disabled) { background: var(--surface-overlay); border-color: var(--border-strong); }

.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.btn--primary {
  background: var(--accent);
  color: var(--accent-on);
  border-color: transparent;
  font-weight: 600;
}
.btn--primary:hover:not(:disabled) { background: var(--accent-hover); border-color: transparent; }
.btn--primary:active:not(:disabled) { background: var(--accent-active); }

.btn--ghost {
  background: transparent;
  border-color: transparent;
  color: var(--text-secondary);
}
.btn--ghost:hover:not(:disabled) { background: var(--surface-raised); color: var(--text-primary); }

.btn--danger {
  background: transparent;
  border-color: var(--border);
  color: var(--danger);
}
.btn--danger:hover:not(:disabled) { background: var(--danger-subtle); border-color: var(--danger); }

.btn--sm { padding: var(--sp-2) var(--sp-3); font-size: var(--fs-sm); }
.btn--lg { padding: var(--sp-4) var(--sp-6); font-size: var(--fs-md); }
.btn--block { width: 100%; }

/* 加载态：按钮内嵌微型指示器，不打断布局 */
.btn[aria-busy="true"] { position: relative; color: transparent !important; }
.btn[aria-busy="true"]::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 15px;
  height: 15px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 620ms linear infinite;
  color: var(--accent-on);
}
.btn:not(.btn--primary)[aria-busy="true"]::after { color: var(--text-primary); }

@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- 表单 ---------- */
.field { display: flex; flex-direction: column; gap: var(--sp-2); }

.label {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text-secondary);
}

.input {
  width: 100%;
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface-sunken);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: var(--fs-base);
  transition: border-color var(--t-fast), background var(--t-fast);
}

.input::placeholder { color: var(--text-tertiary); }

.input:hover:not(:disabled) { border-color: var(--border-strong); }

.input:focus {
  outline: none;
  border-color: var(--border-accent);
  background: var(--surface-raised);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.input:disabled { opacity: 0.5; cursor: not-allowed; }

.input[aria-invalid="true"] { border-color: var(--danger); }

.field__hint {
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
}

.field__error {
  font-size: var(--fs-xs);
  color: var(--danger);
  display: flex;
  align-items: center;
  gap: var(--sp-1);
}

.field__error:empty { display: none; }

/* ---------- 卡片 ---------- */
.card {
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
}

.card--flush { padding: 0; }

.card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-5) var(--sp-6);
  border-bottom: 1px solid var(--border);
}

.card__title {
  font-size: var(--fs-md);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.card__body { padding: var(--sp-6); }

/* ---------- 徽标 / 标签 ---------- */
.tag {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 2px var(--sp-2);
  border-radius: var(--radius-sm);
  font-size: var(--fs-xs);
  font-weight: 500;
  background: var(--surface-overlay);
  color: var(--text-secondary);
  border: 1px solid var(--border);
  white-space: nowrap;
}

.tag--pos { color: var(--accent); border-color: var(--accent-subtle); background: var(--accent-subtle); }
.tag--success { color: var(--success); border-color: var(--success-subtle); background: var(--success-subtle); }
.tag--danger { color: var(--danger); border-color: var(--danger-subtle); background: var(--danger-subtle); }
.tag--warning { color: var(--warning); border-color: var(--warning-subtle); background: var(--warning-subtle); }

/* 词性标记：名词/动词等，用等宽字体体现"词法"属性 */
.pos {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--surface-sunken);
  border: 1px solid var(--border);
  color: var(--text-tertiary);
  letter-spacing: 0.02em;
}

/* ---------- 空状态 ---------- */
.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--sp-12) var(--sp-6);
  gap: var(--sp-3);
}

.empty__icon {
  width: 42px;
  height: 42px;
  color: var(--text-tertiary);
  opacity: 0.6;
  margin-bottom: var(--sp-1);
}

.empty__title {
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--text-primary);
}

.empty__text {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  max-width: 34ch;
  line-height: var(--lh-snug);
}

/* ---------- 骨架屏 ---------- */
.skeleton {
  background: linear-gradient(
    90deg,
    var(--surface-raised) 0%,
    var(--surface-overlay) 50%,
    var(--surface-raised) 100%
  );
  background-size: 200% 100%;
  animation: shimmer 1.3s ease-in-out infinite;
  border-radius: var(--radius-sm);
}

@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ---------- 提示条 ---------- */
.alert {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
  border: 1px solid var(--border);
  background: var(--surface-raised);
  color: var(--text-secondary);
}

.alert--error { border-color: var(--danger-subtle); background: var(--danger-subtle); color: var(--text-primary); }
.alert--success { border-color: var(--success-subtle); background: var(--success-subtle); color: var(--text-primary); }
.alert--info { border-color: var(--accent-subtle); background: var(--accent-subtle); color: var(--text-primary); }

.alert svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; }
.alert--error svg { color: var(--danger); }
.alert--success svg { color: var(--success); }
.alert--info svg { color: var(--accent); }

/* ---------- 分隔 ---------- */
.hr {
  height: 1px;
  background: var(--border);
  border: none;
  margin: 0;
}

/* ---------- 工具类 ---------- */
.stack { display: flex; flex-direction: column; }
.stack-1 { gap: var(--sp-1); }
.stack-2 { gap: var(--sp-2); }
.stack-3 { gap: var(--sp-3); }
.stack-4 { gap: var(--sp-4); }
.stack-5 { gap: var(--sp-5); }
.stack-6 { gap: var(--sp-6); }
.stack-8 { gap: var(--sp-8); }

.row { display: flex; align-items: center; }
.row-between { justify-content: space-between; }
.row-wrap { flex-wrap: wrap; }
.gap-1 { gap: var(--sp-1); }
.gap-2 { gap: var(--sp-2); }
.gap-3 { gap: var(--sp-3); }
.gap-4 { gap: var(--sp-4); }
.gap-6 { gap: var(--sp-6); }

.grid { display: grid; }
.gap-grid { gap: var(--sp-4); }

.muted { color: var(--text-secondary); }
.dim { color: var(--text-tertiary); }
.center { text-align: center; }
.mono { font-family: var(--font-mono); }
.hidden { display: none !important; }
.grow { flex: 1; }

.text-sm { font-size: var(--fs-sm); }
.text-xs { font-size: var(--fs-xs); }
.text-lg { font-size: var(--fs-lg); }

.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;
}

.mt-2 { margin-top: var(--sp-2); }
.mt-4 { margin-top: var(--sp-4); }
.mt-6 { margin-top: var(--sp-6); }
.mt-8 { margin-top: var(--sp-8); }

/* 骨架屏：卡片占位与列表容器 */
.skeleton--card { height: 132px; border-radius: var(--radius-lg); }
.skeleton-list { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }