/* ==========================================================================
   FURROW — app.css
   The signed-in product: lesson player, assessment, dashboard, auth,
   certificates. Loaded only on those pages.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. PLAYER SHELL
   -------------------------------------------------------------------------- */
:root { --bar-h: 64px; }

.player { min-height: 100vh; background: var(--cream); }

.player-bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 900;
  height: var(--bar-h);
  background: rgba(7, 26, 17, 0.94);
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  color: var(--cream);
  border-bottom: 1px solid rgba(255,255,255,0.10);
}
.player-bar__inner {
  height: 100%;
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  max-width: var(--container-wide);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.player-bar__back {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--fs-xs);
  font-weight: 550;
  color: rgba(239,243,236,0.78);
  flex: none;
  transition: color var(--dur) var(--ease);
}
.player-bar__back:hover { color: var(--cream); }
.player-bar__back svg { transition: transform var(--dur) var(--ease); }
.player-bar__back:hover svg { transform: translateX(-3px); }

.player-bar__title {
  min-width: 0;
  flex: 1;
  display: none;
}
.player-bar__title b {
  display: block;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: -0.012em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.player-bar__title span {
  font-size: 0.7rem;
  color: rgba(239,243,236,0.55);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
@media (min-width: 760px) { .player-bar__title { display: block; } }

.player-bar__right { display: flex; align-items: center; gap: var(--sp-4); flex: none; margin-left: auto; }

.ring { position: relative; width: 40px; height: 40px; flex: none; }
.ring svg { transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 3.5; stroke-linecap: round; }
.ring .ring__track { stroke: rgba(255,255,255,0.16); }
.ring .ring__bar   { stroke: var(--green-300); transition: stroke-dashoffset 700ms var(--ease); }
.ring__label {
  position: absolute; inset: 0;
  display: grid; place-content: center;
  font-size: 0.62rem;
  font-weight: 650;
  letter-spacing: -0.02em;
}
.ring--lg { width: 68px; height: 68px; }
.ring--lg circle { stroke-width: 4; }
.ring--lg .ring__label { font-size: 0.82rem; }
.ring--dark .ring__track { stroke: rgba(10,20,16,0.10); }
.ring--dark .ring__bar { stroke: var(--green-500); }

.player-bar__toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.9rem;
  border-radius: var(--r-pill);
  border: 1px solid rgba(255,255,255,0.2);
  font-size: var(--fs-xs);
  font-weight: 550;
  transition: all var(--dur) var(--ease);
}
.player-bar__toggle:hover { background: rgba(255,255,255,0.1); }
@media (min-width: 1080px) { .player-bar__toggle { display: none; } }

/* --------------------------------------------------------------------------
   2. PLAYER LAYOUT
   -------------------------------------------------------------------------- */
.player-body {
  padding-top: var(--bar-h);
  display: grid;
  align-items: start;
  max-width: var(--container-wide);
  margin-inline: auto;
}
@media (min-width: 1080px) {
  .player-body { grid-template-columns: minmax(0, 1fr) 372px; }
}

.player-main {
  min-width: 0;
  padding: clamp(1.5rem, 1rem + 2vw, 3rem) var(--gutter) var(--sp-11);
  display: grid;
  gap: var(--sp-7);
}

/* --- Stage (video / reading / exercise) --------------------------------- */
.stage {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--forest-950);
  box-shadow: var(--sh-lg);
}
.stage--video { aspect-ratio: 16 / 9; }
.stage__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.55; }
.stage__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(7,26,17,0.35), rgba(7,26,17,0.82)),
    radial-gradient(70% 70% at 50% 45%, rgba(44,112,71,0.30), transparent 70%);
}
.stage__ui {
  position: relative;
  height: 100%;
  display: grid;
  place-content: center;
  gap: var(--sp-4);
  justify-items: center;
  text-align: center;
  color: var(--cream);
  padding: var(--sp-6);
}
.stage__play {
  width: 78px; height: 78px;
  display: grid; place-content: center;
  border-radius: 50%;
  background: rgba(248,245,238,0.94);
  color: var(--forest-900);
  box-shadow: var(--sh-lg);
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease);
}
.stage__play:hover { transform: scale(1.07); }
.stage__note { font-size: var(--fs-xs); color: rgba(239,243,236,0.72); max-width: 34ch; }

