/* =====================================================================
   Zahle Urban Observatory — Training Platform
   Design identity: "Field Atlas" — cartographic survey aesthetic.
   Contour lines, topographic palette, survey-marker structural devices.
   ---------------------------------------------------------------------
   Palette (named):
     --ink        #16261f  deep cartographic ink (near-black green)
     --paper      #f3efe4  aged survey paper
     --paper-2    #e8e1cf  paper shadow
     --moss       #3a6b52  Bekaa valley green (primary)
     --moss-deep  #234534
     --clay       #c2683f  contour/terracotta accent (used sparingly)
     --sky        #4a7a96  water/elevation blue
     --line       #c9bfa6  hairline survey grid
   Type:
     Display : "Fraunces" (optical serif — survey title plate character)
     Body    : "Inter"   (clean utility legibility)
     Mono    : "Space Mono" (coordinates, labels, data markers)
   ===================================================================== */

:root {
  --ink:#16261f; --ink-soft:#3c4a42;
  --paper:#f3efe4; --paper-2:#e8e1cf; --paper-3:#fbf9f3;
  --moss:#3a6b52; --moss-deep:#234534; --moss-tint:#e3ece4;
  --clay:#c2683f; --clay-tint:#f0dccf;
  --gold:#b08d3e; --gold-l:#c9a85a;
  --sky:#4a7a96; --sky-tint:#dde7ec;
  --line:#c9bfa6; --line-soft:#ddd4bf;
  --danger:#a23b2c; --ok:#3a6b52;

  --shadow-sm:0 1px 2px rgba(22,38,31,.06), 0 2px 8px rgba(22,38,31,.05);
  --shadow-md:0 4px 14px rgba(22,38,31,.10), 0 12px 32px rgba(22,38,31,.08);
  --shadow-lg:0 18px 50px rgba(22,38,31,.18);

  --r-sm:8px; --r-md:14px; --r-lg:22px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);

  --maxw:1140px;
  --font-display:"Plus Jakarta Sans","Inter",system-ui,sans-serif;
  --font-body:"Plus Jakarta Sans","Inter",system-ui,-apple-system,sans-serif;
  --font-mono:"Space Mono","SF Mono",ui-monospace,monospace;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

html{scroll-behavior:smooth}
body{overflow-x:hidden}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}

body{
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--paper);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  min-height:100vh;
}

/* Topographic contour backdrop — the signature atmosphere ----------- */
.topo-bg{position:fixed;inset:0;z-index:-1;overflow:hidden;background:var(--paper)}
.topo-bg svg{position:absolute;width:140%;height:140%;top:-20%;left:-20%;opacity:.45}
.topo-bg::after{ /* subtle paper grain vignette */
  content:"";position:absolute;inset:0;
  background:radial-gradient(120% 90% at 80% -10%, rgba(74,122,150,.10), transparent 60%),
             radial-gradient(90% 80% at -10% 110%, rgba(58,107,82,.12), transparent 55%);
}

/* Typography ------------------------------------------------------- */
h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;line-height:1.12;letter-spacing:-.01em;color:var(--ink)}
.eyebrow{
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--moss);font-weight:700;
}
.coord{font-family:var(--font-mono);font-size:.74rem;letter-spacing:.04em;color:var(--ink-soft)}

/* Buttons ---------------------------------------------------------- */
.btn{
  --bg:var(--moss);--fg:#fff;
  font-family:var(--font-body);font-weight:600;font-size:.95rem;
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  padding:.8rem 1.4rem;border:none;border-radius:var(--r-sm);
  background:var(--bg);color:var(--fg);cursor:pointer;
  transition:transform .18s var(--ease),box-shadow .25s var(--ease),background .2s;
  box-shadow:var(--shadow-sm);text-decoration:none;white-space:nowrap;
}
.btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.btn:active{transform:translateY(0)}
.btn:focus-visible{outline:3px solid var(--sky);outline-offset:2px}
.btn--ghost{--bg:transparent;--fg:var(--ink);border:1.5px solid var(--line);box-shadow:none}
.btn--ghost:hover{--bg:var(--paper-3);border-color:var(--moss)}
.btn--clay{--bg:var(--clay)}
.btn--block{width:100%}
.btn--lg{padding:1rem 1.7rem;font-size:1.02rem}
.btn-sm{padding:.45rem .8rem;font-size:.82rem;border-radius:7px}
.btn[disabled]{opacity:.55;cursor:not-allowed;transform:none;box-shadow:none}

