/* ═══════════════════════════════════════════════
   何师塾 Design System — 锤科克制版
   豆包修正：1主色+黑白灰 / 8px圆角 / 微阴影 / 文字优先
   ═══════════════════════════════════════════════ */

/* ── 1. TOKENS ────────────────────────────── */
:root {
  /* Core — 只留一个红 */
  --red: #C41A1A;
  --red-dark: #9E1515;
  --red-light: #FFF5F5;

  /* Neutrals */
  --ink: #1a1a1a;
  --ink-secondary: #666666;
  --ink-tertiary: #999999;
  --ink-disabled: #cccccc;
  --paper: #ffffff;
  --bg: #EFEFEF;
  --card-bg: #FFFFFF;
  --card-border: #DCDCDC;
  --divider: #DCDCDC;

  /* Typography — 4级 */
  --title-size: 20px;
  --section-size: 16px;
  --body-size: 14px;
  --caption-size: 12px;
  --font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", SimSun, sans-serif;

  /* Spacing — 4px grid */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;

  /* Radius — 只用8px */
  --radius: 8px;

  /* Bars — 三大区域层次 */
  --bar-bg: #D8D8D8;
  --bar-shadow: 0 1px 6px rgba(0,0,0,0.12);
  --bar-border: #C8C8C8;

  /* Shadows — 极克制 */
  --shadow-card: 0 1px 4px rgba(0,0,0,0.10);

  /* Animation */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 150ms;
  --dur-normal: 200ms;
}

/* ── 2. RESET ─────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{ -webkit-text-size-adjust:100%; }
body{
  font-family:var(--font-family);
  font-size:var(--body-size);
  line-height:1.6;
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  touch-action:manipulation;           /* 禁止双击缩放 */
  -webkit-user-select:none;           /* 禁止长按选中 */
  user-select:none;
}
a{ cursor:pointer; }
:focus-visible{
  outline:2px solid var(--red);
  outline-offset:2px;
}

/* ── 3. TYPOGRAPHY ────────────────────────── */
.title   { font-size:var(--title-size); font-weight:700; line-height:1.3; color:var(--ink); }
.section { font-size:var(--section-size); font-weight:600; line-height:1.4; color:var(--ink); }
.body    { font-size:var(--body-size); font-weight:400; line-height:1.6; color:var(--ink); }
.caption { font-size:var(--caption-size); font-weight:400; line-height:1.5; color:var(--ink-tertiary); }
.t-red       { color:var(--red); }
.t-secondary { color:var(--ink-secondary); }
.t-tertiary  { color:var(--ink-tertiary); }
.t-disabled  { color:var(--ink-disabled); }
.w-bold { font-weight:600; }

/* ── 4. SPACING UTILITIES ─────────────────── */
.p-sm  { padding:var(--space-sm); }
.p-md  { padding:var(--space-md); }
.p-lg  { padding:var(--space-lg); }
.gap-sm { gap:var(--space-sm); }
.gap-md { gap:var(--space-md); }
.mt-sm { margin-top:var(--space-sm); }
.mt-md { margin-top:var(--space-md); }
.mt-lg { margin-top:var(--space-lg); }
.mb-sm { margin-bottom:var(--space-sm); }
.mb-md { margin-bottom:var(--space-md); }
.mb-lg { margin-bottom:var(--space-lg); }

/* ── 5. FLEX/GRID ──────────────────────────── */
.flex         { display:flex; }
.flex-col     { display:flex; flex-direction:column; }
.items-center { align-items:center; }
.justify-between{ justify-content:space-between; }
.flex-1       { flex:1; }
.flex-shrink-0{ flex-shrink:0; }

.icon-chevron { width:16px; height:16px; color:var(--ink-tertiary); flex-shrink:0; }

/* ── 6. PHONE FRAME ────────────────────────── */
.phone {
  max-width:414px;
  min-height:100dvh;
  margin:0 auto;
  background:var(--bg);
  position:relative;
  padding-bottom:100px;
}

/* ═══════════════════════════════════════════════
   COMPONENTS
   ═══════════════════════════════════════════════ */

/* ── 7. TOP BAR ───────────────────────────── */
.top-bar {
  position:fixed;
  top:0;
  left:50%;
  transform:translateX(-50%);
  width:100%;
  max-width:414px;
  height:48px;
  background:var(--bar-bg);
  box-shadow:var(--bar-shadow);
  border-bottom:0.5px solid var(--bar-border);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 var(--space-lg);
  z-index:101;
}
.top-bar__title { font-size:var(--body-size); font-weight:600; color:var(--ink); }

