/* Legacy breadcrumb rules removed. Breadcrumb source of truth: /components/breadcrumb/breadcrumb.css?v=20260710-v6118-31-short-hero-all-devices */
@media (hover: none), (pointer: coarse) {
.content-area .lesson-block:hover,
    .content-area .lesson-block:focus-within,
    .content-area .res-item:hover,
    .content-area .res-item:focus-within,
    .content-area .lesson-links .res-toggle:hover,
    .content-area .lesson-links .res-toggle:focus {
      transform: none !important;
    }
}

.content-area { --bg-soft: rgba(156, 39, 176, 0.05); --bd-soft: rgba(156, 39, 176, 0.28); --surface: #ffffff; --card-bd: rgba(156, 39, 176, 0.18); --accent: #9c27b0; --accent-600: #6a1b9a; --accent-300: #d86cff; --txt-900: #0f172a; --txt-700: #334155; --txt-600: #64748b; --crumb-fg: #64748b; --radius-lg: 16px; --radius-md: 12px; --radius-sm: 10px; --shadow-sm: 0 2px 8px rgba(156, 39, 176, 0.05); --shadow-accent: 0 8px 20px rgba(156, 39, 176, 0.12), 0 0 0 1px rgba(156, 39, 176, 0.18); --shadow-accent-strong: 0 8px 20px rgba(216, 108, 255, 0.18), 0 0 0 1px rgba(216, 108, 255, 0.28); --links-cols: 4; --links-gap: 10px; --links-minh: 38px; --res-cols: 2; --res-gap: 16px; --les-scale: 1; --les-card-radius: calc(14px * var(--les-scale)); --les-card-pad: calc(16px * var(--les-scale)); --les-card-gap: 20px; --les-title-size: calc(18px * var(--les-scale)); --les-title-weight: 800; --les-title-gap: calc(8px * var(--les-scale)); --les-num-h: calc(22px * var(--les-scale)); --les-num-minw: calc(22px * var(--les-scale)); --les-num-border: calc(1.5px * var(--les-scale)); --les-num-radius: calc(7px * var(--les-scale)); --les-num-font: calc(13px * var(--les-scale)); --les-link-font: calc(13px * var(--les-scale)); --les-link-pady: calc(6px * var(--les-scale)); --les-link-padx: calc(8px * var(--les-scale)); --les-link-radius: 10px; --les-link-icon: calc(16px * var(--les-scale)); --les-res-item-pad-y: calc(10px * var(--les-scale)); --les-res-item-pad-x: calc(14px * var(--les-scale)); --les-res-item-font: calc(14px * var(--les-scale)); --sup-btn-minh: var(--links-minh); }

html.dark-mode .content-area, body.dark-mode .content-area { --bg-soft: rgba(156, 39, 176, 0.08); --bd-soft: rgba(156, 39, 176, 0.18); --surface: #0f172a; --card-bd: rgba(156, 39, 176, 0.16); --accent: #a855f7; --accent-600: #d8b4fe; --accent-300: #d8b4fe; --txt-900: #f8fafc; --txt-700: #cbd5e1; --txt-600: #94a3b8; --crumb-fg: #94a3b8; }

.content-area .sp-wrapper { display: grid; gap: 20px; }

.content-area .sp-hero { display: grid; place-items: center; gap: 12px; width: 100%; max-width: none; margin: 0 0 20px; padding: 20px; text-align: center; position: relative; z-index: 0; overflow: visible; border: 1px solid var(--bd-soft); border-radius: 20px; background: linear-gradient(135deg, rgba(156, 39, 176, 0.12) 0%, rgba(156, 39, 176, 0.03) 100%), var(--surface); box-shadow: var(--shadow-sm); }

.content-area .sp-hero h2 { display: inline-flex; align-items: center; justify-content: center; gap: 10px; margin: 0; color: var(--txt-900); font-size: 24px; font-weight: 900; line-height: 1.2; }

.content-area .sp-hero h2 i { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; background: var(--accent); color: #ffffff; font-size: 18px; box-shadow: 0 4px 12px rgba(156, 39, 176, 0.25); }

.content-area .sp-hero p { margin: 0; color: var(--txt-700); font-size: 16px; font-weight: 500; line-height: 1.5; }

.content-area .hero-inline-btn { --hero-btn-px: 14px; --hero-btn-pt: 6px; --hero-btn-pb: 6px; display: inline-flex; align-items: center; justify-content: center; gap: 4px; padding: var(--hero-btn-pt) var(--hero-btn-px) var(--hero-btn-pb); border: 2px solid var(--accent); border-radius: 999px; background: rgba(156, 39, 176, 0.10); color: var(--accent-600); font-weight: 900; line-height: 1; text-align: center; text-decoration: none; vertical-align: middle; outline: none; box-sizing: border-box; font-family: inherit; cursor: pointer; appearance: none; -webkit-appearance: none; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; transition: background-color 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease; }

.content-area .hero-inline-btn:hover { background: var(--accent); color: #ffffff; box-shadow: 0 4px 12px rgba(156, 39, 176, 0.30); transform: translateY(-1px); }

.dark-mode .content-area .sp-hero { background: linear-gradient(135deg, rgba(156, 39, 176, 0.15) 0%, rgba(156, 39, 176, 0.03) 100%), #1e293b; border-color: rgba(156, 39, 176, 0.2); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3); }

.dark-mode .content-area .sp-hero h2 i { color: #0f172a; }

.dark-mode .content-area .hero-inline-btn { background: rgba(156, 39, 176, 0.15); color: var(--accent); border-color: var(--accent); }

.dark-mode .content-area .hero-inline-btn:hover { background: var(--accent); color: #0f172a; box-shadow: 0 4px 15px rgba(216, 108, 255, 0.35); }

.content-area .unit-divider { margin: 4px 0 2px; padding: 10px 14px; border: 1px solid var(--bd-soft); border-radius: 14px; background: linear-gradient(135deg, rgba(156, 39, 176, 0.12) 0%, rgba(156, 39, 176, 0.04) 100%); color: var(--txt-900); font-size: 16px; font-weight: 900; text-align: center; box-shadow: var(--shadow-sm); }

.content-area .unit-divider small { display: block; margin-top: 4px; color: var(--txt-600); font-size: 12px; font-weight: 700; }

.dark-mode .content-area .unit-divider { background: linear-gradient(135deg, rgba(156, 39, 176, 0.16) 0%, rgba(156, 39, 176, 0.05) 100%); border-color: rgba(156, 39, 176, 0.22); }

.content-area .term-head { display: flex; align-items: center; justify-content: center; margin-bottom: 12px; }

.content-area .term-title { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0; color: var(--txt-900); font-size: 20px; font-weight: 900; }

.content-area .term-title i { color: var(--accent); font-size: 1.1em; }

.content-area .terms-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; width: 100%; min-width: 0; }

.content-area .terms-wrap > * { min-width: 0; }

.content-area .term-card { width: 100%; min-width: 0; padding: 0; background: transparent; border: 0; content-visibility: visible; contain-intrinsic-size: auto; }

.content-area.force-supervised-layout .term-card { content-visibility: visible; contain-intrinsic-size: auto; }

.content-area.force-supervised-layout #supervised,
.content-area.force-supervised-layout #supervised .term-card,
.content-area.force-supervised-layout #supervised .lesson-block,
.content-area.force-supervised-layout #supervised .res-panel.open {
  content-visibility: visible !important;
  contain-intrinsic-size: auto !important;
}

.content-area .lessons-stack { display: grid; gap: var(--les-card-gap); width: 100%; min-width: 0; }

.content-area .lesson-block { width: 100%; min-width: 0; padding: var(--les-card-pad); border: 1px solid var(--card-bd); border-radius: var(--les-card-radius); background: var(--surface); box-shadow: var(--shadow-sm); box-sizing: border-box; overflow: hidden; transition: background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease; }

.content-area .lesson-block:hover, .content-area .lesson-block:focus-within { background: #faf5ff; border-color: var(--accent); box-shadow: var(--shadow-accent); transform: translateY(-3px); }

.content-area .lesson-block.open { border-color: var(--accent); box-shadow: var(--shadow-accent); }

.dark-mode .content-area .lesson-block { background: #1e293b; border-color: rgba(156, 39, 176, 0.18); }

.dark-mode .content-area .lesson-block:hover, .dark-mode .content-area .lesson-block:focus-within, .dark-mode .content-area .lesson-block.open { background: #0f172a; border-color: var(--accent); box-shadow: var(--shadow-accent-strong); }

.content-area .lesson-title { display: flex; align-items: center; gap: var(--les-title-gap); margin: 0 0 12px; color: var(--txt-900); font-size: var(--les-title-size); font-weight: var(--les-title-weight); }

.content-area .lesson-title .title-text { line-height: 1.3; }

.content-area .num-squares { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; width: var(--les-num-minw); min-width: var(--les-num-minw); height: var(--les-num-h); padding: 0; border: var(--les-num-border) solid var(--accent); border-radius: var(--les-num-radius); background: var(--bg-soft); color: var(--accent); font-size: var(--les-num-font); font-weight: 900; line-height: 1; direction: ltr; text-align: center; vertical-align: middle; box-sizing: border-box; font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1, "lnum" 1; -webkit-font-smoothing: antialiased; text-rendering: geometricPrecision; transform: translateZ(0); }

.content-area .num-squares .sq-digits { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: inherit; font-size: inherit; line-height: 1; direction: ltr; text-align: center; white-space: nowrap; font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1, "lnum" 1; -webkit-font-smoothing: antialiased; }

.content-area .lesson-links { display: grid; grid-template-columns: repeat(var(--links-cols), minmax(0, 1fr)); gap: var(--links-gap); width: 100%; min-width: 0; margin-bottom: 0; box-sizing: border-box; }

.content-area .lesson-links .res-toggle { display: flex; align-items: center; justify-content: center; flex-flow: row nowrap; gap: 6px; inline-size: 100%; min-width: 0; min-block-size: var(--links-minh); padding: var(--les-link-pady) var(--les-link-padx); border: 1px solid var(--card-bd); border-radius: var(--les-link-radius); background: var(--surface); color: var(--txt-700); font-size: calc(var(--les-link-font) + 1px); font-weight: 700; line-height: 1; text-align: center; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-sizing: border-box; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; font-variant-ligatures: contextual; transition: background-color 0.16s ease, color 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease; }

.content-area .lesson-links .res-toggle > * { align-self: center; }

.content-area .lesson-links .res-toggle i { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; color: var(--accent); font-size: var(--les-link-icon); line-height: 1; transform: none; transition: transform 0.2s; }

.content-area .lesson-links .res-toggle:hover, .content-area .lesson-links .res-toggle:focus, .content-area .lesson-links .res-toggle[aria-expanded="true"] { background: var(--accent); border-color: var(--accent); color: #ffffff; box-shadow: 0 4px 12px rgba(156, 39, 176, 0.24); outline: none; transform: translateY(-1px); }

.content-area .lesson-links .res-toggle:hover i, .content-area .lesson-links .res-toggle[aria-expanded="true"] i { color: #ffffff; }

.dark-mode .content-area .lesson-links .res-toggle { background: #1e293b; border-color: rgba(156, 39, 176, 0.25); color: #cbd5e1; }

.dark-mode .content-area .lesson-links .res-toggle:hover, .dark-mode .content-area .lesson-links .res-toggle[aria-expanded="true"] { background: var(--accent); border-color: var(--accent); color: #0f172a; }

.dark-mode .content-area .lesson-links .res-toggle:hover i, .dark-mode .content-area .lesson-links .res-toggle[aria-expanded="true"] i { color: #0f172a; }

.content-area .lesson-links .res-toggle.last-open-kind,
  .content-area .lesson-links .res-toggle.last-open-kind:visited,
  .content-area .lesson-links .res-toggle.last-open-kind:link {
    background: var(--accent);
    border-color: var(--accent);
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(156, 39, 176, 0.24);
  }

.content-area .lesson-links .res-toggle.last-open-kind i {
    color: #ffffff;
  }

.dark-mode .content-area .lesson-links .res-toggle.last-open-kind,
  .dark-mode .content-area .lesson-links .res-toggle.last-open-kind:visited,
  .dark-mode .content-area .lesson-links .res-toggle.last-open-kind:link {
    background: var(--accent);
    border-color: var(--accent);
    color: #0f172a;
  }

.dark-mode .content-area .lesson-links .res-toggle.last-open-kind i {
    color: #0f172a;
  }

.content-area .res-panel { height: 0; margin-top: 0; padding-block: 0; padding-inline: 12px; border-width: 0; border-style: dashed; border-color: var(--bd-soft); border-radius: var(--radius-md); background: var(--bg-soft); opacity: 0; overflow: hidden; will-change: height, opacity; transition: height 0.18s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.18s cubic-bezier(0.25, 0.8, 0.25, 1); }

.content-area .res-panel.open { margin-top: 15px; padding-block: 15px; border-width: 1px; opacity: 1; }

.content-area .res-title { margin: 0 0 12px; color: var(--txt-600); font-size: 14px; font-weight: 800; letter-spacing: 0.5px; text-align: center; text-transform: uppercase; }

.content-area .res-list { display: grid; grid-template-columns: repeat(var(--res-cols), minmax(0, 1fr)); gap: var(--res-gap); margin: 0; padding: 0; list-style: none; }

.dark-mode .content-area .res-panel { background: rgba(0, 0, 0, 0.2); border-color: rgba(156, 39, 176, 0.2); }

.dark-mode .content-area .res-title { color: var(--txt-600); }

.content-area .res-panel[data-kind="vid"] .video-group-separator {
    grid-column: 1 / -1;
    display: block;
    width: 100%;
    height: 1px;
    min-height: 0;
    margin: 2px 0;
    padding: 0;
    border: 0;
    border-top: 1px dashed var(--bd-soft);
    background: transparent;
    box-shadow: none;
    list-style: none;
    pointer-events: none;
  }

.content-area .res-item { display: flex; align-items: stretch; justify-content: space-between; gap: 10px; min-height: 46px; border: 1px solid var(--card-bd); border-radius: 10px; background: var(--surface); box-shadow: var(--shadow-sm); position: relative; box-sizing: border-box; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; transition: background-color 0.16s ease, color 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease; }

.content-area .res-item:hover, .content-area .res-item:focus-within { background: #faf5ff; border-color: var(--accent); box-shadow: 0 4px 12px rgba(156, 39, 176, 0.15); outline: none; transform: translateY(-2px); }

.content-area .res-meta { display: flex; align-items: center; justify-content: flex-start; align-self: stretch; flex: 1 1 auto; gap: 10px; min-width: 0; min-height: 100%; padding: var(--les-res-item-pad-y) var(--les-res-item-pad-x); box-sizing: border-box; position: relative; z-index: 2; pointer-events: none; }

.content-area .res-item a { display: flex; align-items: center; justify-content: flex-start; align-self: stretch; flex: 1 1 auto; min-width: 0; min-height: 100%; margin: 0; color: var(--txt-900); font-size: var(--les-res-item-font); font-weight: 700; line-height: 1.25; text-align: start; text-decoration: none; white-space: normal; overflow-wrap: anywhere; word-break: break-word; box-sizing: border-box; outline: none; pointer-events: auto; }

.content-area .res-item a::after { content: ""; position: absolute; inset: 0; z-index: 1; }

.content-area .res-meta i, .content-area .res-meta .pdf-inline-icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; color: var(--accent); transform: translateY(0); }

.content-area .res-meta i { font-size: 16px; }

.content-area .lesson-block:not(.supervised-card) .res-panel[data-kind="vid"] .res-meta i { font-size: 18px; }

.content-area .res-meta .pdf-inline-icon { width: 20px; height: 22px; }

.content-area .res-meta .pdf-inline-icon svg { display: block; width: 100%; height: 100%; fill: currentColor; }

.dark-mode .content-area .res-item { background: #1e293b; border-color: rgba(156, 39, 176, 0.15); }

.dark-mode .content-area .res-item:hover, .dark-mode .content-area .res-item:focus-within { background: #0f172a; border-color: var(--accent); }

.dark-mode .content-area .res-panel .res-item a { color: #f1f5f9; }

.content-area .res-item.visited { background: linear-gradient(135deg, rgba(156, 39, 176, 0.10) 0%, rgba(156, 39, 176, 0.035) 100%); border-color: rgba(106, 27, 154, 0.50); border-width: 1px; box-shadow: 0 0 0 1px rgba(156, 39, 176, 0.08), 0 4px 12px rgba(156, 39, 176, 0.08); }

.content-area .res-item.visited .res-meta { padding-inline-end: calc(var(--les-res-item-pad-x) + 24px); }

.content-area .res-item.visited .res-meta a { color: var(--accent-600); font-weight: 800; }

.content-area .res-item.visited .res-meta i, .content-area .res-item.visited .res-meta .pdf-inline-icon { color: var(--accent-600); }

.content-area .res-item.visited::after { content: "✓"; position: absolute; top: 50%; inset-inline-end: 8px; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border: 1px solid rgba(156, 39, 176, 0.30); border-radius: 999px; background: rgba(156, 39, 176, 0.14); color: var(--accent-600); font-size: 10px; font-weight: 900; line-height: 1; box-shadow: 0 2px 6px rgba(156, 39, 176, 0.12); pointer-events: none; z-index: 3; transform: translateY(-50%); }

.content-area .res-item.return-focus { background: linear-gradient(135deg, rgba(156, 39, 176, 0.10) 0%, rgba(156, 39, 176, 0.04) 100%); border-color: var(--accent); box-shadow: 0 0 0 2px rgba(156, 39, 176, 0.18), 0 6px 18px rgba(156, 39, 176, 0.12); }

.content-area .lesson-block.visited-card .lesson-title .title-text,
  .content-area .lesson-block.visited-card .supervised-label { color: var(--accent-600); font-weight: 900; }

.content-area .lesson-block.visited-card .lesson-num,
  .content-area .lesson-block.visited-card .supervised-num { border-color: rgba(106, 27, 154, 0.62); color: var(--accent-600); background: rgba(156, 39, 176, 0.12); }

.content-area .lesson-block.return-card-focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(156, 39, 176, 0.20), var(--shadow-accent); }

.dark-mode .content-area .lesson-block.visited-card .lesson-title .title-text,
  .dark-mode .content-area .lesson-block.visited-card .supervised-label { color: #d8b4fe; }

.dark-mode .content-area .lesson-block.visited-card .lesson-num,
  .dark-mode .content-area .lesson-block.visited-card .supervised-num { border-color: rgba(168, 85, 247, 0.70); color: #d8b4fe; background: rgba(168, 85, 247, 0.16); }

.dark-mode .content-area .lesson-block.return-card-focus { box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.24), var(--shadow-accent-strong); }

.content-area .lesson-block.last-open-card {
    border-color: var(--accent) !important;
    box-shadow:
      0 0 0 3px rgba(156, 39, 176, 0.22),
      0 0 22px rgba(156, 39, 176, 0.32),
      var(--shadow-accent) !important;
    background:
      linear-gradient(135deg, rgba(156, 39, 176, 0.08) 0%, rgba(156, 39, 176, 0.025) 100%),
      var(--surface) !important;
  }

.content-area .lesson-block.last-open-card .lesson-title .title-text,
  .content-area .lesson-block.last-open-card .supervised-label {
    color: var(--accent-600) !important;
    font-weight: 900 !important;
  }

.content-area .lesson-block.last-open-card .lesson-num,
  .content-area .lesson-block.last-open-card .supervised-num {
    border-color: rgba(106, 27, 154, 0.70) !important;
    color: var(--accent-600) !important;
    background: rgba(156, 39, 176, 0.14) !important;
  }

.dark-mode .content-area .lesson-block.last-open-card {
    border-color: var(--accent) !important;
    background:
      linear-gradient(135deg, rgba(168, 85, 247, 0.12) 0%, rgba(168, 85, 247, 0.04) 100%),
      #0f172a !important;
    box-shadow:
      0 0 0 3px rgba(168, 85, 247, 0.28),
      0 0 24px rgba(168, 85, 247, 0.30),
      var(--shadow-accent-strong) !important;
  }

.dark-mode .content-area .lesson-block.last-open-card .lesson-title .title-text,
  .dark-mode .content-area .lesson-block.last-open-card .supervised-label {
    color: #d8b4fe !important;
  }

.dark-mode .content-area .res-item.visited { background: linear-gradient(135deg, rgba(156, 39, 176, 0.12) 0%, rgba(156, 39, 176, 0.05) 100%); border-color: rgba(168, 85, 247, 0.55); box-shadow: 0 0 0 1px rgba(216, 108, 255, 0.12), 0 6px 14px rgba(0, 0, 0, 0.18); }

.dark-mode .content-area .res-item.visited .res-meta a { color: #e9d5ff; }

.dark-mode .content-area .res-item.visited .res-meta i, .dark-mode .content-area .res-item.visited .res-meta .pdf-inline-icon { color: #a855f7; }

.dark-mode .content-area .res-item.visited::after { background: rgba(168, 85, 247, 0.16); color: #d8b4fe; border-color: rgba(168, 85, 247, 0.34); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.22); }

.dark-mode .content-area .res-item.return-focus { box-shadow: 0 0 0 2px rgba(168, 85, 247, 0.22), 0 8px 18px rgba(0, 0, 0, 0.22); }

.content-area #supervised { margin-top: 25px; padding-top: 25px; position: relative; }

.content-area #supervised::before { content: ""; position: absolute; top: 0; left: 5%; right: 5%; height: 4px; border-radius: 4px; background: linear-gradient(90deg, transparent, var(--accent-300), var(--accent-600), var(--accent-300), transparent); opacity: 1; box-shadow: 0 4px 15px rgba(106, 27, 154, 0.25); }

.content-area #supervised .sp-title { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0 0 20px; color: var(--txt-900); font-size: 21px; font-weight: 900; text-align: center; }

.content-area #supervised .sp-title i { color: var(--accent); font-size: 23px; }

.content-area #supervised .term-title { font-size: 19px; }

.dark-mode .content-area #supervised .sp-title { color: #f8fafc; }

.content-area .supervised-card { overflow: hidden; }

.content-area .supervised-toggle-btn { display: flex; align-items: flex-start; justify-content: space-between; width: 100%; margin: 0; padding: 0; border: 0; background: transparent; font-family: inherit; cursor: pointer; outline: none; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }

.content-area .supervised-toggle-btn:focus-visible { outline: 3px solid rgba(156, 39, 176, 0.35); border-radius: 8px; }

.content-area .supervised-toggle-left { display: flex; align-items: center; gap: var(--les-title-gap); min-width: 0; color: var(--txt-900); font-size: calc(var(--les-title-size) - 1px); font-weight: var(--les-title-weight); text-align: start; }

.dark-mode .content-area .supervised-toggle-left { color: #f8fafc; }

.content-area .supervised-num { flex: 0 0 var(--les-num-minw); width: var(--les-num-minw); min-width: var(--les-num-minw); height: var(--les-num-h); align-self: center; }

.content-area .supervised-label { display: block; min-width: 0; line-height: 1.22; white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; word-break: break-word; }

.content-area .supervised-toggle-btn .chev { color: var(--txt-600); font-size: 16px; transition: transform 0.3s ease; }

.content-area .supervised-toggle-btn[aria-expanded="true"] .chev { color: var(--accent); transform: rotate(180deg); }

.content-area .supervised-card .res-panel[data-kind="exam"] .res-title { margin-bottom: 14px; }

.content-area .supervised-card .exam-actions-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 12px; }

.content-area .supervised-card .exam-actions-grid:last-child { margin-bottom: 0; }

.content-area .supervised-card .res-panel[data-kind="exam"] .exam-actions-grid:not(:last-of-type) { padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px dashed var(--bd-soft); }

.content-area .supervised-card .exam-actions-grid > .supervised-res-item, .content-area .supervised-res-item, .content-area .supervised-card .res-panel .supervised-res-item { min-width: 0; min-height: var(--links-minh); align-items: stretch; }

.content-area .supervised-res-meta { --sup-icon-w: 20px; --sup-icon-title-gap: 4px; display: flex; align-items: center; justify-content: flex-start; gap: var(--sup-icon-title-gap); width: 100%; min-width: 0; }

.content-area .supervised-card .res-panel .supervised-res-item a { flex: 1 1 auto; min-width: 0; width: auto; justify-content: flex-start; text-align: start; white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; word-break: break-word; }

.content-area .supervised-card .res-panel .supervised-res-item .res-meta i, .content-area .supervised-card .res-panel .supervised-res-item .res-meta .pdf-inline-icon { flex: 0 0 var(--sup-icon-w); width: var(--sup-icon-w); min-width: var(--sup-icon-w); height: var(--sup-icon-w); justify-content: center; }

.content-area .supervised-card .exam-action--video .supervised-res-meta i { font-size: 18px; }

.lesson-highlight { animation: lessonCardFlash 1.1s ease; }

@media (max-width: 720px) {
.lesson-highlight { animation: none; box-shadow: 0 0 0 2px rgba(156, 39, 176, 0.18), var(--shadow-sm); }
}

@keyframes lessonCardFlash {
0% { box-shadow: 0 0 0 0 rgba(156, 39, 176, 0.45), var(--shadow-accent); }
50% { box-shadow: 0 0 0 8px rgba(156, 39, 176, 0.12), var(--shadow-accent); }
100% { box-shadow: var(--shadow-accent); }
}

@media (min-width: 961px) {
.content-area { --links-cols: 4; --res-cols: 2; --links-gap: 8px; --links-minh: 38px; }
.content-area .res-panel[data-kind="quiz"] .res-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.content-area .supervised-card .exam-actions-grid, .content-area .supervised-card .res-panel.actions-count-3 .exam-actions-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.content-area .supervised-card .exam-actions-grid > .supervised-res-item, .content-area .supervised-card .res-panel.actions-count-3 .exam-actions-grid > .supervised-res-item:nth-child(3), .content-area .supervised-card .res-panel.actions-count-1 .exam-actions-grid > .supervised-res-item { grid-column: auto; justify-self: stretch; width: 100%; min-width: 0; max-width: 100%; }
.content-area .supervised-res-meta { --sup-icon-title-gap: 6px; padding-inline: 14px; }
.content-area .lesson-block:not(.supervised-card) .res-panel[data-kind="quiz"] .res-meta, .content-area .lesson-block:not(.supervised-card) .res-panel[data-kind="vid"] .res-meta { position: relative; top: -2px; }
}

@media (max-width: 960px) {
.content-area { --links-cols: 2; --res-cols: 1; --links-gap: 10px; --links-minh: 44px; --les-res-item-font: 13px; --les-res-item-pad-y: 8px; --les-res-item-pad-x: 12px; }
.content-area .terms-wrap { grid-template-columns: 1fr; }
.content-area .res-item { min-height: 42px; }
.content-area .res-panel[data-kind="quiz"] .res-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.content-area .res-panel[data-kind="quiz"] .res-list > .res-item { grid-column: auto; justify-self: stretch; width: 100%; min-width: 0; max-width: 100%; }
.content-area .res-panel[data-kind="vid"] .res-list { grid-template-columns: 1fr; gap: 12px; }
.content-area .res-panel .res-meta { display: flex; align-items: center; align-self: stretch; justify-content: flex-start; flex-direction: row; width: 100%; min-width: 0; min-height: 100%; gap: 8px; padding-block: 8px; padding-inline: 12px; padding-inline-end: 34px; box-sizing: border-box; }
html[dir="rtl"] .content-area .res-panel .res-meta { text-align: right; }
html[dir="ltr"] .content-area .res-panel .res-meta { text-align: left; }
.content-area .res-panel[data-kind="quiz"] .res-item a { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.content-area .res-panel .res-item a { position: relative; top: 2.2px; }
.content-area .supervised-card .exam-actions-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.content-area .supervised-card .exam-actions-grid > .supervised-res-item { grid-column: auto; justify-self: stretch; width: 100%; min-width: 0; max-width: 100%; }
.content-area .supervised-res-meta { --sup-icon-title-gap: 3px; }
}

@media (max-width: 960px) and (min-width: 721px) {
.content-area { --links-cols: 4; --res-cols: 2; --links-gap: 8px; --links-minh: 40px; }
.content-area .lesson-links .res-toggle { padding-inline: 6px; font-size: 12px; }
.content-area .lesson-links .res-toggle i { font-size: 14px; }
}

@media (max-width: 720px) {
.content-area { min-width: 0; --les-title-gap: 6px; --les-num-h: 20px; --les-num-minw: 20px; --les-num-border: 1.5px; --les-num-radius: 6px; --les-num-font: 12px; }
.content-area .sp-wrapper { gap: 16px; }
.content-area .sp-hero h2 { font-size: 20px; }
.content-area .hero-inline-btn { --hero-btn-px: 12px; --hero-btn-pt: 7px; --hero-btn-pb: 4px; }
.content-area .term-card { padding: 0; }
.content-area .lesson-block { padding: 14px; }
.content-area .lesson-title { display: flex; align-items: center; gap: 6px; min-width: 0; margin-bottom: 12px; font-size: 16px; line-height: 1.25; }
.content-area .lesson-title .title-text { flex: 1 1 auto; min-width: 0; line-height: 1.25; position: relative; top: 3px; }
.content-area .num-squares { flex: 0 0 20px; width: 20px; min-width: 20px; height: 20px; align-self: center; }
.content-area .num-squares .sq-digits { font-size: inherit; line-height: 0; transform: translateY(1.5px); }
.content-area .lesson-links .res-toggle { display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 40px; padding-top: 6.5px; padding-bottom: 3.5px; padding-inline: 7px; font-size: 14px; line-height: 1; }
.content-area .lesson-links .res-toggle i { position: relative; top: -1.5px; }
.content-area .res-panel.open, .content-area .supervised-card .res-panel.open { margin-top: 10px; padding-inline: 10px; padding-block: 10px; }
.content-area .res-list { gap: 12px; }
.content-area .lesson-block:not(.supervised-card) .res-panel .res-item { min-height: 40px; border-radius: 12px; }
.content-area .res-item { border-radius: 12px; }
.content-area .res-item.visited::after { content: ""; position: absolute; top: 50%; inset-inline-end: 8px; width: 14px; height: 14px; border: 1px solid rgba(156, 39, 176, 0.30); border-radius: 999px; background: rgba(156, 39, 176, 0.14); box-shadow: 0 2px 6px rgba(156, 39, 176, 0.12); pointer-events: none; z-index: 3; transform: translateY(-50%); }
.content-area .res-item.visited::before { content: ""; position: absolute; top: 50%; inset-inline-end: 8px; width: 14px; height: 14px; background-color: var(--accent-600); pointer-events: none; z-index: 4; transform: translateY(-50%); -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M9.2 16.6 4.8 12.2l-1.4 1.4 5.8 5.8L20.6 8l-1.4-1.4z'/></svg>"); -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; -webkit-mask-size: 8px 8px; mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M9.2 16.6 4.8 12.2l-1.4 1.4 5.8 5.8L20.6 8l-1.4-1.4z'/></svg>"); mask-repeat: no-repeat; mask-position: center; mask-size: 8px 8px; }
.content-area .res-meta .pdf-inline-icon { width: 20px; height: 20px; }
.content-area .supervised-card, .content-area .supervised-toggle-btn, .content-area .supervised-toggle-left, .content-area .supervised-res-item, .content-area .supervised-res-meta, .content-area .supervised-card .res-panel .supervised-res-item a, .content-area .supervised-card .res-panel .supervised-res-item a::after { -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; }
.content-area .supervised-card:focus, .content-area .supervised-card:active, .content-area .supervised-card:focus-visible, .content-area .supervised-toggle-btn:focus, .content-area .supervised-toggle-btn:active, .content-area .supervised-toggle-btn:focus-visible, .content-area .supervised-res-item:focus, .content-area .supervised-res-item:active, .content-area .supervised-res-item:focus-visible, .content-area .supervised-card .res-panel .supervised-res-item a:focus, .content-area .supervised-card .res-panel .supervised-res-item a:active, .content-area .supervised-card .res-panel .supervised-res-item a:focus-visible { outline: none; box-shadow: none; }
.content-area .supervised-card .supervised-toggle-left { align-items: center; gap: 6px; min-width: 0; font-size: 15px; line-height: 1.2; }
.content-area .supervised-card .supervised-label { font-size: inherit; line-height: 1.2; position: relative; top: 1.5px; }
.content-area .supervised-num { flex: 0 0 20px; width: 20px; min-width: 20px; height: 20px; align-self: center; font-size: 12px; }
.content-area .supervised-card .res-list, .content-area .supervised-card .exam-actions-grid { grid-template-columns: 1fr; gap: 10px; }
.content-area .supervised-card .exam-actions-grid > .supervised-res-item, .content-area .supervised-res-item { grid-column: 1 / -1; justify-self: stretch; width: 100%; min-width: 0; max-width: 100%; min-height: 40px; }
html[dir="rtl"] .content-area .supervised-card .res-panel .supervised-res-item .supervised-res-meta, html[dir="ltr"] .content-area .supervised-card .res-panel .supervised-res-item .supervised-res-meta { --sup-table-w: 162px; --sup-icon-w: 22px; --sup-icon-title-gap: 4px; --sup-title-y: 2.5px; display: grid; grid-template-columns: var(--sup-icon-w) minmax(0, calc(var(--sup-table-w) - var(--sup-icon-w) - var(--sup-icon-title-gap))); grid-template-rows: 1fr; column-gap: var(--sup-icon-title-gap); align-items: center; justify-content: center; flex: 0 0 auto; width: var(--sup-table-w); min-width: 0; min-height: 100%; margin-inline: auto; padding-inline: 0; padding-block: 4px; box-sizing: border-box; pointer-events: none; }
html[dir="rtl"] .content-area .supervised-card .res-panel .supervised-res-item .supervised-res-meta { direction: rtl; text-align: right; --sup-title-y: 2.5px; }
html[dir="ltr"] .content-area .supervised-card .res-panel .supervised-res-item .supervised-res-meta { direction: ltr; text-align: left; --sup-table-w: 168px; --sup-title-y: 2.5px; }
html[dir="rtl"] .content-area .supervised-card .res-panel .supervised-res-item .supervised-res-meta > i, html[dir="rtl"] .content-area .supervised-card .res-panel .supervised-res-item .supervised-res-meta > .pdf-inline-icon, html[dir="ltr"] .content-area .supervised-card .res-panel .supervised-res-item .supervised-res-meta > i, html[dir="ltr"] .content-area .supervised-card .res-panel .supervised-res-item .supervised-res-meta > .pdf-inline-icon { grid-column: 1; grid-row: 1; display: inline-flex; align-items: center; justify-content: center; justify-self: center; align-self: center; flex: none; width: var(--sup-icon-w); min-width: var(--sup-icon-w); height: var(--sup-icon-w); margin: 0; transform: none; }
html[dir="rtl"] .content-area .supervised-card .res-panel .supervised-res-item .supervised-res-meta > a, html[dir="ltr"] .content-area .supervised-card .res-panel .supervised-res-item .supervised-res-meta > a { grid-column: 2; grid-row: 1; display: inline-flex; align-items: center; justify-content: flex-start; align-self: center; justify-self: stretch; flex: none; width: 100%; min-width: 0; min-height: auto; margin: 0; padding: 0; white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; word-break: normal; line-height: 1.2; position: relative; top: var(--sup-title-y); pointer-events: auto; }
html[dir="rtl"] .content-area .supervised-card .res-panel .supervised-res-item .supervised-res-meta > a { direction: rtl; text-align: right; }
html[dir="ltr"] .content-area .supervised-card .res-panel .supervised-res-item .supervised-res-meta > a { direction: ltr; text-align: left; white-space: nowrap; overflow: visible; text-overflow: clip; }
html[dir="rtl"] .content-area .supervised-res-item.visited .supervised-res-meta, html[dir="ltr"] .content-area .supervised-res-item.visited .supervised-res-meta { padding-inline: 0; }
html[dir="rtl"] .content-area .lesson-block:not(.supervised-card) .res-panel .res-meta, html[dir="ltr"] .content-area .lesson-block:not(.supervised-card) .res-panel .res-meta { --sub-table-w: 150px; --sub-icon-w: 22px; --sub-gap: 3px; --sub-title-y: 2.7px; display: grid; grid-template-columns: var(--sub-icon-w) minmax(0, calc(var(--sub-table-w) - var(--sub-icon-w) - var(--sub-gap))); grid-template-rows: 1fr; column-gap: var(--sub-gap); align-items: center; justify-content: center; flex: 0 0 auto; width: var(--sub-table-w); min-width: 0; min-height: 100%; margin-inline: auto; padding-inline: 0; padding-block: 4px; box-sizing: border-box; pointer-events: none; }
html[dir="rtl"] .content-area .lesson-block:not(.supervised-card) .res-panel .res-meta { direction: rtl; text-align: right; }
html[dir="ltr"] .content-area .lesson-block:not(.supervised-card) .res-panel .res-meta { direction: ltr; text-align: left; }
html[dir="rtl"] .content-area .lesson-block:not(.supervised-card) .res-panel .res-meta > i, html[dir="rtl"] .content-area .lesson-block:not(.supervised-card) .res-panel .res-meta > .pdf-inline-icon, html[dir="ltr"] .content-area .lesson-block:not(.supervised-card) .res-panel .res-meta > i, html[dir="ltr"] .content-area .lesson-block:not(.supervised-card) .res-panel .res-meta > .pdf-inline-icon { grid-column: 1; grid-row: 1; display: inline-flex; align-items: center; justify-content: center; justify-self: center; align-self: center; flex: none; width: var(--sub-icon-w); height: var(--sub-icon-w); margin: 0; transform: none; }
html[dir="rtl"] .content-area .lesson-block:not(.supervised-card) .res-panel .res-item a, html[dir="ltr"] .content-area .lesson-block:not(.supervised-card) .res-panel .res-item a { grid-column: 2; grid-row: 1; display: inline-flex; align-items: center; justify-content: flex-start; align-self: center; justify-self: stretch; flex: none; width: 100%; min-width: 0; min-height: auto; margin: 0; padding: 0; white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: normal; word-break: normal; position: relative; top: var(--sub-title-y); pointer-events: auto; }
html[dir="rtl"] .content-area .lesson-block:not(.supervised-card) .res-panel .res-item a { direction: rtl; text-align: right; }
html[dir="ltr"] .content-area .lesson-block:not(.supervised-card) .res-panel .res-item a { direction: ltr; text-align: left; }
html[dir="rtl"] .content-area .lesson-block:not(.supervised-card) .res-panel .res-item.visited .res-meta, html[dir="ltr"] .content-area .lesson-block:not(.supervised-card) .res-panel .res-item.visited .res-meta { padding-inline: 0; }
html[dir="rtl"] .content-area .lesson-block:not(.supervised-card) .res-panel[data-kind="lesson"] .res-meta, html[dir="ltr"] .content-area .lesson-block:not(.supervised-card) .res-panel[data-kind="lesson"] .res-meta { --sub-table-w: 135px; --sub-icon-w: 22px; --sub-gap: 3px; --sub-title-y: 2.7px; }
html[dir="rtl"] .content-area .lesson-block:not(.supervised-card) .res-panel[data-kind="lesson"] .res-item a, html[dir="ltr"] .content-area .lesson-block:not(.supervised-card) .res-panel[data-kind="lesson"] .res-item a { width: max-content; max-width: none; white-space: nowrap; overflow: visible; text-overflow: clip; }
html[dir="rtl"] .content-area .lesson-block:not(.supervised-card) .res-panel[data-kind="ex"] .res-meta { --sub-table-w: 162px; --sub-icon-w: 22px; --sub-gap: 3px; --sub-title-y: 2.7px; --sub-ar-x: 8px; transform: translateX(calc(-1 * var(--sub-ar-x))); }
html[dir="ltr"] .content-area .lesson-block:not(.supervised-card) .res-panel[data-kind="ex"] .res-meta { --sub-table-w: 165px; --sub-icon-w: 22px; --sub-gap: 3px; --sub-title-y: 2.7px; --sub-fr-x: 20px; transform: translateX(var(--sub-fr-x)); }
html[dir="rtl"] .content-area .lesson-block:not(.supervised-card) .res-panel[data-kind="vid"] .res-meta {
      --sub-table-w: 160px;
      --sub-icon-w: 22px;
      --sub-gap: 3px;
      --sub-title-y: 1px;
      --vid-table-w: 160px;
      --vid-ar-x: 0px;

      --sub-table-w: var(--vid-table-w);
      transform: translateX(calc(-1 * var(--vid-ar-x)));
    }
html[dir="ltr"] .content-area .lesson-block:not(.supervised-card) .res-panel[data-kind="vid"] .res-meta {
      --sub-table-w: 175px;
      --sub-icon-w: 22px;
      --sub-gap: 3px;
      --sub-title-y: 2px;
      --vid-table-w: 175px;
      --vid-fr-x: 12px;

      --sub-table-w: var(--vid-table-w);
      transform: translateX(var(--vid-fr-x));
    }
html[dir="rtl"] .content-area .lesson-block:not(.supervised-card) .res-panel[data-kind="quiz"] .res-meta, html[dir="ltr"] .content-area .lesson-block:not(.supervised-card) .res-panel[data-kind="quiz"] .res-meta { --sub-table-w: 85px; --sub-icon-w: 22px; --sub-gap: 2px; --sub-title-y: 2.7px; }
}

.content-area .lesson-block { contain: layout paint style; content-visibility: visible; contain-intrinsic-size: auto; }

.content-area .res-panel:not(.open) { content-visibility: hidden; contain: layout paint style; contain-intrinsic-size: 0 0; }

.content-area .res-panel.open { content-visibility: visible; contain: layout paint style; }

.content-area #math-terms-wrap > .term-card,
  .content-area #math-terms-wrap .lesson-block {
    content-visibility: visible !important;
    contain-intrinsic-size: auto !important;
  }

.content-area .res-panel { will-change: auto; }

.content-area .res-panel.open { will-change: height, opacity; }

@media (max-width: 720px), (hover: none), (pointer: coarse) {
.content-area .lesson-block, .content-area .res-item, .content-area .lesson-links .res-toggle, .content-area .hero-inline-btn { transition: background-color 0.14s ease, border-color 0.14s ease, color 0.14s ease, opacity 0.14s ease !important; }
.content-area .lesson-block:hover, .content-area .lesson-block:focus-within, .content-area .res-item:hover, .content-area .res-item:focus-within, .content-area .lesson-links .res-toggle:hover, .content-area .lesson-links .res-toggle:focus, .content-area .hero-inline-btn:hover { transform: none !important; }
.content-area .lesson-block:hover, .content-area .lesson-block:focus-within, .content-area .res-item:hover, .content-area .res-item:focus-within { box-shadow: var(--shadow-sm) !important; }
}

@media (prefers-reduced-motion: reduce) {
.content-area * { animation: none; transition: none; transform: none; }
.content-area .res-panel { height: auto; }
}

.content-area .res-item a::after { content: none !important; display: none !important; }

.content-area .res-meta,
  .content-area .supervised-res-meta { pointer-events: none !important; }

.content-area .res-meta a:not(.schoolep-hitbox-link),
  .content-area .supervised-res-meta a:not(.schoolep-hitbox-link) { pointer-events: auto !important; position: relative !important; z-index: 3 !important; }

.content-area .res-panel .res-item > a.schoolep-hitbox-link,
  .content-area .supervised-card .res-panel .supervised-res-item > a.schoolep-hitbox-link {
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: inherit !important;
    background: transparent !important;
    box-shadow: none !important;
    color: transparent !important;
    font-size: 0 !important;
    line-height: 0 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    -webkit-tap-highlight-color: transparent;
  }

.content-area .lesson-block.last-open-card {
    border-color: var(--card-bd) !important;
    box-shadow: var(--shadow-sm) !important;
    background: var(--surface) !important;
  }

.dark-mode .content-area .lesson-block.last-open-card {
    border-color: rgba(156, 39, 176, 0.18) !important;
    box-shadow: var(--shadow-sm) !important;
    background: #1e293b !important;
  }

.dark-mode .content-area .lesson-block.resource-opened-card .lesson-title .title-text,
  .dark-mode .content-area .lesson-block.resource-opened-card .supervised-label {
    color: #d8b4fe !important;
  }

.dark-mode .content-area .lesson-block.resource-opened-card .lesson-num,
  .dark-mode .content-area .lesson-block.resource-opened-card .supervised-num {
    border-color: rgba(168, 85, 247, 0.70) !important;
    color: #d8b4fe !important;
    background: rgba(168, 85, 247, 0.16) !important;
  }

.content-area .lesson-block:not(.resource-opened-card).visited-card .lesson-title .title-text,
  .content-area .lesson-block:not(.resource-opened-card).visited-card .supervised-label,
  .content-area .lesson-block:not(.resource-opened-card).last-open-card .lesson-title .title-text,
  .content-area .lesson-block:not(.resource-opened-card).last-open-card .supervised-label,
  .content-area .lesson-block.open:not(.resource-opened-card) .lesson-title .title-text,
  .content-area .lesson-block.open:not(.resource-opened-card) .supervised-label {
    color: var(--txt-900) !important;
    font-weight: var(--les-title-weight) !important;
  }

.content-area .lesson-block:not(.resource-opened-card).visited-card .lesson-num,
  .content-area .lesson-block:not(.resource-opened-card).visited-card .supervised-num,
  .content-area .lesson-block:not(.resource-opened-card).last-open-card .lesson-num,
  .content-area .lesson-block:not(.resource-opened-card).last-open-card .supervised-num {
    border-color: var(--accent) !important;
    color: var(--accent) !important;
    background: var(--bg-soft) !important;
  }

.dark-mode .content-area .lesson-block:not(.resource-opened-card).visited-card .lesson-title .title-text,
  .dark-mode .content-area .lesson-block:not(.resource-opened-card).visited-card .supervised-label,
  .dark-mode .content-area .lesson-block:not(.resource-opened-card).last-open-card .lesson-title .title-text,
  .dark-mode .content-area .lesson-block:not(.resource-opened-card).last-open-card .supervised-label,
  .dark-mode .content-area .lesson-block.open:not(.resource-opened-card) .lesson-title .title-text,
  .dark-mode .content-area .lesson-block.open:not(.resource-opened-card) .supervised-label {
    color: #f8fafc !important;
  }

.dark-mode .content-area .lesson-block.resource-opened-card .lesson-title .title-text,
  .dark-mode .content-area .lesson-block.resource-opened-card .supervised-label {
    color: #d8b4fe !important;
    font-weight: 900 !important;
  }

.content-area .lesson-links .res-toggle.kind-visited,
  .content-area .lesson-links .res-toggle.kind-visited:link,
  .content-area .lesson-links .res-toggle.kind-visited:visited,
  .content-area .lesson-links .res-toggle.last-open-kind,
  .content-area .lesson-links .res-toggle.last-open-kind:link,
  .content-area .lesson-links .res-toggle.last-open-kind:visited {
    background: var(--surface) !important;
    border-color: var(--card-bd) !important;
    box-shadow: none !important;
    color: var(--accent-600) !important;
    font-weight: 900 !important;
    transform: none !important;
  }

.content-area .lesson-links .res-toggle.kind-visited i,
  .content-area .lesson-links .res-toggle.last-open-kind i {
    color: var(--accent-600) !important;
  }

.dark-mode .content-area .lesson-links .res-toggle.kind-visited,
  .dark-mode .content-area .lesson-links .res-toggle.kind-visited:link,
  .dark-mode .content-area .lesson-links .res-toggle.kind-visited:visited,
  .dark-mode .content-area .lesson-links .res-toggle.last-open-kind,
  .dark-mode .content-area .lesson-links .res-toggle.last-open-kind:link,
  .dark-mode .content-area .lesson-links .res-toggle.last-open-kind:visited {
    background: #1e293b !important;
    border-color: rgba(156, 39, 176, 0.25) !important;
    box-shadow: none !important;
    color: #d8b4fe !important;
    font-weight: 900 !important;
    transform: none !important;
  }

.dark-mode .content-area .lesson-links .res-toggle.kind-visited i,
  .dark-mode .content-area .lesson-links .res-toggle.last-open-kind i {
    color: #d8b4fe !important;
  }

.content-area .lesson-links .res-toggle.kind-visited:hover,
  .content-area .lesson-links .res-toggle.kind-visited:focus,
  .content-area .lesson-links .res-toggle.last-open-kind:hover,
  .content-area .lesson-links .res-toggle.last-open-kind:focus {
    background: var(--accent) !important;
    border-color: var(--accent) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(156, 39, 176, 0.24) !important;
  }

.content-area .lesson-links .res-toggle.kind-visited:hover i,
  .content-area .lesson-links .res-toggle.kind-visited:focus i,
  .content-area .lesson-links .res-toggle.last-open-kind:hover i,
  .content-area .lesson-links .res-toggle.last-open-kind:focus i {
    color: #ffffff !important;
  }

.content-area .lesson-block.resource-opened-card.last-open-card,
  .content-area .lesson-block.last-open-card.resource-opened-card {
    border-color: var(--accent) !important;
    box-shadow:
      0 0 0 3px rgba(156, 39, 176, 0.22),
      0 0 22px rgba(156, 39, 176, 0.32),
      var(--shadow-accent) !important;
    background:
      linear-gradient(135deg, rgba(156, 39, 176, 0.08) 0%, rgba(156, 39, 176, 0.025) 100%),
      var(--surface) !important;
  }

.dark-mode .content-area .lesson-block.resource-opened-card.last-open-card,
  .dark-mode .content-area .lesson-block.last-open-card.resource-opened-card {
    border-color: var(--accent) !important;
    background:
      linear-gradient(135deg, rgba(168, 85, 247, 0.12) 0%, rgba(168, 85, 247, 0.04) 100%),
      #0f172a !important;
    box-shadow:
      0 0 0 3px rgba(168, 85, 247, 0.28),
      0 0 24px rgba(168, 85, 247, 0.30),
      var(--shadow-accent-strong) !important;
  }

.content-area .res-panel .res-item,
.content-area .supervised-card .res-panel .supervised-res-item {
  cursor: pointer;
}

.content-area .res-panel .res-item .res-meta,
.content-area .supervised-card .res-panel .supervised-res-meta {
  pointer-events: auto !important;
}

.content-area .res-panel .res-item a.res-link,
.content-area .res-panel .res-item a.quiz-link,
.content-area .res-panel .res-item a.video-link,
.content-area .supervised-card .res-panel .supervised-res-item a {
  position: relative;
  z-index: 6;
  pointer-events: auto !important;
}

.content-area .res-panel .res-item .pdf-inline-icon,
.content-area .res-panel .res-item i,
.content-area .supervised-card .res-panel .supervised-res-item .pdf-inline-icon,
.content-area .supervised-card .res-panel .supervised-res-item i {
  pointer-events: none !important;
}

.content-area .lesson-block.open,
  .content-area .lesson-block.m1-simple-breadcrumb-glow,
  .content-area .lesson-block.m1-simple-manual-glow {
    border-color: var(--accent) !important;
    box-shadow:
      0 0 0 3px rgba(156, 39, 176, 0.22),
      0 0 22px rgba(156, 39, 176, 0.30),
      var(--shadow-accent) !important;
    background:
      linear-gradient(135deg, rgba(156, 39, 176, 0.08) 0%, rgba(156, 39, 176, 0.025) 100%),
      var(--surface) !important;
  }

.dark-mode .content-area .lesson-block.open,
  .dark-mode .content-area .lesson-block.m1-simple-breadcrumb-glow,
  .dark-mode .content-area .lesson-block.m1-simple-manual-glow {
    border-color: var(--accent) !important;
    box-shadow:
      0 0 0 3px rgba(168, 85, 247, 0.28),
      0 0 24px rgba(168, 85, 247, 0.28),
      var(--shadow-accent-strong) !important;
  }

.content-area .lesson-block.visited-card:not(.open):not(.m1-simple-breadcrumb-glow):not(.m1-simple-manual-glow),
  .content-area .lesson-block.resource-opened-card:not(.open):not(.m1-simple-breadcrumb-glow):not(.m1-simple-manual-glow),
  .content-area .lesson-block.last-open-card:not(.open):not(.m1-simple-breadcrumb-glow):not(.m1-simple-manual-glow) {
    box-shadow: var(--shadow-sm) !important;
  }

.content-area .lesson-block.resource-opened-card .lesson-title .title-text,
  .content-area .lesson-block.resource-opened-card .supervised-label {
    color: var(--accent-600) !important;
    font-weight: 900 !important;
  }

.content-area .lesson-block.resource-opened-card .lesson-num,
  .content-area .lesson-block.resource-opened-card .supervised-num {
    border-color: rgba(106, 27, 154, 0.62) !important;
    color: var(--accent-600) !important;
    background: rgba(156, 39, 176, 0.12) !important;
  }

.content-area .lesson-links .res-toggle.kind-visited,
  .content-area .lesson-links .exam-toggle-btn.kind-visited {
    background: var(--surface) !important;
    border-color: var(--card-bd) !important;
    box-shadow: none !important;
    color: var(--accent-600) !important;
    font-weight: 900 !important;
    transform: none !important;
  }

.content-area .lesson-links .res-toggle.kind-visited i,
  .content-area .lesson-links .exam-toggle-btn.kind-visited i {
    color: var(--accent-600) !important;
  }

.dark-mode .content-area .lesson-block.resource-opened-card .lesson-title .title-text,
  .dark-mode .content-area .lesson-block.resource-opened-card .supervised-label,
  .dark-mode .content-area .lesson-links .res-toggle.kind-visited,
  .dark-mode .content-area .lesson-links .exam-toggle-btn.kind-visited,
  .dark-mode .content-area .lesson-links .res-toggle.kind-visited i,
  .dark-mode .content-area .lesson-links .exam-toggle-btn.kind-visited i {
    color: #d8b4fe !important;
  }

.content-area .lesson-links .res-toggle.kind-visited,
  .content-area .lesson-links .res-toggle.kind-visited:link,
  .content-area .lesson-links .res-toggle.kind-visited:visited,
  .content-area .lesson-links .exam-toggle-btn.kind-visited,
  .content-area .lesson-links .res-toggle.last-open-kind,
  .content-area .lesson-links .res-toggle.last-open-kind:link,
  .content-area .lesson-links .res-toggle.last-open-kind:visited,
  .content-area .lesson-links .exam-toggle-btn.last-open-kind {
    background: var(--accent) !important;
    border-color: var(--accent) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(156, 39, 176, 0.24) !important;
    font-weight: 900 !important;
    transform: none !important;
  }

.content-area .lesson-links .res-toggle.kind-visited i,
  .content-area .lesson-links .exam-toggle-btn.kind-visited i,
  .content-area .lesson-links .res-toggle.last-open-kind i,
  .content-area .lesson-links .exam-toggle-btn.last-open-kind i {
    color: #ffffff !important;
  }

.dark-mode .content-area .lesson-links .res-toggle.kind-visited,
  .dark-mode .content-area .lesson-links .res-toggle.kind-visited:link,
  .dark-mode .content-area .lesson-links .res-toggle.kind-visited:visited,
  .dark-mode .content-area .lesson-links .exam-toggle-btn.kind-visited,
  .dark-mode .content-area .lesson-links .res-toggle.last-open-kind,
  .dark-mode .content-area .lesson-links .res-toggle.last-open-kind:link,
  .dark-mode .content-area .lesson-links .res-toggle.last-open-kind:visited,
  .dark-mode .content-area .lesson-links .exam-toggle-btn.last-open-kind {
    background: var(--accent) !important;
    border-color: var(--accent) !important;
    color: #0f172a !important;
    box-shadow: 0 4px 12px rgba(216, 108, 255, 0.24) !important;
    font-weight: 900 !important;
    transform: none !important;
  }

.dark-mode .content-area .lesson-links .res-toggle.kind-visited i,
  .dark-mode .content-area .lesson-links .exam-toggle-btn.kind-visited i,
  .dark-mode .content-area .lesson-links .res-toggle.last-open-kind i,
  .dark-mode .content-area .lesson-links .exam-toggle-btn.last-open-kind i {
    color: #0f172a !important;
  }

html body .content-area .lesson-block.visited-card:not(.last-open-card):not(.open):not(:hover):not(:focus-within):not(.m1-simple-breadcrumb-glow):not(.m1-simple-manual-glow),
html body .content-area .lesson-block.resource-opened-card:not(.last-open-card):not(.open):not(:hover):not(:focus-within):not(.m1-simple-breadcrumb-glow):not(.m1-simple-manual-glow) {
  border-color: var(--card-bd) !important;
  box-shadow: var(--shadow-sm) !important;
  background: var(--surface) !important;
}

html.dark-mode body .content-area .lesson-block.visited-card:not(.last-open-card):not(.open):not(:hover):not(:focus-within):not(.m1-simple-breadcrumb-glow):not(.m1-simple-manual-glow),
html.dark-mode body .content-area .lesson-block.resource-opened-card:not(.last-open-card):not(.open):not(:hover):not(:focus-within):not(.m1-simple-breadcrumb-glow):not(.m1-simple-manual-glow) {
  border-color: rgba(156, 39, 176, 0.18) !important;
  box-shadow: var(--shadow-sm) !important;
  background: #1e293b !important;
}

html body .content-area .lesson-block:hover,
html body .content-area .lesson-block:focus-within,
html body .content-area .lesson-block.open,
html body .content-area .lesson-block.m1-simple-breadcrumb-glow,
html body .content-area .lesson-block.m1-simple-manual-glow {
  border-color: var(--accent) !important;
  box-shadow:
    0 0 0 3px rgba(156, 39, 176, 0.22),
    0 0 22px rgba(156, 39, 176, 0.30),
    var(--shadow-accent) !important;
  background:
    linear-gradient(135deg, rgba(156, 39, 176, 0.08) 0%, rgba(156, 39, 176, 0.025) 100%),
    var(--surface) !important;
}

html.dark-mode body .content-area .lesson-block:hover,
html.dark-mode body .content-area .lesson-block:focus-within,
html.dark-mode body .content-area .lesson-block.open,
html.dark-mode body .content-area .lesson-block.m1-simple-breadcrumb-glow,
html.dark-mode body .content-area .lesson-block.m1-simple-manual-glow {
  border-color: var(--accent) !important;
  box-shadow:
    0 0 0 3px rgba(168, 85, 247, 0.28),
    0 0 24px rgba(168, 85, 247, 0.28),
    var(--shadow-accent-strong) !important;
  background:
    linear-gradient(135deg, rgba(168, 85, 247, 0.12) 0%, rgba(168, 85, 247, 0.04) 100%),
    #0f172a !important;
}

html body .content-area .lesson-block.resource-opened-card.last-open-card,
html body .content-area .lesson-block.last-open-card.resource-opened-card {
  border-color: var(--accent) !important;
  box-shadow:
    0 0 0 3px rgba(156, 39, 176, 0.22),
    0 0 22px rgba(156, 39, 176, 0.32),
    var(--shadow-accent) !important;
  background:
    linear-gradient(135deg, rgba(156, 39, 176, 0.08) 0%, rgba(156, 39, 176, 0.025) 100%),
    var(--surface) !important;
}

html.dark-mode body .content-area .lesson-block.resource-opened-card.last-open-card,
html.dark-mode body .content-area .lesson-block.last-open-card.resource-opened-card {
  border-color: var(--accent) !important;
  box-shadow:
    0 0 0 3px rgba(168, 85, 247, 0.28),
    0 0 24px rgba(168, 85, 247, 0.30),
    var(--shadow-accent-strong) !important;
  background:
    linear-gradient(135deg, rgba(168, 85, 247, 0.12) 0%, rgba(168, 85, 247, 0.04) 100%),
    #0f172a !important;
}

.levels-sidebar i[class^="fa-"],
.levels-sidebar i[class*=" fa-"],
.levels-sidebar .fa,
.levels-sidebar .fas,
.levels-sidebar .far,
.levels-sidebar .fab,
.levels-sidebar .fa-solid,
.levels-sidebar .fa-regular,
.levels-sidebar .fa-brands {
  font-family: "Font Awesome 6 Free" !important;
  font-weight: 900 !important;
  font-style: normal !important;
  font-synthesis: none !important;
}

html body .content-area .lesson-links .res-toggle.kind-visited,
html body .content-area .lesson-links .res-toggle.kind-visited:link,
html body .content-area .lesson-links .res-toggle.kind-visited:visited,
html body .content-area .lesson-links .exam-toggle-btn.kind-visited,
html body .content-area .lesson-links .res-toggle.last-open-kind,
html body .content-area .lesson-links .res-toggle.last-open-kind:link,
html body .content-area .lesson-links .res-toggle.last-open-kind:visited,
html body .content-area .lesson-links .exam-toggle-btn.last-open-kind,
html body .content-area .lesson-links .res-toggle[aria-expanded="true"],
html body .content-area .lesson-links .exam-toggle-btn[aria-expanded="true"] {
  background: var(--surface) !important;
  background-image: none !important;
  border-color: var(--card-bd) !important;
  color: var(--txt-700) !important;
  box-shadow: none !important;
  font-weight: 700 !important;
  text-shadow: none !important;
  filter: none !important;
  transform: none !important;
}

html body .content-area .lesson-links .res-toggle.kind-visited i,
html body .content-area .lesson-links .exam-toggle-btn.kind-visited i,
html body .content-area .lesson-links .res-toggle.last-open-kind i,
html body .content-area .lesson-links .exam-toggle-btn.last-open-kind i,
html body .content-area .lesson-links .res-toggle[aria-expanded="true"] i,
html body .content-area .lesson-links .exam-toggle-btn[aria-expanded="true"] i {
  color: var(--accent) !important;
  text-shadow: none !important;
  filter: none !important;
}

html body .content-area .lesson-links .res-toggle:hover,
html body .content-area .lesson-links .res-toggle:focus,
html body .content-area .lesson-links .res-toggle:active,
html body .content-area .lesson-links .exam-toggle-btn:hover,
html body .content-area .lesson-links .exam-toggle-btn:focus,
html body .content-area .lesson-links .exam-toggle-btn:active {
  background:
    linear-gradient(135deg, rgba(156, 39, 176, 0.16) 0%, rgba(255, 255, 255, 0.96) 58%, rgba(156, 39, 176, 0.07) 100%) !important;
  border-color: var(--accent) !important;
  color: var(--accent-600) !important;
  box-shadow:
    inset 0 -3px 0 rgba(156, 39, 176, 0.85),
    0 0 0 2px rgba(156, 39, 176, 0.12),
    0 6px 14px rgba(156, 39, 176, 0.12) !important;
  outline: none !important;
  font-weight: 900 !important;
  transform: translateY(-1px) !important;
}

html body .content-area .lesson-links .res-toggle:hover i,
html body .content-area .lesson-links .res-toggle:focus i,
html body .content-area .lesson-links .res-toggle:active i,
html body .content-area .lesson-links .exam-toggle-btn:hover i,
html body .content-area .lesson-links .exam-toggle-btn:focus i,
html body .content-area .lesson-links .exam-toggle-btn:active i {
  color: var(--accent-600) !important;
}

html.dark-mode body .content-area .lesson-links .res-toggle.kind-visited,
html.dark-mode body .content-area .lesson-links .res-toggle.kind-visited:link,
html.dark-mode body .content-area .lesson-links .res-toggle.kind-visited:visited,
html.dark-mode body .content-area .lesson-links .exam-toggle-btn.kind-visited,
html.dark-mode body .content-area .lesson-links .res-toggle.last-open-kind,
html.dark-mode body .content-area .lesson-links .res-toggle.last-open-kind:link,
html.dark-mode body .content-area .lesson-links .res-toggle.last-open-kind:visited,
html.dark-mode body .content-area .lesson-links .exam-toggle-btn.last-open-kind,
html.dark-mode body .content-area .lesson-links .res-toggle[aria-expanded="true"],
html.dark-mode body .content-area .lesson-links .exam-toggle-btn[aria-expanded="true"],
.dark-mode .content-area .lesson-links .res-toggle.kind-visited,
.dark-mode .content-area .lesson-links .res-toggle.kind-visited:link,
.dark-mode .content-area .lesson-links .res-toggle.kind-visited:visited,
.dark-mode .content-area .lesson-links .exam-toggle-btn.kind-visited,
.dark-mode .content-area .lesson-links .res-toggle.last-open-kind,
.dark-mode .content-area .lesson-links .res-toggle.last-open-kind:link,
.dark-mode .content-area .lesson-links .res-toggle.last-open-kind:visited,
.dark-mode .content-area .lesson-links .exam-toggle-btn.last-open-kind,
.dark-mode .content-area .lesson-links .res-toggle[aria-expanded="true"],
.dark-mode .content-area .lesson-links .exam-toggle-btn[aria-expanded="true"] {
  background: #1e293b !important;
  background-image: none !important;
  border-color: rgba(156, 39, 176, 0.25) !important;
  color: #cbd5e1 !important;
  box-shadow: none !important;
  font-weight: 700 !important;
  text-shadow: none !important;
  filter: none !important;
  transform: none !important;
}

html.dark-mode body .content-area .lesson-links .res-toggle.kind-visited i,
html.dark-mode body .content-area .lesson-links .exam-toggle-btn.kind-visited i,
html.dark-mode body .content-area .lesson-links .res-toggle.last-open-kind i,
html.dark-mode body .content-area .lesson-links .exam-toggle-btn.last-open-kind i,
html.dark-mode body .content-area .lesson-links .res-toggle[aria-expanded="true"] i,
html.dark-mode body .content-area .lesson-links .exam-toggle-btn[aria-expanded="true"] i,
.dark-mode .content-area .lesson-links .res-toggle.kind-visited i,
.dark-mode .content-area .lesson-links .exam-toggle-btn.kind-visited i,
.dark-mode .content-area .lesson-links .res-toggle.last-open-kind i,
.dark-mode .content-area .lesson-links .exam-toggle-btn.last-open-kind i,
.dark-mode .content-area .lesson-links .res-toggle[aria-expanded="true"] i,
.dark-mode .content-area .lesson-links .exam-toggle-btn[aria-expanded="true"] i {
  color: var(--accent) !important;
  text-shadow: none !important;
  filter: none !important;
}

html.dark-mode body .content-area .lesson-links .res-toggle:hover,
html.dark-mode body .content-area .lesson-links .res-toggle:focus,
html.dark-mode body .content-area .lesson-links .res-toggle:active,
html.dark-mode body .content-area .lesson-links .exam-toggle-btn:hover,
html.dark-mode body .content-area .lesson-links .exam-toggle-btn:focus,
html.dark-mode body .content-area .lesson-links .exam-toggle-btn:active,
.dark-mode .content-area .lesson-links .res-toggle:hover,
.dark-mode .content-area .lesson-links .res-toggle:focus,
.dark-mode .content-area .lesson-links .res-toggle:active,
.dark-mode .content-area .lesson-links .exam-toggle-btn:hover,
.dark-mode .content-area .lesson-links .exam-toggle-btn:focus,
.dark-mode .content-area .lesson-links .exam-toggle-btn:active {
  background:
    linear-gradient(135deg, rgba(168, 85, 247, 0.18) 0%, rgba(15, 23, 42, 0.96) 58%, rgba(168, 85, 247, 0.09) 100%) !important;
  border-color: var(--accent) !important;
  color: #d8b4fe !important;
  box-shadow:
    inset 0 -3px 0 rgba(168, 85, 247, 0.82),
    0 0 0 2px rgba(168, 85, 247, 0.18),
    0 8px 18px rgba(0, 0, 0, 0.22) !important;
  font-weight: 900 !important;
  transform: translateY(-1px) !important;
}

html.dark-mode body .content-area .lesson-links .res-toggle:hover i,
html.dark-mode body .content-area .lesson-links .res-toggle:focus i,
html.dark-mode body .content-area .lesson-links .res-toggle:active i,
html.dark-mode body .content-area .lesson-links .exam-toggle-btn:hover i,
html.dark-mode body .content-area .lesson-links .exam-toggle-btn:focus i,
html.dark-mode body .content-area .lesson-links .exam-toggle-btn:active i,
.dark-mode .content-area .lesson-links .res-toggle:hover i,
.dark-mode .content-area .lesson-links .res-toggle:focus i,
.dark-mode .content-area .lesson-links .res-toggle:active i,
.dark-mode .content-area .lesson-links .exam-toggle-btn:hover i,
.dark-mode .content-area .lesson-links .exam-toggle-btn:focus i,
.dark-mode .content-area .lesson-links .exam-toggle-btn:active i {
  color: #d8b4fe !important;
}

html body .content-area .lesson-links .res-toggle.kind-visited,
html body .content-area .lesson-links .res-toggle.kind-visited:link,
html body .content-area .lesson-links .res-toggle.kind-visited:visited,
html body .content-area .lesson-links .exam-toggle-btn.kind-visited,
html body .content-area .lesson-links .res-toggle.last-open-kind,
html body .content-area .lesson-links .res-toggle.last-open-kind:link,
html body .content-area .lesson-links .res-toggle.last-open-kind:visited,
html body .content-area .lesson-links .exam-toggle-btn.last-open-kind {
  background: var(--surface) !important;
  background-image: none !important;
  border-color: var(--card-bd) !important;
  color: var(--accent-600) !important;
  box-shadow: none !important;
  font-weight: 900 !important;
  transform: none !important;
}

html.dark-mode body .content-area .lesson-links .res-toggle.kind-visited,
html.dark-mode body .content-area .lesson-links .res-toggle.kind-visited:link,
html.dark-mode body .content-area .lesson-links .res-toggle.kind-visited:visited,
html.dark-mode body .content-area .lesson-links .exam-toggle-btn.kind-visited,
html.dark-mode body .content-area .lesson-links .res-toggle.last-open-kind,
html.dark-mode body .content-area .lesson-links .res-toggle.last-open-kind:link,
html.dark-mode body .content-area .lesson-links .res-toggle.last-open-kind:visited,
html.dark-mode body .content-area .lesson-links .exam-toggle-btn.last-open-kind,
body.dark-mode .content-area .lesson-links .res-toggle.kind-visited,
body.dark-mode .content-area .lesson-links .exam-toggle-btn.kind-visited,
body.dark-mode .content-area .lesson-links .res-toggle.last-open-kind,
body.dark-mode .content-area .lesson-links .exam-toggle-btn.last-open-kind {
  background: #1e293b !important;
  background-image: none !important;
  border-color: rgba(156, 39, 176, 0.25) !important;
  color: #d8b4fe !important;
  box-shadow: none !important;
  font-weight: 900 !important;
  transform: none !important;
}

.content-area .lesson-block.open:not(.last-open-card):not(.m1-simple-manual-glow):not(.m1-simple-breadcrumb-glow):not(:hover):not(:focus-within),
  .content-area .lesson-block.resource-opened-card:not(.last-open-card):not(.m1-simple-manual-glow):not(.m1-simple-breadcrumb-glow):not(:hover):not(:focus-within),
  .content-area .lesson-block.visited-card:not(.last-open-card):not(.m1-simple-manual-glow):not(.m1-simple-breadcrumb-glow):not(:hover):not(:focus-within) {
    border-color: var(--card-bd) !important;
    box-shadow: var(--shadow-sm) !important;
    background: var(--surface) !important;
  }

.dark-mode .content-area .lesson-block.open:not(.last-open-card):not(.m1-simple-manual-glow):not(.m1-simple-breadcrumb-glow):not(:hover):not(:focus-within),
  .dark-mode .content-area .lesson-block.resource-opened-card:not(.last-open-card):not(.m1-simple-manual-glow):not(.m1-simple-breadcrumb-glow):not(:hover):not(:focus-within),
  .dark-mode .content-area .lesson-block.visited-card:not(.last-open-card):not(.m1-simple-manual-glow):not(.m1-simple-breadcrumb-glow):not(:hover):not(:focus-within) {
    border-color: rgba(156, 39, 176, 0.18) !important;
    box-shadow: var(--shadow-sm) !important;
    background: #1e293b !important;
  }

.content-area .lesson-block.resource-opened-card.last-open-card,
  .content-area .lesson-block.last-open-card.resource-opened-card,
  .content-area .lesson-block.m1-simple-manual-glow,
  .content-area .lesson-block.m1-simple-breadcrumb-glow {
    border-color: var(--accent) !important;
    box-shadow:
      0 0 0 3px rgba(156, 39, 176, 0.22),
      0 0 22px rgba(156, 39, 176, 0.32),
      var(--shadow-accent) !important;
    background:
      linear-gradient(135deg, rgba(156, 39, 176, 0.08) 0%, rgba(156, 39, 176, 0.025) 100%),
      var(--surface) !important;
  }

.dark-mode .content-area .lesson-block.resource-opened-card.last-open-card,
  .dark-mode .content-area .lesson-block.last-open-card.resource-opened-card,
  .dark-mode .content-area .lesson-block.m1-simple-manual-glow,
  .dark-mode .content-area .lesson-block.m1-simple-breadcrumb-glow {
    border-color: var(--accent) !important;
    background:
      linear-gradient(135deg, rgba(168, 85, 247, 0.12) 0%, rgba(168, 85, 247, 0.04) 100%),
      #0f172a !important;
    box-shadow:
      0 0 0 3px rgba(168, 85, 247, 0.28),
      0 0 24px rgba(168, 85, 247, 0.30),
      var(--shadow-accent-strong) !important;
  }

html body .content-area .lesson-block.open:not(.last-open-card):not(.m1-simple-manual-glow):not(.m1-simple-breadcrumb-glow):not(:hover):not(:focus-within),
html body .content-area .lesson-block.resource-opened-card:not(.last-open-card):not(.m1-simple-manual-glow):not(.m1-simple-breadcrumb-glow):not(:hover):not(:focus-within),
html body .content-area .lesson-block.visited-card:not(.last-open-card):not(.m1-simple-manual-glow):not(.m1-simple-breadcrumb-glow):not(:hover):not(:focus-within) {
  border-color: var(--card-bd) !important;
  box-shadow: var(--shadow-sm) !important;
  background: var(--surface) !important;
}

html.dark-mode body .content-area .lesson-block.open:not(.last-open-card):not(.m1-simple-manual-glow):not(.m1-simple-breadcrumb-glow):not(:hover):not(:focus-within),
html.dark-mode body .content-area .lesson-block.resource-opened-card:not(.last-open-card):not(.m1-simple-manual-glow):not(.m1-simple-breadcrumb-glow):not(:hover):not(:focus-within),
html.dark-mode body .content-area .lesson-block.visited-card:not(.last-open-card):not(.m1-simple-manual-glow):not(.m1-simple-breadcrumb-glow):not(:hover):not(:focus-within) {
  border-color: rgba(156, 39, 176, 0.18) !important;
  box-shadow: var(--shadow-sm) !important;
  background: #1e293b !important;
}

html body .content-area .lesson-block:hover,
html body .content-area .lesson-block:focus-within,
html body .content-area .lesson-block.m1-simple-manual-glow,
html body .content-area .lesson-block.m1-simple-breadcrumb-glow,
html body .content-area .lesson-block.last-open-card {
  border-color: var(--accent) !important;
  box-shadow:
    0 0 0 3px rgba(156, 39, 176, 0.22),
    0 0 22px rgba(156, 39, 176, 0.32),
    var(--shadow-accent) !important;
  background:
    linear-gradient(135deg, rgba(156, 39, 176, 0.08) 0%, rgba(156, 39, 176, 0.025) 100%),
    var(--surface) !important;
}

html.dark-mode body .content-area .lesson-block:hover,
html.dark-mode body .content-area .lesson-block:focus-within,
html.dark-mode body .content-area .lesson-block.m1-simple-manual-glow,
html.dark-mode body .content-area .lesson-block.m1-simple-breadcrumb-glow,
html.dark-mode body .content-area .lesson-block.last-open-card {
  border-color: var(--accent) !important;
  box-shadow:
    0 0 0 3px rgba(168, 85, 247, 0.28),
    0 0 24px rgba(168, 85, 247, 0.30),
    var(--shadow-accent-strong) !important;
  background:
    linear-gradient(135deg, rgba(168, 85, 247, 0.12) 0%, rgba(168, 85, 247, 0.04) 100%),
    #0f172a !important;
}

html body .content-area .lesson-block.open:not(.last-open-card):not(.m1-simple-manual-glow):not(.m1-simple-breadcrumb-glow):hover,
html body .content-area .lesson-block.open:not(.last-open-card):not(.m1-simple-manual-glow):not(.m1-simple-breadcrumb-glow):focus-within,
html body .content-area .lesson-block.resource-opened-card:not(.last-open-card):not(.m1-simple-manual-glow):not(.m1-simple-breadcrumb-glow):hover,
html body .content-area .lesson-block.resource-opened-card:not(.last-open-card):not(.m1-simple-manual-glow):not(.m1-simple-breadcrumb-glow):focus-within,
html body .content-area .lesson-block.visited-card:not(.last-open-card):not(.m1-simple-manual-glow):not(.m1-simple-breadcrumb-glow):hover,
html body .content-area .lesson-block.visited-card:not(.last-open-card):not(.m1-simple-manual-glow):not(.m1-simple-breadcrumb-glow):focus-within {
  border-color: var(--accent) !important;
  box-shadow:
    0 0 0 3px rgba(156, 39, 176, 0.22),
    0 0 22px rgba(156, 39, 176, 0.30),
    var(--shadow-accent) !important;
  background:
    linear-gradient(135deg, rgba(156, 39, 176, 0.08) 0%, rgba(156, 39, 176, 0.025) 100%),
    var(--surface) !important;
}

html.dark-mode body .content-area .lesson-block.open:not(.last-open-card):not(.m1-simple-manual-glow):not(.m1-simple-breadcrumb-glow):hover,
html.dark-mode body .content-area .lesson-block.open:not(.last-open-card):not(.m1-simple-manual-glow):not(.m1-simple-breadcrumb-glow):focus-within,
html.dark-mode body .content-area .lesson-block.resource-opened-card:not(.last-open-card):not(.m1-simple-manual-glow):not(.m1-simple-breadcrumb-glow):hover,
html.dark-mode body .content-area .lesson-block.resource-opened-card:not(.last-open-card):not(.m1-simple-manual-glow):not(.m1-simple-breadcrumb-glow):focus-within,
html.dark-mode body .content-area .lesson-block.visited-card:not(.last-open-card):not(.m1-simple-manual-glow):not(.m1-simple-breadcrumb-glow):hover,
html.dark-mode body .content-area .lesson-block.visited-card:not(.last-open-card):not(.m1-simple-manual-glow):not(.m1-simple-breadcrumb-glow):focus-within {
  border-color: var(--accent) !important;
  box-shadow:
    0 0 0 3px rgba(168, 85, 247, 0.28),
    0 0 24px rgba(168, 85, 247, 0.30),
    var(--shadow-accent-strong) !important;
  background:
    linear-gradient(135deg, rgba(168, 85, 247, 0.12) 0%, rgba(168, 85, 247, 0.04) 100%),
    #0f172a !important;
}

html body .content-area .lesson-block.m1-simple-manual-glow:not(.last-open-card):not(:hover):not(:focus-within),
html body .content-area .lesson-block.m1-simple-breadcrumb-glow:not(.last-open-card):not(:hover):not(:focus-within) {
  border-color: var(--card-bd) !important;
  box-shadow: var(--shadow-sm) !important;
  background: var(--surface) !important;
}

html.dark-mode body .content-area .lesson-block.m1-simple-manual-glow:not(.last-open-card):not(:hover):not(:focus-within),
html.dark-mode body .content-area .lesson-block.m1-simple-breadcrumb-glow:not(.last-open-card):not(:hover):not(:focus-within) {
  border-color: rgba(156, 39, 176, 0.18) !important;
  box-shadow: var(--shadow-sm) !important;
  background: #1e293b !important;
}

html body .content-area .lesson-links .res-toggle.kind-visited,
html body .content-area .lesson-links .res-toggle.kind-visited:link,
html body .content-area .lesson-links .res-toggle.kind-visited:visited,
html body .content-area .lesson-links .exam-toggle-btn.kind-visited,
html body .content-area .lesson-links .res-toggle.last-open-kind,
html body .content-area .lesson-links .res-toggle.last-open-kind:link,
html body .content-area .lesson-links .res-toggle.last-open-kind:visited,
html body .content-area .lesson-links .exam-toggle-btn.last-open-kind {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(156, 39, 176, 0.24) !important;
  font-weight: 900 !important;
  transform: none !important;
}

html body .content-area .lesson-links .res-toggle.kind-visited i,
html body .content-area .lesson-links .exam-toggle-btn.kind-visited i,
html body .content-area .lesson-links .res-toggle.last-open-kind i,
html body .content-area .lesson-links .exam-toggle-btn.last-open-kind i {
  color: #ffffff !important;
}

html.dark-mode body .content-area .lesson-links .res-toggle.kind-visited,
html.dark-mode body .content-area .lesson-links .res-toggle.kind-visited:link,
html.dark-mode body .content-area .lesson-links .res-toggle.kind-visited:visited,
html.dark-mode body .content-area .lesson-links .exam-toggle-btn.kind-visited,
html.dark-mode body .content-area .lesson-links .res-toggle.last-open-kind,
html.dark-mode body .content-area .lesson-links .res-toggle.last-open-kind:link,
html.dark-mode body .content-area .lesson-links .res-toggle.last-open-kind:visited,
html.dark-mode body .content-area .lesson-links .exam-toggle-btn.last-open-kind {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #0f172a !important;
  box-shadow: 0 4px 12px rgba(216, 108, 255, 0.24) !important;
  font-weight: 900 !important;
  transform: none !important;
}

html.dark-mode body .content-area .lesson-links .res-toggle.kind-visited i,
html.dark-mode body .content-area .lesson-links .exam-toggle-btn.kind-visited i,
html.dark-mode body .content-area .lesson-links .res-toggle.last-open-kind i,
html.dark-mode body .content-area .lesson-links .exam-toggle-btn.last-open-kind i {
  color: #0f172a !important;
}

html body .content-area .lesson-block.resource-opened-card .lesson-title .title-text,
html body .content-area .lesson-block.resource-opened-card .supervised-label,
html body .content-area .lesson-block.visited-card .lesson-title .title-text,
html body .content-area .lesson-block.visited-card .supervised-label {
  color: var(--accent-600) !important;
  font-weight: 900 !important;
}

html body .content-area .lesson-block.resource-opened-card .lesson-num,
html body .content-area .lesson-block.resource-opened-card .supervised-num,
html body .content-area .lesson-block.visited-card .lesson-num,
html body .content-area .lesson-block.visited-card .supervised-num {
  border-color: rgba(106, 27, 154, 0.62) !important;
  color: var(--accent-600) !important;
  background: rgba(156, 39, 176, 0.12) !important;
}

html body .content-area .lesson-block.resource-opened-card:not(.m1-real-last-resource-card):not(.last-open-card):not(.open):not(:hover):not(:focus-within),
html body .content-area .lesson-block.visited-card:not(.m1-real-last-resource-card):not(.last-open-card):not(.open):not(:hover):not(:focus-within),
html body .content-area .lesson-block.m1-simple-manual-glow:not(.m1-real-last-resource-card):not(.last-open-card):not(:hover):not(:focus-within),
html body .content-area .lesson-block.m1-simple-breadcrumb-glow:not(.m1-real-last-resource-card):not(.last-open-card):not(:hover):not(:focus-within) {
  border-color: var(--card-bd) !important;
  box-shadow: var(--shadow-sm) !important;
  background: var(--surface) !important;
}

html.dark-mode body .content-area .lesson-block.resource-opened-card:not(.m1-real-last-resource-card):not(.last-open-card):not(.open):not(:hover):not(:focus-within),
html.dark-mode body .content-area .lesson-block.visited-card:not(.m1-real-last-resource-card):not(.last-open-card):not(.open):not(:hover):not(:focus-within),
html.dark-mode body .content-area .lesson-block.m1-simple-manual-glow:not(.m1-real-last-resource-card):not(.last-open-card):not(:hover):not(:focus-within),
html.dark-mode body .content-area .lesson-block.m1-simple-breadcrumb-glow:not(.m1-real-last-resource-card):not(.last-open-card):not(:hover):not(:focus-within) {
  border-color: rgba(156, 39, 176, 0.18) !important;
  box-shadow: var(--shadow-sm) !important;
  background: #1e293b !important;
}

html body .content-area .lesson-block:hover,
html body .content-area .lesson-block:focus-within,
html body .content-area .lesson-block.open {
  border-color: var(--accent) !important;
  box-shadow:
    0 0 0 3px rgba(156, 39, 176, 0.22),
    0 0 22px rgba(156, 39, 176, 0.30),
    var(--shadow-accent) !important;
  background:
    linear-gradient(135deg, rgba(156, 39, 176, 0.08) 0%, rgba(156, 39, 176, 0.025) 100%),
    var(--surface) !important;
}

html.dark-mode body .content-area .lesson-block:hover,
html.dark-mode body .content-area .lesson-block:focus-within,
html.dark-mode body .content-area .lesson-block.open {
  border-color: var(--accent) !important;
  box-shadow:
    0 0 0 3px rgba(168, 85, 247, 0.28),
    0 0 24px rgba(168, 85, 247, 0.28),
    var(--shadow-accent-strong) !important;
  background:
    linear-gradient(135deg, rgba(168, 85, 247, 0.12) 0%, rgba(168, 85, 247, 0.04) 100%),
    #0f172a !important;
}

html body .content-area .lesson-block.m1-real-last-resource-card,
html body .content-area .lesson-block.resource-opened-card.last-open-card,
html body .content-area .lesson-block.last-open-card.resource-opened-card {
  border-color: var(--accent) !important;
  box-shadow:
    0 0 0 3px rgba(156, 39, 176, 0.22),
    0 0 22px rgba(156, 39, 176, 0.32),
    var(--shadow-accent) !important;
  background:
    linear-gradient(135deg, rgba(156, 39, 176, 0.08) 0%, rgba(156, 39, 176, 0.025) 100%),
    var(--surface) !important;
}

html.dark-mode body .content-area .lesson-block.m1-real-last-resource-card,
html.dark-mode body .content-area .lesson-block.resource-opened-card.last-open-card,
html.dark-mode body .content-area .lesson-block.last-open-card.resource-opened-card {
  border-color: var(--accent) !important;
  box-shadow:
    0 0 0 3px rgba(168, 85, 247, 0.28),
    0 0 24px rgba(168, 85, 247, 0.30),
    var(--shadow-accent-strong) !important;
  background:
    linear-gradient(135deg, rgba(168, 85, 247, 0.12) 0%, rgba(168, 85, 247, 0.04) 100%),
    #0f172a !important;
}

html body .content-area .lesson-links .res-toggle.kind-visited,
html body .content-area .lesson-links .res-toggle.kind-visited:link,
html body .content-area .lesson-links .res-toggle.kind-visited:visited,
html body .content-area .lesson-links .exam-toggle-btn.kind-visited,
html body .content-area .lesson-links .res-toggle.last-open-kind,
html body .content-area .lesson-links .res-toggle.last-open-kind:link,
html body .content-area .lesson-links .res-toggle.last-open-kind:visited,
html body .content-area .lesson-links .exam-toggle-btn.last-open-kind {
  background: var(--surface) !important;
  background-image: none !important;
  border-color: var(--card-bd) !important;
  box-shadow: none !important;
  color: var(--accent-600) !important;
  font-weight: 900 !important;
  transform: none !important;
}

html body .content-area .lesson-links .res-toggle.kind-visited i,
html body .content-area .lesson-links .exam-toggle-btn.kind-visited i,
html body .content-area .lesson-links .res-toggle.last-open-kind i,
html body .content-area .lesson-links .exam-toggle-btn.last-open-kind i {
  color: var(--accent-600) !important;
}

html.dark-mode body .content-area .lesson-links .res-toggle.kind-visited,
html.dark-mode body .content-area .lesson-links .res-toggle.kind-visited:link,
html.dark-mode body .content-area .lesson-links .res-toggle.kind-visited:visited,
html.dark-mode body .content-area .lesson-links .exam-toggle-btn.kind-visited,
html.dark-mode body .content-area .lesson-links .res-toggle.last-open-kind,
html.dark-mode body .content-area .lesson-links .res-toggle.last-open-kind:link,
html.dark-mode body .content-area .lesson-links .res-toggle.last-open-kind:visited,
html.dark-mode body .content-area .lesson-links .exam-toggle-btn.last-open-kind,
body.dark-mode .content-area .lesson-links .res-toggle.kind-visited,
body.dark-mode .content-area .lesson-links .exam-toggle-btn.kind-visited,
body.dark-mode .content-area .lesson-links .res-toggle.last-open-kind,
body.dark-mode .content-area .lesson-links .exam-toggle-btn.last-open-kind {
  background: #1e293b !important;
  background-image: none !important;
  border-color: rgba(156, 39, 176, 0.25) !important;
  box-shadow: none !important;
  color: #d8b4fe !important;
  font-weight: 900 !important;
  transform: none !important;
}

html.dark-mode body .content-area .lesson-links .res-toggle.kind-visited i,
html.dark-mode body .content-area .lesson-links .exam-toggle-btn.kind-visited i,
html.dark-mode body .content-area .lesson-links .res-toggle.last-open-kind i,
html.dark-mode body .content-area .lesson-links .exam-toggle-btn.last-open-kind i,
body.dark-mode .content-area .lesson-links .res-toggle.kind-visited i,
body.dark-mode .content-area .lesson-links .exam-toggle-btn.kind-visited i,
body.dark-mode .content-area .lesson-links .res-toggle.last-open-kind i,
body.dark-mode .content-area .lesson-links .exam-toggle-btn.last-open-kind i {
  color: #d8b4fe !important;
}

html body .content-area .lesson-links .res-toggle.kind-visited:hover,
html body .content-area .lesson-links .res-toggle.kind-visited:focus,
html body .content-area .lesson-links .exam-toggle-btn.kind-visited:hover,
html body .content-area .lesson-links .exam-toggle-btn.kind-visited:focus,
html body .content-area .lesson-links .res-toggle.last-open-kind:hover,
html body .content-area .lesson-links .res-toggle.last-open-kind:focus,
html body .content-area .lesson-links .exam-toggle-btn.last-open-kind:hover,
html body .content-area .lesson-links .exam-toggle-btn.last-open-kind:focus {
  background:
    linear-gradient(135deg, rgba(156, 39, 176, 0.16) 0%, rgba(255, 255, 255, 0.96) 58%, rgba(156, 39, 176, 0.07) 100%) !important;
  border-color: var(--accent) !important;
  color: var(--accent-600) !important;
  box-shadow:
    inset 0 -3px 0 rgba(156, 39, 176, 0.85),
    0 0 0 2px rgba(156, 39, 176, 0.12),
    0 6px 14px rgba(156, 39, 176, 0.12) !important;
  outline: none !important;
  transform: translateY(-1px) !important;
}

html body .content-area .lesson-links .res-toggle.kind-visited:hover i,
html body .content-area .lesson-links .res-toggle.kind-visited:focus i,
html body .content-area .lesson-links .exam-toggle-btn.kind-visited:hover i,
html body .content-area .lesson-links .exam-toggle-btn.kind-visited:focus i,
html body .content-area .lesson-links .res-toggle.last-open-kind:hover i,
html body .content-area .lesson-links .res-toggle.last-open-kind:focus i,
html body .content-area .lesson-links .exam-toggle-btn.last-open-kind:hover i,
html body .content-area .lesson-links .exam-toggle-btn.last-open-kind:focus i {
  color: var(--accent-600) !important;
}

html.dark-mode body .content-area .lesson-links .res-toggle.kind-visited:hover,
html.dark-mode body .content-area .lesson-links .res-toggle.kind-visited:focus,
html.dark-mode body .content-area .lesson-links .exam-toggle-btn.kind-visited:hover,
html.dark-mode body .content-area .lesson-links .exam-toggle-btn.kind-visited:focus,
html.dark-mode body .content-area .lesson-links .res-toggle.last-open-kind:hover,
html.dark-mode body .content-area .lesson-links .res-toggle.last-open-kind:focus,
html.dark-mode body .content-area .lesson-links .exam-toggle-btn.last-open-kind:hover,
html.dark-mode body .content-area .lesson-links .exam-toggle-btn.last-open-kind:focus,
body.dark-mode .content-area .lesson-links .res-toggle.kind-visited:hover,
body.dark-mode .content-area .lesson-links .res-toggle.kind-visited:focus,
body.dark-mode .content-area .lesson-links .exam-toggle-btn.kind-visited:hover,
body.dark-mode .content-area .lesson-links .exam-toggle-btn.kind-visited:focus,
body.dark-mode .content-area .lesson-links .res-toggle.last-open-kind:hover,
body.dark-mode .content-area .lesson-links .res-toggle.last-open-kind:focus,
body.dark-mode .content-area .lesson-links .exam-toggle-btn.last-open-kind:hover,
body.dark-mode .content-area .lesson-links .exam-toggle-btn.last-open-kind:focus {
  background:
    linear-gradient(135deg, rgba(168, 85, 247, 0.18) 0%, rgba(15, 23, 42, 0.96) 58%, rgba(168, 85, 247, 0.09) 100%) !important;
  border-color: var(--accent) !important;
  color: #d8b4fe !important;
  box-shadow:
    inset 0 -3px 0 rgba(168, 85, 247, 0.82),
    0 0 0 2px rgba(168, 85, 247, 0.18),
    0 8px 18px rgba(0, 0, 0, 0.22) !important;
  outline: none !important;
  font-weight: 900 !important;
  transform: translateY(-1px) !important;
}

html.dark-mode body .content-area .lesson-links .res-toggle.kind-visited:hover i,
html.dark-mode body .content-area .lesson-links .res-toggle.kind-visited:focus i,
html.dark-mode body .content-area .lesson-links .exam-toggle-btn.kind-visited:hover i,
html.dark-mode body .content-area .lesson-links .exam-toggle-btn.kind-visited:focus i,
html.dark-mode body .content-area .lesson-links .res-toggle.last-open-kind:hover i,
html.dark-mode body .content-area .lesson-links .res-toggle.last-open-kind:focus i,
html.dark-mode body .content-area .lesson-links .exam-toggle-btn.last-open-kind:hover i,
html.dark-mode body .content-area .lesson-links .exam-toggle-btn.last-open-kind:focus i,
body.dark-mode .content-area .lesson-links .res-toggle.kind-visited:hover i,
body.dark-mode .content-area .lesson-links .res-toggle.kind-visited:focus i,
body.dark-mode .content-area .lesson-links .exam-toggle-btn.kind-visited:hover i,
body.dark-mode .content-area .lesson-links .exam-toggle-btn.kind-visited:focus i,
body.dark-mode .content-area .lesson-links .res-toggle.last-open-kind:hover i,
body.dark-mode .content-area .lesson-links .res-toggle.last-open-kind:focus i,
body.dark-mode .content-area .lesson-links .exam-toggle-btn.last-open-kind:hover i,
body.dark-mode .content-area .lesson-links .exam-toggle-btn.last-open-kind:focus i {
  color: #d8b4fe !important;
}

html body .content-area .lesson-links .res-toggle.last-open-kind,
html body .content-area .lesson-links .res-toggle.last-open-kind:link,
html body .content-area .lesson-links .res-toggle.last-open-kind:visited,
html body .content-area .lesson-links .exam-toggle-btn.last-open-kind {
  background:
    linear-gradient(135deg, rgba(156, 39, 176, 0.16) 0%, rgba(255, 255, 255, 0.96) 58%, rgba(156, 39, 176, 0.07) 100%) !important;
  border-color: var(--accent) !important;
  color: var(--accent-600) !important;
  box-shadow:
    inset 0 -3px 0 rgba(156, 39, 176, 0.85),
    0 0 0 2px rgba(156, 39, 176, 0.12),
    0 6px 14px rgba(156, 39, 176, 0.12) !important;
  outline: none !important;
  font-weight: 900 !important;
  transform: none !important;
}

html body .content-area .lesson-links .res-toggle.last-open-kind i,
html body .content-area .lesson-links .exam-toggle-btn.last-open-kind i {
  color: var(--accent-600) !important;
}

html.dark-mode body .content-area .lesson-links .res-toggle.last-open-kind,
html.dark-mode body .content-area .lesson-links .res-toggle.last-open-kind:link,
html.dark-mode body .content-area .lesson-links .res-toggle.last-open-kind:visited,
html.dark-mode body .content-area .lesson-links .exam-toggle-btn.last-open-kind,
body.dark-mode .content-area .lesson-links .res-toggle.last-open-kind,
body.dark-mode .content-area .lesson-links .exam-toggle-btn.last-open-kind {
  background:
    linear-gradient(135deg, rgba(168, 85, 247, 0.18) 0%, rgba(15, 23, 42, 0.96) 58%, rgba(168, 85, 247, 0.09) 100%) !important;
  border-color: var(--accent) !important;
  color: #d8b4fe !important;
  box-shadow:
    inset 0 -3px 0 rgba(168, 85, 247, 0.82),
    0 0 0 2px rgba(168, 85, 247, 0.18),
    0 8px 18px rgba(0, 0, 0, 0.22) !important;
  outline: none !important;
  font-weight: 900 !important;
  transform: none !important;
}

html.dark-mode body .content-area .lesson-links .res-toggle.last-open-kind i,
html.dark-mode body .content-area .lesson-links .exam-toggle-btn.last-open-kind i,
body.dark-mode .content-area .lesson-links .res-toggle.last-open-kind i,
body.dark-mode .content-area .lesson-links .exam-toggle-btn.last-open-kind i {
  color: #d8b4fe !important;
}

html body .content-area {
  --open-kind-corner: rgba(106,27,154,.78);
}

html.dark-mode body .content-area,
body.dark-mode .content-area {
  --open-kind-corner: rgba(216,180,254,.88);
}

html body .content-area .lesson-links .res-toggle.kind-visited,
html body .content-area .lesson-links .res-toggle.last-open-kind,
html body .content-area .lesson-links .exam-toggle-btn.kind-visited,
html body .content-area .lesson-links .exam-toggle-btn.last-open-kind {
  position: relative !important;
  overflow: hidden !important;
}

html body .content-area .lesson-links .res-toggle.kind-visited::after,
html body .content-area .lesson-links .res-toggle.last-open-kind::after,
html body .content-area .lesson-links .exam-toggle-btn.kind-visited::after,
html body .content-area .lesson-links .exam-toggle-btn.last-open-kind::after {
  content: "";
  position: absolute;
  top: 0;
  width: 0;
  height: 0;
  pointer-events: none;
  z-index: 3;
  opacity: .72;
}

html[dir="rtl"] body .content-area .lesson-links .res-toggle.kind-visited::after,
html[dir="rtl"] body .content-area .lesson-links .res-toggle.last-open-kind::after,
html[dir="rtl"] body .content-area .lesson-links .exam-toggle-btn.kind-visited::after,
html[dir="rtl"] body .content-area .lesson-links .exam-toggle-btn.last-open-kind::after {
  left: 0;
  right: auto;
  border-top: 22px solid var(--open-kind-corner);
  border-right: 22px solid transparent;
}

html[dir="ltr"] body .content-area .lesson-links .res-toggle.kind-visited::after,
html[dir="ltr"] body .content-area .lesson-links .res-toggle.last-open-kind::after,
html[dir="ltr"] body .content-area .lesson-links .exam-toggle-btn.kind-visited::after,
html[dir="ltr"] body .content-area .lesson-links .exam-toggle-btn.last-open-kind::after {
  right: 0;
  left: auto;
  border-top: 22px solid var(--open-kind-corner);
  border-left: 22px solid transparent;
}

html body .content-area .lesson-links .res-toggle.last-open-kind::after,
html body .content-area .lesson-links .exam-toggle-btn.last-open-kind::after {
  opacity: 1;
}

html[dir="rtl"] body .content-area .lesson-links .res-toggle.last-open-kind::after,
html[dir="rtl"] body .content-area .lesson-links .exam-toggle-btn.last-open-kind::after {
  border-top-width: 27px;
  border-right-width: 27px;
}

html[dir="ltr"] body .content-area .lesson-links .res-toggle.last-open-kind::after,
html[dir="ltr"] body .content-area .lesson-links .exam-toggle-btn.last-open-kind::after {
  border-top-width: 27px;
  border-left-width: 27px;
}

@media (max-width: 575.98px) {
html[dir="rtl"] body .content-area .lesson-links .res-toggle.kind-visited::after,
  html[dir="rtl"] body .content-area .lesson-links .exam-toggle-btn.kind-visited::after {
    border-top-width: 18px;
    border-right-width: 18px;
  }
html[dir="ltr"] body .content-area .lesson-links .res-toggle.kind-visited::after,
  html[dir="ltr"] body .content-area .lesson-links .exam-toggle-btn.kind-visited::after {
    border-top-width: 18px;
    border-left-width: 18px;
  }
html[dir="rtl"] body .content-area .lesson-links .res-toggle.last-open-kind::after,
  html[dir="rtl"] body .content-area .lesson-links .exam-toggle-btn.last-open-kind::after {
    border-top-width: 23px;
    border-right-width: 23px;
  }
html[dir="ltr"] body .content-area .lesson-links .res-toggle.last-open-kind::after,
  html[dir="ltr"] body .content-area .lesson-links .exam-toggle-btn.last-open-kind::after {
    border-top-width: 23px;
    border-left-width: 23px;
  }
}

.content-area .sp-hero #page-title {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 12px;
  max-width: 100%;
}

.content-area .sp-hero #page-title > .schoolep-subject-hero-title-icon {
  position: static !important;
  top: auto !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: auto;
  height: auto;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0;
  background: transparent;
  color: inherit !important;
  font-size: 1em !important;
  line-height: 1 !important;
  box-shadow: none;
}

.content-area .sp-hero #page-title > .schoolep-subject-hero-title-text {
  min-width: 0;
  overflow-wrap: anywhere;
}

@media (max-width:720px) {
.content-area .sp-hero #page-title { gap: 9px; }
.content-area .sp-hero #page-title > .schoolep-subject-hero-title-icon {
    flex-basis: auto;
    width: auto;
    height: auto;
    border-radius: 0;
    font-size: 1em !important;
  }
}

#page-title,[id$="-hero-title"]{display:flex!important;align-items:center!important;justify-content:center!important;gap:.48em!important}

.schoolep-subject-hero-title-icon{display:inline-flex!important;align-items:center!important;justify-content:center!important;flex:0 0 auto!important;line-height:1!important;margin:0!important}

/* =====================================================================
   MOBILE SUBJECT HERO — COMPACT LEVEL 3 LAYOUT

   Purpose:
   - Keep the existing instructional paragraph and supervised button.
   - Keep the desktop hero unchanged.
   - Use a short level label on mobile: 1AP, 1APIC, TC, 1Bac, 2Bac.
   - Bring the subject icon directly beside the title.
   - Reduce mobile height so semester cards appear earlier.
   ===================================================================== */

:root {
  /* Mobile breakpoint */
  --subject-hero-mobile-breakpoint: 720px;

  /* Hero box dimensions */
  --subject-hero-mobile-padding-block: 10px;
  --subject-hero-mobile-padding-inline: 12px;
  --subject-hero-mobile-content-gap: 7px;
  --subject-hero-mobile-margin-bottom: 12px;
  --subject-hero-mobile-border-radius: 14px;

  /* Title controls */
  --subject-hero-mobile-title-size-fr: clamp(15.5px, 4.35vw, 19px);
  --subject-hero-mobile-title-size-ar: clamp(15px, 4.25vw, 18.5px);
  --subject-hero-mobile-title-line-height-fr: 1.20;
  --subject-hero-mobile-title-line-height-ar: 1.30;
  --subject-hero-mobile-title-weight: 900;

  /* Icon controls */
  --subject-hero-mobile-icon-size: 1.08em;
  --subject-hero-mobile-icon-title-gap: 0.34em;
  --subject-hero-mobile-icon-y: -0.25px;

  /* Description controls */
  --subject-hero-mobile-description-size-fr: clamp(12.5px, 3.45vw, 14px);
  --subject-hero-mobile-description-size-ar: clamp(12.5px, 3.55vw, 14px);
  --subject-hero-mobile-description-line-height-fr: 1.35;
  --subject-hero-mobile-description-line-height-ar: 1.48;
  --subject-hero-mobile-description-weight: 500;

  /* Supervised button controls */
  --subject-hero-mobile-button-padding-block: 4px;
  --subject-hero-mobile-button-padding-inline: 10px;
  --subject-hero-mobile-button-border-width: 1.5px;
  --subject-hero-mobile-button-font-size: 0.94em;
}

/* Desktop uses the original complete title. */
.content-area .sp-hero .schoolep-subject-hero-title-text {
  display: inline;
  min-width: 0;
}

@media (max-width: 720px) {
  /* ---------------------------------------------------------------
     Compact mobile hero box
     --------------------------------------------------------------- */
  .content-area .sp-hero {
    display: grid;
    place-items: center;
    gap: var(--subject-hero-mobile-content-gap);

    width: 100%;
    min-width: 0;
    min-height: 0;

    margin: 0 0 var(--subject-hero-mobile-margin-bottom);
    padding:
      var(--subject-hero-mobile-padding-block)
      var(--subject-hero-mobile-padding-inline);

    border-radius: var(--subject-hero-mobile-border-radius);
    text-align: center;
  }

  /* ---------------------------------------------------------------
     Title row: icon + short title
     --------------------------------------------------------------- */
  .content-area .sp-hero h2,
  .content-area .sp-hero #page-title {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--subject-hero-mobile-icon-title-gap);

    width: fit-content;
    max-width: 100%;
    min-width: 0;

    margin: 0;
    padding: 0;

    font-weight: var(--subject-hero-mobile-title-weight);
    text-align: center;
  }

  html[lang="fr"] .content-area .sp-hero h2,
  html[lang="fr"] .content-area .sp-hero #page-title {
    font-size: var(--subject-hero-mobile-title-size-fr);
    line-height: var(--subject-hero-mobile-title-line-height-fr);
  }

  html[lang="ar"] .content-area .sp-hero h2,
  html[lang="ar"] .content-area .sp-hero #page-title {
    font-size: var(--subject-hero-mobile-title-size-ar);
    line-height: var(--subject-hero-mobile-title-line-height-ar);
  }

  /* ---------------------------------------------------------------
     Hero icon: remove the large isolated square and keep it beside title
     --------------------------------------------------------------- */
  .content-area .sp-hero h2 > i,
  .content-area .sp-hero h2 > .mdi,
  .content-area .sp-hero h2 > .schoolep-icon,
  .content-area .sp-hero h2 > .schoolep-subject-hero-title-icon,
  .content-area .sp-hero h2 > [data-schoolep-static-icon],
  .content-area .sp-hero #page-title > i,
  .content-area .sp-hero #page-title > .mdi,
  .content-area .sp-hero #page-title > .schoolep-icon,
  .content-area .sp-hero #page-title > .schoolep-subject-hero-title-icon,
  .content-area .sp-hero #page-title > [data-schoolep-static-icon] {
    position: static;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 var(--subject-hero-mobile-icon-size);

    width: var(--subject-hero-mobile-icon-size);
    height: var(--subject-hero-mobile-icon-size);
    min-width: var(--subject-hero-mobile-icon-size);

    margin: 0;
    padding: 0;

    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;

    color: var(--accent);
    font-size: var(--subject-hero-mobile-icon-size);
    line-height: 1;

    transform: translateY(var(--subject-hero-mobile-icon-y));
  }

  /* ---------------------------------------------------------------
     Keep the complete old instructional data, but make it compact
     --------------------------------------------------------------- */
  .content-area .sp-hero p,
  .content-area .sp-hero #hero-desc {
    display: block;
    width: 100%;
    max-width: 100%;

    margin: 0;
    padding: 0;

    font-weight: var(--subject-hero-mobile-description-weight);
    text-align: center;
  }

  html[lang="fr"] .content-area .sp-hero p,
  html[lang="fr"] .content-area .sp-hero #hero-desc {
    font-size: var(--subject-hero-mobile-description-size-fr);
    line-height: var(--subject-hero-mobile-description-line-height-fr);
  }

  html[lang="ar"] .content-area .sp-hero p,
  html[lang="ar"] .content-area .sp-hero #hero-desc {
    font-size: var(--subject-hero-mobile-description-size-ar);
    line-height: var(--subject-hero-mobile-description-line-height-ar);
  }

  /* ---------------------------------------------------------------
     Preserve the supervised button in the old sentence
     --------------------------------------------------------------- */
  .content-area .hero-inline-btn {
    --hero-btn-px: var(--subject-hero-mobile-button-padding-inline);
    --hero-btn-pt: var(--subject-hero-mobile-button-padding-block);
    --hero-btn-pb: var(--subject-hero-mobile-button-padding-block);

    padding:
      var(--subject-hero-mobile-button-padding-block)
      var(--subject-hero-mobile-button-padding-inline);

    border-width: var(--subject-hero-mobile-button-border-width);
    font-size: var(--subject-hero-mobile-button-font-size);
    line-height: 1.05;
    vertical-align: middle;
  }
}