/* ===== IELTS Speaking Practice - Styles ===== */
/* Mobile-first, coral pink theme */

:root {
  --primary: #FF6B6B;
  --primary-light: #FF8E8E;
  --primary-dark: #E55555;
  --primary-bg: #FFF5F5;
  --secondary: #4ECDC4;
  --accent: #FFE66D;
  --text-main: #2D3436;
  --text-sub: #636E72;
  --text-light: #B2BEC3;
  --bg-main: #FAFAFA;
  --bg-card: #FFFFFF;
  --border: #EEE;
  --shadow: 0 2px 12px rgba(0,0,0,0.06);
  --shadow-lg: 0 4px 20px rgba(0,0,0,0.1);
  --radius: 12px;
  --radius-sm: 8px;
  --radius-lg: 20px;
  --header-h: 56px;
  --nav-h: 60px;
  --max-w: 500px;

  /* ===== 兼容别名 & 补全 =====
     存量代码一直在使用下面这些变量名，但它们从未被定义过，导致：
     边框退化成文字色、圆角退化成 0、等宽字体失效、部分背景变透明。
     此处统一指向主变量，改主变量即可全站生效，避免再次出现同类问题。 */
  --border-color: var(--border);
  --primary-color: var(--primary);
  --radius-md: 10px;
  --border-radius-lg: var(--radius-lg);
  --font-mono: 'Courier New', monospace;
  --font-sans: inherit;
  --bg-white: var(--bg-card);
  --bg-light: var(--bg-main);
  --bg-soft: #f6f8fb;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html { font-size: 16px; }

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
  background: var(--bg-main);
  color: var(--text-main);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

#app {
  max-width: var(--max-w);
  margin: 0 auto;
  min-height: 100vh;
  position: relative;
  padding-bottom: calc(var(--nav-h) + 16px);
}

/* ===== Header ===== */
.app-header {
  height: var(--header-h);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 100;
}

.app-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--primary);
  letter-spacing: 0.5px;
}

.app-subtitle {
  font-size: 0.75rem;
  color: var(--text-light);
}

/* ===== Pages ===== */
.page {
  display: none;
  padding: 16px;
  animation: fadeIn 0.3s ease;
}

.page.active {
  display: block;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.page-header {
  margin-bottom: 16px;
}

.page-title {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--text-main);
}

.page-desc {
  font-size: 0.8rem;
  color: var(--text-sub);
  margin-top: 4px;
}

.section-title {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 12px;
  color: var(--text-main);
}

/* ===== Dashboard ===== */
.dashboard-hero {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
  border-radius: var(--radius-lg);
  padding: 28px 20px;
  text-align: center;
  margin-bottom: 20px;
  color: white;
}

.hero-circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0 auto 12px;
  backdrop-filter: blur(10px);
}

.hero-num {
  font-size: 1.8rem;
  font-weight: 800;
  line-height: 1;
}

.hero-label {
  font-size: 0.65rem;
  opacity: 0.9;
  margin-top: 2px;
}

.hero-tagline {
  font-size: 0.8rem;
  opacity: 0.95;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 24px;
}

.stat-card {
  background: var(--bg-card);
  border-radius: var(--radius-sm);
  padding: 12px 4px;
  text-align: center;
  box-shadow: var(--shadow);
}

.stat-num {
  display: block;
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--primary);
  line-height: 1;
}

.stat-label {
  display: block;
  font-size: 0.65rem;
  color: var(--text-sub);
  margin-top: 4px;
}

.quick-nav {
  margin-bottom: 24px;
}

.nav-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.nav-card {
  background: var(--bg-card);
  border: none;
  border-radius: var(--radius);
  padding: 16px 12px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  cursor: pointer;
  box-shadow: var(--shadow);
  transition: transform 0.15s, box-shadow 0.15s;
}

.nav-card:active {
  transform: scale(0.97);
  box-shadow: var(--shadow-lg);
}

.nav-icon {
  font-size: 1.5rem;
}

.nav-text {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-main);
}

.nav-desc {
  font-size: 0.7rem;
  color: var(--text-sub);
}

/* ===== Story Bank Cards ===== */
.story-bank-card {
  background: var(--bg-card);
  border-radius: var(--radius);
  padding: 14px;
  margin-bottom: 8px;
  box-shadow: var(--shadow);
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  transition: transform 0.15s;
  border-left: 4px solid var(--primary);
}

.story-bank-card:active {
  transform: scale(0.98);
}

.story-bank-card.trump {
  border-left-color: var(--accent);
  background: linear-gradient(90deg, #FFFDF0 0%, var(--bg-card) 30%);
}

.story-badge {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--primary-bg);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1.1rem;
  flex-shrink: 0;
}

.story-badge.trump {
  background: #FFF9E6;
  color: #D4A017;
}

.story-bank-info {
  flex: 1;
  min-width: 0;
}

.story-bank-name {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-main);
}

.story-bank-tag {
  font-size: 0.72rem;
  color: var(--text-sub);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.story-bank-count {
  font-size: 0.7rem;
  color: var(--primary);
  font-weight: 600;
  background: var(--primary-bg);
  padding: 2px 8px;
  border-radius: 20px;
  flex-shrink: 0;
}

/* ===== Stories List ===== */
.stories-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.story-card {
  background: var(--bg-card);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
}

.story-card:active {
  transform: scale(0.98);
  box-shadow: var(--shadow-lg);
}

.story-card-header {
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.story-card-badge {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--primary-bg);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1.3rem;
  flex-shrink: 0;
}

.story-card-info {
  flex: 1;
  min-width: 0;
}

.story-card-name {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-main);
}

.story-card-tag {
  font-size: 0.75rem;
  color: var(--text-sub);
  margin-top: 2px;
}

.story-card-body {
  padding: 0 16px 14px;
}

.story-card-liner {
  font-size: 0.8rem;
  color: var(--text-sub);
  font-style: italic;
  margin-bottom: 10px;
  line-height: 1.5;
}

.story-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.story-tag {
  font-size: 0.65rem;
  color: var(--text-sub);
  background: var(--bg-main);
  padding: 2px 8px;
  border-radius: 20px;
}

.story-card-trump {
  background: linear-gradient(90deg, #FFF9E6 0%, var(--bg-card) 50%);
}

.trump-badge {
  display: inline-block;
  font-size: 0.6rem;
  color: #D4A017;
  background: #FFF3CD;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 700;
  margin-left: 6px;
}

.sample-answer-line {
  display: inline-block;
  font-size: 0.62rem;
  color: #2F6FB0;
  background: #EAF3FB;
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 600;
  margin-top: 5px;
  letter-spacing: 0.02em;
}

/* ===== Topics List ===== */
.search-bar {
  margin-bottom: 12px;
}

.search-bar input {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 20px;
  font-size: 0.85rem;
  background: var(--bg-card);
  outline: none;
  transition: border-color 0.2s;
}

.search-bar input:focus {
  border-color: var(--primary);
}

.filter-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 2px;
}

.filter-tab {
  padding: 6px 14px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--bg-card);
  font-size: 0.78rem;
  color: var(--text-sub);
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s;
}

.filter-tab.active {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
}

.topics-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.topic-card {
  background: var(--bg-card);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  box-shadow: var(--shadow);
  cursor: pointer;
  transition: transform 0.15s;
  border-left: 3px solid transparent;
}

.topic-card:active {
  transform: scale(0.98);
}

.topic-card.fit-high {
  border-left-color: var(--primary);
}

.topic-card.fit-medium {
  border-left-color: var(--accent);
}

.topic-card.fit-none {
  border-left-color: var(--border);
  opacity: 0.65;
}

.topic-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.topic-id {
  font-size: 0.65rem;
  color: var(--text-light);
  font-weight: 600;
}

.topic-fit {
  font-size: 0.65rem;
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: 600;
}

.topic-fit.high {
  background: var(--primary-bg);
  color: var(--primary);
}

.topic-fit.medium {
  background: #FFF9E6;
  color: #D4A017;
}

.topic-fit.none {
  background: var(--bg-main);
  color: var(--text-light);
}

.topic-title {
  font-size: 0.82rem;
  color: var(--text-main);
  line-height: 1.4;
  margin-bottom: 6px;
}

.topic-triggers {
  font-size: 0.7rem;
  color: var(--text-light);
}

.topic-story {
  font-size: 0.7rem;
  color: var(--primary);
  font-weight: 600;
  margin-top: 4px;
}

/* ===== Expressions ===== */
.expr-section {
  margin-bottom: 20px;
}

.expr-section-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 8px;
  padding-left: 8px;
  border-left: 3px solid var(--primary);
}

.expr-card {
  background: var(--bg-card);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin-bottom: 6px;
  box-shadow: var(--shadow);
}

.expr-row {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 4px 0;
}

.expr-bad {
  color: var(--text-light);
  text-decoration: line-through;
  font-size: 0.78rem;
  flex: 1;
}

.expr-good {
  color: var(--text-main);
  font-size: 0.82rem;
  font-weight: 600;
  flex: 1;
}

.expr-arrow {
  color: var(--primary);
  font-size: 0.75rem;
  flex-shrink: 0;
}

.expr-type {
  font-size: 0.7rem;
  color: var(--primary);
  font-weight: 600;
  margin-bottom: 4px;
}

.expr-content {
  font-size: 0.8rem;
  color: var(--text-main);
  line-height: 1.5;
}

.expr-example {
  font-size: 0.75rem;
  color: var(--text-sub);
  font-style: italic;
  margin-top: 4px;
}

.expr-source {
  font-size: 0.65rem;
  color: var(--text-light);
  margin-top: 2px;
}

/* ===== Practice Mode ===== */
.practice-step {
  background: var(--bg-card);
  border-radius: var(--radius);
  padding: 20px 16px;
  margin-bottom: 12px;
  box-shadow: var(--shadow);
}

.step-number {
  display: inline-block;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--primary);
  color: white;
  text-align: center;
  line-height: 28px;
  font-size: 0.8rem;
  font-weight: 700;
  margin-right: 8px;
}

.step-title {
  font-size: 0.95rem;
  font-weight: 700;
  display: inline-block;
  vertical-align: middle;
}

.step-content {
  margin-top: 12px;
}

.topic-display {
  background: var(--primary-bg);
  border-radius: var(--radius-sm);
  padding: 14px;
  font-size: 0.9rem;
  color: var(--text-main);
  line-height: 1.5;
  margin-bottom: 10px;
}

.topic-display .label {
  font-size: 0.7rem;
  color: var(--primary);
  font-weight: 600;
  margin-bottom: 4px;
  display: block;
}

.btn {
  display: inline-block;
  padding: 10px 20px;
  border: none;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.15s, opacity 0.2s;
}

.btn:active {
  transform: scale(0.95);
}

.btn-primary {
  background: var(--primary);
  color: white;
}

.btn-secondary {
  background: var(--bg-main);
  color: var(--text-main);
  border: 1px solid var(--border);
}

.btn-record {
  background: var(--primary);
  color: white;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  margin: 0 auto;
  box-shadow: 0 4px 15px rgba(255,107,107,0.4);
  animation: pulse 2s infinite;
}

.btn-record.recording {
  background: #E55555;
  animation: pulse-red 1s infinite;
}

@keyframes pulse {
  0%, 100% { box-shadow: 0 4px 15px rgba(255,107,107,0.3); }
  50% { box-shadow: 0 4px 25px rgba(255,107,107,0.6); }
}

@keyframes pulse-red {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

.timer {
  font-size: 2rem;
  font-weight: 800;
  color: var(--primary);
  text-align: center;
  margin: 10px 0;
  font-variant-numeric: tabular-nums;
}

.story-options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 10px;
}

.story-option {
  padding: 12px 4px;
  border: 2px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
}

.story-option.selected {
  border-color: var(--primary);
  background: var(--primary-bg);
}

.story-option-badge {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--primary);
}

.story-option-name {
  font-size: 0.7rem;
  color: var(--text-sub);
  margin-top: 2px;
}

.keyword-input {
  width: 100%;
  min-height: 80px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  resize: vertical;
  font-family: inherit;
  outline: none;
}

.keyword-input:focus {
  border-color: var(--primary);
}

.score-inputs {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.score-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.score-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-main);
  width: 70px;
  flex-shrink: 0;
}

.score-select {
  flex: 1;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
  background: var(--bg-card);
  outline: none;
}

.practice-history {
  margin-top: 20px;
}

.history-item {
  background: var(--bg-card);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  margin-bottom: 6px;
  box-shadow: var(--shadow);
  font-size: 0.78rem;
}

.history-item .h-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}

.history-item .h-topic {
  color: var(--text-main);
  font-weight: 600;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-right: 8px;
}

.history-item .h-score {
  color: var(--primary);
  font-weight: 700;
  flex-shrink: 0;
}

.history-item .h-meta {
  font-size: 0.7rem;
  color: var(--text-light);
}

/* ===== Brain Map ===== */
.flow-step {
  background: var(--bg-card);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 8px;
  box-shadow: var(--shadow);
  display: flex;
  align-items: flex-start;
  gap: 12px;
  position: relative;
}

.flow-step:not(:last-child)::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 30px;
  width: 2px;
  height: 8px;
  background: var(--border);
}

.flow-num {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--primary);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.9rem;
  flex-shrink: 0;
}

.flow-info {
  flex: 1;
}

.flow-name {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-main);
}

.flow-time {
  font-size: 0.7rem;
  color: var(--primary);
  font-weight: 600;
  margin-left: 6px;
}

.flow-desc {
  font-size: 0.78rem;
  color: var(--text-sub);
  margin-top: 4px;
  line-height: 1.5;
}

.brain-map-card {
  background: var(--bg-card);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 8px;
  box-shadow: var(--shadow);
  display: flex;
  align-items: center;
  gap: 12px;
}

.brain-map-keywords {
  flex: 1;
  font-size: 0.8rem;
  color: var(--text-sub);
}

.brain-map-arrow {
  color: var(--text-light);
  font-size: 1rem;
}

.brain-map-story {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--primary-bg);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1.1rem;
  flex-shrink: 0;
}

.guide-card {
  background: var(--bg-card);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin-bottom: 6px;
  box-shadow: var(--shadow);
}

.guide-condition {
  font-size: 0.8rem;
  color: var(--text-main);
  font-weight: 600;
  margin-bottom: 4px;
}

.guide-path {
  font-size: 0.75rem;
  color: var(--text-sub);
  white-space: pre-line;
  line-height: 1.8;
}

.guide-path .highlight {
  color: var(--primary);
  font-weight: 600;
}

