/**
 * AI LMS — custom styles (Tailwind handles most layout).
 */

:root {
  color-scheme: dark;
  --color-bg: #020617;
  --color-surface: #0f172a;
  --color-surface-muted: #111827;
  --color-surface-elevated: #1e293b;
  --color-border: #334155;
  --color-text: #e2e8f0;
  --color-text-muted: #94a3b8;
  --color-accent: #60a5fa;
  --color-accent-strong: #3b82f6;
  --color-danger: #f87171;
  --color-danger-bg: rgb(127 29 29 / 0.22);
  --color-success: #34d399;
  --color-success-bg: rgb(6 78 59 / 0.22);
  --shadow-card: 0 18px 45px rgb(0 0 0 / 0.24);
}

html {
  color-scheme: dark;
  background-color: var(--color-bg);
}

html::before {
  position: fixed;
  inset: 0;
  z-index: -2;
  content: "";
  pointer-events: none;
  background:
    radial-gradient(ellipse 80rem 50rem at 12vw 0, rgb(34 211 238 / 0.2), transparent 70%),
    radial-gradient(ellipse 70rem 45rem at 88vw 5vh, rgb(168 85 247 / 0.18), transparent 70%),
    radial-gradient(ellipse 90rem 55rem at 50vw 100vh, rgb(59 130 246 / 0.14), transparent 70%),
    linear-gradient(160deg, #020617 0%, #07111f 42%, #0b1020 100%);
}

html::after {
  position: fixed;
  inset: 0;
  z-index: -1;
  content: "";
  pointer-events: none;
  background-image:
    linear-gradient(rgb(255 255 255 / 0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 255 255 / 0.022) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 120% 80% at 50% 0%, black, transparent 75%);
}

body {
  min-height: 100vh;
  background: transparent;
  color: var(--color-text);
}

.auth-shell {
  background: transparent;
}

.surface-header {
  background: rgb(2 6 23 / 0.42);
  backdrop-filter: blur(18px) saturate(140%);
}

.surface-card {
  border: 1px solid var(--color-border);
  border-radius: 1.5rem;
  background:
    linear-gradient(180deg, rgb(255 255 255 / 0.08), rgb(255 255 255 / 0.035));
  box-shadow: 0 24px 70px rgb(0 0 0 / 0.24);
  backdrop-filter: blur(18px) saturate(140%);
}

.sidebar-shell {
  border-right: 1px solid var(--color-border);
  background:
    radial-gradient(circle at 20% 0%, rgb(34 211 238 / 0.12), transparent 18rem),
    linear-gradient(180deg, rgb(15 23 42 / 0.96), rgb(2 6 23 / 0.96));
  backdrop-filter: blur(18px) saturate(140%);
}

.border-token {
  border-color: var(--color-border);
}

.text-muted {
  color: var(--color-text-muted);
}

.bg-surface {
  background-color: var(--color-surface);
}

.site-footer {
  background: transparent;
}

.loader-spinner {
  border-color: rgb(255 255 255 / 0.16);
  border-top-color: #67e8f9;
  box-shadow: 0 0 32px rgb(34 211 238 / 0.24);
}

.chat-bubble-user,
.chat-bubble-assistant {
  border-radius: 1rem;
  border: 1px solid rgb(255 255 255 / 0.1);
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  line-height: 1.55;
  box-shadow: 0 18px 44px rgb(0 0 0 / 0.18);
}

.chat-bubble-user {
  background: linear-gradient(135deg, #22d3ee, #3b82f6 52%, #a855f7);
  color: #fff;
}

.chat-bubble-assistant {
  background:
    linear-gradient(180deg, rgb(255 255 255 / 0.08), rgb(255 255 255 / 0.035));
  color: var(--color-text);
  backdrop-filter: blur(18px) saturate(140%);
}

/* Compatibility layer while templates are gradually moved from light utilities. */
.dark .bg-white {
  background:
    linear-gradient(180deg, rgb(255 255 255 / 0.08), rgb(255 255 255 / 0.035)) !important;
  backdrop-filter: blur(18px) saturate(140%);
}

.dark .bg-slate-50,
.dark .bg-slate-100 {
  background-color: rgb(255 255 255 / 0.055) !important;
}

.dark [class*="bg-brand-50"],
.dark [class*="bg-brand-500"],
.dark .bg-brand-100 {
  background-color: rgb(59 130 246 / 0.13) !important;
}

.dark .bg-brand-600 {
  background: linear-gradient(135deg, #22d3ee, #3b82f6 48%, #a855f7) !important;
}

.dark .bg-red-50,
.dark .bg-red-100 {
  background-color: rgb(239 68 68 / 0.12) !important;
}

.dark .bg-emerald-50,
.dark .bg-emerald-100 {
  background-color: rgb(16 185 129 / 0.14) !important;
}

.dark .bg-amber-50,
.dark .bg-amber-100 {
  background-color: rgb(245 158 11 / 0.14) !important;
}

.dark .hover\:bg-slate-50:hover,
.dark .hover\:bg-slate-100:hover {
  background-color: rgb(34 211 238 / 0.09) !important;
}

.dark .border-slate-100,
.dark .border-slate-200,
.dark .border-slate-300,
.dark .border-slate-400,
.dark .border-brand-200,
.dark .border-red-200,
.dark .border-emerald-200,
.dark .border-amber-200 {
  border-color: rgb(255 255 255 / 0.1) !important;
}

.dark .divide-slate-100 > :not([hidden]) ~ :not([hidden]),
.dark .divide-slate-200 > :not([hidden]) ~ :not([hidden]) {
  border-color: rgb(255 255 255 / 0.08) !important;
}

.dark .text-slate-900,
.dark .text-slate-800,
.dark .text-slate-700,
.dark .text-brand-800,
.dark .text-brand-900 {
  color: var(--color-text) !important;
}

.dark .text-slate-600,
.dark .text-slate-500,
.dark .text-slate-400,
.dark .text-brand-700 {
  color: var(--color-text-muted) !important;
}

.dark .text-brand-500,
.dark .text-brand-600,
.dark .hover\:text-brand-600:hover,
.dark .hover\:text-brand-700:hover {
  color: #67e8f9 !important;
}

.dark .hover\:text-slate-900:hover {
  color: #fff !important;
}

.dark .text-emerald-700,
.dark .text-emerald-800,
.dark .text-emerald-900 {
  color: #a7f3d0 !important;
}

.dark .text-amber-700,
.dark .text-amber-800,
.dark .text-amber-900 {
  color: #fde68a !important;
}

.dark .text-red-800,
.dark .text-red-900,
.dark .text-red-100 {
  color: #fecaca !important;
}

.dark .shadow-sm,
.dark .shadow-xl {
  box-shadow: 0 24px 70px rgb(0 0 0 / 0.24) !important;
}

.dark table tbody tr {
  transition: background-color 0.15s ease;
}

.dark table tbody tr:hover {
  background-color: rgb(34 211 238 / 0.055);
}

.icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border);
  border-radius: 0.75rem;
  min-height: 2.25rem;
  padding: 0.5rem 0.75rem;
  color: var(--color-text-muted);
  font-size: 0.75rem;
  font-weight: 600;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.icon-button:hover {
  border-color: var(--color-accent);
  background-color: color-mix(in srgb, var(--color-accent) 12%, transparent);
  color: var(--color-text);
}

.sidebar-link {
  display: block;
  border-radius: 0.75rem;
  padding: 0.625rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text-muted);
  transition: background-color 0.15s ease, color 0.15s ease;
}

.sidebar-link:hover {
  background-color: color-mix(in srgb, var(--color-accent) 10%, transparent);
  color: var(--color-text);
}

.sidebar-link:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.sidebar-link-active {
  background:
    linear-gradient(135deg, rgb(34 211 238 / 0.16), rgb(168 85 247 / 0.12));
  color: #67e8f9;
  box-shadow: inset 0 0 0 1px rgb(103 232 249 / 0.16);
}

.sidebar-link-danger {
  color: var(--color-danger);
}

.sidebar-link-danger:hover {
  background-color: var(--color-danger-bg);
  color: var(--color-danger);
}

.student-top-nav {
  display: flex;
  justify-content: flex-end;
  gap: 0.25rem;
  overflow-x: auto;
  max-width: 100%;
  scrollbar-width: none;
}

.student-top-nav::-webkit-scrollbar {
  display: none;
}

.top-nav-link {
  flex: 0 0 auto;
  border-radius: 9999px;
  padding: 0.5rem 0.75rem;
  color: var(--color-text-muted);
  font-size: 0.875rem;
  font-weight: 600;
  transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.top-nav-link:hover {
  background-color: rgb(34 211 238 / 0.09);
  color: var(--color-text);
}

.top-nav-link:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.top-nav-link-active {
  background: rgb(34 211 238 / 0.1);
  color: #fff;
  box-shadow:
    inset 0 0 0 1px rgb(103 232 249 / 0.18),
    0 0 24px rgb(34 211 238 / 0.12);
}

.top-nav-link-logout {
  color: var(--color-danger);
}

.top-nav-link-logout:hover {
  background-color: var(--color-danger-bg);
  color: var(--color-danger);
}

[x-cloak] {
  display: none !important;
}

/* Forms */
.form-label {
  display: block;
  margin-bottom: 0.375rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text);
}

.form-input {
  display: block;
  width: 100%;
  border-radius: 0.75rem;
  border: 1px solid var(--color-border) !important;
  padding: 0.625rem 0.75rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--color-text) !important;
  caret-color: var(--color-accent);
  background-color: var(--color-surface-elevated) !important;
  color-scheme: dark;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.dark .form-input {
  color-scheme: dark;
}

.form-input::placeholder {
  color: var(--color-text-muted);
  opacity: 0.85;
}

.form-input:disabled,
.form-input[readonly] {
  cursor: not-allowed;
  opacity: 0.72;
  background-color: var(--color-surface-muted) !important;
}

.form-input:-webkit-autofill,
.form-input:-webkit-autofill:hover,
.form-input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--color-text) !important;
  caret-color: var(--color-accent);
  box-shadow: 0 0 0 1000px var(--color-surface-elevated) inset !important;
  transition: background-color 9999s ease-out;
}

