:root {
  --gl-bg-soft: #f4f6ff;
  --gl-bg-accent: #e7fff4;
  --gl-panel: #ffffff;
  --gl-ink: #1a1b24;
  --gl-muted: #5e6276;
  --gl-border: #dbe1f2;
  --gl-brand: #0f8b8d;
  --gl-brand-dark: #085f63;
  --gl-danger: #bc2f4b;
  --gl-warn: #c27d27;
  --gl-good: #2a6fdb;
  --gl-easy: #188258;
}

.glossary-page {
  min-width: 260px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px 16px 40px;
  color: var(--gl-ink);
  font-family: 'Roboto', sans-serif;
}

.glossary-hero {
  border: 1px solid var(--gl-border);
  border-radius: 24px;
  padding: 22px;
  background:
    radial-gradient(circle at 90% 10%, rgba(15, 139, 141, 0.2) 0, rgba(15, 139, 141, 0) 45%),
    linear-gradient(140deg, var(--gl-bg-soft) 0%, var(--gl-bg-accent) 100%);
  box-shadow: 0 14px 34px rgba(20, 35, 60, 0.08);
}

.glossary-kicker {
  font-family: 'Inter', sans-serif;
  letter-spacing: 0.04em;
  font-size: 0.8rem;
  text-transform: uppercase;
  color: var(--gl-brand-dark);
  margin-bottom: 6px;
}

.glossary-hero h1 {
  font-family: 'Roboto Slab', serif;
  font-size: clamp(1.5rem, 1.1rem + 2.3vw, 2.5rem);
  line-height: 1.15;
  margin-bottom: 12px;
}

.glossary-intro {
  color: var(--gl-muted);
  max-width: 68ch;
}

.glossary-hero-stats {
  margin-top: 18px;
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
}

.glossary-hero-chip {
  border: 1px solid var(--gl-border);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.85);
  padding: 10px 12px;
}

.glossary-hero-chip span {
  display: block;
  color: var(--gl-muted);
  font-size: 0.8rem;
}

.glossary-hero-chip strong {
  display: block;
  margin-top: 2px;
  font-size: 1.25rem;
  line-height: 1;
}

.glossary-reset-btn {
  border: 0;
  border-radius: 14px;
  background: #121620;
  color: #fff;
  font-weight: 700;
  cursor: pointer;
  padding: 10px 14px;
}

.glossary-reset-btn:hover {
  background: #040507;
}

.glossary-layout {
  margin-top: 18px;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 16px;
}

.glossary-panel {
  border: 1px solid var(--gl-border);
  border-radius: 18px;
  background: var(--gl-panel);
  box-shadow: 0 8px 28px rgba(12, 26, 44, 0.06);
}

.glossary-panel-main {
  padding: 18px;
}

.glossary-panel-side {
  padding: 18px;
  display: flex;
  flex-direction: column;
  min-height: 620px;
}

.glossary-panel-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.glossary-panel-header h2 {
  font-family: 'Roboto Slab', serif;
  font-size: 1.35rem;
}

.glossary-subline {
  color: var(--gl-muted);
  font-size: 0.92rem;
}

