:root {
  /* Same palette as the reference prototype (lms_prototype/dist/assets/styles.css (adaptive_lms_prototype)) */
  --apt-navy: #102a43;
  --apt-navy-2: #183b5b;
  --apt-indigo: #246bfd;       /* was --blue */
  --apt-indigo-deep: #1759dd;  /* hover shade of --blue */
  --apt-indigo-soft: #eaf1ff;  /* was --blue-soft */
  --apt-mint: #118a84;         /* was --teal */
  --apt-mint-soft: #e5f6f4;    /* was --teal-soft */
  --apt-amber: #d17a00;
  --apt-amber-soft: #fff2d9;
  --apt-rose: #c23b3b;         /* was --red */
  --apt-rose-soft: #fff0ef;
  --apt-ink: #17212b;
  --apt-ink-2: #2c3744;
  --apt-ink-3: #45505c;
  --apt-ink-4: #68798a;        /* was --muted */
  --apt-bg: #f5f7fa;           /* was --canvas */
  --apt-bg-muted: #eef2f5;
  --apt-card: #ffffff;         /* was --surface */
  --apt-line: #dde5ec;
  --apt-line-soft: #e8edf2;
  --apt-radius: 16px;
  --apt-shadow: 0 10px 30px rgba(31, 55, 78, .08);
}

/* The vendored wwwroot/template/lib/bootstrap/icons/bootstrap-icons.min.css ships without its
   fonts/ directory (font files never got copied into the repo), so every bi-* icon renders
   blank. This re-declares the same font-family from the CDN — the last @font-face for a given
   family wins, and this stylesheet loads after the vendored one, so it takes over without
   editing anything under wwwroot/template/. */
