/* ───────────── Base Variables & Layout ───────────── */
:root {
  --cream: #f2eddf;
  --ink: #1e2733;
  --muted: #566070;
  --line: #d6cdb6;
  --soft: #e7e0cd;
  --card-bg: #fffdf8;
  --card-shadow:
    0 1px 2px rgba(60, 48, 20, 0.07), 0 8px 24px rgba(60, 48, 20, 0.07);
  --accent: #2d5aae;
  --accent-soft: rgba(45, 90, 174, 0.18);
  --lift-shadow: 0 14px 32px rgba(60, 48, 20, 0.14);
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
}
.dark {
  --cream: #071a3a;
  --ink: #eef5ff;
  --muted: #94a3b8;
  --line: #1e3a63;
  --soft: #12335e;
  --card-bg: #0d2347;
  --card-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  --accent: #6fa3ff;
  --accent-soft: rgba(111, 163, 255, 0.25);
  --lift-shadow: 0 14px 32px rgba(0, 0, 0, 0.5);
}
html,
body {
  background-color: var(--cream);
  color: var(--ink);
  font-family: "DM Sans", sans-serif;
  transition:
    background 0.2s,
    color 0.2s;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.display {
  font-family: "DM Serif Display", Georgia, serif;
  letter-spacing: -0.055em;
}
.card {
  background-color: var(--card-bg);
  border: 1px solid var(--line);
  box-shadow: var(--card-shadow);
}
.muted {
  color: var(--muted);
}
button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

::selection {
  background: rgba(61, 95, 142, 0.22);
  color: inherit;
}
.dark ::selection {
  background: rgba(111, 163, 255, 0.45);
}
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--line);
  border-radius: 10px;
  border: 2px solid var(--cream);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--muted);
}
.input-field::placeholder,
textarea.input-field::placeholder {
  color: #a39d8f;
  font-weight: 500;
}
.dark .input-field::placeholder {
  color: #64748b;
}