/* Fake but honest transport bar — it reads as a player without pretending */
.stage__transport {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  background: linear-gradient(180deg, transparent, rgba(7,26,17,0.85));
  color: var(--cream);
  font-size: var(--fs-xs);
}
.stage__track { flex: 1; height: 3px; border-radius: 2px; background: rgba(255,255,255,0.22); overflow: hidden; }
.stage__track span { display: block; height: 100%; width: 0%; background: var(--wheat); border-radius: 2px; transition: width 300ms linear; }

/* Reading / exercise stage is a document, not a video frame */
.stage--doc {
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: var(--sh-sm);
  padding: clamp(1.5rem, 1rem + 2.5vw, 3.25rem);
}
.prose { max-width: 68ch; display: grid; gap: var(--sp-5); }
.prose p { color: var(--text-muted); line-height: 1.75; }
.prose h3 {
  font-size: var(--fs-h4);
  margin-top: var(--sp-3);
}
.prose ul { display: grid; gap: 0.6rem; }
.prose li { position: relative; padding-left: 1.4rem; color: var(--text-muted); }
.prose li::before {
  content: "";
  position: absolute; left: 0; top: 0.62em;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--sage-400);
}
.prose blockquote {
  border-left: 2px solid var(--green-400);
  padding: 0.2rem 0 0.2rem var(--sp-5);
  font-family: var(--font-display);
  font-size: 1.15rem;
  line-height: 1.5;
  color: var(--text);
}
.callout {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-4);
  padding: var(--sp-5);
  border-radius: var(--r-md);
  background: var(--sage-100);
  border: 1px solid rgba(44,112,71,0.16);
}
.callout__icon { color: var(--green-500); }
.callout h5 { font-size: 1rem; margin-bottom: 0.25rem; }
.callout p { font-size: var(--fs-sm); color: var(--text-muted); }
.callout--clay { background: rgba(176,119,74,0.10); border-color: rgba(176,119,74,0.22); }
.callout--clay .callout__icon { color: var(--clay); }

/* --- Lesson header ------------------------------------------------------ */
.lesson-head { display: grid; gap: var(--sp-4); }
.lesson-head__kicker {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3);
  font-size: var(--fs-xs); color: var(--text-faint);
}
.lesson-head h1 { font-size: clamp(1.6rem, 1.2rem + 1.7vw, 2.5rem); letter-spacing: -0.025em; }
.lesson-head__meta { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

/* --- Tabs --------------------------------------------------------------- */
.tabs { display: grid; gap: var(--sp-5); }
.tabs__list {
  display: flex;
  gap: var(--sp-2);
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs__list::-webkit-scrollbar { display: none; }
.tabs__btn {
  position: relative;
  padding: 0.85rem 0.9rem;
  font-size: var(--fs-sm);
  font-weight: 550;
  color: var(--text-faint);
  white-space: nowrap;
  transition: color var(--dur) var(--ease);
}
.tabs__btn::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--forest-800);
  transform: scaleX(0);
  transition: transform var(--dur) var(--ease);
}
.tabs__btn:hover { color: var(--text); }
.tabs__btn.is-active { color: var(--text); }
.tabs__btn.is-active::after { transform: scaleX(1); }
.tabs__panel[hidden] { display: none; }
.tabs__panel { animation: fadeIn 360ms var(--ease); }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.notes-area { display: grid; gap: var(--sp-3); }
.notes-area .textarea { min-height: 200px; font-size: var(--fs-sm); }
.notes-area__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; }

.res-list { display: grid; gap: var(--sp-3); }
.res-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--sp-4);
  align-items: center;
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--paper);
  transition: all var(--dur) var(--ease);
}
.res-item:hover { border-color: var(--sage-300); box-shadow: var(--sh-sm); transform: translateX(3px); }
.res-item__icon { color: var(--green-500); }
.res-item b { display: block; font-size: var(--fs-sm); font-weight: 600; }
.res-item span { font-size: var(--fs-xs); color: var(--text-faint); }

