@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;600;700;800&family=Nunito+Sans:wght@400;600;700;800&display=swap');

/* RZN design system - warm, rounded, playful but readable for a Class 3-6
   reader. Headings use Baloo 2 (rounded), body uses Nunito Sans. All colours
   flow from the tokens below. Legacy token names (--surface, --line, etc.) are
   kept as aliases onto the new palette so every existing component re-themes
   without being rewritten. ASCII only, hyphens not em dashes, "Rs." for money. */

:root {
  /* new palette */
  --brand:        #2f6f4f;
  --brand-deep:   #1e4a34;
  --brand-bright: #2f8f5b;
  --mint:         #8fc9a8;
  --mint-soft:    #eaf3ec;
  --amber:        #f0a03c;
  --amber-soft:   #fdeeda;
  --danger:       #c9503a;
  --page-bg:      #f2ece1;
  --card-bg:      #fdf9f0;
  --ink:          #24402f;
  --ink-soft:     #4a6455;
  --muted:        #6b8375;
  --border:       #e3ece5;
  --radius:       18px;
  --radius-pill:  999px;
  --shadow-soft:  0 2px 12px rgba(31, 74, 52, .06);
  --shadow-lift:  0 10px 30px rgba(30, 74, 52, .12);

  /* legacy aliases -> new palette (keep existing components themed) */
  --bg:           var(--page-bg);
  --surface:      #ffffff;
  --line:         var(--border);
  --brand-dark:   var(--brand-deep);
  --brand-tint:   var(--mint-soft);
  --correct:      var(--brand-bright);
  --correct-tint: #e6f3ea;
  --wrong:        var(--danger);
  --wrong-tint:   #fdecea;
  --focus:        #1d4ed8;
  --shadow:       var(--shadow-soft);
}

* {
  box-sizing: border-box;
}

html,
body,
#root {
  height: 100%;
}

body {
  margin: 0;
  background: var(--page-bg);
  color: var(--ink);
  font-family: var(--bd-font-body), ui-sans-serif, system-ui, -apple-system, "Segoe UI",
    Roboto, Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

h1,
h2,
h3,
.title,
.brand {
  font-family: var(--bd-font-head), ui-rounded, "Segoe UI", system-ui, sans-serif;
}

h1,
h2,
h3 {
  line-height: 1.2;
  margin: 0 0 0.5rem;
  color: var(--brand-deep);
  font-weight: 700;
}

h1 {
  font-size: 28px;
  font-weight: 800;
}
h2 {
  font-size: 21px;
  margin-top: 1.4rem;
}
h3 {
  font-size: 17px;
}

.title {
  color: var(--brand-deep);
  font-weight: 700;
}

p {
  margin: 0 0 1rem;
}

a {
  color: var(--brand-deep);
}

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

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

.shell {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--page-bg);
  color: var(--ink);
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1rem;
  background: var(--brand-deep);
  color: #fdf9f0;
  position: sticky;
  top: 0;
  z-index: 10;
}

.brand {
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #fdf9f0;
  text-decoration: none;
  font-size: 1.15rem;
}

.container {
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  padding: 22px 18px 60px;
  flex: 1;
}

.card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 22px;
  box-shadow: var(--shadow-soft);
  padding: 22px;
  margin-bottom: 1rem;
}

.muted {
  color: var(--muted);
  font-size: 14px;
}

.stack > * + * {
  margin-top: 0.85rem;
}

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

label {
  display: block;
  font-weight: 700;
  font-size: 0.92rem;
  margin-bottom: 0.3rem;
  color: var(--ink);
}

input,
select,
.input {
  width: 100%;
  padding: 12px 14px;
  font-family: var(--bd-font-body), ui-sans-serif, system-ui, sans-serif;
  font-size: 15px;
  color: var(--ink);
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 14px;
  min-height: 48px;
}

input:focus,
select:focus,
.input:focus {
  outline: 0;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--mint-soft);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  min-height: 50px;
  padding: 14px 18px;
  font-family: var(--bd-font-body), ui-sans-serif, system-ui, sans-serif;
  font-weight: 800;
  font-size: 16px;
  color: #fff;
  background: var(--brand);
  border: 0;
  border-radius: 14px;
  cursor: pointer;
  box-shadow: 0 4px 0 var(--brand-deep);
  transition: transform 0.05s ease, box-shadow 0.05s ease;
}

.btn:hover:not(:disabled) {
  filter: brightness(1.03);
}

.btn:active:not(:disabled) {
  transform: translateY(3px);
  box-shadow: 0 1px 0 var(--brand-deep);
}

.btn:disabled {
  opacity: 0.55;
  box-shadow: 0 4px 0 var(--brand-deep);
  cursor: default;
}

.btn.secondary {
  color: var(--brand);
  background: #fff;
  border: 1px solid var(--border);
  box-shadow: 0 4px 0 var(--border);
}

.btn.secondary:active:not(:disabled) {
  transform: translateY(3px);
  box-shadow: 0 1px 0 var(--border);
}

.btn.small {
  width: auto;
  min-height: 0;
  font-size: 13px;
  padding: 8px 12px;
  border-radius: 10px;
  box-shadow: 0 3px 0 var(--brand-deep);
}

.btn.small.secondary {
  box-shadow: 0 3px 0 var(--border);
}

.btn.small:active:not(:disabled) {
  transform: translateY(2px);
  box-shadow: 0 1px 0 var(--brand-deep);
}

.btn.small.secondary:active:not(:disabled) {
  box-shadow: 0 1px 0 var(--border);
}

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

.badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: var(--radius-pill);
  margin-right: 6px;
}

.badge-paid {
  background: var(--mint-soft);
  color: var(--brand-deep);
}
.badge-free {
  background: #eee7d8;
  color: #7a6a4a;
}
.badge-suspended {
  background: #fdecea;
  color: var(--danger);
}

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

.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.admin-table th {
  text-align: left;
  font-family: var(--bd-font-head), ui-rounded, system-ui, sans-serif;
  font-size: 13px;
  color: var(--brand-deep);
  padding: 8px 10px;
  border-bottom: 2px solid var(--border);
}

.admin-table td {
  padding: 10px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
  color: var(--ink-soft);
}

.admin-table tr:hover td {
  background: #fbf7ee;
}

/* ---------------------------------------------------------------- alerts */

.alert {
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 14px;
  background: var(--amber-soft);
  border: 1px solid #f2d4a8;
  color: #8a5a1e;
}

.alert.error {
  background: var(--wrong-tint);
  border-color: #f0c9c2;
  color: #7d2b1f;
}

.alert.info {
  background: var(--mint-soft);
  border-color: #cfe3d7;
  color: var(--brand-deep);
}

/* --------------------------------------------------------------- modules */

.module-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.module-btn {
  text-align: left;
  width: 100%;
  padding: 18px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  cursor: pointer;
  font-family: var(--bd-font-body), ui-sans-serif, system-ui, sans-serif;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}

.module-btn:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lift);
  border-color: var(--mint);
}

.module-btn .title {
  font-family: var(--bd-font-head), ui-rounded, system-ui, sans-serif;
  font-size: 17px;
  font-weight: 700;
  color: var(--brand-deep);
  display: block;
}

.module-btn .muted {
  font-size: 13px;
}

/* -------------------------------------------------------------- practice */

.practice-top {
  margin-bottom: 0.75rem;
}

.progress {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 0.9rem;
}

.progress .bar {
  flex: 1;
  height: 8px;
  background: var(--border);
  border-radius: 999px;
  overflow: hidden;
}

.progress .fill {
  height: 100%;
  background: var(--brand);
  transition: width 0.25s ease;
}

.progress .count {
  font-variant-numeric: tabular-nums;
  font-size: 0.9rem;
  color: var(--ink-soft);
  white-space: nowrap;
}

.stem {
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 12px;
  line-height: 1.45;
  white-space: pre-wrap;
}

.options {
  display: grid;
  gap: 0.6rem;
}

.option {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  width: 100%;
  min-height: 52px;
  padding: 13px 15px;
  margin-bottom: 0;
  text-align: left;
  font-family: var(--bd-font-body), ui-sans-serif, system-ui, sans-serif;
  font-size: 15px;
  color: var(--ink);
  background: #fff;
  border: 2px solid var(--border);
  border-radius: 14px;
  cursor: pointer;
  transition: border-color 0.08s ease, background 0.08s ease;
}

.option:hover:not(:disabled) {
  border-color: var(--mint);
}

.option:disabled {
  cursor: default;
}

.option .key {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--mint-soft);
  color: var(--brand-deep);
  font-weight: 700;
  font-size: 0.85rem;
  display: grid;
  place-items: center;
}

.option.selected {
  border-color: var(--brand);
  background: var(--mint-soft);
  position: relative;
}

.option.selected .key {
  background: var(--brand);
  color: #fff;
}

/* Check-mark badge on the chosen option, before the answer is submitted. */
.option.selected::after {
  content: '\2713';
  position: absolute;
  top: 0.45rem;
  right: 0.55rem;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  font-weight: 700;
  display: grid;
  place-items: center;
  font-size: 0.85rem;
}

.option.correct {
  border-color: var(--brand-bright);
  background: #e6f3ea;
}

.option.correct .key {
  background: var(--brand-bright);
  color: #fff;
}

.option.wrong {
  border-color: var(--danger);
  background: #fdecea;
}

.option.wrong .key {
  background: var(--danger);
  color: #fff;
}

/* -------------------------------------------------------------- feedback */