:where(
  button,
  [role="button"],
  .btn-primary,
  .btn-secondary,
  .btn-danger
):focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.input-field {
  background-color: var(--cream);
  border: 1px solid var(--line);
  color: var(--ink);
  border-radius: 0.75rem;
  padding: 0.75rem 1rem;
  font-size: 0.8125rem;
  font-weight: 700;
  outline: none;
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    background-color 0.18s ease;
}
.input-field:hover {
  border-color: var(--accent);
}
.dark .input-field {
  background-color: #102d59;
  border-color: #294b79;
}
.dark .input-field:hover {
  border-color: #3b82f6;
}
.input-field:focus,
.input-field:focus-visible {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.dark .input-field:focus,
.dark .input-field:focus-visible {
  border-color: #6fa3ff;
  box-shadow: 0 0 0 3px var(--accent-soft);
}

select.filter-drop,
select.filter-drop option {
  font-family: "DM Sans", sans-serif;
  font-weight: 600;
}
select.filter-drop {
  background-color: var(--card-bg);
  border: 1px solid var(--line);
  color: var(--ink);
  border-radius: 0.75rem;
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}
select.filter-drop:focus,
select.filter-drop:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.dark select.filter-drop:focus,
.dark select.filter-drop:focus-visible {
  border-color: #6fa3ff;
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.btn-primary {
  background: var(--ink);
  color: var(--card-bg);
  padding: 0.75rem 1.25rem;
  border-radius: 0.75rem;
  font-weight: 800;
  font-size: 0.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition:
    background 0.18s ease,
    transform 0.18s var(--spring),
    box-shadow 0.18s ease;
}
.btn-primary:not(:disabled):hover {
  background: var(--accent);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(61, 95, 142, 0.28);
}
.btn-primary:not(:disabled):active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(61, 95, 142, 0.2);
}
.dark .btn-primary {
  background: #2456d6;
  color: white;
}
.dark .btn-primary:not(:disabled):hover {
  background: #3b82f6;
}

.btn-secondary {
  background: var(--soft);
  color: var(--accent);
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  font-weight: 800;
  font-size: 0.75rem;
  border: 1px solid transparent;
  transition:
    background 0.18s ease,
    transform 0.18s var(--spring),
    box-shadow 0.18s ease;
}
.btn-secondary:not(:disabled):hover {
  background: #e2dac4;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(61, 95, 142, 0.15);
}
.btn-secondary:not(:disabled):active {
  transform: translateY(0);
}
.dark .btn-secondary {
  color: #6fa3ff;
}
.dark .btn-secondary:not(:disabled):hover {
  background: #1b437a;
}

.btn-danger {
  background: transparent;
  color: #c14a3d;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  font-weight: 800;
  font-size: 0.75rem;
  border: 1px solid #ebc7c1;
  transition:
    background 0.18s ease,
    transform 0.18s var(--spring),
    box-shadow 0.18s ease;
}
.btn-danger:not(:disabled):hover {
  background: #fbeeec;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(193, 74, 61, 0.15);
}
.btn-danger:not(:disabled):active {
  transform: translateY(0);
}
.dark .btn-danger {
  border-color: #7f1d1d;
  color: #f87171;
}
.dark .btn-danger:not(:disabled):hover {
  background: rgba(127, 29, 29, 0.3);
}

.badge {
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  font-size: 0.65rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: inline-block;
}
.badge-green {
  background: #e2ecd9;
  color: #3b5c3e;
}
.dark .badge-green {
  background: #143823;
  color: #bbf7d0;
}
.badge-purple {
  background: #ece2ed;
  color: #6a4573;
}
.dark .badge-purple {
  background: #3b1d5e;
  color: #d8b4fe;
}
.badge-blue {
  background: var(--soft);
  color: var(--accent);
}
.dark .badge-blue {
  background: #1e3a8a;
  color: #bfdbfe;
}
.badge-amber {
  background: #f4e8ca;
  color: #86562a;
}
.dark .badge-amber {
  background: #451a03;
  color: #fcd34d;
}
.badge-rose {
  background: #f1dcdc;
  color: #8c3a37;
}
.dark .badge-rose {
  background: #4c0519;
  color: #fda4af;
}

.sidebar-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
  border-radius: 0.75rem;
  font-size: 0.8125rem;
  font-weight: 700;
  cursor: pointer;
  color: var(--muted);
  margin-bottom: 0.25rem;
  transition:
    background 0.18s ease,
    color 0.18s ease,
    transform 0.18s var(--spring);
}
.sidebar-link.hidden {
  display: none !important;
}
.sidebar-link:not(.active):hover {
  background: var(--soft);
  color: var(--ink);
  transform: translateX(3px);
}
.sidebar-link.active {
  background: var(--accent);
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(61, 95, 142, 0.28);
}
.sidebar-link.active #report-badge {
  background: #ffffff;
  color: var(--accent);
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}
.data-table th {
  padding: 1rem 1.25rem;
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
  font-weight: 800;
  background: var(--soft);
}
.dark .data-table th {
  background: rgba(18, 51, 94, 0.5);
}
.data-table td {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--line);
  font-size: 0.8125rem;
  font-weight: 600;
  transition: background-color 0.15s ease;
}
.data-table tr:last-child td {
  border-bottom: none;
}
.data-table tbody tr:hover td {
  background: var(--soft);
}
.dark .data-table tbody tr:hover td {
  background: #102d59;
}

#q-modal.flex,
#student-modal.flex,
#bulk-modal.flex,
#breakdown-modal.flex,
#review-modal.flex {
  align-items: flex-start;
}

.card-interactive {
  cursor: pointer;
  transition:
    transform 0.28s var(--spring),
    box-shadow 0.28s ease,
    border-color 0.2s ease;
}
.card-interactive:hover {
  transform: translateY(-3px);
  border-color: var(--accent);
  box-shadow: var(--lift-shadow);
}
.card-interactive:active {
  transform: translateY(-1px);
}
article.card-interactive > div:nth-of-type(2) > span:last-child {
  display: inline-block;
  position: relative;
}
article.card-interactive > div:nth-of-type(2) > span:last-child::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.28s var(--ease);
  pointer-events: none;
}
article.card-interactive > div:nth-of-type(2) > span:last-child:hover::after {
  transform: scaleX(1);
}

.card-hover {
  transition:
    transform 0.28s var(--spring),
    box-shadow 0.28s ease,
    border-color 0.22s ease;
}
.card-hover:hover {
  transform: translateY(-3px);
  box-shadow: var(--lift-shadow);
}
.card-hover:active {
  transform: translateY(-1px);
}
.card-hover[class*="border-green"]:hover {
  border-color: #7e9cc0 !important;
}
.card-hover:not([class*="border-green"]):hover {
  border-color: var(--accent) !important;
}
.dark .card-hover[class*="border-green"]:hover {
  border-color: #93c5fd !important;
}
.dark .card-hover:not([class*="border-green"]):hover {
  border-color: #60a5fa !important;
}