/* ===== Cue Card ===== */
.cue-card {
  background: #FFF8F0;
  border: 2px solid var(--primary);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  margin-bottom: 12px;
}
.cue-card-title {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-main);
  line-height: 1.5;
  margin-bottom: 10px;
}
.cue-card-subtitle {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--primary);
  margin-bottom: 6px;
}
.cue-card-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.cue-card-list li {
  font-size: 0.78rem;
  color: var(--text-sub);
  padding: 3px 0 3px 14px;
  position: relative;
  line-height: 1.5;
}
.cue-card-list li::before {
  content: '•';
  position: absolute;
  left: 0;
  color: var(--primary);
}
.cue-card-mini {
  background: var(--bg-card);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  margin-bottom: 12px;
}

/* ===== Prep Timer Bar ===== */
.prep-timer-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: var(--bg-card);
  border-radius: var(--radius-sm);
  padding: 10px 16px;
  margin-top: 10px;
}
.prep-label {
  font-size: 0.8rem;
  color: var(--text-sub);
  font-weight: 600;
}
.prep-countdown {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--primary);
  font-variant-numeric: tabular-nums;
}
.prep-unit {
  font-size: 0.75rem;
  color: var(--text-sub);
}

/* ===== Bottom Nav ===== */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: var(--max-w);
  height: var(--nav-h);
  background: var(--bg-card);
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-around;
  z-index: 100;
  padding-bottom: env(safe-area-inset-bottom, 0);
}

.nav-btn {
  background: none;
  border: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  cursor: pointer;
  padding: 4px 12px;
  color: var(--text-light);
  transition: color 0.2s;
}

.nav-btn.active {
  color: var(--primary);
}

.nav-btn-icon {
  font-size: 1.3rem;
}

.nav-btn-text {
  font-size: 0.62rem;
  font-weight: 600;
}

/* ===== Modal ===== */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  z-index: 1000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  animation: fadeIn 0.2s;
}

.modal-content {
  background: var(--bg-card);
  width: 100%;
  max-width: var(--max-w);
  max-height: 85vh;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  display: flex;
  flex-direction: column;
  animation: slideUp 0.3s ease;
}

@keyframes slideUp {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.modal-header h3 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-main);
}

.modal-close {
  background: none;
  border: none;
  font-size: 1.2rem;
  color: var(--text-light);
  cursor: pointer;
  padding: 4px 8px;
}

.modal-body {
  padding: 16px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.modal-section {
  margin-bottom: 20px;
}

.modal-section-title {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 8px;
  padding-left: 8px;
  border-left: 3px solid var(--primary);
}

.modal-text {
  font-size: 0.82rem;
  color: var(--text-main);
  line-height: 1.6;
  white-space: pre-wrap;
}

.modal-quote {
  font-size: 0.85rem;
  color: var(--text-main);
  line-height: 1.6;
  background: var(--primary-bg);
  padding: 12px;
  border-radius: var(--radius-sm);
  font-style: italic;
}

.modal-soul {
  font-size: 0.9rem;
  color: var(--primary);
  font-weight: 700;
  text-align: center;
  padding: 12px;
  background: var(--primary-bg);
  border-radius: var(--radius-sm);
  margin: 8px 0;
}

.switch-table {
  width: 100%;
  border-collapse: collapse;
}

.switch-table th {
  font-size: 0.7rem;
  color: var(--text-light);
  text-align: left;
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
}

.switch-table td {
  font-size: 0.78rem;
  color: var(--text-main);
  padding: 8px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
  line-height: 1.5;
}

.switch-table .topic-col {
  font-weight: 600;
  width: 35%;
}

.vocab-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 8px;
}

.vocab-table td {
  font-size: 0.78rem;
  padding: 4px 8px;
  border-bottom: 1px solid var(--border);
}

.vocab-table .cn {
  color: var(--text-sub);
  width: 40%;
}

.vocab-table .en {
  color: var(--text-main);
  font-weight: 500;
}

.part3-item {
  margin-bottom: 10px;
}

.part3-q {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-main);
  margin-bottom: 4px;
}

.part3-a {
  font-size: 0.78rem;
  color: var(--text-sub);
  line-height: 1.5;
  padding-left: 12px;
  border-left: 2px solid var(--border);
}

.rapid-node {
  background: var(--bg-main);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  margin-bottom: 6px;
}

.rapid-node-title {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 4px;
}

.rapid-node-content {
  font-size: 0.75rem;
  color: var(--text-sub);
  line-height: 1.5;
}

.rapid-node-keywords {
  font-size: 0.7rem;
  color: var(--primary);
  margin-top: 4px;
  font-weight: 600;
}

.expr-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 8px;
}

.expr-table th {
  font-size: 0.7rem;
  color: var(--text-light);
  text-align: left;
  padding: 4px 8px;
}

.expr-table td {
  font-size: 0.78rem;
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

.expr-table .bad-cell {
  color: var(--text-light);
  text-decoration: line-through;
}

.expr-table .good-cell {
  color: var(--text-main);
  font-weight: 500;
}

/* ===== Responsive ===== */
@media (min-width: 600px) {
  :root {
    --max-w: 600px;
  }
}

/* ===== Empty State ===== */
.empty-state {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-light);
}

.empty-state-icon {
  font-size: 2.5rem;
  margin-bottom: 8px;
}

.empty-state-text {
  font-size: 0.85rem;
}

.empty-state-sub {
  font-size: 0.72rem;
  color: var(--text-light);
  margin-top: 4px;
}

/* ===== Dashboard Learning Status ===== */
.dashboard-status {
  margin-bottom: 20px;
}

.ds-empty {
  background: var(--bg-card);
  border-radius: var(--radius);
  padding: 24px 16px;
  text-align: center;
  box-shadow: var(--shadow);
}

.ds-empty-icon {
  font-size: 2rem;
  margin-bottom: 8px;
}

.ds-empty-text {
  font-size: 0.8rem;
  color: var(--text-sub);
  margin-bottom: 12px;
}

.ds-empty-btn {
  font-size: 0.8rem;
  padding: 8px 20px;
}

.ds-status-card {
  background: var(--bg-card);
  border-radius: var(--radius);
  padding: 14px 16px;
  box-shadow: var(--shadow);
}

.ds-metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}

.ds-metric {
  text-align: center;
}

.ds-metric-num {
  display: block;
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--primary);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.ds-metric-label {
  display: block;
  font-size: 0.62rem;
  color: var(--text-sub);
  margin-top: 3px;
}

.ds-trend {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  border-top: 1px solid var(--border);
  margin-bottom: 8px;
}

.ds-trend-label {
  font-size: 0.75rem;
  color: var(--text-sub);
  font-weight: 600;
}

.ds-sparkline svg {
  display: block;
}

.ds-weak {
  padding: 8px 0;
  border-top: 1px solid var(--border);
  margin-bottom: 8px;
}

.ds-section-label {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-sub);
  margin-bottom: 6px;
}

.ds-weak-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.ds-weak-tag {
  font-size: 0.72rem;
  color: #e74c3c;
  background: #FDEAEA;
  padding: 3px 10px;
  border-radius: 12px;
  font-weight: 600;
}

.ds-review {
  padding-top: 8px;
  border-top: 1px solid var(--border);
}

.ds-review-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ds-review-item {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-main);
  border: none;
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  cursor: pointer;
  transition: transform 0.15s;
  width: 100%;
  text-align: left;
}

.ds-review-item:active {
  transform: scale(0.98);
}

.ds-review-badge {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--primary-bg);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.85rem;
  flex-shrink: 0;
}

.ds-review-name {
  font-size: 0.8rem;
  color: var(--text-main);
  font-weight: 600;
}

/* ===== Story Bank Meta ===== */
.story-bank-meta {
  display: flex;
  gap: 8px;
  margin-top: 3px;
}

.sb-meta-item {
  font-size: 0.65rem;
  font-weight: 600;
}

/* ===== Story Card Stats ===== */
.story-card-stats {
  font-size: 0.7rem;
  color: var(--text-sub);
  margin-top: 3px;
  font-weight: 500;
}

.story-mastery-bar {
  height: 4px;
  background: var(--bg-main);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 8px;
}

.story-mastery-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 0.5s ease;
}

/* ===== Story Modal Stats ===== */
.story-modal-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.sms-item {
  text-align: center;
  background: var(--bg-main);
  border-radius: var(--radius-sm);
  padding: 10px 4px;
}

.sms-num {
  display: block;
  font-size: 1.3rem;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.sms-label {
  display: block;
  font-size: 0.65rem;
  color: var(--text-sub);
  margin-top: 3px;
}

/* ===== Training Log Page ===== */
.tl-import-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 14px;
  cursor: pointer;
  transition: transform 0.15s;
  color: white;
}

.tl-import-banner:active {
  transform: scale(0.98);
}

.tl-import-icon {
  font-size: 1.5rem;
  flex-shrink: 0;
}

.tl-import-text {
  flex: 1;
}

.tl-import-title {
  font-size: 0.9rem;
  font-weight: 700;
}

.tl-import-desc {
  font-size: 0.72rem;
  opacity: 0.9;
  margin-top: 2px;
}

.tl-import-arrow {
  font-size: 1.2rem;
  opacity: 0.7;
}

.tl-filters {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 2px;
}

.tl-filter-btn {
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--bg-card);
  font-size: 0.75rem;
  color: var(--text-sub);
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s;
}

.tl-filter-btn.active {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
}

.tl-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tl-card {
  background: var(--bg-card);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  box-shadow: var(--shadow);
  cursor: pointer;
  transition: transform 0.15s;
  border-left: 3px solid var(--primary);
}

.tl-card:active {
  transform: scale(0.98);
}

.tl-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.tl-date {
  font-size: 0.7rem;
  color: var(--text-light);
  font-weight: 600;
}

.tl-card-badges {
  display: flex;
  gap: 4px;
}

.tl-story-badge {
  font-size: 0.62rem;
  color: var(--primary);
  background: var(--primary-bg);
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: 600;
}

.tl-story-badge.tl-naked {
  color: var(--text-light);
  background: var(--bg-main);
}

.tl-source {
  font-size: 0.62rem;
  color: var(--secondary);
  background: #E8F8F7;
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: 600;
}

.tl-source.import {
  color: #D4A017;
  background: #FFF9E6;
}

.tl-topic {
  font-size: 0.8rem;
  color: var(--text-main);
  line-height: 1.4;
  margin-bottom: 6px;
}

.tl-card-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.tl-tags {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.tl-tag {
  font-size: 0.6rem;
  color: var(--text-sub);
  background: var(--bg-main);
  padding: 2px 6px;
  border-radius: 8px;
}

.tl-tag-warn {
  color: #e74c3c;
  background: #FDEAEA;
}

.tl-score {
  font-size: 1rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.tl-actions {
  display: flex;
  gap: 8px;
  margin-top: 14px;
}

.tl-action-btn {
  flex: 1;
  font-size: 0.78rem;
}

.tl-danger {
  color: #e74c3c;
}

/* ===== AI Import Modal ===== */
.tl-import-guide {
  margin-bottom: 12px;
}

.tl-import-guide p {
  font-size: 0.8rem;
  color: var(--text-sub);
  line-height: 1.5;
  margin-bottom: 10px;
}

.tl-import-format {
  background: var(--bg-main);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
}

.tl-format-label {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-sub);
  margin-bottom: 6px;
}

.tl-format-example {
  font-size: 0.7rem;
  color: var(--text-main);
  line-height: 1.6;
  white-space: pre-wrap;
  font-family: 'Courier New', monospace;
  margin: 0;
}

.tl-import-textarea {
  font-family: 'Courier New', monospace;
  font-size: 0.8rem;
}

/* ===== Import Preview ===== */
.tl-import-preview {
  margin-top: 14px;
  background: var(--primary-bg);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
}

.tl-preview-label {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 8px;
}

.tl-preview-row {
  display: flex;
  gap: 8px;
  padding: 4px 0;
  border-bottom: 1px solid rgba(255,107,107,0.1);
}

.tl-preview-key {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-sub);
  width: 60px;
  flex-shrink: 0;
}

.tl-preview-val {
  font-size: 0.75rem;
  color: var(--text-main);
  flex: 1;
  word-break: break-word;
}

.tl-preview-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.tl-preview-actions .btn {
  flex: 1;
  font-size: 0.8rem;
}

/* ===== Training Log Detail Modal ===== */
.tl-modal-date {
  font-size: 0.72rem;
  color: var(--text-light);
  font-weight: 400;
  margin-left: 8px;
}

.tl-story-info {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
}

.tl-story-badge-large {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--primary-bg);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1rem;
  flex-shrink: 0;
}

.tl-score-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}

.tl-score-item {
  text-align: center;
  background: var(--bg-main);
  border-radius: var(--radius-sm);
  padding: 10px 2px;
}

.tl-score-highlight {
  background: var(--primary-bg);
}

.tl-score-val {
  display: block;
  font-size: 1.1rem;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.tl-score-label {
  display: block;
  font-size: 0.58rem;
  color: var(--text-sub);
  margin-top: 3px;
}

/* ===== Practice Extra Fields ===== */
.practice-extra-fields {
  margin-top: 4px;
}

/* ===== Toast ===== */
.ielts-toast {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--text-main);
  color: white;
  padding: 10px 24px;
  border-radius: 20px;
  font-size: 0.82rem;
  font-weight: 600;
  z-index: 2000;
  opacity: 0;
  transition: opacity 0.3s, transform 0.3s;
  pointer-events: none;
  box-shadow: var(--shadow-lg);
}

.ielts-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ========================================
   Sub-tabs (Materials page)
   ======================================== */

/* ===== Sub-tabs (Materials page) ===== */
.sub-tabs {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  background: var(--bg-card);
  border-radius: var(--radius);
  padding: 3px;
  margin-bottom: 14px;
  box-shadow: var(--shadow);
}

.sub-tabs::-webkit-scrollbar {
  display: none;
}

.sub-tab {
  flex: 0 0 auto;
  white-space: nowrap;
  padding: 8px 12px;
  border: none;
  background: none;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-sub);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.2s;
  text-align: center;
}

.sub-tab.active {
  background: var(--primary);
  color: #fff;
  font-weight: 600;
}

.sub-page {
  display: none;
}

.training-intro {
  font-size: 0.8rem;
  color: var(--text-sub);
  background: var(--bg-card);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin-bottom: 12px;
  box-shadow: var(--shadow);
  line-height: 1.5;
}

.sub-page.active {
  display: block;
}

/* ===== Scrollable sub-tabs (6 items) ===== */
.sub-tabs-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.sub-tabs-scroll::-webkit-scrollbar { display: none; }
.sub-tabs-scroll .sub-tab {
  flex: 0 0 auto;
  padding: 8px 14px;
  white-space: nowrap;
  min-width: auto;
}

/* ========================================
   Writing Materials Cards
   ======================================== */

.wr-section { margin-bottom: 20px; }
.wr-section-title {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 10px;
  padding-left: 4px;
}

