@charset "UTF-8";
/* Most colors are controlled in src/styles/variables.css. Change color variables there. */
.word-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;margin-bottom:24px}
.word-card{background:var(--surface);border:1.5px solid var(--border);border-radius:var(--radius-sm);padding:12px 14px;display:flex;flex-direction:column;gap:4px;transition:box-shadow var(--tr),opacity var(--tr),border-color var(--tr),background var(--tr);cursor:pointer}
.word-card:hover{box-shadow:var(--shadow);border-color:var(--card-hover-border)}
.word-card:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.word-card.is-skipped{opacity:.45;background:var(--surface2)}
.word-de{font-weight:600;font-size:1rem;display:flex;align-items:center;gap:6px}
.word-trans{font-size:.85rem;color:var(--text2)}
.word-card-action{font-size:.72rem;color:var(--text2);margin-top:4px}
#activity-area{min-height:300px}

.module-instruction{color:var(--text2);font-size:.92rem;line-height:1.55;text-align:center;margin:0 0 22px}
.question-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:24px}
.counter-row{display:flex;justify-content:flex-end;margin-bottom:14px}
.card-counter{background:var(--counter-bg);border-radius:20px;padding:4px 12px;font-size:.84rem;color:var(--text2);font-weight:500;white-space:nowrap;flex-shrink:0}
.flashcard-wrap{perspective:1000px;margin:0 auto 20px;max-width:440px}
.flashcard{width:100%;height:200px;position:relative;transform-style:preserve-3d;transition:transform .5s cubic-bezier(.4,0,.2,1);cursor:pointer;border-radius:var(--radius)}
.flashcard.flipped{transform:rotateY(180deg)}
.fc-front,.fc-back{position:absolute;inset:0;backface-visibility:hidden;border-radius:var(--radius);display:flex;align-items:center;justify-content:center;border:1.5px solid var(--border);box-shadow:var(--shadow)}
.fc-front{background:var(--flashcard-front-bg)}
.fc-back{background:var(--flashcard-back-bg);transform:rotateY(180deg)}
.fc-content{text-align:center;padding:20px}
.fc-word{font-family:var(--font-display);font-size:2rem;color:var(--flashcard-front-text);display:block;margin-bottom:10px}
.fc-translation{font-size:1.8rem;color:var(--flashcard-back-text);font-weight:600;display:block;margin-bottom:6px}
.fc-de-small{font-size:.95rem;color:var(--flashcard-back-small-text)}
.flip-hint{text-align:center;font-size:.8rem;color:var(--text2);margin-bottom:16px}
.fc-controls{display:flex;gap:10px;justify-content:center;margin-bottom:14px;flex-wrap:wrap}
.quiz-question{text-align:center;margin-bottom:24px;position:relative}
.quiz-question .card-counter{position:absolute;right:0;top:50%;transform:translateY(-50%)}
.quiz-de-word{font-family:var(--font-display);font-size:2.2rem;color:var(--text)}
.quiz-options{display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:500px;margin:0 auto 16px}
.quiz-opt{background:var(--surface);border:1.5px solid var(--border);border-radius:var(--radius-sm);padding:14px 16px;display:flex;align-items:center;gap:10px;font-size:.95rem;text-align:left;transition:all var(--tr);cursor:pointer}
.quiz-opt:hover:not(:disabled){border-color:var(--accent);background:var(--accent-light)}
.quiz-opt.correct{background:var(--correct-bg);border-color:var(--correct-text);color:var(--correct-text)}
.quiz-opt.wrong{background:var(--wrong-bg);border-color:var(--wrong-text);color:var(--wrong-text)}
.quiz-opt:disabled{cursor:default}
.opt-num{width:24px;height:24px;border-radius:50%;background:var(--counter-bg);display:flex;align-items:center;justify-content:center;font-size:.78rem;font-weight:700;flex-shrink:0;color:var(--text2)}
.hint-keys{text-align:center;font-size:.78rem;color:var(--text2);margin-bottom:16px}
.listen-center{text-align:center;padding:16px 0 24px}
.listen-big-btn{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;background:var(--listen-button-bg);color:var(--listen-button-text);border-radius:50%;width:100px;height:100px;font-size:.85rem;font-weight:600;transition:all var(--tr);box-shadow:var(--listen-button-shadow)}
.listen-big-btn:hover{transform:scale(1.08);box-shadow:var(--listen-button-shadow-hover)}
.listen-icon{font-size:2rem}
.fill-list{display:flex;flex-direction:column;gap:14px;margin-bottom:24px}
.fill-item{background:var(--surface);border:1.5px solid var(--border);border-radius:var(--radius-sm);padding:16px 18px;transition:border-color var(--tr)}
.fill-item.fill-correct{border-color:var(--correct-text)}
.fill-item.fill-wrong{border-color:var(--wrong-text)}
.fill-sentence{font-size:1rem;line-height:1.7}
.fill-select{display:inline-block;margin:0 4px;padding:3px 8px;border:1.5px solid var(--accent);border-radius:6px;background:var(--accent-light);color:var(--accent);font-size:.95rem;font-weight:500;cursor:pointer}
.fill-feedback{font-size:.83rem;font-weight:600;margin-top:8px}
.fill-feedback.correct{color:var(--accent)}
.fill-feedback.wrong{color:var(--danger)}
.result-mini{background:var(--correct-bg);border-radius:var(--radius-sm);padding:12px 16px;color:var(--correct-text);font-weight:600;margin-top:14px;text-align:center}
.result-screen{text-align:center;padding:32px 20px;animation:pageEnter .4s ease forwards}
.result-score{font-family:var(--font-display);font-size:5rem;color:var(--result-score-color);line-height:1;margin-bottom:8px}
.result-label{font-size:1.3rem;font-weight:600;margin-bottom:8px}
.result-detail{color:var(--text2);margin-bottom:20px}
.result-mistakes{margin-bottom:20px}
.mistake-tag{display:inline-block;background:var(--wrong-bg);color:var(--wrong-text);border-radius:6px;padding:3px 10px;margin:3px;font-size:.85rem;font-weight:600}
.result-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.empty-state{color:var(--text2);text-align:center;padding:40px 0}

