/* ════════════════════════════════════════
   COMPONENTS — UI dùng chung nhiều trang
   Button, Card, Modal, Form, Word item...
════════════════════════════════════════ */

/* ── Ripple effect (Material Design) ─── */
.ripple-wave {
  position: absolute;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.09);
  width: 1px; height: 1px;
  transform: scale(0);
  animation: ripple-expand 0.55s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  pointer-events: none;
  z-index: 0;
}
@keyframes ripple-expand {
  to { transform: scale(var(--rs, 300)); opacity: 0; }
}
#app.dark-mode .ripple-wave { background: rgba(255, 255, 255, 0.12); }

/* Tiêu đề section nhỏ ──────────────── */
.section-title {
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.7px;
}

/* ── Hero banner (trang chủ) ──────────── */
.hero {
  background: linear-gradient(135deg, var(--purple-d), #38BDF8, #a78bfa);
  border-radius: var(--radius);
  padding: 20px 18px;
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
  color: #fff;
}
.hero h1 { font-size: 1.25rem; margin-bottom: 3px; }
.hero p   { font-size: 0.88rem; opacity: 0.85; }

/* Badge streak lửa 🔥 góc phải hero */
.streak-badge {
  background: rgba(255,255,255,0.18);
  border-radius: 50px;
  padding: 8px 14px;
  display: flex; align-items: center; gap: 4px;
  flex-shrink: 0;
}
#streak-num { font-size: 1.5rem; font-weight: 800; }

/* ── Stat cards (hàng số liệu) ─────────── */
.stats-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}
.stat-card { border-radius: var(--radius-sm); padding: 14px 8px; text-align: center; }
.stat-card.purple { background: var(--purple-light); }
.stat-card.green  { background: var(--green-light); }
.stat-card.orange { background: var(--orange-light); }
.stat-card.pink   { background: var(--pink-light); }
.stat-num  { font-size: 1.45rem; font-weight: 800; }
.stat-card.purple .stat-num { color: var(--purple); }
.stat-card.green  .stat-num { color: var(--green); }
.stat-card.orange .stat-num { color: var(--orange); }
.stat-card.pink   .stat-num { color: var(--pink); }
.stat-label { font-size: 0.71rem; color: var(--text-muted); margin-top: 3px; font-weight: 600; }

