:root {
  --bg: #fcfdfd;
  --bg-accent: #f0f7ff;
  --fg: #233142;
  --accent: #ff6fb1; /* rosa accent */
  --accent-alt: #ff9f68; /* varm orange */
  --accent-soft: #ffd7ec;
  --accent-soft-2: #ffe7d3;
  --card: #ffffff;
  --border: #e3ecf4;
  --ok: #3cb179;
  --warn: #c98b00;
  --error: #e04f5f;
  --surface: #ffffff;
  --shadow: 0 4px 10px -2px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.05);
  --radius-s: 8px;
  --radius-m: 14px;
  --radius-l: 22px;
  font-family: "Baloo 2", "Fredoka", system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}

body {
  margin:0;
  background: linear-gradient(160deg,#fefeff 0%, #f6fbff 60%, #fdf7ff 100%);
  color: var(--fg);
  line-height:1.5;
  -webkit-font-smoothing: antialiased;
  background-attachment: fixed;
}

.topbar {
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:12px;
  padding:0.9rem 1.2rem;
  background:linear-gradient(100deg,var(--accent) 0%, var(--accent-alt) 100%);
  color:#fff;
  box-shadow:var(--shadow);
  border-bottom:3px solid rgba(255,255,255,0.35);
}

/* Right side of header: points + install + gear.
   Keep within viewport and let text shrink/ellipsis before pushing gear off-screen. */
.topbar-right {
  display:flex;
  align-items:center;
  gap:14px;
  min-width:0; /* allow flex children to shrink */
}

.topbar h1 {
  margin:0;
  font-size:1.55rem;
  letter-spacing:0.5px;
  font-weight:800;
  text-shadow:0 2px 4px rgba(0,0,0,0.15);
}
.topbar h1 a { color:inherit; text-decoration:none; display:inline-flex; align-items:center; gap:10px; }
.topbar h1 a:hover { text-decoration:underline; text-underline-offset:4px; }
.topbar h1 a:focus { outline:2px solid rgba(255,255,255,0.9); outline-offset:4px; border-radius:8px; }

.version-tag {
  display:inline-flex;
  align-items:center;
  background:rgba(255,255,255,0.3);
  padding:4px 10px;
  margin-left:10px;
  font-size:0.7rem;
  border-radius:999px;
  font-weight:600;
  letter-spacing:0.5px;
  backdrop-filter: blur(4px);
}

.points-panel {
  font-weight:700;
  font-size:0.95rem;
  display:flex;
  gap:10px;
  align-items:center;
  min-width:0; /* let it shrink in narrow widths */
  flex:1 1 auto; /* take remaining space but allow shrink */
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* Due widget */
.due-widget { display:flex; align-items:center; gap:6px; margin-left:8px; background:rgba(255,255,255,0.25); padding:4px 8px; border-radius:12px; font-weight:800; font-size:0.62rem; }
.due-widget #dueLabel { letter-spacing:0.5px; }
.due-widget button { padding:0.25rem 0.5rem; font-size:0.6rem; border-width:2px; }
body.dark .due-widget { background:rgba(0,0,0,0.28); }

.streak {
  margin-left:4px;
  background: linear-gradient(120deg,#fff,#ffe9f6);
  color:var(--accent);
  padding:4px 10px;
  border-radius:999px;
  font-size:0.65rem;
  font-weight:800;
  letter-spacing:0.5px;
  box-shadow:0 1px 3px rgba(0,0,0,0.15);
  animation: pulse 1.4s ease-in-out infinite;
}

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

.tabs {
  display:flex;
  gap:0;
  background:linear-gradient(90deg,#ffffff,#f8fbff);
  border-bottom:2px solid var(--border);
  position:sticky;
  top:env(safe-area-inset-top);
  z-index:10;
}

.tab-btn { /* uppdaterad kontrast */
  flex:1;
  padding:0.85rem 0.4rem;
  background:none;
  border:0;
  border-right:1px solid var(--border);
  cursor:pointer;
  font-weight:700;
  font-size:0.9rem;
  letter-spacing:0.5px;
  transition: background .2s, color .2s, transform .15s;
  position:relative;
  color:#4a5160;
  /* usage tint layer via CSS variable --useAlpha (0..1) */
  --useAlpha: 0;
  /* Stronger usage tint overlay */
  background-image: linear-gradient(0deg, rgba(0,0,0,0), rgba(0,0,0,0)), linear-gradient(135deg, rgba(60,177,121, calc(var(--useAlpha) * 0.35)), rgba(60,177,121, calc(var(--useAlpha) * 0.20)));
  background-blend-mode: overlay, normal;
}
.tab-btn:last-child { border-right:0; }
.tab-btn.active {
  background:linear-gradient(135deg,var(--accent) 0%, var(--accent-alt) 100%);
  color:#fff;
  box-shadow:0 2px 6px -2px rgba(0,0,0,0.25) inset;
}
.tab-btn:not(.active):hover {
  background:var(--accent-soft);
  color:#222;
  /* Preserve usage tint on hover */
  background-image: linear-gradient(0deg, rgba(0,0,0,0), rgba(0,0,0,0)), linear-gradient(135deg, rgba(60,177,121, calc(var(--useAlpha) * 0.35)), rgba(60,177,121, calc(var(--useAlpha) * 0.20)));
  background-blend-mode: overlay, normal;
}
.tab-btn:active { transform:translateY(2px); }

main {
  max-width:880px;
  margin:clamp(0.6rem, 1.5vw, 1.2rem) auto 4rem;
  padding:0 clamp(0.6rem, 2.5vw, 1.1rem) 2rem;
}

h2 { margin-top:0.2rem; font-weight:800; letter-spacing:0.5px; }

.card {
  background:var(--card);
  border:2px solid var(--border);
  border-radius: var(--radius-l);
  padding:1.05rem 1.15rem 1.25rem;
  margin-bottom:1.1rem;
  box-shadow:var(--shadow);
  position:relative;
}
/* Ta bort dekorativ radial highlight för att undvika visuell fade */
.card:before { display:none; }
/* Säkerställ att practice-box inte beskär text */
.practice-box.card { overflow:visible; }

.small-info {
  font-size:0.85rem;
  background: linear-gradient(135deg,#fff6e4,#ffe9d1);
  border-color:#ffd6a8;
  border-width:2px;
}

.field { display:flex; flex-direction:column; margin-bottom:0.95rem; }
.field label { font-size:0.7rem; text-transform:uppercase; letter-spacing:0.7px; font-weight:800; margin-bottom:5px; color:#4d5968; }

input[type=text], textarea {
  border:2px solid var(--border);
  border-radius: var(--radius-m);
  padding:0.65rem 0.75rem;
  font-size:0.95rem;
  background:#fbfdff;
  color: var(--fg); /* ensure visible text in light mode */
  caret-color: var(--accent);
  -webkit-text-fill-color: currentColor; /* Safari/iOS: use computed text color */
  transition:border-color .2s, box-shadow .2s, background .3s, color .2s;
}
input::placeholder, textarea::placeholder { color:#6c7a89; opacity:.75; }
input:focus, textarea:focus {
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(255,111,177,0.25);
  background:#fff;
}

button {
  font-family:inherit;
  cursor:pointer;
  border-radius: var(--radius-m);
  border:0;
  background:linear-gradient(135deg,var(--accent) 0%, var(--accent-alt) 100%);
  color:#fff;
  padding:0.7rem 1.15rem;
  font-size:0.92rem;
  font-weight:700;
  letter-spacing:.5px;
  transition:background .25s, transform .15s, box-shadow .25s;
  box-shadow:0 4px 10px -2px rgba(0,0,0,0.18);
}
button:hover { background:linear-gradient(135deg,var(--accent-alt) 0%, var(--accent) 100%); }
button:active { transform:translateY(2px); box-shadow:0 2px 6px -2px rgba(0,0,0,0.3); }
button.secondary { background:linear-gradient(135deg,#ffffff,#f4f8ff); color:var(--accent); border:2px solid var(--accent-soft); box-shadow:none; }
button.secondary:hover { background:linear-gradient(135deg,#fff3fb,#ffe9d7); }
button.danger { background:linear-gradient(135deg,#ff6b6b,#ff3d6a); color:#fff; }
button.danger:hover { background:linear-gradient(135deg,#ff3d6a,#ff6b6b); }

/* Flashcard animations */
.flash-card { transition: opacity .28s ease, transform .28s ease; }
.flash-card.fade-out { opacity:0; transform:scale(.94) rotate(-2deg); }
.flash-card.fade-in { opacity:1; transform:scale(1) rotate(0deg); }

#flashUnknownList ul { list-style:none; padding:4px 0 0; margin:0; display:grid; gap:4px; }
#flashUnknownList li { background:linear-gradient(135deg,#fff5f7,#ffe8ec); border:1px solid #ffd0d8; padding:4px 8px; border-radius:8px; font-weight:600; }

/* Generic progress bars */
.pbar-wrap { width:100%; height:8px; background:#f3f6fa; border:2px solid var(--border); border-radius:10px; overflow:hidden; margin:0.4rem 0 0.6rem; position:relative; }
.pbar { height:100%; width:0%; background:linear-gradient(90deg,var(--accent), var(--accent-alt)); transition:width .35s ease; }
.pbar.done { background:linear-gradient(90deg,var(--ok), #7ddcb1); }

.word-list ul, #reportList { list-style:none; padding:0; margin:0; display:grid; gap:8px; }

.word-list li {
  display:flex;
  justify-content:space-between;
  align-items:center;
  background:linear-gradient(120deg,#f9fbff,#fff1fa);
  border:2px solid #e9eef6;
  border-radius: var(--radius-m);
  padding:8px 14px;
  font-size:0.92rem;
  font-weight:600;
  letter-spacing:0.2px;
  position:relative;
  overflow:hidden;
}
.word-list li:after {
  content:"";
  position:absolute; inset:0;
  background:radial-gradient(circle at 10% 90%,rgba(255,255,255,0.9),transparent 60%);
  pointer-events:none;
}

.word-list .stats {
  font-size:0.63rem;
  background:#fff;
  border:2px solid #dde6f2;
  border-radius:999px;
  padding:3px 9px;
  color:#333;
  font-weight:700;
  letter-spacing:0.5px;
  box-shadow:0 2px 4px rgba(0,0,0,0.08);
}

.practice-box { position:relative; }
.target-word, .prompt-word { font-size:1.6rem; font-weight:800; letter-spacing:1px; margin-bottom:0.7rem; /* Removed gradient fade for clearer solid text */ background:none; -webkit-background-clip:initial; background-clip:initial; color:var(--accent); }

.feedback { min-height:1.3rem; font-weight:700; margin-top:0.55rem; letter-spacing:0.3px; }
.feedback.ok { color:var(--ok); }
.feedback.close { color:var(--warn); }
.feedback.wrong { color:var(--error); }

.progress-inline { margin-top:0.7rem; font-size:0.72rem; color:#5a6a7a; font-weight:600; letter-spacing:0.4px; }

.hidden { display:none !important; }

.footer { text-align:center; padding:calc(2.3rem + env(safe-area-inset-bottom)) 1rem 2.3rem; font-size:0.7rem; color:#7b8896; }

.spell-options { display:grid; gap:10px; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); margin:0.9rem 0 0.4rem; }
.spell-options button { background:linear-gradient(135deg,#ffffff,#f5f9ff); color:#333; border:2px solid var(--border); box-shadow:0 2px 4px rgba(0,0,0,0.08); font-size:0.8rem; font-weight:600; }
.spell-options button.correct { background:linear-gradient(135deg,#d8fbe8,#b6f3d3); border-color:#8edeb4; }
.spell-options button.wrong { background:linear-gradient(135deg,#ffe2e2,#ffd0d0); border-color:#f3b8b8; }
/* Reuse spell-options styling for quiz options */
#quizOptions button { font-size:0.85rem; }

@media (max-width:760px) {
  /* Show hamburger and make it left-most in the grid */
  #openMobileMenuBtn { display:inline-flex !important; order: -1; }
  .topbar { grid-template-columns:auto 1fr auto; }
  .topbar h1 { font-size:clamp(1.0rem, 5vw, 1.3rem); }
  /* Compress points panel so settings fits */
  .points-panel { font-size:0.78rem; gap:8px; }
  .points-panel #dueWidget { display:none; }
  #dailyGoalWidget { display:none; }
}

/* Even narrower: hide streak badge so gear never overflows */
@media (max-width:520px){
  #streakBadge { display:none !important; }
}

/* Extremely narrow: hide points text but keep level to save space */
@media (max-width:420px){
  #pointsValue, #pointsPanel { overflow:hidden; }
  /* Replace long text with compact label via CSS only when needed */
  #pointsPanel { visibility:hidden; position:relative; }
  #pointsPanel::after { content:"Nivå "; visibility:visible; position:absolute; left:0; }
  /* Show only the level number inline */
}

/* Explicit override to eliminate any residual gradient/fade on spelling words */
.spell-section .target-word,
.spell-section .prompt-word {
  background:none !important;
  -webkit-background-clip:initial !important;
  background-clip:initial !important;
  color:var(--accent) !important;
  -webkit-text-fill-color:var(--accent) !important; /* Safari fix */
  mask-image:none !important;
  -webkit-mask-image:none !important;
  filter:none !important;
}

/* Cloze (lucktext) */
#clozeSentence em.missing-slot {
  background: var(--accent);
  color: transparent;
  position: relative;
  display:inline-block;
  min-width: 60px;
  border-radius:6px;
  height:1.2em;
}
#clozeSentence em.missing-slot.revealed { color:#fff; }
#clozeSentence span.hint-letter {
  display:inline-block;
  width:20px;
  text-align:center;
  background: var(--accent);
  color:#fff;
  margin:0 2px;
  border-radius:6px;
  font-weight:700;
}

/* Settings & summary modal */
#settingsPanel select { padding:6px 8px; border:2px solid var(--border); border-radius: var(--radius-m); background:#fff; font-weight:600; }
body.dark #settingsPanel select { background:#242834; color:var(--fg); border-color:#3a4350; }

.session-summary-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.55); display:flex; align-items:flex-start; justify-content:center; padding:4rem 1rem 2rem; z-index:1000; }
.session-summary { background:var(--card); border:2px solid var(--border); border-radius:24px; max-width:480px; width:100%; padding:1.4rem 1.2rem 1.6rem; box-shadow:var(--shadow); animation:popIn .35s ease; }
body.dark .session-summary { background:#2b2f39; }
.session-summary h3 { margin:0 0 .6rem; font-size:1.1rem; }
.session-summary .metric { font-size:0.8rem; font-weight:700; letter-spacing:0.5px; margin-bottom:6px; }
.session-summary ul { list-style:none; margin:0.6rem 0 0; padding:0; max-height:180px; overflow:auto; display:grid; gap:4px; }
.session-summary li { background:linear-gradient(135deg,#fff6fb,#fff1e6); border:1px solid #f1d6ef; padding:4px 8px; border-radius:10px; font-size:0.72rem; font-weight:600; }
body.dark .session-summary li { background:linear-gradient(135deg,#323845,#2a303a); border-color:#404959; }
.session-summary .close-row { display:flex; justify-content:flex-end; margin-top:1rem; }
@keyframes popIn { 0% { transform:translateY(18px) scale(.95); opacity:0; } 100% { transform:translateY(0) scale(1); opacity:1; } }

/* ----- Dark Mode Overrides ----- */
body.dark {
  --bg:#1e1f26;
  --bg-accent:#242733;
  --fg:#eef2f7;
  --accent:#ffb347;
  --accent-alt:#ff8e72;
  --accent-soft:#3a3f4d;
  --accent-soft-2:#444b59;
  --card:#2b2f39;
  --border:#3a4150;
  --surface:#2d313b;
  --shadow:0 4px 10px -2px rgba(0,0,0,0.6), 0 2px 4px rgba(0,0,0,0.4);
}
body.dark { background:linear-gradient(150deg,#232632,#1f2530); color:var(--fg); }
body.dark .card { background:var(--card); border-color:var(--border); }
body.dark .tab-btn:not(.active) { background:#262b34; color:#9aa3b3; }
body.dark .tab-btn:not(.active):hover { background:#303743; color:#fff; }
body.dark .tab-btn.active { color:#222; }
/* Dark mode usage tint overlay tuned for dark backgrounds */
body.dark .tab-btn { background-image: linear-gradient(0deg, rgba(0,0,0,0), rgba(0,0,0,0)), linear-gradient(135deg, rgba(60,177,121, calc(var(--useAlpha) * 0.50)), rgba(60,177,121, calc(var(--useAlpha) * 0.30))); }
body.dark .tab-btn:not(.active):hover {
  background:#303743; color:#fff;
  background-image: linear-gradient(0deg, rgba(0,0,0,0), rgba(0,0,0,0)), linear-gradient(135deg, rgba(60,177,121, calc(var(--useAlpha) * 0.50)), rgba(60,177,121, calc(var(--useAlpha) * 0.30)));
  background-blend-mode: overlay, normal;
}
body.dark input, body.dark textarea { background:#242834; color:var(--fg); border-color:#3a4350; caret-color: var(--accent); -webkit-text-fill-color: currentColor; }
body.dark input::placeholder, body.dark textarea::placeholder { color:#9aa3b3; opacity:.85; }
body.dark input:focus, body.dark textarea:focus { box-shadow:0 0 0 3px rgba(255,179,71,0.25); border-color:var(--accent); }
body.dark .word-list li { background:linear-gradient(120deg,#2d3240,#272c38); border-color:#394252; }
body.dark .word-list .stats { background:#222731; border-color:#333b49; color:#d5d9e0; }
body.dark button.secondary { background:linear-gradient(135deg,#272c36,#313744); color:var(--accent); border-color:#444c59; }
body.dark button.secondary:hover { background:linear-gradient(135deg,#303744,#3a4250); }
body.dark .pbar-wrap { background:#2a2f39; border-color:#3a4250; }
body.dark .pbar { background:linear-gradient(90deg,var(--accent),var(--accent-alt)); }
body.dark .pbar.done { background:linear-gradient(90deg,#3cb179,#7ddcb1); }
body.dark .flash-card { background:#2c313b; color:var(--fg); }
body.dark .flash-card.flipped { background:#303743; }
body.dark #flashUnknownList li { background:linear-gradient(135deg,#3a3240,#3c2d30); border-color:#523c46; }
body.dark #clozeSentence em.missing-slot { background:#ffb347; }
body.dark #clozeSentence span.hint-letter { background:#ffb347; color:#222; }
body.dark .feedback.close { color:#ffcf5e; }
body.dark .feedback.wrong { color:#ff6d7d; }
body.dark .small-info { background:linear-gradient(135deg,#3a3324,#3c2f20); border-color:#5a4630; }
body.dark .streak { background:linear-gradient(120deg,#2e3038,#383b44); color:#ffb347; }
body.dark .footer { color:#7d8693; }
body.dark .achievements li.unlocked { background:#313743; }
body.dark .achievements li.unlocked strong { color:#ffb347; }
body.dark .achievements li.locked { background:#272d36; }
body.dark .practice-box .target-word, body.dark .practice-box .prompt-word { color:var(--accent); }
body.dark .spell-options button { background:linear-gradient(135deg,#2f3441,#2a2f3a); border-color:#3d4653; color:#d3d9e2; }
body.dark .spell-options button.correct { background:linear-gradient(135deg,#1f4431,#275c40); border-color:#2f6e4d; }
body.dark .spell-options button.wrong { background:linear-gradient(135deg,#5a2727,#692f2f); border-color:#7a3a3a; }
body.dark .points-panel { color:var(--fg); }
body.dark .version-tag { background:rgba(0,0,0,0.35); }
body.dark .tabs { background:#222730; border-color:#303640; }
body.dark .progress-inline { color:#9aa3b3; }
body.dark .word-list li:after { background:radial-gradient(circle at 10% 90%,rgba(255,255,255,0.05),transparent 60%); }

/* Skip link */
.skip-link {
  position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip-link:focus {
  position:fixed; left:10px; top:10px; width:auto; height:auto; z-index:2000;
  background:#fff; color:#000; padding:8px 12px; border-radius:8px; box-shadow:var(--shadow);
}

/* Report mini bars for per-mode usage */
.usage-list { list-style:none; padding:0; margin:0; display:grid; gap:10px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); }
.usage-row { border:2px solid var(--border); border-radius:12px; padding:8px 10px; background:linear-gradient(135deg,#ffffff,#f7faff); }
.usage-head { display:flex; justify-content:space-between; gap:8px; align-items:center; font-weight:800; font-size:0.8rem; }
.usage-numbers { opacity:.75; font-weight:700; font-size:0.72rem; }
.usage-bars { margin-top:6px; height:8px; position:relative; background:#f1f5fb; border:2px solid var(--border); border-radius:10px; overflow:hidden; }
.usage-bars .bar { position:absolute; top:0; left:0; height:100%; transition:width .35s ease; }
.usage-bars .bar.total { background:linear-gradient(90deg,#98c8ff,#6aa8ff); opacity:0.7; }
.usage-bars .bar.today { background:linear-gradient(90deg,#64d4a0,#3cb179); mix-blend-mode:multiply; }
body.dark .usage-row { background:linear-gradient(135deg,#2f3441,#2a2f3a); }
body.dark .usage-bars { background:#2a2f39; }
body.dark .usage-bars .bar.total { background:linear-gradient(90deg,#3b6a9e,#2b5c91); opacity:0.8; }
body.dark .usage-bars .bar.today { background:linear-gradient(90deg,#2c8b60,#2a6f53); }

/* Suggestion bars (due/hard/new) */
.suggest-bars { margin-top:8px; display:grid; gap:8px; }
.srow { display:flex; flex-direction:column; gap:4px; }
.shead { display:flex; justify-content:space-between; font-weight:800; font-size:0.78rem; }
.sbar-wrap { height:8px; background:#f1f5fb; border:2px solid var(--border); border-radius:10px; overflow:hidden; }
.sbar { height:100%; transition:width .35s ease; }
.sbar.due { background:linear-gradient(90deg,#ffd280,#ffb347); }
.sbar.hard { background:linear-gradient(90deg,#ff9aa2,#ff6d7d); }
.sbar.new { background:linear-gradient(90deg,#b0e7ff,#7cc9ff); }
body.dark .sbar-wrap { background:#2a2f39; }
body.dark .sbar.due { background:linear-gradient(90deg,#b6782e,#a06218); }
body.dark .sbar.hard { background:linear-gradient(90deg,#a2434d,#8e3441); }
body.dark .sbar.new { background:linear-gradient(90deg,#3a6180,#2b5474); }

/* Details per word stacked bars */
.details-list { list-style:none; padding:0; margin:0; display:grid; gap:6px; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
.detail-row { display:flex; justify-content:space-between; gap:8px; align-items:stretch; border:2px solid var(--border); border-radius:12px; padding:6px 8px; background:linear-gradient(135deg,#ffffff,#f7faff); }
.detail-left { font-weight:700; font-size:0.85rem; }
.detail-right { display:flex; flex-direction:column; gap:4px; align-items:flex-end; }
.word-stats { opacity:.75; font-size:0.72rem; font-weight:700; }
.word-bars { position:relative; width:180px; height:8px; border:2px solid var(--border); background:#f1f5fb; border-radius:10px; overflow:hidden; }
.word-bars .seg { position:absolute; top:0; left:0; height:100%; }
.word-bars .seg.ok { background:linear-gradient(90deg,#64d4a0,#3cb179); }
.word-bars .seg.wrong { background:linear-gradient(90deg,#ff9aa2,#ff6d7d); left:auto; right:0; }
body.dark .detail-row { background:linear-gradient(135deg,#2f3441,#2a2f3a); }
body.dark .word-bars { background:#2a2f39; }
body.dark .word-bars .seg.ok { background:linear-gradient(90deg,#2c8b60,#2a6f53); }
body.dark .word-bars .seg.wrong { background:linear-gradient(90deg,#a2434d,#8e3441); }

/* Toughest words mini bars */
.tough-list { list-style:none; padding-left:0; margin:.35rem 0 0; display:grid; gap:6px; }
.tough-row { border:2px solid var(--border); border-radius:12px; padding:6px 8px; background:linear-gradient(135deg,#ffffff,#f7faff); }
.tough-head { display:flex; justify-content:space-between; gap:8px; font-weight:800; font-size:0.82rem; }
.tough-acc { opacity:.8; font-weight:800; }
.tough-bars { position:relative; width:100%; height:8px; border:2px solid var(--border); background:#f1f5fb; border-radius:10px; overflow:hidden; margin-top:6px; }
.tough-bars .seg { position:absolute; top:0; left:0; height:100%; }
.tough-bars .seg.ok { background:linear-gradient(90deg,#64d4a0,#3cb179); }
.tough-bars .seg.wrong { background:linear-gradient(90deg,#ff9aa2,#ff6d7d); left:auto; right:0; }
body.dark .tough-row { background:linear-gradient(135deg,#2f3441,#2a2f3a); }
body.dark .tough-bars { background:#2a2f39; }
body.dark .tough-bars .seg.ok { background:linear-gradient(90deg,#2c8b60,#2a6f53); }
body.dark .tough-bars .seg.wrong { background:linear-gradient(90deg,#a2434d,#8e3441); }

/* Mode results (per exercise) */
.mode-list { list-style:none; padding:0; margin:0; display:grid; gap:10px; }
.mode-row { border:2px solid var(--border); border-radius:12px; padding:8px 10px; background:linear-gradient(135deg,#ffffff,#f7faff); }
.mode-head { display:flex; justify-content:space-between; gap:8px; align-items:center; font-weight:800; font-size:0.85rem; }
.mode-numbers { opacity:.8; font-weight:800; font-size:0.75rem; }
.mode-bars { position:relative; width:100%; height:8px; border:2px solid var(--border); background:#f1f5fb; border-radius:10px; overflow:hidden; margin-top:6px; }
.mode-bars .seg { position:absolute; top:0; left:0; height:100%; }
.mode-bars .seg.ok { background:linear-gradient(90deg,#64d4a0,#3cb179); }
.mode-bars .seg.wrong { background:linear-gradient(90deg,#ff9aa2,#ff6d7d); left:auto; right:0; }
.mode-hard { margin-top:8px; }
.mode-hard .sub { font-size:0.72rem; font-weight:800; opacity:.8; margin-bottom:4px; }
.mode-hard-list { list-style:none; padding-left:0; display:grid; gap:4px; margin:0; }
.mode-hard-list li { display:flex; justify-content:space-between; align-items:center; gap:8px; font-size:0.8rem; font-weight:700; background:linear-gradient(135deg,#fff,#f9fbff); border:1px solid var(--border); border-radius:8px; padding:4px 8px; }
.chip { background:#fff; border:2px solid var(--border); border-radius:999px; padding:2px 8px; font-size:0.65rem; font-weight:800; }
.muted { opacity:.6; font-size:0.72rem; font-weight:800; }
body.dark .mode-row { background:linear-gradient(135deg,#2f3441,#2a2f3a); }
body.dark .mode-bars { background:#2a2f39; }
body.dark .mode-hard-list li { background:linear-gradient(135deg,#2f3441,#2a2f3a); }

body.theme-transition * { transition: background-color .35s ease, color .35s ease, border-color .35s ease; }

/* Memory cards */
.memory-card {
  background: linear-gradient(135deg,#ffffff,#f5f9ff);
  color:#333;
  border:2px solid var(--border);
  box-shadow:0 2px 6px rgba(0,0,0,0.06);
  padding:0.8rem 0.6rem;
  min-height:70px;
  font-weight:800;
  letter-spacing:0.4px;
  position:relative;
  overflow:hidden;
}
.memory-card .front,
.memory-card .back {
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0.6rem;
}
.memory-card .front { opacity:1; transition:opacity .2s ease; }
.memory-card .back { opacity:0; visibility:hidden; transition:opacity .2s ease, visibility .2s ease; }
.memory-card.flipped .front { opacity:0; }
.memory-card.flipped .back { opacity:1; visibility:visible; }
.memory-card.matched {
  background: linear-gradient(135deg,#d8fbe8,#b6f3d3);
  border-color:#8edeb4;
  color:#20523a;
  pointer-events:none;
}
body.dark .memory-card { background:linear-gradient(135deg,#2f3441,#2a2f3a); color:#d3d9e2; border-color:#3d4653; }
body.dark .memory-card.matched { background:linear-gradient(135deg,#1f4431,#275c40); border-color:#2f6e4d; color:#dff4ea; }

/* Gear button */
.gear-btn {
  background:rgba(255,255,255,0.28);
  border:2px solid rgba(255,255,255,0.55);
  width:42px; height:42px; display:flex; align-items:center; justify-content:center;
  border-radius:14px; font-size:1.2rem; line-height:1; padding:0; box-shadow:0 4px 10px -2px rgba(0,0,0,0.25);
  backdrop-filter:blur(6px);
}
.gear-btn:hover { background:rgba(255,255,255,0.45); }
.gear-btn:active { transform:translateY(2px); }
body.dark .gear-btn { background:rgba(0,0,0,0.35); border-color:rgba(255,255,255,0.25); }
body.dark .gear-btn:hover { background:rgba(0,0,0,0.55); }

/* Settings overlay */
.settings-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.55); display:flex; align-items:flex-start; justify-content:flex-end; padding:4.5rem 1.2rem 2rem; z-index:1200; }
.settings-panel { width:300px; max-width:100%; background:var(--card); border:2px solid var(--border); border-radius:26px; box-shadow:var(--shadow); animation:slideIn .35s ease; display:flex; flex-direction:column; }
.settings-header { display:flex; justify-content:space-between; align-items:center; padding:0.9rem 1rem 0.4rem; border-bottom:2px solid var(--border); }
.settings-content { padding:0.85rem 1rem 1.2rem; overflow-y:auto; max-height:calc(100vh - 8rem); }
.settings-panel .field label { color:#55606c; }
body.dark .settings-panel { background:#2b2f39; }
body.dark .settings-panel .field label { color:#b7c0cd; }
.close-btn { background:linear-gradient(135deg,#fff,#f3f7fb); color:#333; width:34px; height:34px; padding:0; display:flex; align-items:center; justify-content:center; font-size:1.2rem; border:2px solid var(--border); box-shadow:none; }
.close-btn:hover { background:linear-gradient(135deg,#ffeef8,#fff3e9); }
body.dark .close-btn { background:#262b34; color:#eee; }
body.dark .close-btn:hover { background:#313741; }
@keyframes slideIn { 0% { transform:translateX(20px); opacity:0; } 100% { transform:translateX(0); opacity:1; } }

/* Restart buttons (fixed bottom-right) */
.restart-btn {
  position:fixed;
  bottom:1.1rem;
  right:1.05rem;
  font-size:0.65rem;
  padding:0.55rem 0.9rem;
  border:2px solid var(--accent-soft);
  z-index:1600;
  opacity:0.85;
  backdrop-filter:blur(4px);
}
.restart-btn:hover { opacity:1; }
/* Only show the one inside the active tab (other sections are hidden anyway) */
@media (max-width:700px){
  .restart-btn { bottom:0.9rem; right:0.7rem; font-size:0.6rem; padding:0.5rem 0.8rem; }
}

/* Inline restart buttons placed under practice boxes */
.restart-inline {
  position:static;
  margin-top:0.2rem;
  backdrop-filter:none;
  z-index:auto;
}

@media (max-width:700px){
  .settings-overlay { justify-content:center; padding-top:5rem; }
  .settings-panel { width:100%; border-radius:22px; }
  .settings-header { padding:0.8rem 1rem 0.3rem; }
}

/* Prevent background scroll when overlays are open */
body.no-scroll { overflow:hidden; height:100vh; }

/* --- Speak buttons styling --- */
.speak-btn {
  background: var(--accent-alt);
  color:#fff;
  border:none;
  cursor:pointer;
  padding:0.28rem 0.5rem;
  font-size:0.75rem;
  line-height:1;
  border-radius:40px;
  box-shadow:0 2px 4px rgba(0,0,0,0.15);
  transition: background .2s, transform .15s, opacity .3s;
}
.speak-btn:hover { background: var(--accent); }
.speak-btn:active { transform:scale(.9); }
.flash-card .speak-btn { position:absolute; top:6px; right:6px; }
.flash-card .speak-btn + .speak-btn { right:40px; }
.cloze-speak { font-size:0.65rem; background:var(--accent); }
body.dark .speak-btn { box-shadow:0 2px 4px rgba(0,0,0,0.4); }
.speak-btn.speaking { animation: speakPulse 0.8s ease-in-out infinite; }
@keyframes speakPulse { 0%,100% { transform:scale(1); filter:brightness(1); } 50% { transform:scale(1.12); filter:brightness(1.15); } }
.speak-btn.speak-off { opacity:.35; filter:grayscale(.6); cursor:not-allowed; }
.speak-btn.speak-off:active, .speak-btn.speak-off:hover { transform:none; background:var(--accent-alt); }

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}
/* Hint bubble when TTS is off */
.tts-off-hint {
  background:rgba(40,48,60,0.92);
  color:#fff;
  padding:4px 9px;
  font-size:0.65rem;
  font-weight:600;
  border-radius:12px;
  letter-spacing:0.5px;
  opacity:0;
  transform:translate(-50%, -4px) scale(.92);
  transition:opacity .25s ease, transform .25s ease;
  pointer-events:none;
  box-shadow:0 4px 10px -2px rgba(0,0,0,0.35);
}
.tts-off-hint.visible { opacity:1; transform:translate(-50%, 0) scale(1); }
body.dark .tts-off-hint { background:rgba(255,255,255,0.1); backdrop-filter:blur(4px); }

/* Confirm overlay for restart */
.confirm-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.55); display:flex; align-items:center; justify-content:center; z-index:2500; padding:1.5rem; }
.confirm-box { background:var(--card); border:2px solid var(--border); border-radius:22px; padding:1.1rem 1.1rem 1.2rem; width:100%; max-width:340px; box-shadow:var(--shadow); animation:popIn .3s ease; }
.confirm-box h4 { margin:0 0 .4rem; font-size:1.05rem; }
.confirm-box p { margin:.2rem 0 .9rem; font-size:0.75rem; font-weight:600; line-height:1.3; }
.confirm-box .row { display:flex; gap:.6rem; justify-content:flex-end; }
body.dark .confirm-box { background:#2b2f39; }

/* Toast */
.app-toast { position:fixed; bottom:1.4rem; left:50%; transform:translateX(-50%) translateY(20px); background:linear-gradient(135deg,var(--accent),var(--accent-alt)); color:#fff; padding:.55rem 1rem; font-size:.75rem; font-weight:700; border-radius:999px; box-shadow:0 6px 16px -4px rgba(0,0,0,0.35); opacity:0; transition:opacity .35s ease, transform .35s ease; z-index:2600; letter-spacing:.5px; }
.app-toast.visible { opacity:1; transform:translateX(-50%) translateY(0); }
body.dark .app-toast { background:linear-gradient(135deg,var(--accent-alt),var(--accent)); }

/* Mic indicator (pronunciation) */
.mic-indicator {
  font-weight: 800;
  letter-spacing: 0.4px;
  animation: micBlink 1s ease-in-out infinite;
  user-select: none;
}
@keyframes micBlink { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
body.dark .mic-indicator { color:#ff6d7d !important; }

/* ---- Drag & Drop Text Cloze ---- */
.dnd-paragraph .slot{
  display:inline-flex;
  min-width:72px;
  padding:2px 6px;
  margin:0 3px;
  border:2px dashed var(--border);
  border-radius:8px;
  background:var(--surface);
  vertical-align:baseline;
  align-items:center;
  justify-content:center;
}
.dnd-token{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:4px 8px;
  border:2px solid var(--border);
  border-radius:10px;
  background:linear-gradient(135deg,#f7faff,#fff);
  font-weight:700;
  cursor:grab;
  user-select:none;
}
.dnd-token:active{ cursor:grabbing; }
.slot.filled{
  border-style:solid;
}
.slot.correct{ border-color:var(--ok); background:#eafff5; }
.slot.wrong{ border-color:#e99; background:#ffecec; }
.slot:focus-visible, .dnd-token:focus-visible{
  outline:3px solid var(--accent);
  outline-offset:2px;
}

/* AI source/model badge */
.ai-badge {
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 8px;
  border-radius:999px;
  border:2px solid var(--border);
  background:linear-gradient(135deg,#ffffff,#f5f9ff);
  color:#445;
  font-size:0.65rem;
  font-weight:800;
  letter-spacing:0.4px;
  box-shadow:0 2px 4px rgba(0,0,0,0.06);
}
.ai-badge:before{
  content:"🤖";
}
body.dark .ai-badge{
  background:linear-gradient(135deg,#2f3441,#2a2f3a);
  color:#d3d9e2;
  border-color:#3d4653;
}

/* ===== Mobile slide-in menu (hamburger) ===== */
.mobile-menu-overlay { position:fixed; inset:0; display:flex; z-index:1800; }
.mobile-menu-overlay.hidden { display:none; }
.mobile-menu-backdrop { position:absolute; inset:0; background:rgba(0,0,0,0.35); opacity:0; transition:opacity .18s ease; border:0; z-index:1; }
.mobile-menu { margin:env(safe-area-inset-top) 0 env(safe-area-inset-bottom) env(safe-area-inset-left); align-self:stretch; height:100%; max-width:min(84vw, 360px); width:84vw; background:var(--card); color:var(--fg); border-right:2px solid var(--border); box-shadow:0 10px 30px rgba(0,0,0,0.25); transform:translateX(-100%); transition:transform .22s ease-out; display:flex; flex-direction:column; position:relative; z-index:2; }
.mobile-menu-header { display:flex; align-items:center; justify-content:space-between; padding:12px 14px; border-bottom:2px solid var(--border); background:var(--surface); }
.mobile-menu-list { list-style:none; margin:0; padding:8px 0 12px; overflow-y:auto; -webkit-overflow-scrolling:touch; flex:1; }
.mobile-menu-list li { margin:0; }
.mobile-menu-list button { display:block; width:100%; text-align:left; padding:12px 16px; background:transparent; border:0; border-radius:0; color:inherit; font-size:0.95rem; font-weight:800; letter-spacing:.3px; cursor:pointer; position:relative; z-index:0; }
.mobile-menu-list button:hover, .mobile-menu-list button:focus { background:rgba(0,0,0,0.06); outline:none; }
.mobile-menu-list button.active { background:linear-gradient(135deg,var(--accent),var(--accent-alt)); color:#fff; }
.mobile-menu-overlay.open .mobile-menu { transform:translateX(0); }
.mobile-menu-overlay.open .mobile-menu-backdrop { opacity:1; }

/* Dark mode tweaks */
body.dark .mobile-menu { background:var(--card); color:var(--fg); border-color:var(--border); }
body.dark .mobile-menu-header { background:#262b34; }
body.dark .mobile-menu-list button:hover, body.dark .mobile-menu-list button:focus { background:rgba(255,255,255,0.08); }

/* Show hamburger, hide horizontal tabs on small screens */
@media (max-width: 760px){
  #openMobileMenuBtn { display:inline-flex !important; }
  .tabs { display:none !important; }
}