@font-face {
  font-display: block;
  font-family: bootstrap-icons;
  src: url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/fonts/bootstrap-icons.woff2") format("woff2"),
       url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/fonts/bootstrap-icons.woff") format("woff");
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--apt-bg);
  color: var(--apt-ink);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 14.5px;
}
.apt-skip-link { position: absolute; left: -999px; top: 0; }
.apt-skip-link:focus { left: 8px; top: 8px; z-index: 999; background: #fff; padding: 8px 12px; border-radius: 8px; }

.apt-app-shell { display: flex; min-height: 100vh; }

/* ── Sidebar ─────────────────────────────────────────── */
.apt-sidebar {
  width: 250px;
  flex-shrink: 0;
  background: var(--apt-navy);
  color: #fff;
  display: flex;
  flex-direction: column;
  padding: 20px 14px;
  position: sticky;
  top: 0;
  height: 100vh;
}
.apt-brand-row { display: flex; align-items: center; gap: 10px; padding: 0 6px 18px; }
.apt-brand-mark { width: 34px; height: 34px; border-radius: 10px; background: #fff; color: var(--apt-navy); display: grid; place-items: center; font-size: 16px; overflow: hidden; }
.apt-brand-mark img { width: 100%; height: 100%; object-fit: contain; padding: 3px; }
.apt-brand-row strong { display: block; font-size: 14.5px; color: #fff; }
.apt-brand-row span { font-size: 11.5px; color: rgba(255,255,255,.6); }
.apt-btn-close-sidebar { margin-left: auto; }

.apt-app-nav { gap: 3px; }
.apt-nav-link {
  display: flex; align-items: center; gap: 10px;
  border: none; background: none; text-align: left;
  padding: 10px 12px; border-radius: 10px; color: rgba(255,255,255,.72); font-size: 13.5px; font-weight: 500;
  cursor: pointer; width: 100%; text-decoration: none; user-select: none;
}
.apt-nav-link:hover { text-decoration: none; }
.apt-nav-link i { width: 16px; text-align: center; color: rgba(255,255,255,.55); }
.apt-nav-link:hover, .apt-nav-link.apt-active { background: rgba(255,255,255,.11); color: #fff; }
.apt-nav-link.apt-active i { color: #fff; }
.apt-nav-count { margin-left: auto; background: var(--apt-indigo); color: #fff; font-size: 10px; font-weight: 700; border-radius: 999px; padding: 1px 7px; }

.apt-sidebar-support { margin-top: auto; display: flex; gap: 10px; align-items: center; padding: 12px; border-radius: 10px; background: rgba(255,255,255,.08); font-size: 12px; }
.apt-sidebar-support strong { display: block; font-size: 12.5px; color: #fff; }
.apt-sidebar-support span { color: rgba(255,255,255,.6); }
.apt-sidebar-support i { color: #fff; }

.apt-student-mini { display: flex; align-items: center; gap: 10px; padding: 12px 6px 0; margin-top: auto; }
.apt-student-mini strong { display: block; font-size: 12.5px; color: #fff; }
.apt-student-mini span { font-size: 11px; color: rgba(255,255,255,.55); }
.apt-student-mini .apt-icon-btn { background: rgba(255,255,255,.1); color: #fff; }

.apt-avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--apt-indigo); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 12px; flex-shrink: 0; }
.apt-avatar-sm { width: 30px; height: 30px; font-size: 11px; }

.apt-mobile-overlay { display: none; }

/* ── Main area ───────────────────────────────────────── */
.apt-main-area { flex: 1; min-width: 0; }
.apt-topbar { display: flex; align-items: center; gap: 14px; padding: 18px 28px; background: var(--apt-card); border-bottom: 1px solid var(--apt-line); }
.apt-page-identity span { font-size: 11.5px; color: var(--apt-ink-4); display: block; }
.apt-page-identity h1 { font-size: 21px; margin: 2px 0 0; }
.apt-topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.apt-icon-btn { border: none; background: var(--apt-bg-muted); width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: var(--apt-ink-2); cursor: pointer; text-decoration: none; }
.apt-icon-btn:hover { text-decoration: none; }
.apt-notification-button { position: relative; }
.apt-notification-button span:not(:empty) { position: absolute; top: 6px; right: 7px; width: 6px; height: 6px; border-radius: 50%; background: var(--apt-rose); }

/* ── Top-right user menu ─────────────────────────────── */
.apt-user-menu { position: relative; }
.apt-user-trigger { list-style: none; cursor: pointer; display: block; }
.apt-user-trigger::-webkit-details-marker { display: none; }
.apt-user-menu[open] .apt-user-trigger .apt-avatar { outline: 2px solid var(--apt-indigo); outline-offset: 2px; }
.apt-user-dropdown {
  position: absolute; top: calc(100% + 10px); right: 0; min-width: 220px; z-index: 60;
  background: var(--apt-card); border: 1px solid var(--apt-line); border-radius: 12px;
  box-shadow: var(--apt-shadow); padding: 6px; display: flex; flex-direction: column; gap: 2px;
}
.apt-user-dropdown-header { padding: 10px 12px 8px; border-bottom: 1px solid var(--apt-line-soft); margin-bottom: 4px; }
.apt-user-dropdown-header strong { display: block; font-size: 13.5px; color: var(--apt-ink); }
.apt-user-dropdown-header span { display: block; font-size: 11.5px; color: var(--apt-ink-4); margin-top: 2px; }
.apt-user-dropdown-item {
  display: flex; align-items: center; gap: 9px; padding: 9px 12px; border-radius: 8px; border: none;
  background: none; width: 100%; text-align: left; font-size: 13px; color: var(--apt-ink-2);
  text-decoration: none; cursor: pointer;
}
.apt-user-dropdown-item:hover { background: var(--apt-bg-muted); text-decoration: none; color: var(--apt-ink); }
.apt-user-dropdown-danger { color: var(--apt-rose); }
.apt-user-dropdown-danger:hover { background: var(--apt-rose-soft); color: var(--apt-rose); }

.apt-content-wrap { padding: 24px 28px 60px; max-width: 1280px; }

.apt-app-footer { padding: 16px 28px; border-top: 1px solid var(--apt-line); text-align: center; }
.apt-app-footer span { font-size: 12px; color: var(--apt-ink-4); }

/* ── Page-loading overlay (PageSpinner.razor) ────────────────────────────────────────
   Router's <Navigating> fragment was tried first, but in this app every page shares one
   render mode/assembly (App.razor: <Routes @rendermode="InteractiveServer" />, no lazy
   loading) so route matching + component resolution is synchronous — there is never a
   visible gap for <Navigating> to render before <Found> takes over. What users actually
   see as "page loading" is each page's own async data-fetch after landing (the existing
   per-page `loading` bool already used everywhere), so this renders there instead — as a
   fixed full-viewport overlay (like a SweetAlert2 loading modal) rather than inline
   content, so it covers the whole page including the sidebar/topbar. The logo itself
   never rotates — only the ring around it spins; the logo just pulses gently. */
.apt-page-loading-overlay {
  position: fixed; inset: 0; z-index: 2000;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  background: rgba(245, 247, 250, 0.92); backdrop-filter: blur(3px);
}
.apt-page-loading-box { position: relative; width: 72px; height: 72px; display: grid; place-items: center; }
.apt-page-loading-ring {
  position: absolute; inset: 0; border-radius: 50%;
  border: 3px solid var(--apt-line); border-top-color: var(--apt-indigo);
  animation: apt-page-loading-spin 0.9s linear infinite;
}
.apt-page-loading-logo {
  width: 40px; height: 40px; border-radius: 10px; background: #fff; padding: 5px;
  box-shadow: var(--apt-shadow);
  animation: apt-page-loading-pulse 1.6s ease-in-out infinite;
}
.apt-page-loading-text { font-size: 13.5px; color: var(--apt-ink-3); font-weight: 500; }
@keyframes apt-page-loading-spin { to { transform: rotate(360deg); } }
@keyframes apt-page-loading-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(0.9); opacity: 0.7; } }
@media (prefers-reduced-motion: reduce) { .apt-page-loading-ring, .apt-page-loading-logo { animation: none; } }

.apt-profile-header { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.apt-profile-header h2 { font-size: 19px; margin: 2px 0 0; }
.apt-profile-avatar { width: 64px; height: 64px; font-size: 20px; flex-shrink: 0; }
.apt-profile-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; align-items: start; }
@media (max-width: 860px) { .apt-profile-grid { grid-template-columns: 1fr; } }
.apt-profile-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--apt-line-soft); }
.apt-profile-row:last-child { border-bottom: none; }
.apt-profile-row span { font-size: 13px; color: var(--apt-ink-4); }
.apt-profile-row strong { font-size: 13.5px; color: var(--apt-ink); font-weight: 600; }

/* ── Login page — same theme as the rest of the app, since AuthLayout has no shell of its
   own to inherit background/spacing from. ─────────────────────────────────────────────── */
.apt-auth-shell { min-height: 100vh; width: 100%; display: flex; align-items: center; justify-content: center; padding: 24px; background: var(--apt-bg); }
.apt-auth-card { background: var(--apt-card); border: 1px solid var(--apt-line); border-radius: var(--apt-radius); box-shadow: var(--apt-shadow); padding: 40px; width: 100%; max-width: 420px; }
.apt-auth-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 28px; }
.apt-auth-brand strong { display: block; font-size: 16px; color: var(--apt-ink); font-weight: 700; }
.apt-auth-brand strong em { font-style: italic; color: var(--apt-indigo); }
.apt-auth-brand span { font-size: 11.5px; color: var(--apt-ink-4); }
.apt-auth-brand .apt-brand-mark { background: var(--apt-bg-muted); color: var(--apt-navy); }
.apt-auth-heading { font-size: 21px; font-weight: 700; margin: 0 0 6px; color: var(--apt-ink); }
.apt-auth-subheading { font-size: 13.5px; color: var(--apt-ink-4); margin: 0 0 24px; }
.apt-auth-footer { margin-top: 22px; font-size: 12.5px; color: var(--apt-ink-4); text-align: center; }

.apt-view { display: none; }
.apt-view.apt-active { display: block; animation: fade .25s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* ── Shared card primitives ─────────────────────────── */
.apt-panel-card, .apt-adaptive-card, .apt-metric-card, .apt-course-card, .apt-recommendation-item {
  background: var(--apt-card); border: 1px solid var(--apt-line); border-radius: var(--apt-radius); padding: 22px;
  box-shadow: 0 5px 22px rgba(31,55,78,.045);
}
.apt-panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 16px; }
.apt-panel-heading h2 { font-size: 16px; margin: 2px 0 0; }
.apt-eyebrow { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--apt-ink-4); font-weight: 700; }
.apt-text-button { border: none; background: none; color: var(--apt-indigo); font-size: 12.5px; font-weight: 600; cursor: pointer; }

.apt-adaptive-card { background: linear-gradient(135deg, #153e67, #1e5a86); border: none; color: #fff; box-shadow: var(--apt-shadow); }
.apt-adaptive-label { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; color: #fff; background: rgba(255,255,255,.16); padding: 4px 10px; border-radius: 999px; margin-bottom: 14px; }
.apt-course-kicker { font-size: 11.5px; color: var(--apt-ink-4); text-transform: uppercase; letter-spacing: .04em; font-weight: 700; }
.apt-adaptive-card .apt-course-kicker { color: #6bb7ff; }
.apt-adaptive-card h2 { font-size: 21px; margin: 6px 0 8px; color: #fff; }
.apt-adaptive-card p { color: rgba(255,255,255,.82); margin: 0 0 12px; }
.apt-recommendation-reason { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; color: var(--apt-ink-2); background: rgba(255,255,255,.94); border: none; border-radius: 10px; padding: 10px 12px; }
.apt-recommendation-reason i { color: var(--apt-amber); margin-top: 2px; }
.apt-adaptive-actions { display: flex; align-items: center; gap: 14px; margin-top: 18px; }
.apt-adaptive-actions span { font-size: 12px; color: rgba(255,255,255,.75); display: inline-flex; align-items: center; gap: 5px; }

.apt-mastery-ring, .apt-goal-ring {
  --progress: 0;
  width: 110px; height: 110px; border-radius: 50%; margin: 0 auto;
  display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative;
  background: conic-gradient(var(--apt-indigo) calc(var(--progress) * 1%), var(--apt-bg-muted) 0);
}
.apt-mastery-ring::before, .apt-goal-ring::before { content: ""; position: absolute; inset: 10px; border-radius: 50%; background: #fff; }
/* Explicit color, not inherited — this ring sits inside .apt-adaptive-card (white text) on the
   dashboard but its own center disc is always white, so it must never inherit white text. */
.apt-mastery-ring span, .apt-goal-ring span { position: relative; font-size: 21px; font-weight: 700; color: var(--apt-ink); line-height: 1.2; }
.apt-mastery-ring small, .apt-goal-ring small { position: relative; font-size: 10.5px; color: var(--apt-ink-4); line-height: 1.2; }

.apt-streak-row { display: flex; align-items: center; gap: 14px; }
.apt-streak-days { display: flex; gap: 5px; }
.apt-streak-days span { width: 26px; height: 26px; border-radius: 8px; background: var(--apt-bg-muted); color: var(--apt-ink-4); font-size: 11px; font-weight: 700; display: grid; place-items: center; }
.apt-streak-days span.apt-done { background: var(--apt-mint-soft); color: var(--apt-mint); }
.apt-streak-days span.apt-today { background: var(--apt-indigo); color: #fff; }
.apt-goal-message { font-size: 13px; color: var(--apt-ink-2); margin: 12px 0 0; display: flex; align-items: center; gap: 6px; }
.apt-goal-message i { color: var(--apt-amber); }

/* ── Buttons / chips / progress ─────────────────────── */
/* apt-btn intentionally carries every structural property Bootstrap's own .btn class would
   normally supply (display, gap, line-height, text-decoration, transition, vertical-align) —
   this class is used alone (never stacked with Bootstrap's .btn) so real Bootstrap usage
   elsewhere in the app is never affected by these color/shape overrides. */
.apt-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: 10px; font-size: 13.5px; font-weight: 600; line-height: 1.4;
  padding: 9px 16px; border: 1px solid transparent; cursor: pointer;
  text-decoration: none; white-space: nowrap; vertical-align: middle; user-select: none;
  transition: background-color .15s, color .15s, border-color .15s, transform .15s;
}
.apt-btn:hover { text-decoration: none; }
.apt-btn[disabled] { opacity: .55; cursor: not-allowed; pointer-events: none; }
.apt-btn i, .apt-btn [class*=" bi-"], .apt-btn [class^="bi-"] { font-size: 1em; line-height: 1; }
.apt-btn-primary { background: var(--apt-indigo); color: #fff; box-shadow: 0 5px 14px rgba(36,107,253,.2); }
.apt-btn-primary:hover { background: var(--apt-indigo-deep); color: #fff; }
.apt-btn-outline-primary { background: #fff; color: var(--apt-indigo); border-color: var(--apt-indigo); }
.apt-btn-outline-primary:hover { background: var(--apt-indigo-soft); color: var(--apt-indigo-deep); }
.apt-btn-light { background: var(--apt-bg-muted); color: var(--apt-ink-2); }
.apt-btn-light:hover { background: var(--apt-line-soft); color: var(--apt-ink); }
.apt-w-100 { width: 100%; }
.apt-btn-lg { padding: 11px 20px; font-size: 14.5px; }
.apt-btn-sm { padding: 6px 12px; font-size: 12.5px; }
.apt-text-button { text-decoration: none; }
.apt-text-button:hover { text-decoration: underline; }

.apt-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 999px; }
.apt-chip.apt-mint { background: var(--apt-mint-soft); color: var(--apt-mint); }
.apt-chip.apt-indigo { background: var(--apt-indigo-soft); color: var(--apt-indigo-deep); }
.apt-chip.apt-amber { background: var(--apt-amber-soft); color: var(--apt-amber); }
.apt-chip.apt-rose { background: var(--apt-rose-soft); color: var(--apt-rose); }
.apt-chip.apt-ghost { background: var(--apt-bg-muted); color: var(--apt-ink-4); }

.apt-progress { height: 6px; border-radius: 999px; background: var(--apt-bg-muted); overflow: hidden; margin: 8px 0; }
.apt-progress-bar { height: 100%; background: var(--apt-indigo); border-radius: 999px; }
.apt-progress-bar.apt-bg-teal { background: var(--apt-mint); }
.apt-progress-bar.apt-bg-amber { background: var(--apt-amber); }
.apt-progress-bar.apt-mastery-high { background: var(--apt-mint); }
.apt-progress-bar.apt-mastery-low { background: var(--apt-amber); }
.apt-progress-bar.apt-mastery-review { background: var(--apt-rose); }
.apt-progress-bar.apt-mastery-none { background: var(--apt-line); }

/* ── Dashboard: course list / pathway mini ──────────── */
.apt-course-list { display: flex; flex-direction: column; gap: 4px; }
.apt-course-row { display: flex; align-items: center; gap: 14px; width: 100%; border: none; background: none; text-align: left; padding: 12px 8px; border-radius: 10px; cursor: pointer; text-decoration: none; color: inherit; }
.apt-course-row:hover { background: var(--apt-bg-muted); text-decoration: none; color: inherit; }
.apt-course-icon { width: 40px; height: 40px; border-radius: 10px; background: var(--apt-indigo-soft); color: var(--apt-indigo-deep); display: grid; place-items: center; flex-shrink: 0; }
.apt-course-icon.apt-teal { background: var(--apt-mint-soft); color: var(--apt-mint); }
.apt-course-icon.apt-amber { background: var(--apt-amber-soft); color: var(--apt-amber); }
.apt-course-info { flex: 1; min-width: 0; }
.apt-course-info strong { display: block; font-size: 13.5px; }
.apt-course-info span { font-size: 12px; color: var(--apt-ink-4); }
.apt-course-score { text-align: right; font-size: 11px; color: var(--apt-ink-4); }
.apt-course-score strong { display: block; font-size: 15px; color: var(--apt-ink); }

.apt-pathway-mini { display: flex; flex-direction: column; gap: 2px; }
.apt-pathway-row { display: flex; align-items: center; gap: 12px; padding: 9px 4px; border-bottom: 1px solid var(--apt-line-soft); font-size: 13px; }
.apt-pathway-row:last-child { border-bottom: none; }
.apt-pathway-dot { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; font-size: 11px; font-weight: 700; }
.apt-pathway-dot.apt-done { background: var(--apt-mint-soft); color: var(--apt-mint); }
.apt-pathway-dot.apt-current { background: var(--apt-indigo); color: #fff; }
.apt-pathway-dot.apt-ready { background: var(--apt-bg-muted); color: var(--apt-ink-3); }
.apt-pathway-dot.apt-locked { background: var(--apt-bg-muted); color: var(--apt-ink-4); }
.apt-pathway-row strong { display: block; }
.apt-pathway-row small { color: var(--apt-ink-4); }
.apt-diagnostic-banner { display: flex; align-items: center; gap: 14px; background: var(--apt-indigo-soft); border: 1px dashed var(--apt-indigo); border-radius: 12px; padding: 14px 16px; margin-bottom: 20px; }
.apt-diagnostic-banner i { font-size: 20px; color: var(--apt-indigo-deep); }
.apt-diagnostic-banner strong { display: block; font-size: 13.5px; }
.apt-diagnostic-banner span { font-size: 12px; color: var(--apt-ink-3); }
.apt-diagnostic-banner .apt-btn { margin-left: auto; flex-shrink: 0; }

/* ── My courses grid ─────────────────────────────────── */
.apt-section-intro { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 14px; margin-bottom: 20px; }
.apt-section-intro h2 { margin: 4px 0 4px; font-size: 20px; }
.apt-section-intro p { margin: 0; color: var(--apt-ink-4); font-size: 13px; }
.apt-segmented { display: flex; border: 1px solid var(--apt-line); border-radius: 999px; overflow: hidden; }
.apt-segmented button { border: none; background: #fff; padding: 7px 16px; font-size: 12.5px; font-weight: 600; color: var(--apt-ink-3); cursor: pointer; }
.apt-segmented button.apt-active { background: var(--apt-indigo); color: #fff; }
/* Bootstrap's .apt-form-select reserves right-side padding for its own arrow icon —
   only override left padding/width/font here, never padding-right, or the arrow
   overlaps the text. */
.apt-course-select { width: 300px; max-width: 100%; border-radius: 10px; border: 1px solid var(--apt-line); padding-left: 14px; font-size: 13px; }

/* auto-fit (not auto-fill) — with few cards in a wide container, auto-fill reserves empty
   invisible tracks that squeeze real cards to one side with a large blank gap; auto-fit
   collapses those empty tracks so 2-3 cards evenly fill the row width instead. */
/* min(260px, 50%) instead of a flat 260px keeps at least 2 columns at any container width
   (the track shrinks to half the row instead of forcing a drop to a single column), while
   still growing to more/wider columns on larger screens via auto-fit. */
.apt-course-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 50%), 1fr)); gap: 16px; }
.apt-course-card-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.apt-course-code { font-size: 11.5px; font-weight: 700; color: var(--apt-ink-4); letter-spacing: .04em; }
.apt-status-pill { font-size: 10.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px; }
.apt-status-pill.apt-on-track { background: var(--apt-mint-soft); color: var(--apt-mint); }
.apt-status-pill.apt-needs-attention { background: var(--apt-amber-soft); color: var(--apt-amber); }
.apt-course-card-icon { width: 42px; height: 42px; border-radius: 11px; background: var(--apt-indigo-soft); color: var(--apt-indigo-deep); display: grid; place-items: center; margin-bottom: 12px; }
.apt-course-card-icon.apt-teal { background: var(--apt-mint-soft); color: var(--apt-mint); }
.apt-course-card h3 { font-size: 15.5px; margin: 0 0 4px; }
.apt-course-card p { font-size: 12px; color: var(--apt-ink-4); margin: 0 0 10px; }
.apt-course-card-stats { display: flex; gap: 16px; font-size: 12px; color: var(--apt-ink-4); margin-bottom: 4px; }
.apt-course-card-stats strong { color: var(--apt-ink); }
.apt-course-card.apt-featured { border-color: var(--apt-indigo); }
/* Flex-column so the footer's buttons pin to the bottom of every card at a consistent height,
   regardless of how much text the card above it has. */
.apt-course-card { display: flex; flex-direction: column; }
.apt-course-card-footer { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--apt-line-soft); display: flex; flex-direction: row; flex-wrap: wrap; gap: 8px; }
.apt-course-card-footer .apt-btn { flex: 0 0 auto; }
.apt-course-card-placeholder { visibility: hidden; }

/* ── Learning path (split pane: path list + material/lesson panel,
   same structure as the reference prototype's view-learning) ───── */
.apt-course-workspace-header { margin-bottom: 18px; }
.apt-back-link { border: none; background: none; color: var(--apt-indigo); font-weight: 700; font-size: 12.5px; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; padding: 0 0 10px; text-decoration: none; }
.apt-back-link:hover { text-decoration: none; color: var(--apt-indigo-deep); }
.apt-course-workspace-header h2 { font-size: 1.55rem; margin: .15rem 0; }
.apt-course-workspace-header p { margin: 0; color: var(--apt-ink-4); }
.apt-workspace-progress { min-width: 240px; }
.apt-workspace-progress span { font-size: .8rem; color: var(--apt-ink-4); display: flex; justify-content: space-between; }
.apt-workspace-progress strong { color: var(--apt-ink); }
.apt-workspace-progress .apt-progress { height: 7px; margin-top: .4rem; }

.apt-learning-layout { display: grid; grid-template-columns: 330px minmax(0, 1fr); gap: 20px; align-items: start; }
.apt-path-panel, .apt-lesson-panel { background: var(--apt-card); border: 1px solid var(--apt-line); border-radius: var(--apt-radius); box-shadow: 0 5px 22px rgba(31,55,78,.045); }
.apt-path-panel { padding: 19px; }
.apt-path-panel-title { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.apt-path-panel-title h3 { font-size: 16.5px; margin: 0; }
.apt-path-panel-title span { font-size: 12px; color: var(--apt-ink-4); }

.apt-topic-path { display: flex; flex-direction: column; }
.apt-topic-step {
  position: relative; border: 0; background: none; width: 100%;
  display: grid; grid-template-columns: 36px 1fr auto; gap: 11px;
  text-align: left; padding: 8px 0 18px; color: var(--apt-ink); cursor: pointer;
}
.apt-topic-step:last-child { padding-bottom: 8px; }
.apt-topic-step::before { content: ""; position: absolute; width: 2px; background: var(--apt-line); left: 17px; top: 38px; bottom: 0; }
.apt-topic-step:last-child::before { display: none; }
.apt-topic-step strong { display: block; font-size: 14px; }
.apt-topic-step small { display: block; font-size: 11.5px; color: var(--apt-ink-4); }
.apt-topic-step[disabled] { cursor: not-allowed; }
.apt-topic-step[disabled] strong, .apt-topic-step[disabled] small { color: var(--apt-ink-4); }

.apt-step-node { width: 36px; height: 36px; border: 2px solid #cad5df; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--apt-ink-4); font-weight: 800; z-index: 1; flex-shrink: 0; }
.apt-topic-step.apt-mastered .apt-step-node { background: var(--apt-mint); border-color: var(--apt-mint); color: #fff; }
.apt-topic-step.apt-locked .apt-step-node { background: var(--apt-bg-muted); border-color: var(--apt-line); color: var(--apt-ink-4); }

/* Selected = whichever topic's content is currently shown in the lesson panel
   (independent of mastery status) — mirrors the reference's .apt-topic-step.apt-active look. */
.apt-topic-step.apt-selected { background: var(--apt-indigo-soft); margin: 0 -10px 8px; padding: 11px 10px 16px; border-radius: 12px; }
.apt-topic-step.apt-selected::before { left: 23px; }
.apt-topic-step.apt-selected .apt-step-node { background: var(--apt-indigo); border-color: var(--apt-indigo); color: #fff; }

.apt-adaptive-mini { font-size: 10px; color: var(--apt-indigo); font-weight: 800; white-space: nowrap; align-self: start; margin-top: 8px; }
.apt-step-lock { font-size: 12px; color: var(--apt-ink-4); align-self: start; margin-top: 10px; }

.apt-lesson-panel { padding: 25px; min-height: 480px; }
.apt-lesson-content { display: none; }
.apt-lesson-content.apt-active { display: block; animation: fade .2s ease; }
.apt-lesson-meta { display: flex; justify-content: space-between; color: var(--apt-ink-4); font-size: 12.5px; }
.apt-lesson-type { color: var(--apt-indigo); font-weight: 700; display: inline-flex; align-items: center; gap: 5px; }
.apt-lesson-panel h2 { font-size: 1.5rem; margin: 10px 0 6px; }
.apt-lesson-lead { color: var(--apt-ink-3); margin: 0 0 18px; }

.apt-materials-stage { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
.apt-material-card { display: flex; align-items: center; gap: 14px; background: var(--apt-bg); border: 1px solid var(--apt-line-soft); border-radius: 12px; padding: 12px 14px; }
.apt-material-icon { width: 38px; height: 38px; border-radius: 10px; background: var(--apt-card); border: 1px solid var(--apt-line-soft); color: var(--apt-ink-3); display: grid; place-items: center; flex-shrink: 0; font-size: 15px; }
.apt-material-info { flex: 1; min-width: 0; }
.apt-material-info strong { display: block; font-size: 13.5px; }
.apt-material-info span { font-size: 11.5px; color: var(--apt-ink-4); }
.apt-viewed-badge { font-size: 11px; color: var(--apt-mint); display: inline-flex; align-items: center; gap: 3px; margin-left: 8px; }
.apt-material-actions { display: flex; gap: 8px; flex-shrink: 0; }

.apt-lesson-key { display: flex; gap: 12px; background: var(--apt-amber-soft); padding: 14px 16px; border-radius: 12px; }
.apt-lesson-key i { color: var(--apt-amber); margin-top: 2px; }
.apt-lesson-key strong { display: block; font-size: 13px; margin-bottom: 2px; }
.apt-lesson-key p { margin: 0; font-size: 12.5px; color: #66502e; }
.apt-lesson-key.apt-mastered-key { background: var(--apt-mint-soft); }
.apt-lesson-key.apt-mastered-key i { color: var(--apt-mint); }
.apt-lesson-key.apt-mastered-key p { color: #0f5c56; }
.apt-lesson-actions { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 22px; flex-wrap: wrap; }

.apt-locked-panel { display: flex; flex-direction: column; align-items: center; text-align: center; justify-content: center; gap: 10px; min-height: 420px; color: var(--apt-ink-3); }
.apt-locked-panel > i { font-size: 30px; color: var(--apt-ink-4); background: var(--apt-bg-muted); width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 6px; }
.apt-locked-panel h2 { margin: 0; font-size: 1.3rem; color: var(--apt-ink); }
.apt-locked-panel p { margin: 0; max-width: 380px; }
.apt-locked-requirement { display: inline-flex; align-items: center; gap: 8px; background: var(--apt-rose-soft); color: var(--apt-rose); font-size: 12.5px; font-weight: 600; padding: 8px 14px; border-radius: 999px; margin: 4px 0 10px; }
.apt-locked-requirement strong { font-weight: 800; }

/* ── Progress page ───────────────────────────────────── */
.apt-metric-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 4px; }
.apt-metric-card { display: flex; align-items: flex-start; gap: 14px; }
.apt-metric-icon { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; flex-shrink: 0; }
.apt-metric-icon.apt-blue { background: var(--apt-indigo-soft); color: var(--apt-indigo-deep); }
.apt-metric-icon.apt-teal { background: var(--apt-mint-soft); color: var(--apt-mint); }
.apt-metric-icon.apt-amber { background: var(--apt-amber-soft); color: var(--apt-amber); }
/* Scoped to the label/value column, not .apt-metric-icon (also a <span>, direct child of .apt-metric-card) */
.apt-metric-card > div > span { display: block; font-size: 12px; color: var(--apt-ink-4); }
.apt-metric-card strong { font-size: 24px; display: block; margin: 2px 0; }
.apt-metric-card small { font-size: 11.5px; color: var(--apt-ink-4); }
.apt-metric-card small.apt-positive { color: var(--apt-mint); }

.apt-mastery-list { display: flex; flex-direction: column; }
.apt-mastery-item { display: grid; grid-template-columns: minmax(0,1fr) 110px 46px; gap: 14px; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--apt-line-soft); }
.apt-mastery-item:last-child { border-bottom: none; }
.apt-mastery-item strong { display: block; font-size: 13px; }
.apt-mastery-item .apt-progress { margin: 0; }
.apt-mastery-item strong.apt-pct { text-align: right; font-size: 13px; }

/* Status → color, consistently across the status label, the bar fill, and the
   percentage — this is the "graph color" mapping: mint = mastered, amber =
   practice recommended, rose = needs review, muted = not started/locked. */
.apt-mastery-item span.apt-status { font-size: 11px; color: var(--apt-ink-4); font-weight: 600; }
.apt-mastery-item.apt-mastered span.apt-status, .apt-mastery-item.apt-mastered strong.apt-pct { color: var(--apt-mint); }
.apt-mastery-item.apt-practice span.apt-status, .apt-mastery-item.apt-practice strong.apt-pct { color: var(--apt-amber); }
.apt-mastery-item.apt-review span.apt-status, .apt-mastery-item.apt-review strong.apt-pct { color: var(--apt-rose); }

.apt-stub-card { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 8px; height: 100%; color: var(--apt-ink-4); padding: 20px; }
.apt-stub-card i { font-size: 26px; }

/* ── Recommendations ─────────────────────────────────── */
.apt-recommendation-list { display: flex; flex-direction: column; gap: 12px; }
.apt-recommendation-item { display: flex; gap: 16px; align-items: flex-start; }
.apt-recommendation-item.apt-priority { border-color: var(--apt-indigo); }
.apt-recommendation-icon { width: 40px; height: 40px; border-radius: 10px; background: var(--apt-indigo-soft); color: var(--apt-indigo-deep); display: grid; place-items: center; flex-shrink: 0; }
.apt-recommendation-icon.apt-teal { background: var(--apt-mint-soft); color: var(--apt-mint); }
.apt-recommendation-icon.apt-amber { background: var(--apt-amber-soft); color: var(--apt-amber); }
.apt-recommendation-icon.apt-rose { background: var(--apt-rose-soft); color: var(--apt-rose); }
.apt-recommendation-body { flex: 1; }
.apt-recommendation-tag { font-size: 10.5px; font-weight: 700; text-transform: uppercase; color: var(--apt-indigo-deep); }
.apt-recommendation-body h3 { font-size: 14.5px; margin: 4px 0 4px; }
.apt-recommendation-body p { font-size: 12.5px; color: var(--apt-ink-3); margin: 0 0 8px; }
.apt-reason-line { display: flex; gap: 14px; font-size: 11.5px; color: var(--apt-ink-4); }
.apt-transparency-note { font-size: 12px; color: var(--apt-ink-4); margin-top: 14px; display: flex; gap: 6px; align-items: center; }

/* ── Quiz modal ──────────────────────────────────────── */
.apt-quiz-layer { display: none; position: fixed; inset: 0; background: rgba(20, 22, 34, .55); z-index: 50; align-items: center; justify-content: center; padding: 20px; }
.apt-quiz-layer.apt-open { display: flex; }
.apt-quiz-dialog { background: #fff; border-radius: 16px; max-width: 520px; width: 100%; padding: 24px; max-height: 90vh; overflow-y: auto; }
.apt-quiz-dialog header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 14px; }
.apt-quiz-progress { margin-bottom: 18px; font-size: 12px; color: var(--apt-ink-4); }
.apt-quiz-progress > div:first-child { display: flex; justify-content: space-between; margin-bottom: 6px; }
.apt-question-prompt { font-size: 14.5px; margin-bottom: 14px; }
.apt-answer-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.apt-answer-list button { display: flex; align-items: center; gap: 10px; text-align: left; border: 1px solid var(--apt-line); background: #fff; border-radius: 10px; padding: 10px 12px; font-size: 13px; cursor: pointer; }
.apt-answer-list button span { width: 22px; height: 22px; border-radius: 50%; background: var(--apt-bg-muted); display: grid; place-items: center; font-size: 11px; font-weight: 700; flex-shrink: 0; }
.apt-answer-list button.apt-selected { border-color: var(--apt-indigo); background: var(--apt-indigo-soft); }
.apt-answer-list button.apt-correct { border-color: var(--apt-mint); background: var(--apt-mint-soft); }
.apt-answer-list button.apt-incorrect { border-color: var(--apt-rose); background: var(--apt-rose-soft); }
.apt-quiz-feedback { display: none; font-size: 12.5px; padding: 10px 12px; border-radius: 10px; margin-bottom: 14px; }
.apt-quiz-feedback.apt-show { display: block; }
.apt-quiz-feedback.apt-hint { background: var(--apt-amber-soft); color: #7a5a12; }
.apt-quiz-feedback.apt-success { background: var(--apt-mint-soft); color: var(--apt-mint); }
.apt-quiz-footer { display: flex; justify-content: space-between; gap: 10px; }
.apt-quiz-result { display: none; text-align: center; }
.apt-quiz-result.apt-show { display: block; }
.apt-result-icon { width: 52px; height: 52px; border-radius: 50%; background: var(--apt-mint-soft); color: var(--apt-mint); display: grid; place-items: center; margin: 0 auto 10px; font-size: 22px; }
.apt-result-metrics { display: flex; justify-content: center; gap: 24px; margin: 16px 0; }
.apt-result-metrics strong { display: block; font-size: 19px; }
.apt-result-metrics span { font-size: 11px; color: var(--apt-ink-4); }
.apt-next-unlock { display: flex; gap: 10px; align-items: flex-start; background: var(--apt-bg-muted); border-radius: 10px; padding: 12px; text-align: left; margin-bottom: 16px; font-size: 12.5px; }
.apt-next-unlock i { color: var(--apt-ink-4); margin-top: 2px; }
.apt-next-unlock strong { display: block; color: var(--apt-ink); margin-bottom: 2px; }
.apt-next-unlock span { color: var(--apt-ink-3); }

/* ── Toast ───────────────────────────────────────────── */
.apt-toast-fake { position: fixed; bottom: 20px; right: 20px; background: var(--apt-ink); color: #fff; padding: 12px 16px; border-radius: 10px; font-size: 13px; display: none; align-items: center; gap: 10px; z-index: 60; }
.apt-toast-fake.apt-show { display: flex; }
.apt-toast-fake i { color: var(--apt-mint); }

/* ── Mobile ──────────────────────────────────────────── */
.apt-mobile-nav { display: none; }
@media (max-width: 900px) {
  .apt-learning-layout { grid-template-columns: 1fr; }
  .apt-sidebar { position: fixed; left: -260px; z-index: 40; transition: left .2s; box-shadow: 0 0 0 100vw rgba(0,0,0,0); }
  .apt-sidebar.open { left: 0; box-shadow: 0 0 40px rgba(0,0,0,.2); }
  
  .apt-content-wrap { padding: 18px 16px 90px; }
  .apt-topbar { padding: 14px 16px; }
  .apt-mobile-nav { display: flex; position: fixed; bottom: 0; left: 0; right: 0; background: #fff; border-top: 1px solid var(--apt-line); z-index: 30; }
  .apt-mobile-nav button { flex: 1; border: none; background: none; padding: 10px 4px; font-size: 10.5px; color: var(--apt-ink-4); display: flex; flex-direction: column; align-items: center; gap: 3px; }
  .apt-mobile-nav button.apt-active { color: var(--apt-indigo); }
  .apt-d-lg-none-hide { display: none; }
}
@media (min-width: 901px) {
  .apt-d-lg-none { display: none !important; }
}

/* ── Analytics page — exact port of dist/assets/analytics.css (apt- prefixed, --x tokens
   swapped for --apt-x), once the user supplied the file. Values, grid columns and layout
   below are copied 1:1 from that file, not redesigned. ──────────────────────────────── */
.apt-analytics-hero { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 2rem; padding: 1.65rem 1.8rem; border-radius: var(--apt-radius); background: linear-gradient(135deg,#153e67,#1e5a86); color: #fff; box-shadow: var(--apt-shadow); overflow: hidden; position: relative; }
.apt-analytics-hero::after { content: ""; position: absolute; width: 240px; height: 240px; border-radius: 50%; background: rgba(255,255,255,.06); right: -85px; top: -120px; }
.apt-analytics-hero > * { position: relative; z-index: 1; }
.apt-analytics-hero h2 { font-size: 1.65rem; margin: .35rem 0; color: #fff; }
.apt-analytics-hero p { margin: 0; color: #d9e7f2; }
.apt-eyebrow.apt-light { color: #a9d7ff; }
.apt-hero-stat { padding: 0 1.6rem; border-left: 1px solid rgba(255,255,255,.18); }
.apt-hero-stat span, .apt-hero-stat strong, .apt-hero-stat small { display: block; }
.apt-hero-stat span { font-size: .76rem; color: #bdd3e4; }
.apt-hero-stat strong { font-size: 2rem; }
.apt-hero-stat small { color: #8de1d8; font-size: .75rem; }

.apt-summary-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.apt-chart-card { min-height: 365px; }
.apt-chart-box { height: 260px; position: relative; }
.apt-chart-box.apt-short { height: 235px; }
.apt-insight-note, .apt-pace-message { display: flex; align-items: center; gap: .6rem; margin: .75rem 0 0; padding: .7rem .8rem; border-radius: 10px; background: var(--apt-indigo-soft); color: #35516e; font-size: .8rem; }
.apt-insight-note i { color: var(--apt-amber); }
.apt-pace-message { background: var(--apt-mint-soft); color: #116a65; }
.apt-chart-legend { font-size: .75rem; color: var(--apt-ink-4); }
.apt-chart-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 3px; background: var(--apt-indigo); margin-right: .3rem; }

.apt-focus-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.apt-focus-item { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .9rem; padding: 1rem; border: 1px solid var(--apt-line); border-radius: 12px; }
.apt-focus-icon { width: 42px; height: 42px; border-radius: 11px; background: var(--apt-indigo-soft); color: var(--apt-indigo); display: grid; place-items: center; font-size: 1.05rem; }
.apt-focus-item.apt-warning .apt-focus-icon { background: var(--apt-amber-soft); color: var(--apt-amber); }
.apt-focus-item.apt-success .apt-focus-icon { background: var(--apt-mint-soft); color: var(--apt-mint); }
.apt-focus-item strong, .apt-focus-item span { display: block; }
.apt-focus-item strong { font-size: .88rem; }
.apt-focus-item span { font-size: .72rem; color: var(--apt-ink-4); margin: .15rem 0 .45rem; }
.apt-focus-item .apt-progress { height: 6px; }
.apt-focus-item .apt-btn-outline-primary { border-color: #b9d0f7; color: var(--apt-indigo); }

.apt-course-filter { min-width: 270px; border-radius: 10px; }

@media (max-width: 1199.98px) {
  .apt-summary-grid { grid-template-columns: repeat(2, 1fr); }
  .apt-focus-grid { grid-template-columns: 1fr; }
  .apt-analytics-hero { grid-template-columns: 1fr auto; }
  .apt-analytics-hero .apt-btn { grid-column: 1 / -1; width: max-content; }
}
@media (max-width: 767.98px) {
  .apt-summary-grid { grid-template-columns: 1fr; }
  .apt-analytics-hero { grid-template-columns: 1fr; gap: 1rem; }
  .apt-hero-stat { border-left: 0; border-top: 1px solid rgba(255,255,255,.18); padding: 1rem 0 0; }
  .apt-course-filter { display: none; }
  .apt-chart-card { min-height: 340px; }
  .apt-chart-box { height: 235px; }
  .apt-focus-item { grid-template-columns: auto 1fr; }
  .apt-focus-item .apt-btn { grid-column: 1 / -1; width: 100%; }
}