/* Guess Word activity */
.guess-definition-card{
  background:var(--surface);
  border:1.5px solid var(--border);
  border-radius:var(--radius);
  padding:18px 20px;
  margin:0 auto 18px;
  max-width:560px;
  box-shadow:var(--shadow);
}
.guess-definition{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  color:var(--text);
  font-size:1.05rem;
  line-height:1.55;
}

/* ── Fill test: hint box after wrong answer ─────────────────────────────── */
.fill-hint-area {
  margin-top: 1rem;
}

.fill-hint-box {
  background: var(--wrong-bg);
  border: 1.5px solid var(--wrong-text);
  border-radius: var(--radius-sm);
  padding: 1rem 1.25rem;
}

.fill-hint-text {
  display: block;
  font-size: 1rem;
  color: var(--text);
  margin-bottom: 0.75rem;
}

.fill-hint-footer {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.fill-hint-progress {
  flex: 1;
  min-width: 80px;
  height: 5px;
  background: var(--border);
  border-radius: 99px;
  overflow: hidden;
}

.fill-hint-bar {
  height: 100%;
  width: 100%;
  background: var(--wrong-text);
  transform-origin: left;
}

@keyframes shrink {
  from { transform: scaleX(1); }
  to   { transform: scaleX(0); }
}

/* ── Fill test: question card ───────────────────────────────────────────── */
.fill-question-card {
  background: var(--surface2);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.25rem;
}

.fill-sentence {
  font-size: 1.15rem;
  line-height: 1.6;
  margin: 0;
}

.fill-blank {
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.05em;
}

/* ── Match test ──────────────────────────────────────────────────────────── */
.match-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 1rem;
}

.match-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.match-card {
  padding: 14px 16px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-size: .95rem;
  cursor: pointer;
  transition: border-color var(--tr), background var(--tr), transform .15s, opacity .15s;
  user-select: none;
  min-height: 56px;
  display: flex;
  align-items: center;
}

.match-card:hover:not(.match-correct) {
  border-color: var(--accent);
  background: var(--accent-light);
}

.match-card.match-selected {
  border-color: var(--accent);
  background: var(--accent-light);
  box-shadow: 0 0 0 3px rgba(37,99,235,.25);
}

.match-card.match-correct {
  background: var(--correct-bg);
  border-color: var(--correct-text);
  color: var(--correct-text);
  cursor: default;
}

.match-card.match-wrong {
  background: var(--wrong-bg);
  border-color: var(--wrong-text);
  color: var(--wrong-text);
  animation: shake .3s ease;
}

.match-card.match-dragging {
  opacity: .5;
  transform: scale(1.03);
}

.match-card.match-drag-over {
  border-color: var(--accent);
  background: var(--accent-light);
  box-shadow: 0 0 0 3px rgba(37,99,235,.25);
}

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

@media (max-width: 480px) {
  .match-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .match-card { padding: 10px 12px; font-size: .88rem; min-height: 48px; }
}

/* ── Words toolbar — hide all / show all ─────────────────────────────────── */
.words-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
  min-height: 2rem;
}

.words-hidden-count {
  font-size: 0.85rem;
  color: var(--text2);
}

/* ── Toggle switch ───────────────────────────────────────────────────────── */
.toggle-switch {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  cursor: pointer;
  user-select: none;
}

.toggle-switch__label {
  font-size: 0.85rem;
  color: var(--text2);
}

.toggle-switch__track {
  position: relative;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
}

.toggle-switch__track input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.toggle-switch__thumb {
  position: absolute;
  inset: 0;
  background: var(--border);
  border-radius: 99px;
  transition: background var(--tr);
}

.toggle-switch__thumb::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(0,0,0,.18);
  transition: transform var(--tr);
}

.toggle-switch__track input:checked ~ .toggle-switch__thumb {
  background: var(--accent);
}

.toggle-switch__track input:checked ~ .toggle-switch__thumb::after {
  transform: translateX(20px);
}

.toggle-switch:hover .toggle-switch__thumb {
  filter: brightness(0.95);
}

/* ── Difficulty tags — shown on the activity tab buttons ─────────────────── */
.diff-tag{
  font-size:.66rem;
  font-weight:700;
  letter-spacing:.03em;
  text-transform:uppercase;
  padding:2px 7px;
  border-radius:999px;
  line-height:1.5;
}
.diff-tag.easy{background:var(--diff-easy-bg);color:var(--diff-easy-text)}
.diff-tag.medium{background:var(--diff-medium-bg);color:var(--diff-medium-text)}
.diff-tag.hard{background:var(--diff-hard-bg);color:var(--diff-hard-text)}
.lesson-tab.active .diff-tag{background:rgba(255,255,255,.25);color:#fff}