.correct-choice {
  border-color: #5fae76 !important;
  background: #e2ecd9 !important;
  color: #2c5335 !important;
  border-width: 2px !important;
}
.dark .correct-choice {
  background: #143823 !important;
  color: #bbf7d0 !important;
  border-color: #22c55e !important;
}
.picked-choice {
  border-color: #c14a3d !important;
  background: #f1dcdc !important;
  color: #6d2724 !important;
  border-width: 2px !important;
}
.dark .picked-choice {
  background: #451a1a !important;
  color: #fca5a5 !important;
  border-color: #ef4444 !important;
}

.choice {
  transition:
    background-color 0.18s ease,
    border-color 0.18s ease,
    transform 0.18s var(--spring),
    box-shadow 0.18s ease;
}
.choice:not(.selected):not(.correct):not(.wrong):not(.crossed):hover {
  background-color: var(--soft);
  border-color: var(--accent);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(85, 70, 40, 0.06);
}
.dark .choice:not(.selected):not(.correct):not(.wrong):not(.crossed):hover {
  background-color: #1e293b;
  border-color: #3b82f6;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.choice:not(.selected):not(.correct):not(.wrong):not(.crossed):active {
  transform: translateY(0);
}
.choice.selected {
  border-color: var(--accent) !important;
  background: var(--soft) !important;
  box-shadow: inset 0 0 0 1px var(--accent);
}
.dark .choice.selected {
  background: #1e3a66 !important;
  border-color: #60a5fa !important;
  box-shadow: inset 0 0 0 1px #60a5fa;
}
.choice.correct {
  border-color: #5fae76 !important;
  background: #e2ecd9 !important;
  color: #2c5335 !important;
}
.dark .choice.correct {
  border-color: #22c55e !important;
  background: #143823 !important;
  color: #bbf7d0 !important;
}
.choice.wrong {
  border-color: #c14a3d !important;
  background: #f1dcdc !important;
  color: #6d2724 !important;
}
.dark .choice.wrong {
  border-color: #ef4444 !important;
  background: #451a1a !important;
  color: #fca5a5 !important;
}
.choice.crossed {
  opacity: 0.4 !important;
  background-color: var(--cream) !important;
  border-style: dashed !important;
}
.choice.crossed .option-text {
  text-decoration: line-through !important;
  text-decoration-thickness: 2px !important;
  color: var(--muted) !important;
}

.nav-btn {
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease,
    transform 0.18s var(--spring),
    box-shadow 0.18s ease;
}
.nav-btn:not(.active):hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(85, 70, 40, 0.12);
}
.dark .nav-btn:not(.active):hover {
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
}
.nav-btn:not(.active):active {
  transform: translateY(0);
}
.nav-btn.active {
  background-color: var(--ink);
  color: var(--card-bg);
  border-color: var(--ink);
  border-width: 2px;
}
.dark .nav-btn.active {
  background-color: #2456d6;
  color: #ffffff;
  border-color: #3b82f6;
}
.nav-btn.answered {
  background-color: #e2ecd9;
  color: #2c5335;
  border-color: #5fae76;
}
.dark .nav-btn.answered {
  background-color: #143823;
  color: #bbf7d0;
  border-color: #22c55e;
}
.nav-btn.flagged {
  background-color: #f4e8ca;
  color: #86562a;
  border-color: #c99552;
}
.dark .nav-btn.flagged {
  background-color: #451a03;
  color: #fcd34d;
  border-color: #f59e0b;
}
.nav-btn.flagged::after {
  content: "";
  position: absolute;
  top: 3px;
  right: 3px;
  width: 6px;
  height: 6px;
  background-color: #c99552;
  border-radius: 50%;
}

.hl-yellow {
  background-color: #fde047 !important;
  color: #000 !important;
  border-radius: 2px;
}
.hl-green {
  background-color: #4ade80 !important;
  color: #000 !important;
  border-radius: 2px;
}
.hl-blue {
  background-color: #60a5fa !important;
  color: #000 !important;
  border-radius: 2px;
}
.hl-pink {
  background-color: #f472b6 !important;
  color: #000 !important;
  border-radius: 2px;
}
.hl-purple {
  background-color: #c084fc !important;
  color: #000 !important;
  border-radius: 2px;
}

