/* ============================================================
   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;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
}

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;
  min-height: 100vh;
}

/* ---------- Sidebar ---------- */
.sidebar {
  width: var(--sidebar-w);
  flex: 0 0 var(--sidebar-w);
  background: var(--card);
  border-right: 1px solid var(--line);
  padding: 26px 18px 22px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  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 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: 13px;
  padding: 11px 13px;
  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;
}

.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);
}

/* 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;
  padding: 20px 25px 0;
  padding-top: 0;
  transition: margin-left .3s cubic-bezier(.4, 0, .2, 1);
  /* max-width: 1520px; */
}

/* ---------- Topbar ---------- */
.topbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 22px;
  padding: 4px 0 28px;
}

.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: 10px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--pill);
  padding: 11px 18px;
  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 22px;
  border-radius: var(--pill);
  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: 30px;
}

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

.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;
}

.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: 11px 12px 11px 14px;
  margin-top: 20px;
}

.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;
  margin-top: 44px;
  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) {
  .sidebar {
    display: none;
  }

  .content {
    padding: 18px;
  }

  .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: 9px;
  padding: 15px 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;
}

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

.noti {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 11px 12px 11px 15px;
  border-radius: 14px;
  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: 13px;
  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);
  }

  .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: 3px;}
 .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: #ff3b41;
  --red-700: #ff6166;
  --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 ---------- */
@media (max-width: 980px) {
  .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: 0;
  right: 0;
  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: 8px;
}

.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-bottom: 8px; }

/* 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);
}

.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-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; }

/* 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 TEST (challenge interface)
   ============================================================ */
.labx-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 22px;
  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: 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: 14px 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: 10px; margin-bottom: 18px; }
.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: 14px; 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: 14px; }

/* ============================================================
   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; }
.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 10px; }
.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: 26px 28px; margin-bottom: 34px; 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: 18px 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: 11px 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: 18px; }
.lc-rec { 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); }
.lc-rec-thumb { position: relative; aspect-ratio: 16 / 9; 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-code { position: absolute; left: 12px; top: 12px; font-family: var(--display); font-weight: 800; font-size: 13px; letter-spacing: .04em; color: rgba(255,255,255,.85); }
.lc-rec-play { 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; right: 10px; bottom: 10px; background: rgba(0,0,0,.6); color: #fff; font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 6px; }
.lc-rec-body { padding: 15px 16px; }
.lc-rec-body .lc-t { font-size: 14.5px; }
.lc-rec-meta { display: flex; gap: 16px; margin-top: 9px; 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: 14px; width: 100%; justify-content: center; }

@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-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; }
.exm-card-close { font-family: var(--mono); font-size: 11px; color: rgba(255, 255, 255, .5); }

/* 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; }
.exm-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto auto; align-items: center; gap: 18px; 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 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; }

@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; }
}

/* 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: 26px 28px; }
.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: 18px; 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: 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; }
.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: 10px 14px; padding-top: 14px; 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. */
.xc-gridwrap { min-width: 0; }
.v4-scope .xc-results { grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); }
.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 18px; 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: 22px 24px; box-shadow: var(--shadow-sm); margin-bottom: 30px; }
.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; }
.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 11px; 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: 7px 14px; 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: 30px 32px; margin-bottom: 30px; 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 { 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); }
.mcz-cover { position: relative; aspect-ratio: 16 / 8; 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 .ic { 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; 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 { padding: 16px; }
.mcz-card-t { font-family: var(--display); font-size: 16px; font-weight: 700; color: var(--text); line-height: 1.35; }
.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 { 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 14px; 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: 22px; }
.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: 14px; align-items: start; background: var(--card); border: 1px solid var(--line-2); border-radius: 10px; padding: 14px 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: 10px 14px; 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: 14px; 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: 18px; }
.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) ====================== */
.cov { 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%; }
.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: 6px 0 18px; }
.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); transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
.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); }

/* 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;
    background: var(--stickyheader-bg);
    backdrop-filter: blur(15px);
  margin: 0 -25px;
  /* 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 25px 18px;
  border-bottom: 1px solid transparent;
  transition: box-shadow .2s ease, border-color .2s ease;
}

/* Subtle separation once the header is stuck (toggled via JS). */
.topbar.is-stuck {
  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 -18px;
    padding: 12px 18px 12px;
  }
}

/* ============================================================
   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;
}

.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: 14px; margin-bottom: 18px; }
.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: 22px 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: 18px;
}

.set-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px 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: 11px 13px;
  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: 10px;
  margin-top: 18px;
  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: 14px 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;
  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-logo { height: 32px; width: auto; align-self: flex-start; filter: brightness(0) invert(1); position: relative; z-index: 1; }
.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 7px; }
.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; }

/* 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: 6px 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 --- */
.skel { display: block; position: relative; overflow: hidden; background: rgba(255, 255, 255, .06); border-radius: 8px; }
.skel::after {
  content: ''; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .10), transparent);
  animation: skelShimmer 1.3s ease-in-out infinite;
}
@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>). */
.cva .lesson-inline {
  overflow: hidden; max-height: 0; opacity: 0; margin: 0 6px;
  transition: max-height .42s cubic-bezier(.22, .61, .36, 1), opacity .32s ease, margin .32s ease;
}
.cva .lesson-inline.open { max-height: 1400px; opacity: 1; margin: 8px 6px 18px; }
.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; }

/* 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; }

.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); }

/* Favourites page grid + cards */
.fav-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; }
.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; }

/* ============================================================================
   Announcements page — redesigned (dark/red "terminal" theme to match the
   lesson player). Featured latest card + red timeline feed.
   ========================================================================== */
.anx { padding: 6px 2px 4px; }

/* 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: 15px 18px; 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; }


/* ===== 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: 28px 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 — fades from mostly-visible (never blank) and uses NO
   transform, so the chrome/modals never shift. Just a subtle settle-in. */
.content > .page-fade { animation: pageFade .2s ease both; }
@keyframes pageFade { from { opacity: .55; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .content > .page-fade { animation: 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: 16px;
  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: 18px; color: var(--text);
}
.ave-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.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: 10px; margin-top: 18px; }
.ave-spacer { flex: 1; }
.ave-btn { border: 0; border-radius: 11px; padding: 10px 16px; 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: 14px; }
  .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; } }