.form-input:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 20%, transparent);
}

textarea.form-input,
select.form-input {
  resize: vertical;
  min-height: 2.75rem;
}

select.form-input option {
  color: var(--color-text);
  background-color: var(--color-surface);
}

.form-input::file-selector-button {
  margin: -0.625rem 0.75rem -0.625rem -0.75rem;
  border: 0;
  border-right: 1px solid var(--color-border);
  background-color: var(--color-surface-muted);
  padding: 0.625rem 0.75rem;
  color: var(--color-text);
  font-weight: 600;
}

textarea.form-input {
  min-height: 5rem;
}

.form-input-error {
  border-color: #f87171;
}

.form-input-error:focus {
  border-color: #ef4444;
  box-shadow: 0 0 0 3px rgb(239 68 68 / 0.15);
}

.form-error {
  margin-top: 0.375rem;
  font-size: 0.75rem;
  color: var(--color-danger);
}

/* Buttons */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.75rem;
  background: linear-gradient(135deg, #22d3ee, #3b82f6 48%, #a855f7);
  padding: 0.625rem 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: #fff;
  box-shadow: 0 18px 42px rgb(59 130 246 / 0.22);
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

.btn-primary:hover:not(:disabled) {
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow: 0 22px 50px rgb(59 130 246 / 0.3);
}

.btn-primary:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.btn-primary:disabled {
  cursor: not-allowed;
  opacity: 0.65;
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.75rem;
  border: 1px solid rgb(255 255 255 / 0.12);
  background-color: rgb(255 255 255 / 0.06);
  padding: 0.625rem 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text);
  transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.btn-secondary:hover:not(:disabled) {
  background-color: rgb(34 211 238 / 0.09);
  border-color: rgb(103 232 249 / 0.38);
  transform: translateY(-1px);
}

.btn-secondary:disabled {
  cursor: not-allowed;
  opacity: 0.65;
}

.btn-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.75rem;
  background-color: var(--color-danger);
  padding: 0.5rem 0.875rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #fff;
  transition: background-color 0.15s ease;
}

