/* PROMOTE course content styles — shared by student.html and educator.html */
  .curriculum{background:var(--sand); color:var(--ink);}
  .curriculum .wrap{max-width:1400px;}

  .module-tabs{display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-bottom:36px;}
  .module-tab{
    padding:11px 22px; border-radius:999px; border:1.5px solid var(--line);
    background:white; color:var(--navy); font-size:0.95rem; font-weight:600;
    cursor:pointer; font-family:inherit;
  }
  .module-tab.active{background:var(--terracotta); border-color:var(--terracotta); color:white;}
  .module-panel{display:none;}
  .module-panel.active{display:block;}

  /* Path stepper (1 Learn / 2 Watch / 3 Test / 4 Model / 5 Practice) */
  .path-stepper{display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin-bottom:28px;}
  .path-step{
    padding:10px 18px; border-radius:999px; border:1.5px solid var(--line);
    background:white; color:var(--muted); font-size:0.88rem; font-weight:600;
    cursor:pointer; font-family:inherit; display:flex; align-items:center; gap:7px;
  }
  .path-step .step-dot{display:inline-flex; width:19px; height:19px; border-radius:50%; background:var(--sand); color:var(--muted); align-items:center; justify-content:center; font-size:0.7rem; flex-shrink:0;}
  .path-step.active{background:var(--amber-bg,#fbf1de); border-color:var(--amber); color:var(--navy);}
  .path-step.active .step-dot{background:var(--amber); color:white;}
  .path-panel{display:none;}
  .path-panel.active{display:block;}
  .path-panel > .path-intro{color:var(--muted); font-size:1rem; margin-bottom:20px; text-align:center; max-width:640px; margin-left:auto; margin-right:auto;}

  .accordion{max-width:1320px; margin:0 auto; display:flex; flex-direction:column; gap:12px;}
  .acc-item{background:white; border-radius:12px; overflow:hidden; border:1px solid var(--line); box-shadow:var(--shadow);}
  .acc-head{width:100%; text-align:left; background:none; border:none; color:var(--navy); cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:24px 30px; font-size:1.15rem; font-weight:700; font-family:inherit;}
  .acc-head .lesson-num{color:var(--terracotta-dark); font-size:0.8rem; font-weight:700; letter-spacing:0.05em; text-transform:uppercase; display:block; margin-bottom:4px;}
  .acc-head .chev{transition:transform .2s ease; flex-shrink:0; opacity:0.6; color:var(--muted);}
  .acc-item.open .chev{transform:rotate(180deg);}
  .acc-body{max-height:0; overflow:hidden; transition:max-height .3s ease; background:var(--sand);}
  .acc-item.open .acc-body{max-height:30000px;}
  .acc-item.open.settled, .acc-item.open.settled .acc-body{overflow:visible;}
  .subacc.open.settled .subacc-body{overflow:visible;}
  .acc-body-inner{padding:0 30px 32px; color:var(--ink); font-size:1.08rem;}
  .acc-body-inner h4{color:var(--navy); font-size:1.05rem; margin:18px 0 8px;}
  .acc-body-inner h4:first-child{margin-top:4px;}
  .acc-body-inner p{margin:0 0 10px; color:var(--ink);}
  .acc-body-inner ul{margin:0 0 12px; padding-left:20px; color:var(--ink);}
  .acc-body-inner li{margin-bottom:5px;}
  .acc-body-inner ol{margin:0 0 12px; padding-left:22px; color:var(--ink);}
  .acc-body-inner li ul, .acc-body-inner li ol{margin:4px 0 4px; padding-left:18px;}
  .acc-body-inner p b:only-child{color:var(--navy);}
  .acc-body-inner p + ul, .acc-body-inner p + ol{margin-top:-4px;}
  .step-content ul{margin:0 0 10px; padding-left:20px; color:var(--ink); font-size:1.03rem;}
  .step-content li{margin-bottom:6px;}
  .lg-popover ul{margin:6px 0 8px; padding-left:18px; font-size:0.92rem;}
  .lg-popover li{margin-bottom:3px;}
  .pearl{background:rgba(221,120,39,0.1); border-left:3px solid var(--terracotta); padding:12px 14px; border-radius:6px; margin:10px 0; font-size:1rem; color:var(--ink);}

  /* Sub-topic disclosure — keeps a lesson's key points visible at a glance, full detail on tap */
  .subacc{border-top:1px solid var(--line);}
  .subacc:first-of-type{border-top:none; margin-top:2px;}
  .subacc-head{width:100%; display:flex; align-items:center; justify-content:space-between; gap:14px; background:none; border:none; text-align:left; color:var(--navy); font-weight:700; font-size:1.03rem; font-family:inherit; padding:13px 2px; cursor:pointer;}
  .subacc-head:hover{color:var(--terracotta-dark);}
  .subacc-chev{flex-shrink:0; font-size:1.2rem; line-height:1; font-weight:400; color:var(--muted); transition:transform .2s ease, color .2s ease;}
  .subacc.open .subacc-chev{transform:rotate(45deg); color:var(--terracotta-dark);}
  .subacc-body{max-height:0; overflow:hidden; transition:max-height .3s ease;}
  .subacc.open .subacc-body{max-height:8000px;}
  .subacc-body-inner{padding:2px 4px 18px 16px; border-left:2px solid rgba(221,120,39,0.4); margin:0 0 2px 2px;}
  .subacc-body-inner p:first-child{margin-top:0;}
  .subacc-body-inner p:last-child, .subacc-body-inner ul:last-child{margin-bottom:0;}
  .step{display:flex; gap:26px; flex-wrap:wrap; align-items:flex-start; border-bottom:1px solid var(--line); padding:24px 0;}
  .step:last-child{border-bottom:none;}
  .step-content{flex:1 1 320px; min-width:260px;}
  .step .step-title{color:var(--navy); font-weight:700; font-size:1.08rem; margin-bottom:6px;}
  .step .step-title .step-no{display:inline-flex; width:23px; height:23px; border-radius:50%; background:var(--terracotta); color:white; align-items:center; justify-content:center; font-size:0.72rem; margin-right:8px;}
  .step p{margin:0 0 10px; color:var(--ink); font-size:1.03rem;}
  .step .pearl{margin:10px 0 0;}
  .step-photos{display:flex; gap:14px; flex-wrap:wrap; flex:0 0 auto; max-width:100%;}
  .step-photo{width:380px; max-width:100%; height:330px; object-fit:contain; background:white; border-radius:10px; border:1px solid var(--line); padding:6px; cursor:zoom-in; transition:transform .15s ease, box-shadow .15s ease;}
  .step-photo:hover{transform:scale(1.03); box-shadow:0 6px 18px rgba(15,42,61,0.18);}
  @media (max-width:720px){ .step-photo{width:100%; height:auto;} }

  /* Step viewer — one step per screen, left-side outline nav, like the original PROMOTE course */
  .step-viewer{display:flex; align-items:stretch; border:1px solid var(--line); border-radius:14px; overflow:hidden; background:white; box-shadow:var(--shadow); margin-top:8px;}
  .step-viewer-nav{flex:0 0 300px; max-height:680px; overflow-y:auto; background:var(--sand); border-right:1px solid var(--line); padding:14px; display:flex; flex-direction:column; gap:2px;}
  .step-nav-item{display:flex; align-items:center; gap:10px; width:100%; text-align:left; background:none; border:none; padding:10px 12px; border-radius:8px; font-size:0.92rem; font-weight:600; color:var(--muted); cursor:pointer; font-family:inherit;}
  .step-nav-item:hover{background:rgba(221,120,39,0.1); color:var(--navy);}
  .step-nav-item.active{background:var(--terracotta); color:white;}
  .step-nav-no{display:inline-flex; flex-shrink:0; min-width:26px; height:26px; padding:0 5px; border-radius:999px; background:rgba(15,42,61,0.08); color:var(--navy); align-items:center; justify-content:center; font-size:0.72rem; font-weight:700;}
  .step-nav-item.active .step-nav-no{background:rgba(255,255,255,0.28); color:white;}
  .step-viewer-main{flex:1 1 auto; min-width:0; padding:36px 44px;}
  .step-slide{display:none;}
  .step-slide.active{display:block;}
  .step-slide .step-content{margin-bottom:0;}
  .step-slide .step-photos{justify-content:center; margin-bottom:22px;}
  .step-title .step-no{font-size:1.3rem; font-weight:800; color:var(--terracotta-dark); margin-right:2px;}
  .step-viewer-controls{display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:26px; padding-top:20px; border-top:1px solid var(--line);}
  .step-nav-btn{display:inline-flex; align-items:center; gap:6px; padding:10px 20px; border-radius:999px; border:1.5px solid var(--line); background:white; color:var(--navy); font-weight:600; font-size:0.9rem; cursor:pointer; font-family:inherit;}
  .step-nav-btn:hover:not(:disabled){border-color:var(--terracotta); color:var(--terracotta-dark);}
  .step-nav-btn:disabled{opacity:0.35; cursor:not-allowed;}
  .step-counter{color:var(--muted); font-size:0.88rem; font-weight:600;}
  @media (max-width:760px){
    .step-viewer{flex-direction:column;}
    .step-viewer-nav{flex:none; max-height:220px; border-right:none; border-bottom:1px solid var(--line);}
    .step-viewer-main{padding:22px 20px;}
  }

  /* Labeled-graphic hotspot diagrams (Sagittal Section / Blood Supply / Perineum) */
  .lg-block{margin:6px 0 18px;}
  .lg-hint{font-size:0.88rem; color:var(--muted); margin-bottom:10px;}
  .lg-frame{position:relative; max-width:840px; margin:0 auto; border-radius:12px; overflow:visible; background:white; border:1px solid var(--line);}
  .lg-frame img{width:100%; display:block; border-radius:12px;}
  .lg-marker{
    position:absolute; transform:translate(-50%,-50%); width:30px; height:30px; border-radius:50%;
    background:var(--amber,#c98a2c); color:white; border:2px solid white; font-weight:800; font-size:0.85rem;
    cursor:pointer; box-shadow:0 2px 10px rgba(15,42,61,0.35); z-index:2; font-family:inherit;
    display:flex; align-items:center; justify-content:center; padding:0;
  }
  .lg-marker:hover{background:#e0a13d;}
  .lg-marker.active{background:var(--terracotta);}
  .lg-popover{
    position:absolute; width:340px; max-width:80vw; background:white; color:var(--ink,#1c2a33);
    border-radius:10px; padding:14px 16px; box-shadow:0 10px 30px rgba(15,42,61,0.3); z-index:3;
    display:none; font-size:0.94rem; line-height:1.55; left:50%; top:50%; border:1px solid var(--line);
    transform:translate(18px, -50%);
  }
  .lg-popover.open{display:block;}
  .lg-popover.flip-left{transform:translate(calc(-100% - 18px), -50%);}
  .lg-label{position:absolute; z-index:1; font-size:clamp(0.6rem, 1.45vw, 0.82rem); line-height:1.15; color:#222; pointer-events:none; white-space:nowrap; font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; text-shadow:0 0 3px #fff, 0 0 3px #fff;}
  @media (min-width:900px){ .lg-label{font-size:0.82rem;} }
  .lg-popover h5{margin:0 0 6px; color:var(--navy); font-size:1rem;}
  .lg-popover .pop-img{display:block; width:100%; max-height:260px; object-fit:contain; background:white; border:1px solid var(--line); border-radius:8px; margin:4px 0 10px; cursor:zoom-in;}
  .lg-popover p{color:var(--ink); margin:0 0 8px;}
  .lg-popover p:last-child{margin-bottom:0;}
  .lg-popover p strong{color:var(--terracotta-dark);}
  .lg-popover .lg-pearl-tag{display:inline-block; font-size:0.68rem; font-weight:700; text-transform:uppercase; letter-spacing:0.04em; color:var(--terracotta-dark); background:rgba(221,120,39,0.12); padding:2px 8px; border-radius:999px; margin-top:8px;}
  .lg-legend{list-style:none; margin:14px auto 0; padding:0; max-width:840px; display:flex; flex-wrap:wrap; gap:8px 22px;}
  .lg-legend li{display:flex; align-items:center; gap:8px; font-size:0.95rem; color:var(--ink); font-weight:600;}
  .lg-legend .lg-legend-no{flex:0 0 auto; width:24px; height:24px; border-radius:50%; background:var(--amber,#c98a2c); color:white; font-weight:800; font-size:0.8rem; display:flex; align-items:center; justify-content:center;}

  .lightbox{position:fixed; inset:0; background:rgba(15,42,61,0.9); display:none; align-items:center; justify-content:center; z-index:999; padding:32px; cursor:zoom-out;}
  .lightbox.open{display:flex;}
  .lightbox img{max-width:min(88vw,700px); max-height:82vh; object-fit:contain; border-radius:12px; background:white; box-shadow:0 20px 60px rgba(0,0,0,0.45);}
  .lightbox .lightbox-caption{position:absolute; bottom:28px; left:0; right:0; text-align:center; color:#fff; font-size:0.9rem; opacity:0.85;}
  .lightbox .lightbox-close{position:absolute; top:24px; right:28px; color:#fff; font-size:1.6rem; line-height:1; cursor:pointer; background:none; border:none; padding:6px;}

  /* Video grids (procedure + model-setup videos) */
  .video-grid{display:grid; grid-template-columns:1fr 1fr; gap:24px; max-width:1160px; margin:0 auto;}
  .video-card{border:1px solid var(--line); border-radius:12px; overflow:hidden; background:white; box-shadow:var(--shadow);}
  .video-card .frame-wrap{position:relative; padding-top:56.25%; background:#0c1e2a;}
  .video-card iframe{position:absolute; top:0; left:0; width:100%; height:100%; border:0;}
  .video-card .meta{padding:14px 16px;}
  .video-card .meta h4{font-size:1rem; margin-bottom:2px; color:var(--navy);}
  .video-card .meta span{font-size:0.85rem; color:var(--muted);}
  .video-single{max-width:640px; margin:0 auto;}
  .video-single-grid{grid-template-columns:1fr; max-width:640px;}
  .practice-card .video-grid{margin:14px auto 18px; text-align:left;}
  .practice-card .video-card .meta h4{font-size:1rem; margin-bottom:2px;}
  .yt-facade{position:absolute; inset:0; width:100%; height:100%; border:0; padding:0; margin:0; background-size:cover; background-position:center; cursor:pointer; display:flex; align-items:center; justify-content:center; font-family:inherit;}
  .yt-facade::after{content:""; position:absolute; inset:0; background:rgba(15,42,61,0.18); transition:background 0.15s ease;}
  .yt-facade:hover::after{background:rgba(15,42,61,0.06);}
  .yt-play-icon{position:relative; z-index:1; width:60px; height:60px; border-radius:50%; background:rgba(15,42,61,0.85); color:white; display:flex; align-items:center; justify-content:center; font-size:1.2rem; padding-left:4px; transition:transform 0.15s ease, background 0.15s ease;}
  .yt-facade:hover .yt-play-icon{background:var(--terracotta); transform:scale(1.08);}
  .yt-caption{position:absolute; z-index:1; left:0; right:0; bottom:0; padding:10px 14px 9px; font-size:0.85rem; font-weight:600; color:white; text-align:left; background:linear-gradient(transparent, rgba(12,30,42,0.75));}
  /* Custom (non-clinical) poster thumbnails for procedure videos */
  .yt-poster{background:radial-gradient(ellipse at 18% 22%, rgba(47,143,138,0.32), transparent 55%), radial-gradient(ellipse at 88% 100%, rgba(221,120,39,0.28), transparent 50%), linear-gradient(135deg, var(--navy-2), #0c1e2a 65%);}
  .yt-poster::after{background:transparent;}
  .yt-poster .poster-rings{position:absolute; right:-9%; top:-28%; width:72%; aspect-ratio:1; border-radius:50%; border:1px solid rgba(247,237,224,0.10); pointer-events:none;}
  .yt-poster .poster-rings::before, .yt-poster .poster-rings::after{content:""; position:absolute; inset:14%; border-radius:50%; border:1px solid rgba(247,237,224,0.10);}
  .yt-poster .poster-rings::after{inset:30%; border-color:rgba(247,237,224,0.08);}
  .yt-poster .poster-text{position:absolute; left:22px; top:20px; right:22px; text-align:left; z-index:1; pointer-events:none;}
  .yt-poster .poster-brand{display:flex; align-items:center; gap:8px; color:var(--cream); font-size:0.7rem; letter-spacing:0.16em; text-transform:uppercase; opacity:0.85; margin-bottom:12px;}
  .yt-poster .poster-brand .mark{width:20px; height:20px; border-radius:5px; background:linear-gradient(135deg, var(--terracotta), var(--terracotta-dark)); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
  .yt-poster .poster-brand .mark svg{display:block;}
  .yt-poster .poster-eyebrow{display:block; color:#8fd6d0; font-size:0.78rem; font-weight:600; letter-spacing:0.04em; margin-bottom:4px;}
  .yt-poster .poster-title{display:block; font-family:Fraunces, Georgia, 'Times New Roman', serif; font-weight:800; font-size:clamp(1.35rem, 3.2vw, 1.9rem); line-height:1.1; color:var(--cream); max-width:80%;}
  .yt-poster .poster-rule{display:block; width:44px; height:3px; border-radius:2px; background:var(--terracotta); margin-top:12px;}
  .yt-poster .yt-play-icon{margin-top:38px; background:rgba(247,237,224,0.14); border:1.5px solid rgba(247,237,224,0.55); backdrop-filter:blur(3px);}
  .yt-poster .yt-caption{background:none; font-weight:500; opacity:0.75; font-size:0.78rem; text-align:right;}
  .yt-poster:hover .poster-title{color:#fff;}
  @media (max-width:720px){ .video-grid{grid-template-columns:1fr;} }

  /* Quiz */
  .quiz-shell{max-width:960px; margin:0 auto;}
  .quiz-meta-bar{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px; margin-bottom:18px; color:var(--muted); font-size:0.9rem;}
  .quiz-meta-bar .pass-note{color:var(--teal-dark); font-weight:700;}
  .quiz-q{background:white; border:1px solid var(--line); border-radius:12px; padding:20px 22px; margin-bottom:14px; box-shadow:var(--shadow);}
  .quiz-qtext{color:var(--navy); font-weight:700; font-size:1.05rem; margin-bottom:12px;}
  .quiz-opts{display:flex; flex-direction:column; gap:9px;}
  .quiz-opt{display:flex; align-items:flex-start; gap:10px; font-size:0.98rem; color:var(--ink); cursor:pointer; padding:6px 8px; border-radius:8px;}
  .quiz-opt:hover{background:var(--sand);}
  .quiz-opt input{margin-top:3px;}
  .quiz-submit{margin-top:8px;}
  .quiz-banner{border-radius:12px; padding:22px 24px; margin-top:20px; text-align:center;}
  .quiz-banner.pass{background:rgba(47,143,138,0.12); border:1px solid var(--teal);}
  .quiz-banner.fail{background:rgba(201,138,44,0.12); border:1px solid var(--amber);}
  .quiz-banner h4{color:var(--navy); font-size:1.2rem; margin-bottom:8px;}
  .quiz-banner p{color:var(--ink); font-size:1rem; margin-bottom:14px;}
  .confirm-card{max-width:420px; margin:20px auto 0; padding:26px 30px; border:2px solid var(--navy); border-radius:12px; background:white; text-align:center;}
  .confirm-card-label{font-size:0.72rem; text-transform:uppercase; letter-spacing:0.08em; color:var(--terracotta-dark); font-weight:700; margin-bottom:10px;}
  .confirm-card h3{color:var(--navy); font-size:1.3rem; margin-bottom:14px;}
  .confirm-line{color:var(--ink); font-size:0.95rem; margin-bottom:6px;}
  .confirm-note{color:var(--muted); font-size:0.82rem; margin:14px 0 16px; font-style:italic;}
  @media print{
    body.print-confirm *{visibility:hidden;}
    body.print-confirm .confirm-card, body.print-confirm .confirm-card *{visibility:visible;}
    body.print-confirm .confirm-card{position:fixed; top:40px; left:50%; transform:translateX(-50%); border-width:2px; box-shadow:none;}
    .no-print{display:none !important;}
  }
  .quiz-qimg{display:block; max-width:220px; width:100%; height:auto; border:1px solid var(--line); border-radius:8px; margin:0 0 14px; background:white;}
  .quiz-opts.quiz-opts-grid{flex-direction:row; flex-wrap:wrap; gap:14px;}
  .quiz-opt-imgcard{flex-direction:column; align-items:center; text-align:center; flex:0 0 auto; width:150px; border:1px solid var(--line); padding:10px;}
  .quiz-opt-imgcard input{margin:0 0 8px;}
  .quiz-opt-imgcard img{width:100%; height:110px; object-fit:contain; background:white; border-radius:6px;}
  .quiz-opt-imgcard:hover{background:var(--sand);}
  .quiz-opt-caption{margin-top:8px; font-size:0.88rem; color:var(--ink); font-weight:600;}

  .practice-card{max-width:820px; margin:0 auto; background:white; border:1px solid var(--line); border-radius:14px; padding:40px 44px; text-align:center; box-shadow:var(--shadow);}
  .practice-card h4{color:var(--navy); font-size:1.15rem; margin-bottom:10px;}
  .practice-card p{color:var(--ink); font-size:1rem; margin-bottom:8px; line-height:1.6;}
  .practice-card ul{text-align:left; color:var(--ink); font-size:0.98rem; max-width:420px; margin:14px auto 0; padding-left:20px; line-height:1.7;}

  .coming-soon{
    text-align:center; padding:48px 24px; color:var(--muted); background:white;
    border-radius:12px; border:1px dashed var(--line);
  }
  .coming-soon h4{color:var(--navy); margin-bottom:8px;}

  /* Auth gate */

  /* Educator answer key (quiz) */
  .quiz-educator-note{background:var(--amber-bg,#fbf1de); border:1px solid var(--amber); color:var(--navy); border-radius:10px; padding:12px 16px; font-size:0.92rem; margin-bottom:16px;}
  .quiz-opt-correct{background:#eaf6ee; border:1px solid #bfe3c8;}
  .quiz-key{display:inline-block; margin-left:auto; font-size:0.72rem; font-weight:700; text-transform:uppercase; letter-spacing:0.04em; color:#1f7a3a; background:#d7f0dd; padding:2px 8px; border-radius:999px; white-space:nowrap;}
  .quiz-opt-imgcard .quiz-key{position:absolute; top:8px; right:8px; margin:0;}
  .quiz-opt-imgcard{position:relative;}