/* =========================
ROOT THEME VARIABLES
Change colors here only
========================= */

:root {
  --primary: #4f7cff;
  --primary-light: #6aa0ff;

  --inactive: #ccccc8;
  --inactive-light: #f5f5f0;

  --bg: #f4f6fb;
  --card-bg: white;

  --text: #222;
  --text-light: #666;

  --border: #cfd7e6;

  --correct: #28c76f;
  --incorrect: #ff4d4f;

  --radius-lg: 16px;
  --radius-md: 12px;
  --radius-sm: 8px;

  --shadow-card: 0 8px 25px rgba(0, 0, 0, 0.08);
  --shadow-hover: 0 15px 35px rgba(0, 0, 0, 0.12);
  --shadow-btn: 0 4px 12px rgba(0, 0, 0, 0.15);

  --transition: 0.25s;

  --font-ui: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;
  --font-stem: "Source Serif 4", "Iowan Old Style", "Palatino Linotype", serif;

  --bg-hero-wash: rgba(79, 124, 255, 0.16);
  --bg-hero-wash-mid: rgba(79, 124, 255, 0.06);

  --progress-track: #d5dced;
  --progress-track-border: rgba(34, 34, 34, 0.1);
  --progress-fill-start: var(--primary);
  --progress-fill-end: var(--primary-light);
}

body.subject-biology {
  --primary: #2d9f6f;
  --primary-light: #47b888;

  --bg: #f2f9f6;

  --border: #c5ddd3;

  --bg-hero-wash: rgba(45, 159, 111, 0.18);
  --bg-hero-wash-mid: rgba(45, 159, 111, 0.07);

  --bio-cell-pattern: url("../images/backgrounds/bio-cells-light.svg");
  --bio-cell-size: 160px 160px;

  --progress-track: #b8d4c8;
  --progress-track-border: rgba(45, 159, 111, 0.28);
}

body.subject-chemistry {
  --primary: #7c5cbf;
  --primary-light: #9575d4;

  --bg: #f6f3fb;

  --border: #d4c8e8;

  --bg-hero-wash: rgba(124, 92, 191, 0.18);
  --bg-hero-wash-mid: rgba(124, 92, 191, 0.07);

  --chem-hex-pattern: url("../images/backgrounds/chem-hex-light.svg");
  --chem-hex-size: 56px 97px;

  --progress-track: #b9a6d6;
  --progress-track-border: rgba(124, 92, 191, 0.35);
}

.subject-card--biology {
  --card-primary: #2d9f6f;
  --card-primary-light: #47b888;
}

.subject-card--chemistry {
  --card-primary: #7c5cbf;
  --card-primary-light: #9575d4;
}

.subject-card--biology .btn,
.subject-card--biology .card-link {
  background: linear-gradient(
    135deg,
    var(--card-primary),
    var(--card-primary-light)
  );
}

.subject-card--chemistry .btn,
.subject-card--chemistry .card-link {
  background: linear-gradient(
    135deg,
    var(--card-primary),
    var(--card-primary-light)
  );
}

/* =========================
BASE LAYOUT
========================= */

body {
  font-family: var(--font-ui);

  background:
    linear-gradient(
      180deg,
      var(--bg-hero-wash) 0%,
      var(--bg-hero-wash-mid) 30%,
      transparent 55%
    ),
    var(--bg);

  min-height: 100vh;

  margin: 0;

  padding: 88px 40px 40px;

  color: var(--text);

  font-size: 16px;

  line-height: 1.5;

  -webkit-font-smoothing: antialiased;
}

/* Subject ambience on catalog pages — quiz keeps hero wash only */
body[data-page="subject"].subject-biology {
  background:
    linear-gradient(
      180deg,
      var(--bg-hero-wash) 0%,
      var(--bg-hero-wash-mid) 30%,
      transparent 55%
    ),
    var(--bio-cell-pattern), var(--bg);

  background-size: auto, var(--bio-cell-size), auto;

  background-position:
    0 0,
    27px 19px,
    0 0;
}

body[data-page="subject"].subject-chemistry {
  background:
    linear-gradient(
      180deg,
      var(--bg-hero-wash) 0%,
      var(--bg-hero-wash-mid) 30%,
      transparent 55%
    ),
    var(--chem-hex-pattern), var(--bg);

  background-size: auto, var(--chem-hex-size), auto;
}

.stem-text {
  font-family: var(--font-stem);

  letter-spacing: 0.01em;
}

.stem-text sub,
.stem-text sup {
  font-family: inherit;

  font-size: 0.65em;

  font-weight: 600;

  line-height: 1;
}

.stem-text sub {
  vertical-align: sub;
}

.stem-text sup {
  vertical-align: super;
}

#prompt.stem-text,
.draggable-text.stem-text,
.mc-option.stem-text {
  font-weight: 400;

  line-height: 1.55;
}

.feedback-main.stem-text,
.feedback-explanation.stem-text {
  line-height: 1.6;
}

.container {
  max-width: 1300px;

  margin: auto;

  padding: 0 20px;

  text-align: center;
}

/* =========================
SITE HEADER
========================= */

.site-header {
  position: fixed;

  top: 0;

  left: 0;

  z-index: 100;

  width: 100%;

  background: rgba(255, 255, 255, 0.92);

  border-bottom: 1px solid var(--border);

  backdrop-filter: blur(10px);
}

.site-header-inner {
  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 16px;

  max-width: 1300px;

  margin: 0 auto;

  padding: 14px 20px;
}

.site-logo {
  font-size: 17px;

  font-weight: 700;

  color: var(--text);

  text-decoration: none;

  white-space: nowrap;
}

.breadcrumbs {
  display: flex;

  align-items: center;

  flex: 1;

  flex-wrap: wrap;

  gap: 8px;

  font-size: 14px;

  color: var(--text-light);

  min-width: 0;
}

.theme-toggle {
  flex-shrink: 0;

  display: flex;

  align-items: center;

  justify-content: center;

  width: 40px;

  height: 40px;

  padding: 0;

  font-size: 18px;

  line-height: 1;

  background: var(--card-bg);

  border: 1px solid var(--border);

  border-radius: var(--radius-sm);

  cursor: pointer;

  transition: var(--transition);
}

.theme-toggle:hover {
  border-color: var(--primary);
}

.breadcrumbs a {
  color: var(--primary);

  text-decoration: none;

  font-weight: 500;
}

.breadcrumbs a:hover {
  text-decoration: underline;
}

.breadcrumb-sep {
  color: #bbb;
}

.breadcrumb-current {
  color: var(--text);

  font-weight: 500;
}

.section-title {
  margin: 0 0 24px;

  font-size: 22px;

  font-weight: 600;
}

.recent-section {
  margin-bottom: 36px;

  text-align: left;
}

.recent-list {
  display: flex;

  flex-wrap: wrap;

  gap: 10px;
}

.recent-item {
  display: flex;

  flex-direction: column;

  gap: 2px;

  padding: 12px 16px;

  background: var(--card-bg);

  border: 1px solid var(--border);

  border-radius: var(--radius-md);

  text-decoration: none;

  box-shadow: var(--shadow-card);

  transition: var(--transition);
}

.recent-item:hover {
  border-color: var(--primary);

  transform: translateY(-2px);
}

.recent-item-title {
  font-size: 15px;

  font-weight: 600;

  color: var(--text);
}

.recent-item-meta {
  font-size: 12px;

  color: var(--text-light);
}

.quiz-controls {
  max-width: 720px;

  margin: 0 auto 32px;
}

.quiz-filter-wrap {
  margin-bottom: 20px;

  text-align: left;
}

.filter-label,
.search-label {
  display: block;

  margin-bottom: 8px;

  font-size: 14px;

  font-weight: 600;

  color: var(--text);
}

.quiz-filters {
  display: flex;

  flex-wrap: wrap;

  gap: 8px;
}

.quiz-filter-chip {
  padding: 8px 14px;

  font-family: var(--font-ui);

  font-size: 14px;

  font-weight: 500;

  line-height: 1.2;

  color: var(--text);

  background: var(--card-bg);

  border: 2px solid var(--border);

  border-radius: 999px;

  cursor: pointer;

  transition: var(--transition);
}

.quiz-filter-chip:hover {
  border-color: var(--primary);

  background: var(--inactive-light);
}

.quiz-filter-chip--active {
  color: #fff;

  background: var(--primary);

  border-color: var(--primary);
}

.quiz-filter-chip--active:hover {
  color: #fff;

  background: var(--primary);

  border-color: var(--primary);
}

.quiz-search-wrap {
  text-align: left;
}

.quiz-search {
  width: 100%;

  padding: 12px 16px;

  font-family: var(--font-ui);

  font-size: 15px;

  border: 2px solid var(--border);

  border-radius: var(--radius-md);

  background: var(--card-bg);

  box-sizing: border-box;

  transition: var(--transition);
}

.quiz-search:focus {
  outline: none;

  border-color: var(--primary);
}

.quiz-card.hidden,
.quiz-unit.hidden {
  display: none;
}

/* =========================
TYPOGRAPHY
========================= */

h1 {
  font-size: 40px;

  font-weight: 700;

  letter-spacing: -0.02em;

  margin-bottom: 10px;
}

h2 {
  margin-top: 40px;

  font-weight: 600;

  letter-spacing: -0.01em;
}