#hl-popup {
  position: fixed;
  display: flex;
  align-items: center;
  transform: scale(0.85);
  transform-origin: center top;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity 0.14s ease,
    visibility 0s linear 0.22s;
}
#hl-popup.hl-popup-visible {
  transform: scale(1);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition:
    transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity 0.14s ease,
    visibility 0s linear 0s;
}
#hl-popup[data-above="true"] {
  transform-origin: center bottom;
}

@media (prefers-reduced-motion: reduce) {
  #hl-popup,
  #hl-popup.hl-popup-visible {
    transition: opacity 0.1s ease;
    transform: none;
  }
}

header nav a {
  position: relative;
  transition: color 0.18s ease;
}
header nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
  transform: scaleX(0);
  transform-origin: center center;
  transition: transform 0.24s var(--ease);
}
header nav a:hover::after,
header nav a:focus-visible::after {
  transform: scaleX(1);
}

.arrow-link {
  transition: color 0.18s ease;
}
.arrow-link .arrow {
  display: inline-block;
  transition: transform 0.22s var(--spring);
}
.arrow-link:hover .arrow,
.arrow-link:focus-visible .arrow {
  transform: translateX(4px);
}
.card-interactive .arrow {
  display: inline-block;
  transition: transform 0.22s var(--spring);
}
.card-interactive:hover .arrow {
  transform: translateX(4px);
}

#mode-instant,
#mode-timed {
  transition:
    background-color 0.15s ease,
    color 0.15s ease,
    box-shadow 0.15s ease;
}
#mode-instant.text-slate-600:hover,
#mode-timed.text-slate-600:hover {
  color: var(--ink);
  background-color: rgba(255, 255, 255, 0.55);
}
.dark #mode-instant.text-slate-600:hover,
.dark #mode-timed.text-slate-600:hover {
  color: #ffffff;
  background-color: rgba(255, 255, 255, 0.06);
}

.stream-btn {
  border-radius: 0.5rem;
  transition:
    background-color 0.18s ease,
    color 0.18s ease,
    box-shadow 0.18s ease;
}
.stream-btn.bg-white {
  box-shadow: 0 1px 2px rgba(85, 70, 40, 0.06);
}
.dark .stream-btn.bg-white {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}
.stream-btn:not(.bg-white):hover {
  color: var(--ink);
  background-color: rgba(255, 255, 255, 0.45);
}
.dark .stream-btn:not(.bg-white):hover {
  color: #ffffff;
  background-color: rgba(255, 255, 255, 0.06);
}

#profile-btn {
  border-radius: 9999px;
  transition: background-color 0.18s ease;
}
#profile-avatar-large {
  width: 5rem;
  height: 5rem;
  aspect-ratio: 1 / 1;
  flex-shrink: 0;
  border-radius: 9999px;
  box-shadow:
    0 0 0 4px var(--accent-soft),
    0 6px 16px rgba(15, 23, 42, 0.16);
}

#theme-toggle {
  transition:
    background-color 0.18s ease,
    border-color 0.18s ease;
}
#theme-toggle:hover {
  background-color: var(--soft);
}
.dark #theme-toggle:hover {
  background-color: rgba(255, 255, 255, 0.06);
}

.glass {
  background: color-mix(in srgb, var(--cream) 75%, transparent);
  border: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
  box-shadow: 0 24px 70px rgba(85, 70, 40, 0.09);
  backdrop-filter: blur(18px);
}
.dark .glass {
  background: rgba(12, 37, 76, 0.72);
  border-color: #294b79;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.24);
}
.mesh {
  background-image:
    radial-gradient(
      circle at 20% 20%,
      rgba(111, 163, 255, 0.14),
      transparent 27%
    ),
    radial-gradient(
      circle at 80% 10%,
      rgba(61, 95, 142, 0.12),
      transparent 24%
    ),
    linear-gradient(
      135deg,
      transparent 0 49%,
      rgba(111, 163, 255, 0.04) 50% 51%,
      transparent 52%
    );
}
.dark .mesh {
  background-image:
    radial-gradient(
      circle at 20% 20%,
      rgba(36, 86, 214, 0.23),
      transparent 28%
    ),
    radial-gradient(
      circle at 84% 12%,
      rgba(111, 163, 255, 0.12),
      transparent 24%
    );
}
.eyebrow {
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 800;
}

