/* ═══════════════════════════════════════════════════════════════════
   SỔ TAY FSRS — Standalone SPA Stylesheet (v8.92)
   Layout: 2-panel desktop, single-column mobile (< 768px)
   Theme: Dark xianxia, glassmorphism cards, gold/red accents
   ═══════════════════════════════════════════════════════════════════ */

/* --- Biến chủ đề riêng cho Sổ Tay (mở rộng từ base.css) --- */
:root {
  --sotay-bg:        #0d0d14;
  --sotay-panel:     #13131c;
  --sotay-card:      #1a1a26;
  --sotay-card-hover:#22222e;
  --sotay-accent:    var(--primary-dark, #c62828);
  --sotay-accent-2:  var(--primary-red, #ef5350);
  --sotay-gold:      #c8a96e;
  --sotay-gold-soft: #d4b885;
  --sotay-text:      #e8e8ee;
  --sotay-text-dim:  #9a9aa8;
  --sotay-text-mute: #6a6a78;
  --sotay-border:    rgba(255, 255, 255, 0.07);
  --sotay-border-hi: rgba(200, 169, 110, 0.3);
  --sotay-shadow:    0 6px 24px rgba(0, 0, 0, 0.45);
  --sotay-glow-red:  0 0 20px color-mix(in srgb, var(--primary-dark) 35%, transparent);
  --sotay-glow-gold: 0 0 20px rgba(200, 169, 110, 0.25);

  --sotay-radius-sm: 6px;
  --sotay-radius-md: 12px;
  --sotay-radius-lg: 18px;

  --sotay-easing:    cubic-bezier(0.4, 0, 0.2, 1);
  --sotay-dur-fast:  150ms;
  --sotay-dur:       240ms;
  --sotay-dur-slow:  420ms;
}

/* ───────────────────────────────────────────────────────────────────
   S52.A-v2 — LIGHT MODE OVERRIDE (dark-first pattern)
   :root giữ NGUYÊN dark values cho xianxia design.
   Override CHỈ khi html[data-theme="light"] active.
   Decorative gold dùng darker variant cho contrast trên light bg.
   Red accents (--sotay-accent, --sotay-glow-red) GIỮ — work cả 2 modes.
   ─────────────────────────────────────────────────────────────────── */
html[data-theme="light"] {
  /* Surface — reference LLC tokens (light values) */
  --sotay-bg:         var(--ytt-bg-app);     /* #F6F4FF */
  --sotay-panel:      var(--ytt-bg-card);    /* #FFFFFF */
  --sotay-card:       var(--ytt-bg-card);    /* #FFFFFF */
  --sotay-card-hover: var(--ytt-bg-hover);   /* #F3F0FC */

  /* Text scale — reference LLC */
  --sotay-text:       var(--ytt-text-1);     /* #5A5280 */
  --sotay-text-dim:   var(--ytt-text-2);     /* #9590B5 */
  --sotay-text-mute:  var(--ytt-text-3);     /* #C4BEDD */

  /* Border + shadow — reference LLC */
  --sotay-border:     var(--ytt-border-1);
  --sotay-shadow:     var(--ytt-shadow-card);

  /* Gold accents — darker variants cho contrast trên light bg */
  --sotay-gold:       #92670a;
  --sotay-gold-soft:  #a78423;
  --sotay-border-hi:  rgba(146, 103, 10, 0.3);
  --sotay-glow-gold:  0 0 20px rgba(146, 103, 10, 0.18);
}

/* --- Reset cơ bản --- */
* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--sotay-bg);
  color: var(--sotay-text);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 15px;
  line-height: 1.5;
  overflow: hidden; /* Container tự scroll */
}
body { display: flex; flex-direction: column; }

/* Tự ẩn header/footer khi nhúng iframe */
html.in-iframe header,
html.in-iframe .chat-bubble-container,
html.in-iframe footer { display: none !important; }

/* ═══════════════════════════════════════════════════════════════════
   HEADER — Compact bar
   ═══════════════════════════════════════════════════════════════════ */
.sotay-header {
  flex-shrink: 0;
  height: 56px;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 20px;
  background: linear-gradient(180deg, #15151e 0%, #0f0f17 100%);
  border-bottom: 1px solid var(--sotay-border);
  z-index: 10;
}
.sotay-header__title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--sotay-gold);
  letter-spacing: 0.3px;
}
.sotay-header__title i { color: var(--sotay-accent); }
.sotay-header__search {
  flex: 1;
  max-width: 280px;
  position: relative;
}
.sotay-header__search input {
  width: 100%;
  height: 36px;
  padding: 0 12px 0 36px;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--sotay-border);
  border-radius: var(--sotay-radius-sm);
  color: var(--sotay-text);
  font-size: 0.9rem;
  outline: none;
  transition: border-color var(--sotay-dur-fast);
}
.sotay-header__search input:focus { border-color: var(--sotay-gold); }
.sotay-header__search i {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--sotay-text-mute);
  font-size: 0.85rem;
}
.sotay-header__actions { margin-left: auto; display: flex; gap: 10px; }