/* Chart type card */
.wr-chart-card {
  background: var(--bg-card);
  border-radius: var(--radius);
  padding: 14px;
  margin-bottom: 10px;
  box-shadow: var(--shadow);
  cursor: pointer;
  transition: box-shadow 0.2s;
  border-left: 4px solid var(--secondary);
}
.wr-chart-card:active { box-shadow: var(--shadow-lg); }
.wr-chart-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.wr-chart-icon { font-size: 1.6rem; }
.wr-chart-name {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-main);
}
.wr-chart-cn {
  font-size: 0.72rem;
  color: var(--text-sub);
}
.wr-chart-applicable {
  font-size: 0.75rem;
  color: var(--text-sub);
  line-height: 1.5;
  margin-bottom: 8px;
}
.wr-chart-structure {
  font-size: 0.72rem;
  color: var(--text-main);
  background: var(--bg-main);
  padding: 8px 10px;
  border-radius: 6px;
  line-height: 1.6;
}

/* Usage tip / hint */
.wr-usage-tip {
  font-size: 0.72rem;
  color: var(--text-sub);
  background: #FEF9E7;
  padding: 8px 10px;
  border-radius: 6px;
  margin-bottom: 14px;
  line-height: 1.5;
  border-left: 3px solid #F1C40F;
}
.wr-usage-hint {
  font-size: 0.68rem;
  color: #7D6608;
  margin-top: 8px;
  padding: 6px 8px;
  background: #FEF9E7;
  border-radius: 4px;
  text-align: center;
}

/* Essay type card */
.wr-essay-card {
  background: var(--bg-card);
  border-radius: var(--radius);
  padding: 14px;
  margin-bottom: 10px;
  box-shadow: var(--shadow);
  border-left: 4px solid var(--primary-light);
}
.wr-essay-card .wr-essay-name {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 4px;
}
.wr-essay-card .wr-essay-patterns {
  font-size: 0.7rem;
  color: var(--primary);
  margin-bottom: 8px;
  font-style: italic;
}
.wr-essay-card .wr-essay-keys {
  font-size: 0.72rem;
  color: var(--text-sub);
  line-height: 1.7;
}
.wr-essay-template {
  margin-top: 10px;
  padding: 10px;
  background: var(--primary-bg);
  border-radius: 6px;
  font-size: 0.72rem;
  line-height: 1.7;
  color: var(--text-sub);
  display: none;
}
.wr-essay-template.show { display: block; }
.wr-essay-card .wr-expand-btn {
  display: inline-block;
  font-size: 0.7rem;
  color: var(--primary);
  cursor: pointer;
  margin-top: 8px;
  font-weight: 600;
}

/* Topic card */
.wr-topic-card {
  background: var(--bg-card);
  border-radius: var(--radius);
  padding: 14px;
  margin-bottom: 10px;
  box-shadow: var(--shadow);
  border-left: 4px solid #D4A017;
}
.wr-topic-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 6px;
}
.wr-topic-name {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-main);
}
.wr-topic-source {
  font-size: 0.65rem;
  color: var(--text-light);
  background: var(--bg-main);
  padding: 2px 8px;
  border-radius: 10px;
}
.wr-topic-overview {
  font-size: 0.75rem;
  color: var(--text-sub);
  margin-bottom: 8px;
  line-height: 1.5;
}
.wr-topic-vocab {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 8px;
}
.wr-topic-vocab span {
  font-size: 0.68rem;
  background: var(--bg-main);
  color: var(--text-sub);
  padding: 2px 8px;
  border-radius: 10px;
}
.wr-topic-arg {
  margin-top: 8px;
  padding: 8px 10px;
  background: var(--bg-main);
  border-radius: 6px;
}
.wr-topic-arg-label {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 4px;
}
.wr-topic-arg-text {
  font-size: 0.72rem;
  color: var(--text-sub);
  line-height: 1.5;
}

/* Universal templates inline */
.wr-inline-list {
  font-size: 0.72rem;
  color: var(--text-sub);
  line-height: 1.8;
}
.wr-word-upgrade-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.72rem;
  margin-top: 6px;
}
.wr-word-upgrade-table th {
  background: var(--primary-bg);
  color: var(--primary);
  padding: 6px 8px;
  text-align: left;
  font-weight: 600;
}
.wr-word-upgrade-table td {
  padding: 5px 8px;
  border-bottom: 1px solid var(--border);
  color: var(--text-sub);
}
.wr-word-upgrade-table tr:last-child td { border-bottom: none; }

.wr-prompt-card {
  background: var(--bg-card);
  border-radius: var(--radius);
  padding: 12px 14px;
  margin-bottom: 8px;
  box-shadow: var(--shadow);
  border-left: 4px solid #6C5CE7;
}
.wr-prompt-card .wr-prompt-title {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 4px;
}
.wr-prompt-card .wr-prompt-text {
  font-size: 0.7rem;
  color: var(--text-sub);
  line-height: 1.6;
  max-height: 120px;
  overflow-y: auto;
  background: var(--bg-main);
  padding: 8px;
  border-radius: 6px;
  white-space: pre-wrap;
  font-family: 'Courier New', monospace;
}

/* ===== Home Page ===== */
.home-hero {
  background: linear-gradient(135deg, var(--primary-bg), #FFF);
  border-radius: var(--radius-lg);
  padding: 18px 16px;
  margin-bottom: 16px;
  box-shadow: var(--shadow);
}

.home-hero-stats {
  display: flex;
  justify-content: space-around;
  margin-bottom: 12px;
}

.home-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.home-stat-num {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-main);
  line-height: 1.2;
}

.home-stat-label {
  font-size: 0.68rem;
  color: var(--text-light);
}

.home-trend {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

.home-trend-label {
  font-size: 0.72rem;
  color: var(--text-sub);
}

/* ===== AI Coach Cards ===== */
.coach-section {
  margin-bottom: 16px;
}

.coach-cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.coach-card {
  background: var(--bg-card);
  border-radius: var(--radius);
  padding: 14px 16px;
  box-shadow: var(--shadow);
  border-left: 3px solid var(--primary);
}

.coach-card-suggestion {
  border-left-color: var(--primary);
  background: linear-gradient(135deg, var(--primary-bg), var(--bg-card));
}

.coach-card-progress {
  border-left-color: var(--secondary);
}

.coach-card-alert {
  border-left-color: #e74c3c;
  background: #FFF5F5;
}

.coach-card-story {
  border-left-color: #9B59B6;
}

.coach-card-expression {
  border-left-color: #F1C40F;
  background: #FFFDF5;
}

.coach-card-welcome {
  border-left-color: var(--primary);
  background: var(--primary-bg);
}

.coach-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.coach-card-icon {
  font-size: 1.1rem;
}

.coach-card-title {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-sub);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.coach-card-text {
  font-size: 0.88rem;
  color: var(--text-main);
  line-height: 1.6;
}

.coach-card-action {
  display: inline-block;
  margin-top: 8px;
  padding: 6px 16px;
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: 20px;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.2s;
}

.coach-card-action:active {
  opacity: 0.8;
}

/* ===== Home Quick Start ===== */
.home-quick-start {
  text-align: center;
  margin-bottom: 20px;
}

.home-start-btn {
  padding: 12px 40px;
  font-size: 0.95rem;
  border-radius: 30px;
  box-shadow: 0 4px 14px rgba(255, 107, 107, 0.3);
}

/* ===== Home Stories ===== */
.home-stories {
  margin-bottom: 16px;
}

/* ===== Growth Summary (Profile page) ===== */
.growth-card {
  background: var(--bg-card);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 14px;
  box-shadow: var(--shadow);
}

.growth-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 14px;
}

.growth-stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 10px 4px;
  background: var(--bg-main);
  border-radius: var(--radius-sm);
}

.gs-num {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--text-main);
}

.gs-label {
  font-size: 0.65rem;
  color: var(--text-light);
}

.growth-trend {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 0;
  margin-bottom: 12px;
  border-top: 1px solid var(--border);
}

.growth-trend-label {
  font-size: 0.72rem;
  color: var(--text-sub);
}

.growth-section-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-sub);
  margin-bottom: 8px;
}

.growth-stories {
  margin-bottom: 14px;
}

.growth-story-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.growth-story-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: var(--bg-main);
  border-radius: var(--radius-sm);
}

.growth-story-version {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 700;
}

.growth-story-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1;
}

.growth-story-name {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-main);
}

.growth-story-meta {
  font-size: 0.7rem;
  color: var(--text-sub);
}

.growth-weak {
  margin-top: 4px;
}

/* ===== Page header adjustments ===== */
.page-header {
  margin-bottom: 14px;
}

.page-title {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text-main);
}

.page-desc {
  font-size: 0.78rem;
  color: var(--text-light);
  margin-top: 2px;
}

/* ========================================
   Phase 4: AI Coach Dashboard Styles
   ======================================== */

/* ===== Coach Greeting ===== */
.coach-greeting {
  padding: 8px 0 14px;
}

.coach-hello {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--text-main);
  line-height: 1.3;
}

.coach-status {
  font-size: 0.85rem;
  color: var(--text-sub);
  margin-top: 4px;
  line-height: 1.5;
}

/* ===== IELTS Target Scores Card ===== */
.target-card {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: 18px 16px 14px;
  margin-bottom: 16px;
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
}

.target-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.target-card-actions, .challenge-card-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.target-card-edit, .challenge-card-edit {
  font-size: 0.65rem;
  color: var(--text-light);
  background: transparent;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 3px 8px;
  cursor: pointer;
  transition: all 0.15s;
}
.target-card-edit:hover, .challenge-card-edit:hover {
  color: var(--primary);
  border-color: var(--primary);
}

.target-card-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-main);
}

.target-overall {
  display: flex;
  align-items: baseline;
  gap: 4px;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  border-radius: 20px;
  padding: 4px 12px;
  color: #fff;
}

.target-overall-label {
  font-size: 0.68rem;
  opacity: 0.85;
  font-weight: 500;
}

.target-overall-score {
  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1;
}

.target-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.target-item {
  text-align: center;
  padding: 10px 4px 8px;
  border-radius: var(--radius-sm);
  background: var(--primary-bg);
  transition: transform 0.15s;
}

.target-item:active {
  transform: scale(0.95);
}

.target-item-icon {
  font-size: 1.1rem;
  margin-bottom: 4px;
  line-height: 1;
}

.target-item-score {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--primary);
  line-height: 1.1;
  margin-bottom: 2px;
}

.target-item-name {
  font-size: 0.72rem;
  color: var(--text-sub);
  font-weight: 500;
}

.target-card-footer {
  text-align: center;
  font-size: 0.7rem;
  color: var(--text-light);
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

/* ===== Current Challenges Card ===== */
.challenge-card {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: 18px 16px 14px;
  margin-bottom: 16px;
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
}

.challenge-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.challenge-card-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-main);
}

.challenge-card-count {
  font-size: 0.7rem;
  color: var(--text-light);
  background: var(--primary-bg);
  padding: 2px 8px;
  border-radius: 10px;
}

.challenge-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.challenge-item {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px 12px;
  background: var(--bg-main);
}

.challenge-item-top {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 10px;
}

.challenge-item-icon {
  font-size: 1.4rem;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 2px;
}

.challenge-item-info {
  flex: 1;
  min-width: 0;
}

.challenge-item-subject {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 2px;
}

.challenge-item-subject-en {
  font-size: 0.7rem;
  font-weight: 400;
  color: var(--text-light);
}

.challenge-item-summary {
  font-size: 0.75rem;
  color: var(--text-sub);
  line-height: 1.4;
}

.challenge-item-scores {
  display: flex;
  align-items: baseline;
  gap: 4px;
  flex-shrink: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.challenge-score-current {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-sub);
  text-decoration: line-through;
  text-decoration-color: var(--text-light);
}

.challenge-score-arrow {
  font-size: 0.75rem;
  color: var(--text-light);
}

.challenge-score-target {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--primary);
}

.challenge-score-gap {
  font-size: 0.68rem;
  font-weight: 700;
  color: #fff;
  background: var(--primary);
  border-radius: 8px;
  padding: 1px 6px;
  margin-left: 2px;
}

.challenge-improvements {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

.challenge-improvement {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.75rem;
  color: var(--text-sub);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 4px 10px;
}

.challenge-improvement.done {
  color: var(--text-light);
  background: var(--primary-bg);
  border-color: transparent;
}

.challenge-improvement.done .challenge-improvement-text {
  text-decoration: line-through;
}

.challenge-improvement-check {
  font-size: 0.7rem;
  line-height: 1;
}

.challenge-progress-bar {
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
}

.challenge-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--primary), var(--primary-dark));
  border-radius: 2px;
  transition: width 0.3s ease;
}

/* ===== Today's Task Card (Primary) ===== */
.coach-task-card {
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  border-radius: var(--radius-lg);
  padding: 20px 18px;
  margin-bottom: 16px;
  box-shadow: 0 4px 20px rgba(255, 107, 107, 0.25);
  color: #fff;
}

.coach-task-label {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  opacity: 0.85;
  margin-bottom: 6px;
}

.coach-task-title {
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.4;
  margin-bottom: 8px;
}

.coach-task-reason {
  font-size: 0.82rem;
  opacity: 0.9;
  line-height: 1.5;
  margin-bottom: 12px;
}

.coach-task-focus {
  background: rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  margin-bottom: 14px;
}

.coach-focus-label {
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  opacity: 0.8;
  margin-bottom: 4px;
}

.coach-focus-item {
  font-size: 0.8rem;
  line-height: 1.5;
  opacity: 0.95;
}

.coach-task-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 12px 18px;
  background: #fff;
  color: var(--primary);
  border: none;
  border-radius: 30px;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.2s;
}

.coach-task-btn:active {
  opacity: 0.85;
}

.coach-task-arrow {
  font-size: 1.3rem;
  font-weight: 400;
}

/* ===== Coach Notes (Secondary, Conversational) ===== */
.coach-notes {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}

.coach-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 14px;
  background: var(--bg-card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.coach-note-icon {
  font-size: 0.95rem;
  flex-shrink: 0;
  line-height: 1.5;
}

.coach-note-text {
  font-size: 0.82rem;
  color: var(--text-sub);
  line-height: 1.5;
}

.coach-note-progress {
  border-left: 2px solid var(--secondary);
}

.coach-note-alert {
  border-left: 2px solid #e74c3c;
  background: #FFF8F8;
}

.coach-note-story {
  border-left: 2px solid #9B59B6;
}

.coach-note-expression {
  border-left: 2px solid #F1C40F;
  background: #FFFDF5;
}

/* ===== Mini Stats (Subtle, bottom of home) ===== */
.coach-mini-stats {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: var(--bg-card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  margin-bottom: 16px;
}

.coach-mini-text {
  font-size: 0.72rem;
  color: var(--text-light);
}

.coach-mini-trend {
  display: flex;
  align-items: center;
}

.coach-mini-trend svg {
  height: 24px;
  width: auto;
}

/* ===== Training Log Collapsible (Profile page) ===== */
.log-collapse-section {
  margin-top: 16px;
}

.log-collapse-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 12px 16px;
  background: var(--bg-card);
  border: none;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-sub);
  cursor: pointer;
  transition: background 0.2s;
}