#hero-choices .choice.selected {
  border-color: var(--accent) !important;
  background: var(--soft) !important;
  box-shadow: inset 0 0 0 1px var(--accent);
}
#hero-choices .choice.correct {
  border-color: #5fae76 !important;
  background: #e2ecd9 !important;
  color: #2c5335 !important;
  box-shadow: inset 0 0 0 1px #5fae76;
}
.dark #hero-choices .choice.correct {
  background: #143823 !important;
  color: #bbf7d0 !important;
  border-color: #22c55e !important;
}
#hero-choices .choice.wrong {
  border-color: #c14a3d !important;
  background: #f1dcdc !important;
  color: #6d2724 !important;
  box-shadow: inset 0 0 0 1px #c14a3d;
}
.dark #hero-choices .choice.wrong {
  background: #451a1a !important;
  color: #fca5a5 !important;
}

.fade-up {
  animation: fadeUp 0.7s cubic-bezier(0.23, 1, 0.32, 1) both;
}
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

#site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  border-bottom: 1px solid transparent;
  background: transparent;
  transition:
    background 0.3s ease,
    backdrop-filter 0.3s ease,
    -webkit-backdrop-filter 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}
#site-header.scrolled {
  background: rgba(242, 237, 223, 0.8);
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  border-bottom-color: var(--line);
  box-shadow: 0 4px 24px rgba(85, 70, 40, 0.06);
}
/* Header background — Tailwind can't compile bg-[var(--cream)]/90, so we
   build it with color-mix. Opaque fallback on the first line covers older
   browsers that don't support color-mix. The mobile pass below disables
   the blur and uses the opaque fallback. */
.hdr-blur {
  background: var(--cream);
  background: color-mix(in srgb, var(--cream) 90%, transparent);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  backdrop-filter: blur(12px) saturate(180%);
}
.dark #site-header.scrolled {
  background: rgba(7, 26, 58, 0.72);
  border-bottom-color: #294b79;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
}

@media (prefers-reduced-motion: reduce) {
  *,
  html {
    scroll-behavior: auto !important;
    animation: none !important;
    transition: none !important;
  }
}

:root:not(.dark) [class~="text-[#2456d6]"] {
  color: var(--accent) !important;
}
:root:not(.dark) [class~="text-[#172554]"] {
  color: var(--ink) !important;
}
:root:not(.dark) [class~="text-[#315789]"] {
  color: var(--muted) !important;
}
:root:not(.dark) [class~="text-[#6fa3ff]"] {
  color: var(--accent) !important;
}
:root:not(.dark) [class~="text-[#dbeafe]"] {
  color: var(--card-bg) !important;
}
:root:not(.dark) a[class~="bg-[#172554]"],
:root:not(.dark) button[class~="bg-[#172554]"] {
  background-color: var(--ink);
}
:root:not(.dark) a[class~="bg-[#172554]"]:hover,
:root:not(.dark) button[class~="bg-[#172554]"]:hover {
  background-color: var(--accent);
}
:root:not(.dark) [class~="bg-[#dbeafe]"] {
  background-color: var(--soft) !important;
}

/* POLISH LAYER */
:root {
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}
html {
  scroll-behavior: smooth;
  scrollbar-gutter: stable;
  -webkit-tap-highlight-color: transparent;
}
html.eq-lock {
  overflow: hidden;
}

html.eq-theming,
html.eq-theming *,
html.eq-theming *::before,
html.eq-theming *::after {
  transition:
    background-color 0.3s ease,
    border-color 0.3s ease,
    color 0.3s ease,
    fill 0.3s ease,
    stroke 0.3s ease,
    box-shadow 0.3s ease !important;
}

#loading {
  transition:
    opacity 0.35s var(--ease-out),
    visibility 0s linear 0s;
}
#loading.hidden {
  display: flex !important;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.35s var(--ease-out),
    visibility 0s linear 0.35s;
}
#loading.hidden * {
  animation-play-state: paused !important;
}
#app:not(.hidden) {
  animation: eqAppIn 0.5s var(--ease-out) backwards;
}
@keyframes eqAppIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

[data-eq-modal] {
  transition:
    opacity 0.24s var(--ease-out),
    visibility 0s linear 0s;
}
[data-eq-modal] > * {
  transition:
    transform 0.3s var(--ease-out),
    opacity 0.24s ease;
}
[data-eq-modal].hidden {
  display: flex !important;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.2s ease,
    visibility 0s linear 0.2s;
}
[data-eq-modal].hidden > * {
  transform: translateY(10px) scale(0.98);
  opacity: 0;
  transition:
    transform 0.2s ease,
    opacity 0.18s ease;
}
#results[data-eq-modal].hidden {
  display: grid !important;
  place-items: center;
}
#q-modal.hidden,
#student-modal.hidden,
#bulk-modal.hidden,
#breakdown-modal.hidden,
#review-modal.hidden {
  align-items: flex-start;
}