h3 {
  font-weight: 600;
}

p {
  color: var(--text-light);

  line-height: 1.55;
}

/* =========================
HERO
========================= */

.hero {
  margin-bottom: 50px;
}

/* =========================
SUBJECT GRID
========================= */

.subject-grid {
  display: flex;

  flex-wrap: wrap;

  justify-content: center;

  gap: 25px;

  margin-top: 30px;

  flex-grow: 1;
}

.quiz-unit .subject-grid {
  margin-top: 0;
}

.subject-card {
  background: var(--card-bg);

  padding: 30px;

  border-radius: var(--radius-lg);

  width: 100%;

  max-width: 320px;

  box-shadow: var(--shadow-card);

  transition: var(--transition);

  display: flex;

  flex-direction: column;

  justify-content: space-between;
}

.subject-card:hover {
  transform: translateY(-6px);

  box-shadow: var(--shadow-hover);
}

.subject-icon {
  font-size: 42px;

  margin-bottom: 10px;
}

.quiz-meta {
  font-size: 13px;

  color: var(--text-light);

  margin: 0 0 18px;
}

.quiz-unit {
  margin-bottom: 48px;

  text-align: center;
}

.quiz-unit-title {
  margin: 0 0 24px;

  font-size: 22px;

  font-weight: 600;

  color: var(--text);
}

.card-link,
.nav-link {
  display: inline-block;

  text-decoration: none;

  text-align: center;
}

a.card-link {
  box-sizing: border-box;
}

.nav-link {
  margin-top: 20px;
}

/* =========================
BUTTON SYSTEM
========================= */

.btn {
  background: linear-gradient(135deg, var(--primary), var(--primary-light));

  color: white;

  font-family: var(--font-ui);

  border: none;

  padding: 14px 26px;

  font-size: 18px;

  border-radius: var(--radius-md);

  cursor: pointer;

  box-shadow: var(--shadow-btn);

  transition: 0.2s;
}

.btn:hover {
  transform: scale(1.05);
}

.btn:active {
  transform: scale(0.95);
}

.btn-full {
  width: 100%;
}

.btn-small {
  width: auto;

  font-size: 16px;

  padding: 10px 22px;

  margin-top: 20px;
}

.btn-small:disabled {
  background: linear-gradient(135deg, var(--inactive), var(--inactive-light));
  color: rgb(255, 255, 255);
  cursor: not-allowed;
  transform: none;
}

.btn-disabled {
  background: #ccc;

  cursor: not-allowed;

  transform: none;
}

/* =========================
QUIZ AREA
========================= */

.question-area {
  margin: 40px 0;

  display: flex;

  justify-content: center;
}

/* NEW PROMPT CONTAINER */

#prompt-container {
  display: flex;

  justify-content: center;

  margin-bottom: 20px;

  align-items: center;

  justify-content: center;

  background: linear-gradient(135deg, var(--primary), var(--primary-light));

  color: white;

  padding: 24px;

  border-radius: var(--radius-lg);

  cursor: grab;

  min-height: 100px;

  max-width: 600px;

  width: 100%;

  margin: 0;

  box-shadow: var(--shadow-btn);

  transition: 0.2s;

  gap: 10px;
}

#prompt-container.prompt-static {
  min-height: 0;

  cursor: default;

  padding: 18px 24px;
}

#prompt-container.prompt-static #prompt {
  line-height: 1.45;
}

#prompt {
  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  gap: 12px;

  width: 100%;

  font-size: 20px;

  font-weight: 500;

  text-align: center;

  max-width: 600px;
}

.instruction-container {
  display: flex;

  justify-content: center;
}

#instruction-text {
  font-size: 16px;

  font-weight: 500;

  text-align: center;

  max-width: 600px;
}

.draggable-text {
  font-size: 20px;

  font-weight: 500;

  line-height: 1.4;
}

#interaction-area {
  display: flex;

  justify-content: center;

  min-height: 110px;
}

.answer {
  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  background: linear-gradient(135deg, var(--primary), var(--primary-light));

  color: white;

  padding: 24px;

  border-radius: var(--radius-lg);

  cursor: grab;

  min-height: 50px;

  min-width: 150px;

  max-width: 600px;

  width: 100%;

  margin: 0;

  box-shadow: var(--shadow-btn);

  transition: 0.2s;

  gap: 10px;
}

.answer.dragging {
  opacity: 0.6;

  transform: scale(1.05);

  cursor: grabbing;
}

.answer.hidden {
  display: none;
}

.answer.static {
  cursor: default;

  background: var(--inactive-light);

  color: var(--text);

  box-shadow: var(--shadow-card);
}

.answer.static:hover {
  transform: none;
}

/* quiz media */

.quiz-image {
  max-width: 220px;

  border-radius: var(--radius-sm);

  background: white;

  padding: 6px;

  box-shadow: var(--shadow-card);
}

.image-instruction {
  font-size: 16px;

  opacity: 0.9;
}

/* =========================
CATEGORY ZONES
========================= */

.categories {
  display: flex;

  flex-wrap: wrap;

  justify-content: center;

  gap: 15px;

  margin-top: 30px;
}

.categories.locked {
  pointer-events: none;
}

.dropzone {
  padding: 20px;

  text-align: center;

  border: 2px dashed var(--border);

  border-radius: var(--radius-md);

  font-weight: 600;

  color: var(--text);

  background: var(--card-bg);

  transition: 0.2s;

  max-width: 160px;

  min-width: 140px;
}

.dropzone:hover {
  border-color: var(--primary);

  background: var(--inactive-light);

  transform: scale(1.03);
}

.dropzone.dragover {
  border-color: var(--primary);

  background: var(--inactive-light);

  transform: scale(1.05);

  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}

.dropzone.correct {
  border-color: var(--correct);

  background: #eafff3;
}

.dropzone.incorrect {
  border-color: var(--incorrect);

  background: #ffecec;
}

/* =========================
PROGRESS
========================= */

.progress-container {
  width: 100%;

  height: 12px;

  background: var(--progress-track);

  border: 1px solid var(--progress-track-border);

  border-radius: 999px;

  overflow: hidden;

  margin-bottom: 30px;

  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08);
}

#progress-bar {
  height: 100%;

  width: 0%;

  background: linear-gradient(
    135deg,
    var(--progress-fill-start),
    var(--progress-fill-end)
  );

  box-shadow: 0 0 10px
    color-mix(in srgb, var(--progress-fill-end) 50%, transparent);

  transition: 0.5s;
}

/* =========================
FEEDBACK
========================= */

#feedback {
  margin-top: 20px;

  opacity: 0;

  transition: opacity 0.35s ease;

  min-height: 24px;
}

.feedback-panel {
  margin: 0 auto;

  max-width: 600px;

  padding: 18px 22px;

  text-align: left;

  background: var(--card-bg);

  border-radius: var(--radius-md);

  box-shadow: var(--shadow-card);
}

.feedback-panel--correct {
  background: linear-gradient(180deg, #f8fffb 0%, var(--card-bg) 100%);
}

.feedback-panel--incorrect {
  background: linear-gradient(180deg, #fffafa 0%, var(--card-bg) 100%);
}

.feedback-panel--skipped {
  background: linear-gradient(180deg, #f8f9fc 0%, var(--card-bg) 100%);
}

.feedback-main {
  margin: 0;

  font-size: 17px;

  font-weight: 600;

  line-height: 1.4;

  color: var(--text);
}

.feedback-headline {
  display: block;
}

.feedback-panel--correct .feedback-headline {
  color: #22966a;
}

.feedback-panel--incorrect .feedback-headline {
  color: #c9484a;
}

.feedback-panel--skipped .feedback-headline {
  color: var(--text-light);
}

.feedback-detail {
  display: block;

  margin-top: 6px;

  font-size: 16px;

  font-weight: 500;

  color: var(--text);
}

.feedback-explanation {
  margin: 14px 0 0;

  padding-top: 14px;

  border-top: 1px solid var(--border);

  font-size: 15px;

  font-weight: 400;

  line-height: 1.6;

  color: var(--text-light);
}

#feedback.show {
  opacity: 1;
}

.mode-screen {
  max-width: 720px;

  margin: 40px auto 0;

  padding: 32px 24px;

  background: var(--card-bg);

  border-radius: var(--radius-lg);

  box-shadow: var(--shadow-card);
}

.mode-screen.hidden {
  display: none;
}

.mode-intro {
  margin-bottom: 24px;
}

.mode-options {
  display: grid;

  gap: 14px;
}

.mode-card {
  display: block;

  width: 100%;

  padding: 18px 20px;

  text-align: left;

  background: white;

  border: 2px solid var(--border);

  border-radius: var(--radius-md);

  cursor: pointer;

  transition: var(--transition);

  box-shadow: var(--shadow-card);
}

.mode-card strong {
  display: block;

  margin-bottom: 6px;

  font-size: 17px;

  color: var(--text);
}

.mode-card span {
  font-size: 14px;

  line-height: 1.45;

  color: var(--text-light);
}

.mode-card:hover {
  border-color: var(--primary);

  transform: translateY(-2px);
}

.mode-badge {
  display: inline-block;

  margin: 0 0 8px;

  padding: 6px 12px;

  font-size: 13px;

  font-weight: 500;

  color: var(--primary);

  background: #eef2ff;

  border-radius: 999px;
}

.mode-badge.hidden,
.hidden {
  display: none;
}

.question-progress {
  margin: 0 0 12px;

  font-size: 15px;

  font-weight: 600;

  color: var(--text);
}

.final-actions {
  display: flex;

  flex-wrap: wrap;

  justify-content: center;

  gap: 12px;

  margin-top: 20px;
}

/* =========================
SCORE
========================= */

.score {
  margin-top: 15px;

  font-size: 18px;

  font-weight: 600;
}

/* =========================
FINAL SCREEN
========================= */

#final-screen {
  margin-top: 40px;
}

#final-screen h2 {
  font-size: 28px;

  outline: none;
}