.log-collapse-toggle:active {
  background: var(--bg-main);
}

.log-toggle-arrow {
  font-size: 1.2rem;
  color: var(--text-light);
  transition: transform 0.2s;
  transform: rotate(0deg);
}

/* ===== Growth Log (Story Evolution Timeline) ===== */
.growth-version-path {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
}

.growth-version-step {
  font-size: 0.62rem;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--bg-main);
  color: var(--text-light);
}

.growth-version-step.current {
  background: var(--primary-bg);
  color: var(--primary);
}

.growth-version-arrow {
  font-size: 0.7rem;
  color: var(--text-light);
}

.growth-log-section {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.growth-log-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 6px 0;
}

.growth-log-icon {
  font-size: 0.85rem;
  flex-shrink: 0;
  line-height: 1.6;
}

.growth-log-content {
  flex: 1;
}

.growth-log-desc {
  font-size: 0.78rem;
  color: var(--text-main);
  line-height: 1.4;
}

.growth-log-meta {
  font-size: 0.66rem;
  color: var(--text-light);
  margin-top: 1px;
}

/* ========================================
   Phase 5: Category Badges & Labels
   ======================================== */

/* Part badge on topic cards */
.topic-part-badge {
  display: inline-block;
  font-size: 0.6rem;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 8px;
  margin-left: 6px;
  vertical-align: middle;
  letter-spacing: 0.3px;
}
.topic-part-badge.speaking { background: var(--primary-bg); color: var(--primary); }
.topic-part-badge.writing { background: #EDE7F6; color: #6C3FAA; }

/* Part badge on expression cards */
.expr-part-badge {
  display: inline-block;
  font-size: 0.6rem;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 8px;
  margin-left: 6px;
  letter-spacing: 0.3px;
}
.expr-part-badge.p2 { background: var(--primary-bg); color: var(--primary); }
.expr-part-badge.p3 { background: #EDE7F6; color: #6C3FAA; }
.expr-part-badge.allp { background: #E8F5E9; color: #2E7D32; }

/* ========================================
   Phase 5: Practice Mode - Writing
   ======================================== */

/* Practice sub-tabs (Speaking | Writing) */
.practice-sub-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 14px;
}
.practice-sub-tab {
  flex: 1;
  padding: 10px 16px;
  border-radius: var(--radius);
  border: 2px solid var(--border);
  background: var(--bg-card);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-sub);
  cursor: pointer;
  text-align: center;
  transition: all 0.2s;
}
.practice-sub-tab.active {
  border-color: var(--primary);
  background: var(--primary-bg);
  color: var(--primary);
}

/* Writing type selection */
.wr-type-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-bottom: 14px;
}
.wr-type-card {
  background: var(--bg-card);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 12px;
  cursor: pointer;
  text-align: center;
  transition: all 0.2s;
}
.wr-type-card:hover, .wr-type-card.selected {
  border-color: var(--primary);
  background: var(--primary-bg);
}
.wr-type-card-icon { font-size: 1.4rem; margin-bottom: 4px; }
.wr-type-card-name { font-size: 0.82rem; font-weight: 600; color: var(--text-main); }
.wr-type-card-desc { font-size: 0.68rem; color: var(--text-light); margin-top: 2px; }

/* Writing template preview */
.wr-template-preview {
  background: var(--bg-main);
  border-radius: var(--radius);
  padding: 14px;
  margin-bottom: 14px;
  max-height: 250px;
  overflow-y: auto;
  font-size: 0.78rem;
  line-height: 1.7;
  color: var(--text-sub);
  border: 1px solid var(--border);
}
.wr-template-preview b { color: var(--primary-dark); }
.wr-template-label {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}

/* Writing textarea */
.wr-textarea {
  width: 100%;
  min-height: 200px;
  padding: 14px;
  border: 2px solid var(--border);
  border-radius: var(--radius);
  font-size: 0.85rem;
  font-family: inherit;
  line-height: 1.7;
  color: var(--text-main);
  background: var(--bg-card);
  resize: vertical;
  transition: border-color 0.2s;
}
.wr-textarea:focus {
  outline: none;
  border-color: var(--primary);
}
.wr-textarea::placeholder { color: var(--text-light); }

/* Writing word count */
.wr-word-count {
  text-align: right;
  font-size: 0.72rem;
  color: var(--text-light);
  margin-top: 4px;
  margin-bottom: 10px;
}
.wr-word-count.too-few { color: #e74c3c; }
.wr-word-count.good { color: #27ae60; }

/* Writing self-score */
.wr-score-section {
  margin-top: 12px;
}
.wr-score-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-sub);
  margin-bottom: 8px;
}
.wr-score-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-bottom: 10px;
}
.wr-score-item { display: flex; flex-direction: column; gap: 2px; }
.wr-score-item label { font-size: 0.68rem; color: var(--text-light); }
.wr-score-item select {
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
  background: var(--bg-card);
  color: var(--text-main);
}

.wr-save-row {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

/* Writing record card */
.wr-record-card {
  background: var(--bg-card);
  border-radius: var(--radius);
  padding: 12px 14px;
  margin-bottom: 8px;
  box-shadow: var(--shadow);
  border-left: 3px solid var(--primary-light);
}
.wr-record-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}
.wr-record-type {
  font-size: 0.7rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 6px;
  background: var(--primary-bg);
  color: var(--primary);
}
.wr-record-date { font-size: 0.68rem; color: var(--text-light); }
.wr-record-topic { font-size: 0.82rem; font-weight: 600; color: var(--text-main); margin: 4px 0; }
.wr-record-scores {
  display: flex;
  gap: 8px;
  font-size: 0.7rem;
  color: var(--text-sub);
}
.wr-record-scores span { background: var(--bg-main); padding: 2px 6px; border-radius: 4px; }
.wr-record-text {
  font-size: 0.75rem;
  color: var(--text-sub);
  margin-top: 6px;
  max-height: 80px;
  overflow-y: auto;
  line-height: 1.5;
  background: var(--bg-main);
  padding: 8px;
  border-radius: 6px;
  white-space: pre-wrap;
}

/* ===== Shared form classes (AI settings / goals / vocab modal) ===== */


.idiom-form-group { margin-bottom: 12px; }
.idiom-form-label {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-sub);
  margin-bottom: 4px;
}
.idiom-form-input,
.idiom-form-textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  font-family: inherit;
  color: var(--text-main);
  background: var(--bg-card);
  transition: border-color 0.2s;
}
.idiom-form-input:focus,
.idiom-form-textarea:focus { outline: none; border-color: var(--primary); }
.idiom-form-textarea { min-height: 60px; resize: vertical; }

.idiom-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.idiom-form-hint {
  font-size: 0.68rem;
  color: var(--text-light);
  margin-top: 2px;
}

.idiom-form-checkboxes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.idiom-form-checkbox {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.75rem;
  color: var(--text-sub);
  cursor: pointer;
  padding: 4px 10px;
  border-radius: 14px;
  background: var(--bg-main);
  transition: all 0.2s;
}
.idiom-form-checkbox.checked { background: var(--primary-bg); color: var(--primary); }


/* ========================================
   Writing Template Page (Practice mode)
   ======================================== */

.wr-template-page-header {
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--primary);
}
.wr-back-btn {
  font-size: 0.75rem !important;
  padding: 6px 14px !important;
  margin-bottom: 10px;
}
.wr-template-page-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-main);
}
.wr-template-page-desc {
  font-size: 0.75rem;
  color: var(--text-sub);
  margin-top: 4px;
}

/* Template card in practice mode */
.wr-tpl-card {
  background: var(--bg-card);
  border-radius: var(--radius);
  padding: 14px;
  margin-bottom: 12px;
  box-shadow: var(--shadow);
  border: 2px solid transparent;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.wr-tpl-card.selected {
  border-color: var(--primary);
  background: linear-gradient(135deg, var(--primary-bg), var(--bg-card));
}
.wr-tpl-card:active { box-shadow: var(--shadow-lg); }

.wr-tpl-card-header {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 10px;
}
.wr-tpl-card-icon {
  font-size: 1.4rem;
  flex-shrink: 0;
  line-height: 1.4;
}
.wr-tpl-card-info {
  flex: 1;
  min-width: 0;
}
.wr-tpl-card-name {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-main);
}
.wr-tpl-card-applicable {
  font-size: 0.72rem;
  color: var(--text-sub);
  margin-top: 2px;
  line-height: 1.4;
}
.wr-tpl-check {
  font-size: 1.1rem;
  color: var(--primary);
  font-weight: 700;
  flex-shrink: 0;
}

.wr-tpl-section {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}
.wr-tpl-section-label {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-bottom: 4px;
}
.wr-tpl-row {
  font-size: 0.75rem;
  color: var(--text-sub);
  line-height: 1.7;
  padding: 2px 0;
}
.wr-tpl-row b {
  color: var(--text-main);
  font-weight: 600;
}
.wr-tpl-tips {
  font-size: 0.72rem;
  color: var(--text-sub);
  line-height: 1.7;
}

.wr-tpl-start-btn {
  width: 100%;
  margin-top: 12px;
  font-size: 0.82rem;
}

/* ============================================================
   母卡详情页 (Master Card Detail View)
   ============================================================ */

/* --- 入口卡片增强 --- */
.wr-chart-entry {
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
}
.wr-chart-entry:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}
.wr-master-badge {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 600;
  color: #0F6E56;
  background: #E1F5EE;
  padding: 1px 8px;
  border-radius: 10px;
  vertical-align: middle;
  margin-left: 4px;
}
.wr-master-badge.wr-master-pending {
  color: #888780;
  background: #EAEAF0;
}
.wr-entry-summary {
  font-size: 0.75rem;
  color: var(--primary-dark);
  margin-top: 6px;
  font-style: italic;
  line-height: 1.5;
  padding-left: 4px;
  border-left: 2px solid var(--primary-light);
}
.wr-entry-sections {
  font-size: 0.68rem;
  color: var(--text-light);
  margin-top: 6px;
}

/* --- 详情页头部 --- */
.wr-detail-header {
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--primary-light);
}
.wr-detail-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-main);
  margin: 8px 0 4px;
}
.wr-detail-source {
  font-size: 0.7rem;
  color: var(--text-light);
}
.wr-back-btn {
  background: none;
  border: 1px solid var(--border-color);
  color: var(--text-sub);
  font-size: 0.78rem;
  padding: 4px 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: border-color 0.15s;
}
.wr-back-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
}

/* --- 母卡分区 --- */
.wr-master-section {
  margin-bottom: 16px;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-lg);
  overflow: hidden;
}
.wr-master-section-title {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-main);
  padding: 10px 14px;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border-color);
}
.wr-master-section-body {
  padding: 12px 14px;
}
.wr-master-row {
  font-size: 0.78rem;
  color: var(--text-sub);
  line-height: 1.8;
  padding: 2px 0;
}
.wr-master-row b {
  color: var(--text-main);
  font-weight: 600;
}
.wr-master-desc {
  font-size: 0.78rem;
  color: var(--text-sub);
  line-height: 1.6;
  margin-bottom: 10px;
}
.wr-master-subtitle {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-main);
  margin: 8px 0 6px;
}

/* --- 逻辑卡片 --- */
.wr-logic-block {
  background: #F8F9FB;
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 8px;
}
.wr-logic-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-main);
  margin-bottom: 4px;
}
.wr-tag {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  background: #534AB7;
  color: #fff;
  padding: 1px 8px;
  border-radius: 4px;
  margin-right: 6px;
  vertical-align: middle;
}
.wr-logic-desc {
  font-size: 0.78rem;
  color: var(--text-sub);
  line-height: 1.6;
}
.wr-logic-overview {
  font-size: 0.75rem;
  color: var(--primary-dark);
  font-weight: 600;
  margin-top: 6px;
  padding: 6px 8px;
  background: #FEF9E7;
  border-radius: 4px;
  line-height: 1.5;
}

/* --- 阶段拆解 --- */
.wr-stage-block {
  background: #F8F9FB;
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 8px;
}
.wr-stage-name {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--primary-dark);
  margin-bottom: 6px;
}
.wr-stage-logic {
  font-size: 0.75rem;
  color: var(--text-sub);
  margin-bottom: 6px;
}
.wr-stage-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.wr-step-tag {
  display: inline-block;
  font-size: 0.72rem;
  color: var(--text-main);
  background: #fff;
  border: 1px solid var(--border-color);
  padding: 3px 8px;
  border-radius: 4px;
  white-space: nowrap;
}

/* --- 模板卡片 --- */
.wr-tmpl-block {
  background: #F8F9FB;
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 8px;
}
.wr-link-group-label {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-light);
  margin: 8px 0 4px;
}
.wr-link-group-label:first-child { margin-top: 2px; }
.wr-feat-lang-unit {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin: 6px 0;
  padding: 6px 8px;
  background: #fff;
  border: 1px solid #ECEFF3;
  border-radius: 6px;
}
.wr-tmpl-name {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 4px;
}
.wr-tmpl-text {
  font-size: 0.82rem;
  color: var(--primary-dark);
  font-family: var(--font-mono);
  background: #fff;
  padding: 8px 10px;
  border-radius: 6px;
  line-height: 1.6;
  margin: 4px 0;
  border: 1px solid #E8E8EC;
}
.wr-tmpl-applicable {
  font-size: 0.7rem;
  color: var(--text-light);
  margin-top: 2px;
}

/* --- 句型模式 --- */
.wr-pattern-row {
  padding: 6px 0;
  border-bottom: 1px solid #F0F0F2;
  line-height: 1.7;
}
.wr-pattern-label {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--primary);
  background: var(--primary-bg);
  padding: 1px 6px;
  border-radius: 3px;
  margin-right: 6px;
  vertical-align: middle;
}
.wr-pattern-tmpl {
  font-size: 0.78rem;
  color: var(--primary-dark);
  background: #F8F9FB;
  padding: 1px 6px;
  border-radius: 3px;
}
.wr-pattern-example {
  display: block;
  font-size: 0.72rem;
  color: var(--text-light);
  margin-top: 3px;
  padding-left: 8px;
  border-left: 2px solid #E8E8EC;
}