:where(button, [role="button"], summary) {
  touch-action: manipulation;
}
:where(a[href]) {
  touch-action: manipulation;
}
:where(a[href], summary):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}
:where(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    background-color 0.18s ease;
}
:where(
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea
):focus-visible {
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.choice.selected {
  animation: eqSelect 0.22s var(--ease-out);
}
.choice.correct {
  animation: eqSelect 0.3s var(--ease-out);
}
.choice.wrong {
  animation: eqSelect 0.3s var(--ease-out);
}
@keyframes eqSelect {
  from {
    transform: scale(0.99);
  }
  to {
    transform: none;
  }
}
@keyframes eqPop {
  0% {
    transform: scale(0.97);
  }
  55% {
    transform: scale(1.025);
  }
  100% {
    transform: none;
  }
}
@keyframes eqShake {
  0%,
  100% {
    transform: none;
  }
  20% {
    transform: translateX(-6px);
  }
  40% {
    transform: translateX(5px);
  }
  60% {
    transform: translateX(-3px);
  }
  80% {
    transform: translateX(2px);
  }
}

#feedback:not(.hidden),
#hint-box:not(.hidden),
#hero-feedback:not(.hidden),
#review-explanation-box:not(.hidden),
#orphan-note:not(.hidden),
#status-msg:not(.hidden),
#form-signin:not(.hidden),
#form-signup:not(.hidden),
#form-reset:not(.hidden),
#state-done:not(.hidden),
#state-invalid:not(.hidden),
#exam-intro:not(.hidden),
#exam-container:not(.hidden) {
  animation: eqReveal 0.3s var(--ease-out) backwards;
}
@keyframes eqReveal {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
#mobile-menu:not(.hidden) {
  animation: eqDrop 0.24s var(--ease-out) backwards;
  transform-origin: top center;
}
@keyframes eqDrop {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.eq-swap {
  animation: eqSwap 0.34s var(--ease-out) backwards;
}
.eq-swap-back {
  animation: eqSwapBack 0.34s var(--ease-out) backwards;
}
@keyframes eqSwap {
  from {
    opacity: 0;
    transform: translateX(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes eqSwapBack {
  from {
    opacity: 0;
    transform: translateX(-14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.eq-in {
  animation: eqRise 0.5s var(--ease-out) backwards;
  animation-delay: calc(var(--i, 0) * 45ms);
}
@keyframes eqRise {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.eq-grow {
  transform-origin: left center;
  animation: eqGrow 0.9s var(--ease-out) backwards;
  animation-delay: calc(var(--i, 0) * 45ms + 0.2s);
}
@keyframes eqGrow {
  from {
    transform: scaleX(0);
  }
}

:where(:root:not(.dark)) .text-slate-300 {
  color: #7a8493;
}
:where(:root:not(.dark)) .text-slate-400 {
  color: #657080;
}
:where(:root:not(.dark)) .text-slate-500 {
  color: #4f5968;
}
:where(:root:not(.dark)) .text-slate-600 {
  color: #374151;
}
:where(:root:not(.dark)) .bg-slate-200 {
  background-color: #dcd4bf;
}
:where(:root:not(.dark)) .input-field::placeholder,
:where(:root:not(.dark)) ::placeholder {
  color: #908874;
}

:where(:root:not(.dark)) .choice {
  border-color: #cdc4ac;
  background-color: var(--card-bg);
  color: var(--ink);
}
:where(:root:not(.dark)) .choice.selected {
  background: #e6edfb !important;
  border-color: var(--accent) !important;
  box-shadow: inset 0 0 0 1px var(--accent) !important;
}
:where(:root:not(.dark)) .choice.correct {
  background: #e3f2e6 !important;
  border-color: #4c9a62 !important;
  color: #1f4d2c !important;
  box-shadow: inset 0 0 0 1px #4c9a62 !important;
}
:where(:root:not(.dark)) .choice.wrong {
  background: #fae4e1 !important;
  border-color: #c4554a !important;
  color: #6d2724 !important;
  box-shadow: inset 0 0 0 1px #c4554a !important;
}
:where(:root:not(.dark)) .nav-btn.answered {
  border-color: #4c9a62;
}

button:is(
    .btn-primary,
    [class*="bg-[#172554]"],
    [class*="bg-[#2456d6]"],
    [class*="bg-amber-500"]
  ):not(:disabled):not(
    :is(
      .nav-btn,
      .stream-btn,
      [id="mode-instant"],
      [id="mode-timed"],
      [id="tab-signin"],
      [id="tab-signup"],
      [id="theme-toggle"],
      [id="profile-btn"],
      [id="menu-toggle"]
    )
  ),
a:is(
    .btn-primary,
    [class*="bg-[#172554]"],
    [class*="bg-[#2456d6]"],
    [class*="bg-amber-500"]
  ):not(:disabled):not(
    :is(
      .nav-btn,
      .stream-btn,
      [id="mode-instant"],
      [id="mode-timed"],
      [id="tab-signin"],
      [id="tab-signup"],
      [id="theme-toggle"],
      [id="profile-btn"],
      [id="menu-toggle"]
    )
  ) {
  transition:
    transform 0.18s var(--ease-out),
    box-shadow 0.18s ease,
    background-color 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease;
}
button:is(
    .btn-primary,
    [class*="bg-[#172554]"],
    [class*="bg-[#2456d6]"],
    [class*="bg-amber-500"]
  ):not(:disabled):not(
    :is(
      .nav-btn,
      .stream-btn,
      [id="mode-instant"],
      [id="mode-timed"],
      [id="tab-signin"],
      [id="tab-signup"],
      [id="theme-toggle"],
      [id="profile-btn"],
      [id="menu-toggle"]
    )
  ):hover,
a:is(
    .btn-primary,
    [class*="bg-[#172554]"],
    [class*="bg-[#2456d6]"],
    [class*="bg-amber-500"]
  ):not(:disabled):not(
    :is(
      .nav-btn,
      .stream-btn,
      [id="mode-instant"],
      [id="mode-timed"],
      [id="tab-signin"],
      [id="tab-signup"],
      [id="theme-toggle"],
      [id="profile-btn"],
      [id="menu-toggle"]
    )
  ):hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(30, 39, 51, 0.16);
}
button:is(
    .btn-primary,
    [class*="bg-[#172554]"],
    [class*="bg-[#2456d6]"],
    [class*="bg-amber-500"]
  ):not(:disabled):not(
    :is(
      .nav-btn,
      .stream-btn,
      [id="mode-instant"],
      [id="mode-timed"],
      [id="tab-signin"],
      [id="tab-signup"],
      [id="theme-toggle"],
      [id="profile-btn"],
      [id="menu-toggle"]
    )
  ):active,
a:is(
    .btn-primary,
    [class*="bg-[#172554]"],
    [class*="bg-[#2456d6]"],
    [class*="bg-amber-500"]
  ):not(:disabled):not(
    :is(
      .nav-btn,
      .stream-btn,
      [id="mode-instant"],
      [id="mode-timed"],
      [id="tab-signin"],
      [id="tab-signup"],
      [id="theme-toggle"],
      [id="profile-btn"],
      [id="menu-toggle"]
    )
  ):active {
  transform: translateY(0);
  box-shadow: 0 1px 3px rgba(30, 39, 51, 0.18);
}
.dark
  button:is(
    .btn-primary,
    [class*="bg-[#172554]"],
    [class*="bg-[#2456d6]"],
    [class*="bg-amber-500"]
  ):not(:disabled):not(
    :is(
      .nav-btn,
      .stream-btn,
      [id="mode-instant"],
      [id="mode-timed"],
      [id="tab-signin"],
      [id="tab-signup"],
      [id="theme-toggle"],
      [id="profile-btn"],
      [id="menu-toggle"]
    )
  ):hover,
.dark
  a:is(
    .btn-primary,
    [class*="bg-[#172554]"],
    [class*="bg-[#2456d6]"],
    [class*="bg-amber-500"]
  ):not(:disabled):not(
    :is(
      .nav-btn,
      .stream-btn,
      [id="mode-instant"],
      [id="mode-timed"],
      [id="tab-signin"],
      [id="tab-signup"],
      [id="theme-toggle"],
      [id="profile-btn"],
      [id="menu-toggle"]
    )
  ):hover {
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}

#check:not(:disabled),
#next-btn:not(:disabled) {
  box-shadow: 0 2px 8px rgba(30, 39, 51, 0.2);
}
#check:not(:disabled):hover,
#next-btn:not(:disabled):hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(30, 39, 51, 0.26);
}
#check:not(:disabled):active,
#next-btn:not(:disabled):active {
  transform: translateY(0);
  box-shadow: 0 1px 4px rgba(30, 39, 51, 0.24);
}
#check:not(:disabled) {
  animation: eqReady 0.6s ease-out;
}
@keyframes eqReady {
  from {
    box-shadow:
      0 0 0 5px var(--accent-soft),
      0 2px 8px rgba(30, 39, 51, 0.2);
  }
  to {
    box-shadow:
      0 0 0 0 transparent,
      0 2px 8px rgba(30, 39, 51, 0.2);
  }
}
#check:disabled,
#next-btn:disabled {
  filter: grayscale(0.3);
}

#open-nav-btn,
#open-filter-btn,
#hint-btn,
#flag,
#flag-btn,
#clear-btn,
#report-btn,
#reset-filters,
#reset-filter-btn,
#cancel-filter-btn,
[data-eq-modal] button[id^="cancel-"],
#load-more {
  transition:
    box-shadow 0.18s ease,
    background-color 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease;
}
#open-nav-btn:not(:disabled):hover,
#open-filter-btn:not(:disabled):hover,
#hint-btn:not(:disabled):hover,
#flag:not(:disabled):hover,
#flag-btn:not(:disabled):hover,
#clear-btn:not(:disabled):hover,
#report-btn:not(:disabled):hover,
#reset-filters:not(:disabled):hover,
#reset-filter-btn:not(:disabled):hover,
#cancel-filter-btn:not(:disabled):hover,
[data-eq-modal] button[id^="cancel-"]:not(:disabled):hover,
#load-more:not(:disabled):hover {
  box-shadow: inset 0 0 0 999px color-mix(in srgb, currentColor 7%, transparent);
}