.btn-danger:hover:not(:disabled) {
  background-color: #b91c1c;
}

.btn-danger:disabled {
  cursor: not-allowed;
  opacity: 0.65;
}

/* Dashboard */
.page-container > section:not(.dashboard-home) > header {
  position: relative;
  overflow: hidden;
  border-radius: 0;
  padding: 0.25rem 0 0.5rem;
}

.page-container > section:not(.dashboard-home) > header::before {
  display: none;
}

.page-container > section:not(.dashboard-home) > header > * {
  position: relative;
  z-index: 1;
}

.page-container > section:not(.dashboard-home) > header h1 {
  color: #fff;
  letter-spacing: -0.025em;
}

.page-container > section:not(.dashboard-home) > header p,
.page-container > section:not(.dashboard-home) > header nav {
  color: var(--color-text-muted);
}

.page-container > section:not(.dashboard-home) .rounded-2xl.border.bg-white,
.page-container > section:not(.dashboard-home) form.rounded-2xl.border,
.page-container > section:not(.dashboard-home) article.rounded-2xl.border,
.page-container > section:not(.dashboard-home) div.overflow-hidden.rounded-2xl.border {
  border-color: rgb(255 255 255 / 0.1) !important;
  background:
    linear-gradient(180deg, rgb(255 255 255 / 0.08), rgb(255 255 255 / 0.035)) !important;
  box-shadow: 0 24px 70px rgb(0 0 0 / 0.24) !important;
  backdrop-filter: blur(18px) saturate(140%);
}