.final-tier {
  margin: 12px 0 0;

  font-size: 17px;

  font-weight: 500;

  color: var(--text);
}

.final-score-display {
  margin: 16px 0 0;

  font-size: 48px;

  font-weight: 700;

  line-height: 1;

  color: var(--primary);
}

.final-detail {
  margin: 10px 0 0;

  font-size: 16px;

  color: var(--text-light);
}

.final-hint {
  margin: 16px auto 0;

  max-width: 420px;

  font-size: 14px;

  line-height: 1.5;

  color: var(--text-light);
}

.btn-emphasis {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

/* =========================
FOOTER
========================= */

footer {
  margin-top: 60px;

  color: #777;
}

/* =========================
MOBILE
========================= */

@media (max-width: 600px) {
  body {
    padding: 76px 20px 20px;
  }

  .site-header-inner {
    flex-direction: column;

    align-items: flex-start;

    gap: 8px;
  }

  h1 {
    font-size: 30px;
  }

  .answer {
    font-size: 18px;

    padding: 18px;

    min-height: 90px;
  }

  .quiz-image {
    max-width: 180px;
  }

  .btn {
    font-size: 16px;

    padding: 12px;
  }

  .categories {
    gap: 10px;
  }

  .dropzone {
    min-width: 120px;

    padding: 16px;
  }
}

.dropzone.dragover {
  border-color: var(--primary);

  background: var(--inactive-light);

  transform: scale(1.06);

  box-shadow: 0 10px 22px rgba(79, 124, 255, 0.25);
}

.mc-option {
  display: block;

  width: 100%;

  max-width: 520px;

  margin: 10px auto;

  padding: 18px;

  font-size: 18px;

  background: white;

  border: 2px solid var(--border);

  border-radius: var(--radius-md);

  cursor: pointer;

  transition: 0.2s;

  box-shadow: var(--shadow-card);
}

.mc-option:hover {
  border-color: var(--primary);

  background: #eef2ff;

  transform: scale(1.03);
}

.mc-option.correct {
  border-color: var(--correct);

  background: #eafff3;
}

.mc-option.incorrect {
  border-color: var(--incorrect);

  background: #ffecec;
}

/* =========================
SCIENCE LOADING SCREEN
========================= */

#loading-screen {
  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background: var(--bg);

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  z-index: 999;

  transition: 0.45s ease;
}

/* fade out */

#loading-screen.hidden {
  opacity: 0;

  pointer-events: none;
}

/* loader container */

.science-loader {
  position: relative;

  width: 90px;

  height: 90px;

  margin-bottom: 25px;

  display: flex;

  align-items: center;

  justify-content: center;
}

/* spinner ring */

.loader-ring {
  position: absolute;

  width: 90px;

  height: 90px;

  border-radius: 50%;

  border: 6px solid #e2e6f3;

  border-top: 6px solid var(--primary);

  border-right: 6px solid var(--primary-light);

  animation: spin 1.4s linear infinite;

  box-shadow:
    0 0 18px rgba(79, 124, 255, 0.15),
    inset 0 0 12px rgba(79, 124, 255, 0.08);
}

/* center emoji */

.science-emoji {
  font-size: 40px;

  z-index: 2;

  animation:
    float 1.8s ease-in-out infinite,
    glow 2s ease-in-out infinite;
}

/* loading text */

.loading-text {
  font-size: 18px;

  color: var(--text-light);

  font-weight: 500;

  letter-spacing: 0.3px;

  animation: fadePulse 2.2s ease-in-out infinite;
}

/* =========================
ANIMATIONS
========================= */

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* gentle float */

@keyframes float {
  0% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(-7px);
  }

  100% {
    transform: translateY(0px);
  }
}

/* glow pulse */

@keyframes glow {
  0% {
    transform: scale(0.95);

    text-shadow: 0 0 0px transparent;
  }

  50% {
    transform: scale(1.12);

    text-shadow:
      0 0 22px rgba(79, 124, 255, 0.55),
      0 0 42px rgba(79, 124, 255, 0.25);
  }

  100% {
    transform: scale(0.95);

    text-shadow: 0 0 0px transparent;
  }
}

/* text breathing */

@keyframes fadePulse {
  0% {
    opacity: 0.5;
  }

  50% {
    opacity: 1;
  }

  100% {
    opacity: 0.5;
  }
}

/* =========================
FOCUS & MOTION
========================= */

.btn:focus-visible,
.card-link:focus-visible,
.nav-link:focus-visible,
.mc-option:focus-visible,
.mode-card:focus-visible,
.quiz-filter-chip:focus-visible,
.quiz-search:focus-visible,
.recent-item:focus-visible,
.theme-toggle:focus-visible,
.dropzone:focus-visible {
  outline: 2px solid var(--primary);

  outline-offset: 2px;
}

.btn:focus:not(:focus-visible),
.mc-option:focus:not(:focus-visible),
.mode-card:focus:not(:focus-visible),
.theme-toggle:focus:not(:focus-visible) {
  outline: none;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;

    animation-iteration-count: 1 !important;

    transition-duration: 0.01ms !important;

    scroll-behavior: auto !important;
  }
}

/* =========================
DARK MODE
========================= */

[data-theme="dark"] {
  color-scheme: dark;

  --inactive: #555;
  --inactive-light: #2e3239;

  --bg: #1a1d24;
  --card-bg: #252932;

  --text: #e8eaed;
  --text-light: #9aa0a9;

  --border: #3a4049;

  --shadow-card: 0 8px 25px rgba(0, 0, 0, 0.35);
  --shadow-hover: 0 15px 35px rgba(0, 0, 0, 0.45);
  --shadow-btn: 0 4px 12px rgba(0, 0, 0, 0.4);

  --bg-hero-wash: rgba(79, 124, 255, 0.1);
  --bg-hero-wash-mid: rgba(79, 124, 255, 0.04);

  --progress-track: #2e3239;
  --progress-track-border: rgba(255, 255, 255, 0.12);
  --progress-fill-start: #6aa0ff;
  --progress-fill-end: #8cb8ff;
}

[data-theme="dark"] body.subject-biology {
  --bg: #1a2420;

  --border: #2d4a3a;

  --bg-hero-wash: rgba(45, 159, 111, 0.12);
  --bg-hero-wash-mid: rgba(45, 159, 111, 0.04);

  --bio-cell-pattern: url("../images/backgrounds/bio-cells-dark.svg");

  --progress-track: #243830;
  --progress-track-border: rgba(71, 184, 136, 0.35);
  --progress-fill-start: #47b888;
  --progress-fill-end: #6fd4a8;
}

[data-theme="dark"] body.subject-chemistry {
  --bg: #1f1a28;

  --border: #3d3550;

  --bg-hero-wash: rgba(124, 92, 191, 0.12);
  --bg-hero-wash-mid: rgba(124, 92, 191, 0.04);

  --chem-hex-pattern: url("../images/backgrounds/chem-hex-dark.svg");

  --progress-track: #3a3048;
  --progress-track-border: rgba(180, 152, 232, 0.4);
  --progress-fill-start: #b298e8;
  --progress-fill-end: #d0b8f8;
}

[data-theme="dark"] body[data-page="subject"].subject-biology {
  background:
    linear-gradient(
      180deg,
      var(--bg-hero-wash) 0%,
      var(--bg-hero-wash-mid) 30%,
      transparent 55%
    ),
    var(--bio-cell-pattern), var(--bg);

  background-size: auto, var(--bio-cell-size), auto;

  background-position:
    0 0,
    27px 19px,
    0 0;
}

[data-theme="dark"] body[data-page="subject"].subject-chemistry {
  background:
    linear-gradient(
      180deg,
      var(--bg-hero-wash) 0%,
      var(--bg-hero-wash-mid) 30%,
      transparent 55%
    ),
    var(--chem-hex-pattern), var(--bg);

  background-size: auto, var(--chem-hex-size), auto;
}

[data-theme="dark"] .site-header {
  background: rgba(37, 41, 50, 0.92);
}

[data-theme="dark"] .mode-card,
[data-theme="dark"] .recent-item,
[data-theme="dark"] .quiz-filter-chip,
[data-theme="dark"] .quiz-search,
[data-theme="dark"] .theme-toggle {
  background: var(--card-bg);
}

[data-theme="dark"] .quiz-filter-chip--active,
[data-theme="dark"] .quiz-filter-chip--active:hover {
  color: #fff;

  background: var(--primary);

  border-color: var(--primary);
}

[data-theme="dark"] .mode-card:hover,
[data-theme="dark"] .dropzone:hover {
  background: #343a46;

  border-color: var(--primary-light);
}

