/* ============================================================
   WORDS.EXPERT — Candy theme patch
   Drop-in stylesheet. Include AFTER the previous patches.
   Same teal/green palette, but soft gradients, big rounded
   corners, soft-glow shadows, gradient hero. No HTML/JS edits.
   ============================================================ */

/* ---------- 1. Refine palette ---------- */
:root {
  --bg:        #F3F7ED;
  --bg2:       #FFFFFF;
  --bg3:       #E8EFE0;

  --text:      #0F2A24;
  --text2:     #3F574F;
  --text3:     #86948B;

  --accent:    #0FA98B;
  --accent2:   #1A6562;
  --accent-glow: rgba(15,169,139,0.18);

  --mint:      #A7E8C4;
  --sage:      #C8E0CC;
  --lemon:     #E8F19B;
  --butter:    #FFE48C;
  --sky:       #A8DDE4;
  --blue:      #5B95E8;
  --red:       #E5483D;

  --shadow:    0 8px 24px rgba(15,42,36,0.06);
  --shadow-lg: 0 12px 40px rgba(15,42,36,0.10);

  --radius:    20px;
  --radius-sm: 14px;
  --radius-lg: 20px;
}

/* ---------- 2. Body — soft tinted blobs ---------- */
body {
  background: var(--bg);
  position: relative;
  overflow-x: hidden;
}
body::before, body::after {
  content: '';
  position: fixed;
  border-radius: 50%;
  filter: blur(60px);
  pointer-events: none;
  z-index: 0;
}
body::before {
  width: 360px; height: 360px;
  background: var(--sage);
  top: -120px; right: -80px;
  opacity: 0.45;
}
body::after {
  width: 320px; height: 320px;
  background: var(--lemon);
  bottom: -120px; left: -100px;
  opacity: 0.40;
}
.main { position: relative; z-index: 1; }
.nav  { position: relative; z-index: 10; }

/* ---------- 3. Nav — pill container ---------- */
.nav {
  background: transparent;
  border-bottom: 0;
  box-shadow: none;
  padding: 0;
}
.nav-center {
  background: #FFFFFF;
  border-radius: 999px;
  padding: 5px;
  box-shadow: 0 4px 14px rgba(15,42,36,0.06);
  gap: 0;
}
.nav-btn {
  border-radius: 999px;
  padding: 8px 18px;
  font-weight: 600;
}
.nav-btn.active {
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: #FFFFFF;
  box-shadow: 0 4px 12px rgba(15,169,139,0.30);
}

/* ---------- 4. Buttons ---------- */
.btn { border-radius: 999px; font-weight: 700; }
.btn-large { padding: 16px 28px; }

.btn-primary,
.btn-primary:focus,
.btn-primary:focus-visible,
.btn-primary:active {
  background: var(--red);
  color: #fff;
  outline: none !important;
  box-shadow: 0 8px 24px rgba(229,72,61,0.35) !important;
}
.btn-primary:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
  outline: none !important;
  box-shadow: 0 10px 28px rgba(229,72,61,0.45) !important;
}

.btn-secondary {
  background: #FFFFFF;
  border: 0;
  color: var(--text);
  box-shadow: 0 4px 14px rgba(15,42,36,0.08);
  border-radius: 999px;
}
.btn-secondary:hover { color: var(--accent); }

.btn-ghost { color: var(--text2); border-radius: 999px; }
.btn-ghost:hover { background: var(--bg3); color: var(--text); }

.nav-add-btn {
  border-radius: 999px;
  background: var(--red);
  color: #fff;
  box-shadow: 0 4px 14px rgba(229,72,61,0.30);
}

/* ---------- 5. Dashboard greeting ---------- */
.dash-greeting h1 {
  font-weight: 800;
  letter-spacing: -2px;
  line-height: 1;
  font-size: clamp(40px, 5vw, 72px);
}

/* ---------- 6. Progress cards ---------- */
.dash-prog-card {
  background: #FFFFFF;
  border: 0;
  border-radius: var(--radius);
  padding: 24px 28px;
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
}