.feedback {
  margin-top: 1rem;
  border-top: 1px solid var(--border);
  padding-top: 1rem;
}

.verdict {
  font-weight: 800;
  margin-bottom: 0.7rem;
}

.verdict.yes {
  color: var(--brand-bright);
}
.verdict.no {
  color: var(--danger);
}

.rationale {
  border: 1px solid var(--border);
  border-left-width: 4px;
  border-radius: 10px;
  padding: 0.7rem 0.8rem;
  margin-bottom: 0.55rem;
  font-size: 0.95rem;
  background: #fff;
}

.rationale.is-correct {
  border-left-color: var(--brand-bright);
}

.rationale.is-wrong {
  border-left-color: #d6a99f;
}

.rationale .label {
  font-weight: 700;
  margin-bottom: 0.15rem;
}

/* --------------------------------------------------------------- summary */

.score {
  text-align: center;
  padding: 0.5rem 0 0.9rem;
}

.score .big {
  font-family: var(--bd-font-head), ui-rounded, system-ui, sans-serif;
  font-size: 2.6rem;
  font-weight: 800;
  line-height: 1.05;
  color: var(--brand-deep);
  font-variant-numeric: tabular-nums;
}

.subtopic-row {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--border);
}

.subtopic-row:last-child {
  border-bottom: none;
}

.subtopic-row .name {
  flex: 1;
  font-weight: 600;
}

.subtopic-row .meter {
  flex: none;
  width: 84px;
  height: 8px;
  border-radius: 999px;
  background: var(--border);
  overflow: hidden;
}

.subtopic-row .meter span {
  display: block;
  height: 100%;
  background: var(--brand);
}

.subtopic-row .pct {
  flex: none;
  width: 52px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-size: 0.92rem;
  color: var(--ink-soft);
}

/* --------------------------------------------------------------- figures */

.question-figure {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0.6rem;
  margin-bottom: 0.9rem;
  overflow-x: auto;
}

.question-figure svg {
  min-width: 260px;
}

/* Picture choices sit in a 2x2 grid of large tap targets. */
.options.figure-grid {
  grid-template-columns: 1fr 1fr;
  gap: 0.7rem;
}

.option.figure-option {
  flex-direction: column;
  align-items: stretch;
  gap: 0.45rem;
  min-height: 0;
  padding: 0.6rem;
}

.option.figure-option .key {
  align-self: flex-start;
}

.option-figure {
  width: 100%;
  pointer-events: none;
}

.option-figure svg {
  display: block;
  width: 100%;
  height: auto;
}

.rationale-figure {
  width: 92px;
  margin: 0.35rem 0;
}

/* -------------------------------------------------------- progress page */

.small {
  font-size: 0.86rem;
}

.streak {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.7rem 0.9rem;
  border-radius: 11px;
  background: var(--mint-soft);
  border: 1px solid var(--border);
  color: var(--ink-soft);
  font-weight: 700;
  font-size: 0.96rem;
}

.streak.lit {
  background: var(--amber-soft);
  border-color: #f0d9b5;
  color: #8a5a12;
}

.week {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.4rem;
  align-items: end;
}

.week-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}

.week-bar-track {
  width: 100%;
  height: 68px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.week-bar {
  width: 60%;
  min-height: 3px;
  background: var(--brand);
  border-radius: 5px 5px 2px 2px;
  transition: height 0.25s ease;
}

.week-bar.empty {
  background: var(--border);
}

.week-label {
  font-size: 0.78rem;
  color: var(--ink-soft);
  font-weight: 700;
}

.week-count {
  font-size: 0.75rem;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
  min-height: 1em;
}

.module-progress {
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--border);
}

.module-progress:last-child {
  border-bottom: none;
}

.module-progress-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 0.3rem;
}

.module-progress-head .name {
  font-weight: 700;
}

.module-progress-head .pct {
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  color: var(--brand-deep);
}

.module-progress .track {
  height: 9px;
  background: var(--border);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 0.3rem;
}

.module-progress .track .fill {
  height: 100%;
  background: var(--brand);
  border-radius: 999px;
  transition: width 0.3s ease;
}

@media (min-width: 620px) {
  body {
    font-size: 17.5px;
  }
  .rationale-figure {
    width: 110px;
  }
}

/* ============================================================
   RZN exam / mock / result styles. Restyled onto the new tokens
   (greens, cream cards, amber accents, rounded corners).
   ============================================================ */

/* --- take-flow header + timer --- */
.exam-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.6rem;
}
.exam-title {
  font-family: var(--bd-font-head), ui-rounded, system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--brand-deep);
}
.exam-timer {
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  background: var(--mint-soft);
  color: var(--brand-deep);
}
.exam-timer.low {
  background: var(--wrong-tint);
  color: var(--danger);
}

/* --- question palette --- */
.exam-palette {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.85rem;
}
.exam-pip {
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 0.55rem;
  border: 1.5px solid var(--border);
  background: #fff;
  color: var(--ink);
  font-weight: 700;
  cursor: pointer;
  font-variant-numeric: tabular-nums;
}
.exam-pip.answered {
  background: var(--correct-tint);
  border-color: #bfe3cd;
  color: var(--brand-bright);
}
.exam-pip.current {
  outline: 3px solid var(--brand);
  outline-offset: 1px;
  border-color: var(--brand);
}

/* --- Back / Next / Finish row --- */
.exam-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 1rem;
  margin-bottom: 4px;
}

/* --- confirm dialog --- */
.exam-confirm {
  position: fixed;
  inset: 0;
  background: rgba(30, 74, 52, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  z-index: 50;
}
.exam-confirm-box {
  max-width: 26rem;
  width: 100%;
  margin: 0;
}

/* --- result hero --- */
.result-hero {
  text-align: center;
}
.result-score {
  font-family: var(--bd-font-head), ui-rounded, system-ui, sans-serif;
  font-size: 3rem;
  font-weight: 800;
  line-height: 1;
  color: var(--brand-deep);
  font-variant-numeric: tabular-nums;
}
.result-score .of {
  font-size: 1.4rem;
  color: var(--ink-soft);
  font-weight: 700;
}
.result-grade {
  display: inline-block;
  margin-top: 0.5rem;
  padding: 0.2rem 0.95rem;
  border-radius: 999px;
  font-weight: 800;
  font-size: 1.1rem;
  background: var(--mint-soft);
  color: var(--brand-deep);
}
.grade-Aplus,
.grade-A {
  background: var(--correct-tint);
  color: var(--brand-bright);
}
.grade-B {
  background: var(--mint-soft);
  color: var(--brand-deep);
}
.grade-C {
  background: var(--amber-soft);
  color: #8a5a12;
}
.grade-D {
  background: var(--wrong-tint);
  color: var(--danger);
}

.result-stars {
  display: flex;
  justify-content: center;
  gap: 0.3rem;
  margin-top: 0.75rem;
}
.star {
  width: 2.1rem;
  height: 2.1rem;
  fill: var(--border);
}
.star.on {
  fill: var(--amber);
  animation: star-pop 0.35s ease both;
}
@keyframes star-pop {
  0% {
    transform: scale(0.4);
    opacity: 0;
  }
  70% {
    transform: scale(1.15);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .star.on {
    animation: none;
  }
}

.result-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  margin-top: 0.9rem;
}
.badge-chip {
  padding: 0.3rem 0.85rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.85rem;
  background: var(--mint-soft);
  color: var(--brand-deep);
}
.badge-chip.topper {
  background: var(--amber-soft);
  color: #8a5a12;
}
.badge-chip.speed {
  background: var(--mint-soft);
  color: var(--brand-deep);
}
.badge-chip.improver {
  background: var(--correct-tint);
  color: var(--brand-bright);
}
.badge-chip.streak {
  background: var(--amber-soft);
  color: #8a5a12;
}

/* --- parent report module bars --- */
.module-report {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  margin: 0.8rem 0;
}
.module-row-head {
  display: flex;
  justify-content: space-between;
  font-weight: 700;
  margin-bottom: 0.25rem;
}
.module-track {
  height: 0.55rem;
  border-radius: 999px;
  background: var(--border);
  overflow: hidden;
}
.module-fill {
  height: 100%;
  border-radius: 999px;
}
.module-fill.green {
  background: var(--brand-bright);
}
.module-fill.amber {
  background: var(--amber);
}
.module-fill.red {
  background: var(--danger);
}

.report-points p {
  margin: 0.35rem 0;
}

/* --- review list --- */
.review-list {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.review-item.ok {
  border-left: 4px solid var(--brand-bright);
}
.review-item.no {
  border-left: 4px solid var(--danger);
}
.review-item.skip {
  border-left: 4px solid var(--border);
}
.review-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.3rem;
}
.review-num {
  font-weight: 800;
}
.review-tag {
  font-size: 0.8rem;
  font-weight: 700;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
}
.review-tag.ok {
  background: var(--correct-tint);
  color: var(--brand-bright);
}
.review-tag.no {
  background: var(--wrong-tint);
  color: var(--danger);
}
.review-tag.skip {
  background: var(--page-bg);
  color: var(--ink-soft);
}

/* ---- Batch 8: Admin table - neat actions + mobile cards ---- */
/* Give the Actions column room so its buttons sit side by side */
.admin-table td[data-label="Actions"] > div { gap: 6px; }
.admin-table td[data-label="Actions"] .btn.small { flex: 0 0 auto; }

@media (max-width: 640px) {
  /* Turn each admin table into stacked cards on narrow screens */
  .admin-table thead { display: none; }
  .admin-table,
  .admin-table tbody,
  .admin-table tr,
  .admin-table td { display: block; width: 100%; }
  .admin-table tr {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 10px 12px;
    margin-bottom: 12px;
    box-shadow: var(--shadow-soft);
  }
  .admin-table td {
    border: 0;
    border-bottom: 1px solid var(--border);
    padding: 8px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    text-align: right;
  }
  .admin-table td:last-child { border-bottom: 0; }
  .admin-table td::before {
    content: attr(data-label);
    font-family: var(--bd-font-head), cursive;
    font-size: 12px;
    font-weight: 700;
    color: var(--brand-deep);
    text-align: left;
    flex: 0 0 auto;
  }
  /* Actions cell: label on top, buttons wrap full width below */
  .admin-table td[data-label="Actions"] { flex-direction: column; align-items: stretch; text-align: left; }
  .admin-table td[data-label="Actions"] > div { width: 100%; }
}

/* ---- Batch 8b: Admin action buttons in a 2-col grid ---- */
.admin-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  min-width: 190px;
}
.admin-actions .btn.small { width: 100%; }
@media (max-width: 640px) {
  .admin-table td[data-label="Actions"] .admin-actions { min-width: 0; }
}