.sotay-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 16px;
  border: 1px solid var(--sotay-border);
  border-radius: var(--sotay-radius-sm);
  background: var(--sotay-card);
  color: var(--sotay-text);
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--sotay-dur-fast);
  font-family: inherit;
}
.sotay-btn:hover { background: var(--sotay-card-hover); border-color: var(--sotay-gold); }
.sotay-btn--primary {
  background: linear-gradient(135deg, var(--sotay-accent) 0%, var(--dark-red, #8e1f1f) 100%);
  border-color: var(--sotay-accent);
  color: #fff;
  box-shadow: var(--sotay-glow-red);
}
.sotay-btn--primary:hover {
  background: linear-gradient(135deg, var(--sotay-accent-2) 0%, var(--sotay-accent) 100%);
  border-color: var(--sotay-accent-2);
}
.sotay-btn--ghost { background: transparent; }
.sotay-btn:disabled { opacity: 0.45; cursor: not-allowed; }

/* sotay-mobile-toggle removed — sidebar nội bộ đã xóa */

/* ═══════════════════════════════════════════════════════════════════
   MAIN LAYOUT — Full width (dashboard YTT đã có sidebar trái rồi)
   ═══════════════════════════════════════════════════════════════════ */
.sotay-main {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.sotay-content {
  flex: 1;
  overflow-y: auto;
  padding: 24px 28px;
  position: relative;
  background: var(--sotay-bg);
}

/* ═══════════════════════════════════════════════════════════════════
   HEADER STATS BAR — hiển thị tổng quan ngay trong header
   ═══════════════════════════════════════════════════════════════════ */
.sotay-header__stats {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.sotay-hstat {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 0.78rem;
  font-weight: 600;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--sotay-border);
  white-space: nowrap;
}
.sotay-hstat i { font-size: 0.7rem; }
.sotay-hstat--due { color: var(--sotay-accent-2); border-color: color-mix(in srgb, var(--sotay-accent-2) 30%, transparent); }
.sotay-hstat--due i { color: var(--sotay-accent-2); }
.sotay-hstat--mastered { color: var(--sotay-gold); border-color: rgba(200,169,110,0.3); }
.sotay-hstat--mastered i { color: var(--sotay-gold); }

/* ───────────────────────────────────────────────────────────────────
   S52.A-v2 — LIGHT MODE OVERRIDES cho hardcoded values
   Scope dưới html[data-theme="light"] để KHÔNG ảnh hưởng dark mode.
   ─────────────────────────────────────────────────────────────────── */

/* HEADER — dark gradient hardcoded → solid panel trong light mode */
html[data-theme="light"] .sotay-header {
  background: var(--sotay-panel);
}

/* HEADER SEARCH INPUT — rgba(255,255,255,0.05) invisible trên light → token */
html[data-theme="light"] .sotay-header__search input {
  background: var(--ytt-bg-input);
}

/* HSTAT pill — rgba(255,255,255,0.05) invisible → token */
html[data-theme="light"] .sotay-hstat {
  background: var(--sotay-card-hover);
}
/* HSTAT mastered border: rgba gold 0.3 → match light gold variant */
html[data-theme="light"] .sotay-hstat--mastered {
  border-color: rgba(146, 103, 10, 0.3);
}

/* ───────────────────────────────────────────────────────────────────
   S52.B-v2 — Light mode visual upgrades
   - Word card: viền đậm cho nổi bật trên nền sáng
   - Flashcard front/back: gradient light thay hardcoded #14141d / #1a1422
   - Example/arrange boxes: bg đậm hơn để không invisible
   - Grade buttons (Quên/Khó/Tốt): filled màu pastel + viền đậm
   ─────────────────────────────────────────────────────────────────── */

/* WORD CARDS — viền đậm + shadow mềm */
html[data-theme="light"] .sotay-word-row {
  border: 2px solid rgba(60, 42, 107, 0.32);
  box-shadow: 0 2px 6px rgba(60, 42, 107, 0.08);
}
html[data-theme="light"] .sotay-word-row:hover {
  border-color: rgba(146, 103, 10, 0.65);
  box-shadow: 0 8px 22px rgba(60, 42, 107, 0.18);
}

/* FLASHCARD FRONT — gradient có #14141d hardcoded leak vào light */
html[data-theme="light"] .sotay-fc-face {
  background: linear-gradient(145deg, #ffffff 0%, #f1ecfb 100%);
  border-color: rgba(146, 103, 10, 0.35);
}
/* FLASHCARD BACK — hardcoded dark gradient → light gradient */
html[data-theme="light"] .sotay-fc-face--back {
  background: linear-gradient(145deg, #faf8ff 0%, #ece4f7 100%);
}
/* Example boxes — rgba(255,255,255,0.03) invisible trên light */
html[data-theme="light"] .sotay-fc-example {
  background: rgba(146, 103, 10, 0.07);
  border-left-color: var(--sotay-gold);
}
html[data-theme="light"] .sotay-fc-example__py {
  color: #7a5708;
}
html[data-theme="light"] .sotay-fc-arrange {
  background: rgba(146, 103, 10, 0.07);
}
html[data-theme="light"] .sotay-fc-section {
  border-top-color: rgba(60, 42, 107, 0.22);
}

/* GRADE BUTTONS — Quên / Khó / Tốt: filled màu pastel + viền đậm */
html[data-theme="light"] .sotay-fc-srs-btn {
  border-width: 2px;
  font-weight: 700;
}
html[data-theme="light"] .sotay-fc-srs-btn__interval {
  color: rgba(0, 0, 0, 0.55);
}
html[data-theme="light"] .sotay-fc-srs-btn--again {
  background: linear-gradient(180deg, #fce4e4 0%, #f6cccc 100%);
  border-color: #d9534f;
  color: #8a1f1c;
}
html[data-theme="light"] .sotay-fc-srs-btn--again:hover {
  background: linear-gradient(180deg, #f6cccc 0%, #f0b6b6 100%);
  border-color: #c0392b;
  transform: translateY(-2px);
}
html[data-theme="light"] .sotay-fc-srs-btn--hard {
  background: linear-gradient(180deg, #fff1d6 0%, #ffe1ad 100%);
  border-color: #d68910;
  color: #7a4a04;
}
html[data-theme="light"] .sotay-fc-srs-btn--hard:hover {
  background: linear-gradient(180deg, #ffe1ad 0%, #ffd089 100%);
  border-color: #b67609;
  transform: translateY(-2px);
}
html[data-theme="light"] .sotay-fc-srs-btn--good {
  background: linear-gradient(180deg, #dff5e0 0%, #c4ebc8 100%);
  border-color: #4caf50;
  color: #1e5b22;
}
html[data-theme="light"] .sotay-fc-srs-btn--good:hover {
  background: linear-gradient(180deg, #c4ebc8 0%, #aae0b0 100%);
  border-color: #2e7d32;
  transform: translateY(-2px);
}

/* ═══════════════════════════════════════════════════════════════════
   HOME: CTA BANNER — hiển thị khi có thẻ cần ôn hôm nay
   ═══════════════════════════════════════════════════════════════════ */
.sotay-cta-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 20px;
  margin-bottom: 16px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--sotay-accent) 18%, transparent) 0%, color-mix(in srgb, var(--sotay-accent) 10%, transparent) 100%);
  border: 1px solid color-mix(in srgb, var(--sotay-accent) 32%, transparent);
  border-radius: var(--sotay-radius-md);
  animation: sotay-slidein var(--sotay-dur-slow) var(--sotay-easing);
}
.sotay-cta-banner__body { display: flex; align-items: center; gap: 14px; }
.sotay-cta-banner__flame { font-size: 2rem; line-height: 1; }
.sotay-cta-banner__num {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--sotay-accent-2);
  line-height: 1.1;
}
.sotay-cta-banner__sub { font-size: 0.78rem; color: var(--sotay-text-dim); }
.sotay-cta-banner__btn {
  flex-shrink: 0;
  height: 40px;
  padding: 0 22px;
  background: linear-gradient(135deg, var(--sotay-accent) 0%, var(--dark-red, #8e1f1f) 100%);
  border: none;
  border-radius: var(--sotay-radius-sm);
  color: #fff;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all var(--sotay-dur-fast);
  box-shadow: var(--sotay-glow-red);
  font-family: inherit;
  white-space: nowrap;
}
.sotay-cta-banner__btn:hover {
  background: linear-gradient(135deg, var(--sotay-accent-2) 0%, var(--sotay-accent) 100%);
  transform: translateY(-1px);
}

/* ═══════════════════════════════════════════════════════════════════
   HOME: STATS TILES — 4 ô thống kê tổng quan (xianxia 3D v11.06)
   ═══════════════════════════════════════════════════════════════════ */
.sotay-dash-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 22px;
}
.sotay-dash-stat {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 24px 12px 20px;
  /* Chủ đề mặc định — indigo */
  background:
    radial-gradient(ellipse at 15% 10%, rgba(110,120,255,0.28) 0%, transparent 55%),
    linear-gradient(160deg, #28246a 0%, #16123e 100%);
  border: 1px solid rgba(120,128,255,0.22);
  border-radius: 18px;
  text-align: center;
  overflow: hidden;
  box-shadow: 0 6px 0 #100e32, 0 10px 24px rgba(0,0,0,0.35);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
/* Lớp hoa văn chấm bi */
.sotay-dash-stat::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,0.07) 1px, transparent 1px);
  background-size: 14px 14px;
  pointer-events: none;
}
/* Vòng trang trí góc phải dưới */
.sotay-dash-stat::after {
  content: '';
  position: absolute;
  right: -22px;
  bottom: -22px;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.07);
  box-shadow: 0 0 0 18px rgba(255,255,255,0.025), 0 0 0 36px rgba(255,255,255,0.012);
  pointer-events: none;
}
.sotay-dash-stat:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 0 #100e32, 0 14px 28px rgba(0,0,0,0.42);
}
/* Icon circle */
.sotay-dash-stat__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  font-size: 1.05rem;
  margin-bottom: 10px;
  background: rgba(120,130,255,0.15);
  color: #a0aaff;
  box-shadow: 0 0 0 6px rgba(120,130,255,0.06);
  position: relative; /* nổi lên trên dot-pattern */
  z-index: 1;
}
.sotay-dash-stat__val {
  font-size: 2rem;
  font-weight: 800;
  color: #b8c0ff;
  text-shadow: 0 0 18px rgba(140,150,255,0.55);
  line-height: 1;
  position: relative;
  z-index: 1;
}
.sotay-dash-stat__lbl {
  font-size: 0.68rem;
  color: rgba(255,255,255,0.5);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-top: 3px;
  position: relative;
  z-index: 1;
}
/* Cần ôn — cam đỏ */
.sotay-dash-stat--due {
  background:
    radial-gradient(ellipse at 15% 10%, rgba(255,110,50,0.28) 0%, transparent 55%),
    linear-gradient(160deg, #4a1a08 0%, #26090302 100%);
  border-color: rgba(255,110,50,0.25);
  box-shadow: 0 6px 0 #7a1e04, 0 10px 24px rgba(0,0,0,0.35);
}
.sotay-dash-stat--due:hover { box-shadow: 0 10px 0 #7a1e04, 0 14px 28px rgba(0,0,0,0.42); }
.sotay-dash-stat--due .sotay-dash-stat__icon { color: #ff8a65; background: rgba(255,110,60,0.18); box-shadow: 0 0 0 6px rgba(255,110,60,0.07); }
.sotay-dash-stat--due .sotay-dash-stat__val  { color: #ff8a65; text-shadow: 0 0 18px rgba(255,100,50,0.6); }
/* Đang học — hổ phách vàng */
.sotay-dash-stat--learning {
  background:
    radial-gradient(ellipse at 15% 10%, rgba(220,165,30,0.28) 0%, transparent 55%),
    linear-gradient(160deg, #3e2c06 0%, #1e1502 100%);
  border-color: rgba(220,165,30,0.25);
  box-shadow: 0 6px 0 #563c00, 0 10px 24px rgba(0,0,0,0.35);
}
.sotay-dash-stat--learning:hover { box-shadow: 0 10px 0 #563c00, 0 14px 28px rgba(0,0,0,0.42); }
.sotay-dash-stat--learning .sotay-dash-stat__icon { color: #ffd04e; background: rgba(220,170,40,0.18); box-shadow: 0 0 0 6px rgba(220,170,40,0.07); }
.sotay-dash-stat--learning .sotay-dash-stat__val  { color: #ffd04e; text-shadow: 0 0 18px rgba(220,170,40,0.6); }
/* Đã thuộc — ngọc lục bảo */
.sotay-dash-stat--mastered {
  background:
    radial-gradient(ellipse at 15% 10%, rgba(60,190,100,0.28) 0%, transparent 55%),
    linear-gradient(160deg, #163e22 0%, #081c0e 100%);
  border-color: rgba(60,190,100,0.25);
  box-shadow: 0 6px 0 #0d3618, 0 10px 24px rgba(0,0,0,0.35);
}
.sotay-dash-stat--mastered:hover { box-shadow: 0 10px 0 #0d3618, 0 14px 28px rgba(0,0,0,0.42); }
.sotay-dash-stat--mastered .sotay-dash-stat__icon { color: #72d98a; background: rgba(70,195,100,0.18); box-shadow: 0 0 0 6px rgba(70,195,100,0.07); }
.sotay-dash-stat--mastered .sotay-dash-stat__val  { color: #72d98a; text-shadow: 0 0 18px rgba(70,195,100,0.6); }

/* ═══════════════════════════════════════════════════════════════════
   HOME: SEARCH BAR (category dropdown + keyword input)
   ═══════════════════════════════════════════════════════════════════ */
.sotay-search-bar {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.sotay-search-bar__cat {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--sotay-card);
  border: 1px solid var(--sotay-border);
  border-radius: var(--sotay-radius-sm);
  padding: 0 12px;
  min-width: 160px;
  flex-shrink: 0;
  transition: border-color var(--sotay-dur-fast);
}
.sotay-search-bar__cat:focus-within { border-color: var(--sotay-border-hi); }
.sotay-search-bar__cat > i { font-size: 0.8rem; color: var(--sotay-gold); flex-shrink: 0; }
.sotay-search-bar__cat select {
  background: transparent;
  border: none;
  outline: none;
  color: var(--sotay-text);
  font-size: 0.86rem;
  cursor: pointer;
  flex: 1;
  padding: 9px 0;
  text-align: center;
  -webkit-appearance: none;
  appearance: none;
}
.sotay-search-bar__cat select option { background: var(--sotay-panel); color: var(--sotay-text); text-align: center; }
.sotay-search-bar__cat select option.sotay-cat-empty { opacity: 0.45; }
.sotay-search-bar__input {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  background: var(--sotay-card);
  border: 1px solid var(--sotay-border);
  border-radius: var(--sotay-radius-sm);
  padding: 0 12px;
  min-width: 180px;
  transition: border-color var(--sotay-dur-fast);
}
.sotay-search-bar__input:focus-within { border-color: var(--sotay-border-hi); }
.sotay-search-bar__input > i { font-size: 0.8rem; color: var(--sotay-text-mute); flex-shrink: 0; }
.sotay-search-bar__input input {
  background: transparent;
  border: none;
  outline: none;
  color: var(--sotay-text);
  font-size: 0.88rem;
  flex: 1;
  min-width: 0;
  padding: 9px 0;
}
.sotay-search-bar__input input::placeholder { color: var(--sotay-text-mute); }
#sotay-home-clear {
  background: none;
  border: none;
  color: var(--sotay-text-mute);
  cursor: pointer;
  padding: 3px 5px;
  font-size: 0.8rem;
  border-radius: 50%;
  line-height: 1;
  transition: color var(--sotay-dur-fast);
}
#sotay-home-clear:hover { color: var(--sotay-text); }

/* ═══════════════════════════════════════════════════════════════════
   HOME: FILTER ROW — title + filter tabs cùng hàng
   ═══════════════════════════════════════════════════════════════════ */
.sotay-filter-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.sotay-grid-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--sotay-gold);
  margin: 0;
  font-family: 'Noto Serif SC', 'KaiTi', serif;
  flex-shrink: 0;
}
.sotay-filter-tabs { display: flex; gap: 8px; flex-wrap: wrap; flex: 1; }
.sotay-upload-btn {
  flex-shrink: 0;
  height: 28px;
  padding: 0 14px;
  border: 1px dashed var(--sotay-border-hi);
  border-radius: 14px;
  background: rgba(200, 169, 110, 0.06);
  color: var(--sotay-gold);
  font-size: 0.78rem;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all var(--sotay-dur-fast);
}
.sotay-upload-btn:hover {
  background: rgba(200, 169, 110, 0.14);
  border-color: var(--sotay-gold);
}
.sotay-filter-tab {
  height: 28px;
  padding: 0 13px;
  border: 1px solid var(--sotay-border);
  border-radius: 14px;
  background: transparent;
  color: var(--sotay-text-dim);
  font-size: 0.78rem;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--sotay-dur-fast);
  font-family: inherit;
  display: flex;
  align-items: center;
  gap: 5px;
}
.sotay-filter-tab i { font-size: 0.68rem; }
.sotay-filter-tab span { font-size: 0.73rem; font-weight: 700; }
.sotay-filter-tab span.n-due { color: var(--sotay-accent-2); }
.sotay-filter-tab:hover  { border-color: var(--sotay-gold); color: var(--sotay-gold); }
.sotay-filter-tab.is-active {
  background: rgba(200,169,110,0.13);
  border-color: var(--sotay-gold);
  color: var(--sotay-gold);
}

/* ═══════════════════════════════════════════════════════════════════
   SHELF — cuộn ngang theo loại chủ đề + TOPIC CARD compact
   ═══════════════════════════════════════════════════════════════════ */

/* Shelf container */
.sotay-shelf { margin-bottom: 28px; }
.sotay-shelf__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  padding: 0 2px;
}
.sotay-shelf__title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--sotay-text);
  display: flex;
  align-items: center;
  gap: 8px;
}
.sotay-shelf__title i { color: var(--sotay-gold); }
.sotay-shelf__count {
  font-size: 0.72rem;
  color: var(--sotay-text-mute);
  background: rgba(255,255,255,0.06);
  padding: 2px 8px;
  border-radius: 10px;
}
.sotay-shelf__row {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 10px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.sotay-shelf__row::-webkit-scrollbar { height: 4px; }
.sotay-shelf__row::-webkit-scrollbar-track { background: transparent; }
.sotay-shelf__row::-webkit-scrollbar-thumb {
  background: rgba(200,169,110,0.3);
  border-radius: 2px;
}
.sotay-topic-card {
  position: relative;
  min-width: 195px;
  max-width: 195px;
  flex-shrink: 0;
  scroll-snap-align: start;
  padding: 16px 14px 12px;
  background: linear-gradient(145deg, var(--sotay-card) 0%, #15151f 100%);
  border: 1px solid var(--sotay-border);
  border-radius: 14px;
  cursor: pointer;
  transition: transform var(--sotay-dur), border-color var(--sotay-dur), box-shadow var(--sotay-dur);
  overflow: hidden;
  min-height: 168px;
  display: flex;
  flex-direction: column;
  animation: sotay-fadein var(--sotay-dur-slow) var(--sotay-easing);
  box-shadow: 0 4px 0 rgba(0,0,0,0.4), 0 6px 16px rgba(0,0,0,0.25);
}
.sotay-topic-card[hidden] { display: none !important; }
/* Accent line trên cùng — thay đổi theo state */
.sotay-topic-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, rgba(200,169,110,0.4), rgba(200,169,110,0.1));
  opacity: 1;
}
.sotay-topic-card.has-due::before {
  background: linear-gradient(90deg, var(--sotay-accent), rgba(198,40,40,0.25));
}
.sotay-topic-card.is-mastered::before {
  background: linear-gradient(90deg, var(--sotay-gold), rgba(200,169,110,0.25));
}
.sotay-topic-card:hover {
  transform: translateY(-4px);
  border-color: var(--sotay-border-hi);
  box-shadow: 0 8px 0 rgba(0,0,0,0.4), 0 10px 22px rgba(0,0,0,0.35), var(--sotay-glow-gold);
}
.sotay-topic-card.has-due:hover { box-shadow: var(--sotay-shadow), var(--sotay-glow-red); }
.sotay-topic-card.is-hsk { border-color: rgba(100,181,246,0.18); }
.sotay-topic-card.is-hsk:hover { border-color: rgba(100,181,246,0.4); box-shadow: var(--sotay-shadow), 0 0 12px rgba(100,181,246,0.08); }

/* Top row: tên chủ đề + type pill */
.sotay-topic-card__top {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding-right: 44px; /* tránh chồng lên due-badge */
  margin-bottom: 10px;
}
.sotay-topic-card__name {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--sotay-text);
  margin: 0;
  font-family: 'Noto Serif SC', 'KaiTi', serif;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Type pill cho AI topic */
.sotay-type-pill {
  flex-shrink: 0;
  padding: 1px 7px;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--sotay-gold);
  background: rgba(200,169,110,0.12);
  border: 1px solid rgba(200,169,110,0.25);
  border-radius: 4px;
  align-self: center;
  font-family: 'Inter', sans-serif;
}
/* HSK pill — hiện trên card dict khi category là hskN */
.sotay-hsk-pill {
  flex-shrink: 0;
  padding: 1px 7px;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: #64b5f6;
  background: rgba(100,181,246,0.1);
  border: 1px solid rgba(100,181,246,0.22);
  border-radius: 4px;
  align-self: center;
  font-family: 'Inter', sans-serif;
  white-space: nowrap;
}

/* Due badge */
.sotay-due-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 3px 9px;
  background: var(--sotay-accent);
  color: #fff;
  border-radius: 11px;
  font-size: 0.7rem;
  font-weight: 700;
  box-shadow: var(--sotay-glow-red);
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Mini stats row */
.sotay-topic-card__stats-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 0.72rem;
  color: var(--sotay-text-mute);
  margin-bottom: 8px;
}
.sotay-topic-card__stats-row i { font-size: 0.68rem; }
.stc-new    { color: #64b5f6; }
.stc-learn  { color: #ffb74d; }
.stc-master { color: #81c784; }
.stc-empty  { color: var(--sotay-text-mute); font-style: italic; }

/* Progress bar */
.sotay-topic-card__bar-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  margin-bottom: 12px;
}
.sotay-topic-card__bar {
  flex: 1;
  height: 5px;
  background: rgba(255,255,255,0.06);
  border-radius: 3px;
  overflow: hidden;
}
.sotay-topic-card__bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--sotay-gold), var(--sotay-gold-soft));
  border-radius: 3px;
  transition: width var(--sotay-dur-slow);
}
.sotay-topic-card__pct {
  font-size: 0.78rem;
  color: var(--sotay-gold);
  font-weight: 600;
  flex-shrink: 0;
  min-width: 38px;
  text-align: right;
}

/* Action button */
.sotay-topic-card__btn {
  width: 100%;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid var(--sotay-border);
  border-radius: var(--sotay-radius-sm);
  background: rgba(255,255,255,0.04);
  color: var(--sotay-text-dim);
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  transition: all var(--sotay-dur-fast);
}
.sotay-topic-card__btn:hover {
  background: rgba(255,255,255,0.08);
  color: var(--sotay-text);
  border-color: rgba(200,169,110,0.3);
}
.sotay-topic-card__btn.is-due {
  background: linear-gradient(135deg, rgba(198,40,40,0.22) 0%, rgba(142,31,31,0.12) 100%);
  border-color: rgba(198,40,40,0.38);
  color: #ef9a9a;
}
.sotay-topic-card__btn.is-due:hover {
  background: linear-gradient(135deg, rgba(198,40,40,0.38) 0%, rgba(142,31,31,0.25) 100%);
  color: #fff;
}

/* Animations */
@keyframes sotay-fadein  { from { opacity: 0; transform: translateY(8px); }  to { opacity: 1; transform: none; } }
@keyframes sotay-slidein { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

.sotay-empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--sotay-text-dim);
}
.sotay-empty i { font-size: 3rem; color: var(--sotay-text-mute); margin-bottom: 16px; }
.sotay-empty h3 { color: var(--sotay-gold); margin: 8px 0; }
.sotay-empty p { font-size: 0.92rem; max-width: 420px; margin: 0 auto; }

/* ═══════════════════════════════════════════════════════════════════
   TOPIC DETAIL VIEW (list từ trong topic)
   ═══════════════════════════════════════════════════════════════════ */
.sotay-detail-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.sotay-back-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--sotay-card);
  border: 1px solid var(--sotay-border);
  color: var(--sotay-text);
  cursor: pointer;
  font-size: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all var(--sotay-dur-fast);
}
.sotay-back-btn:hover { background: var(--sotay-card-hover); border-color: var(--sotay-gold); }
.sotay-detail-title {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--sotay-gold);
  margin: 0;
  flex: 1;
}
.sotay-detail-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.sotay-mini-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
  margin-bottom: 18px;
}
.sotay-mini-stat {
  background: var(--sotay-card);
  border: 1px solid var(--sotay-border);
  border-radius: var(--sotay-radius-sm);
  padding: 10px 14px;
  text-align: center;
}
.sotay-mini-stat__num {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--sotay-gold);
}
.sotay-mini-stat__label {
  font-size: 0.75rem;
  color: var(--sotay-text-dim);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.sotay-mini-stat--due      .sotay-mini-stat__num { color: var(--sotay-accent-2); }
.sotay-mini-stat--learning .sotay-mini-stat__num { color: #ffb74d; }
.sotay-mini-stat--mastered .sotay-mini-stat__num { color: #81c784; }

/* Word card grid — thay thế row layout cũ */
.sotay-word-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}
.sotay-word-row {
  background: var(--sotay-card);
  border: 1px solid var(--sotay-border);
  border-radius: var(--sotay-radius-md);
  padding: 18px 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-height: 140px;
  cursor: default;
  transition: border-color var(--sotay-dur-fast), box-shadow var(--sotay-dur-fast);
}
.sotay-word-row:hover {
  border-color: var(--sotay-border-hi);
  box-shadow: 0 4px 20px rgba(0,0,0,0.35);
}
.sotay-word-row__hanzi {
  font-family: 'Noto Serif SC', 'KaiTi', serif;
  font-size: 2rem;
  color: var(--sotay-text);
  font-weight: 700;
  line-height: 1.15;
}
.sotay-word-row__pinyin {
  color: var(--sotay-gold-soft);
  font-style: italic;
  font-size: 0.88rem;
}
.sotay-word-row__meaning {
  color: var(--sotay-text-dim);
  font-size: 0.83rem;
  flex: 1;
  line-height: 1.4;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.sotay-word-row__meaning--link {
  color: var(--sotay-gold-soft);
  font-size: 0.78rem;
  opacity: 0.7;
  cursor: pointer;
}
.sotay-word-row__meaning--link i { margin-right: 4px; font-size: 0.65rem; }
.sotay-word-row:hover .sotay-word-row__meaning--link { opacity: 1; }
.sotay-word-row__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid var(--sotay-border);
}
.sotay-word-row__state {
  font-size: 0.7rem;
  padding: 3px 8px;
  border-radius: 10px;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.5px;
}
.sotay-state-new      { background: rgba(255,255,255,0.08); color: var(--sotay-text-dim); }
.sotay-state-learning { background: rgba(255, 167, 38, 0.18); color: #ffb74d; }
.sotay-state-review   { background: rgba(102, 187, 106, 0.18); color: #81c784; }
.sotay-state-relearn  { background: rgba(239, 83, 80, 0.18); color: var(--sotay-accent-2); }

.sotay-word-row__status-group {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

/* Practice mode badges (fc / quiz / typing) */
.sotay-pbadges {
  display: inline-flex;
  gap: 4px;
  margin-left: 6px;
}
.sotay-pbadge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px; height: 20px;
  border-radius: 50%;
  font-size: 0.6rem;
}
.sotay-pbadge--fc     { background: rgba(100,181,246,0.2); color: #64b5f6; }
.sotay-pbadge--quiz   { background: rgba(186,104,200,0.2); color: #ba68c8; }
.sotay-pbadge--typing { background: rgba(255,183,77,0.2);  color: #ffb74d; }

/* Word popup (click vào thẻ từ vựng) */
.sotay-word-popup {
  position: fixed;
  z-index: 9999;
  background: rgba(10,10,18,0.92);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 8px 14px;
  max-width: 260px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.55);
  display: none;
  pointer-events: auto;
  transform: translate(-50%, -100%);
}
.sotay-word-popup.is-show { display: block; }
.sotay-wp__pinyin {
  color: var(--sotay-gold-soft);
  font-size: 0.82rem;
  margin-bottom: 3px;
}
.sotay-wp__vi {
  color: #4fc3f7;
  font-weight: 600;
  font-size: 0.82rem;
  line-height: 1.4;
  margin-bottom: 4px;
}
.sotay-wp__hsk {
  display: inline-block;
  background: linear-gradient(45deg, #ff9800, #f44336);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 4px;
}
.sotay-wp__empty {
  color: var(--sotay-text-mute);
  font-size: 0.78rem;
  font-style: italic;
}

.sotay-word-row__del {
  background: transparent;
  border: none;
  color: var(--sotay-text-mute);
  cursor: pointer;
  font-size: 0.95rem;
  padding: 6px 8px;
  border-radius: 4px;
  transition: color var(--sotay-dur-fast), background var(--sotay-dur-fast);
}
.sotay-word-row__del:hover { color: var(--sotay-accent-2); background: rgba(239,83,80,0.1); }

/* ═══════════════════════════════════════════════════════════════════
   FLASHCARD VIEW (v8.93 — fix black card + rich back face)
   ═══════════════════════════════════════════════════════════════════ */

/* Khi vào flashcard mode → ép sotay-content thành flex column, không cho scroll */
.sotay-content.is-fc-mode {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 16px 20px;
}

.sotay-fc-wrap {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;          /* fix flex child không co lại */
  gap: 14px;
}
.sotay-fc-progress-bar {
  height: 4px;
  background: rgba(255,255,255,0.06);
  border-radius: 2px;
  overflow: hidden;
  flex-shrink: 0;
}
.sotay-fc-progress-bar__fill {
  height: 100%;
  background: linear-gradient(90deg, var(--sotay-accent), var(--sotay-gold));
  border-radius: 2px;
  transition: width var(--sotay-dur) var(--sotay-easing);
  width: 0%;
}
.sotay-fc-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: space-between;
  font-size: 0.85rem;
  color: var(--sotay-text-dim);
  flex-shrink: 0;
}
.sotay-fc-meta__count { color: var(--sotay-gold); font-weight: 600; }

/* Stage — KHÔNG dùng aspect-ratio (gây bug đen trong iframe) */
.sotay-fc-stage {
  flex: 1;
  min-height: 0;          /* cho phép co lại trong flex */
  perspective: 1500px;
  display: flex;
  align-items: stretch;
  justify-content: center;
  padding: 4px 0;
}
.sotay-fc-card {
  position: relative;
  width: 100%;
  max-width: 680px;       /* rộng hơn để chứa rich content */
  min-height: 420px;
  height: 100%;           /* điền đầy stage */
  transform-style: preserve-3d;
  transition: transform 600ms var(--sotay-easing);
  cursor: pointer;
}
.sotay-fc-card.is-flipped { transform: rotateY(180deg); }
.sotay-fc-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  background: linear-gradient(145deg, var(--sotay-card) 0%, #14141d 100%);
  border: 1px solid var(--sotay-border-hi);
  border-radius: var(--sotay-radius-lg);
  box-shadow: var(--sotay-shadow);
  padding: 20px 22px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;  /* nội dung bắt đầu từ trên */
  overflow: hidden;
  text-align: center;
  padding-top: 24px;
}
.sotay-fc-face::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--sotay-accent), var(--sotay-gold), var(--sotay-accent));
  opacity: 0.65;
  z-index: 2;
}
.sotay-fc-face--back {
  transform: rotateY(180deg);
  background: linear-gradient(145deg, #1a1422 0%, #14141d 100%);
  /* mặt sau có nhiều content → cho phép scroll trong card */
  align-items: stretch;
  justify-content: flex-start;
  text-align: left;
  overflow-y: auto;
  padding: 18px 20px;
}
.sotay-fc-face--back::-webkit-scrollbar { width: 6px; }
.sotay-fc-face--back::-webkit-scrollbar-thumb {
  background: rgba(200,169,110,0.25);
  border-radius: 3px;
}

.sotay-fc-hanzi {
  font-family: 'Noto Serif SC', 'KaiTi', serif;
  font-size: clamp(2.4rem, 7vw, 4.4rem);
  color: var(--sotay-text);
  font-weight: 700;
  margin: 0 0 12px;
  line-height: 1.1;
  word-break: break-word;
}
.sotay-fc-pinyin-hint {
  font-size: 0.95rem;
  color: var(--sotay-text-mute);
  font-style: italic;
  margin-top: 6px;
}
.sotay-fc-hint-tap {
  margin-top: 18px;
  font-size: 0.78rem;
  color: var(--sotay-text-mute);
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.sotay-fc-hw-row {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.sotay-fc-hw-slot {
  width: 110px;
  height: 110px;
  background: rgba(255,255,255,0.03);
  border: 1px dashed var(--sotay-border);
  border-radius: var(--sotay-radius-sm);
  position: relative;
}

.sotay-fc-pinyin {
  font-family: 'Inter', sans-serif;
  font-size: 1.6rem;
  color: var(--sotay-gold);
  font-weight: 600;
  margin: 0 0 14px;
  font-style: italic;
}
.sotay-fc-meaning {
  font-size: 1.05rem;
  color: var(--sotay-text);
  line-height: 1.55;
  max-width: 90%;
  margin-bottom: 16px;
}
.sotay-fc-back-hanzi {
  font-family: 'Noto Serif SC', 'KaiTi', serif;
  font-size: 1.6rem;
  color: var(--sotay-text-dim);
  margin-bottom: 6px;
}

/* ═══ Rich back face (v8.93) — toolbar, examples, cloze ═══ */
.sotay-fc-back-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px dashed var(--sotay-border);
  flex-shrink: 0;
}
.sotay-fc-back-toolbar button {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--sotay-border);
  color: var(--sotay-text-dim);
  padding: 6px 12px;
  border-radius: var(--sotay-radius-sm);
  cursor: pointer;
  font-size: 0.82rem;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all var(--sotay-dur-fast);
  font-family: inherit;
}
.sotay-fc-back-toolbar button:hover {
  background: rgba(200,169,110,0.12);
  color: var(--sotay-gold);
  border-color: var(--sotay-gold);
}
.sotay-fc-back-toolbar .fc-tts-btn {
  width: 38px; height: 38px; padding: 0;
  border-radius: 50%;
  font-size: 1rem;
  justify-content: center;
}
.sotay-fc-back-toolbar .fc-tts-btn.is-playing { color: var(--sotay-accent-2); border-color: var(--sotay-accent-2); }

.sotay-fc-back-head {
  text-align: center;
  margin-bottom: 14px;
}
.sotay-fc-back-head .pinyin {
  font-family: 'Inter', sans-serif;
  font-size: 1.7rem;
  color: var(--sotay-gold);
  font-weight: 600;
  font-style: italic;
  margin: 0 0 4px;
}
.sotay-fc-back-head .hanzi {
  font-family: 'Noto Serif SC', 'KaiTi', serif;
  font-size: 1.5rem;
  color: var(--sotay-text);
  margin: 0;
}
.sotay-fc-back-head .meaning {
  margin-top: 8px;
  color: var(--sotay-text);
  font-size: 1rem;
  line-height: 1.5;
}

.sotay-fc-section {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed var(--sotay-border);
}
.sotay-fc-section__title {
  font-size: 0.82rem;
  color: var(--sotay-gold);
  font-weight: 700;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
  text-transform: uppercase;
}

/* Example block */
.sotay-fc-example {
  background: rgba(255,255,255,0.03);
  border-left: 3px solid var(--sotay-gold-soft);
  border-radius: 0 var(--sotay-radius-sm) var(--sotay-radius-sm) 0;
  padding: 10px 12px;
  margin-bottom: 8px;
}
.sotay-fc-example__cn {
  font-family: 'Noto Serif SC', serif;
  color: var(--sotay-text);
  font-size: 1.05rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}
.sotay-fc-example__cn .ex-tts {
  background: transparent;
  border: none;
  color: var(--sotay-text-mute);
  cursor: pointer;
  font-size: 0.85rem;
  padding: 2px 6px;
  border-radius: 4px;
  transition: color var(--sotay-dur-fast);
}
.sotay-fc-example__cn .ex-tts:hover { color: var(--sotay-gold); }
.sotay-fc-example__py {
  font-style: italic;
  color: var(--sotay-gold-soft);
  font-size: 0.9rem;
  margin: 4px 0 2px;
  font-family: 'Inter', sans-serif;
}
.sotay-fc-example__vi {
  color: var(--sotay-text-dim);
  font-size: 0.92rem;
}

/* Sắp xếp từ */
.sotay-fc-arrange {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--sotay-border);
  border-radius: var(--sotay-radius-sm);
  padding: 12px;
  margin-bottom: 10px;
}
.sotay-fc-arrange__vi {
  font-size: 0.88rem;
  color: var(--sotay-text-dim);
  margin-bottom: 8px;
  font-style: italic;
}
.sotay-fc-arrange__pool,
.sotay-fc-arrange__target {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 40px;
  padding: 8px;
  border-radius: var(--sotay-radius-sm);
}
.sotay-fc-arrange__pool {
  background: rgba(255,255,255,0.04);
}
.sotay-fc-arrange__target {
  background: rgba(200,169,110,0.06);
  border: 1px dashed var(--sotay-border-hi);
  margin-top: 6px;
  min-height: 44px;
}
.sotay-fc-arrange__target:empty::after {
  content: attr(data-empty);
  color: var(--sotay-text-mute);
  font-size: 0.82rem;
  align-self: center;
}
.sotay-fc-token {
  position: relative;  /* cần cho ::after tooltip */
  font-family: 'Noto Serif SC', serif;
  font-size: 1.05rem;
  font-weight: 600;
  background: rgba(255,255,255,0.07);
  border: 1px solid var(--sotay-border);
  color: var(--sotay-text);
  padding: 4px 10px;
  border-radius: 4px;
  cursor: pointer;
  user-select: none;
  transition: background var(--sotay-dur-fast), border-color var(--sotay-dur-fast);
}
.sotay-fc-token:hover { background: rgba(200,169,110,0.14); border-color: var(--sotay-gold); }
.sotay-fc-token.is-correct { background: rgba(102,187,106,0.15); border-color: #66bb6a; color: #81c784; cursor: default; }
.sotay-fc-token.is-wrong   { background: rgba(239,83,80,0.12);   border-color: var(--sotay-accent-2); color: var(--sotay-accent-2); cursor: default; }

/* Tooltip phiên âm — hiện khi hover, chỉ khi token chưa bị lock */
.sotay-fc-token:not(.is-correct):not(.is-wrong)[data-py]:not([data-py=""]):hover::after {
  content: attr(data-py);
  position: absolute;
  bottom: calc(100% + 5px);
  left: 50%;
  transform: translateX(-50%);
  background: rgba(10,10,20,0.92);
  color: var(--sotay-gold-soft);
  font-size: 0.75rem;
  font-family: 'Inter', sans-serif;
  font-style: italic;
  font-weight: 400;
  padding: 3px 8px;
  border-radius: 4px;
  white-space: nowrap;
  pointer-events: none;
  z-index: 20;
  border: 1px solid var(--sotay-border-hi);
}
/* Khi có cả HSK — thêm " · HSKn" vào tooltip */
.sotay-fc-token:not(.is-correct):not(.is-wrong)[data-py]:not([data-py=""])[data-hsk]:not([data-hsk=""]):hover::after {
  content: attr(data-py) " · HSK" attr(data-hsk);
}
.sotay-fc-arrange__row {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}
.sotay-fc-arrange__check,
.sotay-fc-arrange__reset {
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--sotay-border);
  color: var(--sotay-text-dim);
  padding: 5px 14px;
  border-radius: var(--sotay-radius-sm);
  cursor: pointer;
  font-size: 0.83rem;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: all var(--sotay-dur-fast);
  font-family: inherit;
}
.sotay-fc-arrange__check:hover { background: rgba(102,187,106,0.14); border-color: #66bb6a; color: #81c784; }
.sotay-fc-arrange__reset:hover { background: rgba(255,255,255,0.08); color: var(--sotay-text); }
.sotay-fc-arrange__hint {
  margin-left: auto;
  background: transparent;
  border: 1px solid var(--sotay-border);
  color: var(--sotay-text-mute);
  width: 30px; height: 30px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0.82rem;
  padding: 0;
  flex-shrink: 0;
  transition: all var(--sotay-dur-fast);
  font-family: inherit;
}
.sotay-fc-arrange__hint:hover { color: var(--sotay-gold); border-color: var(--sotay-gold); background: rgba(200,169,110,0.1); }
.sotay-fc-arrange__feedback {
  font-size: 0.82rem;
  margin-top: 6px;
  min-height: 18px;
  color: var(--sotay-text-mute);
}
.sotay-fc-arrange__feedback.is-correct { color: #81c784; }
.sotay-fc-arrange__feedback.is-wrong   { color: var(--sotay-accent-2); }
.sotay-fc-arrange__feedback.is-hint    { color: var(--sotay-gold); }

/* Điền vào chỗ trống */
.sotay-fc-cloze-wrap {
  background: rgba(102,187,106,0.06);
  border: 1px solid rgba(102,187,106,0.2);
  border-radius: var(--sotay-radius-sm);
  padding: 12px;
  margin-bottom: 10px;
}
.sotay-fc-cloze__sentence {
  font-family: 'Noto Serif SC', serif;
  font-size: 1.1rem;
  color: var(--sotay-text);
  line-height: 1.7;
  margin-bottom: 6px;
}
.sotay-fc-cloze__input {
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--sotay-border-hi);
  color: var(--sotay-gold);
  font-family: 'Noto Serif SC', serif;
  font-size: 1rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 4px;
  width: 90px;
  text-align: center;
  outline: none;
  transition: border-color var(--sotay-dur-fast);
}
.sotay-fc-cloze__input:focus { border-color: var(--sotay-gold); }
.sotay-fc-cloze__input.is-correct { border-color: #66bb6a; color: #81c784; background: rgba(102,187,106,0.12); }
.sotay-fc-cloze__input.is-wrong   { border-color: var(--sotay-accent-2); color: var(--sotay-accent-2); }
.sotay-fc-cloze__row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}
.sotay-fc-cloze__feedback {
  font-size: 0.8rem;
  color: var(--sotay-text-mute);
  flex: 1;
}
.sotay-fc-cloze__feedback.is-correct { color: #81c784; }
.sotay-fc-cloze__feedback.is-wrong   { color: var(--sotay-accent-2); }
.fc-cloze-tts {
  background: transparent;
  border: 1px solid var(--sotay-border);
  color: var(--sotay-text-mute);
  width: 30px; height: 30px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0.82rem;
  flex-shrink: 0;
  transition: all var(--sotay-dur-fast);
}
.fc-cloze-tts:hover { color: var(--sotay-gold); border-color: var(--sotay-gold); }
.fc-cloze-tts.is-playing { color: var(--sotay-accent-2); border-color: var(--sotay-accent-2); }

/* Score row + answer reveal */
.sotay-fc-score-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px dashed var(--sotay-border);
  font-size: 0.85rem;
  color: var(--sotay-text-dim);
}
.sotay-fc-score__lbl { flex: 1; }
.sotay-fc-score__val { font-weight: 700; font-size: 1rem; }
.fc-answer-reveal {
  color: var(--sotay-gold);
  font-family: 'Noto Serif SC', serif;
}

/* ═══ Mode selector — chọn chế độ luyện tập ═══ */
.sotay-mode-wrap {
  max-width: 760px;
  margin: 30px auto;
}
.sotay-mode-title {
  text-align: center;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--sotay-gold);
  margin: 0 0 6px;
  font-family: 'Noto Serif SC', serif;
}
.sotay-mode-subtitle {
  text-align: center;
  color: var(--sotay-text-dim);
  font-size: 0.92rem;
  margin: 0 0 24px;
}
.sotay-mode-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px;
}
/* [v11.34 MATCHA SOFT 3D] Mode cards repaint — soft tone, plant patterns, 3D pressable */
.sotay-mode-card {
  position: relative;
  padding: 28px 18px 56px;
  border: 1px solid var(--msd-border);
  border-radius: var(--msd-radius-lg);
  cursor: pointer;
  text-align: center;
  background: var(--msd-surface);
  color: var(--msd-text);
  box-shadow: var(--msd-shadow-md);
  transition: transform var(--msd-dur-base) var(--msd-ease),
              box-shadow var(--msd-dur-base) var(--msd-ease);
  overflow: hidden;
}
/* Top highlight mờ — cảm giác 3D dome */
.sotay-mode-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 45%;
  background: linear-gradient(180deg, rgba(255,255,255,0.05), transparent);
  border-radius: var(--msd-radius-lg) var(--msd-radius-lg) 50% 50%;
  pointer-events: none;
}
.sotay-mode-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--msd-shadow-lg);
}
.sotay-mode-card:active {
  transform: translateY(2px);
  box-shadow: var(--msd-shadow-press);
}
/* [v11.33 UX FIX] Disabled card: vẫn nhìn rõ + lock overlay + tooltip native */
.sotay-mode-card.is-disabled {
  opacity: 0.78;
  cursor: not-allowed;
  filter: saturate(0.65);
  position: relative;
}
.sotay-mode-card.is-disabled::after {
  content: '\f023'; /* fa-lock */
  font-family: 'Font Awesome 6 Free', 'Font Awesome 5 Free';
  font-weight: 900;
  position: absolute;
  top: 12px;
  right: 12px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.55);
  color: #ffd54f;
  border-radius: 50%;
  font-size: 12px;
  box-shadow: 0 2px 0 rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.15);
  z-index: 2;
}
.sotay-mode-card.is-disabled:hover { transform: none; box-shadow: 0 6px 0 rgba(0,0,0,0.32), 0 10px 22px rgba(0,0,0,0.38); }
/* Badge yêu cầu cho card disabled — đỏ rõ, không mờ */
.sotay-mode-card.is-disabled .sotay-mode-card__badge {
  background: linear-gradient(135deg, #d32f2f, #b71c1c) !important;
  color: #fff !important;
  box-shadow: 0 2px 0 rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.2);
  border: 1px solid rgba(255, 255, 255, 0.15);
}
/* [v11.34 MATCHA SOFT 3D] 4 mode = 4 màu trong palette, mỗi mode 1 plant pattern */
/* FLASHCARD FSRS — Matcha (PRIMARY) + lá trà — chế độ chính */
.sotay-mode-card[data-mode="fsrs"] {
  background:
    var(--msd-pattern-tea-leaf),
    linear-gradient(150deg,
      color-mix(in srgb, var(--msd-matcha-500) 28%, var(--msd-surface)),
      var(--msd-surface) 100%);
  background-repeat: repeat;
  background-size: 90px 90px, auto;
  background-position: right bottom, center;
  border-color: color-mix(in srgb, var(--msd-matcha-500) 40%, transparent);
}