[data-theme="dark"] .dropzone.dragover {
  background: #3a4458;

  border-color: var(--primary-light);

  box-shadow: 0 10px 22px rgba(106, 160, 255, 0.2);
}

[data-theme="dark"] .dropzone.correct {
  background: #1e2e26;

  border-color: var(--correct);
}

[data-theme="dark"] .dropzone.incorrect {
  background: #2e2222;

  border-color: var(--incorrect);
}

[data-theme="dark"] .mc-option:hover {
  background: #2e3239;
}

[data-theme="dark"] .feedback-panel--correct {
  background: linear-gradient(180deg, #1e2e26 0%, var(--card-bg) 100%);
}

[data-theme="dark"] .feedback-panel--incorrect {
  background: linear-gradient(180deg, #2e2222 0%, var(--card-bg) 100%);
}

[data-theme="dark"] .feedback-panel--skipped {
  background: linear-gradient(180deg, #242830 0%, var(--card-bg) 100%);
}

[data-theme="dark"] .feedback-panel--correct .feedback-headline {
  color: #5ecf9a;
}

[data-theme="dark"] .feedback-panel--incorrect .feedback-headline {
  color: #f07178;
}

[data-theme="dark"] .mode-badge {
  background: #2a3344;
}

[data-theme="dark"] .loader-ring {
  border-color: #3a4049;

  border-top-color: var(--primary);

  border-right-color: var(--primary-light);
}

/* =========================
LOAD ERRORS
========================= */

.load-error {
  max-width: 520px;

  margin: 40px auto;

  padding: 32px 28px;

  background: var(--card-bg);

  border-radius: var(--radius-lg);

  box-shadow: var(--shadow-card);
}

.load-error h2 {
  margin: 0 0 12px;

  font-size: 24px;
}

.load-error p {
  margin: 0 0 20px;

  color: var(--text-light);

  line-height: 1.55;
}

/* =========================
LEWIS DOT STRUCTURES
========================= */

#lewis-content.hidden,
.lewis-feedback:not(.show) {
  display: none;
}

#lewis-content {
  display: flex;

  flex-direction: column;

  align-items: center;

  font-family: var(--font-ui);
}

.lewis-formula,
.lewis-atom,
.lewis-ion-charge,
.stem-text {
  font-family: var(--font-stem);
}

#lewis-content > :not(footer) {
  width: 100%;

  max-width: 920px;
}

#lewis-content .mode-badge {
  margin-bottom: 8px;
}

.lewis-question-area {
  margin-bottom: 8px;
}

.lewis-workspace {
  display: flex;

  flex-direction: column;

  gap: 16px;

  align-items: stretch;

  width: 100%;

  max-width: 680px;

  margin-inline: auto;
}

.lewis-workspace--octahedral {
  max-width: min(100%, 1040px);
}

#lewis-content.lewis-content--octahedral > :not(footer) {
  max-width: 1080px;
}

.lewis-board-wrap,
.lewis-palette {
  box-sizing: border-box;

  width: 100%;

  padding: 18px;

  background: var(--card-bg);

  border: 1px solid var(--border);

  border-radius: var(--radius-md);

  box-shadow: var(--shadow-card);
}

.lewis-board-wrap {
  --lewis-scale: 1;
  --lewis-slot-size: calc(48px * var(--lewis-scale));
  --lewis-atom-size: calc(44px * var(--lewis-scale));
  --lewis-dot-size: calc(16px * var(--lewis-scale));
  --lewis-dot-gap: calc(3px * var(--lewis-scale));

  padding-bottom: 22px;

  overflow: visible;
}

.lewis-board-wrap--octahedral {
  padding-inline: clamp(22px, 3.5vw, 40px);
}

.lewis-board-wrap--octahedral .lewis-ion-body {
  flex: 1 1 auto;

  min-width: min-content;
}

.lewis-ion-display--octahedral.lewis-ion-display--charged {
  gap: clamp(10px, 1.5vw, 18px);
}

.lewis-ion-display--octahedral.lewis-ion-display--charged
  .lewis-ion-bracket:first-of-type {
  margin-right: 0;
}

.lewis-ion-display--octahedral.lewis-ion-display--charged
  .lewis-ion-bracket:last-of-type {
  margin-left: 0;
}

.lewis-palette {
  min-width: 0;

  display: grid;

  grid-template-columns: repeat(3, minmax(0, 1fr));

  gap: 10px;

  align-items: stretch;
}

.lewis-palette-title {
  grid-column: 1 / -1;

  margin: 0 0 4px;

  font-family: var(--font-ui);

  font-size: 14px;

  font-weight: 600;

  color: var(--text-light);
}

.lewis-palette-hint {
  grid-column: 1 / -1;

  margin: 6px 0 0;

  font-family: var(--font-ui);

  font-size: 12px;

  line-height: 1.5;

  color: var(--text-light);
}

.lewis-token {
  box-sizing: border-box;

  display: flex;

  align-items: center;

  gap: 8px;

  width: 100%;

  max-width: 100%;

  margin-bottom: 0;

  padding: 10px 12px;

  background: var(--inactive-light);

  border: 2px solid var(--border);

  border-radius: var(--radius-sm);

  cursor: grab;

  transition: var(--transition);
}

.lewis-token:last-of-type {
  margin-bottom: 0;
}

.lewis-token:hover,
.lewis-token--selected {
  border-color: var(--primary);

  background: var(--card-bg);
}

.lewis-token--selected {
  box-shadow: 0 0 0 3px rgba(124, 92, 191, 0.18);
}

.lewis-token--disabled {
  opacity: 0.55;

  cursor: not-allowed;
}

.lewis-board--locked .lewis-slot {
  pointer-events: none;

  cursor: default;
}

.lewis-token-glyph {
  display: flex;

  flex-shrink: 0;

  align-items: center;

  justify-content: center;

  width: 24px;

  font-size: 20px;

  font-weight: 700;

  line-height: 1;
}

.lewis-token-glyph--lone-pair {
  gap: 2px;

  width: auto;
}

.lewis-token-glyph--lone-pair .lewis-dot {
  width: auto;

  height: auto;

  font-size: 18px;
}

.lewis-token-label {
  flex: 1;

  min-width: 0;

  font-family: var(--font-ui);

  font-size: 13px;

  font-weight: 600;
}

@media (min-width: 1024px) {
  .lewis-board-wrap {
    --lewis-scale: 1.25;
  }
}

@media (min-width: 1280px) {
  .lewis-board-wrap {
    --lewis-scale: 1.45;
  }
}

@media (min-width: 1600px) {
  .lewis-board-wrap {
    --lewis-scale: 1.7;
  }
}

.lewis-formula {
  margin: 0 0 20px;

  font-size: clamp(28px, 2.2vw, 36px);

  font-weight: 700;

  text-align: center;
}

.lewis-ion-display {
  display: flex;

  align-items: center;

  justify-content: center;

  width: 100%;

  max-width: 100%;
}

.lewis-ion-display--charged {
  align-items: stretch;
}

.lewis-ion-body {
  flex: 0 1 auto;

  min-width: 0;
}

.lewis-ion-bracket,
.lewis-ion-charge {
  display: none;
}

.lewis-ion-display--charged .lewis-ion-bracket {
  display: block;

  align-self: stretch;

  flex-shrink: 0;

  width: calc(12px * var(--lewis-scale));

  font-size: 0;

  line-height: 0;

  color: transparent;

  user-select: none;
}

.lewis-ion-display--charged .lewis-ion-bracket:first-of-type {
  border-top: calc(2.5px * var(--lewis-scale)) solid var(--text);

  border-bottom: calc(2.5px * var(--lewis-scale)) solid var(--text);

  border-left: calc(2.5px * var(--lewis-scale)) solid var(--text);

  border-top-left-radius: calc(6px * var(--lewis-scale));

  border-bottom-left-radius: calc(6px * var(--lewis-scale));
}

.lewis-ion-display--charged .lewis-ion-bracket:last-of-type {
  border-top: calc(2.5px * var(--lewis-scale)) solid var(--text);

  border-bottom: calc(2.5px * var(--lewis-scale)) solid var(--text);

  border-right: calc(2.5px * var(--lewis-scale)) solid var(--text);

  border-top-right-radius: calc(6px * var(--lewis-scale));

  border-bottom-right-radius: calc(6px * var(--lewis-scale));
}

.lewis-ion-display--charged .lewis-ion-bracket:first-of-type {
  margin-right: clamp(4px, 1vw, 10px);
}

.lewis-ion-display--charged .lewis-ion-bracket:last-of-type {
  margin-left: clamp(4px, 1vw, 10px);
}

.lewis-ion-display--charged .lewis-ion-charge {
  display: inline;

  flex-shrink: 0;

  align-self: flex-start;

  margin-top: 0.2em;

  margin-left: 2px;

  font-family: var(--font-stem);

  font-size: clamp(1.1rem, 3.2vw, 1.75rem);

  font-weight: 600;

  line-height: 1;

  color: var(--text);
}

.lewis-board {
  display: flex;

  justify-content: center;

  width: 100%;

  max-width: 100%;

  min-height: calc(var(--lewis-slot-size) * 3 + calc(8px * var(--lewis-scale)));
}

.lewis-board--octahedral {
  min-height: calc(var(--lewis-slot-size) * 8 + calc(8px * var(--lewis-scale)));
}