/* ---- Desktop widen: wide-screen layout (>= 900px) ---- */
@media (min-width: 900px) {
  .container { max-width: 1080px; }

  /* Topic tiles, why-cards, plan cards, skill tiles use more columns */
  .module-grid {
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 20px;
  }

  /* Landing hero: two columns (owl + copy on the left, buttons on the right)
     only if the hero card has multiple children; harmless otherwise. Keep it
     simple - just give the hero card more breathing room and center nicely. */
  .card { padding: 26px; }

  /* Practice / exam question card can be a touch wider and calmer */
  .stem { font-size: 18px; }

  /* Admin: on desktop the table already shows; give the users table room and
     keep the actions grid tidy (Batch 8/8b classes). */
  .admin-actions { grid-template-columns: 1fr 1fr; }
}

/* Extra-wide screens: cap text measure so lines do not get too long */
@media (min-width: 1200px) {
  .container { max-width: 1080px; }
}

/* ============================================================
   Buddhii landing page. Every rule is SCOPED under .buddhii-landing so the
   teal design (and its CSS variables, which reuse names like --ink/--line)
   never leaks into the rest of the app, which keeps its green theme. The
   wrapper is a fixed full-viewport overlay so it covers the app chrome.
   ============================================================ */
.buddhii-landing {
  --ink: #0b3b45;
  --ink-soft: #3d626b;
  --teal: #12a19a;
  --teal-deep: #0c7d78;
  --teal-bright: #1fc0b8;
  --sky: #41c3f0;
  --sun: #ffc63f;
  --coral: #ff7d6b;
  --grape: #9384ec;
  --cream: #eef9f8;
  --card: #ffffff;
  --line: #d8ece9;
  --shadow: 0 10px 30px rgba(11, 59, 69, .10);
  --shadow-lift: 0 16px 40px rgba(11, 59, 69, .16);

  position: fixed;
  inset: 0;
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 200;
  scroll-behavior: smooth;
  background: var(--cream);
  color: var(--ink);
  font-family: 'Lexend', system-ui, sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
.buddhii-landing * { box-sizing: border-box; margin: 0; padding: 0; }
.buddhii-landing h1,
.buddhii-landing h2,
.buddhii-landing h3,
.buddhii-landing .brand-word,
.buddhii-landing .btn,
.buddhii-landing .eyebrow { font-family: 'Fredoka', system-ui, sans-serif; }
.buddhii-landing .wrap { max-width: 1120px; margin: 0 auto; padding: 0 22px; }

/* top bar */
.buddhii-landing .topbar { position: sticky; top: 0; z-index: 50; background: rgba(238, 249, 248, .86); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.buddhii-landing .topbar .wrap { display: flex; align-items: center; gap: 18px; height: 70px; }
.buddhii-landing .brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.buddhii-landing .brand-word { font-size: 26px; font-weight: 700; color: var(--ink); letter-spacing: .2px; }
.buddhii-landing .brand-word b { color: var(--teal); }
.buddhii-landing .nav { margin-left: auto; display: flex; align-items: center; gap: 26px; }
.buddhii-landing .nav a { text-decoration: none; color: var(--ink-soft); font-weight: 500; font-size: 15px; }
.buddhii-landing .nav a:hover { color: var(--teal); }
.buddhii-landing .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: none; cursor: pointer; text-decoration: none; font-weight: 600; font-size: 16px; padding: 12px 22px; border-radius: 14px; transition: transform .12s ease, box-shadow .12s ease; }
.buddhii-landing .btn-primary { background: var(--teal); color: #fff; box-shadow: 0 4px 0 var(--teal-deep); }
.buddhii-landing .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 6px 0 var(--teal-deep); }
.buddhii-landing .btn-primary:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--teal-deep); }
.buddhii-landing .btn-ghost { background: #fff; color: var(--teal-deep); box-shadow: 0 4px 0 var(--line); }
.buddhii-landing .btn-ghost:hover { transform: translateY(-2px); }
.buddhii-landing .btn-sun { background: var(--sun); color: #5b4300; box-shadow: 0 4px 0 #e0a716; }
.buddhii-landing .btn-sun:hover { transform: translateY(-2px); box-shadow: 0 6px 0 #e0a716; }
.buddhii-landing .login-link { color: var(--ink-soft); font-weight: 600; font-size: 15px; text-decoration: none; background: none; border: none; cursor: pointer; font-family: 'Lexend', system-ui, sans-serif; }
.buddhii-landing .login-link:hover { color: var(--teal); }
@media (max-width: 720px) { .buddhii-landing .nav a.navlink { display: none; } }

/* hero */
.buddhii-landing .hero { position: relative; padding: 64px 0 40px; overflow: hidden; }
.buddhii-landing .hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 40px; align-items: center; }
.buddhii-landing .eyebrow { display: inline-flex; align-items: center; gap: 8px; background: #dff5f2; color: var(--teal-deep); font-weight: 600; font-size: 13px; padding: 7px 14px; border-radius: 999px; margin-bottom: 18px; }
.buddhii-landing .eyebrow .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--coral); }
.buddhii-landing h1 { font-size: 56px; line-height: 1.02; font-weight: 700; letter-spacing: -.5px; }
.buddhii-landing h1 .hl { color: var(--teal); position: relative; white-space: nowrap; }
.buddhii-landing h1 .hl svg { position: absolute; left: 0; bottom: -10px; width: 100%; }
.buddhii-landing .sub { font-size: 19px; color: var(--ink-soft); margin: 22px 0 30px; max-width: 520px; }
.buddhii-landing .cta-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.buddhii-landing .cta-note { font-size: 14px; color: var(--ink-soft); margin-top: 16px; }
.buddhii-landing .cta-note b { color: var(--ink); }
.buddhii-landing .hero-art { position: relative; display: flex; justify-content: center; align-items: center; min-height: 360px; }
.buddhii-landing .blob { position: absolute; border-radius: 50%; filter: blur(2px); opacity: .55; z-index: 0; }
.buddhii-landing .blob.b1 { width: 230px; height: 230px; background: var(--teal-bright); top: -10px; left: 10px; }
.buddhii-landing .blob.b2 { width: 150px; height: 150px; background: var(--sun); bottom: 0; right: 20px; opacity: .5; }
.buddhii-landing .blob.b3 { width: 110px; height: 110px; background: var(--grape); top: 30px; right: -10px; opacity: .45; }
.buddhii-landing .float { position: absolute; z-index: 2; animation: buddhii-bob 4.5s ease-in-out infinite; }
.buddhii-landing .float.f1 { top: 6px; right: 44px; animation-delay: .2s; }
.buddhii-landing .float.f2 { bottom: 24px; left: 8px; animation-delay: 1.1s; }
.buddhii-landing .float.f3 { top: 120px; left: -6px; animation-delay: .6s; }
.buddhii-landing .chip { background: #fff; border-radius: 14px; box-shadow: var(--shadow); padding: 8px 14px; font-family: 'Fredoka'; font-weight: 600; font-size: 14px; display: flex; align-items: center; gap: 8px; }
@keyframes buddhii-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* puzzle card */
.buddhii-landing .puzzle { position: relative; z-index: 3; background: #fff; border-radius: 24px; box-shadow: var(--shadow-lift); padding: 22px 22px 20px; width: 300px; border: 1px solid var(--line); }
.buddhii-landing .puzzle .q { font-family: 'Fredoka'; font-weight: 600; font-size: 15px; color: var(--ink-soft); margin-bottom: 14px; }
.buddhii-landing .pattern { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 16px; }
.buddhii-landing .pcell { width: 52px; height: 52px; border-radius: 14px; display: flex; align-items: center; justify-content: center; background: #f1faf9; border: 2px solid var(--line); }
.buddhii-landing .pcell.qmark { background: var(--sun); border-color: #e6ac1f; color: #5b4300; font-family: 'Fredoka'; font-weight: 700; font-size: 24px; }
.buddhii-landing .dotgrid { display: grid; grid-template-columns: repeat(2, 7px); gap: 4px; }
.buddhii-landing .dotgrid span { width: 7px; height: 7px; border-radius: 50%; background: var(--teal); }
.buddhii-landing .opts { display: flex; gap: 8px; }
.buddhii-landing .opt { flex: 1; height: 44px; border-radius: 12px; background: #f1faf9; border: 2px solid var(--line); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: .15s; }
.buddhii-landing .opt:hover { border-color: var(--teal); }
.buddhii-landing .opt.right { background: #e5f7ec; border-color: #57c98a; }
.buddhii-landing .opt .grid3 { display: grid; grid-template-columns: repeat(3, 5px); gap: 3px; }
.buddhii-landing .opt .grid3 span { width: 5px; height: 5px; border-radius: 50%; background: var(--teal-deep); }
.buddhii-landing .puzzle .verdict { margin-top: 14px; font-size: 13px; color: #2f9e63; font-weight: 600; display: flex; align-items: center; gap: 6px; }

/* trust strip */
.buddhii-landing .strip { background: var(--ink); color: #cfeeeb; }
.buddhii-landing .strip .wrap { display: flex; flex-wrap: wrap; gap: 14px 40px; justify-content: center; padding: 20px 22px; }
.buddhii-landing .strip .item { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 500; }
.buddhii-landing .strip .item b { font-family: 'Fredoka'; color: #fff; font-size: 20px; font-weight: 700; }
.buddhii-landing .strip .sep { color: var(--teal-bright); }
.buddhii-landing .strip .sep::before { content: "\2022"; }

/* section shell */
.buddhii-landing .section { padding: 74px 0; }
.buddhii-landing .section-head { text-align: center; max-width: 640px; margin: 0 auto 44px; }
.buddhii-landing .section-head .eyebrow { margin-bottom: 14px; }
.buddhii-landing h2 { font-size: 40px; font-weight: 700; letter-spacing: -.3px; line-height: 1.1; }
.buddhii-landing .section-head p { color: var(--ink-soft); font-size: 18px; margin-top: 14px; }

/* modules */
.buddhii-landing .mod-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.buddhii-landing .mod { background: var(--card); border-radius: 20px; padding: 26px 22px; border: 1px solid var(--line); box-shadow: var(--shadow); transition: transform .16s ease, box-shadow .16s ease; }
.buddhii-landing .mod:hover { transform: translateY(-5px); box-shadow: var(--shadow-lift); }
.buddhii-landing .mod .ic { width: 56px; height: 56px; border-radius: 16px; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.buddhii-landing .mod h3 { font-size: 21px; font-weight: 600; margin-bottom: 6px; }
.buddhii-landing .mod p { color: var(--ink-soft); font-size: 15px; }
.buddhii-landing .ic svg { width: 30px; height: 30px; }
.buddhii-landing .ic.i1 { background: #dff5f2; color: #0c7d78; }
.buddhii-landing .ic.i2 { background: #fff0d6; color: #d98a00; }
.buddhii-landing .ic.i3 { background: #ffe4df; color: #e0533f; }
.buddhii-landing .ic.i4 { background: #eae7fd; color: #6b5bd6; }
.buddhii-landing .ic.i5 { background: #dcf1fb; color: #1591c7; }
.buddhii-landing .chip svg { width: 17px; height: 17px; }
.buddhii-landing .verdict svg { width: 16px; height: 16px; flex: none; }
.buddhii-landing .tick svg { width: 15px; height: 15px; }
.buddhii-landing .rbadge svg { width: 13px; height: 13px; vertical-align: -1px; margin-right: 3px; }

/* how it works */
.buddhii-landing .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; counter-reset: step; }
.buddhii-landing .step { background: var(--card); border-radius: 20px; padding: 30px 24px; border: 1px solid var(--line); position: relative; }
.buddhii-landing .step .num { counter-increment: step; font-family: 'Fredoka'; font-weight: 700; font-size: 15px; width: 38px; height: 38px; border-radius: 12px; background: var(--teal); color: #fff; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.buddhii-landing .step .num::before { content: counter(step); }
.buddhii-landing .step h3 { font-size: 20px; font-weight: 600; margin-bottom: 8px; }
.buddhii-landing .step p { color: var(--ink-soft); font-size: 15px; }
.buddhii-landing .step .arrow { position: absolute; right: -16px; top: 44px; color: var(--teal-bright); z-index: 2; }
.buddhii-landing .step:last-child .arrow { display: none; }

/* parents */
.buddhii-landing .parents { background: #fff; border-radius: 28px; border: 1px solid var(--line); box-shadow: var(--shadow); display: grid; grid-template-columns: 1fr 1fr; gap: 36px; padding: 44px; align-items: center; }
.buddhii-landing .parents h2 { font-size: 34px; }
.buddhii-landing .plist { list-style: none; margin-top: 22px; display: grid; gap: 14px; }
.buddhii-landing .plist li { display: flex; gap: 12px; align-items: flex-start; font-size: 16px; color: var(--ink-soft); }
.buddhii-landing .plist .tick { flex: none; width: 26px; height: 26px; border-radius: 8px; background: #e5f7ec; color: #2f9e63; display: flex; align-items: center; justify-content: center; font-weight: 700; margin-top: 2px; }
.buddhii-landing .report { background: var(--cream); border-radius: 20px; padding: 24px; border: 1px solid var(--line); }
.buddhii-landing .report .rtop { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.buddhii-landing .report .rname { font-family: 'Fredoka'; font-weight: 600; font-size: 17px; }
.buddhii-landing .report .rbadge { background: var(--sun); color: #5b4300; font-weight: 600; font-size: 13px; padding: 4px 12px; border-radius: 999px; font-family: 'Fredoka'; }
.buddhii-landing .bar { margin-bottom: 14px; }
.buddhii-landing .bar .bl { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 5px; color: var(--ink-soft); }
.buddhii-landing .bar .track { height: 10px; border-radius: 6px; background: #d8ece9; overflow: hidden; }
.buddhii-landing .bar .fill { height: 100%; border-radius: 6px; }

/* pricing */
.buddhii-landing .price-free { max-width: 1000px; margin: 0 auto 24px; background: #fff; border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow); padding: 20px 26px; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.buddhii-landing .price-free .pf-copy { flex: 1; min-width: 220px; }
.buddhii-landing .price-free h3 { font-family: 'Fredoka'; font-weight: 600; font-size: 20px; margin-bottom: 2px; }
.buddhii-landing .price-free p { color: var(--ink-soft); font-size: 15px; }
.buddhii-landing .benefits-line { text-align: center; color: var(--ink-soft); font-size: 15px; max-width: 660px; margin: 0 auto 30px; }
.buddhii-landing .benefits-line b { color: var(--ink); }
.buddhii-landing .tier-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; max-width: 1000px; margin: 0 auto; align-items: stretch; }
.buddhii-landing .tier { background: var(--card); border-radius: 20px; border: 1px solid var(--line); padding: 28px 20px 24px; box-shadow: var(--shadow); position: relative; text-align: center; display: flex; flex-direction: column; }
.buddhii-landing .tier.pop { border: 2px solid var(--teal); box-shadow: var(--shadow-lift); }
.buddhii-landing .tier.best { border: 2px solid var(--sun); }
.buddhii-landing .tier .tag { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); color: #fff; font-family: 'Fredoka'; font-weight: 600; font-size: 12px; padding: 5px 14px; border-radius: 999px; white-space: nowrap; }
.buddhii-landing .tier.pop .tag { background: var(--coral); }
.buddhii-landing .tier.best .tag { background: #e0a017; color: #4a3600; }
.buddhii-landing .tier h3 { font-family: 'Fredoka'; font-size: 19px; font-weight: 600; margin-bottom: 2px; }
.buddhii-landing .tier .grades { color: var(--ink-soft); font-size: 13px; margin-bottom: 12px; }
.buddhii-landing .tier .price { font-family: 'Fredoka'; font-weight: 700; font-size: 34px; color: var(--ink); line-height: 1; }
.buddhii-landing .tier .mrp { color: var(--ink-soft); text-decoration: line-through; font-size: 14px; display: block; margin-top: 5px; }
.buddhii-landing .tier .peryr { color: var(--ink-soft); font-size: 13px; margin: 6px 0 20px; }
.buddhii-landing .tier .btn { width: 100%; margin-top: auto; }

/* final cta */
.buddhii-landing .final { background: linear-gradient(135deg, var(--teal) 0%, var(--teal-deep) 100%); color: #fff; text-align: center; border-radius: 32px; padding: 56px 30px; position: relative; overflow: hidden; }
.buddhii-landing .final h2 { color: #fff; font-size: 38px; }
.buddhii-landing .final p { color: #d3f2ef; font-size: 18px; margin: 14px auto 28px; max-width: 480px; }
.buddhii-landing .final .fblob { position: absolute; border-radius: 50%; opacity: .18; background: #fff; }
.buddhii-landing .final .fb1 { width: 200px; height: 200px; top: -60px; left: -40px; }
.buddhii-landing .final .fb2 { width: 150px; height: 150px; bottom: -50px; right: -30px; }

/* footer */
.buddhii-landing footer { padding: 40px 0 50px; text-align: center; color: var(--ink-soft); font-size: 14px; }
.buddhii-landing footer .brand-word { font-size: 22px; justify-content: center; margin-bottom: 10px; }

/* responsive */
@media (max-width: 900px) {
  .buddhii-landing .hero-grid { grid-template-columns: 1fr; gap: 30px; }
  .buddhii-landing .hero-art { order: -1; min-height: 300px; }
  .buddhii-landing h1 { font-size: 42px; }
  .buddhii-landing .mod-grid { grid-template-columns: 1fr 1fr; }
  .buddhii-landing .steps { grid-template-columns: 1fr; }
  .buddhii-landing .step .arrow { display: none; }
  .buddhii-landing .parents { grid-template-columns: 1fr; padding: 30px; }
  .buddhii-landing .tier-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .buddhii-landing h1 { font-size: 34px; }
  .buddhii-landing h2 { font-size: 30px; }
  .buddhii-landing .mod-grid { grid-template-columns: 1fr; }
  .buddhii-landing .tier-grid { grid-template-columns: 1fr; }
  .buddhii-landing .strip .wrap { gap: 12px 24px; }
}
@media (prefers-reduced-motion: reduce) { .buddhii-landing .float { animation: none; } }
/* === BUDDHII LANDING FIX v2 START === */
/* kill any horizontal scroll from decorative floats */
.buddhii-landing{overflow-x:hidden}

/* topbar: force full-width, left-aligned row; neutralise leaked app .topbar CSS */
.buddhii-landing .topbar{display:block;position:sticky;top:0;width:100%;left:0;right:0}
.buddhii-landing .topbar .wrap{
  width:100%;max-width:1120px;margin-left:auto;margin-right:auto;
  display:flex;align-items:center;gap:18px;justify-content:flex-start;height:70px}
.buddhii-landing .nav{margin-left:auto;display:flex;align-items:center;gap:22px;flex-wrap:nowrap}
.buddhii-landing .nav a{white-space:nowrap}
.buddhii-landing .login-link{white-space:nowrap}
.buddhii-landing .brand-word{white-space:nowrap}

/* ADDED: the app's global .btn is width:100% and leaks onto the landing's inline
   buttons (recon confirmed) - reset to auto, but keep pricing tier buttons full-width */
.buddhii-landing .btn{width:auto}
.buddhii-landing .tier .btn{width:100%}

/* floating chips: tuck into corners and sit ABOVE the puzzle card so text never clips */
.buddhii-landing .float{z-index:4}
.buddhii-landing .float.f1{top:4px;right:12px;left:auto;bottom:auto}
.buddhii-landing .float.f2{bottom:10px;left:0;top:auto;right:auto}
.buddhii-landing .float.f3{bottom:10px;right:8px;top:auto;left:auto}

/* tablet */
@media(max-width:900px){
  .buddhii-landing .section{padding:52px 0}
  .buddhii-landing .hero{padding:40px 0 24px}
}
/* phones: mobile-first clean-up - hide decorative chips, tighten header */
@media(max-width:640px){
  .buddhii-landing .float{display:none}
  .buddhii-landing .nav{gap:12px}
  .buddhii-landing .btn{padding:11px 16px;font-size:15px}
  .buddhii-landing .brand-word{font-size:22px}
  .buddhii-landing .hero-art{min-height:260px}
  .buddhii-landing .wrap{padding:0 16px}
}
/* === BUDDHII LANDING FIX v2 END === */
/* === BUDDHII CHECKOUT START === */
/* Checkout / success / failed. All rules scoped under .buddhii-checkout; the
   wrapper is a fixed full-viewport overlay so the app chrome does not wrap it.
   Neutralisers included for app leaks: .btn width:100%, .badge, input/select. */
.buddhii-checkout{
  --ink:#0b3b45;--ink-soft:#3d626b;--teal:#12a19a;--teal-deep:#0c7d78;
  --sun:#ffc63f;--coral:#ff7d6b;--grape:#9384ec;
  --cream:#eef9f8;--card:#ffffff;--line:#d8ece9;
  --ok:#2f9e63;--ok-bg:#e5f7ec;--err:#e0533f;--err-bg:#ffe9e4;
  --shadow:0 10px 30px rgba(11,59,69,.10);
  position:fixed;inset:0;overflow-y:auto;overflow-x:hidden;z-index:200;
  background:var(--cream);color:var(--ink);font-family:'Lexend',system-ui,sans-serif;
  line-height:1.6;-webkit-font-smoothing:antialiased;
}
.buddhii-checkout *{box-sizing:border-box;margin:0;padding:0}
.buddhii-checkout h1,.buddhii-checkout h2,.buddhii-checkout h3,.buddhii-checkout .brand-word,.buddhii-checkout .btn{font-family:'Fredoka',system-ui,sans-serif}

/* header */
.buddhii-checkout .co-head{background:#fff;border-bottom:1px solid var(--line)}
.buddhii-checkout .co-head .in{max-width:1000px;margin:0 auto;padding:16px 22px;display:flex;align-items:center;justify-content:space-between}
.buddhii-checkout .brand{display:flex;align-items:center;gap:9px}
.buddhii-checkout .brand-word{font-size:23px;font-weight:700;color:var(--ink)}
.buddhii-checkout .brand-word b{color:var(--teal)}
.buddhii-checkout .secure{display:flex;align-items:center;gap:7px;color:var(--ink-soft);font-size:13px;font-weight:500}
.buddhii-checkout .secure svg{width:16px;height:16px;color:var(--teal-deep)}

/* checkout layout */
.buddhii-checkout .co-wrap{max-width:1000px;margin:0 auto;padding:34px 22px 60px;display:grid;grid-template-columns:1.15fr .85fr;gap:34px;align-items:start}
.buddhii-checkout .col-main{min-width:0}
.buddhii-checkout h1.co-title{font-size:26px;font-weight:600;margin-bottom:4px}
.buddhii-checkout .co-sub{color:var(--ink-soft);font-size:15px;margin-bottom:26px}
.buddhii-checkout .block{background:#fff;border:1px solid var(--line);border-radius:18px;padding:24px;margin-bottom:20px}
.buddhii-checkout .block h3{font-size:17px;font-weight:600;margin-bottom:4px;display:flex;align-items:center;gap:9px}
.buddhii-checkout .step-n{width:26px;height:26px;border-radius:8px;background:var(--teal);color:#fff;font-family:'Fredoka';font-weight:700;font-size:14px;display:inline-flex;align-items:center;justify-content:center}
.buddhii-checkout .block .hint{color:var(--ink-soft);font-size:13px;margin:2px 0 16px 35px}
.buddhii-checkout .field{margin-bottom:14px}
.buddhii-checkout .field label{display:block;font-size:13px;font-weight:500;color:var(--ink-soft);margin-bottom:6px}
.buddhii-checkout .field input,.buddhii-checkout .field select{width:100%;font-family:'Lexend';font-size:15px;color:var(--ink);padding:12px 14px;border:1.5px solid var(--line);border-radius:12px;background:#fbfefe;outline:none;min-height:0}
.buddhii-checkout .field input:focus,.buddhii-checkout .field select:focus{border-color:var(--teal);box-shadow:none}
.buddhii-checkout .row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}

/* grade picker (multi-tier) + locked line */
.buddhii-checkout .grade-pick{display:flex;flex-wrap:wrap;gap:8px}
.buddhii-checkout .grade-pick .gp{display:flex;align-items:center;gap:7px;border:1.5px solid var(--line);border-radius:10px;padding:9px 13px;font-size:14px;color:var(--ink);cursor:pointer;background:#fbfefe}
.buddhii-checkout .grade-pick .gp.on{border-color:var(--teal);background:#f4fbfa}
.buddhii-checkout .grade-pick .gp.off{opacity:.5;cursor:not-allowed}
.buddhii-checkout .grade-pick .gp input{width:auto;min-height:0;margin:0}
.buddhii-checkout .grade-locked{padding:12px 14px;border:1.5px dashed var(--line);border-radius:12px;color:var(--ink-soft);font-size:14px;background:#fbfefe}

/* payment method box */
.buddhii-checkout .pay-methods{border:1.5px solid var(--teal);border-radius:14px;padding:16px;background:#f4fbfa}
.buddhii-checkout .pay-methods .lead{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--ink);font-weight:500;margin-bottom:12px}
.buddhii-checkout .pay-methods .lead svg{width:22px;height:22px;color:var(--teal-deep);flex:none}
.buddhii-checkout .pm-icons{display:flex;flex-wrap:wrap;gap:8px}
.buddhii-checkout .pm{display:flex;align-items:center;gap:6px;background:#fff;border:1px solid var(--line);border-radius:9px;padding:7px 11px;font-size:12.5px;font-weight:500;color:var(--ink-soft)}
.buddhii-checkout .pm svg{width:16px;height:16px;color:var(--teal-deep)}
.buddhii-checkout .pay-btn{width:100%;font-family:'Fredoka';font-weight:600;font-size:18px;border:none;cursor:pointer;color:#fff;background:var(--teal);padding:16px;border-radius:14px;box-shadow:0 4px 0 var(--teal-deep);display:flex;align-items:center;justify-content:center;gap:9px;transition:transform .12s}
.buddhii-checkout .pay-btn:hover{transform:translateY(-2px)}
.buddhii-checkout .pay-btn svg{width:18px;height:18px}
.buddhii-checkout .pay-msg{margin-top:14px;background:#fff7e6;border:1px solid #ffe0a3;color:#8a5a1e;border-radius:12px;padding:11px 14px;font-size:14px;text-align:center}
.buddhii-checkout .rzp-line{display:flex;align-items:center;justify-content:center;gap:6px;color:var(--ink-soft);font-size:12px;margin-top:12px}
.buddhii-checkout .rzp-line b{color:var(--teal-deep);font-family:'Fredoka';font-weight:600}

/* order summary */
.buddhii-checkout .summary{background:#fff;border:1px solid var(--line);border-radius:18px;padding:24px;position:sticky;top:20px}
.buddhii-checkout .summary h3{font-family:'Fredoka';font-size:17px;font-weight:600;margin-bottom:16px}
.buddhii-checkout .plan-row{display:flex;gap:14px;padding-bottom:16px;border-bottom:1px dashed var(--line);margin-bottom:16px}
.buddhii-checkout .plan-ic{width:46px;height:46px;border-radius:12px;background:#dff5f2;color:var(--teal-deep);display:flex;align-items:center;justify-content:center;flex:none}
.buddhii-checkout .plan-ic svg{width:26px;height:26px}
.buddhii-checkout .plan-name{font-family:'Fredoka';font-weight:600;font-size:16px}
.buddhii-checkout .plan-meta{color:var(--ink-soft);font-size:13px}
.buddhii-checkout .incl{list-style:none;margin-bottom:18px;display:grid;gap:9px}
.buddhii-checkout .incl li{display:flex;gap:9px;font-size:13.5px;color:var(--ink-soft)}
.buddhii-checkout .incl svg{width:15px;height:15px;color:var(--teal);flex:none;margin-top:3px}
.buddhii-checkout .totals{display:grid;gap:9px;font-size:14px;padding-top:4px}
.buddhii-checkout .totals .tr{display:flex;justify-content:space-between;color:var(--ink-soft)}
.buddhii-checkout .totals .tr .save{color:var(--ok);font-weight:600}
.buddhii-checkout .totals .grand{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid var(--line);margin-top:8px;padding-top:12px}
.buddhii-checkout .totals .grand .lbl{font-family:'Fredoka';font-weight:600;font-size:16px;color:var(--ink)}
.buddhii-checkout .totals .grand .amt{font-family:'Fredoka';font-weight:700;font-size:26px;color:var(--ink)}
.buddhii-checkout .mrp{color:var(--ink-soft);text-decoration:line-through;font-size:13px}
.buddhii-checkout .trust{display:flex;align-items:center;gap:8px;margin-top:16px;padding-top:14px;border-top:1px solid var(--line);color:var(--ink-soft);font-size:12px}
.buddhii-checkout .trust svg{width:15px;height:15px;color:var(--teal-deep);flex:none}
.buddhii-checkout .osum-bar{display:none}

/* result pages */
.buddhii-checkout .result{max-width:560px;margin:0 auto;padding:60px 22px;text-align:center}
.buddhii-checkout .result .badge{width:88px;height:88px;border-radius:50%;margin:0 auto 22px;display:flex;align-items:center;justify-content:center;padding:0;text-transform:none;letter-spacing:normal}
.buddhii-checkout .result .badge svg{width:46px;height:46px}
.buddhii-checkout .result.ok .badge{background:var(--ok-bg);color:var(--ok)}
.buddhii-checkout .result.err .badge{background:var(--err-bg);color:var(--err)}
.buddhii-checkout .result h1{font-size:30px;font-weight:700;margin-bottom:10px}
.buddhii-checkout .result p{color:var(--ink-soft);font-size:16px;margin-bottom:24px}
.buddhii-checkout .rcard{background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px;text-align:left;margin-bottom:26px}
.buddhii-checkout .rcard .rr{display:flex;justify-content:space-between;font-size:14px;padding:8px 0}
.buddhii-checkout .rcard .rr+.rr{border-top:1px solid var(--line)}
.buddhii-checkout .rcard .rr .k{color:var(--ink-soft)}
.buddhii-checkout .rcard .rr .v{font-weight:600;font-family:'Fredoka'}
.buddhii-checkout .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:'Fredoka';font-weight:600;font-size:16px;border:none;cursor:pointer;text-decoration:none;padding:14px 26px;border-radius:14px;width:auto;min-height:0}
.buddhii-checkout .btn-primary{background:var(--teal);color:#fff;box-shadow:0 4px 0 var(--teal-deep)}
.buddhii-checkout .btn-ghost{background:#fff;color:var(--teal-deep);box-shadow:0 4px 0 var(--line)}
.buddhii-checkout .result .actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.buddhii-checkout .support{margin-top:20px;font-size:13px;color:var(--ink-soft)}
.buddhii-checkout .support a{color:var(--teal-deep);font-weight:600;text-decoration:none}

/* footer */
.buddhii-checkout .co-foot{border-top:1px solid var(--line);background:#fff}
.buddhii-checkout .co-foot .in{max-width:1000px;margin:0 auto;padding:20px 22px;display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:center;font-size:13px}
.buddhii-checkout .co-foot a{color:var(--ink-soft);text-decoration:none}
.buddhii-checkout .co-foot a:hover{color:var(--teal-deep)}

@media(max-width:820px){
  .buddhii-checkout .co-wrap{grid-template-columns:1fr;gap:0;padding-top:0;padding-left:22px;padding-right:22px}
  .buddhii-checkout .col-side{order:-1}
  .buddhii-checkout .summary{position:static;border-radius:0;border-left:0;border-right:0;border-top:0;margin:0 -22px 22px;padding:0 22px;overflow:hidden;max-height:0;border-bottom:1px solid var(--line)}
  .buddhii-checkout .summary.open{max-height:1200px;padding:22px}
  .buddhii-checkout .osum-bar{display:flex;align-items:center;justify-content:space-between;cursor:pointer;background:#fff;border-bottom:1px solid var(--line);margin:0 -22px 0;padding:16px 22px}
  .buddhii-checkout .osum-bar .l{display:flex;align-items:center;gap:8px;color:var(--teal-deep);font-weight:600;font-size:14px}
  .buddhii-checkout .osum-bar .l svg{width:16px;height:16px;transition:transform .2s}
  .buddhii-checkout .osum-bar.open .l svg{transform:rotate(180deg)}
  .buddhii-checkout .osum-bar .amt{font-family:'Fredoka';font-weight:700;font-size:18px}
  .buddhii-checkout .col-main{padding-top:24px}
}
@media(max-width:520px){
  .buddhii-checkout .row2{grid-template-columns:1fr}
  .buddhii-checkout h1.co-title{font-size:22px}
}
/* === BUDDHII CHECKOUT END === */

/* === BUDDHII TOKENS START === */
/* App-shell polish (batch A2): Buddhii teal design tokens + retheme map.
   The --bd-* layer is the source of truth; the app's existing theme vars are
   re-pointed onto it below (values only, names unchanged) so every screen
   re-skins with no component rewrites. Correctness stays GREEN, danger RED.
   ASCII only, no emoji (inline SVG elsewhere). Custom properties resolve
   after full parse, so these definitions apply to earlier uses too. */
:root {
  /* palette */
  --bd-teal:       #12a19a;
  --bd-teal-deep:  #0c7d78;
  --bd-teal-dark:  #0a625e;
  --bd-teal-bright:#1fc0b8;
  --bd-sky:        #41c3f0;
  --bd-sun:        #ffc63f;
  --bd-coral:      #ff7d6b;
  --bd-grape:      #9384ec;
  --bd-ink:        #0b3b45;
  --bd-ink-soft:   #3d626b;
  --bd-cream:      #eef9f8;
  --bd-card:       #ffffff;
  --bd-line:       #d8ece9;
  --bd-ok:         #2f9e63;
  --bd-warn:       #d98a00;
  --bd-err:        #e0533f;

  /* semantic */
  --bd-primary: var(--bd-teal-deep);   /* interactive; 4.56:1 white text -> AA */
  --bd-bg:      var(--bd-cream);
  --bd-text:    var(--bd-ink);
  --bd-muted:   #4f6f74;               /* >= 5:1 on white/cream -> AA */
  --bd-surface: var(--bd-card);
  --bd-border:  var(--bd-line);

  /* spacing scale */
  --bd-space-1: 4px;
  --bd-space-2: 8px;
  --bd-space-3: 12px;
  --bd-space-4: 16px;
  --bd-space-5: 24px;
  --bd-space-6: 32px;
  --bd-space-7: 48px;
  --bd-space-8: 64px;

  /* radius */
  --bd-r-sm:   8px;
  --bd-r-md:   12px;
  --bd-r-lg:   16px;
  --bd-r-xl:   22px;
  --bd-r-pill: 999px;

  /* type */
  --bd-font-head: 'Fredoka', ui-rounded, 'Segoe UI', system-ui, sans-serif;
  --bd-font-body: 'Lexend', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --bd-fs-1: 12px;
  --bd-fs-2: 14px;
  --bd-fs-3: 16px;
  --bd-fs-4: 18px;
  --bd-fs-5: 20px;
  --bd-fs-6: 24px;
  --bd-fs-7: 28px;
  --bd-fs-8: 32px;

  /* shadow */
  --bd-shadow-sm: 0 2px 12px rgba(11, 59, 69, .06);
  --bd-shadow-md: 0 10px 30px rgba(11, 59, 69, .10);
  --bd-shadow-lg: 0 16px 40px rgba(11, 59, 69, .16);

  /* ---- retheme: re-point the app's existing vars onto the teal tokens ---- */
  --brand:        var(--bd-teal-deep);   /* primary (buttons/links/fills) - AA */
  --brand-deep:   var(--bd-teal-dark);   /* ledges, topbar, heading accents   */
  --brand-bright: var(--bd-ok);          /* KEEP GREEN = "correct / positive"  */
  --mint:         #8fd3ce;
  --mint-soft:    #dff3f1;
  --amber:        var(--bd-sun);
  --amber-soft:   #fff2d6;
  --danger:       var(--bd-err);
  --page-bg:      var(--bd-cream);
  --card-bg:      var(--bd-card);
  --ink:          var(--bd-ink);
  --ink-soft:     var(--bd-ink-soft);
  --muted:        var(--bd-muted);
  --border:       var(--bd-line);
  --shadow-soft:  var(--bd-shadow-sm);
  --shadow-lift:  var(--bd-shadow-md);
  --correct-tint: #e2f5ea;
  --wrong-tint:   #fdeae6;
}
/* === BUDDHII TOKENS END === */

/* === BUDDHII APPSHELL START === */
/* A3 desktop two-column attempt layout, A4 mobile sticky action bar + compact
   header, A5 in-session reward stars. Layout/visual only - no exam/practice/
   timer/answer logic is touched. Uses the tokens above. */

/* Attempt = the practice + exam take screens. Single column by default. */
.attempt { display: block; }
.attempt-side { display: none; }               /* revealed on desktop only */
.attempt-mtop { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

/* A3 - desktop: comfortable reading column + sticky context side panel */
@media (min-width: 1000px) {
  .attempt {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: var(--bd-space-6);
    align-items: start;
    max-width: 1060px;
    margin: 0 auto;
  }
  .attempt-main { max-width: 760px; }
  .attempt-side { display: block; position: sticky; top: 84px; }
  /* the numeric progress row lives in the side panel on desktop */
  .attempt-main > .progress { display: none; }
}

.aside-card {
  background: var(--bd-surface);
  border: 1px solid var(--bd-border);
  border-radius: var(--bd-r-xl);
  box-shadow: var(--bd-shadow-sm);
  padding: var(--bd-space-5);
  text-align: center;
}
.aside-owl { display: flex; justify-content: center; margin-bottom: var(--bd-space-3); }
.aside-count {
  font-family: var(--bd-font-head);
  font-weight: 600;
  color: var(--bd-ink);
  font-size: var(--bd-fs-4);
}
.aside-bar {
  height: 10px;
  border-radius: var(--bd-r-pill);
  background: var(--bd-line);
  overflow: hidden;
  margin: var(--bd-space-2) 0 var(--bd-space-4);
}
.aside-fill { height: 100%; background: var(--bd-primary); transition: width .25s ease; }
.aside-note { color: var(--bd-muted); font-size: var(--bd-fs-2); margin-top: var(--bd-space-2); }
.aside-tokens { margin-top: var(--bd-space-4); display: flex; justify-content: center; }

/* A5 - session star counter chip (side panel + compact mobile header) */
.tokens {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff8e6;
  border: 1px solid #ffe6ab;
  color: #8a5a12;
  border-radius: var(--bd-r-pill);
  padding: 6px 14px;
  font-weight: 700;
  font-family: var(--bd-font-head);
}
.tokens svg { width: 20px; height: 20px; fill: var(--bd-sun); display: block; }
.tokens .n { font-variant-numeric: tabular-nums; font-size: var(--bd-fs-4); }
.tokens .lbl { font-size: var(--bd-fs-2); font-weight: 600; }

/* the compact-header star chip shows on mobile/tablet; the side panel owns it on desktop */
.mhead-tokens { display: none; }
@media (max-width: 999px) { .mhead-tokens { display: inline-flex; } }

/* reward pop shown beside the "Correct" verdict */
.token-pop {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 8px;
  color: #8a5a12;
  font-weight: 800;
  font-size: var(--bd-fs-3);
  vertical-align: middle;
}
.token-pop svg { width: 22px; height: 22px; fill: var(--bd-sun); animation: bd-token-pop .45s ease both; }
@keyframes bd-token-pop {
  0%   { transform: scale(.3) rotate(-14deg); opacity: 0; }
  60%  { transform: scale(1.25) rotate(6deg); }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}

/* A4 - mobile: pin the primary action row + trim the top gap */
@media (max-width: 640px) {
  .container:has(.attempt) { padding-top: var(--bd-space-3); }
  .attempt-main .practice-top { margin-bottom: var(--bd-space-2); }
  .attempt-main > .progress { margin-bottom: 10px; }
  .attempt-main .exam-bar,
  .attempt-main .exam-palette { margin-bottom: var(--bd-space-2); }
  .exam-finish-extra { display: none; }        /* redundant with the sticky Finish */

  .attempt .attempt-actions {
    position: sticky;
    bottom: 0;
    display: flex;
    gap: 10px;
    margin: var(--bd-space-4) -22px -22px;      /* break out to the card edges */
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    background: var(--bd-surface);
    border-top: 1px solid var(--bd-border);
    border-radius: 0 0 var(--bd-r-xl) var(--bd-r-xl);
    box-shadow: 0 -8px 20px rgba(11, 59, 69, .10);
    z-index: 20;
  }
  .attempt .attempt-actions .btn { flex: 1 1 auto; width: auto; min-height: 48px; }
}

/* Motion off for reduced-motion users (star pop) */
@media (prefers-reduced-motion: reduce) {
  .token-pop svg { animation: none; }
}
/* === BUDDHII APPSHELL END === */

/* === BUDDHII HOME FX START === */
/* Home/topics liveliness (batch B2 animation + B3 gamification). Presentation
   and derived-display only - every number is computed at render from the
   existing /progress response. Uses the --bd-* tokens. All motion is disabled
   under prefers-reduced-motion (block at the end). ASCII only, no emoji. */

/* ---- B2 entrance: hero, topic cards, goal card rise + fade ---- */
@keyframes bd-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
.home-hero { animation: bd-rise .5s ease both; }
.home-goal { animation: bd-rise .5s ease both .1s; }
.module-grid .module-btn {
  animation: bd-rise .5s ease both;
  animation-delay: calc(var(--i, 0) * 70ms + 120ms);
}

/* ---- B2 topic card hover: lift + gentle scale + token nudge ---- */
.module-grid .module-btn {
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.module-grid .module-btn:hover {
  transform: translateY(-5px) scale(1.015);
  box-shadow: var(--bd-shadow-lg);
  border-color: var(--bd-teal);
}
.module-grid .module-btn:active { transform: translateY(-2px) scale(.997); }

/* ---- B2 owl idle bob (greeting only) ---- */
.home-owl { display: inline-flex; }
.home-owl svg { animation: bd-owl-bob 3.4s ease-in-out infinite; transform-origin: 50% 90%; }
@keyframes bd-owl-bob {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-3px) rotate(-2.5deg); }
}

/* ---- rings (level + daily goal): arc fills with a short transition ---- */
.bd-ring { display: block; }
.bd-ring-arc { transition: stroke-dashoffset .9s cubic-bezier(.4, 0, .2, 1); }
.ring-wrap, .goal-ring {
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
}
.ring-num {
  position: absolute;
  font-family: var(--bd-font-head);
  font-weight: 700;
  font-size: var(--bd-fs-3);
  color: var(--bd-ink);
}

/* ---- B3 hero stats strip ---- */
.hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 4px 0 2px;
}
.stat-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bd-cream);
  border: 1px solid var(--bd-border);
  border-radius: var(--bd-r-lg);
  padding: 8px 14px 8px 10px;
}
.stat-chip .chip-text { display: flex; flex-direction: column; line-height: 1.15; }
.stat-chip .chip-big {
  font-family: var(--bd-font-head);
  font-weight: 700;
  font-size: var(--bd-fs-5);
  color: var(--bd-ink);
}
.stat-chip .chip-sub { font-size: var(--bd-fs-1); color: var(--bd-muted); font-weight: 600; }
.stat-chip .chip-ico { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; }
.stat-chip .chip-ico svg { width: 20px; height: 20px; display: block; }
.stat-chip .chip-ico.star { background: #fff3d1; }
.stat-chip .chip-ico.star svg { fill: var(--bd-sun); }
.stat-chip .chip-ico.flame { background: #ffe4d8; }
.stat-chip .chip-ico.flame svg { fill: var(--bd-coral); }

/* ---- B3 achievements row (earned only) ---- */
.hero-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.ach {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fff8e6;
  border: 1px solid #ffe6ab;
  color: #8a5a12;
  border-radius: var(--bd-r-pill);
  padding: 5px 12px;
  font-weight: 700;
  font-size: var(--bd-fs-2);
}
.ach svg { width: 15px; height: 15px; fill: var(--bd-sun); }

/* ---- B3 topic token circles (one colour per topic) ---- */
.mod-token {
  display: inline-grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  margin-bottom: 4px;
  transition: transform .12s ease;
}
.module-btn:hover .mod-token { transform: translateY(-2px) scale(1.06); }
.tok-teal  { background: #d7f0ee; }
.tok-sun   { background: #fff0c9; }
.tok-coral { background: #ffe0d8; }
.tok-grape { background: #e9e5fb; }
.tok-sky   { background: #d9f1fb; }

/* ---- B3 per-topic progress bar + mastery stars ---- */
.mod-stats { display: block; margin-top: 10px; }
.mod-bar {
  display: block;
  height: 8px;
  border-radius: var(--bd-r-pill);
  background: var(--bd-line);
  overflow: hidden;
}
.mod-fill {
  display: block;
  height: 100%;
  background: var(--bd-teal-deep);
  border-radius: var(--bd-r-pill);
  transition: width .9s cubic-bezier(.4, 0, .2, 1);
}
.mod-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 6px;
}
.mstars { display: inline-flex; gap: 2px; }
.mstars svg { width: 15px; height: 15px; }
.mstars svg.on { fill: var(--bd-sun); }
.mstars svg.off { fill: var(--bd-line); }
.mod-num { font-size: var(--bd-fs-1); color: var(--bd-muted); font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---- B3 daily-goal card ---- */
.home-goal { display: flex; align-items: center; gap: 20px; }
.goal-num {
  position: absolute;
  font-family: var(--bd-font-head);
  font-weight: 700;
  font-size: var(--bd-fs-6);
  color: var(--bd-ink);
  line-height: 1;
}
.goal-num .goal-of { font-size: var(--bd-fs-2); color: var(--bd-muted); font-weight: 600; }
.home-goal .goal-text h2 { font-size: var(--bd-fs-5); }

/* ---- reduced motion: kill all of the above motion ---- */
@media (prefers-reduced-motion: reduce) {
  .home-hero,
  .home-goal,
  .module-grid .module-btn { animation: none; }
  .home-owl svg { animation: none; }
  .bd-ring-arc,
  .mod-fill { transition: none; }
  .module-grid .module-btn:hover { transform: none; }
  .module-btn:hover .mod-token { transform: none; }
}
/* === BUDDHII HOME FX END === */

/* === BUDDHII AUTH START === */
/* Split-screen auth layout (Login / Register / Forgot / Reset) from the auth
   mockup. Every rule is scoped under .buddhii-auth, which is a fixed full-
   viewport overlay (like .buddhii-landing / .buddhii-checkout) so it covers the
   app topbar and stands alone. Local teal tokens + a reset keep the app's
   global .btn/input/label/.brand rules from leaking in. Preview-only note,
   switcher and view-toggle rules from the mockup are intentionally dropped.
   ASCII only, no emoji (icons are inline SVG in the components). */
.buddhii-auth {
  --ink: #0b3b45; --ink-soft: #3d626b;
  --teal: #12a19a; --teal-deep: #0c7d78; --teal-dark: #0a545a;
  --sun: #ffc63f; --coral: #ff7d6b; --grape: #9384ec; --sky: #41c3f0;
  --cream: #eef9f8; --card: #ffffff; --line: #d8ece9;
  --shadow: 0 18px 50px rgba(11, 59, 69, .14);
  --err: #e0533f; --err-bg: #ffe9e4; --ok: #2f9e63; --ok-bg: #e5f7ec;

  position: fixed;
  inset: 0;
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 200;
  background: var(--cream);
  color: var(--ink);
  font-family: 'Lexend', system-ui, sans-serif;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
.buddhii-auth * { box-sizing: border-box; margin: 0; padding: 0; }
.buddhii-auth h1, .buddhii-auth h2, .buddhii-auth h3,
.buddhii-auth .brand-word, .buddhii-auth .btn, .buddhii-auth .feat b {
  font-family: 'Fredoka', system-ui, sans-serif;
}

.buddhii-auth .auth {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  min-height: 100vh;
}

/* LEFT brand panel */
.buddhii-auth .brandside {
  position: relative;
  overflow: hidden;
  background: linear-gradient(150deg, var(--teal) 0%, var(--teal-deep) 55%, var(--teal-dark) 100%);
  color: #eafffb;
  padding: 44px 54px;
  display: flex;
  flex-direction: column;
}
.buddhii-auth .brandside .blob { position: absolute; border-radius: 50%; opacity: .16; background: #fff; }
.buddhii-auth .brandside .b1 { width: 320px; height: 320px; top: -90px; right: -70px; }
.buddhii-auth .brandside .b2 { width: 180px; height: 180px; bottom: 40px; left: -60px; opacity: .12; }
.buddhii-auth .brandside .b3 { width: 120px; height: 120px; bottom: -30px; right: 80px; opacity: .10; }
.buddhii-auth .bwordmark { display: flex; align-items: center; gap: 11px; position: relative; z-index: 2; }
.buddhii-auth .bwordmark .brand-word { font-size: 26px; font-weight: 700; color: #fff; }
.buddhii-auth .bcenter { margin: auto 0; position: relative; z-index: 2; max-width: 440px; }
.buddhii-auth .owl-hero { width: 96px; height: 96px; margin-bottom: 22px; }
.buddhii-auth .bcenter h2 { font-size: 38px; line-height: 1.08; font-weight: 700; color: #fff; letter-spacing: -.5px; }
.buddhii-auth .bcenter h2 .u { color: var(--sun); }
.buddhii-auth .bcenter .lead { font-size: 16px; color: #c8efeb; margin: 16px 0 30px; max-width: 400px; }
.buddhii-auth .feats { display: grid; gap: 16px; }
.buddhii-auth .feat { display: flex; align-items: flex-start; gap: 13px; }
.buddhii-auth .feat .fic {
  width: 38px; height: 38px; border-radius: 11px; background: rgba(255, 255, 255, .14);
  display: flex; align-items: center; justify-content: center; flex: none;
}
.buddhii-auth .feat .fic svg { width: 19px; height: 19px; color: #eafffb; }
.buddhii-auth .feat b { display: block; font-weight: 600; font-size: 15px; color: #fff; }
.buddhii-auth .feat span { font-size: 13.5px; color: #bfe6e2; }
.buddhii-auth .bfoot { position: relative; z-index: 2; font-size: 12.5px; color: #9fd5d0; margin-top: 28px; }

/* RIGHT form panel */
.buddhii-auth .formside {
  display: flex; align-items: center; justify-content: center;
  padding: 40px 24px; background: #fff;
}
.buddhii-auth .formwrap { width: 100%; max-width: 404px; }
.buddhii-auth .mini-brand { display: none; align-items: center; gap: 9px; justify-content: center; margin-bottom: 26px; }
.buddhii-auth .mini-brand .brand-word { font-size: 22px; font-weight: 700; color: var(--ink); }
.buddhii-auth .formwrap h1 { font-size: 28px; font-weight: 700; color: var(--ink); }
.buddhii-auth .formwrap .sub { color: var(--ink-soft); font-size: 15px; margin: 6px 0 28px; }
.buddhii-auth .field { margin-bottom: 16px; }
.buddhii-auth .field label { display: block; font-size: 13px; font-weight: 600; color: var(--ink); margin-bottom: 7px; }
.buddhii-auth .field .inp { position: relative; }
.buddhii-auth .field .inp svg {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px; color: var(--ink-soft);
}
.buddhii-auth .field input {
  width: 100%; font-family: 'Lexend', system-ui, sans-serif; font-size: 15px; color: var(--ink);
  padding: 13px 14px 13px 42px; border: 1.5px solid var(--line); border-radius: 12px;
  background: #fbfefe; outline: none; transition: border-color .15s, box-shadow .15s;
}
.buddhii-auth .field input:focus { border-color: var(--teal); box-shadow: 0 0 0 4px rgba(18, 161, 154, .12); }
.buddhii-auth .field select {
  width: 100%; font-family: 'Lexend', system-ui, sans-serif; font-size: 15px; color: var(--ink);
  padding: 13px 14px; border: 1.5px solid var(--line); border-radius: 12px; background: #fbfefe; outline: none;
}
.buddhii-auth .field select:focus { border-color: var(--teal); box-shadow: 0 0 0 4px rgba(18, 161, 154, .12); }
.buddhii-auth .hint-min { font-size: 12.5px; color: var(--ink-soft); margin-top: 6px; }
.buddhii-auth .rowflex { display: flex; justify-content: flex-end; margin: -6px 0 20px; }
.buddhii-auth .link {
  color: var(--teal-deep); font-weight: 600; font-size: 13.5px; text-decoration: none;
  background: none; border: none; cursor: pointer;
}
.buddhii-auth .link:hover { text-decoration: underline; }
.buddhii-auth .btn {
  width: 100%; font-family: 'Fredoka', system-ui, sans-serif; font-weight: 600; font-size: 17px;
  border: none; cursor: pointer; color: #fff; background: var(--teal); padding: 14px;
  border-radius: 12px; box-shadow: 0 4px 0 var(--teal-deep); transition: transform .12s; min-height: auto;
}
.buddhii-auth .btn:hover:not(:disabled) { transform: translateY(-2px); }
.buddhii-auth .btn:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 2px 0 var(--teal-deep); }
.buddhii-auth .btn:disabled { opacity: .6; cursor: default; }
.buddhii-auth .altline { text-align: center; margin-top: 22px; font-size: 14px; color: var(--ink-soft); }

/* error / success lines - messages unchanged, only the container is styled */
.buddhii-auth .auth-err {
  background: var(--err-bg); border: 1px solid #f5c2b6; color: #8a2b1c;
  border-radius: 12px; padding: 11px 14px; font-size: 14px; margin-bottom: 16px;
}
.buddhii-auth .auth-err ul { margin: .4rem 0 0 1rem; }
.buddhii-auth .auth-ok {
  background: var(--ok-bg); border: 1px solid #b7e6c8; color: #1f6b41;
  border-radius: 12px; padding: 11px 14px; font-size: 14px; margin-bottom: 16px;
}

@media (max-width: 860px) {
  .buddhii-auth .auth { grid-template-columns: 1fr; }
  .buddhii-auth .brandside { display: none; }
  .buddhii-auth .mini-brand { display: flex; }
  .buddhii-auth .formside { min-height: 100vh; padding: 30px 20px; background: var(--cream); align-items: flex-start; }
  .buddhii-auth .formwrap {
    background: #fff; border: 1px solid var(--line); border-radius: 20px;
    padding: 30px 24px; box-shadow: var(--shadow); margin-top: 24px;
  }
}
/* === BUDDHII AUTH END === */