/* ============ 学习台 hero：深色舞台 + CSS 线框/轨道装饰 ============ */
.hero {
  position: relative; overflow: hidden;
  border-radius: 8px;
  padding: clamp(1.5rem, 4vw, 3rem);
}
.hero-grid-deco {
  position: absolute; inset: 0; pointer-events: none;
}
/* 轨道圆环：纯 CSS 装饰 */
.orbit {
  position: absolute; border: 1px solid rgb(124 196 255 / 0.22); border-radius: 50%;
}
.orbit-1 { width: 340px; height: 340px; right: -90px; top: -110px; }
.orbit-2 { width: 220px; height: 220px; right: -30px; top: -50px; border-style: dashed; }
.orbit-3 { width: 120px; height: 120px; right: 20px; top: 0; }
.orbit-dot {
  position: absolute; width: 8px; height: 8px; border-radius: 50%;
  background: var(--color-ink-accent); right: 60px; top: 130px;
  box-shadow: 0 0 18px 2px rgb(124 196 255 / 0.55);
}
/* 线框立方体装饰（左下角） */
.wire-cube {
  position: absolute; left: -40px; bottom: -60px;
  width: 200px; height: 200px;
  border: 1px solid rgb(124 196 255 / 0.14);
  transform: rotate(24deg) skew(-8deg);
  pointer-events: none;
}
.wire-cube::after {
  content: ""; position: absolute; inset: 26px;
  border: 1px dashed rgb(124 196 255 / 0.18);
}

.hero-kicker { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.2em; color: var(--color-ink-accent); }
.hero h1 {
  margin-top: 0.75rem;
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1.2rem + 2.6vw, 3rem);
  line-height: 1.15; letter-spacing: -0.02em;
  color: var(--color-ink-strong);
  max-width: 22em;
}
.hero-sub { margin-top: 0.875rem; max-width: 34em; font-size: 15px; color: var(--color-ink-muted); }
.hero-actions { display: flex; gap: 0.625rem; margin-top: 1.5rem; flex-wrap: wrap; }
.hero-stats { display: flex; gap: 1.5rem; margin-top: 1.75rem; flex-wrap: wrap; }
.hero-stat b { display: block; font-family: var(--font-display); font-size: 1.75rem; font-weight: 700; color: var(--color-ink-strong); line-height: 1.1; }
.hero-stat span { font-size: 12px; color: var(--color-ink-muted); }

/* 统计卡 */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 0.75rem; margin-top: 1.25rem; }
.stat-card { padding: 0.875rem 1rem; }
.stat-card b { display: block; font-family: var(--font-display); font-size: 1.5rem; line-height: 1.15; }
.stat-card span { font-size: 12px; color: var(--color-muted); }

/* 分类进度块 */
.cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 0.75rem; margin-top: 0.75rem; }
.cat-card { padding: 1rem; display: flex; flex-direction: column; gap: 0.5rem; }
.cat-card h3 { font-size: 15px; }
.cat-meta { display: flex; justify-content: space-between; font-size: 12px; color: var(--color-muted); }
.progress { height: 5px; border-radius: 3px; background: var(--color-surface-2); overflow: hidden; }
.progress > i { display: block; height: 100%; border-radius: 3px; background: var(--color-accent); transition: width 0.4s; }

/* 分节间距 */
.sec { margin-top: 2rem; }
.sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 0.75rem; flex-wrap: wrap; }
.sec-head h2 { font-size: 1.15rem; }

