/* app.css — extracted from public/app.html inline <style> blocks (Phase 1).
   Source order preserved so the cascade is byte-identical. Bump ?v= in
   app.html AND CACHE_VERSION in sw.js on every edit here. */

/* ===== inline style block 1 ===== */

    /* ── Bundled web fonts (self-hosted so we don't ping fonts.googleapis.com on every
         page load — keeps the LMS air-gap-friendly and avoids the third-party CDN
         dependency). Files live in public/fonts/; the browser only fetches a .woff2
         when an element actually uses the family, and `font-display: swap` paints
         the system fallback immediately so first-render isn't blocked. ─────────── */
    @font-face { font-family: 'Inter';            src: url('fonts/inter-regular.woff2')           format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
    @font-face { font-family: 'Inter';            src: url('fonts/inter-700.woff2')               format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
    @font-face { font-family: 'Lora';             src: url('fonts/lora-regular.woff2')            format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
    @font-face { font-family: 'Lora';             src: url('fonts/lora-700.woff2')                format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
    @font-face { font-family: 'Merriweather';     src: url('fonts/merriweather-regular.woff2')    format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
    @font-face { font-family: 'Merriweather';     src: url('fonts/merriweather-700.woff2')        format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
    @font-face { font-family: 'Playfair Display'; src: url('fonts/playfair-display-regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
    @font-face { font-family: 'Montserrat';       src: url('fonts/montserrat-regular.woff2')      format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
    @font-face { font-family: 'Bebas Neue';       src: url('fonts/bebas-neue-regular.woff2')      format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
    @font-face { font-family: 'Oswald';           src: url('fonts/oswald-regular.woff2')          format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
    @font-face { font-family: 'Caveat';           src: url('fonts/caveat-regular.woff2')          format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
    @font-face { font-family: 'Patrick Hand';     src: url('fonts/patrick-hand-regular.woff2')    format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
    @font-face { font-family: 'JetBrains Mono';   src: url('fonts/jetbrains-mono-regular.woff2')  format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }

    :root {
      /* color-scheme tells the browser to render native form widgets
         (select dropdowns, date pickers, scrollbars) in dark mode so the
         default chrome doesn't clash with our custom dark theme. */
      color-scheme: dark;
      --bg: #050b14;
      --bg-soft: #08111f;
      --panel: rgba(13, 25, 43, 0.78);
      --panel-strong: rgba(16, 31, 53, 0.92);
      --panel-hover: rgba(25, 45, 73, 0.92);
      --line: rgba(134, 190, 255, 0.16);
      --line-strong: rgba(142, 214, 255, 0.32);
      --text: #f5f8ff;
      --muted: #96a5ba;
      --muted-2: #6d7b90;
      --teal: #36f1e1;
      --cyan: #61b9ff;
      --blue: #2f6fff;
      --green: #4de8a7;
      --gold: #ffc85a;
      --danger: #ff5370;
      --shadow: 0 24px 70px rgba(0, 0, 0, 0.4);
      --radius-lg: 24px;
      --radius-md: 18px;
      --radius-sm: 12px;
      --sidebar: 292px;
      --rightbar: 392px;
      --topbar: 74px;
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }

    /* Form controls — dark-themed native widgets. The closed select chip uses
       a custom chevron + matches our other inputs. The dropdown POPOVER itself
       is rendered by the OS chrome — color-scheme: dark above tells the
       browser to use dark mode there, and explicit option styles improve
       contrast on Chromium-based browsers (Firefox respects them too). */
    select {
      background: rgba(0, 0, 0, 0.35);
      color: var(--text);
      border: 1px solid var(--line);
      border-radius: 10px;
      padding: 9px 32px 9px 12px;
      font-family: inherit;
      font-size: 14px;
      outline: 0;
      appearance: none;
      -webkit-appearance: none;
      background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2396a5ba' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 12px center;
      cursor: pointer;
      transition: border-color 0.15s, box-shadow 0.2s;
    }
    select:focus {
      border-color: var(--teal);
      box-shadow: 0 0 0 3px rgba(54, 241, 225, 0.15);
    }
    select:disabled { opacity: 0.55; cursor: not-allowed; }
    select option {
      background: #0a1828;
      color: var(--text);
      padding: 6px 10px;
    }
    select option:checked,
    select option:hover {
      background: rgba(54, 241, 225, 0.18);
      color: #ffffff;
    }

    @keyframes softPulse {
      0%, 100% { filter: drop-shadow(0 0 0 rgba(54,241,225,0)); transform: translateY(0) scale(1); }
      50% { filter: drop-shadow(0 0 18px rgba(54,241,225,0.38)); transform: translateY(-1px) scale(1.015); }
    }

    @keyframes gleamSweep {
      0% { transform: translateX(-135%) skewX(-18deg); opacity: 0; }
      18% { opacity: .72; }
      48% { opacity: .36; }
      100% { transform: translateX(165%) skewX(-18deg); opacity: 0; }
    }

    @keyframes floatLift {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-7px); }
    }

    @keyframes progressShimmer {
      0% { background-position: 0% 50%; }
      100% { background-position: 220% 50%; }
    }

    @keyframes badgeBounce {
      0%, 100% { transform: translateY(0) scale(1); }
      45% { transform: translateY(-3px) scale(1.08); }
      70% { transform: translateY(1px) scale(.98); }
    }

    @keyframes ambientHeroGlow {
      0%, 100% { box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,0.08); }
      50% { box-shadow: var(--shadow), 0 0 42px rgba(54,241,225,0.12), inset 0 1px 0 rgba(255,255,255,0.08); }
    }

    @keyframes statusPing {
      0%, 100% { box-shadow: 0 0 0 0 rgba(54,241,225,0.34); opacity: .88; }
      50% { box-shadow: 0 0 0 7px rgba(54,241,225,0); opacity: 1; }
    }

    @keyframes toastGlow {
      0%, 100% { box-shadow: 0 24px 80px rgba(0,0,0,0.38), 0 0 0 rgba(54,241,225,0); }
      50% { box-shadow: 0 24px 80px rgba(0,0,0,0.38), 0 0 34px rgba(54,241,225,0.18); }
    }

    @keyframes modalBloom {
      0% { opacity: .35; transform: scale(.985); }
      100% { opacity: 1; transform: scale(1); }
    }

    * { box-sizing: border-box; }

    /* The [hidden] HTML attribute should mean "do not show". Browsers ship
       it as display:none, but any class-level display rule (e.g.
       .nav-item { display:flex }) silently overrides it. Force the issue. */
    [hidden] { display: none !important; }

    html { scroll-behavior: smooth; }

    /* Skip link — first focusable element on the page. Hidden until keyboard
       focus surfaces it. Lets screen-reader / keyboard-only users jump past
       the sidebar + topbar straight to the main content area. */
    .skip-link {
      position: fixed; top: -100px; left: 12px; z-index: 99999;
      padding: 10px 16px; border-radius: 8px;
      background: var(--teal, #36f1e1); color: #03101c;
      font-weight: 700; text-decoration: none; font-size: 14px;
      box-shadow: 0 8px 24px rgba(0,0,0,0.4);
      transition: top 120ms ease;
    }
    .skip-link:focus { top: 12px; outline: 2px solid #fff; outline-offset: 2px; }

    body {
      margin: 0;
      min-height: 100vh;
      color: var(--text);
      background:
        radial-gradient(circle at 22% 12%, rgba(54, 241, 225, 0.13), transparent 28%),
        radial-gradient(circle at 70% 8%, rgba(47, 111, 255, 0.16), transparent 24%),
        radial-gradient(circle at 82% 80%, rgba(95, 185, 255, 0.09), transparent 28%),
        linear-gradient(180deg, #040811 0%, #07111e 48%, #040810 100%);
      overflow-x: hidden;
    }

    body::before {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
      background:
        linear-gradient(rgba(255,255,255,0.018) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.015) 1px, transparent 1px);
      background-size: 48px 48px;
      mask-image: linear-gradient(to bottom, rgba(0,0,0,0.65), transparent 78%);
      z-index: 0;
    }

    button, input, select { font: inherit; }
    button { cursor: pointer; color: inherit; }

    .app-shell {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: var(--sidebar) minmax(620px, 1fr) var(--rightbar);
      min-height: 100vh;
    }

    .sidebar {
      position: sticky;
      top: 0;
      height: 100vh;
      padding: 26px 20px 0;
      border-right: 1px solid var(--line);
      background: linear-gradient(180deg, rgba(6, 15, 28, 0.94), rgba(6, 13, 24, 0.78));
      backdrop-filter: blur(24px);
      display: flex;
      flex-direction: column;
      min-height: 0;
    }
    .sidebar > .brand { flex: 0 0 auto; }
    .sidebar-scroll {
      flex: 1 1 auto;
      overflow-y: auto;
      overflow-x: hidden;
      min-height: 0;
      margin-right: -8px; /* hide scrollbar gutter aesthetically */
      padding-right: 8px;
      padding-bottom: 12px;
      scrollbar-width: thin;
      scrollbar-color: rgba(95,185,255,0.18) transparent;
    }
    .sidebar-scroll::-webkit-scrollbar { width: 6px; }
    .sidebar-scroll::-webkit-scrollbar-track { background: transparent; }
    .sidebar-scroll::-webkit-scrollbar-thumb { background: rgba(95,185,255,0.18); border-radius: 999px; }
    .sidebar-scroll::-webkit-scrollbar-thumb:hover { background: rgba(95,185,255,0.32); }
    .sidebar-scroll {
      mask-image: linear-gradient(to bottom, transparent 0, black 8px, black calc(100% - 18px), transparent 100%);
      -webkit-mask-image: linear-gradient(to bottom, transparent 0, black 8px, black calc(100% - 18px), transparent 100%);
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 15px;
      height: 54px;
      margin-bottom: 28px;
      padding-left: 6px;
    }

    .logo-mark {
      width: 46px;
      height: 42px;
      display: grid;
      place-items: center;
      border-radius: 12px;
      background: linear-gradient(135deg, var(--teal), var(--blue));
      color: #03101c;
      font-size: 11px;
      font-weight: 920;
      letter-spacing: 0.04em;
      filter: drop-shadow(0 12px 24px rgba(54, 241, 225, 0.25));
      animation: softPulse 4.8s ease-in-out infinite;
    }

    .brand-title {
      line-height: 1;
      letter-spacing: 0.38em;
      font-size: 13px;
      font-weight: 780;
    }

    .brand-subtitle {
      margin-top: 8px;
      color: var(--muted);
      font-size: 10px;
      letter-spacing: 0.42em;
      font-weight: 650;
    }

    .nav-section { margin: 8px 0 24px; }

    .nav-label {
      padding: 18px 12px 8px;
      color: var(--muted-2);
      font-size: 12px;
      letter-spacing: 0.15em;
      font-weight: 800;
    }

    .nav-item {
      display: flex;
      align-items: center;
      gap: 14px;
      width: 100%;
      min-height: 46px;
      margin: 4px 0;
      padding: 0 14px;
      border: 1px solid transparent;
      border-radius: 13px;
      color: #c9d6e8;
      background: transparent;
      text-align: left;
      transition: 180ms ease;
    }

    .nav-item svg { opacity: 0.88; }
    /* Course Builder launcher — a colorful, animated "assembling blocks" mark so
       the most complex tool stands out among the monochrome line-icon nav. */
    .cb-launch-ico { display:inline-flex; width:18px; height:18px; flex:0 0 18px;
      filter: drop-shadow(0 1px 3px rgba(43,111,255,.45)); transition: filter 180ms ease; }
    .cb-launch-ico svg { width:18px; height:18px; opacity:1; overflow:visible; }
    .cb-launch-ico .cbk-tr { transform-box:fill-box; transform-origin:center;
      animation: cbLaunchPulse 2.4s ease-in-out infinite; }
    .nav-item:hover .cb-launch-ico { filter: drop-shadow(0 1px 5px rgba(46,230,214,.6)); }
    @keyframes cbLaunchPulse { 0%,100%{ transform:scale(1); opacity:.9 } 50%{ transform:scale(1.22); opacity:1 } }
    @media (prefers-reduced-motion: reduce) { .cb-launch-ico .cbk-tr { animation:none !important } }

    .nav-item:hover {
      color: var(--text);
      background: rgba(255, 255, 255, 0.045);
      border-color: rgba(255, 255, 255, 0.06);
      transform: translateX(2px);
    }

    .nav-item.active {
      color: #fff;
      border-color: rgba(97, 185, 255, 0.34);
      background: linear-gradient(135deg, rgba(97, 185, 255, 0.19), rgba(54, 241, 225, 0.08));
      box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04), 0 12px 30px rgba(0,0,0,0.22);
    }

    .nav-spacer { flex: 1; }

    .invite-card {
      flex: 0 0 auto;
      margin: 14px -20px 0;
      padding: 16px 20px 18px;
      border: 0;
      border-top: 1px solid var(--line);
      border-radius: 0;
      background:
        radial-gradient(circle at 80% 15%, rgba(54, 241, 225, 0.08), transparent 38%),
        rgba(8, 17, 31, 0.92);
      backdrop-filter: blur(8px);
    }

    .invite-card p {
      margin: 0 0 12px;
      color: #c7d3e6;
      line-height: 1.4;
      font-size: 13px;
    }

    .outline-btn,
    .ghost-btn,
    .primary-btn,
    .icon-btn {
      border: 0;
      border-radius: 13px;
      color: var(--text);
      transition: 180ms ease;
    }

    .primary-btn {
      position: relative;
      overflow: hidden;
      padding: 13px 22px;
      background: linear-gradient(135deg, var(--teal), var(--blue));
      color: #03101c;
      font-weight: 820;
      box-shadow: 0 18px 36px rgba(54, 241, 225, 0.2);
    }

    .primary-btn::after {
      content: "";
      position: absolute;
      inset: -24% auto -24% -42%;
      width: 34%;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.55), transparent);
      pointer-events: none;
      transform: translateX(-135%) skewX(-18deg);
      animation: gleamSweep 4.2s ease-in-out infinite;
    }

    .primary-btn:hover { transform: translateY(-2px); filter: brightness(1.08); }

    .outline-btn {
      padding: 12px 20px;
      border: 1px solid rgba(172, 206, 255, 0.28);
      background: rgba(8, 17, 31, 0.55);
      color: #e9f2ff;
      font-weight: 720;
    }

    .outline-btn:hover { background: rgba(255,255,255,0.07); border-color: rgba(97,185,255,0.44); }

    .ghost-btn {
      padding: 9px 12px;
      background: rgba(255,255,255,0.04);
      color: #9fb0c6;
    }

    .ghost-btn:hover { color: #fff; background: rgba(255,255,255,0.08); }

    /* ═══════════════════════════════════════════════════════════════════════
       btn-quest — premium "this is the fun part" CTA used in hero cards to
       link into Knowledge Quest. Stacks: violet gradient base + breathing
       outer glow + animated conic-gradient ring + sweeping shimmer + idle
       sword wiggle + floating sparkles. Designed to make a student WANT to
       click it.
       ═══════════════════════════════════════════════════════════════════════ */
    .btn-quest {
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;          /* center icon + text horizontally */
      gap: 10px;
      padding: 14px 28px;
      border: 0;
      border-radius: 14px;
      background: linear-gradient(135deg, #5b3aff 0%, #7c5cff 50%, #be6cff 100%);
      color: #fff;
      font-weight: 800;
      font-size: 15px;
      letter-spacing: 0.02em;
      cursor: pointer;
      overflow: hidden;
      isolation: isolate;
      box-shadow:
        0 8px 24px rgba(124,92,255,0.45),
        0 0 0 0 rgba(124,92,255,0);
      animation: btnQuestBreathe 2.6s ease-in-out infinite;
      transition: transform 200ms ease, box-shadow 200ms ease;
    }
    @keyframes btnQuestBreathe {
      0%,100% {
        box-shadow:
          0 8px 24px rgba(124,92,255,0.45),
          0 0 0 0 rgba(124,92,255,0);
      }
      50% {
        box-shadow:
          0 12px 32px rgba(124,92,255,0.65),
          0 0 36px 6px rgba(0,230,210,0.30),
          0 0 24px 4px rgba(190,108,255,0.30);
      }
    }
    .btn-quest:hover {
      transform: translateY(-2px) scale(1.02);
      box-shadow:
        0 14px 36px rgba(124,92,255,0.75),
        0 0 48px 8px rgba(0,230,210,0.45),
        0 0 32px 4px rgba(190,108,255,0.45);
    }
    .btn-quest:active { transform: translateY(0) scale(0.99); }

    /* Animated conic-gradient ring around the button. Mask trick keeps it as
       a thin orbiting border; constant-speed rotation reads as energy without
       being distracting. */
    .btn-quest::before {
      content: '';
      position: absolute; inset: -2px;
      border-radius: 16px;
      padding: 2px;
      background: conic-gradient(from 0deg,
        #00E6D2 0%, #7C5CFF 25%, #BE6CFF 50%, #5B8BFF 75%, #00E6D2 100%);
      -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
      -webkit-mask-composite: xor;
              mask-composite: exclude;
      animation: btnQuestSpin 4s linear infinite;
      pointer-events: none; z-index: -1;
    }
    @keyframes btnQuestSpin { to { transform: rotate(360deg); } }

    /* Internal shimmer sweep — light bar passes across the button face every
       few seconds, like sunlight on a glass surface. */
    .btn-quest::after {
      content: '';
      position: absolute; inset: 0;
      background: linear-gradient(120deg,
        transparent 30%,
        rgba(255,255,255,0.42) 50%,
        transparent 70%);
      transform: translateX(-130%);
      animation: btnQuestGlint 4.5s ease-in-out infinite;
      pointer-events: none; z-index: 0;
    }
    @keyframes btnQuestGlint {
      0%, 60%, 100% { transform: translateX(-130%); }
      82%           { transform: translateX(130%); }
    }

    /* Sword icon wiggle — small idle motion so the button feels alive */
    .btn-quest .quest-icon {
      display: inline-block;
      animation: questIconWiggle 2.4s ease-in-out infinite;
      filter: drop-shadow(0 0 8px rgba(255,184,77,0.65));
      font-size: 17px;
    }
    @keyframes questIconWiggle {
      0%, 100% { transform: rotate(-4deg) scale(1); }
      50%      { transform: rotate(8deg)  scale(1.12); }
    }

    /* Floating sparkle particles inside the button. Three colors stagger to
       feel like a chest aura without overwhelming the small surface. */
    .btn-quest .quest-spark {
      position: absolute; pointer-events: none;
      width: 4px; height: 4px; border-radius: 50%;
      background: #FFE7A3;
      box-shadow: 0 0 8px #FFE7A3, 0 0 14px rgba(255,184,77,.7);
      opacity: 0;
      animation: questSparkRise 3.2s ease-in-out infinite;
      z-index: 1;
    }
    .btn-quest .quest-spark.s1 { left: 12%; bottom: 14%; animation-delay: 0s; }
    .btn-quest .quest-spark.s2 { left: 86%; bottom: 18%; animation-delay: 1.4s;
      background: #00E6D2; box-shadow: 0 0 8px #00E6D2, 0 0 14px rgba(0,230,210,.7); }
    .btn-quest .quest-spark.s3 { left: 50%; bottom: 10%; animation-delay: 0.8s;
      background: #BE6CFF; box-shadow: 0 0 8px #BE6CFF, 0 0 14px rgba(190,108,255,.7); }
    @keyframes questSparkRise {
      0%   { transform: translateY(0)    scale(0.6); opacity: 0; }
      20%  { opacity: 1; }
      80%  { opacity: 1; }
      100% { transform: translateY(-34px) scale(1);   opacity: 0; }
    }

    /* In a flex hero-actions row, fill the available width like the other
       hero buttons do, so the button looks unified with Continue Learning /
       View Path rather than awkwardly sized. */
    .hero-actions .btn-quest { flex: 1 1 auto; min-width: 200px; }

    /* Anchors styled as buttons (.primary-btn / .outline-btn) default to
       inline display, which makes the icon+text flow left instead of
       centering like real <button> elements do. Force flex centering for
       hero-actions anchors so emoji-prefixed labels read as centered. */
    .hero-actions a.primary-btn,
    .hero-actions a.outline-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
    }

    /* Reduced motion — keep the gradient, kill the animation noise */
    @media (prefers-reduced-motion: reduce) {
      .btn-quest, .btn-quest::before, .btn-quest::after,
      .btn-quest .quest-icon, .btn-quest .quest-spark { animation: none !important; }
      .btn-quest .quest-spark { display: none; }
    }

    .main {
      min-width: 0;
      padding: 22px 24px 60px 30px;
    }

    .topbar {
      position: sticky;
      top: 0;
      z-index: 10;
      display: flex;
      align-items: center;
      gap: 18px;
      height: var(--topbar);
      margin: -22px -24px 18px -30px;
      padding: 18px 24px 18px 30px;
      background: linear-gradient(180deg, rgba(5, 11, 20, 0.9) 0%, rgba(5, 11, 20, 0.68) 76%, transparent 100%);
      backdrop-filter: blur(16px);
    }

    .mobile-menu {
      display: none;
      width: 42px;
      height: 42px;
      border-radius: 12px;
      border: 1px solid var(--line);
      background: rgba(255,255,255,0.04);
      color: white;
    }

    .search-wrap {
      position: relative;
      flex: 1;
      max-width: 560px;
    }

    .search-wrap svg {
      position: absolute;
      left: 16px;
      top: 50%;
      transform: translateY(-50%);
      color: #7e8fa6;
    }

    .search-input {
      width: 100%;
      height: 44px;
      padding: 0 78px 0 46px;
      border: 1px solid var(--line);
      border-radius: 13px;
      outline: none;
      color: var(--text);
      background: rgba(16, 29, 49, 0.9);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
      transition: 160ms ease;
    }

    .search-input:focus {
      border-color: rgba(54, 241, 225, 0.45);
      box-shadow: 0 0 0 4px rgba(54, 241, 225, 0.08);
    }

    .shortcut {
      position: absolute;
      right: 9px;
      top: 8px;
      display: inline-flex;
      align-items: center;
      height: 28px;
      padding: 0 10px;
      border-radius: 9px;
      background: rgba(255,255,255,0.055);
      color: var(--muted);
      font-size: 12px;
      font-weight: 720;
    }

    .top-actions {
      margin-left: auto;
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .icon-btn {
      position: relative;
      display: inline-grid;
      place-items: center;
      width: 42px;
      height: 42px;
      border: 1px solid transparent;
      background: rgba(255,255,255,0.035);
      color: #c8d5e8;
    }

    .icon-btn:hover {
      color: white;
      border-color: var(--line);
      background: rgba(255,255,255,0.07);
      transform: translateY(-1px);
    }

    .badge {
      position: absolute;
      top: -4px;
      right: -4px;
      display: grid;
      place-items: center;
      width: 19px;
      height: 19px;
      border-radius: 50%;
      background: var(--danger);
      color: #fff;
      font-size: 11px;
      font-weight: 850;
      border: 2px solid #08111f;
      animation: badgeBounce 2.2s ease-in-out infinite;
    }

    .user-pill {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 7px 10px 7px 7px;
      border: 1px solid transparent;
      border-radius: 999px;
      background: rgba(255,255,255,0.025);
      color: #fff;
      transition: 160ms ease;
    }

    .user-pill:hover { border-color: var(--line); background: rgba(255,255,255,0.055); }
    /* Hide the pill during the FOUC window between page render and whoami.
       bootstrapSession removes data-hydrating once initial + name + role are
       set; the role switcher + setRole() do the same. Reserves layout space
       so the rest of the topbar doesn't reflow when the pill appears. */
    .user-pill[data-hydrating="1"] { opacity: 0; pointer-events: none; }

    .avatar {
      display: grid;
      place-items: center;
      width: 38px;
      height: 38px;
      border-radius: 50%;
      background:
        linear-gradient(135deg, rgba(255,255,255,0.65), rgba(97,185,255,0.22)),
        linear-gradient(135deg, #d68e69, #533226);
      font-size: 17px;
      font-weight: 900;
      color: #171014;
      border: 1px solid rgba(255,255,255,0.18);
      overflow: hidden;
    }
    /* Avatar Studio integration — when the user has a saved avatar, the
       headshot PNG replaces the initial letter via a JS-set background-image
       (see bootstrapSession's avatar_get fetch). Cyan ring hints that the
       pill is clickable + links to "My Profile". */
    .user-pill .avatar.has-character {
      position: relative;
      background-color: var(--panel-3, #131326);
      background-position: center top;
      background-size: cover;
      background-repeat: no-repeat;
      box-shadow: 0 0 0 1px rgba(34, 211, 238, 0.4), 0 0 12px rgba(34, 211, 238, 0.25);
      color: transparent; /* hide the residual letter if any survived JS */
    }
    .user-pill .avatar.has-character::before {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: 50%;
      box-shadow: inset 0 0 8px rgba(168, 85, 247, 0.22);
      pointer-events: none;
    }
    /* Collection avatar frames — earned by completing an Avatar Studio
       collection (avatar_config.frame_id, validated server-side). The ring
       is an ::after so it stacks over the headshot without moving layout;
       every circle-avatar surface (pill, lesson player, arena) shares these
       class names. */
    .avatar-frame { position: relative; }
    .avatar-frame::after {
      content: "";
      position: absolute;
      inset: 0;    /* ring hugs the INSIDE edge — .user-pill .avatar clips overflow, an outside ring vanishes */
      border-radius: 50%;
      pointer-events: none;
      z-index: 3;
    }
    .avatar-frame--royalty-gold::after {
      background: conic-gradient(from 0deg, #f3d97a, #d9b36c, #fff2b8, #b8860b, #f3d97a);
      -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
              mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
      animation: tmaFrameSpin 6s linear infinite;
      filter: drop-shadow(0 0 4px rgba(217, 179, 108, 0.6));
    }
    .avatar-frame--rebel-crimson::after {
      background: conic-gradient(from 0deg, #ff6b4a, #b3122e, #ffb199, #7a0c1f, #ff6b4a);
      -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
              mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
      animation: tmaFrameSpin 6s linear infinite;
      filter: drop-shadow(0 0 4px rgba(220, 60, 60, 0.6));
    }
    @keyframes tmaFrameSpin { to { transform: rotate(360deg); } }
    @media (prefers-reduced-motion: reduce) {
      .avatar-frame--royalty-gold::after, .avatar-frame--rebel-crimson::after { animation: none; }
    }

    .user-meta { line-height: 1.1; text-align: left; }
    .user-meta strong { display: block; font-size: 14px; }
    .user-meta span { display: block; color: var(--muted); font-size: 12px; margin-top: 3px; }

    .hero {
      position: relative;
      min-height: 330px;
      border-radius: var(--radius-lg);
      overflow: hidden;
      border: 1px solid rgba(142, 214, 255, 0.22);
      background:
        linear-gradient(90deg, rgba(5, 12, 24, 0.95) 0%, rgba(6, 13, 25, 0.82) 38%, rgba(5, 12, 24, 0.18) 72%, rgba(5, 12, 24, 0.80) 100%),
        linear-gradient(180deg, rgba(5, 12, 24, 0.08), rgba(5, 12, 24, 0.72)),
        url("images/hero/massage-program-hero.webp") center / cover;
      box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,0.08);
      isolation: isolate;
      animation: ambientHeroGlow 7s ease-in-out infinite;
    }

    .hero::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -1;
      background:
        radial-gradient(circle at 74% 40%, rgba(54,241,225,0.16), transparent 26%),
        linear-gradient(150deg, transparent 0 54%, rgba(5, 11, 20, 0.45) 54% 100%);
      opacity: 0.94;
    }

    .hero::after {
      content: "";
      position: absolute;
      inset: -20% auto -20% -42%;
      width: 28%;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.24), transparent);
      pointer-events: none;
      transform: translateX(-135%) skewX(-18deg);
      animation: gleamSweep 7s ease-in-out infinite 1s;
    }

    .hero-content {
      width: min(560px, 58%);
      padding: 46px 40px 28px;
    }

    .eyebrow {
      margin: 0 0 14px;
      color: #d9efff;
      font-size: 13px;
      font-weight: 850;
      letter-spacing: 0.18em;
      text-transform: uppercase;
    }

    .hero h1 {
      margin: 0;
      font-size: clamp(42px, 5vw, 58px);
      line-height: 0.96;
      letter-spacing: -0.06em;
    }

    .hero p {
      margin: 18px 0 24px;
      max-width: 440px;
      color: #cfdae9;
      font-size: 17px;
      line-height: 1.5;
    }

    .hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }

    .hero-progress {
      position: absolute;
      left: 50%;
      bottom: 22px;
      transform: translateX(-18%);
      width: min(320px, 34vw);
      color: #c5d5e7;
      font-size: 12px;
      font-weight: 720;
    }

    .progress-track {
      position: relative;
      display: block;
      height: 4px;
      margin-top: 8px;
      border-radius: 999px;
      overflow: hidden;
      background: rgba(255,255,255,0.12);
    }

    .progress-fill {
      position: absolute;
      inset: 0 auto 0 0;
      width: var(--value, 50%);
      border-radius: inherit;
      background: linear-gradient(90deg, var(--teal), var(--cyan), #ffffff, var(--cyan), var(--teal));
      background-size: 220% 100%;
      box-shadow: 0 0 18px rgba(54,241,225,0.38);
      animation: progressShimmer 3.8s linear infinite;
    }

    .filter-bar {
      display: flex;
      align-items: center;
      gap: 10px;
      margin: 24px 0 18px;
      overflow-x: auto;
      scrollbar-width: none;
    }

    .filter-bar::-webkit-scrollbar { display: none; }

    .chip {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      flex: 0 0 auto;
      min-height: 38px;
      padding: 0 15px;
      border-radius: 12px;
      border: 1px solid var(--line);
      background: rgba(12, 22, 39, 0.84);
      color: #aebcd0;
      font-size: 13px;
      font-weight: 720;
      transition: 160ms ease;
    }

    .chip:hover { color: #fff; border-color: rgba(54,241,225,0.34); }
    .chip.active {
      color: #fff;
      border-color: rgba(54, 241, 225, 0.42);
      background: linear-gradient(135deg, rgba(54,241,225,0.18), rgba(97,185,255,0.08));
      box-shadow: 0 12px 30px rgba(54, 241, 225, 0.08);
      animation: softPulse 5.6s ease-in-out infinite;
    }

    .filter-spacer { flex: 1; }

    .section {
      margin-top: 22px;
    }

    .section-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      margin-bottom: 12px;
    }

    .section-title {
      display: flex;
      align-items: center;
      gap: 10px;
      margin: 0;
      font-size: 20px;
      letter-spacing: -0.02em;
    }

    .section-title small {
      color: var(--muted-2);
      font-size: 13px;
      font-weight: 700;
    }

    .row-actions { display: flex; gap: 8px; }

    .row-btn {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      border: 1px solid var(--line);
      color: #cbd7e8;
      background: rgba(255,255,255,0.04);
      transition: 160ms ease;
    }

    .row-btn:hover { background: rgba(255,255,255,0.09); color: white; box-shadow: 0 0 24px rgba(54,241,225,0.12); }
    .row-btn:active { animation: badgeBounce 260ms ease-out; }

    .course-row {
      display: grid;
      grid-auto-flow: column;
      grid-auto-columns: minmax(235px, 1fr);
      gap: 14px;
      overflow-x: auto;
      padding: 2px 2px 10px;
      scroll-snap-type: x proximity;
      scrollbar-width: none;
    }

    .course-row::-webkit-scrollbar { display: none; }

    .course-card {
      position: relative;
      min-height: 162px;
      padding: 13px;
      overflow: hidden;
      border-radius: 16px;
      border: 1px solid rgba(137, 189, 255, 0.18);
      background: rgba(11, 20, 36, 0.92);
      box-shadow: 0 14px 36px rgba(0, 0, 0, 0.24);
      scroll-snap-align: start;
      transition: 220ms ease;
      isolation: isolate;
    }

    /* Catalog 3-type badge — distinguishes required PROGRAM (clock hours toward
       licensure) from Continuing Education (CEUs) and optional paid ADD-ONS.
       See courseCatalogType() + memory project_course_model. */
    .course-type-badge {
      position: absolute; top: 10px; left: 10px; z-index: 3;
      font-size: 10px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase;
      padding: 3px 8px; border-radius: 999px; color: #fff; line-height: 1;
      box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    }
    .course-type-badge.type-program { background: rgba(45, 140, 255, 0.94); }
    .course-type-badge.type-ce      { background: rgba(132, 96, 255, 0.94); }
    .course-type-badge.type-addon   { background: rgba(255, 168, 64, 0.96); color: #1a1205; }

    /* "Coming Soon" marker for future Stripe-phase paid content (bundles + paid
       add-on / CE course cards) — honest signal that these aren't purchasable yet. */
    .coming-soon-badge {
      position: absolute; top: 10px; right: 10px; z-index: 3;
      font-size: 10px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase;
      padding: 3px 9px; border-radius: 999px; line-height: 1;
      background: rgba(10, 18, 32, 0.74); color: #cfe0f5;
      border: 1px solid rgba(207, 224, 245, 0.34);
    }

    .course-card:hover {
      transform: translateY(-7px) scale(1.02);
      border-color: rgba(54, 241, 225, 0.36);
      background: rgba(17, 32, 54, 0.95);
      box-shadow: 0 20px 55px rgba(0,0,0,0.36), 0 0 0 1px rgba(54,241,225,0.08);
    }

    .course-card::before {
      content: "";
      position: absolute;
      inset: -24% auto -24% -44%;
      width: 34%;
      z-index: 2;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.34), transparent);
      pointer-events: none;
      transform: translateX(-135%) skewX(-18deg);
    }

    .course-card:hover::before { animation: gleamSweep 900ms ease-out; }

    .course-card.hidden { display: none; }

    .course-art {
      position: absolute;
      inset: 0;
      background: var(--art);
      opacity: 0.92;
    }

    .course-art::after {
      content: "";
      position: absolute;
      inset: 0;
      background:
        linear-gradient(180deg, rgba(6, 11, 21, 0.1) 0%, rgba(6, 11, 21, 0.18) 34%, rgba(6, 11, 21, 0.90) 100%),
        linear-gradient(90deg, rgba(6, 11, 21, 0.72), transparent 58%);
    }

    .course-content {
      position: relative;
      z-index: 1;
      display: flex;
      min-height: 136px;
      flex-direction: column;
      justify-content: space-between;
    }

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

    .mini-icon {
      display: grid;
      place-items: center;
      width: 27px;
      height: 27px;
      border-radius: 8px;
      border: 1px solid rgba(255,255,255,0.18);
      background: rgba(6, 11, 21, 0.48);
      backdrop-filter: blur(8px);
      color: white;
      font-size: 13px;
      font-weight: 850;
    }

    .level-tag {
      padding: 5px 8px;
      border-radius: 999px;
      background: rgba(255,255,255,0.1);
      color: #dbe9ff;
      font-size: 10px;
      font-weight: 780;
      letter-spacing: 0.03em;
      opacity: 0;
      transform: translateY(-4px);
      transition: 180ms ease;
    }

    .course-card:hover .level-tag { opacity: 1; transform: translateY(0); }

    .course-title {
      margin: 0 0 7px;
      max-width: 85%;
      color: #fff;
      font-size: 15px;
      line-height: 1.16;
      font-weight: 850;
      letter-spacing: -0.025em;
      text-shadow: 0 2px 14px rgba(0,0,0,0.5);
    }

    .course-meta {
      display: flex;
      align-items: center;
      justify-content: space-between;
      color: #b4c2d4;
      font-size: 12px;
      margin-bottom: 7px;
    }

    .progress-line {
      height: 4px;
      border-radius: 999px;
      background: rgba(255,255,255,0.14);
      overflow: hidden;
    }

    .progress-line span {
      display: block;
      height: 100%;
      width: var(--value);
      border-radius: inherit;
      background: linear-gradient(90deg, var(--teal), var(--cyan));
      box-shadow: 0 0 18px rgba(54,241,225,0.35);
    }

    .premium-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.08fr) minmax(310px, .92fr);
      gap: 16px;
      margin-top: 22px;
    }

    .premium-panel {
      position: relative;
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: var(--radius-md);
      background:
        radial-gradient(circle at 88% 12%, rgba(54, 241, 225, 0.12), transparent 34%),
        linear-gradient(180deg, rgba(14, 26, 45, 0.86), rgba(9, 18, 32, 0.86));
      box-shadow: 0 16px 44px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.04);
    }

    .premium-panel::after {
      content: "";
      position: absolute;
      inset: -30% auto -30% -48%;
      width: 34%;
      pointer-events: none;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.14), transparent);
      animation: gleamSweep 8s ease-in-out infinite;
    }

    /* Course Progress panel (staff Records) — per-module, expandable to Hours/activities. */
    #courseProgressBody { padding: 6px 18px 16px; display: flex; flex-direction: column; gap: 8px; }
    .cp-module { border: 1px solid var(--line, rgba(255,255,255,0.08)); border-radius: 12px; overflow: hidden; background: rgba(255,255,255,0.02); }
    .cp-module.is-open { border-color: rgba(54,241,225,0.35); }
    .cp-module-head {
      width: 100%; display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
      padding: 12px 14px; background: none; border: none; cursor: pointer;
      font: inherit; color: var(--text); text-align: left;
    }
    .cp-module-head:hover { background: rgba(54,241,225,0.04); }
    .cp-chevron { color: var(--muted); font-size: 12px; width: 12px; transition: transform .15s; }
    .cp-module.is-open .cp-chevron { transform: rotate(90deg); color: var(--teal); }
    .cp-module-title { font-weight: 700; font-size: 14px; flex: 1; min-width: 160px; }
    .cp-track { height: 7px; width: 120px; border-radius: 4px; background: rgba(255,255,255,0.10); overflow: hidden; flex-shrink: 0; }
    .cp-track.sm { width: 90px; }
    .cp-fill { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--teal, #36f1e1), var(--green, #4de8a7)); }
    .cp-pct { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; min-width: 36px; text-align: right; }
    .cp-avg { font-size: 11px; font-weight: 700; color: var(--teal, #36f1e1); background: rgba(54,241,225,0.10); border-radius: 5px; padding: 2px 9px; white-space: nowrap; font-variant-numeric: tabular-nums; }
    .cp-avg.none { color: var(--muted); background: rgba(255,255,255,0.05); font-weight: 600; }
    .cp-module-detail { padding: 4px 14px 14px 30px; display: flex; flex-direction: column; gap: 10px; background: rgba(0,0,0,0.18); }
    .cp-loading, .cp-empty { color: var(--muted); font-size: 13px; padding: 12px 4px; }
    .cp-hour { border: 1px solid var(--line, rgba(255,255,255,0.08)); border-radius: 10px; overflow: hidden; background: rgba(255,255,255,0.02); }
    .cp-hour-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 9px 14px; background: rgba(255,255,255,0.03); border-bottom: 1px solid rgba(255,255,255,0.05); }
    .cp-hour-title { font-size: 13px; font-weight: 600; flex: 1; min-width: 150px; }
    .cp-hour-count { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
    .cp-act-list { display: flex; flex-direction: column; padding: 4px 0; }
    .cp-act { display: flex; align-items: center; gap: 9px; padding: 6px 16px; font-size: 12.5px; color: var(--muted); }
    .cp-act + .cp-act { border-top: 1px solid rgba(255,255,255,0.04); }
    .cp-act-mark { width: 16px; text-align: center; color: var(--muted); }
    .cp-act.is-done { color: var(--text); }
    .cp-act.is-done .cp-act-mark { color: var(--green, #4de8a7); font-weight: 700; }
    .cp-act-icon { width: 18px; text-align: center; }
    .cp-act-name { flex: 1; }
    .cp-opt { font-size: 10px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); border: 1px solid var(--line, rgba(255,255,255,0.12)); border-radius: 4px; padding: 1px 6px; }
    .cp-grade { font-size: 11px; font-weight: 700; border-radius: 5px; padding: 2px 8px; white-space: nowrap; font-variant-numeric: tabular-nums; }
    .cp-grade.pass     { background: rgba(77,232,167,0.14); color: var(--green, #4de8a7); }
    .cp-grade.fail     { background: rgba(255,83,112,0.14); color: var(--danger, #ff5370); }
    .cp-grade.pending  { background: rgba(255,200,90,0.12); color: var(--gold, #ffc85a); font-weight: 600; }
    .cp-grade.upcoming { background: rgba(255,255,255,0.05); color: var(--muted); font-weight: 600; }
    .cp-time { font-size: 11px; color: var(--faint, #9aa6b8); background: rgba(255,255,255,0.05); border-radius: 5px; padding: 2px 8px; white-space: nowrap; font-variant-numeric: tabular-nums; }
    .cp-hour-time, .cp-mod-time { font-size: 11px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }

    /* Wave 2 — Records Online Coursework panel. Phone-first. */
    .oc-body { padding: 0 18px 16px; }
    .oc-kpis {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
      margin: 10px 0 14px;
    }
    .oc-kpi {
      background: rgba(134, 190, 255, 0.06);
      border: 1px solid rgba(134, 190, 255, 0.14);
      border-radius: 10px;
      padding: 10px 8px;
      text-align: center;
      min-height: 60px;
    }
    .oc-kpi strong {
      display: block;
      font-size: 22px;
      font-weight: 800;
      color: var(--text);
      line-height: 1.1;
    }
    .oc-kpi span { font-size: 10.5px; color: var(--muted); letter-spacing: 0.04em; text-transform: uppercase; }
    .oc-progress-wrap { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
    .oc-progress { height: 8px; background: rgba(134, 190, 255, 0.12); border-radius: 999px; overflow: hidden; }
    .oc-progress-fill {
      height: 100%;
      background: linear-gradient(90deg, var(--teal, #36f1e1), var(--purple, #a855f7));
      width: 0%;
      transition: width 800ms cubic-bezier(.2,.8,.2,1);
      border-radius: inherit;
    }
    .oc-progress-text { font-size: 12px; color: var(--muted); }
    .oc-recent-head { margin: 4px 0 8px; font-size: 11px; color: var(--muted); letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; }
    .oc-recent { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
    .oc-recent li {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 8px 6px;
      border-radius: 8px;
      font-size: 13px;
      color: var(--text);
      opacity: 0;
      animation: oc-row-fade 360ms ease forwards;
    }
    @keyframes oc-row-fade { to { opacity: 1; } }
    .oc-recent li .oc-glyph { width: 18px; text-align: center; }
    .oc-recent li .oc-title { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .oc-recent li .oc-date  { color: var(--muted); font-size: 11px; flex: 0 0 auto; }
    .oc-recent li.oc-status-completed .oc-glyph { color: var(--green, #4de8a7); }
    .oc-recent li.oc-status-in_progress .oc-glyph { color: var(--cyan, #61b9ff); }
    .oc-recent li.oc-status-failed .oc-glyph { color: var(--danger, #ff5370); }
    .oc-error { padding: 16px; color: var(--muted); text-align: center; }
    .oc-error button { margin-left: 8px; }
    /* Touch target boost for the panel's "View all →" button — overrides
       the global .ghost-btn padding without affecting other ghost-btn uses. */
    #onlineCourseworkSeeAll { min-height: 44px; padding: 10px 14px; }
    @media (min-width: 641px) { .oc-kpi strong { font-size: 26px; } }
    @media (prefers-reduced-motion: reduce) {
      .oc-progress-fill { transition: none; }
      .oc-recent li { animation: none; opacity: 1; }
    }

    /* Wave 2 — Continue Learning row. Phone-first; scales up via min-width. */
    .continue-learning-row {
      margin: 0 0 24px;
      padding: 0;
    }
    .cl-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 4px 12px;
    }
    .cl-head h2 {
      margin: 0;
      font-size: 16px;
      letter-spacing: -0.01em;
      /* Subtle gleam crawl matching avatar-studio panel titles */
      background: linear-gradient(90deg, var(--text) 0%, var(--text) 30%, #fff 50%, var(--text) 70%, var(--text) 100%);
      background-size: 220% 100%;
      -webkit-background-clip: text;
              background-clip: text;
      color: transparent;
      animation: cl-head-gleam 9s linear infinite;
    }
    @keyframes cl-head-gleam {
      0%   { background-position: 220% 0; }
      100% { background-position: -220% 0; }
    }
    .cl-head .cl-icon { color: var(--teal); margin-right: 4px; }
    .cl-see-all {
      background: transparent;
      border: 0;
      color: var(--muted);
      font: inherit;
      font-size: 12px;
      cursor: pointer;
      padding: 8px 10px;
      min-height: 44px;
      border-radius: 8px;
    }
    .cl-see-all:hover { color: var(--text); }
    .cl-scroll {
      display: flex;
      gap: 12px;
      overflow-x: auto;
      overflow-y: hidden;
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      padding: 4px 4px 12px;
    }
    .cl-scroll::-webkit-scrollbar { display: none; }
    .cl-card {
      flex: 0 0 260px;
      scroll-snap-align: start;
      background: var(--panel-2, #0e1322);
      border: 1px solid rgba(134, 190, 255, 0.16);
      border-radius: 14px;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      cursor: pointer;
      transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
    }
    .cl-card:hover {
      transform: translateY(-2px);
      border-color: rgba(168, 85, 247, 0.5);
      box-shadow: 0 10px 28px rgba(168, 85, 247, 0.18);
    }
    .cl-thumb {
      width: 100%;
      aspect-ratio: 16 / 9;
      background: linear-gradient(135deg, #1a2438, #0d192b);
      display: flex; align-items: center; justify-content: center;
      color: #fff; font-weight: 800; font-size: 28px;
      position: relative;
    }
    .cl-thumb img { width: 100%; height: 100%; object-fit: cover; }
    .cl-body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 8px; }
    .cl-title { font-size: 14px; font-weight: 700; color: var(--text); line-height: 1.3; }
    .cl-subtitle { font-size: 12px; color: var(--muted); }
    .cl-progress {
      height: 6px; background: rgba(134, 190, 255, 0.12); border-radius: 999px; overflow: hidden;
    }
    .cl-progress-fill {
      height: 100%;
      background: linear-gradient(90deg, var(--teal, #36f1e1), var(--purple, #a855f7));
      width: 0%;
      transition: width 600ms cubic-bezier(.2,.8,.2,1);
      border-radius: inherit;
    }
    .cl-meta { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); }
    .cl-resume {
      margin-top: 2px;
      padding: 10px 14px;
      min-height: 44px;
      border: 0; border-radius: 10px; cursor: pointer;
      background: linear-gradient(135deg, var(--purple, #a855f7), #6366f1);
      color: #fff; font-weight: 700; font-size: 13px;
      position: relative;
      overflow: hidden;
    }
    .cl-resume::before {
      content: '';
      position: absolute; inset: 0;
      background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,0.32) 50%, transparent 60%);
      transform: translateX(-130%);
      animation: cl-resume-sweep 6s ease-in-out infinite;
      pointer-events: none;
    }
    @keyframes cl-resume-sweep {
      0% { transform: translateX(-130%); }
      55% { transform: translateX(130%); }
      100% { transform: translateX(130%); }
    }
    @media (min-width: 641px)  { .cl-card { flex-basis: 300px; } }
    @media (min-width: 1025px) { .cl-card { flex-basis: 320px; } }
    @media (hover: none) {
      .cl-card:hover {
        transform: none;
        border-color: rgba(134, 190, 255, 0.16); /* match base, undo hover lift */
        box-shadow: none;
      }
    }
    @media (prefers-reduced-motion: reduce) {
      .cl-head h2, .cl-resume::before, .cl-progress-fill { animation: none; transition: none; }
    }

    /* Wave 2 — PWA install prompt card */
    .pwa-install-card {
      margin: 0 0 20px;
      padding: 14px 16px;
      background: linear-gradient(135deg, rgba(168, 85, 247, 0.12), rgba(34, 211, 238, 0.08));
      border: 1px solid rgba(168, 85, 247, 0.36);
      border-radius: 14px;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .pwa-install-body strong { font-size: 14px; color: var(--text); display: block; margin-bottom: 4px; }
    .pwa-install-body p { margin: 0; font-size: 12.5px; color: var(--muted); }
    .pwa-install-actions { display: flex; gap: 8px; justify-content: flex-end; }
    .pwa-install-actions button { min-height: 44px; padding: 10px 16px; }
    @media (min-width: 641px) {
      .pwa-install-card { flex-direction: row; align-items: center; }
      .pwa-install-body { flex: 1; }
    }

    /* Wave 2 — offline banner. Sticky at top of body when shown. */
    .offline-banner {
      position: sticky;
      top: 0;
      z-index: 90;
      background: var(--gold, #ffc85a);
      color: #2a1c08;
      text-align: center;
      padding: 8px 14px;
      font-size: 13px;
      font-weight: 700;
    }

    /* Wave 2 — Phone-first hub card redesign. */
    .hub-card-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 12px;
    }
    @media (min-width: 641px)  { .hub-card-grid { grid-template-columns: repeat(2, 1fr); } }
    @media (min-width: 1025px) { .hub-card-grid { grid-template-columns: repeat(3, 1fr); } }
    .hub-card {
      background: var(--panel-2, #0e1322);
      border: 1px solid rgba(134, 190, 255, 0.16);
      border-radius: 14px;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
    }
    .hub-card:hover {
      transform: translateY(-2px);
      border-color: rgba(168, 85, 247, 0.5);
      box-shadow: 0 10px 28px rgba(168, 85, 247, 0.18);
    }
    @media (hover: none) {
      .hub-card:hover {
        transform: none;
        border-color: rgba(134, 190, 255, 0.16);
        box-shadow: none;
      }
    }
    .hub-card-thumb {
      width: 100%;
      aspect-ratio: 16 / 9;
      background: linear-gradient(135deg, #1a2438, #0d192b);
      display: flex; align-items: center; justify-content: center;
      color: #fff; font-weight: 800; font-size: 28px;
      position: relative;
    }
    .hub-card-thumb img { width: 100%; height: 100%; object-fit: cover; }
    .hub-card-status-badge {
      position: absolute; top: 8px; right: 8px;
      padding: 4px 8px; border-radius: 999px;
      font-size: 10.5px; font-weight: 800; letter-spacing: 0.04em;
      background: rgba(0, 0, 0, 0.45); color: #fff; backdrop-filter: blur(4px);
    }
    .hub-card.status-completed .hub-card-status-badge { background: rgba(77, 232, 167, 0.85); color: #03101c; }
    .hub-card.status-in_progress .hub-card-status-badge { background: rgba(97, 185, 255, 0.85); color: #03101c; }
    .hub-card.status-failed .hub-card-status-badge { background: rgba(255, 83, 112, 0.85); color: #fff; }
    .hub-card-body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 8px; }
    .hub-card-title { font-size: 14px; font-weight: 700; color: var(--text); line-height: 1.3; }
    .hub-card-meta  { font-size: 11.5px; color: var(--muted); display: flex; gap: 10px; flex-wrap: wrap; }
    .hub-card-actions { margin-top: 4px; display: flex; gap: 8px; }
    .hub-card-actions .primary-btn, .hub-card-actions .ghost-btn { min-height: 44px; padding: 10px 14px; flex: 1; }

    /* Group section: sticky subject header on phone */
    .hub-group-head {
      position: sticky;
      top: 0;
      z-index: 5;
      background: var(--bg, #050b14);
      padding: 12px 0 8px;
      display: flex; align-items: center; gap: 10px;
      border-bottom: 1px solid var(--line, rgba(134, 190, 255, 0.16));
      margin-bottom: 12px;
    }
    .hub-group-accent { width: 4px; height: 22px; border-radius: 2px; flex: 0 0 auto; }
    .hub-group-title { font-size: 14px; font-weight: 800; color: var(--text); flex: 1; }
    .hub-group-frac  { font-size: 12px; color: var(--muted); }
    @media (min-width: 1025px) { .hub-group-head { position: static; } }

    /* KPI band — 2x3 on phone, 3x2 on tablet, 5x1 on desktop */
    .hub-kpi-band {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 10px;
      margin-bottom: 18px;
    }
    @media (min-width: 641px)  { .hub-kpi-band { grid-template-columns: repeat(3, 1fr); } }
    @media (min-width: 1025px) { .hub-kpi-band { grid-template-columns: repeat(5, 1fr); } }

    .premium-panel-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 14px;
      padding: 18px 18px 10px;
    }

    .premium-panel h3 {
      margin: 0;
      font-size: 17px;
      letter-spacing: -0.02em;
    }

    .premium-panel p {
      margin: 6px 0 0;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.45;
    }

    .smart-path-body {
      display: grid;
      grid-template-columns: 88px minmax(0, 1fr);
      gap: 16px;
      padding: 8px 18px 18px;
    }

    .path-orb {
      width: 86px;
      aspect-ratio: 1;
      border-radius: 24px;
      display: grid;
      place-items: center;
      color: #03101c;
      font-weight: 950;
      background: linear-gradient(135deg, var(--gold), var(--teal));
      box-shadow: 0 18px 42px rgba(54,241,225,0.18);
      animation: softPulse 4.6s ease-in-out infinite;
    }

    .path-steps {
      display: grid;
      gap: 9px;
    }

    .path-step {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr) auto;
      align-items: center;
      gap: 10px;
      min-height: 42px;
      padding: 8px 10px;
      border: 1px solid rgba(255,255,255,0.07);
      border-radius: 13px;
      background: rgba(255,255,255,0.035);
    }

    .step-dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: var(--teal);
      animation: statusPing 2.9s ease-in-out infinite;
    }

    .path-step strong { font-size: 13px; }
    .path-step span { color: var(--muted); font-size: 12px; }
    .step-time { color: var(--gold); font-weight: 850; font-size: 12px; }

    .skills-grid {
      display: grid;
      gap: 11px;
      padding: 8px 18px 18px;
    }

    .skill-row {
      display: grid;
      grid-template-columns: minmax(105px, .55fr) minmax(0, 1fr) 42px;
      align-items: center;
      gap: 10px;
    }

    .skill-row strong { font-size: 13px; }
    .skill-meter {
      height: 8px;
      border-radius: 999px;
      overflow: hidden;
      background: rgba(255,255,255,0.09);
    }

    .skill-meter span {
      display: block;
      width: var(--value);
      height: 100%;
      border-radius: inherit;
      background: linear-gradient(90deg, var(--teal), var(--cyan), #ffffff, var(--cyan));
      background-size: 220% 100%;
      animation: progressShimmer 4s linear infinite;
    }

    .skill-row em {
      color: var(--teal);
      font-style: normal;
      font-size: 12px;
      font-weight: 850;
      text-align: right;
    }

    .activity-feed {
      display: grid;
      gap: 10px;
      padding: 8px 18px 18px;
    }

    .activity-event {
      position: relative;
      display: grid;
      grid-template-columns: 38px minmax(0, 1fr) auto;
      gap: 10px;
      align-items: center;
      min-height: 54px;
      padding: 10px;
      border: 1px solid rgba(255,255,255,0.07);
      border-radius: 14px;
      background: rgba(255,255,255,0.035);
      overflow: hidden;
    }

    .activity-event::before {
      content: "";
      position: absolute;
      inset: 0 auto 0 0;
      width: 3px;
      background: var(--teal);
      opacity: .74;
      animation: statusPing 3.4s ease-in-out infinite;
    }

    .event-icon {
      display: grid;
      place-items: center;
      width: 34px;
      height: 34px;
      border-radius: 11px;
      color: #06111d;
      background: linear-gradient(135deg, var(--teal), var(--blue));
      font-size: 12px;
      font-weight: 920;
    }

    .activity-event strong { display: block; font-size: 13px; }
    .activity-event span { display: block; margin-top: 3px; color: var(--muted); font-size: 12px; }
    .event-time { color: var(--muted-2); font-size: 11px; white-space: nowrap; }

    .ops-dashboard {
      margin-top: 22px;
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(260px, .44fr);
      gap: 16px;
    }

    .ops-chart {
      min-height: 284px;
    }

    .ops-tabs {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      padding: 0 18px 10px;
    }

    .ops-tab {
      min-height: 34px;
      padding: 0 12px;
      border: 1px solid var(--line);
      border-radius: 999px;
      color: var(--muted);
      background: rgba(255,255,255,0.035);
      font-size: 12px;
      font-weight: 780;
    }

    .ops-tab.active {
      color: #03101c;
      border-color: transparent;
      background: linear-gradient(135deg, var(--teal), var(--blue));
    }

    .chart-wrap {
      position: relative;
      height: 190px;
      margin: 0 18px 18px;
      border: 1px solid rgba(255,255,255,0.07);
      border-radius: 16px;
      background:
        linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
      background-size: 100% 25%, 16.66% 100%;
      overflow: hidden;
    }

    .chart-wrap svg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
    }

    .chart-tip {
      position: absolute;
      right: 24px;
      top: 78px;
      padding: 9px 10px;
      border: 1px solid var(--line);
      border-radius: 12px;
      color: var(--text);
      background: rgba(7, 15, 28, .88);
      box-shadow: 0 14px 34px rgba(0,0,0,.28);
      font-size: 12px;
    }

    .chart-tip span { display: block; color: var(--teal); margin-top: 2px; }

    .ops-metrics {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
      padding: 18px;
    }

    .ops-metric {
      min-height: 92px;
      display: grid;
      align-content: center;
      gap: 6px;
      padding: 13px;
      border: 1px solid rgba(255,255,255,0.07);
      border-radius: 15px;
      background: rgba(255,255,255,0.035);
    }

    .ops-metric span { color: var(--muted); font-size: 12px; }
    .ops-metric strong { font-size: 26px; letter-spacing: -0.04em; }

    .ops-board {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 16px;
      margin-top: 16px;
    }

    .ops-list {
      display: grid;
      gap: 10px;
      padding: 4px 18px 18px;
    }

    /* ===== Gradebook assignment editor (Phase 2a) ===== */
    .assn-group { margin-top: 14px; }
    .assn-group:first-child { margin-top: 0; }
    .assn-group h4 {
      font-size: 13px; letter-spacing: 0.06em; color: var(--muted-2);
      text-transform: uppercase; font-weight: 800; margin: 0 0 8px;
      padding: 0 18px;
    }
    .assn-row {
      display: grid;
      /* label · type · score · retest · status · comments · kept-pct
         Type column widened from 80px → 128px to fit CLIENT_SESSION etc.
         Score/retest narrowed slightly to keep the row width similar. */
      grid-template-columns: minmax(0, 2fr) 128px 78px 78px 110px minmax(0, 1.2fr) 80px;
      gap: 10px; align-items: center;
      padding: 10px 18px;
      border-top: 1px solid rgba(255,255,255,0.06);
    }
    .assn-row .assn-label {
      font-size: 13px; font-weight: 700;
      min-width: 0; overflow: hidden;
      text-overflow: ellipsis; white-space: nowrap;
    }
    /* Fallback styling when the label is missing (data gap). Make it visibly
       a placeholder so graders know to give the assignment a real name. */
    .assn-row .assn-label.is-fallback {
      color: var(--muted); font-weight: 600; font-style: italic;
    }
    .assn-row .assn-type {
      display: inline-block; padding: 3px 10px;
      border-radius: 999px; font-size: 10px; font-weight: 800;
      letter-spacing: 0.04em; text-transform: uppercase;
      background: rgba(54,241,225,0.14); color: var(--teal);
      text-align: center;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .assn-row .assn-type.test       { background: rgba(255,200,90,0.16); color: var(--gold); }
    .assn-row .assn-type.practical  { background: rgba(255,83,112,0.16); color: var(--danger); }
    .assn-row .assn-type.client_session { background: rgba(139,92,246,0.18); color: #b9a5ff; }
    .assn-row .assn-type.participation  { background: rgba(77,232,167,0.16); color: var(--green); }
    .assn-row input, .assn-row select {
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.10);
      color: var(--text); font-size: 13px;
      border-radius: 8px; padding: 6px 8px; min-width: 0;
    }
    .assn-row input:focus, .assn-row select:focus {
      outline: none; border-color: rgba(54,241,225,0.5);
      background: rgba(54,241,225,0.05);
    }
    .assn-row .assn-pct {
      font-size: 12px; color: var(--muted); text-align: right;
      font-variant-numeric: tabular-nums;
    }
    .assn-row .assn-pct strong { color: var(--text); font-weight: 800; }
    .assn-row.saving .assn-pct { color: var(--gold); }
    .assn-row.saved .assn-pct strong { color: var(--green); }
    .assn-row.error { background: rgba(255,83,112,0.06); }
    @media (max-width: 900px) {
      .assn-row {
        grid-template-columns: 1fr 1fr;
        row-gap: 4px;
      }
      .assn-row .assn-label { grid-column: 1 / -1; }
    }

    /* ===== Attendance grid (per-class-hour roll call) ===== */
    /* On phones (≤640px) the 540px-min-width grid would force the whole page
       to scroll horizontally. Wrap in .table-scroll and the grid scrolls
       independently while the rest of the page stays in column. */
    .table-scroll { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .att-grid { width: 100%; border-collapse: collapse; min-width: 540px; }
    .att-grid th, .att-grid td {
      border-bottom: 1px solid rgba(255,255,255,0.06);
      padding: 8px 10px; text-align: center; font-size: 13px;
    }
    .att-grid thead th {
      font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
      font-weight: 800; color: var(--muted-2);
      background: rgba(255,255,255,0.02);
    }
    .att-grid tbody tr:hover td { background: rgba(54,241,225,0.03); }
    .att-grid td.att-name { text-align: left; font-weight: 700; min-width: 180px; }
    .att-cell {
      /* <button>-based for keyboard reach + AT semantics; neutralize UA padding/font. */
      display: inline-block; min-width: 36px; height: 32px;
      padding: 0; margin: 0; font-family: inherit;
      border-radius: 8px; cursor: pointer; user-select: none;
      border: 1px solid rgba(255,255,255,0.10);
      background: rgba(255,255,255,0.03);
      color: var(--muted); font-weight: 800; font-size: 13px;
      line-height: 30px; text-align: center;
      transition: transform 80ms ease, background 100ms ease, border-color 100ms ease;
    }
    .att-cell:hover { transform: scale(1.05); }
    .att-cell:focus-visible {
      outline: 2px solid var(--teal, #36f1e1);
      outline-offset: 2px;
    }
    .att-cell.present  { background: rgba(77,232,167,0.18);  border-color: rgba(77,232,167,0.55);  color: #d4ffe8; }
    .att-cell.absent   { background: rgba(255,83,112,0.18);  border-color: rgba(255,83,112,0.55);  color: #ffd6db; }
    /* madeup = was absent, hours later made up. Counts toward 50-hr cap as
       absent originally, but visually distinct so instructors can see at a
       glance that the absence is recovered. Soft amber/teal blend. */
    .att-cell.madeup   { background: rgba(54,241,225,0.14);  border-color: rgba(54,241,225,0.5);  color: #c8fff8;
                         font-size: 11px; letter-spacing: -.02em; }
    /* unmarked = no attendance row in DB yet for this (student, date, hour).
       Loud orange "?" so the instructor sees at a glance which cells still
       need entry. Pulses subtly to draw the eye without being annoying. */
    .att-cell.unmarked { background: rgba(255,160,40,0.14);  border-color: rgba(255,160,40,0.6);   color: #ffc878;
                         font-weight: 800; animation: attUnmarkedPulse 2.4s ease-in-out infinite; }
    @keyframes attUnmarkedPulse {
      0%,100% { box-shadow: 0 0 0 rgba(255,160,40,0); }
      50%     { box-shadow: 0 0 12px rgba(255,160,40,0.35); }
    }

    /* Subject pill in hour-column headers — small label + matching color so
       Kathleen sees at a glance which hour belongs to which subject. Same
       palette as the live-schedule chips. */
    .att-subj-pill { display: inline-block; font-size: 9.5px; font-weight: 700;
      padding: 1px 7px; border-radius: 999px; margin-top: 4px;
      letter-spacing: .03em; opacity: .9; }
    .att-subj-pill.subj-massage   { background: rgba(54,241,225,.18);  color: #c8fff8; border: 1px solid rgba(54,241,225,.55); }
    .att-subj-pill.subj-hydro     { background: rgba(95,165,250,.18);  color: #d6e7ff; border: 1px solid rgba(95,165,250,.6); }
    .att-subj-pill.subj-pathology { background: rgba(180,120,255,.18); color: #ecdcff; border: 1px solid rgba(180,120,255,.6); }
    .att-subj-pill.subj-anp       { background: rgba(255,160,90,.18);  color: #ffd9b6; border: 1px solid rgba(255,160,90,.6); }
    .att-subj-pill.subj-hh        { background: rgba(255,122,138,.18); color: #ffd6db; border: 1px solid rgba(255,122,138,.6); }
    .att-subj-pill.subj-kin       { background: rgba(255,200,90,.16);  color: #ffe9b3; border: 1px solid rgba(255,200,90,.55); }
    .att-subj-pill.subj-business  { background: rgba(170,210,140,.18); color: #e2f2cb; border: 1px solid rgba(170,210,140,.6); }

    /* Read-only lock — staff role on past dates / off-days. Cells stay
       visible (you can still SEE the data) but the cycle clicks are
       disabled and the unmarked-pulse animation is silenced so stale
       orange "?" cells don't pull focus. Quick-fill buttons hide too.
       Owner override removes body[data-att-readonly] and the grid is
       interactive again. Make-up flow stays available regardless. */
    body[data-att-readonly="1"] .att-cell { pointer-events: none; cursor: not-allowed; opacity: 0.78; }
    body[data-att-readonly="1"] .att-cell.unmarked { animation: none; box-shadow: none; }
    body[data-att-readonly="1"] .att-quick { display: none; }
    body[data-att-readonly="1"] #attMarkAllPresent { display: none; }

    /* Cell subject accent — 2px bottom border in the subject color so the
       subject context is visible without overpowering the present/absent/etc
       status hue. Hidden on unmarked cells (orange "?" already loud enough). */
    .att-cell:not(.unmarked).subj-massage   { border-bottom: 2px solid rgba(54,241,225,.55); }
    .att-cell:not(.unmarked).subj-hydro     { border-bottom: 2px solid rgba(95,165,250,.6); }
    .att-cell:not(.unmarked).subj-pathology { border-bottom: 2px solid rgba(180,120,255,.6); }
    .att-cell:not(.unmarked).subj-anp       { border-bottom: 2px solid rgba(255,160,90,.6); }
    .att-cell:not(.unmarked).subj-hh        { border-bottom: 2px solid rgba(255,122,138,.6); }
    .att-cell:not(.unmarked).subj-kin       { border-bottom: 2px solid rgba(255,200,90,.55); }
    .att-cell:not(.unmarked).subj-business  { border-bottom: 2px solid rgba(170,210,140,.6); }
    .att-cell.late     { background: rgba(255,200,90,0.18);  border-color: rgba(255,200,90,0.55);  color: #ffe9b3; }
    .att-cell.excused  { background: rgba(139,92,246,0.18);  border-color: rgba(139,92,246,0.55);  color: #d6c4ff; }
    .att-cell.left_early { background: rgba(255,200,90,0.10); border-color: rgba(255,200,90,0.35); color: #ffe9b3; }
    .att-cell.tardy    { background: rgba(255,200,90,0.10);  border-color: rgba(255,200,90,0.35);  color: #ffe9b3; }
    .att-cell.saving { opacity: 0.5; }

    /* TDLR audit packet — student × date matrix + hours-by-subject rollup. */
    .audit-school-head {
      text-align: center; padding: 14px 0 16px;
      border-bottom: 2px solid rgba(54,241,225,0.5);
      margin-bottom: 18px;
    }
    .audit-school-head h1 { margin: 0; font-size: 20px; color: var(--teal); letter-spacing: 0.04em; }
    .audit-school-head p  { margin: 4px 0 0; color: var(--muted); font-size: 13px; }

    .audit-table {
      width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12px;
      margin-bottom: 14px;
    }
    .audit-table th, .audit-table td {
      padding: 6px 8px; border-bottom: 1px solid rgba(255,255,255,0.06);
      text-align: center; white-space: nowrap;
    }
    .audit-table thead th {
      background: rgba(13,25,43,0.92); color: var(--muted);
      font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 800;
      position: sticky; top: 0; z-index: 2;
    }
    .audit-table th.sticky-col, .audit-table td.sticky-col {
      position: sticky; left: 0; z-index: 1;
      background: rgba(13,25,43,0.96);
      text-align: left; font-weight: 700;
      border-right: 1px solid rgba(255,255,255,0.10);
    }
    .audit-table thead th.sticky-col { z-index: 3; }
    .audit-cell-good    { background: rgba(77,232,167,0.14); color: #9dffce; font-weight: 800; }
    .audit-cell-short   { background: rgba(255,83,112,0.16); color: #ffb3bd; font-weight: 800; }
    .audit-cell-full    { background: rgba(77,232,167,0.10); color: var(--green); font-weight: 700; }
    .audit-cell-partial { background: rgba(255,200,90,0.10); color: var(--gold);  font-weight: 700; }
    .audit-cell-zero    { background: rgba(255,83,112,0.10); color: var(--danger); font-weight: 700; }

    .audit-sig {
      display: grid; grid-template-columns: 1fr 1fr; gap: 30px;
      margin-top: 30px; padding-top: 16px;
      border-top: 1px solid rgba(255,255,255,0.10);
    }
    .audit-sig > div { display: flex; flex-direction: column; gap: 18px; font-size: 11px; color: var(--muted-2); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 800; }
    .audit-sig .line { display: block; height: 1px; background: rgba(255,255,255,0.30); margin-top: 16px; }

    /* Print: when the packet is open, hide everything else and print only the modal contents. */
    @media print {
      body.printing-audit-packet > *:not(#auditPacketOverlay) { display: none !important; }
      body.printing-audit-packet #auditPacketOverlay {
        display: block !important; position: static !important;
        background: white !important; backdrop-filter: none !important;
        inset: auto !important;
      }
      body.printing-audit-packet #auditPacketModal {
        background: white !important; color: black !important; box-shadow: none !important;
        border: none !important; border-radius: 0 !important; max-height: none !important;
        width: 100% !important; padding: 12px !important;
      }
      body.printing-audit-packet #auditPacketModal * { color: black !important; }
      body.printing-audit-packet #auditPacketBody { max-height: none !important; overflow: visible !important; }
      body.printing-audit-packet .audit-school-head { border-color: black !important; }
      body.printing-audit-packet .audit-school-head h1,
      body.printing-audit-packet h3 { color: black !important; }
      body.printing-audit-packet #auditPacketPrint,
      body.printing-audit-packet #auditPacketClose { display: none !important; }
      body.printing-audit-packet .audit-cell-good    { background: #d4f7e3 !important; color: #064c2a !important; }
      body.printing-audit-packet .audit-cell-short   { background: #ffd6db !important; color: #6a0010 !important; }
      body.printing-audit-packet .audit-cell-full    { background: #e7faef !important; color: #064c2a !important; }
      body.printing-audit-packet .audit-cell-partial { background: #fff2d4 !important; color: #5a3500 !important; }
      body.printing-audit-packet .audit-cell-zero    { background: #ffd6db !important; color: #6a0010 !important; }
    }

    .att-row-actions { white-space: nowrap; padding: 4px 8px; }
    .att-row-actions .att-quick {
      display: inline-block; margin: 0 2px;
      padding: 3px 8px; font-size: 11px; font-weight: 700;
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.10);
      border-radius: 6px; color: var(--muted);
      cursor: pointer;
    }
    .att-row-actions .att-quick:hover {
      background: rgba(54,241,225,0.08);
      border-color: rgba(54,241,225,0.40);
      color: var(--teal);
    }

    .att-makeup-overlay {
      position: fixed; inset: 0; background: rgba(4,11,22,0.78);
      display: flex; align-items: center; justify-content: center;
      z-index: 1000; backdrop-filter: blur(6px);
    }
    .att-makeup-modal {
      background: var(--panel-strong, #0f1c30);
      border: 1px solid rgba(255,255,255,0.10);
      border-radius: 14px; padding: 22px;
      width: min(720px, 92vw); max-height: 92vh; overflow-y: auto;
      box-shadow: 0 18px 60px rgba(0,0,0,0.45);
    }

    /* ===== Lesson Editor (owner-only curriculum authoring) ===== */
    .lesson-editor-shell {
      display: grid;
      grid-template-columns: minmax(320px, 1fr) minmax(0, 2fr);
      gap: 16px;
    }
    @media (max-width: 1100px) {
      .lesson-editor-shell { grid-template-columns: 1fr; }
    }
    .le-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto auto;
      gap: 8px; align-items: center;
      padding: 9px 18px;
      border-top: 1px solid rgba(255,255,255,0.06);
      cursor: pointer;
      transition: background 100ms ease;
    }
    .le-row:hover { background: rgba(54,241,225,0.06); }
    .le-row.active { background: rgba(54,241,225,0.10); border-left: 3px solid var(--teal); padding-left: 15px; }
    .le-row.archived { opacity: 0.55; }
    .le-row .le-row-title { font-size: 13px; font-weight: 700; color: var(--text); line-height: 1.3; }
    .le-row .le-row-meta { font-size: 11px; color: var(--muted); }
    .le-row .le-row-hours {
      font-size: 11px; font-weight: 800; letter-spacing: 0.05em;
      padding: 2px 7px; border-radius: 999px;
      background: rgba(255,200,90,0.16); color: var(--gold);
    }
    .le-group-head {
      font-size: 11px; letter-spacing: 0.10em; color: var(--muted-2);
      text-transform: uppercase; font-weight: 800;
      padding: 14px 18px 4px;
    }

    .le-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      gap: 14px;
      margin-bottom: 16px;
    }
    .le-field { display: grid; gap: 6px; }
    .le-label {
      font-size: 11px; letter-spacing: 0.08em; color: var(--muted-2);
      text-transform: uppercase; font-weight: 800;
    }
    .le-field input, .le-field select, .le-field textarea {
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.10);
      color: var(--text); font-size: 13.5px;
      border-radius: 8px; padding: 8px 10px; min-width: 0;
      font-family: inherit;
    }
    .le-field textarea {
      font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
      font-size: 12.5px; line-height: 1.5; resize: vertical;
      min-height: 320px;
    }
    .le-field input:focus, .le-field select:focus, .le-field textarea:focus {
      outline: none; border-color: rgba(54,241,225,0.5);
      background: rgba(54,241,225,0.04);
    }
    .le-hint { font-size: 11px; color: var(--muted); margin-top: 2px; }
    .le-actions { display: flex; gap: 10px; align-items: center; padding-top: 10px; border-top: 1px solid rgba(255,255,255,0.06); }

    /* Lesson editor markdown split-pane (textarea + live preview side-by-side) */
    .md-toolbar {
      display: flex; gap: 4px; align-items: center; flex-wrap: wrap;
      padding: 6px; margin-bottom: 6px;
      background: rgba(255,255,255,0.03);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 8px;
    }
    .md-toolbar button {
      min-width: 28px; height: 26px; padding: 0 8px;
      background: transparent; border: 1px solid transparent;
      color: var(--muted); font: inherit; font-size: 12px; font-weight: 700;
      border-radius: 6px; cursor: pointer;
    }
    .md-toolbar button:hover {
      background: rgba(54,241,225,0.10);
      border-color: rgba(54,241,225,0.40);
      color: var(--teal);
    }
    .md-split { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: stretch; }
    @media (max-width: 1100px) { .md-split { grid-template-columns: 1fr; } }
    .md-split textarea {
      font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
      font-size: 12.5px; line-height: 1.55;
      min-height: 380px; resize: vertical;
    }
    .md-preview {
      padding: 12px 14px; min-height: 380px;
      background: rgba(255,255,255,0.02);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 10px;
      color: var(--text); font-size: 13.5px; line-height: 1.55;
      overflow-y: auto; max-height: 60vh;
    }
    .md-preview h1 { margin: 0 0 10px; font-size: 20px; color: var(--teal); }
    .md-preview h2 { margin: 18px 0 6px; font-size: 16px; color: var(--text); border-bottom: 1px solid rgba(255,255,255,0.10); padding-bottom: 4px; }
    .md-preview h3 { margin: 14px 0 6px; font-size: 14px; color: var(--muted); }
    .md-preview p  { margin: 0 0 8px; }
    .md-preview ul, .md-preview ol { margin: 0 0 10px; padding-left: 22px; }
    .md-preview li { margin: 2px 0; }
    .md-preview .md-check { list-style: none; margin-left: -22px; }
    .md-preview .md-check input { margin-right: 6px; }
    .md-preview hr { border: 0; border-top: 1px solid rgba(255,255,255,0.10); margin: 14px 0; }
    .md-preview a { color: var(--teal); text-decoration: underline; }
    .md-preview code { background: rgba(255,255,255,0.06); padding: 1px 5px; border-radius: 4px; font-size: 12px; }
    .md-preview strong { color: var(--text); }

    /* ===== Gradebook view: per-assignment stack mode ===== */
    .gb-group { margin-top: 14px; }
    .gb-group:first-child { margin-top: 0; }
    .gb-group-head {
      font-size: 12px; letter-spacing: 0.08em; color: var(--muted-2);
      text-transform: uppercase; font-weight: 800; margin: 0 0 8px;
    }
    .gb-tile-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
    .gb-tile {
      display: grid; gap: 6px;
      padding: 12px 14px;
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 12px;
      background: rgba(255,255,255,0.03);
      cursor: pointer;
      transition: border-color 120ms ease, background 120ms ease, transform 80ms ease;
    }
    .gb-tile:hover { border-color: rgba(54,241,225,0.45); background: rgba(54,241,225,0.04); transform: translateY(-1px); }
    .gb-tile { position: relative; }
    .gb-tile-del {
      position: absolute; top: 6px; right: 6px;
      width: 22px; height: 22px;
      background: rgba(255,83,112,0.10); color: rgba(255,180,190,0.65);
      border: 1px solid transparent; border-radius: 50%;
      font: inherit; font-size: 14px; font-weight: 800; line-height: 18px;
      cursor: pointer; padding: 0; opacity: 0;
      transition: opacity 120ms ease, background 120ms ease, color 120ms ease;
    }
    .gb-tile:hover .gb-tile-del { opacity: 1; }
    .gb-tile-del:hover { background: rgba(255,83,112,0.85); color: #fff; border-color: rgba(255,83,112,0.95); }
    .gb-tile-label { font-size: 13.5px; font-weight: 800; color: var(--text); line-height: 1.3; }
    .gb-tile-meta { display: flex; gap: 8px; align-items: center; font-size: 11px; color: var(--muted); }
    .gb-tile-meta .gb-pill {
      display: inline-block; padding: 2px 7px; border-radius: 999px;
      font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
      background: rgba(54,241,225,0.14); color: var(--teal); font-size: 10px;
    }
    .gb-tile-meta .gb-pill.test       { background: rgba(255,200,90,0.16); color: var(--gold); }
    .gb-tile-meta .gb-pill.practical  { background: rgba(255,83,112,0.16); color: var(--danger); }
    .gb-tile-meta .gb-pill.client_session { background: rgba(139,92,246,0.18); color: #b9a5ff; }
    .gb-tile-meta .gb-pill.participation  { background: rgba(77,232,167,0.16); color: var(--green); }
    .gb-tile-progress { font-size: 11px; color: var(--muted); }
    .gb-tile-progress.complete { color: var(--green); }

    /* Cohort grid mode (rows = students × cols = assignments) */
    .gb-grid-table { border-collapse: separate; border-spacing: 0; min-width: 100%; font-size: 12px; }
    .gb-grid-table th, .gb-grid-table td { padding: 6px 8px; border-bottom: 1px solid rgba(255,255,255,0.06); white-space: nowrap; }
    .gb-grid-table thead th { position: sticky; top: 0; background: rgba(13,25,43,0.96); color: var(--muted); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 800; z-index: 2; }
    .gb-grid-table thead .gp-band { background: rgba(54,241,225,0.10); color: var(--teal); text-align: center; font-size: 11px; }
    .gb-grid-table th.sticky-col, .gb-grid-table td.sticky-col {
      position: sticky; left: 0; background: rgba(13,25,43,0.96); z-index: 1;
      border-right: 1px solid rgba(255,255,255,0.10); font-weight: 700;
    }
    .gb-grid-table thead th.sticky-col { z-index: 3; }
    .gb-grid-table .gb-cell-input {
      width: 56px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.10);
      color: var(--text); font: inherit; padding: 4px 6px; border-radius: 6px; text-align: right;
    }
    .gb-grid-table .gb-cell-input:focus { outline: 0; border-color: var(--teal); background: rgba(54,241,225,0.08); }
    .gb-grid-table .gb-cell-input.saving { border-color: var(--gold); }
    .gb-grid-table .gb-cell-input.saved  { border-color: var(--green); }
    .gb-grid-table .gb-cell-input.error  { border-color: var(--danger); }
    .gb-grid-table .gb-row-avg { color: var(--teal); font-variant-numeric: tabular-nums; font-weight: 800; text-align: right; }
    .gb-grid-table .gb-row-avg.failing { color: var(--danger); }

    /* Heat-map cell shading. Applied to <td> behind the input. */
    .gb-grid-table td.gb-cell { position: relative; }
    .gb-grid-table td.gb-cell.heat-green { background: rgba(77,232,167,0.08); }
    .gb-grid-table td.gb-cell.heat-gold  { background: rgba(255,200,90,0.10); }
    .gb-grid-table td.gb-cell.heat-red   { background: rgba(255,83,112,0.10); }
    .gb-grid-table td.gb-cell.heat-gray  { background: rgba(255,255,255,0.04); }
    .gb-grid-table td.gb-cell.flagged .gb-cell-input { color: var(--muted-2); }
    .gb-cell-wrap { position: relative; display: inline-block; }
    .gb-cell-flag {
      position: absolute; top: -4px; right: -4px;
      min-width: 14px; height: 14px; padding: 0 3px;
      font-size: 9px; font-weight: 900; line-height: 14px;
      text-align: center; border-radius: 7px;
      background: rgba(255,83,112,0.85); color: #fff;
      pointer-events: none;
    }
    .gb-cell-flag.flag-excused    { background: rgba(139,92,246,0.85); }
    .gb-cell-flag.flag-late       { background: rgba(255,200,90,0.95); color: #1a0e02; }
    .gb-cell-flag.flag-incomplete { background: rgba(54,241,225,0.85); color: #001a18; }
    .gb-cell-flag.flag-dropped    { background: rgba(120,120,120,0.85); }

    /* Right-click status menu, single floating element reused for every cell. */
    .gb-cell-menu {
      position: fixed; z-index: 9999; display: none;
      min-width: 180px; padding: 4px;
      background: rgba(13,25,43,0.98); border: 1px solid rgba(255,255,255,0.16);
      border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,0.5);
    }
    .gb-cell-menu.open { display: block; }
    .gb-cell-menu button {
      display: flex; gap: 8px; align-items: center;
      width: 100%; padding: 6px 10px;
      background: transparent; border: 0; color: var(--text);
      font: inherit; font-size: 12.5px; text-align: left;
      border-radius: 6px; cursor: pointer;
    }
    .gb-cell-menu button:hover { background: rgba(54,241,225,0.10); }
    .gb-cell-menu .menu-tag {
      display: inline-block; min-width: 16px; padding: 1px 4px;
      font-size: 9px; font-weight: 900; text-align: center; border-radius: 4px;
    }
    .gb-cell-menu .menu-tag.t-graded     { background: rgba(77,232,167,0.18); color: var(--green); }
    .gb-cell-menu .menu-tag.t-missing    { background: rgba(255,83,112,0.85);   color: #fff; }
    .gb-cell-menu .menu-tag.t-excused    { background: rgba(139,92,246,0.85);   color: #fff; }
    .gb-cell-menu .menu-tag.t-late       { background: rgba(255,200,90,0.95);   color: #1a0e02; }
    .gb-cell-menu .menu-tag.t-incomplete { background: rgba(54,241,225,0.85);   color: #001a18; }
    .gb-cell-menu .menu-tag.t-dropped    { background: rgba(120,120,120,0.85);  color: #fff; }
    .gb-cell-menu .menu-divider { height: 1px; background: rgba(255,255,255,0.08); margin: 4px 2px; }

    .gb-mode-tab.active { background: rgba(54,241,225,0.14) !important; border-color: rgba(54,241,225,0.55) !important; color: var(--teal) !important; }

    /* Focus mode (one assignment × one student at a time, SpeedGrader-style) */
    .gb-focus-pick {
      display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px;
    }
    .gb-focus-pick .gb-tile { padding: 14px 16px; }
    .gb-focus-shell {
      display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 18px;
      padding: 0 0 4px;
    }
    @media (max-width: 980px) { .gb-focus-shell { grid-template-columns: 1fr; } }
    .gb-focus-roster {
      max-height: 60vh; overflow-y: auto;
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 12px; padding: 6px;
      background: rgba(255,255,255,0.02);
    }
    .gb-focus-roster button {
      display: flex; gap: 8px; align-items: center; justify-content: space-between;
      width: 100%; padding: 8px 10px; margin: 2px 0;
      background: transparent; border: 1px solid transparent;
      color: var(--text); font: inherit; font-size: 13px;
      border-radius: 8px; cursor: pointer; text-align: left;
    }
    .gb-focus-roster button:hover { background: rgba(54,241,225,0.06); }
    .gb-focus-roster button.active {
      background: rgba(54,241,225,0.10);
      border-color: rgba(54,241,225,0.4);
      color: var(--teal);
    }
    .gb-focus-roster .focus-roster-pct { font-size: 11px; font-weight: 800; color: var(--muted-2); font-variant-numeric: tabular-nums; }
    .gb-focus-roster button.graded .focus-roster-pct { color: var(--green); }
    .gb-focus-roster button.failing .focus-roster-pct { color: var(--danger); }
    .gb-focus-card {
      border: 1px solid rgba(255,255,255,0.10);
      border-radius: 14px; padding: 22px 22px 18px;
      background: rgba(255,255,255,0.02);
      display: grid; gap: 14px;
    }
    .gb-focus-name { font-size: 24px; font-weight: 800; line-height: 1.1; margin: 0; }
    .gb-focus-meta { color: var(--muted); font-size: 12.5px; margin: -8px 0 4px; }
    .gb-focus-progress { color: var(--muted-2); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 800; }
    .gb-focus-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
    .gb-focus-fields .le-field input[type="number"] {
      font-size: 22px; font-weight: 700; padding: 10px 12px;
    }
    .gb-focus-actions { display: flex; gap: 10px; align-items: center; padding-top: 6px; border-top: 1px solid rgba(255,255,255,0.06); }
    .gb-focus-shortcuts { color: var(--muted-2); font-size: 11px; margin-left: auto; }
    .gb-focus-shortcuts kbd {
      display: inline-block; padding: 1px 6px; margin: 0 2px;
      font-size: 10px; font-family: ui-monospace, Menlo, monospace; font-weight: 700;
      background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); border-radius: 4px;
    }

    /* Rubric grid (rows = criteria, cols = levels). Tap cells to score. */
    .gb-rubric-table {
      border-collapse: separate; border-spacing: 0; width: 100%; font-size: 13px;
      border: 1px solid rgba(255,255,255,0.10); border-radius: 10px; overflow: hidden;
    }
    .gb-rubric-table th, .gb-rubric-table td {
      padding: 10px 12px; border-bottom: 1px solid rgba(255,255,255,0.06);
    }
    .gb-rubric-table thead th {
      background: rgba(255,255,255,0.03); color: var(--muted);
      font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 800;
      text-align: center;
    }
    .gb-rubric-table thead th:first-child { text-align: left; }
    .gb-rubric-table tbody td:first-child { font-weight: 700; }
    .gb-rubric-cell {
      display: block; width: 100%; padding: 10px 12px;
      background: transparent; border: 1px solid rgba(255,255,255,0.10);
      color: var(--text); font: inherit; font-size: 13px; font-weight: 700;
      border-radius: 8px; cursor: pointer; text-align: center;
    }
    .gb-rubric-cell:hover { background: rgba(54,241,225,0.06); border-color: rgba(54,241,225,0.40); }
    .gb-rubric-cell.selected { background: rgba(54,241,225,0.16); border-color: var(--teal); color: var(--teal); }
    .gb-rubric-cell.selected.fail { background: rgba(255,83,112,0.16); border-color: var(--danger); color: var(--danger); }
    .gb-rubric-cell.selected.redo { background: rgba(255,200,90,0.18); border-color: var(--gold); color: var(--gold); }
    .gb-rubric-summary {
      display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center;
      padding: 12px 14px;
      background: rgba(255,255,255,0.03);
      border: 1px solid rgba(255,255,255,0.10);
      border-radius: 10px;
    }
    .gb-rubric-summary .rubric-pct { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; }
    .gb-rubric-summary .rubric-pct.pass { color: var(--green); }
    .gb-rubric-summary .rubric-pct.fail { color: var(--danger); }

    /* Stack mode (one assignment × N students) */
    .gb-stack-row {
      display: grid;
      grid-template-columns: minmax(0, 2fr) 90px 90px 110px minmax(0, 1.2fr) auto;
      gap: 8px; align-items: center;
      padding: 10px 18px;
      border-top: 1px solid rgba(255,255,255,0.06);
    }
    .gb-stack-row .gb-stack-name { font-size: 13px; font-weight: 700; }
    .gb-stack-row input, .gb-stack-row select {
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.10);
      color: var(--text); font-size: 13px;
      border-radius: 8px; padding: 6px 8px; min-width: 0;
    }
    .gb-stack-row input:focus, .gb-stack-row select:focus {
      outline: none; border-color: rgba(54,241,225,0.5);
      background: rgba(54,241,225,0.05);
    }
    .gb-stack-row .gb-stack-pct {
      font-size: 12px; color: var(--muted); text-align: right;
      font-variant-numeric: tabular-nums;
    }
    .gb-stack-row .gb-stack-pct strong { color: var(--text); font-weight: 800; }
    .gb-stack-row.saving .gb-stack-pct { color: var(--gold); }
    .gb-stack-row.saved  .gb-stack-pct strong { color: var(--green); }
    .gb-stack-row.error  { background: rgba(255,83,112,0.06); }
    @media (max-width: 900px) {
      .gb-stack-row { grid-template-columns: 1fr 1fr; row-gap: 4px; }
      .gb-stack-row .gb-stack-name { grid-column: 1 / -1; }
    }

    /* Today's Lesson card — green glow signals it's clickable. */
    @keyframes instrTodayGlow {
      0%, 100% { box-shadow: 0 0 0 1px rgba(77,232,167,0.55), 0 0 22px rgba(77,232,167,0.18); }
      50%      { box-shadow: 0 0 0 1px rgba(77,232,167,0.85), 0 0 38px rgba(77,232,167,0.42); }
    }
    .instr-today-clickable {
      border: 1px solid rgba(77,232,167,0.45);
      background: linear-gradient(135deg, rgba(77,232,167,0.10), rgba(77,232,167,0.02));
      border-radius: 12px;
      padding: 10px 12px;
      animation: instrTodayGlow 2.6s ease-in-out infinite;
      transition: transform 120ms ease, background 120ms ease;
    }
    .instr-today-clickable:hover {
      background: linear-gradient(135deg, rgba(77,232,167,0.18), rgba(77,232,167,0.06));
      transform: translateY(-1px);
    }
    .instr-today-clickable strong { color: var(--green); }

    /* ===== Instructor home block (data-role-only="staff") ===== */
    .instructor-home { display: grid; gap: 16px; margin-bottom: 22px; }
    .instructor-home .three-col {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 16px;
    }
    .instructor-home .ops-list > div {
      display: grid;
      gap: 3px;
      padding: 10px 12px;
      border: 1px solid rgba(255,255,255,0.07);
      border-radius: 12px;
      background: rgba(255,255,255,0.035);
    }
    .instructor-home .ops-list > div strong {
      display: block;
      font-size: 13px;
      color: var(--text);
    }
    .instructor-home .ops-list > div span {
      display: block;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.45;
    }
    @media (max-width: 900px) {
      .instructor-home .three-col { grid-template-columns: 1fr; }
    }

    .ops-row {
      display: grid;
      grid-template-columns: 40px minmax(0, 1fr) auto;
      gap: 10px;
      align-items: center;
      min-height: 54px;
      padding: 10px;
      border: 1px solid rgba(255,255,255,0.07);
      border-radius: 14px;
      background: rgba(255,255,255,0.035);
    }

    .ops-avatar {
      width: 36px;
      height: 36px;
      display: grid;
      place-items: center;
      border-radius: 12px;
      color: #03101c;
      background: linear-gradient(135deg, var(--gold), var(--teal));
      font-weight: 900;
      overflow: hidden;
    }

    .ops-row strong { display: block; font-size: 13px; }
    .ops-row span { display: block; margin-top: 3px; color: var(--muted); font-size: 12px; line-height: 1.3; }
    .ops-time { color: var(--muted-2); font-size: 11px; white-space: nowrap; }

    .online-user {
      margin: 4px 18px 18px;
      display: grid;
      grid-template-columns: 44px minmax(0, 1fr) auto;
      gap: 12px;
      align-items: center;
      padding: 12px 14px;
      border: 1px solid var(--line);
      border-radius: var(--radius-sm);
      background: rgba(13,25,43,0.55);
      transition: 160ms ease;
    }
    .online-user:hover { border-color: rgba(54,241,225,0.32); background: linear-gradient(135deg, rgba(54,241,225,0.08), rgba(13,25,43,0.55)); transform: translateY(-1px); }
    .online-user .ops-avatar { background: linear-gradient(135deg, var(--teal), var(--blue)); color: #03101c; font-weight: 900; }
    .online-user strong { display: block; font-size: 13px; line-height: 1.3; }
    .online-user > span:nth-child(2) > span { display: block; margin-top: 4px; color: var(--muted); font-size: 11.5px; }

    .online-dot {
      width: 9px;
      height: 9px;
      border-radius: 50%;
      background: var(--green);
      box-shadow: 0 0 0 5px rgba(77,232,167,.12);
      animation: statusPing 2.4s ease-in-out infinite;
    }

    .catalog-manager {
      margin-top: 22px;
    }

    .catalog-toolbar {
      display: grid;
      grid-template-columns: minmax(190px, 1fr) repeat(3, minmax(130px, 180px)) auto;
      gap: 10px;
      padding: 0 18px 16px;
    }

    .catalog-toolbar input,
    .catalog-toolbar select {
      min-height: 40px;
      border: 1px solid var(--line);
      border-radius: 12px;
      padding: 0 12px;
      color: var(--text);
      background: rgba(255,255,255,0.055);
      outline: 0;
    }

    .catalog-kpis {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 10px;
      padding: 0 18px 16px;
    }

    .catalog-kpi {
      padding: 13px;
      border: 1px solid rgba(255,255,255,0.07);
      border-radius: 14px;
      background: rgba(255,255,255,0.035);
    }

    .catalog-kpi span { display: block; color: var(--muted); font-size: 12px; }
    .catalog-kpi strong { display: block; margin-top: 5px; font-size: 22px; letter-spacing: -0.04em; }

    .catalog-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 14px;
      padding: 0 18px 18px;
    }

    .catalog-card {
      position: relative;
      min-height: 244px;
      display: grid;
      grid-template-rows: 92px minmax(0, 1fr) auto;
      overflow: hidden;
      border: 1px solid rgba(137, 189, 255, 0.16);
      border-radius: 16px;
      background: rgba(11, 20, 36, 0.9);
      box-shadow: 0 14px 36px rgba(0,0,0,0.2);
    }

    .catalog-cover {
      position: relative;
      background: var(--cover);
    }

    .catalog-cover::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, rgba(5,11,20,.04), rgba(5,11,20,.72));
    }

    .catalog-status {
      position: absolute;
      top: 10px;
      left: 10px;
      z-index: 1;
      min-height: 26px;
      padding: 5px 8px;
      border-radius: 9px;
      color: #06111d;
      background: var(--green);
      font-size: 11px;
      font-weight: 900;
    }

    .catalog-status.private { background: var(--gold); }
    .catalog-status.draft { background: #d6dee9; }
    .catalog-status.soon { background: var(--cyan); }

    .catalog-hours {
      position: absolute;
      right: 10px;
      bottom: 10px;
      z-index: 1;
      padding: 4px 7px;
      border-radius: 999px;
      color: #eaf5ff;
      background: rgba(5,11,20,.72);
      font-size: 11px;
      font-weight: 850;
    }

    .catalog-body {
      padding: 13px;
    }

    .catalog-body h3 {
      margin: 0 0 7px;
      font-size: 15px;
      line-height: 1.2;
      letter-spacing: -0.02em;
    }

    .catalog-body p {
      margin: 0;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.4;
    }

    .catalog-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-top: 10px;
    }

    .catalog-tags span {
      padding: 5px 7px;
      border-radius: 999px;
      color: #cfe0f5;
      background: rgba(255,255,255,0.07);
      font-size: 11px;
      font-weight: 760;
    }

    .catalog-foot {
      display: grid;
      grid-template-columns: 1fr 1fr;
      border-top: 1px solid rgba(255,255,255,0.07);
    }

    .catalog-foot div {
      padding: 10px 12px;
      border-right: 1px solid rgba(255,255,255,0.07);
    }

    .catalog-foot div:last-child { border-right: 0; text-align: right; }
    .catalog-foot span { display: block; color: var(--muted); font-size: 11px; }
    .catalog-foot strong { display: block; margin-top: 3px; font-size: 13px; }
    /* Plan 5a — published Module cards in the Library */
    .cb-mod-card {
      display: flex; flex-direction: column;
      background: var(--card, #0c1626);
      border: 1px solid rgba(134,190,255,0.14);
      border-radius: 14px; overflow: hidden; cursor: pointer;
      transition: border-color .15s, transform .15s;
      min-width: 240px; max-width: 300px;
    }
    .cb-mod-card:hover { border-color: rgba(54,241,225,0.4); transform: translateY(-2px); }
    .cb-mod-cover {
      height: 120px; background: linear-gradient(135deg, #14233d, #0a1422);
      background-size: cover; background-position: center;
      display: grid; place-items: center; color: rgba(255,255,255,0.25); font-size: 28px;
    }
    .cb-mod-tag {
      align-self: flex-start; margin: 10px 12px 0;
      font-size: 10px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase;
      color: #36f1e1; background: rgba(54,241,225,0.12);
      padding: 2px 8px; border-radius: 4px;
    }
    .cb-mod-body { padding: 8px 12px 14px; flex: 1; display: flex; flex-direction: column; gap: 6px; }
    .cb-mod-title { font-size: 14px; font-weight: 600; color: #f5f8ff; }
    .cb-mod-subject { font-size: 11px; color: var(--muted, #96a5ba); }
    .cb-mod-meta { font-size: 11px; color: var(--muted, #96a5ba); margin-top: auto; }
    .cb-mod-progress-track {
      height: 6px; border-radius: 3px; background: rgba(255,255,255,0.08); margin-top: 8px;
    }
    .cb-mod-progress-fill { height: 100%; border-radius: 3px; background: #36f1e1; }
    /* Plan 5a — Module landing page */
    .cb-land-hero {
      border-radius: 16px; overflow: hidden; margin-bottom: 20px;
      background: linear-gradient(135deg, #14233d, #0a1422);
      background-size: cover; background-position: center;
      padding: 28px; border: 1px solid rgba(134,190,255,0.14);
    }
    .cb-land-hero h1 { margin: 0 0 8px; font-size: 26px; color: #f5f8ff; }
    .cb-land-badges { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
    .cb-land-badge {
      font-size: 11px; font-weight: 600; color: #36f1e1;
      background: rgba(54,241,225,0.12); padding: 3px 10px; border-radius: 5px;
    }
    .cb-land-desc { color: var(--muted, #96a5ba); font-size: 14px; max-width: 640px; }
    .cb-land-cta {
      margin-top: 18px; padding: 11px 28px; border-radius: 9px; border: none; cursor: pointer;
      font-size: 14px; font-weight: 700;
      background: linear-gradient(90deg, #36f1e1, #2f6fff); color: #04121f;
    }
    .cb-land-cta:disabled { opacity: 0.5; cursor: default; background: rgba(255,255,255,0.12); color: var(--muted,#96a5ba); }
    .cb-land-cta-note { font-size: 12px; color: var(--muted, #96a5ba); margin-top: 8px; }
    .cb-syl-row {
      display: flex; align-items: center; gap: 12px;
      padding: 12px 14px; border-radius: 10px;
      border: 1px solid rgba(134,190,255,0.12); margin-bottom: 8px;
      background: rgba(255,255,255,0.02);
    }
    .cb-syl-row.is-playable { cursor: pointer; }
    .cb-syl-row.is-playable:hover { border-color: rgba(54,241,225,0.4); }
    .cb-syl-num { font-variant-numeric: tabular-nums; font-weight: 700; color: rgba(255,255,255,0.4); min-width: 28px; }
    .cb-syl-title { flex: 1; color: #f5f8ff; font-size: 14px; }
    .cb-syl-chip { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.6px; padding: 2px 8px; border-radius: 4px; }
    .cb-syl-chip.standard  { background: rgba(97,185,255,0.15);  color: #61b9ff; }
    .cb-syl-chip.test      { background: rgba(255,200,90,0.15);  color: #ffc85a; }
    .cb-syl-chip.group     { background: rgba(146,109,255,0.15); color: #926dff; }
    .cb-syl-chip.milestone { background: rgba(77,232,167,0.15);  color: #4de8a7; }
    .cb-syl-chip.draft     { background: rgba(255,83,112,0.15);  color: #ff5370; }
    .cb-syl-mark { font-size: 16px; min-width: 20px; text-align: center; }
    .cb-syl-mark.done { color: #4de8a7; }
    .cb-syl-mark.in_progress { color: #ffc85a; }
    .cb-syl-mark.not_started { color: rgba(255,255,255,0.25); }
    .cb-land-eyebrow { font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: #36f1e1; margin-bottom: 6px; }
    .cb-land-hero { position: relative; overflow: hidden; }
    .cb-land-deco { position: absolute; inset: 0; pointer-events: none; opacity: .15;
      background-image: radial-gradient(currentColor 1px, transparent 1px); background-size: 16px 16px;
      -webkit-mask-image: linear-gradient(90deg, transparent 60%, #000); mask-image: linear-gradient(90deg, transparent 60%, #000); }
    .cb-land-video { margin: 14px 0; border-radius: 12px; overflow: hidden; max-width: 640px; aspect-ratio: 16/9; }
    .cb-land-video iframe, .cb-land-video video { width: 100%; height: 100%; border: 0; display: block; }
    .cb-land-gallery { display: flex; flex-wrap: wrap; gap: 14px; margin: 14px 0; }
    .cb-land-gallery figure { margin: 0; width: 150px; }
    .cb-land-gallery img { width: 150px; height: 110px; object-fit: cover; border-radius: 10px; display: block; }
    .cb-land-gallery figcaption { font-size: 12px; margin-top: 6px; font-weight: 600; }
    .cb-land-enroll { background: linear-gradient(135deg, #d7b98a, #c7a063); color: #1a1206; font-weight: 700; }
    .cb-syl-block { border-bottom: 1px solid rgba(255,255,255,.06); }
    .cb-syl-acts { padding: 4px 0 10px 46px; }
    .cb-syl-act { display: flex; align-items: center; gap: 10px; padding: 4px 0; font-size: 13px; color: #b9c6dd; }
    .cb-syl-act-icon { opacity: .8; width: 18px; text-align: center; }
    .cb-syl-act-title { flex: 1 1 auto; }
    .cb-syl-act-main { font-size: 10px; letter-spacing: 1px; color: #36f1e1; }
    .cb-syl-act-meta { font-size: 12px; color: #7e93b8; }
    .cb-syl-act-playable { cursor: pointer; }
    .cb-syl-act-playable:hover { color: #eaf1fb; }
    .cb-syl-act-play { color: #36f1e1; font-size: 11px; opacity: .85; }
    .cb-syl-act-playable:hover .cb-syl-act-play { opacity: 1; }
    /* Inline video-activity player modal (student module landing) */
    .cb-actvid-ov { position: fixed; inset: 0; z-index: 4000; display: flex; align-items: center; justify-content: center; background: rgba(5,11,20,0.78); padding: 20px; }
    .cb-actvid-modal { width: 100%; max-width: 900px; background: #0f1f35; border: 1px solid rgba(120,150,200,0.25); border-radius: 14px; box-shadow: 0 30px 70px rgba(0,0,0,0.6); }
    .cb-actvid-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid rgba(120,150,200,0.18); }
    .cb-actvid-head h3 { margin: 0; font-size: 15px; color: #eaf1fb; word-break: break-word; }
    .cb-actvid-x { border: 0; background: transparent; color: #9fb3c8; font-size: 16px; cursor: pointer; padding: 4px 8px; border-radius: 6px; }
    .cb-actvid-x:hover { color: #fff; background: rgba(255,255,255,0.08); }

    .rightbar {
      position: sticky;
      top: 0;
      height: 100vh;
      overflow-y: auto;
      padding: 86px 20px 30px 0;
      scrollbar-width: thin;
    }

    /* Hide the right widget rail on iframe-embedded full-canvas views so the
       inner page (e.g. live-schedule.html's calendar) gets the full horizontal
       area. switchView() stamps the active view onto <body data-active-view>;
       any view in this selector list runs without the rightbar AND with the
       middle column expanded to fill the freed grid track. Add more views
       here if they become iframe-heavy and benefit from the extra width. */
    body[data-active-view="Lab Schedule"] .rightbar,
    body[data-active-view="My Lab Schedule"] .rightbar,
    body[data-active-view="Transfer Catalog"] .rightbar,
    body[data-active-view="Knowledge Quest"] .rightbar,
    body[data-active-view="Avatar Studio"] .rightbar,
    body[data-active-view="Pressure Point"] .rightbar {
      display: none;
    }
    body[data-active-view="Lab Schedule"] .app-shell,
    body[data-active-view="My Lab Schedule"] .app-shell,
    body[data-active-view="Transfer Catalog"] .app-shell,
    body[data-active-view="Knowledge Quest"] .app-shell,
    body[data-active-view="Avatar Studio"] .app-shell,
    body[data-active-view="Pressure Point"] .app-shell {
      grid-template-columns: var(--sidebar) minmax(620px, 1fr);
    }

    /* ===== Student read-only Lab Schedule (month-grid calendar) ===== */
    /* Mirrors the staff Live Class Schedule look (stat tiles, progress bar,
       month grid) but is purely a VIEW — no drag, no edit, student-safe data
       from course-api student_cohort_schedule. */
    .sls-wrap { display:flex; flex-direction:column; gap:16px; }
    .sls-stats { display:grid; grid-template-columns:repeat(5,1fr); gap:12px; }
    @media (max-width:1100px){ .sls-stats{ grid-template-columns:repeat(2,1fr);} }
    .sls-stat { border:1px solid var(--line); border-radius:var(--radius-md);
      background:linear-gradient(180deg,rgba(14,26,45,.86),rgba(9,18,32,.86));
      padding:14px 16px; box-shadow:inset 0 1px 0 rgba(255,255,255,.04); }
    .sls-stat .lbl { font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); font-weight:700; }
    .sls-stat .val { font-size:26px; font-weight:800; margin-top:6px; letter-spacing:-.02em; color:var(--text); }
    .sls-stat .val.teal { color:var(--teal); } .sls-stat .val.green{ color:var(--green);} .sls-stat .val.gold{ color:var(--gold);}
    .sls-card { border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden;
      background:linear-gradient(180deg,rgba(14,26,45,.9),rgba(9,18,32,.92)); box-shadow:var(--shadow); }
    .sls-head { display:flex; align-items:center; justify-content:space-between; gap:14px;
      padding:16px 20px; border-bottom:1px solid var(--line); flex-wrap:wrap; }
    .sls-head h3 { margin:0; font-size:18px; letter-spacing:-.02em; }
    .sls-head .sub { color:var(--muted); font-size:12.5px; margin-top:3px; }
    .sls-head .sub strong { color:var(--cyan); }
    .sls-navbtns { display:flex; align-items:center; gap:8px; }
    .sls-navbtns button { all:unset; cursor:pointer; min-width:38px; text-align:center;
      padding:8px 12px; border:1px solid var(--line); border-radius:10px; color:var(--text);
      font-weight:700; font-size:13px; background:rgba(0,0,0,.25); transition:background .15s,border-color .15s; }
    .sls-navbtns button:hover { background:var(--panel-hover); border-color:var(--line-strong); }
    .sls-progress { padding:12px 20px 14px; border-bottom:1px solid var(--line); display:flex; flex-direction:column; gap:6px; }
    .sls-progress .t { font-size:12px; color:var(--muted); font-weight:600; letter-spacing:.04em; }
    .sls-progress .t strong { color:#fff; }
    .sls-bar { width:100%; height:8px; background:rgba(255,255,255,.05); border-radius:999px; overflow:hidden; }
    .sls-fill { height:100%; background:linear-gradient(90deg,#36f1e1,#4de8a7); border-radius:999px; transition:width .4s ease; }
    .sls-month { padding:6px 14px 16px; }
    .sls-month-title { font-size:18px; font-weight:800; margin:10px 6px 12px; letter-spacing:-.01em; }
    .sls-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:6px; }
    .sls-dow { text-align:left; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
      color:var(--muted-2); font-weight:700; padding:2px 6px 4px; }
    .sls-cell { min-height:96px; border:1px solid var(--line); border-radius:12px; padding:6px 7px;
      background:rgba(0,0,0,.18); display:flex; flex-direction:column; gap:4px; }
    .sls-cell.empty { background:transparent; border-color:transparent; }
    .sls-cell.today { border-color:var(--teal); box-shadow:0 0 0 1px var(--teal) inset; }
    .sls-daynum { font-size:12px; font-weight:700; color:var(--muted); }
    .sls-cell.today .sls-daynum { color:var(--teal); }
    .sls-pill { display:flex; align-items:center; justify-content:space-between; gap:6px;
      font-size:11.5px; line-height:1.25; padding:5px 7px; border-radius:8px; font-weight:600;
      background:rgba(54,241,225,.10); border:1px solid rgba(54,241,225,.28); color:#dffaf6; }
    .sls-pill.done { background:rgba(77,232,167,.12); border-color:rgba(77,232,167,.34); color:#d8ffe9; }
    .sls-pill.disrupted { background:rgba(255,83,112,.12); border-color:rgba(255,83,112,.34); color:#ffd9df; }
    .sls-pill .ttl { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .sls-pill .hr { flex:none; font-size:10px; font-weight:800; opacity:.85; }
    .sls-empty-state, .sls-loading { padding:36px 20px; text-align:center; color:var(--muted); }

    .widget {
      position: relative;
      margin-bottom: 14px;
      border-radius: var(--radius-md);
      border: 1px solid var(--line);
      background: linear-gradient(180deg, rgba(14, 26, 45, 0.86), rgba(9, 18, 32, 0.86));
      box-shadow: 0 16px 44px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.04);
      overflow: hidden;
    }

    .widget::before {
      content: "";
      position: absolute;
      inset: 0 auto 0 0;
      width: 3px;
      background: linear-gradient(180deg, transparent, var(--teal), transparent);
      opacity: .55;
      animation: statusPing 3.8s ease-in-out infinite;
    }

    .widget-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 18px 18px 12px;
    }

    .widget-title { margin: 0; font-size: 16px; }
    .widget-link { color: #86cfff; font-size: 13px; text-decoration: none; font-weight: 720; }
    .widget-link:hover { color: var(--teal); }

    /* Upcoming Sessions — branded card list */
    .session {
      position: relative;
      width: 100%;
      display: grid;
      grid-template-columns: 46px 1fr auto;
      gap: 12px;
      align-items: center;
      padding: 12px 14px;
      margin: 8px 0 0;
      border: 1px solid var(--line);
      border-radius: var(--radius-sm);
      background: rgba(13,25,43,0.55);
      color: var(--text);
      text-align: left;
      transition: 160ms ease;
      cursor: pointer;
    }

    .session:first-child { margin-top: 12px; }

    .session:hover {
      border-color: rgba(54,241,225,0.32);
      background: linear-gradient(135deg, rgba(54,241,225,0.08), rgba(13,25,43,0.55));
      transform: translateY(-1px);
    }

    .session-icon {
      display: grid;
      place-items: center;
      width: 42px;
      height: 42px;
      border-radius: 11px;
      background: linear-gradient(135deg, rgba(54,241,225,0.18), rgba(47,111,255,0.18));
      border: 1px solid rgba(54,241,225,0.25);
      color: var(--teal);
    }
    .session-icon svg { width: 18px; height: 18px; }

    .session strong { display: block; font-size: 13px; line-height: 1.3; font-weight: 700; }
    .session strong em { font-style: normal; font-weight: 600; color: var(--teal); font-size: 10.5px; letter-spacing: 0.10em; text-transform: uppercase; display: block; margin-bottom: 2px; }
    .session > span:nth-child(2) > span { display: block; margin-top: 4px; color: var(--muted); font-size: 11.5px; }

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

    .avatar-xs {
      width: 24px;
      height: 24px;
      margin-left: -7px;
      border-radius: 50%;
      border: 2px solid #0c1728;
      background: linear-gradient(135deg, var(--teal), var(--blue));
    }

    .avatar-xs:first-child { margin-left: 0; }

    .plus {
      display: grid;
      place-items: center;
      min-width: 30px;
      height: 24px;
      padding: 0 6px;
      margin-left: -6px;
      border-radius: 999px;
      border: 2px solid #0c1728;
      background: rgba(54,241,225,0.18);
      color: var(--teal);
      font-size: 10px;
      font-weight: 850;
      letter-spacing: 0.04em;
    }

    .widget-footer {
      display: block;
      padding: 12px 18px 15px;
      text-align: center;
      border-top: 1px solid var(--line);
      color: var(--teal);
      text-decoration: none;
      font-weight: 700;
      font-size: 12.5px;
      letter-spacing: 0.04em;
      transition: 140ms ease;
    }
    .widget-footer:hover { color: var(--text); background: rgba(54,241,225,0.06); }

    .progress-widget-body {
      display: grid;
      grid-template-columns: 145px 1fr;
      gap: 18px;
      align-items: center;
      padding: 4px 18px 18px;
    }

    .ring {
      --percent: 72;
      width: 132px;
      aspect-ratio: 1;
      border-radius: 50%;
      display: grid;
      place-items: center;
      background: conic-gradient(var(--teal) calc(var(--percent) * 1%), rgba(255,255,255,0.12) 0);
      position: relative;
      box-shadow: 0 0 38px rgba(54,241,225,0.1);
      animation: softPulse 6s ease-in-out infinite;
    }

    .ring::before {
      content: "";
      position: absolute;
      inset: 9px;
      border-radius: 50%;
      background: #0b1627;
      box-shadow: inset 0 0 28px rgba(0,0,0,0.2);
    }

    .ring-label {
      position: relative;
      text-align: center;
    }

    .ring-label strong { display: block; font-size: 32px; letter-spacing: -0.05em; }
    .ring-label span { display: block; color: #96a8bd; font-size: 11px; margin-top: -2px; }

    /* Small ring variant — inline progress inside a card (Hours toward Licensure). */
    .ring.ring-sm { width: 78px; flex: 0 0 auto; box-shadow: 0 0 16px rgba(54,241,225,0.08); animation: none; }
    .ring.ring-sm::before { inset: 7px; }
    .ring.ring-sm .ring-label strong { font-size: 19px; }
    .ring.ring-sm .ring-label span { font-size: 8.5px; margin-top: 0; }

    .legend { display: grid; gap: 13px; }

    .legend-item {
      display: grid;
      grid-template-columns: 10px 1fr;
      gap: 9px;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.25;
    }

    .dot { width: 8px; height: 8px; margin-top: 4px; border-radius: 50%; background: var(--teal); animation: statusPing 2.8s ease-in-out infinite; }
    .dot.gold { background: var(--gold); }
    .dot.gray { background: #8793a6; }
    .legend-item strong { color: #dfeaff; font-weight: 770; }

    .stats-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
      padding: 4px 18px 18px;
    }

    .stat {
      padding: 12px 10px;
      border: 1px solid var(--line);
      border-radius: var(--radius-sm);
      background: rgba(13,25,43,0.55);
      transition: 160ms ease;
    }
    .stat:hover { border-color: rgba(54,241,225,0.32); transform: translateY(-1px); }
    .stat span { display: block; color: var(--muted); font-size: 11px; letter-spacing: 0.06em; line-height: 1.3; min-height: 28px; }
    .stat strong { display: block; margin-top: 4px; font-size: 22px; letter-spacing: -0.02em; font-weight: 820; }
    .delta { display: inline-block; margin-top: 4px; color: var(--green); font-size: 11px; font-weight: 800; }

    .insight-body {
      display: grid;
      grid-template-columns: 1fr 120px;
      gap: 10px;
      align-items: center;
      padding: 4px 18px 22px;
    }

    .insight-body p {
      margin: 0;
      color: #ccd8e9;
      font-size: 14px;
      line-height: 1.42;
    }

    .insight-body b { color: var(--green); }

    .sparkline {
      width: 120px;
      height: 60px;
    }

    .coach-card {
      padding: 18px;
    }

    .coach-orb {
      width: 48px;
      height: 48px;
      display: grid;
      place-items: center;
      border-radius: 15px;
      color: #03101c;
      font-weight: 950;
      background: linear-gradient(135deg, var(--teal), var(--blue));
      box-shadow: 0 0 34px rgba(54,241,225,0.2);
      animation: softPulse 4.2s ease-in-out infinite;
    }

    .coach-card-body {
      display: grid;
      grid-template-columns: 48px minmax(0, 1fr);
      gap: 13px;
      align-items: center;
      margin-bottom: 14px;
    }

    .coach-card-body p {
      margin: 4px 0 0;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.4;
    }

    .wallet-list {
      display: grid;
      gap: 10px;
      padding: 4px 18px 18px;
    }

    .wallet-item {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 12px;
      align-items: center;
      padding: 12px 14px;
      border: 1px solid var(--line);
      border-radius: var(--radius-sm);
      background: rgba(13,25,43,0.55);
      transition: 160ms ease;
    }

    .wallet-item:hover { border-color: rgba(54,241,225,0.32); background: linear-gradient(135deg, rgba(54,241,225,0.08), rgba(13,25,43,0.55)); transform: translateY(-1px); }
    .wallet-item strong { display: block; font-size: 13px; line-height: 1.3; }
    .wallet-item > span:first-child > span { display: block; margin-top: 4px; color: var(--muted); font-size: 11.5px; }

    .wallet-badge {
      min-width: 64px;
      padding: 5px 12px;
      border-radius: 999px;
      color: var(--green);
      background: rgba(77,232,167,0.14);
      border: 1px solid rgba(77,232,167,0.28);
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.05em;
      text-align: center;
    }

    .wallet-badge.pending {
      color: var(--gold);
      background: rgba(255,200,90,0.14);
      border-color: rgba(255,200,90,0.28);
    }

    .coach-fab {
      position: fixed;
      right: 24px;
      bottom: 24px;
      z-index: 9;
      display: inline-flex;
      align-items: center;
      gap: 10px;
      min-height: 48px;
      padding: 0 16px;
      border: 0;
      border-radius: 999px;
      color: #03101c;
      background: linear-gradient(135deg, var(--teal), var(--blue));
      font-weight: 900;
      box-shadow: 0 22px 52px rgba(54,241,225,0.22);
      animation: softPulse 4.8s ease-in-out infinite;
    }

    .coach-drawer {
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      z-index: 12;
      width: min(420px, 100vw);
      display: grid;
      grid-template-rows: auto minmax(0, 1fr) auto;
      background:
        radial-gradient(circle at 82% 8%, rgba(54,241,225,0.18), transparent 32%),
        linear-gradient(180deg, rgba(11, 22, 39, 0.98), rgba(5, 11, 20, 0.98));
      border-left: 1px solid var(--line-strong);
      box-shadow: -28px 0 80px rgba(0,0,0,0.42);
      transform: translateX(104%);
      transition: transform 220ms ease;
    }

    .coach-drawer.open { transform: translateX(0); }

    .coach-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      padding: 22px;
      border-bottom: 1px solid var(--line);
    }

    .coach-head h2 {
      margin: 0;
      font-size: 20px;
    }

    .coach-head p {
      margin: 4px 0 0;
      color: var(--muted);
      font-size: 13px;
    }

    .coach-body {
      display: grid;
      align-content: start;
      gap: 12px;
      padding: 18px;
      overflow-y: auto;
    }

    .coach-message {
      padding: 13px;
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 16px;
      color: #dfeaff;
      background: rgba(255,255,255,0.045);
      line-height: 1.45;
      font-size: 14px;
    }

    .coach-message.ai {
      border-color: rgba(54,241,225,0.18);
      background: rgba(54,241,225,0.08);
    }

    .coach-prompts {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .coach-prompts button {
      min-height: 34px;
      padding: 0 11px;
      border: 1px solid var(--line);
      border-radius: 999px;
      color: #dce8f8;
      background: rgba(255,255,255,0.04);
    }

    .coach-compose {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 10px;
      padding: 16px;
      border-top: 1px solid var(--line);
    }

    .coach-compose input {
      min-height: 42px;
      border: 1px solid var(--line);
      border-radius: 13px;
      padding: 0 12px;
      color: var(--text);
      background: rgba(255,255,255,0.055);
      outline: 0;
    }

    .toast {
      position: fixed;
      right: 24px;
      bottom: 24px;
      z-index: 50;
      min-width: 260px;
      max-width: 360px;
      padding: 15px 16px;
      border: 1px solid rgba(54,241,225,0.25);
      border-radius: 16px;
      background: rgba(9, 18, 32, 0.92);
      color: var(--text);
      box-shadow: 0 24px 80px rgba(0,0,0,0.38);
      backdrop-filter: blur(16px);
      transform: translateY(20px);
      opacity: 0;
      pointer-events: none;
      transition: 220ms ease;
    }

    .toast.show { transform: translateY(0); opacity: 1; animation: toastGlow 1.8s ease-in-out infinite; }

    .modal-backdrop {
      position: fixed;
      inset: 0;
      z-index: 60;
      display: none;
      place-items: center;
      padding: 24px;
      background: rgba(0,0,0,0.62);
      backdrop-filter: blur(10px);
    }

    .modal-backdrop.open { display: grid; }

    .modal {
      width: min(620px, 100%);
      max-height: calc(100vh - 48px);
      max-height: calc(100dvh - 48px);
      display: flex;
      flex-direction: column;
      border: 1px solid var(--line-strong);
      border-radius: 24px;
      overflow: hidden;
      background:
        radial-gradient(circle at 84% 12%, rgba(54,241,225,0.14), transparent 26%),
        linear-gradient(180deg, rgba(17, 32, 54, 0.98), rgba(8, 17, 31, 0.98));
      box-shadow: 0 30px 90px rgba(0,0,0,0.55);
      animation: modalBloom 180ms ease-out;
    }

    .modal-cover { flex: 0 0 auto; }

    .modal-cover {
      min-height: 170px;
      background: var(--modal-art, linear-gradient(135deg, #102744, #1b5b78));
      position: relative;
    }

    .modal-cover::before {
      content: "";
      position: absolute;
      inset: -20% auto -20% -42%;
      width: 30%;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent);
      animation: gleamSweep 4.8s ease-in-out infinite;
      pointer-events: none;
    }

    .modal-cover::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, transparent, rgba(8,17,31,0.96));
    }

    .modal-content {
      padding: 24px;
      overflow-y: auto;
      overscroll-behavior: contain;
      -webkit-overflow-scrolling: touch;
    }

    .modal-kicker {
      color: var(--teal);
      font-size: 12px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      font-weight: 850;
    }

    .modal h2 {
      margin: 8px 0 8px;
      font-size: 32px;
      letter-spacing: -0.05em;
    }

    .modal p { color: #bfccdf; line-height: 1.55; margin: 0 0 20px; }

    .modal-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 10px;
      margin: 14px 0 18px;
    }

    .modal-metric {
      padding: 12px 14px;
      border: 1px solid var(--line);
      border-radius: 12px;
      background: rgba(13,25,43,0.55);
    }

    .modal-metric span { display: block; color: var(--muted-2); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 800; }
    .modal-metric strong { display: block; margin-top: 4px; font-size: 17px; font-weight: 820; }

    .modal-actions { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; padding-top: 14px; border-top: 1px solid var(--line); }
    .modal-actions .modal-action-meta { color: var(--muted); font-size: 12px; }
    .modal-actions .modal-action-buttons { display: flex; gap: 8px; flex-wrap: wrap; }

    .modal-status-pill {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 4px 10px;
      border-radius: 999px; font-size: 11px; font-weight: 800;
      letter-spacing: 0.06em; text-transform: uppercase;
    }
    .modal-status-pill.owned { background: rgba(77,232,167,0.14); color: var(--green); border: 1px solid rgba(77,232,167,0.32); }
    .modal-status-pill.locked { background: rgba(255,200,90,0.14); color: var(--gold); border: 1px solid rgba(255,200,90,0.32); }
    .modal-status-pill.gated { background: rgba(150,165,186,0.14); color: var(--muted); border: 1px solid rgba(150,165,186,0.32); }
    .modal-status-pill.progress { background: rgba(54,241,225,0.14); color: var(--teal); border: 1px solid rgba(54,241,225,0.32); }

    .modal-outline {
      padding: 14px 16px;
      border: 1px solid var(--line);
      border-radius: 12px;
      background: rgba(8,17,31,0.55);
      margin: 0 0 18px;
    }
    .modal-outline h3 { color: var(--muted-2); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 800; margin: 0 0 10px; }
    .modal-outline ol { margin: 0; padding-left: 22px; color: #c9d6e8; font-size: 13px; line-height: 1.7; }
    .modal-outline ol li::marker { color: var(--teal); font-weight: 800; }

    .modal-instructor {
      display: grid;
      grid-template-columns: 36px 1fr;
      gap: 10px;
      align-items: center;
      padding: 10px 12px;
      background: rgba(95,185,255,0.06);
      border: 1px solid var(--line);
      border-radius: 10px;
      margin-bottom: 14px;
    }
    .modal-instructor .instr-avatar {
      width: 36px; height: 36px; border-radius: 50%;
      background: linear-gradient(135deg, #a78bfa, #6366f1);
      color: #fff; display: grid; place-items: center;
      font-weight: 900; font-size: 13px;
    }
    .modal-instructor .instr-name { font-size: 13px; font-weight: 700; }
    .modal-instructor .instr-role { color: var(--muted); font-size: 11.5px; display: block; margin-top: 2px; }

    .empty-state {
      display: none;
      padding: 28px;
      border: 1px dashed rgba(142, 214, 255, 0.22);
      border-radius: 18px;
      color: #aab8cc;
      text-align: center;
      background: rgba(255,255,255,0.025);
    }

    .empty-state.show { display: block; }

    @media (max-width: 1480px) {
      :root { --sidebar: 260px; --rightbar: 350px; }
      .course-row { grid-auto-columns: minmax(220px, 1fr); }
      .session { grid-template-columns: 48px 1fr; }
      .session .avatars { display: none; }
      .progress-widget-body { grid-template-columns: 132px 1fr; }
      .ring { width: 120px; }
    }

    @media (max-width: 1220px) {
      .app-shell { grid-template-columns: var(--sidebar) minmax(0, 1fr); }
      .catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .catalog-toolbar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .rightbar {
        position: static;
        /* The app-shell drops to 2 columns here, but .rightbar is the 3rd child —
           without this it auto-flows into row 2 / column 1 and renders cramped and
           flush-LEFT under the sidebar. Span the full width so it sits as its own
           row below the content (widgets laid across, not squished under the nav). */
        grid-column: 1 / -1;
        height: auto;
        padding: 0 24px 36px 30px;
        display: grid;
        grid-template-columns: repeat(2, minmax(280px, 1fr));
        gap: 14px;
      }
      .rightbar .widget { margin: 0; }
      .main { padding-bottom: 26px; }
      .hero-progress { left: 40px; transform: none; width: 320px; }
      .premium-grid { grid-template-columns: 1fr; }
      .ops-dashboard, .ops-board { grid-template-columns: 1fr; }
    }

    @media (max-width: 940px) {
      :root { --sidebar: 0px; }
      .app-shell { display: block; }
      .sidebar {
        position: fixed;
        z-index: 80;
        left: 0;
        top: 0;
        /* dvh = dynamic viewport, shrinks to fit when mobile Chrome's URL bar
           is showing. Falls back to vh on older browsers. Plus safe-area for
           iOS notch / Android gesture pill. */
        height: 100vh;
        height: 100dvh;
        padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);
        transform: translateX(-105%);
        width: 286px;
        transition: 220ms ease;
      }
      .sidebar.open { transform: translateX(0); }
      .mobile-menu { display: inline-grid; place-items: center; }
      /* Backdrop appears when sidebar is open — tap it to dismiss */
      .sidebar-backdrop {
        position: fixed; inset: 0; z-index: 79;
        background: rgba(2, 8, 18, 0.55);
        opacity: 0; pointer-events: none;
        transition: opacity 220ms ease;
        backdrop-filter: blur(2px);
      }
      .sidebar-backdrop.show { opacity: 1; pointer-events: auto; }
      .main { padding: 16px 16px 22px; }
      .topbar { margin: -16px -16px 16px; padding: 12px 16px; }
      .top-actions .user-meta { display: none; }
      .hero-content { width: 100%; padding: 34px 24px 84px; }
      .hero::after { display: none; }
      .hero-progress { left: 24px; bottom: 22px; width: calc(100% - 48px); }
      .rightbar { padding: 0 16px 36px; grid-template-columns: 1fr; }
      .smart-path-body { grid-template-columns: 1fr; }
    }

    @media (max-width: 640px) {
      .top-actions .icon-btn:nth-child(2) { display: none; }
      .user-pill { display: none; }
      .hero { min-height: 410px; }
      .hero h1 { font-size: 42px; }
      .hero-actions { flex-direction: column; align-items: stretch; }
      .filter-spacer { display: none; }
      .course-row { grid-auto-columns: minmax(250px, 82vw); }
      .modal-grid { grid-template-columns: 1fr; }
      .stats-grid { grid-template-columns: 1fr; gap: 12px; }
      .stat { border-right: 0; padding: 0; }
      .progress-widget-body { grid-template-columns: 1fr; justify-items: center; }
      .skill-row { grid-template-columns: 1fr; gap: 6px; }
      .skill-row em { text-align: left; }
      .activity-event { grid-template-columns: 34px minmax(0, 1fr); }
      .event-time { grid-column: 2; white-space: normal; }
      .ops-metrics { grid-template-columns: 1fr; }
      .ops-row { grid-template-columns: 36px minmax(0, 1fr); }
      .ops-time { grid-column: 2; white-space: normal; }
      .catalog-grid, .catalog-kpis, .catalog-toolbar { grid-template-columns: 1fr; }
      .catalog-card { min-height: 230px; }
      .coach-fab { right: 14px; bottom: 14px; }
    }

    /* ===== Account row + dropdown (sidebar bottom) ===== */
    .account-row {
      flex: 0 0 auto;
      position: relative;
      display: grid;
      grid-template-columns: 32px 1fr 22px;
      gap: 10px; align-items: center;
      margin: 0 -20px;
      padding: 12px 18px;
      border-top: 1px solid var(--line);
      background: rgba(8,17,31,0.7);
      cursor: pointer;
      transition: 140ms ease;
    }
    .account-row:hover { background: rgba(95,185,255,0.06); }
    .account-row .acct-avatar {
      width: 32px; height: 32px; border-radius: 8px;
      background: linear-gradient(135deg, var(--teal), var(--blue));
      color: #03101c; display: grid; place-items: center;
      font-weight: 900; font-size: 12px;
    }
    .account-row .acct-name { display: block; font-size: 13px; font-weight: 700; line-height: 1.2; }
    .account-row .acct-role { display: block; color: var(--muted); font-size: 11px; margin-top: 2px; }
    .account-row .acct-dots { color: var(--muted-2); font-size: 18px; line-height: 1; }
    .account-row:hover .acct-dots { color: var(--text); }

    .account-menu {
      position: absolute;
      left: 8px; right: 8px; bottom: calc(100% + 6px);
      background: linear-gradient(180deg, rgba(13,25,43,0.98), rgba(8,17,31,0.98));
      border: 1px solid var(--line-strong);
      border-radius: 14px;
      box-shadow: 0 24px 60px rgba(0,0,0,0.5);
      padding: 10px 6px;
      opacity: 0; pointer-events: none; transform: translateY(8px);
      transition: 180ms cubic-bezier(.2,.8,.2,1);
      z-index: 90;
      backdrop-filter: blur(10px);
    }
    .account-menu.open { opacity: 1; pointer-events: auto; transform: translateY(0); }
    .account-menu .am-head {
      padding: 10px 12px 12px; border-bottom: 1px solid var(--line);
      margin-bottom: 6px;
    }
    .account-menu .am-head strong { display: block; font-size: 13px; }
    .account-menu .am-head small { color: var(--muted); font-size: 11.5px; }
    .account-menu button {
      display: flex; align-items: center; gap: 12px;
      width: 100%;
      padding: 9px 12px; border-radius: 10px;
      background: transparent; border: 0; color: #c9d6e8;
      font-size: 13.5px; cursor: pointer; text-align: left;
    }
    .account-menu button:hover { background: rgba(95,185,255,0.08); }
    .account-menu button .icon-lead { width: 18px; text-align: center; opacity: 0.85; }
    .account-menu button .pill-new {
      margin-left: auto; padding: 1px 7px; border-radius: 999px;
      background: linear-gradient(135deg, var(--gold), #d68a1a); color: #2a1c08;
      font-size: 10px; font-weight: 900; letter-spacing: 0.06em;
    }
    /* "Coming soon" affordance — the item is visible but clearly not built yet. */
    .account-menu .am-soon {
      margin-left: auto; padding: 1px 8px; border-radius: 999px;
      background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.18);
      color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: 0.04em;
      white-space: nowrap;
    }
    .account-menu button.is-soon { opacity: 0.62; cursor: default; }
    .account-menu button.is-soon:hover { background: transparent; }
    /* Real-destination items rendered as links match the button rows visually. */
    .account-menu a.am-link {
      display: flex; align-items: center; gap: 10px; width: 100%;
      padding: 8px 12px; color: inherit; text-decoration: none; font-size: 13px;
    }
    .account-menu a.am-link .icon-lead { width: 18px; text-align: center; opacity: 0.85; }
    .account-menu a.am-link:hover { background: rgba(255,255,255,0.05); }
    .account-menu .am-toggle {
      display: flex; align-items: center; gap: 12px;
      padding: 10px 12px;
    }
    .am-toggle .switch {
      margin-left: auto;
      width: 36px; height: 20px; border-radius: 999px;
      background: rgba(95,185,255,0.18);
      position: relative; cursor: pointer;
    }
    .am-toggle .switch::after {
      content: ""; position: absolute; left: 2px; top: 2px;
      width: 16px; height: 16px; border-radius: 50%;
      background: var(--text); transition: 160ms ease;
    }
    .am-toggle.on .switch { background: var(--teal); }
    .am-toggle.on .switch::after { left: 18px; background: #03101c; }
    .account-menu .am-divider {
      height: 1px; background: var(--line); margin: 6px 8px;
    }
    .account-menu button.signout { color: var(--danger); }

    /* ===== Topbar chat / forum icon with badge ===== */
    .icon-btn .badge.bump {
      animation: badgeBump 380ms cubic-bezier(.2,.8,.2,1);
      background: var(--danger);
      color: #fff;
    }
    @keyframes badgeBump {
      0% { transform: scale(1); }
      40% { transform: scale(1.45); }
      100% { transform: scale(1); }
    }
    /* Messages dropdown — Messenger-style popover under the chat icon */
    .msg-dropdown {
      position: absolute;
      top: calc(100% + 8px);
      right: 0;
      width: 360px;
      max-width: calc(100vw - 24px);
      background: #0d1426;
      border: 1px solid var(--line);
      border-radius: 14px;
      box-shadow: 0 18px 50px rgba(0,0,0,0.55);
      z-index: 9500;
      overflow: hidden;
    }
    /* On phones, anchor the popover to the viewport instead of the icon so
       the 360px width can't get clipped by the right edge. Becomes a near-
       full-width sheet positioned right under the topbar. */
    @media (max-width: 640px) {
      .msg-dropdown {
        position: fixed;
        top: 64px;
        right: 8px;
        left: 8px;
        width: auto;
        max-width: none;
      }
      .msg-dd-list { max-height: 60vh; }
    }
    .msg-dropdown[hidden] { display: none; }
    .msg-dd-head {
      display: flex; align-items: center; justify-content: space-between;
      padding: 12px 14px;
      border-bottom: 1px solid var(--line);
      font-size: 14px;
    }
    .msg-dd-head strong { font-size: 15px; }
    .msg-dd-new {
      background: rgba(54,241,225,0.12);
      border: 1px solid rgba(54,241,225,0.32);
      color: var(--teal);
      padding: 5px 10px; border-radius: 8px; cursor: pointer; font-size: 12px;
    }
    .msg-dd-new:hover { background: rgba(54,241,225,0.20); }
    .msg-dd-list {
      max-height: 380px;
      overflow-y: auto;
    }
    .msg-dd-empty { padding: 22px 14px; color: var(--muted); font-size: 13px; text-align: center; }
    .msg-dd-row {
      display: flex; gap: 10px; align-items: center;
      width: 100%; padding: 10px 14px;
      background: transparent; border: 0; cursor: pointer;
      text-align: left; color: var(--text);
      border-bottom: 1px solid rgba(255,255,255,0.04);
    }
    .msg-dd-row:hover { background: rgba(95,185,255,0.06); }
    .msg-dd-row .av {
      width: 36px; height: 36px; border-radius: 50%;
      background: linear-gradient(135deg, #5fb9ff, #36f1e1);
      color: #0a1322; display: flex; align-items: center; justify-content: center;
      font-weight: 700; flex-shrink: 0;
    }
    .msg-dd-row .meta { flex: 1; min-width: 0; }
    .msg-dd-row .name { font-size: 13.5px; font-weight: 600; }
    .msg-dd-row .name.unread { font-weight: 800; }
    .msg-dd-row .snip { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .msg-dd-row .when { font-size: 11px; color: var(--muted); flex-shrink: 0; align-self: flex-start; }
    .msg-dd-row .unread-dot {
      width: 9px; height: 9px; border-radius: 50%;
      background: var(--teal); flex-shrink: 0; margin-left: 4px;
    }
    .msg-dd-foot {
      padding: 10px 14px;
      border-top: 1px solid var(--line);
      text-align: center;
    }
    .msg-dd-foot a {
      color: var(--teal); font-size: 13px; text-decoration: none;
    }
    .msg-dd-foot a:hover { text-decoration: underline; }

    .chat-icon {
      position: relative;
    }
    .chat-icon .badge {
      position: absolute; top: -3px; right: -3px;
      min-width: 18px; height: 18px; padding: 0 5px;
      background: var(--danger); color: #fff;
      border-radius: 999px;
      font-size: 10.5px; font-weight: 900;
      display: grid; place-items: center;
      box-shadow: 0 2px 8px rgba(255,83,112,0.4);
      transform: scale(0);
      transition: transform 220ms cubic-bezier(.2,.8,.2,1);
    }
    .chat-icon[data-count]:not([data-count="0"]) .badge { transform: scale(1); }

    /* ===== Community / Discussion Forum ===== */
    .forum-shell {
      display: grid;
      grid-template-columns: 240px 1fr;
      gap: 18px;
    }
    .forum-rail {
      padding: 14px;
      background: rgba(13,25,43,0.55);
      border: 1px solid var(--line);
      border-radius: var(--radius-md);
      align-self: start;
    }
    .forum-rail .fr-label {
      color: var(--muted-2); font-size: 11px; letter-spacing: 0.14em;
      text-transform: uppercase; font-weight: 800; padding: 8px 4px 4px;
    }
    .forum-rail button {
      display: flex; align-items: center; gap: 10px;
      width: 100%; padding: 9px 12px;
      background: transparent; border: 1px solid transparent; border-radius: 10px;
      color: #c9d6e8; cursor: pointer; font-size: 13px;
      text-align: left;
      margin-bottom: 2px;
    }

    /* Rich DM row in the rail — name + snippet + unread badge + time */
    .forum-rail .dm-rail-row {
      align-items: flex-start;
      gap: 10px;
      padding: 8px 10px;
    }
    .forum-rail .dm-rail-row .av {
      width: 30px; height: 30px; border-radius: 50%;
      background: linear-gradient(135deg, #5fb9ff, #36f1e1);
      color: #0a1322;
      display: flex; align-items: center; justify-content: center;
      font-weight: 700; font-size: 12px;
      flex-shrink: 0;
    }
    .forum-rail .dm-rail-row .meta { flex: 1; min-width: 0; line-height: 1.25; }
    .forum-rail .dm-rail-row .name { font-size: 13px; font-weight: 600; color: #c9d6e8; }
    .forum-rail .dm-rail-row .name.unread { color: var(--text); font-weight: 800; }
    .forum-rail .dm-rail-row .snip { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .forum-rail .dm-rail-row .right { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }
    .forum-rail .dm-rail-row .when { font-size: 10.5px; color: var(--muted); }
    .forum-rail .dm-rail-row .ucount {
      background: var(--teal); color: #0a1322;
      font-size: 10.5px; font-weight: 800;
      min-width: 18px; height: 18px;
      padding: 0 6px; border-radius: 999px;
      display: flex; align-items: center; justify-content: center;
    }

    /* Group divider in the DM rail */
    .forum-rail .dm-rail-grouphead {
      color: var(--muted-2); font-size: 10.5px; letter-spacing: 0.14em;
      text-transform: uppercase; font-weight: 800;
      padding: 10px 10px 4px;
    }
    .forum-rail button:hover { background: rgba(95,185,255,0.06); }
    .forum-rail button.active { background: rgba(54,241,225,0.10); border-color: rgba(54,241,225,0.25); color: var(--text); }
    .forum-rail button .ch-count {
      margin-left: auto;
      display: grid;
      place-items: center;
      min-width: 19px;
      height: 19px;
      padding: 0 5px;
      border-radius: 999px;
      background: var(--danger);
      color: #fff;
      border: 2px solid #08111f;
      font-size: 11px;
      line-height: 1;
      font-weight: 850;
    }
    .forum-rail button.active .ch-count { background: var(--danger); color: #fff; }
    .forum-rail button .new-dot {
      width: 7px; height: 7px; border-radius: 50%;
      background: var(--danger); margin-left: auto;
      box-shadow: 0 0 0 3px rgba(255,83,112,0.18);
    }

    .forum-feed { display: grid; gap: 12px; }
    #forumPostsContainer {
      display: grid;
      gap: 14px;
    }

    /* Facebook-style modal overlay for thread + DM panels */
    .thread-detail, .dm-panel {
      position: fixed; inset: 0; z-index: 9000;
      background: rgba(2,6,16,0.78);
      display: flex; align-items: center; justify-content: center;
      padding: 24px 16px;
    }
    .thread-detail[hidden], .dm-panel[hidden] { display: none; }
    .td-card {
      position: relative;
      width: 100%; max-width: 760px;
      max-height: 90vh;
      background: #0d1426;
      border: 1px solid var(--line);
      border-radius: 14px;
      box-shadow: 0 24px 60px rgba(0,0,0,0.55);
      display: flex; flex-direction: column;
      overflow: hidden;
    }
    .td-card-header {
      display: flex; align-items: center; gap: 8px;
      padding: 12px 16px;
      border-bottom: 1px solid var(--line);
    }
    .td-card-title {
      flex: 1;
      margin: 0; text-align: center;
      font-size: 16px; font-weight: 700; color: var(--text);
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .td-x {
      width: 34px; height: 34px;
      border: 0; border-radius: 50%;
      background: rgba(255,255,255,0.06); color: var(--text);
      cursor: pointer; font-size: 14px;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }
    .td-x:hover { background: rgba(255,255,255,0.14); }
    .td-scroll {
      flex: 1; min-height: 0;
      overflow-y: auto;
      padding: 18px 18px 0;
      display: flex; flex-direction: column;
    }
    /* Sticky composer at the bottom of the scroll area, FB-style */
    .td-scroll .forum-composer {
      position: sticky; bottom: 0;
      background: #0d1426;
      padding: 12px 0 14px;
      margin-top: 10px;
      border-top: 1px solid var(--line);
    }
    /* Reply bubbles, FB-style */
    .td-scroll .forum-reply {
      display: flex; gap: 10px; align-items: flex-start; margin: 10px 0;
    }
    .td-scroll .forum-reply > div:last-child {
      background: rgba(255,255,255,0.05);
      padding: 10px 14px;
      border-radius: 16px;
      min-width: 0;
    }
    .td-scroll .fp-replies { padding-bottom: 4px; }
    .forum-composer {
      display: grid; grid-template-columns: 40px 1fr;
      gap: 12px; align-items: start;
      padding: 16px 18px;
      border: 1px solid var(--line);
      border-radius: var(--radius-md);
      background: rgba(13,25,43,0.55);
    }
    .forum-composer .fc-avatar {
      width: 40px; height: 40px; border-radius: 50%;
      background: linear-gradient(135deg, var(--teal), var(--blue));
      color: #03101c; display: grid; place-items: center; font-weight: 900;
    }
    .forum-composer textarea {
      background: rgba(8,17,31,0.7); border: 1px solid var(--line);
      border-radius: 10px; padding: 10px 12px; color: var(--text);
      font: inherit; font-size: 13.5px; min-height: 60px; resize: vertical;
      width: 100%;
    }
    .forum-composer .fc-actions { display: flex; gap: 8px; margin-top: 8px; }
    .forum-composer .fc-actions button {
      padding: 8px 14px; border-radius: 10px; cursor: pointer;
      background: var(--panel); border: 1px solid var(--line); color: var(--text);
      font-size: 12.5px; font-weight: 700;
    }
    .forum-composer .fc-actions .primary {
      background: linear-gradient(135deg, var(--teal), var(--blue));
      border: 0; color: #03101c; font-weight: 820;
    }

    .forum-post {
      display: grid; grid-template-columns: 44px 1fr;
      gap: 14px;
      padding: 16px 18px;
      border: 1px solid var(--line);
      border-radius: var(--radius-md);
      background: rgba(13,25,43,0.55);
      transition: 160ms ease;
    }
    .forum-post.unread {
      border-left: 3px solid var(--teal); padding-left: 15px;
      background: linear-gradient(90deg, rgba(54,241,225,0.07), rgba(13,25,43,0.55) 42%);
    }
    /* Unread markers in the post header — a teal dot + a small "New" pill so it's
       obvious at a glance which threads the student hasn't opened yet. Both are
       removed the moment the thread is opened (see commOpenThread). */
    .fp-unread-dot {
      width: 8px; height: 8px; border-radius: 50%;
      background: var(--teal); box-shadow: 0 0 0 3px rgba(54,241,225,0.18);
      display: inline-block; flex-shrink: 0; margin-left: 2px;
    }
    .fp-unread-tag {
      font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
      color: #06251a; background: var(--teal); border-radius: 999px; padding: 1px 7px;
    }
    .forum-post:hover { border-color: var(--line-strong); }
    .forum-post .fp-avatar {
      width: 44px; height: 44px; border-radius: 50%;
      display: grid; place-items: center;
      color: #03101c; font-weight: 900; font-size: 14px;
      background: linear-gradient(135deg, var(--teal), var(--blue));
    }
    .forum-post[data-color="violet"] .fp-avatar { background: linear-gradient(135deg, #a78bfa, #6366f1); color: #fff; }
    .forum-post[data-color="gold"] .fp-avatar { background: linear-gradient(135deg, #ffe28a, #c89738); color: #3b2a09; }
    .forum-post[data-color="green"] .fp-avatar { background: linear-gradient(135deg, #b6ffea, #2dba9b); color: #06251a; }
    .forum-post[data-color="red"] .fp-avatar { background: linear-gradient(135deg, #ffc4ce, #cc3e57); color: #fff; }
    /* Fresh Unlocks — school-wide Avatar Shop flex feed in the community
       rail (Phase D). Gold party-callout language; rows open the peek card. */
    .comm-unlocks {
      position: relative; overflow: hidden;
      border: 1px solid rgba(217, 179, 108, 0.4); border-radius: 14px;
      padding: 10px 10px 8px; margin-bottom: 14px;
      background: linear-gradient(165deg, rgba(217, 179, 108, 0.12), rgba(13, 25, 43, 0.6));
    }
    .comm-unlocks::before {
      content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
      background: linear-gradient(180deg, #ffe9a8, #d9b36c, #b8860b);
    }
    .comm-unlocks .cu-head {
      font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
      color: #ffd98a; margin: 0 0 6px 6px;
    }
    .comm-unlocks .cu-row {
      display: flex; align-items: center; gap: 8px; width: 100%;
      background: transparent; border: 0; cursor: pointer; text-align: left;
      padding: 5px 6px; border-radius: 9px; color: var(--text);
      transition: background .15s;
    }
    .comm-unlocks .cu-row:hover { background: rgba(217, 179, 108, 0.10); }
    .comm-unlocks .cu-av {
      flex: 0 0 26px; width: 26px; height: 26px; border-radius: 50%;
      display: grid; place-items: center; font-weight: 800; font-size: 11px;
      color: #03101c; background: linear-gradient(135deg, #ffe9a8, #d9b36c);
      position: relative;
    }
    .comm-unlocks .cu-av.has-avatar {
      background-color: #131326 !important;
      background-size: cover !important; background-position: center top !important;
      color: transparent; overflow: hidden;
    }
    .comm-unlocks .cu-txt { flex: 1; font-size: 12px; line-height: 1.35; color: #e8e2d2; }
    .comm-unlocks .cu-txt b { color: #ffe9a8; font-weight: 700; }
    .comm-unlocks .cu-when { font-size: 10.5px; color: var(--muted); white-space: nowrap; }
    /* Avatar Studio headshots painted over the community/DM initial discs
       (js/messaging commHydrateAvatars sets an inline background-image of
       server-resolved layers). !important outranks the data-color gradients;
       frame rings reuse .avatar-frame--* (drawn INSIDE the edge, clip-safe). */
    .fp-avatar.has-avatar, .fr-avatar.has-avatar, .fc-avatar.has-avatar, .dm-rail-row .av.has-avatar {
      background-color: #131326 !important;
      background-size: cover !important;
      background-position: center top !important;
      background-repeat: no-repeat !important;
      color: transparent;
      overflow: hidden;
      position: relative;
    }
    .forum-post .fp-head {
      display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
      font-size: 13.5px; margin-bottom: 4px;
    }
    .forum-post .fp-head strong { font-weight: 700; }
    .forum-post .fp-head small { color: var(--muted); font-size: 11.5px; }
    .forum-post .fp-head .fp-tag {
      font-size: 10px; padding: 2px 8px; border-radius: 999px;
      background: rgba(54,241,225,0.10); color: var(--teal);
      border: 1px solid rgba(54,241,225,0.25);
      font-weight: 800; letter-spacing: 0.06em;
    }
    .forum-post .fp-tag.role-instructor {
      background: rgba(139,92,246,0.10); color: #cdb8ff; border-color: rgba(139,92,246,0.32);
    }
    .forum-post .fp-tag.role-owner {
      background: rgba(255,200,90,0.10); color: var(--gold); border-color: rgba(255,200,90,0.32);
    }
    .forum-post .fp-body { color: #c9d6e8; font-size: 13.5px; line-height: 1.55; }
    .forum-post .fp-actions {
      display: flex; gap: 14px; margin-top: 10px;
      color: var(--muted); font-size: 12px;
    }
    .forum-post .fp-actions button {
      background: transparent; border: 0; color: var(--muted); cursor: pointer;
      font-size: 12px; display: inline-flex; align-items: center; gap: 4px;
    }
    .forum-post .fp-actions button:hover { color: var(--teal); }
    .forum-post .fp-replies {
      margin-top: 12px; padding-left: 16px; border-left: 2px solid var(--line);
      display: grid; gap: 10px;
    }
    .forum-reply {
      display: grid; grid-template-columns: 28px 1fr;
      gap: 10px; padding: 8px 10px;
      background: rgba(8,17,31,0.5); border-radius: 10px;
    }
    .forum-reply .fr-avatar {
      width: 28px; height: 28px; border-radius: 50%;
      display: grid; place-items: center;
      font-size: 11px; font-weight: 900;
      color: #03101c;
      background: linear-gradient(135deg, var(--teal), var(--blue));
    }
    .forum-reply[data-color="violet"] .fr-avatar { background: linear-gradient(135deg, #a78bfa, #6366f1); color: #fff; }
    .forum-reply[data-color="gold"] .fr-avatar { background: linear-gradient(135deg, #ffe28a, #c89738); color: #3b2a09; }
    .forum-reply[data-color="green"] .fr-avatar { background: linear-gradient(135deg, #b6ffea, #2dba9b); color: #06251a; }
    .forum-reply strong { font-size: 12.5px; }
    .forum-reply small { color: var(--muted); font-size: 11px; }
    .forum-reply p { margin: 4px 0 0; font-size: 12.5px; line-height: 1.45; color: #c9d6e8; }

    @media (max-width: 940px) {
      .forum-shell { grid-template-columns: 1fr; }
    }

    /* ===== Phase 1.5 — Offers / Programs / Users / Reports ===== */

    /* Tag chip (multi-tag pill in Users view) */
    .tag-chip {
      display: inline-flex; align-items: center; gap: 4px;
      padding: 2px 8px;
      background: rgba(95,185,255,0.10);
      border: 1px solid rgba(95,185,255,0.22);
      border-radius: 999px;
      color: #c9e2ff;
      font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em;
      margin-right: 4px; margin-bottom: 3px;
    }
    .tag-chip.gold { background: rgba(255,200,90,0.10); border-color: rgba(255,200,90,0.28); color: #ffe2a8; }
    .tag-chip.green { background: rgba(77,232,167,0.10); border-color: rgba(77,232,167,0.28); color: #b8f6d8; }
    .tag-chip.violet { background: rgba(139,92,246,0.10); border-color: rgba(139,92,246,0.28); color: #cdb8ff; }
    .tag-chip .x { color: var(--muted-2); cursor: pointer; padding-left: 2px; }
    .tag-chip .x:hover { color: var(--text); }

    /* Filter row */
    .filter-row {
      display: grid;
      grid-template-columns: 1fr repeat(5, minmax(120px, 160px));
      gap: 10px; padding: 14px 16px;
      background: rgba(13,25,43,0.55);
      border: 1px solid var(--line);
      border-radius: var(--radius-md);
      margin-bottom: 18px;
    }
    .filter-row input, .filter-row select {
      background: rgba(8,17,31,0.7); border: 1px solid var(--line);
      border-radius: 10px; padding: 9px 12px; color: var(--text); font-size: 13px;
    }

    /* Offer table — mirrors LearnWorlds /Offers */
    .offer-row {
      display: grid;
      grid-template-columns: 220px 100px 100px 110px 130px 140px 110px 120px;
      gap: 10px;
      align-items: center;
      padding: 12px 14px;
      border-bottom: 1px solid var(--line);
      font-size: 13px;
    }
    .offer-row:hover { background: rgba(95,185,255,0.04); }
    .offer-row.head {
      color: var(--muted-2); font-size: 11px; letter-spacing: 0.12em;
      text-transform: uppercase; font-weight: 800;
      border-bottom: 1px solid var(--line-strong);
      background: rgba(8,17,31,0.5);
    }
    .offer-row .code-mono {
      font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
      font-size: 12px; color: var(--teal);
      padding: 3px 8px; background: rgba(54,241,225,0.08); border-radius: 6px;
      display: inline-block;
    }
    .offer-row .discount-strong { color: var(--teal); font-weight: 800; font-size: 14px; }
    .offer-row .product-stack {
      display: flex; align-items: center;
    }
    .offer-row .product-stack span {
      width: 26px; height: 26px; border-radius: 50%;
      border: 2px solid #0c1728;
      background: linear-gradient(135deg, var(--teal), var(--blue));
      margin-left: -6px; display: grid; place-items: center;
      color: #03101c; font-size: 9px; font-weight: 900;
    }
    .offer-row .product-stack span:first-child { margin-left: 0; }
    .offer-row .product-stack .more {
      background: rgba(95,185,255,0.12); color: var(--cyan);
      width: auto; padding: 0 8px; border-radius: 999px;
    }

    /* Program card grid */
    .program-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 14px; }
    .program-card {
      padding: 18px 20px;
      border: 1px solid var(--line);
      border-radius: var(--radius-md);
      background: linear-gradient(135deg, rgba(13,25,43,0.78), rgba(8,17,31,0.78));
      position: relative; overflow: hidden;
    }
    .program-card.subscription { border-color: rgba(139,92,246,0.32); background: linear-gradient(135deg, rgba(139,92,246,0.08), rgba(13,25,43,0.78)); }
    .program-card.subscription::before {
      content: "RECURRING"; position: absolute; right: -20px; top: 14px;
      transform: rotate(35deg);
      background: linear-gradient(135deg, var(--violet), var(--blue));
      color: #fff; font-size: 9px; font-weight: 920; letter-spacing: 0.12em;
      padding: 2px 26px; box-shadow: 0 6px 16px rgba(139,92,246,0.28);
    }
    .program-card .pc-eyebrow {
      color: var(--teal); font-size: 11px; letter-spacing: 0.16em;
      text-transform: uppercase; font-weight: 800;
    }
    .program-card.subscription .pc-eyebrow { color: #cdb8ff; }
    .program-card h3 { margin: 6px 0 6px; font-size: 18px; }
    .program-card p { margin: 0 0 14px; color: var(--muted); font-size: 13px; line-height: 1.5; }
    .program-card .pc-stats {
      display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
      padding: 12px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
    }
    .program-card .pc-stat span { color: var(--muted-2); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 800; }
    .program-card .pc-stat strong { display: block; margin-top: 4px; font-size: 18px; font-weight: 820; }
    .program-card .pc-stat strong.price { color: var(--teal); }
    .program-card.subscription .pc-stat strong.price { color: var(--violet); }
    .program-card .pc-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; }
    .program-card .pc-access {
      font-size: 11px; padding: 3px 10px; border-radius: 999px;
      background: rgba(95,185,255,0.10); border: 1px solid var(--line);
      color: var(--muted); font-weight: 700;
    }
    .program-card .pc-access.public { color: var(--green); border-color: rgba(77,232,167,0.28); background: rgba(77,232,167,0.08); }
    .program-card .pc-buy {
      padding: 8px 14px; border-radius: 10px; cursor: pointer;
      background: linear-gradient(135deg, var(--teal), var(--blue));
      border: 0; color: #03101c; font-weight: 820; font-size: 12.5px;
    }
    .program-card.subscription .pc-buy { background: linear-gradient(135deg, var(--violet), var(--blue)); color: #fff; }

    /* MRR mini line */
    .mrr-strip {
      display: grid; grid-template-columns: 1fr 200px;
      gap: 18px; align-items: center;
      padding: 16px 20px;
      border: 1px solid var(--line);
      border-radius: var(--radius-md);
      background: linear-gradient(135deg, rgba(139,92,246,0.06), rgba(13,25,43,0.55));
      margin-bottom: 18px;
    }
    .mrr-strip .mrr-stat strong { display: block; font-size: 26px; font-weight: 920; color: var(--violet); }
    .mrr-strip .mrr-stat span { color: var(--muted); font-size: 12px; }
    .mrr-strip .mrr-spark {
      width: 100%; height: 50px;
    }

    /* Reports tile grid */
    .reports-section { margin-bottom: 22px; }
    .reports-section h3 {
      color: var(--muted-2); font-size: 11px; letter-spacing: 0.16em;
      text-transform: uppercase; font-weight: 800; margin: 8px 4px 10px;
    }
    .reports-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
      gap: 12px;
    }
    .report-tile {
      padding: 16px 18px;
      border: 1px solid var(--line);
      border-radius: var(--radius-md);
      background: rgba(13,25,43,0.55);
      cursor: pointer;
      transition: 160ms ease;
      text-align: left;
      color: var(--text);
    }
    .report-tile:hover {
      border-color: rgba(54,241,225,0.4);
      transform: translateY(-1px);
      background: linear-gradient(135deg, rgba(54,241,225,0.06), rgba(13,25,43,0.55));
    }
    .report-tile .rt-icon {
      width: 36px; height: 36px; border-radius: 10px;
      display: grid; place-items: center;
      background: linear-gradient(135deg, rgba(54,241,225,0.18), rgba(47,111,255,0.18));
      color: var(--teal); font-size: 16px; font-weight: 900;
      margin-bottom: 10px;
    }
    .report-tile.warn .rt-icon { background: linear-gradient(135deg, rgba(255,83,112,0.18), rgba(255,200,90,0.10)); color: var(--danger); }
    .report-tile.gold .rt-icon { background: linear-gradient(135deg, rgba(255,200,90,0.22), rgba(255,200,90,0.05)); color: var(--gold); }
    .report-tile.green .rt-icon { background: linear-gradient(135deg, rgba(77,232,167,0.22), rgba(77,232,167,0.05)); color: var(--green); }
    .report-tile strong { display: block; font-size: 14px; }
    .report-tile small { display: block; margin-top: 4px; color: var(--muted); font-size: 12px; line-height: 1.45; }

    /* Cart coupon row */
    .coupon-row {
      display: grid; grid-template-columns: 1fr auto;
      gap: 8px; margin-bottom: 14px;
    }
    .coupon-row input {
      background: rgba(8,17,31,0.7); border: 1px solid var(--line);
      border-radius: 10px; padding: 10px 12px; color: var(--text);
      font-family: ui-monospace, monospace;
    }
    .coupon-row button {
      padding: 10px 16px; border-radius: 10px; cursor: pointer;
      background: var(--panel); border: 1px solid var(--line); color: var(--text);
      font-weight: 700; font-size: 13px;
    }
    .coupon-row button:hover { border-color: var(--line-strong); }
    .coupon-applied {
      padding: 8px 12px; border-radius: 8px;
      background: rgba(77,232,167,0.10); border: 1px solid rgba(77,232,167,0.28);
      color: var(--green); font-size: 12px; font-weight: 700;
      margin-bottom: 12px;
      display: flex; justify-content: space-between; align-items: center;
    }
    .coupon-applied .x { color: var(--muted); cursor: pointer; padding: 0 4px; }

    @media (max-width: 1180px) {
      .filter-row { grid-template-columns: 1fr 1fr; }
      .offer-row { grid-template-columns: 1fr; gap: 4px; }
      .offer-row > * { padding: 2px 0; }
      .offer-row.head { display: none; }
    }

    /* ===== Activity picker (Course Builder) ===== */
    .activity-picker-bg {
      position: fixed; inset: 0; z-index: 65;
      background: rgba(2,5,12,0.72); backdrop-filter: blur(8px);
      display: grid; place-items: center;
      opacity: 0; pointer-events: none;
      transition: opacity 220ms ease;
    }
    .activity-picker-bg.open { opacity: 1; pointer-events: auto; }
    .activity-picker {
      width: min(900px, 96vw); max-height: 86vh;
      background: linear-gradient(180deg, rgba(13,25,43,0.96), rgba(8,17,31,0.96));
      border: 1px solid var(--line-strong);
      border-radius: 18px;
      box-shadow: var(--shadow);
      display: grid;
      grid-template-rows: auto 1fr;
      transform: scale(0.96);
      transition: transform 220ms cubic-bezier(.2,.8,.2,1);
      overflow: hidden;
    }
    .activity-picker-bg.open .activity-picker { transform: scale(1); }
    .ap-head {
      display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center;
      padding: 16px 20px;
      border-bottom: 1px solid var(--line);
    }
    .ap-head h2 { margin: 0; font-size: 18px; }
    .ap-head input {
      background: rgba(8,17,31,0.7); border: 1px solid var(--line);
      border-radius: 10px; padding: 9px 12px; color: var(--text);
      min-width: 280px; font-size: 13px;
    }
    .ap-head .close { background: transparent; border: 0; color: var(--muted); font-size: 22px; cursor: pointer; padding: 4px 8px; }
    .ap-head .close:hover { color: var(--text); }

    .ap-body {
      display: grid;
      grid-template-columns: 200px 1fr;
      min-height: 460px;
      max-height: 70vh;
    }
    .ap-cats {
      background: rgba(8,17,31,0.55);
      border-right: 1px solid var(--line);
      padding: 12px 8px;
      overflow-y: auto;
    }
    .ap-cat {
      display: flex; align-items: center; gap: 10px;
      width: 100%;
      padding: 10px 12px;
      background: transparent; border: 1px solid transparent; border-radius: 10px;
      color: #c9d6e8; cursor: pointer;
      font-size: 13.5px; text-align: left;
      transition: 140ms ease;
    }
    .ap-cat:hover { background: rgba(95,185,255,0.06); }
    .ap-cat.active {
      background: rgba(54,241,225,0.10);
      border-color: rgba(54,241,225,0.25);
      color: var(--text);
    }
    .ap-types {
      padding: 14px 18px;
      overflow-y: auto;
    }
    .ap-types-label {
      color: var(--muted-2); font-size: 11px; letter-spacing: 0.18em;
      text-transform: uppercase; font-weight: 800; padding: 0 4px 10px;
    }
    .ap-type {
      display: grid;
      grid-template-columns: 52px 1fr;
      gap: 14px; align-items: center;
      width: 100%;
      padding: 14px 16px;
      border: 1px solid var(--line); border-radius: 14px;
      background: rgba(13,25,43,0.55);
      color: var(--text);
      cursor: pointer; text-align: left;
      margin-bottom: 8px;
      transition: 160ms ease;
    }
    .ap-type:hover {
      border-color: rgba(54,241,225,0.4);
      transform: translateY(-1px);
      background: linear-gradient(135deg, rgba(54,241,225,0.06), rgba(13,25,43,0.55));
    }
    .ap-type-icon {
      width: 52px; height: 52px; border-radius: 12px;
      display: grid; place-items: center;
      background: linear-gradient(135deg, rgba(54,241,225,0.18), rgba(47,111,255,0.20));
      color: var(--teal); font-size: 22px; font-weight: 900;
    }
    .ap-type[data-color="violet"] .ap-type-icon { background: linear-gradient(135deg, rgba(139,92,246,0.22), rgba(99,102,241,0.18)); color: #cdb8ff; }
    .ap-type[data-color="gold"] .ap-type-icon { background: linear-gradient(135deg, rgba(255,200,90,0.22), rgba(255,200,90,0.05)); color: var(--gold); }
    .ap-type[data-color="green"] .ap-type-icon { background: linear-gradient(135deg, rgba(77,232,167,0.20), rgba(77,232,167,0.05)); color: var(--green); }
    .ap-type[data-color="red"] .ap-type-icon { background: linear-gradient(135deg, rgba(255,83,112,0.20), rgba(255,83,112,0.05)); color: var(--danger); }
    .ap-type strong { display: block; font-size: 14.5px; margin-bottom: 2px; }
    .ap-type small { color: var(--muted); font-size: 12.5px; line-height: 1.45; }
    .ap-type .ap-flag {
      display: inline-block; margin-left: 8px;
      padding: 2px 8px; border-radius: 999px; font-size: 10px; font-weight: 800;
      background: rgba(255,200,90,0.16); color: var(--gold); border: 1px solid rgba(255,200,90,0.3);
      letter-spacing: 0.06em; text-transform: uppercase;
      vertical-align: middle;
    }

    /* SCORM upload sub-flow */
    .scorm-upload {
      padding: 20px 22px;
      display: grid; gap: 14px;
    }
    .scorm-upload .scorm-back {
      background: transparent; border: 0; color: var(--teal);
      font-size: 12.5px; font-weight: 700; cursor: pointer;
      padding: 4px 0; align-self: flex-start;
    }
    .scorm-upload .scorm-drop {
      border: 2px dashed rgba(54,241,225,0.38);
      border-radius: 16px;
      padding: 36px 24px;
      text-align: center;
      background: linear-gradient(135deg, rgba(54,241,225,0.04), rgba(13,25,43,0.55));
      cursor: pointer;
      transition: 200ms ease;
    }
    .scorm-upload .scorm-drop:hover,
    .scorm-upload .scorm-drop.drag { border-color: var(--teal); background: linear-gradient(135deg, rgba(54,241,225,0.08), rgba(13,25,43,0.55)); }
    .scorm-upload .scorm-drop .ic { font-size: 38px; margin-bottom: 8px; }
    .scorm-upload .scorm-drop strong { display: block; font-size: 14px; margin-bottom: 4px; }
    .scorm-upload .scorm-drop small { color: var(--muted); font-size: 12px; }
    .scorm-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
    .scorm-fields .form-row { display: grid; gap: 6px; }
    .scorm-fields label { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 800; color: var(--muted-2); }
    .scorm-fields input, .scorm-fields select {
      background: rgba(8,17,31,0.7); border: 1px solid var(--line);
      border-radius: 10px; padding: 9px 12px; color: var(--text); font-size: 13px;
    }
    .scorm-actions { display: flex; gap: 10px; justify-content: flex-end; padding-top: 4px; }

    @media (max-width: 720px) {
      .ap-body { grid-template-columns: 1fr; }
      .ap-cats { display: flex; gap: 4px; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line); padding: 10px; }
      .ap-cat { white-space: nowrap; }
      .scorm-fields { grid-template-columns: 1fr; }
    }

    /* Course Builder add-activity buttons row */
    .builder-add-row {
      display: flex; flex-wrap: wrap; gap: 8px;
      padding: 12px 14px; margin-top: 4px;
    }
    .builder-add-row button {
      padding: 9px 14px; border-radius: 10px; cursor: pointer;
      border: 1px solid var(--line);
      background: rgba(13,25,43,0.55); color: var(--text);
      font-size: 12.5px; font-weight: 700;
      display: inline-flex; align-items: center; gap: 6px;
    }
    .builder-add-row button:hover { border-color: var(--line-strong); background: var(--panel-hover); }
    .builder-add-row .primary {
      background: linear-gradient(135deg, var(--teal), var(--blue));
      border: 0; color: #03101c; font-weight: 820;
    }
    .builder-add-row .ai {
      background: linear-gradient(135deg, rgba(139,92,246,0.18), rgba(99,102,241,0.14));
      border-color: rgba(139,92,246,0.32);
      color: #cdb8ff;
    }
    .builder-add-row .ai:hover { background: linear-gradient(135deg, rgba(139,92,246,0.28), rgba(99,102,241,0.20)); }

    /* ===== Cart icon (topbar) ===== */
    .cart-icon {
      position: relative;
      width: 38px; height: 38px;
      border-radius: 50%;
      background: var(--panel);
      border: 1px solid var(--line);
      display: grid; place-items: center;
      color: var(--text); cursor: pointer;
      font-size: 16px;
      transition: 160ms ease;
    }
    .cart-icon:hover { border-color: rgba(54,241,225,0.4); transform: translateY(-1px); }
    .cart-icon .cart-badge {
      position: absolute; top: -4px; right: -4px;
      min-width: 20px; height: 20px; padding: 0 5px;
      border-radius: 999px;
      background: linear-gradient(135deg, var(--teal), var(--blue));
      color: #03101c;
      font-size: 11px; font-weight: 900;
      display: grid; place-items: center;
      transform: scale(0); transition: transform 220ms cubic-bezier(.2,.8,.2,1);
      box-shadow: 0 4px 12px rgba(54,241,225,0.32);
    }
    .cart-icon[data-count]:not([data-count="0"]) .cart-badge { transform: scale(1); }

    /* ===== Cart drawer ===== */
    .cart-drawer {
      position: fixed; right: 0; top: 0;
      width: min(440px, 92vw); height: 100vh;
      background: linear-gradient(180deg, rgba(8,17,31,0.98), rgba(6,13,24,0.98));
      border-left: 1px solid var(--line-strong);
      box-shadow: -24px 0 60px rgba(0,0,0,0.45);
      z-index: 60;
      transform: translateX(100%);
      transition: transform 320ms cubic-bezier(.2,.8,.2,1);
      display: grid;
      grid-template-rows: auto 1fr auto;
      backdrop-filter: blur(8px);
    }
    .cart-drawer.open { transform: translateX(0); }
    .cart-head {
      padding: 22px 24px 16px;
      border-bottom: 1px solid var(--line);
      display: flex; align-items: center; justify-content: space-between;
    }
    .cart-head h2 { margin: 0; font-size: 20px; }
    .cart-head .close {
      background: transparent; border: 0; color: var(--muted);
      font-size: 22px; cursor: pointer;
    }
    .cart-head .close:hover { color: var(--text); }
    .cart-list { overflow-y: auto; padding: 14px 18px; display: grid; gap: 10px; align-content: start; }
    .cart-empty {
      padding: 60px 24px; text-align: center; color: var(--muted);
      display: grid; gap: 12px; place-content: center;
    }
    .cart-empty .ic { font-size: 38px; opacity: 0.5; }
    .cart-empty p { margin: 0; font-size: 13.5px; line-height: 1.5; }

    .cart-item {
      display: grid;
      grid-template-columns: 56px 1fr auto;
      gap: 12px; align-items: center;
      padding: 12px 14px;
      border: 1px solid var(--line);
      border-radius: var(--radius-sm);
      background: rgba(13,25,43,0.55);
    }
    .cart-item .ci-cover {
      width: 56px; height: 56px; border-radius: 10px;
      background: linear-gradient(135deg, rgba(54,241,225,0.18), rgba(47,111,255,0.22));
      display: grid; place-items: center;
      color: var(--teal); font-weight: 900; font-size: 13px;
    }
    .cart-item.bundle .ci-cover {
      background: linear-gradient(135deg, var(--gold), #d68a1a);
      color: #2a1c08;
    }
    .cart-item strong { display: block; font-size: 13.5px; line-height: 1.3; }
    .cart-item small { color: var(--muted); font-size: 11.5px; }
    .cart-item .ci-right { text-align: right; }
    .cart-item .ci-price { font-size: 15px; font-weight: 820; color: var(--teal); }
    .cart-item .ci-remove {
      background: transparent; border: 0; color: var(--muted-2); font-size: 16px; cursor: pointer; padding: 4px 6px;
    }
    .cart-item .ci-remove:hover { color: var(--danger); }

    .cart-foot {
      padding: 18px 22px 22px;
      border-top: 1px solid var(--line);
      display: grid; gap: 14px;
    }
    .cart-summary { display: grid; gap: 6px; font-size: 13px; }
    .cart-summary .row { display: flex; justify-content: space-between; }
    .cart-summary .row.total { padding-top: 8px; border-top: 1px dashed var(--line); font-size: 15px; }
    .cart-summary .row.total strong { color: var(--teal); font-size: 18px; }
    .cart-summary .row.savings strong { color: var(--green); }

    .checkout-form { display: grid; gap: 8px; }
    .checkout-form label { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 800; color: var(--muted-2); }
    .checkout-form input {
      background: rgba(8,17,31,0.7);
      border: 1px solid var(--line);
      border-radius: 10px;
      padding: 10px 12px;
      color: var(--text);
      font-family: ui-monospace, monospace;
      font-size: 13px;
    }
    .checkout-form input[disabled] { opacity: 0.85; cursor: not-allowed; }
    .checkout-form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
    .checkout-form .stripe-mock {
      display: flex; align-items: center; justify-content: space-between;
      padding: 6px 0;
      color: var(--muted); font-size: 11px; letter-spacing: 0.06em;
    }
    .checkout-form .stripe-mock strong { color: #635bff; font-weight: 900; letter-spacing: 0.04em; }
    .pay-btn {
      width: 100%; padding: 14px; border-radius: 12px;
      background: linear-gradient(135deg, var(--teal), var(--blue));
      color: #03101c; font-weight: 820; border: 0; font-size: 14px; cursor: pointer;
      box-shadow: 0 14px 32px rgba(54,241,225,0.20);
    }
    .pay-btn:hover { filter: brightness(1.07); }
    .pay-btn:disabled { opacity: 0.5; cursor: not-allowed; filter: none; }
    .pay-btn.processing {
      background: var(--panel); color: var(--muted); pointer-events: none;
    }

    /* ===== Owned state on cards ===== */
    .course-card.owned .level-tag {
      background: rgba(77,232,167,0.14); color: var(--green);
      border-color: rgba(77,232,167,0.32);
    }
    .course-card.owned .course-art::after {
      content: "✓";
      position: absolute; right: 12px; top: 12px;
      width: 28px; height: 28px; border-radius: 50%;
      background: var(--green); color: #06251a;
      display: grid; place-items: center;
      font-size: 14px; font-weight: 900;
      box-shadow: 0 4px 12px rgba(77,232,167,0.45);
    }
    .course-card.owned .course-pricing-row { display: none; }
    .course-card.owned .owned-row {
      display: flex; align-items: center; justify-content: space-between;
      padding: 12px 0 4px;
      margin-top: 10px;
      border-top: 1px solid var(--line);
      color: var(--green); font-weight: 800; font-size: 13px;
    }

    /* ===== Locked card hover affordance ===== */
    .course-card.locked .lock-hover {
      position: absolute;
      left: 12px; right: 12px; bottom: 12px;
      padding: 8px 12px; border-radius: 10px;
      background: linear-gradient(135deg, rgba(54,241,225,0.92), rgba(47,111,255,0.92));
      color: #03101c; font-weight: 820; font-size: 12.5px;
      display: flex; align-items: center; justify-content: center; gap: 6px;
      opacity: 0; transform: translateY(8px);
      transition: 200ms ease;
      pointer-events: none;
      backdrop-filter: blur(2px);
    }
    .course-card.locked:hover .lock-hover { opacity: 1; transform: translateY(0); }

    /* ===== Achievement unlock modal ===== */
    .achievement-bg {
      position: fixed; inset: 0; z-index: 70;
      background: radial-gradient(circle at center, rgba(54,241,225,0.18), rgba(2,5,12,0.85) 60%);
      backdrop-filter: blur(10px);
      display: grid; place-items: center;
      opacity: 0; pointer-events: none;
      transition: opacity 280ms ease;
    }
    .achievement-bg.open { opacity: 1; pointer-events: auto; }
    .achievement-card {
      position: relative;
      width: min(420px, 92vw);
      padding: 36px 32px 28px;
      border-radius: 22px;
      background: linear-gradient(180deg, rgba(13,25,43,0.96), rgba(8,17,31,0.96));
      border: 1px solid rgba(255,200,90,0.5);
      box-shadow: 0 30px 80px rgba(0,0,0,0.5), 0 0 60px rgba(255,200,90,0.18);
      text-align: center;
      transform: scale(0.85) translateY(20px);
      opacity: 0;
      transition: transform 380ms cubic-bezier(.2,.8,.2,1), opacity 280ms ease;
    }
    .achievement-bg.open .achievement-card { transform: scale(1) translateY(0); opacity: 1; }
    .achievement-card .eyebrow {
      color: var(--gold); font-size: 11px; letter-spacing: 0.22em;
      text-transform: uppercase; font-weight: 850;
    }
    .achievement-card .medal {
      width: 120px; height: 120px; border-radius: 50%;
      background: radial-gradient(circle at 30% 30%, #ffe28a, #c89738 75%);
      margin: 14px auto 18px;
      display: grid; place-items: center;
      font-size: 56px;
      box-shadow: 0 0 0 8px rgba(255,200,90,0.14), 0 24px 50px rgba(0,0,0,0.4);
      animation: medalSpin 1.4s cubic-bezier(.2,.8,.2,1);
    }
    @keyframes medalSpin {
      0% { transform: scale(0) rotate(-180deg); opacity: 0; }
      60% { transform: scale(1.15) rotate(20deg); opacity: 1; }
      80% { transform: scale(0.95) rotate(-8deg); }
      100% { transform: scale(1) rotate(0deg); opacity: 1; }
    }
    .achievement-card h2 { margin: 0 0 6px; font-size: 22px; }
    .achievement-card p { color: var(--muted); margin: 0 0 20px; font-size: 13.5px; line-height: 1.55; }
    .achievement-card .achv-actions {
      display: flex; gap: 10px; justify-content: center;
    }
    .achievement-card button {
      padding: 11px 20px; border-radius: 12px; font-weight: 700; cursor: pointer;
      border: 1px solid var(--line); background: var(--panel); color: var(--text);
    }
    .achievement-card button.primary {
      background: linear-gradient(135deg, var(--gold), #d68a1a); color: #2a1c08;
      border: 0; font-weight: 820;
    }

    /* Confetti */
    .confetti-host {
      position: fixed; inset: 0; pointer-events: none; z-index: 75; overflow: hidden;
    }
    .confetti-piece {
      position: absolute; top: -20px; width: 10px; height: 14px;
      background: var(--teal); border-radius: 2px;
      animation: confettiFall 2.6s cubic-bezier(.4,.4,.4,1) forwards;
      transform: rotate(0deg);
    }
    @keyframes confettiFall {
      0% { transform: translate(0, 0) rotate(0deg); opacity: 1; }
      100% { transform: translate(var(--dx, 0), 110vh) rotate(720deg); opacity: 0.3; }
    }

    /* Course completion takeover */
    .completion-bg {
      position: fixed; inset: 0; z-index: 80;
      background: radial-gradient(circle at center, rgba(54,241,225,0.22), rgba(2,5,12,0.96) 70%);
      backdrop-filter: blur(14px);
      display: grid; place-items: center;
      opacity: 0; pointer-events: none;
      transition: opacity 380ms ease;
    }
    .completion-bg.open { opacity: 1; pointer-events: auto; }
    .completion-content {
      width: min(640px, 94vw);
      padding: 36px;
      text-align: center;
      transform: scale(0.92);
      transition: transform 480ms cubic-bezier(.2,.8,.2,1);
    }
    .completion-bg.open .completion-content { transform: scale(1); }
    .completion-content .eyebrow {
      color: var(--teal); font-size: 12px; letter-spacing: 0.28em; text-transform: uppercase; font-weight: 850;
    }
    .completion-content h1 {
      margin: 18px 0 10px;
      font-size: clamp(36px, 5vw, 52px);
      letter-spacing: -0.01em;
      background: linear-gradient(135deg, var(--teal), var(--cyan), var(--gold));
      -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    }
    .completion-content p { color: var(--muted); margin: 0 0 26px; font-size: 15px; }
    .completion-content .mini-cert {
      max-width: 460px; margin: 0 auto 28px;
      aspect-ratio: 11 / 8.5;
      background: linear-gradient(160deg, #fdf6e3 0%, #f4ebcb 50%, #e3d29a 100%);
      color: #2a1c08;
      border: 6px double #b88a2c;
      border-radius: 6px;
      padding: 28px;
      box-shadow: 0 24px 60px rgba(0,0,0,0.4), inset 0 0 0 2px #d8b35c;
      font-family: "Times New Roman", serif;
      transform: rotate(-2deg) scale(0.96);
      animation: certSway 1.8s ease-out forwards;
      position: relative;
    }
    @keyframes certSway {
      0% { transform: rotate(-12deg) translateY(40px) scale(0.85); opacity: 0; }
      60% { transform: rotate(2deg) translateY(0) scale(1.02); opacity: 1; }
      100% { transform: rotate(-2deg) translateY(0) scale(1); opacity: 1; }
    }
    .completion-content .mini-cert h2 { font-size: 22px; margin: 4px 0 8px; letter-spacing: 0.04em; }
    .completion-content .mini-cert .name { font-size: 28px; font-style: italic; margin: 12px 0 6px; }
    .completion-content .mini-cert p { color: #4a2f0c; font-size: 12px; margin: 4px 0; }
    .completion-content .mini-cert .seal {
      position: absolute; right: 18px; bottom: 18px;
      width: 64px; height: 64px; border-radius: 50%;
      background: radial-gradient(circle at 30% 30%, #ffd86b, #a06b1a 80%);
      display: grid; place-items: center;
      color: #3b2a09; font-weight: 900; font-size: 9px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    }
    .completion-content .actions { display: flex; gap: 10px; justify-content: center; }
    .completion-content button {
      padding: 13px 22px; border-radius: 12px; cursor: pointer;
      font-weight: 700; font-size: 14px;
      border: 1px solid var(--line); background: var(--panel); color: var(--text);
    }
    .completion-content button.primary {
      background: linear-gradient(135deg, var(--teal), var(--blue));
      border: 0; color: #03101c; font-weight: 820;
    }

    /* Streak nag (bottom-right) */
    .streak-nag {
      position: fixed; right: 22px; bottom: 22px; z-index: 45;
      max-width: 320px;
      padding: 14px 16px 14px 14px;
      border-radius: 14px;
      background: linear-gradient(135deg, rgba(255,83,112,0.18), rgba(255,200,90,0.14) 60%, rgba(13,25,43,0.92));
      border: 1px solid rgba(255,200,90,0.4);
      box-shadow: 0 22px 60px rgba(0,0,0,0.45), 0 0 28px rgba(255,200,90,0.14);
      transform: translate(140%, 0); opacity: 0;
      transition: transform 380ms cubic-bezier(.2,.8,.2,1), opacity 240ms ease;
      backdrop-filter: blur(10px);
      display: grid;
      grid-template-columns: 38px 1fr;
      gap: 12px; align-items: center;
    }
    .streak-nag.show { transform: translate(0,0); opacity: 1; }
    .streak-nag .sn-orb {
      width: 38px; height: 38px; border-radius: 50%;
      background: radial-gradient(circle at 30% 30%, #ffd0a3, #ff5370 75%);
      display: grid; place-items: center; font-size: 18px;
      box-shadow: 0 0 0 4px rgba(255,83,112,0.16);
    }
    .streak-nag strong { display: block; font-size: 13.5px; line-height: 1.3; }
    .streak-nag small { display: block; color: var(--muted); font-size: 11.5px; margin-top: 2px; }
    .streak-nag .sn-actions { display: flex; gap: 6px; margin-top: 8px; grid-column: 2; }
    .streak-nag .sn-actions button {
      padding: 6px 12px; border-radius: 8px; cursor: pointer;
      border: 1px solid var(--line); background: var(--panel); color: var(--text);
      font-size: 11.5px; font-weight: 700;
    }
    .streak-nag .sn-actions .primary {
      background: linear-gradient(135deg, var(--gold), #d68a1a); color: #2a1c08; border: 0;
    }
    .streak-nag .sn-close {
      position: absolute; right: 6px; top: 6px;
      width: 22px; height: 22px; border-radius: 50%;
      background: transparent; border: 0; color: var(--muted-2); font-size: 14px; cursor: pointer;
    }

    /* Pressure Point party callout (bottom-right) — streak-nag's sibling:
       same slide-in mechanics, teal game-show skin. Shares .sn-actions /
       .sn-close so the two cards stay visually married. */
    /* @property drives the highlight that travels around the border; where it's
       unsupported the conic border simply sits still (still gold). */
    @property --pc-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }

    /* Premium gold "prize" callout — a light sweeps the border, glowing mic orb,
       🎉 accent; same family as .achievement-card (Mazy's original look). */
    .party-callout {
      position: fixed; right: 22px; bottom: 22px; z-index: 45;
      max-width: 360px; min-height: 80px;
      padding: 16px 18px 16px 16px;
      border-radius: 18px;
      border: 2px solid transparent;
      background:
        linear-gradient(150deg, rgba(41,31,11,0.96), rgba(12,22,38,0.97)) padding-box,
        conic-gradient(from var(--pc-angle),
          rgba(255,206,110,0.10) 0deg, #ffe6a6 55deg, #ffb545 90deg,
          rgba(255,206,110,0.10) 160deg, rgba(255,206,110,0.10) 300deg,
          #ffe6a6 345deg, rgba(255,206,110,0.10) 360deg) border-box;
      box-shadow: 0 24px 64px rgba(0,0,0,0.5), 0 0 42px rgba(255,200,90,0.16);
      transform: translate(140%, 0); opacity: 0;
      transition: transform 420ms cubic-bezier(.2,.85,.25,1), opacity 260ms ease;
      backdrop-filter: blur(12px);
      display: grid;
      grid-template-columns: auto 1fr auto;
      gap: 14px; align-items: center;
    }
    .party-callout.show {
      transform: translate(0,0); opacity: 1;
      animation: pcBorderSpin 4.5s linear infinite;
    }
    @keyframes pcBorderSpin { to { --pc-angle: 360deg; } }
    /* 🎉 bursting from the corner */
    .party-callout::before {
      content: '🎉'; position: absolute; top: -13px; left: -9px;
      font-size: 23px; transform: rotate(-16deg);
      filter: drop-shadow(0 2px 4px rgba(0,0,0,0.55));
      animation: pcConfettiBob 2.6s ease-in-out infinite;
    }
    @keyframes pcConfettiBob {
      0%,100% { transform: rotate(-16deg) translateY(0); }
      50%     { transform: rotate(-10deg) translateY(-2px); }
    }
    /* when the streak nag is also up, stack above it instead of colliding */
    .party-callout.lifted { bottom: 128px; }
    .party-callout .pc-orb {
      width: 52px; height: 52px; border-radius: 50%;
      background: radial-gradient(circle at 32% 28%, #ffe9ad, #e0a83a 55%, #a9701c 100%);
      display: grid; place-items: center; font-size: 24px;
      box-shadow: 0 0 0 4px rgba(255,200,90,0.14), 0 0 22px rgba(255,200,90,0.5), inset 0 -3px 8px rgba(0,0,0,0.35);
      animation: pcPulse 1.9s ease-in-out infinite;
    }
    .party-callout .pc-orb.has-img {
      background:
        url("assets/icons/mic.webp") center 50% / 92% no-repeat,
        radial-gradient(circle at 32% 28%, #ffe9ad, #e0a83a 55%, #a9701c 100%);
      font-size: 0;
    }
    @keyframes pcPulse {
      0%,100% { box-shadow: 0 0 0 4px rgba(255,200,90,0.14), 0 0 22px rgba(255,200,90,0.42), inset 0 -3px 8px rgba(0,0,0,0.35); }
      50%     { box-shadow: 0 0 0 7px rgba(255,200,90,0.10), 0 0 32px rgba(255,200,90,0.62), inset 0 -3px 8px rgba(0,0,0,0.35); }
    }
    .party-callout strong { display: block; font-size: 15px; line-height: 1.25; font-weight: 800; color: #ffd67a; letter-spacing: .2px; }
    .party-callout small { display: block; color: rgba(243,239,226,0.72); font-size: 12px; margin-top: 3px; line-height: 1.4; }
    .party-callout .sn-actions { margin-top: 0; }
    .party-callout button.primary {
      background: rgba(255,200,90,0.08); border: 1.5px solid rgba(255,214,122,0.75);
      color: #ffd67a; font-weight: 820; padding: 10px 16px; border-radius: 12px; white-space: nowrap;
    }
    .party-callout button.primary::after { content: ' →'; }
    .party-callout button.primary:hover { background: rgba(255,200,90,0.18); border-color: #ffe6a6; }
    .party-callout .sn-close {
      position: absolute; top: 8px; right: 10px;
      width: 26px; height: 26px; border-radius: 8px;
      background: #000; color: var(--gold, #ffc85a);
      border: 1px solid rgba(255,200,90,0.45);
      font-size: 17px; font-weight: 800; line-height: 1; cursor: pointer;
      display: grid; place-items: center;
    }
    .party-callout .sn-close:hover { background: #111; border-color: rgba(255,200,90,0.8); }
    @media (prefers-reduced-motion: reduce) {
      .party-callout.show, .party-callout::before, .party-callout .pc-orb { animation: none; }
    }

    /* Skeleton loaders */
    .skeleton {
      background: linear-gradient(90deg, rgba(95,185,255,0.04), rgba(95,185,255,0.10), rgba(95,185,255,0.04));
      background-size: 200% 100%;
      animation: skeletonShimmer 1.6s linear infinite;
      border-radius: 8px;
    }
    @keyframes skeletonShimmer {
      0% { background-position: 200% 0; }
      100% { background-position: -200% 0; }
    }

    /* Empty state helper */
    .empty-state-msg {
      padding: 40px 24px; text-align: center; color: var(--muted);
      display: grid; gap: 10px; place-items: center;
      border: 1px dashed var(--line);
      border-radius: var(--radius-md);
      background: rgba(13,25,43,0.35);
    }
    .empty-state-msg .ic { font-size: 32px; opacity: 0.6; }
    .empty-state-msg p { margin: 0; font-size: 13.5px; line-height: 1.5; max-width: 340px; }

    /* ===== Loading primitives ===== */
    /* Used everywhere we previously rendered <strong>Loading…</strong>.
       Skeleton-row mimics a row of content with a shimmer; spinner-inline is
       a small spinning indicator suitable for buttons and inline status text.
       Prefers-reduced-motion suppresses the animation. */
    .skeleton-row, .skeleton-card {
      display: block; border-radius: 8px;
      background: linear-gradient(90deg,
        rgba(255,255,255,0.05) 0%,
        rgba(255,255,255,0.10) 50%,
        rgba(255,255,255,0.05) 100%);
      background-size: 200% 100%;
      animation: skelShimmer 1.4s ease-in-out infinite;
    }
    .skeleton-row { height: 14px; margin: 6px 0; }
    .skeleton-card { height: 80px; margin: 12px 0; }
    @keyframes skelShimmer {
      0%   { background-position: 200% 0; }
      100% { background-position: -200% 0; }
    }
    .spinner-inline {
      display: inline-block; width: 14px; height: 14px;
      border: 2px solid rgba(255,255,255,0.18);
      border-top-color: var(--teal, #36f1e1);
      border-radius: 50%;
      animation: spinInline 0.7s linear infinite;
      vertical-align: -2px;
    }
    @keyframes spinInline { to { transform: rotate(360deg); } }
    @media (prefers-reduced-motion: reduce) {
      .skeleton-row, .skeleton-card { animation: none; background: rgba(255,255,255,0.06); }
      .spinner-inline { animation: none; border-top-color: rgba(255,255,255,0.5); }
    }

    /* In-development banner. Sits at the top of owner views whose data is
       still mocked (Admin Dashboard, Audit Center, Onboarding, Assessment
       Builder, Certificate Designer). Owners expected the nav item, so we
       keep it — but every number below this banner is a design placeholder,
       not a live read. */
    .placeholder-card {
      display: flex; gap: 14px; align-items: flex-start;
      padding: 14px 18px; margin: 0 0 18px;
      border: 1px solid rgba(255,200,90,0.45);
      background: linear-gradient(180deg, rgba(255,200,90,0.10), rgba(255,200,90,0.04));
      border-radius: 12px; color: #ffe9b3;
    }
    .placeholder-card .pc-icon { font-size: 22px; line-height: 1; flex-shrink: 0; }
    .placeholder-card .pc-body { display: grid; gap: 4px; }
    .placeholder-card .pc-body strong { font-size: 14px; color: #fff; }
    .placeholder-card .pc-body span { font-size: 13px; line-height: 1.5; opacity: 0.92; }

    @media (max-width: 640px) {
      .streak-nag { right: 12px; left: 12px; bottom: 12px; max-width: none; }
      .party-callout { right: 12px; left: 12px; bottom: 12px; max-width: none; }
      .party-callout.lifted { bottom: 128px; }
    }

    /* ===== Locked (paywall) / Gated (progression) course cards ===== */
    .course-card.locked .progress-line,
    .course-card.locked .course-meta,
    .course-card.gated .progress-line,
    .course-card.gated .course-meta { display: none; }

    .course-card.gated { filter: grayscale(0.55) brightness(0.78); cursor: not-allowed; }
    .course-card.gated:hover { transform: none; }
    .course-card.gated .course-art::after {
      content: "🔒";
      position: absolute; right: 12px; top: 12px;
      width: 28px; height: 28px; border-radius: 50%;
      background: rgba(8,17,31,0.85);
      display: grid; place-items: center;
      font-size: 13px; color: var(--muted);
      backdrop-filter: blur(6px);
    }
    .course-card.gated .level-tag {
      background: rgba(150,165,186,0.14);
      color: var(--muted);
      border-color: rgba(150,165,186,0.28);
    }
    .gate-row {
      padding: 10px 12px; margin-top: 10px;
      border-top: 1px solid var(--line);
      color: var(--muted-2); font-size: 11.5px;
      display: flex; align-items: center; gap: 6px;
    }
    .gate-row::before { content: "🔒"; font-size: 12px; }

    .course-card.current {
      border-color: rgba(54,241,225,0.45) !important;
      box-shadow: 0 0 0 1px rgba(54,241,225,0.14), 0 22px 60px rgba(0,0,0,0.45), 0 0 28px rgba(54,241,225,0.10);
    }
    .course-card.current .level-tag {
      background: linear-gradient(135deg, var(--teal), var(--blue));
      color: #03101c;
      border-color: transparent;
      font-weight: 820;
    }
    .course-card.locked .course-art::after {
      content: "🔒";
      position: absolute; right: 12px; top: 12px;
      width: 28px; height: 28px; border-radius: 50%;
      background: rgba(8,17,31,0.78);
      display: grid; place-items: center;
      font-size: 13px; color: var(--gold);
      backdrop-filter: blur(6px);
      box-shadow: 0 4px 12px rgba(0,0,0,0.32);
    }
    .course-card.locked .level-tag {
      background: rgba(255,200,90,0.16);
      color: var(--gold);
      border-color: rgba(255,200,90,0.34);
    }
    .course-pricing-row {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 10px;
      align-items: end;
      padding-top: 12px;
      margin-top: 10px;
      border-top: 1px solid var(--line);
    }
    .course-pricing-row .pr-cell { display: grid; gap: 2px; }
    .course-pricing-row .pr-cell.right { text-align: right; }
    .course-pricing-row .pr-label {
      color: var(--muted-2); font-size: 10px;
      letter-spacing: 0.16em; text-transform: uppercase; font-weight: 800;
    }
    .course-pricing-row .pr-value { font-size: 18px; font-weight: 820; letter-spacing: -0.01em; color: var(--text); }
    .course-pricing-row .pr-value.price { color: var(--teal); }

    /* Module bundle purchase callout */
    .bundle-rail {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 14px;
      margin: 14px 0 22px;
    }
    .module-bundle {
      position: relative;
      padding: 18px 20px 16px;
      border: 1px solid var(--line);
      border-radius: var(--radius-md);
      background:
        radial-gradient(circle at 100% 0%, rgba(54,241,225,0.10), transparent 50%),
        linear-gradient(135deg, rgba(13,25,43,0.7), rgba(8,17,31,0.7));
      overflow: hidden;
    }
    .module-bundle::before {
      content: "BUNDLE"; position: absolute; right: -18px; top: 14px;
      transform: rotate(35deg);
      background: linear-gradient(135deg, var(--gold), #d68a1a);
      color: #2a1c08; font-size: 9px; font-weight: 920; letter-spacing: 0.12em;
      padding: 2px 26px; box-shadow: 0 6px 16px rgba(255,200,90,0.25);
    }
    .module-bundle .mb-eyebrow {
      color: var(--teal); font-size: 11px; letter-spacing: 0.16em;
      text-transform: uppercase; font-weight: 800;
    }
    .module-bundle h3 { margin: 6px 0 6px; font-size: 18px; }
    .module-bundle p { margin: 0 0 12px; color: var(--muted); font-size: 13px; line-height: 1.45; }
    .module-bundle .mb-foot {
      display: grid; grid-template-columns: 1fr auto;
      gap: 10px; align-items: end;
      padding-top: 12px; border-top: 1px solid var(--line);
    }
    .module-bundle .mb-foot .pr-label {
      color: var(--muted-2); font-size: 10px;
      letter-spacing: 0.16em; text-transform: uppercase; font-weight: 800;
    }
    .module-bundle .mb-price { font-size: 24px; font-weight: 920; color: var(--teal); letter-spacing: -0.01em; line-height: 1; }
    .module-bundle .mb-strike { color: var(--muted-2); font-size: 12px; text-decoration: line-through; margin-top: 4px; }
    .module-bundle .mb-buy {
      padding: 10px 18px; border: 0; border-radius: 12px;
      background: linear-gradient(135deg, var(--teal), var(--blue));
      color: #03101c; font-weight: 820; cursor: pointer;
      box-shadow: 0 8px 22px rgba(54,241,225,0.18);
    }
    .module-bundle .mb-buy:hover { filter: brightness(1.08); }
    /* Coming-soon (Stripe phase is last) — disabled, no gradient/glow. */
    .module-bundle .mb-buy:disabled {
      background: rgba(120, 150, 190, 0.18); color: var(--muted);
      cursor: not-allowed; box-shadow: none;
    }
    .module-bundle .mb-buy:disabled:hover { filter: none; }

    /* Live social ticker */
    .live-ticker {
      position: fixed;
      left: 22px; bottom: 22px;
      z-index: 50;
      display: grid;
      grid-template-columns: 38px 1fr;
      gap: 12px;
      align-items: center;
      max-width: 320px;
      padding: 12px 14px 12px 12px;
      background: linear-gradient(135deg, rgba(13,25,43,0.92), rgba(8,17,31,0.92));
      border: 1px solid rgba(54,241,225,0.32);
      border-radius: 14px;
      box-shadow: 0 22px 60px rgba(0,0,0,0.45), 0 0 0 1px rgba(54,241,225,0.08), 0 0 28px rgba(54,241,225,0.10);
      transform: translate(-130%, 0);
      opacity: 0;
      transition: transform 380ms cubic-bezier(.2,.8,.2,1), opacity 240ms ease;
      backdrop-filter: blur(10px);
    }
    .live-ticker.show {
      transform: translate(0, 0);
      opacity: 1;
    }
    .live-ticker .lt-orb {
      width: 38px; height: 38px; border-radius: 50%;
      background: radial-gradient(circle at 30% 30%, rgba(54,241,225,0.45), rgba(47,111,255,0.35) 65%, rgba(13,25,43,0.6));
      display: grid; place-items: center; font-size: 16px;
      box-shadow: 0 0 0 4px rgba(54,241,225,0.10);
      animation: ltPulse 2.6s ease-in-out infinite;
      transition: background 240ms ease, box-shadow 240ms ease;
    }
    .live-ticker[data-type="badge"] { border-color: rgba(255,200,90,0.4); }
    .live-ticker[data-type="badge"] .lt-orb { background: radial-gradient(circle at 30% 30%, #ffe28a, #c89738 75%); box-shadow: 0 0 0 4px rgba(255,200,90,0.12); }
    .live-ticker[data-type="online"] { border-color: rgba(77,232,167,0.4); }
    .live-ticker[data-type="online"] .lt-orb { background: radial-gradient(circle at 30% 30%, #b6ffea, #2dba9b 75%); box-shadow: 0 0 0 4px rgba(77,232,167,0.12); }
    .live-ticker[data-type="welcome"] { border-color: rgba(139,92,246,0.4); }
    .live-ticker[data-type="welcome"] .lt-orb { background: radial-gradient(circle at 30% 30%, #cdb8ff, #6d3ff0 75%); box-shadow: 0 0 0 4px rgba(139,92,246,0.14); }
    .live-ticker[data-type="locked"] { border-color: rgba(255,200,90,0.4); }
    .live-ticker[data-type="locked"] .lt-orb { background: radial-gradient(circle at 30% 30%, #ffe28a, #d68a1a 75%); box-shadow: 0 0 0 4px rgba(255,200,90,0.14); }
    .live-ticker[data-type="quiz"] { border-color: rgba(255,83,112,0.4); }
    .live-ticker[data-type="quiz"] .lt-orb { background: radial-gradient(circle at 30% 30%, #ffc4ce, #cc3e57 75%); box-shadow: 0 0 0 4px rgba(255,83,112,0.14); }

    /* +1 burst floating up from online pill */
    .online-pill { position: relative; }
    .online-burst {
      position: absolute; right: 8px; top: 4px;
      color: var(--green); font-size: 11px; font-weight: 900;
      pointer-events: none; opacity: 0;
      animation: burstUp 1.2s ease-out forwards;
    }
    .online-burst.down { color: var(--danger); }
    @keyframes burstUp {
      0% { transform: translateY(0); opacity: 0; }
      20% { opacity: 1; }
      100% { transform: translateY(-26px); opacity: 0; }
    }
    .live-ticker .lt-body strong { display: block; font-size: 13px; line-height: 1.3; }
    .live-ticker .lt-body small { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; }
    .live-ticker .lt-close {
      position: absolute; right: 6px; top: 6px;
      width: 22px; height: 22px; border-radius: 50%;
      background: transparent; border: 0; color: var(--muted-2); font-size: 14px; cursor: pointer;
    }
    .live-ticker .lt-close:hover { color: var(--text); }

    @keyframes ltPulse {
      0%, 100% { box-shadow: 0 0 0 4px rgba(54,241,225,0.10); }
      50% { box-shadow: 0 0 0 8px rgba(54,241,225,0); }
    }

    @media (max-width: 640px) {
      .live-ticker { left: 12px; right: 12px; bottom: 12px; max-width: none; }
    }

    /* ===== 375px tightening — admin panels reachability ===== */
    @media (max-width: 420px) {
      /* topbar: shorten role switch + hide labels */
      .role-switch button { padding: 5px 8px; font-size: 11px; }
      .online-pill { padding: 5px 9px; font-size: 11px; }
      .cart-icon { width: 34px; height: 34px; }
      .top-actions { gap: 6px; flex-wrap: wrap; }
      .search-wrap { display: none; }

      /* tighter view banner */
      .view-banner { padding: 18px 16px; }
      .view-banner h2 { font-size: 20px; }
      .view-banner .hero-actions { flex-direction: column; align-items: stretch; }
      .view-banner .hero-actions button, .view-banner .hero-actions a { width: 100%; }

      /* cart drawer fits screen */
      .cart-drawer { width: 100vw; }
      .cart-foot { padding: 14px; }

      /* admin tables: scroll horizontally instead of cramping */
      .data-table { display: block; overflow-x: auto; white-space: nowrap; }
      .data-table th, .data-table td { padding: 8px 10px; }

      /* Activity picker — full screen on small */
      .activity-picker { width: 100vw; max-height: 100vh; border-radius: 0; }
      .ap-head input { min-width: 0; flex: 1; }
      .ap-cats { padding: 8px; }
      .ap-cat { padding: 8px 10px; }

      /* Reports tile + program card single column */
      .reports-grid, .program-grid, .bundle-rail, .quick-grid, .achv-grid, .cert-grid { grid-template-columns: 1fr !important; }

      /* Audit explorer mono panel readable */
      .audit-detail { font-size: 11px; padding: 14px; }

      /* Pricing footer + bundle footer stack readability */
      .course-pricing-row { gap: 6px; }
      .module-bundle .mb-foot { flex-direction: column; align-items: flex-start; gap: 10px; }
      .module-bundle .mb-foot button { width: 100%; }

      /* Streak nag breaks lines instead of hiding */
      .streak-nag { grid-template-columns: 38px 1fr; }
      .streak-nag .sn-actions { flex-wrap: wrap; }
      .party-callout { grid-template-columns: auto 1fr; }
      .party-callout .sn-actions { grid-column: 2; margin-top: 8px; }
    }

    /* Online-now pill in topbar */
    .online-pill {
      display: inline-flex; align-items: center; gap: 8px;
      padding: 6px 12px;
      background: rgba(77,232,167,0.12);
      border: 1px solid rgba(77,232,167,0.32);
      color: var(--green);
      border-radius: 999px;
      font-size: 12px; font-weight: 800; letter-spacing: 0.04em;
    }
    .online-pill .live-dot {
      width: 8px; height: 8px; border-radius: 50%;
      background: var(--green);
      animation: ltPulse 2.4s ease-in-out infinite;
    }

    /* ===== Role gating ===== */
    /* hide elements whose minimum role exceeds the current body[data-role] */
    body[data-role="student"] [data-role-min="staff"],
    body[data-role="student"] [data-role-min="owner"],
    body[data-role="staff"]   [data-role-min="owner"] { display: none !important; }

    /* hide elements that should ONLY appear for one specific role */
    body[data-role="staff"]    [data-role-only="student"],
    body[data-role="owner"]    [data-role-only="student"],
    body[data-role="student"]  [data-role-only="staff"],
    body[data-role="owner"]    [data-role-only="staff"],
    body[data-role="student"]  [data-role-only="owner"],
    body[data-role="staff"]    [data-role-only="owner"] { display: none !important; }

    /* hide elements explicitly forbidden for a role (e.g. cart for instructors — no billing/purchasing in instructor view) */
    body[data-role="student"] [data-role-hide~="student"],
    body[data-role="staff"]   [data-role-hide~="staff"],
    body[data-role="owner"]   [data-role-hide~="owner"] { display: none !important; }

    .role-switch {
      position: relative;
      display: inline-flex; align-items: center; gap: 4px;
      padding: 4px 5px;
      background: rgba(8,17,31,0.7);
      border: 1px dashed rgba(255,200,90,0.45);
      border-radius: 999px;
    }
    .role-switch::before {
      content: "DEMO";
      position: absolute;
      top: -10px;
      left: 12px;
      padding: 1px 7px;
      font-size: 9px; font-weight: 920; letter-spacing: 0.16em;
      color: #2a1c08;
      background: linear-gradient(135deg, var(--gold), #d68a1a);
      border-radius: 999px;
      box-shadow: 0 4px 12px rgba(255,200,90,0.32);
      pointer-events: none;
    }
    .role-switch button {
      background: transparent; border: 0; color: var(--muted);
      padding: 5px 11px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em;
      border-radius: 999px;
    }
    .role-switch button:hover { color: var(--text); }
    .role-switch button.active {
      background: linear-gradient(135deg, var(--teal), var(--blue));
      color: #03101c;
    }

    /* Student-mode polish: bigger card art, hide noise */
    body[data-role="student"] .filter-bar { background: transparent; border: 0; padding: 0; margin-bottom: 18px; }
    body[data-role="student"] .course-card { min-height: 220px; }
    body[data-role="student"] .premium-grid { grid-template-columns: 1fr; }

    /* ===== View switcher ===== */
    .view { display: none; }
    .view.active { display: block; }

    .view-banner {
      position: relative;
      min-height: 180px;
      border-radius: var(--radius-lg);
      overflow: hidden;
      border: 1px solid rgba(142,214,255,0.2);
      box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,0.06);
      padding: 28px 32px 26px;
      margin-bottom: 22px;
      display: grid;
      grid-template-columns: 1.4fr 1fr;
      gap: 24px;
      align-items: center;
      isolation: isolate;
    }
    .view-banner::after {
      content: "";
      position: absolute; inset: 0;
      background: linear-gradient(90deg, rgba(5,12,24,0.92) 0%, rgba(5,12,24,0.74) 40%, rgba(5,12,24,0.18) 75%, rgba(5,12,24,0.74) 100%);
      pointer-events: none;
      z-index: -1;
    }
    .view-banner.bg-anatomy { background: url("images/course-art/anatomy-physiology.webp") center / cover; }
    .view-banner.bg-pathology { background: url("images/course-art/pathology.webp") center / cover; }
    .view-banner.bg-hygiene { background: url("images/course-art/health-hygiene.webp") center / cover; }
    .view-banner.bg-kinesiology { background: url("images/course-art/kinesiology.webp") center / cover; }
    .view-banner.bg-program { background: url("images/hero/massage-program-hero.webp") center / cover; }
    /* Taller, more substantial student Home hero (Welcome Back box).
       Scoped to the student section so other view banners keep 180px. */
    .instructor-home[data-role-only="student"] .view-banner {
      min-height: 300px;
      padding-top: 34px;
      padding-bottom: 34px;
      align-items: stretch;          /* let the content column fill the height */
    }
    /* Anchor the Knowledge Quest button to the BOTTOM of the hero: make the
       content column a full-height flex stack and push the actions down. */
    .instructor-home[data-role-only="student"] .view-banner > div {
      display: flex;
      flex-direction: column;
    }
    .instructor-home[data-role-only="student"] .view-banner .hero-actions {
      margin-top: auto;
      margin-bottom: 0;
    }
    /* Estimated Graduation card — pinned to the hero's TOP-RIGHT corner.
       The compact banner is a single grid column, so left in flow the card
       lands on a second row below the content; absolute positioning against
       the hero (position:relative) is the only reliable anchor. */
    .instructor-home[data-role-only="student"] .view-banner .stud-eta-anchor {
      position: absolute;
      top: 26px;
      right: 28px;
      z-index: 1;
    }
    @media (max-width: 940px) {
      .instructor-home[data-role-only="student"] .view-banner .stud-eta-anchor {
        position: static;
        margin-top: 14px;
      }
    }
    .view-banner h2 { margin: 0 0 8px; font-size: 26px; letter-spacing: 0.01em; }
    .view-banner p { margin: 0 0 14px; color: #d9efff; max-width: 540px; line-height: 1.55; }
    .view-banner .banner-eyebrow {
      display: inline-block; margin-bottom: 12px;
      color: var(--teal); font-size: 11px; letter-spacing: 0.22em;
      text-transform: uppercase; font-weight: 850;
    }
    .view-banner .banner-stats {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 10px;
      align-self: center;
    }
    .view-banner .banner-stat {
      background: rgba(8,17,31,0.62);
      border: 1px solid rgba(95,185,255,0.22);
      border-radius: 14px;
      padding: 12px 14px;
      backdrop-filter: blur(6px);
    }
    .view-banner .banner-stat span { color: var(--muted); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700; }
    .view-banner .banner-stat strong { display: block; margin-top: 4px; font-size: 22px; font-weight: 820; }
    .view-banner .banner-stat em { font-style: normal; color: var(--teal); font-size: 11px; font-weight: 700; }
    .view-banner.compact { min-height: 140px; padding: 22px 26px; grid-template-columns: 1fr; }
    .view-banner.compact .banner-stats { display: none; }

    /* Radar chart */
    .radar-wrap {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 18px;
      align-items: center;
    }
    .radar-svg { width: 100%; max-width: 320px; height: auto; }
    .radar-axis { stroke: rgba(150,165,186,0.22); fill: none; }
    .radar-spoke { stroke: rgba(150,165,186,0.18); }
    .radar-area { fill: rgba(54,241,225,0.18); stroke: var(--teal); stroke-width: 2; }
    .radar-cohort { fill: rgba(255,200,90,0.10); stroke: var(--gold); stroke-width: 1.5; stroke-dasharray: 4 3; }
    .radar-all { fill: rgba(97,185,255,0.07); stroke: var(--cyan); stroke-width: 1.5; stroke-dasharray: 2 4; }
    .radar-label { fill: var(--muted); font-size: 11px; font-weight: 700; }
    .radar-legend {
      display: grid; gap: 8px; font-size: 12px; color: var(--muted);
    }
    .radar-legend span { display: inline-flex; align-items: center; gap: 8px; }
    .radar-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
    .radar-legend i.you { background: var(--teal); }
    .radar-legend i.cohort { background: var(--gold); opacity: 0.8; }
    .radar-legend i.all { background: var(--cyan); opacity: 0.85; }

    /* Cohort avatar strip */
    .roster-strip {
      display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 0 14px;
    }
    .roster-strip .ops-avatar { width: 36px; height: 36px; }
    .roster-strip .more-pill {
      background: rgba(95,185,255,0.10);
      border: 1px solid var(--line);
      border-radius: 999px;
      padding: 6px 12px; font-size: 12px; color: var(--muted);
      display: inline-flex; align-items: center;
    }

    /* Mini bar chart for material usage */
    /* Two-row layout via grid areas: label + number on top, bar spans full width
       below. This works regardless of panel width — important inside .quick-grid
       where each panel is only half the screen. */
    .mini-bars { display: grid; grid-template-columns: 1fr; gap: 14px; padding: 10px 16px 18px; }
    .mini-bar {
      display: grid;
      grid-template-columns: 1fr auto;
      grid-template-areas: "label num" "bar bar";
      column-gap: 10px; row-gap: 6px;
      font-size: 12.5px; line-height: 1.25;
    }
    .mini-bar > span:not(.bar-track) { grid-area: label; color: var(--text); font-weight: 700; }
    .mini-bar > em { grid-area: num; color: var(--muted); font-style: normal; font-weight: 600; font-variant-numeric: tabular-nums; }
    .mini-bar > .bar-track { grid-area: bar; background: rgba(95,185,255,0.08); height: 8px; border-radius: 999px; overflow: hidden; }
    .mini-bar > .bar-track > .bar-fill { height: 100%; background: linear-gradient(90deg, var(--teal), var(--blue)); border-radius: inherit; }

    /* ===== Admin-only patterns ===== */
    .builder-split {
      display: grid;
      grid-template-columns: 320px 1fr;
      gap: 16px;
      align-items: stretch;
    }
    .builder-tree { padding: 14px; }
    .tree-node { display: grid; grid-template-columns: 22px 1fr auto; gap: 8px; align-items: center; padding: 8px 10px; border-radius: 8px; cursor: pointer; font-size: 13.5px; color: #c9d6e8; }
    .tree-node:hover { background: rgba(95,185,255,0.08); }
    .tree-node.module { font-weight: 800; color: var(--text); margin-top: 6px; }
    .tree-node.lesson { padding-left: 28px; }
    .tree-node.active { background: rgba(54,241,225,0.10); color: var(--text); border: 1px solid rgba(54,241,225,0.25); }
    .tree-node .tree-pill { font-size: 10px; padding: 2px 7px; border-radius: 999px; background: rgba(95,185,255,0.10); color: var(--muted); }
    .tree-node.lesson::before { content: "•"; color: var(--muted-2); }
    .tree-node.module::before { content: "▾"; color: var(--cyan); }

    .editor-canvas {
      background: rgba(13,25,43,0.55);
      border: 1px solid var(--line);
      border-radius: var(--radius-md);
      padding: 22px;
      min-height: 360px;
      display: grid;
      gap: 16px;
      align-content: start;
    }
    .form-row { display: grid; gap: 6px; }
    .form-row label { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 800; color: var(--muted-2); }
    .form-row input, .form-row select, .form-row textarea {
      background: rgba(8,17,31,0.7);
      border: 1px solid var(--line);
      border-radius: 10px;
      padding: 10px 12px;
      color: var(--text);
    }
    .form-row textarea { min-height: 88px; resize: vertical; }
    .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

    .upload-drop {
      border: 1px dashed rgba(95,185,255,0.35);
      border-radius: var(--radius-md);
      padding: 22px;
      text-align: center;
      color: var(--muted);
      background: rgba(95,185,255,0.04);
      font-size: 13px;
    }

    .funnel { display: grid; gap: 10px; padding-top: 6px; }
    .funnel-step {
      display: grid;
      grid-template-columns: 28px 1fr auto;
      gap: 12px;
      align-items: center;
      padding: 14px 18px;
      border: 1px solid var(--line);
      border-radius: var(--radius-md);
      background: rgba(13,25,43,0.55);
    }
    .funnel-step .step-num { width: 28px; height: 28px; border-radius: 50%; background: rgba(54,241,225,0.18); color: var(--teal); display: grid; place-items: center; font-weight: 900; font-size: 13px; }
    .funnel-step .funnel-bar { height: 8px; background: rgba(95,185,255,0.10); border-radius: 999px; overflow: hidden; margin-top: 6px; }
    .funnel-step .funnel-fill { height: 100%; background: linear-gradient(90deg, var(--teal), var(--blue)); }
    .funnel-step strong { font-size: 14px; }
    .funnel-step small { color: var(--muted); font-size: 12px; }
    .funnel-step.warn { border-color: rgba(255,200,90,0.35); }
    .funnel-step.warn .step-num { background: rgba(255,200,90,0.20); color: var(--gold); }

    .profile-header {
      display: grid;
      grid-template-columns: 84px 1fr auto;
      gap: 18px;
      align-items: center;
      padding: 22px;
      border: 1px solid var(--line);
      border-radius: var(--radius-md);
      background: linear-gradient(135deg, rgba(54,241,225,0.06), rgba(13,25,43,0.55));
      margin-bottom: 18px;
    }
    .profile-avatar {
      width: 84px; height: 84px; border-radius: 50%;
      display: grid; place-items: center;
      background: linear-gradient(135deg, var(--teal), var(--blue));
      color: #03101c; font-weight: 920; font-size: 28px;
    }
    .profile-meta h2 { margin: 0 0 4px; font-size: 22px; }
    .profile-meta p { margin: 0; color: var(--muted); }
    .profile-meta .pill-row { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }

    .audit-explorer {
      display: grid;
      grid-template-columns: 1fr 320px;
      gap: 16px;
    }
    .audit-detail {
      background: rgba(8,17,31,0.7);
      border: 1px solid var(--line);
      border-radius: var(--radius-md);
      padding: 18px;
      font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
      font-size: 12px;
      color: #c9d6e8;
      line-height: 1.6;
      min-height: 280px;
    }
    .audit-detail h4 { font-family: Inter, sans-serif; margin: 0 0 10px; font-size: 14px; }
    .audit-detail .hash { color: var(--teal); word-break: break-all; }
    .audit-detail .ok { color: var(--green); font-weight: 700; }

    .cert-canvas {
      position: relative;
      aspect-ratio: 11 / 8.5;
      max-width: 640px;
      margin: 12px auto 0;
      background: linear-gradient(160deg, #fdf6e3 0%, #f4ebcb 50%, #e3d29a 100%);
      color: #2a1c08;
      border: 8px double #b88a2c;
      border-radius: 6px;
      padding: 36px 48px;
      box-shadow: 0 24px 60px rgba(0,0,0,0.4), inset 0 0 0 2px #d8b35c;
      font-family: "Times New Roman", serif;
      text-align: center;
    }
    .cert-canvas h2 { font-size: 30px; letter-spacing: 0.04em; margin: 4px 0 12px; }
    .cert-canvas .cert-name { font-size: 38px; font-style: italic; margin: 18px 0 12px; color: #4a2f0c; }
    .cert-canvas p { margin: 6px 0; }
    .cert-canvas .cert-seal {
      position: absolute; right: 28px; bottom: 28px;
      width: 88px; height: 88px; border-radius: 50%;
      background: radial-gradient(circle at 30% 30%, #ffd86b, #a06b1a 80%);
      box-shadow: 0 4px 16px rgba(0,0,0,0.3);
      display: grid; place-items: center;
      color: #3b2a09; font-weight: 900; font-size: 11px; letter-spacing: 0.08em;
    }
    .cert-canvas .cert-sig {
      position: absolute; left: 36px; bottom: 36px;
      font-style: italic; font-size: 22px; color: #3b2a09;
      border-top: 1px solid #3b2a09; padding-top: 4px; min-width: 180px;
    }

    .item-bank-row {
      display: grid;
      grid-template-columns: 1fr 90px 110px 90px 70px;
      gap: 10px;
      align-items: center;
      padding: 11px 12px;
      border-bottom: 1px solid var(--line);
      font-size: 13px;
    }
    .item-bank-row:hover { background: rgba(95,185,255,0.04); }
    .item-bank-row .difficulty-bar { background: rgba(95,185,255,0.08); height: 6px; border-radius: 999px; overflow: hidden; }
    .item-bank-row .difficulty-fill { height: 100%; background: linear-gradient(90deg, var(--green), var(--gold), var(--danger)); }

    .version-list { display: grid; gap: 6px; }
    .version-row {
      display: grid; grid-template-columns: 60px 1fr auto auto;
      gap: 12px; align-items: center;
      padding: 10px 12px;
      border: 1px solid var(--line);
      border-radius: 10px;
      background: rgba(13,25,43,0.45);
      font-size: 13px;
    }
    .version-row .version-tag { font-family: ui-monospace, monospace; font-weight: 800; color: var(--teal); }
    .version-row.published { border-color: rgba(77,232,167,0.35); }
    .version-row.draft { border-color: rgba(255,200,90,0.35); }

    /* ===== Phase 2 student patterns ===== */
    .streak-ring {
      --ring: 64;
      width: 168px; height: 168px; border-radius: 50%;
      display: grid; place-items: center;
      background:
        conic-gradient(var(--teal) calc(var(--ring) * 1%), rgba(95,185,255,0.10) 0);
      position: relative;
      margin: 6px auto 0;
    }
    .streak-ring::before {
      content: ""; position: absolute; inset: 12px;
      border-radius: 50%;
      background: radial-gradient(circle at 30% 25%, rgba(54,241,225,0.18), rgba(13,25,43,0.85) 60%);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
    }
    .streak-ring > div {
      position: relative; text-align: center;
    }
    .streak-ring .flame { font-size: 26px; }
    .streak-ring strong { display: block; font-size: 30px; font-weight: 920; line-height: 1; margin-top: 4px; }
    .streak-ring small { color: var(--muted); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; }

    .daily-goal {
      display: grid;
      grid-template-columns: 1fr;
      gap: 8px; margin-top: 14px;
      text-align: center;
    }
    .daily-goal .progress-track { width: 100%; height: 8px; }

    /* Gauge (semicircle) */
    .gauge {
      position: relative;
      width: 200px; height: 110px; margin: 0 auto;
    }
    .gauge svg { width: 100%; height: 100%; }
    .gauge .gauge-track { stroke: rgba(95,185,255,0.10); stroke-width: 18; fill: none; stroke-linecap: round; }
    .gauge .gauge-fill { stroke: url(#gaugeGrad); stroke-width: 18; fill: none; stroke-linecap: round; }
    .gauge-label { text-align: center; margin-top: -22px; }
    .gauge-label strong { font-size: 30px; font-weight: 920; }
    .gauge-label span { display: block; color: var(--muted); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; }

    /* Bookmarks shelf */
    .bookmark-shelf { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
    .bookmark {
      display: grid; grid-template-rows: auto 1fr;
      padding: 12px 14px;
      border: 1px solid var(--line);
      border-radius: 12px;
      background: rgba(13,25,43,0.55);
      text-align: left;
      cursor: pointer;
      gap: 4px;
    }
    .bookmark:hover { border-color: var(--line-strong); background: var(--panel-hover); }
    .bookmark .bm-tag { color: var(--teal); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 800; }
    .bookmark strong { font-size: 13.5px; line-height: 1.35; }
    .bookmark small { color: var(--muted); font-size: 11.5px; }
    .bookmark.locked-bm { border-color: rgba(255,200,90,0.32); background: linear-gradient(135deg, rgba(255,200,90,0.06), rgba(13,25,43,0.55)); }
    .bookmark.locked-bm .bm-tag { color: var(--gold); }
    .bookmark.locked-bm small { color: var(--gold); }

    /* Recording card grid */
    .recording-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
    .recording-card {
      border: 1px solid var(--line);
      border-radius: 14px;
      overflow: hidden;
      background: var(--panel);
      cursor: pointer;
      display: grid; grid-template-rows: 110px auto;
    }
    .recording-card .rec-thumb {
      position: relative;
      background: linear-gradient(135deg, #07111f 0%, #1a3a5e 60%, #36f1e1 140%);
      display: grid; place-items: center;
    }
    .recording-card .rec-thumb::after {
      content: "▶"; width: 40px; height: 40px; border-radius: 50%;
      background: rgba(8,17,31,0.78); color: var(--teal);
      display: grid; place-items: center; font-size: 14px;
      box-shadow: 0 8px 22px rgba(0,0,0,0.4);
    }
    .recording-card .rec-len {
      position: absolute; right: 8px; bottom: 8px;
      background: rgba(0,0,0,0.65); color: #fff; font-size: 11px; padding: 2px 8px; border-radius: 4px;
    }
    .recording-card .rec-meta { padding: 11px 13px; }
    .recording-card .rec-meta strong { display: block; font-size: 13px; }
    .recording-card .rec-meta small { color: var(--muted); font-size: 11.5px; }

    /* Month calendar */
    .month-calendar { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-top: 8px; }
    .month-calendar .dow { color: var(--muted-2); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 800; padding: 0 0 6px; text-align: center; }
    .month-day { aspect-ratio: 1; border-radius: 8px; padding: 4px 6px; background: rgba(13,25,43,0.45); border: 1px solid var(--line); position: relative; font-size: 11px; color: var(--muted); display: flex; flex-direction: column; }
    .month-day strong { color: var(--text); font-size: 13px; }
    .month-day.dim { opacity: 0.32; }
    .month-day.today { border-color: rgba(255,200,90,0.55); }
    .month-day .ev-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--teal); margin-top: auto; }
    .month-day.has-2 .ev-dot { box-shadow: 0 0 0 4px rgba(54,241,225,0.18); }

    /* Lab signup */
    .seat-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; max-width: 360px; }
    .seat { aspect-ratio: 1; border-radius: 6px; background: rgba(95,185,255,0.10); border: 1px solid var(--line); }
    .seat.taken { background: rgba(255,83,112,0.20); border-color: rgba(255,83,112,0.4); }
    .seat.mine { background: rgba(54,241,225,0.30); border-color: var(--teal); box-shadow: 0 0 0 2px rgba(54,241,225,0.4); }
    .seat-legend { display: flex; gap: 14px; margin-top: 10px; font-size: 12px; color: var(--muted); }
    .seat-legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -2px; }
    .seat-legend .open { background: rgba(95,185,255,0.10); border: 1px solid var(--line); }
    .seat-legend .taken { background: rgba(255,83,112,0.20); }
    .seat-legend .mine { background: rgba(54,241,225,0.30); }

    /* Benchmark band */
    .benchmark-band {
      position: relative; height: 14px; margin-top: 8px;
      background: linear-gradient(90deg, rgba(255,83,112,0.22), rgba(255,200,90,0.22) 50%, rgba(77,232,167,0.22));
      border-radius: 999px;
    }
    .benchmark-band .marker {
      position: absolute; top: -4px; width: 4px; height: 22px; border-radius: 4px;
    }
    .benchmark-band .marker.you { background: var(--teal); box-shadow: 0 0 12px rgba(54,241,225,0.6); }
    .benchmark-band .marker.peer { background: var(--gold); }
    .benchmark-band .marker.cohort { background: #fff; opacity: 0.55; }
    .benchmark-band .marker.all { background: var(--cyan); }

    /* Monthly leaderboard (Progress) — decorative-first preview */
    .lb-you {
      display: flex; align-items: center; gap: 14px;
      padding: 14px 16px; margin: 4px 0 16px; border-radius: var(--radius-md);
      background: linear-gradient(135deg, rgba(255,200,90,0.12), rgba(54,241,225,0.08));
      border: 1px solid var(--line-strong);
    }
    .lb-you-rank { font-size: 26px; font-weight: 850; color: var(--gold); }
    .lb-you-body { display: grid; gap: 2px; }
    .lb-you-body strong { color: var(--text); font-size: 15px; }
    .lb-you-body span { color: var(--muted); font-size: 12.5px; }
    .lb-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 18px; }
    .lb-list { display: grid; gap: 2px; }
    .lb-row { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px; }
    .lb-row.is-you { background: rgba(54,241,225,0.10); border: 1px solid rgba(54,241,225,0.4); }
    .lb-rank { font-weight: 800; color: var(--muted); text-align: center; font-size: 14px; }
    .lb-name { font-weight: 700; color: var(--text); font-size: 14px; }
    .lb-pts { font-weight: 800; color: var(--gold); font-size: 13.5px; }
    .lb-movers h4 { margin: 0 0 8px; font-size: 13px; color: var(--text); font-weight: 800; }
    .lb-mover { display: flex; justify-content: space-between; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; color: var(--text); }
    .lb-mover.is-you { color: var(--teal); font-weight: 700; }
    .lb-mover .lb-up { color: var(--green); font-weight: 800; }
    @media (max-width: 720px) { .lb-grid { grid-template-columns: 1fr; } }

    /* Strength / gap callouts */
    .callout-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
    .callout {
      padding: 14px 16px; border-radius: var(--radius-md);
      border: 1px solid var(--line);
      background: rgba(13,25,43,0.55);
      display: grid; gap: 6px;
    }
    .callout.up { border-color: rgba(77,232,167,0.35); background: linear-gradient(135deg, rgba(77,232,167,0.06), rgba(13,25,43,0.55)); }
    .callout.down { border-color: rgba(255,200,90,0.35); background: linear-gradient(135deg, rgba(255,200,90,0.06), rgba(13,25,43,0.55)); }
    .callout small { color: var(--muted); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 800; }
    .callout strong { font-size: 16px; }
    .callout .callout-meta { color: var(--muted); font-size: 12.5px; }

    /* Milestone markers */
    .milestones { display: flex; gap: 12px; flex-wrap: wrap; padding-top: 4px; }
    .milestone {
      flex: 1 1 160px;
      padding: 14px 16px;
      border: 1px solid var(--line);
      border-radius: var(--radius-md);
      background: rgba(13,25,43,0.55);
      display: grid; gap: 4px;
      position: relative;
    }
    .milestone.done { border-color: rgba(77,232,167,0.4); background: linear-gradient(135deg, rgba(77,232,167,0.08), rgba(13,25,43,0.55)); }
    .milestone.next { border-color: rgba(54,241,225,0.5); }
    .milestone .mile-icon { width: 32px; height: 32px; border-radius: 50%; background: rgba(95,185,255,0.18); display: grid; place-items: center; font-weight: 900; color: var(--cyan); }
    .milestone.done .mile-icon { background: rgba(77,232,167,0.18); color: var(--green); }
    .milestone.next .mile-icon { background: rgba(54,241,225,0.18); color: var(--teal); }
    .milestone strong { font-size: 14px; }
    .milestone small { color: var(--muted); font-size: 11.5px; }

    /* Prereq graph (simple) */
    .prereq-graph {
      position: relative; padding: 14px 4px;
      display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
    }
    .prereq-node {
      padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px;
      background: rgba(13,25,43,0.55); font-size: 13px;
      text-align: center;
      position: relative;
    }
    .prereq-node.done { border-color: rgba(77,232,167,0.35); }
    .prereq-node.locked { opacity: 0.55; }
    .prereq-node strong { display: block; font-size: 13px; }
    .prereq-node small { color: var(--muted); font-size: 11px; }
    .prereq-node::after { content: "→"; position: absolute; right: -10px; top: 50%; transform: translate(0, -50%); color: var(--muted-2); font-size: 14px; }
    .prereq-node:last-child::after { display: none; }

    /* Time-on-task chart */
    .time-task {
      display: grid;
      gap: 10px;
      padding: 0 18px 18px;
    }
    .time-task-row {
      display: grid;
      grid-template-columns: minmax(150px, 220px) minmax(120px, 1fr) 54px;
      gap: 12px;
      align-items: center;
      font-size: 13px;
      min-width: 0;
    }
    .time-task-row > span:first-child {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      color: var(--text);
      font-weight: 700;
    }
    .time-task-row .bar-track { background: rgba(95,185,255,0.08); height: 10px; border-radius: 999px; overflow: hidden; min-width: 0; }
    .time-task-row .bar-fill { height: 100%; background: linear-gradient(90deg, var(--teal), var(--blue)); }
    .time-task-row em { font-style: normal; color: var(--muted); text-align: right; }

    /* Faceted search rail */
    .facet-rail { display: grid; gap: 16px; padding: 6px 4px; }
    .facet-group strong { display: block; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 800; color: var(--muted-2); margin-bottom: 8px; }
    .facet-group label { display: flex; align-items: center; gap: 8px; padding: 5px 0; color: #c9d6e8; font-size: 13.5px; cursor: pointer; }
    .facet-group input { accent-color: var(--teal); }
    .facet-group input[type="search"] { flex: 1; cursor: text; }
    .facet-search-shell { display: grid; grid-template-columns: 230px 1fr; gap: 18px; }

    /* Lesson Library catalog (real data) */
    .lib-search { width: 100%; padding: 8px 10px; border-radius: 9px; border: 1px solid var(--line); background: rgba(8,16,28,.6); color: var(--text); font-size: 13.5px; }
    .lib-search:focus { outline: none; border-color: var(--line-strong); }
    .lib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(212px, 1fr)); gap: 14px; align-items: stretch; }
    .lib-grid .cb-mod-card { min-width: 0; max-width: none; }
    .lib-results-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; color: var(--muted); font-size: 12.5px; font-weight: 700; }
    .lib-results-head .ghost-btn { padding: 5px 12px; font-size: 12px; }
    .facet-count { margin-left: auto; color: var(--muted-2); font-size: 11px; font-weight: 800; }
    .lib-cat-tile { transition: border-color .15s ease, transform .15s ease; }
    .lib-cat-tile:hover { border-color: var(--line-strong); transform: translateY(-2px); }
    .lib-cat-tile.active { border-color: var(--teal); box-shadow: 0 0 0 1px rgba(54,241,225,.3); }
    .lib-cat-soon { opacity: .66; }
    .lib-cat-soon .kpi-value { color: var(--muted-2); }
    .lib-cat-soon .kpi-delta { color: var(--muted-2); }
    .lib-empty { margin-top: 4px; }
    .link-btn { background: none; border: 0; color: var(--cyan); cursor: pointer; font: inherit; text-decoration: underline; padding: 0; }
    @media (max-width: 640px) { .lib-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } }

    /* Share/verify modal */
    .modal-backdrop.share-open .modal { transform: scale(1); }
    .share-grid {
      display: grid; gap: 12px; padding: 8px 0 4px;
    }
    .share-link {
      display: grid; grid-template-columns: 1fr auto;
      gap: 8px; align-items: center;
      padding: 10px 12px;
      background: rgba(8,17,31,0.7);
      border: 1px solid var(--line);
      border-radius: 10px;
      font-family: ui-monospace, monospace; font-size: 12.5px;
    }
    .qr-block {
      width: 120px; height: 120px; margin: 0 auto;
      background:
        repeating-conic-gradient(#0b1220 0% 25%, #fff 0% 50%) 0 0/12px 12px;
      border: 4px solid #fff; border-radius: 6px;
    }

    @media (max-width: 940px) {
      .view-banner { grid-template-columns: 1fr; min-height: 0; padding: 22px 22px 20px; }
      .view-banner .banner-stats { grid-template-columns: repeat(4, 1fr); }
      .radar-wrap { grid-template-columns: 1fr; }
      .builder-split, .audit-explorer { grid-template-columns: 1fr; }
      .form-grid { grid-template-columns: 1fr; }
      .item-bank-row { grid-template-columns: 1fr 70px 70px; }
      .item-bank-row > :nth-child(4), .item-bank-row > :nth-child(5) { display: none; }
      .facet-search-shell { grid-template-columns: 1fr; }
      .callout-grid, .prereq-graph { grid-template-columns: 1fr; }
      .prereq-node::after { display: none; }
    }
    @media (max-width: 620px) {
      .view-banner .banner-stats { grid-template-columns: repeat(2, 1fr); }
    }

    .view-header {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 18px;
      flex-wrap: wrap;
      padding: 4px 2px 22px;
      border-bottom: 1px solid var(--line);
      margin-bottom: 22px;
    }
    .view-header h1 { font-size: 28px; margin: 0 0 6px; letter-spacing: 0.01em; }
    .view-header p { color: var(--muted); margin: 0; max-width: 620px; line-height: 1.55; }
    .view-header .view-actions { display: flex; gap: 10px; flex-wrap: wrap; }

    .kpi-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 14px;
      margin-bottom: 22px;
    }
    .kpi-card {
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: var(--radius-md);
      padding: 18px 18px 16px;
      position: relative;
      overflow: hidden;
    }
    .kpi-card .kpi-label { color: var(--muted); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700; }
    .kpi-card .kpi-value { display: block; margin-top: 8px; font-size: 30px; font-weight: 820; letter-spacing: 0.01em; }
    .kpi-card .kpi-delta { display: inline-block; margin-top: 6px; color: var(--green); font-size: 12px; font-weight: 700; }
    .kpi-card .kpi-delta.down { color: var(--danger); }
    .kpi-card .kpi-icon {
      position: absolute; right: 14px; top: 14px;
      width: 36px; height: 36px; border-radius: 10px;
      display: grid; place-items: center;
      background: linear-gradient(135deg, rgba(54,241,225,0.18), rgba(47,111,255,0.18));
      color: var(--teal); font-size: 13px; font-weight: 800;
    }

    .quick-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0,1fr));
      gap: 14px;
      margin-bottom: 22px;
    }
    .view[data-view="Reports"] .quick-grid {
      align-items: start;
      margin-top: 14px;
    }
    .view[data-view="Course Materials"] > .quick-grid,
    .view[data-view="Course Materials"] > .premium-panel.section {
      margin-top: 14px;
    }
    .data-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 13.5px;
    }
    .data-table th, .data-table td {
      text-align: left;
      padding: 11px 12px;
      border-bottom: 1px solid var(--line);
      vertical-align: middle;
    }
    .data-table th {
      color: var(--muted-2);
      font-size: 11px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      font-weight: 800;
    }
    .data-table tr:last-child td { border-bottom: 0; }
    .data-table tr:hover td { background: rgba(95,185,255,0.04); }

    /* ===== All Users table — keep every per-row action visible on smaller
       monitors. The actions cell wraps instead of clipping off-panel; below
       1750px the Email column folds into a sub-line under the learner name,
       and below 1600px button labels collapse to icon-only (title tooltips
       carry the names). Phones (≤720px) already scroll the table sideways. */
    .al-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
    .al-actions .ghost-btn { white-space: nowrap; }
    .al-email-sub { display: none; }
    @media (max-width: 1749px) {
      .view[data-view="All Users"] .al-email-col { display: none; }
      .view[data-view="All Users"] .al-email-sub {
        display: block;
        max-width: 210px;
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
        font-size: 11.5px; color: var(--muted);
      }
    }
    @media (max-width: 1599px) and (min-width: 721px) {
      .view[data-view="All Users"] .al-lbl { display: none; }
      .view[data-view="All Users"] .data-table th,
      .view[data-view="All Users"] .data-table td { padding: 9px 8px; }
    }

    .pill {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 3px 10px;
      border-radius: 999px;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      background: rgba(95,185,255,0.12);
      color: #c9e2ff;
      border: 1px solid rgba(95,185,255,0.22);
    }
    .pill.green { background: rgba(77,232,167,0.14); color: #b8f6d8; border-color: rgba(77,232,167,0.28); }
    .pill.gold  { background: rgba(255,200,90,0.14); color: #ffe2a8; border-color: rgba(255,200,90,0.28); }
    .pill.red   { background: rgba(255,83,112,0.14); color: #ffc4ce; border-color: rgba(255,83,112,0.28); }
    .pill.gray  { background: rgba(150,165,186,0.10); color: #c2cdde; border-color: rgba(150,165,186,0.22); }

    .cert-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0,1fr));
      gap: 16px;
    }
    .cert-card {
      background: linear-gradient(160deg, rgba(255,200,90,0.08), rgba(54,241,225,0.04) 60%, rgba(13,25,43,0.6));
      border: 1px solid rgba(255,200,90,0.22);
      border-radius: var(--radius-md);
      padding: 22px 20px 18px;
      position: relative;
      overflow: hidden;
    }
    .cert-card::before {
      content: "";
      position: absolute; inset: -1px;
      background: linear-gradient(135deg, rgba(255,200,90,0.0) 35%, rgba(255,200,90,0.10) 65%, transparent 80%);
      pointer-events: none;
    }
    .cert-card .cert-medal {
      width: 48px; height: 48px; border-radius: 50%;
      background: radial-gradient(circle at 30% 30%, #ffe28a, #c89738 75%);
      display: grid; place-items: center;
      font-weight: 900; color: #3b2a09; box-shadow: 0 0 0 4px rgba(255,200,90,0.10);
      margin-bottom: 12px;
    }
    .cert-card.locked { background: rgba(13,25,43,0.6); border-color: var(--line); filter: grayscale(0.4) brightness(0.85); }
    .cert-card.locked .cert-medal { background: radial-gradient(circle at 30% 30%, #5a6478, #2d3543 80%); color: #c2cdde; }
    .cert-card h4 { margin: 0 0 4px; font-size: 16px; }
    .cert-card p { color: var(--muted); margin: 0 0 10px; font-size: 13px; line-height: 1.5; }

    .pathway-tree {
      display: grid;
      gap: 14px;
    }
    .pathway-node {
      display: grid;
      grid-template-columns: 56px 1fr auto;
      gap: 16px;
      align-items: center;
      padding: 16px 18px;
      border: 1px solid var(--line);
      border-radius: var(--radius-md);
      background: var(--panel);
    }
    .pathway-node.done { border-color: rgba(77,232,167,0.4); background: linear-gradient(135deg, rgba(77,232,167,0.08), rgba(13,25,43,0.6)); }
    .pathway-node.current { border-color: rgba(54,241,225,0.5); background: linear-gradient(135deg, rgba(54,241,225,0.10), rgba(13,25,43,0.6)); animation: ambientHeroGlow 4.6s ease-in-out infinite; }
    .pathway-num { width: 56px; height: 56px; border-radius: 14px; background: rgba(95,185,255,0.10); display: grid; place-items: center; font-weight: 900; font-size: 18px; color: var(--cyan); }
    .pathway-node.done .pathway-num { background: rgba(77,232,167,0.18); color: var(--green); }
    .pathway-node.current .pathway-num { background: rgba(54,241,225,0.18); color: var(--teal); }
    .pathway-node h4 { margin: 0 0 4px; font-size: 15px; }
    .pathway-node small { color: var(--muted); }

    .calendar-grid {
      display: grid;
      grid-template-columns: repeat(7, minmax(0,1fr));
      gap: 6px;
      margin-top: 12px;
    }
    .calendar-cell {
      aspect-ratio: 1;
      border-radius: 10px;
      background: rgba(13,25,43,0.55);
      border: 1px solid var(--line);
      display: flex;
      flex-direction: column;
      padding: 6px 8px;
      font-size: 12px;
      color: var(--muted);
      gap: 2px;
      position: relative;
    }
    .calendar-cell.has-session { border-color: rgba(54,241,225,0.5); background: linear-gradient(160deg, rgba(54,241,225,0.10), rgba(13,25,43,0.5)); }
    .calendar-cell.today { border-color: rgba(255,200,90,0.55); }
    .calendar-cell strong { color: var(--text); font-size: 13px; }
    .calendar-cell .ev { font-size: 10px; color: var(--teal); margin-top: auto; }

    .heat-grid {
      display: grid;
      grid-template-columns: repeat(14, 1fr);
      gap: 4px;
      margin-top: 8px;
    }
    .heat-cell { aspect-ratio: 1; border-radius: 4px; background: rgba(95,185,255,0.06); }
    .heat-cell[data-h="1"] { background: rgba(54,241,225,0.18); }
    .heat-cell[data-h="2"] { background: rgba(54,241,225,0.34); }
    .heat-cell[data-h="3"] { background: rgba(54,241,225,0.55); }
    .heat-cell[data-h="4"] { background: rgba(54,241,225,0.85); }

    /* ===== Progress view extras (added 2026-06-22): Today's Mission · Coach ·
       Learning Streak Trail. Solid cards + white text (house style); signature
       gold→teal→blue side-bar; reduced-motion safe. ===== */
    .pg-mission, .pg-coach {
      position: relative; overflow: hidden;
      border: 1px solid var(--line-strong);
      border-radius: var(--radius-md);
      background: var(--panel-strong);
      padding: 20px 22px 20px 26px;
      box-shadow: 0 16px 44px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.05);
      margin-bottom: 16px;
    }
    .pg-mission::before, .pg-coach::before {
      content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
      background: linear-gradient(180deg, var(--gold), var(--teal) 55%, var(--blue));
    }
    /* Today's Mission */
    .pg-mission { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
    .pg-mission .pgm-body { flex: 1 1 280px; min-width: 240px; }
    .pg-mission .pgm-eyebrow {
      display: inline-flex; align-items: center; gap: 7px; color: var(--gold);
      font-size: 12px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
    }
    .pg-mission .pgm-spark { animation: pgPulse 2.4s ease-in-out infinite; }
    .pg-mission h3 { margin: 8px 0 10px; font-size: 22px; font-weight: 820; color: var(--text); letter-spacing: 0.01em; }
    .pg-mission .pgm-meta { display: flex; gap: 22px; flex-wrap: wrap; color: var(--muted); font-size: 13.5px; font-weight: 600; }
    .pg-mission .pgm-meta b { color: var(--text); font-weight: 800; }
    .pg-mission .pgm-reward b { color: var(--gold); }
    .pg-mission .pgm-cta { flex: 0 0 auto; }
    .pg-mission .pgm-cta button {
      border: 0; cursor: pointer; border-radius: 14px; padding: 14px 26px;
      font-size: 15px; font-weight: 800; color: #05121f;
      background: linear-gradient(135deg, var(--gold), #ffd98a);
      box-shadow: 0 10px 26px rgba(255,200,90,0.32);
      transition: transform .15s ease, box-shadow .15s ease;
    }
    .pg-mission .pgm-cta button:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(255,200,90,0.42); }
    .pg-mission .pgm-cta button:active { transform: translateY(0); }
    .pg-mission::after {
      content: ""; position: absolute; right: -60px; top: -60px; width: 200px; height: 200px;
      background: radial-gradient(circle, rgba(255,200,90,0.18), transparent 70%);
      pointer-events: none; animation: pgPulse 4s ease-in-out infinite;
    }
    /* Coach says */
    .pg-coach { display: flex; gap: 16px; align-items: flex-start; }
    .pg-coach .pgc-avatar {
      flex: 0 0 auto; width: 52px; height: 52px; border-radius: 50%;
      display: grid; place-items: center; font-size: 26px;
      background: linear-gradient(135deg, rgba(54,241,225,0.22), rgba(47,111,255,0.22));
      border: 1px solid var(--line-strong);
    }
    .pg-coach .pgc-label { color: var(--teal); font-size: 12px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
    .pg-coach .pgc-msg { margin: 6px 0 0; color: var(--text); font-size: 15px; line-height: 1.55; font-weight: 500; }
    /* Learning Streak Trail */
    .pg-streak .pgs-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 4px; }
    .pg-streak .pgs-count { color: var(--gold); font-weight: 820; font-size: 15px; }
    .streak-trail { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
    .trail-day {
      width: 38px; height: 46px; border-radius: 12px; position: relative;
      display: grid; place-items: center; font-size: 18px;
      background: rgba(95,185,255,0.06); border: 1px solid var(--line);
    }
    .trail-day .td-dow { position: absolute; bottom: 3px; font-size: 8.5px; color: var(--muted-2); font-weight: 700; }
    .trail-day.lvl-rest   { opacity: 0.5; }
    .trail-day.lvl-dim    { background: rgba(255,200,90,0.12); border-color: rgba(255,200,90,0.22); }
    .trail-day.lvl-bright { background: rgba(255,140,60,0.20); border-color: rgba(255,150,70,0.45); box-shadow: 0 0 14px rgba(255,140,60,0.35); animation: pgFlame 2.2s ease-in-out infinite; }
    .trail-day.lvl-bonus  { background: rgba(54,241,225,0.18); border-color: rgba(54,241,225,0.5); box-shadow: 0 0 16px rgba(54,241,225,0.4); }
    .trail-day.is-today   { outline: 2px solid var(--gold); outline-offset: 2px; }
    /* Weekly "do at least one Hour" goal on the Streak Trail */
    .pg-weekgoal { display: flex; align-items: center; gap: 12px; margin: 12px 0 2px; padding: 10px 12px; border-radius: 12px; background: rgba(54,241,225,0.07); border: 1px solid var(--line); }
    .pg-weekgoal .wg-body { flex: 1 1 auto; }
    .pg-weekgoal .wg-title { color: var(--text); font-weight: 700; font-size: 13.5px; }
    .pg-weekgoal .wg-sub { color: var(--muted); font-size: 12px; }
    .pg-weekgoal .wg-bar { margin-top: 6px; height: 7px; border-radius: 999px; background: rgba(255,255,255,.08); overflow: hidden; }
    .pg-weekgoal .wg-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--gold), var(--teal)); border-radius: 999px; }
    .pg-weekgoal.met { background: rgba(77,232,167,0.10); border-color: rgba(77,232,167,0.35); }
    /* Demo flag pill */
    .demo-flag {
      display: inline-block; margin-left: 8px; vertical-align: middle;
      font-size: 10px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
      color: #1a1205; background: var(--gold); padding: 2px 8px; border-radius: 999px;
    }
    /* Source tag on Progress panels: makes it unmistakable which data a panel shows
       — 📚 graded coursework vs 🎮 game/quest practice. */
    .pg-source-tag {
      display: inline-block; margin-left: 8px; vertical-align: middle;
      font-size: 10px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
      color: #cfe9ff; background: rgba(80,150,255,0.16); border: 1px solid rgba(120,170,255,0.45);
      padding: 2px 9px; border-radius: 999px;
    }
    .pg-source-tag.games { color: #ffe2c2; background: rgba(255,150,70,0.16); border-color: rgba(255,170,90,0.5); }
    .pg-pp-tile { margin-top: 14px; }
    .pg-pp-tile .pg-pp-card {
      display: flex; align-items: center; gap: 12px;
      background: rgba(255,255,255,0.05); border: 1px dashed rgba(255,255,255,0.22);
      border-radius: 14px; padding: 14px 16px;
    }
    .pg-pp-tile .pg-pp-emoji { font-size: 26px; line-height: 1; }
    .pg-pp-tile strong { color: #fff; display: block; font-size: 14px; }
    .pg-pp-tile span { color: rgba(255,255,255,0.72); font-size: 12.5px; }
    .pg-games-empty { color: rgba(255,255,255,0.72); font-size: 13px; padding: 6px 2px; }
    /* Pressure Point tile once the game is LIVE — solid border, clickable */
    .pg-pp-tile .pg-pp-card.is-live {
      border-style: solid; border-color: rgba(54,241,225,0.35); cursor: pointer;
      background: linear-gradient(135deg, rgba(54,241,225,0.08), rgba(255,255,255,0.04));
      transition: border-color .15s ease, transform .15s ease;
    }
    .pg-pp-tile .pg-pp-card.is-live:hover { border-color: rgba(54,241,225,0.6); transform: translateY(-2px); }
    .pg-pp-play {
      margin-left: auto; flex: 0 0 auto;
      font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
      color: #04101e; background: linear-gradient(90deg, var(--teal), var(--blue));
      padding: 6px 14px; border-radius: 999px; white-space: nowrap;
    }

    /* ── My Journey wallet card (Progress view) ─────────────────────────── */
    .pg-journey {
      display: grid; grid-template-columns: minmax(220px, 1.2fr) 1.6fr;
      gap: 18px; align-items: center;
    }
    .pgj-level-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
    .pgj-level-pill {
      font-weight: 850; font-size: 14px; color: #04101e;
      background: linear-gradient(90deg, var(--gold), #ffdf9a);
      padding: 5px 14px; border-radius: 999px;
      box-shadow: 0 4px 14px rgba(255,200,90,0.25);
    }
    .pgj-level-title { color: var(--muted); font-size: 12.5px; font-weight: 700; letter-spacing: 0.04em; }
    .pgj-xpbar {
      height: 8px; border-radius: 999px; background: rgba(255,255,255,0.08);
      overflow: hidden; margin-top: 10px;
    }
    .pgj-xpbar span {
      display: block; height: 100%; border-radius: 999px; width: 0%;
      background: linear-gradient(90deg, var(--teal), var(--blue));
      transition: width .6s cubic-bezier(.2,.8,.2,1);
    }
    .pgj-xptext { display: block; color: var(--muted); font-size: 11.5px; margin-top: 6px; }
    .pgj-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
    .pgj-stat {
      background: rgba(8,17,31,0.62); border: 1px solid rgba(95,185,255,0.22);
      border-radius: 14px; padding: 12px 10px; text-align: center;
    }
    .pgj-stat.gold { border-color: rgba(255,200,90,0.35); }
    .pgj-stat.fire { border-color: rgba(255,140,60,0.35); }
    .pgj-stat.teal { border-color: rgba(54,241,225,0.3); }
    .pgj-num { display: block; font-size: 20px; font-weight: 850; color: #fff; }
    .pgj-lbl { display: block; margin-top: 3px; color: var(--muted); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; }
    @media (max-width: 860px) {
      .pg-journey { grid-template-columns: 1fr; }
      .pgj-stats { grid-template-columns: repeat(2, 1fr); }
    }
    @keyframes pgPulse { 0%,100% { opacity: .65; transform: scale(1); } 50% { opacity: 1; transform: scale(1.12); } }
    @keyframes pgFlame { 0%,100% { transform: translateY(0); box-shadow: 0 0 14px rgba(255,140,60,0.35);} 50% { transform: translateY(-2px); box-shadow: 0 0 20px rgba(255,160,70,0.55);} }
    @media (prefers-reduced-motion: reduce) {
      .pg-mission .pgm-spark, .pg-mission::after, .trail-day.lvl-bright { animation: none; }
    }
    @media (hover: none) { .pg-mission .pgm-cta button:hover { transform: none; } }

    .achv-grid {
      display: grid;
      grid-template-columns: repeat(6, minmax(0,1fr));
      gap: 12px;
    }
    .achv {
      aspect-ratio: 1;
      border-radius: 14px;
      border: 1px solid var(--line);
      background: var(--panel);
      display: grid;
      place-items: center;
      padding: 8px;
      text-align: center;
      font-size: 11px;
      color: var(--muted);
      gap: 4px;
    }
    .achv strong { color: var(--text); font-size: 12px; line-height: 1.2; }
    .achv .achv-orb { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-weight: 900; color: #03101c; background: linear-gradient(135deg, var(--teal), var(--blue)); }
    .achv.locked { filter: grayscale(0.7) opacity(0.55); }
    .achv.locked .achv-orb { background: rgba(150,165,186,0.18); color: #c2cdde; }

    .review-queue { display: grid; gap: 10px; }
    .review-item {
      display: grid;
      grid-template-columns: 44px 1fr auto auto;
      gap: 12px;
      align-items: center;
      padding: 12px 14px;
      border: 1px solid var(--line);
      border-radius: var(--radius-sm);
      background: rgba(13,25,43,0.55);
    }
    .review-item .review-name { font-weight: 700; }
    .review-item .review-meta { color: var(--muted); font-size: 12px; }

    @media (max-width: 940px) {
      .kpi-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
      .quick-grid { grid-template-columns: 1fr; }
      .cert-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
      .achv-grid { grid-template-columns: repeat(4, minmax(0,1fr)); }
    }
    @media (max-width: 620px) {
      .kpi-grid { grid-template-columns: 1fr; }
      .cert-grid, .achv-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
      .pathway-node { grid-template-columns: 44px 1fr; }
      .pathway-node > :last-child { grid-column: 2; }
    }

    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
      }
    }

    /* ── Announcements widget ─────────────────────────────────────────── */
    /* Empty state — keeps the section a permanent, findable anchor for students. */
    .an-empty {
      text-align: center;
      padding: 22px 16px;
      border-radius: 13px;
      background: linear-gradient(135deg, rgba(30,46,72,.55), rgba(16,28,48,.65));
      border: 1px dashed rgba(120,150,190,.28);
    }
    .an-empty-icon { font-size: 26px; display: block; margin-bottom: 8px; }
    .an-empty-title { font-size: 14px; font-weight: 800; color: var(--text, #eaf2ff); margin-bottom: 4px; }
    .an-empty-sub { font-size: 12.5px; line-height: 1.5; color: var(--muted, #9fb2cc); max-width: 320px; margin: 0 auto; }
    .count-pill {
      font-size: 11px;
      font-weight: 800;
      color: #06121f;
      background: var(--gold, #ffc85a);
      border-radius: 999px;
      padding: 2px 9px;
    }
    .an-notice {
      position: relative;
      border-radius: 13px;
      padding: 14px 14px 14px 17px;
      margin-bottom: 12px;
      background: linear-gradient(135deg, rgba(30,46,72,.92), rgba(16,28,48,.96));
      border: 1px solid rgba(120,150,190,.18);
      overflow: hidden;
    }
    .an-notice:last-child { margin-bottom: 0; }
    .an-notice::before {
      content: "";
      position: absolute;
      left: 0; top: 0; bottom: 0;
      width: 4px;
      border-radius: 4px 0 0 4px;
    }
    .an-notice.urgent::before { background: linear-gradient(180deg, #ff5370, #ff9e4a); }
    .an-notice.info::before   { background: linear-gradient(180deg, var(--gold, #ffc85a), var(--teal, #36f1e1) 55%, var(--blue, #4aa8ff)); }
    .an-top {
      display: flex;
      align-items: flex-start;
      gap: 11px;
    }
    .an-icon {
      font-size: 26px;
      line-height: 1;
      filter: drop-shadow(0 2px 6px rgba(0,0,0,.5));
    }
    .an-eyebrow {
      font-size: 10.5px;
      letter-spacing: .13em;
      text-transform: uppercase;
      font-weight: 800;
      margin: 1px 0 3px;
    }
    .an-notice.urgent .an-eyebrow { color: #ff8190; }
    .an-notice.info   .an-eyebrow { color: var(--teal, #36f1e1); }
    .an-when {
      font-size: 11px;
      color: var(--muted, #96a5ba);
      font-weight: 600;
      white-space: nowrap;
    }
    .an-title {
      font-size: 15.5px;
      font-weight: 800;
      margin: 0 0 5px;
      letter-spacing: .2px;
      color: #f5f8ff;
    }
    .an-body {
      font-size: 13px;
      color: #d7e0ee;
      margin: 0 0 9px;
    }
    .an-reassure {
      font-size: 12px;
      color: #bfe9cf;
      background: rgba(54,241,225,.08);
      border: 1px solid rgba(54,241,225,.18);
      border-radius: 9px;
      padding: 7px 9px;
      margin: 0 0 11px;
      display: flex;
      gap: 7px;
      align-items: flex-start;
    }
    .an-ack {
      display: flex;
      align-items: center;
      gap: 10px;
      background: rgba(255,200,90,.07);
      border: 1px solid rgba(255,200,90,.28);
      border-radius: 10px;
      padding: 9px 11px;
      cursor: pointer;
      transition: .15s;
    }
    .an-ack:hover { background: rgba(255,200,90,.13); }
    .an-ack .box {
      width: 19px; height: 19px;
      border-radius: 5px;
      border: 2px solid var(--gold, #ffc85a);
      flex: 0 0 auto;
    }
    .an-ack .lbl {
      font-size: 12.5px;
      font-weight: 700;
      color: #ffe2a6;
    }
    .an-ack.checked {
      background: rgba(63,209,127,.12);
      border-color: rgba(63,209,127,.5);
    }
    .an-ack-confirm {
      font-size: 12.5px;
      font-weight: 700;
      color: #a8f0c4;
      background: rgba(63,209,127,.12);
      border: 1px solid rgba(63,209,127,.4);
      border-radius: 10px;
      padding: 9px 11px;
      cursor: pointer;
    }
    .an-collapsed { padding: 8px 14px 8px 17px; }
    .an-foot {
      font-size: 10.5px;
      color: var(--muted-2, #6d7b90);
      margin: 9px 0 0;
      display: flex;
      align-items: center;
      gap: 6px;
    }
    @media (hover: none) { .an-ack:hover { background: rgba(255,200,90,.07); } }

    /* ── Announcements: staff-side styles ────────────────────────────── */
    .an-sum {
      font-size: 12px;
      color: var(--muted, #96a5ba);
      margin: 9px 0 6px;
      font-weight: 600;
    }
    .an-roster { margin-top: 8px; border-top: 1px solid rgba(120,150,190,.14); padding-top: 8px; }
    .an-r-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 12.5px;
      padding: 5px 2px;
      color: #e6ecf6;
    }
    .an-r-row .chip {
      font-size: 10px;
      font-weight: 800;
      border-radius: 999px;
      padding: 2px 8px;
    }
    .an-r-row .chip.home { background: rgba(63,209,127,.16); color: #a8f0c4; }
    .an-r-row .chip.none { background: rgba(150,165,186,.12); color: var(--muted, #96a5ba); }
    .an-remove {
      background: none;
      border: none;
      color: var(--muted-2, #6d7b90);
      cursor: pointer;
      font-size: 14px;
      padding: 2px 6px;
      border-radius: 6px;
      transition: .15s;
      flex: 0 0 auto;
    }
    .an-remove:hover { color: #ff5370; background: rgba(255,83,112,.1); }
    .an-history-link {
      display: block;
      text-align: center;
      font-size: 12px;
      color: var(--teal, #36f1e1);
      font-weight: 700;
      margin-top: 12px;
      text-decoration: none;
    }
    .an-history-link:hover { text-decoration: underline; }

    /* compose modal internals */
    .an-compose-modal { max-width: 540px; }
    .an-kind-toggle {
      display: flex;
      gap: 14px;
      flex-wrap: wrap;
      margin-bottom: 12px;
      font-size: 13.5px;
    }
    .an-kind-toggle label { display: flex; align-items: center; gap: 6px; cursor: pointer; }
    .an-presets {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-bottom: 12px;
    }
    .an-preset {
      background: rgba(255,200,90,.09);
      border: 1px solid rgba(255,200,90,.28);
      border-radius: 8px;
      padding: 5px 10px;
      font-size: 12px;
      color: #ffe2a6;
      cursor: pointer;
      transition: .15s;
    }
    .an-preset:hover { background: rgba(255,200,90,.18); }
    @media (hover: none) {
      .an-remove:hover { color: var(--muted-2, #6d7b90); background: none; }
      .an-history-link:hover { text-decoration: none; }
      .an-preset:hover { background: rgba(255,200,90,.09); }
    }
    .an-input {
      display: block;
      width: 100%;
      background: rgba(8,17,31,.6);
      border: 1px solid rgba(120,150,190,.25);
      border-radius: 9px;
      padding: 9px 11px;
      color: #f5f8ff;
      font-size: 13px;
      font-family: inherit;
      margin-bottom: 10px;
      box-sizing: border-box;
      resize: vertical;
    }
    .an-input:focus { outline: none; border-color: var(--teal, #36f1e1); }
    .an-input::placeholder { color: var(--muted-2, #6d7b90); }
    .an-audience {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-bottom: 10px;
      font-size: 13px;
      align-items: center;
    }
    .an-audience label { display: flex; align-items: center; gap: 5px; cursor: pointer; }
    .an-audience select { flex: 1 1 160px; margin-bottom: 0; }
    .an-row {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 13px;
      margin-bottom: 10px;
      cursor: pointer;
    }
    #announcementsPostBtn { margin-left: auto; font-size: 12px; padding: 4px 10px; }
    /* ── end Announcements widget ─────────────────────────────────────── */

  

/* ===== inline style block 2 ===== */

    /* Read-only enforcement while viewing as a student. CSS-only — disables
       any obvious "save / submit / mark / shift / move / delete" controls so
       Kathleen can't accidentally write data while pretending to be Anderson.
       The banner takes 38px at the top; nudge .app-shell down so nothing
       is occluded. */
    body[data-viewing-as] .app-shell { margin-top: 38px; }
    body[data-viewing-as] button[type="submit"],
    body[data-viewing-as] .att-cell,
    body[data-viewing-as] .att-quick,
    body[data-viewing-as] .role-switch,
    body[data-viewing-as] [data-action="save"],
    body[data-viewing-as] .gb-cell input,
    body[data-viewing-as] .grade-input,
    body[data-viewing-as] #viewAsExit  { /* exit button stays active — overridden below */ }
    body[data-viewing-as] .att-cell,
    body[data-viewing-as] .att-quick,
    body[data-viewing-as] .gb-cell input,
    body[data-viewing-as] .grade-input,
    body[data-viewing-as] .role-switch button { pointer-events: none; opacity: .55; cursor: not-allowed; }
    body[data-viewing-as] #viewAsExit { pointer-events: auto !important; opacity: 1 !important; cursor: pointer !important; }
    .isr-subhead { margin: 14px 18px 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
    .isr-form { padding: 4px 18px 16px; display: flex; flex-direction: column; gap: 12px; }
    .isr-day { display: inline-flex; align-items: center; gap: 6px; margin-right: 10px; font-size: 13px; }
    .isr-locked { padding: 14px 18px; color: var(--gold, #ffc85a); font-size: 13px; }
    .isr-row { display: flex; align-items: center; gap: 12px; padding: 10px 18px; border-top: 1px solid rgba(255,255,255,0.05); font-size: 13px; }
    .isr-row .isr-desc { flex: 1; }
    .isr-status { font-size: 11px; font-weight: 700; border-radius: 5px; padding: 2px 8px; }
    .isr-status.pending   { background: rgba(255,200,90,0.14); color: var(--gold, #ffc85a); }
    .isr-status.approved  { background: rgba(77,232,167,0.14); color: var(--green, #4de8a7); }
    .isr-status.denied    { background: rgba(255,83,112,0.14); color: var(--danger, #ff5370); }
    .isr-status.cancelled { background: rgba(255,255,255,0.06); color: var(--muted); }
    #isrCoverage { display: none; }
    #isrCoverage.show { display: block; }
  

/* ===== inline style block 3 ===== */

        /* Online Lessons hub — scoped to the new view; reuses premium-panel/pill/progress-track tokens. */
        .view[data-view="Online Lessons"] .hub-crumbs {
          display: flex; align-items: center; gap: 8px;
          color: var(--muted); font-size: 12.5px; letter-spacing: 0.04em;
          padding: 4px 0 14px;
        }
        .view[data-view="Online Lessons"] .hub-crumbs a {
          color: var(--muted); text-decoration: none; cursor: pointer;
        }
        .view[data-view="Online Lessons"] .hub-crumbs a:hover { color: var(--text); }
        .view[data-view="Online Lessons"] .hub-crumbs .sep { color: var(--muted-2); }
        .view[data-view="Online Lessons"] .hub-crumbs strong { color: var(--text); font-weight: 700; }

        /* Wave 2 hub redesign owns .hub-group-head and .hub-group-accent;
           the scoped overrides that used to live here were vestigial from the
           pre-card layout and forced the accent to a 10×10 square instead of
           the new 4×22 strip. Removed 2026-05-22. */
        .view[data-view="Online Lessons"] .hub-group-progress {
          min-width: 180px; display: flex; flex-direction: column; gap: 6px; align-items: flex-end;
          font-size: 12px; color: var(--muted);
        }
        .view[data-view="Online Lessons"] .hub-group-progress .progress-track { width: 180px; }

        .view[data-view="Online Lessons"] .curriculum-grid {
          display: grid; gap: 8px; padding: 0 18px 18px;
        }
        .view[data-view="Online Lessons"] .lesson-row {
          display: grid; grid-template-columns: 36px 1fr auto; gap: 14px; align-items: center;
          padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px;
          background: rgba(13,25,43,0.45); transition: background .15s, border-color .15s;
        }
        .view[data-view="Online Lessons"] .lesson-row:hover {
          background: rgba(54,241,225,0.06); border-color: rgba(54,241,225,0.22);
        }
        .view[data-view="Online Lessons"] .lesson-row strong { font-size: 13.5px; }
        .view[data-view="Online Lessons"] .lesson-row small { color: var(--muted); font-size: 11.5px; display: block; margin-top: 2px; }
        .view[data-view="Online Lessons"] .status-mark {
          width: 32px; height: 32px; border-radius: 50%;
          display: grid; place-items: center;
          font-weight: 700; font-size: 13px;
          background: rgba(255,255,255,0.05); color: var(--muted);
          border: 1px solid var(--line);
        }
        .view[data-view="Online Lessons"] .lesson-row[data-status="completed"] .status-mark {
          background: rgba(77,232,167,0.18); color: #4de8a7; border-color: rgba(77,232,167,0.38);
        }
        .view[data-view="Online Lessons"] .lesson-row[data-status="in_progress"] .status-mark {
          background: rgba(54,241,225,0.18); color: #36f1e1; border-color: rgba(54,241,225,0.38);
        }
        .view[data-view="Online Lessons"] .lesson-row[data-status="failed"] .status-mark {
          background: rgba(255,83,112,0.18); color: #ff5370; border-color: rgba(255,83,112,0.38);
        }
        .view[data-view="Online Lessons"] .hub-empty {
          padding: 30px; text-align: center; color: var(--muted);
        }
        /* ── Program Roadmap (231-hour) ── */
        .view[data-view="Online Lessons"] .ol-notenrolled {
          margin-bottom: 14px; padding: 14px 16px; border-radius: 13px;
          background: rgba(255,200,90,.10); border: 1px solid var(--line-gold);
          color: var(--gold-lt); font-size: 13.5px; line-height: 1.5;
        }
        .view[data-view="Online Lessons"] .ol-sem-title {
          font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
          color: var(--muted); font-weight: 800; margin: 22px 2px 12px;
          display: flex; align-items: baseline; gap: 10px;
        }
        .view[data-view="Online Lessons"] .ol-sem-hrs { color: var(--muted-2); font-weight: 700; letter-spacing: 0; text-transform: none; font-size: 11.5px; }
        .view[data-view="Online Lessons"] .ol-roadmap { display: grid; gap: 11px; }
        .ol-node {
          position: relative; display: grid; grid-template-columns: 56px 1fr auto; align-items: center; gap: 16px;
          padding: 14px 16px; border-radius: 15px; overflow: hidden;
          border: 1px solid var(--line);
          background: linear-gradient(180deg, rgba(14,26,45,.7), rgba(9,18,32,.7));
          transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
        }
        .ol-node::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--accent, #6d7b90); }
        .ol-node.available:hover, .ol-node.in_progress:hover, .ol-node.complete:hover { transform: translateY(-2px); border-color: var(--line-strong); box-shadow: 0 14px 34px rgba(0,0,0,.3); }
        .ol-node.current { border-color: var(--line-strong); box-shadow: 0 0 26px rgba(54,241,225,.14); }
        .ol-node.coming-soon, .ol-node.locked { opacity: .55; }
        .ol-num { width: 56px; height: 56px; border-radius: 14px; display: grid; place-items: center; font-size: 20px; font-weight: 850; color: #06121f; background: var(--art); border: 1px solid rgba(255,255,255,.12); }
        .ol-node.complete .ol-num { background: linear-gradient(135deg, var(--teal), var(--cyan)); }
        .ol-body { min-width: 0; }
        .ol-body h4 { margin: 0; font-size: 15.5px; font-weight: 800; color: var(--text); }
        .ol-tag { color: var(--muted); font-size: 12.5px; margin-top: 2px; }
        .ol-meta { color: var(--muted-2); font-size: 11.5px; margin-top: 5px; }
        .ol-node .progress-line { margin-top: 7px; max-width: 240px; }
        .ol-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex: 0 0 auto; }
        .ol-pill { font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); white-space: nowrap; }
        .ol-pill.in_progress { color: var(--cyan); border-color: rgba(97,185,255,.4); }
        .ol-pill.complete { color: var(--green); border-color: rgba(77,232,167,.4); }
        .ol-enter { cursor: pointer; border: 0; border-radius: 10px; padding: 9px 16px; font-weight: 800; font-size: 13px; color: #05121f; background: linear-gradient(135deg, var(--gold), #ffd98a); }
        .ol-enter:hover { filter: brightness(1.06); }
        .ol-soon-tag { color: var(--muted-2); font-size: 12px; font-weight: 700; }

        /* Expandable subject → shelf of Hour "lesson" cards (mirrors the
           Continue-Learning card look). The whole row toggles; the current
           subject auto-opens so the resume card is right there. */
        .ol-node.ol-expandable { cursor: pointer; }
        .ol-chev { color: var(--muted); font-size: 15px; line-height: 1; transition: transform .18s ease, color .18s ease; }
        .ol-item.is-open .ol-chev { transform: rotate(180deg); color: var(--cyan); }
        .ol-item.is-open .ol-node.ol-expandable { border-color: var(--line-strong); box-shadow: 0 0 22px rgba(54,241,225,.12); }
        .ol-lessons { margin: 9px 0 6px 14px; }
        .ol-lesson-shelf {
          display: grid; grid-auto-flow: column; grid-auto-columns: minmax(212px, 240px);
          gap: 12px; overflow-x: auto; padding: 4px 4px 10px; scrollbar-width: thin;
        }
        .ol-lesson-shelf::-webkit-scrollbar { height: 7px; }
        .ol-lesson-shelf::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); border-radius: 4px; }
        .ol-lesson-card {
          position: relative; display: flex; flex-direction: column; text-align: left;
          border-radius: 14px; overflow: hidden; border: 1px solid var(--line);
          background: linear-gradient(180deg, rgba(15,27,46,.94), rgba(9,18,32,.94));
          min-height: 152px; transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
        }
        .ol-lesson-card[data-cp-module] { cursor: pointer; }
        .ol-lesson-card[data-cp-module]:hover { transform: translateY(-3px); border-color: var(--line-strong); box-shadow: 0 16px 34px rgba(0,0,0,.34); }
        .ol-lesson-card.current { border-color: rgba(54,241,225,.55); box-shadow: 0 0 0 1px rgba(54,241,225,.22), 0 14px 30px rgba(0,0,0,.3); }
        .ol-lesson-card.locked { opacity: .6; }
        .olc-art { position: relative; height: 76px; background: var(--art); display: flex; align-items: flex-start; justify-content: space-between; padding: 8px; }
        .olc-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6,14,26,0) 28%, rgba(6,14,26,.9) 100%); }
        .olc-badge { position: relative; z-index: 1; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; font-size: 15px; font-weight: 850; color: #06121f; background: rgba(255,255,255,.92); border: 1px solid rgba(255,255,255,.5); }
        .ol-lesson-card.complete .olc-badge { background: linear-gradient(135deg, var(--teal), var(--cyan)); color: #04121d; }
        .ol-lesson-card.locked .olc-badge { background: rgba(8,16,28,.72); color: var(--muted); }
        .olc-pill { position: relative; z-index: 1; align-self: flex-start; font-size: 9.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; background: rgba(6,14,26,.72); border: 1px solid var(--line); color: #fff; }
        .olc-pill.complete { color: var(--green); border-color: rgba(77,232,167,.45); }
        .olc-pill.current { color: var(--cyan); border-color: rgba(97,185,255,.5); }
        .olc-pill.locked { color: var(--muted); }
        .olc-body { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
        .olc-body h5 { margin: 0; font-size: 13.5px; font-weight: 800; color: var(--text); line-height: 1.25; }
        .olc-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--muted); font-size: 11px; font-weight: 600; margin-top: auto; }
        .olc-meta strong { color: var(--text); }
        .olc-gate { color: var(--muted); font-size: 11px; font-weight: 600; margin-top: auto; }
        .olc-gate strong { color: var(--muted-2); }
        .ol-lesson-card .progress-line { margin-top: 4px; }
        /* Module cards inside a subject shelf — pick one to reveal its Hours */
        .ol-module-shelf { padding-bottom: 6px; }
        .ol-lesson-card[data-ol-mod-toggle] { cursor: pointer; }
        .ol-lesson-card[data-ol-mod-toggle]:hover { transform: translateY(-3px); border-color: var(--line-strong); box-shadow: 0 16px 34px rgba(0,0,0,.34); }
        .ol-module-card .olc-art { height: 92px; }
        .olc-cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
        .ol-module-card.is-active { border-color: rgba(54,241,225,.55); box-shadow: 0 0 0 1px rgba(54,241,225,.22), 0 14px 30px rgba(0,0,0,.3); }
        .ol-mod-hours { margin: 2px 0 8px 10px; padding-left: 10px; border-left: 3px solid var(--accent, #6d7b90); border-radius: 2px; }
        .ol-module-card.enrollable { border-color: rgba(255,200,90,.5); box-shadow: 0 0 18px rgba(255,200,90,.12); }
        .ol-enroll-btn {
          cursor: pointer; border: 0; border-radius: 9px; padding: 8px 12px;
          font-weight: 800; font-size: 12.5px; color: #05121f;
          background: linear-gradient(135deg, var(--gold), #ffd98a); margin-top: auto;
        }
        .ol-enroll-btn:hover { filter: brightness(1.06); }
        .ol-enroll-btn[disabled] { opacity: .6; cursor: default; }
        @media (max-width: 640px) {
          .ol-node { grid-template-columns: 46px 1fr; }
          .ol-num { width: 46px; height: 46px; font-size: 17px; }
          .ol-actions { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: center; margin-top: 2px; }
          .ol-lessons { margin-left: 4px; }
          .ol-lesson-shelf { grid-auto-columns: minmax(180px, 80vw); }
        }
      

/* ===== inline style block 4 ===== */

        /* Lesson plan body — render markdown into a readable instructor doc.
           Uses the existing dark theme variables; no new color tokens. */
        .lesson-plan-body { color: var(--text); line-height: 1.55; font-size: 15px; }
        .lesson-plan-body h1 { font-size: 20px; margin: 0 0 12px; letter-spacing: -.02em; }
        .lesson-plan-body h2 { font-size: 17px; margin: 18px 0 8px; color: var(--cyan, #61b9ff); }
        .lesson-plan-body h3 { font-size: 15px; margin: 14px 0 6px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
        .lesson-plan-body p { margin: 8px 0; }
        .lesson-plan-body ul { padding-left: 20px; margin: 8px 0; }
        .lesson-plan-body li { margin: 4px 0; }
        .lesson-plan-body .lp-check { list-style: none; padding-left: 0; margin: 10px 0; }
        .lesson-plan-body .lp-check li { display: flex; gap: 10px; align-items: flex-start; padding: 8px 12px;
          border: 1px solid var(--line, rgba(134,190,255,.17)); border-radius: 10px; margin: 6px 0;
          background: rgba(255,255,255,.025); cursor: pointer; user-select: none; }
        .lesson-plan-body .lp-check li:hover { background: rgba(255,255,255,.05); }
        .lesson-plan-body .lp-check input[type=checkbox] { margin-top: 3px; accent-color: var(--teal, #36f1e1); }
        /* Checked-state intentionally left unstyled. The list now reflects
           "what's needed for this lesson" (curated by the author), not a
           mid-class coverage tracker — so striking through checked items
           reads as "ignore this" instead of "covered". */
        .lesson-plan-body .lp-check li.done { opacity: 1; text-decoration: none; }
        .lesson-plan-body .lp-aside { display: flex; gap: 10px; padding: 12px 14px; margin: 14px 0;
          border-left: 3px solid var(--gold, #ffc85a); background: rgba(255,200,90,.06); border-radius: 0 10px 10px 0; }
        .lesson-plan-body .lp-aside-icon { font-size: 18px; line-height: 1; }
        .lesson-plan-body a { color: var(--teal, #36f1e1); text-decoration: underline; }

        /* Stronger section separators — Notion-exported lessons run Plan /
           Instructor Prep / Additional Items / End-of-Day Notes back-to-back
           with no visual chapter break. Top border on h2 fixes that. */
        .lesson-plan-body h2 { padding-top: 16px; border-top: 1px solid var(--line, rgba(134,190,255,.17)); }
        .lesson-plan-body > h2:first-child { padding-top: 0; border-top: 0; }
        /* Cards inside lpBody get their own border treatment, so suppress the
           h2 separator when the heading is the first child of a card panel. */
        .lp-main .premium-panel .lesson-plan-body > h2:first-child,
        .lp-main .premium-panel .premium-panel-head + * .lesson-plan-body h2:first-child { padding-top: 0; border-top: 0; }
        .lp-main .premium-panel .lesson-plan-body h2 { padding-top: 0; border-top: 0; }

        /* Lesson Plan layout: 2-column grid with right rail of stacked cards.
           Collapses to single column on narrow screens (≤980px) so the right
           rail flows below the main content. Each side gets gap-stacked cards
           via the .lp-side flex column. */
        .lp-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px;
          gap: 18px; align-items: start; }
        .lp-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
        .lp-side { display: flex; flex-direction: column; gap: 16px; }
        @media (max-width: 980px) { .lp-layout { grid-template-columns: 1fr; }
          .lp-side { order: 2; } }

        /* Wave 4 — live Present preview slides shown inside the editor.
           Each slide renders on a light card with the subject-color band so
           the user sees roughly what the projector will show. */
        .lp-prev-slide { display: flex; flex-direction: column; gap: 6px; }
        .lp-prev-num { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); padding-left: 6px; }
        .lp-prev-instr .lp-prev-num { color: #ffb84d; }
        .lp-prev-card {
          background: #f4f6fa; color: #15181f;
          border-radius: 12px; padding: 22px 26px;
          box-shadow: 0 4px 18px rgba(0,0,0,0.25);
          min-height: 140px;
        }
        .lp-prev-instr .lp-prev-card { border: 1px solid rgba(255,184,77,.55); }
        .lp-prev-band { width: 48px; height: 3px; background: #ffb84d; border-radius: 2px; margin-bottom: 14px; }
        .lp-prev-card h1 { font-size: 28px; margin: 0 0 .35em; color: #15181f; }
        .lp-prev-card h2 { font-size: 22px; margin: 0 0 .45em; color: #15181f; line-height: 1.15; }
        .lp-prev-card h3 { font-size: 17px; margin: .8em 0 .3em; }
        .lp-prev-card p  { font-size: 14px; margin: .35em 0; line-height: 1.55; }
        .lp-prev-card ul, .lp-prev-card ol { margin: .35em 0; padding-left: 1.4em; font-size: 14px; line-height: 1.5; }
        .lp-prev-card li { margin: .2em 0; }
        .lp-prev-card .md-aside {
          background: rgba(255,184,77,.14); border-left: 3px solid #ffb84d;
          padding: .6em .85em; margin: .8em 0; border-radius: 6px;
        }
        .lp-prev-card .md-table { width: 100%; border-collapse: collapse; margin: .6em 0; font-size: 13px; }
        .lp-prev-card .md-table th, .lp-prev-card .md-table td {
          padding: .45em .65em; border: 1px solid rgba(0,0,0,.08); text-align: left; vertical-align: top;
        }
        .lp-prev-card .md-table th { background: rgba(0,0,0,.04); font-weight: 600; }
        .lp-prev-card .callout-yellow { color: #b07b00; }
        .lp-prev-card .callout-red    { color: #b03030; }
        .lp-prev-card .callout-blue   { color: #2050a0; }
        .lp-prev-card .callout-green  { color: #1e6e1e; }
        .lp-prev-card media-slot {
          display: block; padding: 14px 16px; margin: .8em 0;
          border: 2px dashed rgba(0,0,0,.20); border-radius: 8px;
          font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px;
          color: rgba(21,24,31,.7);
        }
        .lp-prev-card media-slot::before {
          content: '📎 Media: ' attr(data-directive) ' — ' attr(data-filename);
        }
        .lp-prev-title-mode {
          background:
            radial-gradient(ellipse at 12% 10%, rgba(255,184,77,.14), transparent 55%),
            #f4f6fa;
          min-height: 220px;
          display: flex; flex-direction: column; justify-content: center;
        }
        /* Slide outline list — sidebar card showing each H2 section. */
        .lp-outline-item {
          display: flex; align-items: center; gap: 8px;
          padding: 8px 10px;
          background: rgba(255,255,255,0.03);
          border: 1px solid var(--line);
          border-radius: 8px;
          cursor: pointer; font-size: 13px; color: var(--text);
          transition: background .12s, border-color .12s;
        }
        .lp-outline-item:hover { background: rgba(255,184,77,.08); border-color: rgba(255,184,77,.4); }
        .lp-outline-item.is-instructor { border-left: 3px solid #ffb84d; }
        .lp-outline-num {
          font-size: 11px; font-weight: 700; color: var(--muted);
          min-width: 22px; text-align: center;
          font-variant-numeric: tabular-nums;
        }
        .lp-outline-title {
          flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
        }
        .lp-outline-lock { color: #ffb84d; font-size: 12px; }
        .lp-outline-empty { color: var(--muted); padding: 8px 4px; font-size: 13px; }

        .lp-prev-title .lp-prev-mark {
          width: 44px; height: 40px; border-radius: 10px;
          background: linear-gradient(135deg, #ffb84d 0%, #2f6fff 100%);
          color: #03101c; font-weight: 950; font-size: 12px;
          display: grid; place-items: center;
        }

        /* Wave 4 — slide authoring editor (per-slide cards on presentation_markdown). */
        .lp-slide-edit-card {
          border: 1px solid var(--line); border-radius: 12px;
          background: rgba(255,255,255,0.03);
          padding: 12px 14px;
          display: flex; flex-direction: column; gap: 10px;
          position: relative;
          transition: border-color .12s, background .12s;
        }
        .lp-slide-edit-card.is-dragover { border-color: rgba(255,184,77,.7); background: rgba(255,184,77,.06); }
        .lp-slide-edit-card.is-dragging { opacity: .45; }
        .lp-slide-edit-head {
          display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
        }
        .lp-slide-edit-chip {
          display: inline-flex; align-items: center; gap: 4px;
          padding: 4px 8px; border-radius: 8px;
          background: rgba(0,0,0,0.20); border: 1px solid var(--line);
          font-size: 12px; color: var(--muted); white-space: nowrap;
        }
        .lp-slide-edit-chip:hover { color: var(--text); border-color: rgba(255,184,77,.4); }
        .lp-slide-edit-chip input[type="number"] {
          width: 36px; padding: 2px 4px;
          background: transparent; border: none; color: var(--text);
          font: 12px/1 inherit; text-align: right;
        }
        .lp-slide-edit-chip input[type="number"]:focus { outline: none; }
        .lp-slide-edit-chip input[type="checkbox"] { accent-color: #ffb84d; }
        .lp-slide-edit-notes-toggle {
          background: transparent; border: 1px solid var(--line);
          color: var(--muted); font-size: 12px;
          padding: 4px 8px; border-radius: 6px; cursor: pointer;
        }
        .lp-slide-edit-notes-toggle:hover { color: var(--text); border-color: rgba(255,184,77,.4); }
        .lp-slide-edit-notes {
          display: flex; flex-direction: column; gap: 6px;
          padding-top: 4px;
          border-top: 1px dashed rgba(255,255,255,0.08);
        }
        .lp-slide-edit-notes-label {
          font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em;
        }
        .lp-slide-edit-notes-ta {
          width: 100%; min-height: 70px; resize: vertical;
          background: rgba(0,0,0,0.20); color: var(--text);
          border: 1px solid var(--line); border-radius: 8px;
          padding: 8px 10px; font: 13px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
        }
        .lp-slide-edit-notes-ta:focus { outline: none; border-color: rgba(255,184,77,.6); }

        /* Wave 5 — Markdown / Visual mode tabs in the slide editor header. */
        .lp-slide-mode-tab {
          background: transparent; border: 1px solid var(--line);
          color: var(--muted); font-size: 13px; font-weight: 600;
          padding: 6px 12px; border-radius: 8px 8px 0 0; cursor: pointer;
          border-bottom-color: transparent;
        }
        .lp-slide-mode-tab:hover { color: var(--text); border-color: rgba(255,184,77,.4); }
        .lp-slide-mode-tab.is-active {
          background: rgba(255,184,77,0.08);
          color: var(--text); border-color: rgba(255,184,77,.55);
          border-bottom-color: transparent;
        }

        /* Visual canvas — read-only preview in Phase A. Stage is positioned
           absolutely and JS sets transform: scale(N) to fit. */
        #lpVisualCanvas .block-stage {
          position: absolute;
          width: 1920px; height: 1080px;
          transform-origin: top left;
          background: #ffffff;
        }
        #lpVisualCanvas .block-stage .block {
          position: absolute; overflow: hidden; box-sizing: border-box;
        }
        #lpVisualCanvas .block-stage .block-text {
          display: flex; align-items: center; padding: 8px 12px;
          font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          font-size: 28px; line-height: 1.25; color: #15181f;
        }
        #lpVisualCanvas .block-stage .block-text > * { margin: 0; }
        /* Lists inside text blocks — keep bullets visible inside the flex
           container. Padding-left provides the indent runway; nested ul/ol
           accumulate naturally for sub-levels. Mirror this rule in
           present.html so authoring and presenting match. */
        #lpVisualCanvas .block-stage .block-text ul,
        #lpVisualCanvas .block-stage .block-text ol {
          margin: 0;
          padding-left: 1.4em;
        }
        #lpVisualCanvas .block-stage .block-text ul { list-style-type: disc; }
        #lpVisualCanvas .block-stage .block-text ol { list-style-type: decimal; }
        #lpVisualCanvas .block-stage .block-text ul ul { list-style-type: circle; }
        #lpVisualCanvas .block-stage .block-text ul ul ul { list-style-type: square; }
        #lpVisualCanvas .block-stage .block-text li { margin: 0.15em 0; }
        /* Per-paragraph alignment — <p style="text-align:..."> survives the
           sanitizer when styled. Reset the browser's default margin so a
           styled paragraph looks identical line-height-wise to <br>-separated
           lines (otherwise authors get unexpected vertical gaps the moment
           they apply any alignment). */
        #lpVisualCanvas .block-stage .block-text p { margin: 0; }
        /* Hyperlinks inside text blocks — same styling as present.html so
           authors see exactly how the link will render in the deck. */
        #lpVisualCanvas .block-stage .block-text a {
          color: #1d4ed8;
          text-decoration: underline;
          text-decoration-thickness: 1px;
          text-underline-offset: 2px;
        }
        #lpVisualCanvas .block-stage .block-text a:hover { color: #1e40af; }
        #lpVisualCanvas .block-stage .block-image img,
        #lpVisualCanvas .block-stage .block-video video {
          width: 100%; height: 100%;
          object-fit: contain; display: block;
          background: rgba(0,0,0,0.04);
        }
        #lpVisualCanvas .block-stage .block-shape { background: #ffb84d; }
        #lpVisualCanvas .block-stage .block.missing-asset {
          display: flex; align-items: center; justify-content: center;
          padding: 8px; text-align: center;
          font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
          font-size: 14px; color: #b03030;
          background: rgba(176,48,48,0.06);
          border: 2px dashed rgba(176,48,48,0.4);
        }

        /* Phase B — editor decorations on the canvas. Each block gets a hover
           outline; the selected block gets a stronger outline + corner +
           edge resize handles. Hover/select states are visual only — they
           don't change layout (1px border insets via outline). */
        #lpVisualCanvas .block-stage .block {
          cursor: move;
          outline: 1px dashed transparent;
          outline-offset: -1px;
        }
        #lpVisualCanvas .block-stage .block:hover {
          outline-color: rgba(255,184,77,0.55);
        }
        #lpVisualCanvas .block-stage .block.is-selected {
          outline: 2px solid #ffb84d;
          outline-offset: -1px;
        }
        #lpVisualCanvas .block-stage .block.is-dragging { opacity: 0.7; }
        /* Resize handles — children of the selected block. JS appends them
           on selection and removes on deselect. Positions are 1920×1080 px;
           they scale together with the stage so visual size is constant
           regardless of zoom. */
        .lp-vis-handle {
          position: absolute;
          width: 12px; height: 12px;
          background: #ffffff;
          border: 2px solid #ffb84d;
          border-radius: 2px;
          box-shadow: 0 1px 3px rgba(0,0,0,0.45);
          z-index: 10000;
        }
        .lp-vis-handle.h-nw { left: -7px;  top: -7px;        cursor: nwse-resize; }
        .lp-vis-handle.h-ne { right: -7px; top: -7px;        cursor: nesw-resize; }
        .lp-vis-handle.h-sw { left: -7px;  bottom: -7px;     cursor: nesw-resize; }
        .lp-vis-handle.h-se { right: -7px; bottom: -7px;     cursor: nwse-resize; }
        .lp-vis-handle.h-n  { top: -7px;    left: 50%; transform: translateX(-50%); cursor: ns-resize; }
        .lp-vis-handle.h-s  { bottom: -7px; left: 50%; transform: translateX(-50%); cursor: ns-resize; }
        .lp-vis-handle.h-w  { left: -7px;   top: 50%; transform: translateY(-50%);  cursor: ew-resize; }
        .lp-vis-handle.h-e  { right: -7px;  top: 50%; transform: translateY(-50%);  cursor: ew-resize; }

        /* Slide thumbnails rail */
        .lp-vis-thumb {
          position: relative;
          width: 100%;
          aspect-ratio: 16/9;
          background: #0c1322;
          border: 1px solid rgba(134, 190, 255, 0.10);
          border-radius: 8px;
          cursor: pointer;
          overflow: hidden;
          transition: border-color .15s, box-shadow .15s, transform .12s;
          box-shadow: 0 2px 6px rgba(0,0,0,0.25);
        }
        .lp-vis-thumb:hover {
          border-color: rgba(255,184,77,.45);
          transform: translateY(-1px);
          box-shadow: 0 6px 14px rgba(0,0,0,0.40);
        }
        .lp-vis-thumb.is-current {
          border-color: #ffb84d;
          box-shadow: 0 0 0 2px rgba(255,184,77,.40), 0 6px 14px rgba(0,0,0,0.45);
        }
        .lp-vis-thumb .thumb-stage {
          position: absolute;
          width: 1920px; height: 1080px;
          transform-origin: top left;
          background: #ffffff;
          pointer-events: none;
        }
        .lp-vis-thumb .thumb-stage .block {
          position: absolute; overflow: hidden; box-sizing: border-box;
        }
        .lp-vis-thumb .thumb-num {
          position: absolute; top: 6px; left: 6px;
          background: rgba(0,0,0,0.72); color: #fff;
          width: 22px; height: 22px;
          display: inline-flex; align-items: center; justify-content: center;
          border-radius: 50%;
          font-size: 11px; font-weight: 700; line-height: 1;
          z-index: 10;
        }
        .lp-vis-thumb.is-current .thumb-num {
          background: #ffb84d; color: #1a0d00;
        }
        .lp-vis-thumb .thumb-lock {
          position: absolute; top: 6px; right: 6px;
          color: #ffb84d; font-size: 10px; font-weight: 700;
          background: rgba(0,0,0,0.72); padding: 3px 6px; border-radius: 4px;
          line-height: 1;
          z-index: 10;
        }

        /* Property panel — collapsible sections with chevron, refined inputs */
        .lp-vis-prop-group {
          display: flex; flex-direction: column; gap: 8px;
          margin: 0; padding: 10px 0;
          border-bottom: 1px solid rgba(134, 190, 255, 0.08);
        }
        .lp-vis-prop-group:last-child { border-bottom: none; }
        .lp-vis-prop-group h4 {
          display: flex; align-items: center; justify-content: space-between;
          margin: 0 -10px;
          padding: 8px 10px;
          font-size: 11px; text-transform: uppercase;
          letter-spacing: .08em; color: var(--muted);
          cursor: pointer; user-select: none;
          border-radius: 6px;
          background: rgba(255,255,255,0.015);
          transition: color .12s, background .12s;
        }
        .lp-vis-prop-group h4::after {
          content: '';
          display: inline-block;
          width: 0; height: 0;
          border-left: 7px solid transparent;
          border-right: 7px solid transparent;
          border-top: 9px solid currentColor;
          margin-left: 8px;
          opacity: 0.7;
          transition: transform .15s ease, opacity .12s;
          transform-origin: center 35%;
          flex-shrink: 0;
        }
        .lp-vis-prop-group h4:hover {
          background: rgba(255,184,77,0.08);
          color: var(--text);
        }
        .lp-vis-prop-group h4:hover::after { opacity: 1; }
        .lp-vis-prop-group.is-collapsed h4::after { transform: rotate(-90deg); }
        .lp-vis-prop-group.is-collapsed { padding-bottom: 6px; gap: 0; }
        .lp-vis-prop-group.is-collapsed > :not(h4) { display: none !important; }
        .lp-vis-prop-row {
          display: flex; align-items: center; gap: 8px;
          font-size: 12px; color: var(--text);
        }
        .lp-vis-prop-row label { color: var(--muted); min-width: 64px; font-size: 11px; }
        .lp-vis-prop-row input[type="number"],
        .lp-vis-prop-row input[type="text"],
        .lp-vis-prop-row select {
          flex: 1; min-width: 0;
          background: rgba(0,0,0,0.30); color: var(--text);
          border: 1px solid rgba(134, 190, 255, 0.12); border-radius: 6px;
          padding: 6px 10px; font-size: 12px;
          transition: border-color .12s, background .12s;
        }
        .lp-vis-prop-row input[type="number"]:hover,
        .lp-vis-prop-row input[type="text"]:hover,
        .lp-vis-prop-row select:hover { border-color: rgba(134, 190, 255, 0.22); }
        .lp-vis-prop-row input[type="color"] {
          width: 36px; height: 28px; padding: 0;
          background: transparent; border: 1px solid rgba(134, 190, 255, 0.16); border-radius: 6px;
          cursor: pointer;
        }
        .lp-vis-prop-row textarea {
          flex: 1; min-height: 80px; resize: vertical;
          background: rgba(0,0,0,0.30); color: var(--text);
          border: 1px solid rgba(134, 190, 255, 0.12); border-radius: 6px;
          padding: 8px 10px; font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
          transition: border-color .12s;
        }
        .lp-vis-prop-row textarea:focus,
        .lp-vis-prop-row input:focus,
        .lp-vis-prop-row select:focus { outline: none; border-color: rgba(255,184,77,.6); background: rgba(0,0,0,0.40); }
        .lp-vis-align-toggle {
          display: inline-flex; gap: 4px;
        }
        .lp-vis-align-toggle button {
          background: rgba(0,0,0,0.30); color: var(--muted);
          border: 1px solid rgba(134, 190, 255, 0.12); border-radius: 6px;
          padding: 5px 10px; font-size: 12px; cursor: pointer;
          min-width: 32px;
          transition: all .12s;
        }
        .lp-vis-align-toggle button:hover { color: var(--text); border-color: rgba(134, 190, 255, 0.25); }
        .lp-vis-align-toggle button.is-active {
          background: rgba(255,184,77,.20); color: var(--text);
          border-color: rgba(255,184,77,.55);
        }

        /* Phase E — top toolbar icon buttons. Replaces the plain ghost-btn
           look from earlier phases. Mirrors the mockup's vertical icon-
           over-label pattern. */
        .lp-vis-icon-btn {
          display: inline-flex; flex-direction: column; align-items: center; gap: 4px;
          background: transparent; border: 1px solid transparent;
          color: var(--muted); cursor: pointer;
          padding: 8px 10px; border-radius: 10px;
          min-width: 60px;
          transition: all .12s;
        }
        .lp-vis-icon-btn:hover {
          background: rgba(255,184,77,.08);
          border-color: rgba(255,184,77,.32);
          color: var(--text);
        }
        .lp-vis-icon-btn:disabled { opacity: .30; cursor: not-allowed; }
        .lp-vis-icon-btn:disabled:hover { background: transparent; border-color: transparent; color: var(--muted); }
        .lp-vis-icon { font-size: 18px; line-height: 1; }
        .lp-vis-icon-btn .lp-vis-icon-label { font-size: 11px; letter-spacing: .02em; }
        .lp-vis-toolbar-sep {
          display: inline-block; width: 1px; height: 32px;
          background: rgba(134, 190, 255, 0.14); margin: 0 6px;
        }

        /* Saved/Unsaved status — sits in the top toolbar right side. */
        .lp-vis-saved {
          display: inline-flex; align-items: center; gap: 6px;
          font-size: 12px; font-weight: 600; padding: 6px 12px;
          border-radius: 999px;
          border: 1px solid var(--line);
          transition: all .15s;
        }
        .lp-vis-saved[data-state="saved"]   {
          color: #4caf6f; border-color: rgba(76,175,111,.45); background: rgba(76,175,111,.10);
        }
        .lp-vis-saved[data-state="unsaved"] {
          color: #ffb84d; border-color: rgba(255,184,77,.55); background: rgba(255,184,77,.14);
        }
        .lp-vis-saved[data-state="saving"]  {
          color: var(--muted); border-color: var(--line); background: rgba(0,0,0,0.20);
        }
        .lp-vis-saved-dot { font-weight: 700; font-size: 13px; }

        /* Bottom action bar — selection-specific actions live here.
           Mirrors the top toolbar's vertical icon-over-label rhythm so the
           whole editor feels cohesive instead of two different button styles. */
        #lpVisualBottomActions { display: none; }
        #lpVisualBottomActions.is-visible {
          display: flex;
          margin-top: 12px;
          background: rgba(8, 14, 24, 0.55);
          border: 1px solid rgba(134, 190, 255, 0.10);
          border-radius: 12px;
          padding: 6px 8px;
          align-items: center;
          gap: 2px;
        }
        .lp-vis-action-btn {
          display: inline-flex; flex-direction: column; align-items: center; gap: 4px;
          background: transparent; border: 1px solid transparent;
          color: var(--muted); cursor: pointer;
          padding: 6px 10px; border-radius: 8px;
          font-size: 11px;
          min-width: 60px;
          transition: all .12s;
        }
        .lp-vis-action-btn:hover {
          color: var(--text);
          background: rgba(255,184,77,.08);
          border-color: rgba(255,184,77,.30);
        }
        .lp-vis-action-btn:disabled { opacity: .30; cursor: not-allowed; }
        .lp-vis-action-btn:disabled:hover { background: transparent; border-color: transparent; color: var(--muted); }
        .lp-vis-action-btn.is-on { background: rgba(255,184,77,.20); border-color: rgba(255,184,77,.55); color: var(--text); }
        .lp-vis-action-icon { font-size: 16px; line-height: 1; }

        /* Wave 5 Align — dropdown popup anchored above the Align action button. */
        .lp-vis-action-wrap { display: inline-block; }
        .lp-vis-popup {
          position: absolute;
          bottom: calc(100% + 6px);
          left: 0;
          background: var(--panel, #232841);
          border: 1px solid var(--line, #3a4060);
          border-radius: 6px;
          padding: 6px;
          z-index: 99;
          box-shadow: 0 6px 18px rgba(0,0,0,0.35);
        }
        .lp-vis-popup[hidden] { display: none; }
        .lp-vis-popup-label {
          font-size: 10px;
          color: var(--muted, #8a91ad);
          text-transform: uppercase;
          letter-spacing: 0.06em;
          margin: 2px 4px 4px;
        }
        .lp-vis-popup-row { display: flex; gap: 4px; }
        .lp-vis-popup-row + .lp-vis-popup-label { margin-top: 8px; }
        .lp-vis-popup-btn {
          background: transparent;
          border: 1px solid transparent;
          border-radius: 4px;
          padding: 6px 8px;
          display: flex; flex-direction: column; align-items: center; gap: 2px;
          min-width: 56px;
          color: var(--text, #cfd5e7);
          font-size: 11px;
          cursor: pointer;
        }
        .lp-vis-popup-btn:hover {
          background: rgba(47,111,255,0.12);
          border-color: var(--blue, #2f6fff);
        }

        /* Floating context toolbar — appears above the selected block. */
        #lpVisualFloatingToolbar.is-visible { display: inline-flex !important; }
        #lpVisualFloatingToolbar button {
          background: transparent; border: none; color: var(--text);
          padding: 4px 8px; border-radius: 6px; cursor: pointer;
          font-size: 14px; line-height: 1;
        }
        #lpVisualFloatingToolbar button:hover { background: rgba(255,184,77,.18); }
        #lpVisualFloatingToolbar .sep {
          display: inline-block; width: 1px; height: 16px; background: var(--line);
          margin: 0 2px;
        }

        /* Property panel tabs — Phase E. */
        .lp-vis-prop-tabs {
          display: flex; gap: 0;
          border-bottom: 1px solid var(--line);
          padding: 0 8px;
        }
        .lp-vis-prop-tab {
          background: transparent; border: none; color: var(--muted);
          padding: 10px 12px; cursor: pointer;
          font-size: 13px; font-weight: 600;
          border-bottom: 2px solid transparent;
        }
        .lp-vis-prop-tab:hover { color: var(--text); }
        .lp-vis-prop-tab.is-active { color: var(--text); border-bottom-color: #ffb84d; }

        /* Phase J — block animation keyframes. Used by both the Visual editor
           preview button (via lpVisualPlayAnimation) and present.html on
           slide entry. Kept here so the editor's preview matches Present. */
        @keyframes lp-anim-fade-in    { from { opacity: 0; } to { opacity: 1; } }
        @keyframes lp-anim-slide-up   { from { opacity: 0; transform: translateY(40px);  } to { opacity: 1; transform: translateY(0); } }
        @keyframes lp-anim-slide-down { from { opacity: 0; transform: translateY(-40px); } to { opacity: 1; transform: translateY(0); } }
        @keyframes lp-anim-slide-left { from { opacity: 0; transform: translateX(40px);  } to { opacity: 1; transform: translateX(0); } }
        @keyframes lp-anim-slide-right{ from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: translateX(0); } }
        @keyframes lp-anim-zoom-in    { from { opacity: 0; transform: scale(0.85); } to { opacity: 1; transform: scale(1); } }
        @keyframes lp-anim-pop {
          0%   { opacity: 0; transform: scale(0.7); }
          60%  { opacity: 1; transform: scale(1.05); }
          100% { transform: scale(1); }
        }

        /* Phase E backlog — slide-rail tabs (Slides / Outline) above the
           thumbnails list. Match the property panel tab styling for visual
           cohesion. */
        .lp-vis-rail-tab {
          background: transparent; border: none; color: var(--muted);
          padding: 6px 10px; cursor: pointer;
          font-size: 12px; font-weight: 600;
          border-bottom: 2px solid transparent;
        }
        .lp-vis-rail-tab:hover { color: var(--text); }
        .lp-vis-rail-tab.is-active { color: var(--text); border-bottom-color: #ffb84d; }

        /* Outline view rows — light card per slide, click to navigate. */
        .lp-vis-outline-row {
          background: rgba(0,0,0,0.20); border: 1px solid var(--line);
          border-radius: 6px; padding: 8px 10px; cursor: pointer;
          display: flex; flex-direction: column; gap: 4px;
        }
        .lp-vis-outline-row:hover { border-color: rgba(255,184,77,.55); background: rgba(255,184,77,.06); }
        .lp-vis-outline-row.is-current { border-color: #ffb84d; box-shadow: 0 0 0 2px rgba(255,184,77,.20); }
        .lp-vis-outline-row .ol-head {
          display: flex; align-items: center; gap: 6px;
        }
        .lp-vis-outline-row .ol-num {
          font-size: 10px; font-weight: 700; color: var(--muted);
          min-width: 18px; text-align: right;
        }
        .lp-vis-outline-row .ol-title {
          flex: 1; min-width: 0; color: var(--text); font-size: 13px;
          overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
        }
        .lp-vis-outline-row .ol-lock { color: #ffb84d; font-size: 11px; }
        .lp-vis-outline-row .ol-notes {
          color: var(--muted); font-size: 11px; line-height: 1.4;
          display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
          overflow: hidden;
        }

        /* Locked blocks get a subtle stripe so authors can spot them at a
           glance. Pointer-events stay enabled so they're still selectable
           (you can unlock from the action bar) but drag/resize are off. */
        #lpVisualCanvas .block-stage .block.is-locked {
          outline: 1px dashed rgba(160,160,180,0.6) !important;
          outline-offset: -1px;
          cursor: default;
        }
        #lpVisualCanvas .block-stage .block.is-locked:hover {
          outline-color: rgba(160,160,180,0.8) !important;
        }

        /* ──────────────────────────────────────────────────────────────
           Visual editor v2 — art-direction polish across the property
           panel. PowerPoint-grade controls: icon tiles, pills, color
           swatches, refined section headers. Replaces the developer-form
           aesthetic with a gallery-style picker UX.
           ──────────────────────────────────────────────────────────── */
        /* Section headers — sentence-case 12px medium with optional inline
           icon. Overrides the older UPPERCASE tracked look. */
        .lp-vis-prop-group h4 {
          font-size: 12px; font-weight: 600;
          text-transform: none;
          letter-spacing: 0;
          color: var(--text);
          gap: 8px;
        }
        .lp-vis-prop-group h4 .lp-vis-sec-title {
          display: inline-flex; align-items: center; gap: 7px;
          min-width: 0;
        }
        .lp-vis-prop-group h4 .lp-vis-sec-icon {
          display: inline-flex; align-items: center; justify-content: center;
          width: 16px; height: 16px;
          color: #ffb84d;
          flex-shrink: 0;
        }
        .lp-vis-prop-group h4 .lp-vis-sec-icon svg { display: block; }

        /* Field block — stacked label-above-control. More visual room than
           the old inline label-left .lp-vis-prop-row pattern. */
        .lp-vis-field {
          display: flex; flex-direction: column; gap: 6px;
          margin-top: 10px;
        }
        .lp-vis-field:first-of-type { margin-top: 4px; }
        .lp-vis-field-label {
          font-size: 11px; font-weight: 600;
          color: var(--muted);
          letter-spacing: .02em;
        }
        .lp-vis-field-label .hint {
          color: var(--muted); font-weight: 400;
          font-size: 10px;
          margin-left: 4px;
        }
        .lp-vis-field-pair {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 8px;
        }

        /* Pill segmented control — used for Weight, Align, V-align, Speed.
           Mirrors PowerPoint's tab-style controls. */
        .lp-vis-pills {
          display: flex;
          background: rgba(0,0,0,0.30);
          border: 1px solid rgba(134, 190, 255, 0.12);
          border-radius: 8px;
          padding: 3px;
          gap: 2px;
        }
        .lp-vis-pill {
          flex: 1;
          background: transparent;
          border: none;
          color: var(--muted);
          padding: 6px 4px;
          border-radius: 6px;
          font-size: 11px; font-weight: 600;
          cursor: pointer;
          transition: all .12s;
          display: inline-flex; align-items: center; justify-content: center;
          gap: 4px;
          min-width: 0;
          line-height: 1;
        }
        .lp-vis-pill:hover { color: var(--text); background: rgba(255,255,255,0.04); }
        .lp-vis-pill.is-active {
          background: rgba(255,184,77,.22);
          color: var(--text);
          box-shadow: 0 1px 2px rgba(0,0,0,0.18);
        }
        .lp-vis-pill svg { display: block; }

        /* Color swatch row — replaces the tiny 36×28 color input with a
           tile + hex label. Native <input type=color> sits absolute inside,
           invisible but clickable across the full row. */
        .lp-vis-color-row {
          position: relative;
          display: flex; align-items: center;
          background: rgba(0,0,0,0.30);
          border: 1px solid rgba(134, 190, 255, 0.12);
          border-radius: 8px;
          padding: 5px 10px 5px 5px;
          gap: 10px;
          cursor: pointer;
          transition: border-color .12s;
        }
        .lp-vis-color-row:hover { border-color: rgba(255,184,77,.35); }
        .lp-vis-color-row .swatch-tile {
          width: 26px; height: 26px;
          border-radius: 5px;
          background-image:
            linear-gradient(45deg, rgba(255,255,255,0.10) 25%, transparent 25%, transparent 75%, rgba(255,255,255,0.10) 75%),
            linear-gradient(45deg, rgba(255,255,255,0.10) 25%, transparent 25%, transparent 75%, rgba(255,255,255,0.10) 75%);
          background-size: 8px 8px;
          background-position: 0 0, 4px 4px;
          position: relative;
          flex-shrink: 0;
          border: 1px solid rgba(255,255,255,0.10);
          box-shadow: inset 0 0 0 1px rgba(0,0,0,0.18);
        }
        .lp-vis-color-row .swatch-tile-fill {
          position: absolute; inset: 0; border-radius: 4px;
        }
        .lp-vis-color-row .swatch-hex {
          flex: 1;
          color: var(--text);
          font-size: 11px;
          font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
          letter-spacing: .02em;
          text-transform: uppercase;
        }
        .lp-vis-color-row input[type="color"] {
          position: absolute; inset: 0;
          width: 100%; height: 100%;
          opacity: 0; cursor: pointer;
          border: none; background: transparent;
        }

        /* Stepper — number input + unit suffix, bigger and more breathable. */
        .lp-vis-stepper {
          display: flex; align-items: center;
          background: rgba(0,0,0,0.30);
          border: 1px solid rgba(134, 190, 255, 0.12);
          border-radius: 8px;
          padding: 0 10px 0 0;
          transition: border-color .12s;
        }
        .lp-vis-stepper:hover { border-color: rgba(134, 190, 255, 0.22); }
        .lp-vis-stepper:focus-within { border-color: rgba(255,184,77,.55); }
        .lp-vis-stepper input[type="number"],
        .lp-vis-stepper input[type="text"] {
          flex: 1;
          background: transparent !important;
          border: none !important;
          color: var(--text);
          padding: 8px 12px !important;
          font-size: 12px !important;
          outline: none;
          min-width: 0;
          width: 100%;
        }
        .lp-vis-stepper input::placeholder { color: var(--muted); opacity: 0.7; }
        .lp-vis-stepper-unit {
          color: var(--muted);
          font-size: 11px;
          margin-left: 4px;
          user-select: none;
        }

        /* Refined select — used for Font family, Border style, BG kind. */
        select.lp-vis-select {
          width: 100%;
          background: rgba(0,0,0,0.30) !important;
          border: 1px solid rgba(134, 190, 255, 0.12) !important;
          border-radius: 8px !important;
          padding: 8px 10px !important;
          font-size: 12px !important;
          color: var(--text);
          transition: border-color .12s;
          outline: none;
        }
        select.lp-vis-select:hover { border-color: rgba(134, 190, 255, 0.22) !important; }
        select.lp-vis-select:focus { border-color: rgba(255,184,77,.55) !important; }

        /* Roomier textarea — used for Content, Notes, Cells. */
        .lp-vis-textarea {
          width: 100%;
          background: rgba(0,0,0,0.30);
          border: 1px solid rgba(134, 190, 255, 0.12);
          border-radius: 8px;
          padding: 10px 12px;
          color: var(--text);
          font: 13px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          resize: vertical;
          min-height: 80px;
          outline: none;
          transition: border-color .12s, background .12s;
        }
        .lp-vis-textarea:hover { border-color: rgba(134, 190, 255, 0.22); }
        .lp-vis-textarea:focus { border-color: rgba(255,184,77,.55); background: rgba(0,0,0,0.40); }
        .lp-vis-textarea.mono {
          font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
          font-size: 12px;
        }

        /* Inline switch — replaces the bare on/off checkbox. Real <input
           type=checkbox> sits behind a span; CSS styles the span. */
        .lp-vis-switch-row {
          display: flex; align-items: center; justify-content: space-between;
          padding: 4px 0;
          cursor: pointer;
        }
        .lp-vis-switch-row .lp-vis-switch-label {
          font-size: 12px;
          color: var(--text);
        }
        .lp-vis-switch {
          position: relative;
          width: 36px; height: 20px;
          background: rgba(0,0,0,0.40);
          border: 1px solid rgba(134, 190, 255, 0.18);
          border-radius: 999px;
          transition: all .15s;
          flex-shrink: 0;
        }
        .lp-vis-switch::after {
          content: '';
          position: absolute; top: 2px; left: 2px;
          width: 14px; height: 14px;
          background: #cfd6e0;
          border-radius: 50%;
          transition: all .15s;
        }
        .lp-vis-switch input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
        .lp-vis-switch.is-on {
          background: rgba(255,184,77,.40);
          border-color: rgba(255,184,77,.70);
        }
        .lp-vis-switch.is-on::after {
          background: #ffb84d;
          transform: translateX(16px);
        }

        /* Sub-panel — used to group shadow controls under the shadow switch. */
        .lp-vis-subpanel {
          margin-top: 10px;
          padding: 10px;
          background: rgba(0,0,0,0.18);
          border-radius: 8px;
          border: 1px solid rgba(134, 190, 255, 0.08);
          display: flex; flex-direction: column; gap: 8px;
        }

        /* Help / hint text at section bottoms */
        .lp-vis-help {
          font-size: 11px;
          color: var(--muted);
          line-height: 1.55;
          padding-top: 10px;
        }
        .lp-vis-help strong { color: var(--text); }

        /* AI edit button — ghost, brand orange */
        .lp-vis-ai-btn {
          display: inline-flex; align-items: center; gap: 6px;
          background: rgba(255,184,77,.10);
          border: 1px solid rgba(255,184,77,.40);
          color: #ffb84d;
          border-radius: 8px;
          padding: 7px 12px;
          font-size: 11px; font-weight: 600;
          cursor: pointer;
          transition: all .12s;
          margin-top: 6px;
          align-self: flex-end;
        }
        .lp-vis-ai-btn:hover {
          background: rgba(255,184,77,.18);
          border-color: rgba(255,184,77,.60);
        }
        .lp-vis-ai-btn svg { display: block; }

        /* ── Animate panel — icon tiles, pills, gradient preview ──── */
        .lp-vis-anim-grid {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 8px;
          margin: 6px 0 14px;
        }
        .lp-vis-anim-tile {
          display: flex; flex-direction: column; align-items: center; gap: 8px;
          background: rgba(0,0,0,0.30);
          border: 1px solid rgba(134, 190, 255, 0.12);
          border-radius: 10px;
          padding: 14px 8px 10px;
          cursor: pointer;
          color: var(--muted);
          transition: all .15s;
          position: relative;
          overflow: hidden;
        }
        .lp-vis-anim-tile:hover {
          background: rgba(255,184,77,.08);
          border-color: rgba(255,184,77,.30);
          color: var(--text);
          transform: translateY(-1px);
          box-shadow: 0 4px 10px rgba(0,0,0,0.25);
        }
        .lp-vis-anim-tile.is-active {
          background: rgba(255,184,77,.14);
          border-color: rgba(255,184,77,.55);
          color: #ffb84d;
          box-shadow: 0 0 0 1px rgba(255,184,77,.30), 0 4px 12px rgba(0,0,0,0.25);
        }
        .lp-vis-anim-tile-visual {
          display: inline-flex; align-items: center; justify-content: center;
          width: 36px; height: 36px;
        }
        .lp-vis-anim-tile-visual svg { width: 100%; height: 100%; }
        .lp-vis-anim-tile-label {
          font-size: 11px; font-weight: 600;
          color: inherit;
        }
        @keyframes lp-vis-tile-fade   { from { opacity: 0; } to { opacity: 1; } }
        @keyframes lp-vis-tile-up     { from { opacity: 0; transform: translateY(14px);  } to { opacity: 1; transform: translateY(0); } }
        @keyframes lp-vis-tile-down   { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: translateY(0); } }
        @keyframes lp-vis-tile-left   { from { opacity: 0; transform: translateX(14px);  } to { opacity: 1; transform: translateX(0); } }
        @keyframes lp-vis-tile-right  { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: translateX(0); } }
        @keyframes lp-vis-tile-zoom   { from { opacity: 0; transform: scale(0.4); } to { opacity: 1; transform: scale(1); } }
        @keyframes lp-vis-tile-pop    {
          0%   { opacity: 0; transform: scale(0.5); }
          60%  { opacity: 1; transform: scale(1.18); }
          100% { transform: scale(1); }
        }
        .lp-vis-anim-tile[data-anim="fade-in"]:hover     .anim-target { animation: lp-vis-tile-fade  .6s ease; }
        .lp-vis-anim-tile[data-anim="slide-up"]:hover    .anim-target { animation: lp-vis-tile-up    .6s ease; }
        .lp-vis-anim-tile[data-anim="slide-down"]:hover  .anim-target { animation: lp-vis-tile-down  .6s ease; }
        .lp-vis-anim-tile[data-anim="slide-left"]:hover  .anim-target { animation: lp-vis-tile-left  .6s ease; }
        .lp-vis-anim-tile[data-anim="slide-right"]:hover .anim-target { animation: lp-vis-tile-right .6s ease; }
        .lp-vis-anim-tile[data-anim="zoom-in"]:hover     .anim-target { animation: lp-vis-tile-zoom  .6s ease; transform-origin: center; transform-box: fill-box; }
        .lp-vis-anim-tile[data-anim="pop"]:hover         .anim-target { animation: lp-vis-tile-pop   .6s ease; transform-origin: center; transform-box: fill-box; }

        /* Primary CTA — gradient, used for Preview animation / Preview slide. */
        .lp-vis-cta {
          display: flex; align-items: center; justify-content: center; gap: 8px;
          width: 100%;
          background: linear-gradient(135deg, var(--teal, #36f1e1) 0%, var(--blue, #6c8cff) 100%);
          color: #03101c;
          border: none;
          border-radius: 10px;
          padding: 12px 16px;
          font-size: 13px; font-weight: 700;
          letter-spacing: .01em;
          cursor: pointer;
          margin-top: 14px;
          box-shadow: 0 4px 14px rgba(54, 241, 225, 0.25);
          transition: all .15s;
        }
        .lp-vis-cta:hover {
          transform: translateY(-1px);
          box-shadow: 0 8px 22px rgba(54, 241, 225, 0.35);
        }
        .lp-vis-cta:active { transform: translateY(0); box-shadow: 0 2px 8px rgba(54, 241, 225, 0.20); }
        .lp-vis-cta svg { display: block; }

        /* Empty state — used for property panel no-selection / Animate no-block. */
        .lp-vis-empty-state {
          padding: 22px 12px;
          text-align: center;
        }
        .lp-vis-empty-state .empty-icon {
          display: inline-flex; align-items: center; justify-content: center;
          width: 60px; height: 60px;
          background: rgba(255,184,77,.10);
          border: 1px solid rgba(255,184,77,.30);
          border-radius: 50%;
          color: #ffb84d;
          margin-bottom: 14px;
        }
        .lp-vis-empty-state .empty-icon svg { width: 28px; height: 28px; }
        .lp-vis-empty-state .empty-title {
          font-size: 13px; font-weight: 700;
          color: var(--text);
          margin-bottom: 8px;
        }
        .lp-vis-empty-state .empty-hint {
          font-size: 12px;
          color: var(--muted);
          line-height: 1.55;
          margin-bottom: 16px;
        }
        .lp-vis-empty-state .empty-hint strong { color: var(--text); }

        .lp-slide-edit-handle {
          cursor: grab; user-select: none;
          color: var(--muted); font-size: 16px;
          padding: 2px 6px; border-radius: 6px;
          line-height: 1;
        }
        .lp-slide-edit-handle:hover { background: rgba(255,255,255,0.06); color: var(--text); }
        .lp-slide-edit-handle:active { cursor: grabbing; }
        .lp-slide-edit-num {
          font-size: 11px; font-weight: 700;
          color: var(--muted); text-transform: uppercase; letter-spacing: .08em;
          min-width: 52px;
        }
        .lp-slide-edit-title-input {
          flex: 1; min-width: 0;
          background: rgba(0,0,0,0.20); color: var(--text);
          border: 1px solid var(--line); border-radius: 8px;
          padding: 7px 10px; font-size: 14px; font-weight: 600;
        }
        .lp-slide-edit-title-input:focus { outline: none; border-color: rgba(255,184,77,.6); }
        .lp-slide-edit-del {
          background: transparent; border: 1px solid transparent;
          color: var(--muted); font-size: 14px;
          padding: 6px 8px; border-radius: 8px; cursor: pointer;
        }
        .lp-slide-edit-del:hover { color: #ff7777; border-color: rgba(255,119,119,.4); background: rgba(255,119,119,.08); }
        .lp-slide-edit-body {
          width: 100%; min-height: 90px; resize: vertical;
          background: rgba(0,0,0,0.20); color: var(--text);
          border: 1px solid var(--line); border-radius: 8px;
          padding: 9px 11px; font: 13px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
        }
        .lp-slide-edit-body:focus { outline: none; border-color: rgba(255,184,77,.6); }
        .lp-slide-edit-tools {
          display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
          font-size: 12px; color: var(--muted);
        }
        .lp-slide-edit-tools select {
          background: rgba(0,0,0,0.20); color: var(--text);
          border: 1px solid var(--line); border-radius: 6px;
          padding: 4px 8px; font-size: 12px; max-width: 240px;
        }
        .lp-slide-edit-tools .lp-slide-edit-empty-media {
          font-style: italic; opacity: .8;
        }

        /* Banner meta row: date · cohort · semester · status · subject as
           inline pills with leading icons. Built by openLessonPlan(). */
        .lp-meta-row { display: flex; flex-wrap: wrap; gap: 14px 18px;
          align-items: center; margin: 6px 0 14px; }
        .lp-meta-row .lp-meta-item { display: inline-flex; gap: 6px; align-items: center;
          color: var(--text); font-size: 13px; }
        .lp-meta-row .lp-meta-icon { font-size: 14px; opacity: .85; }
        .lp-meta-row .lp-meta-pill { display: inline-flex; gap: 6px; align-items: center;
          padding: 3px 10px; border-radius: 999px; font-size: 12px;
          background: rgba(54,241,225,.12); color: var(--teal, #36f1e1);
          border: 1px solid rgba(54,241,225,.25); }
        .lp-meta-row .lp-meta-pill::before { content: '●'; font-size: 8px; line-height: 1; }
        .lp-meta-row .lp-meta-pill.is-completed { background: rgba(120,200,120,.12);
          color: #7fd07f; border-color: rgba(120,200,120,.25); }
        .lp-meta-row .lp-meta-pill.is-disrupted { background: rgba(255,120,120,.12);
          color: #ff7878; border-color: rgba(255,120,120,.25); }

        /* Structured section cards inside lpBody. Each card has an icon + title
           in the head and the section's body content (rendered via mdToHtml)
           inside. The Resources card uses a 2-column checklist on wide layouts. */
        .lp-section-card { /* alias of .premium-panel — kept for readability */ }
        .lp-section-icon { display: inline-flex; align-items: center; justify-content: center;
          width: 28px; height: 28px; border-radius: 8px; margin-right: 10px;
          background: rgba(54,241,225,.12); color: var(--teal, #36f1e1);
          font-size: 16px; line-height: 1; flex-shrink: 0; }
        .premium-panel-head h3 .lp-section-icon { vertical-align: -6px; }

        /* Resources card: 2-up checkbox grid on wide layouts */
        .lp-resources-grid { display: grid; grid-template-columns: 1fr 1fr;
          gap: 4px 14px; padding: 8px 4px; }
        @media (max-width: 640px) { .lp-resources-grid { grid-template-columns: 1fr; } }
        .lp-resources-grid li { background: transparent; border: 0; padding: 6px 8px;
          margin: 0; }
        .lp-resources-grid li:hover { background: rgba(255,255,255,.03); border-radius: 6px; }

        /* Tinted side cards for Instructor Prep + End-of-Day Notes — match the
           mockup's blue/teal callout treatment so they read as "context" not
           "primary content". */
        .lp-card-tinted { background: rgba(54,241,225,.04); border-color: rgba(54,241,225,.18); }
        .lp-card-tinted .premium-panel-head { border-bottom-color: rgba(54,241,225,.18); }
        .lp-card-eod { background: rgba(97,185,255,.05); border-color: rgba(97,185,255,.20); }
        .lp-card-eod .premium-panel-head { border-bottom-color: rgba(97,185,255,.20); }

        /* Lesson Files card — file rows with extension-colored icons.
           Wrapper uses grid so the action buttons column has a guaranteed
           position regardless of how long the filename is. */
        .lp-file-rowwrap { display: grid; grid-template-columns: minmax(0, 1fr) auto;
          gap: 6px; align-items: center; margin-bottom: 8px; }
        .lp-file-row { display: flex; gap: 10px; align-items: center; padding: 10px;
          border: 1px solid var(--line, rgba(134,190,255,.17)); border-radius: 10px;
          background: rgba(255,255,255,.02);
          text-decoration: none; color: inherit; min-width: 0; overflow: hidden; }
        .lp-file-row:hover { background: rgba(255,255,255,.04); }
        .lp-file-icon { width: 36px; height: 36px; border-radius: 8px;
          display: inline-flex; align-items: center; justify-content: center;
          font-size: 16px; font-weight: 700; flex-shrink: 0; }
        .lp-file-icon.ext-pptx, .lp-file-icon.ext-ppt { background: rgba(255,152,120,.15); color: #ff9878; }
        .lp-file-icon.ext-pdf  { background: rgba(255,90,90,.15); color: #ff5a5a; }
        .lp-file-icon.ext-docx, .lp-file-icon.ext-doc { background: rgba(120,150,255,.15); color: #7896ff; }
        .lp-file-icon.ext-xlsx, .lp-file-icon.ext-xls { background: rgba(120,200,120,.15); color: #78c878; }
        .lp-file-icon.ext-mp4, .lp-file-icon.ext-mov  { background: rgba(180,120,255,.15); color: #b478ff; }
        .lp-file-icon.ext-img  { background: rgba(255,200,90,.15); color: #ffc85a; }
        .lp-file-icon.ext-default { background: rgba(150,170,200,.15); color: var(--muted); }
        .lp-file-meta { flex: 1; min-width: 0; }
        .lp-file-meta strong { display: block; white-space: nowrap; overflow: hidden;
          text-overflow: ellipsis; font-size: 14px; }
        .lp-file-meta span { color: var(--muted); font-size: 12px; }
        .lp-file-actions { display: flex; gap: 4px; align-items: center; flex-shrink: 0; }
        .lp-file-actions .lp-file-btn { background: transparent; border: 1px solid var(--line);
          border-radius: 8px; width: 32px; height: 32px; display: inline-flex;
          align-items: center; justify-content: center; color: var(--muted);
          cursor: pointer; font-size: 14px; }
        .lp-file-actions .lp-file-btn:hover { background: rgba(255,255,255,.04);
          color: var(--text); }
        .lp-file-actions .lp-asset-aud[data-audience="instructor"] {
          color: #ffc85a; border-color: rgba(255,200,90,.3);
          background: rgba(255,200,90,.08); }

        /* Drag-to-reorder for video rows. Only kind=video rows get the
           handle column + draggable attribute (handouts/PDFs don't have a
           play-order, so reordering them would be UI noise). Cross-group
           drag is blocked in the JS handler so dropping into the "Instructor
           Only" group doesn't accidentally flip a row's audience. */
        .lp-file-rowwrap.is-draggable {
          grid-template-columns: 20px minmax(0, 1fr) auto;
          cursor: grab;
        }
        .lp-file-rowwrap.is-draggable:active { cursor: grabbing; }
        .lp-file-handle {
          color: var(--muted); font-size: 16px; line-height: 1;
          display: inline-flex; align-items: center; justify-content: center;
          user-select: none; -webkit-user-select: none;
        }
        .lp-file-rowwrap.dragging { opacity: 0.35; }
        .lp-file-rowwrap.drop-above { box-shadow: inset 0 2px 0 0 var(--teal); }
        .lp-file-rowwrap.drop-below { box-shadow: inset 0 -2px 0 0 var(--teal); }
        @media (hover: none) {
          .lp-file-rowwrap.is-draggable { cursor: default; }
        }

        /* Lesson Files audience grouping — instructors see two labeled
           sections, "Student Files" (green-tinted) and "Instructor Only"
           (gold-tinted), so they can curate per-audience at a glance. */
        .lp-files-group { margin-bottom: 14px; }
        .lp-files-group:last-child { margin-bottom: 0; }
        .lp-files-group-head { display: flex; justify-content: space-between;
          align-items: center; padding: 6px 4px 8px; font-size: 12px;
          text-transform: uppercase; letter-spacing: .08em; color: var(--muted);
          border-bottom: 1px dashed var(--line, rgba(134,190,255,.17));
          margin-bottom: 8px; }
        .lp-files-count { background: rgba(255,255,255,.06); color: var(--muted);
          padding: 1px 8px; border-radius: 999px; font-size: 11px;
          letter-spacing: 0; }
        .lp-files-empty { padding: 10px 12px; color: var(--muted); font-size: 12px;
          font-style: italic; line-height: 1.4; }

        /* Markdown pipe-tables — rendered by mdToHtml when it detects a
           header + alignment-row block. Without this CSS the rows would
           display as raw `| col | col |` text. */
        .lesson-plan-body .lp-table { width: 100%; border-collapse: collapse; margin: 12px 0;
          font-size: 14px; }
        .lesson-plan-body .lp-table th, .lesson-plan-body .lp-table td {
          padding: 8px 12px; border: 1px solid var(--line, rgba(134,190,255,.17));
          text-align: left; vertical-align: top; }
        .lesson-plan-body .lp-table th { background: rgba(255,255,255,.04);
          font-weight: 600; color: var(--text); }
        .lesson-plan-body .lp-table tr:nth-child(even) td { background: rgba(255,255,255,.015); }

        /* Class agenda — shown when a pipe-table has a "Time" column.
           3-column grid (Time | Resource | Notes) so every row aligns to
           the same vertical guides — the eye can scan the resource list
           and the time list independently. */
        .lesson-plan-body .lp-agenda { margin: 12px 0; border-left: 2px solid var(--teal, #36f1e1);
          padding-left: 0; }
        .lesson-plan-body .lp-agenda-row { display: grid;
          grid-template-columns: 72px 140px minmax(0, 1fr); column-gap: 16px;
          align-items: start; padding: 10px 0 10px 16px; margin-left: -2px;
          border-left: 2px solid transparent; position: relative; }
        .lesson-plan-body .lp-agenda-row::before { content: ''; position: absolute;
          left: -7px; top: 14px; width: 12px; height: 12px; border-radius: 50%;
          background: var(--teal, #36f1e1); border: 3px solid var(--bg, #0b1220); }
        .lesson-plan-body .lp-agenda-time { font-weight: 600;
          color: var(--teal, #36f1e1); font-size: 13px; padding-top: 2px;
          text-align: right; padding-right: 4px; }
        .lesson-plan-body .lp-agenda-time.is-empty { color: transparent; }
        .lesson-plan-body .lp-agenda-resource { font-weight: 600;
          color: var(--text); font-size: 14px; padding-top: 2px;
          word-wrap: break-word; }
        .lesson-plan-body .lp-agenda-notes { color: var(--text);
          font-size: 14px; line-height: 1.5; min-width: 0; }
        @media (max-width: 720px) {
          .lesson-plan-body .lp-agenda-row { grid-template-columns: 56px minmax(0, 1fr);
            row-gap: 4px; }
          .lesson-plan-body .lp-agenda-resource { grid-column: 2; }
          .lesson-plan-body .lp-agenda-notes { grid-column: 2; }
        }
        /* Cards inside the main column need their own gap — lpBody is a
           container, the .lp-main flex/gap only applies to its direct
           children (lpBody itself + lpEditorWrap), not to grandchildren. */
        #lpBody { display: flex; flex-direction: column; gap: 16px; }

        /* In-place edit forms — rendered by renderLessonPlanForEdit().
           Each editable section has its own card with typed inputs instead
           of free-form markdown, so users edit "in the box" not in a raw
           text editor. */
        .lp-edit-body { padding: 14px 20px 18px; }
        .lp-edit-list { display: flex; flex-direction: column; gap: 6px; margin: 0 0 10px; }
        .lp-edit-row { display: flex; gap: 8px; align-items: center;
          padding: 8px 10px; border: 1px solid var(--line, rgba(134,190,255,.17));
          border-radius: 8px; background: rgba(255,255,255,.025); }
        .lp-edit-row .lp-edit-input {
          flex: 1; min-width: 0; padding: 6px 10px;
          background: rgba(0,0,0,.28); border: 1px solid var(--line, rgba(134,190,255,.17));
          border-radius: 6px; color: var(--text, #fff);
          font: 14px/1.45 inherit; outline: none; }
        .lp-edit-row .lp-edit-input:focus { border-color: var(--teal, #36f1e1);
          background: rgba(0,0,0,.4); }
        .lp-edit-row textarea.lp-edit-input { resize: vertical; min-height: 38px; }
        /* Bullet rows top-align so the • glyph and ✕ button line up with the
           first line of a multi-line wrapped note instead of vertically
           centering against a tall textarea. */
        .lp-edit-row-bullet { align-items: flex-start; }
        .lp-edit-row-bullet .lp-edit-bullet,
        .lp-edit-row-bullet .lp-edit-del { margin-top: 4px; }
        .lp-edit-bullet-text { min-height: 36px; line-height: 1.45;
          /* field-sizing autogrows the textarea to fit content where
             supported (Chrome 123+, Edge 123+); otherwise rows=2 + manual
             resize handle is the fallback. */
          field-sizing: content; }
        .lp-edit-check { accent-color: var(--teal, #36f1e1); width: 18px; height: 18px;
          flex-shrink: 0; cursor: pointer; }
        .lp-edit-bullet { color: var(--teal, #36f1e1); font-size: 18px; line-height: 1;
          width: 18px; text-align: center; flex-shrink: 0; }
        .lp-edit-del { background: transparent; border: 1px solid var(--line);
          color: var(--muted); width: 28px; height: 28px; border-radius: 6px;
          cursor: pointer; flex-shrink: 0; font-size: 16px; line-height: 1;
          display: inline-flex; align-items: center; justify-content: center; }
        .lp-edit-del:hover { background: rgba(255,120,120,.10); color: #ff7878;
          border-color: rgba(255,120,120,.25); }
        .lp-edit-add { width: 100%; justify-content: center; }
        .lp-edit-divider { height: 1px; background: var(--line, rgba(134,190,255,.17));
          margin: 14px 0; }
        .lp-edit-label { display: block; font-size: 12px; text-transform: uppercase;
          letter-spacing: .08em; color: var(--muted); margin-bottom: 6px; }
        .lp-edit-hint { text-transform: none; letter-spacing: 0; opacity: .7; }
        .lp-edit-text { width: 100%; padding: 10px 12px;
          background: rgba(0,0,0,.28); border: 1px solid var(--line, rgba(134,190,255,.17));
          border-radius: 8px; color: var(--text); font: 14px/1.5 inherit;
          resize: vertical; outline: none; box-sizing: border-box; }
        .lp-edit-text:focus { border-color: var(--teal, #36f1e1); }

        /* Lesson Flow row editor — 3 columns side-by-side with a delete
           button. Pin each input to an explicit column so CSS Grid never
           re-orders them: a single `grid-row: N` on one child counts as
           definite placement and runs ahead of auto-placement, pulling
           that child into column 1 and pushing the others rightward. */
        .lp-edit-row-agenda { display: grid; gap: 8px; align-items: start;
          grid-template-columns: 140px minmax(0, 1fr) 96px 28px; }
        .lp-edit-row-agenda .ag-resource { grid-column: 1; }
        .lp-edit-row-agenda .ag-notes    { grid-column: 2; }
        .lp-edit-row-agenda .ag-time     { grid-column: 3; }
        .lp-edit-row-agenda .lp-edit-del { grid-column: 4; }
        .lp-edit-agenda-head { display: grid; gap: 8px;
          grid-template-columns: 140px minmax(0, 1fr) 96px 28px;
          padding: 0 10px 4px; font-size: 11px; text-transform: uppercase;
          letter-spacing: .08em; color: var(--muted); }
        @media (max-width: 720px) {
          .lp-edit-row-agenda { grid-template-columns: 1fr 1fr; }
          .lp-edit-row-agenda .ag-resource { grid-column: 1; grid-row: 1; }
          .lp-edit-row-agenda .ag-time     { grid-column: 2; grid-row: 1; }
          .lp-edit-row-agenda .lp-edit-del { grid-column: 2; grid-row: 1; justify-self: end; }
          .lp-edit-row-agenda .ag-notes    { grid-column: 1 / -1; grid-row: 2; }
          .lp-edit-agenda-head { display: none; }
        }

        /* Student-facing lesson layout — built by renderLessonPlanForStudent().
           Strips instructor doc structure to: blurb + "Bring to class" list.
           Downloads stay in the right-rail Downloads panel (already separate). */
        .lp-student-blurb { font-size: 16px; line-height: 1.55; color: var(--text);
          margin: 0 0 18px; padding: 12px 14px; border-left: 3px solid var(--teal, #36f1e1);
          background: rgba(54,241,225,.06); border-radius: 0 10px 10px 0; }
        .lp-student-section { font-size: 14px; margin: 22px 0 10px; color: var(--muted);
          text-transform: uppercase; letter-spacing: .08em; }
        .lp-student-bring { list-style: none; padding: 0; margin: 0; }
        .lp-student-bring li { display: flex; gap: 10px; align-items: center; padding: 10px 14px;
          border: 1px solid var(--line, rgba(134,190,255,.17)); border-radius: 10px;
          margin: 6px 0; background: rgba(255,255,255,.025); font-size: 15px; }
        .lp-student-bring li::before { content: '•'; color: var(--teal, #36f1e1);
          font-size: 22px; line-height: 1; }
        .lp-student-empty { color: var(--muted); padding: 12px 0; }

        /* Deck editor premium shell. Keeps the working Visual editor JS intact,
           but gives the authoring surface the same calm, high-end rhythm as the
           deck-builder mockup: dark chrome, confident toolbars, centered canvas,
           thumbnail rail, and a real inspector. */
        #lpSlideEditorWrap {
          --deck-bg: #050c16;
          --deck-panel: rgba(12, 24, 38, 0.92);
          --deck-panel-2: rgba(9, 18, 31, 0.96);
          --deck-border: rgba(122, 164, 210, 0.20);
          --deck-blue: #2f7dff;
          --deck-cyan: #42e7f4;
          --deck-gold: #ffb84d;
          background:
            radial-gradient(circle at 18% 0%, rgba(47, 125, 255, 0.16), transparent 34%),
            radial-gradient(circle at 86% 3%, rgba(66, 231, 244, 0.11), transparent 30%),
            linear-gradient(180deg, rgba(9, 19, 32, 0.98), rgba(4, 10, 18, 0.99)) !important;
          border-color: rgba(122, 164, 210, 0.22) !important;
          border-radius: 14px !important;
          overflow: hidden;
          box-shadow: 0 30px 90px rgba(0,0,0,0.42), inset 0 1px 0 rgba(255,255,255,0.05);
        }
        #lpSlideEditorWrap > .premium-panel-head {
          min-height: 68px;
          padding: 14px 18px !important;
          background: rgba(4, 10, 18, 0.56);
          border-bottom: 1px solid var(--deck-border) !important;
          backdrop-filter: blur(14px);
        }
        #lpSlideEditorWrap > .premium-panel-head h3 { margin: 0; font-size: 16px; letter-spacing: 0; }
        #lpSlideEditorWrap > .premium-panel-head p {
          max-width: 680px;
          margin-top: 4px;
          color: rgba(210, 225, 244, 0.62);
        }
        #lpSlideEditorWrap > .premium-panel-head .ghost-btn,
        #lpSlideEditorWrap > .premium-panel-head .primary-btn {
          border-radius: 10px;
          min-height: 38px;
          padding-inline: 14px;
        }
        #lpSlideEditorWrap > .premium-panel-head .primary-btn,
        #lpVisualSaveBtn {
          background: linear-gradient(135deg, var(--deck-cyan), var(--deck-blue)) !important;
          border: 0 !important;
          color: #06101d !important;
          font-weight: 800;
          box-shadow: 0 10px 28px rgba(47, 125, 255, 0.28);
        }
        #lpSlideEditorModeTabs {
          align-items: flex-end;
          padding: 0 18px !important;
          height: 42px;
          background: rgba(4, 10, 18, 0.38);
          border-bottom-color: var(--deck-border) !important;
        }
        #lpSlideEditorModeTabs .lp-slide-mode-tab {
          height: 34px;
          margin-top: 8px;
          padding: 0 14px;
          border-radius: 8px 8px 0 0;
          border-color: transparent;
          color: rgba(210, 225, 244, 0.62);
          background: transparent;
        }
        #lpSlideEditorModeTabs .lp-slide-mode-tab.is-active {
          color: #f7fbff;
          background: rgba(255,255,255,0.055);
          border: 1px solid var(--deck-border);
          border-bottom-color: rgba(4, 10, 18, 0.90);
          box-shadow: inset 0 2px 0 var(--deck-blue);
        }
        #lpSlideEditorModeHint { padding-bottom: 10px; color: rgba(210, 225, 244, 0.54) !important; }
        #lpVisualToolbar {
          gap: 8px !important;
          padding: 10px 18px !important;
          min-height: 68px;
          background: rgba(6, 15, 26, 0.78);
          border-bottom-color: var(--deck-border) !important;
          box-shadow: inset 0 -1px 0 rgba(255,255,255,0.025);
        }
        #lpVisualToolbar .lp-vis-icon-btn {
          min-width: 62px;
          height: 50px;
          border-radius: 10px;
          color: rgba(220, 233, 250, 0.78);
        }
        #lpVisualToolbar .lp-vis-icon { color: #f7fbff; font-size: 19px; }
        #lpVisualToolbar .lp-vis-icon-label { font-size: 10.5px; font-weight: 650; letter-spacing: 0; }
        #lpVisualToolbar .lp-vis-icon-btn:hover {
          color: #fff;
          background: rgba(47, 125, 255, 0.14);
          border-color: rgba(83, 148, 255, 0.34);
          box-shadow: 0 0 0 1px rgba(66, 231, 244, 0.06), 0 10px 24px rgba(0,0,0,0.22);
        }
        #lpVisualToolbar .lp-vis-toolbar-sep {
          height: 40px;
          background: var(--deck-border);
          margin-inline: 4px;
        }
        #lpVisualBody {
          grid-template-columns: 210px minmax(0, 1fr) 318px !important;
          gap: 0 !important;
          padding: 0 !important;
          min-height: 670px !important;
          background:
            linear-gradient(90deg, rgba(8, 18, 31, 0.98) 0 210px, transparent 210px),
            linear-gradient(180deg, rgba(6, 13, 23, 0.90), rgba(4, 10, 18, 0.96));
        }
        #lpVisualThumbs {
          max-height: none !important;
          padding: 14px 14px 18px !important;
          background: rgba(5, 12, 22, 0.80);
          border-right: 1px solid var(--deck-border);
          scrollbar-color: rgba(122,164,210,.45) transparent;
        }
        #lpVisualRailTabs {
          background: rgba(255,255,255,0.045);
          border: 1px solid rgba(122, 164, 210, 0.12);
          border-radius: 10px;
          padding: 4px;
        }
        #lpVisualRailTabs .lp-vis-rail-tab {
          flex: 1;
          border: 0;
          border-radius: 7px;
          padding: 8px 10px;
          color: rgba(210,225,244,.62);
        }
        #lpVisualRailTabs .lp-vis-rail-tab.is-active {
          background: rgba(47,125,255,.20);
          color: #fff;
          border-bottom: 0;
        }
        #lpVisualThumbList, #lpVisualOutlineList { padding-top: 6px; }
        #lpVisualThumbs #lpVisualAddSlideBtn {
          width: 100%;
          justify-content: center;
          margin-top: 6px !important;
          border-radius: 10px;
          border-color: rgba(122,164,210,.18);
          background: rgba(255,255,255,.055);
        }
        .lp-vis-thumb {
          border-radius: 8px;
          border-color: rgba(122,164,210,.18);
          background: #0a1322;
          box-shadow: 0 12px 26px rgba(0,0,0,0.26);
        }
        .lp-vis-thumb.is-current {
          border-color: var(--deck-blue);
          box-shadow: 0 0 0 3px rgba(47,125,255,.36), 0 14px 30px rgba(0,0,0,.34);
        }
        .lp-vis-thumb .thumb-num {
          background: rgba(7,14,24,.86);
          color: #fff;
          border: 1px solid rgba(255,255,255,.18);
        }
        .lp-vis-thumb.is-current .thumb-num { background: var(--deck-blue); color: #fff; }
        #lpVisualMain {
          position: relative;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: flex-start;
          align-self: start;
          min-width: 0;
          padding: 28px 34px 54px;
          background:
            linear-gradient(rgba(122,164,210,.035) 1px, transparent 1px),
            linear-gradient(90deg, rgba(122,164,210,.035) 1px, transparent 1px);
          background-size: 32px 32px;
        }
        #lpVisualMain::before {
          content: '';
          position: absolute;
          inset: 0;
          pointer-events: none;
          background: radial-gradient(circle at center, rgba(47,125,255,.10), transparent 46%);
        }
        #lpVisualCanvas {
          z-index: 1;
          width: min(100%, 1160px) !important;
          border: 1px solid rgba(122,164,210,.24) !important;
          border-radius: 12px !important;
          background: #eef3f8 !important;
          box-shadow: 0 28px 80px rgba(0,0,0,.48), 0 0 0 1px rgba(255,255,255,.04) !important;
        }
        #lpVisualCanvas .block-stage {
          border-radius: 10px;
          box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.06);
        }
        #lpVisualCanvas .block-stage .block.is-selected {
          outline: 3px solid var(--deck-blue);
          outline-offset: -2px;
        }
        #lpVisualCanvas .block-stage .block:hover { outline-color: rgba(47, 125, 255, 0.60); }
        .lp-vis-handle {
          border-color: var(--deck-blue);
          border-radius: 3px;
          box-shadow: 0 1px 5px rgba(0,0,0,.35);
        }
        #lpVisualFloatingToolbar {
          background: rgba(9, 18, 31, 0.96) !important;
          border-color: rgba(122,164,210,.24) !important;
          border-radius: 9px !important;
          box-shadow: 0 12px 30px rgba(0,0,0,.42) !important;
        }
        #lpVisualFloatingToolbar button:hover { background: rgba(47,125,255,.18); }
        #lpVisualBottomActions.is-visible {
          position: absolute;
          z-index: 3;
          left: 50%;
          bottom: 16px;
          transform: translateX(-50%);
          margin: 0;
          min-width: min(620px, calc(100% - 68px));
          justify-content: center;
          background: rgba(9, 18, 31, 0.94);
          border-color: rgba(122,164,210,.22);
          box-shadow: 0 18px 46px rgba(0,0,0,.42);
          backdrop-filter: blur(14px);
        }
        #lpVisualBottomActions .lp-vis-action-btn:hover,
        #lpVisualBottomActions .lp-vis-action-btn.is-on {
          background: rgba(47,125,255,.18);
          border-color: rgba(47,125,255,.42);
        }
        #lpVisualSlideMeta, #lpVisualStatusBar {
          z-index: 2;
          width: min(100%, 1160px);
          box-sizing: border-box;
        }
        #lpVisualStatusBar {
          margin-top: 10px;
          padding: 9px 12px !important;
          background: rgba(7, 15, 27, 0.76);
          border: 1px solid rgba(122,164,210,.14);
          border-radius: 10px;
        }
        #lpVisualPropPanel {
          max-height: none !important;
          border: 0 !important;
          border-left: 1px solid var(--deck-border) !important;
          border-radius: 0 !important;
          background: rgba(7, 16, 27, 0.92) !important;
          box-shadow: none !important;
          scrollbar-color: rgba(122,164,210,.45) transparent;
        }
        #lpVisualPropPanel .lp-vis-prop-tabs {
          position: sticky;
          top: 0;
          z-index: 2;
          gap: 8px;
          padding: 12px 14px 0;
          background: rgba(7, 16, 27, 0.98);
          border-bottom-color: rgba(122,164,210,.14);
        }
        #lpVisualPropPanel .lp-vis-prop-tab {
          padding: 10px 8px 11px;
          font-size: 12px;
          color: rgba(210,225,244,.62);
        }
        #lpVisualPropPanel .lp-vis-prop-tab.is-active {
          color: #fff;
          border-bottom-color: var(--deck-blue);
        }
        #lpVisualPropPanelInner,
        #lpVisualPropPanelAnimate,
        #lpVisualPropPanelLayout { padding: 12px 16px 18px !important; }
        #lpVisualPropPanel .lp-vis-prop-group {
          padding: 12px 0;
          border-bottom-color: rgba(122,164,210,.13);
        }
        #lpVisualPropPanel .lp-vis-prop-group h4 .lp-vis-sec-icon { color: var(--deck-gold); }
        #lpVisualPropPanel .lp-vis-stepper,
        #lpVisualPropPanel .lp-vis-color-row,
        #lpVisualPropPanel .lp-vis-select,
        #lpVisualPropPanel .lp-vis-pills,
        #lpVisualPropPanel .lp-vis-subpanel,
        #lpVisualPropPanel .lp-vis-textarea {
          background-color: rgba(1, 8, 15, 0.58);
          border-color: rgba(122,164,210,.15);
        }
        #lpVisualPropPanel .lp-vis-stepper:focus-within,
        #lpVisualPropPanel .lp-vis-color-row:hover { border-color: rgba(47,125,255,.52); }
        /* Destructive action — Delete slide. Red treatment so users spot it
           among the duplicate/title/minutes controls in the meta row. */
        #lpVisualDeleteSlideBtn {
          color: #ff7a7a !important;
          border-color: rgba(255, 107, 107, 0.45) !important;
          background: rgba(255, 107, 107, 0.10) !important;
        }
        #lpVisualDeleteSlideBtn:hover {
          color: #fff !important;
          background: rgba(220, 53, 69, 0.85) !important;
          border-color: rgba(220, 53, 69, 0.95) !important;
        }
        #lpVisualSaveStatus.lp-vis-saved {
          min-height: 30px;
          border-color: rgba(255,184,77,.42);
          background: rgba(255,184,77,.10);
          color: #ffce78;
        }
        #lpVisualSaveStatus.lp-vis-saved[data-state="saved"] {
          border-color: rgba(52, 211, 153, .44);
          background: rgba(52, 211, 153, .10);
          color: #56e0a7;
        }
        @media (max-width: 1320px) {
          #lpVisualBody {
            grid-template-columns: 172px minmax(0, 1fr) 292px !important;
            background:
              linear-gradient(90deg, rgba(8, 18, 31, 0.98) 0 172px, transparent 172px),
              linear-gradient(180deg, rgba(6, 13, 23, 0.90), rgba(4, 10, 18, 0.96));
          }
          #lpVisualMain { padding-inline: 22px; }
          #lpVisualToolbar .lp-vis-icon-btn { min-width: 54px; padding-inline: 7px; }
        }
        @media (max-width: 1040px) {
          #lpVisualBody {
            grid-template-columns: 150px minmax(0, 1fr) !important;
            grid-template-areas:
              "thumbs main"
              "props props";
          }
          #lpVisualThumbs { grid-area: thumbs; }
          #lpVisualMain { grid-area: main; min-height: 520px; }
          #lpVisualPropPanel {
            grid-area: props;
            max-height: 420px !important;
            border-left: 0 !important;
            border-top: 1px solid var(--deck-border) !important;
          }
        }
        @media (max-width: 760px) {
          #lpSlideEditorWrap > .premium-panel-head {
            align-items: flex-start;
            gap: 12px;
          }
          #lpVisualToolbar {
            overflow-x: auto;
            flex-wrap: nowrap !important;
          }
          #lpVisualBody {
            display: flex !important;
            flex-direction: column;
          }
          #lpVisualThumbs {
            max-height: 190px !important;
            border-right: 0;
            border-bottom: 1px solid var(--deck-border);
          }
          #lpVisualThumbList {
            display: grid !important;
            grid-auto-flow: column;
            grid-auto-columns: 148px;
            overflow-x: auto;
            padding-bottom: 4px;
          }
          #lpVisualMain {
            min-height: 430px;
            padding: 18px 12px 64px;
          }
          #lpVisualBottomActions.is-visible {
            min-width: calc(100% - 24px);
            overflow-x: auto;
            justify-content: flex-start;
          }
          #lpVisualPropPanel { max-height: 380px !important; }
        }

        /* Mobile flicker guard — touch devices fire :hover on the first
           tap, so any hover transform pulses the element. Disable hover
           transforms when there's no real cursor. The :not(.sidebar)
           exclusion is critical: the mobile sidebar uses transform:
           translateX(-105%) ↔ translateX(0) for its slide-in/out state,
           and Android Chrome's "sticky :hover" after a tap was overriding
           that to transform:none — leaving the panel pinned open after a
           nav pick even though .open had been removed. Hover-LIFT
           transforms on children (.nav-item:hover, .cl-card:hover, etc.)
           are still neutralized because the :not() only spares the
           panel element itself, not its descendants. The same applies
           to the other transform-POSITIONED slide panels — .cart-drawer
           (translateX(100%)), .coach-drawer (translateX(104%)), and the
           .streak-nag card (translate(140%,0)): without the exclusion,
           sticky :hover after a tap forced transform:none and left them
           pinned on-screen, only clearing on a page refresh. */
        @media (hover: none), (pointer: coarse) {
          *:hover:not(.sidebar):not(.cart-drawer):not(.coach-drawer):not(.streak-nag):not(.party-callout) { transform: none !important; }
        }

        /* Rich text floating toolbar (Phase 1 — Bold / Italic / Underline).
           Lives at body level so the canvas's overflow:hidden doesn't clip
           it. Positioned via JS on every selectionchange while inline-edit
           is active. */
        #lpVisualRichTextToolbar {
          position: fixed;
          display: none;
          gap: 2px;
          padding: 4px;
          background: rgba(8, 14, 24, 0.96);
          border: 1px solid rgba(134, 190, 255, 0.22);
          border-radius: 8px;
          box-shadow: 0 8px 22px rgba(0,0,0,0.45);
          z-index: 99999;
          backdrop-filter: blur(8px);
        }
        #lpVisualRichTextToolbar button {
          background: transparent;
          border: none;
          color: #e6edf7;
          width: 28px; height: 28px;
          font-size: 13px;
          line-height: 1;
          cursor: pointer;
          border-radius: 5px;
          padding: 0;
          display: inline-flex; align-items: center; justify-content: center;
          transition: background .12s, color .12s;
        }
        #lpVisualRichTextToolbar button:hover { background: rgba(255,184,77,.18); color: #fff; }
        #lpVisualRichTextToolbar button.is-active {
          background: rgba(255,184,77,.28);
          color: #ffb84d;
        }
        #lpVisualRichTextToolbar .rt-sep {
          width: 1px;
          height: 18px;
          margin: 0 4px;
          background: rgba(134, 190, 255, 0.22);
          align-self: center;
        }
        #lpVisualRichTextToolbar select[data-rt-size],
        #lpVisualRichTextToolbar select[data-rt-font] {
          background: rgba(0,0,0,0.30);
          border: 1px solid rgba(134, 190, 255, 0.18);
          border-radius: 5px;
          color: #e6edf7;
          font-size: 11px;
          padding: 4px 6px;
          height: 26px;
          cursor: pointer;
          min-width: 54px;
        }
        #lpVisualRichTextToolbar select[data-rt-font] { min-width: 96px; }
        #lpVisualRichTextToolbar select[data-rt-size]:hover,
        #lpVisualRichTextToolbar select[data-rt-font]:hover { border-color: rgba(255,184,77,.45); }
        #lpVisualRichTextToolbar button[data-rt-color],
        #lpVisualRichTextToolbar button[data-rt-hilite] {
          width: auto;
          padding: 0 7px;
          gap: 4px;
          flex-direction: row;
        }
        #lpVisualRichTextToolbar .rt-color-swatch {
          display: inline-block;
          width: 12px; height: 12px;
          border-radius: 3px;
          border: 1px solid rgba(255,255,255,0.25);
        }
        #lpVisualRichTextToolbar input[data-rt-color-input],
        #lpVisualRichTextToolbar input[data-rt-hilite-input] {
          position: absolute;
          opacity: 0;
          width: 0; height: 0;
          pointer-events: none;
        }
        #lpVisualRichTextLinkPopover {
          position: fixed;
          display: none;
          gap: 6px;
          padding: 8px;
          background: rgba(8, 14, 24, 0.97);
          border: 1px solid rgba(134, 190, 255, 0.28);
          border-radius: 8px;
          box-shadow: 0 10px 30px rgba(0,0,0,0.55);
          z-index: 100000;
          backdrop-filter: blur(8px);
          align-items: center;
        }
        #lpVisualRichTextLinkPopover input[data-rt-link-url] {
          background: rgba(0,0,0,0.30);
          border: 1px solid rgba(134, 190, 255, 0.22);
          border-radius: 5px;
          color: #e6edf7;
          font-size: 12px;
          padding: 6px 8px;
          height: 28px;
          width: 260px;
          outline: none;
        }
        #lpVisualRichTextLinkPopover input[data-rt-link-url]:focus { border-color: rgba(255,184,77,.6); }
        #lpVisualRichTextLinkPopover input[data-rt-link-url].is-invalid {
          border-color: rgba(255, 99, 99, .85);
          background: rgba(80, 14, 14, 0.45);
        }
        #lpVisualRichTextLinkPopover button {
          background: rgba(255,184,77,.15);
          border: 1px solid rgba(255,184,77,.35);
          color: #ffd79e;
          font-size: 12px;
          padding: 6px 10px;
          height: 28px;
          border-radius: 5px;
          cursor: pointer;
          transition: background .12s;
        }
        #lpVisualRichTextLinkPopover button:hover { background: rgba(255,184,77,.28); color: #fff; }
        #lpVisualRichTextLinkPopover button[data-rt-link-remove] {
          background: transparent;
          border-color: rgba(255, 99, 99, .35);
          color: #ff9a9a;
        }
        #lpVisualRichTextLinkPopover button[data-rt-link-remove]:hover {
          background: rgba(255, 99, 99, .15);
          color: #fff;
        }
      

    /* Tuition buckets + payment plans (Phase 2 student payment surface).
       Dark theme, solid cards with the house gold→teal→blue side-bar; the
       whole surface is JS-mounted into the Tuition Summary panel (app-core.js
       loadStudentTuitionPanel). Mobile-safe: hover transforms guarded below. */
    .tpp-wrap { display: grid; gap: 14px; margin-top: 4px; }
    .tpp-loading { color: var(--muted); padding: 12px 0; font-size: 13px; }
    .tpp-bucket {
      position: relative; overflow: hidden;
      border: 1px solid var(--line-strong);
      border-radius: var(--radius-md);
      background: var(--panel-strong);
      padding: 16px 18px 16px 22px;
      box-shadow: 0 14px 40px rgba(0,0,0,0.26), inset 0 1px 0 rgba(255,255,255,0.05);
    }
    .tpp-bucket::before {
      content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
      background: linear-gradient(180deg, var(--gold), var(--teal) 55%, var(--blue));
    }
    .tpp-bucket-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
    .tpp-bucket-name { font-weight: 800; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-2); }
    .tpp-balance { font-size: 30px; font-weight: 860; color: #fff; margin: 6px 0 2px; font-variant-numeric: tabular-nums; }
    .tpp-sub { color: var(--muted); font-size: 12px; }
    .tpp-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
    .tpp-btn {
      appearance: none; border: 1px solid transparent; cursor: pointer;
      border-radius: 10px; padding: 8px 14px; font-size: 13px; font-weight: 700;
      transition: transform 120ms ease, filter 120ms ease, background 120ms ease;
    }
    .tpp-btn:hover { transform: translateY(-1px); filter: brightness(1.06); }
    .tpp-primary { background: linear-gradient(135deg, var(--teal), var(--blue)); color: #04121f; }
    .tpp-ghost { background: rgba(142,214,255,0.08); border-color: var(--line-strong); color: #dbeafe; }
    .tpp-link {
      appearance: none; background: none; border: none; cursor: pointer;
      color: var(--muted); font-size: 12px; font-weight: 600; padding: 6px 4px;
      text-decoration: underline; text-underline-offset: 2px;
    }
    .tpp-link:hover { color: #fff; }
    /* Saved-plan summary card nested inside a bucket. */
    .tpp-plan {
      margin-top: 12px; padding: 12px 14px;
      border: 1px solid var(--line); border-radius: 12px;
      background: linear-gradient(135deg, rgba(13,25,43,0.7), rgba(8,17,31,0.7));
    }
    .tpp-plan-head { margin-bottom: 6px; }
    .tpp-plan-line { color: #fff; font-weight: 700; font-size: 14px; }
    .tpp-plan-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
    .tpp-banner {
      margin-top: 8px; padding: 8px 10px; border-radius: 8px; font-size: 12px;
      background: rgba(255,200,90,0.10); border: 1px solid rgba(255,200,90,0.28); color: var(--gold);
    }
    /* Inline lump-sum + plan-builder forms. */
    .tpp-inline:empty { display: none; }
    .tpp-form {
      margin-top: 12px; padding: 14px; border-radius: 12px;
      border: 1px solid var(--line-strong); background: rgba(6,15,28,0.6);
    }
    .tpp-label { display: block; font-size: 12px; font-weight: 700; color: var(--muted-2); margin-bottom: 5px; }
    .tpp-row { display: flex; align-items: center; gap: 6px; }
    .tpp-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
    .tpp-dollar { color: var(--muted); font-weight: 700; }
    .tpp-input {
      width: 100%; box-sizing: border-box;
      background: rgba(3,10,20,0.7); border: 1px solid var(--line-strong); border-radius: 9px;
      color: #fff; font-size: 14px; padding: 9px 11px; font-family: inherit;
    }
    .tpp-input:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 2px rgba(54,241,225,0.18); }
    .tpp-hint { color: var(--muted); font-size: 11px; margin-top: 5px; }
    .tpp-day { margin-top: 12px; }
    .tpp-payoff {
      margin-top: 12px; padding: 10px 12px; border-radius: 9px; font-size: 12.5px; line-height: 1.5;
      background: rgba(142,214,255,0.06); border: 1px solid var(--line); color: #cfe4f5;
    }
    .tpp-payoff:empty { display: none; }
    .tpp-payoff.good { background: rgba(77,232,167,0.08); border-color: rgba(77,232,167,0.3); color: #bff3da; }
    .tpp-payoff.warn { background: rgba(255,200,90,0.09); border-color: rgba(255,200,90,0.32); color: #ffe0a3; }
    .tpp-form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; }
    @media (hover: none) {
      .tpp-btn:hover { transform: none; filter: none; }
    }