/* =====================================================================
   Alldays Creative — warm creative studio aesthetic
   Mobile-first. Breakpoints: 640px (sm) / 900px (md) / 1100px (lg)
   ===================================================================== */

:root {
  --bg: #FBF6F0;
  --bg-deep: #F4EBE1;
  --bg-soft: #F8F1E9;
  --surface: #FFFFFF;
  --surface-2: #FDFAF6;

  --ink: #2E2A26;
  --ink-soft: #574F47;
  --muted: #8A8078;
  --line: #EBE0D4;
  --line-strong: #DCCDBD;

  --clay: #C2704E;
  --clay-600: #A85B3B;
  --clay-50: #F8ECE4;
  --sage: #76896F;
  --sage-50: #EFF2EC;
  --plum: #8A5F76;
  --plum-50: #F4EBF0;
  --sand: #E9DCCB;
  --gold: #C79A45;

  --radius-sm: 10px;
  --radius: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --pill: 999px;

  --shadow-xs: 0 1px 2px rgba(46, 42, 38, .05);
  --shadow-sm: 0 2px 10px rgba(46, 42, 38, .05);
  --shadow: 0 10px 30px rgba(46, 42, 38, .07);
  --shadow-lg: 0 22px 60px rgba(46, 42, 38, .11);

  --font-display: 'Fraunces', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --wrap: 1180px;
  --gutter: 20px;
  --gap-card: 22px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.18;
  color: var(--ink);
  margin: 0 0 .5em;
  letter-spacing: -.01em;
}

h1 { font-size: clamp(1.9rem, 5.2vw, 3.1rem); }
h2 { font-size: clamp(1.45rem, 3.6vw, 2.15rem); }
h3 { font-size: clamp(1.08rem, 2.2vw, 1.28rem); }
h4 { font-size: 1rem; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--clay-600); text-decoration: none; }
a:hover { color: var(--clay); }

img { max-width: 100%; display: block; }
ul, ol { padding-left: 1.15em; }

.icon { flex: none; vertical-align: middle; }

.container { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }

.section { padding: 56px 0; }
.section-tight { padding: 36px 0; }
.section-alt { background: var(--bg-soft); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

.section-head { max-width: 640px; margin-bottom: 30px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.eyebrow {
  display: inline-block;
  font-size: .74rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--clay);
  margin-bottom: 12px;
}
.lead { color: var(--ink-soft); font-size: 1.05rem; }
.muted { color: var(--muted); }
.small { font-size: .86rem; }
.center { text-align: center; }
.nowrap { white-space: nowrap; }

/* ---------------- buttons ---------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 20px;
  border-radius: var(--pill);
  border: 1px solid transparent;
  background: var(--surface);
  color: var(--ink);
  font-family: inherit;
  font-size: .95rem;
  font-weight: 600;
  line-height: 1.1;
  cursor: pointer;
  text-align: center;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:focus-visible { outline: 3px solid rgba(194, 112, 78, .35); outline-offset: 2px; }

.btn-primary { background: var(--clay); color: #fff; box-shadow: 0 8px 20px rgba(194, 112, 78, .25); }
.btn-primary:hover { background: var(--clay-600); color: #fff; }

.btn-secondary { background: var(--ink); color: #fff; }
.btn-secondary:hover { background: #1f1c19; color: #fff; }

.btn-ghost { background: var(--surface); border-color: var(--line-strong); color: var(--ink); }
.btn-ghost:hover { border-color: var(--clay); color: var(--clay-600); }

.btn-soft { background: var(--clay-50); color: var(--clay-600); }
.btn-soft:hover { background: #F3E1D7; color: var(--clay-600); }

.btn-sage { background: var(--sage); color: #fff; }
.btn-sage:hover { background: #657A5F; color: #fff; }

.btn-danger { background: #FBEDEA; color: #A4483A; border-color: #F0D3CC; }
.btn-danger:hover { background: #F7DFDA; color: #8F3B2E; }

.btn-sm { min-height: 40px; padding: 0 15px; font-size: .85rem; }
.btn-lg { min-height: 54px; padding: 0 28px; font-size: 1rem; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: .55; cursor: not-allowed; transform: none; }

.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }
.btn-row.center { justify-content: center; }

/* ---------------- badges / chips ---------------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: var(--pill);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .02em;
  background: var(--bg-deep);
  color: var(--ink-soft);
}
.badge-soft { background: var(--bg-deep); color: var(--ink-soft); }
.badge-clay { background: var(--clay-50); color: var(--clay-600); }
.badge-sage { background: var(--sage-50); color: #5D7157; }
.badge-plum { background: var(--plum-50); color: var(--plum); }
.badge-free { background: var(--sage-50); color: #5D7157; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--pill);
  border: 1px solid var(--line-strong);
  background: var(--surface);
  font-size: .78rem;
  font-weight: 500;
  color: var(--ink-soft);
}
.chip-level { border-color: var(--sand); background: var(--bg-soft); }

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  border-radius: var(--pill);
  font-size: .74rem;
  font-weight: 600;
  background: var(--bg-deep);
  color: var(--ink-soft);
}
.status-active { background: var(--sage-50); color: #5D7157; }
.status-completed { background: var(--sage-50); color: #4F6349; }
.status-submitted { background: var(--clay-50); color: var(--clay-600); }
.status-paused, .status-not_started { background: #F1EDE8; color: var(--muted); }
.status-in_progress { background: #FBF1E2; color: #9A6C22; }
.status-reviewed { background: var(--plum-50); color: var(--plum); }
/* ---------------- cards ---------------- */

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.card-pad { padding: 22px; }
.card-pad-lg { padding: 26px; }
.card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 18px;
}
.card-head h2, .card-head h3 { margin: 0; }
.card-head p { color: var(--muted); font-size: .88rem; margin: 4px 0 0; }

.grid { display: grid; gap: var(--gap-card); }
.grid-2 { grid-template-columns: 1fr; }
.grid-3 { grid-template-columns: 1fr; }
.grid-sidebar { grid-template-columns: 1fr; }
/* Grid/flex children default to min-width:auto, which lets a wide table inside
   a card stretch the whole page on phones — keep every panel shrinkable. */
.grid > *, .stack > *, .stack-sm > *, .stack-lg > * { min-width: 0; }
.stack { display: grid; gap: 20px; }
.stack-lg { display: grid; gap: 32px; }
.stack-sm { display: grid; gap: 12px; }
.row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.row-between { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; }

/* ---------------- header / nav ---------------- */

.site-header, .app-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(251, 246, 240, .9);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--line);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 64px;
}
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); font-weight: 700; }
.brand-mark {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  border-radius: 12px;
  background: linear-gradient(140deg, var(--clay) 0%, #D8916B 100%);
  color: #fff;
}
.brand-text {
  font-family: var(--font-display);
  font-size: 1.02rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 600;
}

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: 12px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
}
.nav-toggle[aria-expanded="true"] { background: var(--bg-deep); }

.site-nav { display: none; }
.site-nav.is-open {
  display: flex;
  position: absolute;
  left: 12px; right: 12px;
  top: calc(100% + 8px);
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  padding: 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
/* On phones the trigger drops its name (the photo alone is the affordance) so
   the header stays brand + language + photo + menu. */
@media (max-width: 899px) {
  .header-actions .profile-trigger { padding: 3px; gap: 0; min-height: 42px; }
  .header-actions .profile-trigger-name,
  .header-actions .profile-trigger-caret { display: none; }
  .profile-panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    left: auto;
    width: min(280px, calc(100vw - 24px));
    z-index: 80;
  }
  .header-inner { position: relative; }
}
.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 12px;
  border-radius: 12px;
  color: var(--ink-soft);
  font-size: .93rem;
  font-weight: 500;
  min-height: 44px;
}
.nav-link:hover { background: var(--bg-soft); color: var(--ink); }
.nav-link.is-active { background: var(--clay-50); color: var(--clay-600); font-weight: 600; }
.nav-account { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* ---------------- profile menu ----------------
   The avatar IS the trigger; Log Out lives inside the panel so nothing can sit
   on top of the photo. <details> keeps it working without JavaScript. */
.profile-menu { position: relative; }
.profile-trigger {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 4px 10px 4px 4px;
  border: 1px solid var(--line);
  border-radius: var(--pill);
  background: var(--surface);
  cursor: pointer;
  list-style: none;
  color: var(--ink);
  font-weight: 600;
  font-size: .9rem;
  transition: border-color .15s ease, background .15s ease;
}
.profile-trigger::-webkit-details-marker { display: none; }
.profile-trigger:hover { border-color: var(--clay); }
.profile-trigger:focus-visible { outline: 3px solid rgba(194, 112, 78, .35); outline-offset: 2px; }
.profile-menu[open] > .profile-trigger { background: var(--bg-soft); border-color: var(--clay); }
.profile-trigger-caret { color: var(--muted); transition: transform .18s ease; }
.profile-menu[open] .profile-trigger-caret { transform: rotate(180deg); }

.profile-panel {
  display: grid;
  gap: 8px;
  margin-top: 10px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow);
}
.profile-panel-head { display: flex; align-items: center; gap: 12px; min-width: 0; }
.profile-panel-id { display: grid; gap: 2px; min-width: 0; }
.profile-panel-id strong { font-size: .92rem; }
.profile-panel-id span { color: var(--muted); font-size: .78rem; overflow-wrap: anywhere; }
.profile-panel-links { display: grid; gap: 2px; }
.profile-panel-link {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 44px;
  padding: 0 12px;
  border-radius: 12px;
  color: var(--ink-soft);
  font-size: .9rem;
  font-weight: 500;
}
.profile-panel-link:hover { background: var(--bg-soft); color: var(--ink); }
.profile-panel-sep { height: 1px; background: var(--line); margin: 2px 0; }
.profile-panel-logout { color: #A4483A; }
.profile-panel-logout:hover { background: #FBEDEA; color: #8F3B2E; }
.avatar-md { width: 40px; height: 40px; font-size: .85rem; }
.nav-cta { width: 100%; }

/* ---------------- hero ---------------- */

.hero { position: relative; overflow: hidden; padding: 44px 0 40px; }
.hero::before, .hero::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: .5;
  pointer-events: none;
}
.hero::before { width: 320px; height: 320px; background: #F3D9C8; top: -90px; right: -80px; }
.hero::after { width: 280px; height: 280px; background: #DCE5D6; bottom: -120px; left: -90px; }
.hero-inner { position: relative; display: grid; gap: 34px; }
.hero h1 { margin-bottom: 16px; }
.hero h1 em { font-style: italic; color: var(--clay-600); }
.hero-lead { font-size: 1.06rem; color: var(--ink-soft); max-width: 46ch; }
.hero-note { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 22px; color: var(--muted); font-size: .86rem; }
.hero-note span { display: inline-flex; align-items: center; gap: 7px; }

.hero-visual { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.hero-visual figure { margin: 0; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); background: var(--surface); }
.hero-visual img { width: 100%; height: 100%; object-fit: cover; }
.hero-visual .hv-tall { grid-row: span 2; }
.hero-visual .hv-tall img { aspect-ratio: 3 / 4; }
.hero-visual figure:not(.hv-tall) img { aspect-ratio: 4 / 3; }

.trust-strip {
  margin-top: 30px;
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(2, 1fr);
  padding: 18px 20px;
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, .7);
  border: 1px solid var(--line);
}
.trust-strip div strong { display: block; font-family: var(--font-display); font-size: 1.3rem; }
.trust-strip div span { color: var(--muted); font-size: .8rem; }

/* ---------------- steps ---------------- */

.steps { display: grid; gap: 18px; }
.step {
  display: grid;
  gap: 12px;
  padding: 24px;
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-xs);
}
.step-num {
  font-family: var(--font-display);
  font-size: 1.6rem;
  color: var(--clay);
  line-height: 1;
}
.step h3 { margin: 0; }
.step p { margin: 0; color: var(--ink-soft); font-size: .93rem; }

/* ---------------- course cards ---------------- */

.course-grid { display: grid; grid-template-columns: 1fr; gap: var(--gap-card); }

.course-card { display: flex; flex-direction: column; overflow: hidden; transition: transform .18s ease, box-shadow .18s ease; }
.course-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.course-cover { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--bg-deep); }
.course-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.course-card:hover .course-cover img { transform: scale(1.04); }
.cover-badge {
  position: absolute;
  left: 12px; bottom: 12px;
  padding: 5px 11px;
  border-radius: var(--pill);
  background: rgba(255, 255, 255, .93);
  color: var(--ink);
  font-size: .72rem;
  font-weight: 600;
}
.course-body { display: flex; flex-direction: column; gap: 12px; padding: 18px; flex: 1; }
.meta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--muted); font-size: .8rem; }
.meta-sep { color: var(--line-strong); }
.meta-muted { color: var(--muted); font-size: .82rem; }
.course-title { margin: 0; font-size: 1.08rem; }
.course-title a { color: var(--ink); }
.course-desc { margin: 0; color: var(--ink-soft); font-size: .9rem; }
.course-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 6px; }
.price { font-weight: 700; color: var(--ink); }
.rating { display: inline-flex; align-items: center; gap: 5px; color: var(--gold); font-weight: 600; font-size: .88rem; }
.card-progress { display: grid; gap: 7px; }
.card-progress-head { display: flex; justify-content: space-between; font-size: .78rem; color: var(--muted); }
.card-progress-head strong { color: var(--clay-600); }

/* ---------------- progress bar ---------------- */

.progress { height: 8px; border-radius: var(--pill); background: var(--bg-deep); overflow: hidden; }
.progress-fill { display: block; height: 100%; border-radius: var(--pill); background: linear-gradient(90deg, var(--clay) 0%, #D99A73 100%); transition: width .4s ease; }
.progress-lg { height: 12px; }
.progress-sage .progress-fill { background: linear-gradient(90deg, var(--sage), #9BB292); }

/* ---------------- forms ---------------- */

.form-grid { display: grid; gap: 18px; grid-template-columns: 1fr; }
.field { display: grid; gap: 7px; }
.field > label { font-weight: 600; font-size: .88rem; }
.field .help { color: var(--muted); font-size: .8rem; }
.input, .textarea, .select {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  font-family: inherit;
  font-size: .95rem;
  line-height: 1.5;
}
.textarea { min-height: 120px; resize: vertical; }
.select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 19px) 21px, calc(100% - 13px) 21px; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; padding-right: 38px; }
.input:focus, .textarea:focus, .select:focus { outline: none; border-color: var(--clay); box-shadow: 0 0 0 4px rgba(194, 112, 78, .14); }
.input::placeholder, .textarea::placeholder { color: #B3A89E; }
.field-error { color: #A4483A; font-size: .82rem; }
.form-footer { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin-top: 22px; }

.checkbox-row { display: flex; align-items: flex-start; gap: 10px; font-size: .9rem; }
.checkbox-row input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--clay); flex: none; }

/* selectable chips (workbook) */
.chip-group { display: flex; flex-wrap: wrap; gap: 10px; }
.chip-option input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip-option { position: relative; }
.chip-option span {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 18px;
  border-radius: var(--pill);
  border: 1px solid var(--line-strong);
  background: var(--surface);
  font-size: .9rem;
  font-weight: 500;
  cursor: pointer;
  transition: all .15s ease;
}
.chip-option input:checked + span { background: var(--clay); border-color: var(--clay); color: #fff; }
.chip-option input:focus-visible + span { outline: 3px solid rgba(194, 112, 78, .3); outline-offset: 2px; }

.segmented { display: flex; flex-wrap: wrap; gap: 8px; }
.segmented .chip-option span { min-width: 96px; justify-content: center; }

/* ---------------- flash ---------------- */

.flash-stack { display: grid; gap: 10px; margin-bottom: 18px; }
.flash {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 16px;
  border-radius: var(--radius);
  font-size: .9rem;
  font-weight: 500;
  background: var(--sage-50);
  color: #4F6349;
  border: 1px solid #DDE5D8;
}
.flash-error { background: #FBEDEA; color: #A4483A; border-color: #F0D3CC; }
.flash-info { background: var(--bg-deep); color: var(--ink-soft); border-color: var(--line); }

/* ---------------- explore page ---------------- */

.page-head { padding: 36px 0 8px; }
.filter-bar { display: grid; gap: 14px; padding: 18px; }
.filter-row { display: grid; gap: 12px; }
.search-wrap { position: relative; display: flex; align-items: center; }
.search-wrap .icon { position: absolute; left: 14px; color: var(--muted); }
.search-wrap .input { padding-left: 42px; }
.cat-tabs { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; margin: 0 -4px; }
.cat-tabs a {
  flex: none;
  padding: 9px 16px;
  border-radius: var(--pill);
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink-soft);
  font-size: .85rem;
  font-weight: 500;
  white-space: nowrap;
}
.cat-tabs a.is-active { background: var(--ink); border-color: var(--ink); color: #fff; }
.results-bar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin: 22px 0 18px; }
/* category introduction, shown when one catalog category is selected */
.cat-intro { display: grid; gap: 6px; margin: 0 0 20px; padding: 16px 18px; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--line); color: var(--ink-soft); font-size: .92rem; max-width: 78ch; }
.cat-intro .eyebrow { margin: 0; }

/* ---------------- course detail ---------------- */

.breadcrumb { display: flex; align-items: center; gap: 8px; font-size: .84rem; color: var(--muted); padding: 20px 0 6px; }
.course-hero { display: grid; gap: 28px; padding: 18px 0 8px; }
.course-hero-cover { border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow); border: 1px solid var(--line); }
.course-hero-cover img { aspect-ratio: 16 / 10; width: 100%; object-fit: cover; }
.course-hero h1 { margin-bottom: 12px; }
.course-summary { color: var(--ink-soft); font-size: 1.02rem; }
.fact-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0; }
.fact {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--line);
  font-size: .84rem;
  color: var(--ink-soft);
}
.enroll-card { display: grid; gap: 16px; }
.enroll-price { display: flex; align-items: baseline; gap: 10px; }
.enroll-price strong { font-family: var(--font-display); font-size: 2rem; }
.enroll-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; font-size: .9rem; color: var(--ink-soft); }
.enroll-list li { display: flex; gap: 9px; align-items: flex-start; }
.enroll-list .icon { color: var(--sage); margin-top: 3px; }

.check-list { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.check-list li { display: flex; gap: 11px; align-items: flex-start; color: var(--ink-soft); }
.check-list .icon { color: var(--sage); margin-top: 4px; flex: none; }

.inside-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.inside-item { padding: 16px; border-radius: var(--radius); background: var(--bg-soft); border: 1px solid var(--line); }
.inside-item strong { display: block; font-family: var(--font-display); font-size: 1.3rem; }
.inside-item span { color: var(--muted); font-size: .82rem; }

.curriculum { display: grid; gap: 10px; }
.curriculum details {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
}
.curriculum summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 16px;
  cursor: pointer;
  font-weight: 600;
  list-style: none;
  min-height: 52px;
}
.curriculum summary::-webkit-details-marker { display: none; }
.curriculum summary .mod-index {
  display: grid; place-items: center;
  width: 30px; height: 30px;
  border-radius: 10px;
  background: var(--clay-50);
  color: var(--clay-600);
  font-size: .8rem;
  flex: none;
}
.curriculum summary .mod-title { flex: 1; font-size: .96rem; }
.curriculum summary .mod-count { color: var(--muted); font-size: .78rem; font-weight: 500; }
.curriculum details[open] summary { border-bottom: 1px solid var(--line); }
.curriculum ul { margin: 0; padding: 8px 8px 12px; list-style: none; display: grid; gap: 4px; }

