:root {
  --learner-bg: #0b1020;
  --learner-bg-2: #0d1117;
  --learner-ink: #e5e7eb;
  --learner-muted: #94a3b8;
  --learner-accent: #22c55e;
  --learner-border: rgba(148, 163, 184, .18);
}

.learner-page {
  color: var(--learner-ink);
  background: var(--learner-bg);
}

.learner-glass {
  backdrop-filter: saturate(180%) blur(10px);
  background: rgba(11, 16, 32, .68);
  border: 1px solid var(--learner-border);
}

.learner-panel {
  background: linear-gradient(180deg, rgba(15, 23, 42, .82), rgba(11, 16, 32, .92));
  border: 1px solid var(--learner-border);
  border-radius: 14px;
}

.learner-footer-glow {
  position: relative;
  overflow: hidden;
}

.learner-footer-glow::before {
  content: "";
  position: absolute;
  inset: -20%;
  z-index: 0;
  background:
    radial-gradient(600px 300px at var(--x, 18%) 25%, rgba(13, 110, 253, .22), transparent 60%),
    radial-gradient(520px 260px at calc(100% - var(--x, 18%)) 75%, rgba(34, 197, 94, .18), transparent 60%),
    linear-gradient(180deg, var(--learner-bg) 0%, var(--learner-bg-2) 100%);
  filter: blur(18px);
  animation: learnerFooterGlow 14s ease-in-out infinite alternate;
  pointer-events: none;
}

@keyframes learnerFooterGlow {
  0% { --x: 18%; }
  50% { --x: 52%; }
  100% { --x: 82%; }
}