/* ============================================================
   TÜRKÇE 500 - STYLESHEET
   ============================================================ */

:root {
  --red:     #E30A17;
  --red-dk:  #b5080e;
  --blue:    #1976D2;
  --green:   #2e7d32;
  --orange:  #e65100;
  --bg:      #f4f4f4;
  --card:    #ffffff;
  --border:  #e0e0e0;
  --text:    #1a1a1a;
  --muted:   #777;
  --radius:  12px;
  --shadow:  0 2px 8px rgba(0,0,0,0.10);
  --nav-h:   56px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  padding-top: var(--nav-h);
  padding-bottom: 60px;
  min-height: 100vh;
}

/* ── NAV ──────────────────────────────────────────────── */
.top-nav {
  position: fixed; top: 0; left: 0; right: 0;
  height: var(--nav-h);
  background: var(--red);
  color: #fff;
  display: flex; align-items: center; gap: 8px;
  padding: 0 12px;
  z-index: 100;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

.nav-back {
  background: none; border: none; color: #fff;
  font-size: 1.4rem; cursor: pointer;
  padding: 4px 8px; border-radius: 6px;
  transition: background .15s;
}
.nav-back:hover { background: rgba(255,255,255,0.2); }

.nav-title {
  flex: 1;
  font-size: 1rem; font-weight: 700; letter-spacing: .3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}
.nav-logo { margin-right: 4px; }

.nav-actions { display: flex; gap: 6px; }

.btn-icon {
  background: rgba(255,255,255,0.2);
  border: none; color: #fff;
  font-size: .85rem; font-weight: 700;
  cursor: pointer; padding: 5px 10px; border-radius: 6px;
  transition: background .15s;
}
.btn-icon:hover { background: rgba(255,255,255,0.35); }
.btn-icon-img { padding: 4px 6px; }
.btn-icon-img img { width: 28px; height: 28px; object-fit: contain; display: block; }

/* ── VIEWS ────────────────────────────────────────────── */
.view { display: none; padding: 0 0 80px; }
.view.active { display: block; }

/* ── HOME ─────────────────────────────────────────────── */
.home-hero {
  background: linear-gradient(135deg, var(--red) 0%, #c4000a 100%);
  color: #fff;
  padding: 28px 20px 24px;
  text-align: center;
}
.home-hero h2 { font-size: 1.3rem; margin-bottom: 6px; }
.home-hero p  { font-size: .9rem; opacity: .85; }

.progress-summary {
  margin-top: 14px;
  display: flex; justify-content: center; gap: 10px; flex-wrap: wrap;
}

/* Daily goal widget */
.dg-widget {
  width: 100%; background: rgba(255,255,255,0.15);
  border-radius: 14px; padding: 12px 14px; margin-bottom: 4px;
}
.dg-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px;
}
.dg-title { font-size: .85rem; font-weight: 700; opacity: .95; }
.dg-edit-btn {
  background: rgba(255,255,255,0.22); border: none; border-radius: 20px;
  color: #fff; font-size: .72rem; font-weight: 600;
  padding: 3px 10px; cursor: pointer;
}
.dg-edit-btn:hover { background: rgba(255,255,255,0.35); }
.dg-bar-row { display: flex; align-items: center; gap: 10px; }
.dg-bar {
  flex: 1; height: 9px; background: rgba(255,255,255,0.25);
  border-radius: 5px; overflow: hidden;
}
.dg-bar-fill {
  height: 100%; background: #fff; border-radius: 5px;
  transition: width .5s ease;
}
.dg-bar-fill.done { background: #69f0ae; }
.dg-count { font-size: .82rem; font-weight: 700; white-space: nowrap; opacity: .95; min-width: 44px; text-align: right; }
.dg-done-label { font-size: .78rem; opacity: .9; margin-top: 6px; }
.dg-options {
  flex-wrap: wrap; gap: 7px; margin-top: 10px;
}
.dg-opt {
  background: rgba(255,255,255,0.18); border: 1.5px solid rgba(255,255,255,0.35);
  border-radius: 20px; color: #fff; font-size: .8rem; font-weight: 600;
  padding: 4px 13px; cursor: pointer; transition: background .15s;
}
.dg-opt:hover   { background: rgba(255,255,255,0.3); }
.dg-opt.active  { background: #fff; color: var(--red); border-color: #fff; }
.stat-box {
  background: rgba(255,255,255,0.18);
  border-radius: 10px; padding: 8px 12px; text-align: center;
}
.stat-box .stat-num { font-size: 1.4rem; font-weight: 700; }
.stat-box .stat-lbl { font-size: .75rem; opacity: .85; }

.streak-toast {
  position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%) translateY(20px);
  background: #333; color: #fff;
  padding: 10px 20px; border-radius: 24px;
  font-size: .95rem; font-weight: 600;
  opacity: 0; transition: opacity .3s, transform .3s;
  z-index: 9999; pointer-events: none; white-space: nowrap;
}
.streak-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

.goal-toast {
  position: fixed; bottom: 120px; left: 50%; transform: translateX(-50%) translateY(20px);
  background: #1b5e20; color: #fff;
  padding: 10px 22px; border-radius: 24px;
  font-size: .95rem; font-weight: 600;
  opacity: 0; transition: opacity .3s, transform .3s;
  z-index: 9999; pointer-events: none; white-space: nowrap;
}
.goal-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

.themes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
  gap: 12px; padding: 16px;
}

.theme-card {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 0;
  cursor: pointer;
  transition: transform .15s, box-shadow .15s;
  border: 2px solid transparent;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.theme-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.13);
}
.theme-card.done { border-color: var(--green); }

.tc-img-wrap {
  position: relative;
  width: 100%;
  height: 108px;
  overflow: hidden;
  flex-shrink: 0;
}
.tc-img-wrap img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform .3s;
}
.theme-card:hover .tc-img-wrap img { transform: scale(1.05); }

.tc-badge {
  position: absolute;
  top: 8px; left: 8px;
  color: #fff;
  font-size: .65rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 20px;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.tc-body {
  padding: 10px 12px 12px;
  display: flex; flex-direction: column; gap: 6px;
}
.tc-title { font-size: .85rem; font-weight: 700; line-height: 1.3; }
.tc-count { font-size: .75rem; color: var(--muted); }

.tc-bar {
  height: 4px; background: #eee; border-radius: 2px; overflow: hidden;
}
.tc-bar-fill {
  height: 100%; background: var(--red); border-radius: 2px;
  transition: width .4s;
}

/* ── THEME VIEW ───────────────────────────────────────── */
.theme-header {
  background: var(--card);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}

.th-img-wrap {
  position: relative;
  width: 100%;
  height: 160px;
  overflow: hidden;
}
.th-img-wrap img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.th-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  padding: 12px;
}
.th-icon-badge {
  font-size: 1.4rem;
  width: 44px; height: 44px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.th-info {
  padding: 12px 16px 14px;
}
.th-info h2 { font-size: 1.15rem; margin: 0 0 2px; }
.th-info p  { font-size: .85rem; color: var(--muted); margin: 0; }

.theme-note {
  margin-top: 10px;
  background: #FFF8E1;
  border-left: 4px solid #FFC107;
  padding: 10px 12px;
  border-radius: 0 8px 8px 0;
  font-size: .82rem; line-height: 1.55;
  color: #555;
}

/* ── TABS ─────────────────────────────────────────────── */
.tabs {
  display: flex; background: var(--card);
  border-bottom: 2px solid var(--border);
  position: sticky; top: var(--nav-h); z-index: 90;
}
.tab {
  flex: 1; border: none; background: none;
  padding: 12px 6px; font-size: .88rem; font-weight: 600;
  cursor: pointer; color: var(--muted);
  border-bottom: 3px solid transparent; margin-bottom: -2px;
  transition: all .15s;
}
.tab.active { color: var(--red); border-bottom-color: var(--red); }
.tab:hover:not(.active) { color: var(--text); }

.tab-content { padding: 12px 14px; }

/* ── DIALOGUES ────────────────────────────────────────── */
.dialogue-block {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  margin-bottom: 14px; overflow: hidden;
}
.dialogue-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; cursor: pointer;
  border-bottom: 1px solid var(--border);
  background: #fafafa;
}
.dialogue-header h4 { font-size: .9rem; }
.dialogue-header .dh-actions { display: flex; gap: 6px; align-items: center; }
.chevron { font-size: .8rem; color: var(--muted); transition: transform .2s; }
.dialogue-block.open .chevron { transform: rotate(180deg); }
.dialogue-body { display: none; padding: 12px; }
.dialogue-block.open .dialogue-body { display: block; }