/* --- 语法提醒 --- */
.wr-grammar-principle {
  font-size: 0.85rem;
  font-weight: 700;
  color: #D85A30;
  margin-bottom: 6px;
}
.wr-grammar-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 8px;
  font-size: 0.78rem;
}
.wr-grammar-table th {
  text-align: left;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-sub);
  padding: 6px 10px;
  background: #F8F9FB;
  border-bottom: 1px solid var(--border-color);
}
.wr-grammar-table td {
  padding: 6px 10px;
  border-bottom: 1px solid #F0F0F2;
  line-height: 1.5;
}

/* --- 可迁移映射 --- */
.wr-transfer-block {
  background: #F8F9FB;
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 8px;
  border-left: 3px solid #1D9E75;
}
.wr-transfer-cat {
  font-size: 0.8rem;
  font-weight: 700;
  color: #0F6E56;
  margin-bottom: 4px;
}
.wr-transfer-examples {
  font-size: 0.75rem;
  color: var(--text-sub);
  margin-bottom: 3px;
}
.wr-transfer-words {
  font-size: 0.72rem;
  color: var(--text-light);
  font-style: italic;
}

/* --- 考场思维模型 --- */
.wr-quick-q {
  font-size: 0.78rem;
  color: var(--text-main);
  padding: 6px 0;
  line-height: 1.6;
}
.wr-quick-q-icon {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 800;
  color: #fff;
  background: #534AB7;
  width: 24px;
  height: 24px;
  line-height: 24px;
  text-align: center;
  border-radius: 50%;
  margin-right: 8px;
  vertical-align: middle;
}
.wr-universal-chain {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--primary-dark);
  margin-top: 10px;
  padding: 10px 12px;
  background: #FEF9E7;
  border-radius: 8px;
  text-align: center;
  border: 1px dashed #F1C40F;
}

/* --- 一句话总结 --- */
.wr-summary-line {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--primary-dark);
  text-align: center;
  padding: 10px;
  font-style: italic;
  line-height: 1.6;
}

/* --- 我的补充 --- */
.wr-supplement-section {
  border-color: #1D9E75;
}
.wr-supplement-section .wr-master-section-title {
  background: #E1F5EE;
  color: #0F6E56;
}
.wr-supplement-textarea {
  width: 100%;
  min-height: 120px;
  font-size: 0.78rem;
  font-family: var(--font-sans);
  color: var(--text-main);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 10px 12px;
  line-height: 1.7;
  resize: vertical;
  box-sizing: border-box;
  transition: border-color 0.15s;
}
.wr-supplement-textarea:focus {
  outline: none;
  border-color: #1D9E75;
}
.wr-supplement-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}
.wr-supplement-save-btn {
  font-size: 0.78rem;
  font-weight: 600;
  color: #fff;
  background: #1D9E75;
  border: none;
  padding: 6px 16px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s;
}
.wr-supplement-save-btn:hover {
  background: #0F6E56;
}
.wr-supplement-status {
  font-size: 0.72rem;
}
.wr-supplement-status.saved { color: #1D9E75; }
.wr-supplement-status.error { color: #D85A30; }

/* --- 练习记录 --- */
.wr-no-records {
  font-size: 0.78rem;
  color: var(--text-light);
  text-align: center;
  padding: 20px 0;
  line-height: 1.8;
}
.wr-record-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}
.wr-record-date {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-main);
}
.wr-record-score {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--primary-dark);
}
.wr-record-meta {
  font-size: 0.7rem;
  color: var(--text-light);
  margin-bottom: 4px;
}
.wr-record-expr {
  font-size: 0.72rem;
  color: #0F6E56;
  margin-top: 4px;
  padding: 4px 8px;
  background: #E1F5EE;
  border-radius: 4px;
  line-height: 1.5;
}

/* --- T1 三级知识系统架构 --- */
.wr-arch-entry {
  border-left-width: 4px;
  border-left-style: solid;
  padding: 14px;
  margin-bottom: 10px;
  transition: transform 0.15s, box-shadow 0.15s;
}
.wr-arch-entry:active {
  transform: scale(0.98);
}
.wr-arch-entry .wr-chart-name {
  font-size: 0.88rem;
}
.wr-arch-entry .wr-chart-cn {
  font-size: 0.72rem;
  color: var(--text-sub);
}

/* --- 交叉引用标签 --- */
.wr-feature-link,
.wr-language-link {
  font-size: 0.68rem;
  font-weight: 600;
  font-family: var(--font-mono);
  transition: background 0.15s;
}
.wr-feature-link:hover {
  background: #FDF2E9 !important;
}
.wr-language-link:hover {
  background: #E8F8F0 !important;
}

/* --- 特征/语言库卡片高亮 --- */
.wr-master-section[id^="feature-"],
.wr-master-section[id^="language-"] {
  transition: box-shadow 0.3s;
}
.wr-master-section[id^="feature-"]:target,
.wr-master-section[id^="language-"]:target {
  box-shadow: 0 0 0 3px #E67E22;
}
.wr-master-section[id^="language-"]:target {
  box-shadow: 0 0 0 3px #1D9E75;
}

/* --- 特征卡 + 内联表达（Feature + Language 合体） --- */
.wr-feature-card {
  margin-bottom: 16px;
  border: 1px solid var(--border-color);
  border-left: 4px solid #E67E22;
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  background: #fff;
}
.wr-feature-head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  background: #FFF7EF;
  border-bottom: 1px solid var(--border-color);
}
.wr-feature-name {
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--text-main);
}
.wr-feature-cn {
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--text-light);
  margin-left: 4px;
}
.wr-feature-desc {
  font-size: 0.8rem;
  color: var(--text-sub);
  line-height: 1.6;
  padding: 10px 14px 0;
}
.wr-feature-expressions {
  padding: 4px 14px 12px;
}
.wr-exp-label {
  font-size: 0.78rem;
  font-weight: 700;
  color: #0F6E56;
  margin: 10px 0 6px;
}
.wr-exp-item {
  background: #F0FAF6;
  border: 1px solid #CFEFE3;
  border-radius: 8px;
  padding: 8px 10px;
  margin-bottom: 8px;
}
.wr-exp-head {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 2px;
}
.wr-exp-tag {
  background: #1D9E75 !important;
}
.wr-exp-expression {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-main);
}
.wr-exp-usage {
  font-size: 0.74rem;
  color: var(--text-sub);
  margin-bottom: 4px;
}
.wr-exp-variants {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 4px;
}
.wr-exp-variants .wr-step-tag {
  border-color: #1D9E75;
  color: #0F6E56;
}
.wr-exp-example {
  font-size: 0.76rem;
  color: var(--primary-dark);
  font-style: italic;
  line-height: 1.5;
  background: #fff;
  border-radius: 6px;
  padding: 6px 8px;
}

/* ===== Knowledge Library: unified concept card (feature+language fused) ===== */
.wr-kp-card {
  margin-bottom: 16px;
  border: 1px solid var(--border-color);
  border-left: 4px solid #534AB7;
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  background: #fff;
}
.wr-kp-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  padding: 10px 14px;
  background: #F3F1FB;
  border-bottom: 1px solid var(--border-color);
}
.wr-kp-id {
  font-size: 0.86rem;
  font-weight: 700;
  color: #534AB7;
  letter-spacing: 0.3px;
}
.wr-kp-name {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-main);
}
.wr-kp-section {
  padding: 8px 14px 0;
}
.wr-kp-label {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-light);
  margin-bottom: 2px;
}
.wr-kp-text {
  font-size: 0.8rem;
  color: var(--text-sub);
  line-height: 1.6;
}
.wr-kp-expr {
  background: #F0FAF6;
  border: 1px solid #CFEFE3;
  border-radius: 8px;
  padding: 8px 10px;
  margin: 6px 0 8px;
}
.wr-kp-expr-expression {
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--text-main);
  line-height: 1.5;
  word-break: break-word;
  overflow-wrap: anywhere;
  white-space: normal;
}
.wr-kp-expr-usage {
  font-size: 0.74rem;
  color: var(--text-sub);
  margin: 2px 0 4px;
  line-height: 1.5;
  word-break: break-word;
  overflow-wrap: anywhere;
}
.wr-kp-expr-variants {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 4px;
}
.wr-kp-expr-variants .wr-step-tag {
  border-color: #1D9E75;
  color: #0F6E56;
  word-break: break-word;
  overflow-wrap: anywhere;
  white-space: normal;
}
.wr-kp-expr-example {
  font-size: 0.76rem;
  color: var(--primary-dark);
  font-style: italic;
  line-height: 1.5;
  background: #fff;
  border-radius: 6px;
  padding: 6px 8px;
  word-break: break-word;
  overflow-wrap: anywhere;
}
.wr-kp-link {
  background: #F3F1FB;
}

/* ===== Knowledge Library: concept quick navigation (sticky so it's always reachable) ===== */
.wr-kp-nav {
  position: sticky;
  top: 56px;
  z-index: 50;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 10px 14px;
  margin-bottom: 10px;
  background: rgba(255,255,255,0.96);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-radius: var(--radius);
  box-shadow: 0 2px 12px rgba(0,0,0,0.10);
}
.wr-kp-nav::-webkit-scrollbar { display: none; }
.wr-kp-nav-label {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-light);
  flex-shrink: 0;
  align-self: center;
  margin-right: 2px;
}
.wr-kp-nav-back {
  position: sticky;
  left: 0;
  z-index: 2;
  flex: 0 0 auto;
  padding: 5px 12px;
  border-radius: 16px;
  background: var(--primary);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 3px 0 8px rgba(255,255,255,0.9);
}
.wr-kp-nav-back:active {
  background: var(--primary-dark);
}
.wr-kp-nav-chip {
  flex: 0 0 auto;
  padding: 5px 10px;
  border: 1px solid #DEDAF5;
  border-radius: 16px;
  background: #F8F7FD;
  color: #534AB7;
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wr-kp-nav-chip:active {
  background: #534AB7;
  color: #fff;
  border-color: #534AB7;
}

/* ============================================================
   Knowledge Inbox (知识收集箱)
   ============================================================ */

/* --- Header --- */
.kn-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: linear-gradient(135deg, #E8F4FD 0%, #D4EEFF 100%);
  border-radius: 12px;
  margin-bottom: 12px;
}
.kn-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
}
.kn-header-icon {
  font-size: 1.6rem;
}
.kn-header-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-main);
}
.kn-header-count {
  font-size: 0.7rem;
  color: var(--text-light);
  margin-top: 2px;
}
.kn-add-btn {
  padding: 8px 16px;
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s;
}
.kn-add-btn:hover {
  background: var(--primary-dark);
}
.kn-lark-btn {
  background: #E8F3EC;
  color: #1F7A3D;
  margin-right: 8px;
}
.kn-lark-btn:hover {
  background: #D6EBDD;
  color: #16602F;
}
.kn-sync-hint {
  font-size: 0.7rem;
  color: var(--text-light);
  line-height: 1.5;
  margin: 8px 0 0;
  padding: 7px 10px;
  background: #FAFAFA;
  border-left: 3px solid var(--border-color);
  border-radius: 4px;
}

/* --- Search --- */
.kn-search-wrap {
  margin-bottom: 10px;
}
.kn-search-input {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  font-size: 0.82rem;
  box-sizing: border-box;
  outline: none;
  transition: border-color 0.15s;
}
.kn-search-input:focus {
  border-color: var(--primary);
}

/* --- Filters --- */
.kn-filter-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.kn-filter-label {
  font-size: 0.7rem;
  color: var(--text-light);
  margin-right: 4px;
  min-width: 28px;
}
.kn-filter-chip {
  padding: 4px 10px;
  border: 1px solid var(--border-color);
  border-radius: 14px;
  background: #fff;
  font-size: 0.72rem;
  color: var(--text-sub);
  cursor: pointer;
  transition: all 0.15s;
}
.kn-filter-chip:hover {
  border-color: var(--primary);
  color: var(--primary);
}
.kn-filter-chip.active {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

/* --- Date Group --- */
.kn-date-group {
  margin-bottom: 12px;
}
.kn-date-label {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-light);
  margin-bottom: 6px;
  padding-left: 2px;
}