.lewis-board--trigonal_bipyramidal {
  min-height: calc(var(--lewis-slot-size) * 8 + calc(8px * var(--lewis-scale)));
}

.lewis-board--tetrahedral {
  min-height: calc(var(--lewis-slot-size) * 7 + calc(8px * var(--lewis-scale)));
}

.lewis-board--tetrahedral .lewis-octahedral-ring {
  --lewis-octahedral-radius: calc(var(--lewis-slot-size) * 2.75);
}

.lewis-board--trigonal_planar {
  min-height: calc(var(--lewis-slot-size) * 5 + calc(8px * var(--lewis-scale)));

  min-width: min-content;
}

.lewis-trigonal-planar-board {
  display: flex;

  align-items: center;

  justify-content: center;

  width: 100%;

  min-width: min-content;
}

.lewis-trigonal-planar-grid {
  display: grid;

  grid-template-columns: repeat(3, auto);

  grid-template-rows: repeat(2, auto);

  align-items: center;

  justify-items: center;

  width: max-content;

  margin: 0 auto;

  column-gap: 0;

  row-gap: 0;
}

.lewis-trigonal-planar-grid__cell {
  display: flex;

  align-items: center;

  justify-content: center;
}

.lewis-trigonal-planar-grid__cell--west {
  justify-content: flex-end;
}

.lewis-trigonal-planar-grid__cell--east {
  justify-content: flex-start;
}

.lewis-trigonal-planar-grid__cell--south {
  align-items: flex-start;
}

.lewis-trigonal-planar-grid
  .lewis-slot--bond.lewis-slot--south
  .lewis-slot-bonds {
  flex-direction: row;
}

.lewis-trigonal-planar-grid
  .lewis-slot--bond.lewis-slot--south
  .lewis-bond-line {
  width: calc(2px * var(--lewis-scale));

  height: calc(24px * var(--lewis-scale));
}

.lewis-trigonal-planar-grid
  .lewis-slot--bond.lewis-slot--south
  .lewis-slot-bonds--double
  .lewis-bond-line {
  width: calc(2px * var(--lewis-scale));

  height: calc(22px * var(--lewis-scale));
}

.lewis-trigonal-planar-grid
  .lewis-slot--bond.lewis-slot--south
  .lewis-slot-bonds--triple
  .lewis-bond-line {
  width: calc(2px * var(--lewis-scale));

  height: calc(20px * var(--lewis-scale));
}

.lewis-trigonal-planar-grid
  .lewis-slot--bond.lewis-slot--west
  .lewis-slot-bonds,
.lewis-trigonal-planar-grid
  .lewis-slot--bond.lewis-slot--east
  .lewis-slot-bonds {
  flex-direction: column;
}

.lewis-octahedral-board {
  display: flex;

  align-items: center;

  justify-content: center;
}

.lewis-octahedral-ring {
  --lewis-octahedral-radius: calc(var(--lewis-slot-size) * 3.5);
  --lewis-octahedral-ligand-pad: calc(var(--lewis-slot-size) * 1.5);

  position: relative;

  width: calc(
    (var(--lewis-octahedral-radius) + var(--lewis-octahedral-ligand-pad)) * 2
  );

  height: calc(
    (var(--lewis-octahedral-radius) + var(--lewis-octahedral-ligand-pad)) * 2
  );

  margin: 0 auto;
}

.lewis-octahedral-ring__hub {
  position: absolute;

  left: 50%;

  top: 50%;

  transform: translate(-50%, -50%);

  z-index: 2;

  overflow: visible;

  pointer-events: none;
}

.lewis-octahedral-ring__hub .lewis-slot,
.lewis-octahedral-ring__hub .lewis-atom {
  pointer-events: auto;
}

.lewis-octahedral-ring__hub .lewis-atom-column--expanded {
  overflow: visible;
}

.lewis-octahedral-ring__hub .lewis-slot.lewis-slot--circle {
  width: calc(var(--lewis-slot-size) * var(--lewis-circle-slot-scale, 0.72));

  height: calc(var(--lewis-slot-size) * var(--lewis-circle-slot-scale, 0.72));
}

.lewis-octahedral-ring__hub .lewis-diagonal-connectors line {
  stroke-width: 0.06;

  stroke-linecap: round;
}

.lewis-octahedral-ring__ligand {
  position: absolute;

  left: 50%;

  top: 50%;

  transform: translate(-50%, -50%) rotate(var(--ligand-angle))
    translateY(calc(-1 * var(--lewis-octahedral-radius)));

  transform-origin: center;

  z-index: 1;
}

.lewis-octahedral-ring__bond {
  position: absolute;

  left: 50%;

  top: 50%;

  transform: translate(-50%, -50%) rotate(var(--ligand-angle))
    translateY(calc(-0.5 * var(--lewis-octahedral-radius)));

  transform-origin: center;

  z-index: 3;

  pointer-events: none;
}

.lewis-octahedral-ring__bond .lewis-slot {
  width: var(--lewis-slot-size);

  height: var(--lewis-slot-size);

  pointer-events: auto;
}

.lewis-octahedral-ring__bond .lewis-slot-bonds {
  flex-direction: row;
}

.lewis-octahedral-ring__bond .lewis-bond-line {
  width: calc(2px * var(--lewis-scale));

  height: calc(24px * var(--lewis-scale));
}

.lewis-octahedral-ring__bond .lewis-slot-bonds--double .lewis-bond-line {
  width: calc(2px * var(--lewis-scale));

  height: calc(22px * var(--lewis-scale));
}

.lewis-octahedral-ring__bond .lewis-slot-bonds--triple .lewis-bond-line {
  width: calc(2px * var(--lewis-scale));

  height: calc(20px * var(--lewis-scale));
}

.lewis-octahedral-ligand-column {
  flex-shrink: 0;
}

.lewis-octahedral-ring__ligand .lewis-atom-label {
  display: inline-block;

  transform: rotate(calc(-1 * var(--ligand-angle)));
}

.lewis-linear-row {
  display: flex;

  align-items: center;

  justify-content: center;

  gap: 0;

  max-width: 100%;
}

.lewis-linear-row .lewis-atom-column {
  flex-shrink: 0;
}

.lewis-atom-column {
  display: grid;

  justify-items: center;

  align-items: center;
}

.lewis-atom-column--expanded {
  position: relative;

  overflow: visible;
}

.lewis-diagonal-connectors {
  position: absolute;

  inset: 0;

  width: 100%;

  height: 100%;

  overflow: visible;

  pointer-events: none;

  z-index: 0;
}

.lewis-diagonal-connectors line {
  stroke: color-mix(in srgb, var(--primary) 40%, var(--border));

  stroke-width: 0.06;

  stroke-linecap: round;
}

.lewis-atom-column--expanded .lewis-slot,
.lewis-atom-column--expanded .lewis-atom {
  position: relative;

  z-index: 1;
}

.lewis-atom-column--polar-diagonals {
  position: relative;
}

.lewis-atom-column--polar-diagonals .lewis-slot--polar {
  position: absolute;

  left: calc(50% + var(--lewis-polar-x));

  top: calc(50% + var(--lewis-polar-y));

  z-index: 1;
}

.lewis-atom-column--polar-diagonals .lewis-atom {
  z-index: 2;
}

.lewis-atom-column--polar-diagonals
  .lewis-slot.lewis-slot--circle.lewis-slot--northwest,
.lewis-atom-column--polar-diagonals
  .lewis-slot.lewis-slot--circle.lewis-slot--southeast {
  transform: translate(-50%, -50%)
    rotate(calc(-1 * var(--lewis-diagonal-angle)));
}

.lewis-atom-column--polar-diagonals
  .lewis-slot.lewis-slot--circle.lewis-slot--northeast,
.lewis-atom-column--polar-diagonals
  .lewis-slot.lewis-slot--circle.lewis-slot--southwest {
  transform: translate(-50%, -50%) rotate(var(--lewis-diagonal-angle));
}

.lewis-atom-column--polar-diagonals
  .lewis-slot.lewis-slot--circle.lewis-slot--northwest:hover,
.lewis-atom-column--polar-diagonals
  .lewis-slot.lewis-slot--circle.lewis-slot--northwest.lewis-slot--filled,
.lewis-atom-column--polar-diagonals
  .lewis-slot.lewis-slot--circle.lewis-slot--northwest.lewis-slot--dragover,
.lewis-atom-column--polar-diagonals
  .lewis-slot.lewis-slot--circle.lewis-slot--southeast:hover,
.lewis-atom-column--polar-diagonals
  .lewis-slot.lewis-slot--circle.lewis-slot--southeast.lewis-slot--filled,
.lewis-atom-column--polar-diagonals
  .lewis-slot.lewis-slot--circle.lewis-slot--southeast.lewis-slot--dragover {
  transform: translate(-50%, -50%)
    rotate(calc(-1 * var(--lewis-diagonal-angle)));
}

.lewis-atom-column--polar-diagonals
  .lewis-slot.lewis-slot--circle.lewis-slot--northeast:hover,
.lewis-atom-column--polar-diagonals
  .lewis-slot.lewis-slot--circle.lewis-slot--northeast.lewis-slot--filled,
.lewis-atom-column--polar-diagonals
  .lewis-slot.lewis-slot--circle.lewis-slot--northeast.lewis-slot--dragover,
.lewis-atom-column--polar-diagonals
  .lewis-slot.lewis-slot--circle.lewis-slot--southwest:hover,