/* ============ 题库 ============ */
.bank-toolbar { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 1rem; }
.bank-toolbar .row { display: flex; gap: 0.625rem; flex-wrap: wrap; align-items: center; }
.q-list { display: flex; flex-direction: column; gap: 0.625rem; }
/* 题卡：grid 三列（题号/标题区/标记按钮），标记选项占整行；空时不占位防止挤窄标题 */
.q-card { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr) auto; gap: 0.375rem 0.75rem; align-items: start; padding: 0.875rem 1rem; text-align: left; width: 100%; cursor: pointer; border: 1px solid var(--color-line); border-radius: var(--radius); background: var(--color-surface); }
.q-card:hover { border-color: rgb(29 78 216 / 0.4); }
.q-card .q-n {
  width: 2.5rem; height: 2.5rem; display: grid; place-items: center;
  border-radius: 6px; background: var(--color-surface-2); text-decoration: none;
  font-family: var(--font-display); font-weight: 700; font-size: 14px; color: var(--color-accent);
}
.q-card .q-main { min-width: 0; }
.q-card .q-title { display: block; font-size: 15px; font-weight: 600; line-height: 1.45; word-break: normal; overflow-wrap: anywhere; }
.q-card .q-meta { display: flex; gap: 0.5rem; margin-top: 0.375rem; flex-wrap: wrap; align-items: center; }
/* 题卡标题链接与独立标记控件（按钮不嵌套在 a 内） */
.q-link { color: inherit; text-decoration: none; min-width: 0; }
.q-link:hover .q-title { color: var(--color-accent); }
/* 标记按钮弱化：小而轻的次要控件，状态徽标保持清晰 */
.q-card .mark-btn { align-self: start; min-height: 44px; font-size: 12px; padding: 0 0.625rem; border-color: var(--color-line); color: var(--color-muted); }
.q-card .mark-btn:hover { color: var(--color-accent); }
.mark-box { grid-column: 1 / -1; display: flex; gap: 0.375rem; flex-wrap: wrap; padding-top: 0.375rem; }
.mark-box:empty { display: none; }
.mark-box .tag { min-height: 44px; padding: 0.25rem 0.75rem; }
.mark-box .tag[aria-pressed="true"] { outline: 2px solid currentColor; outline-offset: 1px; font-weight: 700; }

/* 掌握状态标签：颜色 + 符号 + 不同线型，非仅颜色区分 */
.m-badge {
  display: inline-flex; align-items: center; gap: 0.3em;
  padding: 0.1rem 0.55rem; border-radius: 999px;
  font-size: 12px; font-weight: 600; line-height: 1.6;
  border: 1px solid var(--color-line); color: var(--color-muted); background: var(--color-surface);
}
.m-badge::before { font-size: 12px; line-height: 1; }
.m-new { border-style: dashed; color: var(--color-muted); }
.m-new::before { content: "○"; }
.m-blocked { border-color: rgb(179 38 30 / 0.5); border-left-width: 3px; color: var(--color-bad); background: rgb(179 38 30 / 0.06); }
.m-blocked::before { content: "▲"; }
.m-partial { border-style: dotted; border-width: 2px; border-color: rgb(166 106 0 / 0.55); color: var(--color-warn); background: rgb(166 106 0 / 0.06); }
.m-partial::before { content: "◐"; }
.m-ready { border-color: rgb(30 123 79 / 0.5); color: var(--color-ok); background: rgb(30 123 79 / 0.07); }
.m-ready::before { content: "●"; }
/* 题库/详情状态按钮沿用同色系 */
.seg button.m-blocked[aria-pressed="true"] { border-color: var(--color-bad); color: var(--color-bad); }
.seg button.m-partial[aria-pressed="true"] { border-color: var(--color-warn); color: var(--color-warn); }
.seg button.m-ready[aria-pressed="true"] { border-color: var(--color-ok); color: var(--color-ok); }

/* 首页状态统计卡链接 */
.stat-link { color: inherit; text-decoration: none; }
.stat-link:hover { border-color: rgb(29 78 216 / 0.45); }
.stat-link:hover b { color: var(--color-accent); }

/* 详情 */
.detail-head { display: flex; align-items: flex-start; gap: 0.75rem; flex-wrap: wrap; }
.detail-head h2 { flex: 1; min-width: 200px; font-size: 1.3rem; line-height: 1.35; }
.detail-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.875rem; }
.fav-btn[aria-pressed="true"] { border-color: rgb(166 106 0 / 0.5); color: var(--color-warn); background: rgb(166 106 0 / 0.08); }
.fav-btn[aria-pressed="true"] .ic { fill: currentColor; }

details.answer { margin-top: 1rem; }
details.answer summary {
  min-height: 44px; display: flex; align-items: center; gap: 0.5rem;
  cursor: pointer; font-weight: 600; font-size: 15px; color: var(--color-accent);
}
.md-body { font-size: 15px; line-height: 1.8; color: var(--color-soft); }
.md-body p + p, .md-body p + ul, .md-body p + ol, .md-body ul + p, .md-body ol + p { margin-top: 0.8em; }
.md-body ul { list-style: disc; padding-left: 1.4em; }
.md-body ol { list-style: decimal; padding-left: 1.4em; }
.md-body li + li { margin-top: 0.35em; }
.md-body strong { color: var(--color-text); font-weight: 600; }
.md-body code {
  padding: 0.1em 0.35em; border-radius: 4px;
  background: var(--color-surface-2); border: 1px solid var(--color-line);
  font-family: var(--font-mono); font-size: 0.88em; color: var(--color-accent);
}
.src-line { margin-top: 1rem; font-size: 12px; color: var(--color-muted); font-family: var(--font-mono); }