/* --- Card --- */
.kn-card {
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 12px;
  margin-bottom: 8px;
  transition: box-shadow 0.15s;
}
.kn-card:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.kn-card-top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.kn-card-type {
  font-size: 0.7rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
  background: #F0F0FF;
  color: #5B5BFF;
}
.kn-card-type[data-type="argument"] { background: #FFF8E1; color: #B8860B; }
.kn-card-type[data-type="template"] { background: #E8F5E9; color: #1D9E75; }
.kn-card-type[data-type="error"] { background: #FFEBEE; color: #D32F2F; }
.kn-card-type[data-type="example"] { background: #F3E5F5; color: #7B1FA2; }

.kn-card-task {
  font-size: 0.7rem;
  color: var(--text-sub);
}
.kn-card-topic {
  font-size: 0.7rem;
  color: var(--primary-dark);
  font-weight: 500;
}
.kn-card-source {
  font-size: 0.65rem;
  color: var(--text-light);
  margin-left: auto;
}
.kn-card-del {
  background: none;
  border: none;
  color: #ccc;
  cursor: pointer;
  font-size: 0.85rem;
  padding: 0 2px;
  line-height: 1;
  transition: color 0.15s;
}
.kn-card-del:hover {
  color: #D32F2F;
}

.kn-card-content {
  font-size: 0.82rem;
  color: var(--text-main);
  line-height: 1.7;
  white-space: pre-wrap;
  word-break: break-word;
}

.kn-card-tags {
  margin-top: 8px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.kn-card-tag {
  font-size: 0.65rem;
  color: var(--text-light);
  background: #F5F5F5;
  padding: 2px 8px;
  border-radius: 8px;
}

/* --- Empty State --- */
.kn-empty {
  text-align: center;
  padding: 40px 20px;
}
.kn-empty-icon {
  font-size: 2.5rem;
  margin-bottom: 12px;
}
.kn-empty-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-main);
  margin-bottom: 8px;
}
.kn-empty-desc {
  font-size: 0.78rem;
  color: var(--text-light);
  line-height: 1.6;
  margin-bottom: 16px;
}
.kn-empty-btn {
  padding: 10px 24px;
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
}

/* --- Footer --- */
.kn-footer {
  text-align: center;
  padding: 16px 0 8px;
}
.kn-export-btn {
  padding: 8px 20px;
  background: transparent;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  font-size: 0.75rem;
  color: var(--text-sub);
  cursor: pointer;
  transition: all 0.15s;
}
.kn-export-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
}
.kn-copy-btn {
  border-color: var(--primary);
  color: var(--primary);
  font-weight: 600;
}

/* ===== Cambridge Questions Tracker (upgraded: card view) ===== */
.wr-cq-empty {
  font-size: 0.75rem;
  color: var(--text-light);
  padding: 12px 0;
  font-style: italic;
}
.wr-cq-card-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
}
.wr-cq-card {
  background: var(--bg-white);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 14px 16px;
  transition: border-color 0.2s;
}
.wr-cq-card:hover { border-color: var(--primary-light); }
.wr-cq-card-question {
  font-size: 0.78rem;
  color: var(--text-main);
  line-height: 1.65;
  margin-bottom: 10px;
  white-space: pre-line;
  word-break: break-word;
}
.wr-cq-card-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.wr-cq-source-tag {
  display: inline-block;
  background: var(--primary-bg);
  color: var(--primary-dark);
  font-size: 0.7rem;
  padding: 3px 10px;
  border-radius: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.wr-cq-topic-tag {
  display: inline-block;
  background: #EBF4FF;
  color: #2563EB;
  font-size: 0.68rem;
  padding: 3px 10px;
  border-radius: 12px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s;
}
.wr-cq-topic-tag:hover { background: #DBEAFE; }
.wr-cq-date {
  font-size: 0.68rem;
  color: var(--text-light);
  margin-left: auto;
}
.wr-cq-del {
  width: 24px;
  height: 24px;
  border: none;
  background: transparent;
  color: #D85A30;
  font-size: 1rem;
  cursor: pointer;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.wr-cq-del:hover { background: #FDE8E4; }

/* Add form */
.wr-cq-add-form {
  margin-top: 8px;
}
.wr-cq-add-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-main);
  margin-bottom: 8px;
}
.wr-cq-textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  font-size: 0.75rem;
  line-height: 1.5;
  resize: vertical;
  box-sizing: border-box;
  margin-bottom: 8px;
}
.wr-cq-textarea:focus {
  outline: none;
  border-color: var(--primary-light);
}
.wr-cq-add-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.wr-cq-input {
  flex: 1;
  padding: 7px 10px;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  font-size: 0.75rem;
  min-width: 0;
}
.wr-cq-add-btn {
  flex-shrink: 0;
  font-size: 0.75rem;
  padding: 7px 14px;
}

/* ===== Essay Detail (T2) ===== */
.wr-tpl-tips {
  font-size: 0.75rem;
  color: var(--text-main);
  line-height: 1.7;
  padding: 4px 0;
}
.wr-tpl-row {
  font-size: 0.75rem;
  color: var(--text-main);
  padding: 6px 0;
  border-bottom: 1px solid var(--border-color);
  line-height: 1.6;
}
.wr-tpl-row:last-child { border-bottom: none; }
.wr-tpl-block {
  padding: 10px 12px;
  margin-bottom: 8px;
  background: var(--bg-light);
  border-radius: 8px;
  border: 1px solid var(--border-color);
}
.wr-tmpl-name {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--primary-dark);
  margin-bottom: 4px;
}
.wr-tmpl-desc {
  font-size: 0.73rem;
  color: var(--text-main);
  line-height: 1.6;
}

/* ===== Topic Material Library ===== */

/* Entry card in writing list */
.wr-tml-entry {
  cursor: pointer;
  border: 2px dashed var(--primary-light) !important;
  background: var(--primary-bg) !important;
  transition: all 0.2s;
}
.wr-tml-entry:hover {
  border-color: var(--primary) !important;
  background: #FFF0F0 !important;
}

/* Root containers */
.tml-root {
  max-width: 100%;
}
.tml-detail-root {
  max-width: 100%;
}

/* Search */
.tml-search-row {
  padding: 8px 16px 0;
}
.tml-search-input {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 0.8rem;
  background: var(--bg-card);
  color: var(--text-main);
  outline: none;
  transition: border-color 0.2s;
}
.tml-search-input:focus {
  border-color: var(--primary);
}
.tml-search-input::placeholder {
  color: var(--text-light);
}

/* Category filter chips */
.tml-cats {
  padding: 10px 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.tml-cat-chip {
  font-size: 0.7rem;
  padding: 5px 12px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-sub);
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.tml-cat-chip:hover {
  border-color: var(--primary-light);
  color: var(--primary-dark);
}
.tml-cat-chip.active {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
  font-weight: 600;
}
.tml-cat-fav {
  border-color: #FFD700;
  color: #B8860B;
}
.tml-cat-fav.active {
  background: #FFD700;
  color: #5C3D00;
  border-color: #FFD700;
}

/* Empty state */
.tml-empty {
  text-align: center;
  padding: 40px 20px;
  font-size: 0.8rem;
  color: var(--text-light);
  line-height: 1.8;
}

/* Card Grid */
.tml-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
  padding: 8px 16px 24px;
}

/* Individual Topic Card */
.tml-card {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tml-card:hover {
  border-color: var(--primary-light);
  box-shadow: 0 4px 16px rgba(255,107,107,0.1);
  transform: translateY(-1px);
}
.tml-card-star {
  position: absolute;
  top: 10px;
  right: 12px;
  font-size: 1rem;
  cursor: pointer;
  color: var(--text-light);
  transition: transform 0.15s;
  z-index: 2;
}
.tml-card-star:hover {
  transform: scale(1.2);
}
.tml-card-star.favorited {
  color: #FFD700;
}
.tml-card-title {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-main);
  line-height: 1.3;
  padding-right: 24px;
}
.tml-card-cats {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.tml-card-cat {
  font-size: 0.62rem;
  padding: 3px 8px;
  border-radius: 10px;
  background: var(--primary-bg);
  color: var(--primary-dark);
  font-weight: 500;
}
.tml-card-stats {
  display: flex;
  gap: 12px;
  font-size: 0.68rem;
  color: var(--text-sub);
  margin-top: auto;
}

/* Detail: category + fav row */
.tml-detail-cats {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.tml-detail-fav {
  font-size: 0.75rem;
  color: var(--text-sub);
  background: var(--bg-main);
  padding: 3px 10px;
  border-radius: 12px;
  border: 1px solid var(--border);
  transition: all 0.15s;
  user-select: none;
}
.tml-detail-fav:hover {
  border-color: #FFD700;
}
.tml-detail-fav.favorited {
  color: #B8860B;
  border-color: #FFD700;
  background: #FFFDE7;
}

/* Core Idea Block */
.tml-idea-block {
  background: var(--bg-main);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px;
  margin-bottom: 12px;
}
.tml-idea-block:last-child {
  margin-bottom: 0;
}
.tml-idea-header {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--primary-dark);
  margin-bottom: 6px;
  line-height: 1.4;
}
.tml-idea-explain {
  font-size: 0.75rem;
  color: var(--text-main);
  line-height: 1.6;
  margin-bottom: 10px;
}
.tml-idea-subtitle {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--text-sub);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.tml-idea-example {
  font-size: 0.74rem;
  color: var(--secondary);
  background: #F0FDFA;
  padding: 10px 12px;
  border-radius: 8px;
  border-left: 3px solid var(--secondary);
  line-height: 1.5;
  font-style: italic;
}

/* Expression Chips */
.tml-expr-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 4px;
}
.tml-expr-chip {
  font-size: 0.68rem;
  padding: 4px 10px;
  border-radius: 12px;
  background: #EEF2FF;
  color: #4338CA;
  border: 1px solid #C7D2FE;
  font-weight: 500;
  white-space: nowrap;
}

/* Vocabulary Table */
.tml-vocab-table {
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}
.tml-vocab-header,
.tml-vocab-row {
  display: grid;
  grid-template-columns: 2fr 1.2fr 3fr;
  gap: 8px;
  padding: 10px 12px;
  font-size: 0.72rem;
  align-items: center;
}
.tml-vocab-header {
  background: var(--primary-bg);
  font-weight: 700;
  color: var(--primary-dark);
  font-size: 0.7rem;
}
.tml-vocab-row {
  border-top: 1px solid var(--border);
}
.tml-vocab-phrase {
  font-weight: 600;
  color: var(--text-main);
}
.tml-vocab-meaning {
  color: var(--text-sub);
}
.tml-vocab-usage {
  color: var(--text-sub);
  font-size: 0.68rem;
  line-height: 1.4;
}

/* Synonym Bank */
.tml-syn-group {
  background: var(--bg-main);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px;
  margin-bottom: 10px;
}
.tml-syn-group:last-child {
  margin-bottom: 0;
}
.tml-syn-label {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 8px;
}
.tml-syn-words {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.tml-syn-chip {
  font-size: 0.68rem;
  padding: 4px 10px;
  border-radius: 12px;
  background: #FFF7ED;
  color: #C2410C;
  border: 1px solid #FED7AA;
  font-weight: 500;
}

/* Related Topics */
.tml-related-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.tml-related-chip {
  font-size: 0.7rem;
  padding: 5px 12px;
  border-radius: 14px;
  background: #F0FDF4;
  color: #166534;
  border: 1px solid #BBF7D0;
  font-weight: 500;
}

/* ========================================
   Techniques (技巧) Styles
   ======================================== */

.tech-main-title {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--text-main);
  margin: 20px 0 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--primary);
}
.tech-main-title:first-child {
  margin-top: 0;
}

.tech-card {
  background: var(--bg-card);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 10px;
  box-shadow: var(--shadow);
}

.tech-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.tech-part-badge {
  display: inline-block;
  font-size: 0.62rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 8px;
  background: var(--primary-bg);
  color: var(--primary);
  flex-shrink: 0;
}
.tech-part-badge.p3 { background: #EDE7F6; color: #6C3FAA; }
.tech-part-badge.allp { background: #E8F5E9; color: #2E7D32; }

.tech-card-title {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text-main);
  flex: 1;
}

.tech-time {
  font-size: 0.72rem;
  color: var(--primary);
  font-weight: 600;
  flex-shrink: 0;
}

.tech-structure {
  font-size: 0.82rem;
  color: var(--text-main);
  line-height: 1.6;
  background: var(--bg-main);
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  margin-bottom: 8px;
}

.tech-subsection {
  margin-bottom: 8px;
}

.tech-sub-label {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--primary-dark);
  margin-bottom: 4px;
}

.tech-sub-content {
  font-size: 0.8rem;
  color: var(--text-sub);
  line-height: 1.6;
  background: var(--bg-main);
  padding: 8px 12px;
  border-radius: var(--radius-sm);
}

.tech-tips {
  margin-top: 8px;
}

.tech-tip {
  font-size: 0.75rem;
  color: #C0392B;
  background: #FDF2F2;
  padding: 4px 10px;
  border-radius: 6px;
  margin-bottom: 4px;
  line-height: 1.5;
}

/* Quick Thinking */
.tech-motto {
  font-size: 1rem;
  font-weight: 800;
  color: var(--primary);
  text-align: center;
  padding: 8px;
  background: var(--primary-bg);
  border-radius: var(--radius-sm);
  margin-bottom: 10px;
}

.tech-steps {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 10px;
}

.tech-step {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}

.tech-step-name {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--primary-dark);
  flex-shrink: 0;
  min-width: 60px;
}

.tech-step-desc {
  font-size: 0.78rem;
  color: var(--text-sub);
  line-height: 1.5;
}

.tech-examples {
  margin-bottom: 8px;
}

.tech-example-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 0;
  font-size: 0.75rem;
  border-bottom: 1px solid var(--border);
}
.tech-example-row:last-child {
  border-bottom: none;
}

.tech-ex-subject {
  font-weight: 700;
  color: var(--text-main);
  flex-shrink: 0;
}

.tech-ex-behavior {
  color: var(--text-sub);
  flex: 1;
}

.tech-ex-arrow {
  color: var(--text-light);
  flex-shrink: 0;
}

.tech-ex-trait {
  color: var(--primary-dark);
  font-weight: 600;
  flex-shrink: 0;
  text-align: right;
}

.tech-exercise {
  font-size: 0.75rem;
  color: var(--text-main);
  background: #FFF9E6;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  border-left: 3px solid #F1C40F;
  line-height: 1.5;
}

/* Deep Expansion */
.tech-deep-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.tech-deep-item {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
}
.tech-deep-item:last-child {
  border-bottom: none;
}

.tech-deep-method {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--primary-dark);
  flex-shrink: 0;
  min-width: 90px;
}

.tech-deep-desc {
  font-size: 0.78rem;
  color: var(--text-sub);
  line-height: 1.5;
}

/* Topic Directions */
.tech-topic-dir-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.tech-topic-dir {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
}
.tech-topic-dir:last-child {
  border-bottom: none;
}

.tech-td-cat {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-main);
  flex-shrink: 0;
  min-width: 70px;
}

.tech-td-dirs {
  font-size: 0.75rem;
  color: var(--text-sub);
  line-height: 1.5;
}

/* Combos */
.tech-combo {
  background: var(--bg-main);
  border-radius: var(--radius-sm);
  padding: 12px;
  margin-bottom: 8px;
  border-left: 3px solid var(--primary);
}
.tech-combo:last-child {
  margin-bottom: 0;
}

.tech-combo-name {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--primary-dark);
  margin-bottom: 8px;
}

.tech-combo-line {
  display: flex;
  gap: 8px;
  padding: 3px 0;
}

.tech-combo-stage {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--primary);
  flex-shrink: 0;
  min-width: 40px;
}

.tech-combo-text {
  font-size: 0.78rem;
  color: var(--text-main);
  line-height: 1.5;
  font-style: italic;
}

.tech-combo-fit {
  font-size: 0.7rem;
  color: var(--text-sub);
  margin-top: 6px;
  padding: 4px 8px;
  background: var(--bg-card);
  border-radius: 4px;
}

/* String Method */
.tech-string-desc {
  font-size: 0.8rem;
  color: var(--text-sub);
  line-height: 1.6;
  background: var(--bg-main);
  padding: 10px 12px;
  border-radius: var(--radius-sm);
}

/* Listening Core Method */
.tech-core-method {
  border-left: 3px solid var(--primary);
}
.tech-core-title {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--primary-dark);
  flex: 1;
  line-height: 1.4;
}
.tech-core-summary {
  font-size: 0.85rem;
  color: var(--text-main);
  font-weight: 600;
  line-height: 1.6;
  background: var(--primary-bg);
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  margin-bottom: 12px;
}
.tech-core-step {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
}
.tech-core-step-no {
  flex-shrink: 0;
  font-size: 0.72rem;
  font-weight: 800;
  color: #fff;
  background: var(--primary);
  padding: 4px 8px;
  border-radius: 8px;
  height: fit-content;
  white-space: nowrap;
}
.tech-core-step-body {
  flex: 1;
}
.tech-core-step-name {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 4px;
}
.tech-core-step-desc {
  font-size: 0.8rem;
  color: var(--text-sub);
  line-height: 1.6;
}
.tech-core-points {
  margin: 6px 0 0;
  padding-left: 18px;
}
.tech-core-points li {
  font-size: 0.78rem;
  color: var(--text-sub);
  line-height: 1.6;
  margin-bottom: 2px;
}
.tech-core-pitfall {
  margin-top: 6px;
  padding: 12px;
  border-radius: var(--radius-sm);
  background: #FDF2F2;
  border: 1px solid #F5C6C6;
}
.tech-core-pitfall-title {
  font-size: 0.85rem;
  font-weight: 800;
  color: #C0392B;
  margin-bottom: 8px;
  line-height: 1.4;
}
.tech-core-pitfall-wrong {
  font-size: 0.78rem;
  color: #A94442;
  line-height: 1.6;
  margin-bottom: 8px;
}
.tech-core-pitfall-right {
  font-size: 0.78rem;
  color: #2E7D32;
  font-weight: 600;
  line-height: 1.6;
}