/* TRẮC NGHIỆM — Amber (SECONDARY) + lá phong */
.sotay-mode-card[data-mode="quiz"] {
  background:
    var(--msd-pattern-maple),
    linear-gradient(150deg,
      color-mix(in srgb, var(--msd-amber-500) 26%, var(--msd-surface)),
      var(--msd-surface) 100%);
  background-repeat: repeat;
  background-size: 110px 110px, auto;
  background-position: right bottom, center;
  border-color: color-mix(in srgb, var(--msd-amber-500) 38%, transparent);
}

/* GÕ TỪ — Bronze (ACCENT) + hoa mẫu đơn */
.sotay-mode-card[data-mode="typing"] {
  background:
    var(--msd-pattern-peony),
    linear-gradient(150deg,
      color-mix(in srgb, var(--msd-bronze-500) 26%, var(--msd-surface)),
      var(--msd-surface) 100%);
  background-repeat: repeat;
  background-size: 100px 100px, auto;
  background-position: right bottom, center;
  border-color: color-mix(in srgb, var(--msd-bronze-500) 38%, transparent);
}

/* ĐOÁN HÌNH — Matcha sáng + lá trà — biến thể nhẹ của primary */
.sotay-mode-card[data-mode="image-quiz"] {
  background:
    var(--msd-pattern-tea-leaf),
    linear-gradient(150deg,
      color-mix(in srgb, var(--msd-matcha-300) 22%, var(--msd-surface)),
      var(--msd-surface) 100%);
  background-repeat: repeat;
  background-size: 90px 90px, auto;
  background-position: left bottom, center;
  border-color: color-mix(in srgb, var(--msd-matcha-300) 35%, transparent);
}