#theme-toggle[class*="hover:-translate-y"]:hover {
  transform: none;
}
[data-eq-modal] button[id^="close-"],
[data-eq-modal] button[onclick*="close"] {
  transition: color 0.18s ease;
}

/* MOBILE PASS — Target: ONLY phones (< 768px) */
@media (max-width: 767.98px) {
  header,
  #site-header.scrolled,
  .glass,
  [class*="backdrop-blur"],
  .hdr-blur {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  header {
    background-color: var(--cream) !important;
    border-bottom: 1px solid var(--line) !important;
  }

  .choice:hover,
  .card-interactive:hover,
  .card-hover:hover,
  .nav-btn:not(.active):hover,
  .sidebar-link:not(.active):hover,
  .btn-primary:hover,
  .btn-secondary:hover {
    transform: none !important;
    box-shadow: none !important;
    border-color: inherit;
    background-color: inherit;
  }

  .card.p-6,
  .card.p-8 {
    padding: 1.25rem;
  }
  body {
    padding-bottom: calc(72px + env(safe-area-inset-bottom)) !important;
  }
  #mobile-tabbar {
    display: flex !important;
  }

  #admin-app > aside {
    display: none !important;
  }
  #admin-app > main {
    padding-bottom: calc(70px + env(safe-area-inset-bottom)) !important;
  }
  body:not([data-role]) #admin-tabbar {
    display: none !important;
  }
}