/* ========================================
   Vocab Stories — 词汇记忆故事
   ======================================== */

.vocab-overview {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}
.vocab-stat {
  flex: 1;
  background: var(--bg-card);
  border-radius: var(--radius);
  padding: 12px 8px;
  text-align: center;
  box-shadow: var(--shadow);
}
.vocab-stat-num {
  display: block;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--primary);
  line-height: 1.2;
}
.vocab-stat-label {
  display: block;
  font-size: 0.65rem;
  color: var(--text-light);
  margin-top: 2px;
}

.vocab-filters {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
}
.vocab-filter-chip {
  padding: 5px 14px;
  border-radius: 20px;
  font-size: 0.78rem;
  font-weight: 500;
  background: var(--bg-card);
  color: var(--text-sub);
  cursor: pointer;
  transition: all 0.2s;
  border: 1px solid var(--border);
}
.vocab-filter-chip.active {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

.vocab-search-bar {
  margin-bottom: 12px;
}
.vocab-search-bar input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  background: var(--bg-card);
  color: var(--text-main);
  box-sizing: border-box;
}

.vocab-story-card {
  background: var(--bg-card);
  border-radius: var(--radius);
  padding: 14px;
  margin-bottom: 10px;
  box-shadow: var(--shadow);
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 12px;
}
.vocab-story-card:active {
  transform: scale(0.98);
}
.vocab-card-body {
  flex: 1;
  min-width: 0;
}
.vocab-card-cover {
  position: relative;
  flex-shrink: 0;
  width: 116px;
  height: 116px;
  align-self: center;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--bg-card);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
}
.vocab-card-cover img {
  width: 116px;
  height: 116px;
  object-fit: contain;
  display: block;
}
.vocab-cover-badge {
  position: absolute;
  left: 8px;
  bottom: 8px;
  background: rgba(0,0,0,0.55);
  color: #fff;
  font-size: 0.66rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
}
.vocab-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.vocab-cat-badge {
  font-size: 0.7rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
}
.vocab-cat-badge.cat-reading {
  background: rgba(74, 144, 226, 0.15);
  color: #4a90e2;
}
.vocab-cat-badge.cat-listening {
  background: rgba(232, 165, 61, 0.15);
  color: #e8a53d;
}
.vocab-cat-badge.cat-writing {
  background: rgba(126, 87, 194, 0.15);
  color: #7e57c2;
}
.vocab-word-count {
  font-size: 0.7rem;
  color: var(--text-light);
}
.vocab-card-title {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text-main);
  line-height: 1.3;
}
.vocab-card-title-zh {
  font-size: 0.82rem;
  color: var(--text-sub);
  margin-top: 2px;
}
.vocab-card-words {
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.vocab-preview {
  font-size: 0.72rem;
  color: var(--text-light);
  line-height: 1.4;
}
.vocab-more {
  font-size: 0.7rem;
  color: var(--primary);
  font-weight: 600;
  white-space: nowrap;
}

/* 学习进度概览（第二行） */
.vocab-overview-progress {
  margin-top: -6px;
  padding-top: 10px;
  border-top: 1px dashed var(--border);
}
.vocab-stat-progress .vocab-stat-num {
  color: var(--text-main);
}

/* 跨设备同步提醒框（2026-08-11） */
.vocab-sync-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: #fff8e6;
  border: 1px solid #f4d58d;
  border-radius: var(--radius);
  padding: 10px 12px;
  margin-bottom: 14px;
  font-size: 0.78rem;
  line-height: 1.5;
  color: #8a6d2f;
}
.vocab-sync-icon {
  flex-shrink: 0;
  font-size: 0.95rem;
  line-height: 1.4;
}
.vocab-sync-text b {
  color: #b8860b;
}

/* 故事卡学习状态徽章 */
.vocab-study-badge {
  font-size: 0.66rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
  white-space: nowrap;
}
.vocab-study-badge.unstudied {
  background: rgba(120, 120, 120, 0.14);
  color: #6b7280;
}
.vocab-study-badge.studied {
  background: rgba(74, 144, 226, 0.16);
  color: #2f6fb0;
}

/* 故事卡「学过了」按钮 */
.vocab-card-actions {
  margin-top: 10px;
  display: flex;
  justify-content: flex-end;
}
.vocab-mini-bump {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 14px;
  border: 1px solid rgba(74, 144, 226, 0.4);
  background: rgba(74, 144, 226, 0.08);
  color: #2f6fb0;
  cursor: pointer;
  transition: background 0.15s;
}
.vocab-mini-bump:active {
  background: rgba(74, 144, 226, 0.2);
}

/* 弹窗底部学习按钮 */
.vocab-modal-footer {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: center;
}
.vocab-bump-btn {
  font-size: 0.85rem;
  font-weight: 600;
  padding: 9px 22px;
  border-radius: 18px;
  border: none;
  background: var(--primary);
  color: #fff;
  cursor: pointer;
  transition: opacity 0.15s;
}
.vocab-bump-btn:active {
  opacity: 0.85;
}

/* 待生成词汇区 */
.vocab-pending-section {
  background: var(--bg-card);
  border-radius: var(--radius);
  padding: 12px 14px;
  margin-bottom: 10px;
  border: 1px dashed var(--border);
}
.vocab-pending-title {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-main);
}
.vocab-pending-hint {
  font-size: 0.68rem;
  color: var(--text-light);
  margin-top: 2px;
  margin-bottom: 8px;
}
.vocab-pending-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.vocab-pending-chip {
  font-size: 0.72rem;
  padding: 3px 10px;
  border-radius: 12px;
  background: var(--bg-main);
  color: var(--text-sub);
  border: 1px solid var(--border);
}

/* 词汇故事详情弹窗 */
#vocab-modal .modal-body {
  padding: 16px;
}
.vocab-section-label {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-main);
  margin-top: 14px;
  margin-bottom: 6px;
  padding-bottom: 3px;
  border-bottom: 1px solid var(--border);
}
.vocab-section-label:first-child {
  margin-top: 0;
}
.vocab-story-text {
  font-size: 0.85rem;
  line-height: 1.7;
  color: var(--text-main);
  margin-bottom: 4px;
}
.vocab-story-text b {
  color: var(--primary);
  font-weight: 600;
}
.vocab-story-zh {
  color: var(--text-sub);
}
.vocab-life-bridge {
  background: var(--bg-soft, #f6f8fb);
  border-left: 3px solid var(--primary);
  border-radius: 8px;
  padding: 10px 12px;
  margin-top: 2px;
}
.vocab-anchor-imgs {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 4px;
}
.vocab-anchor-fig {
  width: 160px;
  margin: 0;
  background: var(--bg-main);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}
.vocab-anchor-img {
  width: 100%;
  height: 130px;
  object-fit: cover;
  display: block;
}
.vocab-anchor-fig figcaption {
  font-size: 0.72rem;
  color: var(--text-sub);
  padding: 6px 8px;
  line-height: 1.4;
}
.vocab-table-wrap {
  overflow-x: auto;
  margin-top: 4px;
  -webkit-overflow-scrolling: touch;
}
.vocab-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.78rem;
}
.vocab-table th {
  text-align: left;
  padding: 6px 8px;
  background: var(--bg-main);
  color: var(--text-sub);
  font-weight: 600;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.vocab-table td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
  color: var(--text-main);
  vertical-align: top;
}
.vocab-word-cell {
  font-weight: 600;
  color: var(--primary);
  white-space: nowrap;
}
.vocab-phonetic-cell {
  color: var(--text-sub);
  font-family: monospace;
  font-size: 0.75rem;
}
.vocab-meaning-cell {
  color: var(--text-main);
}

/* ========================================
   技巧内部分标签 (Technique inner tabs)
   ======================================== */
.tech-inner-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
  overflow-x: auto;
}
.tech-inner-tab {
  flex: 1;
  min-width: 62px;
  font-size: 0.8rem;
  font-weight: 700;
  padding: 8px 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  color: var(--text-sub);
  white-space: nowrap;
  cursor: pointer;
}
.tech-inner-tab.active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

/* ========================================
   口语题目 P1 / P2 切换
   ======================================== */
.topic-part-switch {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}
.tp-switch {
  flex: 1;
  font-size: 0.8rem;
  font-weight: 700;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  color: var(--text-sub);
  cursor: pointer;
}
.tp-switch.active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

/* ========================================
   P1 题目渲染
   ======================================== */
.p1-topic-group { margin-bottom: 14px; }
.p1-topic-header {
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--text-main);
  margin-bottom: 6px;
  padding-left: 6px;
  border-left: 3px solid var(--primary);
}
.p1-topic-en {
  font-size: 0.7rem;
  color: var(--text-light);
  font-weight: 600;
}
.p1-unit-chip {
  font-size: 0.78rem;
  color: var(--primary-dark);
  background: var(--primary-bg);
  padding: 4px 10px;
  border-radius: 6px;
  margin: 4px 0;
}
.topic-card.p1-q { cursor: pointer; }

/* ========================================
   今日打卡 (Home)
   ======================================== */
.checkin-card {
  background: var(--bg-card);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 10px;
  box-shadow: var(--shadow);
}
.checkin-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 10px;
}
.checkin-title { font-size: 0.95rem; font-weight: 800; color: var(--text-main); }
.checkin-sub { font-size: 0.68rem; color: var(--text-light); }
.checkin-form { display: flex; flex-direction: column; gap: 8px; }
.checkin-row { display: flex; align-items: center; gap: 10px; }
.checkin-label { width: 64px; font-size: 0.8rem; color: var(--text-sub); flex-shrink: 0; }
.checkin-input {
  flex: 1;
  font-size: 0.85rem;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-main);
  color: var(--text-main);
}
.checkin-save { margin-top: 6px; }
.checkin-history { margin-top: 12px; }
.checkin-history-title { font-size: 0.78rem; font-weight: 700; color: var(--text-sub); margin-bottom: 6px; }
.checkin-history-item {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  font-size: 0.74rem;
  padding: 6px 0;
  border-top: 1px dashed var(--border);
}
.checkin-history-date { font-weight: 700; color: var(--primary); margin-right: 4px; }
.checkin-history-score {
  color: var(--text-sub);
  background: var(--bg-main);
  padding: 2px 6px;
  border-radius: 6px;
}
.checkin-history-empty { font-size: 0.76rem; color: var(--text-light); padding: 8px 0; }

.checkin-warn {
  font-size: 0.74rem;
  line-height: 1.5;
  padding: 9px 11px;
  border-radius: var(--radius-sm);
  margin-bottom: 12px;
}
.checkin-warn-mobile {
  background: #fff3f0;
  border: 1px solid #ffb3a0;
  color: #c0392b;
}
.checkin-warn-desktop {
  background: #fff9e6;
  border: 1px solid #ffe08a;
  color: #8a6d00;
}
.checkin-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.checkin-form-item {
  display: flex;
  align-items: center;
  gap: 6px;
}
.checkin-form-icon { font-size: 1rem; }
.checkin-input-score { width: 100%; }
.checkin-save-btn {
  margin-top: 4px;
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  padding: 9px 12px;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
}
.checkin-save-btn:active { opacity: 0.85; }
.checkin-save-disabled {
  background: #d9d9d9;
  color: #888;
  cursor: not-allowed;
}

/* ===== Bar Chart grouped tree (Question Type Modules) ===== */
.wr-bar-group {
  background: var(--bg-main);
  border-radius: var(--radius);
  padding: 6px 10px 10px;
  margin-bottom: 14px;
  border: 1px solid var(--border);
}
.wr-bar-group-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 4px;
  cursor: pointer;
  user-select: none;
}
.wr-bar-group-header .wr-chart-icon { font-size: 1.5rem; }
.wr-bar-caret {
  font-size: 0.8rem;
  color: var(--text-light);
  width: 14px;
  text-align: center;
  transition: transform 0.15s;
}
.wr-bar-group-header .wr-chart-name { font-size: 0.95rem; font-weight: 700; color: var(--text-main); }
.wr-bar-group-header .wr-chart-cn { font-size: 0.72rem; color: var(--text-sub); }
.wr-bar-children { padding-left: 6px; }
.wr-bar-subheader {
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--text-sub);
  margin: 10px 0 6px;
  padding-left: 4px;
  border-left: 3px solid var(--secondary);
}
.wr-bar-child {
  margin-bottom: 8px;
  margin-left: 4px;
  border-left-color: var(--primary-light);
}
.wr-sub-badge {
  display: inline-block;
  font-size: 0.62rem;
  font-weight: 600;
  color: #0F6E56;
  background: #E1F5EE;
  padding: 1px 7px;
  border-radius: 10px;
  vertical-align: middle;
  margin-left: 4px;
}