/* --- Prev / complete / next -------------------------------------------- */
.lesson-nav {
  display: grid;
  gap: var(--sp-4);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--line);
}
@media (min-width: 720px) {
  .lesson-nav { grid-template-columns: 1fr auto 1fr; align-items: center; }
  .lesson-nav__next { justify-self: end; }
}
.lesson-nav__side {
  display: grid;
  gap: 2px;
  padding: 0.6rem 0;
  min-width: 0;
  transition: opacity var(--dur) var(--ease);
}
.lesson-nav__side span {
  font-size: 0.66rem; font-weight: 650; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--text-faint);
}
.lesson-nav__side b {
  font-family: var(--font-display); font-weight: 400; font-size: 1rem;
  letter-spacing: -0.012em;
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}
.lesson-nav__side:hover b { color: var(--green-500); }
.lesson-nav__side.is-disabled { opacity: 0.32; pointer-events: none; }
.lesson-nav__next { text-align: right; }

.btn-complete { --btn-bg: var(--forest-800); }
.btn-complete.is-done { --btn-bg: var(--green-500); }
.btn-complete.is-done::before { background: var(--clay); }

/* --------------------------------------------------------------------------
   3. SYLLABUS SIDEBAR
   -------------------------------------------------------------------------- */
.syllabus {
  background: var(--paper);
  border-left: 1px solid var(--line);
  min-height: calc(100vh - var(--bar-h));
}
@media (min-width: 1080px) {
  .syllabus { position: sticky; top: var(--bar-h); max-height: calc(100vh - var(--bar-h)); overflow-y: auto; }
}
@media (max-width: 1079px) {
  .syllabus {
    position: fixed;
    inset: var(--bar-h) 0 0 auto;
    width: min(380px, 88vw);
    z-index: 880;
    box-shadow: var(--sh-xl);
    transform: translateX(100%);
    transition: transform 420ms var(--ease);
    overflow-y: auto;
  }
  body.is-syllabus-open .syllabus { transform: none; }
  .syllabus__scrim {
    position: fixed; inset: var(--bar-h) 0 0 0;
    background: rgba(7,26,17,0.5);
    z-index: 870;
    opacity: 0; pointer-events: none;
    transition: opacity var(--dur) var(--ease);
  }
  body.is-syllabus-open .syllabus__scrim { opacity: 1; pointer-events: auto; }
}

.syllabus__head {
  position: sticky; top: 0; z-index: 2;
  padding: var(--sp-5);
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  display: grid;
  gap: var(--sp-3);
}
.syllabus__head h2 { font-size: 1.05rem; }
.syllabus__stat { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); font-size: var(--fs-xs); color: var(--text-faint); }

.syl-module { border-bottom: 1px solid var(--line); }
.syl-module__head {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--sp-3);
  align-items: center;
  padding: var(--sp-4) var(--sp-5);
  text-align: left;
  transition: background var(--dur) var(--ease);
}
.syl-module__head:hover { background: var(--cream-200); }
.syl-module__head b {
  display: block;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 0.98rem;
  letter-spacing: -0.012em;
  line-height: 1.3;
}
.syl-module__head span { font-size: 0.7rem; color: var(--text-faint); }
.syl-module__head svg { color: var(--text-faint); transition: transform var(--dur) var(--ease); }
.syl-module.is-open .syl-module__head svg { transform: rotate(180deg); }
.syl-module__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 380ms var(--ease); }
.syl-module.is-open .syl-module__panel { grid-template-rows: 1fr; }
.syl-module__panel > div { overflow: hidden; }
.syl-module__list { padding: 0 var(--sp-3) var(--sp-3); display: grid; gap: 2px; }

.syl-lesson {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--sp-3);
  align-items: center;
  padding: 0.7rem var(--sp-3);
  border-radius: var(--r-sm);
  text-align: left;
  width: 100%;
  transition: background var(--dur) var(--ease);
}
.syl-lesson:hover { background: var(--cream-200); }
.syl-lesson.is-current { background: var(--sage-100); }
.syl-lesson.is-current .syl-lesson__name { font-weight: 600; }
.syl-lesson__tick {
  width: 20px; height: 20px;
  border-radius: 50%;
  border: 1.5px solid var(--line-strong);
  display: grid; place-content: center;
  color: transparent;
  flex: none;
  transition: all var(--dur) var(--ease);
}
.syl-lesson.is-done .syl-lesson__tick { background: var(--green-500); border-color: var(--green-500); color: #fff; }
.syl-lesson.is-done .syl-lesson__name { color: var(--text-faint); }
.syl-lesson__name { font-size: var(--fs-sm); line-height: 1.35; min-width: 0; }
.syl-lesson__dur { font-size: 0.7rem; color: var(--text-faint); flex: none; }

.syllabus__foot { padding: var(--sp-5); display: grid; gap: var(--sp-3); }

/* --------------------------------------------------------------------------
   4. ASSESSMENT
   -------------------------------------------------------------------------- */
.quiz {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--paper);
  box-shadow: var(--sh-sm);
  overflow: hidden;
}
.quiz__head {
  padding: var(--sp-6);
  background: linear-gradient(160deg, var(--forest-900), var(--forest-700));
  color: var(--cream);
  display: grid;
  gap: var(--sp-3);
}
.quiz__head h2 { color: var(--cream); font-size: var(--fs-h4); }
.quiz__head p { font-size: var(--fs-sm); color: var(--on-dark-muted); max-width: 56ch; }
.quiz__facts { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-2); }