.glossary-progress-grid {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.glossary-progress-card {
  border: 1px solid var(--gl-border);
  border-radius: 12px;
  padding: 8px 10px;
  background: #fafbff;
}

.glossary-progress-card span {
  display: block;
  color: var(--gl-muted);
  font-size: 0.77rem;
}

.glossary-progress-card strong {
  display: block;
  font-size: 1.08rem;
}

.glossary-flashcard {
  margin-top: 14px;
  width: 100%;
  min-height: 310px;
  border-radius: 18px;
  border: 1px solid var(--gl-border);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  padding: 18px;
  background: linear-gradient(165deg, #ffffff 0%, #f5f9ff 100%);
  cursor: pointer;
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}

.glossary-flashcard:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 22px rgba(9, 28, 52, 0.08);
}

.glossary-flashcard.is-revealed {
  background: linear-gradient(165deg, #f1fff9 0%, #e5f4ff 100%);
}

.glossary-face-label {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  background: #eff3ff;
  color: #3f4775;
  font-size: 0.82rem;
  font-family: 'Inter', sans-serif;
}

.glossary-flashcard h3 {
  margin-top: 14px;
  font-family: 'Roboto Slab', serif;
  font-size: clamp(1.2rem, 1rem + 1.2vw, 1.8rem);
  line-height: 1.2;
}

.glossary-flashcard p {
  margin-top: 12px;
  color: #2f3448;
}

.glossary-flashcard #flashcard-definition {
  font-size: clamp(1.08rem, 0.98rem + 0.4vw, 1.22rem);
  line-height: 1.45;
}

.glossary-help-line {
  margin-top: auto;
  width: 100%;
  padding-top: 10px;
  border-top: 1px dashed #cbd3ea;
  color: #6a7290;
  font-family: 'Inter', sans-serif;
  font-size: 0.82rem;
  letter-spacing: 0.01em;
  line-height: 1.35;
}

.glossary-help-line::before {
  content: 'Hint';
  display: inline-block;
  margin-right: 8px;
  padding: 1px 8px;
  border-radius: 999px;
  background: #edf2ff;
  color: #4c5887;
  font-size: 0.68rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  vertical-align: middle;
}

.glossary-flashcard.is-revealed .glossary-help-line {
  border-top-color: #bedccd;
  color: #4f5f5d;
}

.glossary-flashcard.is-revealed .glossary-help-line::before {
  background: #e3f6ec;
  color: #2f7055;
}

.glossary-controls {
  margin-top: 10px;
  display: flex;
  gap: 8px;
}

.glossary-btn {
  border: 1px solid var(--gl-border);
  border-radius: 12px;
  padding: 8px 12px;
  font-weight: 700;
  cursor: pointer;
}

.glossary-btn-neutral {
  background: var(--gl-brand);
  border-color: var(--gl-brand);
  color: #fff;
}

.glossary-btn-neutral:hover {
  background: var(--gl-brand-dark);
}

.glossary-btn-ghost {
  background: #fff;
}

.glossary-btn-ghost:hover {
  background: #f6f8ff;
}

.glossary-rating-row {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.glossary-rating-row.is-disabled {
  opacity: 0.45;
  pointer-events: none;
}

.glossary-rate {
  border: 0;
  border-radius: 12px;
  padding: 10px 8px;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
}

.glossary-rate-again {
  background: var(--gl-danger);
}

.glossary-rate-hard {
  background: var(--gl-warn);
}

.glossary-rate-good {
  background: var(--gl-good);
}

.glossary-rate-easy {
  background: var(--gl-easy);
}

.glossary-queue-message {
  margin-top: 10px;
  min-height: 22px;
  color: var(--gl-muted);
  font-size: 0.94rem;
}

.glossary-input-label {
  margin-top: 12px;
  color: var(--gl-muted);
  font-size: 0.85rem;
}

.glossary-search {
  margin-top: 6px;
  border: 1px solid var(--gl-border);
  border-radius: 12px;
  padding: 10px 12px;
}

.glossary-sort {
  margin-top: 6px;
  border: 1px solid var(--gl-border);
  border-radius: 12px;
  padding: 10px 12px;
  background: #fff;
}

.glossary-list {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  padding-right: 4px;
}

.glossary-item {
  border: 1px solid var(--gl-border);
  border-radius: 12px;
  padding: 10px;
  background: #fbfcff;
}

.glossary-item-top {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 10px;
}

.glossary-item-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.glossary-item-term {
  font-family: 'Roboto Slab', serif;
  font-size: 1rem;
  line-height: 1.25;
}

.glossary-item-def {
  margin-top: 6px;
  color: #35394c;
  font-size: 0.92rem;
}

.glossary-pill {
  border-radius: 999px;
  padding: 2px 9px;
  font-size: 0.76rem;
  font-family: 'Inter', sans-serif;
  white-space: nowrap;
  border: 1px solid var(--gl-border);
  color: #44506f;
  background: #f3f6ff;
}

.glossary-pill-learning {
  color: #7a4e0d;
  background: #fff5e8;
  border-color: #f8ddb1;
}

.glossary-pill-mastered {
  color: #11613f;
  background: #e8fff3;
  border-color: #b8e5cf;
}

.glossary-pill-new {
  color: #33416b;
  background: #eef2ff;
  border-color: #d7ddf5;
}

.is-hidden {
  display: none;
}

@media (max-width: 990px) {
  .glossary-layout {
    grid-template-columns: 1fr;
  }

  .glossary-panel-side {
    min-height: 420px;
  }
}

@media (max-width: 640px) {
  .glossary-page {
    padding-left: 12px;
    padding-right: 12px;
  }

  .glossary-hero,
  .glossary-panel-main,
  .glossary-panel-side {
    padding: 14px;
    border-radius: 14px;
  }

  .glossary-progress-grid {
    grid-template-columns: 1fr;
  }

  .glossary-rating-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


/*# sourceMappingURL=glossary.8d8034b2.css.map*/