.lewis-atom-column--polar-diagonals
  .lewis-slot.lewis-slot--circle.lewis-slot--southwest.lewis-slot--filled,
.lewis-atom-column--polar-diagonals
  .lewis-slot.lewis-slot--circle.lewis-slot--southwest.lewis-slot--dragover {
  transform: translate(-50%, -50%) rotate(var(--lewis-diagonal-angle));
}

.lewis-slot-grid {
  justify-items: center;

  align-items: center;
}

.lewis-grid-atom {
  justify-self: center;

  align-self: center;
}

.lewis-bond-column {
  display: grid;

  grid-template-rows: var(--lewis-slot-size) var(--lewis-atom-size) var(
      --lewis-slot-size
    );

  align-items: center;

  justify-items: center;

  flex-shrink: 0;
}

.lewis-grid-north {
  grid-column: 2;

  grid-row: 1;
}

.lewis-grid-west {
  grid-column: 1;

  grid-row: 2;
}

.lewis-grid-east {
  grid-column: 3;

  grid-row: 2;
}

.lewis-grid-south {
  grid-column: 2;

  grid-row: 3;
}

.lewis-grid-bond {
  grid-row: 2;
}

.lewis-slot-spacer {
  width: var(--lewis-slot-size);

  height: var(--lewis-slot-size);

  flex-shrink: 0;
}

.lewis-atom {
  display: flex;

  align-items: center;

  justify-content: center;

  width: var(--lewis-atom-size);

  height: var(--lewis-atom-size);

  flex-shrink: 0;

  font-family: var(--font-stem);

  font-size: calc(20px * var(--lewis-scale));

  font-weight: 700;

  line-height: 1;

  color: var(--text);

  background: var(--inactive-light);

  border: 2px solid var(--border);

  border-radius: 50%;
}

.lewis-atom-label {
  display: inline-flex;

  align-items: baseline;

  line-height: 1;
}

.lewis-atom-symbol {
  line-height: 1;
}

.lewis-atom-index {
  margin-left: calc(-1px * var(--lewis-scale));

  line-height: 1;
}

.lewis-atom-index sub {
  font-family: inherit;

  font-size: 0.58em;

  font-weight: 600;

  line-height: 1;

  vertical-align: sub;
}

.lewis-slot {
  box-sizing: border-box;

  display: flex;

  align-items: center;

  justify-content: center;

  width: var(--lewis-slot-size);

  height: var(--lewis-slot-size);

  padding: calc(4px * var(--lewis-scale));

  font-family: inherit;

  background: rgba(124, 92, 191, 0.04);

  border: 2px dashed var(--border);

  border-radius: var(--radius-sm);

  cursor: pointer;

  transition: var(--transition);
}

.lewis-slot--filled {
  background: rgba(124, 92, 191, 0.08);

  border-style: solid;
}

.lewis-slot:hover,
.lewis-slot--dragover {
  border-color: var(--primary);

  background: rgba(124, 92, 191, 0.1);
}

.lewis-slot.lewis-slot--circle {
  width: calc(var(--lewis-slot-size) * 0.85);

  height: calc(var(--lewis-slot-size) * 0.85);

  border-style: dashed;

  border-color: color-mix(in srgb, var(--primary) 50%, var(--border));

  background: color-mix(in srgb, var(--primary) 8%, transparent);

  border-radius: 50%;
}

.lewis-slot.lewis-slot--circle.lewis-slot--northwest,
.lewis-slot.lewis-slot--circle.lewis-slot--southeast {
  transform: rotate(-45deg);
}

.lewis-slot.lewis-slot--circle.lewis-slot--northeast,
.lewis-slot.lewis-slot--circle.lewis-slot--southwest {
  transform: rotate(45deg);
}

.lewis-slot.lewis-slot--circle.lewis-slot--filled {
  border-style: solid;

  background: color-mix(in srgb, var(--primary) 13%, transparent);
}

.lewis-slot.lewis-slot--circle:hover,
.lewis-slot.lewis-slot--circle.lewis-slot--dragover {
  border-color: var(--primary);

  background: color-mix(in srgb, var(--primary) 15%, transparent);
}

.lewis-slot-bonds {
  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  gap: calc(3px * var(--lewis-scale));
}

.lewis-slot-bonds--single {
  gap: 0;
}

.lewis-bond-line {
  display: block;

  width: calc(24px * var(--lewis-scale));

  height: calc(2px * var(--lewis-scale));

  background: var(--text);

  border-radius: 2px;
}

.lewis-slot-bonds--double .lewis-bond-line {
  width: calc(22px * var(--lewis-scale));
}

.lewis-slot-bonds--triple .lewis-bond-line {
  width: calc(20px * var(--lewis-scale));
}

.lewis-slot-dots {
  display: flex;

  flex-direction: row;

  flex-wrap: wrap;

  align-items: center;

  justify-content: center;

  gap: var(--lewis-dot-gap);

  max-width: calc(var(--lewis-slot-size) - calc(8px * var(--lewis-scale)));
}

.lewis-slot-dots--vertical {
  flex-direction: column;

  flex-wrap: nowrap;

  max-width: none;

  max-height: calc(var(--lewis-slot-size) - calc(8px * var(--lewis-scale)));
}

.lewis-slot-dots--horizontal {
  flex-direction: row;

  flex-wrap: nowrap;

  max-width: none;
}

.lewis-slot-dots--diagonal-inline {
  flex-direction: row;

  flex-wrap: nowrap;

  gap: calc(4px * var(--lewis-scale));

  max-width: none;
}

.lewis-dot {
  display: inline-flex;

  align-items: center;

  justify-content: center;

  width: var(--lewis-dot-size);

  height: var(--lewis-dot-size);

  font-size: var(--lewis-dot-size);

  font-weight: 700;

  line-height: 1;

  flex-shrink: 0;

  color: var(--text);
}

.lewis-actions {
  display: flex;

  justify-content: center;

  gap: 12px;

  margin-top: 24px;
}

.lewis-actions .btn-small {
  margin-top: 0;
}

.lewis-session-actions {
  display: flex;

  justify-content: center;

  flex-wrap: wrap;

  gap: 12px;

  margin-top: 20px;
}

.lewis-session-actions .btn-small {
  width: auto;

  margin-top: 0;
}

.lewis-feedback {
  width: 100%;

  max-width: 680px;

  margin-top: 20px;

  margin-inline: auto;
}

#lewis-content.lewis-content--octahedral .lewis-feedback {
  max-width: min(100%, 1040px);
}

.lewis-feedback .feedback-panel {
  width: 100%;

  max-width: none;
}

.lewis-feedback.show {
  display: block;
}

.lewis-feedback-list {
  margin: 14px 0 0;

  padding: 0 0 0 20px;

  color: var(--text);

  line-height: 1.55;

  text-align: left;
}

.lewis-example {
  margin-top: 16px;
}

.lewis-feedback .lewis-example {
  margin-inline: -22px;
}

.lewis-example-label {
  margin: 0 0 10px;

  font-family: var(--font-ui);

  font-size: 14px;

  font-weight: 600;

  color: var(--text);

  text-align: center;
}

.lewis-board-wrap--example {
  padding: 18px;

  padding-bottom: 22px;

  pointer-events: none;
}

.lewis-board-wrap--example.lewis-board-wrap--octahedral {
  padding-inline: clamp(22px, 3.5vw, 40px);
}

.lewis-board--example .lewis-slot {
  cursor: default;
}

.lewis-board--example .lewis-slot--readonly:hover {
  border-color: var(--border);

  background: rgba(124, 92, 191, 0.04);
}

.lewis-board--example .lewis-slot--readonly.lewis-slot--filled:hover {
  background: rgba(124, 92, 191, 0.08);
}

.lewis-token--erase .lewis-token-glyph {
  font-family: var(--font-ui);

  font-size: 18px;
}

.lewis-token--selected.lewis-token--erase {
  border-color: var(--incorrect);

  box-shadow: 0 0 0 3px rgba(229, 72, 77, 0.15);
}

.lewis-board--erase .lewis-slot:hover {
  border-color: var(--incorrect);

  background: rgba(229, 72, 77, 0.08);
}

@media (max-width: 768px) {
  #lewis-content > :not(footer) {
    max-width: 100%;
  }

  .lewis-workspace {
    max-width: 100%;
  }

  .lewis-palette {
    grid-template-columns: 1fr 1fr;
  }

  .lewis-token--erase {
    grid-column: 1 / -1;
  }

  .lewis-board {
    --lewis-scale: 0.875;
  }

  .lewis-board-wrap--octahedral {
    --lewis-scale: 0.8;

    padding-inline: 16px;
  }

  .lewis-workspace--octahedral,
  .lewis-feedback {
    max-width: 100%;
  }

  .lewis-linear-row {
    gap: 0;
  }

  .lewis-analysis-workspace {
    gap: 20px;
  }

  .lewis-board-wrap--analysis-ref {
    --lewis-scale: 0.78;
  }

  .lewis-board-wrap--analysis-ref.lewis-board-wrap--octahedral {
    --lewis-scale: 0.64;
  }
}

[data-theme="dark"] .lewis-token {
  background: #2e3239;
}

[data-theme="dark"] .lewis-token:hover,
[data-theme="dark"] .lewis-token--selected {
  background: var(--card-bg);
}