/* Icon chip — bo tròn vuông + 3D depth */
.sotay-mode-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin: 0 auto 16px;
  border-radius: var(--msd-radius-lg);
  font-size: 1.4rem;
  color: var(--msd-paper-primary);
  box-shadow: var(--msd-shadow-soft);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.sotay-mode-card[data-mode="fsrs"] .sotay-mode-card__icon {
  background: linear-gradient(135deg, var(--msd-matcha-500), var(--msd-matcha-700));
  color: var(--msd-matcha-50);
}
.sotay-mode-card[data-mode="quiz"] .sotay-mode-card__icon {
  background: linear-gradient(135deg, var(--msd-amber-500), var(--msd-amber-700));
  color: var(--msd-amber-100);
}
.sotay-mode-card[data-mode="typing"] .sotay-mode-card__icon {
  background: linear-gradient(135deg, var(--msd-bronze-500), var(--msd-bronze-700));
  color: var(--msd-bronze-300);
}
.sotay-mode-card[data-mode="image-quiz"] .sotay-mode-card__icon {
  background: linear-gradient(135deg, var(--msd-matcha-300), var(--msd-matcha-500));
  color: var(--msd-matcha-50);
}

.sotay-mode-card__name {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--msd-paper-primary);
  margin-bottom: 8px;
  letter-spacing: 0.2px;
}
.sotay-mode-card__desc {
  font-size: 0.78rem;
  color: var(--msd-paper-secondary);
  line-height: 1.5;
}
.sotay-mode-card__badge {
  position: absolute;
  bottom: 14px; left: 14px;
  padding: 4px 12px;
  background: rgba(0, 0, 0, 0.4);
  color: var(--msd-paper-primary);
  border-radius: var(--msd-radius-full);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.3px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(4px);
}

/* ═══ Quiz MCQ mode ═══ */
.sotay-quiz-wrap {
  max-width: 640px;
  margin: 18px auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.sotay-quiz-stem {
  background: linear-gradient(145deg, var(--sotay-card) 0%, #14141d 100%);
  border: 1px solid var(--sotay-border-hi);
  border-radius: var(--sotay-radius-lg);
  padding: 28px 22px;
  text-align: center;
  box-shadow: var(--sotay-shadow);
  position: relative;
}
.sotay-quiz-stem::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--sotay-accent), var(--sotay-gold), var(--sotay-accent));
  opacity: 0.65;
  border-radius: var(--sotay-radius-lg) var(--sotay-radius-lg) 0 0;
}
.sotay-quiz-stem__hanzi {
  font-family: 'Noto Serif SC', serif;
  font-size: clamp(2.2rem, 6vw, 3.4rem);
  color: var(--sotay-text);
  margin: 6px 0 8px;
  font-weight: 700;
}
.sotay-quiz-stem__pinyin {
  color: var(--sotay-gold);
  font-style: italic;
  font-size: 1.05rem;
}
.sotay-quiz-options {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
@media (min-width: 560px) {
  .sotay-quiz-options { grid-template-columns: 1fr 1fr; }
}
.sotay-quiz-option {
  background: var(--sotay-card);
  border: 1px solid var(--sotay-border);
  color: var(--sotay-text);
  padding: 14px 16px;
  border-radius: var(--sotay-radius-sm);
  cursor: pointer;
  font-family: inherit;
  font-size: 0.95rem;
  text-align: left;
  transition: all var(--sotay-dur-fast);
  line-height: 1.4;
  display: flex;
  align-items: center;
  gap: 10px;
}
.sotay-quiz-option__letter {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: rgba(200,169,110,0.15);
  color: var(--sotay-gold);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.85rem;
  flex-shrink: 0;
}
.sotay-quiz-option:hover:not(:disabled) {
  border-color: var(--sotay-gold);
  background: var(--sotay-card-hover);
}
.sotay-quiz-option.is-correct {
  border-color: #66bb6a;
  background: rgba(102,187,106,0.12);
}
.sotay-quiz-option.is-correct .sotay-quiz-option__letter { background: rgba(102,187,106,0.3); color: #81c784; }
.sotay-quiz-option.is-wrong {
  border-color: var(--sotay-accent-2);
  background: rgba(239,83,80,0.12);
}
.sotay-quiz-option.is-wrong .sotay-quiz-option__letter { background: rgba(239,83,80,0.3); color: var(--sotay-accent-2); }
.sotay-quiz-option:disabled { cursor: default; }
.sotay-quiz-feedback {
  text-align: center;
  font-size: 0.92rem;
  color: var(--sotay-text-dim);
  min-height: 22px;
}

/* Hành động SRS */
.sotay-fc-controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  padding: 8px 0 4px;
}
.sotay-fc-flip-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 32px;
  border-radius: 50px;
  background: linear-gradient(135deg, var(--sotay-accent) 0%, var(--dark-red, #8e1f1f) 100%);
  border: none;
  color: #fff;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  letter-spacing: 0.4px;
  font-family: inherit;
  transition: filter var(--sotay-dur-fast), transform 0.15s;
  box-shadow: 0 4px 14px rgba(139,92,246,0.25);
}
.sotay-fc-flip-btn:hover { filter: brightness(1.15); transform: translateY(-1px); }
.sotay-fc-flip-btn:active { transform: translateY(0); }

.sotay-fc-srs-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.sotay-fc-srs-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 11px 8px;
  border-radius: var(--sotay-radius-sm);
  border: 1px solid var(--sotay-border);
  background: var(--sotay-card);
  color: var(--sotay-text);
  cursor: pointer;
  transition: all var(--sotay-dur-fast);
  font-family: inherit;
}
.sotay-fc-srs-btn__label { font-size: 0.92rem; font-weight: 600; }
.sotay-fc-srs-btn__interval { font-size: 0.72rem; color: var(--sotay-text-mute); }
.sotay-fc-srs-btn:hover { transform: translateY(-2px); }
.sotay-fc-srs-btn--again { border-color: rgba(239,83,80,0.45); }
.sotay-fc-srs-btn--again:hover { background: rgba(239,83,80,0.12); border-color: var(--sotay-accent-2); }
.sotay-fc-srs-btn--hard { border-color: rgba(255,167,38,0.45); }
.sotay-fc-srs-btn--hard:hover { background: rgba(255,167,38,0.1); border-color: #ffb74d; }
.sotay-fc-srs-btn--good { border-color: rgba(102,187,106,0.45); }
.sotay-fc-srs-btn--good:hover { background: rgba(102,187,106,0.12); border-color: #81c784; }

/* ═══════════════════════════════════════════════════════════════════
   SESSION SUMMARY SCREEN
   ═══════════════════════════════════════════════════════════════════ */
.sotay-summary {
  max-width: 480px;
  margin: 30px auto;
  background: var(--sotay-card);
  border: 1px solid var(--sotay-border-hi);
  border-radius: var(--sotay-radius-lg);
  padding: 32px 28px;
  text-align: center;
  box-shadow: var(--sotay-shadow), var(--sotay-glow-gold);
}
.sotay-summary__icon {
  font-size: 3rem;
  color: var(--sotay-gold);
  margin-bottom: 12px;
}
.sotay-summary__title {
  font-family: 'Noto Serif SC', serif;
  font-size: 1.5rem;
  color: var(--sotay-gold);
  margin: 0 0 6px;
}
.sotay-summary__subtitle {
  color: var(--sotay-text-dim);
  font-size: 0.9rem;
  margin: 0 0 22px;
}
.sotay-summary__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}
.sotay-summary__item {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--sotay-border);
  border-radius: var(--sotay-radius-sm);
  padding: 12px;
}
.sotay-summary__item-label {
  font-size: 0.72rem;
  color: var(--sotay-text-mute);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}
.sotay-summary__item-value {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--sotay-gold);
}
.sotay-summary__actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* ═══════════════════════════════════════════════════════════════════
   HOME: NO RESULT + AI DETAIL CARD
   ═══════════════════════════════════════════════════════════════════ */
