:root{
    /* flip* brand palette */
    --evergreen:#2c3a32;
    --parchment:#f2eadf;
    --mossbank:#2c5c47;
    --mulberry:#5a1f2e;
    --wisteria:#a692dd;
    --terracotta:#c65c39;
    --blossom:#eeb5a0;
    --acorn:#8f6a2c;
    --camellia:#f286b1;
    --harbour:#5193cf;
    --sagebrush:#b0cf9e;
    --sundown:#f0d359;
    --olive:#b6b433;
    --ember:#f0582e;
    --skylight:#bed2e9;
    --riverbed:#5d33bc;
    --glacier:#00b0a8;
    --springleaf:#e0e900;
    --starlight:#66d8dd;
    --sage:var(--sagebrush);

    /* semantic surfaces */
    --color-cream:#F7F4ED;
    --bg-page:var(--color-cream);   /* light, unified canvas across page/rail/bottom bar */
    --bg-rail:var(--color-cream);
    --bg-surface:#FFFFFF;    /* cards, input surfaces — kept white for contrast */
    --ink:var(--evergreen);
    --muted:#6B7A72;
    --meta-ink:#4B5952;
    --line:#E4DBC8;
    --line-soft:#EEE6D5;
    --done:#4E9B6E;
    --flag:var(--sundown);
    --flag-ink:#7a5c00;
    --radius:12px;
    --radius-sm:8px;
    --topbar-h:60px;
    --rail-w:310px;
    --content-w:780px;
    --footer-h:64px;

    /* semantic content-type tints (light surfaces) + accents (text/icons/borders) */
    --tint-skylight:#EDF4FA; --accent-skylight:#4C7CA8;
    --tint-sage:#F0F6EB;     --accent-sage:#5C7F45;
    --tint-blossom:#FBEEE8;  --accent-blossom:#B8613C;
    --tint-wisteria:#F2EFFB; --accent-wisteria:#7C63B0;
    --tint-mulberry:#F8EEF0; --accent-mulberry:var(--mulberry);
  }
  *{box-sizing:border-box;}
  html{height:100%; overflow:hidden;}
  body{
    margin:0; padding:0; background:var(--bg-page); color:var(--ink);
    height:100%; width:100%; overflow:hidden; position:fixed; overscroll-behavior:none;
    font-family:"Montserrat","Segoe UI",Helvetica,Arial,sans-serif; -webkit-font-smoothing:antialiased; font-size:16px;
  }
  h1,h2,h3,h4,.serif{font-family:"Montserrat",sans-serif; font-weight:700;}
  #root{height:100%; display:flex; flex-direction:column;}
  a{color:var(--riverbed);}
  @media (prefers-reduced-motion: reduce){ *{ transition:none !important; scroll-behavior:auto !important; animation:none !important; } }

  /* ---------- slim, transparent-track scrollbars ---------- */
  *{ scrollbar-width:thin; scrollbar-color:rgba(44,58,50,0.22) transparent; }
  *::-webkit-scrollbar{ width:7px; height:7px; background:transparent;}
  *::-webkit-scrollbar-track{ background:transparent;}
  *::-webkit-scrollbar-thumb{ background:rgba(44,58,50,0.22); border-radius:8px;}
  *::-webkit-scrollbar-thumb:hover{ background:rgba(44,58,50,0.38);}

  /* ---------- per-section colour themes ----------
     Each section gets a distinct accent so the course rail and lesson
     header feel different section to section, while staying inside the
     same restrained brand set. Cycles if there are ever more than 7. */
  .level-theme-0{ --lvl-accent:var(--camellia); --lvl-deep:var(--mulberry); }
  .level-theme-1{ --lvl-accent:var(--harbour);  --lvl-deep:var(--evergreen); }
  .level-theme-2{ --lvl-accent:var(--sundown);  --lvl-deep:var(--acorn);     }
  .level-theme-3{ --lvl-accent:var(--glacier);  --lvl-deep:var(--evergreen); }
  .level-theme-4{ --lvl-accent:var(--terracotta); --lvl-deep:var(--mulberry); }
  .level-theme-5{ --lvl-accent:var(--wisteria); --lvl-deep:var(--evergreen); }
  .level-theme-6{ --lvl-accent:var(--starlight); --lvl-deep:var(--evergreen); }

  /* ---------- gate / identify screens ---------- */
  .center-screen{ height:100vh; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; display:flex; align-items:center; justify-content:center; padding:24px; background:var(--bg-page);}
  .gate-card{
    background:var(--bg-surface); border:1px solid var(--line); border-radius:var(--radius);
    padding:40px 36px; max-width:440px; width:100%;
    box-shadow:0 1px 2px rgba(44,58,50,0.05), 0 16px 40px rgba(44,58,50,0.07);
  }
  .gate-eyebrow{ font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--acorn); font-weight:700; margin-bottom:6px;}
  .gate-card h1{ font-size:28px; margin:0 0 8px; color:var(--evergreen); line-height:1.2;}
  .gate-card p.sub{ color:var(--muted); font-size:15px; margin:0 0 22px; line-height:1.55;}
  .field-label{ font-size:13px; color:var(--muted); margin-bottom:6px; display:block; font-weight:600;}
  input[type=password], input[type=text], select, textarea{
    width:100%; padding:12px 14px; border-radius:var(--radius-sm); border:1.5px solid var(--line);
    background:var(--bg-surface); font-size:16px; font-family:inherit; color:var(--ink);
  }
  input:focus, select:focus, textarea:focus{ outline:2px solid var(--harbour); outline-offset:1px; border-color:var(--harbour);}
  .btn{
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    background:var(--evergreen); color:#fff; border:none; border-radius:var(--radius-sm);
    padding:13px 20px; font-size:15px; font-weight:700; cursor:pointer;
    font-family:inherit; transition:background .15s ease, opacity .15s ease;
  }
  .btn:hover{ background:var(--mossbank);}
  .btn:active{ transform:scale(.99);}
  .btn:focus-visible{ outline:2px solid var(--harbour); outline-offset:2px;}
  .btn:disabled{ background:#C9C2AE; color:#8A8272; cursor:not-allowed;}
  .btn.secondary{ background:transparent; color:var(--evergreen); border:1.5px solid var(--line);}
  .btn.secondary:hover{ background:#EFEBDD;}
  .btn.secondary:disabled{ color:#B3AC98; border-color:var(--line); background:transparent;}
  .btn.small{ padding:8px 13px; font-size:13.5px;}
  .btn-row{ display:flex; gap:10px; margin-top:20px; flex-wrap:wrap;}
  .error-msg{ color:#9A4A3A; font-size:14px; margin-top:10px; min-height:18px;}
  .disclaimer{ font-size:12px; color:var(--muted); margin-top:18px; line-height:1.5; border-top:1px dashed var(--line); padding-top:14px;}

  /* ---------- app shell ---------- */
  .topbar{
    background:var(--evergreen); color:var(--parchment); padding:0 20px; height:var(--topbar-h);
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    position:sticky; top:0; z-index:20; border-bottom:1px solid rgba(255,255,255,0.08);
  }
  .topbar-left{ display:flex; align-items:center; gap:12px; min-width:0; flex-shrink:0; overflow:hidden;}
  .rail-toggle{
    display:none; background:none; border:none; color:var(--parchment); cursor:pointer;
    width:34px; height:34px; border-radius:8px; font-size:18px; align-items:center; justify-content:center; flex-shrink:0;
  }
  .rail-toggle:hover{ background:rgba(255,255,255,0.1);}
  .topbar-logo{ height:32px; width:auto; flex-shrink:0; display:block;}
  .topbar-text{ min-width:0; overflow:hidden;}
  .topbar .brand{ font-size:15px; font-weight:700; letter-spacing:.01em; font-family:"Montserrat"; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  .topbar .who{ font-size:12.5px; color:#BFCFC6; margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  .topbar-brand-text{ font-size:14px; font-weight:700; color:var(--parchment); font-family:"Montserrat"; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block;}

  .topbar-progress{ display:flex; align-items:center; gap:12px; flex:1 1 auto; max-width:420px; min-width:60px; margin:0 20px;}
  .topbar-progress-bar{ flex:1; height:6px; background:rgba(255,255,255,0.15); border-radius:5px; overflow:hidden; min-width:36px;}
  .topbar-progress-bar > div{ height:100%; background:var(--sagebrush); border-radius:5px;}
  .topbar-progress-pct{ font-size:12.5px; color:#C9D6CE; white-space:nowrap; flex-shrink:0;}

  .topbar-actions{ display:flex; gap:8px; align-items:center; flex-shrink:0;}
  .topbar .btn.secondary{ color:var(--parchment); border-color:rgba(246,244,239,0.3); background:transparent;}
  .topbar .btn.secondary:hover{ background:rgba(246,244,239,0.12);}

  .coach-menu{ position:relative;}
  .coach-menu-trigger{
    display:flex; align-items:center; gap:9px; background:none; border:none; cursor:pointer;
    color:var(--parchment); font-family:inherit; padding:6px 8px; border-radius:8px;
  }
  .coach-menu-trigger:hover{ background:rgba(255,255,255,0.08);}
  .coach-menu-name{ font-size:13.5px; font-weight:600; white-space:nowrap;}
  .coach-menu-chevron{ font-size:10px; opacity:.75; transition:transform .12s ease;}
  .coach-menu.is-open .coach-menu-chevron{ transform:rotate(180deg);}
  .coach-avatar{
    width:30px; height:30px; border-radius:50%; background:var(--sagebrush); color:var(--evergreen);
    font-size:12px; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0;
  }
  .coach-menu-dropdown{
    display:none; position:absolute; top:calc(100% + 8px); right:0; background:var(--bg-surface); border:1px solid var(--line);
    border-radius:var(--radius-sm); box-shadow:0 10px 30px rgba(0,0,0,0.15); min-width:160px; padding:6px; z-index:30;
  }
  .coach-menu.is-open .coach-menu-dropdown{ display:block;}
  .coach-menu-dropdown button{
    display:block; width:100%; text-align:left; background:none; border:none; cursor:pointer;
    padding:9px 12px; border-radius:6px; font-size:13.5px; color:var(--ink); font-family:inherit;
  }
  .coach-menu-dropdown button:hover{ background:rgba(0,0,0,0.05);}

  .layout{ display:flex; flex:1; min-height:0; position:relative;}

  /* ---------- course rail (left) ---------- */
  .course-rail{
    width:var(--rail-w); flex-shrink:0; background:var(--bg-rail); border-right:1px solid var(--line);
    height:calc(100vh - var(--topbar-h)); overflow:hidden; transition:width .15s ease;
    display:flex; flex-direction:column;
  }
  .rail-header{ padding:22px 20px 18px; flex-shrink:0;}
  .rail-header-top{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:16px;}
  .rail-collapse-btn{
    width:26px; height:26px; border-radius:50%;
    background:var(--bg-surface); border:1px solid var(--line); cursor:pointer; font-size:12px;
    display:flex; align-items:center; justify-content:center; color:var(--evergreen); flex-shrink:0;
  }
  .rail-collapse-btn:hover{ background:#EFEBDD;}
  .rail-back-link{
    display:flex; align-items:center; gap:6px; font-size:12.5px; font-weight:700; color:var(--evergreen);
    cursor:pointer; min-width:0;
  }
  .rail-back-link:hover{ text-decoration:underline;}
  .rail-eyebrow{ font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--mossbank); font-weight:700; margin-bottom:6px;}
  .rail-module-title{ font-size:14px; font-weight:600; margin:0 0 12px; color:var(--evergreen); line-height:1.35;}
  .rail-progress-bar{ height:6px; background:#E3DBC5; border-radius:5px; overflow:hidden;}
  .rail-progress-bar > div{ height:100%; background:var(--mossbank); border-radius:5px;}
  .rail-progress-pct{ font-size:12.5px; color:var(--muted); margin-top:9px;}
  .rail-section-toggle{
    display:block; background:none; border:none; padding:0; margin-top:14px; font-family:inherit;
    font-size:12.5px; font-weight:700; color:var(--accent-wisteria); cursor:pointer; text-align:left;
  }
  .rail-section-toggle:hover{ text-decoration:underline;}

  .rail-sections{ flex:1; overflow-y:auto; min-height:0; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;}
  .rail-section{ margin-bottom:4px;}
  .rail-section-title{
    font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted);
    font-weight:700; padding:16px 20px 8px; cursor:pointer;
  }
  .rail-section:first-child .rail-section-title{ padding-top:6px;}
  .rail-lesson-list{ display:flex; flex-direction:column;}
  .rail-lesson-row{
    display:flex; align-items:center; justify-content:space-between; gap:10px; cursor:pointer;
    padding:14px 20px; border-bottom:1px solid var(--line-soft); border-left:3px solid transparent;
  }
  .rail-lesson-row:hover{ background:rgba(0,0,0,0.03);}
  .rail-lesson-row.current{ background:var(--tint-mulberry); border-left-color:var(--mulberry);}
  .rail-row-text{ min-width:0;}
  .rail-row-number{ font-size:10.5px; font-weight:600; color:var(--muted); margin-bottom:3px;}
  .rail-row-title{ font-size:12.5px; font-weight:600; color:var(--ink); line-height:1.35; margin-bottom:3px;}
  .rail-row-time{ font-size:11.5px; color:var(--muted);}
  .rail-lesson-row.current .rail-row-number,
  .rail-lesson-row.current .rail-row-title{ color:var(--mulberry);}
  .rail-row-icon{
    width:23px; height:23px; border-radius:50%; border:1.5px solid var(--line); flex-shrink:0;
    display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; color:transparent;
  }
  .rail-row-icon.done{ border-color:var(--done); color:var(--done);}
  .rail-row-icon.current{ border-color:var(--mulberry);}

  .rail-footer{
    flex-shrink:0; border-top:1px solid var(--line); padding:0 16px; background:var(--bg-rail);
    min-height:var(--footer-h); box-sizing:border-box; display:flex; align-items:center;
  }
  .rail-view-full-btn{
    display:flex; align-items:center; justify-content:center; gap:7px; width:100%;
    padding:9px; border:1.5px solid var(--line); border-radius:18px; background:var(--bg-surface);
    font-family:inherit; font-size:12.5px; font-weight:600; color:var(--ink); cursor:pointer;
  }
  .rail-view-full-btn:hover{ background:#EFEBDD;}

  .course-rail.is-collapsed{ /* width now set via --rail-w, updated in JS on toggle */}
  .course-rail.is-collapsed .rail-module-title,
  .course-rail.is-collapsed .rail-progress-bar,
  .course-rail.is-collapsed .rail-progress-pct,
  .course-rail.is-collapsed .rail-eyebrow,
  .course-rail.is-collapsed .rail-back-link span,
  .course-rail.is-collapsed .rail-section-toggle,
  .course-rail.is-collapsed .rail-section-title,
  .course-rail.is-collapsed .rail-row-text,
  .course-rail.is-collapsed .rail-view-full-btn span{ display:none;}
  .course-rail.is-collapsed .rail-header{ padding:22px 10px 14px;}
  .course-rail.is-collapsed .rail-header-top{ flex-direction:column-reverse; gap:8px; margin-bottom:12px;}
  .course-rail.is-collapsed .rail-back-link{ justify-content:center;}
  .course-rail.is-collapsed .rail-section-title{ padding:16px 8px 8px;}
  .course-rail.is-collapsed .rail-lesson-row{ justify-content:center; padding:10px 4px;}
  .course-rail.is-collapsed .rail-footer{ padding:0 8px;}

  /* ---------- rail backdrop for mobile drawer ---------- */
  .rail-backdrop{ display:none; position:fixed; inset:0; background:rgba(20,24,20,0.35); z-index:15;}

  /* ---------- main reading column ---------- */
  .main-scroll{ flex:1; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; max-height:calc(100vh - var(--topbar-h)); display:flex; justify-content:center; background:var(--bg-page); min-width:0;}
  .lesson-column{ width:100%; max-width:var(--content-w); padding:52px 32px 60px; min-width:0;}
  #bottomSpacer{ display:block; width:100%; height:0px;}

  .lesson-header{ margin-bottom:36px;}
  .lesson-eyebrow{ font-size:12.5px; letter-spacing:.03em; color:var(--lvl-deep,var(--acorn)); font-weight:700; margin-bottom:12px;}
  .lesson-title{ font-size:33px; margin:0 0 14px; color:var(--evergreen); line-height:1.18;}
  .lesson-meta-row{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; font-size:13.5px; color:var(--muted);}
  .lesson-status-pill{ display:inline-flex; align-items:center; gap:6px; font-weight:700; }
  .lesson-status-pill.is-done{ color:var(--done);}

  .content-flow{ font-size:16.5px; line-height:1.75; color:var(--ink);}
  .content-flow p{ margin:0 0 18px;}
  .content-flow h3{ font-size:24px; margin:38px 0 14px; color:var(--evergreen); scroll-margin-top:calc(var(--topbar-h) + 16px);}
  .content-flow h4{ font-size:19px; margin:30px 0 12px; color:var(--evergreen); scroll-margin-top:calc(var(--topbar-h) + 16px);}
  .content-flow ul, .content-flow ol{ margin:0 0 18px; padding-left:22px;}
  .content-flow li{ margin-bottom:8px; line-height:1.65;}
  .content-flow strong{ color:var(--evergreen);}
  .content-flow a{ text-decoration:underline; text-underline-offset:2px;}

  /* ---------- note components (coach note, practice note, case review, supervisor note) ---------- */
  .note-block{ margin:24px 0; padding:16px 20px; border-radius:var(--radius); border-left:3px solid var(--accent, var(--accent-sage)); background:var(--tint, var(--tint-sage));}
  .note-block.note-sage{ --accent:var(--accent-sage); --tint:var(--tint-sage);}
  .note-block.note-skylight{ --accent:var(--accent-skylight); --tint:var(--tint-skylight);}
  .note-block.note-mulberry{ --accent:var(--accent-mulberry); --tint:var(--tint-mulberry);}
  .note-block .note-label{ font-size:11.5px; font-weight:700; letter-spacing:.03em; color:var(--accent, var(--evergreen)); margin-bottom:6px;}
  .note-block p{ margin:0 0 8px; font-size:15px; color:var(--ink); line-height:1.6;}
  .note-block p:last-child{ margin-bottom:0;}
  .note-block.is-expandable summary{ list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:10px;}
  .note-block.is-expandable summary::-webkit-details-marker{ display:none;}
  .note-block.is-expandable summary .note-label{ margin-bottom:0;}
  .note-block.is-expandable .note-toggle-hint{ font-size:12px; color:var(--muted); font-weight:600;}
  .note-block.is-expandable .note-body{ margin-top:10px;}

  /* ---------- resource rows (reading, download, external, audio) ---------- */
  .resource-row{
    display:flex; align-items:center; gap:14px; margin:16px 0; padding:16px;
    border:1px solid var(--line); border-radius:12px; background:var(--bg-surface);
  }
  .resource-row.is-pending{ border-style:dashed; background:transparent;}
  .r-icon{
    width:44px; height:44px; border-radius:10px; flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
  }
  .r-icon svg{ width:22px; height:22px;}
  .r-icon.tint-skylight{ background:var(--tint-skylight); color:var(--accent-skylight);}
  .r-icon.tint-wisteria{ background:var(--tint-wisteria); color:var(--accent-wisteria);}
  .r-icon.tint-sage{ background:var(--tint-sage); color:var(--accent-sage);}
  .r-icon.tint-mulberry{ background:var(--tint-mulberry); color:var(--accent-mulberry);}
  .r-body{ flex:1; min-width:0;}
  .r-label{ font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; margin-bottom:4px;}
  .r-label.tint-skylight{ color:var(--accent-skylight);}
  .r-label.tint-wisteria{ color:var(--accent-wisteria);}
  .r-label.tint-sage{ color:var(--accent-sage);}
  .r-label.tint-mulberry{ color:var(--accent-mulberry);}
  .r-title{ font-weight:700; font-size:15px; color:var(--ink); line-height:1.32;}
  .r-meta{ font-size:13.5px; color:var(--meta-ink); line-height:1.45; margin-top:3px;}
  .r-pending-note{ font-style:italic; color:var(--muted);}
  .r-actions{ flex-shrink:0; display:flex; align-items:center; gap:10px;}
  .r-action{
    display:inline-flex; align-items:center; gap:5px; font-size:13.5px; font-weight:600;
    color:var(--ink); text-decoration:none; background:none; border:none; cursor:pointer;
    font-family:inherit; padding:0; white-space:nowrap;
  }
  .r-action:hover{ text-decoration:underline;}
  .r-action-icon{ width:14px; height:14px; flex-shrink:0;}
  .r-divider{ width:1px; height:16px; background:var(--line); flex-shrink:0;}

  /* ---------- media (video/audio embed) ---------- */
  .media-block{ margin:26px 0; padding:18px 18px 16px; border-radius:var(--radius); background:var(--glacier); color:var(--parchment);}
  .media-block .media-title{ font-weight:700; font-size:15px; margin-bottom:2px; display:flex; align-items:center; gap:8px;}
  .icon-inline{ width:16px; height:16px; flex-shrink:0; vertical-align:-3px;}
  .starred-pill .icon-inline, .starred-note .icon-inline{ color:var(--flag-ink);}
  .media-block .media-sub{ font-size:12.5px; color:rgba(255,255,255,0.8); margin-bottom:12px;}
  .video-embed-wrap{ position:relative; padding-bottom:56.25%; height:0; overflow:hidden; border-radius:9px; background:#0f1a14;}
  .video-embed-wrap iframe{ position:absolute; top:0; left:0; width:100%; height:100%; border:0;}
  .video-fallback{ display:inline-block; margin-top:10px; font-size:12.5px; font-weight:600; color:#DCE7DF;}
  .video-pending{ padding:14px 16px; border:1.5px dashed var(--line); border-radius:var(--radius-sm); color:var(--muted); font-size:14px; margin:16px 0; background:var(--bg-surface);}

  /* ---------- article screen ---------- */
  .article-screen{ max-width:100%; }
  .article-back{ display:inline-flex; align-items:center; gap:6px; font-weight:700; font-size:13.5px; margin-bottom:24px; background:none; border:none; cursor:pointer; color:var(--lvl-deep,var(--evergreen)); font-family:inherit; padding:0; }
  .article-back:hover{ text-decoration:underline; }
  .article-meta{ color:var(--muted); font-size:14px; margin:4px 0 26px 0; }
  .article-attribution{ padding:14px 18px; border:1.5px dashed var(--line); border-radius:var(--radius-sm); color:var(--muted); font-size:13px; margin:26px 0; background:var(--bg-surface); }
  .article-bio{ padding:16px 18px; border-radius:var(--radius-sm); background:var(--tint-sage); font-size:14px; margin-top:22px; }
  .article-refs{ font-size:13.5px; color:var(--muted); padding-left:20px; }
  .article-refs li{ margin-bottom:8px; }

  /* ---------- mission / activity section ---------- */
  .activity-section{
    margin:36px 0 8px; padding:26px 26px 8px; border-radius:var(--radius);
    background:var(--tint-wisteria); border:1px solid rgba(166,146,221,0.22);
  }
  .activity-label{ font-size:11.5px; letter-spacing:.04em; font-weight:700; color:var(--accent-wisteria); margin-bottom:8px;}
  .activity-section .mission-title{ font-size:19px; margin:0 0 12px; color:var(--evergreen);}
  .activity-section .mission-body{ font-size:15px; line-height:1.65; margin-bottom:6px;}
  .activity-section .mission-body p{ margin:0 0 10px;}
  .activity-section .mission-body p:last-child{ margin-bottom:0;}

  .field-block{ margin:22px 0 26px; padding-top:20px; border-top:1px solid rgba(166,146,221,0.25);}
  .activity-section .field-block:first-of-type{ border-top:none; padding-top:2px;}
  .field-label-row{ margin-bottom:9px;}
  .qlabel{ font-size:15.5px; font-weight:600; margin:0; color:var(--ink); line-height:1.4;}
  .field-hint{ font-size:12.5px; color:var(--muted);}
  .field-hint strong{ color:var(--ink); font-weight:700;}
  .field-hint-sep{ color:var(--line); padding:0 2px;}
  textarea{ min-height:110px; resize:vertical; line-height:1.6; background:var(--bg-surface);}
  select.field-select{ width:100%; padding:12px 14px; border-radius:var(--radius-sm); border:1.5px solid var(--line); background:var(--bg-surface); font-size:16px; font-family:inherit;}
  .field-footer{ display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:7px; min-height:16px;}
  .field-save-status{ font-size:12.5px; color:var(--done); text-align:right;}

  .checklist-box{ border:1px solid var(--line); border-radius:12px; padding:6px 16px; background:var(--bg-surface); margin:16px 0;}
  .checklist-item{
    display:flex; align-items:flex-start; gap:10px; padding:9px 0; border-bottom:1px solid var(--line-soft);
    font-size:14.5px; cursor:pointer; user-select:none;
  }
  .checklist-item:last-child{ border-bottom:none;}
  .checklist-item:hover .checklist-check{ border-color:var(--evergreen);}
  .checklist-item:focus-visible{ outline:2px solid var(--harbour); outline-offset:2px; border-radius:6px;}
  .checklist-check{
    width:18px; height:18px; border-radius:5px; border:1.5px solid var(--muted); flex-shrink:0; margin-top:2px;
    display:flex; align-items:center; justify-content:center; transition:background .12s ease, border-color .12s ease;
  }
  .checklist-item.is-checked .checklist-check{ background:var(--done); border-color:var(--done);}
  .checklist-item.is-checked .checklist-check::after{
    content:''; width:4px; height:8px; border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg) translate(-1px,-1px);
  }
  .checklist-item.is-checked{ color:var(--muted);}

  /* ---------- section landing ---------- */
  .section-landing{ max-width:100%;}
  .section-landing h2{ font-size:32px; color:var(--evergreen); margin:0 0 8px;}
  .section-landing .lesson-count{ color:var(--muted); font-size:14px; margin-bottom:24px;}

  /* ---------- fixed bottom lesson navigation bar ---------- */
  .bottom-bar{
    position:fixed; left:var(--rail-w); right:0; bottom:0; z-index:18; display:none;
    background:var(--bg-page); border-top:1px solid var(--line); box-shadow:0 -4px 14px rgba(44,58,50,0.04);
    transition:left .15s ease;
  }
  .bottom-bar.is-visible{ display:flex;}
  .bottom-bar-inner{
    flex:1; display:flex; align-items:center; justify-content:space-between; gap:14px;
    max-width:var(--content-w); margin:0 auto; padding:0 28px; min-width:0; min-height:var(--footer-h); box-sizing:border-box;
  }
  .bottom-bar-status{ display:flex; align-items:center; gap:7px; font-size:12.5px; color:var(--muted); flex-shrink:0; white-space:nowrap;}
  .bottom-bar-status.is-success{ color:var(--done); font-weight:600;}
  .bottom-bar-status.is-error{ color:#9A4A3A; font-weight:600;}
  .bottom-bar .btn{ padding:10px 16px; font-size:13.5px;}
  .nav-btn{ max-width:none; text-align:left; gap:8px; flex-shrink:0;}
  .nav-btn-arrow{ flex-shrink:0;}

  /* ---------- admin ---------- */
  .admin-wrap{ padding:32px 44px; max-width:1000px; height:calc(100vh - var(--topbar-h)); overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;}
  .admin-toolbar{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px; margin-bottom:10px;}
  .admin-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:16px; margin:20px 0 30px;}
  .coach-card{ background:var(--bg-surface); border:1px solid var(--line); border-radius:12px; padding:18px 20px; cursor:pointer; border-top:3px solid var(--harbour);}
  .coach-card:hover{ border-color:var(--harbour); box-shadow:0 6px 18px rgba(44,58,50,0.08);}
  .coach-card h3{ margin:0 0 5px; font-size:17px; color:var(--evergreen);}
  .coach-card .pct{ font-size:13.5px; color:var(--muted);}
  .coach-card .starred-note{ font-size:12.5px; color:var(--flag-ink); font-weight:700; margin-top:6px;}
  .progress-bar{ height:6px; background:#E3DEC9; border-radius:5px; margin-top:9px; overflow:hidden;}
  .progress-bar > div{ height:100%; background:var(--mossbank);}
  .level-card{ background:var(--bg-surface); border:1px solid var(--line); border-radius:12px; padding:18px 20px; cursor:pointer; margin-bottom:12px; border-left:4px solid var(--lvl-accent,var(--harbour));}
  .level-card:hover{ box-shadow:0 6px 18px rgba(44,58,50,0.07);}
  .level-card h3{ margin:0 0 4px; font-size:16.5px; color:var(--lvl-deep,var(--evergreen));}
  .answer-block{ background:var(--bg-surface); border:1px solid var(--line); border-radius:10px; padding:18px 20px; margin-bottom:16px; border-left:4px solid transparent;}
  .answer-block.is-reviewed{ border-left-color:var(--done); background:#F7FBF8;}
  .answer-block.is-flagged{ border-left-color:var(--flag); background:#FFFAEC;}
  .answer-block-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:10px; flex-wrap:wrap;}
  .answer-block h4{ margin:0 0 4px; font-size:16px; color:var(--evergreen);}
  .answer-block .q{ font-size:14px; color:var(--muted); margin:12px 0 5px; font-weight:700;}
  .answer-block .a{ font-size:15.5px; white-space:pre-wrap; margin:0; line-height:1.6;}
  .review-actions{ display:flex; gap:6px; flex-shrink:0;}
  .icon-btn{
    width:34px; height:34px; border-radius:8px; border:1.5px solid var(--line); background:#fff;
    cursor:pointer; font-size:16px; display:flex; align-items:center; justify-content:center;
    color:var(--muted); transition:all .12s ease;
  }
  .icon-btn:hover{ border-color:var(--muted);}
  .icon-btn.tick.on{ background:var(--done); border-color:var(--done); color:#fff;}
  .icon-btn.star.on{ background:var(--flag); border-color:var(--flag); color:var(--flag-ink);}
  .empty-note{ color:var(--muted); font-size:14.5px; padding:22px 0;}
  .back-link{ display:inline-block; margin-bottom:18px; font-size:14px; cursor:pointer; color:var(--evergreen); font-weight:600;}
  .starred-pill{
    display:inline-flex; align-items:center; gap:6px; background:var(--flag); color:var(--flag-ink);
    border:none; border-radius:20px; padding:9px 16px; font-size:13.5px; font-weight:700; cursor:pointer;
  }
  .starred-pill:hover{ filter:brightness(0.96);}
  .loading-line{ padding:40px; color:var(--muted); font-size:14.5px;}

  /* ---------- responsive ---------- */
  @media (max-width: 900px){
    .topbar{ padding:0 12px; gap:8px;}
    .topbar .who{ display:none;}
    .topbar .brand{ font-size:13.5px;}
    .topbar-actions .btn{ padding:8px 12px; font-size:12.5px;}
    .topbar-logo{ height:24px;}
    .topbar-brand-text{ display:none;}
    .topbar-progress{ margin:0 8px; max-width:none;}
    .topbar-progress-pct{ font-size:11px;}
    .coach-menu-name, .coach-menu-chevron{ display:none;}
    .coach-menu-trigger{ padding:2px; gap:0;}
    .rail-toggle{ display:flex;}
    .rail-collapse-btn{ display:none;}
    .course-rail{
      position:fixed; top:var(--topbar-h); left:0; bottom:0; z-index:16; max-height:none; width:300px !important;
      transform:translateX(-100%); transition:transform .18s ease; box-shadow:2px 0 20px rgba(0,0,0,0.12);
      display:block; height:auto; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
      padding-bottom:calc(var(--footer-h) + 24px);
    }
    .rail-sections{ overflow:visible; flex:none;}
    .layout.rail-open .course-rail{ transform:translateX(0);}
    .layout.rail-open .rail-backdrop{ display:block;}
    .lesson-column{ padding:32px 20px 50px;}
    .main-scroll{ max-height:calc(100vh - var(--topbar-h));}
    .nav-btn{ max-width:44%; flex:1 1 auto; overflow:hidden;}
    .nav-btn span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
    .bottom-bar{ left:0;}
    .bottom-bar-inner{ padding:0 14px; gap:8px;}
    .bottom-bar .btn{ font-size:12px; padding:9px 12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
    .bottom-bar-status{ display:none;}
    .lesson-column, .bottom-bar-inner{ max-width:none;}
  }