/* 笔记区 */
.notes-grid { display: grid; gap: 0.75rem; margin-top: 1rem; }
.notes-grid label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 0.375rem; }
.notes-grid .hint { font-size: 12px; color: var(--color-muted); font-weight: 400; }

/* 标题中的行内 code（`var` 等片段） */
:where(.q-title, .mem-q, .itv-q, .core-item, .detail-head, .review-item) code {
  padding: 0 0.28em; border-radius: 3px;
  background: var(--color-surface-2); border: 1px solid var(--color-line);
  font-family: var(--font-mono); font-size: 0.86em; color: var(--color-accent);
}
.on-ink .itv-q code { background: rgb(255 255 255 / 0.1); border-color: var(--color-ink-line); color: var(--color-ink-accent); }

/* ============ 记忆模式 ============ */
.mem-setup { display: flex; flex-direction: column; gap: 1rem; }
.field-row { display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: center; }
.field-row > label, .field-row > span { font-size: 13px; color: var(--color-muted); }

.mem-card { padding: 1.25rem; }
.mem-q { font-size: 1.15rem; font-weight: 600; line-height: 1.5; }
.mem-progress { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--color-muted); margin-bottom: 0.75rem; }
.rate-row { display: flex; gap: 0.625rem; margin-top: 1rem; flex-wrap: wrap; }
.rate-btn { flex: 1; min-width: 96px; flex-direction: column; gap: 2px; padding: 0.5rem 0.75rem; min-height: 56px; }
.rate-btn small { font-size: 12px; font-weight: 400; opacity: 0.75; }
.rate-bad { border-color: rgb(179 38 30 / 0.45); color: var(--color-bad); }
.rate-mid { border-color: rgb(166 106 0 / 0.5); color: var(--color-warn); }
.rate-ok { border-color: rgb(30 123 79 / 0.45); color: var(--color-ok); }

.due-line { font-size: 13px; color: var(--color-muted); margin-top: 0.5rem; }