.quiz__body { padding: var(--sp-6); display: grid; gap: var(--sp-6); }

.quiz__meter { display: grid; gap: var(--sp-3); }
.quiz__steps { display: flex; gap: 5px; }
.quiz__steps i {
  flex: 1; height: 4px; border-radius: 2px;
  background: var(--sage-100);
  transition: background var(--dur) var(--ease);
}
.quiz__steps i.is-done { background: var(--green-400); }
.quiz__steps i.is-current { background: var(--forest-800); }

.q-text { font-family: var(--font-display); font-size: clamp(1.2rem, 1.05rem + 0.7vw, 1.55rem); line-height: 1.32; letter-spacing: -0.018em; }

.q-options { display: grid; gap: var(--sp-3); }
.q-option {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-4);
  align-items: start;
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  cursor: pointer;
  background: var(--paper);
  transition: all var(--dur) var(--ease);
  font-size: var(--fs-sm);
  text-align: left;
  width: 100%;
}
.q-option:hover { border-color: var(--green-400); background: var(--cream); }
.q-option__key {
  width: 26px; height: 26px;
  display: grid; place-content: center;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  font-size: 0.72rem;
  font-weight: 650;
  color: var(--text-muted);
  flex: none;
  transition: all var(--dur) var(--ease);
}
.q-option.is-selected { border-color: var(--forest-800); background: var(--cream); box-shadow: var(--sh-sm); }
.q-option.is-selected .q-option__key { background: var(--forest-800); border-color: var(--forest-800); color: var(--cream); }
.q-option.is-correct { border-color: var(--green-500); background: rgba(44,112,71,0.07); }
.q-option.is-correct .q-option__key { background: var(--green-500); border-color: var(--green-500); color: #fff; }
.q-option.is-wrong { border-color: var(--clay); background: rgba(176,119,74,0.07); }
.q-option.is-wrong .q-option__key { background: var(--clay); border-color: var(--clay); color: #fff; }
.q-option[disabled] { cursor: default; }

.q-explain {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--r-md);
  background: var(--sage-100);
  font-size: var(--fs-sm);
  color: var(--text-muted);
  animation: fadeIn 340ms var(--ease);
}
.q-explain svg { color: var(--green-500); flex: none; margin-top: 2px; }

.quiz__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; }