.dl-line {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 7px 0; border-bottom: 1px solid #f0f0f0;
}
.dl-line:last-child { border-bottom: none; }
.dl-speaker {
  min-width: 26px; height: 26px;
  background: var(--red); color: #fff;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: .78rem; font-weight: 700; flex-shrink: 0;
}
.dl-speaker.b { background: var(--blue); }
.dl-texts { flex: 1; }
.dl-tr { font-size: .95rem; font-weight: 500; line-height: 1.4; }
.dl-en { font-size: .82rem; color: var(--blue); margin-top: 2px; }
.dl-zh { font-size: .82rem; color: #c62828; margin-top: 2px; }
.dl-tts {
  background: none; border: 1px solid var(--border);
  border-radius: 6px; padding: 3px 8px; cursor: pointer;
  font-size: .8rem; color: var(--muted); flex-shrink: 0;
  transition: all .15s;
}
.dl-tts:hover { background: var(--red); color: #fff; border-color: var(--red); }

/* ── SENTENCES ────────────────────────────────────────── */
.sentences-toolbar {
  display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap;
}
.btn-sm {
  padding: 6px 14px; border-radius: 8px; border: none;
  font-size: .82rem; font-weight: 600; cursor: pointer;
  transition: all .15s;
}
.btn-primary { background: var(--red); color: #fff; }
.btn-primary:hover { background: var(--red-dk); }
.btn-outline { background: var(--card); color: var(--text); border: 1px solid var(--border); }
.btn-outline:hover { background: #f0f0f0; }
.btn-retry  { background: #f59e0b; color: #fff; border: none; }
.btn-retry:hover { background: #d97706; }

.sentence-item {
  background: var(--card);
  border-radius: 10px;
  box-shadow: 0 1px 4px rgba(0,0,0,.07);
  padding: 12px 14px;
  margin-bottom: 8px;
  display: flex; align-items: flex-start; gap: 10px;
}
.sentence-item.learned { border-left: 4px solid var(--green); }

.si-num {
  min-width: 36px; text-align: right;
  font-size: .78rem; color: var(--muted); font-weight: 600;
  padding-top: 3px;
}
.si-body { flex: 1; }
.si-tr { font-size: .97rem; font-weight: 500; line-height: 1.45; }
.si-en { font-size: .83rem; color: var(--blue); margin-top: 3px; }
.si-zh { font-size: .83rem; color: #c62828; margin-top: 3px; }
.si-actions { display: flex; gap: 6px; align-items: center; flex-shrink: 0; }

.btn-tts {
  background: none; border: 1px solid var(--border);
  border-radius: 8px; padding: 5px 10px;
  cursor: pointer; font-size: .85rem;
  transition: all .15s; color: var(--muted);
}
.btn-tts:hover { background: var(--red); color: #fff; border-color: var(--red); }
.btn-tts.playing { background: var(--red); color: #fff; border-color: var(--red); }

.btn-check {
  background: none; border: 1px solid var(--border);
  border-radius: 8px; padding: 5px 10px;
  cursor: pointer; font-size: .85rem;
  transition: all .15s; color: var(--muted);
}
.btn-check.done { background: var(--green); color: #fff; border-color: var(--green); }
.btn-check:hover:not(.done) { background: #e8f5e9; color: var(--green); border-color: var(--green); }

/* Favourite star button */
.btn-fav {
  background: none; border: 1px solid var(--border);
  border-radius: 8px; padding: 5px 8px;
  cursor: pointer; font-size: .95rem; line-height: 1;
  transition: all .15s; color: var(--muted);
}
.btn-fav:hover   { border-color: #f59e0b; color: #f59e0b; }
.btn-fav.active  { background: #fffbeb; border-color: #f59e0b; color: #f59e0b; }
body.dark .btn-fav.active { background: #2a1f00; }

/* Favorites shortcut on home hero */
.fav-shortcut {
  width: 100%; display: flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,0.15); border: none; border-radius: 12px;
  color: #fff; padding: 10px 14px; cursor: pointer;
  margin-top: 4px; font-size: .85rem; text-align: left;
  transition: background .15s;
}
.fav-shortcut:hover { background: rgba(255,255,255,0.25); }
.fav-shortcut-icon  { font-size: 1rem; }
.fav-shortcut-label { font-weight: 700; flex: 1; }
.fav-shortcut-count { opacity: .85; font-size: .8rem; }
.fav-shortcut-arrow { font-size: 1.2rem; opacity: .7; }

/* Favorites view */
.fav-ui { padding: 12px 14px; max-width: 640px; margin: 0 auto; }
.fav-header {
  font-size: .78rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--muted); margin-bottom: 12px;
}
.fav-group { margin-bottom: 20px; }
.fav-group-title {
  font-size: .82rem; font-weight: 700; color: var(--text);
  padding: 6px 10px; border-radius: 6px;
  background: var(--card); margin-bottom: 8px;
}
.fav-empty {
  text-align: center; padding: 60px 24px 40px;
}
.fav-empty-icon { font-size: 3rem; margin-bottom: 14px; color: var(--muted); }
.fav-empty p    { color: var(--text); font-size: .95rem; margin-bottom: 6px; }
.fav-empty-sub  { color: var(--muted); font-size: .82rem; }

/* ── VOCABULARY ───────────────────────────────────────── */
.vocab-toolbar {
  display: flex; gap: 8px; margin-bottom: 12px; align-items: center; flex-wrap: wrap;
}
.vocab-search {
  flex: 1; min-width: 140px;
  padding: 7px 12px; border: 1px solid var(--border);
  border-radius: 8px; font-size: .88rem; outline: none;
}
.vocab-search:focus { border-color: var(--red); }

.vocab-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }

.word-card {
  background: var(--card);
  border-radius: 10px;
  box-shadow: 0 1px 4px rgba(0,0,0,.07);
  padding: 12px;
  cursor: pointer;
  transition: transform .12s, box-shadow .12s;
  border: 1px solid var(--border);
  perspective: 600px;
}
.word-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.word-card-inner {
  position: relative;
  transition: transform .35s;
  transform-style: preserve-3d;
}
.word-card.flipped .word-card-inner { transform: rotateY(180deg); }

.wc-front, .wc-back {
  backface-visibility: hidden;
  min-height: 72px;
}
.wc-back {
  position: absolute; top: 0; left: 0; right: 0;
  transform: rotateY(180deg);
}

.wc-tr { font-size: .97rem; font-weight: 700; margin-bottom: 4px; }
.wc-type { font-size: .75rem; color: var(--muted); }
.wc-level {
  display: inline-block; margin-top: 6px;
  padding: 2px 7px; border-radius: 20px; font-size: .7rem; font-weight: 700;
}
.level-A1 { background: #e8f5e9; color: #2e7d32; }
.level-A2 { background: #e3f2fd; color: #1565c0; }
.level-B1 { background: #fff3e0; color: #e65100; }

.wc-en { font-size: .85rem; color: var(--blue); font-weight: 600; }
.wc-zh { font-size: .82rem; color: #c62828; margin-top: 3px; }
.wc-hint { font-size: .75rem; color: var(--muted); margin-top: 8px; }

/* ── PRACTICE ─────────────────────────────────────────── */
.practice-heading { padding: 20px 16px 10px; font-size: 1.2rem; }
.practice-menu {
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  gap: 12px; padding: 0 16px;
}
.practice-card {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 0;
  cursor: pointer; transition: transform .15s, box-shadow .15s;
  border: 2px solid transparent;
  display: flex; flex-direction: column; overflow: hidden;
}
.practice-card:hover { transform: translateY(-3px); box-shadow: 0 6px 18px rgba(0,0,0,.13); border-color: var(--red); }
.pc-img-wrap { width: 100%; height: 90px; overflow: hidden; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: #f8f8f8; }
body.dark .pc-img-wrap { background: #252525; }
.pc-img-wrap img { width: 72px; height: 72px; object-fit: contain; display: block; transition: transform .3s; }
.practice-card:hover .pc-img-wrap img { transform: scale(1.1); }
.pc-info { padding: 10px 10px 12px; text-align: center; }
.pc-info h3 { font-size: .82rem; font-weight: 700; margin-bottom: 3px; line-height: 1.3; }
.pc-info p  { font-size: .72rem; color: var(--muted); line-height: 1.35; }

/* ── PRACTICE FILTER CHIP STRIP ───────────────────────── */
.pf-strip {
  display: flex; gap: 8px;
  padding: 10px 16px 12px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.pf-strip::-webkit-scrollbar { display: none; }
.pf-chip {
  flex-shrink: 0;
  padding: 6px 14px; border-radius: 20px;
  border: 1.5px solid var(--border);
  background: var(--card);
  font-size: .8rem; font-weight: 600;
  cursor: pointer; color: var(--text);
  transition: all .15s; white-space: nowrap;
}
.pf-chip:hover:not(.active) { border-color: var(--red); color: var(--red); }
.pf-chip.active { background: var(--red); color: #fff; border-color: var(--red); }
body.dark .pf-chip { background: var(--card); color: var(--text); border-color: #444; }
body.dark .pf-chip.active { background: var(--red); color: #fff; border-color: var(--red); }

/* ── FLASHCARD ────────────────────────────────────────── */
.flashcard-ui { padding: 16px; max-width: 480px; margin: 0 auto; }
.fc-progress {
  display: flex; justify-content: space-between;
  font-size: .85rem; color: var(--muted); margin-bottom: 16px;
  align-items: center;
}
.fc-progress-bar {
  height: 6px; background: #eee; border-radius: 3px; flex: 1; margin: 0 10px; overflow: hidden;
}
.fc-progress-fill { height: 100%; background: var(--red); border-radius: 3px; transition: width .3s; }

.fc-card {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: 0 4px 20px rgba(0,0,0,.12);
  min-height: 220px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 30px 24px; text-align: center;
  cursor: pointer;
  position: relative;
  transition: transform .2s;
  border: 2px solid transparent;
}
.fc-card:hover { transform: scale(1.01); }
.fc-card.revealed { border-color: var(--blue); }

.fc-word  { font-size: 1.6rem; font-weight: 800; margin-bottom: 8px; }
.fc-type  { font-size: .82rem; color: var(--muted); }
.fc-hint  { font-size: .8rem; color: var(--muted); margin-top: 20px; opacity: .7; }

.fc-answer {
  margin-top: 16px; width: 100%; text-align: center;
  animation: fadeIn .25s;
}
.fc-en { font-size: 1.1rem; color: var(--blue); font-weight: 700; margin-bottom: 6px; }
.fc-zh { font-size: .95rem; color: #c62828; }
.fc-tts-btn {
  margin-top: 12px; padding: 6px 16px;
  border-radius: 8px; border: 1px solid var(--border);
  background: none; cursor: pointer; font-size: .85rem;
  transition: all .15s;
}
.fc-tts-btn:hover { background: var(--red); color: #fff; border-color: var(--red); }

.fc-actions { display: flex; gap: 10px; margin-top: 16px; width: 100%; }
.fc-btn {
  flex: 1; padding: 12px; border-radius: 10px; border: none;
  font-size: .9rem; font-weight: 700; cursor: pointer; transition: all .15s;
}
.fc-btn.no  { background: #ffebee; color: #c62828; }
.fc-btn.yes { background: #e8f5e9; color: #2e7d32; }
.fc-btn.no:hover  { background: #c62828; color: #fff; }
.fc-btn.yes:hover { background: #2e7d32; color: #fff; }

.fc-done {
  text-align: center; padding: 40px 20px;
}
.fc-done .fc-done-icon { font-size: 3rem; margin-bottom: 12px; }
.fc-done h3 { font-size: 1.2rem; margin-bottom: 8px; }
.fc-done p  { color: var(--muted); font-size: .9rem; }
.fc-done-btns { display: flex; gap: 10px; justify-content: center; margin-top: 20px; flex-wrap: wrap; }

/* ── SCRAMBLE ─────────────────────────────────────────── */
.scramble-ui { padding: 16px; max-width: 540px; margin: 0 auto; }
.sc-progress {
  display: flex; justify-content: space-between;
  font-size: .85rem; color: var(--muted); margin-bottom: 16px;
}
.sc-sentence-box {
  background: var(--card); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 20px; margin-bottom: 16px;
}
.sc-translation {
  font-size: .9rem; color: var(--blue); margin-bottom: 12px; font-style: italic;
}
.sc-answer-area {
  min-height: 56px; background: #f9f9f9;
  border: 2px dashed var(--border); border-radius: 8px;
  padding: 10px; display: flex; flex-wrap: wrap; gap: 6px;
  margin-bottom: 12px;
  transition: border-color .15s;
}
.sc-answer-area.correct { border-color: var(--green); background: #f1f8e9; }
.sc-answer-area.wrong   { border-color: #c62828;    background: #ffebee; }

.sc-word-bank {
  display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px;
}
.sc-word {
  padding: 8px 14px; border-radius: 20px;
  background: var(--card); border: 1px solid var(--border);
  cursor: pointer; font-size: .9rem; font-weight: 500;
  transition: all .15s; user-select: none;
}
.sc-word:hover { background: var(--red); color: #fff; border-color: var(--red); }
.sc-word.placed { opacity: .35; cursor: default; pointer-events: none; }
.sc-placed-word {
  padding: 8px 14px; border-radius: 20px;
  background: var(--blue); color: #fff;
  cursor: pointer; font-size: .9rem; font-weight: 500;
  transition: all .15s;
}
.sc-placed-word:hover { background: #1250a0; }

.sc-feedback {
  min-height: 28px; font-size: .9rem; font-weight: 600;
  text-align: center; margin-bottom: 8px;
}
.sc-feedback.correct { color: var(--green); }
.sc-feedback.wrong   { color: #c62828; }

.sc-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.sc-btn {
  padding: 10px 22px; border-radius: 10px; border: none;
  font-size: .9rem; font-weight: 700; cursor: pointer; transition: all .15s;
}
.sc-btn.check  { background: var(--blue); color: #fff; }
.sc-btn.check:hover { background: #1250a0; }
.sc-btn.clear  { background: #f5f5f5; color: var(--text); }
.sc-btn.clear:hover { background: #e0e0e0; }
.sc-btn.next   { background: var(--green); color: #fff; display: none; }
.sc-btn.next:hover  { background: #1b5e20; }

/* ── MODAL ────────────────────────────────────────────── */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 200; display: flex; align-items: center; justify-content: center;
}
.modal {
  background: var(--card); border-radius: var(--radius);
  padding: 28px 24px; width: 90%; max-width: 340px;
  box-shadow: 0 8px 40px rgba(0,0,0,.2);
}
.modal h3 { font-size: 1.1rem; margin-bottom: 8px; }
.modal p  { font-size: .9rem; color: var(--muted); margin-bottom: 16px; }
.lang-options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
.lang-opt {
  padding: 12px; border-radius: 10px; border: 2px solid var(--border);
  background: var(--card); cursor: pointer; font-size: .88rem; font-weight: 600;
  transition: all .15s;
}
.lang-opt:hover, .lang-opt.active { background: var(--red); color: #fff; border-color: var(--red); }
.btn-close-modal {
  width: 100%; padding: 10px; border-radius: 8px; border: none;
  background: #f0f0f0; cursor: pointer; font-weight: 600; font-size: .9rem;
}
.btn-close-modal:hover { background: #e0e0e0; }

/* ── TTS BAR ──────────────────────────────────────────── */
.tts-bar {
  position: fixed; bottom: 0; left: 0; right: 0;
  background: #1a1a1a; color: #fff;
  padding: 10px 16px;
  display: flex; align-items: center; gap: 10px;
  z-index: 150; font-size: .85rem;
}
.tts-bar span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.btn-tts-stop {
  background: rgba(255,255,255,.15); border: none; color: #fff;
  padding: 5px 12px; border-radius: 6px; cursor: pointer; font-size: .9rem;
}
.btn-tts-stop:hover { background: rgba(255,255,255,.3); }

/* ── PLAY ALL BUTTON ──────────────────────────────────── */
.btn-play-all {
  display: flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: 8px;
  background: var(--red); color: #fff; border: none;
  font-size: .82rem; font-weight: 600; cursor: pointer;
  transition: background .15s;
}
.btn-play-all:hover { background: var(--red-dk); }

/* ── EMPTY STATE ──────────────────────────────────────── */
.empty-state {
  text-align: center; padding: 40px 20px; color: var(--muted);
}
.empty-state .es-icon { font-size: 3rem; margin-bottom: 10px; }

/* ── ANIMATIONS ───────────────────────────────────────── */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.anim-in { animation: fadeIn .25s ease both; }

/* ── SPEAKING PRACTICE ────────────────────────────────── */
.speaking-ui { padding: 16px; max-width: 480px; margin: 0 auto; }

.sp-progress {
  display: flex; justify-content: space-between; align-items: center;
  font-size: .85rem; color: var(--muted); margin-bottom: 16px; gap: 10px;
}
.sp-progress-bar {
  flex: 1; height: 6px; background: #eee; border-radius: 3px; overflow: hidden;
}
.sp-progress-fill { height: 100%; background: var(--red); border-radius: 3px; transition: width .3s; }

.sp-card {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: 0 4px 20px rgba(0,0,0,.12);
  padding: 28px 20px 24px;
  text-align: center;
  margin-bottom: 16px;
}
.sp-hint {
  font-size: 1rem; color: var(--blue); font-style: italic;
  line-height: 1.55; margin-bottom: 28px;
}
.sp-mic-btn {
  width: 88px; height: 88px; border-radius: 50%; border: none;
  background: var(--red); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 16px;
  box-shadow: 0 4px 16px rgba(227,10,23,.35);
  transition: transform .2s, box-shadow .2s;
}
.sp-mic-btn:hover { transform: scale(1.06); box-shadow: 0 6px 22px rgba(227,10,23,.45); }
.sp-mic-btn.listening {
  background: #c62828;
  animation: sp-pulse 1.1s ease-in-out infinite;
}
.sp-mic-icon { font-size: 2.2rem; line-height: 1; }

.sp-instruction { font-size: .85rem; color: var(--muted); min-height: 20px; }

.sp-result {
  margin-top: 20px; text-align: left;
  animation: fadeIn .25s;
}
.sp-heard, .sp-correct {
  font-size: .88rem; margin-bottom: 8px; line-height: 1.5;
}
.sp-lbl { font-weight: 700; color: var(--muted); margin-right: 4px; }
.sp-correct .sp-lbl ~ span { color: var(--green); font-weight: 600; }

.sp-bar {
  height: 8px; background: #eee; border-radius: 4px;
  overflow: hidden; margin: 12px 0 8px;
}
.sp-bar-fill { height: 100%; border-radius: 4px; transition: width .5s; }

.sp-score-text { font-size: .92rem; font-weight: 700; text-align: center; }
.sp-score-text.correct { color: var(--green); }
.sp-score-text.partial  { color: #E65100; }
.sp-score-text.wrong    { color: #c62828; }

.sp-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

@keyframes sp-pulse {
  0%, 100% { box-shadow: 0 4px 16px rgba(227,10,23,.35); transform: scale(1); }
  50%       { box-shadow: 0 4px 32px rgba(227,10,23,.6);  transform: scale(1.05); }
}

/* ── LISTENING MODE ───────────────────────────────────── */
.listening-ui { padding: 16px; max-width: 480px; margin: 0 auto; }

.li-progress {
  display: flex; justify-content: space-between; align-items: center;
  font-size: .85rem; color: var(--muted); margin-bottom: 16px; gap: 10px;
}
.li-progress-bar  { flex: 1; height: 6px; background: #eee; border-radius: 3px; overflow: hidden; }
.li-progress-fill { height: 100%; background: var(--red); border-radius: 3px; transition: width .3s; }

.li-card {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 24px 20px 18px;
  margin-bottom: 16px;
}

.li-play-area { text-align: center; margin-bottom: 20px; }
.li-play-btn {
  width: 80px; height: 80px; border-radius: 50%; border: none;
  background: var(--blue); font-size: 2rem; line-height: 1;
  cursor: pointer; transition: transform .2s, box-shadow .2s;
  box-shadow: 0 4px 16px rgba(25,118,210,.35);
  display: inline-flex; align-items: center; justify-content: center;
}
.li-play-btn:hover { transform: scale(1.07); box-shadow: 0 6px 22px rgba(25,118,210,.5); }
.li-play-hint { font-size: .82rem; color: var(--muted); margin-top: 10px; }

.li-input {
  width: 100%; box-sizing: border-box;
  font-size: 1.05rem; font-family: inherit;
  border: 2px solid #dde; border-radius: 10px;
  padding: 10px 12px; resize: vertical;
  outline: none; transition: border-color .2s;
}
.li-input:focus    { border-color: var(--blue); }
.li-input:disabled { background: #f5f5f5; color: #555; }

.li-result { margin-top: 16px; animation: fadeIn .25s; }
.li-typed, .li-correct { font-size: .88rem; margin-bottom: 8px; line-height: 1.5; }
.li-lbl { font-weight: 700; color: var(--muted); margin-right: 4px; }
.li-correct .li-lbl ~ span { color: var(--green); font-weight: 600; }

.li-bar      { height: 8px; background: #eee; border-radius: 4px; overflow: hidden; margin: 12px 0 8px; }
.li-bar-fill { height: 100%; border-radius: 4px; transition: width .5s; }

.li-score-text         { font-size: .92rem; font-weight: 700; text-align: center; }
.li-score-text.correct { color: var(--green); }
.li-score-text.partial { color: #E65100; }
.li-score-text.wrong   { color: #c62828; }

.li-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* ── SRS ──────────────────────────────────────────────── */
.practice-card-wide { grid-column: 1 / -1; }

.srs-due-badge {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--red); color: #fff;
  font-size: .65rem; font-weight: 700;
  width: 18px; height: 18px; border-radius: 50%;
  margin-left: 4px; vertical-align: middle;
}

.srs-ui { padding: 16px; max-width: 480px; margin: 0 auto; }

.srs-progress {
  display: flex; align-items: center; gap: 10px;
  font-size: .85rem; color: var(--muted); margin-bottom: 16px;
}
.srs-progress-bar { flex: 1; height: 6px; background: #eee; border-radius: 3px; overflow: hidden; }
.srs-progress-fill { height: 100%; background: var(--blue); border-radius: 3px; transition: width .3s; }
.srs-tag {
  font-size: .72rem; font-weight: 700; padding: 2px 8px;
  border-radius: 10px; white-space: nowrap;
}
.srs-tag-new    { background: #E3F2FD; color: var(--blue); }
.srs-tag-review { background: #E8F5E9; color: var(--green); }

.srs-card {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 28px 20px 20px;
  margin-bottom: 16px;
  text-align: center;
}
.srs-hint {
  font-size: 1.1rem; color: var(--blue); font-style: italic;
  line-height: 1.6; margin-bottom: 20px;
}
.srs-divider { border-top: 1px dashed var(--border); margin: 0 0 16px; }
.srs-answer { font-size: 1.2rem; font-weight: 700; margin-bottom: 20px; line-height: 1.5; }

.srs-btn-wrap { display: flex; justify-content: center; }
.srs-actions { display: flex; gap: 12px; justify-content: center; }

.srs-btn-again, .srs-btn-knew {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  border: none; border-radius: var(--radius); padding: 12px 28px;
  font-size: 1.4rem; cursor: pointer; transition: transform .15s, box-shadow .15s;
  font-family: inherit;
}
.srs-btn-again span, .srs-btn-knew span {
  font-size: .78rem; font-weight: 700;
}
.srs-btn-again {
  background: #FFEBEE; color: #c62828;
  box-shadow: 0 2px 6px rgba(198,40,40,.15);
}
.srs-btn-knew  {
  background: #E8F5E9; color: var(--green);
  box-shadow: 0 2px 6px rgba(46,125,50,.15);
}
.srs-btn-again:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(198,40,40,.25); }
.srs-btn-knew:hover  { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(46,125,50,.25); }

.srs-audio-wrap { text-align: center; margin-top: 4px; }

/* ── STATS ────────────────────────────────────────────── */
.stats-ui { padding: 16px; max-width: 480px; margin: 0 auto; }

.st-section { margin-bottom: 24px; }
.st-section-title {
  font-size: 1rem; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .05em;
  margin-bottom: 12px;
}

.st-card-grid {
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}
.st-card {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 14px 10px; text-align: center;
}
.st-card-num { font-size: 1.5rem; font-weight: 700; }
.st-card-lbl { font-size: .72rem; color: var(--muted); margin-top: 4px; }

.st-theme-list { display: flex; flex-direction: column; gap: 10px; }
.st-theme-row {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 10px 14px;
}
.st-theme-label {
  display: flex; align-items: center; gap: 6px;
  font-size: .85rem; margin-bottom: 6px;
}
.st-theme-num { color: var(--muted); font-size: .75rem; min-width: 44px; }
.st-theme-name { flex: 1; font-weight: 600; }
.st-theme-count { color: var(--muted); font-size: .78rem; }
.st-bar {
  height: 6px; background: #eee; border-radius: 3px; overflow: hidden;
}
.st-bar-fill { height: 100%; border-radius: 3px; transition: width .4s; }

/* SRS stats bar */
.st-srs-bar-wrap { margin-top: 14px; }
.st-srs-bar {
  display: flex; height: 10px; border-radius: 5px; overflow: hidden;
  background: #eee;
}
.st-srs-seg { height: 100%; transition: width .4s; }
.st-srs-mature  { background: #22c55e; }
.st-srs-learning { background: #f59e0b; }
.st-srs-new     { background: #94a3b8; }
.st-srs-legend {
  display: flex; align-items: center; gap: 12px;
  margin-top: 8px; font-size: .78rem; color: var(--muted);
}
.st-srs-dot {
  display: inline-block; width: 10px; height: 10px;
  border-radius: 50%; margin-right: 4px;
}
.st-srs-dot.st-srs-mature  { background: #22c55e; }
.st-srs-dot.st-srs-learning { background: #f59e0b; }
.st-srs-dot.st-srs-new     { background: #94a3b8; }
.st-srs-empty { color: var(--muted); font-size: .85rem; margin-top: 10px; text-align: center; }

/* Practice activity stats list */
.st-pa-list { display: flex; flex-direction: column; gap: 6px; }
.st-pa-row {
  display: flex; align-items: center; gap: 10px;
  background: var(--card); border: 1px solid var(--border);
  border-radius: 10px; padding: 9px 13px;
  font-size: .84rem; transition: opacity .2s;
}
.st-pa-row.st-pa-empty { opacity: .45; }
.st-pa-icon   { font-size: 1.15rem; flex: 0 0 auto; }
.st-pa-name   { flex: 1; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-pa-sessions { flex: 0 0 auto; font-weight: 700; color: var(--primary); }
.st-pa-items  { flex: 0 0 auto; color: var(--muted); font-size: .78rem; white-space: nowrap; }

/* ── WRITING MODE ─────────────────────────────────────── */
.writing-ui { padding: 16px; max-width: 480px; margin: 0 auto; }

.wr-progress {
  display: flex; justify-content: space-between; align-items: center;
  font-size: .85rem; color: var(--muted); margin-bottom: 16px; gap: 10px;
}
.wr-progress-bar {
  flex: 1; height: 6px; background: #eee; border-radius: 3px; overflow: hidden;
}
.wr-progress-fill { height: 100%; background: var(--blue); border-radius: 3px; transition: width .3s; }

.wr-card {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px 20px 16px;
  margin-bottom: 16px;
}
.wr-hint {
  font-size: 1rem; color: var(--blue); font-style: italic;
  line-height: 1.55; margin-bottom: 14px;
}
.wr-input {
  width: 100%; box-sizing: border-box;
  font-size: 1.05rem; font-family: inherit;
  border: 2px solid #dde; border-radius: 10px;
  padding: 10px 12px; resize: vertical;
  outline: none; transition: border-color .2s;
}
.wr-input:focus { border-color: var(--blue); }
.wr-input:disabled { background: #f5f5f5; color: #555; }

.wr-result {
  margin-top: 16px; text-align: left;
  animation: fadeIn .25s;
}
.wr-typed, .wr-correct {
  font-size: .88rem; margin-bottom: 8px; line-height: 1.5;
}
.wr-lbl { font-weight: 700; color: var(--muted); margin-right: 4px; }
.wr-correct .wr-lbl ~ span { color: var(--green); font-weight: 600; }

.wr-bar {
  height: 8px; background: #eee; border-radius: 4px;
  overflow: hidden; margin: 12px 0 8px;
}
.wr-bar-fill { height: 100%; border-radius: 4px; transition: width .5s; }

.wr-score-text { font-size: .92rem; font-weight: 700; text-align: center; }
.wr-score-text.correct { color: var(--green); }
.wr-score-text.partial  { color: #E65100; }
.wr-score-text.wrong    { color: #c62828; }

.wr-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* ── THEME COMPLETE CELEBRATION ───────────────────────── */
.tc-overlay {
  position: fixed; inset: 0; z-index: 9998;
  background: rgba(0,0,0,0.55);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  transition: opacity .4s;
}
.tc-overlay.tc-fade-out { opacity: 0; }

.tc-modal {
  background: var(--card); border-radius: 20px;
  padding: 32px 28px 24px; text-align: center;
  box-shadow: 0 16px 48px rgba(0,0,0,.35);
  position: relative; z-index: 2; width: 86%; max-width: 320px;
  animation: tc-pop .4s cubic-bezier(.34,1.56,.64,1);
}
.tc-emoji { font-size: 3.5rem; line-height: 1; margin-bottom: 12px; }
.tc-modal h2 { font-size: 1.4rem; font-weight: 800; margin-bottom: 6px; }
.tc-name { font-size: 1rem; color: var(--red); font-weight: 700; margin-bottom: 4px; }
.tc-sub  { font-size: .88rem; color: var(--muted); margin-bottom: 20px; }
.tc-close { padding: 10px 32px; }

/* Confetti pieces */
.cp {
  position: absolute; top: -12px;
  animation: cp-fall linear forwards;
}
@keyframes cp-fall {
  0%   { transform: translateY(0) rotate(0deg) scale(1); opacity: 1; }
  85%  { opacity: 1; }
  100% { transform: translateY(105vh) rotate(600deg) scale(.5); opacity: 0; }
}
@keyframes tc-pop {
  0%   { transform: scale(.5); opacity: 0; }
  100% { transform: scale(1);  opacity: 1; }
}

/* ── DARK MODE ────────────────────────────────────────── */
body.dark {
  --bg:     #111;
  --card:   #1e1e1e;
  --border: #2e2e2e;
  --text:   #e8e8e8;
  --muted:  #9e9e9e;
  --shadow: 0 2px 8px rgba(0,0,0,.5);
}

/* Progress bars */
body.dark .sp-progress-bar,
body.dark .wr-progress-bar,
body.dark .li-progress-bar,
body.dark .srs-progress-bar,
body.dark .st-bar,
body.dark .sp-bar,
body.dark .wr-bar,
body.dark .li-bar,
body.dark .tc-bar,
body.dark .fc-progress-bar,
body.dark .sc-progress-bar { background: #333; }

/* Scramble area */
body.dark .sc-answer-area         { background: #252525; }
body.dark .sc-answer-area.correct { background: #1a2a15; border-color: var(--green); }
body.dark .sc-answer-area.wrong   { background: #2a1515; border-color: #c62828; }
body.dark .sc-word                { background: #252525; color: var(--text); border-color: #444; }
body.dark .sc-btn.clear           { background: #2a2a2a; color: var(--text); }
body.dark .sc-btn.clear:hover     { background: #333; }

/* Dialogue header */
body.dark .dialogue-header        { background: #252525; }

/* Flashcard buttons */
body.dark .fc-btn.no              { background: #2a1515; color: #ef9a9a; }
body.dark .fc-btn.yes             { background: #152515; color: #a5d6a7; }
body.dark .fc-btn.no:hover        { background: #c62828; color: #fff; }
body.dark .fc-btn.yes:hover       { background: #2e7d32; color: #fff; }

/* SRS buttons */
body.dark .srs-btn-again          { background: #2a1515; color: #ef9a9a; }
body.dark .srs-btn-knew           { background: #152515; color: #a5d6a7; }

/* SRS tags */
body.dark .srs-tag-new            { background: #152030; color: #90caf9; }
body.dark .srs-tag-review         { background: #152515; color: #a5d6a7; }

/* Inputs */
body.dark .wr-input,
body.dark .li-input               { background: #252525; color: var(--text); border-color: #444; }
body.dark .wr-input:disabled,
body.dark .li-input:disabled      { background: #1a1a1a; color: #777; }

/* Vocab level badges */
body.dark .level-A1 { background: #152515; color: #a5d6a7; }
body.dark .level-A2 { background: #152030; color: #90caf9; }
body.dark .level-B1 { background: #2a1e10; color: #ffcc80; }

/* btn-outline hover */
body.dark .btn-outline:hover      { background: #2a2a2a; }
body.dark .btn-check:hover:not(.done) { background: #1a2a1a; border-color: var(--green); }

/* Close modal button */
body.dark .btn-close-modal        { background: #2a2a2a; color: var(--text); }
body.dark .btn-close-modal:hover  { background: #333; }

/* ── RESPONSIVE ───────────────────────────────────────── */
@media (max-width: 400px) {
  .themes-grid { grid-template-columns: 1fr 1fr; }
  .practice-menu { grid-template-columns: 1fr 1fr; }
  .vocab-list { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 700px) {
  body { max-width: 720px; margin: 0 auto; }
  .top-nav { max-width: 720px; left: 50%; transform: translateX(-50%); }
}

/* ── ROLE PLAY MODE ───────────────────────────────────── */
.rp-ui { padding: 16px; max-width: 520px; margin: 0 auto; }

.rp-phase-title {
  font-size: 1.05rem; font-weight: 700;
  padding: 2px 0 14px; color: var(--text);
}

/* Selection lists */
.rp-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.rp-list-item {
  background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 14px 16px; display: flex; align-items: center; gap: 12px;
  cursor: pointer; border: 2px solid transparent; transition: border-color .15s, transform .15s;
}
.rp-list-item:hover { border-color: var(--red); transform: translateY(-2px); }
.rp-list-icon { font-size: 1.5rem; line-height: 1; }
.rp-list-name { flex: 1; font-weight: 600; font-size: .92rem; }
.rp-list-meta { font-size: .78rem; color: var(--muted); }

/* Role selection */
.rp-role-cards { display: flex; gap: 14px; margin-bottom: 16px; }
.rp-role-card {
  flex: 1; background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 22px 14px; display: flex; flex-direction: column; align-items: center; gap: 10px;
  cursor: pointer; border: 2px solid transparent; transition: border-color .15s, transform .15s;
}
.rp-role-card:hover { border-color: var(--red); transform: translateY(-3px); }
.rp-role-avatar {
  width: 52px; height: 52px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; font-weight: 700; color: #fff;
}
.rp-avatar-a { background: var(--red); }
.rp-avatar-b { background: var(--blue, #1565C0); }
.rp-role-label { font-weight: 700; font-size: .9rem; }
.rp-role-lines { font-size: .78rem; color: var(--muted); }

/* Progress bar */
.rp-progress {
  display: flex; align-items: center; gap: 10px;
  font-size: .82rem; color: var(--muted); margin-bottom: 12px;
}
.rp-progress-bar { flex: 1; height: 6px; background: #ddd; border-radius: 3px; overflow: hidden; }
.rp-progress-fill { height: 100%; background: var(--red); border-radius: 3px; transition: width .3s; }
body.dark .rp-progress-bar { background: #333; }

/* Chat bubbles */
.rp-chat {
  display: flex; flex-direction: column; gap: 12px;
  max-height: calc(100vh - 230px); overflow-y: auto; padding-bottom: 8px;
}
.rp-bubble { display: flex; gap: 8px; align-items: flex-start; }
.rp-bubble-other { flex-direction: row; }
.rp-bubble-user  { flex-direction: row-reverse; }

.rp-bubble-speaker {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0; margin-top: 4px;
  display: flex; align-items: center; justify-content: center;
  font-size: .78rem; font-weight: 700; color: #fff;
}

.rp-bubble-body {
  background: var(--card); box-shadow: var(--shadow);
  border-radius: 16px 16px 16px 4px; padding: 10px 14px; max-width: 78%;
}
.rp-bubble-body-user { border-radius: 16px 16px 4px 16px; background: #e8f5e9; }
body.dark .rp-bubble-body-user { background: #152515; }

.rp-bubble-text { font-size: .93rem; font-weight: 500; line-height: 1.45; }
.rp-tr-en { font-size: .76rem; color: var(--blue, #1565C0); margin-top: 3px; }
.rp-tr-zh { font-size: .76rem; color: #c62828; margin-top: 2px; }

.rp-tts-btn {
  background: none; border: none; cursor: pointer; font-size: .82rem;
  padding: 2px 4px; margin-top: 4px; color: var(--muted); transition: color .15s;
}
.rp-tts-btn:hover { color: var(--red); }

.rp-bubble-prompt { font-size: .76rem; color: var(--muted); margin-bottom: 6px; font-style: italic; }
.rp-bubble-blur {
  font-size: .93rem; font-weight: 500; line-height: 1.45;
  filter: blur(5px); user-select: none; transition: filter .4s;
}
.rp-bubble-blur.revealed { filter: blur(0); }

.rp-mic-area { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 12px; }

.rp-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 12px; padding-bottom: 16px; }

/* End screen */
.rp-end { text-align: center; padding: 48px 20px; }
.rp-end-icon { font-size: 3rem; margin-bottom: 12px; }
.rp-end h3  { font-size: 1.2rem; margin-bottom: 8px; }
.rp-end p   { color: var(--muted); font-size: .9rem; }
.rp-end-sub { margin-top: 4px; font-size: .82rem !important; }
.rp-end-btns { display: flex; gap: 10px; justify-content: center; margin-top: 20px; flex-wrap: wrap; }

/* ── VOCAB QUIZ MODE ──────────────────────────────────── */
.vq-ui { padding: 16px; max-width: 520px; margin: 0 auto; }

.vq-phase-title {
  font-size: 1.05rem; font-weight: 700; padding: 2px 0 14px; color: var(--text);
}

/* Theme selection list (reuses rp-list style) */
.vq-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.vq-list-item {
  background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 14px 16px; display: flex; align-items: center; gap: 12px;
  cursor: pointer; border: 2px solid transparent; transition: border-color .15s, transform .15s;
}
.vq-list-item:hover { border-color: var(--red); transform: translateY(-2px); }
.vq-list-icon { font-size: 1.5rem; line-height: 1; }
.vq-list-name { flex: 1; font-weight: 600; font-size: .92rem; }
.vq-list-meta { font-size: .78rem; color: var(--muted); }

/* Mode selection */
.vq-mode-cards { display: flex; gap: 14px; margin-bottom: 10px; }
.vq-mode-card {
  flex: 1; background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 22px 14px; display: flex; flex-direction: column; align-items: center; gap: 8px;
  cursor: pointer; border: 2px solid transparent; transition: border-color .15s, transform .15s;
}
.vq-mode-card:hover { border-color: var(--red); transform: translateY(-3px); }
.vq-mode-icon { font-size: 2rem; }
.vq-mode-label { font-weight: 700; font-size: .92rem; }
.vq-mode-desc { font-size: .76rem; color: var(--muted); }

/* Progress bar */
.vq-progress {
  display: flex; align-items: center; gap: 10px;
  font-size: .82rem; color: var(--muted); margin-bottom: 16px;
}
.vq-progress-bar { flex: 1; height: 6px; background: #ddd; border-radius: 3px; overflow: hidden; }
.vq-progress-fill { height: 100%; background: var(--red); border-radius: 3px; transition: width .3s; }
body.dark .vq-progress-bar { background: #333; }

/* Question card */
.vq-card {
  background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 28px 20px; text-align: center; margin-bottom: 16px;
}
.vq-word-type { font-size: .72rem; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 10px; }
.vq-word-tr { font-size: 1.6rem; font-weight: 700; color: var(--text); line-height: 1.3; }
.vq-word-hint { font-size: .78rem; color: var(--muted); margin-top: 10px; }

/* Options */
.vq-options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.vq-opt {
  background: var(--card); border: 2px solid #ddd; border-radius: var(--radius);
  padding: 14px 10px; font-size: .88rem; font-weight: 500; color: var(--text);
  cursor: pointer; transition: border-color .15s, background .15s; line-height: 1.35;
}
body.dark .vq-opt { border-color: #444; }
.vq-opt:hover { border-color: var(--red); }
.vq-opt-correct { background: #e8f5e9 !important; border-color: #22c55e !important; color: #166534 !important; }
.vq-opt-wrong   { background: #fdecea !important; border-color: #c62828 !important; color: #7f1d1d !important; }
body.dark .vq-opt-correct { background: #14301a !important; color: #86efac !important; }
body.dark .vq-opt-wrong   { background: #2d1010 !important; color: #fca5a5 !important; }

/* Result screen */
.vq-end { text-align: center; padding: 40px 20px; }
.vq-end-icon { font-size: 3rem; margin-bottom: 12px; }
.vq-end h3 { font-size: 1.2rem; margin-bottom: 8px; }
.vq-end p { color: var(--muted); font-size: .9rem; }
.vq-score-bar {
  height: 10px; background: #eee; border-radius: 5px; overflow: hidden;
  margin: 14px auto 6px; max-width: 200px;
}
.vq-score-fill { height: 100%; border-radius: 5px; transition: width .5s; }
.vq-score-pct { font-size: 1.1rem; font-weight: 700; color: var(--text); margin-top: 4px !important; }
body.dark .vq-score-bar { background: #333; }
.vq-end-btns { display: flex; gap: 10px; justify-content: center; margin-top: 20px; flex-wrap: wrap; }

/* Matching game */
.vq-match-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px;
}
.vq-match-col { display: flex; flex-direction: column; gap: 8px; }
.vq-match-item {
  background: var(--card); border: 2px solid #ddd; border-radius: var(--radius);
  padding: 12px 10px; font-size: .85rem; font-weight: 500; text-align: center;
  cursor: pointer; transition: border-color .15s, background .15s; line-height: 1.3;
  min-height: 48px; display: flex; align-items: center; justify-content: center;
}
body.dark .vq-match-item { border-color: #444; }
.vq-match-item:hover { border-color: var(--red); }
.vq-sel { border-color: var(--red) !important; background: #fff5f5 !important; }
body.dark .vq-sel { background: #2d1010 !important; }
.vq-sel-wrong { border-color: #c62828 !important; background: #fdecea !important; animation: vq-shake .3s; }
.vq-matched { border-color: #22c55e !important; background: #e8f5e9 !important; cursor: default; opacity: .75; }
body.dark .vq-matched { background: #14301a !important; }
.vq-match-status { text-align: center; font-size: .82rem; color: var(--muted); margin-top: 4px; }

@keyframes vq-shake {
  0%,100% { transform: translateX(0); }
  25%      { transform: translateX(-6px); }
  75%      { transform: translateX(6px); }
}

/* ── PUZZLE ────────────────────────────────────────────── */
.puzzle-ui { padding: 16px; max-width: 520px; margin: 0 auto; }

.pz-phase-title {
  font-size: 1.05rem; font-weight: 700; padding: 2px 0 14px; color: var(--text);
}

/* Type selection cards */
.pz-type-cards { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; }
.pz-type-card {
  background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow);
  display: flex; align-items: center; gap: 0;
  cursor: pointer; border: 2px solid transparent;
  transition: border-color .15s, transform .15s; overflow: hidden; position: relative;
}
.pz-type-card:hover:not(.pz-type-soon) { border-color: var(--red); transform: translateY(-2px); }
.pz-type-soon { opacity: .55; cursor: not-allowed; }
.pz-type-img {
  width: 88px; height: 88px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; background: #f4f4f4;
}
body.dark .pz-type-img { background: #252525; }
.pz-type-img img { width: 64px; height: 64px; object-fit: contain; }
.pz-type-info { flex: 1; padding: 14px 12px; }
.pz-type-info h3 { font-size: .95rem; font-weight: 700; margin-bottom: 4px; }
.pz-type-info p  { font-size: .8rem; color: var(--muted); }
.pz-soon-badge {
  position: absolute; top: 10px; right: 10px;
  background: #FFF3E0; color: #E65100;
  font-size: .68rem; font-weight: 700;
  padding: 3px 8px; border-radius: 10px;
}

/* Word Search – header */
.ws-header {
  display: flex; align-items: center; gap: 10px; margin-bottom: 10px;
}
.ws-progress-bar {
  flex: 1; height: 7px; background: #eee; border-radius: 4px; overflow: hidden;
}
body.dark .ws-progress-bar { background: #333; }
.ws-progress-fill { height: 100%; background: var(--green); border-radius: 4px; transition: width .4s; }
.ws-progress-txt { font-size: .82rem; color: var(--muted); white-space: nowrap; }
.ws-timer { font-size: .82rem; font-weight: 700; color: var(--primary); white-space: nowrap; min-width: 36px; text-align: right; }

/* Word Search – grid */
.ws-grid {
  display: grid;
  grid-template-columns: repeat(var(--ws-size), 1fr);
  gap: 2px; background: var(--border);
  border-radius: 10px; overflow: hidden;
  margin-bottom: 14px;
  user-select: none; -webkit-user-select: none;
  touch-action: none;
}
.ws-cell {
  background: var(--card);
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 1; font-size: .88rem; font-weight: 700;
  cursor: pointer; transition: background .08s;
}
.ws-cell.ws-selected { background: #BBDEFB; color: #0D47A1; }
.ws-cell.ws-found    { background: #C8E6C9; color: #1B5E20; }
body.dark .ws-cell              { background: #1e1e1e; }
body.dark .ws-cell.ws-selected  { background: #1a2a3a; color: #90CAF9; }
body.dark .ws-cell.ws-found     { background: #152515; color: #81C784; }

/* Word Search – word list */
.ws-word-list {
  display: grid; grid-template-columns: 1fr 1fr; gap: 7px;
}
.ws-word-item {
  background: var(--card); border: 1.5px solid var(--border);
  border-radius: 9px; padding: 8px 10px;
  display: flex; flex-direction: column; gap: 2px;
}
.ws-word-item.ws-word-found { border-color: var(--green); background: #E8F5E9; }
body.dark .ws-word-item.ws-word-found { background: #152515; }
.ws-word-clue   { font-size: .72rem; color: var(--muted); line-height: 1.3; }
.ws-word-answer { font-size: .84rem; font-weight: 700; letter-spacing: .06em; color: var(--text); }
.ws-word-item.ws-word-found .ws-word-answer { color: var(--green); }

/* Puzzle done screen */
.pz-done { text-align: center; padding: 52px 20px 32px; }
.pz-done-icon { font-size: 3.5rem; margin-bottom: 14px; }
.pz-done h3   { font-size: 1.25rem; font-weight: 800; margin-bottom: 8px; }
.pz-done p    { color: var(--muted); font-size: .9rem; }
.pz-done-btns { display: flex; gap: 10px; justify-content: center; margin-top: 22px; flex-wrap: wrap; }

/* Crossword timer bar */
.cw-timer-bar {
  text-align: right; font-size: .82rem; font-weight: 700;
  color: var(--primary); padding: 0 2px 6px;
}

/* Puzzle score history */
.pz-scores { margin-top: 22px; }
.pz-scores-title {
  font-size: .72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--muted); margin-bottom: 8px;
}
.pz-score-row {
  display: flex; align-items: center; gap: 8px;
  background: var(--card); border: 1px solid var(--border);
  border-radius: 9px; padding: 8px 11px; margin-bottom: 6px;
  font-size: .8rem;
}
.pz-score-type  { font-weight: 700; color: var(--text); flex: 0 0 auto; }
.pz-score-theme { color: var(--muted); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pz-score-time  { font-weight: 800; color: var(--primary); flex: 0 0 auto; }
.pz-score-date  { color: var(--muted); flex: 0 0 auto; font-size: .72rem; }

/* ── CROSSWORD ─────────────────────────────────────────── */
.cw-hidden-input {
  position: fixed; left: -9999px; top: 0;
  opacity: 0; width: 1px; height: 1px; font-size: 16px;
}
.cw-clue-bar {
  background: var(--red); color: #fff;
  border-radius: 10px; padding: 10px 14px;
  font-size: .88rem; margin-bottom: 10px; line-height: 1.4;
}
.cw-grid-wrap {
  overflow-x: auto; margin-bottom: 14px;
  display: flex; justify-content: center;
}
.cw-grid {
  display: grid; gap: 2px;
  background: #555; border: 2px solid #555; border-radius: 6px;
  flex-shrink: 0;
}
.cw-cell {
  background: var(--card);
  display: flex; align-items: center; justify-content: center;
  position: relative; cursor: pointer;
  user-select: none; -webkit-user-select: none;
}
.cw-black { background: #444; cursor: default; }
body.dark .cw-black { background: #111; }
.cw-highlight { background: #BBDEFB; }
body.dark .cw-highlight { background: #1a2a3a; }
.cw-cursor { background: var(--blue) !important; }
.cw-correct { background: #C8E6C9 !important; }
.cw-wrong   { background: #FFCDD2 !important; }
body.dark .cw-correct { background: #1a3a1a !important; }
body.dark .cw-wrong   { background: #3a1a1a !important; }
.cw-num {
  position: absolute; top: 1px; left: 2px;
  font-size: .5rem; font-weight: 700; line-height: 1;
  color: #555; pointer-events: none;
}
body.dark .cw-num { color: #aaa; }
.cw-cursor .cw-num { color: #fff; }
.cw-letter {
  font-size: .88rem; font-weight: 700; color: var(--text); pointer-events: none;
}
.cw-cursor .cw-letter { color: #fff; }
.cw-highlight .cw-letter { color: #0D47A1; }
body.dark .cw-highlight .cw-letter { color: #90CAF9; }
.cw-correct .cw-letter { color: #1B5E20; }
.cw-wrong   .cw-letter { color: #B71C1C; }

/* Clue lists */
.cw-clues { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.cw-clue-col {
  background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 10px 12px;
}
.cw-clue-title {
  font-size: .72rem; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .04em; margin-bottom: 8px;
}
.cw-clue {
  display: flex; gap: 3px; align-items: baseline;
  padding: 4px 4px; border-radius: 5px;
  cursor: pointer; font-size: .76rem; line-height: 1.35;
  transition: background .1s;
}
.cw-clue:hover { background: #f5f5f5; }
body.dark .cw-clue:hover { background: #252525; }
.cw-clue-active { background: #fff0f0 !important; }
body.dark .cw-clue-active { background: #2d1010 !important; }
.cw-clue-active .cw-clue-num, .cw-clue-active .cw-clue-text { color: var(--red); font-weight: 700; }
.cw-clue-num  { color: var(--muted); font-weight: 700; flex-shrink: 0; min-width: 18px; }
.cw-clue-text { flex: 1; color: var(--text); }
.cw-clue-len  { color: var(--muted); flex-shrink: 0; font-size: .7rem; }
.cw-actions   { display: flex; gap: 10px; justify-content: center; padding-bottom: 16px; }

/* ── REMINDER BANNER ──────────────────────────────────── */
.reminder-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--red);
  color: #fff;
  padding: 10px 16px;
  gap: 12px;
  font-size: .88rem;
  line-height: 1.4;
  position: sticky;
  top: var(--nav-h);
  z-index: 90;
}
.reminder-banner span { flex: 1; }
.reminder-banner-close {
  background: transparent;
  border: none;
  color: #fff;
  font-size: 1.1rem;
  cursor: pointer;
  padding: 0 4px;
  opacity: .8;
  flex-shrink: 0;
}
.reminder-banner-close:hover { opacity: 1; }

/* ── TOGGLE SWITCH ────────────────────────────────────── */
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
}
.toggle-switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.toggle-slider {
  position: absolute;
  inset: 0;
  background: #ccc;
  border-radius: 24px;
  transition: background .3s;
  cursor: pointer;
}
.toggle-slider:before {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  left: 3px;
  bottom: 3px;
  background: #fff;
  border-radius: 50%;
  transition: transform .3s;
}
.toggle-switch input:checked + .toggle-slider { background: var(--red); }
.toggle-switch input:checked + .toggle-slider:before { transform: translateX(20px); }

/* ── REMINDER MODAL ROWS ──────────────────────────────── */
.reminder-toggle-row,
.reminder-time-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
  gap: 12px;
  font-size: .95rem;
}
.reminder-time-row { border-bottom: none; }
.reminder-notif-note {
  font-size: .8rem;
  color: var(--muted);
  background: #fff8e1;
  border-radius: 8px;
  padding: 8px 12px;
  margin-top: 8px;
  line-height: 1.5;
}
body.dark .reminder-notif-note { background: #2a2200; }
input[type="time"] {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: .95rem;
  background: var(--card);
  color: var(--text);
  cursor: pointer;
}

/* ── NAV LOGO ─────────────────────────────────────────── */
.nav-logo-img {
  height: 32px;
  width: auto;
  display: block;
  flex-shrink: 0;
  filter: brightness(0) invert(1);
}
.nav-title-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 400px) {
  .nav-title-text { display: none; }
}

/* ── WEEK CHART ───────────────────────────────────────── */
.st-week-chart {
  display: flex;
  justify-content: center;
  padding: 8px 0 4px;
}
.st-week-svg {
  width: 100%;
  max-width: 320px;
  height: auto;
  overflow: visible;
}

/* ── DONUT CHART ──────────────────────────────────────── */
.st-donut-wrap {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 12px 8px;
  flex-wrap: wrap;
  justify-content: center;
}
.st-donut-svg {
  width: 140px;
  height: 140px;
  flex-shrink: 0;
}
.st-donut-legend {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.st-donut-leg-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .88rem;
}
.st-donut-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}
.st-donut-leg-label {
  flex: 1;
  color: var(--text);
}
.st-donut-leg-n {
  font-weight: 700;
  color: var(--text);
  min-width: 28px;
  text-align: right;
}