/* Forms ------------------------------------------------------------ */
.field{margin-bottom:1.15rem;position:relative}
.field label{display:block;font-weight:600;font-size:.86rem;margin-bottom:.4rem;color:var(--ink-soft)}
.field .req{color:var(--clay)}
.input,select.input{
  width:100%;font-family:var(--font-body);font-size:1rem;color:var(--ink);
  padding:.85rem 1rem;border:1.5px solid var(--line);border-radius:var(--r-sm);
  background:var(--paper-3);transition:border-color .2s,box-shadow .2s,background .2s;
}
.input::placeholder{color:#a59e8a}
.input:focus{outline:none;border-color:var(--moss);box-shadow:0 0 0 4px var(--moss-tint);background:#fff}
.input--err{border-color:var(--danger)!important;box-shadow:0 0 0 4px var(--clay-tint)!important}
.field-msg{font-size:.78rem;margin-top:.35rem;min-height:1rem;color:var(--danger)}
.hint{font-size:.8rem;color:var(--ink-soft);margin-top:.3rem}

/* Password strength meter */
.pw-meter{height:5px;border-radius:99px;background:var(--paper-2);margin-top:.55rem;overflow:hidden}
.pw-meter>span{display:block;height:100%;width:0;border-radius:99px;transition:width .3s var(--ease),background .3s}

/* Cards ------------------------------------------------------------ */
.card{
  background:var(--paper-3);border:1px solid var(--line-soft);
  border-radius:var(--r-md);box-shadow:var(--shadow-sm);
}

/* Auth layout ------------------------------------------------------ */
.auth-wrap{min-height:100vh;display:grid;grid-template-columns:1.05fr .95fr}
@media(max-width:880px){.auth-wrap{grid-template-columns:1fr}}
.auth-aside{
  position:relative;padding:3rem;display:flex;flex-direction:column;
  justify-content:space-between;color:#fff;overflow:hidden;
  background:linear-gradient(155deg,var(--moss-deep),var(--moss) 65%, #2f5a44);
}
@media(max-width:880px){.auth-aside{display:none}}
.auth-aside .brand-mark{display:flex;align-items:center;gap:.7rem;font-family:var(--font-mono);
  letter-spacing:.14em;font-size:.78rem;text-transform:uppercase;opacity:.92}
.auth-aside .brand-mark img{height:34px;width:auto;display:block}
.auth-aside h1{color:#fff;font-size:clamp(2rem,3.6vw,3.1rem);margin:1.2rem 0 .8rem;max-width:14ch}
.auth-aside p{color:rgba(255,255,255,.82);max-width:38ch;font-size:1.02rem}
.auth-aside .aside-foot{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.05em;color:rgba(255,255,255,.62)}
.aside-contours{position:absolute;inset:0;opacity:.22;mix-blend-mode:soft-light}
.aside-stat{display:flex;gap:1.8rem;margin-top:1.6rem}
.aside-stat b{font-family:var(--font-display);font-size:1.7rem;display:block;line-height:1}
.aside-stat span{font-size:.78rem;color:rgba(255,255,255,.7)}

.auth-main{display:flex;align-items:center;justify-content:center;padding:2.5rem 1.5rem}
.auth-card{width:100%;max-width:430px;animation:rise .6s var(--ease-out) both}
.auth-card .mobile-brand{display:none}
@media(max-width:880px){.auth-card .mobile-brand{display:flex;align-items:center;gap:.6rem;margin-bottom:1.5rem;
  font-family:var(--font-mono);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--moss)}}
.auth-card .mobile-brand img{height:30px;width:auto;display:block}
.auth-card h2{font-size:1.85rem;margin-bottom:.35rem}
.auth-card .sub{color:var(--ink-soft);margin-bottom:1.8rem}
.switch-line{margin-top:1.4rem;font-size:.92rem;color:var(--ink-soft);text-align:center}
.switch-line a{color:var(--moss);font-weight:600;text-decoration:none}
.switch-line a:hover{text-decoration:underline}

.form-row{display:grid;grid-template-columns:1fr 1fr;gap:.9rem}
@media(max-width:520px){.form-row{grid-template-columns:1fr}}

/* Alert ------------------------------------------------------------ */
.alert{padding:.9rem 1.1rem;border-radius:var(--r-sm);font-size:.9rem;margin-bottom:1.2rem;
  display:flex;gap:.6rem;align-items:flex-start;animation:rise .4s var(--ease-out) both}
.alert svg{flex-shrink:0;margin-top:1px}
.alert--err{background:var(--clay-tint);color:#7d2c1c;border:1px solid #e3b9a5}
.alert--ok{background:var(--moss-tint);color:var(--moss-deep);border:1px solid #b9d3c2}
.alert--info{background:var(--sky-tint);color:#2a4d5f;border:1px solid #b3cdd9}

/* App shell -------------------------------------------------------- */
.app-header{
  position:sticky;top:0;z-index:50;background:rgba(243,239,228,.82);
  backdrop-filter:saturate(140%) blur(12px);border-bottom:1px solid var(--line-soft);
}
.app-header .inner{max-width:var(--maxw);margin:0 auto;padding:.85rem 1.5rem;
  display:flex;align-items:center;justify-content:space-between;gap:1rem}
.brand{display:flex;align-items:center;gap:.65rem;text-decoration:none;color:var(--ink)}
.brand .brand-logo{height:30px;width:auto;display:block}
.brand .brand-tag{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-soft);padding:.2rem .5rem;border:1px solid var(--line-soft);border-radius:6px;white-space:nowrap}
@media(max-width:560px){.brand .brand-tag{display:none}.brand .brand-logo{height:26px}}
.brand .glyph{width:34px;height:34px;border-radius:9px;background:var(--moss);
  display:grid;place-items:center;color:#fff;box-shadow:var(--shadow-sm)}
.brand b{font-family:var(--font-display);font-size:1.05rem;letter-spacing:-.01em}
.brand small{display:block;font-family:var(--font-mono);font-size:.62rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--moss);margin-top:1px}
.usermenu{display:flex;align-items:center;gap:.9rem}
.avatar{width:38px;height:38px;border-radius:50%;background:linear-gradient(145deg,var(--moss),var(--sky));
  color:#fff;display:grid;place-items:center;font-weight:700;font-size:.9rem;cursor:pointer;
  box-shadow:var(--shadow-sm);border:2px solid #fff}
.usermenu .who{text-align:right;line-height:1.2}
.usermenu .who b{font-size:.9rem}
.usermenu .who span{font-size:.72rem;color:var(--ink-soft)}
@media(max-width:600px){.usermenu .who{display:none}}

.container{max-width:var(--maxw);margin:0 auto;padding:2.2rem 1.5rem 4rem}

/* Dashboard hero --------------------------------------------------- */
.hero{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:1.5rem;margin-bottom:2.2rem}
.hero h2{font-size:clamp(1.8rem,3.2vw,2.6rem);margin:.3rem 0}
.hero .greet-coord{margin-top:.5rem}

/* Progress ring + stats */
.stat-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;min-width:330px}
@media(max-width:560px){.stat-strip{grid-template-columns:1fr;min-width:0;width:100%}}
.stat{background:var(--paper-3);border:1px solid var(--line-soft);border-radius:var(--r-md);
  padding:1rem 1.15rem;box-shadow:var(--shadow-sm);position:relative;overflow:hidden}
.stat .k{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft)}
.stat .v{font-family:var(--font-display);font-size:1.9rem;line-height:1;margin-top:.35rem}
.stat .v small{font-size:.9rem;color:var(--ink-soft)}
.stat::after{content:"";position:absolute;right:-12px;bottom:-12px;width:54px;height:54px;
  border-radius:50%;background:var(--moss-tint);opacity:.6}

/* Module grid ------------------------------------------------------ */
.section-head{display:flex;align-items:center;gap:1rem;margin:2.4rem 0 1.3rem}
.section-head h3{font-size:1.4rem}
.section-head .rule{flex:1;height:1px;background:repeating-linear-gradient(90deg,var(--line) 0 6px,transparent 6px 12px)}

.modules{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:1.4rem}
.module-card{position:relative;display:flex;flex-direction:column;background:var(--paper-3);
  border:1px solid var(--line-soft);border-radius:var(--r-lg);overflow:hidden;
  box-shadow:var(--shadow-sm);transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s;
  cursor:pointer;min-height:240px}
.module-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg);border-color:var(--moss)}
.module-card:focus-visible{outline:3px solid var(--sky);outline-offset:3px}
.module-card .mc-top{padding:1.4rem 1.4rem 1rem;position:relative;overflow:hidden;
  background:linear-gradient(150deg,var(--moss-deep),var(--moss));color:#fff;min-height:118px}
.module-card .mc-top .num{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.18em;opacity:.85}
.module-card .mc-top h4{color:#fff;font-size:1.22rem;margin-top:.5rem;max-width:22ch}
.module-card .mc-top .contour{position:absolute;right:-30px;top:-30px;width:150px;height:150px;opacity:.25}
.module-card.locked .mc-top{background:linear-gradient(150deg,#4a4a44,#6c6a5e)}
.mc-body{padding:1.1rem 1.4rem 1.4rem;display:flex;flex-direction:column;gap:.9rem;flex:1}
.mc-body p{font-size:.9rem;color:var(--ink-soft);flex:1}
.mc-meta{display:flex;align-items:center;gap:1rem;font-family:var(--font-mono);font-size:.72rem;color:var(--ink-soft)}
.mc-meta .dot{width:4px;height:4px;border-radius:50%;background:var(--line)}
.badge{font-family:var(--font-mono);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;
  padding:.28rem .55rem;border-radius:99px;font-weight:700}
.badge--restricted{background:var(--clay-tint);color:#7d2c1c}
.badge--public{background:var(--sky-tint);color:#2a4d5f}
.badge--done{background:var(--moss-tint);color:var(--moss-deep)}

/* progress bar */
.pbar{height:7px;border-radius:99px;background:var(--paper-2);overflow:hidden}
.pbar>span{display:block;height:100%;background:linear-gradient(90deg,var(--moss),var(--sky));
  border-radius:99px;transition:width .8s var(--ease-out)}
.pbar-row{display:flex;align-items:center;gap:.7rem}
.pbar-row .pct{font-family:var(--font-mono);font-size:.74rem;color:var(--moss);font-weight:700;min-width:34px;text-align:right}

.lock-chip{position:absolute;top:1rem;right:1rem;background:rgba(255,255,255,.16);
  backdrop-filter:blur(4px);border-radius:99px;padding:.3rem .6rem;display:flex;align-items:center;
  gap:.3rem;font-family:var(--font-mono);font-size:.62rem;letter-spacing:.08em;color:#fff}

/* ---- Skeleton loading -------------------------------------------- */
.skel{position:relative;overflow:hidden;background:var(--paper-2);border-radius:var(--r-sm)}
.skel::after{content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);
  animation:shimmer 1.4s infinite}
@keyframes shimmer{100%{transform:translateX(100%)}}
.skel-card{border-radius:var(--r-lg);height:240px;border:1px solid var(--line-soft)}
.skel-line{height:12px;margin:.5rem 0;border-radius:6px}
.skel-stat{height:88px;border-radius:var(--r-md)}

/* ---- Lesson / module detail -------------------------------------- */
.detail-grid{display:grid;grid-template-columns:300px minmax(0,1fr);gap:2rem;align-items:start}
@media(max-width:900px){.detail-grid{grid-template-columns:minmax(0,1fr)}}
.lesson-list{position:sticky;top:84px;background:var(--paper-3);border:1px solid var(--line-soft);
  border-radius:var(--r-md);overflow:hidden;box-shadow:var(--shadow-sm)}
@media(max-width:900px){.lesson-list{position:static}}
.lesson-list .ll-head{padding:1.1rem 1.2rem;border-bottom:1px solid var(--line-soft);background:var(--moss-tint)}
.lesson-list .ll-head .eyebrow{color:var(--moss-deep)}
.ll-item{display:flex;gap:.75rem;align-items:flex-start;padding:.9rem 1.2rem;cursor:pointer;
  border-bottom:1px solid var(--line-soft);transition:background .2s;border-left:3px solid transparent;position:relative}
.ll-item:last-child{border-bottom:none}
.ll-item:hover{background:var(--paper)}
.ll-item.active{background:linear-gradient(90deg,rgba(58,107,82,.10),rgba(74,122,150,.04) 60%,transparent);border-left-color:transparent}
.ll-item.active::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(180deg,var(--moss),var(--sky) 55%,var(--clay))}
.ll-item.active .ll-t{color:var(--moss-deep)}
.ll-item .tick{width:22px;height:22px;border-radius:50%;border:2px solid var(--line);flex-shrink:0;
  display:grid;place-items:center;margin-top:1px;transition:all .25s var(--ease);background:#fff}
.ll-item.done .tick{background:var(--moss);border-color:var(--moss);color:#fff}
.ll-item .ll-t{font-size:.9rem;font-weight:600;line-height:1.3}
.ll-item .ll-d{font-family:var(--font-mono);font-size:.68rem;color:var(--ink-soft);margin-top:.15rem}

.lesson-stage{min-width:0;min-height:300px;background:#ffffff;border:1px solid var(--line-soft);
  border-radius:var(--r-lg);padding:1.8rem;box-shadow:var(--shadow-sm);overflow:hidden}
@media(max-width:560px){.lesson-stage{padding:1.2rem}}
.video-frame{position:relative;width:100%;aspect-ratio:16/9;background:var(--ink);border-radius:var(--r-md);
  overflow:hidden;box-shadow:var(--shadow-md)}
.video-frame iframe,.video-frame video{position:absolute;inset:0;width:100%;height:100%;border:none}
.lesson-body{margin-top:1.6rem;font-size:1.02rem;line-height:1.7;color:var(--ink-soft)}
.lesson-body h1,.lesson-body h2,.lesson-body h3{color:var(--ink);margin:1.4rem 0 .6rem}
.lesson-body blockquote{border-left:3px solid var(--moss);padding:.4rem 0 .4rem 1rem;
  margin:1.2rem 0;color:var(--ink);font-style:italic;background:var(--moss-tint);border-radius:0 8px 8px 0}
.lesson-body table{width:100%;border-collapse:collapse;margin:1.2rem 0;font-size:.94rem}
.lesson-body th{text-align:left;padding:.65rem .8rem;border:1px solid var(--line);background:var(--moss-tint);color:var(--ink)}
.lesson-body td{padding:.65rem .8rem;border:1px solid var(--line)}
.lesson-body tbody tr:nth-child(even){background:var(--paper)}

/* Slides viewer (embedded PDF deck) */
.slides-frame{position:relative;width:100%;aspect-ratio:16/10;min-height:520px;background:var(--ink);
  border-radius:var(--r-md);overflow:hidden;box-shadow:var(--shadow-md)}
@media(max-width:900px){.slides-frame{min-height:60vw;aspect-ratio:16/11}}
.slides-frame iframe,.slides-frame embed,.slides-frame object{position:absolute;inset:0;width:100%;height:100%;border:none}
.slides-bar{display:flex;align-items:center;gap:.6rem;margin-top:.7rem;font-family:var(--font-mono);font-size:.74rem;color:var(--ink-soft)}
/* Narration audio player docked under the slides */
.narration-bar{display:flex;align-items:center;gap:.9rem;margin-top:1rem;padding:.7rem 1rem;
  background:var(--moss-tint);border:1px solid var(--line-soft);border-radius:var(--r-md)}
.narration-label{display:flex;align-items:center;gap:.45rem;font-family:var(--font-mono);font-size:.74rem;
  font-weight:600;color:var(--moss-deep);white-space:nowrap}
.narration-bar audio{height:38px}
/* When a lesson is a slide deck, widen the overall container for comfortable
   reading, but keep the sidebar a FIXED width so its contents (e.g. the
   certificate button) are never clipped — only the stage column grows. */
.detail-grid.slides-mode{grid-template-columns:300px minmax(0,1fr)}
body.wide-reading .container{max-width:1340px;transition:max-width .25s ease}
.lesson-body p{margin-bottom:1rem}
.lesson-body ul,.lesson-body ol{margin:0 0 1rem 1.4rem}
.lesson-body li{margin-bottom:.4rem}

.attach{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.4rem}
.attach a{display:flex;align-items:center;gap:.55rem;padding:.6rem .9rem;background:var(--paper-3);
  border:1px solid var(--line-soft);border-radius:var(--r-sm);text-decoration:none;color:var(--ink);
  font-size:.86rem;font-weight:600;transition:all .2s;box-shadow:var(--shadow-sm)}
.attach a:hover{border-color:var(--moss);transform:translateY(-2px)}

.lesson-actions{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  margin-top:2rem;padding-top:1.6rem;border-top:1px dashed var(--line)}

/* Quiz ------------------------------------------------------------- */
.quiz-q{background:var(--paper-3);border:1px solid var(--line-soft);border-radius:var(--r-md);
  padding:1.4rem;margin-bottom:1.2rem;box-shadow:var(--shadow-sm);animation:rise .4s var(--ease-out) both}
.quiz-q .qnum{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.12em;color:var(--moss);text-transform:uppercase}
.quiz-q h4{font-size:1.1rem;margin:.4rem 0 1rem}
.opt{display:flex;align-items:center;gap:.75rem;padding:.8rem 1rem;border:1.5px solid var(--line);
  border-radius:var(--r-sm);margin-bottom:.6rem;cursor:pointer;transition:all .18s;background:#fff}
.opt:hover{border-color:var(--moss);background:var(--paper)}
.opt input{accent-color:var(--moss);width:18px;height:18px;cursor:pointer}
.opt.sel{border-color:var(--moss);background:var(--moss-tint)}

.result-card{text-align:center;padding:2.4rem;animation:rise .5s var(--ease-out) both}
.result-ring{width:140px;height:140px;margin:0 auto 1.2rem}
.result-card h3{font-size:1.8rem;margin-bottom:.4rem}

/* Toast ------------------------------------------------------------ */
.toast-wrap{position:fixed;bottom:1.5rem;left:50%;transform:translateX(-50%);z-index:500;
  display:flex;flex-direction:column;gap:.6rem;align-items:center}
.toast{background:var(--ink);color:#fff;padding:.8rem 1.3rem;border-radius:99px;font-size:.9rem;
  box-shadow:var(--shadow-lg);display:flex;align-items:center;gap:.6rem;animation:toastIn .4s var(--ease-out) both}
.toast--ok{background:var(--moss-deep)}
.toast--err{background:var(--danger)}

/* Empty state ------------------------------------------------------ */
.empty{text-align:center;padding:4rem 1.5rem;color:var(--ink-soft)}
.empty svg{opacity:.4;margin-bottom:1rem}

/* Animations ------------------------------------------------------- */
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@keyframes toastIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@keyframes spin{to{transform:rotate(360deg)}}
.spinner{width:18px;height:18px;border:2.5px solid rgba(255,255,255,.4);border-top-color:#fff;
  border-radius:50%;animation:spin .7s linear infinite}
.stagger>*{opacity:0;animation:rise .5s var(--ease-out) forwards}
.stagger>*:nth-child(1){animation-delay:.04s}
.stagger>*:nth-child(2){animation-delay:.10s}
.stagger>*:nth-child(3){animation-delay:.16s}
.stagger>*:nth-child(4){animation-delay:.22s}
.stagger>*:nth-child(5){animation-delay:.28s}
.stagger>*:nth-child(6){animation-delay:.34s}

.hidden{display:none!important}
.fade-in{animation:rise .5s var(--ease-out) both}

/* =====================================================================
   Custom modal / alert / confirm  (replaces native alert & confirm)
   ===================================================================== */
.modal-overlay{position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;
  padding:1.5rem;background:rgba(22,38,31,.42);backdrop-filter:blur(3px);
  opacity:0;animation:overlayIn .25s var(--ease-out) forwards}
@keyframes overlayIn{to{opacity:1}}
.modal-overlay.closing{animation:overlayOut .2s var(--ease) forwards}
@keyframes overlayOut{to{opacity:0}}

.modal{background:#fff;border-radius:var(--r-lg);box-shadow:var(--shadow-lg);
  width:100%;max-width:440px;overflow:hidden;transform:translateY(12px) scale(.97);
  animation:modalIn .32s var(--ease-out) forwards;border:1px solid var(--line-soft)}
@keyframes modalIn{to{transform:translateY(0) scale(1)}}
.modal-overlay.closing .modal{animation:modalOut .2s var(--ease) forwards}
@keyframes modalOut{to{transform:translateY(8px) scale(.98);opacity:0}}
.modal--wide{max-width:680px}

.modal-icon{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;margin:0 auto .2rem}
.modal-icon--info{background:var(--sky-tint);color:var(--sky)}
.modal-icon--ok{background:var(--moss-tint);color:var(--moss)}
.modal-icon--warn{background:var(--clay-tint);color:var(--clay)}
.modal-icon--danger{background:#f6dcd6;color:var(--danger)}

.modal-head{padding:1.8rem 1.8rem .4rem;text-align:center}
.modal-head h3{font-size:1.3rem;margin-top:.7rem}
.modal-body{padding:.6rem 1.8rem 1.4rem;text-align:center;color:var(--ink-soft);font-size:.96rem;line-height:1.6}
.modal-body.left{text-align:left}
.modal-foot{display:flex;gap:.7rem;padding:1.2rem 1.8rem 1.8rem;justify-content:center}
.modal-foot .btn{min-width:110px}
@media(max-width:480px){.modal-foot{flex-direction:column-reverse}.modal-foot .btn{width:100%}}

/* Form modal (CMS create/edit) — left aligned, scrollable, fixed footer */
.modal-form{max-width:760px;text-align:left;display:flex;flex-direction:column;max-height:90vh}
.modal-form.modal--wide{max-width:880px}
.modal-form .modal-head{text-align:left;padding:1.3rem 1.8rem;display:flex;align-items:center;
  justify-content:space-between;border-bottom:1px solid var(--line-soft);flex:0 0 auto}
.modal-form .modal-head h3{margin:0;font-size:1.2rem}
.modal-form .modal-scroll{flex:1 1 auto;overflow-y:auto;padding:1.4rem 1.8rem;min-height:0}
/* Fixed footer that stays pinned at the bottom of the form modal */
.modal-form .modal-foot-fixed{flex:0 0 auto;display:flex;gap:.7rem;justify-content:flex-end;
  align-items:center;padding:1rem 1.8rem;border-top:1px solid var(--line-soft);background:#fff;
  border-radius:0 0 var(--r-lg) var(--r-lg)}
@media(max-width:560px){.modal-form .modal-foot-fixed{flex-wrap:wrap}}
.modal-close{background:none;border:none;cursor:pointer;color:var(--ink-soft);padding:.3rem;
  border-radius:6px;display:grid;place-items:center;transition:background .2s}
.modal-close:hover{background:var(--paper-2)}

/* Rich text editor (WYSIWYG lesson body) */
.rte{border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;background:#fff}
.rte-toolbar{display:flex;flex-wrap:wrap;gap:.15rem;align-items:center;padding:.45rem .5rem;
  background:var(--paper);border-bottom:1px solid var(--line-soft)}
.rte-toolbar button{border:1px solid transparent;background:none;cursor:pointer;padding:.32rem .55rem;
  border-radius:6px;font-size:.84rem;color:var(--ink);min-width:32px}
.rte-toolbar button:hover{background:#fff;border-color:var(--line-soft)}
.rte-sep{width:1px;height:20px;background:var(--line);margin:0 .25rem}
.rte-area{min-height:220px;max-height:46vh;overflow-y:auto;padding:1rem 1.1rem;font-size:1rem;line-height:1.7;color:var(--ink)}
.rte-area:focus{outline:none}
.rte-area h2{font-size:1.4rem;margin:1rem 0 .5rem;color:var(--ink)}
.rte-area h3{font-size:1.15rem;margin:.9rem 0 .4rem;color:var(--ink)}
.rte-area p{margin:.5rem 0}
.rte-area ul,.rte-area ol{margin:.5rem 0 .5rem 1.4rem}
.rte-area blockquote{border-left:3px solid var(--moss);padding:.3rem 0 .3rem .9rem;margin:.8rem 0;
  color:var(--ink);font-style:italic;background:var(--moss-tint);border-radius:0 6px 6px 0}
.rte-area a{color:var(--moss);text-decoration:underline}
.rte-area:empty:before{content:"Start typing the lesson…";color:var(--ink-soft)}
.slides-frame.slides-download{display:grid;place-items:center;aspect-ratio:16/9;min-height:0}

/* ===== Interactive slide player (learner) ===== */
.slidep{width:100%;max-width:100%}
/* The stage is a constant 16:9 box (capped by viewport height). Slides fit
   INSIDE it via contain, so the viewer never changes size between slides and
   a tall slide can never enlarge or overflow it. */
.slidep-stage{position:relative;background:#101413;border-radius:var(--r-md);overflow:hidden;
  width:100%;aspect-ratio:16/9;max-height:74vh;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-md)}
.slidep-img{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;margin:auto;transition:opacity .18s ease}
.slidep-loading{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;z-index:1}
.slidep-spin{width:38px;height:38px;border-radius:50%;border:3px solid rgba(255,255,255,.25);
  border-top-color:#fff;animation:slidepSpin .7s linear infinite}
@keyframes slidepSpin{to{transform:rotate(360deg)}}
.slidep-nav{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;
  border:none;background:rgba(0,0,0,.45);color:#fff;font-size:1.8rem;line-height:1;cursor:pointer;
  display:grid;place-items:center;transition:background .15s;z-index:2}
.slidep-nav:hover{background:rgba(0,0,0,.7)}
.slidep-prev{left:12px}.slidep-next{right:12px}
.slidep-audio-badge{position:absolute;top:10px;right:10px;display:flex;align-items:center;gap:.35rem;
  background:rgba(46,90,62,.92);color:#fff;font-size:.72rem;padding:.25rem .6rem;border-radius:99px;font-family:var(--font-mono);z-index:2}
.slidep-bar{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;margin-top:.8rem}
.slidep-btn{border:1px solid var(--line);background:#fff;cursor:pointer;padding:.5rem .9rem;border-radius:8px;
  font-weight:600;font-size:.86rem;color:var(--ink)}
.slidep-btn:hover{background:var(--paper)}
.slidep-counter{font-family:var(--font-mono);font-size:.85rem;color:var(--ink-soft)}
.slidep-auto{display:flex;align-items:center;gap:.35rem;font-size:.82rem;color:var(--ink-soft);cursor:pointer}
.slidep-auto input{width:16px;height:16px;accent-color:var(--moss)}
.slidep-spacer{margin-left:auto}
.slidep-thumbs{display:flex;gap:.5rem;overflow-x:auto;padding:.8rem 0 .3rem;scroll-snap-type:x proximity}
.slidep-thumb{position:relative;flex:0 0 auto;width:96px;aspect-ratio:16/9;border:none;
  border-radius:7px;overflow:hidden;cursor:pointer;background:#101413;padding:0;scroll-snap-align:center;
  box-shadow:0 0 0 2px transparent;transition:box-shadow .18s ease,transform .18s ease}
.slidep-thumb img{width:100%;height:100%;object-fit:contain;display:block}
.slidep-thumb:hover{transform:translateY(-2px)}
/* Active slide: theme gradient ring + soft glow */
.slidep-thumb.active{transform:translateY(-2px)}
.slidep-thumb.active::after{content:"";position:absolute;inset:0;border-radius:7px;padding:2.5px;
  background:linear-gradient(135deg,var(--moss),var(--sky) 55%,var(--clay));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.slidep-thumb.active{box-shadow:0 4px 14px rgba(58,107,82,.45)}
.slidep-thumb-audio{position:absolute;bottom:4px;right:4px;width:8px;height:8px;border-radius:50%;background:var(--moss)}
.slidep-dl{color:var(--moss);font-weight:600;text-decoration:none;font-family:var(--font-mono);font-size:.74rem}

/* ----- Theater mode (YouTube-style): dim the page, center a big player ----- */
.slidep-theater-backdrop{position:fixed;inset:0;background:rgba(8,12,11,.92);z-index:400;
  display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2vh 2vw;
  opacity:0;animation:theaterBgIn .28s var(--ease-out) forwards}
.slidep-theater-backdrop.closing{animation:theaterBgOut .22s var(--ease) forwards}
.slidep-theater-backdrop .slidep{max-width:min(1600px,96vw);width:100%;
  transform:scale(.94);opacity:0;animation:theaterPlayerIn .32s var(--ease-out) .04s forwards}
.slidep-theater-backdrop.closing .slidep{animation:theaterPlayerOut .2s var(--ease) forwards}
@keyframes theaterBgIn{to{opacity:1}}
@keyframes theaterBgOut{to{opacity:0}}
@keyframes theaterPlayerIn{to{transform:scale(1);opacity:1}}
@keyframes theaterPlayerOut{to{transform:scale(.96);opacity:0}}
.slidep-theater-backdrop .slidep-stage{max-height:82vh}
.slidep-theater-backdrop .slidep-counter,
.slidep-theater-backdrop .slidep-btn,
.slidep-theater-backdrop .slidep-auto{color:#fff}
.slidep-theater-backdrop .slidep-btn{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.25);color:#fff}
.slidep-theater-backdrop .slidep-btn:hover{background:rgba(255,255,255,.2)}
.slidep-theater-close{position:fixed;top:18px;right:22px;z-index:401;background:rgba(255,255,255,.12);
  border:none;color:#fff;width:42px;height:42px;border-radius:50%;font-size:1.4rem;cursor:pointer;display:grid;place-items:center;
  opacity:0;animation:theaterBgIn .3s var(--ease-out) .1s forwards;transition:background .15s}
.slidep-theater-close:hover{background:rgba(255,255,255,.25)}
@media(prefers-reduced-motion:reduce){
  .slidep-theater-backdrop,.slidep-theater-backdrop .slidep,.slidep-theater-close{animation-duration:.01ms}}
@media(max-width:560px){.slidep-auto{margin-left:0}.slidep-nav{width:38px;height:38px;font-size:1.4rem}}

/* Upload progress bar */
.uload{margin-top:.7rem}
.uload-track{height:8px;background:var(--line-soft);border-radius:99px;overflow:hidden}
.uload-fill{height:100%;width:0;background:var(--moss);border-radius:99px;transition:width .2s ease}
.uload-label{font-family:var(--font-mono);font-size:.72rem;color:var(--ink-soft);margin-top:.35rem}
.uload--proc .uload-fill{background:var(--sky);animation:uloadPulse 1s ease-in-out infinite}
.uload--ok .uload-fill{background:var(--moss)}
.uload--err .uload-fill{background:var(--danger)}
@keyframes uloadPulse{0%,100%{opacity:1}50%{opacity:.55}}

/* ===== Certificate panel (learner sidebar) ===== */
.cert-card{display:flex;gap:.7rem;padding:1rem 1.1rem;border-top:2px solid var(--line);
  background:linear-gradient(180deg,rgba(176,141,62,.05),transparent)}
.cert-card--ready{background:linear-gradient(180deg,rgba(47,107,79,.10),rgba(74,122,150,.04))}
.cert-medal{flex-shrink:0;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(145deg,var(--gold,#b08d3e),#c9a85a);color:#fff;box-shadow:0 3px 8px rgba(176,141,62,.35)}
.cert-medal--muted{background:var(--line);color:var(--ink-soft);box-shadow:none}
.cert-body{flex:1;min-width:0}
.cert-title{font-weight:700;font-size:.92rem;color:var(--ink)}
.cert-sub{font-size:.78rem;color:var(--ink-soft);margin:.15rem 0 .6rem;line-height:1.4}
.cert-dl{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;padding:.5rem .9rem;
  font-size:.83rem;max-width:100%;white-space:nowrap}
.cert-dl svg{flex-shrink:0}
.cert-steps{list-style:none;margin:.2rem 0 0;padding:0;display:flex;flex-direction:column;gap:.35rem}
.cert-steps li{position:relative;padding-left:1.4rem;font-size:.8rem;color:var(--ink-soft)}
.cert-steps li::before{content:"";position:absolute;left:0;top:2px;width:14px;height:14px;border-radius:50%;
  border:1.5px solid var(--line)}
.cert-steps li.done{color:var(--moss-deep)}
.cert-steps li.done::before{background:var(--moss);border-color:var(--moss)}
.cert-steps li.done::after{content:"";position:absolute;left:4px;top:5px;width:6px;height:3.5px;
  border-left:1.5px solid #fff;border-bottom:1.5px solid #fff;transform:rotate(-45deg)}

/* ===== Quiz review mode (after passing) ===== */
.quiz-review-banner{display:flex;gap:1.3rem;align-items:center;background:linear-gradient(180deg,rgba(47,107,79,.08),transparent);
  border:1px solid #cfe0d4;border-radius:var(--r-md);padding:1.2rem 1.4rem;margin-bottom:1.4rem}
.quiz-review-banner .qr-ring{flex-shrink:0;width:96px}
.quiz-review-banner .qr-ring svg{width:96px;height:96px}
@media(max-width:560px){.quiz-review-banner{flex-direction:column;text-align:center}}
.opt--review{display:flex;align-items:center;gap:.6rem;padding:.7rem .9rem;border:1px solid var(--line-soft);
  border-radius:9px;margin-bottom:.5rem;background:#fff;color:var(--ink-soft)}
.opt--review .opt-mark{width:18px;height:18px;flex-shrink:0;display:grid;place-items:center;color:transparent}
.opt--correct{border-color:var(--moss);background:var(--moss-tint);color:var(--moss-deep);font-weight:600}
.opt--correct .opt-mark{color:var(--moss)}

/* ===== Account dropdown menu ===== */
.account{position:relative}
.account .avatar{border:none;cursor:pointer;font:inherit}
.account-menu{position:absolute;right:0;top:calc(100% + 8px);min-width:184px;background:#fff;
  border:1px solid var(--line-soft);border-radius:12px;box-shadow:0 12px 30px rgba(20,30,40,.16);
  padding:.4rem;z-index:400;animation:menuIn .14s ease}
@keyframes menuIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.account-item{display:flex;align-items:center;gap:.6rem;width:100%;padding:.6rem .7rem;border:none;
  background:none;border-radius:8px;font:inherit;font-size:.88rem;color:var(--ink);cursor:pointer;text-align:left}
.account-item:hover{background:var(--paper-2)}
.account-item svg{color:var(--ink-soft);flex-shrink:0}

/* ===== Profile editor form ===== */
.pf-form{display:flex;flex-direction:column}
.pf-section{display:flex;flex-direction:column}
.pf-heading{font-weight:700;font-size:.95rem;color:var(--ink);margin-bottom:.5rem}
.pf-label{font-size:.78rem;font-weight:600;color:var(--ink-soft);margin:.55rem 0 .25rem}
.pf-input{padding:.6rem .75rem;border:1px solid var(--line-soft);border-radius:9px;font:inherit;
  font-size:.9rem;background:#fff;color:var(--ink);transition:border-color .15s,box-shadow .15s}
.pf-input:focus{outline:none;border-color:var(--moss);box-shadow:0 0 0 3px rgba(58,107,82,.13)}
.pf-divider{height:1px;background:var(--line-soft);margin:1.3rem 0}
.pf-err{color:var(--clay);font-size:.82rem;margin-top:.5rem;background:var(--clay-tint);
  padding:.5rem .7rem;border-radius:8px}

/* Locked quiz entry (lessons not yet complete) */
.ll-item.locked{opacity:.6;cursor:not-allowed}
.ll-item.locked:hover{background:transparent}

/* Admin preview note on quiz */
.quiz-admin-note{margin-top:.8rem;padding:.9rem 1.1rem;border:1px dashed var(--line);border-radius:10px;
  background:var(--paper-2);color:var(--ink-soft);font-size:.88rem;text-align:center}

/* PDF-as-slides player */
.slidep-canvas{display:block;max-width:100%;max-height:100%;width:auto;height:auto;margin:auto;
  box-shadow:0 6px 24px rgba(0,0,0,.35);background:#fff;border-radius:4px}
.slidep-loading{position:absolute;inset:0;display:grid;place-items:center;color:rgba(255,255,255,.85);
  font-size:.95rem;font-family:var(--font-mono)}
.slidep.slidep--theater{position:fixed;inset:0;z-index:1000;background:rgba(8,12,10,.96);
  margin:0;padding:2vh 2vw;display:flex;flex-direction:column;gap:1rem;border-radius:0}
.slidep.slidep--theater .slidep-stage{flex:1;min-height:0}