.lesson-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 12px;
  border-radius: 12px;
  color: var(--ink-soft);
  font-size: .9rem;
  min-height: 46px;
}
.lesson-item:hover { background: var(--bg-soft); }
.lesson-item .li-icon { flex: none; color: var(--muted); display: grid; place-items: center; width: 22px; }
.lesson-item .li-title { flex: 1; }
.lesson-item .li-dur { color: var(--muted); font-size: .78rem; }
.lesson-item.is-done .li-icon { color: var(--sage); }
.lesson-item.is-done .li-title { color: var(--muted); }
.lesson-item.is-current { background: var(--clay-50); color: var(--clay-600); font-weight: 600; }
.lesson-item.is-current .li-icon { color: var(--clay); }
.lesson-item.is-locked { opacity: .62; }
.lesson-item.is-locked .li-title { color: var(--muted); }

/* ---------------- auth ---------------- */

.auth-wrap { display: grid; gap: 26px; padding: 34px 0 56px; }
.auth-card { max-width: 460px; width: 100%; margin: 0 auto; padding: 26px; }
.auth-head { text-align: center; margin-bottom: 22px; }
.auth-head h1 { font-size: clamp(1.5rem, 4vw, 2rem); margin-bottom: 6px; }
.auth-aside { max-width: 460px; margin: 0 auto; }
.demo-box { margin-top: 18px; padding: 16px; border-radius: var(--radius); background: var(--bg-soft); border: 1px dashed var(--line-strong); font-size: .85rem; }
.demo-box dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 10px 0 0; }
.demo-box dt { color: var(--muted); }
.demo-box dd { margin: 0; font-weight: 600; }

/* ---------------- student dashboard ---------------- */

.dash-greeting { display: grid; gap: 6px; }
.dash-greeting h1 { margin: 0; }
.dash-greeting p { margin: 0; color: var(--ink-soft); }

.continue-card { display: grid; gap: 0; overflow: hidden; }
.continue-cover { position: relative; }
.continue-cover img { aspect-ratio: 16 / 9; width: 100%; object-fit: cover; }
.continue-body { display: grid; gap: 14px; padding: 22px; }
.continue-body h3 { margin: 0; }
.continue-meta { display: flex; flex-wrap: wrap; gap: 10px 18px; color: var(--muted); font-size: .84rem; }
.progress-head { display: flex; justify-content: space-between; align-items: baseline; font-size: .84rem; color: var(--muted); }
.progress-head strong { color: var(--clay-600); font-size: 1.05rem; }

.saved-scroll { display: grid; gap: 16px; }

/* ---------------- course player ---------------- */

.player-shell { display: grid; gap: 20px; padding: 18px 0 48px; }
.player-main { display: grid; gap: 20px; min-width: 0; }
.player-topbar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; }
.player-topbar .course-name { font-weight: 600; font-size: .92rem; }
.player-topbar .lesson-count { color: var(--muted); font-size: .82rem; }

.video-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: radial-gradient(120% 120% at 20% 10%, #4A3E37 0%, #2C2521 55%, #221D19 100%);
  display: grid;
  place-items: center;
  text-align: center;
  color: #F6EEE7;
  box-shadow: var(--shadow);
}
.video-frame .vf-inner { display: grid; gap: 12px; place-items: center; padding: 22px; }
.video-frame .vf-play {
  display: grid; place-items: center;
  width: 66px; height: 66px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .35);
  color: #fff;
  backdrop-filter: blur(6px);
}
.video-frame .vf-title { font-family: var(--font-display); font-size: clamp(1rem, 2.6vw, 1.35rem); max-width: 30ch; }
.video-frame .vf-note { font-size: .78rem; color: rgba(246, 238, 231, .72); max-width: 42ch; }
.video-frame .vf-chip {
  position: absolute;
  top: 14px; left: 14px;
  padding: 5px 11px;
  border-radius: var(--pill);
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .24);
  font-size: .72rem;
}

.lesson-header h2 { margin-bottom: 8px; }
.lesson-block { display: grid; gap: 12px; }
.lesson-block h3 { margin: 0; font-size: 1.02rem; }
.lesson-text p:last-child { margin-bottom: 0; }

.player-nav { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: center; }
.player-nav .btn { flex: 1 1 180px; }

.curriculum-panel { border-radius: var(--radius-lg); }
.drawer-toggle { width: 100%; }
.curriculum-inner { display: none; padding: 0 16px 18px; }
.curriculum-inner.is-open { display: block; }
.curriculum-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 16px 12px; }
.curriculum-head strong { font-family: var(--font-display); font-size: 1rem; }

.resource-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.resource-tab {
  padding: 9px 15px;
  border-radius: var(--pill);
  border: 1px solid var(--line-strong);
  background: var(--surface);
  font-size: .85rem;
  font-weight: 500;
  color: var(--ink-soft);
}
.resource-tab.is-active { background: var(--ink); border-color: var(--ink); color: #fff; }

/* workbook */
.workbook-saved { display: inline-flex; align-items: center; gap: 6px; color: var(--sage); font-size: .8rem; font-weight: 600; }
.workbook-form { display: grid; gap: 20px; }

/* assignment */
.assignment-instructions { white-space: pre-line; color: var(--ink-soft); font-size: .93rem; }
.upload-zone {
  display: grid;
  gap: 10px;
  place-items: center;
  padding: 26px 18px;
  border-radius: var(--radius-lg);
  border: 1.5px dashed var(--line-strong);
  background: var(--bg-soft);
  text-align: center;
  color: var(--muted);
  font-size: .88rem;
}
.upload-zone strong { display: block; color: var(--ink); }
.upload-zone input[type="file"] { max-width: 100%; font-size: .84rem; }
.submission-preview { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); }
.submission-preview img { width: 100%; max-height: 420px; object-fit: cover; }
.submission-body { padding: 14px 16px; background: var(--surface); }

.status-track { display: flex; flex-wrap: wrap; gap: 8px; }
.status-step {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border-radius: var(--pill);
  background: var(--bg-deep);
  color: var(--muted);
  font-size: .76rem;
  font-weight: 600;
}
.status-step.is-done { background: var(--sage-50); color: #4F6349; }
.status-step.is-current { background: var(--clay); color: #fff; }

/* ---------------- my learning ---------------- */

.tabs { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; }
.tabs a {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: var(--pill);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  color: var(--ink-soft);
  font-size: .88rem;
  font-weight: 500;
}
.tabs a.is-active { background: var(--clay); border-color: var(--clay); color: #fff; }
.tab-count { background: rgba(0, 0, 0, .08); border-radius: var(--pill); padding: 1px 8px; font-size: .74rem; }

.list-card { display: flex; flex-direction: column; gap: 16px; overflow: hidden; }
.list-cover { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.list-body { display: grid; gap: 12px; padding: 0 18px 18px; }

/* ---------------- profile ---------------- */

.profile-head { display: grid; gap: 20px; }
.profile-avatar { width: 92px; height: 92px; border-radius: 26px; object-fit: cover; border: 1px solid var(--line); }
.avatar { border-radius: 50%; object-fit: cover; display: grid; place-items: center; background: var(--clay-50); color: var(--clay-600); font-weight: 700; }
.avatar-sm { width: 36px; height: 36px; font-size: .8rem; }
.avatar-lg { width: 84px; height: 84px; font-size: 1.4rem; }
.avatar-initials { background: linear-gradient(140deg, var(--clay-50), var(--sand)); }
.stat-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.stat {
  padding: 16px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--line);
  /* column layout + min-width:0 so a longer label wraps instead of widening its
     own block, which keeps every number and label on the same baseline */
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.stat strong { display: block; font-family: var(--font-display); font-size: 1.5rem; line-height: 1.15; }
.stat span { color: var(--muted); font-size: .8rem; line-height: 1.35; }

/* ---------------- admin ---------------- */

.admin-shell { display: grid; grid-template-columns: 1fr; min-height: 100vh; background: var(--bg); }
.admin-sidebar {
  position: fixed;
  z-index: 80;
  inset: 0 auto 0 0;
  width: 264px;
  padding: 20px 16px;
  background: var(--surface);
  border-right: 1px solid var(--line);
  transform: translateX(-102%);
  transition: transform .22s ease;
  overflow-y: auto;
}
.admin-sidebar.is-open { transform: translateX(0); }
.admin-brand { display: grid; gap: 6px; margin-bottom: 22px; }
.admin-tag { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.admin-nav { display: grid; gap: 4px; }
.admin-link {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 12px;
  border-radius: 12px;
  color: var(--ink-soft);
  font-size: .9rem;
  font-weight: 500;
  min-height: 44px;
}
.admin-link:hover { background: var(--bg-soft); color: var(--ink); }
.admin-link.is-active { background: var(--clay-50); color: var(--clay-600); font-weight: 600; }
.admin-nav-sep { height: 1px; background: var(--line); margin: 10px 4px; }
/* A labelled group in the admin sidebar (e.g. "Landing Page" above Hero Visuals and
   Story Media). Kept quiet: the studio's eye should still land on the page names. */
.admin-nav-group {
  margin: 12px 4px 2px;
  color: var(--muted);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.admin-scrim { position: fixed; inset: 0; background: rgba(46, 42, 38, .35); z-index: 70; display: none; }
.admin-scrim.is-open { display: block; }

.admin-main { min-width: 0; display: flex; flex-direction: column; }
.admin-topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 18px;
  background: rgba(251, 246, 240, .94);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.admin-topbar-title { flex: 1; min-width: 0; }
.admin-topbar-title h1 { font-size: 1.15rem; margin: 0; }
.admin-topbar-title p { margin: 2px 0 0; color: var(--muted); font-size: .82rem; }
.admin-user { display: none; align-items: center; gap: 10px; font-size: .86rem; font-weight: 600; }
.admin-body { padding: 20px 18px 56px; }

.kpi-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-bottom: 26px; }
.kpi { padding: 18px; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-xs); }
.kpi .kpi-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--clay-50); color: var(--clay-600); margin-bottom: 12px; }
.kpi strong { display: block; font-family: var(--font-display); font-size: 1.8rem; line-height: 1.1; }
.kpi span { color: var(--muted); font-size: .82rem; }

.table-wrap { overflow-x: auto; max-width: 100%; border-radius: var(--radius-lg); border: 1px solid var(--line); background: var(--surface); }
table { width: 100%; border-collapse: collapse; min-width: 620px; }
th, td { padding: 13px 16px; text-align: left; border-bottom: 1px solid var(--line); font-size: .88rem; vertical-align: middle; }
th { background: var(--surface-2); color: var(--muted); font-size: .74rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 600; }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--surface-2); }
td .row { gap: 8px; }
.table-actions { display: flex; flex-wrap: wrap; gap: 8px; }

.activity-list { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.activity-list li { display: flex; gap: 12px; align-items: flex-start; font-size: .88rem; color: var(--ink-soft); }
.activity-list .activity-dot { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--bg-soft); color: var(--clay-600); flex: none; }
.activity-list time { display: block; color: var(--muted); font-size: .76rem; }

.sortable-row { display: flex; align-items: center; gap: 10px; }
.order-controls { display: flex; gap: 4px; }
.icon-btn {
  display: inline-grid; place-items: center;
  width: 34px; height: 34px;
  border-radius: 10px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink-soft);
  cursor: pointer;
}
.icon-btn:hover { border-color: var(--clay); color: var(--clay-600); }
.icon-btn[disabled] { opacity: .4; cursor: not-allowed; }

.admin-form-card { max-width: 940px; }
.form-section { border-top: 1px solid var(--line); margin-top: 26px; padding-top: 24px; }
.form-section:first-of-type { border-top: none; margin-top: 0; padding-top: 0; }
.form-section-head { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.form-section-head h2, .form-section-head h3 { margin: 0; }

.module-block { border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 16px; background: var(--surface-2); display: grid; gap: 14px; }
.module-block-head { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }

/* admin → class categories: one card per category, order controls on the right */
.cat-row { display: grid; gap: 14px; }
.cat-row-head { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }
.cat-row-head .sortable-row { flex: 1 1 260px; flex-wrap: wrap; }
.cat-row-head code { font-size: .78rem; }
.cat-row-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.cat-row-note { color: var(--muted); font-size: .82rem; max-width: 42ch; }
.lesson-rows { display: grid; gap: 8px; }
.lesson-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  padding: 11px 13px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--line);
}
.lesson-row .lr-title { flex: 1 1 180px; font-size: .88rem; font-weight: 500; }
.lesson-row .lr-meta { color: var(--muted); font-size: .78rem; }

/* ---------------- empty states ---------------- */

.empty-state { display: grid; gap: 12px; place-items: center; text-align: center; padding: 42px 24px; }
.empty-mark { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 18px; background: var(--bg-deep); color: var(--clay-600); font-family: var(--font-display); font-size: 1.1rem; }
.empty-state h2, .empty-state h3 { margin: 0; }
.empty-state p { color: var(--muted); max-width: 44ch; margin: 0; }

/* ---------------- footer ---------------- */

.site-footer { background: var(--bg-deep); border-top: 1px solid var(--line); margin-top: 24px; }
.footer-grid { display: grid; gap: 28px; padding: 44px 0 26px; }
.footer-brand p { color: var(--ink-soft); font-size: .9rem; max-width: 34ch; margin-top: 12px; }
.footer-col { display: grid; gap: 10px; align-content: start; }
.footer-col h4 { font-family: var(--font-body); font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 0 0 4px; }
.footer-col a { color: var(--ink-soft); font-size: .9rem; }
.footer-col a:hover { color: var(--clay-600); }
.footer-muted { color: var(--muted); font-size: .88rem; }
.footer-base { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; padding: 18px 20px 26px; border-top: 1px solid var(--line-strong); font-size: .82rem; color: var(--muted); }
.app-footer { background: var(--bg-deep); border-top: 1px solid var(--line); margin-top: 40px; }
.app-footer .container { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; padding: 22px 20px; font-size: .82rem; color: var(--muted); }
.app-footer a { color: var(--ink-soft); }

/* ---------------- responsive ---------------- */

/* Phones: every interactive control gets a comfortable touch target. */
@media (max-width: 640px) {
  .btn { min-height: 48px; }
  .btn-sm { min-height: 44px; padding: 0 18px; font-size: .88rem; }
  .nav-toggle, .icon-btn { width: 44px; height: 44px; }
  .nav-link { min-height: 46px; }
  .chip-option span { min-height: 46px; }
  .tabs a, .cat-tabs a, .resource-tab { min-height: 44px; }
  .lesson-item { min-height: 48px; }
  .player-nav .btn { flex: 1 1 100%; }
  .course-foot { flex-direction: column; align-items: stretch; }
  .course-foot .btn { width: 100%; }
}

@media (min-width: 560px) {
  .trust-strip { grid-template-columns: repeat(4, 1fr); }
  .form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .inside-grid { grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 700px) {
  :root { --gutter: 28px; }
  .section { padding: 72px 0; }
  .course-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .filter-row { grid-template-columns: 1.6fr 1fr 1fr; }
  .filter-bar { padding: 22px; }
  .kpi-grid { grid-template-columns: repeat(4, 1fr); }
  .profile-head { grid-template-columns: auto 1fr; align-items: center; }
  .list-card { flex-direction: row; align-items: stretch; }
  .list-cover { width: 240px; aspect-ratio: auto; }
  .list-body { padding: 18px 18px 18px 0; }
  .continue-card { grid-template-columns: 300px 1fr; }
  .continue-cover img { height: 100%; aspect-ratio: auto; }
  .player-nav .btn { flex: 0 1 auto; }
}

@media (min-width: 900px) {
  .nav-toggle { display: none; }
  .site-nav {
    display: flex;
    position: static;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    padding: 0;
    background: none;
    border: none;
    box-shadow: none;
  }
  .nav-cta { width: auto; }
  .header-inner { min-height: 72px; }
  .hero { padding: 66px 0 58px; }
  .hero-inner { grid-template-columns: 1.05fr .95fr; align-items: center; gap: 48px; }
  .trust-strip { grid-template-columns: repeat(4, 1fr); }
  .course-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
  .grid-sidebar { grid-template-columns: 1fr 360px; align-items: start; }
  .grid-sidebar-rev { grid-template-columns: 340px 1fr; }
  .course-hero { grid-template-columns: 1.15fr .85fr; align-items: center; gap: 40px; }
  .auth-wrap { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; padding: 56px 0 30px; }
  .admin-user { display: flex; }
  .dash-hero-grid { display: grid; grid-template-columns: 1.35fr .85fr; gap: 24px; align-items: start; }
  .stat-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 1000px) {
  .admin-shell { grid-template-columns: 264px minmax(0, 1fr); }
  .admin-sidebar { position: sticky; top: 0; height: 100vh; transform: none; }
  .admin-body { padding: 26px 30px 60px; }
  .admin-topbar { padding: 14px 30px; }
  .admin-topbar .nav-toggle { display: none; }
  .player-shell { grid-template-columns: 330px minmax(0, 1fr); gap: 26px; align-items: start; padding: 22px 0 56px; }
  .player-side { position: sticky; top: 88px; }
  .drawer-toggle { display: none; }
  .curriculum-inner { display: block !important; padding: 0 12px 16px; }
  .curriculum-head { padding: 18px 16px 8px; }
  .video-frame .vf-play { width: 78px; height: 78px; }
}

@media (min-width: 1100px) {
  .course-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  .btn:hover, .course-card:hover { transform: none; }
}

/* =====================================================================
   Language switcher
   ===================================================================== */

.lang-switch { display: flex; align-items: center; gap: 8px; }
.lang-options { display: inline-flex; padding: 3px; border-radius: var(--pill); background: var(--bg-deep); border: 1px solid var(--line); }
.lang-opt {
  min-width: 42px;
  min-height: 34px;
  padding: 0 12px;
  border: none;
  border-radius: var(--pill);
  background: transparent;
  color: var(--ink-soft);
  font-family: inherit;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .04em;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.lang-opt:hover { color: var(--ink); }
.lang-opt.is-active { background: var(--surface); color: var(--clay-600); box-shadow: var(--shadow-xs); }
.lang-opt:focus-visible { outline: 3px solid rgba(194, 112, 78, .3); outline-offset: 2px; }
.lang-switch-nav { margin-left: 4px; }
.lang-switch-sidebar { display: block; width: 100%; }
.lang-switch-label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  color: var(--muted);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.admin-lang { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }

/* =====================================================================
   Landing media — hero visuals + the story carousel
   (Admin → Landing Page → Hero Visuals / Story Media)
   ===================================================================== */

/* Hero visuals. Three keep the original composition; when the studio has uploaded
   fewer, the grid adapts so the composition still looks deliberate, never broken. */
.hero-visual figure { position: relative; }
.hero-visual-single { grid-template-columns: minmax(0, 1fr); }
.hero-visual-single figure img { aspect-ratio: 4 / 3; }
.hero-visual-pair figure img { aspect-ratio: 4 / 5; }
.hv-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 26px 14px 12px;
  background: linear-gradient(to top, rgba(34, 29, 25, .76), rgba(34, 29, 25, 0));
  color: #FFF6EF;
  font-size: .8rem;
  line-height: 1.4;
}

/* The story carousel. Native horizontal scrolling does the real work (touch, trackpad,
   keyboard); the arrows and the dots drive that same scroll position with JavaScript.
   The track is the only thing that scrolls, so the page itself never overflows. */
.story-block { align-items: center; }
.story-block-media { grid-template-columns: minmax(0, 1fr); gap: 34px; align-items: start; }
.story-block-media .story-copy { max-width: 640px; }
.story-carousel { display: grid; gap: 16px; min-width: 0; }
.story-viewport {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 2px;
}
.story-viewport::-webkit-scrollbar { display: none; }
.story-viewport:focus-visible { outline: 3px solid rgba(194, 112, 78, .35); outline-offset: 4px; border-radius: var(--radius-lg); }
.story-track { display: grid; grid-auto-flow: column; grid-auto-columns: 86%; gap: 14px; }
.story-slide { scroll-snap-align: start; min-width: 0; }
.story-figure {
  margin: 0;
  height: 100%;
  display: grid;
  grid-template-rows: 1fr auto;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow-xs);
}
.story-media { position: relative; display: block; height: 100%; }
/* A draggable photo would fight the carousel's own drag-to-scroll gesture. */
.story-media img,
.story-media video { -webkit-user-drag: none; user-select: none; }
.story-media img,
.story-media video {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  background: var(--bg-deep);
}
.story-caption {
  padding: 10px 14px 12px;
  border-top: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: .82rem;
  line-height: 1.45;
}
.story-zoom {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  color: var(--ink);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .2s ease, transform .2s ease;
}
.story-media:hover .story-zoom,
.story-media:focus-visible .story-zoom { opacity: 1; transform: translateY(0); }
/* The decorative play hint on a video card: it signals "press to watch" and fades out
   once the visitor actually starts playback. The video's own controls remain the
   accessible way to play, pause, mute or unmute — nothing here is clickable. */