.sotay-no-result {
  text-align: center;
  color: var(--sotay-text-mute);
  padding: 40px 20px;
  font-size: 0.92rem;
}
.sotay-no-result i { margin-right: 8px; }

.sotay-ai-detail-card {
  max-width: 460px;
  margin: 40px auto 0;
  background: var(--sotay-card);
  border: 1px solid var(--sotay-border-hi);
  border-radius: var(--sotay-radius-lg);
  padding: 32px 28px 28px;
  text-align: center;
  box-shadow: var(--sotay-shadow), var(--sotay-glow-gold);
  animation: sotay-fadein var(--sotay-dur-slow) var(--sotay-easing) both;
}
.sotay-ai-detail-card__icon {
  font-size: 2.6rem;
  color: var(--sotay-gold);
  margin-bottom: 14px;
}
.sotay-ai-detail-card__title {
  font-family: 'Noto Serif SC', serif;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--sotay-text);
  margin-bottom: 8px;
}
.sotay-ai-detail-card__desc {
  color: var(--sotay-text-dim);
  font-size: 0.87rem;
  line-height: 1.6;
  margin-bottom: 20px;
}
.sotay-ai-detail-card__stats {
  display: flex;
  justify-content: center;
  gap: 28px;
  margin-bottom: 22px;
}
.sotay-ai-detail-card__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}
.sotay-ai-detail-card__stat-val {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--sotay-gold);
  line-height: 1.1;
}
.sotay-ai-detail-card__stat-lbl {
  font-size: 0.72rem;
  color: var(--sotay-text-mute);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.sotay-ai-detail-card__btn { width: 100%; justify-content: center; }

/* ═══════════════════════════════════════════════════════════════════
   LOADER
   ═══════════════════════════════════════════════════════════════════ */
.sotay-loader {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 60px 20px;
  color: var(--sotay-text-dim);
}
.sotay-spinner {
  width: 36px;
  height: 36px;
  border: 3px solid var(--sotay-border);
  border-top-color: var(--sotay-gold);
  border-radius: 50%;
  animation: sotay-spin 0.85s linear infinite;
}
@keyframes sotay-spin { to { transform: rotate(360deg); } }

.sotay-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: rgba(20,20,28,0.95);
  border: 1px solid var(--sotay-border-hi);
  color: var(--sotay-text);
  padding: 10px 18px;
  border-radius: var(--sotay-radius-sm);
  font-size: 0.9rem;
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: all var(--sotay-dur);
  box-shadow: var(--sotay-shadow);
}
.sotay-toast.is-show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ═══ AI Card — khung ảnh minh họa ══════════════════════════════════ */
.sotay-fc-img-section {
  display: flex;
  justify-content: center;
  padding: 10px 0 4px;
}
.sotay-fc-word-img {
  width: 200px;
  height: 140px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid rgba(200,169,110,0.2);
  background: rgba(255,255,255,0.04);
  display: block;
}

/* ═══ AI Card — collapsible details (từ thay thế / lưu ý / mẹo) ════ */
.sotay-fc-details {
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  margin: 6px 0;
  font-size: 0.87rem;
  background: rgba(255,255,255,0.02);
}
.sotay-fc-details > summary {
  cursor: pointer;
  padding: 9px 14px;
  color: var(--sotay-text-mute);
  display: flex;
  align-items: center;
  gap: 8px;
  user-select: none;
  list-style: none;
  transition: color var(--sotay-dur);
}
.sotay-fc-details > summary::-webkit-details-marker { display: none; }
.sotay-fc-details > summary::after {
  content: '▾';
  margin-left: auto;
  opacity: 0.6;
  transition: transform 0.2s;
}
.sotay-fc-details[open] > summary::after { transform: rotate(-180deg); }
.sotay-fc-details > summary i { width: 14px; text-align: center; flex-shrink: 0; }
.sotay-fc-details > summary:hover { color: var(--sotay-text-main); }
.sotay-fc-details--warn > summary { color: var(--sotay-accent-2); }
.sotay-fc-details--warn > summary:hover { color: #f07070; }
.sotay-fc-details--tip > summary  { color: #f5c842; }
.sotay-fc-details-body {
  padding: 2px 14px 12px;
  color: var(--sotay-text-sub);
  line-height: 1.65;
  border-top: 1px solid rgba(255,255,255,0.05);
}

/* ═══ AI Card — bài tập vận dụng ════════════════════════════════════ */
.sotay-fc-exercise { margin-top: 8px; }
.sotay-fc-exercise__q {
  font-size: 0.92rem;
  color: var(--sotay-text-main);
  line-height: 1.55;
  margin-bottom: 6px;
}
.sotay-fc-exercise__hint {
  font-size: 0.82rem;
  color: var(--sotay-text-mute);
  margin-bottom: 8px;
}
.sotay-fc-exercise__inp-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.sotay-fc-exercise__ans {
  margin-top: 8px;
  padding: 8px 12px;
  background: rgba(255,255,255,0.04);
  border-radius: 6px;
  font-size: 0.87rem;
  color: var(--sotay-text-sub);
  line-height: 1.5;
}

/* ═══════════════════════════════════════════════════════════════════
   QUIZ — Audio button
   ═══════════════════════════════════════════════════════════════════ */
.sotay-quiz-audio-btn {
  position: absolute;
  top: 10px;
  right: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 50%;
  color: var(--sotay-text-sub);
  font-size: 0.88rem;
  cursor: pointer;
  transition: background 0.2s;
}
.sotay-quiz-audio-btn:hover { background: rgba(255,255,255,0.15); color: var(--sotay-text); }

/* ═══════════════════════════════════════════════════════════════════
   TYPING MODE — layout + input
   ═══════════════════════════════════════════════════════════════════ */
.sotay-typing-wrap {
  max-width: 540px;
  margin: 0 auto;
  padding: 8px 0 24px;
}
.sotay-typing-prompt {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  padding: 22px 20px 16px;
  text-align: center;
  margin-bottom: 20px;
}
.sotay-typing-prompt__label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--sotay-text-mute);
  margin-bottom: 10px;
}
.sotay-typing-prompt__meaning {
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--sotay-text);
  line-height: 1.4;
  margin-bottom: 8px;
}
.sotay-typing-prompt__hint {
  font-size: 1rem;
  color: var(--sotay-gold);
  letter-spacing: 0.04em;
  margin-bottom: 8px;
}
.sotay-typing-prompt__actions {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 10px;
}
.sotay-typing-audio-btn,
.sotay-typing-hint-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 0.82rem;
  cursor: pointer;
  transition: background 0.2s;
  border: 1px solid rgba(255,255,255,0.12);
}
.sotay-typing-audio-btn {
  background: rgba(255,255,255,0.07);
  color: var(--sotay-text-sub);
}
.sotay-typing-audio-btn:hover { background: rgba(255,255,255,0.14); color: var(--sotay-text); }
.sotay-typing-hint-btn {
  background: rgba(250,204,21,0.1);
  color: #fde68a;
  border-color: rgba(250,204,21,0.2);
}
.sotay-typing-hint-btn:hover { background: rgba(250,204,21,0.18); }

.sotay-typing-input {
  width: 100%;
  box-sizing: border-box;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 12px;
  color: var(--sotay-text);
  font-size: 1.5rem;
  padding: 14px 20px;
  font-family: 'Noto Serif SC', serif;
  text-align: center;
  letter-spacing: 0.12em;
  transition: border-color 0.2s, box-shadow 0.2s;
  outline: none;
  margin-bottom: 4px;
}
.sotay-typing-input:focus {
  border-color: var(--sotay-accent);
  box-shadow: 0 0 0 3px rgba(139,92,246,0.15);
}
.sotay-typing-input:disabled { opacity: 0.5; }

.sotay-typing-feedback { margin-top: 14px; min-height: 40px; }
.sotay-typing-feedback--correct,
.sotay-typing-feedback--wrong {
  padding: 14px 18px;
  border-radius: 14px;
  font-size: 0.95rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  text-align: center;
  box-shadow: 0 4px 0 rgba(0,0,0,0.25), 0 6px 16px rgba(0,0,0,0.2);
}
.sotay-typing-feedback--correct {
  background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
  color: #fff;
  border: none;
}
.sotay-typing-feedback--wrong {
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
  color: #fff;
  border: none;
}
.sotay-typing-feedback__pinyin {
  font-size: 0.82rem;
  opacity: 0.82;
  font-weight: 400;
}

/* ═══════════════════════════════════════════════════════════════════
   FLASHCARD FRONT — Image thumbnail
   ═══════════════════════════════════════════════════════════════════ */
.sotay-fc-front-img {
  width: 100%;
  max-width: 260px;
  margin: 0 auto 18px;   /* tăng margin-bottom để thoáng hơn */
  border-radius: 12px;
  overflow: hidden;
  line-height: 0;
  box-shadow: 0 6px 20px rgba(0,0,0,0.4);
  border: 1px solid rgba(255,255,255,0.06);
}
.sotay-fc-front-img img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  border-radius: 12px;
  display: block;
}
.sotay-fc-front-img--bing { opacity: 0.6; }
.sotay-fc-front-img--bing:hover { opacity: 0.85; }

/* ═══════════════════════════════════════════════════════════════════
   FLASHCARD SHELL — Progress row + Kết Thúc button
   ═══════════════════════════════════════════════════════════════════ */