/* Result screen */
.result { display: grid; gap: var(--sp-6); justify-items: center; text-align: center; padding: var(--sp-8) var(--sp-5); }
.result__dial { position: relative; width: 168px; height: 168px; }
.result__dial svg { transform: rotate(-90deg); }
.result__dial circle { fill: none; stroke-width: 8; stroke-linecap: round; }
.result__dial .t { stroke: var(--sage-100); }
.result__dial .b { stroke: var(--green-500); transition: stroke-dashoffset 1200ms var(--ease); }
.result--fail .result__dial .b { stroke: var(--clay); }
.result__dial span {
  position: absolute; inset: 0;
  display: grid; place-content: center;
  font-family: var(--font-display);
  font-size: 2.6rem;
  letter-spacing: -0.04em;
}
.result h2 { font-size: var(--fs-display-3); }
.result p { color: var(--text-muted); max-width: 52ch; }
.result__review { width: 100%; display: grid; gap: var(--sp-3); text-align: left; margin-top: var(--sp-3); }
.review-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-4);
  padding: var(--sp-4);
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  font-size: var(--fs-sm);
}
.review-row__mark { width: 22px; height: 22px; border-radius: 50%; display: grid; place-content: center; color: #fff; flex: none; }
.review-row__mark.ok { background: var(--green-500); }
.review-row__mark.no { background: var(--clay); }
.review-row b { display: block; font-weight: 550; margin-bottom: 0.25rem; }
.review-row span { color: var(--text-muted); }

/* --------------------------------------------------------------------------
   5. DASHBOARD
   -------------------------------------------------------------------------- */
.dash-head {
  position: relative;
  padding-top: calc(var(--nav-h) + clamp(2.5rem, 2rem + 3vw, 4.5rem));
  padding-bottom: clamp(2.5rem, 2rem + 3vw, 4rem);
  background: var(--forest-950);
  color: var(--cream);
  overflow: hidden;
  isolation: isolate;
}
.dash-head::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(70% 90% at 12% 0%, rgba(44,112,71,0.42), transparent 62%),
    radial-gradient(60% 80% at 92% 100%, rgba(214,177,96,0.12), transparent 62%);
}
.dash-head__inner { display: grid; gap: var(--sp-6); }
.dash-greet { display: flex; align-items: center; gap: var(--sp-5); flex-wrap: wrap; }
.dash-greet .avatar { box-shadow: 0 0 0 1px rgba(255,255,255,0.18), 0 0 0 7px rgba(255,255,255,0.06); }
.dash-greet h1 { font-size: clamp(1.8rem, 1.3rem + 2.1vw, 2.9rem); color: var(--cream); }
.dash-greet p { font-size: var(--fs-sm); color: var(--on-dark-muted); margin-top: 0.2rem; }

.dash-stats {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
}
.dash-stat {
  padding: var(--sp-5);
  border-radius: var(--r-md);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  display: grid;
  gap: 0.2rem;
}
.dash-stat b { font-family: var(--font-display); font-size: 1.9rem; font-weight: 400; letter-spacing: -0.035em; color: var(--cream); line-height: 1; }
.dash-stat span { font-size: var(--fs-xs); color: var(--on-dark-muted); }

/* Continue card */
.continue {
  display: grid;
  gap: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: var(--sh-lg);
}
@media (min-width: 780px) { .continue { grid-template-columns: 300px 1fr; } }
.continue__media { position: relative; min-height: 200px; overflow: hidden; background: var(--sage-100); }
.continue__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.continue__body { padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); display: grid; gap: var(--sp-4); align-content: center; }
.continue__body h3 { font-size: var(--fs-h4); }
.continue__meta { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.continue__bar { display: grid; gap: 0.5rem; }
.continue__bar small { font-size: var(--fs-xs); color: var(--text-faint); display: flex; justify-content: space-between; }

/* Enrolled course rows */
.enrolled { display: grid; gap: var(--sp-4); }
.enrol-row {
  display: grid;
  grid-template-columns: 74px 1fr;
  gap: var(--sp-5);
  align-items: center;
  padding: var(--sp-4);
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--paper);
  transition: all var(--dur) var(--ease);
}
@media (min-width: 720px) { .enrol-row { grid-template-columns: 96px 1fr auto auto; } }
.enrol-row:hover { box-shadow: var(--sh-md); transform: translateY(-3px); border-color: transparent; }
.enrol-row__img { border-radius: var(--r-sm); overflow: hidden; aspect-ratio: 4/3; background: var(--sage-100); }
.enrol-row__img img { width: 100%; height: 100%; object-fit: cover; }
.enrol-row__body { min-width: 0; display: grid; gap: 0.35rem; }
.enrol-row__body b { font-family: var(--font-display); font-weight: 400; font-size: 1.08rem; letter-spacing: -0.015em; }
.enrol-row__body span { font-size: var(--fs-xs); color: var(--text-faint); }
.enrol-row__bar { height: 4px; border-radius: 2px; background: var(--sage-100); overflow: hidden; margin-top: 0.3rem; max-width: 320px; }
.enrol-row__bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--green-500), var(--green-300)); border-radius: 2px; }

.cert-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--sp-5);
  align-items: center;
  padding: var(--sp-5);
  border-radius: var(--r-md);
  border: 1px solid rgba(214,177,96,0.4);
  background: linear-gradient(140deg, rgba(235,217,168,0.28), rgba(248,245,238,0.6));
}
.cert-row__seal {
  width: 46px; height: 46px;
  border-radius: 50%;
  display: grid; place-content: center;
  background: var(--wheat);
  color: var(--soil);
  flex: none;
}
.cert-row b { display: block; font-family: var(--font-display); font-weight: 400; font-size: 1.08rem; }
.cert-row span { font-size: var(--fs-xs); color: var(--text-muted); }