.dash-prog-val {
  font-weight: 800;
  font-size: 56px;
  letter-spacing: -2.5px;
  line-height: 1;
}

.dash-prog-bar {
  height: 10px;
  background: var(--bg3);
  border-radius: 999px;
  overflow: hidden;
}
.dash-prog-fill { border-radius: 999px; }
.dash-prog-fill-green  { background: linear-gradient(90deg, var(--accent), var(--accent2)); }
.dash-prog-fill-blue   { background: linear-gradient(90deg, var(--sky), var(--blue)); }
.dash-prog-fill-accent { background: linear-gradient(90deg, var(--butter), var(--lemon)); }

/* ---------- 7. Activity section ---------- */
.dash-activity-section {
  background: #FFFFFF;
  border: 0;
  border-radius: var(--radius);
  padding: 28px 32px;
  box-shadow: var(--shadow);
}

.dash-activity-header {
  text-transform: none;
  letter-spacing: -0.005em;
  font-weight: 700;
  color: var(--text);
  font-size: 14px;
}

.dash-streak-badge {
  background: var(--accent-glow);
  color: var(--accent);
  border-radius: 999px;
  padding: 5px 14px;
  font-weight: 700;
}

.heatmap-day, .heat-0, .heat-1, .heat-2, .heat-3, .heat-4, .heat-5 { border-radius: 5px !important; }
.heat-0 { background: #DEE7D2 !important; }
.heat-1 { background: rgba(15,169,139,0.20) !important; }
.heat-2 { background: rgba(15,169,139,0.42) !important; }
.heat-3 { background: rgba(15,169,139,0.65) !important; }
.heat-4 { background: rgba(15,169,139,0.85) !important; }
.heat-5 { background: var(--accent) !important; }

/* ---------- 8. Word of the day — teal gradient hero ---------- */
#dash-wotd {
  background: linear-gradient(135deg, var(--accent), var(--accent2)) !important;
  border: 0 !important;
  border-radius: var(--radius) !important;
  padding: 36px 32px !important;
  color: #FFFFFF !important;
  box-shadow: 0 12px 40px rgba(15,169,139,0.30) !important;
  position: relative;
  overflow: hidden;
}
#dash-wotd::before {
  content: '';
  position: absolute;
  right: -60px; bottom: -60px;
  width: 220px; height: 220px;
  border-radius: 50%;
  background: rgba(255,255,255,0.10);
  pointer-events: none;
}
#dash-wotd::after {
  content: '';
  position: absolute;
  right: -50px; bottom: -50px;
  width: 220px; height: 220px;
  border-radius: 50%;
  border: 2px dashed rgba(255,255,255,0.25);
  opacity: 0.30;
  pointer-events: none;
}

#dash-wotd .wotd-quote-label { color: var(--lemon) !important; }
#dash-wotd .wotd-quote-icon { color: var(--lemon); opacity: 0.75; }
#dash-wotd .wotd-quote-text { color: #FFFFFF !important; }
#dash-wotd .wotd-quote-author { color: rgba(255,255,255,0.8) !important; }

/* ---------- 9. Study / learn card ---------- */
.study-card, .learn-card, .examples-sidebar {
  background: #FFFFFF;
  border: 0;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
}
.study-card::before, .study-card::after { display: none !important; }

.card-mode-badge {
  background: var(--accent-glow);
  color: var(--accent);
  border-radius: 999px;
}

.card-word { font-weight: 800; letter-spacing: -1px; }
.card-translation { color: var(--accent); font-weight: 700; }
.card-example {
  background: var(--bg3);
  border: 0;
  border-radius: var(--radius-sm);
}

/* ---------- 9b. Quick action row ---------- */
.learn-quick-actions {
  justify-content: center;
  gap: 12px;
}
.learn-know-btn {
  border-radius: 999px !important;
  box-shadow: 0 8px 20px rgba(15,169,139,0.30) !important;
}
.learn-postpone-btn {
  border-radius: 999px !important;
  box-shadow: 0 8px 20px rgba(15,42,36,0.08) !important;
}