/* ── Deck card (lưới bộ thẻ) ───────────── */
.deck-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 12px;
}
.deck-card {
  border-radius: var(--radius);
  padding: 18px 14px;
  cursor: pointer;
  position: relative; overflow: hidden;
  transition: transform 0.18s, box-shadow 0.18s;
}
.deck-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
/* Vòng trang trí góc */
.deck-card::before {
  content: '';
  position: absolute; top: -24px; right: -24px;
  width: 80px; height: 80px;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
}
.deck-card-name     { font-weight: 800; font-size: 0.95rem; margin-bottom: 4px; }
.deck-card-count    { font-size: 0.78rem; opacity: 0.82; }
.deck-card-progress { margin-top: 10px; height: 4px; background: rgba(255,255,255,0.28); border-radius: 2px; overflow: hidden; }
.deck-card-progress-inner { height: 100%; background: #fff; border-radius: 2px; transition: width 0.5s; }

/* 6 màu gradient cho bộ thẻ */
.deck-c0 { background: linear-gradient(135deg, #4338CA, #0EA5E9); color: #fff; }
.deck-c1 { background: linear-gradient(135deg, #059669, #34d399); color: #fff; }
.deck-c2 { background: linear-gradient(135deg, #D97706, #fbbf24); color: #fff; }
.deck-c3 { background: linear-gradient(135deg, #DB2777, #f472b6); color: #fff; }
.deck-c4 { background: linear-gradient(135deg, #2563EB, #60a5fa); color: #fff; }
.deck-c5 { background: linear-gradient(135deg, #0891B2, #22d3ee); color: #fff; }

/* ── Progress bar ngang ─────────────────── */
.progress-bar-wrap {
  background: var(--border);
  border-radius: 4px;
  height: 4px;
  margin-bottom: 12px;
  overflow: hidden;
}
.progress-bar {
  height: 100%;
  background: var(--purple);
  border-radius: 4px;
  transition: width 0.4s ease;
  position: relative;
  overflow: hidden;
}
.progress-bar::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  width: 30%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.36), transparent);
  transform: translateX(-100%);
  animation: shimmerGlint 2.8s ease-in-out infinite;
}
@keyframes shimmerGlint {
  0%   { transform: translateX(-100%); }
  28%  { transform: translateX(400%); }
  100% { transform: translateX(400%); }
}

/* ── Deck meta card (header bộ thẻ) ─────── */
.deck-meta-card {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 16px 16px;
  margin-bottom: 16px;
  box-shadow: var(--shadow-sm);
}
.deck-meta-card h2 { font-size: 1.15rem; font-weight: 800; color: var(--text); margin-bottom: 3px; }
.deck-meta-card p  { font-size: 0.84rem; color: var(--text-muted); margin-bottom: 0; }
.deck-meta-top     { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 14px; }
.deck-meta-btns    { position: relative; flex-shrink: 0; }
.deck-meta-btn     { background: var(--bg); border: 1.5px solid var(--border); color: var(--text-muted); padding: 5px 12px; border-radius: 8px; font-size: 1rem; cursor: pointer; font-family: inherit; transition: all 0.15s; letter-spacing: 1px; }
.deck-meta-btn:hover  { border-color: var(--purple); color: var(--purple); }
.deck-meta-menu {
  position: absolute; right: 0; top: calc(100% + 6px);
  background: var(--card); border: 1.5px solid var(--border);
  border-radius: 10px; box-shadow: 0 4px 16px rgba(0,0,0,0.1);
  min-width: 130px; z-index: 100; overflow: hidden;
}
.deck-meta-menu button {
  display: block; width: 100%; padding: 10px 14px;
  text-align: left; background: none; border: none;
  font-size: 0.85rem; color: var(--text); cursor: pointer;
  font-family: inherit; transition: background 0.1s;
}
.deck-meta-menu button:hover { background: var(--bg); }
.deck-meta-stats      { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 14px; }
.deck-meta-stat       { background: var(--bg); border: 1.5px solid var(--border); border-radius: var(--radius-sm); padding: 10px 6px; text-align: center; }
.deck-meta-stat-num   { font-size: 1.25rem; font-weight: 900; margin-bottom: 3px; }
.deck-meta-stat-label { font-size: 0.68rem; font-weight: 600; color: var(--text-muted); }
.dms-total .deck-meta-stat-num   { color: var(--purple); }
.dms-known .deck-meta-stat-num   { color: var(--green); }
.dms-learning .deck-meta-stat-num { color: var(--orange); }
.dms-due .deck-meta-stat-num     { color: #DC2626; }
.deck-words-section   { min-width: 0; }
.deck-words-header    { margin-bottom: 10px; display: flex; gap: 8px; align-items: center; }
.deck-words-header .deck-study-btn { flex: 1; text-align: center; }
.deck-words-actions   { display: flex; gap: 8px; }

/* ── Word list (danh sách từ) ───────────── */
.word-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.word-item {
  background: var(--surface);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  display: flex; align-items: center; gap: 10px;
  box-shadow: var(--shadow-sm);
}
/* Chấm trạng thái học từ */
.word-status-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.status-new      { background: var(--border); }
.status-learning { background: var(--orange); }
.status-known    { background: var(--green); }
/* Icon emoji thay chấm trạng thái khi có */
.word-icon-badge { font-size: 1.3rem; flex-shrink: 0; width: 28px; text-align: center; line-height: 1; }
.word-info    { flex: 1; min-width: 0; }
.word-en      { font-weight: 700; font-size: 0.95rem; }
.word-vi      { font-size: 0.82rem; color: var(--text-muted); }
.word-ph      { font-size: 0.74rem; color: var(--purple); }
.word-actions { display: flex; gap: 2px; align-items: center; }
.word-deck-tag { font-size: 0.68rem; background: var(--purple-light); color: var(--purple); border-radius: 50px; padding: 2px 8px; font-weight: 700; margin-left: 4px; }

/* ════════════════════════════════════════
   CHIP — interactive toggle (filter)
   .chip            → border, active = soft purple
   .chip.chip-solid → border, active = solid purple
════════════════════════════════════════ */
.chip {
  display: inline-flex; align-items: center; gap: 4px;
  border: 1.5px solid var(--border); border-radius: 50px;
  padding: 5px 12px; font-size: 0.78rem; font-weight: 600;
  color: var(--text-muted); background: var(--surface);
  cursor: pointer; font-family: inherit; white-space: nowrap;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.chip:hover  { border-color: var(--purple); color: var(--purple); }
.chip.active { border-color: var(--purple); background: var(--purple-light); color: var(--purple); }
.chip.chip-solid.active { background: var(--purple); color: #fff; }
.chip.chip-solid.active:hover { background: var(--purple); color: #fff; border-color: var(--purple); }

/* ════════════════════════════════════════
   BADGE — read-only label
════════════════════════════════════════ */
.badge {
  display: inline-flex; align-items: center;
  border-radius: 4px; padding: 2px 7px;
  font-size: 0.71rem; font-weight: 700; white-space: nowrap;
  vertical-align: middle;
}
.badge-round   { border-radius: 50px; }
.badge-purple  { background: var(--purple-light); color: var(--purple); }
.badge-green   { background: #D1FAE5; color: #065F46; }
.badge-blue    { background: #DBEAFE; color: #1D4ED8; }
.badge-orange  { background: #FEF3C7; color: #92400E; }
.badge-amber   { background: #FEF3C7; color: #D97706; }
.badge-red     { background: #FEE2E2; color: #DC2626; }
.badge-yellow  { background: #FEF9C3; color: #854D0E; }
.badge-gray    { background: var(--border); color: var(--text-muted); }
.badge-teal    { background: #CCFBF1; color: #0F766E; }
.badge-count   { background: #EF4444; color: #fff; border-radius: 50px; min-width: 18px; justify-content: center; padding: 1px 5px; line-height: 1; }

/* ── Spelling diff highlight (LCS-based) ── */
.spelling-diff { font-weight: 700; letter-spacing: 0.04em; }
.sd-ok   { color: #059669; }
.sd-miss { color: #DC2626; opacity: 0.6; }

/* ── Insight card (hiện sau khi trả lời sai) ── */
.insight-card { background: #FFFBEB; border: 1px solid #FDE68A; border-radius: var(--radius-sm); padding: 10px 14px; margin-top: 10px; font-size: 0.875rem; line-height: 1.5; text-align: left; }
.dark-mode .insight-card { background: #2A2000; border-color: #665200; color: #FDE68A; }
.insight-row + .insight-row { margin-top: 4px; }
.insight-confuse { color: #92400E; }
.dark-mode .insight-confuse { color: #FBBF24; }

/* ── Màn hình hoàn thành — achievements grid (legacy) ── */
.ca-grid    { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.ca-item    { display: flex; align-items: center; gap: 8px; font-size: 0.92rem; padding: 10px 14px; background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--radius-sm); font-weight: 500; }
.ca-item strong { font-weight: 700; }
.ca-item--focus  { border-color: rgba(217,119,6,0.4); background: rgba(217,119,6,0.06); color: #92400E; }
.ca-item--good   { border-color: rgba(5,150,105,0.3); background: rgba(5,150,105,0.06); color: #065F46; }
.ca-accuracy     { font-size: 0.8rem; color: var(--text-muted); text-align: center; margin-top: 2px; }
.ca-accuracy--good { color: #065F46; font-weight: 600; font-size: 0.88rem; }
.ca-continue-btn { width: 100%; margin-top: 12px; }
.ca-tomorrow     { font-size: 0.78rem; color: var(--text-muted); text-align: center; margin-top: 6px; }
.dark-mode .ca-item--focus { background: rgba(217,119,6,0.12); }
.dark-mode .ca-item--good  { background: rgba(5,150,105,0.12); }

/* ── Màn hình tổng kết học từ mới (bottom-sheet) ── */
.modal-complete-sheet { padding: 16px 20px 32px; max-height: 88vh; overflow-y: auto; }
.cs-hero { text-align: center; padding: 8px 0 14px; }
.cs-hero-num {
  font-size: 4rem; font-weight: 900; line-height: 1;
  background: linear-gradient(135deg, var(--purple-d), var(--purple));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.cs-hero-sub { font-size: 0.9rem; color: var(--text-muted); margin-top: 6px; font-weight: 600; }
.cs-chips { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin: 0 0 16px; }
.cs-chip { padding: 6px 14px; border-radius: 20px; font-size: 0.82rem; font-weight: 700; border: 1px solid var(--border); background: var(--bg); color: var(--text-muted); }
.cs-chip--xp   { background: #FEF9C3; color: #854D0E; border-color: #FDE68A; }
.cs-chip--good { background: var(--green-light); color: #065F46; border-color: rgba(5,150,105,0.3); }
.cs-chip--warn { background: rgba(217,119,6,0.1); color: #92400E; border-color: rgba(217,119,6,0.3); }
.cs-chip--bad  { background: var(--red-light); color: #991B1B; border-color: rgba(220,38,38,0.3); }
.cs-chip--hard { background: rgba(217,119,6,0.1); color: #92400E; border-color: rgba(217,119,6,0.3); }
.cs-chip--due  { background: var(--purple-light); color: var(--purple); border-color: rgba(14,165,233,0.3); }
.cs-wrong-section { margin-bottom: 14px; }
.cs-wrong-title { font-size: 0.75rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; }
.cs-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.cs-actions .btn-primary, .cs-actions .btn-outline { width: 100%; }

/* ── Typing feedback: gần đúng + tiến bộ ── */
.stf-almost-msg { font-size: 0.85rem; font-weight: 600; color: #065F46; margin-bottom: 4px; }
.typing-progress--progress { color: #92400E; background: rgba(217,119,6,0.1); border-radius: 6px; padding: 4px 8px; font-size: 0.82rem; font-weight: 600; margin-bottom: 6px; display: block; }

/* ── Danh sách từ sai ở màn hình kết thúc ── */
.complete-wrong-list { margin-top: 16px; text-align: left; }
.cwl-title { font-weight: 600; font-size: 0.875rem; margin-bottom: 8px; color: var(--text-muted); }
.cwl-item { padding: 8px 12px; border-radius: 8px; background: var(--surface); border: 1px solid var(--border); margin-bottom: 6px; font-size: 0.875rem; }
.cwl-en { font-weight: 600; margin-right: 6px; }
.cwl-vi { color: var(--text-muted); }
.cwl-note   { color: #92400E; font-size: 0.8rem; margin-top: 3px; }
.cwl-ex     { font-size: 0.8rem; color: var(--text-muted); font-style: italic; margin-top: 4px; line-height: 1.5; }
.cwl-ex-vi  { font-size: 0.76rem; color: var(--text-muted); margin-top: 2px; line-height: 1.4; }
.dark-mode .cwl-note { color: #FBBF24; }

/* ── Modal hoàn thành — redesign tối giản ── */
.modal-complete-sheet { position: relative; overflow: hidden; }
.mc-confetti { position: absolute; top: 0; left: 0; width: 100%; height: 220px; pointer-events: none; overflow: hidden; z-index: 0; }
.mc-confetti-piece { position: absolute; top: -10px; }
@keyframes mc-fall { to { transform: translateY(260px) rotate(540deg); opacity: 0; } }
.mc-confetti-piece { animation: mc-fall linear forwards; }
.mc-title { text-align: center; font-size: 1.05rem; font-weight: 700; margin-bottom: 8px; position: relative; z-index: 1; }
.mc-score { text-align: center; padding: 8px 0 10px; position: relative; z-index: 1; }
.mc-pct {
  font-size: 4.5rem; font-weight: 900; line-height: 1;
  background: linear-gradient(135deg, #DC2626, #D97706);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.mc-score--warn .mc-pct {
  background: linear-gradient(135deg, #F59E0B, #D97706);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.mc-score--good .mc-pct {
  background: linear-gradient(135deg, #059669, #0EA5E9);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.mc-fraction { font-size: 0.88rem; color: var(--text-muted); font-weight: 600; margin-top: 4px; }
.mc-badges { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin: 0 0 14px; position: relative; z-index: 1; }
.mc-badge { padding: 5px 12px; border-radius: 20px; font-size: 0.8rem; font-weight: 700; border: 1px solid var(--border); background: var(--bg); color: var(--text-muted); }
.mc-badge--xp   { background: #FEF9C3; color: #854D0E; border-color: #FDE68A; }
.mc-badge--up   { background: rgba(5,150,105,0.1); color: #065F46; border-color: rgba(5,150,105,0.3); }
.mc-badge--down { background: rgba(220,38,38,0.08); color: #991B1B; border-color: rgba(220,38,38,0.2); }
.mc-wrong { background: rgba(217,119,6,0.06); border: 1.5px solid rgba(217,119,6,0.25); border-radius: var(--radius-sm); padding: 10px 12px; margin-bottom: 14px; position: relative; z-index: 1; }
.mc-wrong-label { font-size: 0.8rem; font-weight: 700; color: #92400E; margin-bottom: 8px; }
.mc-wrong-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.mc-pill { padding: 3px 10px; background: #FFF7ED; border: 1px solid rgba(217,119,6,0.3); border-radius: 20px; font-size: 0.82rem; font-weight: 600; color: #92400E; }
.mc-pill--more { background: var(--bg); color: var(--text-muted); border-color: var(--border); }
.mc-actions { display: flex; flex-direction: column; gap: 8px; position: relative; z-index: 1; }
.mc-actions .btn-primary, .mc-actions .btn-outline { width: 100%; }
.dark-mode .mc-wrong { background: rgba(217,119,6,0.1); border-color: rgba(217,119,6,0.35); }
.dark-mode .mc-wrong-label { color: #FCD34D; }
.dark-mode .mc-pill { background: #2A1A00; border-color: rgba(217,119,6,0.4); color: #FCD34D; }
.dark-mode .mc-badge--up { background: rgba(5,150,105,0.15); }
.dark-mode .mc-badge--down { background: rgba(220,38,38,0.12); color: #FCA5A5; }
.badge-count:empty { display: none; }

/* ── Word item inline badges ──────────── */
.word-deck-tag { margin-left: 4px; }
.wrt           { margin-left: 5px; }

/* Duplicate-meaning badge */
.word-dupe-badge { font-size: 0.66rem; font-weight: 700; border-radius: 50px; padding: 1px 7px; margin-left: 5px; vertical-align: middle; white-space: nowrap; background: #FEF3C7; color: #92400E; cursor: default; }

/* Nút icon nhỏ trong word item */
.btn-icon-sm       { background: none; border: none; cursor: pointer; font-size: 1rem; padding: 5px; border-radius: 6px; transition: background 0.15s; }
.btn-icon-sm:hover { background: var(--border); }
/* Nút yêu thích ⭐ */
.btn-fav        { font-size: 1rem; padding: 5px; background: none; border: none; cursor: pointer; filter: grayscale(1); opacity: 0.35; transition: all 0.2s; border-radius: 6px; }
.btn-fav.active { filter: none; opacity: 1; }
.btn-fav:hover  { transform: scale(1.2); }

/* ── Buttons ─────────────────────────────── */
/* Nút chính gradient tím */
.btn-primary          { background: linear-gradient(135deg, var(--purple-d), #38BDF8); color: #fff; border: none; border-radius: var(--radius-sm); padding: 13px 20px; font-size: 0.95rem; font-weight: 700; cursor: pointer; width: 100%; transition: opacity 0.2s, transform 0.15s; font-family: inherit; }
.btn-primary:hover    { opacity: 0.9; transform: translateY(-1px); }
.btn-primary:disabled { opacity: 0.38; cursor: not-allowed; transform: none; }
/* Nút outline viền tím */
.btn-outline       { background: transparent; border: 2px solid var(--purple); color: var(--purple); border-radius: var(--radius-sm); padding: 11px 20px; font-size: 0.9rem; font-weight: 600; cursor: pointer; width: 100%; transition: all 0.2s; font-family: inherit; }
.btn-outline:hover { background: var(--purple-light); }
/* Nút nhỏ (tag style) */
.btn-small { background: var(--purple-light); color: var(--purple); border: 1.5px solid var(--purple); border-radius: 20px; padding: 6px 14px; font-size: 0.82rem; font-weight: 700; cursor: pointer; white-space: nowrap; font-family: inherit; }
/* Nút nguy hiểm (reset/xoá) */
.btn-danger        { width: 100%; padding: 11px; border: 2px solid #FCA5A5; border-radius: var(--radius-sm); background: #FFF5F5; color: var(--red); font-weight: 700; font-size: 0.88rem; cursor: pointer; font-family: inherit; }
.btn-danger:hover  { background: var(--red-light); }
.btn-danger-strong { width: 100%; padding: 11px; border: none; border-radius: var(--radius-sm); background: var(--red); color: #fff; font-weight: 700; font-size: 0.88rem; cursor: pointer; font-family: inherit; }
.btn-danger-strong:hover { opacity: 0.88; }
/* Nút phát âm trong flashcard */
.btn-speak { background: rgba(255,255,255,0.2); border: none; color: #fff; padding: 6px 16px; border-radius: 20px; cursor: pointer; font-size: 0.85rem; margin-bottom: 6px; font-family: inherit; }

/* ── Form inputs ─────────────────────────── */
.modal-label  { display: block; font-size: 0.78rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px; }
.modal-input  { width: 100%; padding: 12px 14px; border: 2px solid var(--border); border-radius: var(--radius-sm); font-size: 0.95rem; margin-bottom: 10px; outline: none; font-family: inherit; transition: border-color 0.2s; }
/* Row icon + từ trong modal edit word */
.word-icon-row { display: flex; gap: 8px; align-items: flex-start; }
.word-icon-row .modal-input { margin-bottom: 10px; }
.word-icon-input { width: 72px !important; flex-shrink: 0; text-align: center; font-size: 1.4rem; padding: 8px 6px; }
.modal-input:focus  { border-color: var(--purple); }
.modal-select { width: 100%; padding: 11px 14px; border: 2px solid var(--border); border-radius: var(--radius-sm); font-size: 0.95rem; margin-bottom: 12px; outline: none; font-family: inherit; background: var(--surface); cursor: pointer; }
.modal-select:focus { border-color: var(--purple); }
.modal-hint { font-size: 0.8rem; color: var(--text-muted); margin-bottom: 10px; line-height: 1.5; }
.modal-hint code { background: var(--bg); padding: 2px 5px; border-radius: 4px; font-size: 0.74rem; }
/* Textarea dán JSON */
.import-textarea       { width: 100%; height: 140px; border: 2px solid var(--border); border-radius: var(--radius-sm); padding: 10px; font-size: 0.82rem; resize: vertical; font-family: monospace; margin-bottom: 10px; outline: none; }
.import-textarea:focus { border-color: var(--purple); }
.import-tabs {
  display: flex; gap: 3px; background: var(--bg);
  border-radius: var(--radius-sm); padding: 3px; margin-bottom: 12px;
}
.import-tab {
  flex: 1; padding: 7px 10px; border: none; border-radius: 8px;
  font-size: 0.82rem; font-weight: 600; cursor: pointer;
  font-family: inherit; background: none; color: var(--text-muted); transition: all 0.15s;
}
.import-tab.active { background: var(--surface); color: var(--purple); box-shadow: 0 1px 4px rgba(0,0,0,0.1); }
.import-json-file-row { display: flex; margin-bottom: 10px; }
.import-json-file-row .btn-outline { padding: 7px 14px; font-size: 0.82rem; }
.add-more-topic-locked { background: var(--bg); color: var(--text-muted); cursor: default; }
.modal-label-opt       { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--text-muted); font-size: 0.74rem; }
.add-more-gen-btn      { width: 100%; margin-top: 14px; }
.add-more-prompt-actions { display: flex; gap: 8px; margin-top: 6px; }
.add-more-deck-count   { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--text-muted); font-size: 0.74rem; }
.add-more-cefr-hint    { font-size: 0.72rem; color: var(--purple); font-weight: 600; margin: -4px 0 8px; opacity: 0.8; }
.add-more-dupe-hint    { font-size: 0.72rem; color: var(--text-muted); margin: -4px 0 8px; }
.btn-sm { padding: 6px 12px; font-size: 0.8rem; }

/* Toggle switch (cài đặt) */
.toggle             { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; }
.toggle input       { opacity: 0; width: 0; height: 0; }
.toggle-slider      { position: absolute; cursor: pointer; inset: 0; background: #D1D5DB; border-radius: 34px; transition: .3s; }
.toggle-slider::before { content: ''; position: absolute; width: 18px; height: 18px; left: 3px; bottom: 3px; background: #fff; border-radius: 50%; transition: .3s; }
.toggle input:checked + .toggle-slider             { background: var(--purple); }
.toggle input:checked + .toggle-slider::before     { transform: translateX(20px); }

/* ── Modal ───────────────────────────────── */
/* Nền mờ phủ toàn màn hình */
.modal-overlay        { position: fixed; inset: 0; background: rgba(0,0,0,0.48); z-index: 200; display: flex; align-items: flex-end; justify-content: center; animation: fadeIn 0.2s; }
.modal-overlay.hidden { display: none; }
/* Modal mobile: kéo lên từ dưới (bottom sheet) */
.modal {
  background: var(--surface);
  border-radius: 20px 20px 0 0;
  padding: 24px 20px 32px;
  width: 100%; max-width: 480px;
  max-height: 92vh;
  overflow-y: auto;
  animation: slideUp 0.25s ease;
}
.modal-wide   { max-height: 80vh; }
.modal-center { border-radius: 20px; margin: auto 20px; }

/* Exit confirm modal stats */
.exit-modal-stats  { margin-bottom: 20px; }
.exit-stat-row     { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 12px; }
.exit-stat-item    { display: inline-flex; align-items: center; gap: 4px; padding: 6px 14px; border-radius: 20px; font-size: 0.85rem; font-weight: 700; }
.exit-stat-item.ok  { background: #ECFDF5; color: #065F46; }
.exit-stat-item.bad { background: #FEE2E2; color: #991B1B; }
.exit-stat-item.xp  { background: #FEF9C3; color: #854D0E; }
.exit-stat-item.acc { background: var(--purple-light); color: var(--purple); }
.exit-stat-note    { font-size: 0.82rem; color: var(--text-muted); text-align: center; margin: 0; line-height: 1.5; }
@keyframes slideUp {
  from { transform: translateY(40px); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
.modal h3       { font-size: 1.1rem; font-weight: 800; margin-bottom: 16px; }
.modal-actions  { display: flex; gap: 10px; margin-top: 6px; }
.modal-actions .btn-outline,
.modal-actions .btn-primary,
.modal-actions .btn-danger  { flex: 1; width: auto; white-space: nowrap; }

/* Modal hoàn thành session học */
.complete-icon { font-size: 3rem; text-align: center; margin-bottom: 8px; }
.modal-center h3 { text-align: center; }

/* ── Misc ────────────────────────────────── */
/* Trạng thái rỗng (chưa có dữ liệu) */
.empty-state { text-align: center; padding: 36px 20px; color: var(--text-muted); }
.empty-icon  { font-size: 2.8rem; margin-bottom: 12px; }
.empty-state p { line-height: 1.6; }

/* Ẩn hoàn toàn, quan trọng dùng !important */
.hidden { display: none !important; }

/* Phím tắt (chỉ hiện trên PC) */
.kbd { display: none; font-size: 0.72rem; background: rgba(0,0,0,0.12); border-radius: 4px; padding: 1px 5px; margin-left: 4px; font-family: monospace; }

/* Utility spacing */
.full-width { width: 100%; }
.mt-8  { margin-top: 8px; }
.mt-12 { margin-top: 12px; }
.mt-16 { margin-top: 16px; }
.mb-8  { margin-bottom: 8px; }
.mb-12 { margin-bottom: 12px; }


/* ════════════════════════════════════════
   Tablet/Desktop ≥ 640px — component overrides
════════════════════════════════════════ */
@media (min-width: 640px) {

  /* Modal PC: hộp thoại giữa màn (không phải bottom sheet) */
  .modal-overlay { align-items: center; }
  .modal {
    border-radius: 20px;
    max-width: 520px;
    margin: 0;
    animation: scaleIn 0.2s ease;
  }
  @keyframes scaleIn {
    from { opacity: 0; transform: scale(0.95); }
    to   { opacity: 1; transform: scale(1); }
  }
  .modal-center { margin: 0; }

  /* Hiện phím tắt trên PC */
  .kbd { display: inline; }

  /* Deck meta card padding lớn hơn */
  .deck-meta-card    { padding: 20px; }
  .deck-meta-card h2 { font-size: 1.3rem; }
  .deck-meta-stats   { gap: 10px; }

  /* Stat card chữ lớn hơn */
  .stats-row { gap: 12px; margin-bottom: 20px; }
  .stat-num  { font-size: 1.6rem; }
}

/* ════════════════════════════════════════
   PAGE-DECK responsive layout
════════════════════════════════════════ */
#page-deck.active { display: flex !important; flex-direction: column; }

@media (min-width: 1200px) {
  #page-deck .word-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 8px;
  }
}

/* ── Update banner (có bản mới) ───────── */
.update-banner {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--nav-h, 68px) + 14px);
  z-index: 150;
  background: var(--purple); color: #fff;
  padding: 11px 20px; border: none; border-radius: 50px;
  font-size: 0.85rem; font-weight: 700; font-family: inherit;
  box-shadow: 0 6px 20px rgba(14,165,233,0.4); cursor: pointer;
  animation: updatePop 0.3s ease;
}
.update-banner.hidden { display: none; }
@keyframes updatePop {
  from { opacity: 0; transform: translate(-50%, 12px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
@media (min-width: 640px) {
  .update-banner { bottom: 24px; }
}


/* ── Word detail bottom sheet ─────────── */
.word-detail-sheet {
  position: fixed; bottom: 0; left: 0; right: 0;
  background: var(--surface); border-radius: 20px 20px 0 0;
  padding: 12px 20px 40px; max-height: 82vh; overflow-y: auto;
  box-shadow: 0 -6px 30px rgba(0,0,0,0.13);
  animation: sheetUp 0.26s ease;
  z-index: 300;
}
@keyframes sheetUp {
  from { transform: translateY(60px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
.wds-handle {
  width: 40px; height: 4px; background: var(--border);
  border-radius: 4px; margin: 0 auto 12px;
}
.wds-close {
  position: absolute; top: 14px; right: 16px;
  background: none; border: none; font-size: 1.1rem;
  color: var(--text-muted); cursor: pointer; padding: 4px 8px;
}