/* --------------------------------------------------------------------------
   6. AUTH
   -------------------------------------------------------------------------- */
.auth { min-height: 100vh; display: grid; }
@media (min-width: 900px) { .auth { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

.auth__panel {
  position: relative;
  display: none;
  overflow: hidden;
  background: var(--forest-950);
  color: var(--cream);
  isolation: isolate;
}
@media (min-width: 900px) { .auth__panel { display: grid; } }
.auth__panel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.5; z-index: -2; }
.auth__panel::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(200deg, rgba(7,26,17,0.72), rgba(7,26,17,0.94)),
    radial-gradient(70% 60% at 85% 10%, rgba(44,112,71,0.36), transparent 62%);
}
.auth__panel-inner {
  align-self: end;
  padding: clamp(2rem, 1rem + 4vw, 4.5rem);
  display: grid;
  gap: var(--sp-5);
}
.auth__quote { font-family: var(--font-display); font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.2rem); line-height: 1.28; letter-spacing: -0.022em; color: var(--cream); }
.auth__attrib { font-size: var(--fs-sm); color: var(--on-dark-muted); }
.auth__panel-stats { display: flex; flex-wrap: wrap; gap: var(--sp-6); padding-top: var(--sp-5); border-top: 1px solid var(--line-dark); }
.auth__panel-stats div b { display: block; font-family: var(--font-display); font-size: 1.5rem; color: var(--cream); }
.auth__panel-stats div span { font-size: 0.68rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--sage-400); }

.auth__form-wrap {
  display: grid;
  align-content: center;
  padding: clamp(2rem, 1rem + 4vw, 4rem) var(--gutter);
  background: var(--cream);
}
.auth__form { width: 100%; max-width: 25rem; margin-inline: auto; display: grid; gap: var(--sp-5); }
.auth__form h1 { font-size: clamp(1.9rem, 1.4rem + 2vw, 2.6rem); }
.auth__switch { font-size: var(--fs-sm); color: var(--text-muted); }
.auth__switch button { color: var(--green-500); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.auth__divider { display: flex; align-items: center; gap: var(--sp-4); font-size: var(--fs-xs); color: var(--text-faint); }
.auth__divider::before, .auth__divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.auth__legal { font-size: var(--fs-xs); color: var(--text-faint); line-height: 1.6; }
.auth__legal a { text-decoration: underline; text-underline-offset: 2px; }
.auth__demo {
  display: grid;
  gap: var(--sp-2);
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--r-md);
  border: 1px dashed var(--line-strong);
  background: var(--cream-200);
  font-size: var(--fs-xs);
  color: var(--text-muted);
}
.auth__demo b { color: var(--text); }

/* --------------------------------------------------------------------------
   7. CERTIFICATE PAGE
   -------------------------------------------------------------------------- */
.cert-page { padding-top: var(--nav-h); }