.sotay-fc-progress-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.sotay-fc-progress-bar {
  flex: 1;
  height: 6px;
  background: rgba(255,255,255,0.08);
  border-radius: 4px;
  overflow: hidden;
}
.sotay-fc-progress-bar__fill {
  height: 100%;
  background: linear-gradient(90deg, var(--sotay-accent), #c084fc);
  border-radius: 4px;
  transition: width 0.4s ease;
  width: 0%;
}
.sotay-fc-progress-label {
  font-size: 0.75rem;
  color: var(--sotay-text-sub);
  min-width: 32px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.sotay-fc-end-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  background: rgba(255,255,255,0.07);
  color: var(--sotay-text-sub);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 20px;
  font-size: 0.78rem;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  white-space: nowrap;
}
.sotay-fc-end-btn:hover {
  background: rgba(239,68,68,0.15);
  color: #fca5a5;
  border-color: rgba(239,68,68,0.25);
}

/* ═══════════════════════════════════════════════════════════════════
   FLASHCARD BACK — Compose section (đặt câu + AI chấm điểm)
   ═══════════════════════════════════════════════════════════════════ */
.sotay-fc-compose {
  margin-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.07);
  padding-top: 12px;
}
.sotay-fc-compose__input {
  width: 100%;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px;
  color: var(--sotay-text);
  font-size: 1.08rem; /* v13.31 — tăng từ 0.92rem để đọc/gõ dễ hơn */
  line-height: 1.55;
  padding: 14px 16px; /* v13.31 — rộng hơn 10px 12px */
  resize: vertical;
  min-height: 96px; /* v13.31 — tăng từ 64px (2 hàng → 3 hàng) */
  margin-top: 10px;
  font-family: inherit;
  font-weight: 500;
  transition: border-color 0.2s, box-shadow 0.2s;
  box-sizing: border-box;
}
.sotay-fc-compose__input:focus {
  outline: none;
  border-color: var(--sotay-accent);
}
.sotay-fc-compose__actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 8px;
}
.sotay-fc-compose__submit {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: linear-gradient(135deg, var(--sotay-accent), #7c3aed);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 0.87rem;
  cursor: pointer;
  transition: opacity 0.2s, transform 0.15s;
}
.sotay-fc-compose__submit:hover { opacity: 0.88; transform: translateY(-1px); }
.sotay-fc-compose__submit:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.sotay-fc-compose__cost {
  font-size: 0.78rem;
  opacity: 0.85;
  background: rgba(255,255,255,0.12);
  padding: 2px 6px;
  border-radius: 10px;
}
.sotay-fc-compose__badge {
  font-size: 0.78rem;
  background: rgba(250,204,21,0.18);
  color: #fde68a;
  padding: 2px 6px;
  border-radius: 10px;
}
.sotay-fc-compose__badge--vip {
  background: rgba(250,204,21,0.22);
  color: #fcd34d;
}
.sotay-fc-compose__result {
  margin-top: 10px;
}
.sotay-fc-compose__err {
  font-size: 0.84rem;
  color: #f87171;
  padding: 8px 10px;
  background: rgba(239,68,68,0.08);
  border-radius: 6px;
  border-left: 3px solid #f87171;
}

/* ═══════════════════════════════════════════════════════════════════
   FLASHCARD BACK — Grade result display
   ═══════════════════════════════════════════════════════════════════ */
.sotay-fc-grade {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 10px;
  padding: 14px;
  animation: sotay-fadein 0.3s ease;
}
.sotay-fc-grade__top {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.sotay-fc-grade__score {
  font-size: 2.6rem; /* v13.31 — tăng từ 2rem cho nổi bật hơn */
  font-weight: 800;
  color: var(--sotay-accent);
  line-height: 1;
}
.sotay-fc-grade__score span {
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--sotay-text-sub);
}
.sotay-fc-grade__badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 0.82rem;
  font-weight: 600;
}
.sotay-fc-grade__badge.is-excellent {
  background: rgba(16,185,129,0.18);
  color: #6ee7b7;
}
.sotay-fc-grade__badge.is-good {
  background: rgba(59,130,246,0.18);
  color: #93c5fd;
}
.sotay-fc-grade__badge.is-ok {
  background: rgba(250,204,21,0.15);
  color: #fde68a;
}
.sotay-fc-grade__badge.is-poor {
  background: rgba(239,68,68,0.15);
  color: #fca5a5;
}
.sotay-fc-grade__breakdown {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px; /* v13.31 — tăng từ 6px */
  margin-bottom: 14px;
}
/* v13.31 — Redesign: 4 sub-scores semantic color cards (dark mode default) */
.sotay-fc-grade__criterion {
  background: rgba(255,255,255,0.04);
  border-radius: 10px;
  padding: 12px 14px; /* tăng từ 7px 10px */
  font-size: 1rem; /* tăng từ 0.8rem */
  border-left: 3px solid rgba(255,255,255,0.2);
  transition: transform 0.15s, box-shadow 0.2s;
}
.sotay-fc-grade__criterion:hover { transform: translateY(-1px); }
.sotay-fc-grade__criterion--grammar     { border-left-color: #60a5fa; background: rgba(59,130,246,0.10); }
.sotay-fc-grade__criterion--meaning     { border-left-color: #34d399; background: rgba(16,185,129,0.10); }
.sotay-fc-grade__criterion--naturalness { border-left-color: #fbbf24; background: rgba(245,158,11,0.10); }
.sotay-fc-grade__criterion--context     { border-left-color: #a78bfa; background: rgba(139,92,246,0.10); }
.sotay-fc-grade__criterion-label {
  color: var(--sotay-text-sub);
  margin-bottom: 4px;
  font-size: 0.9rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.sotay-fc-grade__criterion-val {
  font-weight: 800;
  color: var(--sotay-text);
  font-size: 1.25rem; /* tăng từ inherit */
}
.sotay-fc-grade__feedback,
.sotay-fc-grade__correction,
.sotay-fc-grade__suggestion {
  font-size: 1.02rem; /* v13.31 — tăng từ 0.85rem */
  line-height: 1.65;
  margin-top: 12px;
  padding: 14px 16px;
  border-radius: 10px;
}
.sotay-fc-grade__feedback {
  color: var(--sotay-text);
  background: rgba(255,255,255,0.05);
  border-left: 3px solid rgba(255,255,255,0.2);
}
.sotay-fc-grade__correction {
  background: rgba(239,68,68,0.10);
  border-left: 3px solid rgba(239,68,68,0.5);
  color: #fca5a5;
}
.sotay-fc-grade__suggestion {
  background: rgba(59,130,246,0.10);
  border-left: 3px solid rgba(59,130,246,0.5);
  color: #93c5fd;
}
.sotay-fc-grade__section-title {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.55;
  margin-bottom: 3px;
}

/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVE — Mobile (< 768px)
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .sotay-header__search { max-width: none; flex: 1; }
  .sotay-header__title span { display: none; }
  .sotay-header__stats { display: none; }

  .sotay-content { padding: 14px; }
  .sotay-shelf { margin-bottom: 20px; }
  .sotay-shelf__row { gap: 10px; }
  .sotay-topic-card { min-width: 175px; max-width: 175px; }
  .sotay-word-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
  .sotay-word-row { min-height: 120px; padding: 14px 12px 10px; }
  .sotay-word-row__hanzi { font-size: 1.6rem; }
  .sotay-fc-stage { min-height: 320px; }
  .sotay-fc-srs-btn { padding: 9px 4px; }

  /* Home page mobile */
  .sotay-dash-stats { grid-template-columns: repeat(2, 1fr); }
  .sotay-cta-banner { flex-direction: column; align-items: flex-start; }
  .sotay-cta-banner__btn { width: 100%; justify-content: center; }
  .sotay-filter-row { flex-direction: column; align-items: flex-start; gap: 8px; }
  .sotay-search-bar { flex-direction: column; }
  .sotay-search-bar__cat,
  .sotay-search-bar__input { min-width: 0; width: 100%; }

  /* Flashcard Group C mobile */
  .sotay-fc-front-img { max-width: 180px; }
  .sotay-fc-front-img img { height: 110px; }
  .sotay-fc-grade__breakdown { grid-template-columns: 1fr 1fr; }
  .sotay-fc-grade__score { font-size: 1.6rem; }
  .sotay-fc-compose__submit { width: 100%; justify-content: center; }
  .sotay-fc-compose__actions { justify-content: stretch; }
}

/* ═══════════════════════════════════════════════════════════════════
   S52 — LIGHT MODE: 4 stat cards palette mới + bỏ 3D + thu nhỏ
   Palette semantic:
     CHỦ ĐỀ    → #5e6266 (xám đậm, neutral/tổng)
     CẦN ÔN    → #c7312f (đỏ, cảnh báo)
     ĐANG HỌC  → #4087a6 (xanh dương, process)
     ĐÃ THUỘC  → #f3b6b6 (hồng phấn, achievement)
   Dark mode KHÔNG động — scope dưới html[data-theme="light"].
   ═══════════════════════════════════════════════════════════════════ */

/* Container — thu gap nhẹ */
html[data-theme="light"] .sotay-dash-stats {
  gap: 10px;
  margin-bottom: 16px;
}

/* Card base — thu padding, bỏ 3D shadow */
html[data-theme="light"] .sotay-dash-stat {
  padding: 14px 10px 12px;
  border-radius: 12px;
  background: #5e6266;
  border: 1px solid rgba(0,0,0,0.18);
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  color: #ffffff;
}
html[data-theme="light"] .sotay-dash-stat::before {
  background-image: radial-gradient(circle, rgba(255,255,255,0.07) 1px, transparent 1px);
}
html[data-theme="light"] .sotay-dash-stat::after {
  border-color: rgba(255,255,255,0.10);
  box-shadow: 0 0 0 14px rgba(255,255,255,0.04), 0 0 0 28px rgba(255,255,255,0.02);
}
html[data-theme="light"] .sotay-dash-stat:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(0,0,0,0.14);
  filter: brightness(1.05);
}

/* Icon nhỏ gọn hơn */
html[data-theme="light"] .sotay-dash-stat__icon {
  width: 34px;
  height: 34px;
  font-size: 0.95rem;
  margin-bottom: 6px;
  background: rgba(255,255,255,0.18);
  color: #ffffff;
  box-shadow: 0 0 0 4px rgba(255,255,255,0.06);
}

/* Số to nhưng thu lại tỉ lệ chung */
html[data-theme="light"] .sotay-dash-stat__val {
  font-size: 1.7rem;
  font-weight: 900;
  color: #ffffff;
  text-shadow: none;
}
html[data-theme="light"] .sotay-dash-stat__lbl {
  font-size: 0.66rem;
  color: rgba(255,255,255,0.88);
  letter-spacing: 0.8px;
  font-weight: 700;
  margin-top: 2px;
}

/* CẦN ÔN — đỏ đậm */
html[data-theme="light"] .sotay-dash-stat--due {
  background: #c7312f;
  border-color: rgba(0,0,0,0.20);
}
html[data-theme="light"] .sotay-dash-stat--due:hover {
  box-shadow: 0 3px 10px rgba(199,49,47,0.30);
}
html[data-theme="light"] .sotay-dash-stat--due .sotay-dash-stat__icon {
  background: rgba(255,255,255,0.20);
  color: #ffffff;
  box-shadow: 0 0 0 4px rgba(255,255,255,0.08);
}
html[data-theme="light"] .sotay-dash-stat--due .sotay-dash-stat__val {
  color: #ffffff;
}

/* ĐANG HỌC — xanh dương */
html[data-theme="light"] .sotay-dash-stat--learning {
  background: #4087a6;
  border-color: rgba(0,0,0,0.18);
}
html[data-theme="light"] .sotay-dash-stat--learning:hover {
  box-shadow: 0 3px 10px rgba(64,135,166,0.30);
}
html[data-theme="light"] .sotay-dash-stat--learning .sotay-dash-stat__icon {
  background: rgba(255,255,255,0.22);
  color: #ffffff;
  box-shadow: 0 0 0 4px rgba(255,255,255,0.08);
}
html[data-theme="light"] .sotay-dash-stat--learning .sotay-dash-stat__val {
  color: #ffffff;
}

/* ĐÃ THUỘC — hồng phấn (text đậm vì nền sáng) */
html[data-theme="light"] .sotay-dash-stat--mastered {
  background: #f3b6b6;
  border-color: rgba(0,0,0,0.18);
  color: #4a1f1f;
}
html[data-theme="light"] .sotay-dash-stat--mastered:hover {
  box-shadow: 0 3px 10px rgba(243,182,182,0.55);
}
html[data-theme="light"] .sotay-dash-stat--mastered .sotay-dash-stat__icon {
  background: rgba(74,31,31,0.18);
  color: #4a1f1f;
  box-shadow: 0 0 0 4px rgba(74,31,31,0.06);
}
html[data-theme="light"] .sotay-dash-stat--mastered .sotay-dash-stat__val {
  color: #4a1f1f;
  text-shadow: none;
}
html[data-theme="light"] .sotay-dash-stat--mastered .sotay-dash-stat__lbl {
  color: rgba(74,31,31,0.78);
}

/* ═══════════════════════════════════════════════════════════════════
   S52 — LIGHT MODE: SỔ TAY FSRS muted/earthy redesign
   Palette: #c7312f brick · #4087a6 petrol · #f3b6b6 blush · #5e6266 slate
            + #d4a574 honey · #9ab87a sage · #e8c4b8 peach · #3a3d3f charcoal
            + #fdf6f3 cream
   ═══════════════════════════════════════════════════════════════════ */

/* ─── SEARCH BAR — slate outline, focus brick red ────────────── */
html[data-theme="light"] .sotay-search-bar__cat,
html[data-theme="light"] .sotay-search-bar__input {
  background: #ffffff;
  border: 1.5px solid #5e6266;
  border-radius: 22px;
}
html[data-theme="light"] .sotay-search-bar__cat:focus-within,
html[data-theme="light"] .sotay-search-bar__input:focus-within {
  border-color: #c7312f;
  box-shadow: 0 0 0 3px rgba(199,49,47,0.10);
}
html[data-theme="light"] .sotay-search-bar__cat > i {
  color: #d4a574;
}
html[data-theme="light"] .sotay-search-bar__cat select {
  background: transparent !important;
  color: #3a3d3f !important;
  border: none !important;
  font-weight: 700;
}
html[data-theme="light"] .sotay-search-bar__cat select option {
  background: #ffffff;
  color: #3a3d3f;
}
html[data-theme="light"] .sotay-search-bar__input > i {
  color: #5e6266;
}
html[data-theme="light"] .sotay-search-bar__input input {
  background: transparent !important;
  color: #3a3d3f !important;
  border: none !important;
  font-weight: 600;
}
html[data-theme="light"] .sotay-search-bar__input input::placeholder {
  color: #8b8d8f;
}

/* ─── FILTER TABS — pill outline → blush active ──────────────── */
html[data-theme="light"] .sotay-filter-tab {
  background: #ffffff;
  border: 1.5px solid #5e6266;
  color: #3a3d3f;
  font-weight: 700;
}
html[data-theme="light"] .sotay-filter-tab:hover {
  background: rgba(232,196,184,0.30);
  border-color: #c7312f;
  color: #c7312f;
}
html[data-theme="light"] .sotay-filter-tab.is-active {
  background: linear-gradient(135deg, #e8c4b8 0%, #f3b6b6 100%);
  border-color: #c7312f;
  color: #c7312f;
  font-weight: 800;
}
html[data-theme="light"] .sotay-filter-tab span.n-due {
  color: #c7312f;
  font-weight: 900;
}

/* ─── UPLOAD BTN "Nhập từ vựng" — honey dashed ───────────────── */
html[data-theme="light"] .sotay-upload-btn {
  background: #fdf6f3;
  border: 1.5px dashed #d4a574;
  color: #b8842f;
  font-weight: 700;
}
html[data-theme="light"] .sotay-upload-btn:hover {
  background: rgba(212,165,116,0.18);
  border-color: #c7312f;
  color: #c7312f;
}

/* ─── SHELF TITLE — "Cá Nhân" / "HSK 3.0" ────────────────────── */
html[data-theme="light"] .sotay-shelf__title {
  color: #3a3d3f;
  font-size: 1.05rem;
  font-weight: 800;
}
html[data-theme="light"] .sotay-shelf__title i {
  color: #d4a574;
}
html[data-theme="light"] .sotay-shelf__count {
  background: linear-gradient(135deg, #e8c4b8 0%, #f3b6b6 100%);
  color: #c7312f;
  font-weight: 800;
  border: 1px solid #c7312f;
  padding: 3px 10px;
}
html[data-theme="light"] .sotay-shelf__row::-webkit-scrollbar-thumb {
  background: #d4a574;
}

/* ─── TOPIC CARD base — cream bg, slate border, flat ─────────── */
html[data-theme="light"] .sotay-topic-card {
  background: #ffffff;
  border: 1.5px solid #5e6266;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(58,61,63,0.08);
}
html[data-theme="light"] .sotay-topic-card::before {
  background: linear-gradient(90deg, #d4a574, rgba(212,165,116,0.30));
  height: 4px;
}
html[data-theme="light"] .sotay-topic-card.has-due::before {
  background: linear-gradient(90deg, #c7312f, rgba(199,49,47,0.30));
}
html[data-theme="light"] .sotay-topic-card.is-mastered::before {
  background: linear-gradient(90deg, #9ab87a, rgba(154,184,122,0.30));
}
html[data-theme="light"] .sotay-topic-card:hover {
  transform: translateY(-2px);
  border-color: #c7312f;
  box-shadow: 0 4px 14px rgba(199,49,47,0.15);
}
html[data-theme="light"] .sotay-topic-card.has-due:hover {
  border-color: #c7312f;
  box-shadow: 0 4px 14px rgba(199,49,47,0.22);
}
html[data-theme="light"] .sotay-topic-card.is-hsk {
  border-color: #4087a6;
}
html[data-theme="light"] .sotay-topic-card.is-hsk:hover {
  border-color: #2a5a73;
  box-shadow: 0 4px 14px rgba(64,135,166,0.20);
}

/* Topic name — Hán tự charcoal đậm */
html[data-theme="light"] .sotay-topic-card__name {
  color: #3a3d3f;
}

/* Type pill (AI) — honey */
html[data-theme="light"] .sotay-type-pill {
  background: rgba(212,165,116,0.16);
  border-color: #d4a574;
  color: #b8842f;
}
/* HSK pill — petrol muted */
html[data-theme="light"] .sotay-hsk-pill {
  background: rgba(64,135,166,0.12);
  border-color: #4087a6;
  color: #4087a6;
}

/* Due badge — brick red flat */
html[data-theme="light"] .sotay-due-badge {
  background: #c7312f;
  color: #ffffff;
  box-shadow: 0 1px 4px rgba(199,49,47,0.30);
}

/* Stats row mini — petrol / honey / sage */
html[data-theme="light"] .sotay-topic-card__stats-row {
  color: #5e6266;
}
html[data-theme="light"] .stc-new    { color: #4087a6; font-weight: 700; }
html[data-theme="light"] .stc-learn  { color: #b8842f; font-weight: 700; }
html[data-theme="light"] .stc-master { color: #6b9a4d; font-weight: 700; }
html[data-theme="light"] .stc-empty  { color: #8b8d8f; }

/* Progress bar — cream track + honey/sage fill */
html[data-theme="light"] .sotay-topic-card__bar {
  background: #f3e0d8;
  height: 6px;
  border-radius: 4px;
}
html[data-theme="light"] .sotay-topic-card__bar-fill {
  background: linear-gradient(90deg, #d4a574, #9ab87a);
}
html[data-theme="light"] .sotay-topic-card__pct {
  color: #b8842f;
  font-weight: 700;
}

/* Action button — peach pill, brick red khi due */
html[data-theme="light"] .sotay-topic-card__btn {
  background: #ffffff;
  border: 1.5px solid #5e6266;
  color: #3a3d3f;
  font-weight: 700;
}
html[data-theme="light"] .sotay-topic-card__btn:hover {
  background: rgba(212,165,116,0.18);
  border-color: #d4a574;
  color: #b8842f;
}
html[data-theme="light"] .sotay-topic-card__btn.is-due {
  background: linear-gradient(135deg, #f3b6b6 0%, #e8c4b8 100%);
  border-color: #c7312f;
  color: #c7312f;
  font-weight: 800;
}
html[data-theme="light"] .sotay-topic-card__btn.is-due:hover {
  background: linear-gradient(135deg, #c7312f 0%, #a82929 100%);
  color: #ffffff;
  filter: none;
}

/* Empty state */
html[data-theme="light"] .sotay-empty {
  color: #5e6266;
}
html[data-theme="light"] .sotay-empty i { color: #d4a574; }
html[data-theme="light"] .sotay-empty h3 { color: #c7312f; font-weight: 800; }
html[data-theme="light"] .sotay-empty p { color: #5e6266; font-weight: 500; }

/* ═══════════════════════════════════════════════════════════════════
   S52 — LIGHT MODE: 4 chế độ luyện tập (Mode picker + Flashcard + Quiz + Typing + ImgQuiz)
   Đồng bộ terracotta + petrol + blush + slate palette
   Mỗi chế độ 1 màu chính trong họ earthy:
     FSRS    → terracotta brick #c7312f
     Quiz    → petrol blue #4087a6
     Typing  → honey caramel #d4a574
     ImgQ    → sage green #9ab87a
   ═══════════════════════════════════════════════════════════════════ */

/* ─── Mode picker title ─────────────────────────────────────── */
html[data-theme="light"] .sotay-mode-title {
  color: #c7312f;
  font-weight: 800;
}
html[data-theme="light"] .sotay-mode-subtitle {
  color: #5e6266;
  font-weight: 600;
}

/* ─── Mode cards base — bỏ MSD dark patterns, flat earthy ──── */
html[data-theme="light"] .sotay-mode-card {
  background: #ffffff;
  border: 2px solid #5e6266;
  color: #3a3d3f;
  box-shadow: 0 1px 4px rgba(58,61,63,0.08);
  padding: 24px 16px 50px;
  border-radius: 14px;
}
html[data-theme="light"] .sotay-mode-card::before {
  display: none;
}
html[data-theme="light"] .sotay-mode-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 18px rgba(58,61,63,0.18);
}
html[data-theme="light"] .sotay-mode-card:active {
  transform: translateY(1px);
}

/* FSRS — terracotta brick */
html[data-theme="light"] .sotay-mode-card[data-mode="fsrs"] {
  background: linear-gradient(160deg, #fbeae5 0%, #f3b6b6 100%);
  border-color: #c7312f;
}
html[data-theme="light"] .sotay-mode-card[data-mode="fsrs"]:hover {
  box-shadow: 0 6px 18px rgba(199,49,47,0.30);
}
html[data-theme="light"] .sotay-mode-card[data-mode="fsrs"] .sotay-mode-card__icon {
  background: linear-gradient(135deg, #c7312f 0%, #a82929 100%);
  color: #ffffff;
  border-color: rgba(199,49,47,0.40);
}

/* Quiz — petrol blue */
html[data-theme="light"] .sotay-mode-card[data-mode="quiz"] {
  background: linear-gradient(160deg, #e6eef4 0%, #b8d4e0 100%);
  border-color: #4087a6;
}
html[data-theme="light"] .sotay-mode-card[data-mode="quiz"]:hover {
  box-shadow: 0 6px 18px rgba(64,135,166,0.30);
}
html[data-theme="light"] .sotay-mode-card[data-mode="quiz"] .sotay-mode-card__icon {
  background: linear-gradient(135deg, #4087a6 0%, #2a5a73 100%);
  color: #ffffff;
  border-color: rgba(64,135,166,0.40);
}

/* Typing — honey caramel */
html[data-theme="light"] .sotay-mode-card[data-mode="typing"] {
  background: linear-gradient(160deg, #fdf2e0 0%, #e8c4b8 100%);
  border-color: #b8842f;
}
html[data-theme="light"] .sotay-mode-card[data-mode="typing"]:hover {
  box-shadow: 0 6px 18px rgba(212,165,116,0.40);
}
html[data-theme="light"] .sotay-mode-card[data-mode="typing"] .sotay-mode-card__icon {
  background: linear-gradient(135deg, #d4a574 0%, #b8842f 100%);
  color: #ffffff;
  border-color: rgba(184,132,47,0.40);
}

/* ImgQuiz — sage green */
html[data-theme="light"] .sotay-mode-card[data-mode="image-quiz"] {
  background: linear-gradient(160deg, #e9f0e0 0%, #c4d4ad 100%);
  border-color: #6b9a4d;
}
html[data-theme="light"] .sotay-mode-card[data-mode="image-quiz"]:hover {
  box-shadow: 0 6px 18px rgba(154,184,122,0.40);
}
html[data-theme="light"] .sotay-mode-card[data-mode="image-quiz"] .sotay-mode-card__icon {
  background: linear-gradient(135deg, #9ab87a 0%, #6b9a4d 100%);
  color: #ffffff;
  border-color: rgba(107,154,77,0.40);
}

/* Mode card text */
html[data-theme="light"] .sotay-mode-card__name {
  color: #3a3d3f;
  font-weight: 800;
  font-size: 1.1rem;
}
html[data-theme="light"] .sotay-mode-card__desc {
  color: #5e6266;
  font-weight: 600;
  font-size: 0.82rem;
}
html[data-theme="light"] .sotay-mode-card__badge {
  background: rgba(58,61,63,0.88);
  color: #ffffff;
  border-color: rgba(255,255,255,0.20);
  font-weight: 800;
  backdrop-filter: none;
}
html[data-theme="light"] .sotay-mode-card.is-disabled {
  filter: saturate(0.6);
}
html[data-theme="light"] .sotay-mode-card.is-disabled::after {
  background: #c7312f;
  color: #ffffff;
}

/* ═══════════════════════════════════════════════════════════════
   FLASHCARD FSRS — light mode redesign
   ═══════════════════════════════════════════════════════════════ */
html[data-theme="light"] .sotay-fc-meta {
  color: #5e6266;
}
html[data-theme="light"] .sotay-fc-meta__count {
  color: #c7312f;
  font-weight: 800;
}
html[data-theme="light"] .sotay-fc-progress-bar {
  background: #f3e0d8;
}
html[data-theme="light"] .sotay-fc-progress-bar__fill {
  background: linear-gradient(90deg, #d4a574, #c7312f);
}

/* Front + Back face — viền terracotta + accent top */
html[data-theme="light"] .sotay-fc-face,
html[data-theme="light"] .sotay-fc-face--back {
  background: #ffffff;
  border: 2px solid #5e6266;
  box-shadow: 0 2px 8px rgba(58,61,63,0.10);
}
html[data-theme="light"] .sotay-fc-face::before {
  background: linear-gradient(90deg, #c7312f, #d4a574, #c7312f);
  opacity: 1;
}
html[data-theme="light"] .sotay-fc-hanzi,
html[data-theme="light"] .sotay-fc-back-hanzi,
html[data-theme="light"] .sotay-fc-back-head .hanzi {
  color: #3a3d3f;
}
html[data-theme="light"] .sotay-fc-pinyin,
html[data-theme="light"] .sotay-fc-pinyin-hint,
html[data-theme="light"] .sotay-fc-back-head .pinyin {
  color: #c7312f;
  font-weight: 700;
}
html[data-theme="light"] .sotay-fc-hint-tap {
  color: #b8842f;
  font-weight: 700;
}
html[data-theme="light"] .sotay-fc-meaning,
html[data-theme="light"] .sotay-fc-back-head .meaning {
  color: #3a3d3f;
}

/* Section title (Ví dụ, Đặt câu, Sắp xếp...) */
html[data-theme="light"] .sotay-fc-section__title {
  color: #4087a6;
  font-weight: 800;
}
html[data-theme="light"] .sotay-fc-section {
  border-top-color: #e8c4b8;
}

/* Example */
html[data-theme="light"] .sotay-fc-example {
  background: rgba(232,196,184,0.18);
  border-color: #d4a574;
}
html[data-theme="light"] .sotay-fc-example__cn {
  color: #3a3d3f;
}
html[data-theme="light"] .sotay-fc-example__cn .ex-tts {
  color: #b8842f;
}
html[data-theme="light"] .sotay-fc-example__py {
  color: #4087a6;
}
html[data-theme="light"] .sotay-fc-example__vi {
  color: #5e6266;
}

/* Flip button — terracotta gradient flat */
html[data-theme="light"] .sotay-fc-flip-btn {
  background: linear-gradient(135deg, #c7312f 0%, #a82929 100%);
  color: #ffffff;
  box-shadow: 0 3px 10px rgba(199,49,47,0.30);
}
html[data-theme="light"] .sotay-fc-flip-btn:hover {
  filter: brightness(1.06);
  box-shadow: 0 4px 14px rgba(199,49,47,0.40);
}

/* SRS buttons (Quên/Khó/Tốt) — light variants */
html[data-theme="light"] .sotay-fc-srs-btn {
  background: #ffffff;
  border: 2px solid #5e6266;
  color: #3a3d3f;
  font-weight: 700;
}
html[data-theme="light"] .sotay-fc-srs-btn__interval {
  color: #5e6266;
  font-weight: 600;
}
html[data-theme="light"] .sotay-fc-srs-btn--again {
  background: rgba(243,182,182,0.40);
  border-color: #c7312f;
  color: #c7312f;
}
html[data-theme="light"] .sotay-fc-srs-btn--again:hover {
  background: #c7312f;
  color: #ffffff;
}
html[data-theme="light"] .sotay-fc-srs-btn--again:hover .sotay-fc-srs-btn__interval {
  color: rgba(255,255,255,0.85);
}
html[data-theme="light"] .sotay-fc-srs-btn--hard {
  background: rgba(253,235,210,0.55);
  border-color: #b8842f;
  color: #b8842f;
}
html[data-theme="light"] .sotay-fc-srs-btn--hard:hover {
  background: #d4a574;
  color: #ffffff;
}
html[data-theme="light"] .sotay-fc-srs-btn--hard:hover .sotay-fc-srs-btn__interval {
  color: rgba(255,255,255,0.85);
}
html[data-theme="light"] .sotay-fc-srs-btn--good {
  background: rgba(196,212,173,0.50);
  border-color: #6b9a4d;
  color: #6b9a4d;
}
html[data-theme="light"] .sotay-fc-srs-btn--good:hover {
  background: #6b9a4d;
  color: #ffffff;
}
html[data-theme="light"] .sotay-fc-srs-btn--good:hover .sotay-fc-srs-btn__interval {
  color: rgba(255,255,255,0.85);
}

/* Arrange tokens (sắp xếp từ) */
html[data-theme="light"] .sotay-fc-arrange {
  background: rgba(232,196,184,0.14);
  border-color: #d4a574;
}
html[data-theme="light"] .sotay-fc-arrange__vi {
  color: #4087a6;
  font-weight: 700;
}
html[data-theme="light"] .sotay-fc-arrange__pool,
html[data-theme="light"] .sotay-fc-arrange__target {
  background: #ffffff;
  border-color: #5e6266;
}
html[data-theme="light"] .sotay-fc-token {
  background: #ffffff;
  border: 1.5px solid #5e6266;
  color: #3a3d3f;
  font-weight: 600;
}
html[data-theme="light"] .sotay-fc-token:hover {
  background: rgba(232,196,184,0.40);
  border-color: #c7312f;
}
html[data-theme="light"] .sotay-fc-token.is-correct {
  background: rgba(154,184,122,0.30);
  border-color: #6b9a4d;
  color: #4a6b30;
}
html[data-theme="light"] .sotay-fc-token.is-wrong {
  background: rgba(243,182,182,0.40);
  border-color: #c7312f;
  color: #c7312f;
}

/* Check + Reset + Hint buttons trong arrange */
html[data-theme="light"] .sotay-fc-arrange__check,
html[data-theme="light"] .sotay-fc-arrange__reset {
  background: #ffffff;
  border: 1.5px solid #5e6266;
  color: #3a3d3f;
  font-weight: 700;
}
html[data-theme="light"] .sotay-fc-arrange__check:hover {
  background: rgba(154,184,122,0.30);
  border-color: #6b9a4d;
  color: #4a6b30;
}
html[data-theme="light"] .sotay-fc-arrange__reset:hover {
  background: rgba(232,196,184,0.40);
}
html[data-theme="light"] .sotay-fc-arrange__hint {
  color: #b8842f;
  border-color: #d4a574;
}
html[data-theme="light"] .sotay-fc-arrange__hint:hover {
  background: rgba(212,165,116,0.18);
  border-color: #b8842f;
  color: #b8842f;
}
html[data-theme="light"] .sotay-fc-arrange__feedback.is-correct { color: #6b9a4d; }
html[data-theme="light"] .sotay-fc-arrange__feedback.is-wrong   { color: #c7312f; }
html[data-theme="light"] .sotay-fc-arrange__feedback.is-hint    { color: #b8842f; }

/* Cloze input */
html[data-theme="light"] .sotay-fc-cloze__sentence {
  color: #3a3d3f;
}
html[data-theme="light"] .sotay-fc-cloze__input {
  background: #ffffff !important;
  border: 2px solid #5e6266 !important;
  color: #3a3d3f !important;
}
html[data-theme="light"] .sotay-fc-cloze__input:focus {
  border-color: #c7312f !important;
}

/* Back toolbar buttons */
html[data-theme="light"] .sotay-fc-back-toolbar button {
  background: #ffffff;
  border: 1.5px solid #5e6266;
  color: #5e6266;
}
html[data-theme="light"] .sotay-fc-back-toolbar button:hover {
  background: rgba(232,196,184,0.30);
  border-color: #c7312f;
  color: #c7312f;
}
html[data-theme="light"] .sotay-fc-back-toolbar .fc-tts-btn.is-playing {
  color: #c7312f;
  border-color: #c7312f;
}

/* Image thumbnail trên front card */
html[data-theme="light"] .sotay-fc-front-img {
  box-shadow: 0 4px 14px rgba(58,61,63,0.18);
  border-color: #5e6266;
}

/* ═══════════════════════════════════════════════════════════════
   QUIZ MCQ — A/B/C/D options
   ═══════════════════════════════════════════════════════════════ */
html[data-theme="light"] .sotay-quiz-stem {
  background: #ffffff;
  border: 2px solid #5e6266;
  box-shadow: 0 2px 8px rgba(58,61,63,0.10);
}
html[data-theme="light"] .sotay-quiz-stem::before {
  background: linear-gradient(90deg, #c7312f, #d4a574, #c7312f);
  opacity: 1;
}
html[data-theme="light"] .sotay-quiz-stem__hanzi {
  color: #3a3d3f;
}
html[data-theme="light"] .sotay-quiz-stem__pinyin {
  color: #c7312f;
  font-weight: 700;
}
html[data-theme="light"] .sotay-quiz-option {
  background: #ffffff;
  border: 1.5px solid #5e6266;
  color: #3a3d3f;
  font-weight: 600;
}
html[data-theme="light"] .sotay-quiz-option__letter {
  background: linear-gradient(135deg, #d4a574 0%, #b8842f 100%);
  color: #ffffff;
  font-weight: 800;
  box-shadow: 0 1px 3px rgba(184,132,47,0.30);
}
html[data-theme="light"] .sotay-quiz-option:hover:not(:disabled) {
  background: rgba(232,196,184,0.30);
  border-color: #c7312f;
}
html[data-theme="light"] .sotay-quiz-option.is-correct {
  background: rgba(154,184,122,0.30);
  border-color: #6b9a4d;
  color: #4a6b30;
}
html[data-theme="light"] .sotay-quiz-option.is-correct .sotay-quiz-option__letter {
  background: linear-gradient(135deg, #9ab87a 0%, #6b9a4d 100%);
  color: #ffffff;
}
html[data-theme="light"] .sotay-quiz-option.is-wrong {
  background: rgba(243,182,182,0.40);
  border-color: #c7312f;
  color: #c7312f;
}
html[data-theme="light"] .sotay-quiz-option.is-wrong .sotay-quiz-option__letter {
  background: linear-gradient(135deg, #c7312f 0%, #a82929 100%);
  color: #ffffff;
}
html[data-theme="light"] .sotay-quiz-feedback {
  color: #5e6266;
  font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════════
   TYPING — Gõ từ
   ═══════════════════════════════════════════════════════════════ */
html[data-theme="light"] .sotay-typing-prompt {
  background: #ffffff;
  border: 2px solid #5e6266;
  box-shadow: 0 2px 8px rgba(58,61,63,0.10);
}
html[data-theme="light"] .sotay-typing-prompt__label {
  color: #5e6266;
  font-weight: 800;
}
html[data-theme="light"] .sotay-typing-prompt__meaning {
  color: #3a3d3f;
  font-weight: 700;
}
html[data-theme="light"] .sotay-typing-prompt__hint {
  color: #c7312f;
  font-weight: 700;
}
html[data-theme="light"] .sotay-typing-audio-btn {
  background: #ffffff;
  border: 1.5px solid #5e6266;
  color: #4087a6;
  font-weight: 700;
}
html[data-theme="light"] .sotay-typing-audio-btn:hover {
  background: rgba(64,135,166,0.12);
  border-color: #4087a6;
  color: #2a5a73;
}
html[data-theme="light"] .sotay-typing-hint-btn {
  background: rgba(212,165,116,0.18);
  border: 1.5px solid #d4a574;
  color: #b8842f;
  font-weight: 700;
}
html[data-theme="light"] .sotay-typing-hint-btn:hover {
  background: rgba(212,165,116,0.32);
  border-color: #b8842f;
}
html[data-theme="light"] .sotay-typing-input {
  background: #ffffff !important;
  border: 2px solid #5e6266 !important;
  color: #3a3d3f !important;
  font-weight: 700;
}
html[data-theme="light"] .sotay-typing-input::placeholder {
  color: #8b8d8f;
}
html[data-theme="light"] .sotay-typing-input:focus {
  border-color: #c7312f !important;
  box-shadow: 0 0 0 3px rgba(199,49,47,0.12);
}

/* Feedback boxes — flat */
html[data-theme="light"] .sotay-typing-feedback--correct {
  background: linear-gradient(135deg, #9ab87a 0%, #6b9a4d 100%);
  box-shadow: 0 2px 8px rgba(107,154,77,0.30);
}
html[data-theme="light"] .sotay-typing-feedback--wrong {
  background: linear-gradient(135deg, #c7312f 0%, #a82929 100%);
  box-shadow: 0 2px 8px rgba(199,49,47,0.30);
}

/* ═══════════════════════════════════════════════════════════════
   SESSION SUMMARY + AI DETAIL + LOADER
   ═══════════════════════════════════════════════════════════════ */
html[data-theme="light"] .sotay-summary,
html[data-theme="light"] .sotay-ai-detail-card {
  background: #ffffff;
  border: 2px solid #5e6266;
  box-shadow: 0 4px 14px rgba(58,61,63,0.12);
}
html[data-theme="light"] .sotay-summary__icon,
html[data-theme="light"] .sotay-ai-detail-card__icon {
  color: #c7312f;
}
html[data-theme="light"] .sotay-summary__title {
  color: #c7312f;
  font-weight: 800;
}
html[data-theme="light"] .sotay-ai-detail-card__title {
  color: #3a3d3f;
  font-weight: 800;
}
html[data-theme="light"] .sotay-summary__subtitle,
html[data-theme="light"] .sotay-ai-detail-card__desc {
  color: #5e6266;
  font-weight: 600;
}
html[data-theme="light"] .sotay-summary__item {
  background: rgba(232,196,184,0.20);
  border-color: #d4a574;
}
html[data-theme="light"] .sotay-summary__item-label {
  color: #5e6266;
  font-weight: 800;
}
html[data-theme="light"] .sotay-summary__item-value {
  color: #c7312f;
}
html[data-theme="light"] .sotay-ai-detail-card__stat-val {
  color: #c7312f;
}
html[data-theme="light"] .sotay-ai-detail-card__stat-lbl {
  color: #5e6266;
  font-weight: 700;
}

/* Loader */
html[data-theme="light"] .sotay-loader { color: #5e6266; }
html[data-theme="light"] .sotay-spinner {
  border-color: #f3e0d8;
  border-top-color: #c7312f;
}

/* Toast — light bg */
html[data-theme="light"] .sotay-toast {
  background: rgba(255,255,255,0.96);
  border-color: #5e6266;
  color: #3a3d3f;
  font-weight: 700;
  box-shadow: 0 6px 20px rgba(58,61,63,0.18);
}

/* ═══════════════════════════════════════════════════════════════════
   ĐOÁN HÌNH (Image Quiz) — light mode override
   CSS được inject từ js/sotay-image-quiz.js, cells có inline gradient TỐI.
   Dùng !important để win inline style.
   ═══════════════════════════════════════════════════════════════════ */

/* Progress bar */
html[data-theme="light"] .sotay-iq-bar {
  background: #f3e0d8;
}
html[data-theme="light"] .sotay-iq-bar-fill {
  background: linear-gradient(90deg, #d4a574, #c7312f);
}

/* Hán tự + pinyin + hint */
html[data-theme="light"] .sotay-iq-char {
  color: #3a3d3f;
  text-shadow: 0 1px 3px rgba(199,49,47,0.18);
}
html[data-theme="light"] .sotay-iq-pinyin {
  color: #c7312f;
  font-weight: 700;
}
html[data-theme="light"] .sotay-iq-hint {
  color: #5e6266;
  font-weight: 600;
}

/* Speaker button */
html[data-theme="light"] .iq-speak-btn {
  background: #ffffff;
  border: 1.5px solid #5e6266;
  color: #4087a6;
}
html[data-theme="light"] .iq-speak-btn:hover {
  background: rgba(64,135,166,0.12);
  border-color: #4087a6;
  color: #2a5a73;
}

/* 4 cells — override inline dark gradients với 4 màu earthy khác nhau */
html[data-theme="light"] .sotay-iq-cell {
  border-width: 2.5px !important;
  border-color: #5e6266 !important;
  box-shadow: 0 2px 6px rgba(58,61,63,0.10) !important;
}
html[data-theme="light"] .sotay-iq-cell:nth-child(1),
html[data-theme="light"] .sotay-iq-cell[data-idx="0"] {
  background: linear-gradient(135deg, #fbeae5 0%, #f3b6b6 100%) !important;
  border-color: #c7312f !important;
}
html[data-theme="light"] .sotay-iq-cell:nth-child(2),
html[data-theme="light"] .sotay-iq-cell[data-idx="1"] {
  background: linear-gradient(135deg, #e6eef4 0%, #b8d4e0 100%) !important;
  border-color: #4087a6 !important;
}
html[data-theme="light"] .sotay-iq-cell:nth-child(3),
html[data-theme="light"] .sotay-iq-cell[data-idx="2"] {
  background: linear-gradient(135deg, #fdf2e0 0%, #e8c4b8 100%) !important;
  border-color: #b8842f !important;
}
html[data-theme="light"] .sotay-iq-cell:nth-child(4),
html[data-theme="light"] .sotay-iq-cell[data-idx="3"] {
  background: linear-gradient(135deg, #e9f0e0 0%, #c4d4ad 100%) !important;
  border-color: #6b9a4d !important;
}

/* Hover state */
html[data-theme="light"] .sotay-iq-cell:hover:not(.iq-done) {
  transform: translateY(-3px);
  box-shadow: 0 6px 18px rgba(58,61,63,0.20) !important;
  filter: brightness(1.04);
}

/* Correct / Wrong states — preserve from JS rules but with earthy tone */
html[data-theme="light"] .sotay-iq-cell.iq-correct {
  border-color: #6b9a4d !important;
  box-shadow: 0 0 0 3px rgba(107,154,77,0.30), 0 4px 14px rgba(58,61,63,0.15) !important;
}
html[data-theme="light"] .sotay-iq-cell.iq-correct::after {
  color: #6b9a4d;
  text-shadow: 0 1px 3px rgba(255,255,255,0.8);
}
html[data-theme="light"] .sotay-iq-cell.iq-wrong {
  border-color: #c7312f !important;
  box-shadow: 0 0 0 3px rgba(199,49,47,0.30) !important;
}
html[data-theme="light"] .sotay-iq-cell.iq-wrong::after {
  color: #c7312f;
  text-shadow: 0 1px 3px rgba(255,255,255,0.8);
}

/* Char fallback (no emoji) */
html[data-theme="light"] .iq-char-fallback {
  color: rgba(58,61,63,0.65);
  text-shadow: 0 1px 2px rgba(255,255,255,0.5);
}

/* Label dưới cell (khi done) */
html[data-theme="light"] .iq-label {
  background: linear-gradient(0deg, rgba(58,61,63,0.92) 0%, transparent 100%);
  color: #ffffff;
  font-weight: 700;
}

/* Feedback */
html[data-theme="light"] .sotay-iq-feedback.iq-fb-ok  { color: #6b9a4d; }
html[data-theme="light"] .sotay-iq-feedback.iq-fb-bad { color: #c7312f; }
html[data-theme="light"] .iq-fb-explain {
  color: #5e6266;
}
html[data-theme="light"] .iq-fb-reason {
  color: #b8842f;
}

/* Summary */
html[data-theme="light"] .sotay-iq-summary-score {
  color: #c7312f;
  font-weight: 800;
}
html[data-theme="light"] .sotay-iq-summary-sub {
  color: #5e6266;
  font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════════════
   v13.31 — LIGHT MODE: Flashcard AI Grade Result + Compose Input
   Founder feedback: bố cục đổ màu nổi bật, text đen, font lớn.
   Scope: html[data-theme="light"] — dark mode KHÔNG đụng.
   ═══════════════════════════════════════════════════════════════════ */

/* Textarea đặt câu — light: cream bg + dark text, font lớn */
html[data-theme="light"] .sotay-fc-compose__input {
  background: #fdf6f3 !important;
  border: 2px solid #d4a574 !important;
  color: #1a1a1a !important;
  font-weight: 500;
  font-size: 1.12rem !important;
  box-shadow: inset 0 1px 3px rgba(58,61,63,0.08);
}
html[data-theme="light"] .sotay-fc-compose__input::placeholder {
  color: #92670a;
  font-weight: 400;
}
html[data-theme="light"] .sotay-fc-compose__input:focus {
  border-color: #c7312f !important;
  box-shadow: 0 0 0 3px rgba(199,49,47,0.15), inset 0 1px 3px rgba(58,61,63,0.08);
}

/* Grade container — light: white solid + earthy border + subtle shadow */
html[data-theme="light"] .sotay-fc-grade {
  background: #ffffff !important;
  border: 2px solid #e8c4b8 !important;
  box-shadow: 0 4px 16px rgba(58,61,63,0.10);
  padding: 18px;
}

/* Score chính: brick red đậm, text đen kèm */
html[data-theme="light"] .sotay-fc-grade__score {
  color: #c7312f !important;
  font-weight: 900 !important;
  text-shadow: 0 1px 2px rgba(199,49,47,0.15);
}
html[data-theme="light"] .sotay-fc-grade__score span {
  color: #5e6266 !important;
  font-weight: 600 !important;
}

/* Badges */
html[data-theme="light"] .sotay-fc-grade__badge.is-excellent {
  background: linear-gradient(135deg, #9ab87a, #6b9a4d) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 6px rgba(107,154,77,0.30);
}
html[data-theme="light"] .sotay-fc-grade__badge.is-good {
  background: linear-gradient(135deg, #4087a6, #2E6B7A) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 6px rgba(46,107,122,0.30);
}
html[data-theme="light"] .sotay-fc-grade__badge.is-ok {
  background: linear-gradient(135deg, #d4a574, #b8842f) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 6px rgba(184,132,47,0.30);
}
html[data-theme="light"] .sotay-fc-grade__badge.is-poor {
  background: linear-gradient(135deg, #c7312f, #a82929) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 6px rgba(199,49,47,0.30);
}

/* 4 sub-scores — light: solid tinted bg, dark text, semantic border */
html[data-theme="light"] .sotay-fc-grade__criterion {
  background: #ffffff !important;
  border: 1.5px solid #e8c4b8 !important;
  border-left-width: 4px !important;
  box-shadow: 0 2px 8px rgba(58,61,63,0.06);
}
html[data-theme="light"] .sotay-fc-grade__criterion--grammar {
  border-left-color: #3b82f6 !important;
  background: linear-gradient(135deg, #eff6ff 0%, #ffffff 100%) !important;
}
html[data-theme="light"] .sotay-fc-grade__criterion--meaning {
  border-left-color: #10b981 !important;
  background: linear-gradient(135deg, #ecfdf5 0%, #ffffff 100%) !important;
}
html[data-theme="light"] .sotay-fc-grade__criterion--naturalness {
  border-left-color: #f59e0b !important;
  background: linear-gradient(135deg, #fffbeb 0%, #ffffff 100%) !important;
}
html[data-theme="light"] .sotay-fc-grade__criterion--context {
  border-left-color: #8b5cf6 !important;
  background: linear-gradient(135deg, #f5f3ff 0%, #ffffff 100%) !important;
}

/* Labels + values — đen rõ, font đậm */
html[data-theme="light"] .sotay-fc-grade__criterion-label {
  color: #5e6266 !important;
  font-weight: 700 !important;
  font-size: 0.92rem !important;
}
html[data-theme="light"] .sotay-fc-grade__criterion--grammar     .sotay-fc-grade__criterion-label { color: #1e40af !important; }
html[data-theme="light"] .sotay-fc-grade__criterion--meaning     .sotay-fc-grade__criterion-label { color: #047857 !important; }
html[data-theme="light"] .sotay-fc-grade__criterion--naturalness .sotay-fc-grade__criterion-label { color: #b45309 !important; }
html[data-theme="light"] .sotay-fc-grade__criterion--context     .sotay-fc-grade__criterion-label { color: #6d28d9 !important; }

html[data-theme="light"] .sotay-fc-grade__criterion-val {
  color: #1a1a1a !important;
  font-weight: 900 !important;
  font-size: 1.35rem !important;
}

/* Feedback / Correction / Suggestion — light theme: bg tinted + đen text */
html[data-theme="light"] .sotay-fc-grade__feedback {
  background: linear-gradient(135deg, #fdf6f3 0%, #fbeae5 100%) !important;
  border-left: 4px solid #c7312f !important;
  color: #1a1a1a !important;
  font-weight: 500;
}
html[data-theme="light"] .sotay-fc-grade__correction {
  background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%) !important;
  border-left: 4px solid #dc2626 !important;
  color: #7f1d1d !important;
  font-weight: 500;
}
html[data-theme="light"] .sotay-fc-grade__correction strong { color: #b91c1c !important; }
html[data-theme="light"] .sotay-fc-grade__suggestion {
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%) !important;
  border-left: 4px solid #2563eb !important;
  color: #1e3a8a !important;
  font-weight: 500;
}
html[data-theme="light"] .sotay-fc-grade__suggestion strong { color: #1e40af !important; }