/* ---------- 10. Letter picker ---------- */
.letter-slot {
  border-radius: var(--radius-sm);
  background: #FFFFFF;
  border: 2px solid var(--border);
}
.letter-slot.active {
  background: #FFFFFF;
}
.letter-slot.filled {
  background: var(--accent);
  border-color: var(--accent);
  color: #FFFFFF;
  box-shadow: 0 2px 8px rgba(15,169,139,0.15);
}
.letter-slot.correct {
  background: #fff;
  border-color: transparent;
  color: var(--text);
}
.letter-slot.incorrect {
  background: rgba(229,72,61,0.10);
  border-color: var(--red);
  color: var(--red);
}

.letter-tile {
  border-radius: var(--radius-sm);
  background: #FFFFFF;
  border: 0;
  box-shadow: 0 2px 8px rgba(15,42,36,0.08);
}
.letter-tile:hover {
  background: var(--accent-glow);
  box-shadow: 0 4px 12px rgba(15,169,139,0.20);
  transform: translateY(-1px);
}

/* ---------- 11. Rating buttons ---------- */
.rating-btn { border-radius: 999px; font-weight: 700; box-shadow: 0 6px 18px rgba(15,42,36,0.10); }
.rating-btn:hover { transform: translateY(-2px); }
.rating-btn.again { background: var(--red); }
.rating-btn.hard  { background: linear-gradient(135deg, var(--butter), #D4A03A); color: var(--text); }
.rating-btn.good  { background: linear-gradient(135deg, var(--accent), var(--accent2)); }
.rating-btn.easy  { background: linear-gradient(135deg, var(--sky), var(--blue)); }

/* ---------- 12. Progress bar ---------- */
.progress-bar  { height: 10px; border-radius: 999px; background: var(--bg3); border: 0; }
.progress-fill { background: linear-gradient(90deg, var(--accent), var(--accent2)); border-radius: 999px; }

/* ---------- 13. Typing input ---------- */
.typing-input {
  background: #FFFFFF;
  border-radius: var(--radius-sm);
  border-width: 2px;
}
.typing-input:focus { box-shadow: 0 0 0 4px var(--accent-glow); }

/* ---------- 14. Multiple choice ---------- */
.choice-btn {
  background: #FFFFFF;
  border: 0;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.choice-btn:hover:not(:disabled) {
  box-shadow: 0 8px 24px rgba(15,169,139,0.18);
  transform: translateY(-2px);
}

/* ---------- 15. Listen button ---------- */
.listen-btn {
  background: linear-gradient(135deg, var(--accent), var(--accent2)) !important;
  box-shadow: 0 8px 24px rgba(15,169,139,0.40) !important;
  color: #fff !important;
}

/* ---------- 16. Results ---------- */
.result-item {
  background: #FFFFFF;
  border: 0;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 28px 20px;
}
.result-item.correct { border-top: 4px solid var(--accent); }
.result-item.wrong   { border-top: 4px solid var(--red); }
.result-number { font-weight: 800; font-size: 44px; letter-spacing: -1.5px; }

/* ---------- 17. Dictionary ---------- */
.page-title, .dictionary-header h1 {
  font-weight: 800 !important;
  letter-spacing: -2px;
  font-size: 48px;
  font-style: normal;
}

.input, .select {
  background: #FFFFFF;
  border-radius: 999px;
  border: 0;
  padding: 12px 18px;
  box-shadow: 0 2px 8px rgba(15,42,36,0.05);
  font-weight: 500;
}
.input:focus, .select:focus {
  box-shadow: 0 0 0 4px var(--accent-glow);
  background: #FFFFFF;
}

.word-item {
  background: #FFFFFF;
  border: 0;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.word-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(15,42,36,0.10);
}
.word-item.expanded {
  box-shadow: 0 12px 32px rgba(15,42,36,0.10);
}

.word-item-detail {
  background: #F0F6FF;
  border-top: 0;
  border-radius: 0 0 var(--radius) var(--radius);
}

.word-tag, .pos-chip {
  background: var(--bg3) !important;
  color: var(--text2) !important;
  border: 0 !important;
  border-radius: 999px;
  font-weight: 600;
}
.pos-chip {
  background: var(--accent-glow) !important;
  color: var(--accent) !important;
}

.level-new      { background: rgba(15,169,139,0.14); color: var(--accent); }
.level-learning { background: rgba(217,162,59,0.18); color: #B27D1F; }
.level-review   { background: rgba(91,149,232,0.18); color: var(--blue); }
.level-mature   { background: linear-gradient(135deg, var(--accent), var(--accent2)); color: #fff; }

.action-btn {
  border-radius: 50%;
  background: var(--bg3);
  border: 0;
  width: 36px; height: 36px;
}
.action-btn:hover { background: var(--accent); color: #fff; }

.row-speak-btn, .card-speak-btn, .word-audio-btn {
  background: #FFFFFF;
  border: 0;
  box-shadow: 0 4px 12px rgba(15,42,36,0.08);
  color: var(--accent);
}
.row-speak-btn:hover, .card-speak-btn:hover, .word-audio-btn:hover {
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: #fff;
  box-shadow: 0 6px 18px rgba(15,169,139,0.40);
}

/* ---------- 18. Stats ---------- */
.stats-tile {
  background: #FFFFFF;
  border: 0;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 28px 20px;
}
.stats-tile-value { font-weight: 800; font-size: 38px; letter-spacing: -1.5px; }

.stats-section {
  background: #FFFFFF;
  border: 0;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 28px;
}

.stats-section-title {
  text-transform: none;
  letter-spacing: -0.005em;
  font-weight: 700;
  color: var(--text);
  font-size: 14px;
}

.stats-word-row {
  background: #F0F6FF;
  border: 0;
  border-radius: var(--radius-sm);
}

.level-bar-wrap { background: var(--bg3); border: 0; border-radius: 999px; }
.level-bar      { border-radius: 999px; }
.level-bar.new      { background: linear-gradient(90deg, var(--accent), var(--accent2)); }
.level-bar.learning { background: linear-gradient(90deg, var(--butter), #D4A03A); }
.level-bar.review   { background: linear-gradient(90deg, var(--sky), var(--blue)); }
.level-bar.mature   { background: linear-gradient(90deg, var(--accent2), #0A4A47); }

/* ---------- 19. Modals ---------- */
.modal-content {
  background: #FFFFFF;
  border: 0;
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 60px rgba(15,42,36,0.20);
}

/* ---------- 20. Auth card ---------- */
.auth-card {
  background: #FFFFFF;
  border: 0;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

/* ---------- 21. Logo ---------- */
.logo-words, .logo-expert { font-weight: 800; color: var(--text); letter-spacing: -0.025em; }

.nav-logo-text {
  display: inline-flex !important;
  align-items: center !important;
}

.auth-logo {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.logo-dot {
  color: var(--text);
  font-weight: 800;
}

/* ---------- 22. Scrollbar ---------- */
* { scrollbar-width: thin; scrollbar-color: var(--bg3) transparent; }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--bg3); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--text3); }

/* ---------- 23. Autofill ---------- */
.autofill-field-wrap { position: relative; }
.autofill-field-wrap .input { width: 100%; }

.autofill-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  min-height: 20px;
}

.autofill-status {
  font-size: 12px;
  font-weight: 600;
  flex: 1;
}
.autofill-status.loading { color: var(--text3); }
.autofill-status.ok     { color: var(--accent); }
.autofill-status.err    { color: var(--red); }
.autofill-status.nokey  { color: var(--yellow); cursor: pointer; }

.autofill-key-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 14px;
  opacity: 0.4;
  padding: 2px 4px;
  border-radius: 6px;
  transition: opacity 0.15s;
}
.autofill-key-btn:hover { opacity: 1; background: var(--bg3); }

/* ---------- 25. Cambridge link ---------- */
.cambridge-link {
  background: #FFFFFF;
  border: 0;
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(15,42,36,0.06);
}
.cambridge-link:hover {
  background: var(--accent-glow);
  color: var(--accent);
  box-shadow: 0 4px 14px rgba(15,169,139,0.20);
}