.cert-sheet {
  position: relative;
  margin-inline: auto;
  max-width: 940px;
  aspect-ratio: 1.414 / 1;
  background:
    radial-gradient(120% 90% at 50% 0%, #FFFDF8, #F1ECE0);
  border-radius: var(--r-md);
  box-shadow: var(--sh-xl);
  overflow: hidden;
  display: grid;
  place-content: center;
  padding: clamp(1.5rem, 1rem + 3vw, 3.5rem);
  border: 1px solid var(--cream-300);
}
.cert-sheet::before {
  content: "";
  position: absolute;
  inset: 18px;
  border: 1px solid var(--sage-300);
  border-radius: var(--r-sm);
  pointer-events: none;
}
.cert-sheet::after {
  content: "";
  position: absolute;
  inset: 26px;
  border: 3px double rgba(44,112,71,0.22);
  border-radius: 4px;
  pointer-events: none;
}
.cert-sheet__watermark {
  position: absolute;
  left: 50%; top: 52%;
  transform: translate(-50%, -50%);
  font-family: var(--font-display);
  font-size: clamp(7rem, 24vw, 20rem);
  color: rgba(44,112,71,0.045);
  letter-spacing: -0.06em;
  pointer-events: none;
  user-select: none;
}
.cert-sheet__inner { position: relative; display: grid; gap: clamp(0.75rem, 0.4rem + 1vw, 1.4rem); justify-items: center; text-align: center; }
.cert-sheet__crest { color: var(--green-500); }
.cert-sheet__org { font-size: clamp(0.58rem, 0.5rem + 0.2vw, 0.7rem); font-weight: 650; letter-spacing: 0.3em; text-transform: uppercase; color: var(--text-faint); }
.cert-sheet__kicker { font-family: var(--font-display); font-style: italic; font-size: clamp(0.9rem, 0.75rem + 0.6vw, 1.2rem); color: var(--text-muted); }
.cert-sheet__name { font-family: var(--font-display); font-size: clamp(1.6rem, 1rem + 3.6vw, 3.4rem); letter-spacing: -0.03em; line-height: 1.05; }
.cert-sheet__course { font-family: var(--font-display); font-size: clamp(1.05rem, 0.85rem + 1.1vw, 1.6rem); color: var(--forest-700); max-width: 28ch; line-height: 1.25; }
.cert-sheet__body { font-size: clamp(0.72rem, 0.66rem + 0.25vw, 0.88rem); color: var(--text-muted); max-width: 52ch; line-height: 1.6; }
.cert-sheet__rule { width: 74px; height: 1px; background: var(--sage-300); }
.cert-sheet__foot {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--sp-6);
  width: 100%;
  margin-top: clamp(0.5rem, 0.3rem + 1vw, 1.5rem);
  flex-wrap: wrap;
}
.cert-sheet__sig { display: grid; gap: 3px; text-align: left; }
.cert-sheet__sig b { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: clamp(0.9rem, 0.8rem + 0.4vw, 1.1rem); }
.cert-sheet__sig span { font-size: 0.56rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-faint); }
.cert-sheet__stamp {
  width: clamp(66px, 9vw, 96px);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 2px solid var(--wheat);
  color: var(--soil);
  display: grid;
  place-content: center;
  text-align: center;
  font-size: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.4;
  background: rgba(214,177,96,0.16);
  transform: rotate(-8deg);
}

.verify-box {
  max-width: 620px;
  margin-inline: auto;
  padding: clamp(1.75rem, 1.2rem + 2.5vw, 3rem);
  border-radius: var(--r-lg);
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: var(--sh-md);
  display: grid;
  gap: var(--sp-5);
}
.verify-result {
  display: grid;
  gap: var(--sp-3);
  padding: var(--sp-5);
  border-radius: var(--r-md);
  animation: fadeIn 340ms var(--ease);
}
.verify-result--ok { background: rgba(44,112,71,0.09); border: 1px solid rgba(44,112,71,0.28); }
.verify-result--no { background: rgba(176,119,74,0.09); border: 1px solid rgba(176,119,74,0.3); }
.verify-result__head { display: flex; align-items: center; gap: var(--sp-3); font-weight: 600; }
.verify-result--ok .verify-result__head { color: var(--forest-700); }
.verify-result--no .verify-result__head { color: var(--clay); }
.verify-result dl { display: grid; gap: 0.5rem; font-size: var(--fs-sm); }
.verify-result dl > div { display: grid; grid-template-columns: 8.5rem 1fr; gap: var(--sp-3); }
.verify-result dt { color: var(--text-faint); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.08em; padding-top: 2px; }

/* --------------------------------------------------------------------------
   8. EMPTY STATES + PRINT
   -------------------------------------------------------------------------- */
.blank {
  display: grid;
  gap: var(--sp-4);
  justify-items: center;
  text-align: center;
  padding: clamp(3rem, 2rem + 4vw, 5.5rem) var(--sp-5);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-lg);
  background: var(--cream-200);
}
.blank__icon { color: var(--sage-400); }
.blank p { color: var(--text-muted); max-width: 46ch; }

@media print {
  .nav, .footer, .scroll-top, .mobile-menu, .no-print, body::after { display: none !important; }
  body { background: #fff; }
  .cert-page { padding-top: 0; }
  .section { padding-block: 0; }
  .cert-sheet { box-shadow: none; border: 1px solid #ccc; max-width: 100%; }
  @page { size: A4 landscape; margin: 10mm; }
}