[data-theme="dark"] .lewis-atom {
  background: #2e3239;
}

[data-theme="dark"] .lewis-slot {
  background: rgba(149, 117, 212, 0.06);
}

[data-theme="dark"] .lewis-slot--filled {
  background: rgba(149, 117, 212, 0.12);
}

[data-theme="dark"] .lewis-slot.lewis-slot--circle {
  background: rgba(149, 117, 212, 0.1);

  border-color: rgba(149, 117, 212, 0.45);
}

[data-theme="dark"] .lewis-slot.lewis-slot--circle.lewis-slot--filled {
  background: rgba(149, 117, 212, 0.18);
}

.lewis-task-header {
  display: flex;

  flex-direction: column;

  gap: 16px;

  width: 100%;

  max-width: 720px;

  margin: 0 auto 28px;
}

.lewis-task-header.hidden {
  display: none;
}

.lewis-task-header--full {
  gap: 22px;

  padding: 24px 26px;

  background: var(--card-bg);

  border: 1px solid var(--border);

  border-radius: var(--radius-lg);

  box-shadow: var(--shadow-card);
}

.lewis-task-header .lewis-task-progress {
  margin: 0;

  font-size: 16px;

  line-height: 1.5;

  white-space: pre-line;
}

.lewis-task-header .lewis-task-progress-bar {
  margin: 0;
}

.lewis-task-header .lewis-stage-stepper {
  margin: 0;

  gap: 0;
}

.lewis-task-header .lewis-stage-step {
  padding: 10px 18px;

  font-size: 14px;
}

.lewis-task-instructions {
  width: 100%;
}

.lewis-task-instructions #instruction-text {
  width: 100%;

  max-width: none;

  margin: 0;

  padding: 14px 18px;

  font-size: 15px;

  line-height: 1.6;

  color: var(--text);

  background: rgba(124, 92, 191, 0.06);

  border-radius: var(--radius-md);
}

.lewis-task-header--full .lewis-task-instructions #instruction-text {
  background: var(--inactive-light);
}

.lewis-electron-counter {
  margin: 0 0 16px;

  padding: 10px 14px;

  font-family: var(--font-ui);

  font-size: 15px;

  font-weight: 600;

  line-height: 1.45;

  text-align: center;

  color: var(--text);

  background: rgba(124, 92, 191, 0.06);

  border: 1px solid var(--border);

  border-radius: var(--radius-md);
}

.lewis-electron-counter--complete {
  color: #22966a;

  background: #eafff3;

  border-color: rgba(40, 199, 111, 0.35);
}

.lewis-electron-counter--over {
  color: #c9484a;

  background: #fffafa;

  border-color: rgba(255, 77, 79, 0.35);
}

.lewis-stage-stepper {
  display: flex;

  flex-wrap: wrap;

  align-items: center;

  justify-content: center;

  gap: 0;

  margin: 0 0 20px;

  padding: 0;

  list-style: none;
}

.lewis-stage-arrow {
  display: flex;

  align-items: center;

  padding: 0 10px;

  font-size: 18px;

  font-weight: 600;

  line-height: 1;

  color: var(--border);

  list-style: none;

  user-select: none;
}

.lewis-stage-step--done + .lewis-stage-arrow,
.lewis-stage-arrow + .lewis-stage-step--active,
.lewis-stage-arrow + .lewis-stage-step--done {
  color: var(--primary);
}

.lewis-stage-step {
  padding: 8px 14px;

  font-family: var(--font-ui);

  font-size: 13px;

  font-weight: 600;

  color: var(--text-light);

  background: var(--card-bg);

  border: 1px solid var(--border);

  border-radius: 999px;
}

.lewis-stage-step--active {
  color: var(--text);

  border-color: var(--primary);

  box-shadow: 0 0 0 3px rgba(124, 92, 191, 0.12);
}

.lewis-stage-step--done {
  color: var(--primary);

  border-color: rgba(124, 92, 191, 0.35);
}

.lewis-stage-panel {
  width: 100%;

  max-width: 720px;

  margin: 0 auto 20px;
}

#lewis-analysis-stage.lewis-stage-panel {
  max-width: 100%;

  overflow: visible;
}

.lewis-stage-label {
  margin: 0 0 8px;

  font-size: 14px;

  font-weight: 700;

  color: var(--text-light);

  text-align: center;

  text-transform: uppercase;

  letter-spacing: 0.04em;
}

.lewis-valence-prompt {
  margin: 8px auto 0;

  max-width: 520px;

  text-align: center;
}

.lewis-analysis-workspace {
  display: flex;

  flex-direction: column;

  align-items: stretch;

  gap: 28px;

  width: 100%;

  max-width: 720px;

  margin: 8px auto 0;

  overflow: visible;
}

.lewis-analysis-reference {
  position: sticky;

  top: var(--site-header-offset, 69px);

  z-index: 2;

  width: 100%;

  background: var(--bg);

  overflow: visible;
}

.lewis-analysis-reference-label {
  margin: 0 0 10px;

  font-family: var(--font-ui);

  font-size: 13px;

  font-weight: 600;

  color: var(--text-light);

  text-align: center;

  text-transform: uppercase;

  letter-spacing: 0.04em;
}

.lewis-board-wrap--analysis-ref {
  --lewis-scale: 0.88;

  width: 100%;

  padding: 16px;

  padding-bottom: 20px;
}

.lewis-board-wrap--analysis-ref.lewis-board-wrap--octahedral {
  --lewis-scale: 0.74;

  padding-inline: clamp(16px, 3vw, 36px);
}

.lewis-board-wrap--analysis-ref .lewis-ion-display,
.lewis-board-wrap--analysis-ref .lewis-board {
  margin-inline: auto;
}

.lewis-analysis-main {
  width: 100%;

  min-width: 0;
}

.lewis-analysis-number-input {
  display: block;

  width: 100%;

  max-width: 120px;

  padding: 10px 12px;

  font-family: var(--font-ui);

  font-size: 20px;

  font-weight: 600;

  text-align: center;

  color: var(--text);

  background: var(--card-bg);

  border: 2px solid var(--border);

  border-radius: var(--radius-md);
}

.lewis-analysis-number-input:focus {
  outline: none;

  border-color: var(--primary);

  box-shadow: 0 0 0 3px rgba(124, 92, 191, 0.15);
}

.lewis-analysis-field--correct .lewis-analysis-select,
.lewis-analysis-field--correct .lewis-analysis-number-input,
.lewis-analysis-field--correct .lewis-analysis-option:has(input:checked) {
  border-color: var(--correct);
}

.lewis-analysis-field--incorrect .lewis-analysis-select,
.lewis-analysis-field--incorrect .lewis-analysis-number-input,
.lewis-analysis-field--incorrect .lewis-analysis-option:has(input:checked) {
  border-color: var(--incorrect);
}

.lewis-valence-question {
  margin: 0 0 22px;

  font-family: var(--font-ui);

  font-size: 22px;

  font-weight: 600;

  color: var(--text);
}

.lewis-valence-label {
  display: block;

  margin-bottom: 8px;

  font-family: var(--font-ui);

  font-size: 14px;

  font-weight: 600;

  color: var(--text-light);
}

.lewis-valence-input {
  display: block;

  width: 100%;

  max-width: 180px;

  margin: 0 auto;

  padding: 12px 14px;

  font-family: var(--font-ui);

  font-size: 24px;

  font-weight: 600;

  text-align: center;

  color: var(--text);

  background: var(--card-bg);

  border: 2px solid var(--border);

  border-radius: var(--radius-md);
}

.lewis-valence-input:focus {
  outline: none;

  border-color: var(--primary);

  box-shadow: 0 0 0 3px rgba(124, 92, 191, 0.15);
}

.lewis-stage-actions {
  display: flex;

  justify-content: center;

  margin-top: 18px;
}

.lewis-analysis-form {
  display: grid;

  gap: 16px;

  max-width: none;

  margin: 16px 0 0;

  text-align: left;
}

.lewis-analysis-field {
  display: grid;

  gap: 10px;

  padding: 14px 16px;

  border: 1px solid transparent;

  border-radius: var(--radius-md);

  transition:
    background 0.2s ease,
    border-color 0.2s ease;
}

.lewis-analysis-field--correct {
  background: #eafff3;

  border-color: rgba(40, 199, 111, 0.35);
}

.lewis-analysis-field--incorrect {
  background: #fffafa;

  border-color: rgba(255, 77, 79, 0.35);
}

.lewis-analysis-question {
  font-family: var(--font-ui);

  font-size: 15px;

  font-weight: 600;

  color: var(--text);
}

.lewis-analysis-select {
  width: 100%;

  padding: 12px 14px;

  font-family: var(--font-ui);

  font-size: 15px;

  color: var(--text);

  background: var(--card-bg);

  border: 2px solid var(--border);

  border-radius: var(--radius-md);
}

.lewis-analysis-select:focus {
  outline: none;

  border-color: var(--primary);

  box-shadow: 0 0 0 3px rgba(124, 92, 191, 0.15);
}

.lewis-analysis-options {
  display: flex;

  gap: 10px;
}

.lewis-analysis-options--bond-angles {
  flex-wrap: wrap;
}

.lewis-analysis-options--bond-angles .lewis-analysis-option {
  flex: 0 1 auto;

  min-width: 4.75rem;
}