/* ============ 模拟面试 ============ */
.itv-setup { display: flex; flex-direction: column; gap: 1rem; }
.itv-stage { padding: 1.25rem; }
.itv-topbar { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.timer { font-family: var(--font-display); font-size: 2rem; font-weight: 700; color: var(--color-ink-strong); font-variant-numeric: tabular-nums; }
.timer.warn { color: #ffb4ab; }
.itv-q { margin-top: 1rem; font-size: 1.2rem; font-weight: 600; line-height: 1.5; color: var(--color-ink-strong); }
.itv-tip { margin-top: 0.625rem; font-size: 12px; color: var(--color-ink-muted); }
.itv-answer { margin-top: 1rem; background: rgb(255 255 255 / 0.06); border-color: var(--color-ink-control-line); color: var(--color-ink-text); }
.itv-answer::placeholder { color: var(--color-ink-muted); }

.review-item { padding: 1rem; }
.review-item + .review-item { border-top: 1px solid var(--color-line); }
.review-item h3 { font-size: 15px; }
.review-answer { margin-top: 0.5rem; padding: 0.625rem 0.875rem; border-radius: var(--radius); background: var(--color-surface-2); font-size: 14px; color: var(--color-soft); white-space: pre-wrap; word-break: break-word; }
.review-ref { margin-top: 0.5rem; font-size: 13px; }

.empty { padding: 2.5rem 1rem; text-align: center; color: var(--color-muted); font-size: 14px; }
.empty b { display: block; font-size: 16px; color: var(--color-soft); margin-bottom: 0.375rem; }

/* 核心 15 提纲 */
.core-list { display: flex; flex-direction: column; gap: 0.5rem; }
.core-item { display: flex; gap: 0.75rem; padding: 0.75rem 1rem; align-items: baseline; }
.core-item .core-n { flex: none; font-family: var(--font-display); font-weight: 700; color: var(--color-accent); font-size: 14px; }
.core-item b { display: block; font-size: 15px; }
.core-item p { font-size: 13px; color: var(--color-soft); margin-top: 2px; }

/* 关键词 chips */
.kw-row { display: flex; gap: 0.375rem; flex-wrap: wrap; margin-top: 0.5rem; }
.kw-row .tag { min-height: 40px; padding: 0.1rem 0.75rem; }

footer.app-foot { margin-top: 3rem; padding-top: 1rem; border-top: 1px solid var(--color-line); font-size: 12px; color: var(--color-muted); line-height: 1.8; }

/* ============ 移动端（≤719px）排版优化 ============ */
@media (max-width: 719px) {
  /* 学习台 hero：压高度，主按钮通栏，次要入口 2 列，统计 2x2；装饰不压文字 */
  .hero { padding: 1.25rem 1rem; }
  .hero h1 { margin-top: 0.5rem; font-size: clamp(1.6rem, 8vw, 2rem); }
  .hero-sub { margin-top: 0.625rem; font-size: 14px; }
  .hero-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin-top: 1rem; }
  .hero-actions .btn { width: 100%; padding: 0 0.5rem; font-size: 14px; }
  .hero-actions .btn-primary { grid-column: 1 / -1; }
  .hero-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin-top: 1.25rem; }
  .orbit-dot, .wire-cube { display: none; }
  .orbit-1 { right: -170px; top: -160px; }
  .orbit-2 { right: -90px; top: -100px; }
  .orbit-3 { right: -30px; top: -40px; }

  /* 题库筛选：分段通栏等分，分类/状态单行横向滚动 chips，收藏/薄弱与搜索同行 */
  .bank-toolbar { gap: 0.5rem; }
  .bank-toolbar .row { flex-wrap: nowrap; }
  #view-bank .seg[role="tablist"] { display: flex; width: 100%; }
  #view-bank .seg[role="tablist"] button { flex: 1; }
  .row-search input { flex: 1; min-width: 0; width: auto; }
  .row-search .btn { flex: none; }
  .row-scroll .seg {
    display: flex; flex-wrap: nowrap; width: 100%;
    overflow-x: auto; scrollbar-width: none;
    scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
  }
  .row-scroll .seg::-webkit-scrollbar { display: none; }
  .row-scroll .seg button { flex: none; scroll-snap-align: start; }

  /* 记忆/Playground 设置：标签在上、控件通栏滚动 chips、主按钮通栏 */
  .mem-setup .field-row, .itv-setup .field-row { flex-direction: column; align-items: stretch; gap: 0.375rem; }
  .mem-setup .seg, .itv-setup .seg {
    display: flex; flex-wrap: nowrap; width: 100%;
    overflow-x: auto; scrollbar-width: none;
    scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
  }
  .mem-setup .seg::-webkit-scrollbar, .itv-setup .seg::-webkit-scrollbar { display: none; }
  .mem-setup .seg button, .itv-setup .seg button { flex: 1 0 auto; scroll-snap-align: start; }
  .mem-setup .btn-primary, .itv-setup .btn-primary { width: 100%; }
  .mem-setup select, .itv-setup select { width: 100%; }
  .itv-setup, .mem-setup { padding: 1rem !important; }

  /* 长卡操作区吸底：位于底部导航（56px+安全区）上方 */
  .mem-actions {
    position: sticky; bottom: calc(4.5rem + env(safe-area-inset-bottom)); z-index: 5;
    margin-top: 0.75rem; padding: 0.5rem 0 0.25rem;
    background: var(--color-surface); border-top: 1px solid var(--color-line);
  }
  .on-ink .mem-actions { background: var(--color-ink); border-top-color: var(--color-ink-line); }
  .mem-actions .btn:not(.rate-btn) { width: 100%; }

  /* 详情掌握标记 seg 同样单行滚动 */
  .panel .seg, #view-memory .seg[aria-label="五段式提示"] {
    display: flex; flex-wrap: nowrap; width: 100%;
    overflow-x: auto; scrollbar-width: none;
  }
  .panel .seg::-webkit-scrollbar, #view-memory .seg[aria-label="五段式提示"]::-webkit-scrollbar { display: none; }
  .panel .seg button { flex: 1 0 auto; }

  /* 分节/卡片内边距略收紧 */
  .sec { margin-top: 1.5rem; }
  .mem-card, .itv-stage { padding: 1rem; }
  .itv-q, .mem-q { font-size: 1.05rem; }
}