/* ============================================================
   RedTeam Xperience — Student Dashboard
   Design tokens
   ============================================================ */
:root {
  --red: #f01c24;
  --red-700: #c8121a;
  --red-grad: linear-gradient(180deg, #ff5b5c 0%, #ff1a1e 100%);
  --red-soft: #ffe9ea;
  --red-soft-2: #fff3f3;
  --ink: #15120d;
  /* warm near-black — feature cards */
  --ink-2: #1f1b14;
  --ink-3: #2a241b;
  --bg: #ece5d8;
  --card: #ffffffc2;
  --text: #1d1a13;
  --userDropdown: #1d1a13;
  --text-2: #6d6557;
  --muted: #a69d8b;
  --line: #ffffff;
  --line-2: #e1d6c2;
  --r-lg: 5px;
  --r-md: 5px;
  --r-sm: 5px;
  --pill: 999px;
  --topbar-bg: #fff7f7;
  --stickyheader-bg: #fff7f7dc;
  --shadow-sm: 0 1px 2px rgba(60, 48, 24, .05), 0 2px 8px rgba(60, 48, 24, .05);
  --shadow-md: 0 6px 18px rgba(60, 48, 24, .08), 0 16px 36px rgba(60, 48, 24, .07);
  --shadow-red: 0 8px 22px rgba(240, 28, 36, .32);
  --sans: "Plus Jakarta Sans", system-ui, sans-serif;
  --display: "Space Grotesk", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
  --sidebar-w: 256px;
  /* Breathing room between the header, the page body and the footer. Tune here, not per
     page. The header sits tighter to the content than the footer does — the topbar is
     part of the page, the footer is a separate block. */
  --page-gap: 32px;      /* page body -> footer */
  --page-gap-top: 14px;  /* header -> page body */
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  /* Native scrollbar removed by request (mobile scrolls the window; the .scroll-progress
     rail signals position/end instead). Desktop scrolls .content, which is hidden too. */
  scrollbar-width: none;
}
html::-webkit-scrollbar,
body::-webkit-scrollbar {
  display: none;
}

body {
  font-family: var(--sans);
  background: #fff7f7;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: -.02em;
}

p {
  margin: 0;
}

/* ============================================================
   App shell
   ============================================================ */
.app {
  display: flex;
  /* Fixed app-shell: the shell fills the viewport and does NOT scroll — only .content
     scrolls internally. This keeps the sidebar a fixed column (no drift on scroll) and
     stops the window scrollbar from toggling between pages (which reflowed the whole
     row and made the sidebar "blink" on navigation). Mobile reverts to window scroll. */
  height: 100vh;
  overflow: hidden;
  /* Warm app background restored — it lived in styles-v4.css's GLOBAL `.app` until that
     rule was scoped to `.frame .app` (commit c62990c4, the /login-alt mockup shell),
     which left every real page showing the bare grey body (#d7d4cd). Background ONLY:
     no panel padding, so the shell fills the viewport and the sidebar/topbar/content
     sit flush (each keeps its own intrinsic spacing). Dark mode overrides below. */
  background:
    radial-gradient(620px 360px at 86% 4%, rgba(241, 72, 78, .09), transparent 70%),
    radial-gradient(520px 360px at 8% 104%, rgba(241, 72, 78, .045), transparent 72%),
    linear-gradient(150deg, #fff5f5 0%, #f6ece5 45%, #ffffff 100%);
}

/* ---------- Sidebar ---------- */
.sidebar {
  width: var(--sidebar-w);
  flex: 0 0 var(--sidebar-w);
  background: var(--card);
  border-right: 1px solid var(--line);
  padding: 24px 16px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  z-index: 20;
  transition: width .3s cubic-bezier(.4, 0, .2, 1),
    flex .3s cubic-bezier(.4, 0, .2, 1),
    padding .3s cubic-bezier(.4, 0, .2, 1);
}

.sidebar::-webkit-scrollbar {
  width: 6px;
}

.sidebar::-webkit-scrollbar-thumb {
  background: var(--line-2);
  border-radius: 999px;
}

.sidebar::-webkit-scrollbar-track {
  background: transparent;
}

.brand {
  display: flex;
  align-items: center;
  padding: 4px 10px 2px;
  gap: 8px;
  min-height: 30px;
}

.brand-logo {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  border-radius: 6px;
  transition: opacity .15s ease;
}
.brand-logo:hover { opacity: .85; }
.brand-logo:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }

.brand img {
  height: 30px;
  width: auto;
  transition: opacity .25s ease, width .25s ease;
}

/* Sidebar toggle button */
.side-toggle {
  width: 30px;
  height: 35px;
  display: grid;
  place-items: center;
  background: var(--red-soft-2);
  border: 1px solid var(--line);
  color: var(--black);
  margin-left: -10px;
  flex: 0 0 28px;
  transition: transform .3s ease, background .15s, color .15s;
}

.side-toggle:hover {
  background: var(--red-soft);
  color: var(--red);
}

.side-toggle svg {
  width: 16px;
  height: 16px;
}

.nav-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.nav-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 6px 12px;
  white-space: nowrap;
  overflow: hidden;
  transition: opacity .2s ease;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 5px;
  color: var(--text-2);
  font-size: 14.5px;
  font-weight: 500;
  position: relative;
  transition: background .15s, color .15s, padding .25s ease, justify-content .25s ease;
  white-space: nowrap;
  overflow: hidden;
}

/* Sidebar loading skeleton — placeholder rows while the admin-controlled menu
   list loads, so admin-hidden items never flash in then disappear on refresh. */
.nav-skel { cursor: default; pointer-events: none; }
.nav-skel-ic { width: 20px; height: 20px; flex: 0 0 20px; border-radius: 6px; }
.nav-skel-bar { height: 11px; flex: 1 1 auto; max-width: 120px; border-radius: 6px; }
html.side-collapsed .nav-skel-bar { display: none; }

.nav-item svg {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  stroke-width: 1.9;
}

.nav-item:hover {
  background: var(--red-soft-2);
  color: var(--red);
}

.nav-item.active {
  background: var(--red-grad);
  color: #fff;
  box-shadow: var(--shadow-red);
}

.nav-item.active svg {
  color: #fff;
}

.nav-badge {
  margin-left: auto;
  font-size: 11px;
  font-weight: 600;
  background: rgba(255, 255, 255, .22);
  color: #fff;
  padding: 1px 8px;
  border-radius: var(--pill);
}

.nav-item:not(.active) .nav-badge {
  background: var(--red-soft);
  color: var(--red);
}

/* "Running" lab badge — green, clickable (opens the running lab), with a live pulse dot. */
.nav-badge.running,
.nav-item:not(.active) .nav-badge.running {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(22, 163, 74, .16);
  color: #22c55e;
  cursor: pointer;
}
.nav-badge.running .nav-badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 0 rgba(34, 197, 94, .6);
  animation: navBadgePulse 1.8s infinite;
}
@keyframes navBadgePulse {
  0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, .55); }
  70% { box-shadow: 0 0 0 6px rgba(34, 197, 94, 0); }
  100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}
/* collapsed sidebar: show it as just the pulsing dot */
html.side-collapsed .nav-badge.running { padding: 0; background: transparent; }
html.side-collapsed .nav-badge.running span:not(.nav-badge-dot) { display: none; }

/* collapsed sidebar: shrink the badge to a small dot on the icon */
html.side-collapsed .nav-item .nav-badge {
  position: absolute;
  top: 7px;
  right: 9px;
  margin: 0;
  padding: 0;
  width: 8px;
  height: 8px;
  min-width: 0;
  font-size: 0;
  line-height: 0;
  border-radius: 50%;
  background: var(--red);
  color: transparent;
  box-shadow: 0 0 0 2px var(--card);
}

.sidebar-foot {
  margin-top: auto;
  transition: opacity .2s ease, max-height .3s ease;
  overflow: hidden;
}

.upgrade {
  background: var(--ink);
  color: #fff;
  border-radius: var(--r-md);
  padding: 18px;
  position: relative;
  overflow: hidden;
}

.upgrade::after {
  content: "";
  position: absolute;
  right: -30px;
  top: -30px;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: var(--red-grad);
  opacity: .9;
  filter: blur(2px);
}

.upgrade h4 {
  font-size: 15px;
  position: relative;
}

.upgrade p {
  font-size: 12.5px;
  color: #fff;
  margin: 6px 0 13px;
  position: relative;
  line-height: 1.5;
  z-index: 5;
}

.upgrade .btn {
  position: relative;
}

/* ---- Sidebar collapsed state (desktop icon-only mode) ---- */
html.side-collapsed .sidebar {
  width: 72px;
  flex: 0 0 72px;
  padding: 26px 10px 22px;
  overflow-x: hidden;
  overflow-y: auto;
}

html.side-collapsed .brand {
  justify-content: center;
  padding: 4px 0 2px;
  flex-direction: column;
  align-items: center;
}

html.side-collapsed .brand img {
  width: 0;
  height: 0;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  pointer-events: none;
}

html.side-collapsed .side-toggle {
  margin-left: 0;
  transform: rotate(180deg);
}

html.side-collapsed .nav-label {
  opacity: 0;
  height: 0;
  padding: 0;
  margin: 0;
  overflow: hidden;
}

html.side-collapsed .nav-group {
  width: 100%;
}

html.side-collapsed .nav-item {
  width: 48px;
  height: 44px;
  padding: 0;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  font-size: 0;
  color: transparent;
  overflow: hidden;
}

html.side-collapsed .nav-item svg {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  color: var(--text-2);
}

html.side-collapsed .nav-item.active {
  color: transparent;
}

html.side-collapsed .nav-item:hover {
  color: transparent;
}

html.side-collapsed .nav-item.active svg {
  color: #fff;
}

html.side-collapsed .nav-item:hover svg {
  color: var(--red);
}

html.side-collapsed .sidebar-foot {
  opacity: 0;
  max-height: 0;
  padding: 0;
  margin: 0;
  pointer-events: none;
  overflow: hidden;
}

html.side-collapsed .nav-badge {
  display: none;
}

/* Tooltip on hover when collapsed */
html.side-collapsed .nav-item[title] {
  position: relative;
}

html.side-collapsed .nav-item[title]:hover::after {
  content: attr(title);
  position: absolute;
  left: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%);
  background: var(--ink);
  color: #fff;
  font-size: 12.5px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 8px;
  white-space: nowrap;
  z-index: 999;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
  pointer-events: none;
  animation: tooltipIn .15s ease;
}

html.side-collapsed .nav-item[title]:hover::before {
  content: "";
  position: absolute;
  left: calc(100% + 6px);
  top: 50%;
  transform: translateY(-50%);
  border: 5px solid transparent;
  border-right-color: var(--ink);
  z-index: 999;
  pointer-events: none;
  animation: tooltipIn .15s ease;
}

@keyframes tooltipIn {
  from {
    opacity: 0;
    transform: translateY(-50%) translateX(-4px);
  }

  to {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
  }
}

/* ---------- Content ---------- */
.content {
  flex: 1;
  min-width: 0;
  /* Bottom padding keeps the footer off the very viewport edge (breathing room). */
  padding: 0 24px 18px;
  transition: margin-left .3s cubic-bezier(.4, 0, .2, 1);
  /* max-width: 1520px; */
  /* Only the content scrolls (see .app). Flex column so the footer (margin-top:auto)
     is pinned to the bottom on short pages instead of floating with dead space below. */
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  row-gap: var(--page-gap-top);
  /* Native scrollbar removed by request — the .scroll-progress rail (right edge) shows
     scroll position and reaching the bottom marks the page end. */
  scrollbar-width: none;
}
.content::-webkit-scrollbar { display: none; }

/* Scroll-progress rail — replaces the hidden native scrollbar. A slim brand-red bar
   on the right edge whose fill height tracks scroll position (--scroll-progress, set
   by AppShell). Full = you've reached the page end. Hidden unless the page scrolls. */
.scroll-progress {
  position: fixed;
  top: 0;
  right: 2px;
  bottom: 0;
  width: 3px;
  z-index: 60;
  pointer-events: none;
  opacity: 0;
  transition: opacity .25s ease;
}
.app.is-scrollable .scroll-progress { opacity: 1; }
.scroll-progress > i {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(var(--scroll-progress, 0) * 100%);
  background: var(--red-grad);
  border-radius: 999px;
  transition: height .08s linear;
}
@media (prefers-reduced-motion: reduce) {
  .scroll-progress > i { transition: none; }
}

/* ---------- Topbar ---------- */
.topbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 24px;
  /* Separation from the page body now comes from --page-gap on the flex parents, so the
     header only keeps a little internal padding (40px here would double it up). */
  padding: 4px 0 8px;
}

.topbar .greeting h1 {
  font-size: 25px;
  line-height: 1.04;
}

.topbar .greeting p {
  font-size: 13.5px;
  color: var(--muted);
  margin-top: 5px;
}

/* ---------- Payment-pending banner (dashboard, dismissible) ---------- */
html.pay-dismissed .paybar { display: none; }
.paybar {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 16px;
  background: linear-gradient(105deg, #b00d11 0%, #f01c24 44%, #ff6a1f 100%);
  border-radius: 5px; padding: 15px 18px; margin-bottom: 22px;
  color: #fff;
  box-shadow: 0 10px 28px rgba(240, 28, 36, .34);
  animation: payIn .45s cubic-bezier(.22, .61, .36, 1) both;
}
/* moving light sheen for attention */
.paybar::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: -45%; width: 38%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .22), transparent);
  transform: skewX(-18deg); pointer-events: none;
  animation: paySheen 3.4s ease-in-out infinite;
}
/* soft glow blob on the right */
.paybar::after {
  content: ""; position: absolute; right: -40px; top: -50px; width: 190px; height: 190px;
  background: radial-gradient(circle, rgba(255, 255, 255, .2), transparent 60%);
  pointer-events: none;
}
@keyframes paySheen { 0% { left: -45%; } 55%, 100% { left: 125%; } }
@keyframes payIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.paybar.paybar-closing { opacity: 0; transform: translateY(-8px); transition: opacity .25s ease, transform .25s ease; }

.paybar-ic { position: relative; z-index: 1; flex: 0 0 44px; width: 44px; height: 44px; border-radius: 5px; display: grid; place-items: center; background: rgba(255, 255, 255, .18); color: #fff; animation: payPulse 1.9s infinite; }
@keyframes payPulse { 0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .5); } 70% { box-shadow: 0 0 0 11px rgba(255, 255, 255, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); } }
.paybar-ic svg { width: 22px; height: 22px; }

.paybar-body { position: relative; z-index: 1; flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.paybar-body strong { display: flex; align-items: center; gap: 9px; font-family: var(--display); font-size: 15px; font-weight: 700; color: #fff; }
.paybar-pill { font-family: var(--mono); font-size: 10px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; background: #fff; color: #c8121a !important; padding: 3px 8px; border-radius: 999px; animation: payBlink 1.3s steps(1, end) infinite;padding-bottom: 0px; padding-top: 2px; }
@keyframes payBlink { 50% { opacity: .45; } }
.paybar-body span { font-size: 12.5px; color: rgba(255, 255, 255, .92); line-height: 1.5; }
.paybar-body b { color: #fff; font-weight: 800; }

.paybar-cta { position: relative; z-index: 1; flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; background: #fff; color: #c8121a; font-weight: 800; font-size: 13px; padding: 10px 18px; border-radius: 10px; box-shadow: 0 6px 16px rgba(0, 0, 0, .18); transition: transform .15s ease, box-shadow .15s ease; }
.paybar-cta:hover { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(0, 0, 0, .26); }
.paybar-cta svg { width: 15px; height: 15px; }

.paybar-x { position: relative; z-index: 1; flex: 0 0 auto; width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; color: rgba(255, 255, 255, .85); transition: background .15s ease, color .15s ease; }
.paybar-x:hover { background: rgba(255, 255, 255, .22); color: #fff; }
.paybar-x svg { width: 16px; height: 16px; }

@media (max-width: 620px) {
  .paybar { flex-wrap: wrap; row-gap: 12px; }
  .paybar-ic { order: 1; }
  .paybar-x { order: 1; margin-left: auto; }
  .paybar-body { order: 2; flex: 1 1 100%; }
  .paybar-cta { order: 3; width: 100%; justify-content: center; }
}

/* ---------- Pending Labs (dashboard) — progress-ring cards, accent via --c, % via --p ---------- */
.plab-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 22px; }
.plab-lbx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 18px; }
.plab-card { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 11px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 18px 18px 20px; box-shadow: var(--shadow-sm); transition: transform .15s, box-shadow .15s, border-color .15s; }
.plab-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--line-2); }

/* status pill */
.plab-status { align-self: flex-start; font-family: var(--mono); font-size: 9.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 4px 9px; border-radius: 999px; }
.plab-status.inprog { color: #d98a00; background: rgba(217, 138, 0, .14); }
.plab-status.done { color: #16a34a; background: rgba(22, 163, 74, .14); }
.plab-status.new { color: var(--c); background: color-mix(in srgb, var(--c) 15%, transparent); }

/* Labs page: My Labs / Practice Labs tabs */
.labs-tabs {
  display: inline-flex;
  gap: 4px;
  background: var(--card);
  border: 1px solid var(--line-2);
  border-radius: var(--pill);
  padding: 4px;
  margin-bottom: 24px;
  box-shadow: var(--shadow-sm);
}
.labs-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 20px;
  border-radius: var(--pill);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-2);
  transition: background .15s, color .15s;
}
.labs-tab:hover { color: var(--text); }
.labs-tab .cc {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--red-soft);
  color: var(--red);
}
.labs-tab.active { background: var(--ink); color: #fff; }
html[data-theme="dark"] .labs-tab.active { background: var(--red); }
.labs-tab.active .cc { background: rgba(255, 255, 255, .22); color: #fff; }
.labs-pane { display: none; }
.labs-pane.is-active { display: block; animation: pf2Fade .28s ease; }

/* circular progress ring (conic gradient driven by --p 0–100) */
.plab-ring { position: relative; width: 104px; height: 104px; border-radius: 50%; margin: 2px 0 4px; display: grid; place-items: center;
  background: conic-gradient(var(--c) calc(var(--p) * 3.6deg), color-mix(in srgb, var(--c) 16%, transparent) 0); }
.plab-ring::before { content: ""; position: absolute; inset: 10px; border-radius: 50%; background: var(--card); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 8%, transparent); }
.plab-pct { position: relative; font-family: var(--display); font-size: 24px; font-weight: 800; color: var(--text); line-height: 1; }
.plab-pct small { font-size: 12px; font-weight: 700; color: var(--muted); margin-left: 1px; }

.plab-title { display: flex; align-items: center; justify-content: center; min-height: 2.6em; font-family: var(--display); font-size: 15px; font-weight: 700; color: var(--text); line-height: 1.3; }
.plab-meta { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--text-2); font-weight: 600; }
.plab-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c); flex: 0 0 8px; }
.plab-sub { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 11px; color: var(--muted); font-weight: 600; }
.plab-sub svg { width: 13px; height: 13px; }
.plab-btn { margin-top: auto; padding: 8px 22px; border-radius: var(--r-md); font-size: 13px; }

.search {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--pill);
  padding: 12px 16px;
  width: 320px;
  box-shadow: var(--shadow-sm);
}

.search svg {
  width: 18px;
  height: 18px;
  color: var(--muted);
}

.search input {
  border: none;
  outline: none;
  flex: 1;
  font-size: 14px;
  background: none;
  color: var(--text);
  font-family: inherit;
}

.search input::placeholder {
  color: var(--muted);
}

.icon-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--card);
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  color: var(--text-2);
  box-shadow: var(--shadow-sm);
  position: relative;
  transition: color .15s, border-color .15s;
}

.icon-btn:hover {
  color: var(--red);
  border-color: var(--red-soft);
}

.icon-btn svg {
  width: 20px;
  height: 20px;
}

.icon-btn .dot {
  position: absolute;
  top: 9px;
  right: 10px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--red);
  border: 2px solid var(--card);
}

.profile-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--pill);
  padding: 5px 14px 5px 5px;
  box-shadow: var(--shadow-sm);
}

.profile-chip .ava {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--red-grad);
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 600;
  font-size: 14px;
}

.profile-chip .who {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--userDropdown);
  line-height: 1.1;
}

.profile-chip .who span {
  display: block;
  font-size: 11px;
  color: var(--muted);
  font-weight: 500;
}

/* ============================================================
   Buttons
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 14px;
  padding: 12px 24px;
  border-radius: var(--pill);
  /* Center the label when it wraps to two lines (e.g. narrow mobile CTAs). */
  text-align: center;
  transition: transform .12s, box-shadow .15s, background .15s;
}

.btn:active {
  transform: translateY(1px);
}

.btn-red {
  background: var(--red-grad);
  color: #fff;
  box-shadow: var(--shadow-red);
}

.btn-red:hover {
  box-shadow: 0 10px 26px rgba(240, 28, 36, .42);
}

.btn-dark {
  background: var(--ink);
  color: #fff;
}

.btn-ghost {
  background: var(--card);
  color: var(--text);
  border: 1.5px solid var(--line-2);
}

.btn-ghost:hover {
  border-color: var(--red);
  color: var(--red);
}

.btn-sm {
  padding: 9px 16px;
  font-size: 13px;
}

.btn svg {
  width: 17px;
  height: 17px;
}

/* ============================================================
   Section scaffolding
   ============================================================ */
.section {
  margin-bottom: 32px;
}

.sec-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.sec-head h2 {
  font-size: 20.5px;
  letter-spacing: -.025em;
}

.sec-head .count {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  background: var(--red-soft);
  color: var(--red);
  padding: 3px 9px;
  border-radius: var(--pill);
}

.sec-head .link {
  margin-left: auto;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--red);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.sec-head .link svg {
  width: 16px;
  height: 16px;
}

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}

/* ============================================================
   Top bento grid: hero / ring / stats / ID card
   ============================================================ */
.bento {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-areas:
    "hero hero ring id"
    "s1   s2   s3   id";
  gap: 20px;
  margin-bottom: 30px;
}

.b-hero {
  grid-area: hero;
}

.b-ring {
  grid-area: ring;
}

.b-id {
  grid-area: id;
}

.b-s1 {
  grid-area: s1;
}

.b-s2 {
  grid-area: s2;
}

.b-s3 {
  grid-area: s3;
}

/* Progress ring tile */
.ring-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  padding: 20px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  text-align: center;
}

.ring-card .cap {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-2);
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.ring-card .cap svg {
  width: 16px;
  height: 16px;
  color: var(--red);
}

.ring {
  width: 124px;
  height: 124px;
  border-radius: 50%;
  /* Donut arc driven by --rp (a percentage, e.g. 25%); defaults to 0% → no red. */
  --rp: 0%;
  background: conic-gradient(var(--red) 0% var(--rp), #eceef2 var(--rp) 100%);
  display: grid;
  place-items: center;
  position: relative;
}

.ring::before {
  content: "";
  position: absolute;
  inset: 13px;
  background: var(--card);
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px var(--line);
}

.ring .val {
  position: relative;
  z-index: 1;
  font-family: var(--display);
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -.02em;
}

.ring .val small {
  display: block;
  font-size: 10.5px;
  color: var(--muted);
  font-weight: 500;
  letter-spacing: .04em;
}

.ring-card .sub {
  font-size: 12px;
  color: var(--muted);
  font-weight: 500;
}

.ring-card .sub b {
  color: var(--text);
}

/* Hero — light, minimal red */
.hero {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  padding: 34px 38px;
  color: var(--text);
  position: relative;
  overflow: hidden;
  min-height: 172px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hero .deco {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hero .deco::before {
  content: "";
  position: absolute;
  width: 300px;
  height: 300px;
  right: -90px;
  top: -120px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(240, 28, 36, .10), transparent 68%);
}

/* .hero .deco::after { content:""; position: absolute; right: 30px; bottom: 26px; width: 150px; height: 150px; border-radius: 50%; border: 1.5px dashed var(--line-2); } */
.hero .tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--red-soft);
  border: 1px solid #ffd6d8;
  color: var(--red);
  padding: 5px 13px;
  border-radius: var(--pill);
  font-size: 12px;
  font-weight: 600;
  width: fit-content;
  margin-bottom: 14px;
  white-space: nowrap;
}

.hero .tag .pulse {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 0 0 rgba(240, 28, 36, .5);
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(240, 28, 36, .45)
  }

  70% {
    box-shadow: 0 0 0 8px rgba(240, 28, 36, 0)
  }

  100% {
    box-shadow: 0 0 0 0 rgba(240, 28, 36, 0)
  }
}

.hero h2 {
  font-size: 31px;
  line-height: 1.06;
  position: relative;
}

.hero p {
  font-size: 14.5px;
  color: var(--text-2);
  margin-top: 11px;
  position: relative;
  max-width: 470px;
  line-height: 1.58;
}

.hero .cta-row {
  display: flex;
  gap: 12px;
  margin-top: 24px;
  position: relative;
}

/* Stats */
.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.stat {
  border-radius: var(--r-md);
  padding: 22px 22px 20px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 14px;
  justify-content: space-between;
  min-height: 132px;
}

.stat .top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.stat .ico {
  width: 42px;
  height: 42px;
  border-radius: 5px;
  display: grid;
  place-items: center;
}

.stat .ico svg {
  width: 21px;
  height: 21px;
}

.stat .num {
  font-family: var(--display);
  font-size: 38px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.03em;
}

.stat .label {
  font-size: 13.5px;
  font-weight: 500;
}

.stat .trend {
  font-size: 12px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.stat.dark {
  background: var(--ink);
  color: #fff;
}

.stat.dark .ico {
  background: rgba(255, 255, 255, .1);
  color: #ff6b6c;
}

.stat.dark .label {
  color: #aab0bb;
}

.stat.dark .trend {
  color: #5fd08a;
}

.stat.dark::after {
  content: "";
  position: absolute;
  right: -26px;
  bottom: -26px;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(240, 28, 36, .28), transparent 70%);
}

.stat.red {
  background: var(--red-grad);
  color: #fff;
}

.stat.red .ico {
  background: rgba(255, 255, 255, .2);
  color: #fff;
}

.stat.red .label {
  color: rgba(255, 255, 255, .9);
}

.stat.red .trend {
  color: #fff;
}

.stat.light {
  background: var(--card);
  border: 1px solid var(--line);
  color: var(--text);
  box-shadow: var(--shadow-sm);
}

.stat.light .ico {
  background: var(--red-soft);
  color: var(--red);
}

.stat.light .num {
  color: var(--red);
}

.stat.light .label {
  color: var(--text-2);
}

.stat.light .trend {
  color: var(--muted);
}

/* Student ID card */
.idcard {
  background: var(--ink);
  border-radius: var(--r-lg);
  overflow: hidden;
  color: #fff;
  display: flex;
  flex-direction: column;
}

.idcard .banner {
  height: 96px;
  position: relative;
  background: linear-gradient(135deg, #1b1e26 0%, #2a0d10 100%);
  overflow: hidden;
}

.idcard .banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(130px 100px at 80% 20%, rgba(240, 28, 36, .45), transparent 70%), radial-gradient(140px 100px at 15% 90%, rgba(255, 90, 92, .18), transparent 70%);
}

.idcard .banner .grid-ov {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255, 255, 255, .12) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .12) 1px, transparent 1px);
  background-size: 26px 26px;
  opacity: .5;
}

.idcard .ava-wrap {
  display: flex;
  justify-content: center;
  margin-top: -44px;
}

.idcard .ava {
  width: 86px;
  height: 86px;
  border-radius: 50%;
  border: 4px solid var(--ink);
  background: #2a2d36;
  display: grid;
  place-items: center;
  position: relative;
  z-index: 2;
}

.idcard .ava svg {
  width: 42px;
  height: 42px;
  color: #aab0bb;
}

.idcard .body {
  padding: 12px 20px 22px;
  text-align: center;
}

.idcard .name {
  font-family: var(--display);
  font-size: 18px;
  font-weight: 600;
}

.idcard .sid {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .04em;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .12);
  color: #d3d7df;
  padding: 5px 12px;
  border-radius: var(--pill);
  margin-top: 8px;
}

.idcard .sid .ok {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #5fd08a;
}

.idcard .meta {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}

.idcard .meta .m {
  flex: 1;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 5px;
  padding: 11px 8px;
}

.idcard .meta .m .v {
  font-family: var(--display);
  font-size: 18px;
  font-weight: 600;
}

.idcard .meta .m .k {
  font-size: 10.5px;
  color: #9aa0ac;
  font-weight: 500;
  margin-top: 2px;
  letter-spacing: .02em;
}

.idcard .feat {
  margin: 16px 14px 14px;
  border-radius: var(--r-md);
  background: linear-gradient(160deg, #ff7a52, #ff1a1e);
  padding: 16px;
  text-align: left;
  position: relative;
  overflow: hidden;
}

.idcard .feat .lbl {
  font-size: 11px;
  font-weight: 600;
  opacity: .9;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.idcard .feat .ttl {
  font-family: var(--display);
  font-size: 16px;
  font-weight: 600;
  margin-top: 4px;
}

.idcard .feat .bar {
  height: 6px;
  border-radius: 5px;
  background: rgba(255, 255, 255, .3);
  margin-top: 12px;
  overflow: hidden;
}

.idcard .feat .bar i {
  display: block;
  height: 100%;
  width: 64%;
  background: #fff;
  border-radius: 5px;
}

.idcard .feat .pc {
  font-size: 11.5px;
  font-weight: 600;
  margin-top: 8px;
}

.idcard .feat::after {
  content: "";
  position: absolute;
  right: -24px;
  bottom: -30px;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .18);
}

/* ============================================================
   Course cards (My Courses) — minimal job-card style
   ============================================================ */
.course-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* Relief step for the persistent 256px sidebar: viewport-based media queries
   can't see that .course-grid's actual container is narrower than the
   viewport by the sidebar's width, so 3 columns stayed locked in all the way
   down to the sidebar's own 860px collapse — squeezing each card to ~226px
   at common laptop widths (~1024px viewport, ~720px real content width). */
@media (max-width: 1180px) {
  .course-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.course {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 22px 22px 20px;
  box-shadow: var(--shadow-sm);
  transition: transform .15s, box-shadow .15s, border-color .15s;
  display: flex;
  flex-direction: column;
}

.course:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--line-2);
}

.course .c-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.course .c-logo {
  width: 46px;
  height: 46px;
  border-radius: 5px;
  display: grid;
  place-items: center;
  font-family: var(--display);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .02em;
  color: #fff;
  background: var(--ink);
}

.course .c-logo.l-red {
  background: var(--red-grad);
}

.course .c-logo.l-ink {
  background: linear-gradient(135deg, #20232c, #0e0f13);
}

.course .c-save {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--muted);
  padding: 4px 4px;
}

.course .c-save svg {
  width: 15px;
  height: 15px;
}

.course .c-save.on {
  color: var(--red);
}

.course .c-meta {
  font-size: 12.5px;
  color: var(--muted);
  font-weight: 500;
  margin-top: 16px;
}

.course .c-title {
  font-family: var(--display);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.3;
  margin-top: 8px;
  min-height: 44px;
  text-wrap: pretty;
  color: var(--text);
}

.course .c-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.course .c-tags span {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-2);
  background: #f6f7f9;
  border: 1px solid var(--line);
  padding: 5px 11px;
  border-radius: var(--pill);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.course .c-tags span svg {
  width: 13px;
  height: 13px;
  color: var(--muted);
}

.course .c-prog {
  margin-top: 18px;
}

.course .c-prog .pt {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 6px;
}

.course .c-prog .pt .pc {
  color: var(--red);
}

.course .c-prog .pt .rem {
  color: var(--muted);
  font-weight: 500;
}

.course .c-prog .bar {
  height: 6px;
  border-radius: var(--pill);
  background: var(--line-2);
  overflow: hidden;
}

.course .c-prog .bar i {
  display: block;
  height: 100%;
  background: var(--red-grad);
  border-radius: var(--pill);
}

.course .c-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.course .c-foot .lessons {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-2);
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.course .c-foot .lessons svg {
  width: 16px;
  height: 16px;
  color: var(--muted);
}

.course .c-foot .btn {
  padding: 10px 18px;
}

/* ============================================================
   Two-column: chart + side
   ============================================================ */
.split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin-bottom: 40px;
}
.split-2{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 40px;
}
.split-2 .v4-scope .card{
  height: 100%;
}

/* Chart — vertical bars */
.chart-card {
  padding: 26px 28px 24px;
}

.chart-card .head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.chart-card h3 {
  font-size: 18px;
}

.chart-card .head .total {
  text-align: right;
}

.chart-card .head .total .big {
  font-family: var(--display);
  font-size: 24px;
  font-weight: 600;
}

.chart-card .head .total .big small {
  font-size: 13px;
  color: var(--muted);
  font-weight: 500;
}

.chart-card .head .total .sub {
  font-size: 12px;
  color: var(--muted);
  font-weight: 500;
  margin-top: 2px;
}

.vchart {
  margin-top: 24px;
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 12px;
}

.vchart .yaxis {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 220px;
  text-align: right;
}

.vchart .yaxis span {
  font-size: 10.5px;
  color: var(--muted);
  font-family: var(--mono);
  line-height: 1;
  transform: translateY(-4px);
}

.vchart .plot {
  position: relative;
  height: 220px;
}

.vchart .gl {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--line);
}

.vchart .gl.dash {
  background: none;
  border-top: 1.5px dashed #ffc9cb;
}

.vchart .cols {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
}

.vchart .col {
  flex: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
}

.vchart .bar {
  width: 14px;
  border-radius: var(--pill);
  background: #e9eaef;
  position: relative;
  transition: filter .15s;
}

.vchart .col:hover .bar {
  filter: brightness(.94);
}

.vchart .bar.hl {
  background: var(--red-grad);
  box-shadow: 0 6px 14px rgba(240, 28, 36, .28);
}

.vchart .bar .tip {
  position: absolute;
  top: -34px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--ink);
  color: #fff;
  font-size: 11.5px;
  font-weight: 600;
  font-family: var(--mono);
  padding: 5px 9px;
  border-radius: 5px;
  white-space: nowrap;
}

.vchart .bar .tip::after {
  content: "";
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 8px;
  height: 8px;
  background: var(--ink);
  border-radius: 5px;
}

.vchart .xaxis {
  grid-column: 2;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 12px;
}

.vchart .xaxis span {
  flex: 1;
  text-align: center;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-2);
}

.vchart .xaxis span.on {
  color: var(--text);
  font-weight: 600;
}

/* Side stack (right of chart) */
.side-stack {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

/* Support card */
.support {
  background: var(--ink);
  border-radius: var(--r-lg);
  padding: 26px;
  color: #fff;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.support::after {
  content: "";
  position: absolute;
  right: -40px;
  top: -40px;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(240, 28, 36, .35), transparent 70%);
}

.support .ico {
  width: 50px;
  height: 50px;
  border-radius: 5px;
  background: var(--red-grad);
  display: grid;
  place-items: center;
  box-shadow: var(--shadow-red);
  position: relative;
}

.support .ico svg {
  width: 26px;
  height: 26px;
  color: #fff;
}

.support h3 {
  font-size: 19px;
  margin-top: 18px;
  position: relative;
}

.support p {
  font-size: 13.5px;
  color: #aab0bb;
  margin-top: 8px;
  line-height: 1.55;
  position: relative;
}

.support .btn {
  margin-top: 20px;
  align-self: flex-start;
  position: relative;
}

/* Promo */
.promo {
  background: linear-gradient(120deg, #16181f 0%, #20232c 100%);
  border-radius: var(--r-lg);
  padding: 28px 30px;
  color: #fff;
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.1fr 1fr auto;
  gap: 26px;
  align-items: center;
}

.promo .grid-ov {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 30px 30px;
}

.promo .glow {
  position: absolute;
  right: 30%;
  top: -60px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(240, 28, 36, .25), transparent 70%);
}

.promo h3 {
  font-size: 24px;
  line-height: 1.15;
  position: relative;
}

.promo .mid {
  position: relative;
}

.promo .mid p {
  font-size: 13.5px;
  color: #b9bdc7;
  line-height: 1.5;
  margin-bottom: 16px;
}

.promo .info {
  position: relative;
  text-align: right;
}

.promo .info .k {
  font-size: 12px;
  color: #9aa0ac;
  font-weight: 500;
}

.promo .info .v {
  font-family: var(--display);
  font-size: 17px;
  font-weight: 600;
  margin: 2px 0 12px;
}

.promo .info .price {
  color: #ff6b6c;
}

.promo .pthumb {
  width: 116px;
  height: 96px;
  border-radius: 5px;
  background: linear-gradient(135deg, #0b1220, #2a4a86);
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
}

.promo .pthumb .code {
  font-family: var(--display);
  font-weight: 700;
  color: #fff;
  font-size: 20px;
  letter-spacing: .04em;
}

.promo .pthumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(80px 60px at 70% 30%, rgba(64, 140, 255, .5), transparent 70%);
}

/* ============================================================
   Community feeds — friendly & light
   ============================================================ */
.feed-card {
  padding: 28px 30px 30px;
}

.avastack {
  display: flex;
  align-items: center;
}

.avastack .a {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid var(--card);
  margin-left: -8px;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
}

.avastack .a:first-child {
  margin-left: 0;
}

.avastack .more {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid var(--card);
  margin-left: -8px;
  background: var(--red-soft);
  color: var(--red);
  display: grid;
  place-items: center;
  font-size: 10.5px;
  font-weight: 600;
}

.composer {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #f7f8fa;
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 12px 16px;
  margin-top: 16px;
}

.composer .ava {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--red-grad);
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  flex: 0 0 40px;
}

.composer input {
  flex: 1;
  border: none;
  background: none;
  outline: none;
  font-family: inherit;
  font-size: 14px;
  color: var(--text);
}

.composer input::placeholder {
  color: var(--muted);
}

.composer .tools {
  display: flex;
  gap: 4px;
}

.composer .tools button {
  width: 36px;
  height: 36px;
  border-radius: 5px;
  display: grid;
  place-items: center;
  color: var(--muted);
}

.composer .tools button:hover {
  background: #eef0f3;
  color: var(--red);
}

.composer .tools button svg {
  width: 18px;
  height: 18px;
}

.composer .post-btn {
  white-space: nowrap;
}

.feed {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  margin-top: 18px;
}

.post {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 18px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .15s, transform .15s;
}

.post:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.post .ph {
  display: flex;
  align-items: center;
  gap: 11px;
}

.post .ph .ava {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  flex: 0 0 42px;
}

.post .ph .who {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.15;
}

.post .ph .who span {
  display: block;
  font-size: 12px;
  color: var(--muted);
  font-weight: 500;
  margin-top: 2px;
}

.post .ph .tag {
  margin-left: auto;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 11px;
  border-radius: var(--pill);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.post .ph .tag.win {
  color: var(--red);
  background: var(--red-soft);
}

.post .ph .tag.tip {
  color: #2a6fdb;
  background: #eaf1ff;
}

.post .txt {
  font-size: 14px;
  color: var(--text-2);
  line-height: 1.6;
  margin-top: 13px;
}

.post .media {
  height: 118px;
  border-radius: 5px;
  margin-top: 14px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  padding: 12px;
}

.post .media.m-red {
  background: linear-gradient(135deg, #fff1f1, #ffe0e1);
}

.post .media.m-blue {
  background: linear-gradient(135deg, #eef3ff, #e1ebff);
}

.post .media .dots {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(0, 0, 0, .05) 1.4px, transparent 1.4px);
  background-size: 16px 16px;
}

.post .media .chip {
  position: relative;
  z-index: 2;
  background: #fff;
  border-radius: var(--pill);
  padding: 6px 13px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
  box-shadow: var(--shadow-sm);
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.post .media .chip .ic {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  display: grid;
  place-items: center;
}

.post .media .chip .ic svg {
  width: 12px;
  height: 12px;
  color: #fff;
}

.post .pf {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
}

.post .pf .act {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-2);
  background: #f7f8fa;
  border: 1px solid var(--line);
  padding: 6px 13px;
  border-radius: var(--pill);
  transition: color .15s, border-color .15s, background .15s;
}

.post .pf .act svg {
  width: 16px;
  height: 16px;
}

.post .pf .act:hover {
  color: var(--red);
  border-color: #ffd6d8;
  background: var(--red-soft-2);
}

.post .pf .time {
  margin-left: auto;
  font-size: 12px;
  color: var(--muted);
  font-weight: 500;
}

/* ============================================================
   Explore more — light & cute
   ============================================================ */
.explore-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.xcard {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 5px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform .15s, box-shadow .15s;
}

.xcard:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.xcard .top {
  height: 110px;
  position: relative;
  padding: 16px;
}

.xcard .top .dots {
  border-radius: inherit;
}

.xcard .top.x-red {
  background: linear-gradient(135deg, #fff1f1, #ffdedf);
}

.xcard .top.x-blue {
  background: linear-gradient(135deg, #eef3ff, #dde8ff);
}

.xcard .top.x-violet {
  background: linear-gradient(135deg, #f4edff, #e7daff);
}

.xcard .top .dots {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(0, 0, 0, .045) 1.4px, transparent 1.4px);
  background-size: 16px 16px;
}

.xcard .top .badge {
  position: relative;
  z-index: 3;
  font-size: 11px;
  font-weight: 600;
  color: var(--text);
  background: #fff;
  padding: 5px 12px;
  border-radius: var(--pill);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: var(--shadow-sm);
}

.xcard .top .badge .d {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--red);
}

.xcard .tile {
  position: absolute;
  left: 20px;
  bottom: -26px;
  z-index: 4;
  width: 56px;
  height: 56px;
  border-radius: 5px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-md);
  display: grid;
  place-items: center;
  font-family: var(--display);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .02em;
}

.xcard .tile.red {
  color: var(--red);
}

.xcard .tile.blue {
  color: #2a6fdb;
}

.xcard .tile.violet {
  color: #7a3fc0;
}

.xcard .tile small {
  font-size: 9px;
  vertical-align: super;
  opacity: .7;
}

.xcard .body {
  padding: 36px 20px 20px;
}

.xcard .small-code {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: .04em;
  text-transform: uppercase;
}

.xcard .name {
  font-family: var(--display);
  font-size: 16.5px;
  font-weight: 600;
  margin-top: 4px;
  line-height: 1.3;
  text-wrap: pretty;
}

.xcard .degree {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-2);
  margin-top: 12px;
  background: #f6f7f9;
  border: 1px solid var(--line);
  padding: 5px 11px;
  border-radius: var(--pill);
}

.xcard .degree svg {
  width: 15px;
  height: 15px;
  color: var(--red);
}

.xcard .foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.xcard .foot .sub {
  font-size: 12.5px;
  color: var(--muted);
  font-weight: 500;
}

.xcard .go {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--red-grad);
  display: grid;
  place-items: center;
  color: #fff;
  box-shadow: var(--shadow-red);
  flex: 0 0 42px;
  transition: transform .15s;
}

.xcard:hover .go {
  transform: translateX(3px);
}

.xcard .go svg {
  width: 18px;
  height: 18px;
}

/* ============================================================
   Footer
   ============================================================ */
.footer {
  background: var(--ink);
  color: #fff;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  /* auto = stick to the bottom of .page-fade so short pages fill the dead space below.
     On tall pages it resolves to 0 and the footer follows the content normally. */
  margin-top: auto;
  padding: 8px 48px 28px;
  position: relative;
}

.footer .accent {
  height: 4px;
  border-radius: var(--pill);
  background: var(--red-grad);
  width: 64px;
  margin: 0 0 38px;
}

.footer .frow {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.2fr 1.1fr;
  gap: 36px;
}

.footer .brand-f img {
  height: 30px;
  filter: brightness(0) invert(1);
}

.footer .brand-f .tag {
  display: inline-block;
}

.footer .brand-f p {
  color: #9aa0ac;
  font-size: 13px;
  line-height: 1.65;
  margin-top: 16px;
  max-width: 300px;
}

.footer h5 {
  font-family: var(--display);
  font-size: 14px;
  margin-bottom: 16px;
}

.footer .flinks {
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.footer .flinks a {
  color: #b5b9c2;
  font-size: 13.5px;
  font-weight: 400;
  width: fit-content;
  transition: color .15s, padding .15s;
}

.footer .flinks a:hover {
  color: #fff;
  padding-left: 3px;
}

.footer .ct {
  display: flex;
  align-items: center;
  gap: 11px;
  color: #c2c6cf;
  font-size: 13.5px;
  margin-bottom: 12px;
}

.footer .ct svg {
  width: 17px;
  height: 17px;
  color: #ff6b6c;
  flex: 0 0 17px;
}

.footer .stores {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer .store {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 5px;
  padding: 9px 16px;
  transition: border-color .15s, background .15s;
}

.footer .store:hover {
  border-color: rgba(255, 255, 255, .35);
  background: rgba(255, 255, 255, .04);
}

.footer .store svg {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
}

.footer .store>span {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.footer .store .s {
  font-size: 10px;
  color: #9aa0ac;
}

.footer .store .b {
  font-family: var(--display);
  font-size: 14px;
  font-weight: 600;
}

.footer .divider {
  height: 1px;
  background: rgba(255, 255, 255, .1);
  margin: 34px 0 20px;
}

.footer .fbot {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.footer .fbot .cp {
  font-size: 12.5px;
  color: #8a909c;
}

.footer .socials {
  display: flex;
  gap: 10px;
}

.footer .socials a {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .15);
  display: grid;
  place-items: center;
  color: #c2c6cf;
  transition: background .15s, color .15s, border-color .15s;
}

.footer .socials a:hover {
  background: var(--red);
  color: #fff;
  border-color: var(--red);
}

.footer .socials svg {
  width: 16px;
  height: 16px;
}

/* ============================================================
   Responsive guard
   ============================================================ */
@media (max-width: 1180px) {
  .bento {
    grid-template-columns: repeat(2, 1fr);
    grid-template-areas: "hero hero" "ring id" "s1 s2" "s3 s3";
  }

  .split {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 860px) {
  /* Mobile: sidebar is an off-canvas fixed drawer, so revert to natural window scroll
     (avoids the 100vh mobile-browser-chrome cutoff of the fixed app-shell). */
  .app {
    height: auto;
    min-height: 100vh;
    overflow: visible;
  }

  .sidebar {
    display: none;
  }

  .content {
    padding: 16px;
    height: auto;
    overflow: visible;
    scrollbar-gutter: auto;
  }

  .bento {
    grid-template-columns: 1fr;
    grid-template-areas: "hero" "ring" "id" "s1" "s2" "s3";
  }

  .course-grid,
  .explore-grid,
  .feed {
    grid-template-columns: 1fr;
  }

  .promo {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   Red / Black v3 — warm dark surfaces & red accents
   ============================================================ */

/* Promo banner → warm black with red glow */
.promo {
  background: linear-gradient(120deg, #17130d 0%, #221c14 100%);
}

.promo .glow {
  background: radial-gradient(circle, rgba(240, 28, 36, .30), transparent 70%);
}

.promo .info .price {
  color: #ff6b6c;
}

.promo .pthumb {
  background: linear-gradient(135deg, #2a0d10, #7c1c20);
}

.promo .pthumb::after {
  background: radial-gradient(80px 60px at 70% 30%, rgba(240, 28, 36, .5), transparent 70%);
}

/* Course logo tiles → warm black / red */
.course .c-logo {
  background: linear-gradient(135deg, #221c14, #100d08);
  color: #fff;
}

.course .c-logo.l-red {
  background: var(--red-grad);
}

.course .c-logo.l-ink {
  background: linear-gradient(135deg, #221c14, #100d08);
}

/* Explore card tops → cream / red / warm-dark (drop pastel blue & violet) */
.xcard .top.x-red {
  background: linear-gradient(135deg, #ffeceb, #ffd9da);
}

.xcard .top.x-blue {
  background: linear-gradient(135deg, #f6efe1, #ece1cb);
}

.xcard .top.x-violet {
  background: linear-gradient(135deg, #1d1812, #2c241a);
}

.xcard .top.x-violet .badge {
  color: var(--text);
}

.xcard .top.x-violet .badge .d {
  background: var(--red);
}

.xcard .tile.blue {
  color: var(--text);
}

.xcard .tile.violet {
  color: #ff6b6c;
}

/* Community tip tag & media → warm neutral instead of blue */
.post .ph .tag.tip {
  color: #9a7b1e;
  background: #f4ecd6;
}

.post .media.m-blue {
  background: linear-gradient(135deg, #f6efe1, #ece1cb);
}

.post .media.m-blue .chip .ic {
  background: linear-gradient(135deg, #221c14, #100d08) !important;
}

/* Chart dashed guide → warm red tint */
.vchart .gl.dash {
  border-top-color: #f4c9cb;
}

/* ============================================================
   ADD-ONS — hamburger nav, dropdowns, entrance/graph animations
   ============================================================ */

/* ---- Hamburger toggle ---- */
.nav-toggle {
  width: 44px;
  height: 44px;
  display: none;
  place-items: center;
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  color: var(--text-2);
  flex: 0 0 auto;
}

.nav-toggle svg {
  width: 22px;
  height: 22px;
}

.nav-toggle .ic-x {
  display: none;
}

.app.nav-open .nav-toggle .ic-bars {
  display: none;
}

.app.nav-open .nav-toggle .ic-x {
  display: block;
}

.nav-backdrop {
  display: none;
}

/* ---- Dropdown menus (notifications + user) ---- */
.menu {
  position: relative;
  display: inline-flex;
}

.menu .dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + 12px);
  width: min(330px, calc(100vw - 24px));
  background: #fff;
  border: 1px solid var(--line-2);
  border-radius: 5px;
  box-shadow: var(--shadow-md);
  padding: 8px;
  z-index: 300;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px) scale(.98);
  transform-origin: top right;
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}

.menu.open .dropdown {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.menu .dropdown::before {
  content: "";
  position: absolute;
  top: -6px;
  right: 18px;
  width: 12px;
  height: 12px;
  background: #fff;
  border-left: 1px solid var(--line-2);
  border-top: 1px solid var(--line-2);
  transform: rotate(45deg);
  border-radius: 2px;
}

/* ---- Notification dropdown (redesigned) ---- */
.notif-dd {
  width: min(376px, calc(100vw - 24px));
  padding: 0;
  overflow: hidden;
}

.dd-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px 16px 12px;
  border-bottom: 1px solid var(--line-2);
}

.dd-head h4 {
  font-size: 15.5px;
}

.dd-badge {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  background: var(--red-grad);
  color: #fff;
  padding: 2px 9px;
  border-radius: var(--pill);
  box-shadow: 0 2px 7px rgba(240, 28, 36, .35);
}

.dd-clear {
  margin-left: auto;
  font-size: 12px;
  font-weight: 600;
  color: var(--red);
  transition: opacity .15s;
}

.dd-clear:hover {
  opacity: .65;
  text-decoration: underline;
}

.notif-dd:has(.noti-empty) .dd-clear {
  display: none;
}

.dd-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 368px;
  overflow-y: auto;
  padding: 8px;
}

.noti {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 12px 12px 16px;
  border-radius: 12px;
  position: relative;
  transition: background .15s;
}

.noti:hover {
  background: var(--red-soft-2);
}

/* unread: soft tint + left accent bar */
.noti.unread {
  background: color-mix(in srgb, var(--red) 7%, transparent);
}

.noti.unread::after {
  content: "";
  position: absolute;
  left: 0;
  top: 13px;
  bottom: 13px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--red-grad);
}

.noti-ic {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  flex: 0 0 40px;
  display: grid;
  place-items: center;
}

.noti-ic svg {
  width: 18px;
  height: 18px;
}

/* pastel icon chips */
.ni-red { background: var(--red-soft); color: var(--red); }
.ni-ink { background: #eceef4; color: #3a3730; }
.ni-soft { background: #fff1e3; color: #f97316; }

.noti-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
  position: relative;
  padding-right: 48px;
}

.noti-t {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text);
}

.noti-s {
  font-size: 12px;
  color: var(--text-2);
  line-height: 1.45;
  margin-top: 2px;
}

.noti-time {
  position: absolute;
  top: 0;
  right: 0;
  margin: 0;
  font-size: 10.5px;
  color: var(--muted);
  font-weight: 600;
  font-family: var(--mono);
}

.noti-empty {
  padding: 26px 16px;
  text-align: center;
  color: var(--muted, #8a8f98);
  font-size: 13px;
}

.dd-foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--red);
  padding: 13px;
  border-top: 1px solid var(--line-2);
  transition: background .15s;
}

.dd-foot:hover {
  background: var(--red-soft-2);
}

.user-dd {
  width: min(258px, calc(100vw - 24px));
}

.ud-head {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 10px 12px;
}

.ud-ava {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  flex: 0 0 42px;
  background: var(--red-grad);
  color: #fff;
  font-weight: 700;
  font-size: 16px;
  display: grid;
  place-items: center;
}

.ud-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
  text-align: left;
}

.ud-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}

.ud-mail {
  font-size: 11px;
  color: var(--muted);
  font-family: var(--mono);
  margin-top: 2px;
}

.ud-list {
  display: flex;
  flex-direction: column;
}

.ud-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 11px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  transition: background .15s, color .15s;
}

.ud-item svg {
  width: 17px;
  height: 17px;
  color: var(--text-2);
}

.ud-item:hover {
  background: var(--red-soft-2);
}

.ud-item:hover svg {
  color: var(--red);
}

.ud-sep {
  height: 1px;
  background: var(--line-2);
  margin: 6px 4px;
}

.ud-danger {
  color: var(--red);
}

.ud-danger svg {
  color: var(--red);
}

.ud-danger:hover {
  background: var(--red-soft);
}

button.profile-chip {
  cursor: pointer;
}

/* ---- Entrance + graph animations ---- */
html.js-anim .b-hero,
html.js-anim .b-ring,
html.js-anim .b-id,
html.js-anim .stat,
html.js-anim .section,
html.js-anim .course,
html.js-anim .xcard,
html.js-anim .post,
html.js-anim .chart-card,
html.js-anim .support {
  opacity: 0;
  transform: translateY(18px);
  will-change: opacity, transform;
}

html.js-anim .is-visible {
  opacity: 1 !important;
  transform: none !important;
  transition: opacity .6s cubic-bezier(.22, .61, .36, 1), transform .6s cubic-bezier(.22, .61, .36, 1);
}

html.js-anim .vchart .bar {
  transition: height 1s cubic-bezier(.5, 0, .1, 1), filter .15s;
}

html.js-anim .course .c-prog .bar i,
html.js-anim .idcard .feat .bar i {
  transition: width 1.1s cubic-bezier(.5, 0, .1, 1);
}

@property --rp {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 0%;
}

html.js-anim .ring {
  --rp: 0%;
  background: conic-gradient(var(--red) 0% var(--rp), #eceef2 var(--rp) 100%);
}

html.js-anim .ring.go {
  animation: ringFillP 1.2s cubic-bezier(.4, 0, .2, 1) forwards;
}

/* Unique name — a generic `ringFill` is also defined later (SVG stroke version)
   on other pages, and duplicate @keyframes names collide globally. */
@keyframes ringFillP {
  from {
    --rp: 0%;
  }

  to {
    --rp: 64%;
  }
}

@media (prefers-reduced-motion: reduce) {

  html.js-anim .b-hero,
  html.js-anim .b-ring,
  html.js-anim .b-id,
  html.js-anim .stat,
  html.js-anim .section,
  html.js-anim .course,
  html.js-anim .xcard,
  html.js-anim .post,
  html.js-anim .chart-card,
  html.js-anim .support {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ---- Mobile: hamburger + sidebar drawer ---- */
@media (max-width: 860px) {
  body {
    overflow-x: hidden;
  }

  .nav-toggle {
    display: grid;
  }

  .topbar .search {
    display: none;
  }

  .topbar {
    gap: 12px;
  }

  .topbar .theme-btn {
    margin-left: auto;
  }

  .sidebar {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 272px;
    max-width: 84vw;
    transform: translateX(-100%);
    transition: transform .3s cubic-bezier(.4, 0, .2, 1);
    z-index: 1000;
    box-shadow: 22px 0 60px rgba(20, 15, 10, .22);
  }

  .app.nav-open .sidebar {
    transform: translateX(0);
    /* Reserve a header zone so the logo + first nav links clear the floating × close
       button (which lives at the topbar's position and paints over the drawer). */
    padding-top: 76px;
  }

  /* Pin the × close button to a clean top-left slot, above the drawer, when open —
     instead of leaving it at the hamburger's mid-topbar spot where it crowded the
     brand and the first menu items. */
  .app.nav-open .nav-toggle {
    position: fixed;
    top: 16px;
    left: 16px;
    z-index: 1002;
  }

  .nav-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(20, 15, 10, .5);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease, visibility .3s;
    z-index: 990;
  }

  .app.nav-open .nav-backdrop {
    opacity: 1;
    visibility: visible;
  }
}

@media (max-width: 520px) {
  .profile-chip .who {
    display: none;
  }
 .bento .hero{
  padding:20px !important;
 }
 .bento .cta-row{gap: 8px;}
 .bento .cta-row .btn{padding:12px 10px}
  .topbar .greeting h1 {
    font-size: 21px;
  }
}

/* ============================================================
   v4-SCOPE — ported "Course Performance" (line chart) and
   "Explore More Courses" (dark cards) from index.html / styles-v4.
   Scoped so the exact v4 look applies without touching v3.
   ============================================================ */
.v4-scope {
  --card: #fffdf8;
  --cream: #f2ebdc;
  --line: #ece3d2;
  --line-2: #e3d8c4;
  --ink: #16130d;
  --shadow-sm: 0 1px 2px rgba(70, 55, 25, .05), 0 2px 8px rgba(70, 55, 25, .05);
  --shadow-md: 0 8px 22px rgba(70, 55, 25, .09), 0 18px 40px rgba(70, 55, 25, .07);
}

/* card shell for the perf card */
.v4-scope .card {
  background-color: var(--card);
  border: none;
  border-radius: 5px;
  padding: 22px;
  box-shadow: var(--shadow-sm);
  background-image: radial-gradient(170px 150px at 100% 0%, rgba(241, 84, 90, .06), transparent 60%);
}

/* ---- Course Performance (line chart) ---- */
.v4-scope .c-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.v4-scope .c-head h3 {
  font-size: 16px;
  font-family: var(--display);
  font-weight: 600;
}

.v4-scope .exp {
  margin-left: auto;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid var(--line-2);
  display: grid;
  place-items: center;
  color: var(--text-2);
  background: none;
}

.v4-scope .exp svg {
  width: 15px;
  height: 15px;
}

.v4-scope .exp:hover {
  background: var(--cream);
  color: var(--text);
}

.v4-scope .perf .legend {
  display: flex;
  gap: 14px;
  margin-left: auto;
}

.v4-scope .perf .legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-2);
  font-weight: 500;
}

.v4-scope .perf .legend .ld {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.v4-scope .ld.grey {
  background: #c9bda5;
}

.v4-scope .ld.red {
  background: var(--red);
}

.v4-scope .year {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 600;
  background: var(--cream);
  padding: 7px 12px;
  border-radius: 999px;
  color: var(--text);
}

.v4-scope .year svg {
  width: 13px;
  height: 13px;
}

.v4-scope .perf .exp {
  margin-left: 0;
}

.v4-scope .chart {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 10px;
}

.v4-scope .yax {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 180px;
  text-align: right;
}

.v4-scope .yax span {
  font-size: 10px;
  color: var(--muted);
  font-family: var(--mono);
  transform: translateY(-4px);
}

.v4-scope .plot {
  position: relative;
  height: 180px;
}

.v4-scope .lines {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.v4-scope .lines .grid {
  stroke: var(--line);
  stroke-width: 1;
}

.v4-scope .lines polyline {
  fill: none;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.v4-scope .ln-grey {
  stroke: #cdc0a8;
  stroke-dasharray: 5 6;
}

.v4-scope .ln-red {
  stroke: var(--red);
}

.v4-scope .perf .tip {
  position: absolute;
  transform: translate(-50%, -130%);
  background: var(--ink);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  font-family: var(--mono);
  padding: 5px 9px;
  border-radius: 8px;
  white-space: nowrap;
}

.v4-scope .perf .tip::after {
  content: "";
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 8px;
  height: 8px;
  background: var(--ink);
  border-radius: 1px;
}

.v4-scope .tip-line {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1.5px;
  background: var(--line-2);
}

.v4-scope .tip-dot {
  position: absolute;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--red);
  border: 2.5px solid var(--card);
  transform: translate(-50%, -50%);
}

.v4-scope .xax {
  display: flex;
  justify-content: space-between;
  margin: 12px 0 0 40px;
}

.v4-scope .xax span {
  font-size: 11px;
  color: var(--text-2);
  font-weight: 500;
}

.v4-scope .xax span.on {
  color: var(--red);
  font-weight: 700;
}

/* ---- Explore More Courses (dark image cards) ---- */
.v4-scope .explore-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.v4-scope .xcard {
  position: relative;
  height: 392px;
  background-color: #19150f;
  border-radius: 5px;
  overflow: hidden;
  box-shadow: var(--shadow-md);
  transition: transform .15s, box-shadow .15s;
  border: none;
}

.v4-scope .xcard:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.v4-scope .x-media {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.v4-scope .xm-1 {
  background: linear-gradient(150deg, #3a1d1f, #140f0c);
}

.v4-scope .xm-2 {
  background: linear-gradient(150deg, #2b2620, #141009);
}

.v4-scope .xm-3 {
  background: linear-gradient(150deg, #222a31, #10110c);
}

.v4-scope .x-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.v4-scope .x-media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to top, rgba(11, 8, 5, .95) 0%, rgba(11, 8, 5, .5) 42%, rgba(11, 8, 5, .05) 72%, transparent 100%);
}

.v4-scope .x-badge2 {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  background: rgba(255, 255, 255, .92);
  color: var(--text);
  font-size: 11px;
  font-weight: 700;
  padding: 5px 11px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: var(--shadow-sm);
}

.v4-scope .x-badge2 i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--red);
}

.v4-scope .x-rate2 {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  background: rgba(20, 15, 12, .5);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: 999px;
}

.v4-scope .x-info {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 20px 18px;
  color: #fff;
}

.v4-scope .x-name {
  font-family: var(--display);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.3;
  color: #fff;
}

.v4-scope .x-desc {
  font-size: 12.5px;
  line-height: 1.5;
  color: rgba(255, 255, 255, .82);
  margin-top: 7px;
  text-wrap: pretty;
}

.v4-scope .x-foot2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 15px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, .2);
}

.v4-scope .x-meta2 {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, .88);
}

.v4-scope .x-meta2 svg {
  width: 15px;
  height: 15px;
  color: #ff8f8b;
}

.v4-scope .x-go2 {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--red-grad);
  display: grid;
  place-items: center;
  color: #fff;
  box-shadow: 0 6px 16px rgba(240, 28, 36, .3);
  transition: transform .15s;
  flex: 0 0 40px;
}

.v4-scope .xcard:hover .x-go2 {
  transform: translateX(3px);
}

.v4-scope .x-go2 svg {
  width: 18px;
  height: 18px;
}

@media (max-width: 1180px) {
  .v4-scope .explore-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 760px) {
  .v4-scope .explore-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   THEME TOGGLE BUTTON + DARK MODE
   ============================================================ */
.theme-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--card);
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  color: var(--text-2);
  box-shadow: var(--shadow-sm);
  flex: 0 0 auto;
  transition: color .15s, border-color .15s;
}

.theme-btn:hover {
  color: var(--red);
  border-color: var(--red-soft);
}

.theme-btn svg {
  width: 20px;
  height: 20px;
}

.theme-btn .ic-sun {
  display: none;
}

.theme-btn .ic-moon {
  display: block;
}

html[data-theme="dark"] .theme-btn .ic-moon {
  display: none;
}

html[data-theme="dark"] .theme-btn .ic-sun {
  display: block;
}

/* smooth cross-fade on theme switch */
body,
.sidebar,
.card,
.hero,
.stat,
.course,
.post,
.xcard,
.ring-card,
.search,
.icon-btn,
.profile-chip,
.theme-btn,
.composer,
.nav-item,
.feed-card {
  transition: background-color .35s ease, color .35s ease, border-color .35s ease;
}

/* ---------- Dark token overrides ---------- */
html[data-theme="dark"] {
  --red: #d23a40;
  --red-700: #b32d33;
  --red-grad: linear-gradient(180deg, #b8343a 0%, #8f2127 100%);
  --shadow-red: 0 8px 22px rgba(0, 0, 0, .45);
  --red-soft: #3a1c1e;
  --red-soft-2: #281714;
  --ink: #26201a;
  --ink-2: #2e271f;
  --ink-3: #362e24;
  --bg: #0e0b08;
  --card: #1b1813;
  --text: #ffffff;
  --text-2: #cccccc;
  --muted: #999999;
  --line: #2b251d;
  --line-2: #39311f;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .35), 0 2px 8px rgba(0, 0, 0, .30);
  --shadow-md: 0 8px 22px rgba(0, 0, 0, .45), 0 18px 40px rgba(0, 0, 0, .35);
  --userDropdown: #ffffff;
  --topbar-bg: #0e0b08;
  --stickyheader-bg: #0e0b08ee;
}

html[data-theme="dark"] body {
  background: #0e0b08;
}

/* logo in dark mode */
html[data-theme="dark"] .brand img {
  filter: brightness(0) invert(1);
}

/* sidebar / nav */
html[data-theme="dark"] .nav-item:hover {
  background: var(--red-soft-2);
  color: var(--red);
}

/* progress ring unfilled track */
html[data-theme="dark"] .ring {
  background: conic-gradient(var(--red) 0% var(--rp, 0%), #2e2820 var(--rp, 0%) 100%);
}

/* hero tag border */
html[data-theme="dark"] .hero .tag {
  border-color: rgba(255, 90, 92, .30);
}

/* course tag chips */
html[data-theme="dark"] .course .c-tags span {
  background: #241f18;
}

/* composer + community posts */
html[data-theme="dark"] .composer {
  background: #221d16;
}

html[data-theme="dark"] .composer .tools button:hover {
  background: rgba(255, 255, 255, .07);
}

html[data-theme="dark"] .post .ph .tag.tip {
  color: #8ab4ff;
  background: #1b2740;
}

html[data-theme="dark"] .post .media.m-red {
  background: linear-gradient(135deg, #2a1518, #3a1c1f);
}

html[data-theme="dark"] .post .media.m-blue {
  background: linear-gradient(135deg, #161f33, #1d2742);
}

html[data-theme="dark"] .post .media .chip {
  background: #241f18;
  color: var(--text);
}

html[data-theme="dark"] .post .media .dots {
  background-image: radial-gradient(rgba(255, 255, 255, .05) 1.4px, transparent 1.4px);
}

html[data-theme="dark"] .post .pf .act {
  background: #221d16;
}

html[data-theme="dark"] .post .pf .act:hover {
  border-color: var(--red-soft);
  background: var(--red-soft-2);
}

/* dropdown menus (the add-on panels were solid white) */
html[data-theme="dark"] .menu .dropdown {
  background: var(--card);
  border-color: var(--line-2);
}

html[data-theme="dark"] .menu .dropdown::before {
  background: var(--card);
  border-color: var(--line-2);
}

html[data-theme="dark"] .ni-red { background: #3a1a1c; color: #ff7b7e; }
html[data-theme="dark"] .ni-ink { background: #262019; color: #d8cfc2; }
html[data-theme="dark"] .ni-soft { background: #2e1d12; color: #fb923c; }

/* faint separation for the dark feature cards on a dark page */
html[data-theme="dark"] .stat.dark,
html[data-theme="dark"] .idcard,
html[data-theme="dark"] .support {
  border: 1px solid rgba(255, 255, 255, .05);
}

/* ---------- v4-scope sections (Course Performance + Explore) ---------- */
html[data-theme="dark"] .v4-scope {
  --card: #1b1813;
  --cream: #241f18;
  --line: #2b251d;
  --line-2: #39311f;
  --ink: #322b22;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .35), 0 2px 8px rgba(0, 0, 0, .30);
  --shadow-md: 0 8px 22px rgba(0, 0, 0, .45), 0 18px 40px rgba(0, 0, 0, .35);
}

/* Progress ring: make the center hole opaque so the red arc doesn't
   bleed through the semi-transparent --card (light mode only). */
.ring::before {
  background: #fffdfd;
}

html[data-theme="dark"] .ring::before {
  background: var(--card);
}

/* Explore badge: dark glassy pill in dark mode (was a white pill with
   invisible light text). Matches the rating chip. */
html[data-theme="dark"] .x-badge2 {
  background: rgba(20, 15, 12, .55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #fff;
  box-shadow: none;
  border: 1px solid rgba(255, 255, 255, .12);
}

html.side-collapsed .nav-item.active:hover svg {
  color: #fff;
}

html.side-collapsed .nav-item.active svg {
  color: #fff;
}

/* ---------- Footer responsive ---------- */
/* 1240px, not 980px: the footer sits in .content, which is narrower than
   the viewport by the sidebar's ~256px on every AppShell page. Using a
   raw viewport threshold left the 5-column row overflowing its container
   (and the page) from ~981px up to ~1240px. */
@media (max-width: 1240px) {
  .footer {
    padding: 8px 30px 26px;
  }

  .footer .frow {
    grid-template-columns: 1fr 1fr;
    gap: 30px 28px;
  }
}

@media (max-width: 560px) {
  .footer {
    padding: 8px 18px 24px;
  }

  .footer .frow {
    grid-template-columns: 1fr;
    gap: 26px;
  }

  .footer .brand-f p {
    max-width: none;
  }

  .footer .fbot {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
}

/* ---------- Mobile overflow fixes ---------- */
@media (max-width: 860px) {

  /* Top bar: tighten and drop the standalone messages icon so it fits */
  .topbar {
    gap: 8px;
  }

  .topbar .greeting {
    order: 10;
    flex: 1 0 100%;
    min-width: 0;
    margin-top: 6px;
  }

  .topbar .greeting h1 {
    font-size: 20px;
  }

  .topbar .greeting p {
    font-size: 12px;
  }

  .topbar>.icon-btn {
    display: none;
  }

  /* Course Performance + support: let the single column shrink to the viewport */
  .split {
    grid-template-columns: minmax(0, 1fr);
  }

  .side-stack,
  .support,
  .v4-scope {
    min-width: 0;
  }

  .v4-scope .card.perf,
  .v4-scope .chart,
  .v4-scope .plot,
  .v4-scope .lines {
    min-width: 0;
  }

  .v4-scope .c-head {
    flex-wrap: wrap;
  }

  .v4-scope .xax {
    margin-left: 30px;
  }

  /* Composer: let the input shrink so the Post button stays in view */
  .composer input {
    min-width: 0;
  }
}

@media (max-width: 860px) {
  .sec-head {
    flex-wrap: wrap;
    row-gap: 6px;
  }
}

/* ============================================================
   Search dropdown + year selector + chart expand
   ============================================================ */
.search {
  position: relative;
}

.search-results {
  position: absolute;
  top: calc(100% + 8px);
  left: auto;
  right: 0;
  width: 440px;
  max-width: calc(100vw - 40px);
  background: var(--card);
  border: 1px solid var(--line-2);
  border-radius: 5px;
  box-shadow: var(--shadow-md);
  padding: 6px;
  z-index: 400;
  max-height: 340px;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s;
}

.search.open .search-results {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.sr-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 10px;
  border-radius: 9px;
  cursor: pointer;
}

.sr-item:hover,
.sr-item.active {
  background: var(--red-soft-2);
}

.sr-ic {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  flex: 0 0 32px;
  display: grid;
  place-items: center;
  background: var(--red-soft);
  color: var(--red);
}

.sr-ic svg {
  width: 16px;
  height: 16px;
}

.sr-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.sr-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sr-name b {
  color: var(--red);
  font-weight: 700;
}

.sr-type {
  font-size: 11px;
  color: var(--muted);
  margin-top: 1px;
}

.sr-empty {
  padding: 16px 12px;
  font-size: 13px;
  color: var(--muted);
  text-align: center;
}

/* Year selector */
.year-menu {
  position: relative;
  display: inline-flex;
}

.year-menu .year {
  cursor: pointer;
}

.year-dd {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: var(--card);
  border: 1px solid var(--line-2);
  border-radius: 10px;
  box-shadow: var(--shadow-md);
  padding: 5px;
  min-width: 116px;
  z-index: 400;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s;
}

.year-menu.open .year-dd {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.year-menu.open .year svg {
  transform: rotate(180deg);
}

.year-dd a {
  display: block;
  padding: 8px 12px;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.year-dd a:hover {
  background: var(--red-soft-2);
}

.year-dd a.sel {
  background: var(--red-soft);
  color: var(--red);
}

/* Chart expand */
.v4-scope .perf .chart,
.v4-scope .perf .yax,
.v4-scope .perf .plot {
  transition: height .25s ease;
}

.v4-scope .perf.chart-expanded .yax,
.v4-scope .perf.chart-expanded .plot {
  height: 320px;
}

/* Force search/year dropdowns visible when open (override any stuck state) */
.search.open .search-results {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

.year-menu.open .year-dd {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

/* ====================================================================
   Sidebar collapse is a DESKTOP-only feature.
   On mobile the sidebar is an off-canvas drawer, so hide the collapse
   button and neutralize every `side-collapsed` rule (the class can also
   linger in localStorage from a desktop session) so the drawer always
   opens at full width with labels — never the icons-only strip.
   ==================================================================== */
@media (max-width: 860px) {
  .side-toggle {
    display: none !important;
  }

  html.side-collapsed .sidebar {
    width: 272px;
    max-width: 84vw;
    flex: 0 0 auto;
    padding: 26px 18px 22px;
  }

  html.side-collapsed .brand {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0;
  }

  html.side-collapsed .brand img {
    width: auto;
    height: auto;
    opacity: 1;
    position: static;
    pointer-events: auto;
  }

  html.side-collapsed .nav-group {
    width: auto;
  }

  html.side-collapsed .nav-item {
    width: auto;
    height: auto;
    margin: 0;
    padding: 11px 14px;
    justify-content: flex-start;
    gap: 14px;
    font-size: 14px;
    color: var(--text-2);
    overflow: visible;
  }

  html.side-collapsed .nav-item svg {
    flex: 0 0 20px;
  }

  html.side-collapsed .nav-item.active,
  html.side-collapsed .nav-item.active svg {
    color: #fff;
  }

  html.side-collapsed .nav-label {
    opacity: 1;
    height: auto;
    padding: 0;
    margin: 0;
    overflow: visible;
  }

  html.side-collapsed .nav-badge {
    display: inline-flex;
  }

  html.side-collapsed .sidebar-foot {
    opacity: 1;
    max-height: none;
    padding: revert;
    margin: revert;
    pointer-events: auto;
    overflow: visible;
  }

  /* No hover tooltips inside the full-width mobile drawer */
  html.side-collapsed .nav-item[title]:hover::after,
  html.side-collapsed .nav-item[title]:hover::before {
    content: none;
  }
}

/* ====================================================================
   Scoreboard — Student Points bar chart + Leaderboard standings
   Light panels using the dashboard's own colour tokens (theme-aware).
   ==================================================================== */
.scoreboard {
  display: grid;
  gap: 24px;
}

.sb-panel {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 22px 22px 18px;
  box-shadow: 0 12px 30px rgba(20, 15, 10, .06);
  color: var(--text);
  min-width: 0;
}

/* Make the two boxes in the Course Performance row exactly equal height:
   stretch each inner card to fill its (equal-height) grid column. */
.split > .v4-scope {
  display: flex;
  flex-direction: column;
}

.split > .v4-scope > .card.perf {
  height: 310px;
  display: flex;
  flex-direction: column;
}

/* fixed chart height so the x-axis / bottom can never be clipped */
.split > .v4-scope > .card.perf .chart { margin-bottom: 8px; }
.split > .v4-scope > .card.perf .yax,
.split > .v4-scope > .card.perf .plot { height: 188px; }

.side-stack .sb-panel-split {
  height: 400px;
  display: flex;
  flex-direction: column;
}

.sb-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.sb-eyebrow {
  display: block;
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
}

.sb-panel-head h3 {
  font-size: 18px;
  color: var(--text);
  margin-top: 6px;
}

.sb-panel-head p {
  font-size: 12.5px;
  color: var(--muted);
  margin-top: 4px;
}

/* ---- period (date) selector ---- */
.sb-period {
  position: relative;
  flex: 0 0 auto;
}

.sb-period-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 600;
  font-family: inherit;
  color: var(--text);
  background: var(--red-soft-2);
  border: none;
  padding: 7px 12px;
  border-radius: 999px;
  cursor: pointer;
}

.sb-period-btn svg {
  width: 13px;
  height: 13px;
  transition: transform .2s;
}

.sb-period.open .sb-period-btn svg {
  transform: rotate(180deg);
}

.sb-period-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 150px;
  max-height: 288px;
  overflow-y: auto;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 5px;
  box-shadow: 0 12px 30px rgba(20, 15, 10, .12);
  padding: 6px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s;
  z-index: 30;
}

.sb-period-grp {
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
  padding: 8px 12px 4px;
}
.sb-period.open .sb-period-menu {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.sb-period-menu a {
  display: block;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 13px;
  color: var(--text);
  text-decoration: none;
}

.sb-period-menu a:hover {
  background: var(--red-soft-2);
}

.sb-period-menu a.sel {
  color: var(--red);
  font-weight: 700;
}

/* ---- horizontal bar chart ---- */
.sb-bars {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 13px;
}

.sb-bar-row {
  display: grid;
  grid-template-columns: 26px minmax(86px, 150px) 1fr auto;
  align-items: center;
  gap: 12px;
}

.sb-bar-rank {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 7px;
  background: var(--red-soft-2);
  color: var(--red);
  font-weight: 700;
  font-size: 12px;
}

.sb-bar-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sb-bar-track {
  height: 12px;
  border-radius: 999px;
  background: var(--red-soft-2);
  overflow: hidden;
}

.sb-bar-fill {
  display: block;
  height: 100%;
  width: 0;
  min-width: 6px;
  border-radius: 999px;
  background: var(--red-grad);
}

.sb-bar-val {
  font-size: 13px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  min-width: 34px;
  text-align: right;
}

/* medals tint the rank badge of the top three */
.sb-bar-row.top.gold .sb-bar-rank {
  background: linear-gradient(135deg, #ffd86b, #f0a500);
  color: #3a2a00;
}

.sb-bar-row.top.silver .sb-bar-rank {
  background: linear-gradient(135deg, #e7e9ee, #b6bac4);
  color: #2a2d33;
}

.sb-bar-row.top.bronze .sb-bar-rank {
  background: linear-gradient(135deg, #e6a36a, #b9712f);
  color: #2a1600;
}

/* ---- leaderboard table ---- */
.lb-panel .sb-panel-head {
  align-items: center;
}

.lb-count {
  font-size: 12.5px;
  color: var(--muted);
  font-weight: 600;
}

.lb-scroll {
  overflow-x: auto;
}

.lb-table {
  width: 100%;
  border-collapse: collapse;
}

.lb-table thead th {
  text-align: left;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
  padding: 0 18px 12px;
}

.lb-table thead th.lb-pts,
.lb-table td.lb-pts {
  text-align: right;
}

.lb-table tbody td {
  padding: 13px 18px;
  border-top: 1px solid var(--line);
  font-size: 14px;
  color: var(--text);
}

.lb-rank {
  width: 70px;
}

.lb-pos {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: var(--red-soft-2);
  color: var(--red);
  font-weight: 700;
  font-size: 13px;
}

.lb-user {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-weight: 600;
}

.lb-udot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  flex: 0 0 11px;
  box-shadow: 0 0 0 3px rgba(0, 0, 0, .05);
}

.lb-pts {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

.lb-row:hover td {
  background: var(--red-soft-2);
}

/* medals for the top three */
.lb-top.gold .lb-pos {
  background: linear-gradient(135deg, #ffd86b, #f0a500);
  color: #3a2a00;
}

.lb-top.silver .lb-pos {
  background: linear-gradient(135deg, #e7e9ee, #b6bac4);
  color: #2a2d33;
}

.lb-top.bronze .lb-pos {
  background: linear-gradient(135deg, #e6a36a, #b9712f);
  color: #2a1600;
}

/* when the split stacks (≤1100px) the bar panel is full width again */
@media (max-width: 1100px) {
  .side-stack .sb-panel-split {
    height: auto;
  }
}

@media (max-width: 560px) {
  .sb-panel {
    padding: 18px 14px 14px;
  }

  .sb-bar-row {
    grid-template-columns: 24px minmax(64px, 110px) 1fr auto;
    gap: 9px;
  }

  .lb-table thead th,
  .lb-table tbody td {
    padding-left: 12px;
    padding-right: 12px;
  }
}
/* ====================================================================
   Score Progression — light multi-line chart + legend + Yearly/Monthly
   ==================================================================== */
/* line-chart (score progression) */
.sb-toggle {
  display: inline-flex;
  background: var(--red-soft-2);
  border-radius: 999px;
  padding: 3px;
  flex: 0 0 auto;
}

.sb-tg {
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  padding: 5px 12px;
  border-radius: 999px;
  cursor: pointer;
}

.sb-tg.sel {
  background: var(--card);
  color: var(--red);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
}

.sb-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 6px;
  margin-bottom: 10px;
}

.sb-leg {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: var(--muted);
  cursor: pointer;
  user-select: none;
  padding: 3px 7px;
  border: none;
  background: transparent;
  border-radius: 7px;
  font-family: inherit;
  transition: background .15s, opacity .15s;
}

.sb-leg:hover {
  background: var(--red-soft-2);
}

.sb-leg.off {
  opacity: .4;
}

.sb-sw {
  width: 18px;
  height: 8px;
  border-radius: 3px;
  flex: 0 0 18px;
}

.sb-chart {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
  min-height: 0;
}

.sb-chart svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}

.sb-grid {
  stroke: var(--line);
  stroke-width: 1;
}

.sb-grid-v {
  stroke-dasharray: 3 5;
}

.sb-axis {
  fill: var(--muted);
  font-size: 11px;
  font-family: inherit;
}

.sb-axis-y {
  text-anchor: end;
}

.sb-axis-x {
  text-anchor: middle;
}

.sb-line {
  fill: none;
  stroke-width: 2.4;
  stroke-linejoin: round;
  stroke-linecap: round;
  pointer-events: none;
}

.sb-hit {
  fill: none;
  stroke: transparent;
  stroke-width: 14;
  pointer-events: stroke;
  cursor: pointer;
}

.sb-series {
  transition: opacity .2s ease;
}

.sb-series.dim {
  opacity: .12;
}
/* top-10 leaderboard list */
.sb-search {
  display: flex;
  align-items: center;
  gap: 9px;
  background: var(--red-soft-2);
  border-radius: 999px;
  padding: 8px 14px;
  margin-bottom: 12px;
}

.sb-search svg {
  width: 16px;
  height: 16px;
  color: var(--muted);
  flex: 0 0 16px;
}

.sb-search input {
  border: none;
  outline: none;
  background: none;
  flex: 1;
  min-width: 0;
  font-family: inherit;
  font-size: 13px;
  color: var(--text);
}

.sb-search input::placeholder {
  color: var(--muted);
}

.sb-bars {
  flex: 1;
  min-height: 0;
  justify-content: flex-start;
  gap: 9px;
  overflow-y: auto;
  padding-right: 4px;
}

.sb-bars::-webkit-scrollbar {
  width: 6px;
}

.sb-bars::-webkit-scrollbar-thumb {
  background: var(--line-2, #e3d8c4);
  border-radius: 3px;
}

.sb-empty {
  margin: auto;
  color: var(--muted);
  font-size: 13px;
  text-align: center;
}

.sb-foot {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  color: var(--muted);
  font-weight: 600;
}
/* per-student monthly detail */
.sb-bar-row { cursor: pointer; border-radius: 8px; transition: background .12s; }
.sb-bar-row:hover { background: var(--red-soft-2); }

.sb-panel-split.sb-detail .sb-search,
.sb-panel-split.sb-detail .sb-toggle { display: none; }

.sb-bars.detail { overflow: visible; gap: 0; justify-content: flex-start; }

.sb-back {
  align-self: flex-start;
  border: none;
  background: none;
  color: var(--red);
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  padding: 0;
  font-family: inherit;
  margin-bottom: 10px;
}

.sb-d-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.sb-d-name { font-size: 16px; font-weight: 700; color: var(--text); }
.sb-d-rank { font-size: 12.5px; color: var(--muted); font-weight: 600; }

.sb-d-best { font-size: 12.5px; color: var(--muted); margin: 5px 0 12px; }
.sb-d-best b { color: var(--red); }

.sb-mbars {
  flex: 1;
  display: flex;
  align-items: flex-end;
  gap: 5px;
  min-height: 0;
}

.sb-mcol {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
}

.sb-marea {
  flex: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
}

.sb-mval {
  font-size: 10px;
  font-weight: 800;
  color: var(--red);
  margin-bottom: 4px;
  font-variant-numeric: tabular-nums;
}

.sb-mbar {
  width: 72%;
  max-width: 24px;
  height: 0;
  border-radius: 5px 5px 0 0;
  background: var(--red-soft);
}

.sb-mcol.peak .sb-mbar { background: var(--red-grad); }

.sb-mlabel { font-size: 10px; color: var(--muted); margin-top: 6px; }
.sb-mcol.peak .sb-mlabel { color: var(--red); font-weight: 700; }
/* reference dark GRAPH + RANKS module */
.gboard { margin-bottom: 26px; }

.gpanel {
  background: #1c1c1e;
  border: 1px solid #2a2a2c;
  border-radius: 5px;
  padding: 22px 24px;
  color: #e8e8ea;
}

.gpanel-head {
  font-size: 13px;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: #9a9a9e;
  font-weight: 700;
  margin-bottom: 16px;
}

.ranks-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ranks-filter {
  width: 40px;
  height: 34px;
  border-radius: 9px;
  background: #2a2a2c;
  border: 1px solid #3a3a3c;
  color: #c2c2c6;
  display: grid;
  place-items: center;
  cursor: pointer;
}

.ranks-filter svg { width: 18px; height: 18px; }
.ranks-filter:hover { background: #333335; }

/* legend */
.glegend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin-bottom: 16px;
}

.g-leg {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: #e8e8ea;
  background: none;
  border: none;
  font-family: inherit;
  cursor: pointer;
  padding: 2px 0;
  transition: opacity .15s;
}

.g-leg.off { opacity: .32; }
.g-sw { width: 34px; height: 14px; border-radius: 4px; flex: 0 0 34px; }

/* chart */
.gchart { width: 100%; }
.gchart svg { width: 100%; height: auto; display: block; overflow: visible; }
.g-grid { stroke: #333336; stroke-width: 1; }
.g-axis { fill: #87878c; font-size: 11px; font-family: inherit; }
.g-axis-y { text-anchor: end; }
.g-axis-x { text-anchor: middle; }
.g-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; pointer-events: none; }
.g-dot { pointer-events: none; }
.g-hit { fill: none; stroke: transparent; stroke-width: 12; pointer-events: stroke; cursor: pointer; }
.g-series { transition: opacity .2s ease; }
.g-series.dim { opacity: .1; }

/* ranks table */
.ranks-scroll { overflow-x: auto; }
.ranks-table { width: 100%; border-collapse: collapse; }

.ranks-table thead th {
  text-align: left;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  padding: 16px 20px;
  background: #2b2b2d;
}

.ranks-table thead th:first-child { border-radius: 8px 0 0 8px; }
.ranks-table thead th:last-child { border-radius: 0 8px 8px 0; }
.ranks-table thead th.r-pts { text-align: right; }

.ranks-table td {
  padding: 17px 20px;
  border-bottom: 1px solid #2a2a2c;
  font-size: 15px;
  color: #e3e3e6;
}

.ranks-table tbody tr:last-child td { border-bottom: none; }
.ranks-table tbody tr:hover td { background: #232325; }

.r-rank { width: 130px; color: #cfcfd3; }
.r-pts { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
/* scoreboard v2 (light full-width) */
.sboard { margin-bottom: 26px; }

.sb2-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 24px 26px;
  box-shadow: 0 12px 30px rgba(20, 15, 10, .06);
}

.sb2-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}

.sb2-eyebrow {
  display: block;
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
}

.sb2-head h3 { font-size: 19px; color: var(--text); margin-top: 6px; }
.sb2-head p { font-size: 13px; color: var(--muted); margin-top: 4px; }

.sb2-body {
  display: grid;
  grid-template-columns: 1.7fr 1fr;
  gap: 28px;
  align-items: start;
}

.sb2-graph { min-width: 0; display: flex; flex-direction: column; }

.sb2-legend { display: flex; flex-wrap: wrap; gap: 4px 6px; margin-bottom: 12px; }

.g2-leg {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: var(--text-2, #5b5b5b);
  cursor: pointer;
  user-select: none;
  padding: 3px 8px;
  border: none;
  background: transparent;
  border-radius: 7px;
  font-family: inherit;
  transition: background .15s, opacity .15s;
}

.g2-leg:hover { background: var(--red-soft-2); }
.g2-leg.off { opacity: .4; }
.g2-sw { width: 20px; height: 8px; border-radius: 3px; flex: 0 0 20px; }

.sb2-chart { width: 100%; position: relative; }
.sb2-chart svg { width: 100%; height: auto; display: block; overflow: visible; }

.g2-grid { stroke: var(--line); stroke-width: 1; }
.g2-grid-v { stroke-dasharray: 3 5; }
.g2-axis { fill: var(--muted); font-size: 11px; font-family: inherit; }
.g2-axis-y { text-anchor: end; }
.g2-axis-x { text-anchor: middle; }
.g2-line { fill: none; stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; pointer-events: none; }
.g2-hit { fill: none; stroke: transparent; stroke-width: 13; pointer-events: stroke; cursor: pointer; }
.g2-series { transition: opacity .2s ease; }
.g2-series.dim { opacity: .12; }

/* data-point dots + hover tooltip */
.g2-dot { fill: var(--card); stroke-width: 1.8; cursor: pointer; transform-box: fill-box; transform-origin: center; transition: transform .12s ease; }
.g2-dot:hover { transform: scale(1.7); }
[data-theme="dark"] .g2-dot { fill: #1f1b14; }
.g2-tip {
  position: absolute; z-index: 6; left: 0; top: 0; pointer-events: none;
  transform: translate(-50%, calc(-100% - 10px));
  background: var(--ink); color: #fff; border-radius: 8px; padding: 8px 11px;
  font-family: var(--sans); font-size: 12px; line-height: 1.3; white-space: nowrap;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .28); opacity: 0; transition: opacity .12s ease;
}
.g2-tip::after { content: ""; position: absolute; left: 50%; top: 100%; transform: translateX(-50%); border: 6px solid transparent; border-top-color: var(--ink); }
.g2-tip.show { opacity: 1; }
.g2-tip .g2-tip-name { display: flex; align-items: center; gap: 7px; font-weight: 700; }
.g2-tip .g2-tip-name i { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 9px; }
.g2-tip .g2-tip-meta { margin-top: 3px; color: rgba(255, 255, 255, .72); font-size: 11.5px; font-weight: 600; }
.g2-tip .g2-tip-meta b { color: #fff; font-weight: 800; }

/* ranks list */
.sb2-ranks {
  min-width: 0;
  border-left: 1px solid var(--line);
  padding-left: 24px;
  display: flex;
  flex-direction: column;
}

.sb2-ranks-head {
  display: grid;
  grid-template-columns: 34px 1fr auto;
  gap: 10px;
  padding: 0 8px 10px;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
  border-bottom: 1px solid var(--line);
}

.rh-pts { text-align: right; }
.sb2-ranks-list { max-height: 300px; display: flex; flex-direction: column; overflow-y: auto; }

.rk-row {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 8px;
  border-bottom: 1px solid var(--line);
  font-size: 13.5px;
  color: var(--text);
}

.rk-row:last-child { border-bottom: none; }
.rk-row:hover { background: var(--red-soft-2); border-radius: 8px; }

.rk-rank {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: var(--red-soft-2);
  color: var(--red);
  font-weight: 700;
  font-size: 12px;
}

.rk-user {
  display: flex;
  align-items: center;
  gap: 9px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rk-dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 10px; }
.rk-pts { font-weight: 800; font-variant-numeric: tabular-nums; color: var(--text); }

.rk-row.top.gold .rk-rank { background: linear-gradient(135deg, #ffd86b, #f0a500); color: #3a2a00; }
.rk-row.top.silver .rk-rank { background: linear-gradient(135deg, #e7e9ee, #b6bac4); color: #2a2d33; }
.rk-row.top.bronze .rk-rank { background: linear-gradient(135deg, #e6a36a, #b9712f); color: #2a1600; }

@media (max-width: 860px) {
  .sb2-body { grid-template-columns: 1fr; gap: 20px; height: auto; }
  .sb2-graph { height: 300px; }
  .sb2-ranks { height: auto; max-height: 330px; border-left: none; border-top: 1px solid var(--line); padding-left: 0; padding-top: 16px; }
}
/* course performance + activity history */
.perf-split { grid-template-columns: 1.9fr 1fr; align-items: stretch; }

/* Course Performance + Recent Activity + Score Progression: stack on
   tablet/phone (perf-split was locked to two columns at every width; the
   scoreboard only stacked below 860px — align both to 960px). */
@media (max-width: 960px) {
  .perf-split { grid-template-columns: 1fr; }
  .perf-split .perf-hist { height: auto; min-height: 260px; }
  .perf-split > .v4-scope > .card.perf,
  .perf-split .card.perf { height: auto; }

  .sb2-body { grid-template-columns: 1fr; gap: 20px; height: auto; }
  .sb2-graph { height: auto; }
  .sb2-ranks { height: auto; max-height: 330px; border-left: none;
    border-top: 1px solid var(--line); padding-left: 0; padding-top: 16px; }
}

/* Phones: keep the scoreboard chart inside the card and tighten spacing. */
@media (max-width: 560px) {
  .sb2-chart svg { overflow: hidden; }
  .sb2-legend { gap: 4px; }
  .perf-split .perf-hist { padding: 16px 16px; }
}

.perf-hist {
  height: 310px;
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.ph-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.ph-head h3 { font-size: 16px; font-family: var(--display); font-weight: 600; }

.ph-list { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; }

.ph-item {
  display: grid;
  grid-template-columns: 34px 1fr auto;
  gap: 11px;
  align-items: center;
  padding: 10px 2px;
  border-bottom: 1px solid var(--line);
}

.ph-item:last-child { border-bottom: none; }

.ph-ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex: 0 0 34px; }
.ph-ic svg { width: 17px; height: 17px; }
.ic-red { background: var(--red-soft-2); color: var(--red); }
.ic-ink { background: #eef2ff; color: #4338ca; }
.ic-green { background: #e8f7ee; color: #16a34a; }

.ph-body { display: flex; flex-direction: column; min-width: 0; }
.ph-t { font-size: 13.5px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ph-s { font-size: 12px; color: var(--muted); margin-top: 1px; }
.ph-time { font-size: 12px; color: var(--muted); font-weight: 600; }

@media (max-width: 1100px) {
  .perf-hist { height: auto; max-height: 340px; }
}
.ph-head .link { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; line-height: 1; }
.ph-head .link svg { width: 14px; height: 14px; flex: 0 0 14px; }

/* ############################################################
   #  PAGE STYLES  — append new pages below as labelled sections
   #  (merged from course-list.css, course-details.css, labs.css)
   ############################################################ */

/* ====================== PAGE: My Courses ====================== */
/* ============================================================
   My Courses page — content styles (uses the dashboard shell)
   ============================================================ */

/* ---- enrolled list + featured ---- */
.mc-top {
  display: grid;
  grid-template-columns: 1.7fr 1fr;
  gap: 24px;
  align-items: start;
  margin-bottom: 36px;
}

.mc-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.mc-course {
  position: relative;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 20px 22px;
  display: flex;
  align-items: center;
  gap: 22px;
  box-shadow: 0 8px 22px rgba(20, 15, 10, .05);
}

.mc-thumb {
  flex: 0 0 116px;
}

.mc-img {
  display: block;
  width: 116px;
  height: 116px;
  border-radius: 5px;
  overflow: hidden;
}

.mc-info {
  flex: 1;
  min-width: 0;
}

.mc-info h3 {
  font-size: 18px;
  color: var(--text);
  margin-bottom: 16px;
  font-weight: 700;
}

.mc-meta {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 14px 18px;
}

.mc-cell {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.mc-k {
  font-size: 12px;
  color: var(--muted);
}

.mc-v {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}

.mc-go {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: none;
  background: var(--red-grad);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(241, 84, 90, .35);
  transition: transform .15s ease, filter .15s ease;
}

.mc-go svg {
  width: 20px;
  height: 20px;
}

.mc-go:hover {
  transform: translateY(-2px);
  filter: brightness(1.05);
}

/* ---- featured (Advanced Ethical Hacking) ---- */
.mc-featured {
  position: relative;
  border-radius: 7px;
  overflow: hidden;
  min-height: 100%;
  height: 252px;
  display: flex;
}

.mc-list ~ .mc-featured { align-self: stretch; }

.mc-feat-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.mc-feat-ov {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(12, 9, 14, .25) 0%, rgba(12, 9, 14, .55) 45%, rgba(12, 9, 14, .9) 100%);
}

.mc-feat-body {
  position: relative;
  margin-top: auto;
  width: 100%;
  padding: 22px;
  text-align: center;
  color: #fff;
}

.mc-feat-body h3 {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 12px;
}

.mc-feat-meta {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 13px;
  color: #e9e9ec;
  margin-bottom: 16px;
}

.mc-feat-code {
  display: inline-block;
  background: #fff;
  color: #16130d;
  font-weight: 800;
  letter-spacing: .04em;
  padding: 9px 20px;
  border-radius: 10px;
}


/* ---- courses completed ---- */
.sec-head-center {
  justify-content: center;
}

.mc-done {
  flex-direction: column;
  align-items: stretch;
  gap: 0;
}

.mc-done-top {
  display: flex;
  align-items: center;
  gap: 22px;
}

.mc-done-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.mc-done-foot span {
  color: var(--muted);
  font-size: 13.5px;
}

.btn-cert {
  flex: 0 0 auto;
  border: 1px solid var(--red);
  color: var(--red);
  background: transparent;
  border-radius: 999px;
  padding: 10px 22px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: background .15s ease;
}

.btn-cert:hover {
  background: var(--red-soft-2);
}

/* ---- responsive ---- */
@media (max-width: 980px) {
  .mc-top { grid-template-columns: 1fr; }
  .mc-featured { height: 300px; }
}

@media (max-width: 680px) {
  .mc-course { flex-wrap: wrap; }
  .mc-thumb { flex: 0 0 84px; }
  .mc-img { width: 84px; height: 84px; }
  .mc-meta { grid-template-columns: 1fr 1fr; }
  .mc-go { position: absolute; top: 18px; right: 18px; width: 42px; height: 42px; }
  .mc-done-foot { flex-direction: column; align-items: flex-start; }
}

/* completed course badge */
.c-done-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 700;
  color: #16a34a;
  background: #e8f7ee;
  border-radius: 999px;
  padding: 6px 12px;
}
.c-done-badge svg { width: 14px; height: 14px; }
.course-done .bar i { background: linear-gradient(90deg, #22c55e, #16a34a); }
/* full course details grid inside .course cards */
.c-details {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 11px 16px;
  margin: 14px 0 6px;
}
.c-details > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.c-details .cd-wide { grid-column: 1 / -1; }
.cd-k { font-size: 11.5px; color: var(--muted); }
.cd-v { font-size: 13px; font-weight: 700; color: var(--text); }
/* ====================== PAGE: Course Details + Course Modules ====================== */
/* ============================================================
   Course Details — redesigned (split: tabbed main + sticky rail)
   Uses the dashboard shell + styles-v3.css design tokens.
   ============================================================ */

.cdx { padding-top: 30px; padding-bottom: 8px; } /* match the module page's ~30px top offset so the breadcrumb sits at the same height */

/* breadcrumb */
.cdx-crumb {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 18px;
}
.cdx-crumb a { color: var(--text-2); font-weight: 600; }
.cdx-crumb a:hover { color: var(--red); }
.cdx-crumb svg { width: 14px; height: 14px; opacity: .6; }

/* ---- header ---- */
.cdx-head { margin-bottom: 26px; max-width: 760px; }

.cdx-eyebrow {
  display: inline-block;
  font-size: 11.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--red);
  font-weight: 800;
  margin-bottom: 12px;
}

.cdx-title {
  font-family: var(--display);
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.05;
  letter-spacing: -.01em;
  color: var(--text);
  font-weight: 700;
}
.cdx-title em { color: var(--red); font-style: normal; }

.cdx-lede {
  margin-top: 14px;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--text-2);
}

/* Empty states (no course open / no modules) — a calm centered panel instead of orphan text. */
.cdx-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 8px;
  padding: 56px 24px;
  margin-top: 8px;
  border: 1px dashed var(--line-2);
  border-radius: 14px;
  background: rgba(255, 255, 255, .015);
}
.cdx-empty-ic {
  width: 56px; height: 56px;
  display: grid; place-items: center;
  border-radius: 14px;
  background: rgba(240, 28, 36, .08);
  color: var(--red, #f01c24);
  margin-bottom: 4px;
}
.cdx-empty-ic svg { width: 28px; height: 28px; }
.cdx-empty-t {
  font-family: var(--display);
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  margin: 0;
}
.cdx-empty-s {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-2);
  max-width: 440px;
  margin: 0 auto;
}
.cdx-empty-cta { margin-top: 12px; }

/* Admin-authored rich text (course/lesson overviews) rendered as sanitized HTML. */
.rich-text > :first-child { margin-top: 0; }
.rich-text > :last-child { margin-bottom: 0; }
.rich-text p { margin: 0 0 10px; }
.rich-text ul, .rich-text ol { margin: 0 0 10px; padding-left: 22px; }
.rich-text li { margin: 3px 0; }
.rich-text a { color: var(--red, #f01c24); text-decoration: underline; }
.rich-text strong, .rich-text b { font-weight: 700; color: var(--text); }
.rich-text img { max-width: 100%; height: auto; border-radius: 8px; }

.cdx-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin-top: 20px;
}
.cdx-stat {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-2);
}
.cdx-stat b { color: var(--text); font-weight: 800; }
.cdx-stat svg { width: 16px; height: 16px; color: var(--red); }

/* ---- layout ---- */
.cdx-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 388px;
  gap: 34px;
  align-items: start;
  transition: grid-template-columns .3s ease;
}

/* full-width reading mode: hide the rail, main spans full width */
.cdx.cdx-full .cdx-grid { grid-template-columns: 1fr; }
.cdx.cdx-full .cdx-rail { display: none; }
.cdx-main { min-width: 0; }

/* ---- tabs ---- */
.cdx-tabs {
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
  border-bottom: 1px solid var(--line-2);
  margin-bottom: 24px;
}

/* half / full screen layout toggle */
.cdx-view {
  margin-left: auto;
  display: inline-flex;
  gap: 2px;
  background: var(--red-soft-2);
  border: 1px solid var(--line-2);
  border-radius: 10px;
  padding: 3px;
  align-self: center;
  margin-bottom: 4px;
}
.cdx-view-btn {
  width: 34px;
  height: 28px;
  border: none;
  background: none;
  border-radius: 7px;
  color: var(--text-2);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.cdx-view-btn svg { width: 16px; height: 16px; }
.cdx-view-btn:hover { color: var(--text); }
.cdx-view-btn.is-active {
  background: var(--card);
  color: var(--red);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
}
.cdx-tab {
  position: relative;
  border: none;
  background: none;
  font-family: var(--sans);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text-2);
  padding: 12px 16px;
  cursor: pointer;
  transition: color .15s ease;
}
.cdx-tab:hover { color: var(--text); }
.cdx-tab.is-active { color: var(--text); }
.cdx-tab.is-active::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: -1px;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--red-grad);
}
.cdx-tab-ink { display: none; }

.cdx-panel[hidden] { display: none; }
.cdx-panel { animation: cdxFade .4s ease both; }

.cdx-h2 { font-family: var(--display); font-size: 22px; font-weight: 700; color: var(--text); margin-bottom: 12px; }
.cdx-h3 { font-family: var(--display); font-size: 16px; font-weight: 700; color: var(--text); margin: 26px 0 14px; }
.cdx-prose { font-size: 15px; line-height: 1.7; color: var(--text-2); max-width: 70ch; }
ul{padding-left: 0px;}
/* what you'll learn */
.cdx-learn {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 22px;
  padding: 0;
}
.cdx-learn li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  color: var(--text);
  line-height: 1.45;
}
.cdx-learn svg {
  width: 18px; height: 18px;
  flex: 0 0 18px;
  margin-top: 1px;
  color: #16a34a;
}

/* skills tags */
.cdx-skills { display: flex; flex-wrap: wrap; gap: 8px; }
.cdx-skills span {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-2);
  background: var(--red-soft-2);
  border: 1px solid var(--line-2);
  padding: 7px 13px;
  border-radius: 999px;
}

/* ---- curriculum ---- */
.cdx-curric-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.cdx-curric-meta { font-size: 13px; color: var(--muted); font-weight: 600; }

.cdx-modules { counter-reset: mod; }

/* restyle the reused .module / .act blocks */
.cdx .module {
  display: block;
  background: var(--card);
  border: 1px solid var(--line-2);
  border-radius: 5px;
  box-shadow: var(--shadow-sm);
  margin-bottom: 14px;
  overflow: hidden;
}
.cdx .module .m-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border: none;
}
.cdx .module .m-meta::before {
  counter-increment: mod;
  content: counter(mod, decimal-leading-zero);
  flex: 0 0 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: var(--ink);
  color: #fff;
  font-family: var(--display);
  font-weight: 700;
  font-size: 14px;
}
.cdx .module .m-meta h3 {
  flex: 1;
  font-family: var(--display);
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--text);
  margin: 0;
}
.cdx .module .m-count {
  font-size: 12px;
  color: var(--muted);
  font-weight: 600;
  white-space: nowrap;
}
.cdx .module .m-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line-2);
  background: none;
  color: var(--text-2);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  padding: 7px 11px;
  border-radius: 9px;
  cursor: pointer;
}
.cdx .module .m-toggle:hover { color: var(--red); border-color: var(--red-soft); }
.cdx .module .m-toggle svg { width: 14px; height: 14px; transition: transform .2s ease; }
.cdx .module.collapsed .m-toggle svg { transform: rotate(-90deg); }

.cdx .module .m-list {
  border-top: 1px solid var(--line-2);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cdx .module.collapsed .m-list { display: none; }

.cdx .act {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  border-radius: 10px;
  transition: background .12s ease;
}
.cdx .act:hover { background: var(--red-soft-2); }
.cdx .act-check {
  width: 22px; height: 22px;
  flex: 0 0 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1.5px solid var(--line-2);
  color: transparent;
}
.cdx .act-check svg { width: 13px; height: 13px; }
.cdx .act-ic { color: var(--text-2); display: grid; place-items: center; }
.cdx .act-ic svg { width: 18px; height: 18px; }
.cdx .act-ic.t-quiz { color: #4338ca; }
.cdx .act-ic.t-lab { color: #16a34a; }
.cdx .act-title {
  font-size: 13.5px;
  color: var(--text);
  min-width: 0;
  line-height: 1.4;
}
.cdx .act-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--red);
  white-space: nowrap;
}
.cdx .act-cta svg { width: 14px; height: 14px; }
.cdx .act-cta:hover { text-decoration: underline; }

/* ---- instructor ---- */
.cdx-instructor { margin: 8px 0 26px; }
.cdx-instructor .cdx-h2 { margin-bottom: 12px; }
.cdx-inst {
  display: flex;
  gap: 18px;
  background: var(--card);
  border: 1px solid var(--line-2);
  border-radius: 5px;
  padding: 22px;
  box-shadow: var(--shadow-sm);
}
.cdx-inst-ava {
  flex: 0 0 64px;
  width: 64px; height: 64px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--red-grad);
  color: #fff;
  font-family: var(--display);
  font-weight: 700;
  font-size: 22px;
}
.cdx-inst-name { font-family: var(--display); font-size: 18px; font-weight: 700; color: var(--text); }
.cdx-inst-role { font-size: 13px; color: var(--red); font-weight: 600; margin-top: 2px; }
.cdx-inst-cert { font-size: 13px; color: var(--text-2); line-height: 1.6; margin-top: 10px; }

/* ---- sticky enroll rail ---- */
.cdx-rail { position: sticky; top: 18px; }
.cdx-enroll {
  background: var(--card);
  border: 1px solid var(--line-2);
  border-radius: 7px;
  padding: 16px;
  box-shadow: var(--shadow-md);
}

.cdx-poster {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: 13px;
  overflow: hidden;
  background: radial-gradient(130% 130% at 0% 0%, #2c2118 0%, #16110c 70%);
}
.cdx-poster-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .055) 1px, transparent 1px);
  background-size: 24px 24px;
  -webkit-mask-image: radial-gradient(120% 120% at 70% 30%, #000, transparent 75%);
  mask-image: radial-gradient(120% 120% at 70% 30%, #000, transparent 75%);
}
.cdx-play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 52px; height: 52px;
  border-radius: 50%;
  border: none;
  background: var(--red-grad);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(240, 28, 36, .45);
  transition: transform .15s ease;
}
.cdx-play svg { width: 20px; height: 20px; margin-left: 2px; }
.cdx-play:hover { transform: translate(-50%, -50%) scale(1.08); }
.cdx-poster-time {
  position: absolute;
  left: 12px; bottom: 11px;
  font-size: 11.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, .85);
}

.cdx-prog {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 6px 14px;
}
.cdx-ring { position: relative; width: 54px; height: 54px; flex: 0 0 54px; }
.cdx-ring svg { width: 54px; height: 54px; transform: rotate(-90deg); }
.ring-bg { fill: none; stroke: var(--red-soft); stroke-width: 5; }
.ring-fg {
  fill: none;
  stroke: var(--red);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-dasharray: 125.66;
  stroke-dashoffset: 81.7;
  animation: ringFill 1s cubic-bezier(.22, .61, .36, 1) .2s both;
}
.cdx-ring-num { position: absolute; inset: 0; display: grid; place-items: center; font-size: 12px; font-weight: 800; color: var(--text); }
.cdx-prog-txt { display: flex; flex-direction: column; }
.cdx-prog-txt b { font-size: 14px; color: var(--text); }
.cdx-prog-txt span { font-size: 12.5px; color: var(--muted); margin-top: 2px; }

.cdx-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  background: var(--red-grad);
  color: #fff;
  font-weight: 700;
  font-size: 14.5px;
  padding: 13px;
  border-radius: 5px;
  box-shadow: 0 8px 20px rgba(240, 28, 36, .3);
  transition: transform .15s ease, filter .15s ease;
}
.cdx-cta svg { width: 17px; height: 17px; }
.cdx-cta:hover { transform: translateY(-2px); filter: brightness(1.04); }

.cdx-facts {
  list-style: none;
  margin: 16px 0 0;
  padding: 16px 6px 0;
  border-top: 1px solid var(--line-2);
  display: flex;
  flex-direction: column;
  gap: 13px;
}
.cdx-facts li { display: flex; align-items: center; gap: 11px; font-size: 13.5px; color: var(--text); }
.cdx-facts svg { width: 17px; height: 17px; color: var(--text-2); flex: 0 0 17px; }

.cdx-sub {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 5px;
  background: var(--red-soft-2);
  border: 1px dashed var(--red-soft);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-2);
}
.cdx-sub svg { width: 16px; height: 16px; color: var(--red); flex: 0 0 16px; }

/* ---- motion ---- */
@keyframes cdxFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes ringFill { from { stroke-dashoffset: 125.66; } }
html.js-anim .cdx-head { animation: cdxFade .5s ease both; }
html.js-anim .cdx-rail { animation: cdxFade .5s ease .08s both; }

/* ---- responsive ---- */
@media (max-width: 980px) {
  .cdx-grid { grid-template-columns: 1fr; }
  .cdx-rail { position: static; order: -1; }
  .cdx-view { display: none; }
}
@media (max-width: 560px) {
  .cdx-learn { grid-template-columns: 1fr; }
  .cdx .module .m-meta { flex-wrap: wrap; }
  .cdx-tabs { overflow-x: auto; }
}

/* ============================================================
   MODULE → PART SELECTOR  (course-modules.html)
   Reuses .cdx .module / .m-meta / .m-list, adds clickable parts
   ============================================================ */
.cdx-pick { margin-top: 4px; }
.cdx-pick-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.cdx-pick-meta { font-size: 13px; color: var(--muted); font-weight: 600; }

/* Course-level materials (view-only PDFs) on the Course Modules page. */
.cdx-materials { margin: 4px 0 26px; }
.cm-materials { display: grid; gap: 12px; }
.cm-material {
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  padding: 16px;
  border: 1px solid var(--line-2);
  border-radius: 12px;
  background: var(--card, #fff);
  color: var(--text);
  cursor: pointer;
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.cm-material:hover {
  border-color: var(--red, #f01c24);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(240, 28, 36, .10);
}
.cm-material-ic {
  flex: 0 0 auto;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 10px;
  background: rgba(240, 28, 36, .10);
  color: var(--red, #f01c24);
}
.cm-material-ic svg { width: 20px; height: 20px; }
.cm-material-name { flex: 1 1 auto; font-weight: 600; font-size: 14.5px; }
.cm-material-view {
  flex: 0 0 auto;
  font-size: 12.5px; font-weight: 700;
  color: var(--red, #f01c24);
  padding: 5px 12px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
}
.cm-material:hover .cm-material-view { border-color: var(--red, #f01c24); }
html[data-theme="dark"] .cm-material { background: var(--card-2, #16181d); }

/* Locked course material — visible but not openable (unlock a module first). */
.cm-material.is-locked {
  cursor: not-allowed;
  opacity: .72;
}
.cm-material.is-locked:hover {
  border-color: var(--line-2);
  transform: none;
  box-shadow: none;
}
.cm-material.is-locked .cm-material-ic {
  background: rgba(120, 120, 120, .12);
  color: var(--muted, #8a8f98);
}
.cm-material-view.lock {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted, #8a8f98);
  border-color: var(--line-2);
}

/* a clickable Part row inside a module */
.cdx .part {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 14px;
  padding: 13px 14px;
  border-radius: 11px;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background .14s ease, border-color .14s ease, transform .14s ease;
}
.cdx .part:hover {
  background: var(--card);
  border-color: var(--line-2);
  box-shadow: var(--shadow-sm);
  transform: translateX(2px);
}
.cdx .part-no {
  flex: 0 0 40px;
  width: 40px; height: 40px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: var(--red-soft-2);
  border: 1px solid var(--line-2);
  color: var(--red);
  font-family: var(--display);
  font-weight: 700;
  font-size: 14px;
}
.cdx .part.done .part-no {
  background: #16a34a;
  border-color: #16a34a;
  color: #fff;
}
.cdx .part.done .part-no svg { width: 18px; height: 18px; }
.cdx .part-body { min-width: 0; }
.cdx .part-title {
  display: block;
  font-family: var(--display);
  font-size: 14.5px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.35;
}
.cdx .part-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  margin-top: 4px;
  font-size: 12px;
  color: var(--muted);
  font-weight: 600;
}
.cdx .part-meta span { display: inline-flex; align-items: center; gap: 5px; }
.cdx .part-meta svg { width: 13px; height: 13px; }

/* mini progress for a part */
.cdx .part-prog { display: flex; align-items: center; gap: 9px; width: 130px; }
.cdx .part-bar {
  flex: 1;
  height: 6px;
  border-radius: 999px;
  background: var(--line-2);
  overflow: hidden;
}
.cdx .part-bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--red-grad);
  transition: width .8s cubic-bezier(.4, 0, .1, 1);
}
.cdx .part-pct { font-size: 11.5px; font-weight: 700; color: var(--text-2); white-space: nowrap; }

/* status pill instead of progress (locked / new) */
.cdx .part-pill {
  font-size: 11px;
  font-weight: 700;
  padding: 4px 9px;
  border-radius: 999px;
  white-space: nowrap;
}
.cdx .part-pill.lock { background: var(--red-soft-2); color: var(--text-2); border: 1px solid var(--line-2); }
.cdx .part-pill.new { background: var(--red-soft); color: var(--red); }

/* go chevron */
.cdx .part-go {
  flex: 0 0 30px;
  width: 30px; height: 30px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  color: var(--text-2);
  transition: background .14s ease, color .14s ease;
}
.cdx .part:hover .part-go { background: var(--red); color: #fff; }
.cdx .part-go svg { width: 16px; height: 16px; }

@media (max-width: 620px) {
  .cdx .part { grid-template-columns: auto 1fr auto; }
  .cdx .part-prog { display: none; }
}

/* ============================================================
   YOUTUBE-STYLE WATCH LAYOUT  (course-details.html)
   video stage on the left, curriculum playlist on the right
   ============================================================ */
.cdx-watch {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 440px;
  gap: 28px;
  align-items: start;
  transition: grid-template-columns .3s ease;
}
.cdx.cdx-full .cdx-watch { grid-template-columns: minmax(0, 1fr); }
/* theatre = video spans the full content width (clearly bigger than split) */
.cdx.cdx-full .cdx-stage { max-width: none; margin: 0; }
/* curriculum drops below the video, full width (no longer hidden) */
.cdx.cdx-full .cdx-playlist {
  position: static;
  max-height: none;
  margin-top: 22px;
}
.cdx.cdx-full .cdx-pl-body { max-height: none; overflow: visible; }
.cdx.cdx-full .pl-items {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 2px 10px;
}

.cdx-stage { min-width: 0; }

/* ---- video player ---- */
.cdx-player {
  position: relative;
  border-radius: 5px;
  overflow: hidden;
  background: #0c0c0f;
  box-shadow: var(--shadow-md);
}
.cdx-player-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; }
.cdx-player-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.cdx-fs {
  position: absolute;
  top: 12px; right: 12px;
  width: 38px; height: 38px;
  display: grid;
  place-items: center;
  border: none;
  border-radius: 10px;
  background: rgba(12, 12, 15, .55);
  color: #fff;
  cursor: pointer;
  backdrop-filter: blur(4px);
  transition: background .15s ease, transform .15s ease;
  z-index: 3;
}
.cdx-fs:hover { background: rgba(12, 12, 15, .82); transform: scale(1.06); }
.cdx-fs svg { width: 18px; height: 18px; }
.cdx-player:fullscreen { border-radius: 0; display: grid; place-items: center; }
.cdx-player:fullscreen .cdx-player-frame { width: 100%; height: 100%; aspect-ratio: auto; }

/* ---- now-playing bar ---- */
.cdx-now {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin: 16px 0 4px;
}
.cdx-now-mod { display: block; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--red); }
.cdx-now-title { font-family: var(--display); font-size: 20px; font-weight: 700; line-height: 1.3; color: var(--text); margin-top: 4px; }
.cdx-now-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.cdx-next {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: none;
  border-radius: 11px;
  padding: 11px 16px;
  font-family: var(--sans);
  font-size: 13.5px;
  font-weight: 700;
  color: #fff;
  background: var(--red-grad);
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(255, 26, 30, .25);
  transition: transform .15s ease, box-shadow .15s ease;
}
.cdx-next:hover { transform: translateY(-1px); box-shadow: 0 7px 18px rgba(255, 26, 30, .32); }
.cdx-next svg { width: 16px; height: 16px; }

.cdx-desc { margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--line-2); }

/* ---- curriculum playlist (right rail) ---- */
.cdx-playlist {
  position: sticky;
  top: 18px;
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 36px);
  background: var(--card);
  border: 1px solid var(--line-2);
  border-radius: 5px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.cdx-pl-head { padding: 15px 16px; border-bottom: 1px solid var(--line-2); flex-shrink: 0; }
.cdx-pl-head h2 { font-family: var(--display); font-size: 15.5px; font-weight: 700; color: var(--text); }
.cdx-pl-head span { display: block; font-size: 12px; color: var(--muted); font-weight: 600; margin-top: 3px; }
.cdx-pl-body { overflow-y: auto; padding: 8px; scrollbar-width: thin; }

.pl-mod { margin-bottom: 4px; }
.pl-mod-head {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  border: none;
  background: none;
  text-align: left;
  padding: 9px 10px;
  border-radius: 9px;
  cursor: pointer;
  font-family: var(--display);
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}
.pl-mod-head:hover { background: var(--red-soft-2); }
.pl-mod-head .pl-cv { width: 15px; height: 15px; color: var(--text-2); transition: transform .2s ease; flex-shrink: 0; }
.pl-mod.collapsed .pl-mod-head .pl-cv { transform: rotate(-90deg); }
.pl-mod-head .pl-mc { margin-left: auto; font-family: var(--sans); font-size: 11px; font-weight: 600; color: var(--muted); }
.pl-items { display: flex; flex-direction: column; gap: 2px; padding: 2px 0 6px; }
.pl-mod.collapsed .pl-items { display: none; }

.pl-item {
  display: grid;
  grid-template-columns: 30px 1fr auto;
  align-items: center;
  gap: 11px;
  width: 100%;
  border: none;
  background: none;
  text-align: left;
  padding: 9px 10px;
  border-radius: 10px;
  cursor: pointer;
  transition: background .12s ease;
}
.pl-item:hover { background: var(--red-soft-2); }
.pl-item.is-playing { background: var(--red-soft); }
.pl-thumb {
  width: 30px; height: 30px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--red-soft-2);
  border: 1px solid var(--line-2);
  color: var(--text-2);
  font-family: var(--display);
  font-size: 12px;
  font-weight: 700;
}
.pl-item.is-playing .pl-thumb { background: var(--red-grad); border-color: transparent; color: #fff; }
.pl-item.done .pl-thumb { background: #16a34a; border-color: #16a34a; color: #fff; }
.pl-thumb svg { width: 15px; height: 15px; }
.pl-body { min-width: 0; }
.pl-t { display: block; font-size: 13px; font-weight: 600; color: var(--text); line-height: 1.35; }
.pl-item.is-playing .pl-t { color: var(--red); }
.pl-d { display: block; font-size: 11px; color: var(--muted); font-weight: 600; margin-top: 2px; }
.pl-state { color: var(--muted); display: grid; place-items: center; }
.pl-state svg { width: 15px; height: 15px; }
.pl-item.locked { cursor: not-allowed; }
.pl-item.locked .pl-t { color: var(--text-2); }
.pl-item.locked:hover { background: none; }
@media (max-width: 1500px) {
  .cdx-watch { grid-template-columns: minmax(0, 1fr) 350px; }
}
@media (max-width: 980px) {
  .cdx-watch { grid-template-columns: 1fr; }
  .cdx-playlist { position: static; max-height: 460px; order: 2; }
  .cdx-view { display: inline-flex !important; }
}
@media (max-width: 560px) {
  .cdx-now { flex-direction: column; }
  .cdx-now-actions { width: 100%; justify-content: space-between; }
}



/* ============================================================
   LMS QUIZ MODAL
   ============================================================ */
.quiz-overlay {
  position: fixed;
  inset: 0;
  z-index: 140;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(12, 10, 14, .58);
  backdrop-filter: blur(5px);
  animation: quizFade .2s ease;
}
.quiz-overlay.open { display: flex; }
@keyframes quizFade { from { opacity: 0; } to { opacity: 1; } }
.quiz-card {
  width: min(640px, 100%);
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--line-2);
  border-radius: 7px;
  box-shadow: var(--shadow-md);
  overflow: hidden;
  animation: quizPop .28s cubic-bezier(.3, 1.2, .5, 1);
}
@keyframes quizPop { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
.quiz-head { display: flex; align-items: center; gap: 14px; padding: 16px 20px; border-bottom: 1px solid var(--line-2); }
.quiz-head h3 { font-family: var(--display); font-size: 16px; font-weight: 700; color: var(--text); }
.quiz-timer {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono, monospace);
  font-size: 13px;
  font-weight: 700;
  color: var(--text-2);
  background: var(--red-soft-2);
  border: 1px solid var(--line-2);
  padding: 6px 11px;
  border-radius: 999px;
}
.quiz-timer svg { width: 14px; height: 14px; }
.quiz-timer.low { color: #fff; background: var(--red); border-color: var(--red); animation: quizPulse 1s infinite; }
@keyframes quizPulse { 50% { opacity: .65; } }
.quiz-x { border: none; background: none; color: var(--text-2); cursor: pointer; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; }
.quiz-x:hover { background: var(--red-soft-2); color: var(--red); }
.quiz-x svg { width: 18px; height: 18px; }
.quiz-bar { height: 4px; background: var(--line-2); flex-shrink: 0; }
.quiz-bar i { display: block; height: 100%; width: 0; background: var(--red-grad); transition: width .3s ease; }
.quiz-body { padding: 24px; overflow-y: auto; }
.quiz-qnum { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--red); }
.quiz-q { font-family: var(--display); font-size: 18px; font-weight: 700; color: var(--text); line-height: 1.4; margin: 7px 0 18px; }
.quiz-opts { display: flex; flex-direction: column; gap: 10px; }
.quiz-opt {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 14px 16px;
  border: 1.5px solid var(--line-2);
  border-radius: 13px;
  cursor: pointer;
  font-size: 14.5px;
  color: var(--text);
  transition: border-color .14s ease, background .14s ease;
}
.quiz-opt:hover { border-color: var(--red-soft); }
.quiz-opt.sel { border-color: var(--red); background: var(--red-soft-2); }
.quiz-opt .qbox {
  flex: 0 0 20px;
  width: 20px; height: 20px;
  border-radius: 50%;
  border: 2px solid var(--line-2);
  display: grid;
  place-items: center;
  transition: border-color .14s ease;
}
.quiz-opt.sel .qbox { border-color: var(--red); }
.quiz-opt.sel .qbox::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--red-grad); }
.quiz-text input {
  width: 100%;
  font-family: var(--sans);
  font-size: 15px;
  color: var(--text);
  padding: 14px 16px;
  border: 1.5px solid var(--line-2);
  border-radius: 13px;
  background: var(--red-soft-2);
  outline: none;
  transition: border-color .14s ease;
}
.quiz-text input:focus { border-color: var(--red); }
.quiz-text .qhint { font-size: 12px; color: var(--muted); margin-top: 8px; }
.quiz-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 15px 20px; border-top: 1px solid var(--line-2); }
.quiz-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--line-2);
  background: none;
  color: var(--text);
  font-family: var(--sans);
  font-size: 13.5px;
  font-weight: 700;
  padding: 11px 17px;
  border-radius: 11px;
  cursor: pointer;
  transition: background .14s ease, opacity .14s ease;
}
.quiz-btn:hover { background: var(--red-soft-2); }
.quiz-btn[disabled] { opacity: .4; cursor: not-allowed; }
.quiz-btn.primary { border-color: transparent; color: #fff; background: var(--red-grad); box-shadow: 0 4px 12px rgba(255, 26, 30, .25); }
.quiz-btn.primary:hover { background: var(--red-grad); transform: translateY(-1px); }

/* result screen */
.quiz-result { text-align: center; padding: 30px 24px; }
.quiz-score-ring { width: 132px; height: 132px; margin: 0 auto 18px; position: relative; }
.quiz-score-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.quiz-score-ring .qr-bg { fill: none; stroke: var(--line-2); stroke-width: 9; }
.quiz-score-ring .qr-fg { fill: none; stroke-width: 9; stroke-linecap: round; transition: stroke-dashoffset 1s cubic-bezier(.4, 0, .1, 1); }
.quiz-score-num { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--display); font-size: 30px; font-weight: 800; color: var(--text); }
.quiz-result h3 { font-family: var(--display); font-size: 22px; font-weight: 700; color: var(--text); }
.quiz-result p { font-size: 14px; color: var(--text-2); margin-top: 8px; line-height: 1.6; }
.quiz-result .quiz-actions { display: flex; gap: 10px; justify-content: center; margin-top: 22px; }
.quiz-badge { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; padding: 7px 14px; border-radius: 999px; margin-bottom: 6px; }
.quiz-badge.pass { color: #16a34a; background: #16a34a18; }
.quiz-badge.fail { color: var(--red); background: var(--red-soft); }

/* ====================== PAGE: Labs flow (list / details / test / success) ====================== */
/* ============================================================
   LABS — PentestGarage flow
   My Labs list · Lab details · Lab test · Success
   Built on the dashboard shell + styles-v3.css design tokens.
   ============================================================ */

.labs { padding-bottom: 8px; }

/* breadcrumb / back nav (shared) */
.lab-crumb {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
}
.lab-back {
  width: 42px; height: 42px;
  display: grid;
  place-items: center;
  border-radius: 5px;
  background: var(--card);
  border: 1px solid var(--line-2);
  color: var(--text);
  cursor: pointer;
  transition: background .15s ease, transform .15s ease, color .15s ease;
}
.lab-back:hover { background: var(--red-soft-2); color: var(--red); transform: translateX(-2px); }
.lab-back svg { width: 19px; height: 19px; }
.lab-crumb-info .lab-crumb-t { font-family: var(--display); font-size: 20px; font-weight: 700; color: var(--text); line-height: 1.2; }
.lab-crumb-info .lab-crumb-s { font-size: 12.5px; color: var(--muted); font-weight: 600; margin-top: 2px; }

/* section title (reuses .sec-head where possible) */
.labs-sech { display: flex; align-items: center; gap: 12px; margin: 6px 0 16px; }
.labs-sech h2 { font-family: var(--display); font-size: 19px; font-weight: 700; color: var(--text); }
.labs-sech .count { font-size: 12px; font-weight: 700; color: var(--red); background: var(--red-soft); padding: 3px 9px; border-radius: 999px; }

/* ---- lab banner (recreated ADCD artwork) ---- */
.lab-banner {
  position: relative;
  border-radius: 5px;
  overflow: hidden;
  aspect-ratio: 16 / 7;
  background:
    radial-gradient(120% 140% at 85% 20%, #3a1d2a 0%, transparent 55%),
    linear-gradient(120deg, #14110d 0%, #241019 55%, #3a0f16 100%);
  display: flex;
  align-items: center;
  padding: 0 20px;
  color: #fff;
}
.lab-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(120% 120% at 70% 30%, #000 30%, transparent 75%);
  mask-image: radial-gradient(120% 120% at 70% 30%, #000 30%, transparent 75%);
}
.lab-banner-glow { position: absolute; right: -30px; top: 50%; transform: translateY(-50%); width: 180px; height: 180px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 60, 64, .55), transparent 65%); filter: blur(6px); }
.lab-banner-code { position: relative; font-family: var(--display); font-weight: 800; font-size: clamp(26px, 6vw, 44px); letter-spacing: -.02em; line-height: 1; }
.lab-banner-code i { color: var(--red); font-style: normal; }
.lab-banner-sup { font-size: .4em; vertical-align: super; color: var(--red); font-weight: 700; }
.lab-banner-tag { position: relative; margin-left: 14px; padding-left: 14px; border-left: 2px solid rgba(255, 255, 255, .2); }
.lab-banner-tag b { display: block; font-family: var(--display); font-size: 13px; font-weight: 700; }
.lab-banner-tag span { display: block; font-size: 10.5px; color: rgba(255, 255, 255, .65); letter-spacing: .12em; text-transform: uppercase; margin-top: 3px; }

/* ============================================================
   MY LABS — top card grid
   ============================================================ */
.lab-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  margin-bottom: 38px;
}
.lab-card {
  background: var(--card);
  border: 1px solid var(--line-2);
  border-radius: 7px;
  padding: 14px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  transition: transform .18s ease, box-shadow .18s ease;
}
.lab-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.lab-card .lab-banner { aspect-ratio: 16 / 6.5; margin-bottom: 14px; }
.lab-card-name { font-family: var(--display); font-size: 16px; font-weight: 700; color: var(--text); }
.lab-card-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 8px 0 14px; }
.lab-card-meta span { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-2); font-weight: 600; }
.lab-card-meta b { color: var(--text); }
.lab-card-meta svg { width: 14px; height: 14px; color: var(--red); }
.lab-card .btn { margin-top: auto; width: 100%; justify-content: center; }

/* ============================================================
   CHALLENGE TRACKS (PentestGarage)
   ============================================================ */
.track {
  background: var(--card);
  border: 1px solid var(--line-2);
  border-radius: 7px;
  padding: 18px;
  box-shadow: var(--shadow-sm);
  margin-bottom: 20px;
}
.track-head {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}
.track-thumb {
  width: 58px; height: 44px;
  border-radius: 10px;
  overflow: hidden;
  flex-shrink: 0;
}
.track-thumb .lab-banner { aspect-ratio: auto; height: 100%; padding: 0 8px; }
.track-thumb .lab-banner-code { font-size: 15px; }
.track-id .track-t { font-family: var(--display); font-size: 15px; font-weight: 700; color: var(--text); }
.track-id .track-s { font-size: 12px; color: var(--muted); margin-top: 2px; }
.track-stat { text-align: right; }
.track-stat .tk-k { display: block; font-size: 11px; color: var(--muted); font-weight: 600; }
.track-stat .tk-v { display: block; font-size: 13.5px; color: var(--text); font-weight: 700; margin-top: 2px; }
.track-stat .tk-prog { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.track-stat .tk-bar { width: 90px; height: 6px; border-radius: 999px; background: var(--line-2); overflow: hidden; }
.track-stat .tk-bar i { display: block; height: 100%; background: var(--red-grad); border-radius: inherit; }

/* scroller */
.track-scroll-wrap { position: relative; }
.track-scroll {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-behavior: smooth;
  padding: 4px 2px 8px;
  scrollbar-width: none;
}
.track-scroll::-webkit-scrollbar { display: none; }
.chal {
  flex: 0 0 auto;
  width: 120px;
  background: var(--card);
  border: 1px solid var(--line-2);
  border-radius: 5px;
  padding: 14px 10px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  text-decoration: none;
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.chal:hover { transform: translateY(-3px); border-color: var(--red-soft); box-shadow: var(--shadow-sm); }
.chal-ic {
  width: 64px; height: 60px;
  display: grid;
  place-items: center;
  color: var(--red);
}
.chal-ic svg { width: 100%; height: 100%; filter: drop-shadow(0 4px 8px rgba(255, 26, 30, .25)); }
.chal-name { font-size: 12.5px; font-weight: 700; color: var(--red); }
.chal.solved .chal-name { color: #16a34a; }
.chal.solved .chal-ic { color: #16a34a; }

.track-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 34px; height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--card);
  border: 1px solid var(--line-2);
  color: var(--text);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  z-index: 2;
  transition: background .15s ease, color .15s ease;
}
.track-nav:hover { background: var(--red-soft-2); color: var(--red); }
.track-nav svg { width: 17px; height: 17px; }
.track-nav.prev { left: -10px; }
.track-nav.next { right: 44px; }
.track-go {
  position: absolute;
  right: -6px; top: 50%;
  transform: translateY(-50%);
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
  border: none;
  border-radius: 50%;
  background: var(--red-grad);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(255, 26, 30, .35);
  z-index: 2;
  transition: transform .15s ease;
}
.track-go:hover { transform: translateY(-50%) scale(1.08); }
.track-go svg { width: 19px; height: 19px; }

/* ============================================================
   LAB DETAILS (confirm / start)
   ============================================================ */
.labd {
  background: var(--card);
  border: 1px solid var(--line-2);
  border-radius: 7px;
  box-shadow: var(--shadow-md);
  overflow: hidden;
  max-width: 940px;
}
.labd-head { padding: 22px 26px 0; }
.labd-head h2 { font-family: var(--display); font-size: 16px; font-weight: 700; color: var(--red); }
.labd-body { padding: 18px 26px 26px; }
.labd .lab-banner { aspect-ratio: 16 / 5; margin-bottom: 18px; }
.labd-name { font-family: var(--display); font-size: 22px; font-weight: 700; color: var(--text); }
.labd-meta { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 8px 0 20px; }
.labd-meta span { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--text-2); font-weight: 600; }
.labd-meta b { color: var(--text); }
.labd-meta svg { width: 15px; height: 15px; color: var(--red); }

.labd-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin-bottom: 24px; }
.labd-tile {
  border: 1px solid var(--line-2);
  border-radius: 5px;
  padding: 16px 18px;
  background: var(--red-soft-2);
}
.labd-tile .lt-k { display: flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--red); }
.labd-tile .lt-k svg { width: 14px; height: 14px; }
.labd-tile .lt-v { font-family: var(--mono, monospace); font-size: 15px; font-weight: 700; color: var(--text); margin-top: 8px; word-break: break-all; }
.labd-actions { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.labd-actions .btn { min-width: 220px; justify-content: center; }
.labd-note { font-size: 12px; color: var(--muted); text-align: center; max-width: 520px; line-height: 1.6; }

/* ------------------------------------------------------------
   LAB DETAILS PAGE — challenge view (overview / environment / flag)
   Card-based layout on the design tokens (replaces ad-hoc inline styles).
   ------------------------------------------------------------ */
.labd-page { max-width: none; margin: 0; padding: 8px 4px 40px; }
.labd-back { display: inline-flex; margin-bottom: 18px; }

.labd-hero {
  display: flex; align-items: center; gap: 18px;
  margin-bottom: 20px;
  padding: 22px 24px;
  border-radius: 14px;
  background: linear-gradient(120deg, rgba(240, 28, 36, .10), rgba(240, 28, 36, .015) 62%), var(--card);
  border: 1px solid var(--line-2);
  box-shadow: var(--shadow-sm);
}
.labd-hero-body { flex: 1 1 auto; min-width: 0; }
.labd-hero .lbx-hex,
.labd-hero-hex { flex: 0 0 auto; }
.labd-hero h1 { margin: 0; font-family: var(--display); font-size: 25px; font-weight: 800; color: var(--text); line-height: 1.2; }
.labd-hero .labd-id { font-family: var(--mono, monospace); font-size: 12.5px; color: var(--muted); margin-top: 5px; word-break: break-all; }

.labd-eyebrow { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 9px; font-family: var(--display); font-size: 11.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--red); }
.labd-eyebrow-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--red); }

.labd-chips { margin-bottom: 22px; }
.labd-hero .labd-chips { margin: 14px 0 0; }

/* ---- two-column layout ---- */
.labd-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
.labd-main { min-width: 0; }
.labd-main > .labd-section:last-child { margin-bottom: 0; }
.labd-side { position: sticky; top: 84px; display: flex; flex-direction: column; gap: 16px; }

.labd-panel {
  background: var(--card);
  border: 1px solid var(--line-2);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
  padding: 18px 18px;
}
.labd-panel > h3 {
  margin: 0 0 14px;
  font-family: var(--display);
  font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--red);
}
.labd-env-panel .labd-status { margin-bottom: 14px; }
.labd-env-panel .labd-env-hint { margin-top: 10px; margin-bottom: 0; }
.labd-launch { width: 100%; justify-content: center; }
.labd-env-panel .labd-open { width: 100%; justify-content: center; }

/* idle (not running) status — grey, no pulse */
.labd-status.idle { background: var(--bg); border-color: var(--line-2); margin-bottom: 14px; }
.labd-live.idle { color: var(--muted); }
.labd-live.idle .labd-live-dot { animation: none; background: var(--muted); box-shadow: none; }

/* flag panel in the sidebar — stack input + button full-width */
.labd-flag-panel .labd-flag-input { flex: 1 1 100%; }
.labd-flag-panel .labd-flag-row .btn { flex: 1 1 100%; justify-content: center; }

/* lab info list */
.labd-info-list { margin: 0; display: flex; flex-direction: column; }
.labd-info-row { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--line-2); }
.labd-info-row:first-child { padding-top: 0; }
.labd-info-row:last-child { border-bottom: none; padding-bottom: 0; }
.labd-info-row dt { margin: 0; flex: 0 0 auto; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.labd-info-row dd { margin: 0; font-size: 13.5px; font-weight: 600; color: var(--text); text-align: right; word-break: break-word; }

@media (max-width: 900px) {
  .labd-grid { grid-template-columns: 1fr; }
  .labd-side { position: static; order: -1; }
}
@media (max-width: 560px) {
  .labd-hero { flex-direction: column-reverse; align-items: flex-start; padding: 18px 18px; }
  .labd-hero .lbx-hex,
  .labd-hero-hex { align-self: flex-start; }
  .labd-hero h1 { font-size: 22px; }
}

.labd-section {
  background: var(--card);
  border: 1px solid var(--line-2);
  border-radius: 8px;
  box-shadow: var(--shadow-sm);
  padding: 18px 20px;
  margin-bottom: 16px;
}
.labd-section > h3 {
  margin: 0 0 12px;
  font-family: var(--display);
  font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--red);
}
.labd-overview-body { font-size: 14.5px; line-height: 1.65; color: var(--text); }
.labd-overview-body p { margin: 0 0 10px; }
.labd-overview-body p:last-child { margin-bottom: 0; }

.labd-env-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.labd-env-hint { color: var(--muted); font-size: 13px; }
.labd-static { color: var(--muted); font-size: 14px; line-height: 1.6; }

/* running / transient status bar */
.labd-status {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 10px 16px;
  padding: 12px 16px; border-radius: 9px; margin-bottom: 16px;
  background: rgba(22, 163, 74, .10);
  border: 1px solid rgba(22, 163, 74, .30);
}
.labd-status.warn { background: rgba(232, 168, 0, .10); border-color: rgba(232, 168, 0, .32); }
.labd-live { display: inline-flex; align-items: center; gap: 9px; font-weight: 700; font-size: 13px; color: #16a34a; }
.labd-status.warn .labd-live { color: #b98900; }
.labd-live-dot {
  width: 9px; height: 9px; border-radius: 50%; background: currentColor;
  animation: labdPulse 1.6s infinite;
}
@keyframes labdPulse {
  0%   { box-shadow: 0 0 0 0 rgba(22, 163, 74, .45); }
  70%  { box-shadow: 0 0 0 7px rgba(22, 163, 74, 0); }
  100% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0); }
}
.labd-timer { display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono, monospace); font-weight: 700; font-size: 15px; color: var(--text); }
.labd-timer.low { color: var(--red); }

/* connection info sub-panel */
.labd-open { display: inline-flex; margin-bottom: 12px; }
.labd-conn { border: 1px solid var(--line-2); border-radius: 8px; padding: 12px 14px; background: var(--bg); margin-bottom: 12px; }

/* environment action buttons */
.labd-btn-row { display: flex; gap: 8px; flex-wrap: wrap; }
.labd-mini {
  appearance: none; cursor: pointer;
  padding: 8px 15px; border-radius: 8px; font-size: 13px; font-weight: 600;
  border: 1px solid var(--line-2); background: var(--card); color: var(--text);
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.labd-mini:hover:not(:disabled) { border-color: var(--red); color: var(--red); }
.labd-mini.danger:hover:not(:disabled) { background: var(--red); border-color: var(--red); color: #fff; }
.labd-mini:disabled { opacity: .5; cursor: not-allowed; }

.labd-flag-row { display: flex; gap: 10px; flex-wrap: wrap; }
.labd-flag-input {
  flex: 1 1 280px;
  padding: 11px 14px;
  border-radius: 8px;
  border: 1.5px solid var(--line-2);
  background: var(--bg);
  color: var(--text);
  font-family: var(--mono, monospace);
  font-size: 14px;
  transition: border-color .15s ease;
}
.labd-flag-input:focus { outline: none; border-color: var(--red); }
.labd-flag-input:disabled { opacity: .55; cursor: not-allowed; }

.labd-notice { margin-top: 14px; padding: 10px 14px; border-radius: 8px; font-size: 14px; font-weight: 600; }
.labd-notice.ok  { background: rgba(22, 163, 74, .12); color: #16a34a; }
.labd-notice.err { background: rgba(240, 28, 36, .10); color: var(--red); }

.labd-copy { margin: 8px 0; }
.labd-copy-k { font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.labd-copy-v { display: flex; gap: 8px; align-items: center; }
/* Compact action button matching the row's other buttons' padding — was
   reusing .lbx-chip (a small tag/pill style), which made "Copy" noticeably
   shorter than its neighbors (.labd-mini, .btn) in the same panel. */
.labd-copy-btn { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--text-2); background: var(--red-soft-2); border: 1px solid var(--line-2); padding: 8px 12px; border-radius: 7px; cursor: pointer; }
.labd-copy-btn:hover { border-color: var(--red-soft); color: var(--red); }
.labd-copy-v code {
  background: rgba(127, 127, 127, .14);
  padding: 7px 11px; border-radius: 6px; font-size: 13px;
  word-break: break-all; font-family: var(--mono, monospace);
}

/* ============================================================
   LAB TEST (challenge interface)
   ============================================================ */
.labx-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 24px;
  align-items: start;
}
.labx-card {
  background: var(--card);
  border: 1px solid var(--line-2);
  border-radius: 7px;
  box-shadow: var(--shadow-sm);
}

/* question panel */
.labx-q { min-height: 420px; }
.labx-q-head { text-align: center; padding: 16px 18px; border-bottom: 1px solid var(--line-2); }
.labx-q-head h3 { font-family: var(--display); font-size: 16px; font-weight: 700; color: var(--red); }
.labx-q-body { padding: 22px 24px; }
.labx-q-no { font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 14px; }
.labx-q-no b { color: var(--red); margin-right: 6px; }
.labx-q-body textarea {
  width: 100%;
  min-height: 120px;
  resize: vertical;
  font-family: var(--sans);
  font-size: 14px;
  color: var(--text);
  padding: 14px 16px;
  border: 1.5px solid var(--line-2);
  border-radius: 5px;
  background: var(--bg, #fff);
  outline: none;
  transition: border-color .15s ease;
}
.labx-q-body textarea:focus { border-color: var(--red); }
.labx-q-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; }

/* side panel */
.labx-side { display: flex; flex-direction: column; gap: 16px; }
.labx-timer {
  background: var(--card);
  border: 1px solid var(--line-2);
  border-radius: 5px;
  box-shadow: var(--shadow-sm);
  padding: 16px 18px;
  text-align: center;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-2);
}
.labx-timer b { font-family: var(--mono, monospace); color: var(--red); font-weight: 700; margin-left: 6px; letter-spacing: .04em; }
.labx-timer.low b { animation: labPulse 1s infinite; }
@keyframes labPulse { 50% { opacity: .5; } }

.labx-pal { padding: 18px; }
.labx-pal h3 { font-family: var(--display); font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 16px; }
.labx-pal-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-bottom: 16px; }
.labx-dot {
  aspect-ratio: 1;
  border: none;
  border-radius: 50%;
  background: var(--line-2);
  color: var(--text-2);
  font-family: var(--display);
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease;
}
.labx-dot:hover { transform: scale(1.08); }
.labx-dot.answered { background: #16a34a; color: #fff; }
.labx-dot.current { box-shadow: 0 0 0 3px var(--red-soft), 0 0 0 4px var(--red); }
.labx-legend { display: flex; gap: 20px; justify-content: center; padding-top: 16px; border-top: 1px solid var(--line-2); }
.labx-legend span { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--text-2); font-weight: 600; }
.labx-legend i { width: 16px; height: 16px; border-radius: 50%; display: inline-block; }
.labx-legend i.ans { background: #16a34a; }
.labx-legend i.nv { background: var(--line-2); }

.labx-vpn { padding: 16px 18px; }
.labx-vpn-h { text-align: center; font-size: 12px; font-weight: 800; letter-spacing: .1em; color: var(--red); margin-bottom: 12px; }
.labx-actions { display: flex; flex-direction: column; gap: 10px; }
.lab-act {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12px;
  border-radius: 11px;
  border: 1px solid var(--line-2);
  background: var(--card);
  color: var(--text);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background .14s ease, border-color .14s ease, transform .12s ease;
}
.lab-act:hover { background: var(--red-soft-2); border-color: var(--red-soft); }
.lab-act svg { width: 15px; height: 15px; }
.lab-act.red, .lab-act.submit {
  border-color: transparent;
  color: #fff;
  background: var(--red-grad);
  box-shadow: 0 4px 12px rgba(255, 26, 30, .25);
}
.lab-act.red:hover, .lab-act.submit:hover { transform: translateY(-1px); background: var(--red-grad); }
.lab-act.submit { margin-top: 4px; font-size: 14px; padding: 12px; }

/* ============================================================
   SUCCESS PAGE
   ============================================================ */
.labok-wrap { display: grid; place-items: center; min-height: 60vh; padding: 30px 0; }
.labok {
  width: min(620px, 100%);
  background: var(--card);
  border: 1px solid var(--line-2);
  border-radius: 24px;
  box-shadow: var(--shadow-md);
  padding: 40px 34px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.labok::before {
  content: "";
  position: absolute;
  top: -60px; left: 50%;
  transform: translateX(-50%);
  width: 320px; height: 200px;
  background: radial-gradient(circle, rgba(22, 163, 74, .16), transparent 70%);
}
.labok-ring { width: 124px; height: 124px; margin: 0 auto 22px; position: relative; }
/* Rotate ONLY the progress ring, not the check/X icon that also lives inside .labok-ring
   (a descendant selector here rotated the icon too, tilting the tick/cross). */
.labok-ring > svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.labok-ring .lr-bg { fill: none; stroke: var(--line-2); stroke-width: 8; }
.labok-ring .lr-fg { fill: none; stroke: #16a34a; stroke-width: 8; stroke-linecap: round; transition: stroke-dashoffset 1.1s cubic-bezier(.3, 1, .4, 1); }
.labok-check {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  color: #16a34a;
}
.labok-check svg { width: 52px; height: 52px; }
.labok h1 { font-family: var(--display); font-size: 28px; font-weight: 800; color: var(--text); position: relative; }
.labok p { font-size: 14.5px; color: var(--text-2); margin-top: 10px; line-height: 1.6; position: relative; }
.labok-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 28px 0; position: relative; }
.labok-stat { background: var(--red-soft-2); border: 1px solid var(--line-2); border-radius: 5px; padding: 16px 12px; }
.labok-stat .ls-v { font-family: var(--display); font-size: 22px; font-weight: 800; color: var(--text); }
.labok-stat .ls-v.green { color: #16a34a; }
.labok-stat .ls-k { font-size: 11.5px; color: var(--muted); font-weight: 600; margin-top: 4px; }
.labok-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; position: relative; }
.labok-actions .btn { justify-content: center; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 920px) {
  .labx-grid { grid-template-columns: 1fr; }
  .labx-side { order: -1; }
  .track-head { grid-template-columns: auto 1fr; }
  .track-stat { display: none; }
}
@media (max-width: 560px) {
  .labok-stats { grid-template-columns: 1fr; }
  .lab-banner-tag { display: none; }
}

/* ====================== PAGE: My Courses — design upgrade (scoped .mcx) ====================== */

/* learning overview strip */
.mcx-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 30px; }
.mcx-stat {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 14px;
  background: var(--card); border: 1px solid var(--line-2);
  border-radius: 5px; padding: 16px 18px; box-shadow: var(--shadow-sm);
  transition: transform .15s ease, box-shadow .15s ease;
}
.mcx-stat:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.mcx-stat::after { content: ""; position: absolute; right: -24px; top: -24px; width: 78px; height: 78px; border-radius: 50%; background: radial-gradient(circle, var(--red-soft), transparent 70%); }
.mcx-ic { flex: 0 0 46px; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 13px; background: var(--red-soft-2); color: var(--red); position: relative; }
.mcx-ic svg { width: 22px; height: 22px; }
.mcx-stat.green .mcx-ic { background: #e8f7ee; color: #16a34a; }
.mcx-stat.green::after { background: radial-gradient(circle, #d6f3e1, transparent 70%); }
.mcx-stat.amber .mcx-ic { background: #fff3df; color: #d98a00; }
.mcx-stat.amber::after { background: radial-gradient(circle, #ffeccb, transparent 70%); }
.mcx-stat-b { position: relative; }
.mcx-stat-b b { font-family: var(--display); font-size: 24px; font-weight: 800; color: var(--text); display: block; line-height: 1; }
.mcx-stat-b span { font-size: 12.5px; color: var(--muted); font-weight: 600; }

/* upgraded course cards (scoped — dashboard .course stays untouched) */
.mcx .course { position: relative; border-radius: 7px; overflow: hidden; border-color: var(--line-2); padding-top: 26px; }
.mcx .course::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--red-grad); }
.mcx .course.course-done::before { background: linear-gradient(90deg, #22c55e, #16a34a); }
.mcx .course:hover { transform: translateY(-4px); }
.mcx .course .c-logo { width: 50px; height: 50px; border-radius: 5px; font-size: 14px; box-shadow: var(--shadow-sm); }
.mcx .course .c-title { font-size: 19px; min-height: 0; margin-top: 12px; }

/* category shown as a pill */
.mcx .course .c-details .cd-wide {
  grid-column: 1 / -1;
  flex-direction: row; align-items: center; gap: 8px;
  background: var(--red-soft-2); border: 1px solid var(--line-2);
  border-radius: 10px; padding: 9px 12px; margin-bottom: 4px;
}
.mcx .course .c-details .cd-wide .cd-k { color: var(--red); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; font-size: 10.5px; }
.mcx .course .c-details .cd-wide .cd-v { font-size: 13px; }

/* progress: chip + thicker bar */
.mcx .course .c-prog .pt .pc { background: var(--red-soft); color: var(--red); font-weight: 700; padding: 3px 10px; border-radius: 999px; font-size: 11.5px; }
.mcx .course.course-done .c-prog .pt .pc { background: #e8f7ee; color: #16a34a; }
.mcx .course .c-prog .bar { height: 8px; }

/* Continue CTA in brand red */
.mcx .course .c-foot .btn-dark { background: var(--red-grad); border-color: transparent; box-shadow: 0 4px 12px rgba(255, 26, 30, .22); }
.mcx .course .c-foot .btn-dark:hover { transform: translateY(-1px); }

@media (max-width: 980px) { .mcx-stats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .mcx-stats { grid-template-columns: 1fr; } }

/* ====================== PAGE: My Live Classes (scoped .lc) ====================== */
.lc { padding-bottom: 8px; }

/* overview strip */
.lc-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 30px; }
.lc-stat { position: relative; overflow: hidden; display: flex; align-items: center; gap: 14px; background: var(--card); border: 1px solid var(--line-2); border-radius: 5px; padding: 16px 18px; box-shadow: var(--shadow-sm); transition: transform .15s ease, box-shadow .15s ease; }
.lc-stat:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.lc-stat::after { content: ""; position: absolute; right: -24px; top: -24px; width: 78px; height: 78px; border-radius: 50%; background: radial-gradient(circle, var(--red-soft), transparent 70%); }
.lc-ic { flex: 0 0 46px; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 13px; background: var(--red-soft-2); color: var(--red); position: relative; }
.lc-ic svg { width: 22px; height: 22px; }
.lc-stat.live .lc-ic { background: var(--red); color: #fff; }
.lc-stat.green .lc-ic { background: #e8f7ee; color: #16a34a; }
.lc-stat.green::after { background: radial-gradient(circle, #d6f3e1, transparent 70%); }
.lc-stat.amber .lc-ic { background: #fff3df; color: #d98a00; }
.lc-stat.amber::after { background: radial-gradient(circle, #ffeccb, transparent 70%); }
.lc-stat-b { position: relative; }
.lc-stat-b b { font-family: var(--display); font-size: 24px; font-weight: 800; color: var(--text); display: block; line-height: 1; }
.lc-stat-b span { font-size: 12.5px; color: var(--muted); font-weight: 600; }

/* avatars */
.lc-ava { width: 42px; height: 42px; flex: 0 0 42px; border-radius: 50%; display: grid; place-items: center; font-family: var(--display); font-weight: 700; font-size: 15px; color: #fff; background: var(--red-grad); }
.lc-ava.b2 { background: linear-gradient(135deg, #4338ca, #6d28d9); }
.lc-ava.b3 { background: linear-gradient(135deg, #0ea5a5, #0369a1); }
.lc-ava.b4 { background: linear-gradient(135deg, #d97706, #b45309); }

/* LIVE NOW banner */
.lc-live { position: relative; overflow: hidden; border-radius: 7px; padding: 32px; margin-bottom: 32px; color: #fff; box-shadow: var(--shadow-md); display: grid; grid-template-columns: 1fr auto; gap: 22px; align-items: center;
  background: radial-gradient(120% 160% at 85% 10%, #3a1320 0%, transparent 55%), linear-gradient(120deg, #161109 0%, #2a0f15 60%, #3d0d14 100%); }
.lc-live::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 26px 26px; -webkit-mask-image: radial-gradient(120% 120% at 80% 20%, #000 30%, transparent 75%); mask-image: radial-gradient(120% 120% at 80% 20%, #000 30%, transparent 75%); }
.lc-live-main { position: relative; }
.lc-live-badge { display: inline-flex; align-items: center; gap: 7px; background: rgba(255,26,30,.18); border: 1px solid rgba(255,90,92,.5); color: #ff7376; font-size: 11px; font-weight: 800; letter-spacing: .12em; padding: 5px 12px; border-radius: 999px; text-transform: uppercase; }
.lc-live-dot { width: 8px; height: 8px; border-radius: 50%; background: #ff3b3f; animation: lcPulse 1.3s infinite; }
@keyframes lcPulse { 0% { box-shadow: 0 0 0 0 rgba(255,59,63,.6); } 100% { box-shadow: 0 0 0 9px rgba(255,59,63,0); } }
.lc-live h2 { font-family: var(--display); font-size: 23px; font-weight: 800; line-height: 1.25; margin: 14px 0 10px; }
.lc-live-sub { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 13px; color: rgba(255,255,255,.72); }
.lc-live-sub span { display: inline-flex; align-items: center; gap: 7px; }
.lc-live-sub .lc-ava { width: 30px; height: 30px; flex: 0 0 30px; font-size: 12px;justify-content: center; }
.lc-live-sub svg { width: 15px; height: 15px; }
.lc-live-cta { position: relative; display: flex; flex-direction: column; gap: 10px; align-items: flex-end; }
.lc-join { display: inline-flex; align-items: center; gap: 8px; background: #fff; color: #b00d11; font-family: var(--sans); font-weight: 800; font-size: 14px; padding: 13px 24px; border-radius: 5px; border: none; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease; box-shadow: 0 6px 18px rgba(0,0,0,.25); }
.lc-join:hover { transform: translateY(-2px); }
.lc-join svg { width: 17px; height: 17px; }
.lc-watchers { font-size: 12px; color: rgba(255,255,255,.75); display: inline-flex; align-items: center; gap: 6px; }
.lc-watchers svg { width: 14px; height: 14px; }

/* upcoming list */
.lc-list { display: flex; flex-direction: column; gap: 14px; margin-bottom: 34px; }
.lc-item { display: grid; grid-template-columns: auto 1fr auto; gap: 20px; align-items: center; background: var(--card); border: 1px solid var(--line-2); border-radius: 5px; padding: 16px 20px; box-shadow: var(--shadow-sm); transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.lc-item:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--red-soft); }
.lc-item.soon { border-color: var(--red); }
.lc-date { flex: 0 0 66px; width: 66px; text-align: center; padding: 12px 0; border-radius: 5px; background: var(--red-soft-2); border: 1px solid var(--line-2); }
.lc-date .d { font-family: var(--display); font-size: 24px; font-weight: 800; color: var(--red); line-height: 1; }
.lc-date .m { font-size: 11px; font-weight: 700; text-transform: uppercase; color: var(--text-2); margin-top: 4px; }
.lc-date .w { font-size: 10px; color: var(--muted); margin-top: 2px; }
.lc-body { min-width: 0; }
.lc-t { font-family: var(--display); font-size: 16px; font-weight: 700; color: var(--text); line-height: 1.3; }
.lc-by { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.lc-by .lc-ava { width: 34px; height: 34px; flex: 0 0 34px; font-size: 12px; }
.lc-by-info .n { font-size: 13px; font-weight: 600; color: var(--text); }
.lc-by-info .r { font-size: 11.5px; color: var(--muted); }
.lc-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.lc-tag { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; color: var(--text-2); background: var(--red-soft-2); border: 1px solid var(--line-2); padding: 5px 10px; border-radius: 999px; }
.lc-tag svg { width: 13px; height: 13px; color: var(--red); }
.lc-act { display: flex; flex-direction: column; gap: 10px; align-items: flex-end; flex: 0 0 auto; }
.lc-count { font-size: 12.5px; font-weight: 700; color: var(--text-2); font-family: var(--mono, monospace); white-space: nowrap; }
.lc-item.soon .lc-count { color: var(--red); }
.lc-row-actions { display: flex; gap: 10px; align-items: center; }
.lc-bell { width: 40px; height: 40px; border-radius: 11px; border: 1px solid var(--line-2); background: var(--card); color: var(--text-2); display: grid; place-items: center; cursor: pointer; transition: background .15s ease, color .15s ease, border-color .15s ease; }
.lc-bell:hover { color: var(--red); border-color: var(--red-soft); }
.lc-bell.on { background: var(--red-soft); color: var(--red); border-color: transparent; }
.lc-bell svg { width: 18px; height: 18px; }
.lc-join-sm { display: inline-flex; align-items: center; gap: 7px; border: none; border-radius: 11px; padding: 11px 18px; font-family: var(--sans); font-size: 13px; font-weight: 700; color: #fff; background: var(--red-grad); cursor: pointer; box-shadow: 0 4px 12px rgba(255,26,30,.22); transition: transform .15s ease; white-space: nowrap; }
.lc-join-sm:hover { transform: translateY(-1px); }
.lc-join-sm svg { width: 15px; height: 15px; }
.lc-join-sm[disabled] { background: var(--line-2); color: var(--muted); box-shadow: none; cursor: not-allowed; transform: none; }

/* recorded grid */
.lc-rec-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); gap: 20px; }
.lc-rec { display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line-2); border-radius: 5px; overflow: hidden; box-shadow: var(--shadow-sm); transition: transform .15s ease, box-shadow .15s ease; }
.lc-rec:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
/* min-height:0 stops the automatic minimum size from letting a tall image
   stretch the box past its 16/9 ratio; the img is absolutely positioned so
   object-fit:cover has a definite box to crop against. */
.lc-rec-thumb { position: relative; aspect-ratio: 16 / 9; min-height: 0; overflow: hidden; display: grid; place-items: center; color: #fff;
  background: radial-gradient(120% 140% at 80% 20%, #3a1d2a 0%, transparent 55%), linear-gradient(120deg, #14110d 0%, #241019 55%, #3a0f16 100%); }
.lc-rec-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center;
  transition: transform .35s cubic-bezier(.2, .7, .3, 1); }
.lc-rec:hover .lc-rec-img { transform: scale(1.04); }
.lc-rec-code { position: absolute; z-index: 1; left: 12px; top: 12px; font-family: var(--display); font-weight: 800; font-size: 13px; letter-spacing: .04em; color: rgba(255,255,255,.85); }
/* Centrepiece for the no-image fallback, so a class without a cover reads as a
   designed empty state rather than a blank gradient. Mirrors .mcz-cover .ic. */
.lc-rec-ic { position: relative; z-index: 1; width: 46px; height: 46px; border-radius: 50%; background: rgba(255,255,255,.14); display: grid; place-items: center; color: rgba(255,255,255,.9); }
.lc-rec-ic svg { width: 22px; height: 22px; }
/* position+z-index keep the badge above the absolutely-positioned thumbnail. */
.lc-rec-play { position: relative; z-index: 1; width: 50px; height: 50px; border-radius: 50%; background: rgba(255,255,255,.92); color: #b00d11; display: grid; place-items: center; transition: transform .15s ease; }
.lc-rec:hover .lc-rec-play { transform: scale(1.1); }
.lc-rec-play svg { width: 22px; height: 22px; margin-left: 2px; }
.lc-rec-dur { position: absolute; z-index: 1; right: 10px; bottom: 10px; background: rgba(0,0,0,.6); color: #fff; font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 6px; }
/* Flex column + clamped title + margin-top:auto puts every card's button on the
   same baseline regardless of how many lines the title runs to. */
.lc-rec-body { display: flex; flex-direction: column; flex: 1; padding: 16px; }
.lc-rec-body .lc-t { font-size: 14.5px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.6em; }
.lc-rec-meta { display: flex; gap: 16px; margin-top: 9px; margin-bottom: 14px; font-size: 12px; color: var(--muted); font-weight: 600; }
.lc-rec-meta span { display: inline-flex; align-items: center; gap: 6px; }
.lc-rec-meta svg { width: 13px; height: 13px; }
.lc-rec-body .btn { margin-top: auto; width: 100%; justify-content: center; }

/* Empty states for Live Classes and Master Class. Same shape as .exm-empty on
   the Exams page — a dashed card rather than a bare line of text, which reads
   as a designed state instead of a section that failed to load. Grouped because
   the two pages want identical treatment; only the accent colour differs. */
.lc-empty, .mcz-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 6px; padding: 44px 24px; margin-bottom: 28px;
  border: 1px dashed var(--line-2); border-radius: 12px; background: rgba(255, 255, 255, .015);
}
.lc-empty-ic, .mcz-empty-ic {
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  margin-bottom: 6px; background: rgba(255, 255, 255, .05);
}
.lc-empty-ic svg, .mcz-empty-ic svg { width: 22px; height: 22px; stroke-width: 1.6; }
.lc-empty-ic svg { color: var(--red, #f01c24); opacity: .75; }
.mcz-empty-ic svg { color: #7c3aed; opacity: .8; }
.lc-empty-t, .mcz-empty-t { font-family: var(--display); font-size: 16px; font-weight: 700; color: var(--text); margin: 0; }
.lc-empty-s, .mcz-empty-s { font-size: 13px; line-height: 1.6; color: var(--text-2, var(--muted)); max-width: 420px; margin: 0 auto; }

@media (max-width: 980px) { .lc-stats { grid-template-columns: repeat(2, 1fr); } .lc-live { grid-template-columns: 1fr; } .lc-live-cta { align-items: flex-start; flex-direction: row; flex-wrap: wrap; } }
@media (max-width: 620px) { .lc-item { grid-template-columns: auto 1fr; } .lc-act { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: center; } }
@media (max-width: 540px) { .lc-stats { grid-template-columns: 1fr; } }

/* ====================== PAGE: My Exams (scoped .exx / reuses .labx test shell + .labok result) ====================== */

/* ---- redesign: next-up hero + results history (scoped .exm) ---- */
.exm { padding-bottom: 8px; }
.exm .reveal { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s cubic-bezier(.22, .61, .36, 1); }
.exm .reveal.is-visible { opacity: 1; transform: none; }
:root:not(.js-anim) .exm .reveal { opacity: 1; transform: none; }

/* available header */
.exm-ahead { display: flex; align-items: baseline; gap: 12px; margin-bottom: 14px; }
.exm-ahead h3 { font-family: var(--display); font-size: 18px; font-weight: 700; color: var(--text); }
.exm-acount { font-family: var(--mono); font-size: 11.5px; font-weight: 700; color: var(--red); background: var(--red-soft-2); padding: 3px 9px; border-radius: 999px; }

/* available exam cards — auto-fit so 1 fills the row, 2 split, 3+ wrap */
.exm-available { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 20px; margin-bottom: 32px; }
.exm-card { position: relative; overflow: hidden; display: flex; flex-direction: column;
  background: linear-gradient(125deg, #15110b 0%, #2a0f13 58%, #3d0d14 100%); color: #fff;
  border-radius: 7px; padding: 26px 28px; box-shadow: var(--shadow-md); border: 1px solid rgba(255, 255, 255, .06); }
.exm-card::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(420px 220px at 92% -25%, rgba(240, 28, 36, .42), transparent 70%),
    linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: auto, 26px 26px, 26px 26px;
  -webkit-mask-image: radial-gradient(130% 130% at 85% 15%, #000 35%, transparent 82%); mask-image: radial-gradient(130% 130% at 85% 15%, #000 35%, transparent 82%); }
.exm-card > * { position: relative; z-index: 1; }
.exm-card-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.exm-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: #ffd9da; background: rgba(240, 28, 36, .18); border: 1px solid rgba(240, 28, 36, .4); padding: 5px 10px; border-radius: 999px; }
.exm-eyebrow.urgent { color: #ffe2c2; background: rgba(217, 138, 0, .2); border-color: rgba(217, 138, 0, .5); }
.exm-dot { width: 7px; height: 7px; border-radius: 50%; background: #ff5b5c; box-shadow: 0 0 0 0 rgba(255, 91, 92, .6); animation: lcPulse 1.8s infinite; }
.exm-eyebrow.urgent .exm-dot { background: #ffb24d; }
.exm-cd-chip { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 11px; color: rgba(255, 255, 255, .78); background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); padding: 4px 9px; border-radius: 999px; white-space: nowrap; }
.exm-cd-chip svg { width: 13px; height: 13px; }
.exm-cd-chip b { font-weight: 800; color: #fff; }
.exm-card.urgent-soon .exm-cd-chip { color: #ffd2a6; border-color: rgba(217, 138, 0, .5); background: rgba(217, 138, 0, .16); }
.exm-card.urgent-soon .exm-cd-chip b { color: #ffce99; }
.exm-card-t { font-family: var(--display); font-size: 21px; line-height: 1.18; margin-bottom: 9px; }
.exm-card-course { display: inline-flex; align-items: center; gap: 7px; margin: -2px 0 10px; font-family: var(--mono); font-size: 11.5px; color: rgba(255, 255, 255, .82); }
.exm-card-course svg { flex: 0 0 auto; width: 14px; height: 14px; color: #ff8a6a; }
.exm-card-x { font-size: 13.5px; line-height: 1.6; color: rgba(255, 255, 255, .74); }
.exm-card-meta { display: flex; flex-wrap: wrap; gap: 9px 18px; margin: 16px 0 20px; }
.exm-card-meta span { display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 11.5px; color: rgba(255, 255, 255, .82); }
.exm-card-meta svg { width: 14px; height: 14px; color: #ff8a6a; }
.exm-card-foot { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: auto; }
.exm-card-foot .btn-red svg { width: 16px; height: 16px; }

/* locked until the student's final exam date (course_exam_date, forwarded as exam_gate).
   The card keeps the full red artwork of an available exam — a gated exam is still the
   student's exam, not a dead one. What marks it as locked is carried by the pieces that
   actually mean it: the LOCKED chip (no live pulse), the countdown, and a dead button in
   place of the entry link. */
.exm-eyebrow.locked { color: #ffd9da; background: rgba(240, 28, 36, .18); border-color: rgba(240, 28, 36, .4); }
.exm-eyebrow.locked svg { width: 12px; height: 12px; }

/* Locked card: details on the left, the countdown centred on the right — but only when
   the card is actually wide enough. The cards live in an auto-fit grid, so their width
   has little to do with the viewport's; the card is its own query container and the
   clock drops to a full-width strip underneath when the split would be cramped. */
.exm-card { container-type: inline-size; }
/* Basis stays auto on the default card: that card is a column, so a length basis would be
   read as a height floor and open a dead gap above the footer. The 300px is only meaningful
   on the locked card, where the row direction makes it the details column's width. */
.exm-card-body { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.exm-card.gate-locked { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 22px 34px; }
.exm-card.gate-locked .exm-card-body { flex: 1 1 300px; align-self: stretch; }

/* The clock is bled into the card artwork — no panel, no border. A soft halo behind the
   digits ties it to the card's own glow instead of sitting on top of it. Narrow default:
   its own row under the details, with a hairline to separate them. */
.exm-cdown { position: relative; flex: 1 0 100%; text-align: left;
  padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .08); }
.exm-cdown::before { content: ""; position: absolute; z-index: -1; inset: -52px -70px -46px -52px;
  background: radial-gradient(62% 72% at 62% 50%, rgba(240, 60, 66, .26), transparent 74%); }
.exm-cdown-lab { display: block; font-family: var(--mono); font-size: 10.5px; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase; color: rgba(255, 255, 255, .42); }
.exm-cdown-units { display: flex; align-items: flex-start; gap: 4px; margin: 12px 0 2px; }
.exm-cdown-u { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; }
.exm-cdown-u b { display: block; min-width: 1.62em; text-align: center;
  font-family: var(--mono); font-size: 58px; line-height: 1; font-weight: 700;
  font-variant-numeric: tabular-nums; letter-spacing: -.02em;
  color: #fff; text-shadow: 0 0 34px rgba(255, 150, 152, .3); }
.exm-cdown-u em { font-family: var(--mono); font-style: normal; font-size: 9.5px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: rgba(255, 255, 255, .38); }
.exm-cdown-sep { font-family: var(--mono); font-style: normal; font-size: 46px; font-weight: 400;
  line-height: 1; color: rgba(255, 255, 255, .2); }
.exm-cdown-sub { display: block; margin-top: 10px; max-width: 320px;
  font-family: var(--mono); font-size: 11px; color: rgba(255, 255, 255, .4); }

/* The coursework still to finish, listed under a "not yet eligible" lock: the quizzes
   the student has not passed, or the modules they sit in when the gate names only
   those. Short by construction, and capped in the markup besides. Right-aligns with
   the rest of the column on a wide card, like .exm-cdown-sub does. */
.exm-cdown-todo { margin: 8px 0 0; padding: 0; list-style: none; max-width: 320px;
  font-family: var(--mono); font-size: 11px; line-height: 1.65; color: rgba(255, 255, 255, .55); }
/* Bullet as a flex item, not absolutely positioned. It used to sit at left:3px of a
   320px-wide list whose text right-aligns with the rest of the column, which left every
   bullet stranded ~300px from the words it belongs to. As a flex item it travels with
   its text whichever edge the column is aligned to. */
.exm-cdown-todo li { display: flex; gap: 7px; }
.exm-cdown-todo li::before { content: '\2022'; flex: none; color: #ff8a6a; }
/* One quiz name per line, truncated rather than wrapped: these sit in a narrow
   column beside a lock glyph, and a wrapped name reads as two separate items. The
   span is needed because a bare text node is an anonymous flex item and cannot be
   given overflow; min-width:0 lets it shrink below its content width, without which
   a flex item refuses to and the ellipsis never appears. */
.exm-cdown-todo li span { min-width: 0; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
.exm-cdown-todo li.is-more { color: rgba(255, 255, 255, .38); }
/* Transparent, not removed: the bullet's box still reserves its width, so the
   "+N more" text stays in the same column as the names above it. */
.exm-cdown-todo li.is-more::before { color: transparent; }

/* No date yet: same slot, nothing to count. */
.exm-cdown.is-pending .exm-cdown-glyph { display: block; margin: 14px 0 6px; color: rgba(255, 255, 255, .3); }
.exm-cdown.is-pending .exm-cdown-glyph svg { width: 44px; height: 44px; stroke-width: 1.4; }

/* Wide card: the clock moves to the right, vertically centred against the details. */
@container (min-width: 780px) {
  .exm-cdown { flex: 0 1 auto; margin-left: auto; text-align: right;
    padding-top: 0; border-top: 0; }
  .exm-cdown-units { justify-content: flex-end; }
  .exm-cdown-sub { margin-left: auto; }
  /* Shrink to the widest name (capped by max-width) and push the block right, rather
     than right-aligning each row independently -- that put every bullet at a
     different x, which reads as a ragged edge rather than a list. */
  .exm-cdown-todo { width: fit-content; margin-left: auto; }
  .exm-cdown.is-pending .exm-cdown-glyph svg { margin-left: auto; }
}

/* The "Opens <date>" chip rides at the top of the clock column on a locked card, so it
   right-aligns with the countdown on a wide card (inherited text-align) and stacks with
   it on a narrow one, instead of being stranded at the edge of the half-width details
   column. Inline-flex, so the parent's text-align is what places it. */
.exm-cdown .exm-cd-chip { margin-bottom: 12px; }

/* Very narrow card (phone-width grid cell): keep the clock readable, not cropped. */
@container (max-width: 430px) {
  .exm-cdown-u b { font-size: 40px; }
  .exm-cdown-sep { font-size: 32px; }
  .exm-cdown-u em { letter-spacing: .12em; }
}

.btn-locked { display: inline-flex; align-items: center; gap: 8px; cursor: not-allowed;
  color: rgba(255, 255, 255, .62); background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .16); box-shadow: none; }
.btn-locked:hover { background: rgba(255, 255, 255, .07); transform: none; }
.btn-locked svg { width: 15px; height: 15px; }
.exm-card-close { font-family: var(--mono); font-size: 11px; color: rgba(255, 255, 255, .5); }

/* Empty / loading / error states — a calm centered panel so the page never reads as
   orphan text stacked at the top. Same bottom margin as a populated .exm-available so the
   Results section stays clearly separated whether or not there are cards above. */
.exm-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 6px; padding: 48px 24px; margin-bottom: 32px;
  border: 1px dashed var(--line-2); border-radius: 12px; background: rgba(255, 255, 255, .015);
}
.exm-empty svg.exm-empty-ic { width: 42px; height: 42px; color: rgba(255, 255, 255, .38); stroke-width: 1.5; margin-bottom: 4px; }
.exm-empty .exm-empty-t { font-family: var(--display); font-size: 16px; font-weight: 700; color: var(--text); margin: 0; }
.exm-empty .exm-empty-s { font-size: 13px; line-height: 1.6; color: var(--text-2); max-width: 430px; margin: 0 auto; }
.exm-empty .exm-raction { margin-top: 8px; }

/* results */
.exm-rhead { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.exm-rhead h3 { font-family: var(--display); font-size: 18px; font-weight: 700; color: var(--text); }
.exm-rsummary { display: flex; align-items: center; gap: 12px; font-size: 12.5px; color: var(--text-2); font-weight: 600; }
.exm-rsummary b { color: var(--text); font-weight: 800; }
.exm-rsummary .sep { width: 1px; height: 12px; background: var(--line-2); }
.exm-rlist { display: flex; flex-direction: column; gap: 12px; }
/* columns: status · title · grade · score · pill · report download */
.exm-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto auto auto; align-items: center; gap: 16px; background: var(--card); border: 1px solid var(--line-2); border-radius: 5px; padding: 16px 20px; box-shadow: var(--shadow-sm); transition: transform .15s ease, box-shadow .15s ease; }
.exm-row.pass { border-left-color: #16a34a; }
.exm-row.fail { border-left-color: var(--red); }
.exm-row:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.exm-rstatus { flex: 0 0 38px; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; }
.exm-row.pass .exm-rstatus { background: #e8f7ee; color: #16a34a; }
.exm-row.fail .exm-rstatus { background: var(--red-soft); color: var(--red); }
.exm-rstatus.missed, .exm-row.missed .exm-rstatus { background: rgba(217, 138, 0, .16); color: #d98a00; }
.exm-row.missed { opacity: .82; }
.exm-raction.is-off { opacity: .45; pointer-events: none; cursor: default; }
.exm-rpill { justify-self: end; font-family: var(--mono); font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 4px 11px; border-radius: 999px; white-space: nowrap; }
.exm-rpill.pass { color: #16a34a; background: #e8f7ee; border: 1px solid rgba(22, 163, 74, .35); }
.exm-rpill.fail { color: var(--red); background: var(--red-soft); border: 1px solid rgba(240, 28, 36, .35); }
.exm-rpill.pending { color: #d98a00; background: rgba(217, 138, 0, .14); border: 1px solid rgba(217, 138, 0, .4); }
.exm-rstatus svg { width: 18px; height: 18px; }
.exm-rmain { min-width: 0; }
.exm-rt { font-family: var(--display); font-size: 15.5px; font-weight: 700; color: var(--text); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.exm-rsub { font-family: var(--mono); font-size: 11.5px; color: var(--muted); margin-top: 4px; }
.exm-rgrade { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; font-family: var(--display); font-weight: 800; font-size: 17px; }
.exm-rgrade.g-a { background: #e8f7ee; color: #16a34a; }
.exm-rgrade.g-b { background: #e8f0ff; color: #2e6fff; }
.exm-rgrade.g-c { background: #fff3df; color: #d98a00; }
.exm-rgrade.g-f { background: var(--red-soft); color: var(--red); }
.exm-rscore { text-align: right; white-space: nowrap; }
.exm-rscore b { font-family: var(--display); font-size: 16px; font-weight: 800; color: var(--text); }
.exm-rscore b span { color: var(--muted); font-weight: 700; font-size: 13px; }
.exm-rscore i { display: block; font-family: var(--mono); font-size: 11px; color: var(--muted); font-style: normal; margin-top: 2px; }
.exm-raction { flex: 0 0 auto; font-size: 13px; font-weight: 700; color: var(--text); background: var(--card); border: 1px solid var(--line-2); padding: 8px 16px; border-radius: 9px; transition: border-color .15s ease, color .15s ease; }
.exm-raction:hover { border-color: var(--red); color: var(--red); }
.exm-raction.retry { background: var(--red-grad); color: #fff; border-color: transparent; box-shadow: var(--shadow-red); }
.exm-raction.retry:hover { color: #fff; }
/* in-row PDF report download — quieter than the row's pass/fail signal until hovered */
.exm-raction.report { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; font-size: 12.5px; color: var(--text-2); cursor: pointer; }
.exm-raction.report svg { width: 15px; height: 15px; }
.exm-raction.report:hover { border-color: var(--red); color: var(--red); }
.exm-raction.report.is-busy, .exm-raction.report:disabled { opacity: .55; cursor: default; border-color: var(--line-2); color: var(--text-2); }
.exm-rerr { font-family: var(--mono); font-size: 11px; color: var(--red); margin-top: 5px; }

@media (max-width: 860px) {
  .exm-hero { grid-template-columns: 1fr; }
  .exm-countdown { align-items: flex-start; }
}
@media (max-width: 620px) {
  .exm-row { grid-template-columns: auto 1fr auto; row-gap: 12px; }
  .exm-rgrade { grid-row: 1; grid-column: 3; }
  .exm-rscore { grid-column: 2 / 4; text-align: left; }
  .exm-raction { grid-column: 1 / 4; text-align: center; }
  .exm-raction.report { justify-content: center; }
}

/* exam instructions */
.exi-card { max-width: 900px; background: var(--card); border: 1px solid var(--line-2); border-radius: 7px; box-shadow: var(--shadow-md); padding: 24px 32px; }
.exi-card h2 { font-family: var(--display); font-size: 16px; font-weight: 700; color: var(--red); margin-bottom: 16px; }
.exi-check { display: flex; gap: 14px; align-items: flex-start; padding: 16px; border: 1.5px solid var(--line-2); border-radius: 5px; background: var(--red-soft-2); cursor: pointer; transition: border-color .15s ease; }
.exi-check:hover { border-color: var(--red-soft); }
.exi-check.on { border-color: var(--red); }
.exi-box { flex: 0 0 22px; width: 22px; height: 22px; border-radius: 6px; border: 2px solid var(--line-2); display: grid; place-items: center; color: #fff; transition: background .15s ease, border-color .15s ease; margin-top: 1px; }
.exi-check.on .exi-box { background: var(--red); border-color: var(--red); }
.exi-box svg { width: 14px; height: 14px; opacity: 0; }
.exi-check.on .exi-box svg { opacity: 1; }
.exi-check p { font-size: 13.5px; line-height: 1.7; color: var(--text-2); }
.exi-actions { display: flex; justify-content: center; margin-top: 24px; }
.exi-actions .btn[disabled] { opacity: .5; cursor: not-allowed; pointer-events: none; }

/* exam test — options (inside reused .labx-q shell) */
.exo-list { display: flex; flex-direction: column; gap: 12px; margin-top: 4px; }
.exo { display: flex; align-items: center; gap: 13px; padding: 16px; border: 1.5px solid var(--line-2); border-radius: 13px; cursor: pointer; font-size: 14.5px; color: var(--text); transition: border-color .14s ease, background .14s ease; }
.exo:hover { border-color: var(--red-soft); }
.exo.sel { border-color: var(--red); background: var(--red-soft-2); }
.exo-radio { flex: 0 0 20px; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--line-2); display: grid; place-items: center; transition: border-color .14s ease; }
.exo.sel .exo-radio { border-color: var(--red); }
.exo.sel .exo-radio::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--red-grad); }

/* extra palette dot states for exams */
.labx-dot.notans { background: var(--red); color: #fff; }
.labx-dot.review { background: #6d28d9; color: #fff; }
.labx-dot.ansrev { background: #6d28d9; color: #fff; box-shadow: inset 0 -7px 0 rgba(22, 163, 74, .9); }

/* 5-state legend */
.exx-legend { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; padding-top: 16px; border-top: 1px solid var(--line-2); margin-top: 2px; }
.exx-legend span { display: inline-flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--text-2); font-weight: 600; }
.exx-legend i { flex: 0 0 16px; width: 16px; height: 16px; border-radius: 50%; display: inline-block; }
.exx-legend i.ans { background: #16a34a; }
.exx-legend i.nv { background: var(--line-2); }
.exx-legend i.na { background: var(--red); }
.exx-legend i.mr { background: #6d28d9; }
.exx-legend i.amr { background: #6d28d9; box-shadow: inset 0 -6px 0 rgba(22, 163, 74, .9); }
.exx-legend .full { grid-column: 1 / -1; font-size: 11px; color: var(--muted); font-weight: 500; }

/* exam buttons row */
.exx-qbtns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.exx-qbtns .lab-act { width: auto; }
.exx-qbtns .spacer { flex: 1; }

/* exam result reuses .labok; pass/fail variants */
.labok.fail .lr-fg { stroke: #ff1a1e; }
.labok.fail .labok-check { color: var(--red); }
.labok.fail::before { background: radial-gradient(circle, var(--red-soft), transparent 70%); }

@media (max-width: 860px) {
  .exx-stats { grid-template-columns: repeat(2, 1fr); }
  .exx-item { grid-template-columns: 1fr; gap: 16px; }
  .exx-meta { flex-wrap: wrap; gap: 18px; }
  .exx-go { position: absolute; right: 18px; top: 18px; }
  .exx-legend { grid-template-columns: 1fr; }
}
@media (max-width: 540px) { .exx-stats { grid-template-columns: 1fr; } }

/* ====================== PAGE: Explore Courses (scoped .xc) ====================== */
.xc { padding-bottom: 8px; }

/* ---- Left filter rail layout (reuses the .lbx-* rail markup from My Labs) ---- */
/* Right column adapts to the space left of the 256px rail instead of the
   fixed 4-up grid the standalone page uses. ExploreCourses has no filter
   rail (unlike My Labs), so .xc-gridwrap is .lbx-shell's only child —
   without an explicit span it falls into grid auto-placement's first
   (256px) track instead of the full-width one, squeezing every course
   card into a narrow column with empty space beside it. */
.xc-gridwrap { min-width: 0; grid-column: 1 / -1; }
.v4-scope .xc-results { grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); }
/* Explore Courses reuses My Labs' .lbx-shell markup but has NO filter rail, so the
   256px rail track just squeezed every card into one narrow column. With no rail to
   lay out, render the shell as a plain block: .xc-gridwrap spans the full width and
   the auto-fill card grid can form multiple columns. Scoped to .xc so My Labs (.lbx)
   keeps its rail layout. */
.xc .lbx-shell { display: block; }
.xc-clear { margin-left: 12px; font-family: var(--sans); font-size: 12.5px; font-weight: 700; color: var(--red); background: none; border: none; cursor: pointer; }
.xc-clear:hover { text-decoration: underline; }
.xc .reveal { opacity: 0; transform: translateY(14px); transition: opacity .45s ease, transform .45s cubic-bezier(.22,.61,.36,1); }
.xc .reveal.is-visible { opacity: 1; transform: none; }
:root:not(.js-anim) .xc .reveal { opacity: 1; transform: none; }

/* legacy category chips — kept for reuse elsewhere */
.xc-filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 26px; }
.xc-chip { border: 1px solid var(--line-2); background: var(--card); color: var(--text-2); font-family: var(--sans); font-size: 13px; font-weight: 600; padding: 9px 16px; border-radius: 999px; cursor: pointer; transition: background .15s ease, color .15s ease, border-color .15s ease; }
.xc-chip:hover { border-color: var(--red-soft); color: var(--red); }
.xc-chip.active { background: var(--red-grad); color: #fff; border-color: transparent; box-shadow: 0 4px 12px rgba(255, 26, 30, .22); }
.xc-chip .n { opacity: .7; font-weight: 700; margin-left: 4px; }

/* grid */
.xc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 22px; }
.xc-card { display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line-2); border-radius: 7px; overflow: hidden; box-shadow: var(--shadow-sm); transition: transform .18s ease, box-shadow .18s ease; }
.xc-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }

/* banner */
.xc-banner { position: relative; aspect-ratio: 16 / 8; display: flex; align-items: center; padding: 0 20px; color: #fff; overflow: hidden; background: linear-gradient(120deg, #161109 0%, #2a0f15 60%, #3d0d14 100%); }
.xc-banner::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px); background-size: 24px 24px; -webkit-mask-image: radial-gradient(120% 120% at 75% 25%, #000 30%, transparent 75%); mask-image: radial-gradient(120% 120% at 75% 25%, #000 30%, transparent 75%); }
.xc-banner-glow { position: absolute; right: -26px; top: 50%; transform: translateY(-50%); width: 150px; height: 150px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.22), transparent 65%); }
.xc-banner-code { position: relative; font-family: var(--display); font-weight: 800; font-size: 30px; letter-spacing: -.01em; }
.xc-banner-code span { font-size: .45em; vertical-align: super; opacity: .8; }
.xc-banner.v-blue { background: linear-gradient(120deg, #0b1220 0%, #10243f 60%, #0f2f5a 100%); }
.xc-banner.v-green { background: linear-gradient(120deg, #0c1a12 0%, #10301f 60%, #0f3a26 100%); }
.xc-banner.v-purple { background: linear-gradient(120deg, #160f24 0%, #251040 60%, #2e0f4a 100%); }
.xc-banner.v-amber { background: linear-gradient(120deg, #1c1408 0%, #3a2710 60%, #4a2f0d 100%); }
.xc-banner.v-teal { background: linear-gradient(120deg, #08191c 0%, #103436 60%, #0d3a3a 100%); }
.xc-banner.v-blue .xc-banner-glow { background: radial-gradient(circle, rgba(46,144,255,.4), transparent 65%); }
.xc-banner.v-green .xc-banner-glow { background: radial-gradient(circle, rgba(34,197,94,.4), transparent 65%); }
.xc-banner.v-purple .xc-banner-glow { background: radial-gradient(circle, rgba(124,58,237,.45), transparent 65%); }
.xc-banner.v-amber .xc-banner-glow { background: radial-gradient(circle, rgba(217,138,0,.4), transparent 65%); }
.xc-banner.v-teal .xc-banner-glow { background: radial-gradient(circle, rgba(14,165,165,.4), transparent 65%); }

.xc-save { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; border-radius: 50%; background: rgba(12,12,15,.45); backdrop-filter: blur(4px); color: #fff; display: grid; place-items: center; border: none; cursor: pointer; z-index: 2; transition: transform .15s ease; }
.xc-save:hover { transform: scale(1.1); }
.xc-save svg { width: 17px; height: 17px; }
.xc-save.on { color: #ff6b6e; }
.xc-save.on svg { fill: #ff6b6e; }
.xc-badge { position: absolute; top: 12px; left: 12px; background: #fff; color: #b00d11; font-size: 10.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; padding: 4px 9px; border-radius: 7px; z-index: 2; }
.xc-badge.dark { background: rgba(12,12,15,.6); color: #fff; }

/* body */
.xc-body { padding: 16px; display: flex; flex-direction: column; flex: 1; }
.xc-cat { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--red); }
.xc-title { font-family: var(--display); font-size: 16px; font-weight: 700; color: var(--text); margin-top: 6px; line-height: 1.35; }
.xc-desc { font-size: 12.5px; color: var(--text-2); line-height: 1.5; margin-top: 8px; }
.xc-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 12px 0; font-size: 12px; color: var(--muted); font-weight: 600; }
.xc-meta span { display: inline-flex; align-items: center; gap: 5px; }
.xc-meta svg { width: 13px; height: 13px; color: var(--red); }
.xc-rate { color: #d98a00 !important; }
.xc-rate svg { color: #d98a00 !important; fill: #d98a00; }
.xc-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line-2); }
.xc-price { font-family: var(--display); font-weight: 800; font-size: 17px; color: var(--text); white-space: nowrap; }
.xc-price s { color: var(--muted); font-weight: 600; font-size: 12px; margin-left: 6px; }
.xc-price .free { color: #16a34a; }
.xc-foot .btn { padding: 9px 16px; }

.xc-empty { grid-column: 1 / -1; text-align: center; padding: 56px 20px; color: var(--muted); font-weight: 600; }
.xc-empty svg { width: 40px; height: 40px; opacity: .4; display: block; margin: 0 auto 12px; }

/* ====================== PAGE: Course Info / Buy (scoped .ci — reuses .cdx layout) ====================== */

/* hero banner (static, no play button) */
.ci-hero { position: relative; overflow: hidden; border-radius: 5px; aspect-ratio: 16 / 6; display: flex; align-items: center; padding: 0 28px; color: #fff; margin-bottom: 22px; box-shadow: var(--shadow-md);
  background: radial-gradient(120% 160% at 85% 15%, #3a1320 0%, transparent 55%), linear-gradient(120deg, #161109 0%, #2a0f15 60%, #3d0d14 100%); }
.ci-hero::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 26px 26px; -webkit-mask-image: radial-gradient(120% 120% at 80% 20%, #000 30%, transparent 75%); mask-image: radial-gradient(120% 120% at 80% 20%, #000 30%, transparent 75%); }
.ci-hero-code { position: relative; font-family: var(--display); font-weight: 800; font-size: clamp(30px, 6vw, 52px); letter-spacing: -.02em; }
.ci-hero-code i { color: #ff5b5c; font-style: normal; }
.ci-hero-code span { font-size: .4em; vertical-align: super; color: #ff5b5c; }
.ci-hero-tag { position: relative; margin-left: 16px; padding-left: 16px; border-left: 2px solid rgba(255,255,255,.2); }
.ci-hero-tag b { display: block; font-family: var(--display); font-size: 15px; font-weight: 700; }
.ci-hero-tag span { display: block; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.65); margin-top: 4px; }

/* section blocks */
.ci-sec { margin-bottom: 30px; }
.ci-req { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.ci-req li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--text-2); line-height: 1.5; }
.ci-req li svg { width: 18px; height: 18px; flex: 0 0 18px; margin-top: 1px; color: var(--red); }

/* rating chip in stats */
.ci-stars { color: #d98a00; font-weight: 800; display: inline-flex; align-items: center; gap: 5px; }
.ci-stars svg { width: 15px; height: 15px; fill: #d98a00; }

/* ---- BUY card (reuses .cdx-enroll shell) ---- */
.ci-buy .ci-poster { position: relative; overflow: hidden; border-radius: 5px; aspect-ratio: 16 / 9; display: grid; place-items: center; color: #fff; margin-bottom: 16px;
  background: radial-gradient(120% 140% at 80% 20%, #3a1d2a 0%, transparent 55%), linear-gradient(120deg, #14110d 0%, #241019 55%, #3a0f16 100%); }
.ci-poster-code { font-family: var(--display); font-weight: 800; font-size: 34px; letter-spacing: -.01em; }
.ci-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; margin-bottom: 4px; }
.ci-price .now { font-family: var(--display); font-size: 32px; font-weight: 800; color: var(--text); line-height: 1; }
.ci-price .now.free { color: #16a34a; }
.ci-price .was { font-size: 15px; color: var(--muted); text-decoration: line-through; }
.ci-price .off { font-size: 11.5px; font-weight: 800; color: #16a34a; background: #e8f7ee; padding: 4px 9px; border-radius: 999px; }
.ci-deadline { font-size: 12.5px; color: var(--red); font-weight: 700; margin-bottom: 16px; display: inline-flex; align-items: center; gap: 6px; }
.ci-deadline svg { width: 14px; height: 14px; }
.ci-buy-btns { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
.ci-buy-btns .btn { width: 100%; justify-content: center; }
.ci-incl-h { font-family: var(--display); font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 12px; }
.ci-mini { display: flex; gap: 14px; justify-content: center; margin-top: 14px; }
.ci-mini button { display: inline-flex; align-items: center; gap: 6px; border: none; background: none; color: var(--text-2); font-family: var(--sans); font-size: 12.5px; font-weight: 600; cursor: pointer; }
.ci-mini button:hover { color: var(--red); }
.ci-mini svg { width: 15px; height: 15px; }

/* curriculum activity: lock + free preview tag (no player) */
.cdx .act-cta.free { color: #16a34a; }
.ci-preview-note { font-size: 12.5px; color: var(--muted); margin-top: 10px; }

/* ====================== PAGE: My Fees (scoped .fee) ====================== */
.fee-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.fee-tab { border: 1px solid var(--line-2); background: var(--card); color: var(--text-2); font-family: var(--sans); font-size: 13px; font-weight: 600; padding: 12px 16px; border-radius: 5px; cursor: pointer; transition: background .15s ease, color .15s ease, border-color .15s ease; }
.fee-tab:hover { border-color: var(--red-soft); color: var(--red); }
.fee-tab.active { background: var(--red-grad); color: #fff; border-color: transparent; box-shadow: 0 4px 12px rgba(255,26,30,.22); }
.fee-summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; background: var(--card); border: 1px solid var(--line-2); border-radius: 7px; padding: 24px; box-shadow: var(--shadow-sm); margin-bottom: 32px; }
.fee-sum-info h2 { font-family: var(--display); font-size: 18px; font-weight: 700; color: var(--text); }
.fee-sum-info .dates { font-size: 12.5px; color: var(--muted); font-weight: 600; margin-top: 6px; }
.fee-total { background: var(--red-soft-2); border: 1px solid var(--line-2); border-radius: 5px; padding: 14px 22px; text-align: right; min-width: 180px; }
.fee-total .k { font-size: 11.5px; color: var(--muted); font-weight: 600; }
.fee-total .v { font-family: var(--display); font-size: 26px; font-weight: 800; color: var(--text); margin-top: 4px; }
.fee-total.due .v { color: var(--red); }

.fee-sec-h { font-family: var(--display); font-size: 18px; font-weight: 700; color: var(--text); margin: 0 0 14px; }
.fee-card { background: var(--card); border: 1px solid var(--line-2); border-radius: 5px; box-shadow: var(--shadow-sm); overflow: hidden; margin-bottom: 30px; }
.fee-table { width: 100%; border-collapse: collapse; }
.fee-table th { text-align: left; font-size: 12px; font-weight: 700; color: var(--text-2); text-transform: uppercase; letter-spacing: .04em; padding: 16px 20px; border-bottom: 1px solid var(--line-2); }
.fee-table td { font-size: 13.5px; color: var(--text); padding: 16px 20px; border-bottom: 1px solid var(--line-2); }
.fee-table tr:last-child td { border-bottom: none; }

/* Payment history now carries attempts that never became payments (declined, abandoned, or
   taken-but-not-recorded). They must read as clearly not-a-payment without shouting: a
   successful history should stay calm, and a student scanning it should not mistake a
   declined attempt for money that left their account. */
.fee-pay-unpaid td { color: var(--text-2); }
.fee-pay-status { display: inline-block; font-weight: 600; }
.fee-pay-status.is-failed { color: var(--red); }
.fee-pay-status.is-attention { color: #d97706; }
html[data-theme="dark"] .fee-pay-status.is-attention { color: #fbbf24; }
/* The reason and the reference sit under the status: a bare "Failed" only raises the
   question this row was added to answer. */
.fee-pay-detail, .fee-pay-ref { display: block; font-size: 11.5px; color: var(--muted); margin-top: 3px; }
.fee-pay-ref { font-family: var(--mono, monospace); font-size: 10.5px; word-break: break-all; }
.fee-pay-unpaid td[data-k="Amount"] { text-decoration: line-through; text-decoration-thickness: 1px; }
/* Right-align currency columns for scannability — the rest of the table
   (dates, status, actions) stays left-aligned. :not(.fee-empty-act) excludes
   the colspan "No EMIs/payments yet" empty-state row, which reuses the
   EMI Amount column's data-k for its own unrelated full-width message. */
.fee-table th[data-k="EMI Amount"], .fee-table td[data-k="EMI Amount"]:not(.fee-empty-act),
.fee-table th[data-k="Due Amount"], .fee-table td[data-k="Due Amount"]:not(.fee-empty-act),
.fee-table th[data-k="Amount"], .fee-table td[data-k="Amount"]:not(.fee-empty-act) {
  text-align: right;
}
.fee-table tbody tr:hover { background: var(--red-soft-2); }
.fee-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; padding: 4px 12px; border-radius: 999px; }
.fee-pill.paid { color: #16a34a; background: #e8f7ee; }
.fee-pill.due { color: var(--red); background: var(--red-soft); }
.fee-pay { display: inline-flex; align-items: center; gap: 6px; border: none; border-radius: 9px; padding: 8px 16px; font-family: var(--sans); font-size: 12.5px; font-weight: 700; color: #fff; background: var(--red-grad); cursor: pointer; }
.fee-empty-act { color: var(--muted); }
@media (max-width: 720px) { .fee-table thead { display: none; } .fee-table tr { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; padding: 14px 16px; border-bottom: 1px solid var(--line-2); } .fee-table td { border: none; padding: 4px 0; } .fee-table td::before { content: attr(data-k); display: block; font-size: 10.5px; color: var(--muted); font-weight: 700; text-transform: uppercase; } }

/* ====================== PAGE: My Master Class (scoped .mcz) ====================== */
.mcz-feat { position: relative; overflow: hidden; border-radius: 7px; padding: 32px; margin-bottom: 32px; color: #fff; box-shadow: var(--shadow-md); display: grid; grid-template-columns: 1fr auto; gap: 22px; align-items: center;
  background: radial-gradient(120% 160% at 88% 12%, #2a1840 0%, transparent 55%), linear-gradient(120deg, #120f1c 0%, #1c1233 55%, #2b1147 100%); }
.mcz-feat::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 26px 26px; -webkit-mask-image: radial-gradient(120% 120% at 82% 18%, #000 30%, transparent 75%); mask-image: radial-gradient(120% 120% at 82% 18%, #000 30%, transparent 75%); }
.mcz-feat-main { position: relative; }
.mcz-tag { display: inline-flex; align-items: center; gap: 7px; background: rgba(167,139,250,.2); border: 1px solid rgba(167,139,250,.5); color: #c4b5fd; font-size: 11px; font-weight: 800; letter-spacing: .12em; padding: 5px 12px; border-radius: 999px; text-transform: uppercase; }
.mcz-feat h2 { font-family: var(--display); font-size: 24px; font-weight: 800; margin: 14px 0 10px; line-height: 1.25; }
.mcz-feat-sub { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 13px; color: rgba(255,255,255,.72); }
.mcz-feat-sub span { display: inline-flex; align-items: center; gap: 7px; }
.mcz-feat-sub svg { width: 15px; height: 15px; }
.mcz-feat-cta { position: relative; }
.mcz-join { display: inline-flex; align-items: center; gap: 8px; background: #fff; color: #5b21b6; font-family: var(--sans); font-weight: 800; font-size: 14px; padding: 13px 24px; border-radius: 5px; border: none; cursor: pointer; box-shadow: 0 6px 18px rgba(0,0,0,.25); transition: transform .15s ease; }
.mcz-join:hover { transform: translateY(-2px); }
.mcz-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }
.mcz-card { display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line-2); border-radius: 7px; overflow: hidden; box-shadow: var(--shadow-sm); transition: transform .18s ease, box-shadow .18s ease; }
.mcz-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
/* See .lc-rec-thumb — same fix: min-height:0 keeps the ratio, and the absolutely
   positioned img gives object-fit:cover a definite box to crop against. */
.mcz-cover { position: relative; aspect-ratio: 16 / 8; min-height: 0; overflow: hidden; display: grid; place-items: center; color: #fff;
  background: radial-gradient(120% 140% at 80% 20%, #2a1840 0%, transparent 55%), linear-gradient(120deg, #120f1c 0%, #221540 55%, #2b1147 100%); }
.mcz-cover-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center;
  transition: transform .35s cubic-bezier(.2, .7, .3, 1); }
.mcz-card:hover .mcz-cover-img { transform: scale(1.04); }
.mcz-cover .ic { position: relative; z-index: 1; width: 52px; height: 52px; border-radius: 50%; background: rgba(255,255,255,.14); display: grid; place-items: center; }
.mcz-cover .ic svg { width: 24px; height: 24px; }
.mcz-cover .pill { position: absolute; z-index: 1; top: 12px; left: 12px; background: #fff; color: #5b21b6; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; padding: 4px 9px; border-radius: 7px; }
.mcz-body { display: flex; flex-direction: column; flex: 1; padding: 16px; }
.mcz-card-t { font-family: var(--display); font-size: 16px; font-weight: 700; color: var(--text); line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.7em; }
.mcz-by { display: flex; align-items: center; gap: 10px; margin: 12px 0; }
.mcz-ava { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-family: var(--display); font-weight: 700; font-size: 12px; color: #fff; background: linear-gradient(135deg,#7c3aed,#5b21b6); flex: 0 0 32px; }
.mcz-by .n { font-size: 13px; font-weight: 600; color: var(--text); }
.mcz-by .r { font-size: 11.5px; color: var(--muted); }
.mcz-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: var(--muted); font-weight: 600; margin-bottom: 14px; }
.mcz-meta span { display: inline-flex; align-items: center; gap: 5px; }
.mcz-meta svg { width: 13px; height: 13px; color: #7c3aed; }
.mcz-body .btn { margin-top: auto; width: 100%; justify-content: center; }

/* ====================== PAGE: Announcements (scoped .an) ======================
   "Transmission feed" — a pinned broadcast hero over a vertical timeline of
   incoming announcements. Monospace meta + category-coloured signal nodes give
   it a changelog / ops-log character instead of a generic stack of cards. */

/* Per-category accent (drives node, tag, hover outline). --c-soft/-line are
   derived so they adapt to both light and dark without per-theme overrides. */
.an [data-cat="general"] { --c: #f01c24; }
.an [data-cat="exam"]    { --c: #3b82f6; }
.an [data-cat="lab"]     { --c: #16a34a; }
.an [data-cat="event"]   { --c: #8b5cf6; }
.an [data-cat] { --c-soft: color-mix(in srgb, var(--c) 14%, transparent);
                 --c-line: color-mix(in srgb, var(--c) 42%, transparent); }

/* ---- Filter bar ---- */
.an-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.an-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.an-chip { border: 1px solid var(--line-2); background: var(--card); color: var(--text-2); font-family: var(--mono); font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 8px 16px; border-radius: 8px; cursor: pointer; transition: .15s; }
.an-chip:hover { border-color: var(--c, var(--red)); color: var(--text); }
.an-chip.active { background: var(--ink); color: #fff; border-color: var(--ink); }
.an-count { font-family: var(--mono); font-size: 11.5px; font-weight: 700; color: var(--muted); letter-spacing: .04em; white-space: nowrap; }
.an-count b { color: var(--red); }

/* ---- Featured / pinned broadcast ---- */
.an-feat { position: relative; overflow: hidden; border-radius: 7px; padding: 30px 32px; margin-bottom: 30px; color: #fff;
  background: linear-gradient(125deg, #15110b 0%, #2a0f13 58%, #3d0d14 100%);
  border: 1px solid rgba(255,255,255,.06); box-shadow: var(--shadow-md); }
.an-feat::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(440px 220px at 88% -12%, rgba(240,28,36,.4), transparent 70%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 1px, transparent 1px 3px); }
.an-feat::after { content: ""; position: absolute; right: -60px; top: -64px; width: 230px; height: 230px; border-radius: 50%; border: 1.5px dashed rgba(255,255,255,.14); pointer-events: none; }
.an-feat > * { position: relative; z-index: 1; }
.an-feat-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 15px; }
.an-feat-pin { display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #ffd9da; background: rgba(240,28,36,.18); border: 1px solid rgba(240,28,36,.42); padding: 5px 10px; border-radius: 7px; }
.an-feat-pin svg { width: 13px; height: 13px; }
.an-feat-id { font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: .06em; color: rgba(255,255,255,.55); display: inline-flex; align-items: center; gap: 7px; }
.an-feat-id i { width: 7px; height: 7px; border-radius: 50%; background: #ff5b5c; box-shadow: 0 0 0 0 rgba(255,91,92,.6); animation: lcPulse 1.8s infinite; }
.an-feat-t { font-family: var(--display); font-size: 24px; line-height: 1.18; margin-bottom: 10px; max-width: 40ch; }
.an-feat-x { font-size: 14px; line-height: 1.65; color: rgba(255,255,255,.74); max-width: 64ch; }
.an-feat-foot { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 22px; }
.an-read { display: inline-flex; align-items: center; gap: 8px; background: #fff; color: #15110b; font-weight: 700; font-size: 13px; padding: 10px 16px; border-radius: 9px; transition: transform .15s, box-shadow .15s; }
.an-read:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(0,0,0,.34); }
.an-read svg { width: 16px; height: 16px; }
.an-feat-time { font-family: var(--mono); font-size: 11.5px; color: rgba(255,255,255,.5); letter-spacing: .04em; }

/* ---- Timeline feed ---- */
.an-feed { position: relative; }
.an-feed::before { content: ""; position: absolute; left: 21px; top: 8px; bottom: 8px; width: 2px;
  background: linear-gradient(180deg, var(--line-2), color-mix(in srgb, var(--line-2) 25%, transparent)); }
.an-row { position: relative; display: grid; grid-template-columns: 44px 1fr; align-items: start; padding-bottom: 16px; }
.an-row:last-child { padding-bottom: 0; }
.an-node { position: relative; z-index: 1; margin: 19px auto 0; width: 14px; height: 14px; border-radius: 50%; background: var(--c);
  box-shadow: 0 0 0 4px var(--topbar-bg), 0 0 0 5px var(--c-line); }
.an-row.unread .an-node::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--c); animation: lcPulse 2s infinite; }
.an-card { position: relative; background: var(--card); border: 1px solid var(--line-2); border-radius: 5px; padding: 16px 18px; box-shadow: var(--shadow-sm); transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.an-card::before { content: ""; position: absolute; left: -7px; top: 21px; width: 12px; height: 12px; transform: rotate(45deg); background: var(--card); border-left: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); }
.an-row:hover .an-card { transform: translateX(2px); box-shadow: var(--shadow-md); border-color: var(--c-line); }
.an-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 7px; }
.an-tag { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--c); background: var(--c-soft); padding: 4px 9px; border-radius: 6px; }
.an-tag svg { width: 13px; height: 13px; }
.an-when { font-family: var(--mono); font-size: 11.5px; color: var(--muted); font-weight: 600; }
.an-new { margin-left: auto; font-family: var(--mono); font-size: 10px; font-weight: 800; letter-spacing: .06em; color: #fff; background: var(--red); padding: 3px 7px; border-radius: 5px; }
.an-h { font-family: var(--display); font-size: 16px; font-weight: 700; color: var(--text); line-height: 1.3; }
.an-p { font-size: 13px; color: var(--text-2); line-height: 1.6; margin-top: 6px; }
.an-empty { text-align: center; color: var(--muted); font-family: var(--mono); font-size: 13px; padding: 40px 0; }

/* reveal-on-scroll (staggered via inline transition-delay) */
.an .reveal { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s cubic-bezier(.22,.61,.36,1); }
.an .reveal.is-visible { opacity: 1; transform: none; }
:root:not(.js-anim) .an .reveal { opacity: 1; transform: none; }

@media (max-width: 620px) {
  .an-feat { padding: 22px 20px; }
  .an-feat-t { font-size: 20px; }
}

/* Notifications list page (/notifications) */
.nl { padding: 16px; }
.nl-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.nl-count { font-family: var(--mono); font-size: 11.5px; font-weight: 700; color: var(--muted); letter-spacing: .04em; white-space: nowrap; }
.nl-count b { color: var(--red); }
.nl-clear { border: 1px solid var(--line-2); background: var(--card); color: var(--text-2); font-family: var(--mono); font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 8px 14px; border-radius: 8px; cursor: pointer; transition: .15s; }
.nl-clear:hover { border-color: var(--red); color: var(--text); }
.nl-clear:disabled { opacity: .5; cursor: default; }
.nl-list { display: flex; flex-direction: column; gap: 12px; }
.nl-row { display: grid; grid-template-columns: 52px 1fr; gap: 16px; align-items: start; background: var(--card); border: 1px solid var(--line-2); border-radius: 10px; padding: 16px; box-shadow: var(--shadow-sm); transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.nl-row:hover { transform: translateX(2px); box-shadow: var(--shadow-md); }
.nl-row.unread { border-color: var(--red); }
.nl-thumb { position: relative; width: 52px; height: 52px; border-radius: 10px; overflow: hidden; background: var(--red-soft, rgba(240,28,36,.08)); display: grid; place-items: center; color: var(--red); flex: none; }
.nl-thumb svg { width: 22px; height: 22px; }
.nl-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.nl-body { min-width: 0; }
.nl-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 5px; }
.nl-when { font-family: var(--mono); font-size: 11.5px; color: var(--muted); font-weight: 600; }
.nl-new { margin-left: auto; font-family: var(--mono); font-size: 10px; font-weight: 800; letter-spacing: .06em; color: #fff; background: var(--red); padding: 3px 7px; border-radius: 5px; }
.nl-t { font-family: var(--display); font-size: 15px; font-weight: 700; color: var(--text); line-height: 1.3; }
.nl-p { font-size: 13px; color: var(--text-2); line-height: 1.6; margin-top: 4px; }
.nl-empty { text-align: center; color: var(--muted); font-family: var(--mono); font-size: 13px; padding: 40px 0; }

/* ====================== PAGE: My Chats (scoped .ch) ====================== */
.ch-wrap { display: grid; grid-template-columns: 320px 1fr; gap: 18px; height: calc(100vh - 220px); min-height: 460px; }
.ch-panel { background: var(--card); border: 1px solid var(--line-2); border-radius: 7px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; overflow: hidden; }
.ch-search { padding: 14px; border-bottom: 1px solid var(--line-2); }
.ch-search input { width: 100%; border: 1px solid var(--line-2); background: var(--red-soft-2); border-radius: 10px; padding: 12px 16px; font-family: var(--sans); font-size: 13px; color: var(--text); outline: none; }
.ch-search input:focus { border-color: var(--red); }
.ch-list { overflow-y: auto; flex: 1; }
.ch-conv { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 13px 16px; cursor: pointer; border-bottom: 1px solid var(--line-2); transition: background .12s ease; }
.ch-conv:hover { background: var(--red-soft-2); }
.ch-conv.active { background: var(--red-soft); }
.ch-ava { width: 42px; height: 42px; flex: 0 0 42px; border-radius: 50%; display: grid; place-items: center; font-family: var(--display); font-weight: 700; font-size: 15px; color: #fff; background: var(--red-grad); position: relative; }
.ch-ava.b2 { background: linear-gradient(135deg,#4338ca,#6d28d9); } .ch-ava.b3 { background: linear-gradient(135deg,#0ea5a5,#0369a1); } .ch-ava.b4 { background: linear-gradient(135deg,#d97706,#b45309); } .ch-ava.b5 { background: linear-gradient(135deg,#16a34a,#15803d); }
.ch-ava .on { position: absolute; right: 0; bottom: 0; width: 11px; height: 11px; border-radius: 50%; background: #16a34a; border: 2px solid var(--card); }
.ch-ci { min-width: 0; }
.ch-ci .n { font-size: 13.5px; font-weight: 700; color: var(--text); }
.ch-ci .last { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 2px; }
.ch-cm { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.ch-cm .t { font-size: 11px; color: var(--muted); }
.ch-cm .badge { background: var(--red-grad); color: #fff; font-size: 10.5px; font-weight: 700; min-width: 18px; height: 18px; border-radius: 999px; display: grid; place-items: center; padding: 0 5px; }
/* thread */
.ch-thread { display: flex; flex-direction: column; }
.ch-head { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--line-2); }
.ch-head .n { font-family: var(--display); font-size: 15px; font-weight: 700; color: var(--text); }
.ch-head .s { font-size: 11.5px; color: #16a34a; font-weight: 600; }
.ch-msgs { flex: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 12px; background: var(--red-soft-2); }
.ch-day { text-align: center; font-size: 11px; color: var(--muted); font-weight: 600; margin: 4px 0; }
.ch-bubble { max-width: 72%; padding: 11px 15px; border-radius: 5px; font-size: 13.5px; line-height: 1.5; }
.ch-bubble.them { align-self: flex-start; background: var(--card); border: 1px solid var(--line-2); color: var(--text); border-bottom-left-radius: 5px; }
.ch-bubble.me { align-self: flex-end; background: var(--red-grad); color: #fff; border-bottom-right-radius: 5px; }
.ch-bubble .meta { display: block; font-size: 10px; margin-top: 5px; opacity: .7; }
.ch-input { display: flex; gap: 10px; padding: 14px; border-top: 1px solid var(--line-2); }
.ch-input input { flex: 1; border: 1px solid var(--line-2); background: var(--red-soft-2); border-radius: 5px; padding: 12px 16px; font-family: var(--sans); font-size: 14px; color: var(--text); outline: none; }
.ch-input input:focus { border-color: var(--red); }
.ch-send { flex: 0 0 46px; width: 46px; height: 46px; border: none; border-radius: 5px; background: var(--red-grad); color: #fff; display: grid; place-items: center; cursor: pointer; transition: transform .15s ease; }
.ch-send:hover { transform: scale(1.05); }
.ch-send svg { width: 19px; height: 19px; }
@media (max-width: 760px) { .ch-wrap { grid-template-columns: 1fr; height: auto; } .ch-panel.ch-thread { min-height: 480px; } }

/* ====================== PAGE: New Articles (scoped .ar) ====================== */
.ar-feat { display: grid; grid-template-columns: 1.3fr 1fr; gap: 0; border-radius: 7px; overflow: hidden; border: 1px solid var(--line-2); box-shadow: var(--shadow-md); margin-bottom: 32px; background: var(--card); }
.ar-feat-cover { position: relative; min-height: 280px; color: #fff; display: flex; align-items: flex-end; padding: 24px;
  background: radial-gradient(120% 140% at 80% 20%, #3a1d2a 0%, transparent 55%), linear-gradient(120deg, #14110d 0%, #241019 55%, #3a0f16 100%); }
.ar-feat-cover .tag { position: absolute; top: 18px; left: 18px; background: var(--red-grad); color: #fff; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; padding: 5px 11px; border-radius: 7px; }
.ar-feat-cover .big { position: relative; font-family: var(--display); font-size: 26px; font-weight: 800; line-height: 1.2; }
.ar-feat-body { padding: 26px; display: flex; flex-direction: column; justify-content: center; }
.ar-feat-body .cat { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--red); }
.ar-feat-body h2 { font-family: var(--display); font-size: 22px; font-weight: 700; color: var(--text); margin: 8px 0 10px; line-height: 1.3; }
.ar-feat-body p { font-size: 14px; color: var(--text-2); line-height: 1.6; }
.ar-meta { display: flex; align-items: center; gap: 12px; margin-top: 16px; font-size: 12.5px; color: var(--muted); font-weight: 600; }
.ar-meta .au { display: inline-flex; align-items: center; gap: 8px; }
.ar-au-ava { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-family: var(--display); font-weight: 700; font-size: 11px; color: #fff; background: var(--red-grad); }
.ar-feat-body .btn { align-self: flex-start; margin-top: 18px; }
.ar-filters { margin-bottom: 22px; }
.ar-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 22px; }
.ar-card { background: var(--card); border: 1px solid var(--line-2); border-radius: 7px; overflow: hidden; box-shadow: var(--shadow-sm); transition: transform .18s ease, box-shadow .18s ease; cursor: pointer; display: flex; flex-direction: column; }
.ar-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.ar-cover { position: relative; aspect-ratio: 16 / 9; color: #fff; display: flex; align-items: flex-end; padding: 14px;
  background: radial-gradient(120% 140% at 80% 20%, #1a2030 0%, transparent 55%), linear-gradient(120deg, #0f1420 0%, #15243f 60%, #122f57 100%); }
.ar-cover.v-red { background: radial-gradient(120% 140% at 80% 20%, #3a1d2a 0%, transparent 55%), linear-gradient(120deg, #14110d 0%, #241019 55%, #3a0f16 100%); }
.ar-cover.v-green { background: radial-gradient(120% 140% at 80% 20%, #0c1a12 0%, transparent 55%), linear-gradient(120deg, #0c1a12 0%, #10301f 55%, #0f3a26 100%); }
.ar-cover.v-purple { background: radial-gradient(120% 140% at 80% 20%, #160f24 0%, transparent 55%), linear-gradient(120deg, #160f24 0%, #251040 55%, #2e0f4a 100%); }
.ar-cover .tag { position: absolute; top: 12px; left: 12px; background: rgba(12,12,15,.55); backdrop-filter: blur(4px); color: #fff; font-size: 10.5px; font-weight: 700; padding: 4px 9px; border-radius: 7px; }
.ar-cover .ttl { position: relative; font-family: var(--display); font-size: 17px; font-weight: 800; line-height: 1.2; }
.ar-body { padding: 16px; display: flex; flex-direction: column; flex: 1 1 auto; }
.ar-card .cat { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--red); }
.ar-card h3 { font-family: var(--display); font-size: 15.5px; font-weight: 700; color: var(--text); margin: 6px 0 8px; line-height: 1.35; }
.ar-card p { font-size: 12.5px; color: var(--text-2); line-height: 1.55; }
.ar-card .ar-meta { margin-top: auto; padding-top: 16px; font-size: 12px; }
@media (max-width: 720px) { .ar-feat { grid-template-columns: 1fr; } }

/* ====================== PAGE: Article detail (scoped .adx) ====================== */
.adx { max-width: 880px; margin: 0 auto; }
.adx-cover { position: relative; overflow: hidden; border-radius: 7px; aspect-ratio: 16 / 6; display: flex; align-items: flex-end; padding: 26px; color: #fff; margin-bottom: 22px; box-shadow: var(--shadow-md);
  background: radial-gradient(120% 140% at 80% 20%, #3a1d2a 0%, transparent 55%), linear-gradient(120deg, #14110d 0%, #241019 55%, #3a0f16 100%); }
.adx-cover::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 26px 26px; -webkit-mask-image: radial-gradient(120% 120% at 80% 18%, #000 30%, transparent 75%); mask-image: radial-gradient(120% 120% at 80% 18%, #000 30%, transparent 75%); }
.adx-cover .tag { position: absolute; top: 18px; left: 18px; background: var(--red-grad); color: #fff; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; padding: 5px 11px; border-radius: 7px; }
.adx-cover h1 { position: relative; font-family: var(--display); font-size: clamp(24px, 4vw, 36px); font-weight: 800; line-height: 1.18; max-width: 80%; }
.adx-head-meta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 26px; font-size: 13px; color: var(--muted); font-weight: 600; }
.adx-head-meta .au { display: inline-flex; align-items: center; gap: 9px; color: var(--text); }
.adx-au-ava { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-family: var(--display); font-weight: 700; font-size: 12px; color: #fff; background: var(--red-grad); }
.adx-share { margin-left: auto; display: flex; gap: 8px; }
.adx-share button { width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--card); color: var(--text-2); display: grid; place-items: center; cursor: pointer; transition: .15s; }
.adx-share button:hover { color: var(--red); border-color: var(--red-soft); }
.adx-share svg { width: 16px; height: 16px; }
.adx-body p { font-size: 15.5px; line-height: 1.85; color: var(--text-2); margin-bottom: 18px; }
.adx-body p .lead { font-size: 17px; color: var(--text); }
.adx-body h2 { font-family: var(--display); font-size: 23px; font-weight: 700; color: var(--text); margin: 30px 0 12px; }
.adx-body h3 { font-family: var(--display); font-size: 17px; font-weight: 700; color: var(--text); margin: 24px 0 10px; }
.adx-body ul { margin: 0 0 18px; padding-left: 22px; color: var(--text-2); font-size: 15px; line-height: 1.85; }
.adx-body ul li { margin-bottom: 6px; }
.adx-body blockquote { margin: 22px 0; padding: 16px 20px; border-left: 4px solid var(--red); background: var(--red-soft-2); border-radius: 0 12px 12px 0; color: var(--text); font-size: 16px; font-style: italic; }
.adx-body pre { margin: 20px 0; background: #15120d; color: #e7e2d6; border-radius: 5px; padding: 16px 18px; overflow-x: auto; font-family: var(--mono, monospace); font-size: 13px; line-height: 1.7; }
.adx-body code { font-family: var(--mono, monospace); font-size: 13px; background: var(--red-soft-2); color: var(--red); padding: 2px 6px; border-radius: 6px; }
.adx-body pre code { background: none; color: inherit; padding: 0; }
.adx-tagrow { display: flex; flex-wrap: wrap; gap: 8px; margin: 28px 0; }
.adx-tagrow span { font-size: 12.5px; font-weight: 600; color: var(--text-2); background: var(--red-soft-2); border: 1px solid var(--line-2); padding: 7px 13px; border-radius: 999px; }
.adx-author { display: flex; gap: 16px; align-items: center; background: var(--card); border: 1px solid var(--line-2); border-radius: 5px; padding: 20px; box-shadow: var(--shadow-sm); margin: 10px 0 34px; }
.adx-author .adx-au-ava { width: 56px; height: 56px; font-size: 18px; flex: 0 0 56px; }
.adx-author .n { font-family: var(--display); font-size: 16px; font-weight: 700; color: var(--text); }
.adx-author .r { font-size: 12.5px; color: var(--red); font-weight: 600; margin: 2px 0 6px; }
.adx-author .b { font-size: 13px; color: var(--text-2); line-height: 1.6; }
.adx-rel-h { font-family: var(--display); font-size: 18px; font-weight: 700; color: var(--text); margin-bottom: 16px; }

/* ====================== PAGE: Master Class detail (scoped .mdx — reuses .mcz-feat + .cdx-grid) ====================== */
.mdx-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 30px; align-items: start; }
.mdx-main { min-width: 0; }
.mdx-agenda { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.mdx-agenda li { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; background: var(--card); border: 1px solid var(--line-2); border-radius: 5px; padding: 14px 16px; }
.mdx-agenda .num { width: 30px; height: 30px; flex: 0 0 30px; display: grid; place-items: center; border-radius: 9px; background: #efe9ff; color: #7c3aed; font-family: var(--display); font-weight: 700; font-size: 13px; }
.mdx-agenda .t { font-size: 14px; font-weight: 700; color: var(--text); }
.mdx-agenda .s { font-size: 12.5px; color: var(--muted); margin-top: 3px; }
.mdx-rail { position: sticky; top: 18px; }
.mdx-card { background: var(--card); border: 1px solid var(--line-2); border-radius: 7px; box-shadow: var(--shadow-md); padding: 16px; }
.mdx-poster { position: relative; overflow: hidden; border-radius: 5px; aspect-ratio: 16 / 9; display: grid; place-items: center; color: #fff; margin-bottom: 16px;
  background: radial-gradient(120% 140% at 80% 20%, #2a1840 0%, transparent 55%), linear-gradient(120deg, #120f1c 0%, #221540 55%, #2b1147 100%); }
.mdx-poster .ic { width: 50px; height: 50px; border-radius: 50%; background: rgba(255,255,255,.14); display: grid; place-items: center; }
.mdx-poster .ic svg { width: 23px; height: 23px; }
.mdx-poster .pill { position: absolute; top: 12px; left: 12px; background: #fff; color: #5b21b6; font-size: 10.5px; font-weight: 800; text-transform: uppercase; padding: 4px 9px; border-radius: 7px; }
.mdx-card .btn { width: 100%; justify-content: center; }
.mdx-card .btn.mc { background: linear-gradient(135deg,#7c3aed,#5b21b6); border-color: transparent; color: #fff; box-shadow: 0 4px 12px rgba(124,58,237,.28); }
.mdx-facts { list-style: none; display: flex; flex-direction: column; gap: 12px; margin: 16px 0; }
.mdx-facts li { display: flex; align-items: center; gap: 11px; font-size: 13.5px; color: var(--text); }
.mdx-facts svg { width: 17px; height: 17px; color: #7c3aed; flex: 0 0 17px; }
.mdx-note { display: flex; align-items: center; gap: 9px; margin-top: 6px; padding: 12px 14px; border-radius: 5px; background: #efe9ff; border: 1px dashed #c4b5fd; font-size: 12.5px; font-weight: 600; color: #5b21b6; }
.mdx-note svg { width: 16px; height: 16px; flex: 0 0 16px; }
@media (max-width: 980px) { .mdx-grid { grid-template-columns: 1fr; } .mdx-rail { position: static; order: -1; } }

/* course player — checkpoint exam items inside the curriculum playlist */
.pl-item.exam .pl-thumb { background: #efe9ff; border-color: #e4dcff; color: #7c3aed; }
.pl-item.exam.locked .pl-thumb { background: var(--red-soft-2); border-color: var(--line-2); color: var(--text-2); }
.pl-item.done .pl-thumb { background: #16a34a; border-color: #16a34a; color: #fff; }
.pl-item.exam .pl-d { color: #7c3aed; font-weight: 700; }
.pl-item.exam.locked .pl-d, .pl-item.locked .pl-d { color: var(--muted); font-weight: 600; }
.pl-item[aria-disabled="true"] { cursor: not-allowed; }

/* ====================== PAGE: Course Overview (scoped .cov — learning-portal: module rail + content pane) ====================== */
/* padding-top matches .cdx/.cva's ~30px top offset — without it this page's
   content sat flush against the topbar while every other course-detail page
   had breathing room, a jarring jump when navigating between them. */
.cov { padding-top: 30px; padding-bottom: 8px; }

/* reveal animation (scoped to this page's elements) */
.cov .reveal { opacity: 0; transform: translateY(16px); transition: opacity .5s ease, transform .5s cubic-bezier(.22,.61,.36,1); }
.cov .reveal.is-visible { opacity: 1; transform: none; }
:root:not(.js-anim) .cov .reveal { opacity: 1; transform: none; }

.cov-eyebrow {
  display: inline-block;
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  font-weight: 800; color: var(--red); margin-bottom: 8px;
}

/* ---------- two-column shell ---------- */
.cov-shell {
  display: grid;
  grid-template-columns: 312px minmax(0, 1fr);
  gap: 26px;
  align-items: start;
}

/* ========== LEFT: module navigator ========== */
.cov-rail {
  position: sticky; top: 18px;
  background: var(--card);
  border: 1px solid var(--line-2);
  border-radius: 5px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.cov-rail-head {
  padding: 20px 20px 16px;
  background: radial-gradient(120% 150% at 90% 0%, rgba(240, 28, 36, .22) 0%, transparent 55%), linear-gradient(120deg, #15120d 0%, #241a14 100%);
  color: #fff;
}
.cov-rail-head .cov-eyebrow { color: #ff8a8d; margin-bottom: 6px; }
.cov-rail-title { font-family: var(--display); font-size: 18px; font-weight: 700; color: #fff; }

.cov-rail-prog { padding: 16px 20px; border-bottom: 1px solid var(--line-2); }
.cov-prog-row { display: flex; align-items: baseline; justify-content: space-between; font-size: 12.5px; font-weight: 600; color: var(--text-2); }
.cov-prog-row b { font-family: var(--display); font-size: 16px; font-weight: 700; color: var(--red); }
.cov-prog-bar { height: 7px; border-radius: 999px; background: var(--red-soft); margin: 9px 0 8px; overflow: hidden; }
.cov-prog-bar i { display: block; height: 100%; border-radius: 999px; background: var(--red-grad); transition: width .6s cubic-bezier(.22,.61,.36,1); }
.cov-prog-sub { font-size: 11.5px; font-weight: 600; color: var(--muted); }

.cov-nav { padding: 8px; display: flex; flex-direction: column; gap: 2px; max-height: 52vh; overflow-y: auto; }
.cov-nav::-webkit-scrollbar { width: 6px; }
.cov-nav::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 999px; }
.cov-nav-item {
  display: flex; align-items: center; gap: 12px;
  width: 100%; text-align: left; cursor: pointer;
  padding: 11px 12px; border-radius: 9px; border: 1px solid transparent; background: none;
  transition: background .15s ease, border-color .15s ease;
}
.cov-nav-item:hover { background: var(--red-soft-2); }
.cov-nav-num {
  flex: 0 0 26px; width: 26px; height: 26px; border-radius: 8px;
  display: grid; place-items: center;
  font-family: var(--display); font-weight: 700; font-size: 12.5px;
  color: var(--text-2); background: var(--red-soft-2); border: 1px solid var(--line-2);
  transition: .15s ease;
}
.cov-nav-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cov-nav-name { font-size: 13.5px; font-weight: 700; color: var(--text); line-height: 1.3; }
.cov-nav-count { font-size: 11px; font-weight: 600; color: var(--muted); }
.cov-nav-arrow { flex: 0 0 auto; color: var(--muted); opacity: 0; transform: translateX(-4px); transition: .15s ease; }
.cov-nav-arrow svg { width: 16px; height: 16px; }
.cov-nav-item:hover .cov-nav-arrow { opacity: 1; transform: none; }
.cov-nav-item.is-active { background: var(--red-soft); border-color: var(--red); }
.cov-nav-item.is-active .cov-nav-num { background: var(--red-grad); color: #fff; border-color: var(--red); box-shadow: var(--shadow-red); }
.cov-nav-item.is-active .cov-nav-name { color: var(--red-700); }
.cov-nav-item.is-active .cov-nav-arrow { opacity: 1; transform: none; color: var(--red); }

.cov-rail-cta {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  margin: 8px; padding: 13px; border-radius: 10px;
  background: var(--red-grad); color: #fff;
  font-family: var(--sans); font-weight: 800; font-size: 13.5px;
  box-shadow: var(--shadow-red); transition: transform .15s ease, box-shadow .15s ease;
}
.cov-rail-cta:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(240, 28, 36, .42); }
.cov-rail-cta svg { width: 16px; height: 16px; }

/* ========== RIGHT: content pane ========== */
.cov-pane { min-width: 0; display: flex; flex-direction: column; gap: 22px; }

/* pane hero: preview + identity */
.cov-hero {
  display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1fr); gap: 26px; align-items: center;
  background: var(--card); border: 1px solid var(--line-2); border-radius: 5px;
  padding: 22px; box-shadow: var(--shadow-sm);
}
.cov-preview { border-radius: 11px; overflow: hidden; background: #0d0b08; border: 1px solid rgba(0,0,0,.2); box-shadow: 0 10px 26px rgba(0, 0, 0, .28); }
.cov-screen { position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
.cov-thumb { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .5; }
.cov-screen-grad {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(80% 80% at 50% 45%, rgba(20, 12, 30, .3), rgba(8, 6, 4, .8)), linear-gradient(180deg, transparent 45%, rgba(0, 0, 0, .5) 100%);
}
.cov-play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  background: rgba(255, 255, 255, .14); border: 1.5px solid rgba(255, 255, 255, .55); backdrop-filter: blur(4px); color: #fff;
  transition: transform .15s ease, background .15s ease;
}
.cov-play:hover { transform: translate(-50%, -50%) scale(1.08); background: var(--red); border-color: var(--red); }
.cov-play svg { width: 22px; height: 22px; margin-left: 3px; }
.cov-screen-bar { display: flex; align-items: center; gap: 11px; padding: 9px 13px; background: #0a0806; border-top: 1px solid rgba(255, 255, 255, .07); }
.cov-ctl { width: 15px; height: 15px; color: rgba(255, 255, 255, .82); flex: 0 0 auto; }
.cov-time { font-family: var(--mono); font-size: 10.5px; color: rgba(255, 255, 255, .6); flex: 0 0 auto; }
.cov-progress { flex: 1; height: 4px; border-radius: 999px; background: rgba(255, 255, 255, .16); overflow: hidden; }
.cov-progress i { display: block; height: 100%; width: 4%; background: var(--red); border-radius: 999px; }
.cov-brand { font-family: var(--display); font-weight: 700; font-size: 11px; letter-spacing: .08em; color: rgba(255, 255, 255, .5); flex: 0 0 auto; }

.cov-hero-main { min-width: 0; }
.cov-title { font-family: var(--display); font-size: clamp(21px, 2.4vw, 28px); line-height: 1.1; letter-spacing: -.01em; font-weight: 700; color: var(--text); }
.cov-title em { color: var(--red); font-style: normal; }
.cov-lede { margin-top: 11px; font-size: 14px; line-height: 1.6; color: var(--text-2); }
.cov-stats { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 16px; }
.cov-meta { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--text-2); }
.cov-meta b { color: var(--text); font-weight: 800; }
.cov-meta svg { width: 16px; height: 16px; color: var(--red); }
.cov-hero-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line-2); }
.cov-tutor-id { display: flex; align-items: center; gap: 12px; min-width: 0; }
.cov-tutor-ava { width: 42px; height: 42px; flex: 0 0 42px; border-radius: 50%; box-shadow: 0 0 0 2px var(--red-soft); }
.cov-tutor-name { font-family: var(--display); font-weight: 700; font-size: 14px; color: var(--text); }
.cov-tutor-role { font-size: 11.5px; color: var(--muted); font-weight: 600; margin-top: 2px; }
.cov-begin {
  display: inline-flex; align-items: center; gap: 8px; background: var(--ink); color: #fff;
  font-family: var(--sans); font-weight: 700; font-size: 13.5px; padding: 11px 20px; border-radius: 9px; cursor: pointer;
  transition: transform .15s ease, background .15s ease;
}
.cov-begin:hover { transform: translateY(-2px); background: #000; }
.cov-begin svg { width: 15px; height: 15px; }

/* active-module lesson list */
.cov-lessons { background: var(--card); border: 1px solid var(--line-2); border-radius: 5px; box-shadow: var(--shadow-sm); overflow: hidden; }
.cov-lessons-head { padding: 20px 22px 18px; border-bottom: 1px solid var(--line-2); }
.cov-lessons-step { display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--red); margin-bottom: 6px; }
.cov-lessons-title { font-family: var(--display); font-size: 21px; font-weight: 700; color: var(--text); line-height: 1.2; }
.cov-lessons-meta { display: block; margin-top: 7px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.cov-rows { display: flex; flex-direction: column; }
.cov-rows .cov-row:first-child { border-top: none; }

.cov-row { display: flex; align-items: center; gap: 14px; padding: 14px 22px; border-top: 1px solid var(--line-2); transition: background .15s ease; }
.cov-row:hover { background: var(--red-soft-2); }
.cov-row-check { flex: 0 0 22px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; color: #16a34a; background: rgba(22, 163, 74, .12); }
.cov-row-check svg { width: 13px; height: 13px; }
.cov-row-ic { flex: 0 0 38px; width: 38px; height: 38px; border-radius: 9px; display: grid; place-items: center; color: var(--red); background: var(--red-soft); }
.cov-row-ic svg { width: 19px; height: 19px; }
.cov-test .cov-row-ic { color: #7c3aed; background: #efe9ff; }
.cov-lab .cov-row-ic { color: #b45309; background: #fff3d9; }
.cov-row-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cov-row-t { font-size: 14px; font-weight: 600; color: var(--text); line-height: 1.35; }
.cov-row-type { font-size: 11.5px; font-weight: 600; color: var(--muted); }
.cov-get {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px;
  background: var(--card); border: 1px solid var(--line-2); color: var(--text-2);
  font-family: var(--sans); font-size: 12.5px; font-weight: 700; padding: 9px 15px; border-radius: 8px; cursor: pointer;
  transition: border-color .15s ease, color .15s ease, background .15s ease, transform .15s ease;
}
.cov-get svg { width: 14px; height: 14px; }
.cov-get:hover { border-color: var(--red); color: var(--red); background: var(--red-soft-2); transform: translateY(-1px); }

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .cov-shell { grid-template-columns: 268px minmax(0, 1fr); gap: 20px; }
  .cov-hero { grid-template-columns: 1fr; }
  .cov-preview { max-width: 420px; }
}
@media (max-width: 940px) {
  .cov-shell { grid-template-columns: 1fr; }
  .cov-rail { position: static; }
  .cov-nav { max-height: none; }
}
@media (max-width: 560px) {
  .cov-hero { padding: 16px; }
  .cov-hero-foot { flex-direction: column; align-items: flex-start; }
  .cov-begin { width: 100%; justify-content: center; }
  .cov-row { padding: 13px 16px; flex-wrap: wrap; }
  .cov-row-body { flex: 1 1 100%; order: 3; }
  .cov-get { margin-left: auto; }
  .cov-lessons-head { padding: 16px; }
}

/* ====================== PAGE: Course Overview — ALT (scoped .cva — "cyber dossier"; light by default, dark on toggle) ====================== */
/* Light by default to match the app; the dark immersive treatment kicks in only under [data-theme="dark"]. */
.cva {
  /* ---- light theme (default) ---- */
  --cva-line: var(--line-2);
  --cva-line-2: rgba(60, 48, 24, .07);
  --cva-fg: var(--text);
  --cva-fg-2: var(--text-2);
  --cva-fg-3: var(--muted);
  --cva-red: var(--red);
  --cva-head: var(--ink);
  --cva-test: #7c3aed;
  --cva-lab: #b45309;
  --cva-surface: var(--card);
  --cva-surface-tint: #fffaf4;
  --cva-hover: var(--red-soft-2);
  --cva-begin-bg: var(--ink);
  --cva-begin-fg: #fff;
  --cva-term: #efe7d7;
  --cva-dot: #d3c8b2;
  --cva-slab: linear-gradient(180deg, #fffdfa 0%, #fff6f1 100%);
  --cva-glow: rgba(240, 28, 36, .10);
  --cva-grid: rgba(60, 48, 24, .045);
  --cva-grid-mask: radial-gradient(120% 120% at 88% 0%, #000 18%, transparent 62%);
  --cva-modules-bg: var(--card);
  --cva-slab-shadow: var(--shadow-md);
  --cva-em-glow: none;

  position: relative;
  margin: 4px 0 8px;
  padding: 30px 32px 34px;
  border-radius: 5px;
  background:
    radial-gradient(110% 130% at 92% -10%, var(--cva-glow) 0%, transparent 52%),
    var(--cva-slab);
  color: var(--cva-fg);
  border: 1px solid var(--cva-line);
  box-shadow: var(--cva-slab-shadow);
  overflow: hidden;
}

/* ---- dark theme (toggle) ---- */
[data-theme="dark"] .cva {
  --cva-line: rgba(255, 255, 255, .09);
  --cva-line-2: rgba(255, 255, 255, .055);
  --cva-fg: #f4ece0;
  --cva-fg-2: rgba(244, 236, 224, .62);
  --cva-fg-3: rgba(244, 236, 224, .38);
  --cva-red: #ff3b40;
  --cva-head: #fff;
  --cva-test: #b9a3ff;
  --cva-lab: #ffc46b;
  --cva-surface: rgba(255, 255, 255, .04);
  --cva-surface-tint: rgba(255, 255, 255, .025);
  --cva-hover: rgba(255, 255, 255, .03);
  --cva-begin-bg: #fff;
  --cva-begin-fg: #15120d;
  --cva-term: #0e0a07;
  --cva-dot: #2c2620;
  --cva-glow: rgba(240, 28, 36, .26);
  --cva-grid: rgba(255, 255, 255, .035);
  --cva-modules-bg: rgba(0, 0, 0, .18);
  --cva-em-glow: 0 0 26px rgba(255, 59, 64, .5);
  border-color: var(--cva-line);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .3), inset 0 0 0 1px var(--cva-line-2);
  background:
    radial-gradient(110% 130% at 92% -10%, var(--cva-glow) 0%, transparent 52%),
    radial-gradient(90% 120% at 0% 110%, rgba(240, 28, 36, .10) 0%, transparent 50%),
    linear-gradient(180deg, #14100b 0%, #100c08 100%);
}

.cva::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(var(--cva-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--cva-grid) 1px, transparent 1px);
  background-size: 34px 34px;
  -webkit-mask-image: var(--cva-grid-mask, radial-gradient(120% 120% at 88% 0%, #000 25%, transparent 70%));
  mask-image: var(--cva-grid-mask, radial-gradient(120% 120% at 88% 0%, #000 25%, transparent 70%));
}
.cva > * { position: relative; }

.cva .reveal { opacity: 0; transform: translateY(16px); transition: opacity .5s ease, transform .5s cubic-bezier(.22,.61,.36,1); }
.cva .reveal.is-visible { opacity: 1; transform: none; }
:root:not(.js-anim) .cva .reveal { opacity: 1; transform: none; }

/* mono breadcrumb */
.cva-crumb { font-family: var(--mono); font-size: 12px; color: var(--cva-fg-3); margin-bottom: 26px; display: flex; gap: 8px; align-items: center; }
.cva-crumb a { color: var(--cva-fg-2); }
.cva-crumb a:hover { color: var(--cva-red); }
.cva-crumb b { color: var(--cva-fg); font-weight: 700; }
.cva-crumb span { opacity: .4; }

/* ---------- HERO ---------- */
.cva-hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 44px; align-items: center; margin-bottom: 30px; }
.cva-eyebrow { display: inline-flex; align-items: center; gap: 9px; font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--cva-red); margin-bottom: 18px; }
.cva-eyebrow i { width: 7px; height: 7px; border-radius: 50%; background: var(--cva-red); box-shadow: 0 0 10px var(--cva-red); animation: cvaPulse 2s ease-in-out infinite; }
@keyframes cvaPulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.cva-title { font-family: var(--display); font-size: clamp(30px, 4vw, 50px); line-height: 1.02; letter-spacing: -.02em; font-weight: 700; color: var(--cva-head); }
.cva-title em { font-style: normal; color: var(--cva-red); text-shadow: var(--cva-em-glow); }
.cva-lede { margin-top: 18px; max-width: 52ch; font-size: 15px; line-height: 1.65; color: var(--cva-fg-2); }
.cva-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.cva-tags span { font-family: var(--mono); font-size: 11px; font-weight: 500; color: var(--cva-fg-2); padding: 5px 11px; border: 1px solid var(--cva-line); border-radius: 999px; }
.cva-tags span::before { content: "#"; color: var(--cva-red); margin-right: 1px; }
.cva-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 28px; }
.cva-btn {
  display: inline-flex; align-items: center; gap: 9px;
  background: linear-gradient(180deg, #ff5b5c 0%, #ff1a1e 100%); color: #fff;
  font-family: var(--sans); font-weight: 800; font-size: 14px; padding: 14px 26px; border-radius: 10px; cursor: pointer;
  box-shadow: 0 10px 30px rgba(255, 26, 30, .42); transition: transform .15s ease, box-shadow .15s ease;
}
.cva-btn:hover { transform: translateY(-2px); box-shadow: 0 14px 38px rgba(255, 26, 30, .52); }
.cva-btn svg { width: 17px; height: 17px; }
.cva-note { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 12px; color: var(--cva-fg-3); }
.cva-note svg { width: 15px; height: 15px; color: var(--cva-red); }

/* terminal-framed preview — the video screen itself stays dark in both themes (it's a player) */
.cva-preview { border-radius: 5px; overflow: hidden; background: var(--cva-term); border: 1px solid var(--cva-line); box-shadow: var(--shadow-sm); }
[data-theme="dark"] .cva-preview { background: #0a0705; box-shadow: 0 18px 44px rgba(0, 0, 0, .5); }
.cva-term-bar { display: flex; align-items: center; gap: 7px; padding: 10px 14px; background: var(--cva-term); border-bottom: 1px solid var(--cva-line); }
.cva-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--cva-dot); }
.cva-dot:first-child { background: var(--cva-red); }
.cva-term-path { font-family: var(--mono); font-size: 11px; color: var(--cva-fg-3); margin-left: 8px; }
.cva-screen { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #0a0705; }
.cva-thumb { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .42; filter: saturate(.7); }
.cva-scan { position: absolute; inset: 0; pointer-events: none; background:
  radial-gradient(70% 70% at 50% 45%, transparent 30%, rgba(5, 3, 2, .7) 100%),
  repeating-linear-gradient(0deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 3px); }
.cva-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; color: #fff; background: rgba(255, 59, 64, .16); border: 1.5px solid var(--red); box-shadow: 0 0 24px rgba(255, 59, 64, .5); transition: transform .15s ease, background .15s ease; }
.cva-play:hover { transform: translate(-50%, -50%) scale(1.08); background: var(--red); }
.cva-play svg { width: 24px; height: 24px; margin-left: 3px; }
.cva-screen-meta { position: absolute; left: 14px; bottom: 12px; display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; color: rgba(255, 255, 255, .72); }
.cva-screen-meta i { width: 6px; height: 6px; border-radius: 50%; background: var(--red); box-shadow: 0 0 8px var(--red); }
.cva-screen-bar { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: var(--cva-term); }
.cva-progress { flex: 1; height: 4px; border-radius: 999px; background: rgba(120, 100, 70, .2); overflow: hidden; }
[data-theme="dark"] .cva-progress { background: rgba(255, 255, 255, .12); }
.cva-progress i { display: block; height: 100%; width: 4%; background: var(--cva-red); }
.cva-time { font-family: var(--mono); font-size: 10.5px; color: var(--cva-fg-3); }

/* ---------- INSTRUCTOR / SPEC STRIP ---------- */
.cva-strip {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 18px 28px;
  padding: 16px 20px; margin-bottom: 36px;
  background: var(--cva-surface-tint); border: 1px solid var(--cva-line); border-radius: 5px;
}
.cva-tutor { display: flex; align-items: center; gap: 13px; min-width: 0; }
.cva-tutor-ava { width: 46px; height: 46px; flex: 0 0 46px; border-radius: 50%; box-shadow: 0 0 0 2px rgba(240, 28, 36, .3); }
.cva-tutor-name { font-family: var(--display); font-weight: 700; font-size: 15px; color: var(--cva-head); }
.cva-tutor-cert { font-family: var(--mono); font-size: 11px; color: var(--cva-fg-3); margin-top: 3px; }
.cva-specs { display: flex; align-items: center; flex-wrap: wrap; gap: 22px 30px; }
.cva-spec { display: flex; flex-direction: column; gap: 3px; }
.cva-spec label { font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em; color: var(--cva-fg-3); }
.cva-spec b { font-family: var(--display); font-size: 15px; font-weight: 700; color: var(--cva-fg); }
.cva-begin {
  display: inline-flex; align-items: center; gap: 8px; background: var(--cva-begin-bg); color: var(--cva-begin-fg);
  font-family: var(--sans); font-weight: 800; font-size: 13.5px; padding: 11px 22px; border-radius: 9px; cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
}
.cva-begin:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(60, 48, 24, .25); }
.cva-begin svg { width: 15px; height: 15px; }

/* ---------- CURRICULUM TOOLBAR ---------- */
.cva-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.cva-h2 { font-family: var(--display); font-size: 22px; font-weight: 700; color: var(--cva-head); display: inline-flex; align-items: baseline; gap: 9px; }
.cva-h2 span { font-family: var(--mono); color: var(--cva-red); font-size: 18px; }
.cva-jump { position: relative; display: inline-flex; align-items: center; background: var(--cva-surface-tint); border: 1px solid var(--cva-line); border-radius: 9px; padding: 0 12px; }
.cva-jump select { appearance: none; -webkit-appearance: none; background: none; border: none; outline: none; font-family: var(--mono); font-size: 12px; color: var(--cva-fg); padding: 10px 24px 10px 0; cursor: pointer; }
.cva-jump select option { background: var(--card); color: var(--text); }
[data-theme="dark"] .cva-jump select option { background: #15110b; color: #f4ece0; }
.cva-jump svg { width: 15px; height: 15px; color: var(--cva-fg-3); position: absolute; right: 11px; pointer-events: none; }

/* ---------- MODULE ACCORDION (hairline sections, ghost index) ---------- */
.cva-modules { border: 1px solid var(--cva-line); border-radius: 5px; overflow: hidden; background: var(--cva-modules-bg); }
.cva-mod { border-top: 1px solid var(--cva-line); }
.cva-mod:first-child { border-top: none; }
.cva-mod.cva-flash { background: var(--cva-hover); }

.cva-mod-head {
  position: relative; width: 100%; display: flex; align-items: center; gap: 18px;
  padding: 20px 22px; text-align: left; cursor: pointer; background: none; border: none;
  transition: background .15s ease;
}
.cva-mod-head::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--cva-red); transform: scaleY(0); transform-origin: center; transition: transform .2s ease; }
.cva-mod-head:hover { background: var(--cva-hover); }
.cva-mod:not(.collapsed) .cva-mod-head::before, .cva-mod-head:hover::before { transform: scaleY(1); }
.cva-mod-idx { font-family: var(--display); font-size: 30px; font-weight: 700; line-height: 1; color: var(--cva-fg-3); flex: 0 0 auto; min-width: 44px; transition: color .2s ease; }
.cva-mod:not(.collapsed) .cva-mod-idx { color: var(--cva-red); }
.cva-mod-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.cva-mod-name { font-family: var(--display); font-weight: 700; font-size: 17px; color: var(--cva-fg); line-height: 1.25; }
.cva-mod-count { font-family: var(--mono); font-size: 11px; color: var(--cva-fg-3); }
.cva-mod-toggle { flex: 0 0 auto; color: var(--cva-fg-2); }
.cva-caret { width: 20px; height: 20px; transition: transform .25s ease; }
.cva-mod.collapsed .cva-caret { transform: rotate(-90deg); }

.cva-mod-list { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .3s ease; }
.cva-mod-inner { min-height: 0; overflow: hidden; }
.cva-mod.collapsed .cva-mod-list { grid-template-rows: 0fr; }

.cva-row { position: relative; display: flex; align-items: center; gap: 14px; padding: 12px 22px 12px 26px; border-top: 1px solid var(--cva-line-2); transition: background .15s ease; }
.cva-row:hover { background: var(--cva-hover); }
.cva-row-n { font-family: var(--mono); font-size: 11px; color: var(--cva-fg-3); flex: 0 0 22px; }
.cva-row-ic { flex: 0 0 34px; width: 34px; height: 34px; border-radius: 8px; display: grid; place-items: center; color: var(--cva-red); background: rgba(240, 28, 36, .09); border: 1px solid rgba(240, 28, 36, .2); }
.cva-row-ic svg { width: 17px; height: 17px; }
.cva-test .cva-row-ic { color: var(--cva-test); background: rgba(124, 58, 237, .1); border-color: rgba(124, 58, 237, .26); }
.cva-lab .cva-row-ic { color: var(--cva-lab); background: rgba(245, 158, 11, .1); border-color: rgba(245, 158, 11, .26); }
.cva-row-body { flex: 1; min-width: 0; display: flex; align-items: center; gap: 11px; }
.cva-row-t { font-size: 14px; font-weight: 600; color: var(--cva-fg); line-height: 1.35; }
.cva-row-tag { font-family: var(--mono); font-size: 9.5px; font-weight: 700; letter-spacing: .1em; padding: 2px 7px; border-radius: 4px; color: var(--cva-fg-2); border: 1px solid var(--cva-line); flex: 0 0 auto; }
.cva-test .cva-row-tag { color: var(--cva-test); border-color: rgba(124, 58, 237, .4); }
.cva-lab .cva-row-tag { color: var(--cva-lab); border-color: rgba(245, 158, 11, .4); }
.cva-get {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 11.5px; font-weight: 700; color: var(--cva-fg-2);
  background: none; border: 1px solid var(--cva-line); padding: 8px 13px; border-radius: 7px; cursor: pointer;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.cva-get svg { width: 13px; height: 13px; }
.cva-get:hover { border-color: var(--cva-red); color: var(--cva-red); background: var(--cva-hover); }
.cva-row-lock { display: none; flex: 0 0 auto; color: var(--cva-fg-3); }
.cva-row-lock svg { width: 15px; height: 15px; }

/* ---------- responsive ---------- */
@media (max-width: 920px) {
  .cva { padding: 24px 20px 28px; }
  .cva-hero { grid-template-columns: 1fr; gap: 26px; }
}
@media (max-width: 560px) {
  .cva-strip { gap: 14px; }
  .cva-specs { gap: 14px 20px; width: 100%; }
  .cva-begin { margin-left: auto; }
  .cva-mod-head { gap: 12px; padding: 16px; }
  .cva-mod-idx { font-size: 22px; min-width: 30px; }
  .cva-row { flex-wrap: wrap; padding: 12px 14px; }
  .cva-row-body { flex: 1 1 100%; order: 3; }
  .cva-get { margin-left: auto; }
}

/* ====================== PAGE: My Labs — catalog list (scoped .lbx — search + filter rail + result rows) ====================== */
.lbx { padding-bottom: 8px; }
.lbx .reveal { opacity: 0; transform: translateY(14px); transition: opacity .45s ease, transform .45s cubic-bezier(.22,.61,.36,1); }
.lbx .reveal.is-visible { opacity: 1; transform: none; }
:root:not(.js-anim) .lbx .reveal { opacity: 1; transform: none; }

/* ---- top: search + sort ---- */
.lbx-top { display: flex; gap: 14px; align-items: stretch; margin-bottom: 14px; }
.lbx-search { position: relative; flex: 1; display: flex; align-items: center; gap: 12px; background: var(--card); border: 1px solid var(--line-2); border-radius: 5px; padding: 0 16px; box-shadow: var(--shadow-sm); transition: border-color .15s ease, box-shadow .15s ease; }
.lbx-search:focus-within { border-color: var(--red); box-shadow: 0 0 0 3px var(--red-soft); }
.lbx-search > svg { width: 19px; height: 19px; color: var(--muted); flex: 0 0 19px; }
.lbx-search input { flex: 1; border: none; outline: none; background: none; font-family: var(--sans); font-size: 14.5px; color: var(--text); padding: 14px 0; }
.lbx-search input::placeholder { color: var(--muted); }
.lbx-sort { position: relative; display: inline-flex; align-items: center; background: var(--card); border: 1px solid var(--line-2); border-radius: 5px; padding: 0 14px; box-shadow: var(--shadow-sm); min-width: 180px; }
.lbx-sort select { appearance: none; -webkit-appearance: none; background: none; border: none; outline: none; font-family: var(--sans); font-size: 13.5px; font-weight: 600; color: var(--text); padding: 13px 26px 13px 0; cursor: pointer; width: 100%; }
/* The native option popup renders with the OS default (white bg / grey text) unless
   the options are styled — unreadable in dark mode. Paint them with the theme tokens. */
.lbx-sort select option { background: var(--card); color: var(--text); }
.lbx-sort::after { content: ""; position: absolute; right: 14px; top: 50%; width: 8px; height: 8px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: translateY(-65%) rotate(45deg); pointer-events: none; }

.lbx-count { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-family: var(--display); font-size: 15px; font-weight: 700; color: var(--text); margin: 8px 0 16px; }
.lbx-count b { color: var(--red); }

/* ---- two-column shell ---- */
.lbx-shell { display: grid; grid-template-columns: 256px minmax(0, 1fr); gap: 26px; align-items: start; }

/* ---- filter rail ---- */
.lbx-filters { position: sticky; top: 18px; display: flex; flex-direction: column; gap: 8px; }
.lbx-group { background: var(--card); border: 1px solid var(--line-2); border-radius: 5px; overflow: hidden; box-shadow: var(--shadow-sm); }
.lbx-group-head { width: 100%; display: flex; align-items: center; gap: 8px; padding: 15px 16px; cursor: pointer; background: none; border: none; text-align: left; }
.lbx-group-head h4 { font-family: var(--display); font-size: 14.5px; font-weight: 700; color: var(--text); flex: 1; }
.lbx-group-head .lbx-info { width: 14px; height: 14px; color: var(--muted); }
.lbx-group-head .lbx-pm { width: 18px; height: 18px; color: var(--text-2); flex: 0 0 18px; transition: transform .2s ease; }
.lbx-group.collapsed .lbx-pm { transform: rotate(-90deg); }
.lbx-group-body { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .25s ease; }
.lbx-group-inner { min-height: 0; overflow: hidden; padding: 0 16px 12px; }
.lbx-group.collapsed .lbx-group-body { grid-template-rows: 0fr; }

.lbx-opt { display: flex; align-items: center; gap: 11px; padding: 8px 2px; cursor: pointer; }
.lbx-box { flex: 0 0 18px; width: 18px; height: 18px; border-radius: 5px; border: 1.6px solid var(--line-2); display: grid; place-items: center; transition: .15s ease; }
.lbx-box svg { width: 12px; height: 12px; color: #fff; opacity: 0; transition: opacity .12s ease; }
.lbx-opt:hover .lbx-box { border-color: var(--red); }
.lbx-opt.on .lbx-box { background: var(--red-grad); border-color: var(--red); }
.lbx-opt.on .lbx-box svg { opacity: 1; }
.lbx-opt-label { flex: 1; display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--text-2); min-width: 0; }
.lbx-opt.on .lbx-opt-label { color: var(--text); }
.lbx-opt-count { font-size: 12px; font-weight: 600; color: var(--muted); font-family: var(--mono); }

/* severity mini-bars (used in filter + cards) */
.lbx-bars { display: inline-flex; align-items: flex-end; gap: 1.5px; height: 13px; }
.lbx-bars i { width: 3px; border-radius: 1px; background: currentColor; opacity: .26; }
.lbx-bars i.on { opacity: 1; }
.sev-critical { color: #f01c24; } .sev-high { color: #f97316; } .sev-medium { color: #e8a800; } .sev-low { color: #16a34a; }

/* ---- results grid ---- */
.lbx-results { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; min-width: 0; align-items: start; }
.lbx-empty { grid-column: 1 / -1; padding: 50px 20px; text-align: center; color: var(--muted); font-weight: 600; }

.lbx-card { position: relative; display: flex; flex-direction: column; gap: 13px; background: var(--card); border: 1px solid var(--line-2); border-radius: 5px; padding: 18px; box-shadow: var(--shadow-sm); cursor: pointer; transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
.lbx-card:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }

/* Download VPN profile button — green, right-aligned in the results row */
.lbx-vpn-btn {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 18px; border-radius: 8px; font-size: 13px; font-weight: 700; letter-spacing: .01em; white-space: nowrap;
  cursor: pointer; color: #eafff1;
  background: linear-gradient(90deg, #12633f 0%, #16a34a 100%);
  border: 1px solid rgba(34, 197, 94, .55);
  box-shadow: 0 6px 18px rgba(22, 163, 74, .28);
  transition: transform .12s ease, box-shadow .15s ease, filter .15s ease;
}
.lbx-vpn-btn svg { width: 16px; height: 16px; flex: none; }
.lbx-vpn-btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(22, 163, 74, .42); filter: brightness(1.06); }
.lbx-vpn-btn:hover:not(:disabled) svg { animation: lbxKeyWiggle .5s ease; }
@keyframes lbxKeyWiggle { 0%,100% { transform: rotate(0); } 40% { transform: rotate(-18deg); } 70% { transform: rotate(8deg); } }
.lbx-vpn-btn:disabled { opacity: .7; cursor: progress; }
.lbx-vpn-btn.busy { animation: lbxVpnPulse 1.4s ease-in-out infinite; }
@keyframes lbxVpnPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, .5); } 50% { box-shadow: 0 0 0 7px rgba(34, 197, 94, 0); } }

.lbx-vpn-note { margin: 10px 0 0; padding: 10px 14px; border-radius: 8px; font-size: 13.5px; font-weight: 600; animation: lbxNoteIn .28s ease; }
.lbx-vpn-note.ok  { background: rgba(22, 163, 74, .12); color: #16a34a; border: 1px solid rgba(22, 163, 74, .28); }
.lbx-vpn-note.err { background: rgba(240, 28, 36, .10); color: var(--red);  border: 1px solid rgba(240, 28, 36, .28); }
@keyframes lbxNoteIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
.lbx-card:hover { transform: translateY(-2px); border-color: var(--red); box-shadow: var(--shadow-md); }

.lbx-card-head { display: flex; align-items: center; gap: 13px; }
.lbx-hex { flex: 0 0 48px; width: 48px; height: 48px; display: grid; place-items: center; }
.lbx-hex svg { width: 46px; height: 46px; }
.lbx-card-title { flex: 1; min-width: 0; font-family: var(--display); font-size: 16px; font-weight: 700; color: var(--text); line-height: 1.25; padding-right: 90px; }
.lbx-card-title a:hover { color: var(--red); }
.lbx-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 8px; }

/* severity pill */
.lbx-sev-pill { display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto; font-size: 11px; font-weight: 800; letter-spacing: .01em; padding: 5px 10px; border-radius: 999px; border: 1px solid; color: var(--sev); border-color: color-mix(in srgb, var(--sev) 40%, transparent); background: color-mix(in srgb, var(--sev) 12%, transparent); }

/* Per-card "Running" indicator — green pill (links to the running lab) + a green card accent. */
.lbx-card.running { border-color: rgba(34, 197, 94, .45); box-shadow: 0 0 0 1px rgba(34, 197, 94, .25), var(--shadow-sm); }
.lbx-run-pill { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; font-size: 11px; font-weight: 800; padding: 5px 10px; border-radius: 999px; color: #22c55e; border: 1px solid rgba(34, 197, 94, .4); background: rgba(34, 197, 94, .12); text-decoration: none; }
.lbx-run-pill:hover { background: rgba(34, 197, 94, .2); }
.lbx-run-dot { width: 6px; height: 6px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 0 rgba(34, 197, 94, .6); animation: navBadgePulse 1.8s infinite; }

/* Running-lab banner (Labs list + lab detail) — a prominent clickable bar (like the payment bar). */
.labd-run-banner { display: flex; align-items: center; gap: 14px; margin: 0 0 18px; padding: 14px 18px; border-radius: 10px; text-decoration: none; color: #eafff1; background: linear-gradient(90deg, #0f3d2a 0%, #12633f 55%, #16a34a 100%); border: 1px solid rgba(34, 197, 94, .5); box-shadow: 0 10px 30px rgba(22, 163, 74, .25); transition: transform .15s ease, box-shadow .15s ease; }
.labd-run-banner:hover { transform: translateY(-1px); box-shadow: 0 12px 34px rgba(22, 163, 74, .35); }
.labd-run-banner .labd-run-dot { width: 10px; height: 10px; border-radius: 50%; background: #22c55e; flex: 0 0 auto; box-shadow: 0 0 0 0 rgba(34, 197, 94, .7); animation: navBadgePulse 1.8s infinite; }
.labd-run-text { display: flex; flex-direction: column; gap: 2px; line-height: 1.35; font-size: 13.5px; min-width: 0; }
.labd-run-text b { font-size: 15px; font-weight: 800; }
.labd-run-text span { color: rgba(234, 255, 241, .85); }
.labd-run-cta { margin-left: auto; flex: 0 0 auto; font-weight: 800; background: #fff; color: #12633f; padding: 8px 16px; border-radius: 999px; white-space: nowrap; }

/* meta as chips */
.lbx-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.lbx-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--text-2); background: var(--red-soft-2); border: 1px solid var(--line-2); padding: 5px 10px; border-radius: 7px; }
.lbx-chip svg { width: 13px; height: 13px; color: var(--muted); }
.lbx-chip.cat { font-weight: 700; color: var(--c); border-color: color-mix(in srgb, var(--c) 35%, var(--line-2)); background: color-mix(in srgb, var(--c) 9%, transparent); }
.lbx-chip.code { font-family: var(--mono); font-size: 11.5px; }

/* footer row: severity left, actions right */
.lbx-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 2px; padding-top: 13px; border-top: 1px solid var(--line-2); }
.lbx-badge { position: absolute; top: 14px; right: 14px; font-size: 10.5px; font-weight: 800; letter-spacing: .02em; padding: 5px 11px; border-radius: 999px; color: #fff; background: var(--red-grad); box-shadow: var(--shadow-red); }
.lbx-badge.yr { background: var(--red-soft); color: var(--red-700); box-shadow: none; font-family: var(--mono); }
.lbx-acts { display: flex; gap: 8px; }
.lbx-act { width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--line-2); background: var(--card); display: grid; place-items: center; color: var(--text-2); cursor: pointer; transition: .15s ease; }
.lbx-act svg { width: 17px; height: 17px; }
.lbx-act:hover { border-color: var(--red); color: var(--red); background: var(--red-soft-2); transform: translateY(-1px); }
.lbx-act.on { background: var(--red-grad); border-color: var(--red); color: #fff; }

/* ---- responsive ---- */
@media (max-width: 1240px) { .lbx-results { grid-template-columns: 1fr; } }
@media (max-width: 1040px) { .lbx-shell { grid-template-columns: 220px minmax(0, 1fr); gap: 18px; } }
@media (max-width: 860px) {
  .lbx-shell { grid-template-columns: 1fr; }
  .lbx-filters { position: static; flex-direction: row; flex-wrap: wrap; }
  .lbx-group { flex: 1 1 240px; }
}
@media (max-width: 560px) {
  .lbx-top { flex-direction: column; }
  .lbx-sort { min-width: 0; }
  .lbx-card-title { padding-right: 84px; }
}

/* ====================== Explore Courses — category rail (single-select list) ====================== */
.xc-cats { width: 100%; background: var(--card); border: 1px solid var(--line-2); border-radius: 5px; box-shadow: var(--shadow-sm); padding: 8px; display: flex; flex-direction: column; gap: 2px; }
.xc-cat { display: flex; align-items: center; gap: 10px; width: 100%; padding: 11px 12px; border: none; background: none; border-radius: 4px; cursor: pointer; text-align: left; font-family: var(--sans); font-size: 13.5px; font-weight: 600; color: var(--text-2); transition: background .15s ease, color .15s ease; }
.xc-cat:hover { background: rgba(240, 28, 36, .06); color: var(--text); }
[data-theme="dark"] .xc-cat:hover { background: rgba(240, 28, 36, .14); }
.xc-cat-label { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xc-cat-n { font-family: var(--mono); font-size: 11.5px; font-weight: 700; color: var(--muted); }
.xc-cat.active { background: var(--red-grad); color: #fff; box-shadow: 0 6px 14px rgba(240, 28, 36, .28); }
.xc-cat.active:hover { background: var(--red-grad); color: #fff; }
.xc-cat.active .xc-cat-n { color: rgba(255, 255, 255, .85); }
@media (min-width: 981px) { .xc-cats { max-height: 60vh; overflow-y: auto; } }

/* Explore: vendor / focus-area checkbox filter groups */
.xc-fgroup { width: 100%; background: var(--card); border: 1px solid var(--line-2); border-radius: 5px; box-shadow: var(--shadow-sm); padding: 13px 14px; margin-top: 0px; }
.xc-ftitle { font-family: var(--display); font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-2); margin-bottom: 6px; }
.xc-opt { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 6px; font-size: 13.5px; font-weight: 500; color: var(--text); cursor: pointer; transition: background .15s; }
.xc-opt:hover { background: var(--red-soft-2); }
.xc-opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.xc-cbox { width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid var(--line-2); display: inline-grid; place-items: center; flex: 0 0 18px; }
.xc-opt input:checked + .xc-cbox { background: var(--red); border-color: var(--red); }
.xc-opt input:checked + .xc-cbox::after { content: ""; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); margin-top: -2px; }
.xc-opt-n { margin-left: auto; font-family: var(--mono); font-size: 11.5px; color: var(--muted); }

/* ---- Mobile: collapse the filter rail behind a "Filters" toggle (shared: Labs + Explore) ---- */
.lbx-ftoggle { display: none; }
@media (max-width: 980px) {
  .lbx-shell { grid-template-columns: 1fr; }
  .lbx-filters { display: none; position: static; }
  .lbx-shell.filters-open .lbx-filters { display: flex; flex-direction: column; }
  .lbx-shell.filters-open .lbx-group { flex: none; }
  .lbx-ftoggle {
    display: inline-flex; align-items: center; gap: 8px; margin-left: auto;
    font-family: var(--sans); font-size: 13px; font-weight: 700; color: var(--text);
    background: var(--card); border: 1px solid var(--line-2); border-radius: 10px;
    padding: 9px 14px; cursor: pointer; box-shadow: var(--shadow-sm);
    transition: border-color .15s ease, color .15s ease;
  }
  .lbx-ftoggle:hover { border-color: var(--red); }
  .lbx-ftoggle.open { border-color: var(--red); color: var(--red); }
  .lbx-ftoggle svg { width: 16px; height: 16px; }
  .lbx-ftoggle .fcount { background: var(--red); color: #fff; font-size: 11px; font-weight: 800; min-width: 18px; height: 18px; border-radius: 999px; display: none; place-items: center; padding: 0 5px; }
  .lbx-ftoggle .fcount.show { display: inline-grid; }
}

/* ====================== PAGE: Lab Details — redesign (scoped .ldx — hero + tabbed main + launch rail) ====================== */
.ldx { padding-bottom: 8px; }
.ldx .reveal { opacity: 0; transform: translateY(14px); transition: opacity .45s ease, transform .45s cubic-bezier(.22,.61,.36,1); }
.ldx .reveal.is-visible { opacity: 1; transform: none; }
:root:not(.js-anim) .ldx .reveal { opacity: 1; transform: none; }

/* ---- hero band ---- */
.ldx-hero { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 26px; padding: 30px 32px; margin: 4px 0 22px; border: 1px solid var(--line-2); border-radius: 5px; box-shadow: var(--shadow-md);
  background: radial-gradient(120% 150% at 92% -10%, rgba(240, 28, 36, .10) 0%, transparent 52%), linear-gradient(180deg, #fffdfa 0%, #fff6f1 100%); }
[data-theme="dark"] .ldx-hero { background: radial-gradient(120% 150% at 92% -10%, rgba(240, 28, 36, .22) 0%, transparent 52%), var(--card); }
.ldx-hero-main { min-width: 0; }
.ldx-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--red); margin-bottom: 12px; }
.ldx-eyebrow i { width: 7px; height: 7px; border-radius: 50%; background: var(--red); box-shadow: 0 0 9px var(--red); }
.ldx-title { font-family: var(--display); font-size: clamp(26px, 3.4vw, 40px); line-height: 1.05; letter-spacing: -.01em; font-weight: 700; color: var(--text); }
.ldx-cve { font-family: var(--mono); font-size: 14px; color: var(--text-2); margin-top: 8px; }
.ldx-similar { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--red); margin-top: 10px; }
.ldx-similar:hover { text-decoration: underline; }
.ldx-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 18px; }
.ldx-hero-ic { flex: 0 0 auto; }
.ldx-hero-ic svg { width: 104px; height: 104px; filter: drop-shadow(0 10px 22px rgba(240, 28, 36, .25)); }

/* ---- layout ---- */
.ldx-grid { display: grid; grid-template-columns: minmax(0, 1fr) 326px; gap: 24px; align-items: start; }

/* ---- tabbed main ---- */
.ldx-main { min-width: 0; background: var(--card); border: 1px solid var(--line-2); border-radius: 5px; box-shadow: var(--shadow-sm); overflow: hidden; }
.ldx-tabs { display: flex; gap: 2px; padding: 0 18px; border-bottom: 1px solid var(--line-2); overflow-x: auto; }
.ldx-tab { position: relative; padding: 15px 16px; font-family: var(--sans); font-size: 14px; font-weight: 700; color: var(--text-2); white-space: nowrap; cursor: pointer; background: none; border: none; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color .15s ease; }
.ldx-tab:hover { color: var(--text); }
.ldx-tab.is-active { color: var(--red); border-bottom-color: var(--red); }
.ldx-panel { padding: 24px 26px; animation: ldxFade .35s ease both; }
.ldx-panel[hidden] { display: none; }
@keyframes ldxFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.ldx-h3 { font-family: var(--display); font-size: 18px; font-weight: 700; color: var(--text); margin: 26px 0 12px; display: flex; align-items: center; gap: 9px; }
.ldx-h3:first-child { margin-top: 0; }
.ldx-h3 svg { width: 18px; height: 18px; color: var(--red); }
.ldx-p { font-size: 14.5px; line-height: 1.7; color: var(--text-2); margin-bottom: 12px; max-width: 72ch; }
.ldx-list { list-style: none; padding: 0; margin: 6px 0 4px; display: flex; flex-direction: column; gap: 9px; }
.ldx-list li { position: relative; padding-left: 26px; font-size: 14px; line-height: 1.55; color: var(--text-2); }
.ldx-list li svg { position: absolute; left: 0; top: 2px; width: 16px; height: 16px; color: var(--red); }
.ldx-code { font-family: var(--mono); font-size: 12.5px; color: var(--red-700); background: var(--red-soft-2); border: 1px solid var(--line-2); border-radius: 6px; padding: 2px 7px; }
.ldx-codeblock { font-family: var(--mono); font-size: 12.5px; color: var(--text); background: var(--red-soft-2); border: 1px solid var(--line-2); border-radius: 8px; padding: 12px 14px; margin: 8px 0 4px; overflow-x: auto; }

/* network diagram */
.ldx-diagram { display: flex; align-items: center; justify-content: space-between; gap: 4px; background: var(--red-soft-2); border: 1px solid var(--line-2); border-radius: 5px; padding: 24px 26px; margin: 8px 0 6px; }
.ldx-node { display: flex; flex-direction: column; align-items: center; gap: 9px; flex: 0 0 auto; }
.ldx-node-box { width: 70px; height: 60px; border-radius: 5px; background: var(--card); border: 1px solid var(--line-2); display: grid; place-items: center; box-shadow: var(--shadow-sm); }
.ldx-node-box svg { width: 30px; height: 30px; color: var(--red); }
.ldx-node-label { font-family: var(--mono); font-size: 11px; font-weight: 700; color: var(--text-2); }
.ldx-node-sub { font-family: var(--mono); font-size: 10px; color: var(--muted); margin-top: -5px; }
.ldx-wire { flex: 1; min-width: 24px; border-top: 2px dashed var(--line-2); position: relative; }
.ldx-wire::after { content: ""; position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; border-radius: 50%; background: var(--red); transform: translate(-50%, -50%); box-shadow: 0 0 8px var(--red); }

/* tasks */
.ldx-task { display: flex; align-items: flex-start; gap: 13px; padding: 14px 0; border-top: 1px solid var(--line-2); }
.ldx-task:first-child { border-top: none; padding-top: 4px; }
.ldx-task-n { flex: 0 0 26px; width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; font-family: var(--display); font-weight: 700; font-size: 12.5px; color: var(--red); background: var(--red-soft); border: 1px solid var(--line-2); }
.ldx-task-body { flex: 1; min-width: 0; }
.ldx-task-t { font-size: 14.5px; font-weight: 700; color: var(--text); }
.ldx-task-d { font-size: 13px; color: var(--text-2); margin-top: 3px; line-height: 1.55; }

/* solutions locked */
.ldx-locked { text-align: center; padding: 40px 24px; }
.ldx-locked-ic { width: 58px; height: 58px; margin: 0 auto 16px; border-radius: 5px; display: grid; place-items: center; color: var(--red); background: var(--red-soft); border: 1px solid var(--line-2); }
.ldx-locked-ic svg { width: 28px; height: 28px; }
.ldx-locked h4 { font-family: var(--display); font-size: 18px; color: var(--text); margin-bottom: 8px; }
.ldx-locked p { font-size: 14px; color: var(--text-2); max-width: 46ch; margin: 0 auto 18px; line-height: 1.6; }
.ldx-ghostlines { max-width: 420px; margin: 0 auto 20px; display: flex; flex-direction: column; gap: 9px; filter: blur(3px); opacity: .5; user-select: none; }
.ldx-ghostlines i { height: 10px; border-radius: 4px; background: var(--line-2); }
.ldx-ghostlines i:nth-child(2) { width: 85%; } .ldx-ghostlines i:nth-child(3) { width: 70%; }

/* ---- right rail ---- */
.ldx-rail { position: sticky; top: 18px; display: flex; flex-direction: column; gap: 14px; }
.ldx-card { background: var(--card); border: 1px solid var(--line-2); border-radius: 5px; box-shadow: var(--shadow-sm); padding: 18px; }
.ldx-card > h4 { font-family: var(--display); font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 14px; }

/* launch console */
.ldx-console { position: relative; overflow: hidden; }
.ldx-status { display: inline-flex; align-items: center; gap: 9px; font-family: var(--mono); font-size: 12.5px; font-weight: 700; color: var(--text-2); padding: 8px 13px; border-radius: 999px; background: var(--red-soft-2); border: 1px solid var(--line-2); margin-bottom: 16px; }
.ldx-status-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--muted); }
.ldx-console.running .ldx-status { color: #16a34a; border-color: rgba(22,163,74,.4); background: rgba(22,163,74,.1); }
.ldx-console.running .ldx-status-dot { background: #16a34a; box-shadow: 0 0 8px #16a34a; animation: ldxPulse 1.8s ease-in-out infinite; }
@keyframes ldxPulse { 0%,100% { opacity: 1; } 50% { opacity: .4; } }
.ldx-field { margin-bottom: 12px; }
.ldx-field label { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.ldx-select { position: relative; }
.ldx-select select { appearance: none; -webkit-appearance: none; width: 100%; background: var(--red-soft-2); border: 1px solid var(--line-2); border-radius: 9px; font-family: var(--sans); font-size: 13px; font-weight: 600; color: var(--text); padding: 10px 30px 10px 12px; cursor: pointer; outline: none; }
.ldx-select::after { content: ""; position: absolute; right: 13px; top: 50%; width: 7px; height: 7px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: translateY(-65%) rotate(45deg); pointer-events: none; }
.ldx-start { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--red-grad); color: #fff; font-family: var(--sans); font-weight: 800; font-size: 14.5px; padding: 13px; border-radius: 10px; cursor: pointer; box-shadow: var(--shadow-red); margin-top: 6px; transition: transform .15s ease; }
.ldx-start:hover { transform: translateY(-2px); }
.ldx-start svg { width: 17px; height: 17px; }
.ldx-console.running .ldx-start { background: #16a34a; box-shadow: 0 8px 22px rgba(22,163,74,.32); }
.ldx-add { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: none; border: 1px solid var(--line-2); color: var(--text); font-family: var(--sans); font-weight: 700; font-size: 13.5px; padding: 11px; border-radius: 10px; cursor: pointer; margin-top: 9px; transition: .15s ease; }
.ldx-add:hover { border-color: var(--red); color: var(--red); background: var(--red-soft-2); }
.ldx-add svg { width: 16px; height: 16px; }
.ldx-add.on { background: var(--red-soft); border-color: var(--red); color: var(--red-700); }
.ldx-timer { font-family: var(--mono); font-size: 12px; color: var(--text-2); text-align: center; margin-top: 12px; }
.ldx-timer b { color: var(--red); }
.ldx-note { font-size: 11.5px; color: var(--muted); line-height: 1.55; margin-top: 12px; }

/* info rows */
.ldx-irow { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line-2); font-size: 13px; }
.ldx-irow:first-of-type { border-top: none; padding-top: 0; }
.ldx-irow .k { color: var(--text-2); font-weight: 600; display: inline-flex; align-items: center; gap: 7px; }
.ldx-irow .k svg { width: 15px; height: 15px; color: var(--muted); }
.ldx-irow .v { font-weight: 700; color: var(--text); display: inline-flex; align-items: center; gap: 6px; }

.ldx-toolchips { display: flex; flex-wrap: wrap; gap: 7px; }

/* similar labs mini */
.ldx-sim { display: flex; align-items: center; gap: 11px; padding: 10px 0; border-top: 1px solid var(--line-2); }
.ldx-sim:first-of-type { border-top: none; }
.ldx-sim svg { width: 32px; height: 32px; flex: 0 0 32px; }
.ldx-sim-t { font-size: 13px; font-weight: 700; color: var(--text); line-height: 1.3; }
.ldx-sim-t:hover { color: var(--red); }
.ldx-sim-s { font-family: var(--mono); font-size: 11px; color: var(--muted); margin-top: 2px; }

/* ---- responsive ---- */
@media (max-width: 980px) {
  .ldx-grid { grid-template-columns: 1fr; }
  .ldx-rail { position: static; }
  .ldx-hero-ic { display: none; }
}
@media (max-width: 560px) {
  .ldx-hero { padding: 22px 18px; }
  .ldx-panel { padding: 18px 16px; }
  .ldx-diagram { flex-direction: column; gap: 14px; }
  .ldx-wire { width: 2px; min-height: 24px; border-top: none; border-left: 2px dashed var(--line-2); flex: none; }
}

/* ============================================================
   STICKY TOPBAR (all pages)
   The page scrolls on the body; the sidebar is already sticky.
   Pin the .topbar header to the top of the viewport while the
   content beneath scrolls underneath it. Negative side margins
   make the opaque background span the full content width (incl.
   the .content side padding) so cards don't peek past its edges.
   ============================================================ */
.topbar {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 30;
  /* Transparent at the top of the page so the header blends into the app background —
     no divider/seam on load. The frosted background + divider are applied only once the
     content scrolls beneath it (.is-stuck, toggled by AppShell on the active scroller). */
  background: transparent;
  margin: 0 -24px;
  /* keep original vertical rhythm; restore the side padding the
     negative margins removed, and give a bit more headroom up top
     since .content's top padding scrolls away when pinned */
  padding: 16px 24px;
  border-bottom: 1px solid transparent;
  transition: background-color .2s ease, box-shadow .2s ease, border-color .2s ease;
}

/* Frosted background + subtle separation once the header is stuck (toggled by AppShell). */
.topbar.is-stuck {
  background: var(--stickyheader-bg);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border-bottom-color: var(--line-2);
  box-shadow: 0 6px 18px rgba(60, 48, 24, .06);
}

html[data-theme="dark"] .topbar.is-stuck {
  box-shadow: 0 8px 22px rgba(0, 0, 0, .45);
}

@media (max-width: 860px) {
  .topbar {
    margin: 0 -16px;
    padding: 12px 16px;
    z-index: 1002;
  }

  /* The toggle must stay above the sidebar (z-index:1000) to remain
     clickable, which drags the whole (translucent, blurred) topbar
     above the drawer with it. Once the drawer is open, hide the rest
     of the topbar's content and its background/blur so it doesn't
     paint over the sidebar's brand and first nav links — only the
     toggle (now acting as the drawer's close button) stays visible. */
  /* The transparent topbar still spans the top of the screen above the drawer
     (z-index 1002 vs 1000), so without this it swallows taps on the drawer's
     first nav links (e.g. Dashboard). Let clicks fall through to the drawer;
     only the × close button stays interactive. */
  .app.nav-open .topbar {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
    border-bottom-color: transparent;
    pointer-events: none;
  }

  .app.nav-open .topbar > *:not(.nav-toggle) {
    visibility: hidden;
  }

  .app.nav-open .topbar .nav-toggle {
    pointer-events: auto;
  }
}

/* ============================================================
   My Profile page  (my-profile.html) — modern client-profile UI
   ============================================================ */
.pf2 {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 22px;
  align-items: start;
  margin: 8px 0 32px;
}

/* soft floating card base */
.pf2-card,
.pf2-stat,
.pf2-panel {
  background: #fff;
  border-radius: 5px;
  box-shadow: 0 18px 40px rgba(78, 66, 96, .12), 0 2px 6px rgba(78, 66, 96, .05);
}

html[data-theme="dark"] .pf2-card,
html[data-theme="dark"] .pf2-stat,
html[data-theme="dark"] .pf2-panel {
  background: var(--card);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .5);
}

/* ---- Left profile card ---- */
.pf2-card {
  padding: 30px 24px 26px;
  text-align: center;
  position: sticky;
  top: 84px;
}

.pf2-avatar {
  width: 108px;
  height: 108px;
  margin: 2px auto 18px;
  border-radius: 50%;
  position: relative;
  display: grid;
  place-items: center;
  font-family: var(--display);
  font-size: 42px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(140deg, #ff7a7b 0%, #f01c24 100%);
  box-shadow: 0 12px 26px rgba(240, 28, 36, .38);
}

.pf2-cam {
  position: absolute;
  right: 2px;
  bottom: 2px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #fff;
  display: grid;
  place-items: center;
  color: var(--red);
  box-shadow: 0 3px 10px rgba(0, 0, 0, .2);
}

.pf2-cam svg { width: 15px; height: 15px; }

.pf2-name {
  font-size: 21px;
  margin-bottom: 9px;
}

.pf2-badge {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 13px;
  border-radius: 999px;
  background: #e6f7ee;
  color: #16a34a;
}

html[data-theme="dark"] .pf2-badge { background: #16341f; color: #4ade80; }

.pf2-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin: 20px 0 6px;
  padding: 13px;
  border-radius: 14px;
  font-weight: 600;
  font-size: 14px;
  color: #fff;
  background: var(--red-grad);
  box-shadow: var(--shadow-red);
  transition: transform .12s, box-shadow .15s;
}

.pf2-cta:hover { box-shadow: 0 12px 28px rgba(240, 28, 36, .45); }
.pf2-cta:active { transform: translateY(1px); }
.pf2-cta svg { width: 17px; height: 17px; }

.pf2-fields {
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 11px;
  text-align: left;
}

.pf2-field {
  background: #f5f6fb;
  border-radius: 14px;
  padding: 11px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
}

html[data-theme="dark"] .pf2-field { background: #15110b; }

.pf2-field .fic {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: #fff;
  color: var(--red);
  box-shadow: 0 2px 6px rgba(78, 66, 96, .12);
}

html[data-theme="dark"] .pf2-field .fic { background: #221c14; }
.pf2-field .fic svg { width: 16px; height: 16px; }

.pf2-field .ftxt { min-width: 0; }
.pf2-field .lbl { display: block; font-size: 11px; color: var(--text-2); font-weight: 600; margin-bottom: 1px; }
.pf2-field .val { font-size: 13px; font-weight: 600; color: var(--text); word-break: break-word; }

/* ---- Right main column ---- */
.pf2-main {
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-width: 0;
}

/* stat cards with mini charts */
.pf2-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.pf2-stat {
  padding: 18px 20px 16px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  min-height: 116px;
}

.pf2-stat .pf2-stat-l { display: flex; flex-direction: column; }

.pf2-stat .pf2-ic {
  width: 36px;
  height: 36px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  margin-bottom: 14px;
}

.pf2-stat .pf2-ic svg { width: 19px; height: 19px; }
.pf2-stat .num { font-family: var(--display); font-size: 30px; font-weight: 700; line-height: 1; }
.pf2-stat .lbl { font-size: 12.5px; color: var(--text-2); margin-top: 5px; }

.pf2-stat .pf2-pct {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11.5px;
  font-weight: 700;
  margin-top: 8px;
  color: #16a34a;
}

.pf2-stat .pf2-pct svg { width: 12px; height: 12px; }

/* mini bar chart */
.pf2-mini {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 52px;
  width: 78px;
  flex: 0 0 78px;
}

.pf2-mini i {
  flex: 1;
  border-radius: 4px;
  height: 0;
  transition: height .9s cubic-bezier(.4, 0, .2, 1);
}

/* accent palette per card */
.pf2-stat.c-blue   .pf2-ic { background: #e9f0fe; color: #4f7df0; }
.pf2-stat.c-blue   .pf2-mini i { background: #4f7df0; }
.pf2-stat.c-green  .pf2-ic { background: #e6f7ee; color: #16a34a; }
.pf2-stat.c-green  .pf2-mini i { background: #1eb87f; }
.pf2-stat.c-violet .pf2-ic { background: #f0ebfe; color: #8b5cf6; }
.pf2-stat.c-violet .pf2-mini i { background: #8b5cf6; }

html[data-theme="dark"] .pf2-stat.c-blue   .pf2-ic { background: #18233d; }
html[data-theme="dark"] .pf2-stat.c-green  .pf2-ic { background: #16341f; }
html[data-theme="dark"] .pf2-stat.c-violet .pf2-ic { background: #261b3d; }

/* ---- Panel + tabs ---- */
.pf2-panel { overflow: hidden; }

.pf2-tabs {
  display: flex;
  gap: 2px;
  padding: 6px 16px 0;
  border-bottom: 1px solid var(--line-2);
  overflow-x: auto;
  scrollbar-width: none;
}

.pf2-tabs::-webkit-scrollbar { display: none; }

.pf2-tab {
  position: relative;
  padding: 15px 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-2);
  white-space: nowrap;
  transition: color .15s;
}

.pf2-tab:hover { color: var(--text); }
.pf2-tab.active { color: var(--red); }

.pf2-tab.active::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: -1px;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--red-grad);
}

.pf2-tab.danger { color: var(--red); margin-left: auto; opacity: .85; }
.pf2-tab.danger:hover { opacity: 1; }

.pf2-panes { padding: 18px 22px 22px; }
.pf2-pane { display: none; }
.pf2-pane.is-active { display: block; animation: pf2Fade .28s ease; }

@keyframes pf2Fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.pf2-pane-h {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}

.pf2-pane-h h3 { font-size: 16px; }
.pf2-pane-h .meta { margin-left: auto; font-size: 12.5px; color: var(--text-2); }

/* ---- Active Learnings: table-style rows ---- */
.pf2-rows { display: flex; flex-direction: column; }

.pf2-row {
  display: grid;
  grid-template-columns: 46px 1fr auto 116px;
  align-items: center;
  gap: 16px;
  padding: 15px 6px;
  border-bottom: 1px solid var(--line-2);
}

.pf2-row:last-child { border-bottom: none; }

.pf2-logo {
  width: 44px;
  height: 44px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  font-family: var(--display);
  font-weight: 700;
  font-size: 13px;
  color: #fff;
  letter-spacing: .02em;
}

.l-red { background: linear-gradient(140deg, #ff7a7b, #f01c24); }
.l-ink { background: linear-gradient(140deg, #3a322a, #211c16); }
.l-blue { background: linear-gradient(140deg, #6f9bff, #3b6fe0); }
.l-teal { background: linear-gradient(140deg, #3fd6c0, #14b8a6); }

.pf2-row .rt b { display: block; font-size: 14px; font-weight: 600; }
.pf2-row .rt span { font-size: 12px; color: var(--text-2); }

.pf2-pill {
  font-size: 12px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}

.pf2-pill.booked { background: #e8f0fe; color: #3b6fe0; }
.pf2-pill.progress { background: #f0ebfe; color: #7c52e0; }
.pf2-pill.done { background: #e6f7ee; color: #16a34a; }
.pf2-pill.cancelled { background: #fdeaea; color: #e5484d; }

html[data-theme="dark"] .pf2-pill.booked { background: #18233d; color: #7aa2f7; }
html[data-theme="dark"] .pf2-pill.progress { background: #261b3d; color: #b69cf7; }
html[data-theme="dark"] .pf2-pill.done { background: #16341f; color: #4ade80; }
html[data-theme="dark"] .pf2-pill.cancelled { background: #3a1a1c; color: #ff7b7e; }

.pf2-prog { text-align: right; }
.pf2-prog .pp { font-family: var(--display); font-weight: 700; font-size: 14px; }
.pf2-prog .pbar { height: 6px; border-radius: 999px; background: var(--line-2); overflow: hidden; margin-top: 5px; }
.pf2-prog .pbar i { display: block; height: 100%; border-radius: 999px; background: var(--red-grad); width: 0; transition: width 1s cubic-bezier(.4, 0, .2, 1); }

/* ---- Analytics pane ---- */
.pf2-an-split { display: grid; grid-template-columns: 1.55fr 1fr; gap: 18px; }

.pf2-sub {
  background: #f7f8fc;
  border-radius: 16px;
  padding: 18px;
}

html[data-theme="dark"] .pf2-sub { background: #15110b; }

.pf2-sub-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.pf2-sub-h h4 { font-size: 14px; font-family: var(--sans); font-weight: 700; }
.pf2-sub-h .lg { font-size: 12px; color: var(--text-2); display: inline-flex; align-items: center; gap: 6px; }
.pf2-sub-h .lg i { width: 9px; height: 9px; border-radius: 3px; background: var(--red); }

.pf2-bars { display: flex; align-items: flex-end; gap: 10px; height: 150px; }
.pf2-bars .col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; height: 100%; justify-content: flex-end; }
.pf2-bars .bar { width: 100%; max-width: 24px; border-radius: 7px; background: linear-gradient(180deg, #ff7a7b, #f01c24); height: 0; transition: height .9s cubic-bezier(.4, 0, .2, 1); }
.pf2-bars .bar.alt { background: linear-gradient(180deg, #c9c3f0, #8b5cf6); }
.pf2-bars .xl { font-size: 11px; color: var(--text-2); }

.pf2-donut {
  width: 142px; height: 142px; border-radius: 50%;
  margin: 4px auto 14px; display: grid; place-items: center; position: relative;
  background: conic-gradient(var(--red) 0deg, var(--line-2) 0deg);
  transition: background 1s ease;
}
.pf2-donut::after { content: ""; position: absolute; inset: 17px; border-radius: 50%; background: #f7f8fc; }
html[data-theme="dark"] .pf2-donut::after { background: #15110b; }
.pf2-donut .dc { position: relative; z-index: 1; text-align: center; }
.pf2-donut .dc b { font-family: var(--display); font-size: 25px; }
.pf2-donut .dc span { display: block; font-size: 10px; letter-spacing: .12em; color: var(--text-2); }
.pf2-dl { display: flex; flex-direction: column; gap: 9px; }
.pf2-dl .row { display: flex; align-items: center; gap: 9px; font-size: 13px; }
.pf2-dl .row i { width: 10px; height: 10px; border-radius: 3px; }
.pf2-dl .row b { margin-left: auto; font-family: var(--mono); font-size: 12.5px; }

.pf2-an-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 18px; }
.pf2-tile { background: #f7f8fc; border-radius: 14px; padding: 14px 15px; }
html[data-theme="dark"] .pf2-tile { background: #15110b; }
.pf2-tile .v { font-family: var(--display); font-size: 21px; font-weight: 700; }
.pf2-tile .k { font-size: 11.5px; color: var(--text-2); margin-top: 2px; }

/* ---- Support pane ---- */
.pf2-sup-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 16px; }
.pf2-supc { background: #f7f8fc; border-radius: 16px; padding: 20px; text-align: center; }
html[data-theme="dark"] .pf2-supc { background: #15110b; }
.pf2-supc .ic { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto 12px; }
.pf2-supc .ic svg { width: 21px; height: 21px; }
.pf2-supc.s-blue .ic { background: #e9f0fe; color: #4f7df0; }
.pf2-supc.s-green .ic { background: #e6f7ee; color: #16a34a; }
.pf2-supc.s-red .ic { background: #fdeaea; color: var(--red); }
.pf2-supc h4 { font-size: 14.5px; font-family: var(--sans); }
.pf2-supc p { font-size: 12.5px; color: var(--text-2); margin: 5px 0 14px; }
.pf2-supc .lnk { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600; color: var(--red); white-space: nowrap; }
.pf2-supc .lnk svg { width: 14px; height: 14px; flex: 0 0 auto; }

.pf2-faq { display: flex; flex-direction: column; gap: 10px; }
.pf2-faq details { background: #f7f8fc; border-radius: 14px; overflow: hidden; }
html[data-theme="dark"] .pf2-faq details { background: #15110b; }
.pf2-faq summary { list-style: none; cursor: pointer; padding: 15px 18px; font-weight: 600; font-size: 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pf2-faq summary::-webkit-details-marker { display: none; }
.pf2-faq summary::after { content: ""; width: 9px; height: 9px; border-right: 2px solid var(--text-2); border-bottom: 2px solid var(--text-2); transform: rotate(45deg); transition: transform .2s; flex: 0 0 auto; }
.pf2-faq details[open] summary::after { transform: rotate(-135deg); }
.pf2-faq .a { padding: 0 18px 16px; font-size: 13.5px; color: var(--text-2); line-height: 1.6; }

/* ---- Log out pane ---- */
.pf2-logout { text-align: center; padding: 30px 20px; max-width: 420px; margin: 0 auto; }
.pf2-logout .ic { width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto 16px; background: #fdeaea; color: var(--red); }
html[data-theme="dark"] .pf2-logout .ic { background: #3a1a1c; }
.pf2-logout .ic svg { width: 27px; height: 27px; }
.pf2-logout h3 { font-size: 19px; margin-bottom: 7px; }
.pf2-logout p { font-size: 13.5px; color: var(--text-2); margin-bottom: 22px; line-height: 1.6; }
.pf2-logout-row { display: flex; gap: 10px; justify-content: center; }
.pf2-logout-row .btn { border-radius: 12px; }

/* ---- Responsive ---- */
@media (max-width: 1000px) {
  .pf2 { grid-template-columns: 1fr; }
  .pf2-card { position: static; }
  .pf2-an-split { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .pf2-stats { grid-template-columns: 1fr; }
  .pf2-an-tiles { grid-template-columns: repeat(2, 1fr); }
  .pf2-sup-grid { grid-template-columns: 1fr; }
  .pf2-row { grid-template-columns: 40px 1fr auto; }
  .pf2-row .pf2-prog { display: none; }
}

/* ============================================================
   Settings page  (settings.html)
   ============================================================ */
.set {
  margin: 6px 0 30px;
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 18px;
  align-items: start;
}

.set-menu {
  display: flex;
  flex-direction: column;
  gap: 3px;
  background: var(--card);
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  padding: 10px;
  position: sticky;
  top: 84px;
}

.set-link {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 13px;
  border-radius: var(--r-md);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-2);
  width: 100%;
  text-align: left;
  transition: background .15s, color .15s;
}

.set-link svg { width: 18px; height: 18px; flex: 0 0 18px; }
.set-link:hover { background: var(--red-soft-2); color: var(--text); }
.set-link.active { background: var(--ink); color: #fff; }
html[data-theme="dark"] .set-link.active { background: var(--red); }

.set-body { min-width: 0; display: flex; flex-direction: column; gap: 18px; }

.set-sec {
  background: var(--card);
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  padding: 24px;
  scroll-margin-top: 84px;
}

.set-sec-h {
  margin-bottom: 4px;
  font-size: 16px;
}

.set-sec-d {
  font-size: 13px;
  color: var(--text-2);
  margin-bottom: 16px;
}

.set-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.set-field { display: flex; flex-direction: column; gap: 6px; }
.set-field.full { grid-column: 1 / -1; }
.set-field label { font-size: 12.5px; font-weight: 600; color: var(--text-2); }

.set-input {
  font-family: var(--sans);
  font-size: 14px;
  color: var(--text);
  background: #ffffff;
  border: 1.5px solid var(--line-2);
  border-radius: var(--r-md);
  padding: 12px 16px;
  width: 100%;
  transition: border-color .15s, box-shadow .15s;
}

.set-input::placeholder { color: var(--muted); }
.set-input[readonly] { background: #faf6f0; color: var(--text-2); cursor: not-allowed; }

html[data-theme="dark"] .set-input { background: #15110b; border-color: var(--line-2); }
html[data-theme="dark"] .set-input[readonly] { background: #110d08; }

.set-input:focus {
  outline: none;
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(240, 28, 36, .14);
}

select.set-input { appearance: none; -webkit-appearance: none; cursor: pointer; }

.set-actions {
  display: flex;
  gap: 12px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--line-2);
}

/* Toggle rows */
.set-rows { display: flex; flex-direction: column; }

.set-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line-2);
}

.set-row:last-child { border-bottom: none; }
.set-row .txt { flex: 1; }
.set-row .txt b { display: block; font-size: 14px; font-weight: 600; }
.set-row .txt span { font-size: 12.5px; color: var(--text-2); }

/* Switch */
.switch { position: relative; flex: 0 0 auto; width: 42px; height: 24px; }
.switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.switch .track {
  position: absolute;
  inset: 0;
  /* `.track` is also a generic class in styles-v3 (a card) and styles-v4
     (`display:flex; gap:5px; height:34px`), and v4 loads AFTER this file. Everything a
     bare `.track` sets has to be neutralised here or it leaks into the switch — `height`
     in particular fights `inset:0` and pushed the knob outside a 24px track. */
  display: block;
  width: auto;
  height: auto;
  gap: 0;
  margin: 0;
  padding: 0;
  border: none;
  box-shadow: none;
  border-radius: var(--pill);
  background: var(--line-2);
  transition: background .2s;
}
.switch .track::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
  transition: transform .2s;
}
.switch input:checked + .track { background: var(--red); }
.switch input:checked + .track::before { transform: translateX(18px); }

/* Appearance theme picker */
.set-themes { display: flex; gap: 12px; flex-wrap: wrap; }
.set-theme {
  border: 1.5px solid var(--line-2);
  border-radius: var(--r-md);
  padding: 8px;
  cursor: pointer;
  width: 130px;
  transition: border-color .15s;
  background: var(--card);
}
.set-theme.active { border-color: var(--red); box-shadow: 0 0 0 3px rgba(240, 28, 36, .14); }
.set-theme .swatch { height: 64px; border-radius: 6px; border: 1px solid var(--line-2); margin-bottom: 8px; }
.set-theme .swatch.light { background: linear-gradient(135deg, #fff7f7 60%, #ece5d8); }
.set-theme .swatch.dark { background: linear-gradient(135deg, #0e0b08 60%, #1b1813); }
.set-theme .swatch.system { background: linear-gradient(135deg, #fff7f7 50%, #0e0b08 50%); }
.set-theme .lbl { font-size: 13px; font-weight: 600; text-align: center; }

/* Danger zone */
.set-sec.danger { border-color: rgba(240, 28, 36, .35); }
.set-sec.danger .set-sec-h { color: var(--red); }

/* ---- Responsive (settings) ---- */
@media (max-width: 920px) {
  .set { grid-template-columns: 1fr; }
  .set-menu { position: static; flex-direction: row; flex-wrap: wrap; top: auto; }
  .set-link { width: auto; flex: 1 1 auto; justify-content: center; }
}

@media (max-width: 640px) {
  .set-grid { grid-template-columns: 1fr; }
}

/* ====================== Dashboard: Upcoming Batch popup (.ub) ====================== */
.ub-overlay { position: fixed; inset: 0; z-index: 200; display: none; align-items: center; justify-content: center; padding: 20px;
  background: rgba(12, 10, 14, .58); -webkit-backdrop-filter: blur(1px); backdrop-filter: blur(1px); animation: ubFade .2s ease; }
.ub-overlay.open { display: flex; }
@keyframes ubFade { from { opacity: 0; } to { opacity: 1; } }
.ub-card { position: relative; width: min(440px, 100%); max-height: 92vh; overflow: hidden; background: var(--card);
  border: 1px solid var(--line-2); border-radius: 18px; box-shadow: var(--shadow-md);
  animation: ubPop .3s cubic-bezier(.3, 1.2, .5, 1); }
@keyframes ubPop { from { opacity: 0; transform: translateY(16px) scale(.97); } to { opacity: 1; transform: none; } }
.ub-x { position: absolute; top: 12px; right: 12px; z-index: 2; width: 34px; height: 34px; border-radius: 50%;
  background: rgba(12, 12, 15, .45); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); color: #fff;
  border: none; cursor: pointer; display: grid; place-items: center; transition: transform .15s ease, background .15s ease; }
.ub-x:hover { transform: rotate(90deg); background: rgba(12, 12, 15, .7); }
.ub-x svg { width: 16px; height: 16px; }
.ub-cover { position: relative; min-height: 150px; display: flex; flex-direction: column; justify-content: flex-end; padding: 18px; color: #fff;
  background: radial-gradient(120% 140% at 80% 20%, #3a1d2a 0%, transparent 55%), linear-gradient(120deg, #14110d 0%, #241019 55%, #3a0f16 100%); }
.ub-badge { position: absolute; top: 16px; left: 16px; display: inline-flex; align-items: center; gap: 7px; background: rgba(255, 91, 92, .16);
  border: 1px solid rgba(255, 91, 92, .4); color: #ffd9da; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; padding: 5px 11px; border-radius: 999px; }
.ub-pulse { width: 7px; height: 7px; border-radius: 50%; background: #ff5b5c; box-shadow: 0 0 0 0 rgba(255, 91, 92, .7); animation: ubPulse 1.6s infinite; }
@keyframes ubPulse { 70% { box-shadow: 0 0 0 7px rgba(255, 91, 92, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 91, 92, 0); } }
.ub-cover-title { font-family: var(--display); font-size: 22px; font-weight: 800; line-height: 1.22; max-width: 90%; }
.ub-body { padding: 20px; }
.ub-cat { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--red); }
.ub-body > p { font-size: 13px; color: var(--text-2); line-height: 1.6; margin-top: 6px; }
.ub-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 16px 0; }
.ub-stat { background: var(--red-soft-2); border: 1px solid var(--line-2); border-radius: 10px; padding: 10px; text-align: center; }
.ub-k { display: block; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.ub-v { display: block; font-size: 13.5px; font-weight: 700; color: var(--text); margin-top: 3px; }
.ub-seats { margin-bottom: 18px; }
.ub-seats-top { display: flex; justify-content: space-between; font-size: 12px; font-weight: 600; color: var(--text-2); margin-bottom: 6px; }
.ub-seats-top strong { color: var(--red); }
.ub-seats-bar { height: 7px; border-radius: 999px; background: var(--line-2); overflow: hidden; }
.ub-seats-bar i { display: block; height: 100%; border-radius: 999px; background: var(--red-grad); }
.ub-actions { display: flex; align-items: center; gap: 12px; }
.ub-actions .btn { flex: 1; justify-content: center; }
.ub-later { background: none; border: none; color: var(--muted); font-size: 13px; font-weight: 600; cursor: pointer; padding: 8px; white-space: nowrap; }
.ub-later:hover { color: var(--text); }

/* ============================================================
   Course content viewer + quiz popup  (course-details-1.html)
   ============================================================ */
/* top preview: now-playing + fullscreen */
.cov-now {
  position: absolute;
  left: 12px;
  top: 12px;
  z-index: 3;
  max-width: calc(100% - 24px);
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  background: rgba(15, 12, 8, .72);
  padding: 6px 11px;
  border-radius: 999px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .2s, transform .2s;
}
.cov-preview.is-playing .cov-now { opacity: 1; transform: none; }
.cov-preview.is-playing .cov-play { opacity: 0; pointer-events: none; }
.cov-preview.is-playing .cov-screen::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 120% at 50% 40%, transparent 55%, rgba(0, 0, 0, .35));
}
.cov-fsbtn {
  margin-left: 2px;
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 22px;
  border-radius: 5px;
  color: inherit;
  opacity: .8;
  transition: opacity .15s, background .15s;
}
.cov-fsbtn:hover { opacity: 1; background: rgba(255, 255, 255, .14); }
.cov-fsbtn svg { width: 15px; height: 15px; }
.cov-screen:fullscreen { display: grid; place-items: center; background: #0b0a08; }
.cov-screen:fullscreen .cov-thumb { width: auto; height: 100%; }

/* modal overlay */
.cvm-overlay {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 22px;
  background: rgba(14, 11, 8, .62);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.cvm-overlay.open { display: flex; animation: cvmFade .2s ease; }
@keyframes cvmFade { from { opacity: 0; } to { opacity: 1; } }

.cvm {
  width: min(760px, 100%);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1.5px solid var(--line-2);
  border-radius: 18px;
  box-shadow: 0 0 0 1px rgba(60, 48, 24, .04), var(--shadow-md);
  overflow: hidden;
  animation: cvmPop .26s cubic-bezier(.3, 1.1, .5, 1);
}
html[data-theme="dark"] .cvm { background: #1b1813; border-color: var(--line-2); }
@keyframes cvmPop { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }

.cvm-head {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line-2);
}
.cvm-ic {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  background: var(--red-soft);
  color: var(--red);
}
.cvm-ic svg { width: 20px; height: 20px; }
.cvm-htext { flex: 1; min-width: 0; }
.cvm-kind { display: block; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-2); }
.cvm-title { font-size: 16px; font-family: var(--sans); font-weight: 700; line-height: 1.3; }
.cvm-timer {
  flex: 0 0 auto;
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 700;
  color: var(--red);
  background: var(--red-soft);
  padding: 6px 12px;
  border-radius: 999px;
}
.cvm-timer.low { animation: cvmBlink 1s steps(2, start) infinite; }
@keyframes cvmBlink { 50% { opacity: .45; } }
.cvm-x {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  color: var(--text-2);
  transition: background .15s, color .15s;
}
.cvm-x:hover { background: var(--red-soft-2); color: var(--red); }
.cvm-x svg { width: 18px; height: 18px; }

.cvm-body { padding: 18px; overflow-y: auto; }

/* pdf / ppt document viewer */
.cvm-doc-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; font-size: 12.5px; color: var(--text-2); }
.cvm-doc-acts { display: flex; gap: 8px; }
.cvm-btn {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 700; color: #fff;
  background: var(--red-grad); border-radius: 9px; padding: 8px 15px; cursor: pointer;
  box-shadow: var(--shadow-red);
}
.cvm-btn.ghost { background: var(--card); color: var(--text); border: 1.5px solid var(--line-2); box-shadow: none; }
.cvm-btn.ghost:hover { border-color: var(--red); color: var(--red); }
.cvm-doc { display: flex; flex-direction: column; gap: 14px; }
.cvm-page {
  background: #fff;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  box-shadow: var(--shadow-sm);
  padding: 22px;
  aspect-ratio: 16 / 10;
  display: flex;
  flex-direction: column;
}
html[data-theme="dark"] .cvm-page { background: #14110b; }
.cvm-page-n { font-family: var(--mono); font-size: 11px; color: var(--muted); margin-bottom: 16px; }
.cvm-page-lines { display: flex; flex-direction: column; gap: 11px; }
.cvm-page-lines span { height: 9px; border-radius: 4px; background: var(--line-2); }

/* quiz */
.cvm-quiz { display: flex; flex-direction: column; gap: 16px; }
.cvm-q { border: 1px solid var(--line-2); border-radius: 13px; padding: 15px 16px; transition: border-color .2s; }
.cvm-q-h { display: flex; gap: 11px; align-items: flex-start; margin-bottom: 12px; }
.cvm-q-n { flex: 0 0 24px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; background: var(--ink); color: #fff; }
html[data-theme="dark"] .cvm-q-n { background: var(--red); }
.cvm-q-h p { font-size: 14.5px; font-weight: 600; line-height: 1.4; }
.cvm-opts { display: grid; gap: 8px; padding-left: 35px; }
.cvm-opt {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 13px; border: 1.5px solid var(--line-2); border-radius: 10px; cursor: pointer;
  font-size: 13.5px; transition: border-color .15s, background .15s;
}
.cvm-opt:hover { border-color: var(--red); background: var(--red-soft-2); }
.cvm-opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.cvm-radio { flex: 0 0 20px; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--muted); position: relative; transition: border-color .15s, background .15s; }
.cvm-opt input:checked + .cvm-radio,
.cvm-opt.sel .cvm-radio { border-color: var(--red); background: var(--red); }
.cvm-opt input:checked + .cvm-radio::after,
.cvm-opt.sel .cvm-radio::after { content: ""; position: absolute; left: 6px; top: 3px; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); background: none; }
.cvm-opt.locked { cursor: default; pointer-events: none; }
.cvm-opt.is-correct { border-color: #16a34a; background: rgba(22, 163, 74, .1); }
.cvm-opt.is-correct .cvm-radio { border-color: #16a34a; }
.cvm-opt.is-correct .cvm-radio::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: #16a34a; }
.cvm-opt.is-wrong { border-color: #e5484d; background: rgba(229, 72, 77, .1); }
.cvm-opt.is-wrong .cvm-radio { border-color: #e5484d; }
.cvm-quiz-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 6px; flex-wrap: wrap; }
.cvm-quiz-note { font-size: 12.5px; color: var(--text-2); }
.cvm-result { font-family: var(--display); font-size: 15px; font-weight: 700; }
.cvm-result.pass { color: #16a34a; }
.cvm-result.fail { color: #e5484d; }

/* one-question-at-a-time quiz */
.cvm-qbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 2px; }
.cvm-qstep { font-size: 12.5px; font-weight: 700; color: var(--text-2); }
.cvm-qdots { display: flex; gap: 6px; }
.cvm-qdots span { width: 22px; height: 5px; border-radius: 999px; background: var(--line-2); transition: background .2s; }
.cvm-qdots span.done { background: color-mix(in srgb, var(--red) 45%, var(--line-2)); }
.cvm-qdots span.on { background: var(--red); }
.cvm-q.single { border: none; padding: 0; }
.cvm-q.single .cvm-q-h p { font-size: 16px; }
.cvm-opt.sel { border-color: var(--red); background: var(--red-soft-2); box-shadow: 0 0 0 1px var(--red) inset; }

/* validation warning + shake */
.cvm-warn { display: none; font-size: 12.5px; font-weight: 600; color: var(--red); margin: 6px 2px -2px; }
.cvm-warn.show { display: block; }
.cvm-q.shake { animation: cvmShake .4s; }
@keyframes cvmShake { 0%,100% { transform: translateX(0); } 20%,60% { transform: translateX(-6px); } 40%,80% { transform: translateX(6px); } }

/* inline video in the top preview */
.cov-vid, .cva-vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; z-index: 2; border: 0; }
/* while a real video plays, hide the fake/static control bar so there's only one */
.cov-preview.is-playing .cov-screen-bar,
.cva-preview.is-playing .cva-screen-bar { display: none; }

/* embedded PDF */
.cvm-pdf { width: 100%; height: 62vh; border: 0; border-radius: 10px; background: #fff; display: block; }

/* final result screen */
.cvm-final { text-align: center; padding: 22px 16px 10px; max-width: 430px; margin: 0 auto; }
.cvm-final-ic { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto 16px; }
.cvm-final-ic svg { width: 30px; height: 30px; }
.cvm-final.pass .cvm-final-ic { background: rgba(22, 163, 74, .12); color: #16a34a; }
.cvm-final.fail .cvm-final-ic { background: var(--red-soft); color: var(--red); }
.cvm-final h3 { font-size: 20px; margin-bottom: 8px; }
.cvm-final-score { font-family: var(--display); font-size: 16px; font-weight: 700; }
.cvm-final.pass .cvm-final-score { color: #16a34a; }
.cvm-final.fail .cvm-final-score { color: var(--red); }
.cvm-final-sub { font-size: 13.5px; color: var(--text-2); margin: 8px 0 22px; line-height: 1.55; }
.cvm-final-acts { display: flex; gap: 10px; justify-content: center; }

@media (max-width: 560px) {
  .cvm-opts { padding-left: 0; }
  .cvm-head { padding: 13px 14px; gap: 10px; }
  .cvm-ic { width: 34px; height: 34px; flex-basis: 34px; }
}

/* cva (course-details.html) preview: now-playing + fullscreen */
.cva-now {
  position: absolute;
  left: 12px;
  top: 12px;
  z-index: 3;
  max-width: calc(100% - 24px);
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  background: rgba(10, 8, 6, .8);
  padding: 6px 11px;
  border-radius: 999px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .2s, transform .2s;
}
.cva-preview.is-playing .cva-now { opacity: 1; transform: none; }
.cva-preview.is-playing .cva-play { opacity: 0; pointer-events: none; }
.cva-fsbtn {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 22px;
  border-radius: 5px;
  color: inherit;
  opacity: .75;
  transition: opacity .15s, background .15s;
}
.cva-fsbtn:hover { opacity: 1; background: rgba(255, 255, 255, .12); }
.cva-fsbtn svg { width: 15px; height: 15px; }
.cva-screen:fullscreen { display: grid; place-items: center; background: #060504; }
.cva-screen:fullscreen .cva-thumb { width: auto; height: 100%; }

/* locked (paywalled) curriculum rows — first 3 activities are free, rest "Get access" */
.cov-row.locked .cov-row-t, .cov-row.locked .cov-row-ic,
.cva-row.locked .cva-row-t, .cva-row.locked .cva-row-ic { opacity: .6; }
.cov-row.locked .cov-row-check { color: var(--muted); background: transparent; }
.cov-get.cov-lock, .cva-get.cva-lock { color: var(--text-2); }
.cov-get.cov-lock svg, .cva-get.cva-lock svg { color: var(--muted); }
.cov-get.cov-lock:hover, .cva-get.cva-lock:hover { border-color: var(--red); color: var(--red); }
.cov-get.cov-lock:hover svg, .cva-get.cva-lock:hover svg { color: var(--red); }

/* ============================================================
   Auth: Login + OTP page  (index.html) — white split
   ============================================================ */
.auth-body { min-height: 100vh; background: #fff7f7; }
.auth-wrap { display: grid; grid-template-columns: 1fr 1.05fr; min-height: 100vh; }

/* LEFT: form (glass card over a soft light backdrop) */
.auth-panel { order: 1; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; padding: 44px 28px; background: linear-gradient(150deg, #fff2f0 0%, #fff7f7 50%, #fdedef 100%); }
.auth-panel::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(40% 45% at 16% 20%, rgba(240, 28, 36, .16), transparent 70%),
    radial-gradient(38% 42% at 86% 82%, rgba(255, 138, 76, .16), transparent 70%),
    radial-gradient(34% 40% at 82% 14%, rgba(255, 91, 92, .14), transparent 70%);
}
.auth-theme { display: none; }
.auth-card {
  position: relative; z-index: 1;
  width: min(400px, 100%);
  text-align: center;
  padding: 36px 32px 28px;
  border-radius: 20px;
  background: rgba(255, 255, 255, .55);
  border: 1px solid rgba(255, 255, 255, .7);
  box-shadow: 0 24px 60px rgba(200, 18, 26, .12), inset 0 1px 0 rgba(255, 255, 255, .85);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  backdrop-filter: blur(18px) saturate(1.4);
}

/* RIGHT: heading + content (brand panel) */
.auth-brand {
  order: 2;
  position: relative;
  overflow: hidden;
  color: #fff;
  padding: 48px 52px;
  display: flex;
  flex-direction: column;
  background: linear-gradient(105deg, #d11318 0%, #ad0c11 44%, #975535 100%);
}
.auth-brand::after { content: ""; position: absolute; right: -130px; top: -120px; width: 380px; height: 380px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, .16), transparent 62%); }
.auth-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .08) 1px, transparent 1px);
  background-size: 30px 30px;
  -webkit-mask-image: radial-gradient(120% 100% at 70% 0%, #000 30%, transparent 75%);
  mask-image: radial-gradient(120% 100% at 70% 0%, #000 30%, transparent 75%);
}
.auth-brand-top { display: flex; align-items: center; justify-content: space-between; gap: 24px; position: relative; z-index: 1; }
.auth-logo { height: 32px; width: auto; filter: brightness(0) invert(1); position: relative; z-index: 1; }
.auth-orgmark {
  display: flex; flex-direction: column; gap: 3px; text-align: right;
  padding: 9px 16px; border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .24);
  background: rgba(255, 255, 255, .10);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.auth-orgmark-kicker { font-size: 9.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .16em; color: rgba(255, 255, 255, .72); line-height: 1; }
.auth-orgmark-name { font-size: 12.5px; font-weight: 700; letter-spacing: .005em; color: #fff; line-height: 1.2; white-space: nowrap; }
.auth-brand-mid { margin-top: auto; position: relative; z-index: 1; }
.auth-brand-mid h2 { font-size: 34px; line-height: 1.15; letter-spacing: -.02em; }
.auth-brand-mid p { color: rgba(255, 255, 255, .88); font-size: 15px; margin-top: 14px; max-width: 400px; line-height: 1.6; }
.auth-points { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-direction: column; gap: 13px; }
.auth-points li { display: flex; align-items: center; gap: 11px; font-size: 14px; color: #fff; }
.auth-points li svg { width: 18px; height: 18px; color: #fff; flex: 0 0 18px; }
.auth-brand-foot { margin-top: 30px; font-size: 12.5px; color: rgba(255, 255, 255, .65); position: relative; z-index: 1; }

/* form steps */
.auth-step { display: none; }
.auth-step.is-active { display: block; animation: pf2Fade .3s ease; }
.auth-eyebrow { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--red); background: var(--red-soft); padding: 4px 11px; border-radius: 999px; margin-bottom: 16px; }
.auth-card h1 { font-size: 28px; letter-spacing: -.02em; color: var(--text); }
.auth-sub { color: var(--text-2); font-size: 14px; margin: 8px 0 26px; line-height: 1.55; }
.auth-sub b { color: var(--text); }
.auth-label { display: block; text-align: left; font-size: 12.5px; font-weight: 600; color: var(--text-2); margin: 0 0 8px; }
.auth-field { display: flex; align-items: center; gap: 10px; background: rgba(255, 255, 255, .65); border: 1.5px solid rgba(225, 214, 194, .8); border-radius: 13px; padding: 0 13px; margin-bottom: 16px; transition: border-color .15s, box-shadow .15s; }
.auth-field:focus-within { border-color: var(--red); box-shadow: 0 0 0 3px rgba(240, 28, 36, .14); }
.auth-field > svg { width: 18px; height: 18px; color: var(--muted); flex: 0 0 18px; }
.auth-field input { flex: 1; border: 0; background: none; outline: none; font-family: var(--sans); font-size: 14.5px; color: var(--text); padding: 13px 0; }
.auth-field input::placeholder { color: var(--muted); }
.auth-eye { color: var(--muted); display: grid; place-items: center; }
.auth-eye svg { width: 18px; height: 18px; }
.auth-eye.on { color: var(--red); }
.auth-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; }
.auth-check { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-2); cursor: pointer; position: relative; }
.auth-check input { position: absolute; opacity: 0; width: 0; height: 0; }
.auth-check .box { width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid var(--line-2); display: inline-grid; place-items: center; }
.auth-check input:checked + .box { background: var(--red); border-color: var(--red); }
.auth-check input:checked + .box::after { content: ""; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); margin-top: -2px; }
.auth-link { color: var(--red); font-size: 13px; font-weight: 600; }
.auth-link:hover { opacity: .8; }
.auth-error { color: #f01c24; font-size: 13px; font-weight: 600; line-height: 1.45; text-align: center; margin: 8px 0 4px; }

/* ===== Red-themed loading spinner (overall / route loading) ===== */
.rtx-loading { display: grid; place-items: center; align-content: center; gap: 14px; min-height: 100vh; width: 100%; }
.rtx-loading.rtx-loading-inline { min-height: 180px; }
.rtx-spinner {
  width: 44px; height: 44px; border-radius: 50%;
  border: 4px solid var(--red-soft, rgba(240, 28, 36, .16));
  border-top-color: var(--red, #f01c24);
  animation: rtx-spin .8s linear infinite;
}
.rtx-loading-label { color: var(--text-2); font-size: 14px; font-weight: 600; letter-spacing: .01em; }
@keyframes rtx-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .rtx-spinner { animation-duration: 1.6s; } }
.auth-btn { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px; border-radius: 13px; font-weight: 700; font-size: 15px; color: #fff; cursor: pointer; background: var(--red-grad); box-shadow: var(--shadow-red); transition: transform .12s, box-shadow .15s; }
.auth-btn:hover { box-shadow: 0 12px 28px rgba(240, 28, 36, .45); }
.auth-btn:active { transform: translateY(1px); }
.auth-btn svg { width: 18px; height: 18px; }
.auth-btn.ghost { background: var(--card); color: var(--text); border: 1.5px solid var(--line-2); box-shadow: none; }
.auth-btn.ghost:hover { border-color: var(--red); color: var(--red); box-shadow: none; }
.auth-divider { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 12px; margin: 18px 0; }
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--line-2); }
.auth-foot { text-align: center; font-size: 13.5px; color: var(--text-2); margin-top: 22px; }
/* Google's Identity Services iframe renders a few px larger than the pill it
   draws (negative margins pull it into place), so without clipping, the
   iframe's own white page background shows as a halo around the button. */
.google-btn-wrap { overflow: hidden; border-radius: 999px; }

/* OTP — centered */
.auth-back { display: flex; width: -moz-fit-content; width: fit-content; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--text-2); margin: 0 0 18px; }
.auth-back:hover { color: var(--red); }
.auth-back svg { width: 16px; height: 16px; }
.auth-otp { display: flex; gap: 10px; margin: 0 0 24px; justify-content: center; }
.auth-otp input { flex: 1 1 0; width: 100%; max-width: 54px; height: 56px; text-align: center; font-family: var(--display); font-size: 24px; font-weight: 700; color: var(--text); background: rgba(255, 255, 255, .65); border: 1.5px solid rgba(225, 214, 194, .8); border-radius: 13px; outline: none; transition: border-color .15s, box-shadow .15s; }
.auth-otp input:focus { border-color: var(--red); box-shadow: 0 0 0 3px rgba(240, 28, 36, .14); }
.auth-otp input.filled { border-color: var(--red); }
#resendTimer { color: var(--muted); font-size: 13px; }

/* ---- Dark mode: panel/card/inputs had hardcoded light backgrounds, so the
   theme's light text (var(--text) = #fff) was invisible. Darken the surfaces. ---- */
html[data-theme="dark"] .auth-panel {
  background: linear-gradient(150deg, #17110d 0%, #1c1511 50%, #140f0c 100%);
}
html[data-theme="dark"] .auth-card {
  background: rgba(32, 26, 20, .62);
  border-color: rgba(255, 255, 255, .08);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .05);
}
html[data-theme="dark"] .auth-field,
html[data-theme="dark"] .auth-otp input {
  background: rgba(255, 255, 255, .05);
  border-color: rgba(255, 255, 255, .14);
}
html[data-theme="dark"] .auth-btn.ghost {
  background: rgba(255, 255, 255, .05);
  border-color: rgba(255, 255, 255, .16);
}

@media (max-width: 880px) {
  .auth-wrap { grid-template-columns: 1fr; }
  .auth-brand { display: none; }
  .auth-panel { padding: 32px 20px; }
}

/* Phones: tighten padding and shrink the OTP boxes so nothing overflows. */
@media (max-width: 480px) {
  .auth-panel { padding: 24px 14px; }
  .auth-card { padding: 26px 18px 22px; border-radius: 16px; }
  .auth-card h1 { font-size: 23px; }
  .auth-sub { font-size: 13px; margin-bottom: 20px; }
  .auth-otp { gap: 7px; }
  .auth-otp input { height: 50px; max-width: 48px; font-size: 20px; border-radius: 11px; }
}

/* Very small / short screens: allow the panel to scroll instead of clipping. */
@media (max-height: 640px) {
  .auth-panel { align-items: flex-start; overflow-y: auto; }
}

/* ===== Dashboard skeleton loaders (task 115697) — additive, no existing rule changed ===== */
.rtx-skel{
  position:relative;
  overflow:hidden;
  background:rgba(140,140,160,.16);
  border-radius:8px;
}
.rtx-skel::after{
  content:"";
  position:absolute;
  inset:0;
  transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);
  animation:rtx-shimmer 1.25s ease-in-out infinite;
}
[data-theme="dark"] .rtx-skel{ background:rgba(255,255,255,.07); }
[data-theme="dark"] .rtx-skel::after{
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.09),transparent);
}
@keyframes rtx-shimmer{ 100%{ transform:translateX(100%); } }
@media (prefers-reduced-motion: reduce){
  .rtx-skel::after{ animation:none; }
}
/* ============================================================================
   Smooth UX: skeleton loaders, fade-in, smooth module accordion, static parts
   (added for the module-list rework — user-side loading/animation polish)
   ========================================================================== */

/* --- Skeleton shimmer --- */
/* Gray base works on BOTH themes (white-only was invisible on the light background);
   a stronger dark override keeps the crisp look in dark mode. */
.skel { display: block; position: relative; overflow: hidden; background: rgba(140, 140, 160, .18); border-radius: 8px; }
.skel::after {
  content: ''; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .40), transparent);
  animation: skelShimmer 1.3s ease-in-out infinite;
}
[data-theme="dark"] .skel { background: rgba(255, 255, 255, .07); }
[data-theme="dark"] .skel::after {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .10), transparent);
}
@keyframes skelShimmer { 100% { transform: translateX(100%); } }
.skel-wrap { padding: 6px 2px 2px; }
.skel-card {
  display: flex; align-items: center; gap: 14px; padding: 16px 18px; margin-bottom: 14px;
  border: 1px solid var(--line-2); border-radius: 5px; background: var(--card);
}
.skel-card .skel-card-body { flex: 1; }
.skel-hero { display: grid; grid-template-columns: 1fr; gap: 20px; margin-bottom: 8px; }
@media (min-width: 900px) { .skel-hero { grid-template-columns: 1.05fr .95fr; align-items: start; } }

/* --- Fade-in for loaded content --- */
@keyframes rtxFadeInUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.rtx-fade { animation: rtxFadeInUp .4s cubic-bezier(.22, .61, .36, 1) both; }

/* --- Smooth module accordion (replaces the instant display:none collapse) --- */
.cdx .module .m-list {
  overflow: hidden; max-height: 1400px; opacity: 1;
  transition: max-height .34s cubic-bezier(.4, 0, .2, 1), opacity .26s ease, padding .26s ease;
}
.cdx .module.collapsed .m-list {
  display: flex; max-height: 0; opacity: 0;
  padding-top: 0; padding-bottom: 0; border-top-color: transparent;
}

/* --- Parts shown under a module are informational, NOT clickable --- */
.cdx .part-static { cursor: default; }
.cdx .part-static:hover { background: transparent; border-color: transparent; box-shadow: none; transform: none; }

/* --- Module title link + "open module" arrow button in the module header --- */
.cdx .module .m-meta h3 .m-title-link { color: inherit; text-decoration: none; transition: color .14s ease; }
.cdx .module .m-meta h3 .m-title-link:hover { color: var(--red); }
.cdx .m-open {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 11px; background: var(--red); color: #fff;
  text-decoration: none; transition: transform .14s ease, filter .14s ease;
}
.cdx .m-open:hover { transform: translateX(2px); filter: brightness(1.06); }
.cdx .m-open svg { width: 16px; height: 16px; }

/* --- Respect reduced motion --- */
@media (prefers-reduced-motion: reduce) {
  .skel::after { animation: none; }
  .rtx-fade { animation: none; }
  .cdx .module .m-list { transition: none; }
}

/* --- Inline lesson player (expands smoothly under a video row, no page nav) --- */
.cva .cva-lesson { display: block; }
.cva .cva-row.open { background: var(--card); border-radius: 11px; }
.cva .cva-get.cva-view.is-open { background: var(--red); color: #fff; }
/* Smooth expand/collapse. max-height cap is close to the real framed-player
   height (~412px), so every open animates smoothly (not just the first), and
   the closing player stays mounted through the transition (see <Collapse>). */
/* Drop-down animates to the REAL content height (grid 0fr->1fr), so the whole
   duration is visible — a slow, smooth drop instead of the old max-height:1400px
   overshoot that finished in a fraction of the time and felt abrupt. */
.cva .lesson-inline {
  display: grid; grid-template-rows: 0fr; opacity: 0; margin: 0 6px;
  transition: grid-template-rows .55s cubic-bezier(.22, .61, .36, 1), opacity .4s ease, margin .4s ease;
}
.cva .lesson-inline.open { grid-template-rows: 1fr; opacity: 1; margin: 8px 6px 18px; }
.cva .lesson-inline > * { min-height: 0; overflow: hidden; }
.cva .lesson-inline-body { padding: 8px 4px 4px; }
/* Keep the player small + centered so it doesn't span the whole row and its
   control bar can't overlap the next lesson line. */
.cva .lesson-inline-body [data-vjs-player],
.cva .lesson-inline-body .skel { width: 100%; max-width: 520px; margin-left: auto; margin-right: auto; }
.cva .lesson-inline-body [data-vjs-player] { border-radius: 10px; overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
  .cva .lesson-inline { transition: none; }
}

/* ============================================================================
   Video.js skin for MODULE (inline lesson) players — matches the intro theme
   (dark screen, red accents, glowing round play button). Keeps ALL controls.
   Scoped to .cva .lesson-inline-body so ONLY module lesson players are skinned
   (the intro preview + other pages are untouched).
   ========================================================================== */
.cva .lesson-inline-body .video-js {
  background-color: #0a0705;
  border-radius: 10px;
  overflow: hidden;
  font-family: var(--mono);
  color: #fff;
  border: 1px solid rgba(255, 59, 64, .18);
  box-shadow: 0 12px 34px rgba(0, 0, 0, .5);
}

/* Big play button → red glowing circle (like the intro's .cva-play) */
.cva .lesson-inline-body .video-js .vjs-big-play-button {
  width: 68px; height: 68px; line-height: 66px; border-radius: 50%;
  top: 50%; left: 50%; margin: 0; transform: translate(-50%, -50%);
  background: rgba(255, 59, 64, .16);
  border: 1.5px solid var(--red);
  box-shadow: 0 0 24px rgba(255, 59, 64, .5);
  transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
}
.cva .lesson-inline-body .video-js:hover .vjs-big-play-button,
.cva .lesson-inline-body .video-js .vjs-big-play-button:focus {
  background: var(--red);
  box-shadow: 0 0 32px rgba(255, 59, 64, .75);
  transform: translate(-50%, -50%) scale(1.08);
}
.cva .lesson-inline-body .video-js .vjs-big-play-button .vjs-icon-placeholder { color: #fff; }

/* Control bar — dark translucent, mono font */
.cva .lesson-inline-body .video-js .vjs-control-bar {
  background: linear-gradient(0deg, rgba(6, 4, 3, .94), rgba(6, 4, 3, .55));
  color: rgba(255, 255, 255, .9);
}
.cva .lesson-inline-body .video-js .vjs-control:hover,
.cva .lesson-inline-body .video-js .vjs-control:focus {
  color: var(--red);
  text-shadow: 0 0 8px rgba(255, 59, 64, .55);
}
.cva .lesson-inline-body .video-js .vjs-time-control,
.cva .lesson-inline-body .video-js .vjs-current-time,
.cva .lesson-inline-body .video-js .vjs-duration { color: rgba(255, 255, 255, .8); }

/* Progress + volume sliders → red fill, red scrubber */
.cva .lesson-inline-body .video-js .vjs-slider { background: rgba(255, 255, 255, .16); }
.cva .lesson-inline-body .video-js .vjs-load-progress,
.cva .lesson-inline-body .video-js .vjs-load-progress div { background: rgba(255, 255, 255, .28); }
.cva .lesson-inline-body .video-js .vjs-play-progress,
.cva .lesson-inline-body .video-js .vjs-volume-level { background-color: var(--red); }
.cva .lesson-inline-body .video-js .vjs-play-progress::before { color: var(--red); text-shadow: 0 0 8px rgba(255, 59, 64, .7); }
.cva .lesson-inline-body .video-js .vjs-volume-level::before { color: var(--red); }
.cva .lesson-inline-body .video-js .vjs-progress-holder:hover .vjs-play-progress::before { color: #fff; }

/* Popup menus (captions / playback speed) */
.cva .lesson-inline-body .video-js .vjs-menu .vjs-menu-content { background: rgba(10, 7, 5, .97); }
.cva .lesson-inline-body .video-js .vjs-menu li.vjs-selected { background: var(--red); color: #fff; }
.cva .lesson-inline-body .video-js .vjs-menu li:hover,
.cva .lesson-inline-body .video-js .vjs-menu li:focus { background: rgba(255, 59, 64, .32); color: #fff; }

/* Loading spinner + time tooltip accents */
.cva .lesson-inline-body .video-js .vjs-loading-spinner { border-top-color: var(--red); }
.cva .lesson-inline-body .video-js .vjs-time-tooltip,
.cva .lesson-inline-body .video-js .vjs-mouse-display .vjs-time-tooltip { background: var(--red); color: #fff; }

/* --- Module lesson player wrapped in the intro-style terminal frame --- */
/* Frame provides the top "dots" bar + border/rounding; the video.js control
   bar is the bottom bar. No text labels (path / "Intro") per request. */
.cva .lesson-inline-body .lesson-frame {
  width: 100%; max-width: 640px; margin: 0 auto;
  background: #0a0705; border: 1px solid rgba(255, 59, 64, .18);
  border-radius: 8px; overflow: hidden; box-shadow: 0 14px 38px rgba(0, 0, 0, .5);
}
.cva .lesson-inline-body .lesson-frame-bar {
  display: flex; align-items: center; gap: 7px; padding: 10px 14px;
  background: #120c0a; border-bottom: 1px solid rgba(255, 59, 64, .14);
}
.cva .lesson-inline-body .lesson-frame .cva-dot {
  width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, .25);
}
.cva .lesson-inline-body .lesson-frame .cva-dot:first-child { background: var(--red); }
.cva .lesson-inline-body .lesson-frame-screen { position: relative; line-height: 0; }
/* Player fills the frame (override the earlier 520 cap + its own border/rounding) */
.cva .lesson-inline-body [data-vjs-player] { max-width: none; width: 100%; border-radius: 0; }
.cva .lesson-inline-body .video-js { border: 0; border-radius: 0; box-shadow: none; }
.cva .lesson-inline-body .skel { max-width: 640px; }
/* Force a fixed 16:9 frame and letterbox any source aspect on ALL module lesson players —
   the intro preview AND the in-course lesson videos. Fluid video-js otherwise sizes to the
   source aspect, making a PORTRAIT video enormously tall. `contain` pillarboxes portrait/odd
   sources instead of stretching them. (.cva-intro is a subset of .cva, so this covers both.) */
.cva .lesson-inline-body .video-js { padding-top: 56.25% !important; background: #000; }
.cva .lesson-inline-body .video-js .vjs-tech,
.cva .lesson-inline-body .video-js video { object-fit: contain; }
/* Locked intro: keeps the player frame, shows a lock button (like .cva-play) centre-screen */
.cva .lesson-inline-body .lesson-locked-screen {
  aspect-ratio: 16 / 9; line-height: normal; background: #0a0705;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
}
.cva .lesson-inline-body .lesson-lock-btn {
  width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center;
  color: #fff; background: rgba(255, 59, 64, .16); border: 1.5px solid var(--red);
  box-shadow: 0 0 24px rgba(255, 59, 64, .5);
}
.cva .lesson-inline-body .lesson-lock-btn svg { width: 24px; height: 24px; }
.cva .lesson-inline-body .lesson-lock-cap {
  font-family: var(--mono); font-size: 11px; letter-spacing: .06em; color: rgba(255, 255, 255, .72);
}

/* Captions/subtitles button: always visible in module lesson players; when there
   is no subtitle it's shown DISABLED (greyed) instead of a "not available" text. */
.cva .lesson-inline-body .video-js .vjs-subs-caps-button,
.cva .lesson-inline-body .video-js .vjs-subtitles-button,
.cva .lesson-inline-body .video-js .vjs-captions-button { display: inline-flex !important; }
.cva .lesson-inline-body .video-js .vjs-subs-caps-button.vjs-disabled,
.cva .lesson-inline-body .video-js .vjs-subtitles-button.vjs-disabled,
.cva .lesson-inline-body .video-js .vjs-captions-button.vjs-disabled {
  opacity: .38; pointer-events: none; cursor: default;
}

/* Per-lesson progress bar in a module lesson row (shows partial watch %) */
.cva .cva-row-prog { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; width: 120px; }
.cva .cva-row-bar { flex: 1; height: 4px; border-radius: 999px; background: rgba(255, 255, 255, .14); overflow: hidden; }
.cva .cva-row-bar i { display: block; height: 100%; background: var(--red); border-radius: 999px; transition: width .3s ease; }
.cva .cva-row-pct { font-family: var(--mono); font-size: 10.5px; color: var(--cva-fg-2); white-space: nowrap; min-width: 30px; text-align: right; }
@media (max-width: 640px) { .cva .cva-row-prog { display: none; } }

/* Profile avatar photo fills the circle (falls back to the initial when absent) */
.pf2 .pf2-avatar-img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; }

/* ============================================================================
   Lesson Overview / Materials / Favourite (task 116349) + Favourites page.
   ========================================================================== */
.lesson-extras { margin-top: 16px; display: flex; flex-direction: column; gap: 16px; }
.lesson-extras.compact { margin-top: 12px; gap: 12px; padding: 0 4px; }
.lesson-extras-actions { display: flex; }

.fav-toggle {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: 10px; cursor: pointer;
  background: transparent; color: var(--text-2);
  border: 1px solid rgba(255, 255, 255, .16);
  font-weight: 600; font-size: 14px; transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.fav-toggle svg { width: 18px; height: 18px; }
.fav-toggle:hover { color: var(--red); border-color: var(--red); }
.fav-toggle.is-fav { color: var(--red); border-color: var(--red); background: rgba(255, 26, 30, .08); }
.fav-toggle:disabled { opacity: .6; cursor: default; }

/* Compact variant for the slide bar — the base button is sized for the PDF toolbar and
   would tower over the "slide n / N" pill it sits beside. */
.slidev-fav {
  padding: 5px 12px; border-radius: 999px; font-size: 12px; gap: 6px;
  border-color: var(--line-2); color: var(--muted);
}
.slidev-fav svg { width: 14px; height: 14px; }

.lesson-extras-block { }
.material-link {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 14px; border-radius: 10px; text-decoration: none;
  background: rgba(255, 255, 255, .05); color: var(--text);
  border: 1px solid rgba(255, 255, 255, .12); font-weight: 600; font-size: 14px;
  transition: border-color .2s ease, background .2s ease;
}
.material-link svg { width: 18px; height: 18px; }
.material-link:hover { border-color: var(--red); background: rgba(255, 26, 30, .06); }

/* View-only PDF material viewer (task 116838) */
.material-link { cursor: pointer; }                    /* button variant: pointer + inherit look */
button.material-link { background: rgba(255,255,255,.05); font: inherit; }
.pdfv-modal { width: min(960px, 96vw); max-height: 92vh; display: flex; flex-direction: column; }
.pdfv-scroll { overflow: auto; padding: 16px; background: rgba(0,0,0,.15); }
.pdfv { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.pdfv-page { box-shadow: 0 2px 14px rgba(0,0,0,.35); border-radius: 6px; overflow: hidden; }
.pdfv-page canvas { display: block; max-width: 100%; height: auto; }
.pdfv-state { padding: 28px 16px; color: var(--text-2); text-align: center; }
.pdfv-error { color: var(--red); }

/* Page-shaped skeleton while the material loads. */
.pdfv-skel { display: flex; justify-content: center; width: 100%; padding: 8px 0; }
.pdfv-skel-page {
  width: min(820px, 100%);
  min-height: 460px;
  background: var(--card);
  border: 1px solid var(--line-2);
  border-radius: 6px;
  box-shadow: 0 2px 14px rgba(0, 0, 0, .18);
  padding: 46px 48px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.pdfv-skel-line { display: block; height: 13px; border-radius: 6px; }

/* Document renders off-screen (so its canvas paints) until the first page is ready,
   then fades into place — one clean skeleton→content transition, no narrow-box flash. */
/* Reader: page renders in-flow; the skeleton overlay covers it (opaque page background) until
   the canvas is painted, so react-pdf's empty narrow container never shows on-screen. */
.pdfv-reader { position: relative; min-height: 78vh; }
.pdfv-loading {
  position: absolute; inset: 0; z-index: 4;
  display: flex; justify-content: center; align-items: flex-start;
  padding-top: 8px; background: var(--bg, #0e0b08);
  animation: pdfvFadeIn .2s ease both;
}
.pdfr-canvas { display: block; max-width: 100%; height: auto; }
.pdfv-doc { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.pdfv-doc.is-pending { position: absolute; left: -99999px; top: 0; }
.pdfv-doc.is-ready { animation: pdfvFadeIn .35s ease both; }
@keyframes pdfvFadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Favourites page grid + cards */
.fav-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.fav-card {
  background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 14px; overflow: hidden; cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.fav-card:hover { transform: translateY(-3px); border-color: var(--red); box-shadow: 0 14px 34px rgba(0, 0, 0, .3); }
.fav-thumb { position: relative; aspect-ratio: 16 / 9; background: rgba(0, 0, 0, .35); }
.fav-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fav-thumb-ph { width: 100%; height: 100%; background: linear-gradient(135deg, rgba(255,26,30,.18), rgba(0,0,0,.25)); }
.fav-play {
  position: absolute; inset: 0; margin: auto; width: 46px; height: 46px;
  display: grid; place-items: center; border-radius: 50%;
  background: rgba(0, 0, 0, .55); color: #fff; pointer-events: none;
}
.fav-play svg { width: 20px; height: 20px; margin-left: 2px; }
.fav-body { padding: 12px 14px 14px; }
.fav-title { font-family: var(--display); font-size: 15px; font-weight: 700; color: var(--text); margin: 0 0 4px; }
.fav-topic { font-size: 12px; color: var(--text-2); margin: 0 0 8px; }
.fav-prog { display: flex; align-items: center; gap: 8px; }
.fav-bar { flex: 1; height: 6px; border-radius: 4px; background: rgba(255, 255, 255, .12); overflow: hidden; }
.fav-bar i { display: block; height: 100%; background: var(--red); border-radius: 4px; }
.fav-pct { font-size: 11px; color: var(--text-2); font-weight: 600; white-space: nowrap; }

.fav-empty { text-align: center; padding: 48px 16px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.fav-empty svg { width: 46px; height: 46px; color: var(--text-2); opacity: .7; }

/* ============================================================================
   Course-material reader (task 117438) — full-width, topbar-only reader route.
   ========================================================================== */
.reader-shell .nav-toggle { display: none; }          /* topbar-only: no sidebar to open */
/* Fixed reader viewport: the app topbar + the reader toolbar stay pinned; only the PDF
   stage (and the thumbnail rail) scroll internally — never the window. This keeps the page
   nav reachable even at the bottom of a tall page. */
.reader-shell { height: 100vh; overflow: hidden; }
.reader-content { display: flex; flex-direction: column; height: 100vh; min-height: 0; padding: 0; overflow: hidden; scrollbar-gutter: auto; }
.reader-content > .reader { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.reader { padding: 0; }
.reader-bar {
  flex: 0 0 auto; z-index: 6;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 10px 12px 12px; margin-bottom: 0;
  background: var(--card); border-bottom: 1px solid var(--line);
}
.reader-back {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 12px; border-radius: 10px; cursor: pointer;
  background: transparent; color: var(--text-2);
  border: 1px solid rgba(255, 255, 255, .16); font-weight: 600; font-size: 14px;
  transition: color .2s ease, border-color .2s ease;
}
.reader-back:hover { color: var(--text); border-color: var(--red); }
.reader-back svg { width: 18px; height: 18px; }
.reader-nav { display: inline-flex; align-items: center; gap: 10px; margin: 0 auto; }
.reader-pg {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 10px; cursor: pointer;
  background: rgba(255, 255, 255, .05); color: var(--text);
  border: 1px solid rgba(255, 255, 255, .12); transition: border-color .2s ease, background .2s ease;
}
.reader-pg:hover:not(:disabled) { border-color: var(--red); background: rgba(255, 26, 30, .06); }
.reader-pg:disabled { opacity: .45; cursor: default; }
.reader-pg svg { width: 18px; height: 18px; }
.reader-goto { display: inline-flex; align-items: center; gap: 8px; color: var(--text-2); font-size: 14px; }
.reader-goto input {
  width: 58px; height: 38px; text-align: center; padding: 8px 12px; border-radius: 8px;
  background: var(--card, #fff); color: var(--text);
  border: 1px solid var(--line-2); font: inherit; font-weight: 600;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .07);
  cursor: text; transition: border-color .15s, box-shadow .15s;
}
.reader-goto input:hover { border-color: var(--red, #f01c24); }
.reader-goto input:focus {
  outline: none;
  border-color: var(--red, #f01c24);
  box-shadow: 0 0 0 3px rgba(240, 28, 36, .14);
}
html[data-theme="dark"] .reader-goto input { background: rgba(255, 255, 255, .05); }
.reader-body { display: flex; justify-content: center; flex: 1 1 auto; min-height: 0; padding: 0 8px; }

/* Reader: thumbnail rail + main page stage. Both scroll internally; the bar stays pinned. */
.reader-split { display: flex; gap: 18px; width: 100%; min-height: 0; align-items: stretch; }
.reader-rail {
  flex: 0 0 154px; height: 100%; overflow-y: auto;
  display: flex; flex-direction: column; gap: 12px;
  padding: 2px 8px 14px 2px;
}
.reader-stage { flex: 1 1 auto; min-width: 0; height: 100%; overflow: auto; padding-bottom: 24px; }
.reader-stage > .pdfv-reader { margin: 0 auto; }
.reader-zoom { display: inline-flex; align-items: center; gap: 8px; margin-left: 10px; padding-left: 12px; border-left: 1px solid var(--line-2); }
.reader-zoom-val { font-size: 13px; font-weight: 600; color: var(--text-2); min-width: 42px; text-align: center; }
.reader-thumb {
  display: block; width: 100%; padding: 0; border: 0; background: transparent;
  cursor: pointer; text-align: center;
}
.reader-thumb-frame {
  display: block; position: relative; min-height: 86px; overflow: hidden;
  border-radius: 8px; border: 2px solid var(--line-2); background: var(--card);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.reader-thumb:hover .reader-thumb-frame { border-color: var(--red, #f01c24); }
.reader-thumb.is-active .reader-thumb-frame {
  border-color: var(--red, #f01c24); box-shadow: 0 0 0 2px rgba(240, 28, 36, .25);
}
.reader-thumb-frame canvas { display: block; width: 100%; height: auto; }
.reader-thumb-skel { position: absolute; inset: 0; display: block; }
.reader-thumb-no { display: block; font-size: 12px; color: var(--text-2); margin-top: 4px; }
.reader-thumb.is-active .reader-thumb-no { color: var(--red, #f01c24); font-weight: 700; }
@media (max-width: 900px) { .reader-rail { display: none; } }

/* ===== Presentation (slide) reader — reuses the pdf.js stage, slide-styled chrome (app theme) ===== */
/* Fixed column: header + stage + nav + rail all fit the viewport; only the stage scales, so the
   thumbnail rail is always visible without scrolling the page. */
.slidev { display: flex; flex-direction: column; gap: 12px; padding: 14px 18px 10px; height: 100%; min-height: 0; overflow: hidden; }
.slidev-bar, .slidev-nav, .slidev-rail { flex: 0 0 auto; }
.slidev-stage-wrap { flex: 1 1 auto; min-height: 0; display: grid; place-items: center; overflow: hidden; }
/* Neutralise the full-page PDF-reader assumptions when embedded inside the slide stage, and cap the
   rendered slide by height (vh) so it always leaves room for the rail below. */
.slidev .reader-split { gap: 0; width: auto; min-height: 0; align-items: center; justify-content: center; }
.slidev .reader-stage { height: auto; max-height: 100%; overflow: visible; padding-bottom: 0; }
.slidev .pdfv-reader { width: auto !important; min-height: 0 !important; }
.slidev .pdfv-doc { display: flex; justify-content: center; max-width: 100%; }
.slidev .pdfr-canvas { max-width: 100% !important; max-height: 56vh !important; width: auto !important; height: auto !important; display: block; }
.slidev .pdfv-loading, .slidev .pdfv-skel-page { max-width: 100%; }

.slidev-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.slidev-back {
  width: 38px; height: 38px; flex: 0 0 auto; display: grid; place-items: center;
  border-radius: 9px; background: var(--card); border: 1px solid var(--line-2);
  color: var(--text); cursor: pointer; transition: background .15s, color .15s, border-color .15s;
}
.slidev-back:hover { background: var(--red-soft-2); color: var(--red); border-color: var(--red); }
.slidev-back svg { width: 18px; height: 18px; }
.slidev-file { display: inline-flex; align-items: center; gap: 10px; min-width: 0; margin-right: auto; }
.slidev-badge-ppt {
  font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  background: var(--red-soft-2); color: var(--red); border-radius: 5px; padding: 3px 7px;
}
.slidev-name {
  font-family: var(--mono); font-size: 13.5px; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 46vw;
}
.slidev-bar-right { display: inline-flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.slidev-pill {
  font-size: 12.5px; color: var(--text-2); background: var(--card);
  border: 1px solid var(--line-2); border-radius: 999px; padding: 5px 13px; white-space: nowrap;
}
.slidev-pill b { color: var(--text); }
.slidev-viewonly {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700;
  color: #0f8a5f; border: 1px solid rgba(15, 138, 95, .35); border-radius: 999px; padding: 4px 11px;
}
.slidev-viewonly-dot { width: 7px; height: 7px; border-radius: 50%; background: #12b981; }

.slidev-stage-wrap { display: grid; place-items: center; }
.slidev-stage {
  position: relative; background: var(--card); border: 1px solid var(--line-2);
  border-radius: 14px; padding: 14px; box-shadow: var(--shadow-sm); max-width: 100%;
}
.slidev-slideno {
  position: absolute; top: 16px; right: 20px; z-index: 2;
  font-family: var(--mono); font-size: 12px; color: var(--muted);
}

.slidev-nav { display: flex; align-items: center; justify-content: center; gap: 16px; padding: 2px 0; }
.slidev-arrow {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: var(--card); border: 1px solid var(--line-2); color: var(--text);
  cursor: pointer; transition: background .15s, color .15s, transform .15s;
}
.slidev-arrow:hover:not(:disabled) { background: var(--red-soft-2); color: var(--red); transform: translateY(-1px); }
.slidev-arrow:disabled { opacity: .4; cursor: default; }
.slidev-arrow svg { width: 18px; height: 18px; }
.slidev-dots { display: inline-flex; align-items: center; gap: 7px; }
.slidev-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--line-2); transition: background .2s, width .2s; }
.slidev-dot.on { width: 22px; border-radius: 4px; background: var(--red); }

/* Bottom thumbnail rail — real page previews (reuses PdfReader's PdfThumb → .reader-thumb),
   laid out horizontally and scaled small. */
.slidev-rail { display: flex; gap: 10px; overflow-x: auto; overflow-y: hidden; padding: 8px 2px 10px; }
.slidev-rail .reader-thumb {
  flex: 0 0 auto; width: 116px; margin: 0; padding: 0; cursor: pointer;
  background: transparent; border: none; display: flex; flex-direction: column; gap: 5px;
}
.slidev-rail .reader-thumb-frame {
  position: relative; border: 1.5px solid var(--line-2); border-radius: 8px; overflow: hidden;
  background: var(--card); transition: border-color .15s, box-shadow .15s;
}
.slidev-rail .reader-thumb-frame canvas { display: block; width: 100%; height: auto; }
.slidev-rail .reader-thumb.is-active .reader-thumb-frame { border-color: var(--red); box-shadow: 0 0 0 2px var(--red-soft); }
.slidev-rail .reader-thumb-no { font-size: 11px; color: var(--muted); text-align: center; margin: 0; }
.slidev-rail .reader-thumb.is-active .reader-thumb-no { color: var(--red); font-weight: 700; }
.slidev-rail .reader-thumb-skel { position: absolute; inset: 0; display: block; }
@media (max-width: 640px) { .slidev-name { max-width: 34vw; } .slidev-rail .reader-thumb { width: 92px; } }

/* Material favourite cards (Favourites page "Materials" section, task 117438) */
.matfav-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.matfav-card {
  display: flex; align-items: center; gap: 12px; text-decoration: none;
  padding: 16px; border-radius: 12px;
  background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .1);
  color: var(--text); transition: border-color .2s ease, background .2s ease;
}
.matfav-card:hover { border-color: var(--red); background: rgba(255, 26, 30, .05); }
.matfav-ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; flex: 0 0 40px; border-radius: 10px;
  background: rgba(255, 26, 30, .1); color: var(--red);
}
.matfav-ic svg { width: 20px; height: 20px; }
.matfav-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.matfav-title { font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.matfav-type { font-size: 12px; color: var(--muted); text-transform: capitalize; }

/* ============================================================================
   Announcements page — redesigned (dark/red "terminal" theme to match the
   lesson player). Featured latest card + red timeline feed.
   ========================================================================== */
.anx { padding: 16px; }

/* Header */
.anx-head { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; }
.anx-head-ic {
  flex: 0 0 auto; width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center;
  color: var(--red); background: rgba(240, 28, 36, .12); border: 1px solid rgba(240, 28, 36, .32);
  box-shadow: 0 0 22px rgba(240, 28, 36, .18);
}
.anx-head-ic svg { width: 22px; height: 22px; }
.anx-head-txt h1 { font-family: var(--display); font-size: 22px; font-weight: 800; margin: 0; line-height: 1.1; color: var(--text); }
.anx-head-txt p { font-family: var(--mono); font-size: 11.5px; color: var(--muted); margin: 3px 0 0; letter-spacing: .02em; }
.anx-count {
  margin-left: auto; align-self: center; font-family: var(--mono); font-size: 10.5px; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase; color: var(--red); background: rgba(240, 28, 36, .1);
  border: 1px solid rgba(240, 28, 36, .28); padding: 6px 13px; border-radius: 999px; white-space: nowrap;
}

/* Featured latest — red-gradient banner */
.anx-feat {
  position: relative; overflow: hidden; border-radius: 14px; margin-bottom: 28px; padding: 30px 34px; color: #fff;
  background:
    radial-gradient(120% 150% at 100% 0%, rgba(240, 28, 36, .30), transparent 55%),
    linear-gradient(135deg, #1c0c0e 0%, #100908 55%, #150a0b 100%);
  border: 1px solid rgba(240, 28, 36, .28); box-shadow: 0 18px 46px rgba(0, 0, 0, .5);
}
.anx-feat::after { content: ""; position: absolute; right: -64px; top: -70px; width: 230px; height: 230px; border-radius: 50%; border: 1.5px dashed rgba(255, 255, 255, .12); pointer-events: none; }
.anx-feat > * { position: relative; z-index: 1; }
.anx-feat-eyebrow {
  display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 10.5px; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase; color: #ff8f92;
}
.anx-feat-eyebrow svg { width: 14px; height: 14px; }
.anx-feat-h { font-family: var(--display); font-size: 25px; line-height: 1.2; margin: 13px 0 10px; color: #fff; max-width: 46ch; }
.anx-feat-p { font-size: 14px; line-height: 1.66; color: rgba(255, 255, 255, .74); margin: 0; max-width: 74ch; white-space: pre-line; }
.anx-feat-img { display: block; max-width: 100%; max-height: 230px; border-radius: 10px; margin-top: 16px; object-fit: cover; border: 1px solid rgba(255, 255, 255, .1); }
.anx-feat-when { display: inline-block; font-family: var(--mono); font-size: 11.5px; color: rgba(255, 255, 255, .5); margin-top: 18px; letter-spacing: .03em; }
@media (max-width: 640px) { .anx-feat { padding: 24px 20px; } .anx-feat-h { font-size: 21px; } }

/* Timeline feed (theme-adaptive cards + red nodes) */
.anx-feed { position: relative; margin-left: 7px; }
.anx-feed::before { content: ""; position: absolute; left: 7px; top: 12px; bottom: 12px; width: 2px; background: linear-gradient(180deg, rgba(240, 28, 36, .55), rgba(240, 28, 36, .06)); }
.anx-item { position: relative; padding: 0 0 16px 32px; }
.anx-item:last-child { padding-bottom: 0; }
.anx-dot { position: absolute; left: 0; top: 20px; width: 16px; height: 16px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 4px rgba(240, 28, 36, .16), 0 0 14px rgba(240, 28, 36, .5); }
.anx-card {
  position: relative; background: var(--card); border: 1px solid var(--line-2); border-left: 3px solid var(--red);
  border-radius: 10px; padding: 16px; box-shadow: var(--shadow-sm);
  transition: transform .16s ease, box-shadow .16s ease, border-left-color .16s ease;
}
.anx-card:hover { transform: translateX(3px); box-shadow: var(--shadow-md); border-left-color: #ff5b5c; }
.anx-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.anx-tag {
  display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 10px; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase; color: var(--red); background: rgba(240, 28, 36, .1);
  border: 1px solid rgba(240, 28, 36, .25); padding: 3px 9px; border-radius: 6px;
}
.anx-tag svg { width: 12px; height: 12px; }
.anx-when { font-family: var(--mono); font-size: 11px; color: var(--muted); }
.anx-h { font-family: var(--display); font-size: 16px; font-weight: 700; color: var(--text); margin: 0 0 6px; line-height: 1.32; }
.anx-p { font-size: 13.5px; line-height: 1.6; color: var(--text-2, var(--muted)); margin: 0; white-space: pre-line; }
.anx-img { display: block; max-width: 100%; max-height: 180px; border-radius: 8px; margin-top: 10px; object-fit: cover; border: 1px solid var(--line-2); }

/* Empty */
.anx-empty { text-align: center; padding: 64px 20px; }
.anx-empty svg { width: 46px; height: 46px; color: rgba(240, 28, 36, .45); margin-bottom: 14px; }
.anx-empty h3 { font-family: var(--display); font-size: 17px; color: var(--text); margin: 0 0 6px; }
.anx-empty p { font-family: var(--mono); font-size: 12px; color: var(--muted); margin: 0; }

/* Highlight effect for search-to announcements (temporary gold border) */
@keyframes anxPulse { 0%, 100% { border-color: var(--line-2) var(--line-2) var(--line-2) #ffb74d; } 50% { border-color: #ffb74d; } }
.anx-item.anx-highlight .anx-card { animation: anxPulse .6s ease-in-out 3; }

/* ===== Exam/quiz submit confirmation modal (themed, replaces window.confirm) ===== */
.exq-modal-overlay {
  position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; padding: 20px;
  background: rgba(0, 0, 0, .6); backdrop-filter: blur(3px); animation: exqFade .18s ease;
}
@keyframes exqFade { from { opacity: 0; } to { opacity: 1; } }
.exq-modal {
  width: 100%; max-width: 420px; text-align: center; padding: 24px 24px 26px; border-radius: 16px;
  background: #120c0c; border: 1px solid rgba(240, 28, 36, .3); box-shadow: 0 24px 60px rgba(0, 0, 0, .6);
  animation: exqPop .2s cubic-bezier(.22, .61, .36, 1);
}
@keyframes exqPop { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } }
.exq-modal-ic {
  width: 54px; height: 54px; margin: 0 auto 16px; border-radius: 50%; display: grid; place-items: center;
  color: var(--red); background: rgba(240, 28, 36, .12); border: 1px solid rgba(240, 28, 36, .35);
  box-shadow: 0 0 24px rgba(240, 28, 36, .25);
}
.exq-modal-ic svg { width: 25px; height: 25px; }
.exq-modal-h { font-family: var(--display); font-size: 19px; font-weight: 800; color: #fff; margin: 0 0 8px; }
.exq-modal-p { font-size: 13.5px; line-height: 1.6; color: rgba(255, 255, 255, .7); margin: 0 0 22px; }
.exq-modal-p b { color: #fff; }
.exq-modal-actions { display: flex; gap: 12px; justify-content: center; }
.exq-btn {
  font-family: var(--display); font-weight: 700; font-size: 13.5px; padding: 11px 22px; border-radius: 10px;
  cursor: pointer; border: 1px solid transparent; transition: transform .14s ease, filter .14s ease, background .14s ease;
}
.exq-btn:hover { transform: translateY(-1px); }
.exq-btn.ghost { background: transparent; border-color: rgba(255, 255, 255, .18); color: rgba(255, 255, 255, .82); }
.exq-btn.ghost:hover { background: rgba(255, 255, 255, .06); }
.exq-btn.danger { background: linear-gradient(180deg, #ff4b52, #d2141b); color: #fff; box-shadow: 0 8px 20px rgba(240, 28, 36, .35); }
.exq-btn.danger:hover { filter: brightness(1.06); }
@media (prefers-reduced-motion: reduce) { .exq-modal-overlay, .exq-modal { animation: none; } }

/* ===== Notifications list: priority/type badge, link hint, clickable rows, detail modal ===== */
.nl .nl-clickable { cursor: pointer; transition: border-color .15s ease, background .15s ease, transform .15s ease; }
.nl .nl-clickable:hover { border-color: rgba(240, 28, 36, .32); transform: translateX(2px); }
.nl .nl-clickable:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.nl .nl-prio { font-family: var(--mono); font-size: 9.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: 3px 9px; border-radius: 6px; border: 1px solid; }
.nl .nl-prio.ok { color: #34d399; border-color: rgba(52, 211, 153, .4); background: rgba(52, 211, 153, .12); }
.nl .nl-prio.info { color: #60a5fa; border-color: rgba(96, 165, 250, .4); background: rgba(96, 165, 250, .12); }
.nl .nl-prio.warn { color: #fbbf24; border-color: rgba(251, 191, 36, .4); background: rgba(251, 191, 36, .12); }
.nl .nl-prio.danger { color: #f87171; border-color: rgba(248, 113, 113, .45); background: rgba(248, 113, 113, .12); }
.nl .nl-prio.default { color: var(--red); border-color: rgba(240, 28, 36, .35); background: rgba(240, 28, 36, .1); }
.nl .nl-linkic { display: inline-flex; color: var(--red); }
.nl .nl-linkic svg { width: 13px; height: 13px; }

/* Detail modal (reuses .exq-modal-overlay backdrop) */
.nl-modal {
  position: relative; width: 100%; max-width: 520px; text-align: left; padding: 24px 24px 26px; border-radius: 16px;
  background: #120c0c; border: 1px solid rgba(240, 28, 36, .28); box-shadow: 0 24px 60px rgba(0, 0, 0, .6);
  animation: exqPop .2s cubic-bezier(.22, .61, .36, 1);
}
.nl-modal-x {
  position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center;
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .7); cursor: pointer;
  transition: background .14s ease, color .14s ease;
}
.nl-modal-x:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.nl-modal-x svg { width: 16px; height: 16px; }
.nl-modal-meta { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.nl-modal-meta .nl-when { font-family: var(--mono); font-size: 11px; color: rgba(255, 255, 255, .5); }
.nl-modal-h { font-family: var(--display); font-size: 20px; font-weight: 800; color: #fff; margin: 0 0 12px; line-height: 1.3; padding-right: 36px; }
.nl-modal-img { display: block; width: 100%; max-height: 280px; object-fit: cover; border-radius: 10px; margin: 0 0 14px; border: 1px solid rgba(255, 255, 255, .08); }
.nl-modal-p { font-size: 14px; line-height: 1.65; color: rgba(255, 255, 255, .78); margin: 0 0 18px; white-space: pre-line; }
.nl-modal-link {
  display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font-family: var(--display); font-weight: 700; font-size: 13.5px;
  color: #fff; background: linear-gradient(180deg, #ff4b52, #d2141b); padding: 10px 18px; border-radius: 10px;
  box-shadow: 0 8px 20px rgba(240, 28, 36, .3); transition: filter .14s ease, transform .14s ease;
}
.nl-modal-link:hover { filter: brightness(1.06); transform: translateY(-1px); }
.nl-modal-link svg { width: 15px; height: 15px; }

/* Highlight a notification when arriving from the bell (?n=<id>) — glow, then fade */
.nl .nl-row.hl { animation: nlHighlight 2.6s ease-out 1; }
@keyframes nlHighlight {
  0%   { box-shadow: 0 0 0 3px rgba(240, 28, 36, .38), 0 10px 30px rgba(240, 28, 36, .3); border-color: var(--red); }
  70%  { box-shadow: 0 0 0 3px rgba(240, 28, 36, .16); border-color: rgba(240, 28, 36, .45); }
  100% { box-shadow: none; }
}
@media (prefers-reduced-motion: reduce) {
  .nl .nl-row.hl { animation: none; box-shadow: 0 0 0 2px rgba(240, 28, 36, .5); }
}

/* Content transition on every route change — fade in + slide down. Ends at transform:none
   (not translateY(0)) so no lingering containing block offsets fixed modals after it runs. */
.content > .page-fade {
  /* Flex column that fills the remaining height under the topbar, so a footer with
     margin-top:auto sits at the bottom of short pages. */
  display: flex;
  flex-direction: column;
  /* row-gap, not margins: the footer keeps margin-top:auto so it still sinks to the
     bottom of short pages, and the gap applies on tall ones where auto resolves to 0. */
  row-gap: var(--page-gap);
  flex: 1 0 auto;
  min-width: 0;
  animation: pageFade .45s cubic-bezier(.22, .61, .36, 1) both;
}
@keyframes pageFade { from { opacity: 0; transform: translateY(-16px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .content > .page-fade { animation: none; } }

/* ===== Live-chat launcher — custom, theme-aware button that opens Tawk (Tawk's own
   fixed-white launcher + greeting bubble are hidden via the JS API). ===== */
.rtx-chat-launcher {
  position: fixed; right: 22px; bottom: 22px; z-index: 900;
  width: 54px; height: 54px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  background: var(--red, #f01c24); color: #fff; border: none;
  box-shadow: 0 10px 26px rgba(240, 28, 36, .42);
  transition: transform .16s ease, box-shadow .16s ease, opacity .25s ease;
}
.rtx-chat-launcher:hover { transform: translateY(-2px) scale(1.05); box-shadow: 0 14px 32px rgba(240, 28, 36, .55); }
.rtx-chat-launcher:active { transform: translateY(0) scale(.98); }
.rtx-chat-launcher.is-busy { cursor: default; }
.rtx-chat-launcher svg { width: 26px; height: 26px; }
.rtx-chat-launcher .rtx-chat-spin { animation: rtxChatSpin .8s linear infinite; }
@keyframes rtxChatSpin { to { transform: rotate(360deg); } }

/* Our own themed greeting bubble (replaces Tawk's white default) — sits just above the launcher. */
.rtx-chat-greet {
  position: fixed; right: 22px; bottom: 88px; z-index: 899;
  max-width: 236px; display: flex; align-items: flex-start; gap: 8px;
  background: var(--card); color: var(--text); border: 1px solid var(--line-2);
  border-radius: 14px; border-bottom-right-radius: 4px; padding: 11px 12px 11px 14px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .18);
  font-size: 13.5px; line-height: 1.4; cursor: pointer;
  animation: rtxGreetIn .3s cubic-bezier(.22, .61, .36, 1) both;
}
.rtx-chat-greet:hover { border-color: var(--red); }
.rtx-chat-greet-t { flex: 1 1 auto; }
.rtx-chat-greet-x {
  flex: 0 0 auto; width: 18px; height: 18px; margin: -2px -2px 0 0; padding: 0;
  border: none; background: transparent; color: var(--muted); cursor: pointer;
  font-size: 17px; line-height: 1; border-radius: 4px;
}
.rtx-chat-greet-x:hover { color: var(--text); }
@keyframes rtxGreetIn { from { opacity: 0; transform: translateY(8px) scale(.96); } to { opacity: 1; transform: none; } }
:root[data-theme="dark"] .rtx-chat-greet { box-shadow: 0 12px 30px rgba(0, 0, 0, .5); }
@media (max-width: 860px) { .rtx-chat-greet { right: 16px; bottom: 78px; max-width: 210px; } }
/* Tawk eager-loads (agents see visitors) but its default white launcher/greeting stay hidden
   until WE open the chat (html.rtx-chat-open) — prevents the default-widget flash on page load.
   The chat panel becomes visible on open. */
html:not(.rtx-chat-open) iframe[title*="chat"],
html:not(.rtx-chat-open) iframe[src*="tawk"],
html:not(.rtx-chat-open) .tawk-min-container,
html:not(.rtx-chat-open) [id*="tawkchat"] {
  opacity: 0 !important;
  pointer-events: none !important;
}
:root[data-theme="dark"] .rtx-chat-launcher { box-shadow: 0 10px 26px rgba(0, 0, 0, .5); }
:root[data-theme="dark"] .rtx-chat-launcher:hover { box-shadow: 0 14px 32px rgba(240, 28, 36, .5); }
@media (max-width: 860px) { .rtx-chat-launcher { right: 16px; bottom: 16px; width: 50px; height: 50px; } }
@media (prefers-reduced-motion: reduce) { .rtx-chat-launcher { transition: opacity .25s ease; } .rtx-chat-launcher:hover { transform: none; } }

/* ===== Avatar edit modal (profile picture upload/crop/delete) ===== */
.pf2-avatar .pf2-cam { cursor: pointer; border: 0; padding: 0; }
.ave-overlay {
  position: fixed; inset: 0; z-index: 1000;
  display: grid; place-items: center; padding: 20px;
  background: rgba(8, 6, 5, .62); backdrop-filter: blur(3px);
}
.ave-modal {
  width: min(440px, 100%); background: var(--card, #15110b);
  border: 1px solid var(--line-2, rgba(255,255,255,.12)); border-radius: 16px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .5); padding: 24px; color: var(--text);
}
.ave-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.ave-head h3 { font-size: 17px; margin: 0; }
.ave-x { background: transparent; border: 0; color: var(--text-2); cursor: pointer; width: 32px; height: 32px; border-radius: 8px; }
.ave-x:hover { background: rgba(255,255,255,.06); color: var(--text); }
.ave-x svg { width: 18px; height: 18px; }
.ave-drop {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  text-align: center; cursor: pointer; padding: 34px 18px; border-radius: 14px;
  border: 1.5px dashed var(--line-2, rgba(255,255,255,.2)); background: rgba(255,255,255,.03);
}
.ave-drop:hover { border-color: var(--red); background: rgba(240,28,36,.06); }
.ave-drop svg { width: 34px; height: 34px; color: var(--red); }
.ave-drop-t { font-weight: 600; font-size: 14px; }
.ave-drop-s { font-size: 12px; color: var(--muted); }
.ave-crop { position: relative; width: 100%; height: 300px; background: #0a0705; border-radius: 12px; overflow: hidden; }
.ave-zoom { display: flex; align-items: center; gap: 10px; margin-top: 12px; font-size: 13px; color: var(--text-2); }
.ave-zoom input[type="range"] { flex: 1; accent-color: var(--red); }
.ave-link { background: transparent; border: 0; color: var(--red); font-weight: 600; font-size: 13px; cursor: pointer; }
.ave-error { color: #f01c24; font-size: 13px; font-weight: 600; margin: 12px 0 0; text-align: center; }
.ave-actions { display: flex; align-items: center; gap: 12px; margin-top: 20px; }
.ave-spacer { flex: 1; }
.ave-btn { border: 0; border-radius: 12px; padding: 12px 20px; font-weight: 700; font-size: 14px; cursor: pointer; }
.ave-btn:disabled { opacity: .6; cursor: not-allowed; }
.ave-primary { background: var(--red-grad, #f01c24); color: #fff; box-shadow: var(--shadow-red); }
.ave-ghost { background: transparent; color: var(--text); border: 1.5px solid var(--line-2, rgba(255,255,255,.18)); }
.ave-danger { background: transparent; color: #f01c24; border: 1.5px solid rgba(240,28,36,.4); }
.ave-danger:hover { background: rgba(240,28,36,.1); }

/* Toast for success/error */
.rtx-toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 1100;
  padding: 12px 18px; border-radius: 12px; font-size: 14px; font-weight: 600; color: #fff;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .35); animation: rtxToastIn .25s ease;
}
.rtx-toast.is-ok { background: #16a34a; }
.rtx-toast.is-err { background: #f01c24; }
@keyframes rtxToastIn { from { opacity: 0; transform: translate(-50%, 10px); } to { opacity: 1; transform: translate(-50%, 0); } }

@media (max-width: 520px) {
  .ave-modal { width: 100%; border-radius: 14px; padding: 16px; }
  .ave-crop { height: 260px; }
  .ave-actions { flex-wrap: wrap; }
  .ave-actions .ave-spacer { display: none; }
  .ave-btn { flex: 1; }
}
@media (prefers-reduced-motion: reduce) { .rtx-toast { animation: none; } }

/* ===== EMI pay modal (in-portal EMI payment; theme-aware via CSS vars) ===== */
.emi-modal-overlay {
  position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; padding: 20px;
  background: rgba(0, 0, 0, .55); backdrop-filter: blur(3px); animation: exqFade .18s ease;
}
.emi-modal {
  position: relative; width: 100%; max-width: 600px; text-align: left; padding: 24px; border-radius: 16px;
  background: var(--card); border: 1px solid var(--line-2); box-shadow: var(--shadow-md);
  animation: exqPop .2s cubic-bezier(.22, .61, .36, 1);
}
html[data-theme="dark"] .emi-modal { background: #1b1813; }
.emi-modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.emi-modal-head h3 { font-family: var(--display); font-size: 18px; font-weight: 800; color: var(--text); margin: 0; }
.emi-modal-x {
  flex-shrink: 0; width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; cursor: pointer;
  font-size: 20px; line-height: 1; color: var(--text-2);
  background: transparent; border: 1px solid var(--line-2); transition: background .14s ease, color .14s ease;
}
.emi-modal-x:hover { background: color-mix(in srgb, var(--text) 8%, transparent); color: var(--text); }
.emi-modal-label { display: block; font-size: 12.5px; font-weight: 700; color: var(--text); margin: 0 0 8px; }
.emi-modal-input {
  width: 100%; padding: 12px 14px; border-radius: 10px; font-size: 15px; color: var(--text);
  background: color-mix(in srgb, var(--text) 4%, transparent); border: 1px solid var(--line-2); outline: none;
  transition: border-color .14s ease, background .14s ease;
}
.emi-modal-input:focus { border-color: color-mix(in srgb, var(--red) 55%, transparent); }
.emi-modal-muted { font-size: 12.5px; color: var(--muted); margin: 12px 0 0; }
.emi-modal-preview {
  margin-top: 16px; padding: 14px 16px; border-radius: 12px;
  background: color-mix(in srgb, var(--text) 3%, transparent); border: 1px solid var(--line-2);
}
.emi-modal-preview > div { display: flex; align-items: center; justify-content: space-between; font-size: 13px; padding: 4px 0; color: var(--text-2); }
.emi-modal-preview > div b { color: var(--text); font-weight: 700; }

/* Pay-EMI modal: skeletons + recalculating state.
   The balance/covered/next figures are derived locally on open (see EmiPayModal.jsx), so these
   skeletons only appear for a course with no instalment schedule yet, where the server really
   is the first source of the numbers. Shimmer comes from the shared .rtx-skel. */
.emi-modal-skel { display: inline-block; height: 13px; width: 64px; vertical-align: middle; border-radius: 6px; }
.emi-modal-skel-wide { width: 96px; height: 14px; }
.emi-modal-skel-narrow { width: 40px; height: 14px; }
.emi-modal-grid td .emi-modal-skel { width: 100%; min-width: 52px; }

/* A recompute of a typed amount replaces every figure at once. Dipping the block rather than
   swapping the numbers under the reader keeps that legible without hiding the old values. */
.emi-modal-preview { transition: opacity .18s ease; }
.emi-modal-preview.is-recalculating { opacity: .55; }
.emi-modal-preview > div b { transition: color .18s ease; }
@media (prefers-reduced-motion: reduce) {
  .emi-modal-preview, .emi-modal-preview > div b { transition: none; }
}

.emi-modal-err { margin: 14px 0 0; font-size: 12.5px; font-weight: 600; color: var(--red); }
.emi-modal-actions { display: flex; gap: 12px; justify-content: flex-end; margin-top: 20px; }
.emi-modal-cancel, .emi-modal-pay {
  font-family: var(--display); font-weight: 700; font-size: 13.5px; padding: 12px 20px; border-radius: 12px;
  cursor: pointer; border: 1px solid transparent; transition: transform .14s ease, filter .14s ease, background .14s ease;
}
.emi-modal-cancel { background: transparent; border-color: var(--line-2); color: var(--text); }
.emi-modal-cancel:hover:not(:disabled) { background: color-mix(in srgb, var(--text) 6%, transparent); }
.emi-modal-pay { background: linear-gradient(180deg, #ff4b52, #d2141b); color: #fff; box-shadow: 0 8px 20px rgba(240, 28, 36, .35); }
.emi-modal-pay:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.06); }
.emi-modal-cancel:disabled, .emi-modal-pay:disabled { opacity: .55; cursor: not-allowed; }
@media (prefers-reduced-motion: reduce) { .emi-modal-overlay, .emi-modal { animation: none; } }

/* course header, EMI grid, status row */
.emi-modal-wide { max-width: 600px; }
.emi-modal-course { display: flex; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.emi-modal-course-right { text-align: right; }
.emi-modal-course-k { display: block; font-size: 11.5px; color: var(--muted); margin-bottom: 3px; }
.emi-modal-course-v { font-family: var(--display); font-size: 15px; font-weight: 700; color: var(--text); }
.emi-modal-grid-wrap { overflow-x: auto; margin-bottom: 16px; border-radius: 10px; border: 1px solid var(--line-2); }
.emi-modal-grid { width: 100%; border-collapse: collapse; font-size: 13px; }
.emi-modal-grid th { background: var(--ink); color: #fff; font-family: var(--display); font-weight: 700; font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; padding: 11px 12px; text-align: center; white-space: nowrap; }
.emi-modal-grid td { padding: 11px 12px; text-align: center; color: var(--text); border-top: 1px solid var(--line-2); white-space: nowrap; }
.emi-modal-grid-lbl { font-weight: 700; color: var(--text); text-align: left !important; }
.emi-modal-tick { color: #16a34a; font-weight: 800; }
html[data-theme="dark"] .emi-modal-tick { color: #34d399; }
.emi-modal-statusrow { display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: 13px; color: var(--text-2); margin-bottom: 16px; }
.emi-modal-statusrow .emi-modal-ok { color: #16a34a; }
.emi-modal-statusrow .emi-modal-bad { color: var(--red); }
html[data-theme="dark"] .emi-modal-statusrow .emi-modal-ok { color: #34d399; }
.emi-modal-total { font-family: var(--display); font-size: 15px; color: var(--text-2); }
.emi-modal-total b { color: var(--text); font-size: 18px; }
.emi-modal-req { color: var(--red); }
.emi-modal-hint { font-weight: 400; color: var(--muted); }

/* ===== Class recording modal (live/master class playback; theme-aware via CSS vars) ===== */
.rec-modal-overlay {
  position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; padding: 20px;
  background: rgba(0, 0, 0, .6); backdrop-filter: blur(3px); animation: exqFade .18s ease;
}
.rec-modal {
  position: relative; width: 100%; max-width: 880px; text-align: left; padding: 20px; border-radius: 16px;
  background: var(--card); border: 1px solid var(--line-2); box-shadow: var(--shadow-md);
  animation: exqPop .2s cubic-bezier(.22, .61, .36, 1);
}
html[data-theme="dark"] .rec-modal { background: #1b1813; }
.rec-modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.rec-modal-head h3 { font-family: var(--display); font-size: 17px; font-weight: 800; color: var(--text); margin: 0; }
.rec-modal-x {
  flex-shrink: 0; width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; cursor: pointer;
  font-size: 20px; line-height: 1; color: var(--text-2);
  background: transparent; border: 1px solid var(--line-2); transition: background .14s ease, color .14s ease;
}
.rec-modal-x:hover { background: color-mix(in srgb, var(--text) 8%, transparent); color: var(--text); }
.rec-modal-frame { border-radius: 10px; overflow: hidden; background: #000; }
.rec-modal-msg { font-size: 14px; color: var(--text-2); margin: 0 0 14px; }
.rec-modal-err { color: var(--red); }
.rec-modal-drive { padding: 4px 0 6px; }

/* ====================== PAGE: Payment return status (hop back from the payment gateway) ====================== */
/* Reuses the .labok result-card block (success/.fail variants at 7046-7086 / 7517-7520). */
.payst { padding-bottom: 8px; }
.payst-ref {
  font-family: var(--mono); font-size: 11.5px; color: var(--muted);
  margin: 18px 0 22px; position: relative;
}
.payst-ref span {
  color: var(--text-2); background: var(--red-soft-2); border: 1px solid var(--line-2);
  border-radius: 5px; padding: 3px 8px; margin-left: 6px; word-break: break-all;
}
/* .rtx-fade is already guarded for reduced motion; the progress ring is not. */
@media (prefers-reduced-motion: reduce) {
  .labok-ring .lr-fg { transition: none; }
}


/* ============================================================
   Quiz modal — runs a quiz in a centred panel over the content
   area. No route change; scroll position is preserved.

   Inset, not full-screen: .app is exactly 100vh with the sidebar
   as a fixed-width flex column, so anchoring to the viewport and
   insetting by --sidebar-w / --qzm-inset-top dims ONLY the content
   region and leaves the sidebar and app header visible.
   ============================================================ */
:root {
  /* Height of the sticky app header. Tune here if the header changes. */
  --qzm-inset-top: 84px;
}
.qzm-backdrop {
  position: fixed;
  top: var(--qzm-inset-top);
  left: var(--sidebar-w);
  right: 0;
  bottom: 0;
  z-index: 1200;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  background: rgba(2, 2, 4, .88);
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
  animation: qzm-fade .16s ease-out both;
}
html.side-collapsed .qzm-backdrop { left: 72px; }

.qzm-shell {
  /* auto margins centre the panel while still allowing it to scroll when it is taller
     than the area — align-items alone would crop the top of a long quiz. */
  margin: auto;
  width: min(1180px, 100%);
  max-height: 100%;
  overflow-y: auto;
  background: var(--card);
  border: 1px solid var(--line-2);
  border-radius: 14px;
  box-shadow: 0 30px 90px rgba(0, 0, 0, .72);
  animation: qzm-pop .22s cubic-bezier(.16, 1, .3, 1) both;
}
/* The runner is page-width by default; inside the panel it must not add page margins. */
.qzm-shell .exx { max-width: none; margin: 0; padding: 18px 20px 24px; }

/* Close button, rendered by the runner only in modal mode. Sits at the end of the
   title row so there is one header, not a modal header stacked on the quiz's own. */
.qzm-shell .lab-crumb { display: flex; align-items: center; gap: 14px; }
.qzm-shell .lab-crumb-info { flex: 1 1 auto; min-width: 0; }
.exx-close {
  flex: none; width: 36px; height: 36px; border-radius: 9px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 24px; line-height: 1;
  color: var(--muted); background: transparent; border: 1px solid var(--line-2);
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.exx-close:hover { color: var(--text); border-color: var(--red); background: rgba(240, 28, 36, .08); }

/* Quiz overview — shown in the modal before the quiz starts. */
.qzi { padding: 34px 28px 28px; text-align: center; }
.qzi-head { max-width: 620px; margin: 0 auto 26px; }
.qzi-title {
  margin: 0 0 8px; font-family: var(--display);
  font-size: 24px; font-weight: 800; color: var(--text); line-height: 1.2;
}
.qzi-sub { margin: 0; font-size: 14px; color: var(--muted); }
.qzi-stats {
  display: grid; gap: 12px; margin: 0 auto 28px;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  max-width: 720px;
}
.qzi-stat {
  padding: 16px 12px; border-radius: 11px;
  background: rgba(127, 127, 127, .06); border: 1px solid var(--line-2);
}
.qzi-stat-v {
  font-family: var(--display); font-size: 24px; font-weight: 800; color: var(--red);
  line-height: 1.1;
}
.qzi-stat-k {
  margin-top: 5px; font-size: 11.5px; font-weight: 600; letter-spacing: .05em;
  text-transform: uppercase; color: var(--muted);
}
.qzi-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* Attempt score on a module-quiz row. */
.cva-row-score {
  display: inline-block; margin-left: 10px;
  font-family: var(--mono, monospace); font-size: 11.5px; font-weight: 700;
  padding: 2px 9px; border-radius: 999px;
  color: #16a34a; background: rgba(22, 163, 74, .12); border: 1px solid rgba(22, 163, 74, .32);
}

@keyframes qzm-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes qzm-pop {
  from { opacity: 0; transform: translateY(12px) scale(.985); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .qzm-backdrop, .qzm-shell { animation: none; }
}
/* Mobile: the sidebar is a drawer and the header scrolls, so cover everything. */
@media (max-width: 900px) {
  .qzm-backdrop { top: 0; left: 0; padding: 0; }
  .qzm-shell { border-radius: 0; border: 0; max-height: 100%; }
  .qzm-shell .exx { padding: 14px 12px 24px; }
}

/* Reader embedded in a module accordion (PPT opening in place, like a lesson video).
   The page-level reader owns the viewport; inline it must sit inside the row instead. */
.reader-embedded {
  min-height: 0;
  height: auto;
  padding: 0;
  border-radius: 10px;
  overflow: hidden;
}
.reader-embedded .reader-bar { border-radius: 10px 10px 0 0; }
/* .slidev is height:100% for the full-page reader; inline it must size to its content
   and stay capped so a deck cannot push the rest of the accordion off-screen. */
.reader-embedded.slidev { height: auto; min-height: 0; padding: 12px 14px 10px; }
.reader-embedded .slidev-stage-wrap { max-height: 62vh; }
.reader-embedded .reader-stage { max-height: 62vh; }

/* Slideshow (fullscreen presentation) */
.slidev-show {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  padding: 5px 12px; border-radius: 999px;
  font-size: 12px; font-weight: 700; letter-spacing: .02em;
  color: var(--red); background: rgba(240, 28, 36, .10);
  border: 1px solid rgba(240, 28, 36, .30);
  transition: background .15s ease, color .15s ease;
}
.slidev-show:hover { background: rgba(240, 28, 36, .18); color: var(--text); }

/* While presenting the stage IS the fullscreen element, so it paints its own ground. */
.slidev-stage-wrap.presenting {
  /* the exit button is absolutely positioned against this */
  position: relative;
  background: #05050a;
  padding: 2vh 2vw;
  cursor: pointer;          /* click anywhere advances */
  max-height: none;
}
.slidev-stage-wrap.presenting .slidev-stage { max-width: 96vw; max-height: 92vh; }
.slidev-exit {
  position: absolute; top: 18px; right: 18px; z-index: 5; cursor: pointer;
  padding: 7px 14px; border-radius: 999px;
  font-size: 12px; font-weight: 700;
  color: #fff; background: rgba(0, 0, 0, .55); border: 1px solid rgba(255, 255, 255, .25);
  opacity: .35; transition: opacity .15s ease;
}
.slidev-stage-wrap.presenting:hover .slidev-exit { opacity: 1; }

/* ===== Report an issue (labs) ===== */
.labd-back { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.labd-report { cursor: pointer; border-color: rgba(240, 28, 36, .35); color: var(--red); }
.labd-report:hover { background: rgba(240, 28, 36, .10); }

/* ---- Download VPN profile, mirrored from My Labs onto the challenge page ---- */
/* Sits at the far right of the back row (.lbx-vpn-btn already carries margin-left:auto). */
.labd-back .lbx-vpn-btn { animation: labdVpnIn .28s ease both; }
@keyframes labdVpnIn { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } }
.labd-vpn-note { margin: 0 0 16px; }

/* Inline "Download VPN profile" inside the running-lab hint — reads as a link, acts as a button. */
.labd-vpn-link {
  padding: 0; border: 0; background: none; font: inherit; color: var(--red);
  font-weight: 700; cursor: pointer; text-decoration: underline; text-underline-offset: 2px;
  transition: opacity .15s ease, color .15s ease;
}
.labd-vpn-link:hover:not(:disabled) { opacity: .8; }
.labd-vpn-link:disabled { cursor: progress; opacity: .65; }

@media (max-width: 640px) {
  .labd-back .lbx-vpn-btn { margin-left: 0; width: 100%; justify-content: center; }
}

.rpt-backdrop {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center; padding: 20px;
  background: rgba(4, 4, 7, .78);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  animation: qzm-fade .16s ease-out both;
}
.rpt-shell {
  position: relative; width: min(560px, 100%);
  max-height: 90vh; overflow-y: auto;
  padding: 26px 24px 22px;
  background: var(--card); border: 1px solid var(--line-2);
  border-radius: 14px; box-shadow: 0 28px 80px rgba(0, 0, 0, .6);
  animation: qzm-pop .22s cubic-bezier(.16, 1, .3, 1) both;
}
.rpt-x {
  position: absolute; top: 12px; right: 12px;
  width: 32px; height: 32px; border-radius: 8px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 22px; line-height: 1;
  color: var(--muted); background: transparent; border: 1px solid var(--line-2);
}
.rpt-x:hover { color: var(--text); border-color: var(--muted); }
.rpt-h { margin: 0 0 18px; font-family: var(--display); font-size: 18px; font-weight: 700; color: var(--text); }
.rpt-select, .rpt-text {
  width: 100%; margin-bottom: 14px; padding: 11px 13px;
  border-radius: 9px; border: 1px solid var(--line-2);
  background: var(--bg-2, rgba(127, 127, 127, .05)); color: var(--text);
  font-size: 14px; font-family: inherit;
}
.rpt-text { resize: vertical; min-height: 110px; }
.rpt-select:focus, .rpt-text:focus { outline: none; border-color: var(--red); }
.rpt-hint { margin: 0 0 14px; font-size: 12.5px; color: var(--muted); }
.rpt-err { margin: 0 0 12px; font-size: 13px; color: var(--red); }
.rpt-actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.rpt-done { text-align: center; padding: 14px 4px 6px; }
.rpt-done h3 { margin: 0 0 8px; font-family: var(--display); font-size: 19px; color: var(--text); }
.rpt-done p { margin: 0 0 18px; font-size: 14px; color: var(--muted); }