.top-bar__title--truncate-start {
  overflow: hidden;
  white-space: nowrap;
  text-align: center;
  flex: 1;
  min-width: 0;
}

.top-bar__right { position:absolute; right:var(--space-lg); }

/* ── 8. BUTTON ────────────────────────────── */
.btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--space-xs);
  font-family:var(--font-family);
  font-size:var(--body-size);
  padding:10px 24px;
  border-radius:var(--radius);
  border:0.5px solid var(--card-border);
  background:var(--paper);
  color:var(--ink);
  cursor:pointer;
  text-decoration:none;
  white-space:nowrap;
  user-select:none;
  transition: background var(--dur-fast) var(--ease-out),
              opacity var(--dur-fast) var(--ease-out);
}
.btn:hover { background:var(--bg); }
.btn:active { background:var(--divider); transform:scale(0.98); }
.btn:disabled, .btn.is-disabled {
  opacity:0.4;
  cursor:not-allowed;
  pointer-events:none;
}

/* Primary — 纯红，不渐变 */
.btn--primary {
  background:var(--red);
  color:#fff;
  border-color:var(--red);
  font-weight:600;
}
.btn--primary:hover { background:var(--red-dark); border-color:var(--red-dark); }
.btn--primary:active { background:#9B1515; transform:scale(0.98); }

/* Text variant */
.btn--text {
  border:none;
  background:transparent;
  color:var(--ink-secondary);
  padding:4px 8px;
}
.btn--text:hover { color:var(--ink); }
.btn--text:active { color:var(--ink); background:var(--bg); }

/* Small */
.btn--sm {
  font-size:var(--caption-size);
  padding:6px 16px;
}
.btn--block { width:100%; }

/* ── 8. CARD ──────────────────────────────── */
.card {
  background:var(--card-bg);
  border-radius:var(--radius);
  padding:var(--space-md);
  border:0.5px solid var(--card-border);
  box-shadow:var(--shadow-card);
}
.card--link {
  cursor:pointer;
  transition:border-color var(--dur-fast) var(--ease-out),
             box-shadow var(--dur-fast) var(--ease-out);
}
.card--link:hover { border-color:var(--ink-disabled); }
.card--link:active { background:var(--divider); }

/* ── 9. BADGE ──────────────────────────────── */
.badge {
  display:inline-flex;
  align-items:center;
  font-size:var(--caption-size);
  padding:2px 8px;
  border-radius:var(--radius);
  font-weight:400;
  white-space:nowrap;
}
.badge--red    { background:var(--card-bg); color:var(--red); border:0.5px solid var(--card-border); }
.badge--gray   { background:var(--card-bg); color:var(--ink-tertiary); border:0.5px solid var(--card-border); }
.badge--ink    { background:var(--card-bg); color:var(--ink-secondary); border:0.5px solid var(--card-border); }

/* Badge with dot */
.badge-dot {
  display:inline-flex;
  align-items:center;
  gap:var(--space-sm);
}
.badge-dot::before {
  content:'';
  width:6px; height:6px;
  border-radius:50%;
  background:currentColor;
  flex-shrink:0;
}

/* ── 10. PROGRESS BAR ──────────────────────── */
.progress {
  height:3px;
  background:var(--divider);
  border-radius:2px;
  overflow:hidden;
}
.progress__fill {
  height:100%;
  border-radius:2px;
  background:var(--ink);
  transition:width var(--dur-normal) var(--ease-out);
}

/* Progress with label */
.progress-labeled {
  display:flex;
  align-items:center;
  gap:var(--space-sm);
}
.progress-labeled .progress { flex:1; }
.progress-labeled .caption { flex-shrink:0; min-width:36px; text-align:right; }

/* ── 11. DIVIDER ───────────────────────────── */
.divider {
  height:0.5px;
  background:var(--divider);
  margin:var(--space-md) 0;
}

/* ── 12. LEVEL NODE ────────────────────────── */
.level-node {
  width:48px; height:48px;
  border-radius:var(--radius);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:14px;
  font-weight:600;
  flex-shrink:0;
  transition:transform var(--dur-fast) var(--ease-out);
}
.level-node--current {
  background:var(--red);
  color:#fff;
}
.level-node--done {
  background:var(--ink-secondary);
  color:#fff;
}
.level-node--locked {
  background:var(--card-bg);
  color:var(--ink-disabled);
  border:0.5px solid var(--card-border);
}
.level-node--next {
  background:var(--paper);
  color:var(--ink-secondary);
  border:0.5px solid var(--card-border);
}
.level-node--current:active,
.level-node--done:active,
.level-node--next:active { transform:scale(0.93); }

.level-node--sm { width:32px; height:32px; font-size:12px; }
.level-node--xs { width:28px; height:28px; font-size:11px; }
.level-node--xs svg { width:13px; height:13px; }

/* ── 13. TAB BAR ───────────────────────────── */
.tab-bar {
  position:fixed;
  bottom:0;
  left:50%;
  transform:translateX(-50%);
  width:100%;
  max-width:414px;
  height:88px;
  background:var(--bar-bg);
  box-shadow:var(--bar-shadow);
  border-top:0.5px solid var(--bar-border);
  display:flex;
  align-items:flex-start;
  justify-content:space-around;
  padding-top:10px;
  padding-bottom:env(safe-area-inset-bottom, 0);
  z-index:100;
}
.tab-item {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
  font-size:11px;
  color:var(--ink-tertiary);
  text-decoration:none;
  padding:6px 12px;
  transition:color var(--dur-fast) var(--ease-out);
  -webkit-tap-highlight-color:transparent;
}
.tab-item svg { width:22px; height:22px; overflow:visible; }
.tab-item:active { color:var(--ink); }
.tab-item.active { color:var(--red); }

/* ── 14. INPUT ─────────────────────────────── */
.input {
  display:block;
  width:100%;
  padding:12px var(--space-md);
  border:0.5px solid var(--card-border);
  border-radius:var(--radius);
  background:var(--paper);
  font-family:var(--font-family);
  font-size:var(--body-size);
  color:var(--ink);
  transition:border-color var(--dur-fast) var(--ease-out);
  outline:none;
}
.input::placeholder { color:var(--ink-tertiary); }
.input:hover { border-color:var(--ink-tertiary); }
.input:focus { border-color:var(--ink); }
.input:disabled { background:var(--card-bg); color:var(--ink-tertiary); cursor:not-allowed; }

/* ── 15. SEGMENT CONTROL (underline tabs) ──── */
.seg-control {
  display:flex;
  gap:var(--space-lg);
  border-bottom:0.5px solid var(--divider);
  padding-bottom:var(--space-sm);
}
.seg-btn {
  border:none;
  background:transparent;
  font-size:var(--body-size);
  color:var(--ink-tertiary);
  cursor:pointer;
  padding:4px 0;
  font-family:var(--font-family);
  position:relative;
  transition:color var(--dur-fast) var(--ease-out);
}
.seg-btn--active {
  color:var(--ink);
  font-weight:600;
}
.seg-btn--active::after {
  content:'';
  position:absolute;
  bottom:-9px;
  left:0;
  right:0;
  height:2px;
  background:var(--red);
  border-radius:1px;
}

/* ── 16. QUIZ OPTION ───────────────────────── */
.option {
  display:block;
  width:100%;
  text-align:left;
  padding:12px var(--space-md);
  border:0.5px solid var(--card-border);
  border-radius:var(--radius);
  background:var(--paper);
  font-family:var(--font-family);
  font-size:var(--body-size);
  color:var(--ink);
  cursor:pointer;
  transition:border-color var(--dur-fast) var(--ease-out),
             background var(--dur-fast) var(--ease-out);
}
.option:hover { border-color:var(--ink-tertiary); }
.option:active { background:var(--card-bg); }
.option--selected { border-color:var(--ink); }
.option--correct {
  border-color:var(--ink);
  background:var(--card-bg);
}
.option--wrong {
  border-color:var(--red);
  background:var(--red-light);
}
.option--disabled { pointer-events:none; opacity:0.6; }

/* ── 17. STAT ITEM ─────────────────────────── */
.stat {
  text-align:left;
}
.stat__number {
  font-size:var(--title-size);
  font-weight:700;
  line-height:1.3;
  color:var(--ink);
}
.stat__label {
  font-size:var(--caption-size);
  color:var(--ink-tertiary);
  margin-top:2px;
}

/* ── 18. DOTS ──────────────────────────────── */
.dot-red  { width:8px; height:8px; border-radius:50%; background:var(--red); flex-shrink:0; }

/* ── 19. DIRECTION CARD ────────────────────── */
.direction-card {
  display:flex;
  align-items:center;
  gap:var(--space-md);
  padding:var(--space-md);
  border-radius:var(--radius);
  background:var(--card-bg);
  border:0.5px solid var(--card-border);
  cursor:pointer;
  transition:border-color var(--dur-fast) var(--ease-out);
}
.direction-card:hover { border-color:var(--ink-tertiary); }
.direction-card:active { background:var(--divider); }

/* ── 20. EMPTY STATE ───────────────────────── */
.empty-state {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:var(--space-2xl) var(--space-lg);
  text-align:center;
  gap:var(--space-sm);
}
.empty-state svg { width:48px; height:48px; color:var(--ink-disabled); }
.empty-state .caption { max-width:200px; }

/* ── 21. DIALOG / OVERLAY ──────────────────── */
.overlay {
  position:fixed; inset:0;
  background:rgba(0,0,0,0.3);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:200;
  animation:fadeIn var(--dur-normal) var(--ease-out);
}
.dialog {
  background:var(--paper);
  border-radius:var(--radius);
  padding:var(--space-lg);
  max-width:340px;
  width:90%;
  box-shadow:0 8px 32px rgba(0,0,0,0.12);
  animation:dialogIn var(--dur-normal) var(--ease-out);
}
.dialog__title { font-size:var(--section-size); font-weight:600; margin-bottom:var(--space-sm); }
.dialog__body  { font-size:var(--body-size); color:var(--ink-secondary); margin-bottom:var(--space-lg); }
.dialog__actions { display:flex; gap:var(--space-sm); justify-content:flex-end; }

/* ── 22. ALERT CARD ────────────────────────── */
.alert-card {
  display:flex;
  align-items:center;
  gap:var(--space-md);
  padding:var(--space-md);
  border-radius:var(--radius);
  background:var(--card-bg);
  border:0.5px solid var(--card-border);
  box-shadow:var(--shadow-card);
}
.alert-card__icon {
  width:40px; height:40px;
  border-radius:var(--radius);
  background:var(--red-light);
  color:var(--red);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}

/* ── 23. CHIP ──────────────────────────────── */
.chip {
  display:inline-flex;
  align-items:center;
  padding:2px 8px;
  border-radius:var(--radius);
  font-size:var(--caption-size);
  border:0.5px solid var(--card-border);
  color:var(--ink-secondary);
  cursor:pointer;
  white-space:nowrap;
  user-select:none;
  transition:all var(--dur-fast) var(--ease-out);
}
.chip:hover { border-color:var(--ink-tertiary); }
.chip:active { background:var(--card-bg); }
.chip.active { background:var(--red); color:#fff; border-color:var(--red); }
.chip.active:hover { background:var(--red-dark); border-color:var(--red-dark); }

/* ── 24. ANIMATION KEYFRAMES ───────────────── */
@keyframes fadeIn {
  from { opacity:0; transform:translateY(4px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes dialogIn {
  from { opacity:0; transform:scale(0.95) translateY(8px); }
  to   { opacity:1; transform:scale(1) translateY(0); }
}
.animate-in     { animation:fadeIn var(--dur-normal) var(--ease-out); }
.animate-dialog { animation:dialogIn var(--dur-normal) var(--ease-out); }

/* ── REDUCED MOTION ────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
/* ── 25. ERROR BOOK ─────────────────────────── */
.error-answer--wrong {
  color: var(--red);
}
.error-answer--correct {
  color: var(--ink);
}
.error-card {
  margin-bottom: var(--space-sm);
}
.error-card--expanded {
  border-color: var(--ink);
}

/* Error type bar chart */
.error-bar {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
}
.error-bar__label {
  font-size: var(--caption-size);
  color: var(--ink-secondary);
  min-width: 56px;
  flex-shrink: 0;
}
.error-bar__track {
  flex: 1;
  height: 3px;
  background: var(--bg);
  border-radius: 2px;
  overflow: hidden;
}
.error-bar__fill {
  height: 100%;
  border-radius: 2px;
  background: var(--ink);
  transition: width var(--dur-normal) var(--ease-out);
}
.error-bar__fill--top {
  background: var(--red);
}
.error-bar__count {
  font-size: var(--caption-size);
  color: var(--ink);
  font-weight: 600;
  min-width: 28px;
  text-align: right;
}

/* Conquer overlay */
.conquer-overlay {
  position: fixed;
  inset: 0;
  background: var(--bg);
  z-index: 300;
  display: flex;
  flex-direction: column;
  padding: var(--space-lg);
  overflow-y: auto;
}
.conquer-overlay__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-lg);
}
.conquer-overlay__title {
  font-size: var(--section-size);
  font-weight: 600;
}

/* ── DESKTOP ADAPTATION ────────────────────── */
@media (min-width: 768px) {
  .phone {
    max-width: 480px;
    border-radius: var(--radius);
    box-shadow: 0 4px 24px rgba(0,0,0,0.12);
    margin-top: var(--space-lg);
    margin-bottom: var(--space-lg);
    min-height: calc(100dvh - var(--space-xl) * 2);
  }
}