.page-container > section:not(.dashboard-home) .rounded-2xl.border-dashed {
  border-color: rgb(255 255 255 / 0.15) !important;
  background-color: rgb(255 255 255 / 0.04) !important;
}

.auth-shell main section.rounded-2xl {
  position: relative;
  overflow: hidden;
  border-color: rgb(255 255 255 / 0.12) !important;
  border-radius: 1.75rem;
  background:
    radial-gradient(circle at 15% 5%, rgb(34 211 238 / 0.14), transparent 16rem),
    linear-gradient(180deg, rgb(255 255 255 / 0.09), rgb(255 255 255 / 0.04)) !important;
  box-shadow: 0 28px 90px rgb(0 0 0 / 0.32) !important;
  backdrop-filter: blur(20px) saturate(150%);
}

.auth-shell main section.rounded-2xl::after {
  position: absolute;
  right: -5rem;
  bottom: -5rem;
  width: 11rem;
  height: 11rem;
  border-radius: 9999px;
  background: rgb(168 85 247 / 0.18);
  content: "";
  filter: blur(16px);
  pointer-events: none;
}

.dashboard-home {
  isolation: isolate;
}

.dashboard-hero {
  position: relative;
  background:
    radial-gradient(circle at 18% 18%, rgb(34 211 238 / 0.28), transparent 22rem),
    radial-gradient(circle at 84% 12%, rgb(168 85 247 / 0.3), transparent 24rem),
    linear-gradient(135deg, #050816 0%, #0f172a 48%, #111827 100%);
}

.dashboard-hero::before,
.dashboard-hero::after {
  position: absolute;
  content: "";
  pointer-events: none;
}

.dashboard-hero::before {
  inset: 0;
  background-image:
    linear-gradient(rgb(255 255 255 / 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 255 255 / 0.045) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(to bottom, black, transparent 78%);
}

.dashboard-hero::after {
  right: -9rem;
  bottom: -11rem;
  width: 28rem;
  height: 28rem;
  border-radius: 9999px;
  background: rgb(34 211 238 / 0.14);
  filter: blur(24px);
}

.hero-orbit-card {
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.08);
}

.hero-orbit-card::before {
  position: absolute;
  inset: -1px;
  content: "";
  background:
    radial-gradient(circle at 50% 10%, rgb(34 211 238 / 0.22), transparent 14rem),
    radial-gradient(circle at 20% 90%, rgb(217 70 239 / 0.18), transparent 13rem);
  pointer-events: none;
}

.hero-orbit-card > * {
  position: relative;
  z-index: 1;
}

.progress-orb {
  --progress: 0%;
  display: flex;
  width: 12rem;
  height: 12rem;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  border-radius: 9999px;
  background:
    linear-gradient(#0f172a, #0f172a) padding-box,
    conic-gradient(from 180deg, #22d3ee var(--progress), rgb(255 255 255 / 0.12) 0) border-box;
  border: 10px solid transparent;
  box-shadow:
    0 0 42px rgb(34 211 238 / 0.16),
    inset 0 0 36px rgb(255 255 255 / 0.04);
}

.dashboard-bento {
  grid-auto-rows: minmax(12rem, auto);
}

.bento-card,
.course-glass-card,
.activity-row {
  border: 1px solid rgb(255 255 255 / 0.1);
  background:
    linear-gradient(180deg, rgb(255 255 255 / 0.08), rgb(255 255 255 / 0.035));
  backdrop-filter: blur(18px) saturate(140%);
  box-shadow: 0 24px 70px rgb(0 0 0 / 0.24);
}

.bento-card {
  position: relative;
  overflow: hidden;
  border-radius: 1.75rem;
  padding: 1.25rem;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.bento-card::after {
  position: absolute;
  inset: auto -3rem -4rem auto;
  width: 10rem;
  height: 10rem;
  border-radius: 9999px;
  background: rgb(34 211 238 / 0.12);
  content: "";
  filter: blur(14px);
}

.bento-card:hover,
.course-glass-card:hover {
  transform: translateY(-2px);
  border-color: rgb(125 211 252 / 0.38);
  box-shadow: 0 28px 90px rgb(8 47 73 / 0.26);
}

.bento-card-accent {
  background:
    radial-gradient(circle at 80% 15%, rgb(16 185 129 / 0.28), transparent 12rem),
    linear-gradient(135deg, rgb(16 185 129 / 0.2), rgb(14 165 233 / 0.08));
}

.course-glass-card {
  border-radius: 1.5rem;
  padding: 1.25rem;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.activity-row {
  border-radius: 1.25rem;
  padding: 1rem;
}

.btn-hero {
  background: linear-gradient(135deg, #22d3ee, #3b82f6 48%, #a855f7);
  box-shadow: 0 18px 42px rgb(59 130 246 / 0.28);
}

.btn-hero:hover:not(:disabled) {
  background: linear-gradient(135deg, #67e8f9, #60a5fa 48%, #c084fc);
}

.btn-ghost {
  background-color: rgb(255 255 255 / 0.06);
  border-color: rgb(255 255 255 / 0.12);
}

.dashboard-action-card {
  display: block;
  border-radius: 1rem;
  border: 1px solid var(--color-border);
  background-color: var(--color-surface);
  padding: 1.25rem;
  box-shadow: var(--shadow-card);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.dashboard-action-card:hover {
  border-color: var(--color-accent);
  box-shadow: 0 12px 26px rgb(37 99 235 / 0.16);
}

.dashboard-action-card:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Lesson content */
.lesson-content-body {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--color-text);
}

.lesson-content-body :is(p, li, div, span, strong, em, blockquote, td, th) {
  color: var(--color-text);
}

.lesson-content-body :is(div, p, blockquote)[style*="background"] {
  background-color: rgb(255 255 255 / 0.06) !important;
  color: var(--color-text) !important;
}

.lesson-content-body [style*="#f0f4f8"],
.lesson-content-body [style*="#e8f5e9"],
.lesson-content-body [style*="#fff3e0"],
.lesson-content-body [style*="#ede7f6"],
.lesson-content-body [style*="#eee"],
.lesson-content-body [style*="#ffffff"],
.lesson-content-body [style*="#fff"] {
  background-color: rgb(255 255 255 / 0.06) !important;
  color: var(--color-text) !important;
  border-color: rgb(103 232 249 / 0.22) !important;
}

.lesson-content-body [style*="#e8f5e9"] {
  background-color: rgb(16 185 129 / 0.12) !important;
  border-color: rgb(52 211 153 / 0.28) !important;
}

.lesson-content-body [style*="#fff3e0"] {
  background-color: rgb(245 158 11 / 0.12) !important;
  border-color: rgb(251 191 36 / 0.28) !important;
}

.lesson-content-body [style*="#ede7f6"] {
  background-color: rgb(168 85 247 / 0.12) !important;
  border-color: rgb(192 132 252 / 0.28) !important;
}

.lesson-content-body h2,
.lesson-content-body h3 {
  margin-top: 1rem;
  font-weight: 600;
  color: var(--color-text);
}

.lesson-content-body p {
  margin-top: 0.75rem;
}

.lesson-content-body ul,
.lesson-content-body ol {
  margin-top: 0.75rem;
  padding-left: 1.25rem;
}

.lesson-content-body table {
  width: 100%;
  margin: 1rem 0;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.lesson-content-body th,
.lesson-content-body td {
  border: 1px solid var(--color-border);
  padding: 0.5rem 0.625rem;
  text-align: left;
  color: var(--color-text) !important;
  background-color: transparent !important;
}

.lesson-content-body th {
  background-color: rgb(255 255 255 / 0.08) !important;
}

.lesson-content-body tr:nth-child(even) td {
  background-color: rgb(255 255 255 / 0.03) !important;
}

.lesson-content-body a {
  color: var(--color-accent);
  text-decoration: underline;
}

/* Accessibility */
.skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  z-index: 100;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  background: #1d4ed8;
  color: #fff;
  font-size: 0.875rem;
}

.skip-link:focus {
  left: 1rem;
  top: 1rem;
}

/* Layout */
.main-content {
  flex: 1 1 auto;
}

.admin-shell {
  flex: 1 1 auto;
  min-width: 0;
}

@media (min-width: 1024px) {
  .admin-shell {
    flex-direction: row;
    align-items: stretch;
  }

  .admin-shell .sidebar-shell {
    position: sticky !important;
    top: 4rem;
    align-self: flex-start;
    transform: none !important;
  }
}

.page-container {
  width: 100%;
}

.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Alerts */
.alert {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  border-radius: 0.75rem;
  border: 1px solid;
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
}

.alert-text {
  flex: 1;
}

.alert-close {
  border-radius: 0.375rem;
  padding: 0 0.375rem;
  line-height: 1.25rem;
}

.alert-close:hover {
  background: rgb(15 23 42 / 0.05);
}

.alert-info {
  border-color: rgb(125 211 252 / 0.28);
  background: rgb(14 165 233 / 0.12);
  color: #bae6fd;
}

.alert-success {
  border-color: rgb(110 231 183 / 0.28);
  background: rgb(16 185 129 / 0.12);
  color: #a7f3d0;
}

.alert-warning {
  border-color: rgb(253 230 138 / 0.28);
  background: rgb(245 158 11 / 0.12);
  color: #fde68a;
}

.alert-error {
  border-color: rgb(252 165 165 / 0.28);
  background: rgb(239 68 68 / 0.12);
  color: #fecaca;
}

/* Pagination */
.pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 1rem;
}

.pagination-info {
  font-size: 0.875rem;
  color: var(--color-text-muted);
}

.pagination-btn {
  border-radius: 0.75rem;
  border: 1px solid rgb(255 255 255 / 0.12);
  padding: 0.5rem 0.875rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text);
  background: rgb(255 255 255 / 0.06);
}

.pagination-btn:hover:not(.pagination-btn-disabled) {
  border-color: rgb(103 232 249 / 0.38);
  background: rgb(34 211 238 / 0.09);
}

.pagination-btn-disabled {
  pointer-events: none;
  opacity: 0.5;
}

/* Course learning path */
.learning-path {
  position: relative;
  display: grid;
  gap: 1.25rem;
}

.learning-path::before {
  position: absolute;
  top: 1.75rem;
  bottom: 1.75rem;
  left: 1.375rem;
  width: 2px;
  content: "";
  background: linear-gradient(
    180deg,
    rgb(103 232 249 / 0.55),
    rgb(168 85 247 / 0.22),
    rgb(255 255 255 / 0.06)
  );
}

.learning-module {
  position: relative;
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  gap: 1rem;
}

.learning-module-marker {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid rgb(103 232 249 / 0.32);
  border-radius: 9999px;
  background:
    radial-gradient(circle at 35% 20%, rgb(255 255 255 / 0.28), transparent 32%),
    linear-gradient(135deg, #22d3ee, #3b82f6 52%, #a855f7);
  color: #fff;
  font-weight: 800;
  box-shadow: 0 18px 42px rgb(59 130 246 / 0.26);
}

.learning-module-body {
  min-width: 0;
  border: 1px solid var(--color-border);
  border-radius: 1.5rem;
  background:
    linear-gradient(180deg, rgb(255 255 255 / 0.08), rgb(255 255 255 / 0.035));
  box-shadow: 0 24px 70px rgb(0 0 0 / 0.2);
  backdrop-filter: blur(18px) saturate(140%);
}

.learning-module-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid rgb(255 255 255 / 0.08);
  padding: 1.25rem;
}

.lesson-path-list {
  display: grid;
  gap: 0.75rem;
  padding: 1rem;
}

.lesson-path-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  border: 1px solid rgb(255 255 255 / 0.08);
  border-radius: 1.125rem;
  padding: 1rem;
  color: var(--color-text);
  background: rgb(255 255 255 / 0.035);
  transition:
    border-color 0.15s ease,
    background-color 0.15s ease,
    box-shadow 0.15s ease,
    transform 0.15s ease;
}

.lesson-path-card:hover,
.lesson-path-card:focus-visible {
  border-color: rgb(103 232 249 / 0.42);
  background: rgb(34 211 238 / 0.075);
  box-shadow: 0 18px 44px rgb(34 211 238 / 0.1);
  outline: none;
  transform: translateY(-1px);
}

.lesson-path-card-current {
  border-color: rgb(103 232 249 / 0.55);
  background:
    linear-gradient(135deg, rgb(34 211 238 / 0.12), rgb(168 85 247 / 0.09));
  box-shadow:
    inset 0 0 0 1px rgb(103 232 249 / 0.14),
    0 22px 54px rgb(59 130 246 / 0.14);
}

.lesson-path-card-completed {
  border-color: rgb(52 211 153 / 0.24);
}

.lesson-path-marker {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid rgb(255 255 255 / 0.12);
  border-radius: 9999px;
  color: var(--color-text-muted);
  background: rgb(255 255 255 / 0.06);
  font-size: 0.875rem;
  font-weight: 800;
}

.lesson-path-marker-current {
  border-color: rgb(103 232 249 / 0.44);
  color: #fff;
  background: linear-gradient(135deg, #22d3ee, #3b82f6 52%, #a855f7);
  box-shadow: 0 14px 32px rgb(59 130 246 / 0.22);
}

.lesson-path-marker-completed {
  border-color: rgb(52 211 153 / 0.36);
  color: #a7f3d0;
  background: rgb(16 185 129 / 0.16);
}

.lesson-path-action {
  flex: 0 0 auto;
  border-radius: 9999px;
  border: 1px solid rgb(103 232 249 / 0.28);
  padding: 0.5rem 0.75rem;
  color: #67e8f9;
  font-size: 0.8125rem;
  font-weight: 700;
}

.lesson-path-empty {
  border: 1px dashed rgb(255 255 255 / 0.12);
  border-radius: 1rem;
  padding: 1rem;
  color: var(--color-text-muted);
  font-size: 0.875rem;
}

/* Lesson player */
.lesson-card {
  border: 1px solid var(--color-border);
  border-radius: 1.5rem;
  background:
    linear-gradient(180deg, rgb(255 255 255 / 0.08), rgb(255 255 255 / 0.035));
  padding: 1.25rem;
  box-shadow: 0 24px 70px rgb(0 0 0 / 0.2);
  backdrop-filter: blur(18px) saturate(140%);
}

@media (min-width: 640px) {
  .lesson-card {
    padding: 1.5rem;
  }
}

.lesson-outline-link {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  border-radius: 0.875rem;
  border: 1px solid rgb(255 255 255 / 0.08);
  padding: 0.625rem 0.75rem;
  text-align: left;
  color: var(--color-text-muted);
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.lesson-outline-link:hover,
.lesson-outline-link:focus-visible {
  border-color: rgb(103 232 249 / 0.38);
  background-color: rgb(34 211 238 / 0.08);
  color: var(--color-text);
  outline: none;
}

.lesson-outline-link-viewed {
  border-color: rgb(16 185 129 / 0.22);
  background-color: rgb(16 185 129 / 0.08);
  color: #a7f3d0;
}

.lesson-content-body {
  color: var(--color-text);
  font-size: 1rem;
  line-height: 1.75;
}

.lesson-content-body > * + * {
  margin-top: 1rem;
}

.lesson-content-body h1,
.lesson-content-body h2,
.lesson-content-body h3,
.lesson-content-body h4 {
  color: var(--color-text);
  font-weight: 700;
  line-height: 1.25;
}

.lesson-content-body h1 {
  font-size: 1.875rem;
}

.lesson-content-body h2 {
  font-size: 1.5rem;
}

.lesson-content-body h3 {
  font-size: 1.25rem;
}

.lesson-content-body p,
.lesson-content-body li {
  color: var(--color-text-muted);
}

.lesson-content-body ul,
.lesson-content-body ol {
  padding-left: 1.5rem;
}

.lesson-content-body ul {
  list-style: disc;
}

.lesson-content-body ol {
  list-style: decimal;
}

.lesson-content-body a {
  color: #67e8f9;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.lesson-content-body blockquote {
  border-left: 3px solid var(--color-accent);
  padding-left: 1rem;
  color: var(--color-text);
}

.lesson-content-body code {
  border-radius: 0.375rem;
  background: rgb(255 255 255 / 0.08);
  padding: 0.125rem 0.375rem;
  color: #bae6fd;
}

.lesson-content-body pre {
  overflow-x: auto;
  border-radius: 1rem;
  border: 1px solid var(--color-border);
  background: rgb(2 6 23 / 0.72);
  padding: 1rem;
}

.lesson-content-body pre code {
  background: transparent;
  padding: 0;
}

/* Toast */
.toast-root {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 60;
  display: flex;
  max-width: min(24rem, calc(100vw - 2rem));
  flex-direction: column;
  gap: 0.5rem;
}

.toast {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  border-radius: 0.75rem;
  border: 1px solid;
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  box-shadow: 0 24px 70px rgb(0 0 0 / 0.24);
  opacity: 0;
  transform: translateY(0.5rem);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.toast-enter {
  opacity: 1;
  transform: translateY(0);
}

.toast-leave {
  opacity: 0;
}

.toast-text {
  flex: 1;
}

.toast-close {
  border-radius: 0.375rem;
  padding: 0 0.25rem;
  line-height: 1.25rem;
}

.toast-info {
  border-color: rgb(125 211 252 / 0.28);
  background: rgb(14 165 233 / 0.16);
  color: #bae6fd;
}

.toast-success {
  border-color: rgb(110 231 183 / 0.28);
  background: rgb(16 185 129 / 0.16);
  color: #a7f3d0;
}

.toast-warning {
  border-color: rgb(253 230 138 / 0.28);
  background: rgb(245 158 11 / 0.16);
  color: #fde68a;
}

.toast-error {
  border-color: rgb(252 165 165 / 0.28);
  background: rgb(239 68 68 / 0.16);
  color: #fecaca;
}

/* Responsive */
@media (max-width: 639px) {
  .btn-primary,
  .btn-secondary,
  .btn-danger {
    min-height: 2.75rem;
  }

  .dashboard-action-card {
    padding: 1rem;
  }

  .learning-path::before {
    left: 1.125rem;
  }

  .learning-module {
    grid-template-columns: 2.25rem minmax(0, 1fr);
    gap: 0.75rem;
  }

  .learning-module-marker {
    width: 2.25rem;
    height: 2.25rem;
    font-size: 0.875rem;
  }

  .learning-module-header,
  .lesson-path-card {
    align-items: flex-start;
    flex-direction: column;
  }

  .lesson-path-card {
    gap: 0.75rem;
  }

  .lesson-path-action {
    width: 100%;
    text-align: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .toast,
  .sidebar-link,
  .dashboard-action-card,
  .bento-card,
  .course-glass-card {
    transition: none;
  }
}