#mobile-tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 45;
  display: none;
  background: var(--card-bg);
  border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
  box-shadow: 0 -4px 16px rgba(15, 23, 42, 0.06);
}
.dark #mobile-tabbar {
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.25);
}
#mobile-tabbar > a {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 10px 4px 8px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.15s ease;
  position: relative;
}
#mobile-tabbar > a > svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}
#mobile-tabbar > a.active {
  color: var(--accent);
}
#mobile-tabbar > a.active::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 24px;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: var(--accent);
}
#mobile-tabbar > a:active {
  background-color: var(--soft);
}

#admin-tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 45;
  display: none;
  background: var(--card-bg);
  border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
  box-shadow: 0 -4px 16px rgba(15, 23, 42, 0.06);
}
.dark #admin-tabbar {
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.25);
}
#admin-tabbar > a {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 10px 2px 8px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.15s ease;
  position: relative;
}
#admin-tabbar > a > svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
#admin-tabbar > a.active {
  color: var(--accent);
}
#admin-tabbar > a.active::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 24px;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: var(--accent);
}
#admin-tabbar > a:active {
  background-color: var(--soft);
}
@media (max-width: 767.98px) {
  #admin-tabbar {
    display: flex;
  }
}
@media (max-width: 767.98px) {
  body:not([data-role]) #admin-tabbar {
    display: none !important;
  }
}

#auth-loading.hidden {
  display: flex !important;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.35s var(--ease-out),
    visibility 0s linear 0.35s;
}