.story-play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .9);
  color: var(--ink);
  box-shadow: var(--shadow);
  pointer-events: none;
  transition: opacity .2s ease;
}
.story-figure.is-playing .story-play { opacity: 0; }
.story-controls { display: flex; align-items: center; gap: 14px; }
.carousel-btn {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.carousel-btn:hover:not(:disabled) { background: var(--clay-50); border-color: var(--clay); color: var(--clay-600); }
.carousel-btn:disabled { opacity: .38; cursor: default; }
.carousel-dots { display: flex; align-items: center; flex-wrap: wrap; flex: 1; }
.carousel-dot {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.carousel-dot::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--line-strong);
  transition: width .2s ease, background .2s ease;
}
.carousel-dot:hover::before { background: var(--clay); }
.carousel-dot.is-active::before { width: 20px; border-radius: var(--pill); background: var(--clay); }
.carousel-dot:focus-visible { outline: 3px solid rgba(194, 112, 78, .3); outline-offset: 1px; }

/* Admin: the two landing media lists (Hero Visuals / Story Media) */
.media-admin-grid { display: grid; gap: 18px; }
.media-admin-item { display: grid; gap: 0; }
.media-admin-media { position: relative; background: var(--bg-deep); }
.media-admin-media img,
.media-admin-media video { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.media-admin-flags { position: absolute; top: 10px; left: 10px; display: flex; flex-wrap: wrap; gap: 6px; }
.media-admin-flags .badge { background: rgba(255, 255, 255, .93); }
.media-admin-order {
  position: absolute;
  top: 10px;
  right: 10px;
  display: grid;
  place-items: center;
  min-width: 28px;
  height: 28px;
  padding: 0 8px;
  border-radius: var(--pill);
  background: rgba(255, 255, 255, .93);
  color: var(--ink);
  font-size: .78rem;
  font-weight: 700;
}
.media-admin-body { display: grid; gap: 14px; padding: 16px; }
/* The replace/poster controls stay folded away so a card reads as one item, not a form.
   Their file inputs must be told to fit: a file input's intrinsic width is ~240px, which
   overflows a 3-up admin column (and even a CLOSED <details> lays its content out at its
   own intrinsic size, so this showed up as an overflowing element at 1024px). */
.media-admin-advanced { min-width: 0; }
.media-admin-advanced > summary {
  cursor: pointer;
  padding: 4px 0;
  color: var(--clay-600);
  font-size: .86rem;
  font-weight: 600;
}
.media-admin-advanced > * { min-width: 0; max-width: 100%; }
.media-admin-advanced input[type=file] { width: 100%; min-width: 0; font-size: .82rem; }
.media-admin-advanced .btn-row { flex-wrap: wrap; }
.media-admin-advanced .field { display: grid; gap: 6px; font-size: .84rem; color: var(--ink-soft); }
.media-admin-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.media-admin-item[draggable="true"] { cursor: grab; }
.media-admin-item.is-dragging { opacity: .45; }
.media-admin-item.is-drop-target { outline: 2px dashed var(--clay); outline-offset: 3px; }
.media-drag-hint { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: .78rem; }
.media-upload-progress { display: none; gap: 10px; align-items: center; }
.media-upload-progress.is-active { display: flex; }
.media-upload-bar { flex: 1; height: 6px; border-radius: var(--pill); background: var(--bg-deep); overflow: hidden; }
.media-upload-bar span { display: block; height: 100%; width: 0; background: var(--clay); transition: width .2s ease; }
.media-upload-note { color: var(--muted); font-size: .84rem; }

/* lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 14px;
  padding: 18px;
  background: rgba(35, 30, 26, .86);
  backdrop-filter: blur(6px);
}
.lightbox.is-open { display: flex; }
.lightbox figure { margin: 0; display: grid; gap: 12px; justify-items: center; max-width: 100%; }
.lightbox img {
  max-width: min(96vw, 1100px);
  max-height: 76vh;
  width: auto;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  background: var(--surface);
}
.lightbox figcaption { color: rgba(255, 255, 255, .92); font-size: .9rem; text-align: center; max-width: 60ch; }
.lightbox-close {
  position: absolute;
  top: 14px;
  right: 14px;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .35);
  background: rgba(255, 255, 255, .14);
  color: #fff;
  cursor: pointer;
}
.lightbox-close:hover { background: rgba(255, 255, 255, .24); }
body.lightbox-open { overflow: hidden; }

/* "already enrolled" marker on catalog cards */
.cover-status {
  position: absolute;
  top: 12px;
  right: 12px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: var(--pill);
  background: var(--sage);
  color: #fff;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* Landing media: the carousel's density (see the "Landing media" section above) and the
   admin lists. 31% from 640px reads as roughly three cards; the desktop rule above makes
   exactly four fit, which is the composition this section has always had. */
@media (min-width: 640px) {
  .story-track { grid-auto-columns: 31%; gap: 16px; }
  .media-admin-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1000px) {
  .story-track { grid-auto-columns: calc((100% - 48px) / 4); gap: 16px; }
  .media-admin-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* A touch device has no hover, so the zoom affordance stays visible. */
@media (hover: none) {
  .story-zoom { opacity: 1; transform: none; }
}

@media (max-width: 640px) {
  .lang-opt { min-width: 46px; min-height: 40px; }
  .lightbox img { max-height: 64vh; }
}

/* Header layout with the always-visible language switcher:
   mobile  → brand left, [EN|ID] + hamburger right
   desktop → brand left, nav + [EN|ID] grouped right */
.header-actions { display: flex; align-items: center; gap: 8px; flex: none; }

/* The header controls must keep their size — the brand is the flexible part. A
   squeezed avatar would fall below a usable tap target on a narrow phone. */
.brand { min-width: 0; }
.brand .brand-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.header-actions .profile-menu,
.header-actions .profile-trigger,
.header-actions .avatar { flex: none; }

@media (min-width: 900px) {
  .site-nav { order: 2; margin-left: auto; }
  .header-actions { order: 3; }
  .lang-switch-nav { margin-left: 6px; }
  .profile-panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 264px;
    z-index: 70;
  }
  .site-nav { position: relative; }
}

@media (max-width: 420px) {
  .header-inner { gap: 10px; }
  .brand-text { font-size: .9rem; letter-spacing: .06em; }
  .brand-mark { width: 30px; height: 30px; border-radius: 10px; }
  .lang-options { padding: 2px; }
  .lang-opt { min-width: 38px; min-height: 34px; padding: 0 8px; font-size: .74rem; }
  .admin-topbar { padding: 10px 14px; gap: 10px; }
  .admin-topbar-title h1 { font-size: 1rem; }
  .admin-topbar-title p { font-size: .74rem; }
}

/* =====================================================================
   Alldays Creator Hub
   Same warm cream / terracotta / sage palette as the rest of the studio —
   an editorial creator area, deliberately not an MLM or crypto dashboard.
   ===================================================================== */

.hub-page { padding: 24px 0 56px; display: grid; gap: 26px; }
.hub-section { display: grid; gap: 20px; }
.hub-section .section-head { margin-bottom: 0; }

/* ---------------- hero ---------------- */

.hub-hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(120% 130% at 88% 8%, rgba(243, 214, 195, .55) 0%, rgba(243, 214, 195, 0) 55%),
    radial-gradient(90% 110% at 6% 100%, rgba(220, 229, 214, .5) 0%, rgba(220, 229, 214, 0) 60%),
    var(--surface);
  display: grid;
  gap: 26px;
}
.hub-hero-copy h1 { font-size: clamp(1.7rem, 4.6vw, 2.7rem); margin-bottom: 14px; max-width: 22ch; }
.hub-hero-support { color: var(--ink-soft); font-size: 1.04rem; max-width: 46ch; }

.hub-path {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 5px;
  border-radius: var(--pill);
  background: rgba(255, 255, 255, .72);
  border: 1px solid var(--line);
  width: fit-content;
}
.hub-path-step {
  padding: 8px 15px;
  border-radius: var(--pill);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
.hub-path-step.is-current { background: var(--clay); color: #fff; }
.hub-path-step.is-future { background: var(--bg-deep); color: var(--ink-soft); }
.hub-path-arrow { color: var(--line-strong); display: inline-grid; place-items: center; }
.hub-hero-note { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: .84rem; margin: 14px 0 0; }

.hub-summary { margin-top: 18px; background: rgba(255, 255, 255, .8); }
.hub-summary-title { margin: 0 0 12px; font-size: 1rem; }
.hub-summary-list { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.hub-summary-list > div { min-width: 0; }
.hub-summary-list dt { color: var(--muted); font-size: .74rem; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 4px; }
.hub-summary-list dd { margin: 0; font-family: var(--font-display); font-size: 1.15rem; }

/* ---------------- earnings ---------------- */

.hub-earnings {
  display: grid;
  gap: 20px;
  background: linear-gradient(150deg, #332D28 0%, #2A2521 60%, #241F1B 100%);
  border-color: transparent;
  color: #F7EFE8;
}
.hub-earnings-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .76rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #E4B08F;
  font-weight: 600;
}
.hub-earnings-amount {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 6vw, 3.2rem);
  line-height: 1.1;
  margin: 10px 0 6px;
  color: #fff;
}
.hub-earnings-empty { color: rgba(247, 239, 232, .8); max-width: 52ch; margin: 0; }
.hub-metrics { display: grid; gap: 12px; margin-top: 20px; grid-template-columns: 1fr; }
.hub-metric {
  padding: 14px 16px;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .12);
}
.hub-metric span { display: block; color: rgba(247, 239, 232, .72); font-size: .76rem; letter-spacing: .06em; text-transform: uppercase; }
.hub-metric strong { display: block; font-family: var(--font-display); font-size: 1.3rem; margin-top: 6px; color: #fff; }
.hub-earnings-note { display: flex; gap: 9px; color: rgba(247, 239, 232, .72); font-size: .82rem; margin: 0; }
.hub-earnings-note .icon { margin-top: 2px; }

/* ---------------- refer & earn ---------------- */

.hub-refer { display: grid; gap: 22px; }
.hub-refer-copy h2 { margin-bottom: 8px; }
.hub-refer-copy p { color: var(--ink-soft); margin: 0; max-width: 56ch; }
.hub-field-label { display: block; font-weight: 600; font-size: .88rem; margin-bottom: 8px; }
.hub-refer-row { display: grid; gap: 10px; }
.hub-refer-input { background: var(--bg-soft); color: var(--muted); }
.hub-refer-input::placeholder { color: var(--clay); font-weight: 600; }
.hub-refer-tools .help { display: block; margin-top: 10px; }

/* ---------------- opportunity + academy cards ---------------- */

.hub-opp-grid { display: grid; gap: 18px; grid-template-columns: 1fr; grid-auto-rows: 1fr; }
.hub-opp-card { display: flex; flex-direction: column; gap: 12px; padding: 22px; transition: transform .18s ease, box-shadow .18s ease; }
.hub-opp-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.hub-opp-card h3 { margin: 0; font-size: 1.06rem; }
.hub-opp-card p { margin: 0; color: var(--ink-soft); font-size: .91rem; }
.hub-opp-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: var(--clay-50);
  color: var(--clay-600);
}
.hub-opp-foot { margin-top: auto; padding-top: 4px; }
.hub-status-coming_soon { background: var(--bg-deep); color: var(--ink-soft); }
.hub-status-active { background: var(--sage-50); color: #5D7157; }
.hub-status-paused { background: #FBF1E2; color: #9A6C22; }
.hub-status-closed { background: #F1EDE8; color: var(--muted); }

.hub-academy-grid { display: grid; gap: 16px; grid-template-columns: 1fr; grid-auto-rows: 1fr; }
.hub-academy-card { display: flex; flex-direction: column; gap: 10px; padding: 20px; }
.hub-academy-card h3 { margin: 0; font-size: 1rem; }
.hub-academy-card p { margin: 0; color: var(--muted); font-size: .87rem; }
.hub-academy-card .status-pill { justify-self: start; margin-top: 4px; }

.hub-note {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 14px 16px;
  border-radius: var(--radius);
  background: var(--bg-soft);
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: .84rem;
  margin: 0;
}
.hub-note .icon { margin-top: 2px; flex: none; }

/* ---------------- creator journey ---------------- */

.hub-journey { display: grid; gap: 16px; grid-template-columns: 1fr; position: relative; }
.hub-stage { display: grid; gap: 16px; padding: 22px; position: relative; }
.hub-stage-head { display: flex; align-items: flex-start; gap: 14px; }
.hub-stage-rank {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 13px;
  background: var(--bg-deep);
  color: var(--ink-soft);
  font-family: var(--font-display);
  font-size: 1.05rem;
  flex: none;
}
.hub-stage h3 { margin: 2px 0 4px; font-size: 1.12rem; }
.hub-stage-state {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}
.hub-stage-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.hub-stage-points li { display: flex; gap: 9px; align-items: flex-start; color: var(--ink-soft); font-size: .9rem; }
.hub-stage-points .icon { margin-top: 3px; flex: none; color: var(--muted); }

.hub-stage.is-current { border-color: var(--clay); box-shadow: 0 14px 34px rgba(194, 112, 78, .16); }
.hub-stage.is-current .hub-stage-rank { background: var(--clay); color: #fff; }
.hub-stage.is-current .hub-stage-state { color: var(--clay-600); }
.hub-stage.is-current .hub-stage-points .icon { color: var(--sage); }
.hub-stage.is-future { background: var(--surface-2); }
.hub-stage.is-future h3, .hub-stage.is-future .hub-stage-points li { color: var(--ink-soft); }
.hub-stage.is-done .hub-stage-rank { background: var(--sage-50); color: #4F6349; }

.hub-journey-bar {
  margin-top: 18px;
  padding: 18px;
  border-radius: var(--radius-lg);
  background: var(--bg-soft);
  border: 1px solid var(--line);
}
.hub-current-stage {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 6px;
  padding: 7px 14px;
  border-radius: var(--pill);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  font-weight: 700;
  font-size: .88rem;
  color: var(--clay-600);
}
.hub-current-stage::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--clay);
  flex: none;
}
.hub-journey-bar .help { display: block; }

.hub-journey-marker { display: none; }

/* ---------------- responsive ---------------- */

@media (min-width: 560px) {
  .hub-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hub-refer-row { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .hub-refer-row .btn { min-height: 48px; }
}

@media (min-width: 700px) {
  .hub-opp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hub-academy-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hub-journey { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hub-refer { grid-template-columns: 1.05fr .95fr; align-items: start; }
}

@media (min-width: 900px) {
  .hub-page { padding: 30px 0 64px; gap: 32px; }
  .hub-hero { grid-template-columns: 1.15fr .85fr; align-items: center; padding: 34px; }
  .hub-hero-note { margin-top: 16px; }
  .hub-earnings { grid-template-columns: 1.25fr .75fr; align-items: end; padding: 32px; }
  .hub-earnings-note { justify-self: end; max-width: 34ch; }
  .hub-metrics { margin-top: 24px; }
  .hub-opp-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
  .hub-academy-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .hub-page { gap: 22px; }
  .hub-hero { padding: 22px; }
  .hub-path { width: 100%; justify-content: flex-start; }
  .hub-path-step { padding: 7px 12px; font-size: .74rem; }
  .hub-summary-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .hub-summary-list dd { font-size: 1rem; }
  .hub-earnings { padding: 22px; }
  .hub-refer-row .btn { width: 100%; min-height: 48px; }
  .hub-opp-card, .hub-stage, .hub-academy-card { padding: 18px; }
}

/* The signed-in nav carries more items than the public nav, so between 900px
   and 1200px it compacts to icon-only links (names stay available to screen
   readers and as tooltips) instead of overflowing the header. */
@media (min-width: 900px) and (max-width: 1199px) {
  .app-header-student .nav-link span { display: none; }
  .app-header-student .nav-link { padding: 10px 12px; gap: 0; }
  .app-header-student .nav-account-name { display: none; }
  .app-header-student .nav-account { gap: 8px; }
}

/* =====================================================================
   Creative Hub revision — three pathways, unified balance, ledger
   Extends the existing .hub-* language; same palette and typography.
   ===================================================================== */

.hub-crumbs { display: flex; align-items: center; gap: 8px; font-size: .86rem; }
.hub-crumbs a { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-soft); font-weight: 500; }
.hub-crumbs a:hover { color: var(--clay-600); }

/* ---------------- hero ---------------- */
.hub-hero-revised { align-items: center; }
.hub-heading {
  letter-spacing: .06em;
  font-size: clamp(1.5rem, 4.4vw, 2.4rem);
  text-transform: uppercase;
  margin-bottom: 14px;
}
.hub-ecosystem {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 6px 0 0;
  padding: 8px 15px;
  border-radius: var(--pill);
  background: var(--bg-deep);
  color: var(--ink-soft);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .02em;
}
.hub-requirement {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0 0 14px;
  color: var(--muted);
  font-size: .84rem;
}
.hub-requirement .icon { margin-top: 2px; flex: none; }
.hub-summary-list-wide { margin: 0; }
.hub-summary-list-wide dd { font-size: 1.5rem; }
.hub-summary-of { color: var(--muted); font-size: .9rem; }

/* Two statistics read as one component: equal columns, the number pinned to the
   top of each cell (so a wrapping label can never shift it) and a shared
   divider. Numbers and labels share typography and spacing by construction. */
.hub-stat-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, .72);
  overflow: hidden;
}
.hub-stat {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 15px 18px;
  min-width: 0;
}
.hub-stat + .hub-stat { border-left: 1px solid var(--line); }
.hub-stat-value {
  font-family: var(--font-display);
  font-size: 1.85rem;
  line-height: 1;
  color: var(--ink);
}
.hub-stat-label {
  color: var(--muted);
  font-size: .78rem;
  line-height: 1.35;
  letter-spacing: .01em;
}

/* ---------------- eligibility notices ---------------- */
.hub-notice {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  background: var(--surface);
}
.hub-notice-inline { background: var(--bg-soft); border-color: var(--line); padding: 16px; }
.hub-notice h2 { margin: 0 0 6px; font-size: 1.15rem; }
.hub-notice p { margin: 0; color: var(--ink-soft); }
.hub-notice-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 15px;
  flex: none;
}
.hub-notice-locked { border-style: dashed; }
.hub-notice-locked .hub-notice-icon { background: var(--clay-50); color: var(--clay-600); }
.hub-notice-progress .hub-notice-icon { background: #FBF1E2; color: #9A6C22; }
.hub-notice-approved .hub-notice-icon { background: var(--sage-50); color: #5D7157; }
.hub-notice-submitted .hub-notice-icon,
.hub-notice-under_review .hub-notice-icon { background: var(--plum-50); color: var(--plum); }
.hub-notice-rejected .hub-notice-icon,
.hub-notice-needs_revision .hub-notice-icon { background: #FBEDEA; color: #A4483A; }

/* ---------------- earnings card (bank-style) ---------------- */
.hub-earnings-card {
  display: grid;
  gap: 22px;
  padding: 26px;
  background: linear-gradient(150deg, #332D28 0%, #2A2521 60%, #241F1B 100%);
  border-color: transparent;
  color: #F7EFE8;
}
.hub-earnings-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .74rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #E4B08F;
  font-weight: 600;
}
.hub-earnings-label {
  display: block;
  margin-top: 14px;
  color: rgba(247, 239, 232, .74);
  font-size: .86rem;
}
.hub-earnings-amount {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2.3rem, 7vw, 3.4rem);
  line-height: 1.08;
  margin: 4px 0 10px;
  color: #fff;
}
.hub-earnings-empty { color: rgba(247, 239, 232, .8); max-width: 46ch; margin: 0; }
.hub-earnings-cta { margin-top: 18px; }
.hub-earnings-note { display: flex; gap: 9px; color: rgba(247, 239, 232, .7); font-size: .8rem; margin: 14px 0 0; max-width: 52ch; }
.hub-earnings-note .icon { margin-top: 2px; flex: none; }
.hub-earnings-mini { display: grid; gap: 10px; align-content: start; }
.hub-mini-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 15px;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .12);
}
.hub-mini-row span { color: rgba(247, 239, 232, .72); font-size: .78rem; letter-spacing: .04em; }
.hub-mini-row strong { font-family: var(--font-display); font-size: 1.1rem; color: #fff; }

/* ---------------- pathway cards ---------------- */
/* `grid-auto-rows: 1fr` makes every row the height of the tallest one, so the
   cards stay equal height whether they sit 3-across on desktop, 2-across on a
   tablet or stacked on a phone — and the footer's `margin-top: auto` then pins
   every status badge to the same internal offset. Without it, a card that ends
   up alone in its row shrinks to its own content and its badge drifts up. */
.hub-pathway-grid { display: grid; gap: 20px; grid-template-columns: 1fr; grid-auto-rows: 1fr; }
.hub-pathway {
  /* flex column (not grid + align-content:start) so every card's footer can be
     pinned to the same baseline: the grid row makes the cards equal height and
     `margin-top: auto` on the footer absorbs the difference. */
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px;
  border-top: 3px solid var(--line-strong);
  transition: transform .18s ease, box-shadow .18s ease;
}
.hub-pathway:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.hub-pathway-ready { border-top-color: var(--sage); }
.hub-pathway-approved { border-top-color: var(--clay); }
.hub-pathway-pending { border-top-color: var(--plum); }
.hub-pathway-blocked { border-top-color: var(--gold); }
.hub-pathway-locked { border-top-color: var(--line-strong); }
.hub-pathway-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 15px;
  background: var(--clay-50);
  color: var(--clay-600);
}
.hub-pathway-name {
  margin: 0;
  font-family: var(--font-body);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--clay-600);
}
.hub-pathway-tagline { margin: 0; font-family: var(--font-display); font-size: 1.14rem; line-height: 1.3; color: var(--ink); }
.hub-pathway-req { margin: 0; color: var(--muted); font-size: .87rem; }
.hub-pathway-foot { display: grid; gap: 12px; margin-top: auto; padding-top: 10px; }
.hub-pathway-cta { width: 100%; justify-content: space-between; }

.hub-state {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: start;
  padding: 6px 12px;
  border-radius: var(--pill);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  background: var(--bg-deep);
  color: var(--ink-soft);
}
.hub-state-locked { background: #F1EDE8; color: var(--muted); }
.hub-state-ready { background: var(--sage-50); color: #5D7157; }
.hub-state-approved { background: var(--sage-50); color: #4F6349; }
.hub-state-pending { background: var(--plum-50); color: var(--plum); }
.hub-state-blocked { background: #FBF1E2; color: #9A6C22; }

/* ---------------- journey checklist ---------------- */
.hub-journey-list { display: grid; gap: 4px; }
.hub-journey-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 14px;
  align-items: center;
  padding: 14px 6px;
  border-bottom: 1px solid var(--line);
}
.hub-journey-row:last-child { border-bottom: none; }
.hub-journey-check {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  background: var(--bg-deep);
  color: var(--muted);
  grid-row: span 2;
}
.hub-journey-row.is-done .hub-journey-check { background: var(--sage-50); color: #4F6349; }
.hub-journey-label { font-weight: 600; font-size: .95rem; }
.hub-journey-note { color: var(--muted); font-size: .82rem; }

/* ---------------- academy destinations ---------------- */
.hub-academy-grid-2 { grid-template-columns: 1fr; grid-auto-rows: 1fr; }
.hub-academy-destination { align-content: start; }
.hub-academy-destination.is-locked { background: var(--surface-2); }
.hub-academy-destination.is-unlocked { border-color: var(--sage); }
.hub-academy-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 6px; }
.hub-academy-title { text-transform: uppercase; letter-spacing: .05em; font-size: clamp(1.3rem, 3.6vw, 1.9rem); }
.hub-academy-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-radius: var(--radius-lg);
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
}
.hub-academy-badge.is-locked { background: var(--bg-deep); color: var(--ink-soft); }
.hub-academy-badge.is-unlocked { background: var(--sage-50); color: #4F6349; }
.hub-academy-hero.is-locked { background: var(--surface-2); }
.hub-academy-plan {
  display: grid;
  place-items: center;
  padding: 30px 18px;
  border-radius: var(--radius-lg);
  border: 1.5px dashed var(--line-strong);
  background: var(--bg-soft);
}
.hub-plan-badge {
  padding: 8px 16px;
  border-radius: var(--pill);
  background: var(--surface);
  border: 1px solid var(--line);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------------- earnings dashboard ---------------- */
.hub-metric-grid { display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hub-metric-card { display: grid; gap: 6px; align-content: start; }
.hub-metric-card strong { font-family: var(--font-display); font-size: 1.45rem; margin-top: 6px; }
.hub-metric-label { font-weight: 600; font-size: .86rem; }
.hub-section-card { display: grid; gap: 18px; }

.hub-source-grid { display: grid; gap: 14px; grid-template-columns: 1fr; }
.hub-source-grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.hub-source-card {
  position: relative;
  display: grid;
  gap: 6px;
  padding: 18px;
  border-radius: var(--radius-lg);
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--ink);
  transition: border-color .15s ease, transform .15s ease;
}
.hub-source-card:not(.is-static):hover { border-color: var(--clay); transform: translateY(-2px); }
.hub-source-card strong { font-family: var(--font-display); font-size: 1.5rem; }
.hub-source-name { font-weight: 600; font-size: .92rem; }
.hub-source-meta { color: var(--muted); font-size: .8rem; }
.hub-source-go { position: absolute; top: 16px; right: 14px; color: var(--muted); }
.hub-source-empty { display: grid; gap: 12px; place-items: center; text-align: center; padding: 30px 18px; }
.hub-source-empty h3 { margin: 0; }
.hub-source-empty p { margin: 0; color: var(--muted); max-width: 46ch; }

/* bank-style transaction amounts */
.hub-tx-amount { font-weight: 700; white-space: nowrap; }
.hub-tx-amount.is-credit { color: #4F6349; }
.hub-tx-amount.is-debit { color: #A4483A; }

.hub-tx-detail { display: grid; gap: 18px; }
.hub-tx-detail-head { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.hub-tx-detail-head .hub-tx-amount { font-family: var(--font-display); font-size: 2rem; }
.hub-tx-facts { display: grid; gap: 14px; margin: 0; grid-template-columns: 1fr; }
.hub-tx-facts > div { padding: 14px 16px; border-radius: var(--radius); background: var(--surface-2); border: 1px solid var(--line); }
.hub-tx-facts dt { color: var(--muted); font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 5px; }
.hub-tx-facts dd { margin: 0; font-size: .94rem; }

.hub-answers { grid-template-columns: 1fr; }
.hub-answers dd { font-family: var(--font-body); font-size: .92rem; }

/* business rules (structure shown, values unset) */
.hub-rules-card { background: var(--surface-2); }
.hub-rule-grid { display: grid; gap: 10px; grid-template-columns: 1fr; }
.hub-rule {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 16px;
  padding: 12px 15px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--line);
}
.hub-rule-label { font-size: .88rem; color: var(--ink-soft); }
.hub-rule-value { font-size: .82rem; font-weight: 600; color: var(--ink); }
.hub-rule-value.is-unset { color: var(--muted); font-weight: 500; font-style: italic; }

/* ---------------- refer & earn ---------------- */
.hub-refer-activate, .hub-refer-code { display: grid; gap: 14px; }
.hub-code-row { display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); }
.hub-code {
  display: flex;
  align-items: center;
  min-height: 52px;
  padding: 12px 18px;
  border-radius: var(--radius);
  background: var(--bg-soft);
  border: 1px dashed var(--line-strong);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--clay-600);
  overflow-wrap: anywhere;
}
.hub-field-hint {
  margin-left: 8px;
  font-weight: 500;
  font-size: .72rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------------- responsive ---------------- */
@media (min-width: 560px) {
  .hub-code-row { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .hub-academy-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 700px) {
  .hub-pathway-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hub-source-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
  .hub-tx-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hub-rule-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hub-answers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hub-journey-row { grid-template-columns: auto 1fr auto; }
  .hub-journey-note { text-align: right; }
}

@media (min-width: 900px) {
  .hub-pathway-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
  .hub-metric-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .hub-earnings-card { grid-template-columns: 1.3fr .7fr; align-items: center; padding: 34px; }
  .hub-earnings-mini { gap: 12px; }
  .hub-tx-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .hub-stat { padding: 13px 14px; }
  .hub-stat-value { font-size: 1.6rem; }
  .hub-stat-label { font-size: .74rem; }
  .profile-trigger-name { max-width: 8ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .hub-earnings-card { padding: 22px; }
  .hub-notice { gap: 14px; padding: 20px; }
  .hub-notice-icon { width: 40px; height: 40px; border-radius: 13px; }
  .hub-pathway, .hub-metric-card, .hub-source-card { padding: 18px; }
  .hub-mini-row { padding: 11px 13px; }
  .hub-rule { padding: 11px 13px; }
  .hub-journey-row { padding: 12px 4px; }
}

/* transaction reference sub-line in the ledger */
.hub-tx-ref { margin-top: 4px; font-size: .76rem; letter-spacing: .02em; }

/* =====================================================================
   Creative Hub detail views — explain the opportunity, then offer the CTA
   ===================================================================== */

.hub-info-intro { display: grid; gap: 14px; max-width: 68ch; }
.hub-info-intro p { margin: 0; color: var(--ink-soft); font-size: 1.02rem; }
.hub-info-note {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 14px 16px;
  border-radius: var(--radius);
  background: var(--sage-50);
  border: 1px solid #DDE5D8;
  color: #4F6349;
  font-size: .9rem;
}
.hub-info-note .icon { margin-top: 2px; flex: none; }

.hub-info-grid { display: grid; gap: 18px; grid-template-columns: 1fr; }
.hub-info-card { display: flex; flex-direction: column; gap: 14px; }
.hub-info-title { margin: 0; font-size: 1.15rem; }
.hub-info-lead { margin: 0; color: var(--ink-soft); font-size: .92rem; }
.hub-info-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.hub-info-list li { display: flex; gap: 11px; align-items: flex-start; color: var(--ink-soft); font-size: .92rem; }
.hub-info-list li > span:last-child { min-width: 0; }
.hub-info-mark {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  flex: none;
  margin-top: 1px;
  background: var(--clay-50);
  color: var(--clay-600);
  font-size: .74rem;
  font-weight: 700;
}
.is-numbered .hub-info-mark { background: var(--ink); color: #fff; }
.hub-info-card-full .hub-info-grid { grid-template-columns: 1fr; }

.hub-info-sub { display: grid; gap: 10px; padding-top: 14px; border-top: 1px solid var(--line); }
.hub-info-sub h3 { margin: 0; font-family: var(--font-body); font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.hub-info-docs { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; grid-template-columns: 1fr; }
.hub-info-docs li { display: flex; gap: 9px; align-items: flex-start; color: var(--ink-soft); font-size: .88rem; }
.hub-info-docs .icon { margin-top: 3px; flex: none; color: var(--clay-600); }

/* the flow / journey strip */
.hub-flow { display: grid; gap: 10px; }
.hub-flow-step {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 15px;
  border-radius: var(--radius);
  background: var(--bg-soft);
  border: 1px solid var(--line);
  font-size: .92rem;
  font-weight: 500;
}
.hub-flow-step .hub-flow-num {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  flex: none;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  color: var(--clay-600);
  font-size: .76rem;
  font-weight: 700;
}
.hub-flow-step:last-child { background: var(--sage-50); border-color: #DDE5D8; font-weight: 600; }
.hub-flow-step:last-child .hub-flow-num { background: var(--sage); border-color: var(--sage); color: #fff; }

/* final call-to-action block under the explanation */
.hub-cta-block {
  display: grid;
  gap: 16px;
  padding: 26px;
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}
.hub-cta-block h2 { margin: 0; font-size: 1.2rem; }
.hub-cta-block p { margin: 0; color: var(--ink-soft); font-size: .93rem; }
.hub-cta-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hub-cta-actions .btn { flex: 1 1 240px; }
.hub-cta-locked { background: var(--surface-2); border-style: dashed; }

@media (min-width: 700px) {
  .hub-info-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hub-info-card-full { grid-column: 1 / -1; }
  .hub-info-docs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hub-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hub-cta-actions .btn { flex: 0 1 auto; }
}

@media (min-width: 1000px) {
  .hub-flow { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* the journey's final step ("eligible for opportunities") closes the strip */
  .hub-flow .hub-flow-step:last-child { grid-column: 1 / -1; justify-content: center; }
}

@media (max-width: 640px) {
  .hub-cta-block { padding: 20px; }
  .hub-cta-actions .btn { flex: 1 1 100%; }
  .hub-info-card { padding: 18px; }
}

/* =====================================================================
   Class detail — "Pilih cara belajarmu" (in the pricing card)
   A compact segmented selector: name + price per row, with an info
   popover for the explanation. Same warm/editorial language as the rest
   of the page — no urgency, no oversized prices.
   ===================================================================== */

.opick { display: grid; gap: 10px; }
.opick-heading {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}

/* one bordered group, divided rows — reads as a single control, not 3 cards */
.opick-list {
  display: grid;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
}
.opick-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}
.opick-row + .opick-row { border-top: 1px solid var(--line); }
.opick-row:first-child { border-radius: calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px) 0 0; }
.opick-row:last-child { border-radius: 0 0 calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px); }
.opick-row.is-selected { background: var(--clay-50); }
.opick-row:not(.is-selected):hover { background: var(--bg-soft); }

.opick-select {
  display: grid;
  gap: 2px;
  min-height: 54px;
  padding: 10px 4px 10px 14px;
  color: var(--ink);
}
.opick-name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  font-weight: 600;
  font-size: .92rem;
  min-width: 0;
}
.opick-price {
  font-family: var(--font-display);
  font-size: 1.02rem;
  line-height: 1.2;
}
.opick-row.is-selected .opick-price { color: var(--clay-600); }
.opick-badge {
  padding: 3px 8px;
  border-radius: var(--pill);
  background: var(--clay);
  color: #fff;
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  white-space: nowrap;
}
/* the recommended option gets a restrained accent, not a banner */
.opick-row.is-featured { box-shadow: inset 3px 0 0 var(--clay); }
.opick-row.is-featured.is-selected { box-shadow: inset 3px 0 0 var(--clay); }

/* The info affordance is a native <details>: tap/click to open, works with no
   JavaScript. Only the icon occupies the action column; when open, the details
   spans the whole row so its panel gets the full card width instead of being
   squeezed into the 44px icon column. */
.opick-info {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-right: 5px;
}
.opick-info > summary {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: var(--muted);
  cursor: pointer;
  list-style: none;
}
.opick-info > summary::-webkit-details-marker { display: none; }
.opick-info > summary:hover { background: rgba(194, 112, 78, .1); color: var(--clay-600); }
.opick-info > summary:focus-visible { outline: 3px solid rgba(194, 112, 78, .35); outline-offset: 1px; }
.opick-info[open] > summary { background: rgba(194, 112, 78, .14); color: var(--clay-600); }

/* the explanation panel — hidden until its option is hovered or opened.
   Base state MUST be display:none: a closed <details> has skipped layout, so its
   content cannot be sized correctly (it collapses to the info button's width). */
.opick-pop {
  display: none;
  gap: 5px;
  padding: 12px 13px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
  box-shadow: var(--shadow);
  text-align: left;
}
.opick-info[open] > .opick-pop { display: grid; }
.opick-pop-tagline { font-size: .88rem; }
.opick-pop-desc { margin: 0; color: var(--ink-soft); font-size: .84rem; line-height: 1.5; }
/* benefits stay a single compact line so the panel remains short */
.opick-pop-benefits {
  list-style: none;
  margin: 0;
  padding: 0;
  color: var(--muted);
  font-size: .8rem;
  line-height: 1.5;
}
.opick-pop-benefits li { display: inline; }
.opick-pop-benefits li + li::before { content: " · "; color: var(--line-strong); }
.opick-pop-benefits .icon { display: none; }

/* Desktop (hover-capable): when open, the panel floats across the row so the card
   never reflows. app.js opens it on hover and closes it on hover-out, so the
   layout is always real when the panel is visible. */
@media (hover: hover) and (pointer: fine) {
  .opick-pop {
    position: absolute;
    left: 12px;
    right: 12px;
    top: calc(100% - 4px);
    z-index: 40;
  }
  .opick-row:first-child .opick-pop { top: calc(100% + 6px); }
}

/* Touch / narrow: the panel expands INLINE under its row, so the other options
   and prices stay visible for comparison. */
@media (max-width: 899px), (hover: none) {
  .opick-info[open] {
    grid-column: 1 / -1;
    grid-row: 2;
    width: auto;
    height: auto;
    margin: 0 12px 12px;
    place-items: stretch;
  }
  .opick-info[open] > summary { justify-self: end; width: 34px; height: 30px; }
  .opick-info[open] > .opick-pop { display: grid; position: static; margin-top: 2px; }
}

.opick-hint { margin: 0; color: var(--muted); font-size: .78rem; }

/* the borderless info affordance needs a real touch target on phones */
@media (max-width: 640px) {
  .opick-select { min-height: 56px; padding-left: 13px; }
  .opick-info { width: 46px; height: 46px; }
}

/* the chip that tells the customer which option the price belongs to */
.learn-selected-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-radius: var(--radius);
  background: var(--clay-50);
  color: var(--clay-600);
  font-size: .82rem;
}

/* ---------------- checkout & manual payments ---------------- */

.checkout-grid { display: grid; gap: 24px; align-items: start; }
@media (min-width: 980px) {
  .checkout-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
}

/* payment method choice: full-row targets, never a tiny radio dot */
.pay-methods { display: grid; gap: 12px; }
.pay-method {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  background: var(--surface);
  cursor: pointer;
  min-height: 56px;
}
.pay-method:hover { border-color: var(--clay); }
.pay-method:has(input:checked) { border-color: var(--clay); background: var(--clay-50); }
.pay-method input { width: 20px; height: 20px; margin: 3px 0 0; accent-color: var(--clay); flex: none; }
.pay-method-body { display: grid; gap: 4px; }
.pay-method-name { display: inline-flex; align-items: center; gap: 8px; }
.pay-method-blurb { color: var(--ink-soft); font-size: .86rem; }

/* labelled value rows (bank details, order summary) */
.pay-details { display: grid; gap: 14px; margin: 0; }
.pay-details > div { display: grid; gap: 3px; min-width: 0; }
.pay-details > div > span { color: var(--muted); font-size: .78rem; }
.pay-details > div > strong { font-size: .95rem; overflow-wrap: anywhere; }
.pay-details-strong > div > strong { font-size: 1.05rem; }
.pay-account { font-family: var(--font-display); font-size: 1.15rem !important; letter-spacing: .5px; }

.pay-total {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin: 18px 0 0;
  padding: 14px 16px;
  border-radius: var(--radius-lg);
  background: var(--bg-deep);
}
.pay-total > span { color: var(--muted); font-size: .82rem; }
.pay-total > strong { font-family: var(--font-display); font-size: 1.5rem; }
.pay-instructions { margin-top: 18px; }
.pay-instructions h3 { margin: 0 0 6px; font-size: .95rem; }
.pay-instructions p { margin: 0; color: var(--ink-soft); font-size: .9rem; }
.pay-mismatch { color: var(--clay-600); }

/* QRIS: big enough to scan from a phone, never wider than the screen */
.qris-panel { display: grid; gap: 14px; justify-items: center; text-align: center; }
.qris-heading { margin: 0; font-size: 1.1rem; }
.qris-frame {
  width: 100%;
  max-width: 340px;
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  padding: 14px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line-strong);
  background: #fff;
}
.qris-img { width: 100%; height: 100%; object-fit: contain; display: block; }
.qris-frame-sm { max-width: 220px; aspect-ratio: 1 / 1; }
.qris-frame-sm.is-empty { gap: 8px; color: var(--muted); font-size: .82rem; text-align: center; border-style: dashed; }
.qris-meta { display: grid; gap: 4px; }
.qris-meta > span { color: var(--muted); font-size: .8rem; }
.qris-meta > strong { font-family: var(--font-display); font-size: 1.6rem; }
.qris-order { margin: 0; color: var(--ink-soft); font-size: .88rem; }
.qris-hint { margin: 0; color: var(--muted); font-size: .84rem; }
.qris-admin-preview { display: grid; gap: 8px; justify-items: center; margin-bottom: 16px; }

/* order status page */
.order-number { font-family: var(--font-display); letter-spacing: .5px; }
.notice-card {
  display: grid;
  gap: 10px;
  justify-items: start;
  margin-top: 18px;
  padding: 14px 16px;
  border-radius: var(--radius-lg);
  background: var(--bg-deep);
}
.notice-card.notice-ok { background: var(--sage-50); }
.notice-card.notice-error { background: var(--clay-50); }
.order-timeline { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.order-timeline li { display: grid; gap: 3px; padding-left: 18px; position: relative; }
.order-timeline li::before {
  content: "";
  position: absolute;
  left: 0; top: 5px;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--line-strong);
}
.order-timeline li.is-done::before { background: var(--sage); }
.order-timeline li strong { font-size: .86rem; }
.order-timeline li span { color: var(--muted); font-size: .8rem; }

/* compact "awaiting verification" row on the dashboard + my learning */
.order-strip { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; }
.order-strip-main { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; min-width: 0; }

/* admin: verification queue */
.order-review-head { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; justify-content: space-between; margin-bottom: 16px; }
.order-review-head h2 { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.order-review-amount { display: grid; gap: 2px; text-align: right; }
.order-review-amount strong { font-family: var(--font-display); font-size: 1.3rem; }
.order-review-actions { display: grid; gap: 14px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.order-approve-form { display: flex; }
.order-reject-form { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.order-reject-form .field { flex: 1 1 240px; }
.proof-block { display: grid; gap: 8px; margin-top: 16px; }
.proof-thumb { display: block; width: 100%; max-width: 240px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); }
.proof-thumb img { display: block; width: 100%; height: auto; }

/* admin sidebar pending-payment count */
.nav-count {
  margin-left: auto;
  min-width: 22px;
  padding: 1px 7px;
  border-radius: var(--pill);
  background: var(--clay);
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
  text-align: center;
}
.kpi-link { display: inline-flex; align-items: center; gap: 5px; margin-top: 8px; font-size: .8rem; color: var(--clay-600); font-weight: 600; }

@media (max-width: 640px) {
  .pay-method, .order-strip .btn { min-height: 48px; }
  .qris-frame { max-width: min(100%, 320px); }
  .order-review-amount { text-align: left; }
}

/* ---------------- referral attribution (checkout) ---------------- */

/* Deliberately small: an optional line under the payment methods, never a
   promotional banner. It must not compete with the checkout itself. */
.referral-block {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: .88rem;
}
.referral-block-static { border-top: none; margin-top: 0; padding-top: 0; }
.referral-details summary {
  cursor: pointer;
  color: var(--ink-soft);
  font-weight: 500;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 4px 0;
}
.referral-details summary::-webkit-details-marker { display: none; }
.referral-details summary::before { content: "?"; display: none; }
.referral-details summary:hover { color: var(--clay-600); }
.referral-add { color: var(--clay-600); font-weight: 600; }
.referral-form { margin-top: 10px; max-width: 420px; }
.referral-form .field { margin: 0; }
.referral-form-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch; }
.referral-form-row .input { flex: 1 1 170px; min-width: 0; text-transform: uppercase; }
.referral-applied {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  color: #4F6349;
  font-weight: 500;
}
.referral-applied .icon { flex: none; }
.referral-code {
  padding: 2px 8px;
  border-radius: var(--pill);
  background: var(--bg-deep);
  color: var(--ink-soft);
  font-size: .78rem;
  letter-spacing: .5px;
}
.referral-note { margin: 8px 0 0; color: var(--muted); font-size: .78rem; }

@media (max-width: 640px) {
  .referral-form-row .btn { width: 100%; min-height: 48px; }
  .referral-details summary { min-height: 44px; }
}

/* ---------------- mentor review ---------------- */

.mentor-tag {
  padding: 3px 9px;
  border-radius: var(--pill);
  background: var(--plum-50, #F2EAF4);
  color: var(--plum, #7A4B7F);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .4px;
  text-transform: uppercase;
}

/* entry point on the class page: the owned Mentor Review label stays a label, it just
   becomes a link into the room */
.mr-entry-link {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-height: 32px;
}
.mr-entry-cta { color: var(--plum, #7A4B7F); font-weight: 600; }
.mr-entry-status { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 6px 0 0; }

/* room header */
.mr-header { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; justify-content: space-between; }
.mr-header-main { min-width: 0; }
.mr-header h1 { margin: 2px 0 4px; font-size: 1.4rem; }
.mr-header-class { margin: 0; color: var(--ink-soft); font-weight: 500; }
.mr-header-meta { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 10px; }
.mr-header-mentor, .mr-header-cycle { color: var(--muted); font-size: .84rem; display: inline-flex; align-items: center; gap: 5px; }

.mr-status-hint,
.mr-readonly-note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 16px 0 0;
  padding: 12px 14px;
  border-radius: var(--radius-lg);
  background: var(--bg-deep);
  color: var(--ink-soft);
  font-size: .88rem;
}
.mr-status-hint.is-complete { background: var(--sage-50); color: #4F6349; }
.mr-readonly-note { background: var(--bg-deep); color: var(--muted); }

.mr-room-grid { display: grid; gap: 24px; margin-top: 20px; align-items: start; }
@media (min-width: 1000px) {
  .mr-room-grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, .85fr); }
}

/* the conversation */
.mr-thread { display: grid; gap: 14px; }
.mr-thread-empty { margin: 0; padding: 18px; border-radius: var(--radius-lg); background: var(--bg-soft); color: var(--muted); font-size: .88rem; text-align: center; }
.mr-message {
  padding: 14px 16px;
  border-radius: var(--radius-lg);
  background: var(--surface-2);
  border: 1px solid var(--line);
  min-width: 0;
}
.mr-message.is-mine { background: var(--clay-50); border-color: transparent; }
.mr-message.is-mentor:not(.is-mine) { background: #F6F2FB; border-color: transparent; }
.mr-message-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; justify-content: space-between; margin-bottom: 6px; }
.mr-author { font-weight: 700; font-size: .88rem; }
.mr-time { color: var(--muted); font-size: .76rem; }
.mr-body { font-size: .92rem; color: var(--ink-soft); overflow-wrap: anywhere; }

.mr-system {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: var(--pill);
  background: var(--bg-deep);
  color: var(--muted);
  font-size: .8rem;
}

/* submission + recommendation + attachments inside a message */
.mr-submission {
  display: grid;
  gap: 4px;
  margin-bottom: 10px;
  padding: 12px 14px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--line);
}
.mr-sub-eyebrow, .mr-rec-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--plum, #7A4B7F);
  font-size: .74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .4px;
}
.mr-sub-title { color: var(--ink-soft); font-size: .86rem; }
.mr-submission p { margin: 4px 0 0; font-size: .88rem; color: var(--ink-soft); }

.mr-recommendation {
  display: grid;
  gap: 10px;
  margin-bottom: 10px;
  padding: 14px;
  border-radius: var(--radius-lg);
  background: #F6F2FB;
  border: 1px solid transparent;
}
.mr-rec-body { display: grid; gap: 14px; }
@media (min-width: 560px) { .mr-rec-body { grid-template-columns: 116px minmax(0, 1fr); } }
.mr-rec-cover { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--radius); }
.mr-rec-copy { display: grid; gap: 8px; min-width: 0; }
.mr-rec-copy h4 { margin: 0; font-size: 1rem; }
.mr-rec-copy p { margin: 0; color: var(--ink-soft); font-size: .88rem; }
.mr-rec-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.mr-rec-copy .btn { justify-self: start; }
.mr-rec-note { margin: 0; color: var(--muted); font-size: .76rem; }

.mr-attachments { display: grid; gap: 8px; margin: 10px 0 0; padding: 0; list-style: none; }
.mr-attachments li { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.mr-attachments a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  border-radius: var(--pill);
  background: var(--surface);
  border: 1px solid var(--line);
  font-size: .82rem;
  min-height: 38px;
  overflow-wrap: anywhere;
}
.mr-attachment-thumb { padding: 0 !important; border: none !important; background: none !important; border-radius: var(--radius) !important; }
.mr-attachment-thumb img { width: 84px; height: 84px; object-fit: cover; border-radius: var(--radius); display: block; }

/* composer */
.mr-composer { display: grid; gap: 12px; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); }
.mr-composer-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; justify-content: space-between; }
.mr-file-field { flex: 1 1 260px; margin: 0; }
.mr-composer .field { margin: 0; }
.mr-composer .btn { min-height: 48px; }

/* mentor + admin rows */
.mr-mentor-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; }
.mr-mentor-row.is-urgent { border-left: 4px solid var(--plum, #7A4B7F); }
.mr-mentor-main { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; min-width: 0; }
.mr-mentor-student { font-weight: 700; }
.mr-mentor-class { color: var(--ink-soft); }
.mr-mentor-meta { color: var(--muted); font-size: .82rem; }
.mr-stat-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.mr-room-row { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.mr-room-cover { width: 108px; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--radius); flex: none; }
.mr-room-copy { flex: 1 1 220px; min-width: 0; }
.mr-room-head { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.mr-room-mentor { color: var(--muted); font-size: .82rem; display: inline-flex; align-items: center; gap: 5px; }
.mr-room-copy h2 { margin: 6px 0 4px; font-size: 1.08rem; }
.mr-room-meta { margin: 0; color: var(--muted); font-size: .84rem; }

.mr-facts { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mr-facts > div { display: grid; gap: 3px; min-width: 0; }
.mr-facts span { color: var(--muted); font-size: .78rem; }
.mr-facts strong { font-size: .92rem; overflow-wrap: anywhere; }
@media (min-width: 900px) { .mr-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.mr-complete-card { border: 1px solid var(--plum-50, #F2EAF4); }
.mr-complete-card h2 { margin-top: 0; }
.mr-work-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.mr-work-list li { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.mr-work-name { font-weight: 600; font-size: .88rem; }
.mr-assign-form { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.mr-assign-form .field { flex: 1 1 240px; }
.mr-event-row { grid-template-columns: minmax(0, 1fr); }
.mr-event { display: grid; gap: 3px; padding: 12px 14px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); }
.mr-event strong { font-size: .84rem; }
.mr-event span { color: var(--ink-soft); font-size: .84rem; overflow-wrap: anywhere; }

@media (max-width: 640px) {
  .mr-composer .btn, .mr-mentor-row .btn, .mr-room-row .btn { min-height: 48px; width: 100%; }
  .mr-room-cover { width: 100%; aspect-ratio: 16 / 9; }
  .mr-stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mr-assign-form .btn { width: 100%; }
}

/* ---------------- mentor program / application ---------------- */

/* the required marker must read as mandatory, not as decoration */
.mentorapp-required { color: var(--clay-600); font-weight: 700; }

.mentorapp-video-field { padding: 16px; border-radius: var(--radius-lg); background: var(--bg-soft); border: 1px solid var(--line); }
.mentorapp-video-help { margin: 4px 0 8px; }
.mentorapp-video-tips { margin: 0 0 12px; padding-left: 18px; color: var(--muted); font-size: .82rem; display: grid; gap: 3px; }
.mentorapp-video-field input[type="file"] { max-width: 100%; padding: 10px; }
.mentorapp-video-current { display: flex; align-items: center; gap: 7px; margin: 0 0 10px; color: #4F6349; font-weight: 600; font-size: .88rem; }

.mentorapp-upload { margin-top: 12px; }
.mentorapp-upload-bar { height: 8px; border-radius: var(--pill); background: var(--bg-deep); overflow: hidden; }
.mentorapp-upload-bar span { display: block; height: 100%; width: 0; background: var(--clay); transition: width .2s ease; }
.mentorapp-upload-text { margin: 6px 0 0; font-size: .82rem; color: var(--muted); }
.mentorapp-video-error { margin: 10px 0 0; padding: 10px 12px; border-radius: var(--radius); background: var(--clay-50); color: var(--clay-600); font-size: .86rem; font-weight: 500; }
.mentorapp-video-ok { display: flex; align-items: center; gap: 7px; margin: 10px 0 0; color: #4F6349; font-size: .86rem; font-weight: 600; }

/* the video player: responsive, never wider than its card, usable on a phone */
.mentorapp-video {
  display: block;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  background: #000;
  border: 1px solid var(--line);
}
.mentorapp-profile { display: flex; align-items: center; gap: 14px; }
.mentorapp-profile > div { display: grid; gap: 2px; min-width: 0; }
.mentorapp-profile span { overflow-wrap: anywhere; }

.mentorapp-meta { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 16px 0 0; }
.mentorapp-meta > div { display: grid; gap: 3px; min-width: 0; }
.mentorapp-meta span { color: var(--muted); font-size: .78rem; }
.mentorapp-meta strong { font-size: .9rem; overflow-wrap: anywhere; }
@media (min-width: 900px) { .mentorapp-meta { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.mentorapp-note { margin-top: 16px; padding: 14px 16px; border-radius: var(--radius-lg); background: var(--clay-50); }
.mentorapp-note-label { display: inline-flex; align-items: center; gap: 6px; color: var(--clay-600); font-weight: 700; font-size: .8rem; }
.mentorapp-note p { margin: 6px 0 0; color: var(--ink-soft); font-size: .9rem; overflow-wrap: anywhere; }

.mentorapp-check {
  display: inline-grid; place-items: center;
  width: 54px; height: 54px; margin-bottom: 10px;
  border-radius: 50%; background: var(--sage-50); color: #4F6349;
}
.mentorapp-confirm .hub-hero-copy { display: grid; gap: 8px; }

.mentorapp-classes { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.mentorapp-classes li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: .9rem; }

.mentorapp-timeline { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.mentorapp-timeline li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: .86rem; }
.mentorapp-timeline-note { color: var(--ink-soft); overflow-wrap: anywhere; }

.mentorapp-screen-list { display: grid; gap: 6px; margin: 8px 0 0; padding: 0; list-style: none; }
.mentorapp-screen-list li { display: flex; align-items: center; gap: 7px; color: var(--ink-soft); font-size: .86rem; }

.mentorapp-decisions { display: grid; gap: 10px; }
@media (min-width: 560px) { .mentorapp-decisions { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.mentorapp-decisions .btn { width: 100%; }

@media (max-width: 640px) {
  .mentorapp-video-field input[type="file"] { font-size: .8rem; }
  .mentorapp-decisions .btn, .mentorapp-video-field ~ * .btn { min-height: 48px; }
}

.mentorapp-list-title { margin: 4px 0 6px; font-size: 1.15rem; }

/* Admin → Mentor Review: non-blocking notice when a hand-picked mentor is outside the
   class's relevance. It must read as information, never as an error. */
.mr-assign-warning {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  flex: 1 1 100%;
  max-width: 62ch;
  padding: 10px 12px;
  border-radius: var(--radius);
  background: #FBF1E2;
  color: #9A6C22;
  font-size: .84rem;
}
.mr-assign-warning .icon { flex: none; margin-top: 1px; }
.mr-assign-form .help { display: block; margin-top: 6px; }

/* =====================================================================
   Communication Center (member ↔ ALLDAYS) + public "Need Help?" widget
   ===================================================================== */

.page-messages { background: var(--bg); }
.comm-page { padding: 24px 0 56px; }

.comm-head { max-width: 640px; margin-bottom: 6px; }
.comm-head h1 { margin-bottom: 6px; }

.avatar-xs { width: 26px; height: 26px; font-size: .66rem; }

/* ---------------- filters / search ---------------- */

.comm-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
  margin: 18px 0 20px;
}
.comm-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.comm-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 8px 15px;
  border-radius: var(--pill);
  border: 1px solid var(--line);
  background: var(--surface);
  font-size: .86rem;
  font-weight: 600;
  color: var(--ink-soft);
}
.comm-tab:hover { border-color: var(--line-strong); color: var(--ink); }
.comm-tab.is-active { background: var(--clay); border-color: var(--clay); color: #fff; }
.comm-tab.is-active:hover { color: #fff; }
.comm-tab-count {
  font-size: .72rem;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: var(--pill);
  background: var(--bg-deep);
  color: var(--ink-soft);
}
.comm-tab.is-active .comm-tab-count { background: rgba(255, 255, 255, .26); color: #fff; }

.comm-search {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 250px;
  max-width: 430px;
  padding: 4px 6px 4px 14px;
  border: 1px solid var(--line);
  border-radius: var(--pill);
  background: var(--surface);
  color: var(--muted);
}
.comm-search .input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: transparent;
  padding: 6px 0;
  min-height: 34px;
}
.comm-search .input:focus { outline: none; }
.comm-search .btn { min-height: 36px; flex: none; }

/* ---------------- inbox list ---------------- */

.comm-list { display: grid; gap: 16px; }
.comm-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 14px;
  align-items: start;
  padding: 18px;
  color: inherit;
}
.comm-row:hover { border-color: var(--line-strong); color: inherit; }
.comm-row.is-unread { border-left: 4px solid var(--clay); }
.comm-row-avatar { display: block; }
.comm-row-main { display: grid; gap: 6px; min-width: 0; }
.comm-row-top {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  align-items: baseline;
  justify-content: space-between;
}
.comm-row-name { font-family: var(--font-display); font-size: 1.04rem; }
.comm-row-time { color: var(--muted); font-size: .78rem; }
.comm-row-subject { font-weight: 600; font-size: .9rem; overflow-wrap: anywhere; }
.comm-row-preview { color: var(--ink-soft); font-size: .88rem; overflow-wrap: anywhere; }
.comm-row-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.comm-row-count { color: var(--muted); font-size: .78rem; }
.comm-row-unread {
  align-self: center;
  min-width: 27px;
  height: 27px;
  padding: 0 7px;
  display: grid;
  place-items: center;
  border-radius: var(--pill);
  background: var(--clay);
  color: #fff;
  font-size: .76rem;
  font-weight: 700;
}
.comm-list-note { margin: 18px 0 0; color: var(--muted); font-size: .82rem; }

.comm-empty-grid { display: grid; gap: 22px; align-items: start; }

/* ---------------- the video policy panel ---------------- */

.comm-policy-title { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: .98rem; }
.comm-policy p { color: var(--ink-soft); font-size: .88rem; }
.comm-policy-example {
  display: grid;
  gap: 2px;
  margin: 14px 0 0;
  padding: 8px 0 8px 12px;
  border-left: 3px solid var(--clay);
}
.comm-policy-example span:first-child { font-weight: 600; font-size: .9rem; }
.comm-policy-example span:last-child { color: var(--muted); font-size: .82rem; }

/* pre-student contact card */
.comm-contact-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.comm-contact-actions .btn { min-height: 46px; }
.comm-contact-note {
  display: grid;
  gap: 10px;
  justify-items: center;
  margin-top: 10px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.comm-contact-note strong { font-family: var(--font-display); font-size: 1.02rem; }

/* ---------------- conversation ---------------- */

.comm-room-head {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: flex-start;
  justify-content: space-between;
}
.comm-room-who { display: flex; gap: 14px; align-items: center; min-width: 0; }
.comm-room-who > div { min-width: 0; }
.comm-room-who h1, .comm-room-who h2 { margin: 4px 0 2px; }
.comm-room-subject { color: var(--ink-soft); margin: 0 0 8px; overflow-wrap: anywhere; }
.comm-room-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.comm-room-time { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); font-size: .8rem; }
.comm-room-side { display: flex; flex-wrap: wrap; gap: 10px; }
.comm-room-grid { display: grid; gap: 24px; margin-top: 20px; align-items: start; }

.comm-thread { display: grid; gap: 14px; }
.comm-thread-empty {
  margin: 0;
  padding: 18px;
  border-radius: var(--radius-lg);
  background: var(--bg-soft);
  color: var(--muted);
  font-size: .88rem;
  text-align: center;
}
.comm-message {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface-2);
}
.comm-message.is-mine { background: var(--clay-50); border-color: transparent; }
.comm-message.is-admin:not(.is-mine) { background: #F6F2FB; border-color: transparent; }
.comm-message-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.comm-author { font-weight: 600; font-size: .88rem; }
.comm-time { margin-left: auto; color: var(--muted); font-size: .76rem; }
.comm-body { overflow-wrap: anywhere; }
.comm-body-note { font-weight: 600; }

/* external links (video lives here, never as an upload) */
.comm-inline-links { display: grid; gap: 10px; }
.comm-link-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: inherit;
}
.comm-link-card:hover { border-color: var(--line-strong); color: inherit; }
.comm-link-mark {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: var(--clay-50);
  color: var(--clay-600);
}
.comm-link-copy { display: grid; gap: 2px; min-width: 0; }
.comm-link-title { font-size: .92rem; overflow-wrap: anywhere; }
.comm-link-provider { font-size: .8rem; font-weight: 600; color: var(--clay-600); }
/* a long Google Drive link must wrap, never widen the page */
.comm-link-url { font-size: .78rem; color: var(--muted); overflow-wrap: anywhere; word-break: break-all; }
.comm-link-cta {
  grid-column: 1 / -1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  font-size: .84rem;
  font-weight: 600;
  color: var(--clay-600);
}

/* attachments (image / PDF only) */
.comm-attachments { display: grid; gap: 10px; margin: 4px 0 0; padding: 0; list-style: none; }
.comm-attachment { display: grid; gap: 8px; min-width: 0; }
.comm-attachment-thumb { display: block; max-width: 100%; }
.comm-attachment-thumb img {
  max-width: min(100%, 320px);
  height: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.comm-attachment-name {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  min-height: 42px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: var(--pill);
  background: var(--surface);
  color: var(--ink);
  font-size: .86rem;
}
.comm-attachment-name span { min-width: 0; overflow-wrap: anywhere; }

/* composer */
.comm-composer { display: grid; gap: 14px; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); }
.comm-composer .field { margin: 0; }
.comm-composer-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; justify-content: space-between; }
.comm-file-field { flex: 1 1 250px; min-width: 0; }
.comm-composer .btn, .comm-send { min-height: 48px; }

/* the studio's "start a conversation" panel — an <details>, so it works without JS */
.comm-start-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 1.06rem;
  font-weight: 600;
  list-style: none;
}
.comm-start-summary::-webkit-details-marker { display: none; }
.comm-start-caret { margin-left: auto; }
.comm-start .form-grid { margin-top: 16px; }
.comm-start .btn { min-height: 46px; }

/* ---------------- notification center ---------------- */

.comm-notifications { display: grid; gap: 18px; }
.comm-notif-bar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; }
.comm-notif-count { color: var(--ink-soft); font-size: .9rem; }
.comm-notif-count strong { font-family: var(--font-display); font-size: 1.15rem; color: var(--clay-600); }
.comm-notif-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.comm-notif-actions form { margin: 0; }
.comm-notif-actions .btn { min-height: 40px; }
.comm-notif-list { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.comm-notif { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); overflow: hidden; }
.comm-notif.is-unread { border-left: 4px solid var(--clay); }
.comm-notif.is-read { opacity: .8; }
.comm-notif-link {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  min-height: 58px;
  padding: 14px 16px;
  color: inherit;
}
.comm-notif-link:hover { color: inherit; background: var(--surface-2); }
.comm-notif-mark {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 12px;
  background: var(--clay-50);
  color: var(--clay-600);
}
.comm-notif-copy { display: grid; gap: 3px; min-width: 0; }
.comm-notif-body { color: var(--ink-soft); font-size: .86rem; overflow-wrap: anywhere; }
.comm-notif-time { color: var(--muted); font-size: .76rem; }
.comm-notif-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--clay); }

/* ---------------- header bell (admin topbar / notifications entry) ---------------- */

.header-bell {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  flex: none;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface);
  color: var(--ink-soft);
}
.header-bell:hover { color: var(--clay-600); border-color: var(--line-strong); }
.header-bell .nav-count { position: absolute; top: -5px; right: -5px; margin: 0; }

/* ---------------- public / pre-student "Need Help?" ---------------- */

/* The floating widget reserves the strip of screen it occupies, so it can never sit on
   top of the last control on a page (a fixed button that covers a CTA is a real usability
   bug, not just a test annoyance). `:has()` is progressive: a browser without it simply
   gets no extra padding. */
body:has(.help-widget) { padding-bottom: 78px; }
.help-widget { position: fixed; right: 18px; bottom: 18px; z-index: 70; }
.help-panel { position: relative; }
.help-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 12px 18px;
  border-radius: var(--pill);
  background: var(--clay);
  color: #fff;
  font-size: .9rem;
  font-weight: 600;
  box-shadow: var(--shadow-lg);
  cursor: pointer;
  list-style: none;
}
.help-trigger::-webkit-details-marker { display: none; }
.help-trigger:hover { background: var(--clay-600); color: #fff; }
.help-card {
  position: absolute;
  right: 0;
  bottom: calc(100% + 12px);
  width: min(320px, calc(100vw - 36px));
  display: grid;
  gap: 14px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
}
.help-card-head { display: grid; gap: 4px; }
.help-card-head strong { font-family: var(--font-display); font-size: 1.1rem; }
.help-card-head span { color: var(--muted); font-size: .86rem; }
.help-actions { display: grid; gap: 10px; }
.help-action {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  min-height: 58px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
  color: inherit;
}
.help-action:hover { border-color: var(--line-strong); color: inherit; }
.help-action-mark {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 12px;
  background: var(--bg-deep);
  color: var(--clay-600);
}
.help-action-wa .help-action-mark { background: #E7F5EC; color: #2F7A47; }
.help-action-copy { display: grid; gap: 2px; min-width: 0; }
.help-action-copy strong { font-size: .9rem; }
.help-action-copy span { color: var(--muted); font-size: .8rem; overflow-wrap: anywhere; }
.help-note { margin: 0; color: var(--muted); font-size: .78rem; }

/* ---------------- responsive ---------------- */

@media (min-width: 900px) {
  .comm-empty-grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
  .comm-link-card { grid-template-columns: auto minmax(0, 1fr) auto; }
  .comm-link-cta { grid-column: auto; }
}

@media (min-width: 1000px) {
  /* like the Mentor Review room: the conversation is the page, the aside supports it */
  .comm-room-grid { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); }
}

@media (max-width: 640px) {
  .comm-page { padding: 18px 0 44px; }
  /* the unread badge drops to its own line instead of squeezing the name */
  .comm-row { grid-template-columns: auto minmax(0, 1fr); }
  .comm-row-unread { grid-column: 2; justify-self: end; }
  .comm-composer .btn, .comm-send, .comm-start .btn, .comm-search .btn { min-height: 48px; }
  .comm-search { flex: 1 1 100%; max-width: none; }
  .comm-notif-actions .btn { min-height: 48px; }
  .help-widget { right: 12px; bottom: 12px; }
  /* On a phone the trigger is a compact round button: the label is still announced
     (aria-label) but the footprint is small, which is what keeps the corner usable. */
  body:has(.help-widget) { padding-bottom: 86px; }
  .help-trigger { width: 56px; height: 56px; min-height: 56px; padding: 0; justify-content: center; border-radius: 50%; }
  .help-trigger > span { display: none; }
}

/* =====================================================================
   MENTOR ACADEMY — onboarding from Approved Mentor to Active Mentor
   ===================================================================== */

.academy-page { padding: 24px 0 60px; }
.page-mentor .nav-progress {
  font-size: .68rem;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: var(--pill);
  background: var(--clay-50);
  color: var(--clay-600);
}

/* ---------------- hero + progress ring ---------------- */

.academy-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  align-items: center;
  border: 1px solid var(--line);
}
.academy-hero.is-complete { background: linear-gradient(180deg, var(--sage-50), var(--surface)); }
.academy-hero-main { min-width: 0; }
.academy-hero-main h1 { margin-bottom: 8px; }
.academy-hero-meta { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; margin-top: 14px; }
.academy-meta-line { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-soft); font-size: .86rem; }
.academy-hero-side { display: grid; justify-items: center; gap: 10px; }

.academy-ring { position: relative; width: 150px; height: 150px; }
.academy-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.academy-ring circle { fill: none; stroke-width: 9; stroke-linecap: round; }
.academy-ring-track { stroke: var(--bg-deep); }
.academy-ring-fill { stroke: var(--clay); }
.academy-hero.is-complete .academy-ring-fill { stroke: var(--sage); }
.academy-ring-value {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 0;
}
.academy-ring-value strong { font-family: var(--font-display); font-size: 1.7rem; line-height: 1; }
.academy-ring-value span { color: var(--muted); font-size: .72rem; }
.academy-ring-note { margin: 0; color: var(--muted); font-size: .82rem; text-align: center; max-width: 22ch; }

.academy-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 18px 0 0;
  padding: 12px 16px;
  border-radius: var(--radius-lg);
  background: #FBF1E2;
  color: #9A6C22;
  font-size: .88rem;
}

/* ---------------- layout ---------------- */

.academy-grid { display: grid; gap: 22px; margin-top: 22px; align-items: start; }
.academy-main { min-width: 0; display: grid; gap: 0; }
.academy-progress-value { font-family: var(--font-display); font-size: 1.15rem; color: var(--clay-600); }

/* ---------------- your progress checklist ---------------- */

.academy-checklist { display: grid; gap: 10px; margin: 18px 0 0; padding: 0; list-style: none; }
.academy-check {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--surface);
}
.academy-check.is-current { border-color: var(--clay); background: var(--clay-50); }
.academy-check.is-done .academy-check-mark { background: var(--sage-50); color: #4F6349; }
.academy-check.is-current .academy-check-mark { background: #fff; color: var(--clay-600); }
.academy-check-mark {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--bg-deep);
  color: var(--muted);
}
.academy-check-copy { display: grid; gap: 2px; min-width: 0; }
.academy-check-copy strong { font-size: .95rem; }
.academy-check-copy span { color: var(--muted); font-size: .8rem; }
.academy-check-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 44px;
  font-size: .84rem;
  font-weight: 600;
  white-space: nowrap;
}
.academy-check.is-assessment { background: var(--bg-soft); }
.academy-check.is-assessment.is-done { background: var(--sage-50); }

/* ---------------- module accordion ---------------- */

.academy-modules { display: grid; gap: 12px; margin-top: 6px; }
.academy-module {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  overflow: hidden;
}
.academy-module[open] { border-color: var(--line-strong); }
.academy-module-summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 16px;
  cursor: pointer;
  list-style: none;
}
.academy-module-summary::-webkit-details-marker { display: none; }
.academy-module-index {
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--clay);
  min-width: 28px;
}
.academy-module-copy { display: grid; gap: 3px; min-width: 0; }
.academy-module-copy strong { font-family: var(--font-display); font-size: 1.05rem; }
.academy-module-desc { color: var(--muted); font-size: .82rem; }
.academy-module-meta { display: flex; align-items: center; gap: 8px; }
.academy-module-count, .academy-done-chip { font-size: .78rem; color: var(--muted); white-space: nowrap; }
.academy-done-chip { display: inline-flex; align-items: center; gap: 5px; color: #4F6349; font-weight: 600; }
.academy-module-caret { transition: transform .18s ease; }
.academy-module[open] .academy-module-caret { transform: rotate(180deg); }

.academy-lesson-list { display: grid; gap: 0; margin: 0; padding: 0 16px 14px; list-style: none; }
.academy-lesson-row { border-top: 1px solid var(--line); }
.academy-lesson-link {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  min-height: 58px;
  padding: 12px 0;
  color: inherit;
}
.academy-lesson-link:hover { color: var(--clay-600); }
.academy-lesson-mark {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--bg-deep);
  color: var(--muted);
}
.academy-lesson-row.is-done .academy-lesson-mark { background: var(--sage-50); color: #4F6349; }
.academy-lesson-copy { display: grid; gap: 2px; min-width: 0; }
.academy-lesson-copy strong { font-size: .94rem; }
.academy-lesson-copy span { color: var(--muted); font-size: .8rem; }
.academy-lesson-time { color: var(--muted); font-size: .78rem; white-space: nowrap; }

/* ---------------- aside ---------------- */

.academy-aside-ok { display: flex; align-items: center; gap: 7px; color: #4F6349; font-weight: 600; font-size: .88rem; }
.academy-locked {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border-radius: var(--radius);
  background: var(--bg-soft);
  color: var(--ink-soft);
  font-size: .86rem;
}

/* ---------------- the lesson page ---------------- */

.academy-lesson-layout { display: grid; gap: 22px; align-items: start; }
.academy-nav { min-width: 0; }
.academy-nav-details {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  overflow: hidden;
}
.academy-nav-summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 14px 16px;
  cursor: pointer;
  list-style: none;
  font-size: .9rem;
  font-weight: 600;
}
.academy-nav-summary::-webkit-details-marker { display: none; }
.academy-nav-summary em { display: block; color: var(--muted); font-size: .78rem; font-style: normal; font-weight: 500; }
.academy-nav-caret { transition: transform .18s ease; }
.academy-nav-details[open] .academy-nav-caret { transform: rotate(180deg); }
.academy-nav-list { display: grid; gap: 2px; margin: 0; padding: 0 8px 10px; list-style: none; }
.academy-nav-list a {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-height: 44px;
  padding: 8px 10px;
  border-radius: var(--radius);
  color: var(--ink-soft);
  font-size: .88rem;
}
.academy-nav-list a:hover { background: var(--bg-soft); color: var(--ink); }
.academy-nav-list li.is-current a { background: var(--clay-50); color: var(--clay-600); font-weight: 600; }
.academy-nav-list li.is-done .academy-nav-mark { color: #4F6349; }
.academy-nav-mark { display: grid; place-items: center; width: 20px; height: 20px; color: var(--muted); }
.academy-nav-progress { display: grid; gap: 6px; margin-top: 12px; }
.academy-nav-progress span { color: var(--muted); font-size: .78rem; }

.academy-lesson { min-width: 0; }
.academy-lesson-head h1 { margin: 6px 0 8px; }
.academy-lesson-summary { color: var(--ink-soft); font-size: 1rem; }
.academy-lesson-meta { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; margin-top: 10px; color: var(--muted); font-size: .82rem; }
.academy-lesson-meta .status-pill { display: inline-flex; align-items: center; gap: 5px; }

/* lesson content (the closed markup subset) */
.academy-content { margin-top: 22px; }
.academy-content p { color: var(--ink-soft); }
.academy-content .academy-h {
  margin: 26px 0 10px;
  font-size: 1.16rem;
  font-family: var(--font-display);
}
.academy-content .academy-h:first-child { margin-top: 0; }
.academy-list { display: grid; gap: 7px; margin: 12px 0 18px; padding-left: 20px; color: var(--ink-soft); }
.academy-list li { padding-left: 2px; }
.academy-callout {
  margin: 20px 0;
  padding: 16px 18px;
  border-left: 4px solid var(--clay);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--clay-50);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 1.02rem;
  line-height: 1.5;
}
.academy-figure { margin: 20px 0; }
.academy-figure img { width: 100%; border-radius: var(--radius-lg); }
.academy-figure figcaption { margin-top: 8px; color: var(--muted); font-size: .8rem; }

.academy-lesson-foot {
  display: grid;
  gap: 16px;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.academy-lesson-actions form { margin: 0; }
.academy-lesson-nav { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; }

/* ---------------- the final assessment ---------------- */

.academy-assessment-head .academy-assessment-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin-top: 12px;
  color: var(--muted);
  font-size: .84rem;
}
.academy-assessment-meta span { display: inline-flex; align-items: center; gap: 6px; }
.academy-assessment-form { display: grid; gap: 18px; margin-top: 22px; }
.academy-questions { display: grid; gap: 18px; margin: 0; padding: 0; list-style: none; }
.academy-question h2 { font-size: 1.1rem; margin: 6px 0 14px; }
.academy-scenario {
  display: inline-block;
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--clay);
}
.academy-options { display: grid; gap: 10px; }
.academy-option { display: block; cursor: pointer; }
.academy-option input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.academy-option-body {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  min-height: 52px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  transition: border-color .15s ease, background .15s ease;
}
.academy-option:hover .academy-option-body { border-color: var(--line-strong); }
.academy-option input:checked + .academy-option-body { border-color: var(--clay); background: var(--clay-50); }
.academy-option input:focus-visible + .academy-option-body { outline: 2px solid var(--clay); outline-offset: 2px; }
.academy-option-letter {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--bg-deep);
  color: var(--ink-soft);
  font-size: .8rem;
  font-weight: 700;
}
.academy-option input:checked + .academy-option-body .academy-option-letter { background: var(--clay); color: #fff; }
.academy-option-text { color: var(--ink-soft); font-size: .92rem; }
.academy-submit { display: grid; gap: 14px; justify-items: start; }
.academy-submit .btn { width: 100%; max-width: 320px; }

/* result */
.academy-result { display: grid; gap: 12px; justify-items: start; }
.academy-result.is-passed { background: linear-gradient(180deg, var(--sage-50), var(--surface)); }
.academy-result.is-failed { background: linear-gradient(180deg, #FBF1E2, var(--surface)); }
.academy-result-mark {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--surface);
  color: var(--clay-600);
}
.academy-result.is-passed .academy-result-mark { color: #4F6349; }
.academy-result h1 { font-size: clamp(1.4rem, 3.6vw, 2rem); margin: 0; }
.academy-result-score { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 4px 0 8px; }
.academy-result-score strong { font-family: var(--font-display); font-size: 2.2rem; }
.academy-result-score span { color: var(--ink-soft); font-size: .88rem; }
.academy-locked-panel { display: grid; gap: 14px; justify-items: start; }

/* per-question feedback */
.academy-feedback { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; counter-reset: none; }
.academy-feedback-item {
  display: grid;
  gap: 10px;
  padding: 16px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: var(--surface);
}
.academy-feedback-item.is-correct { border-color: #CBDCC4; background: #F7FAF6; }
.academy-feedback-item.is-wrong { border-color: #EBD9C0; background: #FEFAF5; }
.academy-feedback-head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: start; }
.academy-feedback-head .academy-scenario { grid-column: 2; }
.academy-feedback-head strong { grid-column: 2; font-size: .96rem; }
.academy-feedback-mark {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--bg-deep);
  color: var(--ink-soft);
}
.academy-feedback-item.is-correct .academy-feedback-mark { background: var(--sage-50); color: #4F6349; }
.academy-feedback-item.is-wrong .academy-feedback-mark { background: #FBF1E2; color: #9A6C22; }
.academy-feedback-options { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.academy-feedback-options li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
  padding: 10px 12px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--line);
  font-size: .88rem;
  color: var(--ink-soft);
}
.academy-feedback-options li.is-right { border-color: #CBDCC4; color: var(--ink); }
.academy-feedback-options li.is-chosen-wrong { border-color: #EBD9C0; }
.academy-tag {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #4F6349;
  white-space: nowrap;
}
.academy-tag-wrong { color: #9A6C22; }
.academy-feedback-why {
  display: flex;
  gap: 8px;
  margin: 0;
  padding: 12px 14px;
  border-radius: var(--radius);
  background: var(--bg-soft);
  color: var(--ink-soft);
  font-size: .86rem;
}

/* attempt history */
.academy-attempt-list { display: grid; gap: 8px; }
.academy-attempt {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--surface);
  font-size: .86rem;
}
.academy-attempt-detail { color: var(--muted); }
.academy-attempt-date { color: var(--muted); }
.academy-attempt strong { font-family: var(--font-display); font-size: 1.05rem; }

/* ---------------- dashboard card ---------------- */

.mentor-status-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 12px; }
.mentor-status-note { color: var(--muted); font-size: .84rem; }
.academy-card { margin-bottom: 26px; border: 1px solid var(--line-strong); }
.academy-card.is-complete { background: linear-gradient(180deg, var(--sage-50), var(--surface)); border-color: #CBDCC4; }
.academy-card-title { display: flex; align-items: center; gap: 8px; margin: 6px 0 6px; }
.academy-card-check { color: #4F6349; }
.academy-card-lead { color: var(--ink-soft); }
.academy-card-progress { display: grid; gap: 8px; margin: 14px 0 16px; max-width: 520px; }
.academy-card-progress span { color: var(--muted); font-size: .82rem; }

/* the Creator Hub doorway to a live Academy */
.academy-doorway-progress { display: grid; gap: 8px; margin-top: 16px; max-width: 540px; }
.academy-doorway-progress span { color: var(--muted); font-size: .84rem; }

/* ---------------- admin ---------------- */

.academy-admin { display: grid; gap: 22px; }
/* Load-bearing, exactly like the `.grid > *` rule elsewhere: without it the mentor table inside
   .table-wrap stretches the page (measured 568px of overflow at 390px). */
.academy-admin > * { min-width: 0; }
.academy-admin-facts > * { min-width: 0; }
.admin-kpi-row { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.admin-kpi {
  padding: 16px 18px;
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-xs);
}
.admin-kpi strong { display: block; font-family: var(--font-display); font-size: 1.6rem; line-height: 1.1; }
.admin-kpi span { color: var(--muted); font-size: .8rem; }
.academy-admin-facts { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.academy-admin-facts > div { display: grid; gap: 3px; min-width: 0; }
.academy-admin-facts span { color: var(--muted); font-size: .78rem; }
.academy-admin-facts strong { font-size: .92rem; overflow-wrap: anywhere; }
.academy-admin-lessons { display: grid; gap: 6px; margin: 10px 0 0; padding: 0; list-style: none; }
.academy-admin-lessons li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: .86rem; color: var(--ink-soft); }
.academy-admin-lessons li.is-done { color: #4F6349; font-weight: 600; }
.academy-admin-lessons.is-editable li {
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
.academy-admin-lessons.is-editable li.is-inactive { opacity: .62; }
.academy-admin-lesson-name { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: center; min-width: 0; }
.academy-admin-lesson-name > span { display: grid; gap: 2px; min-width: 0; }
.academy-admin-lesson-name strong { font-size: .9rem; overflow-wrap: anywhere; }
.academy-admin-lesson-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.academy-admin-lesson-actions .btn { min-height: 36px; }
.inline-form { display: inline-flex; margin: 0; }
.icon-btn .rot-up { transform: rotate(90deg); }
.icon-btn .rot-down { transform: rotate(-90deg); }

.academy-admin-module {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  margin-top: 14px;
  overflow: hidden;
}
.academy-admin-module-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 16px;
  cursor: pointer;
  list-style: none;
}
.academy-admin-module-head::-webkit-details-marker { display: none; }
.academy-admin-index { font-family: var(--font-display); font-size: 1.05rem; color: var(--clay); }
.academy-admin-module-copy { display: grid; gap: 3px; min-width: 0; }
.academy-admin-module-copy strong { font-size: 1rem; }
.academy-admin-module-body { padding: 0 16px 16px; display: grid; gap: 16px; }
.academy-admin-controls { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.academy-admin-controls .btn { min-height: 36px; }
.academy-admin-module-form { padding-top: 14px; border-top: 1px solid var(--line); }
.academy-admin-add { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); }
.academy-content-field { min-height: 320px; font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace; font-size: .86rem; }
.academy-markup-help { margin: 0; }
.academy-admin-bar { display: grid; gap: 6px; min-width: 140px; }
.academy-admin-bar span { color: var(--muted); font-size: .78rem; }

/* ---------------- responsive ---------------- */

@media (min-width: 640px) {
  .admin-kpi-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .academy-lesson-nav { justify-content: space-between; }
}

@media (min-width: 900px) {
  .academy-hero { grid-template-columns: minmax(0, 1fr) auto; }
  .academy-grid { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
  .academy-lesson-layout { grid-template-columns: minmax(0, 260px) minmax(0, 1fr); }
  .academy-nav { position: sticky; top: 18px; }
  .admin-kpi-row { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .academy-admin-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .academy-page { padding: 16px 0 44px; }
  /* every action stays a comfortable tap target on a phone */
  .academy-lesson-actions .btn,
  .academy-lesson-nav .btn,
  .academy-submit .btn,
  .academy-check-link,
  .academy-admin-controls .btn,
  .academy-admin-lesson-actions .btn { min-height: 44px; }
  .academy-admin-lesson-actions .btn { flex: 1 1 auto; }
  .academy-attempt { grid-template-columns: auto auto minmax(0, 1fr); }
  .academy-attempt .status-pill { grid-column: 1 / -1; justify-self: start; }
  .academy-checklist .academy-check { grid-template-columns: auto minmax(0, 1fr); }
  .academy-check-link { grid-column: 2; justify-self: start; }
  .academy-module-summary { grid-template-columns: auto minmax(0, 1fr); }
  .academy-module-meta { grid-column: 2; justify-content: flex-start; }
  .academy-ring { width: 128px; height: 128px; }
}

/* =====================================================================
   CAMPAIGNS — public opportunities (create) + the classes they promote
   (discover), and the studio's campaign manager
   ===================================================================== */

.campaigns-page { padding-bottom: 8px; }
.page-campaigns .site-header, .page-campaign .site-header { position: relative; z-index: 5; }

/* ---------------- public hero ---------------- */

.campaign-hero {
  display: grid;
  gap: 26px;
  padding-top: 40px;
  padding-bottom: 34px;
  align-items: start;
}
.campaign-hero-copy { min-width: 0; }
.campaign-hero-copy h1 { margin-bottom: 14px; }
.campaign-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
.campaign-hero-note {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 18px 0 0;
  padding: 8px 14px;
  border-radius: var(--pill);
  background: var(--sage-50);
  color: #4F6349;
  font-size: .84rem;
  font-weight: 600;
}
.campaign-hero-side { display: grid; gap: 14px; min-width: 0; }
.campaign-audience {
  display: grid;
  gap: 6px;
  padding: 18px;
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-xs);
}
.campaign-audience-mark {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: var(--clay-50);
  color: var(--clay-600);
}
.campaign-audience strong { font-family: var(--font-display); font-size: 1.05rem; }
.campaign-audience p { margin: 0; color: var(--ink-soft); font-size: .88rem; }

/* ---------------- the relationship + the honest note ---------------- */

.campaign-explain { padding-top: 10px; }
.campaign-explain-grid { display: grid; gap: 22px; align-items: start; }
.campaign-path h2 { font-size: clamp(1.2rem, 3vw, 1.6rem); }
.campaign-steps {
  display: grid;
  gap: 14px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}
.campaign-step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}
.campaign-step-num {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: 50%;
  background: var(--clay-50);
  color: var(--clay-600);
  font-size: .84rem;
  font-weight: 700;
}
.campaign-step-copy { display: grid; gap: 2px; min-width: 0; }
.campaign-step-copy strong { font-size: .96rem; }
.campaign-step-copy span { color: var(--muted); font-size: .86rem; }

.campaign-honest { border-color: #EBD9C0; background: linear-gradient(180deg, #FEFAF5, var(--surface)); }
.campaign-honest-list { display: grid; gap: 12px; margin: 16px 0 0; padding: 0; list-style: none; }
.campaign-honest-list li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: start; color: var(--ink-soft); font-size: .88rem; }
.campaign-honest-list .icon { margin-top: 2px; color: #9A6C22; }
.campaign-honest-note {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.campaign-honest-note strong { display: block; margin-bottom: 6px; font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.campaign-honest-note p { margin: 0; font-family: var(--font-display); font-size: 1rem; line-height: 1.5; }

/* ---------------- campaign cards ---------------- */

.campaign-grid {
  display: grid;
  gap: 20px;
  grid-auto-rows: 1fr;
  grid-template-columns: minmax(0, 1fr);
}
.campaign-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 22px;
  min-width: 0;
}
.campaign-card.is-inactive { opacity: .82; }
.campaign-card-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.campaign-card-title { margin: 0; font-size: 1.14rem; }
.campaign-card-summary { margin: 0; color: var(--ink-soft); font-size: .92rem; }
.campaign-card-facts { display: grid; gap: 10px; margin: 4px 0 0; }
.campaign-card-facts > div { display: grid; gap: 2px; min-width: 0; }
.campaign-card-facts dt { color: var(--muted); font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; }
.campaign-card-facts dd { margin: 0; font-size: .9rem; font-weight: 600; overflow-wrap: anywhere; }
/* margin-top:auto pins the actions to the same offset in every card, together with
   grid-auto-rows:1fr on the container (the technique the hub cards already use). */
.campaign-card-foot { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: auto; padding-top: 6px; }
.campaign-card-comp { font-family: var(--font-display); font-size: 1rem; color: var(--clay-600); margin-right: auto; }

/* ---------------- the two audiences ---------------- */

.campaign-split { display: grid; gap: 22px; align-items: start; }
.campaign-split-card { display: grid; gap: 12px; justify-items: start; }
.campaign-split-card h2 { margin: 0; font-size: 1.2rem; }
.campaign-split-card p { margin: 0; color: var(--ink-soft); font-size: .92rem; }
.campaign-split-card.is-discover { background: linear-gradient(180deg, var(--sage-50), var(--surface)); }
.campaign-split-mark {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: var(--clay-50);
  color: var(--clay-600);
}
.campaign-split-card.is-discover .campaign-split-mark { background: #fff; color: #4F6349; }
.campaign-split-list { display: grid; gap: 8px; margin: 4px 0 0; padding: 0; list-style: none; }
.campaign-split-list li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 9px; align-items: start; color: var(--ink-soft); font-size: .88rem; }
.campaign-split-list .icon { margin-top: 3px; color: var(--clay-600); }
.campaign-split-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }

/* ---------------- four separate revenue streams ---------------- */

.campaign-streams { margin-top: 22px; }
.campaign-streams h2 { margin-bottom: 6px; }
.campaign-stream-grid { display: grid; gap: 16px; margin-top: 18px; grid-template-columns: minmax(0, 1fr); }
.campaign-stream {
  display: grid;
  gap: 4px;
  padding: 16px;
  border-radius: var(--radius);
  background: var(--bg-soft);
  border: 1px solid var(--line);
}
.campaign-stream strong { font-size: .92rem; }
.campaign-stream span { color: var(--muted); font-size: .84rem; }

/* ---------------- one campaign ---------------- */

.campaign-detail-hero {
  display: grid;
  gap: 22px;
  margin-top: 4px;
  align-items: start;
}
.campaign-detail-hero.is-inactive { background: linear-gradient(180deg, var(--bg-soft), var(--surface)); }
.campaign-detail-hero-main { min-width: 0; }
.campaign-detail-hero-main h1 { margin: 12px 0 10px; font-size: clamp(1.4rem, 3.6vw, 2.1rem); }
.campaign-detail-badges { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.campaign-state-note {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 12px 0 0;
  padding: 9px 14px;
  border-radius: var(--radius);
  background: #FBF1E2;
  color: #9A6C22;
  font-size: .84rem;
}
.campaign-detail-hero-side { display: grid; gap: 12px; min-width: 0; }
.campaign-comp {
  display: grid;
  gap: 4px;
  padding: 18px;
  border-radius: var(--radius-lg);
  background: var(--bg-soft);
  border: 1px solid var(--line);
}
.campaign-comp-label { color: var(--muted); font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; }
.campaign-comp strong { font-family: var(--font-display); font-size: 1.5rem; line-height: 1.15; }
.campaign-comp-note { color: var(--ink-soft); font-size: .82rem; }
.campaign-hero-discover { width: 100%; }

.campaign-detail-grid { display: grid; gap: 22px; margin-top: 22px; align-items: start; }
.campaign-create { min-width: 0; }
.campaign-create h2 { margin-bottom: 14px; }
.campaign-create p { color: var(--ink-soft); }
.campaign-sub { margin: 24px 0 10px; font-size: 1.06rem; }
.campaign-check-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.campaign-check-list li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: start; color: var(--ink-soft); font-size: .9rem; }
.campaign-check-list .icon { margin-top: 3px; color: var(--clay-600); }
.campaign-check-list.is-requirement .icon { color: var(--muted); }

.campaign-terms {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  margin-top: 26px;
  padding: 18px;
  border-radius: var(--radius-lg);
  background: var(--bg-soft);
  border: 1px solid var(--line);
}
.campaign-terms-mark { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: var(--surface); color: var(--clay-600); }
.campaign-terms strong { display: block; margin-bottom: 6px; }
.campaign-terms p { margin: 0 0 10px; font-size: .88rem; }
.campaign-terms-list { display: grid; gap: 6px; margin: 0; padding-left: 18px; color: var(--muted); font-size: .84rem; }

.campaign-side { min-width: 0; }
.campaign-who h2 { margin-bottom: 10px; }
.campaign-who-elig { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: .92rem; }
.campaign-myrole {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  margin-top: 16px;
  padding: 14px;
  border-radius: var(--radius);
  font-size: .88rem;
}
.campaign-myrole.is-yes { background: var(--sage-50); color: #3F5239; }
.campaign-myrole.is-no { background: var(--bg-soft); color: var(--ink-soft); }
.campaign-side-actions { display: grid; gap: 10px; margin-top: 16px; justify-items: start; }
.campaign-side-actions .btn { width: 100%; }
.campaign-side-actions .help { margin: 0; }
.campaign-not-guaranteed {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 9px;
  margin: 18px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: .82rem;
}

/* DISCOVER block: the class, from LIVE class data */
.campaign-discover { min-width: 0; }
.campaign-discover h2 { margin-bottom: 10px; }
.campaign-discover-card {
  display: grid;
  gap: 14px;
  margin-top: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: inherit;
}
.campaign-discover-card:hover { border-color: var(--line-strong); color: inherit; }
.campaign-discover-card img { width: 100%; border-radius: var(--radius); display: block; }
.campaign-discover-copy { display: grid; gap: 6px; min-width: 0; justify-items: start; }
.campaign-discover-copy strong { font-family: var(--font-display); font-size: 1.08rem; }
.campaign-discover-meta { color: var(--muted); font-size: .8rem; }
.campaign-discover-cta { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; font-size: .86rem; font-weight: 600; color: var(--clay-600); }

.campaign-more .section-head { margin-bottom: 18px; }

/* ---------------- creator hub: live campaigns ---------------- */

.campaign-hub-grid { display: grid; gap: 20px; grid-auto-rows: 1fr; grid-template-columns: minmax(0, 1fr); }
.campaign-hub-card { display: flex; flex-direction: column; gap: 10px; padding: 22px; min-width: 0; }
.campaign-hub-card.is-eligible { border-color: #CBDCC4; }
.campaign-hub-head { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }
.campaign-hub-comp { font-family: var(--font-display); font-size: 1rem; color: var(--clay-600); }
.campaign-hub-card h3 { margin: 0; font-size: 1.06rem; }
.campaign-hub-card p { margin: 0; color: var(--ink-soft); font-size: .88rem; }
.campaign-hub-deliverables { display: flex; align-items: center; gap: 7px; color: var(--muted) !important; font-size: .82rem !important; }
.campaign-hub-role { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; align-items: start; padding: 10px 12px; border-radius: var(--radius); font-size: .84rem !important; }
.campaign-hub-role.is-yes { background: var(--sage-50); color: #3F5239; }
.campaign-hub-role.is-no { background: var(--bg-soft); }
.campaign-hub-actions { margin-top: auto; padding-top: 6px; }

/* ---------------- admin ---------------- */

.campaigns-admin { display: grid; gap: 22px; }
.campaigns-admin > * { min-width: 0; }
.campaign-admin-list { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.campaign-admin-row {
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
}
.campaign-admin-row.is-editing { border-color: var(--clay); }
.campaign-admin-main { display: grid; gap: 6px; min-width: 0; }
.campaign-admin-badges { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.campaign-admin-index { font-family: var(--font-display); color: var(--clay); }
.campaign-admin-name { font-size: .96rem; overflow-wrap: anywhere; }
.campaign-admin-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.campaign-admin-actions .btn { min-height: 38px; }

.campaign-editor-row { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
.campaign-status-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.campaign-status-bar-label { color: var(--muted); font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; }
.campaign-scope-note { background: var(--bg-soft); }
.campaign-scope-note h2 { margin-bottom: 8px; }
.campaign-scope-money {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 9px;
  margin: 18px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: .84rem;
}

/* ---------------- responsive ---------------- */

@media (min-width: 640px) {
  .campaign-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .campaign-hub-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .campaign-stream-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .campaign-editor-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .campaign-admin-row { grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
  .campaign-hero-actions .btn, .campaign-split-actions .btn { min-height: 48px; }
}

@media (min-width: 900px) {
  .campaign-hero { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); padding-top: 54px; }
  .campaign-explain-grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
  .campaign-split { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .campaign-detail-hero { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
  .campaign-detail-grid { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); }
  .campaign-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .campaign-stream-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .campaign-editor-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  /* every campaign action stays a comfortable tap target on a phone */
  .campaign-card-foot .btn,
  .campaign-split-actions .btn,
  .campaign-hero-actions .btn,
  .campaign-side-actions .btn,
  .campaign-admin-actions .btn,
  .campaign-status-bar .btn,
  .campaign-discover-card { min-height: 44px; }
  .campaign-card-foot .btn, .campaign-split-actions .btn, .campaign-hero-actions .btn { width: 100%; }
  .campaign-split-actions .btn { justify-content: center; }
  .campaign-discover-cta { min-height: 44px; }
  .campaign-comp strong { font-size: 1.3rem; }
}

/* =====================================================================
   CREATOR DASHBOARD — the private home base for an approved Creator.
   Calm and editorial on purpose: two columns, generous whitespace, and
   no charts, badges or gamification.
   ===================================================================== */

.page-creator-dashboard { background: var(--bg); }
.cdash { padding: 22px 0 56px; }

/* ---------------- creator sub-navigation ---------------- */

.cdash-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  margin-bottom: 26px;
}
.cdash-nav-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--clay-600);
  font-family: var(--font-display);
  font-size: .98rem;
  font-weight: 600;
}
.cdash-nav-links { display: flex; flex-wrap: wrap; gap: 4px; }
.cdash-nav-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 7px 13px;
  border-radius: var(--pill);
  color: var(--ink-soft);
  font-size: .86rem;
  font-weight: 500;
}
.cdash-nav-link:hover { background: var(--bg-soft); color: var(--ink); }
.cdash-nav-link.is-active { background: var(--clay-50); color: var(--clay-600); font-weight: 600; }

/* ---------------- greeting ---------------- */

.cdash-head {
  display: grid;
  gap: 18px;
  align-items: start;
  margin-bottom: 26px;
}
.cdash-head-main { min-width: 0; }
.cdash-head-main h1 { margin: 6px 0 8px; }
.cdash-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  padding: 5px 12px;
  border-radius: var(--pill);
  background: var(--sage-50);
  color: #4F6349;
  font-size: .78rem;
  font-weight: 600;
}
.cdash-head-aside {
  display: grid;
  gap: 10px;
  justify-items: start;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
}
.cdash-also { display: flex; align-items: flex-start; gap: 8px; margin: 0; color: var(--ink-soft); font-size: .86rem; }

/* ---------------- top stats ---------------- */

.cdash-stats {
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(0, 1fr);
  margin-bottom: 26px;
}
/* minmax(0, 1fr) rather than 1fr: a wrapping label must not widen its own cell. */
.cdash-stat {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-xs);
}
.cdash-stat-label { color: var(--muted); font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; }
.cdash-stat-value { font-family: var(--font-display); font-size: 1.5rem; line-height: 1.1; overflow-wrap: anywhere; }
.cdash-stat-note { color: var(--muted); font-size: .78rem; }

/* ---------------- layout ---------------- */

.cdash-grid { display: grid; gap: 22px; align-items: start; }
.cdash-main { display: grid; gap: 22px; min-width: 0; }
.cdash-aside { display: grid; gap: 22px; min-width: 0; }
.cdash-card {
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-xs);
  min-width: 0;
}
.cdash-card-head { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-start; justify-content: space-between; margin-bottom: 18px; }
.cdash-card-head h2 { margin: 4px 0 6px; font-size: 1.24rem; }
.cdash-card-head p { margin: 0; color: var(--ink-soft); font-size: .92rem; max-width: 62ch; }

/* ---------------- earnings ---------------- */

.cdash-earnings {
  display: grid;
  gap: 22px;
  background: linear-gradient(180deg, var(--bg-soft), var(--surface));
  border-color: var(--line-strong);
}
.cdash-earnings-main { min-width: 0; }
.cdash-earnings-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--clay-600);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.cdash-earnings-amount {
  display: block;
  margin: 10px 0 8px;
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 6vw, 2.6rem);
  line-height: 1.05;
  color: var(--ink);
}
.cdash-earnings-text { margin: 0 0 14px; color: var(--ink-soft); font-size: .92rem; max-width: 46ch; }
.cdash-earnings-side { display: grid; gap: 12px; align-content: start; min-width: 0; }
.cdash-source-list { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; }
.cdash-source-list li {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  align-items: baseline;
  justify-content: space-between;
  padding: 10px 12px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--line);
  font-size: .88rem;
}
.cdash-source-list strong { font-family: var(--font-display); font-size: 1rem; }
.cdash-earnings-empty { margin: 0; color: var(--muted); font-size: .88rem; }
.cdash-earnings-note { display: flex; gap: 8px; margin: 0; color: var(--muted); font-size: .8rem; }
.cdash-earnings-pending { margin: 0; color: var(--ink-soft); font-size: .84rem; font-weight: 600; }
.cdash-earnings-sep { margin: 0; padding-top: 10px; border-top: 1px solid var(--line); color: var(--muted); font-size: .8rem; }

/* ---------------- share & earn ---------------- */

.cdash-share-grid { display: grid; gap: 16px; margin-bottom: 18px; }
.cdash-share-field { display: grid; gap: 8px; min-width: 0; }
.cdash-field-label { color: var(--muted); font-size: .76rem; letter-spacing: .04em; text-transform: uppercase; }
.cdash-copy-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-soft);
}
.cdash-code {
  flex: 1 1 140px;
  min-width: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .92rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--ink);
  overflow-wrap: anywhere;
}
/* a long referral link must wrap, never widen the card */
.cdash-code-link { font-weight: 500; letter-spacing: 0; font-size: .8rem; word-break: break-all; }
.cdash-copy-row .btn { flex: none; min-height: 44px; }

.cdash-share-stats { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 16px; }
.cdash-share-stat {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 14px;
  border-radius: var(--radius);
  background: var(--bg-soft);
}
.cdash-share-stat span { color: var(--muted); font-size: .78rem; }
.cdash-share-stat strong { font-family: var(--font-display); font-size: 1.2rem; }
.cdash-share-stat.is-muted { opacity: .85; }
.cdash-rules { display: grid; gap: 8px; margin: 0 0 16px; padding: 0; list-style: none; }
.cdash-rules li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 9px; align-items: start; color: var(--muted); font-size: .82rem; }
.cdash-rules .icon { margin-top: 3px; }

/* ---------------- opportunities ---------------- */

.cdash-opps { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); }
.cdash-opp {
  display: grid;
  gap: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  overflow: hidden;
  min-width: 0;
}
.cdash-opp.is-eligible { border-color: #CBDCC4; }
.cdash-opp-banner { position: relative; background: var(--bg-soft); }
.cdash-opp-banner img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.cdash-opp-banner-fallback {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: linear-gradient(140deg, var(--clay-50), var(--sand));
  color: var(--clay-600);
}
.cdash-opp-banner .status-pill { position: absolute; top: 10px; left: 10px; }
.cdash-opp-body { display: grid; gap: 10px; padding: 18px; min-width: 0; }
.cdash-opp-elig {
  color: var(--clay-600);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.cdash-opp-body h3 { margin: 0; font-size: 1.06rem; }
.cdash-opp-body p { margin: 0; color: var(--ink-soft); font-size: .88rem; }
.cdash-opp-facts { display: grid; gap: 10px; margin: 4px 0 0; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cdash-opp-facts > div { display: grid; gap: 2px; min-width: 0; }
.cdash-opp-facts dt { color: var(--muted); font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; }
.cdash-opp-facts dd { margin: 0; font-size: .88rem; font-weight: 600; overflow-wrap: anywhere; }
.cdash-opp-deliverable { display: flex; gap: 8px; align-items: flex-start; color: var(--muted) !important; font-size: .82rem !important; }
.cdash-opp-role {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 9px;
  align-items: start;
  padding: 10px 12px;
  border-radius: var(--radius);
  font-size: .82rem !important;
}
.cdash-opp-role.is-yes { background: var(--sage-50); color: #3F5239; }
.cdash-opp-role.is-no { background: var(--bg-soft); }
.cdash-opp-body .btn { justify-self: start; }

/* ---------------- empty states ---------------- */

.cdash-empty {
  display: grid;
  gap: 10px;
  justify-items: start;
  padding: 24px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-lg);
  background: var(--bg-soft);
}
.cdash-empty-mark {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: var(--surface);
  color: var(--clay-600);
}
.cdash-empty strong { font-family: var(--font-display); font-size: 1.06rem; }
.cdash-empty p { margin: 0; color: var(--muted); font-size: .88rem; max-width: 52ch; }
.cdash-empty .btn { margin-top: 4px; }

.cdash-mine-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.cdash-mine-list li { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius); font-size: .9rem; }
.cdash-mine-note { display: flex; gap: 8px; margin: 14px 0 0; color: var(--muted); font-size: .8rem; }

/* ---------------- academy + profile ---------------- */

.cdash-academy { display: grid; gap: 12px; justify-items: start; background: linear-gradient(180deg, var(--bg-soft), var(--surface)); }
.cdash-academy-mark {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: var(--surface);
  color: var(--clay-600);
}
.cdash-academy h2 { margin: 0; font-size: 1.16rem; }
.cdash-academy p { margin: 0; color: var(--ink-soft); font-size: .9rem; }
.cdash-academy-note { color: var(--muted) !important; font-size: .82rem !important; }
.cdash-academy-progress { display: grid; gap: 6px; width: 100%; }
.cdash-academy-progress span { color: var(--muted); font-size: .78rem; }
.cdash-academy-sep { padding-top: 10px; border-top: 1px solid var(--line); color: var(--muted) !important; font-size: .78rem !important; }

.cdash-profile { display: grid; gap: 14px; }
.cdash-profile h2 { margin: 0; font-size: 1.16rem; }
.cdash-profile-head { display: flex; align-items: center; gap: 14px; }
.cdash-profile-id { display: grid; gap: 2px; min-width: 0; }
.cdash-profile-id strong { font-size: .98rem; }
.cdash-profile-id span { color: var(--muted); font-size: .82rem; overflow-wrap: anywhere; }
.cdash-profile-facts { display: grid; gap: 10px; margin: 0; }
.cdash-profile-facts > div { display: grid; gap: 3px; min-width: 0; }
.cdash-profile-facts dt { color: var(--muted); font-size: .76rem; letter-spacing: .04em; text-transform: uppercase; }
.cdash-profile-facts dd { margin: 0; font-size: .9rem; overflow-wrap: anywhere; }
.cdash-profile-bio { margin: 0; color: var(--ink-soft); font-size: .86rem; }
.cdash-profile-next { display: flex; gap: 8px; margin: 0; padding-top: 12px; border-top: 1px solid var(--line); color: var(--muted); font-size: .8rem; }
.cdash-profile-actions { display: flex; flex-wrap: wrap; gap: 10px; }

.cdash-footnote { display: flex; gap: 9px; margin: 26px 0 0; color: var(--muted); font-size: .82rem; }

/* ---------------- profile menu entry (integration) ---------------- */

.profile-panel-link .nav-count { margin-left: auto; }

/* Every control inside the Creator space is a >=44px target at EVERY width (not only on a
   phone): the brief asks for ~44px tap targets, and this dashboard has few enough controls that
   the larger size costs nothing and keeps the whole space feeling deliberate. */
.cdash .btn,
.cdash .cdash-nav-link,
.cdash-nav .btn { min-height: 44px; }
.cdash-source-pending { display: block; color: var(--muted); font-size: .74rem; font-style: normal; }

/* ---------------- responsive ---------------- */

@media (min-width: 560px) {
  .cdash-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cdash-opps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 900px) {
  .cdash { padding: 28px 0 64px; }
  .cdash-head { grid-template-columns: minmax(0, 1fr) auto; }
  .cdash-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cdash-grid { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); }
  .cdash-earnings { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: start; }
  .cdash-share-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cdash-share-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 520px; }
  /* the dashboard must not stretch across a very wide screen */
  .cdash { max-width: var(--wrap); }
}

@media (max-width: 640px) {
  /* every action stays a comfortable tap target on a phone */
  .cdash-nav-link,
  .cdash-copy-row .btn,
  .cdash-empty .btn,
  .cdash-opp-body .btn,
  .cdash-profile-actions .btn,
  .cdash-academy .btn,
  .cdash-earnings .btn { min-height: 44px; }
  .cdash-nav { gap: 10px; }
  .cdash-nav-links { width: 100%; }
  /* the section nav scrolls as one row instead of stacking into a tall block */
  .cdash-nav-links {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .cdash-nav-links::-webkit-scrollbar { display: none; }
  .cdash-nav-link { white-space: nowrap; }
  .cdash-card { padding: 20px; }
  .cdash-earnings { padding: 22px 20px; }
  .cdash-opp-body .btn { justify-self: stretch; width: 100%; }
  .cdash-empty .btn { width: 100%; justify-content: center; }
  .cdash-copy-row .btn { width: 100%; justify-content: center; }
}

/* =====================================================================
   CREATOR ACADEMY — same interaction pattern as the Mentor Academy, with a
   warmer creative accent. The structural classes (academy-hero, academy-ring,
   academy-checklist, academy-modules, academy-lesson…) are shared, so the two
   academies stay visibly one ecosystem.
   ===================================================================== */

/* Every control in the Creator Academy is a >=44px target at EVERY width: the brief asks for
   ~44px tap targets on this programme, and the base .btn is 40px at desktop. Scoped to the creator
   pages so the Mentor Academy's own sizing is not changed. */
.cacad-page .btn,
.cacad-page .academy-check-link,
.cacad-page .academy-module-summary,
.cacad-page .academy-option-body { min-height: 44px; }
.cacad-page .academy-ring-fill { stroke: var(--plum); }
.cacad-page .academy-hero.is-complete .academy-ring-fill { stroke: var(--sage); }
.cacad-hero.is-complete { background: linear-gradient(180deg, var(--sage-50), var(--surface)); }

/* ---------------- the eligibility panel (the critical distinction) ---------------- */

.cacad-eligibility {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  margin-top: 22px;
  border-color: #EBD9C0;
  background: linear-gradient(180deg, #FEFAF5, var(--surface));
}
.cacad-eligibility.is-eligible { border-color: #CBDCC4; background: linear-gradient(180deg, var(--sage-50), var(--surface)); }
.cacad-eligibility-mark {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 15px;
  background: var(--surface);
  color: #9A6C22;
}
.cacad-eligibility.is-eligible .cacad-eligibility-mark { color: #4F6349; }
.cacad-eligibility-copy { min-width: 0; }
.cacad-eligibility-copy h2 { margin: 6px 0 8px; font-size: 1.24rem; }
.cacad-eligibility-copy p { margin: 0 0 14px; color: var(--ink-soft); max-width: 62ch; }
.cacad-eligibility-list { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; }
.cacad-eligibility-list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 9px;
  align-items: start;
  color: var(--muted);
  font-size: .88rem;
}
.cacad-eligibility-list li.is-done { color: #4F6349; font-weight: 600; }

/* ---------------- Creator Dashboard: the academy card states ---------------- */

.cdash-status-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 6px; }
.cdash-status-eligible { background: var(--plum-50); color: var(--plum); }
.cdash-academy.is-complete { background: linear-gradient(180deg, var(--sage-50), var(--surface)); border-color: #CBDCC4; }
.cdash-academy-state {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 9px;
  align-items: start;
  margin: 0;
  padding: 11px 13px;
  border-radius: var(--radius);
  background: var(--bg-soft);
  color: var(--ink-soft);
  font-size: .86rem;
}
.cdash-academy-state.is-eligible { background: var(--sage-50); color: #3F5239; font-weight: 600; }
.cdash-academy-score { margin: 0; color: var(--clay-600); font-size: .84rem; font-weight: 600; }
.cdash-academy-time { display: flex; gap: 7px; align-items: center; margin: 0; color: var(--muted); font-size: .82rem; }
.cdash-academy-actions { display: flex; flex-wrap: wrap; gap: 9px; }
.cdash-academy-actions .btn { min-height: 44px; }
.cdash-opp-role.is-locked { background: #FBF1E2; color: #8A6320; }
.cdash-opp-role.is-locked .icon { margin-top: 2px; }

/* the hub doorway keeps the Academy cards distinguishable at a glance */
.academy-doorway.is-creator .academy-doorway-progress .progress-fill { background: linear-gradient(90deg, var(--plum), #A87C93); }

/* ---------------- admin: assessment question editor ---------------- */

.cacad-options {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--bg-soft);
}
.cacad-options-legend {
  padding: 0 8px;
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}
.cacad-option-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
.cacad-option-row.is-correct { border-color: #CBDCC4; background: #F7FAF6; }
.cacad-option-pick {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  cursor: pointer;
}
.cacad-option-pick input { width: 20px; height: 20px; accent-color: var(--clay); }
.cacad-option-row > .field:first-of-type { grid-column: 2; }
.cacad-option-row .field { min-width: 0; }
@media (min-width: 900px) {
  .cacad-option-row { grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr); align-items: end; }
  .cacad-option-row > .field:first-of-type { grid-column: auto; }
}
@media (max-width: 640px) {
  .cacad-eligibility { grid-template-columns: minmax(0, 1fr); }
  .cdash-academy-actions .btn { width: 100%; }
}