.lewis-analysis-option {
  flex: 1;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 8px;

  padding: 12px 14px;

  font-family: var(--font-ui);

  font-size: 15px;

  font-weight: 600;

  color: var(--text);

  background: var(--card-bg);

  border: 2px solid var(--border);

  border-radius: var(--radius-md);

  cursor: pointer;

  transition: var(--transition);
}

.lewis-analysis-option:has(input:checked) {
  border-color: var(--primary);

  background: rgba(124, 92, 191, 0.08);
}

.lewis-analysis-option input {
  accent-color: var(--primary);
}

[data-theme="dark"] .lewis-analysis-option,
[data-theme="dark"] .lewis-analysis-select,
[data-theme="dark"] .lewis-valence-input {
  background: var(--card-bg);
}

[data-theme="dark"]
  .lewis-task-header--full
  .lewis-task-instructions
  #instruction-text,
[data-theme="dark"] .lewis-electron-counter {
  background: #2e3239;
}

[data-theme="dark"] .lewis-electron-counter--complete {
  color: #5ecf9a;

  background: #1e2e26;

  border-color: rgba(40, 199, 111, 0.35);
}

[data-theme="dark"] .lewis-electron-counter--over {
  color: #f08080;

  background: #2e2222;

  border-color: rgba(255, 77, 79, 0.35);
}

[data-theme="dark"] .lewis-analysis-field--correct {
  background: #1e2e26;

  border-color: rgba(40, 199, 111, 0.35);
}

[data-theme="dark"] .lewis-analysis-field--incorrect {
  background: #2e2222;

  border-color: rgba(255, 77, 79, 0.35);
}

.lewis-browse-screen {
  --lewis-difficulty-easy: #2a9d6e;
  --lewis-difficulty-medium: #d48806;
  --lewis-difficulty-hard: #d64545;

  width: 100%;

  max-width: 720px;

  margin: 40px auto 0;

  padding: 32px 24px;

  background: var(--card-bg);

  border-radius: var(--radius-lg);

  box-shadow: var(--shadow-card);
}

.lewis-browse-panel {
  padding: 0;
}

.lewis-browse-back {
  margin-bottom: 16px;
}

.lewis-browse-panel h2 {
  margin: 0 0 8px;

  font-size: 24px;
}

.lewis-browse-intro {
  margin-top: 0;

  color: var(--text-light);

  line-height: 1.5;
}

.lewis-browse-style {
  margin-bottom: 20px;
}

.lewis-browse-style-options {
  display: flex;

  flex-wrap: wrap;

  gap: 8px;
}

.lewis-browse-style-option {
  position: relative;

  display: inline-flex;

  align-items: center;

  padding: 8px 14px;

  font-size: 14px;

  font-weight: 500;

  line-height: 1.2;

  color: var(--text);

  background: var(--card-bg);

  border: 2px solid var(--border);

  border-radius: 999px;

  cursor: pointer;

  transition: var(--transition);
}

.lewis-browse-style-option:hover {
  border-color: var(--primary);

  background: var(--inactive-light);
}

.lewis-browse-style-option:has(input:checked) {
  color: #fff;

  background: var(--primary);

  border-color: var(--primary);
}

.lewis-browse-style-option:has(input:checked):hover {
  color: #fff;

  background: var(--primary);

  border-color: var(--primary);
}

.lewis-browse-style-option input {
  position: absolute;

  width: 1px;

  height: 1px;

  margin: -1px;

  padding: 0;

  overflow: hidden;

  clip: rect(0, 0, 0, 0);

  white-space: nowrap;

  border: 0;
}

.lewis-browse-search-wrap {
  margin-bottom: 20px;
}

.lewis-browse-difficulty-wrap {
  margin-bottom: 24px;
}

.quiz-filter-chip--browse-all.quiz-filter-chip--active {
  color: #fff;

  background: var(--primary);

  border-color: var(--primary);
}

.quiz-filter-chip--browse-easy {
  color: var(--lewis-difficulty-easy);

  border-color: color-mix(in srgb, var(--lewis-difficulty-easy) 40%, var(--border));
}

.quiz-filter-chip--browse-easy:hover {
  border-color: var(--lewis-difficulty-easy);

  background: color-mix(in srgb, var(--lewis-difficulty-easy) 10%, var(--card-bg));
}

.quiz-filter-chip--browse-easy.quiz-filter-chip--active {
  color: #fff;

  background: var(--lewis-difficulty-easy);

  border-color: var(--lewis-difficulty-easy);
}

.quiz-filter-chip--browse-easy.quiz-filter-chip--active:hover {
  color: #fff;

  background: var(--lewis-difficulty-easy);

  border-color: var(--lewis-difficulty-easy);
}

.quiz-filter-chip--browse-medium {
  color: var(--lewis-difficulty-medium);

  border-color: color-mix(in srgb, var(--lewis-difficulty-medium) 40%, var(--border));
}

.quiz-filter-chip--browse-medium:hover {
  border-color: var(--lewis-difficulty-medium);

  background: color-mix(in srgb, var(--lewis-difficulty-medium) 10%, var(--card-bg));
}

.quiz-filter-chip--browse-medium.quiz-filter-chip--active {
  color: #fff;

  background: var(--lewis-difficulty-medium);

  border-color: var(--lewis-difficulty-medium);
}

.quiz-filter-chip--browse-medium.quiz-filter-chip--active:hover {
  color: #fff;

  background: var(--lewis-difficulty-medium);

  border-color: var(--lewis-difficulty-medium);
}

.quiz-filter-chip--browse-hard {
  color: var(--lewis-difficulty-hard);

  border-color: color-mix(in srgb, var(--lewis-difficulty-hard) 40%, var(--border));
}

.quiz-filter-chip--browse-hard:hover {
  border-color: var(--lewis-difficulty-hard);

  background: color-mix(in srgb, var(--lewis-difficulty-hard) 10%, var(--card-bg));
}

.quiz-filter-chip--browse-hard.quiz-filter-chip--active {
  color: #fff;

  background: var(--lewis-difficulty-hard);

  border-color: var(--lewis-difficulty-hard);
}

.quiz-filter-chip--browse-hard.quiz-filter-chip--active:hover {
  color: #fff;

  background: var(--lewis-difficulty-hard);

  border-color: var(--lewis-difficulty-hard);
}

.lewis-browse-section {
  margin-bottom: 28px;
}

.lewis-browse-section:last-child {
  margin-bottom: 0;
}

.lewis-browse-section-title {
  display: flex;

  align-items: baseline;

  gap: 8px;

  margin: 0 0 12px;

  font-size: 16px;
}

.lewis-browse-count {
  font-size: 14px;

  font-weight: 500;

  color: var(--text-light);
}

.lewis-browse-empty {
  margin: 0 0 12px;

  font-size: 14px;

  color: var(--text-light);
}

.lewis-browse-groups {
  display: flex;

  flex-direction: column;

  gap: 24px;
}

.lewis-browse-group-title {
  margin: 0 0 10px;
}

.lewis-browse-difficulty-chip {
  display: inline-flex;

  align-items: center;

  padding: 4px 10px;

  font-family: var(--font-ui);

  font-size: 12px;

  font-weight: 700;

  letter-spacing: 0.04em;

  text-transform: uppercase;

  border-radius: 999px;
}

.lewis-browse-difficulty-chip--easy {
  color: var(--lewis-difficulty-easy);

  background: color-mix(in srgb, var(--lewis-difficulty-easy) 12%, var(--card-bg));

  border: 1px solid color-mix(in srgb, var(--lewis-difficulty-easy) 35%, var(--border));
}

.lewis-browse-difficulty-chip--medium {
  color: var(--lewis-difficulty-medium);

  background: color-mix(in srgb, var(--lewis-difficulty-medium) 12%, var(--card-bg));

  border: 1px solid color-mix(in srgb, var(--lewis-difficulty-medium) 35%, var(--border));
}

.lewis-browse-difficulty-chip--hard {
  color: var(--lewis-difficulty-hard);

  background: color-mix(in srgb, var(--lewis-difficulty-hard) 12%, var(--card-bg));

  border: 1px solid color-mix(in srgb, var(--lewis-difficulty-hard) 35%, var(--border));
}

.lewis-browse-list {
  display: grid;

  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));

  gap: 10px;
}

.lewis-browse-item {
  display: flex;

  flex-direction: column;

  align-items: flex-start;

  gap: 3px;

  padding: 12px 14px;

  text-align: left;

  background: var(--bg);

  border: 2px solid var(--border);

  border-radius: var(--radius-md);

  cursor: pointer;

  transition: var(--transition);
}

.lewis-browse-item:hover {
  border-color: var(--primary);

  transform: translateY(-2px);
}

.lewis-browse-item-formula {
  font-size: 16px;

  font-weight: 700;

  line-height: 1.2;
}

.lewis-browse-item-name {
  font-size: 12px;

  color: var(--text-light);

  line-height: 1.35;
}

.lewis-browse-item:focus-visible {
  outline: 2px solid var(--primary);

  outline-offset: 2px;
}

[data-theme="dark"] .lewis-browse-item {
  background: #2a3038;
}

[data-theme="dark"] .lewis-browse-item:hover {
  background: #343a46;
}

[data-theme="dark"] .lewis-browse-style-option:hover {
  background: #343a46;
}