/* ========== 考场卡 Exam Card ========== */
.exam-card {
  background: #fff;
  border: 1px solid #EFEFEF;
  border-radius: 14px;
  padding: 14px 14px 6px;
  box-shadow: 0 2px 10px rgba(45,52,54,0.06);
  margin-bottom: 14px;
}
.exam-card-title {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--text-main);
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 2px dashed var(--primary-light);
}
.ec-block {
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 10px;
  border-left: 4px solid var(--primary);
  background: #FFF7F7;
}
.ec-block.ec-think  { border-left-color: #6C8EF5; background: #F4F7FF; }
.ec-block.ec-write  { border-left-color: var(--secondary); background: #F1FBFA; }
.ec-block.ec-say    { border-left-color: #E67E22; background: #FFF6EE; }
.ec-block.ec-remind { border-left-color: #F1C40F; background: #FFFBEF; }
.ec-head {
  font-size: 0.86rem;
  font-weight: 800;
  color: var(--text-main);
  margin-bottom: 8px;
}
.ec-hint {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-sub);
  background: rgba(255,255,255,0.7);
  padding: 1px 8px;
  border-radius: 8px;
  margin-left: 4px;
}
.ec-idea {
  padding: 7px 0;
  border-bottom: 1px dashed rgba(108,142,245,0.25);
}
.ec-idea:last-child { border-bottom: none; }
.ec-idea-title {
  font-size: 0.82rem;
  font-weight: 700;
  color: #3550C9;
  margin-bottom: 3px;
}
.ec-idea-exp {
  font-size: 0.78rem;
  color: var(--text-sub);
  line-height: 1.6;
}
.ec-write-list { display: flex; flex-wrap: wrap; gap: 7px; }
.ec-write-item {
  font-size: 0.78rem;
  font-weight: 600;
  color: #0F6E56;
  background: #E1F5EE;
  padding: 5px 10px;
  border-radius: 8px;
}
.ec-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ec-chip {
  font-size: 0.76rem;
  font-weight: 600;
  color: #B4530A;
  background: #FFFFFF;
  border: 1px solid #F3D3B0;
  padding: 4px 9px;
  border-radius: 8px;
}
.ec-vocab-mini { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; }
.ec-chip-sub {
  color: var(--text-sub);
  border-color: #E5E5E5;
  font-weight: 500;
  background: #FAFAFA;
}
.ec-remind-text {
  font-size: 0.8rem;
  color: #8A6D0A;
  line-height: 1.65;
  font-weight: 600;
}
.ec-details {
  margin: 4px 0 12px;
  border: 1px solid #EFEFEF;
  border-radius: 10px;
  padding: 6px 12px;
  background: #fff;
}
.ec-details summary {
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--primary-dark);
  padding: 6px 0;
  user-select: none;
}
.ec-details[open] summary { margin-bottom: 8px; }
.ec-mini {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--primary-dark);
  background: #FFF1F1;
  border: 1px solid #FFD8D8;
  border-radius: 8px;
  padding: 7px 10px;
  margin-bottom: 8px;
}
.ec-mini b { color: var(--text-main); }
.ec-issue-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.ec-issue-cell {
  font-size: 0.78rem;
  color: var(--text-sub);
  background: #FAFAFA;
  border-radius: 8px;
  padding: 8px 10px;
  line-height: 1.55;
}
.ec-issue-k {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  color: #fff;
  background: var(--primary);
  padding: 1px 7px;
  border-radius: 8px;
  margin-right: 6px;
}
.ec-issue-next { grid-column: 1 / -1; background: #FFF9EF; }
.ec-issue-next .ec-issue-k { background: #E67E22; }

/* ============ AI 功能样式 (2026-09-01) ============ */

/* 头部 AI 设置按钮 */
.ai-settings-btn {
  background: var(--primary-bg);
  border: 1px solid #F5C9C9;
  border-radius: 10px;
  font-size: 1rem;
  padding: 4px 9px;
  cursor: pointer;
  line-height: 1;
  transition: transform .15s ease;
}
.ai-settings-btn:hover { transform: scale(1.1); }

/* AI Toast */
.ai-toast {
  position: fixed;
  left: 50%;
  bottom: 90px;
  transform: translateX(-50%) translateY(16px);
  background: rgba(45,52,54,.94);
  color: #fff;
  font-size: .8rem;
  padding: 10px 16px;
  border-radius: 10px;
  z-index: 9999;
  max-width: 86vw;
  opacity: 0;
  transition: all .25s ease;
  pointer-events: none;
  text-align: center;
  box-shadow: 0 6px 20px rgba(0,0,0,.18);
}
.ai-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* AI 设置状态 */
.ai-set-status { margin-top: 10px; font-size: .78rem; padding: 8px 10px; border-radius: 8px; background: var(--bg-main); color: var(--text-sub); min-height: 20px; }
.ai-set-status.ok { background: #EAF9F0; color: #1E8449; }
.ai-set-status.err { background: #FDECEA; color: #C0392B; }
.ai-set-status.testing { background: #FFF8E1; color: #B8860B; }

/* AI 批改面板 */
.ai-panel {
  margin-top: 16px;
  background: linear-gradient(180deg, #FFF9F7 0%, var(--bg-card) 100%);
  border: 1px solid #F3D9D9;
  border-radius: 14px;
  padding: 14px;
}
.ai-panel-header {
  font-weight: 700;
  font-size: .95rem;
  color: var(--text-main);
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.ai-panel-sub { font-size: .7rem; font-weight: 400; color: var(--text-light); }
.ai-writing-ta {
  width: 100%;
  min-height: 140px;
  margin-top: 10px;
  border: 1px solid #F0E0E0;
  border-radius: 10px;
  padding: 10px;
  font-size: .85rem;
  line-height: 1.6;
  box-sizing: border-box;
  background: #fff;
  color: var(--text-main);
  font-family: inherit;
  resize: vertical;
}
.ai-writing-ta:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 2px rgba(255,107,107,.12); }
.ai-writing-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 8px;
}
.ai-wordcount { font-size: .72rem; color: var(--text-light); }
.ai-btn { min-width: 96px; }

/* Loading / Error */
.ai-loading {
  margin-top: 12px;
  padding: 18px 12px;
  text-align: center;
  font-size: .82rem;
  color: var(--text-sub);
  background: var(--bg-main);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.ai-spinner {
  width: 16px; height: 16px;
  border: 2px solid #F0D5D5;
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: ai-spin .8s linear infinite;
  display: inline-block;
}
@keyframes ai-spin { to { transform: rotate(360deg); } }
.ai-error {
  margin-top: 12px;
  padding: 12px;
  font-size: .8rem;
  color: #C0392B;
  background: #FDECEA;
  border-radius: 10px;
  line-height: 1.6;
}

/* AI 批改结果 */
.ai-result { margin-top: 14px; }
.ai-result-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.ai-result-title { font-weight: 700; font-size: .95rem; color: var(--text-main); }
.ai-result-topic { display: block; font-size: .72rem; color: var(--text-light); font-weight: 400; margin-top: 2px; }
.ai-overall { font-size: 2rem; font-weight: 800; text-align: center; line-height: 1; }
.ai-overall-label { display: block; font-size: .62rem; font-weight: 600; color: var(--text-light); margin-top: 3px; }

.ai-sec { margin-top: 12px; }
.ai-sec-title {
  font-size: .8rem;
  font-weight: 700;
  color: var(--text-sub);
  border-left: 3px solid var(--secondary);
  padding-left: 8px;
  margin-bottom: 6px;
}
.ai-sec-title.ai-good { border-color: #27AE60; color: #1E8449; }
.ai-sec-title.ai-bad { border-color: #E74C3C; color: #C0392B; }
.ai-sec-title.ai-next { border-color: #F39C12; color: #B8860B; }
.ai-list { margin: 0; padding-left: 18px; font-size: .82rem; line-height: 1.7; color: var(--text-main); }
.ai-list li { margin-bottom: 2px; }

.ai-fix {
  background: var(--bg-main);
  border-radius: 10px;
  padding: 10px;
  margin-bottom: 8px;
  font-size: .8rem;
}
.ai-fix-row { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 4px; }
.ai-fix-tag {
  flex: none;
  font-size: .62rem;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 6px;
  margin-top: 2px;
}
.ai-fix-tag.orig { background: #FDE8E6; color: #C0392B; }
.ai-fix-tag.new { background: #E4F6EC; color: #1E8449; }
.ai-fix-text { flex: 1; color: var(--text-main); line-height: 1.55; }
.ai-fix-reason { font-size: .72rem; color: var(--text-sub); margin-top: 4px; }

.ai-expr {
  font-size: .82rem;
  padding: 6px 0;
  border-bottom: 1px dashed #F0E0E0;
  line-height: 1.6;
}
.ai-expr:last-child { border-bottom: none; }
.ai-expr-orig { color: #C0392B; text-decoration: line-through; opacity: .8; }
.ai-expr-new { color: #1E8449; font-weight: 600; }
.ai-expr-ctx { color: var(--text-light); font-size: .72rem; }

.ai-next-text {
  background: #FFF9EF;
  border-radius: 10px;
  padding: 10px;
  font-size: .82rem;
  line-height: 1.7;
  color: #7D5A00;
}
.ai-actions { display: flex; gap: 8px; margin-top: 14px; }

/* ============ 故事生成器 (2026-09-01) ============ */
.ai-story-section { margin-bottom: 8px; }
.ai-story-gen { margin-bottom: 14px; }
.ai-story-gen-btn { width: 100%; }
.ai-story-gen-panel {
  margin-top: 10px;
  background: linear-gradient(180deg, #F4FAFF 0%, var(--bg-card) 100%);
  border: 1px solid #D6E9F8;
  border-radius: 14px;
  padding: 14px;
}
.ai-user-story { border-style: dashed; }
.ai-user-badge { background: linear-gradient(135deg, #667EEA, #764BA2); color: #fff; font-size: .7rem; }
.ai-user-tag { background: linear-gradient(135deg, #667EEA, #764BA2); }

/* ============ 词汇故事生成器 (2026-09-01) ============ */
.ai-user-vocab { border-style: dashed; }
.ai-vocab-theme-row { margin-top: 8px; }

/* ============ Part 3 论证库 (2026-09-01) ============ */
.p3-header { padding: 10px 0 18px; }
.p3-title { font-size: 1.1rem; font-weight: 700; color: var(--text-main); margin-bottom: 4px; }
.p3-subtitle { font-size: 0.75rem; color: var(--text-light); }
.p3-section { margin-bottom: 28px; }
.p3-section-title { font-size: 0.95rem; font-weight: 700; color: var(--text-main); margin-bottom: 12px; padding-bottom: 6px; border-bottom: 1px solid var(--border-color); }
.p3-framework { background: var(--primary-bg); border-radius: var(--radius-md); padding: 14px; margin-bottom: 12px; }
.p3-framework-name { font-weight: 700; color: var(--text-main); margin-bottom: 4px; }
.p3-framework-meta { font-size: 0.7rem; color: var(--text-light); margin-left: 8px; font-weight: 400; }
.p3-framework-desc { font-size: 0.75rem; color: var(--text-sub); margin-bottom: 10px; }
.p3-framework-best { font-size: 0.7rem; color: var(--text-light); margin-bottom: 10px; }
.p3-steps { display: grid; gap: 10px; }
.p3-step { background: #fff; border: 1px solid var(--border-color); border-radius: var(--radius-sm); padding: 10px 12px; }
.p3-step-label { font-weight: 600; color: var(--text-main); font-size: 0.82rem; margin-bottom: 4px; }
.p3-step-label span { color: var(--text-light); font-weight: 400; margin-left: 4px; }
.p3-step-what { font-size: 0.75rem; color: var(--text-sub); margin-bottom: 6px; }
.p3-step-template { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 0.72rem; color: var(--primary); background: var(--primary-bg); padding: 6px 8px; border-radius: 4px; margin-bottom: 6px; }
.p3-step-example { font-size: 0.72rem; color: var(--text-sub); margin-bottom: 4px; line-height: 1.5; }
.p3-step-timing { font-size: 0.65rem; color: var(--text-light); }
.p3-topic-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.p3-topic-chip { font-size: 0.72rem; padding: 5px 10px; border: 1px solid var(--border-color); border-radius: 16px; background: #fff; color: var(--text-sub); cursor: pointer; }
.p3-topic-chip-active { background: var(--primary); color: #fff; border-color: var(--primary); }
.p3-arg-card { background: #fff; border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 14px; margin-bottom: 10px; }
.p3-arg-claim { font-weight: 600; color: var(--text-main); margin-bottom: 8px; }
.p3-arg-en { display: block; font-size: 0.72rem; color: var(--text-light); font-weight: 400; margin-top: 2px; }
.p3-arg-row { font-size: 0.78rem; color: var(--text-sub); line-height: 1.5; margin-bottom: 6px; }
.p3-arg-row b { color: var(--text-main); margin-right: 4px; }
.p3-arg-expressions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.p3-arg-expressions span { font-size: 0.7rem; background: var(--primary-bg); color: var(--primary); padding: 2px 8px; border-radius: 10px; }
.p3-questions { display: flex; flex-direction: column; gap: 8px; }
.p3-question { border: 1px solid var(--border-color); border-radius: var(--radius-md); background: #fff; overflow: hidden; }
.p3-question-summary { padding: 12px 14px; cursor: pointer; font-size: 0.8rem; color: var(--text-main); font-weight: 500; list-style: none; display: flex; align-items: center; gap: 10px; }
.p3-question-summary::-webkit-details-marker { display: none; }
.p3-question-num { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--primary-bg); color: var(--primary); font-size: 0.7rem; font-weight: 700; }
.p3-question-text { flex: 1; }
.p3-question-meta { font-size: 0.68rem; color: var(--text-light); font-weight: 400; white-space: nowrap; }
.p3-question-en { font-size: 0.72rem; color: var(--text-light); padding: 0 14px 8px; font-style: italic; }
.p3-question-answer { font-size: 0.78rem; color: var(--text-sub); line-height: 1.6; padding: 0 14px 14px; }
.p3-question-args { font-size: 0.7rem; color: var(--text-light); padding: 0 14px 14px; }
.p3-question-args code { background: var(--primary-bg); color: var(--primary); padding: 2px 6px; border-radius: 4px; margin-right: 4px; }
.p3-tip-card { background: #fff; border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 14px; margin-bottom: 10px; }
.p3-tip-title { font-weight: 600; color: var(--text-main); font-size: 0.82rem; margin-bottom: 8px; }
.p3-tip-card ul { margin: 0; padding-left: 18px; }
.p3-tip-card li { font-size: 0.78rem; color: var(--text-sub); line-height: 1.6; margin-bottom: 4px; }

/* ===== P3 真题入口引导卡 ===== */
.p3-redirect-card { display: flex; align-items: center; justify-content: space-between; gap: 14px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px 16px; cursor: pointer; transition: border-color .18s, box-shadow .18s, transform .18s; }
.p3-redirect-card:hover { border-color: var(--primary); box-shadow: 0 2px 10px rgba(0,0,0,.06); transform: translateY(-1px); }
.p3-redirect-text { font-size: 0.8rem; color: var(--text-sub); line-height: 1.6; }
.p3-redirect-text b { color: var(--text-main); }
.p3-redirect-btn { flex-shrink: 0; font-size: 0.78rem; font-weight: 600; color: var(--primary); white-space: nowrap; }
@media (max-width: 480px) {
  .p3-redirect-card { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* ===== 题库导入预览 ===== */
.bank-prev-list { margin: 4px 0 10px; padding-left: 18px; max-height: 180px; overflow-y: auto; }
.bank-prev-list li { font-size: 0.76rem; color: var(--text-sub); line-height: 1.6; margin-bottom: 3px; }
.bank-manage-card { margin-top: 12px; }

/* ===== 内容来源声明页脚 ===== */
.site-footer {
  margin: 24px 16px 88px;
  padding: 14px 16px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-sub);
  font-size: 0.72rem;
  line-height: 1.6;
}