:root{
  --ink:#1b1434;
  --muted:#6f6a86;

  --border:#e6e0f5;
  --shadow:0 16px 34px rgba(44,29,90,.12);

  --page:#f7f5ff;

  /* primary palette (purple) */
  --teal:#5b45d4;
  --green:#6a52e6;
  --orange:#7a63f2;

  /* pills */
  --pill-orange:#e5dbff;
  --pill-peach:#f0e7ff;
  --pill-mint:#d8d0ff;

  /* topic bars */
  --your:#5b45d4;
  --all:#c7bbff;

  /* histogram colors */
  --h-red:#ff6b6b;
  --h-orange:#ffa24a;
  --h-yellow:#ffd54a;
  --h-lime:#cde95a;
  --h-green:#3fe07a;

  /* ✅ FONT FAMILY (as requested) */
  font-family: "acumin-pro-condensed",
               system-ui,
               -apple-system,
               "Segoe UI",
               Roboto,
               Inter,
               Arial,
               sans-serif;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--ink);
  background:var(--page);
  font-size:15px;

  -webkit-font-smoothing:antialiased;
  text-rendering:geometricPrecision;
  display:flex;
  flex-direction:column;
  min-height:100vh;
}

/* includes */
[data-include]{
  display:block;
}


/* container */
.container{
  width:min(1180px, calc(100% - 48px));
  margin:0 auto;
}

/* header */
.site-header{
  position:sticky;
  top:0;
  z-index:50;
  background: linear-gradient(120deg, #2b1f4d 0%, #3c2b77 55%, #4a3192 100%);
  border-bottom:1px solid rgba(255,255,255,.12);
}

.header-inner{
  height:64px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;

  width:100%;
  max-width:none;
  margin:0;
  padding:0 26px;
}


.brand{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  color:#f8f7ff;
  font-weight:800;
}

.brand-mark{
  width:26px;height:26px;
  border-radius:6px;
  background:#6b4bff;
  color:#fff;
  display:grid;
  place-items:center;
  font-size:13px;
}

.brand-text{
  letter-spacing:.02em;
}
.brand-strong{font-weight:900}

.top-nav{
  display:flex;
  align-items:center;
  gap:18px;
  color:#f8f7ff;
  font-size:14px;

  margin-left:auto;
  margin-right:16px;
  justify-content:flex-end;
}

.header-search{
  display:flex;
  align-items:center;
  gap:8px;
  padding:4px 8px 4px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.25);
  background:rgba(255,255,255,.12);
  min-width:220px;
  max-width:320px;
}
.header-search:focus-within{
  border-color:rgba(255,255,255,.6);
  box-shadow:0 0 0 3px rgba(107,75,255,.28);
}
.header-search__input{
  border:0;
  background:transparent;
  color:#f8f7ff;
  font-size:13px;
  width:180px;
  outline:none;
}
.header-search__input::placeholder{
  color:rgba(255,255,255,.6);
}
.header-search__input::-webkit-search-cancel-button{
  -webkit-appearance:none;
  height:12px;
  width:12px;
  border-radius:50%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23ffffff' d='M3.7 3.7a1 1 0 0 1 1.4 0L8 6.6l2.9-2.9a1 1 0 1 1 1.4 1.4L9.4 8l2.9 2.9a1 1 0 1 1-1.4 1.4L8 9.4l-2.9 2.9a1 1 0 1 1-1.4-1.4L6.6 8 3.7 5.1a1 1 0 0 1 0-1.4Z'/%3E%3C/svg%3E") center/12px 12px no-repeat;
}
.header-search__input::-ms-clear{
  display:none;
}
.header-search__btn{
  width:32px;
  height:32px;
  border:0;
  border-radius:999px;
  background:rgba(255,255,255,.2);
  color:#fff;
  display:grid;
  place-items:center;
  cursor:pointer;
}
.header-search__icon{
  width:16px;
  height:16px;
}


.nav-item{
  text-decoration:none;
  color:#f8f7ff;
  padding:8px 4px;
  border-bottom:2px solid transparent;
}

.nav-item:hover{
  border-bottom-color:rgba(255,255,255,.6);
}
.nav-ico{
  display:inline-grid;
  place-items:center;
  width:28px;height:28px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,.25);
  color:#f8f7ff;
}
.is-active{
  font-weight:700;
}

.profile-chip{
  width:42px;height:42px;
  border-radius:999px;
  display:grid;
  place-items:center;
  background:rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.35);
  font-weight:700;
  color:#f8f7ff;
}

.profile-menu{
  position:relative;
}

.profile-menu summary{
  cursor:pointer;
  list-style:none;
}

.profile-menu summary::-webkit-details-marker,
.profile-menu summary::marker{
  display:none;
}

.profile-dropdown{
  position:absolute;
  right:0;
  top:calc(100% + 6px);
  background:#fff;
  border-radius:10px;
  box-shadow:0 18px 28px rgba(15,23,42,.18);
  border:1px solid rgba(15,23,42,.1);
  min-width:180px;
  display:none;
  flex-direction:column;
  padding:6px 0;
  z-index:60;
}

.profile-menu[open] .profile-dropdown{
  display:flex;
}

.profile-dropdown a,
.profile-dropdown button{
  padding:10px 16px;
  text-decoration:none;
  color:#111;
  font-size:14px;
  font-weight:600;
  text-align:left;
  background:transparent;
  border:0;
  cursor:pointer;
  display:block;
  width:100%;
}

.profile-dropdown a:hover,
.profile-dropdown button:hover{
  background:#f3f5f4;
}

.profile-dropdown form{
  margin:0;
}

/* page spacing */
.page{
  padding:28px 0 0;
   flex:1;
}

/* welcome row */
.welcome-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:16px 0 6px;
}

.welcome-copy{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.welcome-title{
  margin:0;
  font-size:24px;
  font-weight:850;
  letter-spacing:-.01em;
}

.welcome-tag{
  display:inline-flex;
  align-items:center;
  width:fit-content;
  padding:4px 10px;
  border-radius:999px;
  border:1px solid rgba(91,69,212,.25);
  background:#eee9ff;
  color:#3b2aa0;
  font-size:12px;
  font-weight:700;
}


.stat-row{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.stat-pill{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 12px;
  border-radius:10px;
  font-size:13px;
  border:1px solid rgba(15,23,42,.06);
}

.stat-num{
  width:30px;height:30px;
  border-radius:8px;
  display:grid;
  place-items:center;
  font-weight:800;
  color:#111;
  background:rgba(255,255,255,.55);
}

.stat-text{
  white-space:nowrap;
  color:#111;
}

.stat-pill--orange{background:var(--pill-orange)}
.stat-pill--peach{background:var(--pill-peach)}
.stat-pill--mint{background:var(--pill-mint)}

/* top 3 cards */
.cards-3{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:18px;
  margin-top:18px;
}



.big-card{
  border-radius:14px;
  padding:26px 26px 22px;
  min-height:175px;
  text-decoration:none;
  color:#fff;
  position:relative;

  border:1px solid rgba(255,255,255,.35);
  box-shadow:
    0 18px 38px rgba(15, 23, 42, .16),
    0 2px 0 rgba(0,0,0,.06);
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.big-card__head{
  font-weight:900;
  font-size:26px;
  margin-bottom:10px;
  letter-spacing:-.01em;
}


.big-card__text{
  margin:0;
  font-size:14px;
  line-height:1.55;
  color:rgba(255,255,255,.86);
  max-width:360px;
}


.big-card:hover{
  transform:translateY(-4px);
  box-shadow:
    0 22px 48px rgba(15, 23, 42, .20),
    0 2px 0 rgba(0,0,0,.06);
  filter:saturate(1.05) contrast(1.02);
}

.big-card__arrow{
  position:absolute;
  right:20px;
  bottom:16px;
  font-size:24px;
  font-weight:800;
  opacity:.95;
  color:#fff;
}


.big-card--teal{background:var(--teal)}
.big-card--green{background:var(--green)}
.big-card--orange{background:var(--orange)}

.cards-3--equal{
  margin-top:16px;
}

/* panels */
.panel{
  border-radius:10px;
  border:1px solid var(--border);
  background:#eef9f4;
  min-height:360px;
  padding:22px;
  box-shadow:var(--shadow);
}

.panel--pale{background:#eaf8f2}
.panel--mint{background:#e8e1ff}

.panel__header{
  margin-bottom:16px;
}
.panel__title{
  margin:0;
  font-size:22px;
  font-weight:800;
}
.panel__sub{
  margin:6px 0 0;
  color:var(--muted);
  font-size:13px;
}

/* donut */
.donut-wrap{
  display:grid;
  place-items:center;
  height:270px;
}
.donut{
  width:260px;
  height:260px;
  border-radius:999px;
  background:
    conic-gradient(#52d6b1 calc(var(--p) * 1%), rgba(82,214,177,.25) 0);
  position:relative;
}
.donut::after{
  content:"";
  position:absolute;
  inset:22px;
  border-radius:999px;
  background:#eaf8f2;
}
.donut__center{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  z-index:2;
}
.donut__value{
  font-size:58px;
  font-weight:900;
  letter-spacing:-.02em;
  color:#0b1220;
}
.completion-summary{
  display:grid;
  gap:10px;
}
.completion-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:13px;
  color:#0f172a;
}
.completion-row strong{
  font-size:15px;
}
.completion-meta{
  font-size:12px;
  color:rgba(17,24,39,.6);
  margin-top:6px;
}
.completion-goal{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:14px;
  padding:10px 12px;
  border-radius:10px;
  background:rgba(255,255,255,.7);
  font-size:13px;
  font-weight:700;
}

/* percentile chip */
.percentile-chip{
  display:inline-flex;
  align-items:baseline;
  gap:6px;
  padding:10px 12px;
  border-radius:6px;
  background:rgba(255,255,255,.55);
  border:1px solid rgba(15,23,42,.08);
  font-weight:800;
  width:max-content;
  margin-bottom:14px;
}
.percentile-chip span{
  font-weight:500;
  color:var(--muted);
}

/* histogram */
.histogram{
  margin-top:8px;
  position:relative;
  padding:12px 10px 0;
}

.histogram__bars{
  height:210px;
  border-bottom:2px solid rgba(15,23,42,.25);
  display:flex;
  align-items:flex-end;
  gap:2px;
  padding:0 6px;
}

.bar{
  width:10px;
  height:calc(var(--h) * 8px);
  background:var(--c);
}

.histogram__marker{
  position:absolute;
  left:calc(var(--x) * 1%);
  top:18px;
  transform:translateX(-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  pointer-events:none;
}
.histogram__label{
  font-size:12px;
  color:#111;
  font-weight:700;
}
.histogram__line{
  width:3px;
  height:190px;
  background:#111;
}

.histogram__axis{
  display:flex;
  justify-content:space-between;
  gap:6px;
  padding:10px 0 0;
  font-size:11px;
  color:rgba(17,24,39,.7);
}

/* mastery card */
.mastery-top{
  height:88px;
  display:flex;
  align-items:center;
  justify-content:flex-end;
}
.avatar-stack{
  position:relative;
  width:210px;
  height:70px;
}
.av{
  position:absolute;
  width:54px;height:54px;
  border-radius:999px;
  border:3px solid #d7f3ea;
  background:linear-gradient(135deg, rgba(255,255,255,.85), rgba(0,0,0,.05));
}
.av1{left:0; top:10px}
.av2{left:38px; top:0}
.av3{left:78px; top:16px}
.av4{left:122px; top:6px}
.av5{left:156px; top:18px}

.mastery-title{
  margin:0;
  font-size:24px;
  font-weight:900;
}
.mastery-text{
  margin:10px 0 16px;
  color:rgba(17,24,39,.75);
  font-size:13px;
  line-height:1.5;
  max-width:360px;
}
.btn-dark{
  width:100%;
  height:52px;
  border-radius:8px;
  border:none;
  background:#0b0b0c;
  color:#fff;
  font-weight:700;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  cursor:pointer;
}
.btn-ico{
  width:22px;height:22px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.25);
  border-radius:6px;
  font-size:12px;
}
.mastery-foot{
  margin:14px 0 0;
  color:rgba(17,24,39,.55);
  font-size:13px;
}

/* Topic section */
.topic-section{
  padding:26px 0 26px;
}
.section-title{
  margin:18px 0 6px;
  font-size:28px;
  font-weight:900;
}
.section-sub{
  margin:0 0 14px;
  color:rgba(17,24,39,.55);
  font-size:13px;
}

.legend{
  display:flex;
  gap:22px;
  align-items:center;
  margin:8px 0 16px;
  color:rgba(17,24,39,.6);
  font-size:13px;
}
.legend-item{
  display:flex;
  align-items:center;
  gap:10px;
}
.dot{
  width:42px;
  height:18px;
  border-radius:999px;
  display:inline-block;
}
.dot--green{background:var(--your)}
.dot--yellow{background:var(--all)}

.topic-list{
  display:grid;
  gap:16px;
  padding-bottom:36px;
}

.select-all-wrap{
  margin:14px 0 10px;
}
.select-all{
  display:inline-flex;
  align-items:center;
  gap:10px;
  border:none;
  background:transparent;
  color:#111;
  font-weight:600;
  letter-spacing:0;
  font-size:14px;
  cursor:pointer;
  padding:0;
}
.select-all input{
  width:18px;
  height:18px;
  margin:0;
  accent-color:#111;
  border-radius:6px;
  border:1px solid rgba(0,0,0,.25);
  background:#fff;
}
.topic-chips{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:16px;
}
.topic-empty{
  margin:6px 0 16px;
  padding:10px 12px;
  border-radius:10px;
  border:1px dashed rgba(91,69,212,.35);
  background:#f6f4ff;
  font-size:13px;
  color:rgba(27,20,52,.68);
}
.qb-note{
  margin:10px 0 16px;
  font-size:13px;
  color:rgba(17,24,39,.7);
}
.chip{
  flex:1 1 190px;
  max-width:230px;
  border:none;
  background:#ece6ff;
  border-radius:10px;
  padding:8px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  color:#191919;
  font-weight:800;
  letter-spacing:.03em;
  text-transform:uppercase;
  cursor:pointer;
  min-height:40px;
  box-shadow:0 5px 0 rgba(0,0,0,.08);
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.chip--static{
  cursor:default;
  box-shadow:0 4px 0 rgba(0,0,0,.06);
}
.chip--static:hover{
  transform:none;
  box-shadow:0 4px 0 rgba(0,0,0,.06);
}
.chip--static .chip-status{
  display:none;
}
.chip:focus-visible{
  outline:2px solid #5b45d4;
  outline-offset:3px;
}
.chip:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 0 rgba(0,0,0,.14);
}
.chip.is-selected{
  background:#d9d0ff;
  box-shadow:0 7px 0 rgba(0,0,0,.16);
}
.chip.is-match{
  outline:2px solid rgba(91,69,212,.5);
  outline-offset:2px;
}
.chip-status{
  width:18px;
  height:18px;
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:10px;
  line-height:1;
}
.chip-status--check{
  background:#fff;
  color:#0f172a;
  border:1px solid rgba(0,0,0,.12);
  font-weight:900;
  box-shadow:0 2px 4px rgba(0,0,0,.12);
  transition:opacity .2s ease, transform .2s ease;
  opacity:.35;
}
.chip-status--remove{
  background:linear-gradient(135deg, #5b45d4, #7a63f2);
  color:#fff;
  font-weight:900;
  transition:opacity .2s ease, transform .2s ease;
  opacity:0;
  pointer-events:none;
  box-shadow:0 3px 6px rgba(0,0,0,.12);
}
.chip.is-selected .chip-status--check{
  opacity:1;
  transform:scale(1.05);
}
.chip.is-selected .chip-status--remove{
  opacity:1;
  pointer-events:auto;
}
.chip-label{
  flex:1;
  text-align:center;
  font-size:11px;
  line-height:1.2;
}

.mcq-preview{
  margin-top:34px;
  background:linear-gradient(180deg, rgba(99,215,207,.08), rgba(255,255,255,0));
  border-radius:18px;
  padding:26px;
  border:1px solid rgba(15,23,42,.08);
  box-shadow:0 20px 45px rgba(15,23,42,.12);
}
.mcq-preview__header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  margin-bottom:16px;
}
.mcq-kicker{
  margin:0;
  color:rgba(15,23,42,.6);
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.mcq-title{
  margin:4px 0 0;
  font-size:24px;
  font-weight:900;
}
.mcq-gallery{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:16px;
}
.mcq-card{
  background:#fff;
  border-radius:16px;
  padding:16px;
  border:1px solid rgba(15,23,42,.08);
  box-shadow:0 24px 40px rgba(15,23,42,.15);
  display:flex;
  flex-direction:column;
  gap:12px;
  transition:transform .2s ease, box-shadow .2s ease;
}
.mcq-card.active{
  border-color:var(--teal);
  box-shadow:0 26px 50px rgba(15,23,42,.2);
  transform:translateY(-4px);
}
.mcq-card__top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:12px;
  color:rgba(15,23,42,.55);
  text-transform:uppercase;
  letter-spacing:.2em;
}
.mcq-step{
  background:var(--teal);
  color:#fff;
  padding:4px 12px;
  border-radius:999px;
  font-size:11px;
  font-weight:700;
}
.mcq-difficulty{
  font-weight:700;
  letter-spacing:.1em;
}
.mcq-question{
  margin:0;
  font-size:13px;
  line-height:1.6;
  color:#0f172a;
  font-weight:600;
}
.mcq-options{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.mcq-options button{
  border-radius:10px;
  border:1px solid rgba(15,23,42,.15);
  background:#f6f6f6;
  padding:10px 12px;
  text-align:left;
  font-size:12px;
  font-weight:700;
  color:#111;
  cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.mcq-options button:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 20px rgba(15,23,42,.1);
}
.mcq-options button.is-active{
  background:var(--teal);
  color:#fff;
  border-color:var(--teal);
}
.mcq-preview__footer{
  margin-top:20px;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.mcq-preview__footer p{
  margin:0;
  color:rgba(15,23,42,.6);
  font-size:12px;
}
.btn-outline--ghost{
  border-color:rgba(15,23,42,.15);
  background:#fff;
  color:#111;
}

.mcq-session{
  padding:46px 0 60px;
}
.mcq-session__top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:16px;
  margin-bottom:28px;
}
.mcq-session__title{
  margin:4px 0 0;
  font-size:34px;
  font-weight:900;
}
.mcq-session__meta{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.meta-pill{
  background:#f5f5f5;
  padding:6px 14px;
  border-radius:999px;
  font-size:13px;
  font-weight:700;
}
.meta-pill--accent{
  background:#e4fbef;
  color:#0f633e;
}
.mcq-session__layout{
  display:flex;
  gap:24px;
  flex-wrap:wrap;
}
.mcq-session__card-stack{
  flex:1;
  min-width:280px;
}
.mcq-session__nav{
  display:flex;
  gap:10px;
  margin-bottom:14px;
}
.mcq-session__nav button{
  border:none;
  border-radius:999px;
  padding:6px 18px;
  background:#f5f5f5;
  color:#111;
  font-weight:700;
  cursor:pointer;
  transition:transform .2s ease;
}
.mcq-session__nav button.is-active{
  background:var(--teal);
  color:#fff;
}
.mcq-session__nav button:hover:not(.is-active){
  transform:translateY(-1px);
}
.mcq-session__sidebar{
  width:260px;
  background:#fff;
  border-radius:16px;
  border:1px solid rgba(15,23,42,.08);
  padding:18px;
  box-shadow:0 18px 30px rgba(15,23,42,.1);
}
.mcq-session__sidebar h3{
  margin:0 0 12px;
  font-size:18px;
  font-weight:900;
}
.flagged-list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.flagged-list li{
  padding:10px 12px;
  border-radius:10px;
  background:#f5f5f5;
  font-size:14px;
  font-weight:700;
}
.flagged-list__empty{
  color:#9ba0a8;
  font-weight:600;
}
.sidebar-note{
  margin-top:12px;
  font-size:12px;
  color:rgba(15,23,42,.6);
}
.mcq-session__card{
  background:#fff;
  color:#0f172a;
  border-radius:22px;
  padding:32px;
  border:2px solid var(--teal);
  box-shadow:0 30px 60px rgba(15,23,42,.12);
  display:flex;
  flex-direction:column;
  gap:22px;
}
.mcq-session__header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
}
.mcq-session__topic{
  margin:0;
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:.1em;
  color:#0f172a;
}
.mcq-session__question{
  margin:6px 0 0;
  font-size:28px;
  line-height:1.4;
  font-weight:700;
  color:#111;
}
.flag-btn{
  border:none;
  background:#101828;
  color:#fff;
  border-radius:999px;
  padding:8px 14px;
  font-weight:700;
  font-size:12px;
  display:flex;
  align-items:center;
  gap:6px;
  cursor:pointer;
  transition:transform .2s ease, background .2s ease;
}
.flag-btn:hover{
  transform:translateY(-1px);
}
.flag-btn.is-flagged{
  background:#f38b3b;
}
.mcq-session__options{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:14px;
}
.mcq-session__media{
  margin-top:4px;
  border-radius:16px;
  border:1px solid rgba(15,23,42,.12);
  overflow:hidden;
  background:#f8fafc;
}
.mcq-session__media img{
  display:block;
  width:100%;
  height:auto;
}
.mcq-session__options.is-multiple button{
  position:relative;
}
.mcq-session__options.is-multiple button::after{
  content:"";
  position:absolute;
  top:12px;
  right:12px;
  width:12px;
  height:12px;
  border-radius:3px;
  border:2px solid rgba(15,23,42,.35);
}
.mcq-session__options.is-multiple button.is-active::after{
  background:#fff;
  border-color:#fff;
}
.mcq-session__options.is-ordering,
.mcq-session__options.is-match,
.mcq-session__options.is-short-answer{
  display:block;
}
.order-list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.order-item{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 14px;
  border-radius:12px;
  background:#f5f7fa;
  border:1px solid rgba(15,23,42,.15);
  cursor:grab;
  font-weight:700;
}
.order-item.is-dragging{
  opacity:.6;
}
.order-handle{
  width:28px;
  height:28px;
  border-radius:8px;
  display:grid;
  place-items:center;
  background:#0f172a;
  color:#fff;
  font-size:12px;
}
.match-grid{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.match-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 14px;
  border-radius:12px;
  background:#f5f7fa;
  border:1px solid rgba(15,23,42,.15);
}
.match-label{
  font-weight:700;
  font-size:14px;
}
.match-select{
  min-width:180px;
  height:36px;
  border-radius:8px;
  border:1px solid rgba(15,23,42,.2);
  padding:0 10px;
  font-weight:700;
  background:#fff;
}
.short-answer{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.short-label{
  font-size:13px;
  font-weight:800;
  color:#0f172a;
}
.short-input{
  height:44px;
  border-radius:10px;
  border:1px solid rgba(15,23,42,.2);
  padding:0 14px;
  font-size:14px;
  font-weight:700;
  background:#fff;
}

@media (max-width: 640px){
  .match-row{
    flex-direction:column;
    align-items:flex-start;
  }
  .match-select{
    width:100%;
  }
}
.mcq-session__options button{
  border-radius:12px;
  border:1px solid rgba(15,23,42,.2);
  background:#f5f7fa;
  color:#0f172a;
  padding:12px 14px;
  text-align:left;
  font-size:14px;
  font-weight:700;
  cursor:pointer;
  transition:transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.mcq-session__options button.is-active{
  background:#0f8e7b;
  border-color:#0f8e7b;
  color:#fff;
  box-shadow:0 14px 30px rgba(15,23,42,.4);
}
.mcq-session__options button.is-correct{
  background:#16a34a;
  border-color:#16a34a;
  color:#fff;
  box-shadow:0 14px 30px rgba(22,163,74,.28);
}
.mcq-session__options button.is-wrong{
  background:#dc2626;
  border-color:#dc2626;
  color:#fff;
  box-shadow:0 14px 30px rgba(220,38,38,.24);
}
.mcq-session__options.is-locked button{
  cursor:default;
}
.mcq-session__options button:hover:not(.is-active):not(.is-correct):not(.is-wrong){
  transform:translateY(-3px);
  box-shadow:0 12px 24px rgba(15,23,42,.25);
  background:#fff;
}
.mcq-answer{
  border-radius:16px;
  border:1px solid rgba(15,23,42,.12);
  padding:16px;
  background:#f8fafc;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.mcq-answer__status{
  font-size:13px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.mcq-answer__status.is-correct{
  color:#15803d;
}
.mcq-answer__status.is-wrong{
  color:#b91c1c;
}
.mcq-answer__status.is-pending{
  color:#0f172a;
}
.mcq-answer__label{
  font-size:12px;
  font-weight:800;
  color:#0f172a;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.mcq-answer__list{
  margin:6px 0 0 18px;
  padding:0;
  color:#0f172a;
  font-size:14px;
  line-height:1.5;
}
.mcq-answer__empty{
  font-size:13px;
  color:rgba(15,23,42,.6);
}
.mcq-answer__explanation{
  font-size:15px;
  color:#0f172a;
  line-height:1.6;
}
.mcq-answer__media{
  border-radius:14px;
  border:1px solid rgba(15,23,42,.12);
  background:#fff;
  padding:8px;
}
.mcq-answer__media img{
  width:100%;
  border-radius:10px;
  display:block;
}
.mcq-progress{
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:10px;
  font-size:12px;
  color:#0d2c1f;
}
.progress-track{
  flex:1;
  height:4px;
  border-radius:999px;
  background:#e2e8f0;
  overflow:hidden;
}
.progress-fill{
  display:block;
  height:100%;
  width:0%;
  background:linear-gradient(90deg, #b5a6ff, #7a63f2);
  border-radius:inherit;
  transition:width .3s ease;
}
.mcq-session__footer{
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:12px;
  margin-top:18px;
}
.mcq-session__actions{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:12px;
}
.mcq-complete{
  margin-top:22px;
  padding:22px;
  border-radius:18px;
  border:1px solid rgba(15,23,42,.1);
  background:#fff;
  box-shadow:0 18px 35px rgba(15,23,42,.08);
  display:flex;
  flex-direction:column;
  gap:12px;
}
.mcq-complete__title{
  margin:0;
  font-size:22px;
  font-weight:900;
}
.mcq-complete__text{
  margin:0;
  font-size:14px;
  color:rgba(15,23,42,.7);
}
.mcq-complete__actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}
.mcq-session__info{
  display:flex;
  flex-direction:column;
  gap:4px;
  font-size:12px;
  color:#475569;
}
.keyboard-section{
  margin-top:32px;
  padding:20px;
  border-radius:16px;
  border:1px solid rgba(15,23,42,.1);
  background:#fff;
  box-shadow:0 18px 35px rgba(15,23,42,.08);
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:18px;
}
.keyboard-section h3{
  margin:0 0 6px;
  font-size:18px;
  font-weight:900;
}
.keyboard-section p{
  margin:0;
  color:rgba(15,23,42,.6);
}
.keyboard-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(120px, 1fr));
  gap:10px;
  width:100%;
}
.keyboard-grid span{
  background:#f5f5f5;
  padding:10px 12px;
  border-radius:10px;
  font-size:14px;
  font-weight:700;
}
.keyboard-grid strong{
  display:inline-flex;
  width:34px;
  height:34px;
  align-items:center;
  justify-content:center;
  margin-right:6px;
  border-radius:8px;
  background:#0f8e7b;
  color:#fff;
}

/* admin question builder */
.admin-options{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.admin-option{
  display:grid;
  grid-template-columns:24px 1fr auto auto auto auto;
  gap:10px;
  align-items:center;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid rgba(15,23,42,.12);
  background:#f8fafc;
}
.admin-option input[type="text"],
.admin-option input[type="number"]{
  height:38px;
  border-radius:8px;
  border:1px solid rgba(15,23,42,.12);
  padding:0 10px;
  min-width:140px;
}
.admin-option label{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:12px;
  font-weight:700;
}
.drag-handle{
  cursor:grab;
  font-size:16px;
  opacity:.6;
}
.admin-option.dragging{
  opacity:.6;
  border-style:dashed;
}

/* admin shell */
.admin-body{
  background:
    radial-gradient(520px 260px at 6% 0%, rgba(124,227,191,.25), transparent 60%),
    radial-gradient(520px 260px at 100% 0%, rgba(99,215,207,.18), transparent 60%),
    #f6f7fb;
}
.admin-shell{
  min-height:100vh;
  display:grid;
  grid-template-columns:260px 1fr;
  height:100vh;        /* ✅ ADD */
  overflow:hidden;     /* ✅ ADD */
}
.admin-sidebar{
  position:relative;
  background:linear-gradient(180deg, #0f172a 0%, #0c1b34 100%);
  color:#fff;
  padding:24px 18px;
  display:flex;
  flex-direction:column;
  gap:24px;
  overflow-y:auto;    /* ✅ CHANGE from overflow:hidden */
  overflow-x:hidden;  /* ✅ ADD */
  border-right:1px solid rgba(255,255,255,.06);
}
.admin-sidebar::before{
  content:"";
  position:absolute;
  top:-120px;
  right:-140px;
  width:320px;
  height:320px;
  border-radius:999px;
  background:rgba(124,227,191,.14);
  filter:blur(1px);
  pointer-events:none;
}
.admin-brand{
  display:flex;
  align-items:center;
  gap:12px;
}
.admin-brand .brand-mark{
  width:36px;
  height:36px;
}
.admin-brand__title{
  font-weight:900;
  letter-spacing:.04em;
}
.admin-brand__title span{
  color:#7ce3bf;
}
.admin-brand__tag{
  font-size:12px;
  color:rgba(255,255,255,.6);
}
.admin-nav{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.admin-nav a{
  color:rgba(255,255,255,.8);
  text-decoration:none;
  padding:10px 12px;
  border-radius:10px;
  font-weight:600;
  border:1px solid transparent;
  transition:background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.admin-nav__left{
  display:flex;
  align-items:center;
  gap:10px;
}
.admin-nav__icon{
  width:18px;
  height:18px;
  display:grid;
  place-items:center;
  color:rgba(255,255,255,.9);
}
.admin-nav__icon svg{
  width:18px;
  height:18px;
  display:block;
}
.admin-nav__chev{
  opacity:0;
  font-size:16px;
  transform:translateX(-4px);
  transition:opacity .15s ease, transform .15s ease;
}
.admin-nav a.is-active,
.admin-nav a:hover{
  background:rgba(124,227,191,.16);
  border-color:rgba(124,227,191,.25);
  color:#fff;
  transform:translateX(2px);
}
.admin-nav a.is-active .admin-nav__chev,
.admin-nav a:hover .admin-nav__chev{
  opacity:.9;
  transform:translateX(0);
}
.admin-sidebar__foot{
  margin-top:auto;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.admin-pill{
  background:rgba(255,255,255,.1);
  padding:8px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:#0f172a;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
}
.admin-pill--ghost{
  background:rgba(124,227,191,.2);
  color:#0f172a;
}
.admin-main{
  padding:28px 36px 64px;
  overflow-y:auto;   /* ✅ ADD */
  height:100vh;      /* ✅ ADD */
}
.admin-topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:20px;
  background:#fff;
  border-radius:16px;
  border:1px solid rgba(15,23,42,.08);
  box-shadow:0 18px 35px rgba(15,23,42,.08);
  padding:16px 18px;
}
.admin-title{
  margin:0;
  font-size:28px;
  font-weight:900;
}
.admin-sub{
  margin:6px 0 0;
  color:rgba(15,23,42,.6);
}
.admin-panel{
  display:flex;
  flex-direction:column;
  gap:20px;
}
.admin-hero{
  display:grid;
  grid-template-columns:1.3fr .9fr;
  gap:18px;
  background:linear-gradient(120deg, rgba(255,255,255,.9), rgba(124,227,191,.18));
  border:1px solid rgba(15,23,42,.1);
  border-radius:20px;
  padding:20px;
  box-shadow:0 22px 44px rgba(15,23,42,.1);
  position:relative;
  overflow:hidden;
}
.admin-hero::before{
  content:"";
  position:absolute;
  top:-120px;
  right:-120px;
  width:240px;
  height:240px;
  border-radius:999px;
  background:rgba(124,227,191,.18);
}
.admin-hero__main{
  position:relative;
  z-index:1;
}
.admin-hero__tag{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  font-weight:700;
  color:#0f8e7b;
}
.admin-hero__title{
  margin:6px 0 8px;
  font-size:26px;
  font-weight:900;
}
.admin-hero__text{
  margin:0;
  color:rgba(15,23,42,.7);
  font-size:14px;
}
.admin-hero__stats{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(140px, 1fr));
  gap:10px;
  margin-top:16px;
}
.admin-hero__stat{
  background:rgba(255,255,255,.9);
  border:1px solid rgba(15,23,42,.08);
  border-radius:12px;
  padding:10px 12px;
  box-shadow:0 12px 24px rgba(15,23,42,.08);
}
.admin-hero__stat span{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:rgba(15,23,42,.55);
}
.admin-hero__stat strong{
  display:block;
  font-size:18px;
  margin-top:6px;
}
.admin-hero__panel{
  position:relative;
  z-index:1;
  background:linear-gradient(140deg, #0f172a, #1b2a4a);
  color:#fff;
  border-radius:18px;
  padding:18px;
  display:flex;
  flex-direction:column;
  gap:12px;
  box-shadow:0 20px 36px rgba(15,23,42,.2);
}
.admin-hero__panel-title{
  margin:0;
  font-size:18px;
  font-weight:800;
}
.admin-hero__panel-text{
  margin:4px 0 0;
  font-size:13px;
  color:rgba(255,255,255,.7);
}
.admin-hero__actions{
  display:grid;
  gap:8px;
}
.admin-hero__btn{
  background:#7ce3bf;
  color:#0f172a;
  text-decoration:none;
  border-radius:12px;
  padding:10px 12px;
  font-weight:800;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.admin-hero__btn--ghost{
  background:rgba(255,255,255,.08);
  color:#fff;
  border:1px solid rgba(255,255,255,.12);
}
.admin-hero__panel-foot{
  margin-top:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:12px;
  color:rgba(255,255,255,.6);
}
.admin-hero__panel-foot strong{
  color:#fff;
  font-size:16px;
}
.admin-pagination{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
}
.admin-pagination__summary{
  font-size:13px;
  color:rgba(15,23,42,.6);
}
.admin-pagination__summary strong{
  color:#0f172a;
  font-weight:800;
}
.admin-pagination__list{
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:#fff;
  border:1px solid rgba(15,23,42,.12);
  border-radius:999px;
  padding:6px;
  box-shadow:0 10px 20px rgba(15,23,42,.08);
}
.admin-pagination__item{
  min-width:32px;
  height:32px;
  padding:0 10px;
  border-radius:999px;
  border:1px solid transparent;
  font-size:13px;
  font-weight:700;
  color:#0f172a;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
}
.admin-pagination__item svg{
  width:14px;
  height:14px;
  display:block;
}
.admin-pagination__item:hover{
  background:rgba(124,227,191,.18);
  border-color:rgba(124,227,191,.35);
}
.admin-pagination__item.is-active{
  background:#0f8e7b;
  border-color:#0f8e7b;
  color:#fff;
}
.admin-pagination__item.is-disabled{
  opacity:.45;
  cursor:default;
}
@media (max-width: 640px){
  .admin-pagination{
    justify-content:center;
  }
  .admin-pagination__summary{
    width:100%;
    text-align:center;
  }
}
.admin-kpis{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
  gap:14px;
}
.admin-kpi{
  position:relative;
  background:#fff;
  padding:18px;
  border-radius:16px;
  border:1px solid rgba(15,23,42,.08);
  box-shadow:0 18px 35px rgba(15,23,42,.08);
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.admin-kpi::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:4px;
  border-radius:16px 16px 0 0;
  background:linear-gradient(90deg, #0f8e7b, #7ce3bf);
}
.admin-kpi:hover{
  transform:translateY(-2px);
  border-color:rgba(15,23,42,.14);
  box-shadow:0 22px 42px rgba(15,23,42,.12);
}
.admin-kpi p{
  margin:0;
  color:rgba(15,23,42,.6);
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.admin-kpi__icon{
  width:28px;
  height:28px;
  border-radius:10px;
  background:rgba(124,227,191,.18);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  color:#0f8e7b;
}
.admin-kpi h3{
  margin:8px 0 4px;
  font-size:24px;
}
.kpi-foot{
  color:#0f8e7b;
  font-size:12px;
  font-weight:700;
}
.admin-charts{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  gap:16px;
}
.admin-charts--lift .admin-card{
  background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.85));
}
.admin-card--graph{
  border:1px solid rgba(15,23,42,.12);
}
.admin-card--sun{
  background:linear-gradient(140deg, rgba(255,255,255,.98), rgba(255,237,213,.8));
}
.admin-card{
  background:#fff;
  padding:18px;
  border-radius:16px;
  border:1px solid rgba(15,23,42,.08);
  box-shadow:0 18px 35px rgba(15,23,42,.08);
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.admin-card:hover{
  transform:translateY(-2px);
  border-color:rgba(15,23,42,.12);
  box-shadow:0 22px 42px rgba(15,23,42,.12);
}
.admin-card__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:12px;
}
.admin-card__head h3{
  margin:0;
  font-size:18px;
  font-weight:800;
}
.admin-card__head a{
  color:#0f8e7b;
  text-decoration:none;
  font-weight:700;
  font-size:12px;
}
.admin-badge{
  background:#0f172a;
  color:#fff;
  padding:4px 8px;
  border-radius:999px;
  font-size:11px;
  font-weight:700;
}
.admin-badge--mint{
  background:#7ce3bf;
  color:#0f172a;
}
.spark-bars{
  display:flex;
  align-items:flex-end;
  gap:6px;
  height:120px;
}
.spark-bars span{
  flex:1;
  background:linear-gradient(180deg, #0f8e7b, #7ce3bf);
  height:calc(var(--h) * 1%);
  border-radius:8px;
  position:relative;
}
.spark-bars span i{
  position:absolute;
  bottom:-20px;
  left:50%;
  transform:translateX(-50%);
  font-size:10px;
  color:rgba(15,23,42,.6);
}
.line-track{
  position:relative;
  height:140px;
  border-bottom:1px dashed rgba(15,23,42,.2);
}
.line-track span{
  position:absolute;
  bottom:calc(var(--y) * 1%);
  left:calc(var(--x) * 16%);
  width:10px;
  height:10px;
  border-radius:999px;
  background:#f59e0b;
  box-shadow:0 0 0 6px rgba(245,158,11,.2);
}
.line-legend{
  display:flex;
  justify-content:space-between;
  font-size:11px;
  color:rgba(15,23,42,.6);
  margin-top:10px;
}
.admin-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  gap:16px;
}
.admin-grid--focus .admin-card{
  border:1px solid rgba(15,23,42,.12);
}
.admin-card--table{
  background:#fff;
}
.admin-table{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.admin-row{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(120px, 1fr));
  gap:10px;
  align-items:center;
  padding:10px 12px;
  border-radius:12px;
  background:#f8fafc;
  font-size:13px;
}
.admin-row--head{
  background:transparent;
  font-weight:700;
  color:rgba(15,23,42,.7);
}
.status-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:4px 10px;
  border-radius:999px;
  background:#dcfce7;
  color:#166534;
  font-weight:700;
  font-size:12px;
  width:max-content;
}
.status-pill--muted{
  background:#f2f4f7;
  color:#64748b;
}
.admin-list{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.admin-list div{
  display:flex;
  justify-content:space-between;
  padding:10px 12px;
  background:#f8fafc;
  border-radius:12px;
  font-size:13px;
}
.admin-card--highlight{
  background:linear-gradient(135deg, #0f8e7b, #7ce3bf);
  color:#0f172a;
}
.admin-card--highlight p{
  color:#0f172a;
}
.admin-card--highlight button{
  margin-top:10px;
}
.admin-auth .top-nav,
.admin-auth .profile-menu{
  display:none;
}
.admin-auth .site-header{
  border-bottom:none;
}

@media (max-width: 1024px){
  .admin-shell{
    grid-template-columns:1fr;
  }
  .admin-sidebar{
    flex-direction:row;
    align-items:center;
    flex-wrap:wrap;
  }
  .admin-main{
    padding:24px;
  }
  .admin-row{
    grid-template-columns:1fr;
  }
  .admin-hero{
    grid-template-columns:1fr;
  }
}
.topic-card{
  background:#eaf8f2;
  border:1px solid var(--border);
  border-radius:10px;
  padding:18px 22px;
}

.topic-meta{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
}
.topic-name{
  font-weight:800;
  color:#111;
}
.topic-done{
  color:rgba(17,24,39,.55);
  font-size:13px;
  text-align:right;
}

.bar-row{
  display:grid;
  gap:10px;
}
.barline{
  height:16px;
  border-radius:999px;
  overflow:hidden;
  background:rgba(0,0,0,.06);
  position:relative;
}
.barfill{
  display:block;
  height:100%;
  border-radius:inherit;
}
.barline--green .barfill{background:var(--your)}
.barline--yellow .barfill{background:var(--all)}

.barvals{
  display:flex;
  justify-content:space-between;
  color:rgba(17,24,39,.6);
  font-size:13px;
}

/* advanced sections */
.section-head{
  display:flex;
  flex-direction:column;
  gap:4px;
  margin-bottom:12px;
}

.insights-section{
  padding:12px 0 32px;
}
.insights-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:16px;
}
.insight-card{
  border-radius:12px;
  padding:18px 20px;
  border:1px solid rgba(15,23,42,.08);
  box-shadow:var(--shadow);
  background:#f6fbf9;
  min-height:210px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.insight-card--lime{background:linear-gradient(160deg, #e4fbef, #f6fbf9)}
.insight-card--sky{background:linear-gradient(160deg, #e8f5ff, #f6fbf9)}
.insight-card--peach{background:linear-gradient(160deg, #fff0e6, #f6fbf9)}
.insight-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.insight-tag{
  font-size:12px;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:#111;
}
.insight-chip{
  background:#fff;
  border:1px solid rgba(17,24,39,.12);
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
}
.insight-title{
  margin:0;
  font-size:18px;
  font-weight:900;
}
.insight-text{
  margin:0;
  color:rgba(17,24,39,.65);
  font-size:13px;
  line-height:1.5;
}
.sparkline{
  display:flex;
  align-items:flex-end;
  gap:6px;
  margin-top:auto;
  height:42px;
}
.spark{
  width:12px;
  border-radius:4px;
  height:calc(var(--h) * 1px);
  background:#2e2b2b;
  opacity:.75;
}
.speed-track{
  position:relative;
  height:42px;
  border-radius:999px;
  background:linear-gradient(90deg, #7ee3b9, #f4c54a, #f1a36b);
  margin-top:auto;
}
.speed-dot{
  position:absolute;
  top:50%;
  left:calc(var(--x) * 1%);
  width:10px;
  height:10px;
  border-radius:999px;
  background:#111;
  transform:translate(-50%, -50%);
}
.speed-labels{
  display:flex;
  justify-content:space-between;
  font-size:12px;
  color:rgba(17,24,39,.6);
  margin-top:6px;
}
.ladder{
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  gap:8px;
  margin-top:auto;
}
.ladder-step{
  height:28px;
  border-radius:8px;
  background:linear-gradient(180deg, #f9d6b9, #f2a771);
}
.ladder-step.is-dim{
  opacity:.4;
}
.ladder-step:nth-child(2){transform:translateY(-4px)}
.ladder-step:nth-child(3){transform:translateY(-8px)}
.ladder-step:nth-child(4){transform:translateY(-6px)}
.ladder-step:nth-child(5){transform:translateY(-10px)}

.progress-lab{
  padding:16px 0 30px;
}
.lab-grid{
  display:grid;
  grid-template-columns:1.4fr .9fr;
  gap:18px;
}
.lab-card{
  border-radius:12px;
  padding:20px 22px;
  background:#f6fbf9;
  border:1px solid rgba(15,23,42,.08);
  box-shadow:var(--shadow);
}
.lab-card--matrix{
  background:linear-gradient(160deg, #eefaf6, #f6fbf9);
}
.lab-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
}
.lab-head h3{
  margin:0;
  font-size:18px;
  font-weight:900;
}
.lab-chip{
  background:#111;
  color:#fff;
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
}
.lab-text{
  margin:8px 0 14px;
  color:rgba(17,24,39,.6);
  font-size:13px;
}
.lab-chart{
  border-radius:12px;
  background:#eefaf6;
  padding:12px;
}
.lab-area{
  fill:url(#labFill);
}
.lab-line{
  fill:none;
  stroke:#2d2d2d;
  stroke-width:3;
}
.lab-dot{
  fill:#2d2d2d;
}
.lab-axis{
  display:flex;
  justify-content:space-between;
  font-size:12px;
  color:rgba(17,24,39,.6);
  margin-top:8px;
}
.matrix-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:8px;
  margin-top:10px;
}
.cell{
  height:38px;
  border-radius:8px;
  background:#e7f3ee;
}
.c1{background:#d9f2e6}
.c2{background:#c6ecd9}
.c3{background:#a8e3c7}
.c4{background:#7fd9ad}
.c5{background:#5ed29a}
.matrix-legend{
  display:flex;
  justify-content:space-between;
  font-size:12px;
  color:rgba(17,24,39,.6);
  margin-top:10px;
}

.journey-section{
  padding:16px 0 40px;
}
.journey-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:16px;
}
.journey-card{
  border-radius:12px;
  padding:20px;
  border:1px solid rgba(15,23,42,.08);
  background:#f6fbf9;
  box-shadow:var(--shadow);
}
.journey-step{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:42px;
  height:42px;
  border-radius:12px;
  background:#111;
  color:#fff;
  font-weight:800;
  margin-bottom:12px;
}
.journey-card h3{
  margin:0 0 8px;
  font-size:18px;
  font-weight:900;
}
.journey-card p{
  margin:0;
  color:rgba(17,24,39,.65);
  font-size:13px;
  line-height:1.5;
}

/* footer */
.footer{
  margin-top:40px;
  background:#0b0b0c;
  color:rgba(255,255,255,.6);
  margin-top:auto;
}
.footer-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:22px 0;
}
.footer-right{
  display:flex;
  gap:18px;
}
.footer a{
  color:rgba(255,255,255,.75);
  text-decoration:underline;
}
.footer-mid{
  display:flex;
  gap:10px;
  align-items:center;
}
.social-circle{
  width:38px;height:38px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.2);
  display:grid;
  place-items:center;
  color:rgba(255,255,255,.8);
}

/* responsive */
@media (max-width: 1024px){
  .cards-3{grid-template-columns:1fr}
  .welcome-row{flex-direction:column; align-items:flex-start}
  .stat-row{justify-content:flex-start}
  .panel{min-height:auto}
  .donut-wrap{height:auto; padding:12px 0}
  .histogram__axis{gap:10px; overflow:auto}
  .topic-meta{flex-direction:column; align-items:flex-start}
  .topic-done{text-align:left}
  .top-nav{display:none}
  .header-search{display:none}
  .insights-grid{grid-template-columns:1fr}
  .lab-grid{grid-template-columns:1fr}
  .journey-grid{grid-template-columns:1fr}
}

@media (max-width: 520px){
  .container{width:calc(100% - 28px)}
  .header-inner{padding:0 14px;}
  .donut{width:220px;height:220px}
  .donut::after{inset:18px}
  .donut__value{font-size:50px}
}




/* =========================
   QUESTION BANK PAGE
   ========================= */

/* Hero bar like screenshot */
.page-hero{
  width:100%;
  border-top:6px solid rgba(91,69,212,.75);
}
.page-hero--teal{
  background: var(--teal);
}
.page-hero__inner{
  width:min(1180px, calc(100% - 48px));
  margin:0 auto;
  padding:44px 0;
}
.page-hero__title{
  margin:0;
  font-size:36px;
  font-weight:900;
  letter-spacing:-.02em;
  color:#f8f7ff;
}
.page-hero__sub{
  margin:10px 0 0;
  font-size:15px;
  color:rgba(248,247,255,.75);
  max-width:640px;
  line-height:1.6;
}
.page-hero__meta{
  margin-top:14px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.page-hero .meta-pill{
  background: rgba(255,255,255,.2);
  color:#f8f7ff;
}
.page-hero .meta-pill--accent{
  background: rgba(255,255,255,.35);
  color:#24164a;
}

/* Layout */
.qb-page{
  padding-top:0;
}
.qb-layout{
  display:grid;
  grid-template-columns: 1.25fr .75fr;
  gap: 34px;
  padding: 34px 0 48px;
  align-items:start;
}

/* Left Card */
.qb-card{
  background:#fff;
  border:1px solid var(--border);
  border-radius:10px;
  padding:26px 28px;
  box-shadow: var(--shadow);
}
.qb-head{ margin-bottom:14px; }
.qb-title{
  margin:0;
  font-size:18px;
  font-weight:900;
  color:#111;
}
.qb-sub{
  margin:4px 0 0;
  font-size:13px;
  color: rgba(17,24,39,.55);
}

.qb-check{
  display:flex;
  gap:10px;
  align-items:center;
  margin:16px 0 18px;
  font-size:13px;
  color:#111;
}
.qb-check input{
  width:16px;height:16px;
  accent-color:#111;
}

/* Options */
.qb-options{
  display:grid;
  gap:10px;
  margin-top:10px;
}
.qb-radio{
  display:flex;
  gap:10px;
  align-items:flex-start;
  font-size:13px;
  color: rgba(17,24,39,.65);
}
.qb-radio input{
  margin-top:2px;
  accent-color:#111;
}

/* Actions (Start left, Reset right like screenshot) */
.qb-actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-top:18px;
}
.qb-search-results{
  margin-top:20px;
  padding-top:16px;
  border-top:1px dashed rgba(15,23,42,.15);
}
.qb-search-results h3{
  margin:0 0 10px;
  font-size:14px;
  font-weight:800;
  color:#111;
}
.qb-search-empty{
  margin:0;
  font-size:12px;
  color:rgba(15,23,42,.6);
}
.qb-result-list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:12px;
}
.qb-result{
  border:1px solid rgba(15,23,42,.12);
  border-radius:10px;
  padding:12px;
  background:#f8fafc;
}
.qb-result__topic{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:#475569;
  font-weight:700;
}
.qb-result__question{
  margin-top:6px;
  font-size:14px;
  font-weight:700;
  color:#111;
}
.qb-result__excerpt{
  margin-top:6px;
  font-size:12px;
  color:rgba(15,23,42,.7);
  line-height:1.5;
}
.qb-search-note{
  margin:10px 0 0;
  font-size:12px;
  color:rgba(15,23,42,.6);
}
.btn-primary-dark{
  border:0;
  background:#0b0b0c;
  color:#fff;
  font-weight:800;
  padding:12px 18px;
  border-radius:6px;
  cursor:pointer;
  box-shadow: 0 10px 18px rgba(0,0,0,.15);
  display:inline-flex;
  align-items:center;
  gap:8px;
  text-decoration:none;
}
.btn-outline{
  background:#fff;
  border:1px solid rgba(17,24,39,.35);
  color:#111;
  font-weight:700;
  padding:10px 16px;
  border-radius:6px;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:8px;
  text-decoration:none;
}
.btn-ico{
  width:16px;
  height:16px;
  display:grid;
  place-items:center;
}
.btn-ico svg{
  width:16px;
  height:16px;
  display:block;
}

/* Right side align */
.qb-aside{
  display:flex;
  justify-content:flex-start;
}
.qb-mastery{
  border-radius:8px;
  padding:22px;
  width: min(360px, 100%);
}

/* Responsive */
@media (max-width: 1024px){
  .qb-layout{
    grid-template-columns:1fr;
    gap:18px;
  }
  .qb-aside{ justify-content:flex-start; }
  .page-hero__inner{
    width: calc(100% - 28px);
    padding:34px 0;
  }
  .qb-actions{
    flex-direction:column;
    align-items:flex-start;
  }
}





/* =========================
   REVISION NOTES PAGE
   ========================= */

.page-hero--green{
  background: var(--green);
}

/* wrap */
.rn-wrap{
  padding: 34px 0 58px;
}

/* search */
.rn-search{
  width: min(980px, 100%);
  margin: 0 auto 16px;
}
.rn-search input{
  width:100%;
  height:40px;
  border-radius:4px;
  border:1px solid rgba(79,211,162,.55);
  outline:none;
  padding: 0 14px;
  font-size:13px;
  color:#111;
  background:#fff;
}
.rn-search input::placeholder{
  color: rgba(17,24,39,.45);
}

/* grid like screenshot */
.rn-grid{
  width: min(980px, 100%);
  margin: 0 auto;
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 14px;
  padding-top: 6px;
}

/* tiles */
.rn-tile{
  height: 78px;
  border-radius: 6px;
  background:#fff;
  border:1px solid rgba(79,211,162,.75);
  display:flex;
  align-items:center;
  gap:14px;
  padding: 0 18px;
  text-decoration:none;
  color:#111;
  transition: transform .15s ease, box-shadow .15s ease;
}
.rn-tile:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 24px rgba(15,23,42,.08);
}

/* icon area (outline vibe) */
.rn-ico{
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border-radius:8px;
  color: rgba(79,211,162,.95);
  font-size:22px;
  line-height:1;
}

/* title */
.rn-name{
  font-size:15px;
  font-weight:700;
}

/* topic cards */
.rn-topic-grid{
  width: min(980px, 100%);
  margin: 0 auto;
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 18px;
  padding-top: 8px;
}
.rn-topic-card{
  border-radius: 14px;
  border: 1px solid rgba(79,211,162,.45);
  background:#fff;
  padding: 18px;
  text-decoration:none;
  color:#111;
  box-shadow: 0 18px 34px rgba(15,23,42,.08);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.rn-topic-card:hover{
  transform: translateY(-2px);
  border-color: rgba(79,211,162,.75);
  box-shadow: 0 22px 40px rgba(15,23,42,.12);
}
.rn-topic-card__top{
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.rn-topic-card__badge{
  font-size:11px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.08em;
  padding:6px 10px;
  border-radius:999px;
  background: rgba(79,211,162,.18);
  border:1px solid rgba(79,211,162,.45);
  color:#0f172a;
}
.rn-topic-card__title{
  margin:0;
  font-size:16px;
  font-weight:800;
}
.rn-topic-card__text{
  margin:0;
  font-size:13px;
  color: rgba(17,24,39,.68);
  line-height:1.7;
}
.rn-topic-card__cta{
  font-size:12px;
  font-weight:800;
  color:#0f8e7b;
}

/* subtopic list */
.rn-breadcrumb{
  display:flex;
  gap:8px;
  align-items:center;
  font-size:12px;
  color:rgba(17,24,39,.6);
  margin-bottom:10px;
}
.rn-breadcrumb a{
  color:#0f8e7b;
  text-decoration:none;
  font-weight:700;
}
.rn-subgrid{
  width: min(980px, 100%);
  margin: 0 auto;
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 18px;
}
.rn-subcard{
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,.10);
  background:#fff;
  padding: 18px;
  text-decoration:none;
  color:#111;
  box-shadow: 0 18px 34px rgba(15,23,42,.08);
  display:flex;
  flex-direction:column;
  gap:10px;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.rn-subcard:hover{
  transform: translateY(-2px);
  border-color: rgba(15,23,42,.18);
  box-shadow: 0 22px 40px rgba(15,23,42,.12);
}
.rn-subcard__title{
  margin:0;
  font-size:15px;
  font-weight:800;
}
.rn-subcard__text{
  margin:0;
  font-size:13px;
  color: rgba(17,24,39,.68);
  line-height:1.7;
}
.rn-subcard__cta{
  font-size:12px;
  font-weight:800;
  color:#0f8e7b;
}

/* detail */
.rn-detail{
  width: min(980px, 100%);
  margin: 0 auto;
  display:grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 20px;
  padding: 26px 0 60px;
}
.rn-article{
  background:#fff;
  border-radius: 16px;
  border: 1px solid rgba(15,23,42,.10);
  box-shadow: 0 18px 34px rgba(15,23,42,.08);
  padding: 22px;
}
.rn-article__lead{
  margin:0 0 14px;
  font-size:14px;
  font-weight:700;
  color:#111;
}
.rn-article__body{
  font-size:15px;
  color: rgba(17,24,39,.72);
  line-height:1.9;
}
.rn-related{
  align-self:start;
  border-radius: 16px;
  border: 1px solid rgba(15,23,42,.10);
  background:#fff;
  box-shadow: 0 18px 34px rgba(15,23,42,.08);
  padding: 18px;
}
.rn-related h3{
  margin:0 0 10px;
  font-size:14px;
  font-weight:800;
}
.rn-related ul{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap:8px;
}
.rn-related a{
  text-decoration:none;
  color:#0f8e7b;
  font-weight:700;
  font-size:12px;
}
.rn-empty{
  border-radius: 14px;
  border: 1px dashed rgba(15,23,42,.2);
  background:#fff;
  padding: 22px;
  grid-column: 1 / -1;
  width: min(980px, 100%);
  margin: 12px auto 0;
  text-align:center;
}
.rn-empty h3{
  margin:0 0 6px;
  font-size:16px;
}
.rn-empty p{
  margin:0;
  color: rgba(17,24,39,.65);
}

/* responsive */
@media (max-width: 980px){
  .rn-grid{ grid-template-columns: 1fr 1fr; }
  .rn-topic-grid{ grid-template-columns: 1fr; }
  .rn-subgrid{ grid-template-columns: 1fr; }
  .rn-detail{
    grid-template-columns: 1fr;
  }
}
@media (max-width: 620px){
  .rn-grid{ grid-template-columns: 1fr; }
  .rn-search{ width: 100%; }
}







/* =========================
   FLASHCARDS PAGE
   ========================= */

.page-hero--purple{
  background:#b586db;  /* screenshot-ish purple */
}

/* layout */
.fc-layout{
  display:grid;
  grid-template-columns: 1.25fr .75fr;
  gap: 34px;
  padding: 34px 0 58px;
  align-items:start;
}

.fc-copy{
  padding-right: 10px;
}

.fc-h2{
  margin:0 0 12px;
  font-size:18px;
  font-weight:900;
  color:#111;
}

.fc-bullets{
  margin:0 0 18px;
  padding-left: 18px;
  color: rgba(17,24,39,.72);
  font-size:13px;
  line-height:1.65;
}
.fc-bullets li{ margin: 8px 0; }
.fc-links a{
  color:#d11d7a;
  text-decoration:underline;
  font-weight:700;
}

.fc-section{
  margin-top: 14px;
  padding-top: 10px;
}
.fc-section h3{
  margin:0 0 8px;
  font-size:14px;
  font-weight:900;
  color:#111;
}
.fc-muted{
  margin:0;
  color: rgba(17,24,39,.65);
  font-size:13px;
  line-height:1.65;
}

.fc-checks{
  margin:0;
  padding-left: 0;
  list-style:none;
  display:grid;
  gap:10px;
}
.fc-checks li{
  position:relative;
  padding-left: 22px;
  color: rgba(17,24,39,.72);
  font-size:13px;
  line-height:1.6;
}
.fc-checks li::before{
  content:"✓";
  position:absolute;
  left:0;
  top:0;
  color:#16a34a;
  font-weight:900;
}

.fc-stars{
  color:#f7c948;
  font-weight:900;
  letter-spacing:.15em;
  margin:8px 0 6px;
}

.fc-quote{
  margin:0;
  font-size:13px;
  color: rgba(17,24,39,.68);
  font-style:italic;
  line-height:1.65;
}

.fc-callout{
  margin-top: 18px;
  font-size:13px;
  font-weight:900;
  color:#111;
}

/* =========================
   SUBSCRIPTION CARD (ADVANCED UI)
   ========================= */

.fc-aside{
  display:flex;
  justify-content:flex-start;
}

.sub-card{
  width: min(420px, 100%);
  background:#eef9f4;
  border:1px solid rgba(79,211,162,.65);
  border-radius:12px;
  padding:18px;
  box-shadow: 0 18px 38px rgba(15,23,42,.10);
}

.sub-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  padding: 6px 6px 14px;
}

.sub-kicker{
  font-size:12px;
  color: rgba(17,24,39,.55);
}

.sub-title{
  font-size:16px;
  font-weight:900;
  color:#111;
  margin-top:2px;
}

.sub-badge{
  background: rgba(79,211,162,.18);
  border:1px solid rgba(79,211,162,.35);
  color:#0f3d2f;
  font-weight:900;
  font-size:11px;
  padding:6px 10px;
  border-radius:999px;
}

/* options list */
.sub-options{
  display:grid;
  gap:10px;
  margin: 6px 0 12px;
}

.sub-option{
  display:flex;
  gap:10px;
  align-items:flex-start;
  background: rgba(255,255,255,.7);
  border: 1px solid rgba(15,23,42,.10);
  border-radius:10px;
  padding:12px 12px;
  cursor:pointer;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.sub-option:hover{
  transform: translateY(-1px);
  box-shadow: 0 12px 22px rgba(15,23,42,.10);
  border-color: rgba(79,211,162,.55);
}

.sub-option input{
  margin-top: 3px;
  accent-color:#111;
}

.sub-row{
  display:grid;
  gap:4px;
  width:100%;
}
main{
  flex:1;
}
.sub-main{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.sub-name{
  font-weight:900;
  color:#111;
  font-size:13px;
}

.sub-price{
  font-size:13px;
  color:#111;
}
.sub-price s{
  color: rgba(17,24,39,.45);
  margin-right:6px;
}
.sub-price strong{
  font-weight:900;
}

.sub-meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  font-size:12px;
  color: rgba(17,24,39,.55);
}

/* selected state */
.sub-option.is-selected{
  border-color: rgba(79,211,162,.85);
  box-shadow: 0 14px 30px rgba(15,23,42,.10);
}

/* badges */
.tag{
  font-size:10px;
  font-weight:900;
  padding:4px 8px;
  border-radius:999px;
  letter-spacing:.05em;
  white-space:nowrap;
}
.tag--hot{
  background:#ffe1ee;
  color:#a10d52;
  border:1px solid rgba(161,13,82,.18);
}
.tag--best{
  background:#e7f9ee;
  color:#0f6a3a;
  border:1px solid rgba(15,106,58,.18);
}

/* terms */
.sub-terms{
  display:flex;
  gap:10px;
  align-items:flex-start;
  font-size:12px;
  color: rgba(17,24,39,.65);
  margin: 12px 6px 14px;
}
.sub-terms input{
  margin-top: 2px;
  accent-color:#111;
}
.sub-terms a{
  color:#d11d7a;
  text-decoration:underline;
  font-weight:800;
}

/* button */
.sub-btn{
  width:100%;
  height:52px;
  border-radius:10px;
  border:none;
  background:#0b0b0c;
  color:#fff;
  font-weight:900;
  cursor:pointer;
  box-shadow: 0 14px 24px rgba(0,0,0,.16);
  transition: transform .15s ease;
}
.sub-btn:hover{
  transform: translateY(-1px);
}

/* footer note */
.sub-foot{
  display:flex;
  align-items:center;
  gap:10px;
  justify-content:center;
  font-size:12px;
  color: rgba(17,24,39,.55);
  margin-top:12px;
}
.sub-foot-dot{
  width:10px;height:10px;
  border-radius:999px;
  background: rgba(91,69,212,.9);
  box-shadow: 0 0 0 4px rgba(91,69,212,.18);
}

/* responsive */
@media (max-width: 1024px){
  .fc-layout{ grid-template-columns:1fr; gap:18px; }
  .fc-copy{ padding-right:0; }
  .fc-aside{ justify-content:flex-start; }
}



/* =========================
   MOCK PAPERS PAGE
   ========================= */

.page-hero--orange{
  background:var(--orange);
}

/* layout */
.mock-layout{
  display:grid;
  grid-template-columns: 1.25fr .75fr;
  gap: 36px;
  padding: 38px 0 60px;
  align-items:start;
}

.mock-content{
  background: rgba(255,255,255,.75);
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 12px;
  padding: 22px 24px 26px;
  box-shadow: 0 12px 26px rgba(15,23,42,.06);
}

/* FIX: Mock page heading size + color (match reference) */
.mock-title{
  font-family: "acumin-pro-condensed", sans-serif;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.15;
  color: #212121;
  margin: 0 0 18px;
  position: relative;
  padding-left: 14px;
}
.mock-title::before{
  content:"";
  position:absolute;
  left:0;
  top:6px;
  width:4px;
  height:70%;
  border-radius:6px;
  background: linear-gradient(
    180deg,
    var(--orange),
    rgba(122,99,242,.35)
  );
}

.mock-intro{
  font-size:13px;
  line-height:1.65;
  color: rgba(17,24,39,.75);
  margin-bottom:14px;
}

.mock-list{
  list-style: none;
  padding-left: 0;
}

.mock-list li{
  position: relative;
  padding-left: 26px;
  margin: 10px 0;
}

.mock-list li::before{
  content: "•";
  position: absolute;
  left: 6px;
  top: 0;
  font-size: 22px;
  line-height: 1;
  color: var(--orange);
}
.mock-note{
  font-size:13px;
  color: rgba(17,24,39,.7);
  line-height:1.65;
  margin-bottom:22px;
}

.mock-subtitle{
  margin:18px 0 10px;
  font-size:16px;
  font-weight:900;
}

/* paper selector */
.paper-selector{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
}

.paper-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:40px;
  min-width:40px;
  padding:0 14px;
  border-radius:10px;
  border:1px solid rgba(122,99,242,.6);
  background:#fff;
  color:#111;
  font-weight:800;
  text-decoration:none;
  transition:
    transform .15s ease,
    box-shadow .15s ease,
    background .15s ease;
}
.paper-btn:visited{
  color:#111;
}

.paper-btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(122,99,242,.25);
}

.paper-btn.is-active{
  background: linear-gradient(
    135deg,
    #e8e1ff,
    #7a63f2
  );
  color: #111;
  box-shadow: 0 12px 24px rgba(122,99,242,.35);
}

/* mock paper detail */
.mock-detail{
  width:min(980px,100%);
  margin:0 auto;
  padding: 32px 0 60px;
}
.mock-breadcrumb{
  display:flex;
  gap:8px;
  align-items:center;
  font-size:12px;
  color:rgba(248,247,255,.8);
  margin-bottom:10px;
}
.mock-breadcrumb a{
  color:#fff;
  text-decoration:none;
  font-weight:700;
}

/* mock MCQ */
.mock-mcq{
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px dashed rgba(15,23,42,.12);
}
.mock-mcq__head{
  display:flex;
  justify-content:space-between;
  gap:16px;
  align-items:flex-start;
  flex-wrap:wrap;
}
.mock-mcq__title{
  margin:0;
  font-size:20px;
  font-weight:800;
  color:#111;
}
.mock-mcq__meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:8px;
}
.mock-mcq__tag{
  font-size:12px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.08em;
  padding:4px 8px;
  border-radius:999px;
  background:#fff1e7;
  border:1px solid rgba(243,160,111,.6);
  color:#111;
}
.mock-mcq__actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.mock-mcq__summary{
  margin-top:10px;
  padding:8px 12px;
  border-radius:10px;
  background:#f9fafb;
  border:1px solid rgba(15,23,42,.12);
  font-size:12px;
  font-weight:700;
  color:rgba(17,24,39,.75);
  display:inline-block;
}
.mock-timer{
  margin-top:12px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(15,23,42,.12);
  background:linear-gradient(135deg, rgba(15,142,123,.08), rgba(243,160,111,.10));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.6);
  min-width:240px;
}
.mock-timer__header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:11px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:rgba(17,24,39,.75);
}
.mock-timer__live{
  font-size:10px;
  font-weight:800;
  padding:3px 8px;
  border-radius:999px;
  background:#111;
  color:#fff;
}
.mock-timer__stats{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:8px;
}
.mock-timer__pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 8px;
  border-radius:999px;
  background:rgba(255,255,255,.7);
  border:1px solid rgba(15,23,42,.08);
  font-size:11px;
  font-weight:700;
  color:rgba(17,24,39,.7);
}
.mock-timer__pill strong{
  font-weight:900;
  color:#111;
}
.mock-timer__bars{
  margin-top:8px;
  display:flex;
  align-items:flex-end;
  gap:5px;
  min-height:28px;
}
.mock-timer__bar{
  border:none;
  padding:0;
  width:10px;
  border-radius:8px;
  background:rgba(15,142,123,.25);
  transition:height .2s ease, background .2s ease, box-shadow .2s ease;
  cursor:pointer;
}
.mock-timer__bar.is-active{
  background:#0f8e7b;
  box-shadow:0 6px 16px rgba(15,142,123,.35);
}
.mock-save-meta{
  align-self:center;
  font-size:11px;
  font-weight:700;
  color:rgba(17,24,39,.7);
}

.mcq-grid{
  margin-top:20px;
  display:grid;
  gap:16px;
}
.mcq-card{
  border-radius:14px;
  border:1px solid rgba(15,23,42,.10);
  background:#fff;
  box-shadow:0 14px 28px rgba(15,23,42,.08);
  padding:16px;
}
.mock-detail .mcq-card{
  display:none;
}
.mock-detail .mcq-card.is-active{
  display:block;
}
.mcq-card__top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.mcq-card__chips{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.mcq-chip{
  display:inline-flex;
  align-items:center;
  padding:4px 8px;
  border-radius:999px;
  background:#fff1e7;
  border:1px solid rgba(243,160,111,.6);
  font-size:11px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.mcq-chip--muted{
  background:#f4f6f8;
  border-color:#d8dde3;
  color:#51606e;
}
.mcq-skip{
  border:none;
  background:transparent;
  font-size:12px;
  font-weight:700;
  color:#0f8e7b;
  cursor:pointer;
}
.mcq-question{
  margin:12px 0 0;
  font-size:17px;
  font-weight:700;
  color:#0f172a;
  line-height:1.55;
}
.mcq-media{
  margin-top:12px;
  border-radius:12px;
  border:1px solid rgba(15,23,42,.12);
  padding:8px;
  background:#fff;
}
.mcq-media img{
  width:100%;
  border-radius:10px;
  display:block;
}
.mcq-options{
  display:grid;
  gap:10px;
  margin-top:12px;
}
.mcq-option{
  border:1px solid rgba(15,23,42,.12);
  background:#fff;
  border-radius:10px;
  padding:10px 12px;
  display:flex;
  gap:10px;
  align-items:flex-start;
  text-align:left;
  cursor:pointer;
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.mcq-option:hover{
  transform:translateY(-1px);
  box-shadow:0 8px 16px rgba(15,23,42,.08);
}
.mcq-option__letter{
  width:26px;
  height:26px;
  border-radius:8px;
  display:grid;
  place-items:center;
  background:#f1f5f9;
  font-size:12px;
  font-weight:800;
  color:#111;
}
.mcq-option__text{
  font-size:15px;
  color:rgba(17,24,39,.8);
  line-height:1.55;
}
.mcq-option.is-selected{
  border-color:#111;
  background:#fff4e8;
}
.mcq-option.is-correct{
  border-color:#16a34a;
  background:#ecfdf3;
}
.mcq-option.is-wrong{
  border-color:#ef4444;
  background:#fef2f2;
}
.mcq-card__actions{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  margin-top:12px;
}
.mcq-status{
  font-size:12px;
  font-weight:800;
  color:#0f8e7b;
}
.mcq-status.is-wrong{
  color:#b91c1c;
}
.mcq-feedback{
  display:none;
  margin-top:10px;
  padding-top:10px;
  border-top:1px dashed rgba(15,23,42,.14);
  font-size:12px;
  color:rgba(17,24,39,.7);
  line-height:1.6;
}
.mcq-feedback.is-visible{
  display:block;
}
.mcq-feedback-media{
  margin-top:10px;
  border-radius:12px;
  border:1px solid rgba(15,23,42,.12);
  padding:8px;
  background:#fff;
}
.mcq-feedback-media img{
  width:100%;
  border-radius:10px;
  display:block;
}
.mcq-explanation{
  display:none;
}

/* =========================
   RIGHT CARD
   ========================= */

.mock-aside{
  display:flex;
  justify-content:flex-start;
}

.mastery-card{
  width:min(380px,100%);
  background:#bfeee4;
  border-radius:12px;
  padding:18px;
  box-shadow: 0 18px 36px rgba(15,23,42,.10);
}

.mastery-avatars{
  height:86px;
  position:relative;
}
.mastery-avatars span{
  position:absolute;
  width:52px;height:52px;
  border-radius:999px;
  background:rgba(255,255,255,.75);
  border:3px solid #d7f3ea;
}
.mastery-avatars span:nth-child(1){left:0;top:16px}
.mastery-avatars span:nth-child(2){left:36px;top:2px}
.mastery-avatars span:nth-child(3){left:78px;top:18px}
.mastery-avatars span:nth-child(4){left:120px;top:6px}
.mastery-avatars span:nth-child(5){left:156px;top:22px}

.mastery-title{
  margin:0;
  font-size:20px;
  font-weight:900;
}

.mastery-text{
  font-size:13px;
  line-height:1.6;
  color: rgba(17,24,39,.75);
  margin:10px 0 16px;
}

.mastery-btn{
  width:100%;
  height:48px;
  border-radius:8px;
  border:none;
  background:#0b0b0c;
  color:#fff;
  font-weight:800;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  cursor:pointer;
}

.mastery-foot{
  margin-top:12px;
  font-size:13px;
  color: rgba(17,24,39,.55);
}

/* responsive */
@media (max-width:1024px){
  .mock-layout{grid-template-columns:1fr;gap:24px}
}





/* ===========================
   ACCOUNT PAGE (Modern Upgrade)
   =========================== */

/* page width + spacing */
.account-wrap{
  width: min(820px, calc(100% - 48px));
  margin: 0 auto;
  padding: 42px 0 70px;
}

/* heading + sign out row */
.account-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin-bottom: 18px;
}

.account-title{
  font-family: "acumin-pro-condensed", sans-serif;
  font-size: 44px;
  line-height: 1.05;
  font-weight: 700;
  letter-spacing: 0.01em;
  margin: 0;
  color:#111;
}

/* signout button = premium */
.account-actions .btn,
.btn-signout{
  height: 44px;
  padding: 0 16px;
  border-radius: 12px;
  border: 1px solid rgba(15,23,42,.10);
  background: #111;
  color: #fff;
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-weight: 700;
  box-shadow: 0 10px 22px rgba(0,0,0,.12);
  transition: transform .15s ease, box-shadow .15s ease;
}
.account-actions .btn:hover,
.btn-signout:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(0,0,0,.16);
}

/* tabs container */
.account-tabs{
  margin-top: 18px;
  border: 1px solid rgba(99,215,207,.45);
  border-radius: 14px;
  background: rgba(99,215,207,.08);
  padding: 10px;
  display:flex;
  gap:10px;
}

/* each tab */
.account-tab{
  appearance:none;
  border: 1px solid transparent;
  background: transparent;
  color: rgba(17,24,39,.85);
  font-weight: 700;
  padding: 10px 14px;
  border-radius: 12px;
  cursor:pointer;
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
}

.account-tab:hover{
  background: rgba(255,255,255,.7);
  border-color: rgba(15,23,42,.10);
  transform: translateY(-1px);
}

/* active tab = modern pill */
.account-tab.is-active{
  background: #fff;
  border-color: rgba(15,23,42,.12);
  box-shadow: 0 12px 26px rgba(15,23,42,.08);
}

/* content card area */
.account-card{
  margin-top: 16px;
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 16px;
  padding: 22px 22px 24px;
  box-shadow: 0 18px 38px rgba(15,23,42,.08);
}

/* form layout */
.account-form{
  display:grid;
  gap: 14px;
}

.form-row{
  display:grid;
  gap: 8px;
}

.form-row label{
  font-size: 13px;
  font-weight: 800;
  color: rgba(17,24,39,.75);
}

/* modern inputs */
.account-form input[type="text"],
.account-form input[type="email"],
.account-form input[type="date"],
.account-form input[type="password"]{
  height: 46px;
  border-radius: 12px;
  border: 1px solid rgba(99,215,207,.55);
  background: #fff;
  padding: 0 14px;
  outline: none;
  transition: box-shadow .15s ease, border-color .15s ease;
}

.account-form input:focus{
  border-color: rgba(99,215,207,.95);
  box-shadow: 0 0 0 4px rgba(99,215,207,.18);
}

/* helper text */
.form-help{
  font-size: 12px;
  color: rgba(17,24,39,.55);
  margin-top: -4px;
}

/* primary action button */
.btn-primary{
  height: 46px;
  border-radius: 12px;
  border: 0;
  background: linear-gradient(135deg, #0b0b0c, #1a1a1b);
  color:#fff;
  font-weight: 800;
  padding: 0 18px;
  cursor:pointer;
  box-shadow: 0 14px 28px rgba(0,0,0,.14);
  transition: transform .15s ease, box-shadow .15s ease;
}

.btn-primary:hover{
  transform: translateY(-1px);
  box-shadow: 0 18px 34px rgba(0,0,0,.18);
}

/* secondary button */
.btn-ghost{
  height: 46px;
  border-radius: 12px;
  border: 1px solid rgba(15,23,42,.14);
  background: rgba(255,255,255,.7);
  color:#111;
  font-weight: 800;
  padding: 0 16px;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
}

/* membership info box */
.membership-note{
  border-radius: 14px;
  padding: 14px 16px;
  border: 1px solid rgba(99,215,207,.55);
  background: rgba(99,215,207,.12);
  color: rgba(17,24,39,.78);
  font-size: 13px;
}
.sub-grid{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 18px;
}
.sub-card{
  border-radius: 16px;
  border: 1px solid rgba(15,23,42,.10);
  background:#fff;
  box-shadow: 0 18px 34px rgba(15,23,42,.08);
  padding: 18px;
  display:flex;
  flex-direction:column;
  gap: 12px;
}
.sub-card__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.sub-card__head h3{
  margin:0;
  font-size:16px;
  font-weight:800;
}
.sub-status{
  font-size:11px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.08em;
  padding:6px 10px;
  border-radius:999px;
  background:#f1f5f9;
  color:#64748b;
}
.sub-status.is-active{
  background:#dcfce7;
  color:#166534;
}
.sub-status.is-none{
  background:#fee2e2;
  color:#991b1b;
}
.sub-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding: 10px 12px;
  border-radius:12px;
  background:#f8fafc;
  font-size:13px;
}
.sub-row span{
  color: rgba(17,24,39,.6);
}
.sub-row strong{
  font-weight:800;
}
.sub-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.sub-plan-form{
  display:grid;
  gap:10px;
  padding: 12px;
  border-radius:14px;
  border:1px solid rgba(15,23,42,.08);
  background:#f8fafc;
}
.sub-plan-form__row{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.sub-plan-label{
  display:block;
  font-size:12px;
  font-weight:800;
  color:rgba(17,24,39,.7);
  margin-bottom:6px;
}
.sub-plan-select{
  height:42px;
  border-radius:10px;
  border:1px solid rgba(15,23,42,.14);
  padding:0 12px;
  min-width:220px;
  background:#fff;
}
.sub-plan-help{
  font-size:12px;
  color:rgba(17,24,39,.6);
}
.sub-foot{
  font-size:12px;
  color: rgba(17,24,39,.55);
}
.sub-history{
  display:grid;
  gap:10px;
}
.sub-history__item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding: 10px 12px;
  border-radius:12px;
  background:#f8fafc;
}
.sub-history__title{
  font-weight:800;
  font-size:13px;
}
.sub-history__meta{
  font-size:12px;
  color: rgba(17,24,39,.6);
}
.sub-history__status{
  font-size:11px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.08em;
  padding:6px 10px;
  border-radius:999px;
  background:#e2e8f0;
  color:#475569;
}
.sub-empty{
  font-size:13px;
  color: rgba(17,24,39,.6);
}

/* small responsive */
@media (max-width: 720px){
  .account-wrap{width: calc(100% - 28px); padding: 30px 0 50px;}
  .account-title{font-size: 38px;}
  .account-head{flex-direction: column; align-items:flex-start;}
  .account-tabs{flex-wrap: wrap;}
  .sub-grid{grid-template-columns:1fr;}
}


/* ===========================
   REGISTER PAGE (Modern Unique)
   =========================== */

.reg-page{
  position: relative;
  overflow-x: hidden;
  overflow-y: visible;
  isolation: isolate;
  background:
    radial-gradient(320px 320px at -6% -8%, rgba(255,255,255,.75), transparent 70%),
    radial-gradient(320px 320px at 106% 108%, rgba(255,255,255,.75), transparent 70%),
    radial-gradient(520px 220px at 10% 0%, rgba(99,215,207,.18), transparent 60%),
    radial-gradient(420px 200px at 100% 10%, rgba(243,160,111,.18), transparent 60%),
    #f7fbfa;
  flex: 0 0 auto;
}

.reg-wrap{
  position: relative;
  z-index: 1;
  padding: 54px 0 80px;
}

.reg-hero-title{
  margin: 18px 0 22px;
  font-family: "acumin-pro-condensed", sans-serif;
  font-size: 44px;
  line-height: 1.1;
  font-weight: 700;
  color: #111;
  letter-spacing: .01em;
}
.reg-hero-accent{
  display:inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  background: rgba(99,215,207,.18);
  border: 1px solid rgba(99,215,207,.35);
}
.reg-hero-sub{
  margin: -8px 0 14px;
  font-size: 14px;
  color: rgba(17,24,39,.70);
  max-width: 560px;
}
.reg-trust{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom: 24px;
}
.reg-trust-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.8);
  border: 1px solid rgba(15,23,42,.12);
  font-size: 12px;
  font-weight: 800;
  color:#111;
}
.reg-trust-ico{
  width: 18px;
  height: 18px;
  border-radius: 6px;
  display:grid;
  place-items:center;
  background: rgba(99,215,207,.2);
  border: 1px solid rgba(99,215,207,.4);
  font-size: 11px;
}

.reg-grid{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 22px;
  align-items:start;
}

.reg-card{
  border-radius: 14px;
  border: 1px solid rgba(99,215,207,.45);
  background: rgba(255,255,255,.92);
  box-shadow: 0 18px 40px rgba(15,23,42,.08);
  backdrop-filter: blur(6px);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.reg-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 22px 46px rgba(15,23,42,.12);
}

.reg-card--quote{
  padding: 18px 18px 8px;
}
.reg-card__title{
  font-weight: 800;
  font-size: 13px;
  color:#111;
  margin-bottom: 12px;
}

.quote{
  padding: 14px 14px;
  border-radius: 12px;
  background: rgba(99,215,207,.08);
  border: 1px solid rgba(99,215,207,.30);
  margin: 12px 0;
}
.quote p{
  margin: 0 0 8px;
  font-size: 13px;
  color: rgba(17,24,39,.80);
  line-height: 1.55;
}
.quote__meta{
  font-size: 12px;
  color: rgba(17,24,39,.55);
  font-weight: 600;
}

.reg-section{ margin-top: 18px; }
.reg-h2{
  margin: 0 0 12px;
  font-family: "acumin-pro-condensed", sans-serif;
  font-size: 28px;
  font-weight: 700;
  color:#111;
}

.reg-ticks{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap:10px;
}
.reg-ticks li{
  position:relative;
  padding-left: 34px;
  font-size: 13px;
  color: rgba(17,24,39,.70);
  line-height: 1.55;
}
.reg-ticks li::before{
  content:"✓";
  position:absolute;
  left:0;
  top:0;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  display:grid;
  place-items:center;
  background: rgba(255, 91, 153, .10);
  border: 1px solid rgba(255, 91, 153, .25);
  color: var(--teal);
  font-weight: 900;
}

.reg-bonuses{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap:10px;
}
.reg-bonuses li{
  display:flex;
  gap:10px;
  align-items:flex-start;
  font-size: 13px;
  color: rgba(17,24,39,.72);
}
.bonus-ico{
  width: 24px; height: 24px;
  border-radius: 8px;
  display:grid;
  place-items:center;
  border: 1px solid rgba(99,215,207,.35);
  background: rgba(99,215,207,.10);
  color:#111;
  font-weight: 900;
}

/* RIGHT FORM */
.reg-card--form{
  padding: 20px 20px 18px;
  border-color: rgba(15,23,42,.14);
}
.reg-form-title{
  font-family: "acumin-pro-condensed", sans-serif;
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 14px;
  color:#111;
}
.reg-field{
  display:grid;
  gap: 8px;
  margin-bottom: 12px;
}
.reg-field label{
  font-size: 12px;
  font-weight: 800;
  color: rgba(17,24,39,.65);
}
.reg-field input{
  height: 46px;
  border-radius: 12px;
  border: 1px solid rgba(99,215,207,.55);
  background:#fff;
  padding: 0 14px;
  outline:none;
}
.reg-field input:focus{
  border-color: rgba(99,215,207,.95);
  box-shadow: 0 0 0 4px rgba(99,215,207,.18);
}

.reg-divider{
  height:1px;
  background: rgba(15,23,42,.10);
  margin: 12px 0;
}
.reg-form-sub{
  font-size: 12px;
  font-weight: 900;
  color:#111;
  margin-bottom: 10px;
}
.plan-groups{
  display:grid;
  gap:16px;
  margin-bottom: 4px;
}
.plan-group{
  display:flex;
  flex-direction:column;
}
.plan-group__title{
  font-size:12px;
  font-weight:900;
  color:#111;
  margin: 2px 0 10px;
}
@media (min-width: 860px){
  .plan-groups{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items:start;
  }
}

/* Plans */
.plan{
  position:relative;
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding: 12px 12px;
  border-radius: 12px;
  border: 1px solid rgba(99,215,207,.35);
  background: rgba(99,215,207,.06);
  margin-bottom: 10px;
  cursor:pointer;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.plan.is-disabled{
  opacity:.55;
  cursor:not-allowed;
  box-shadow:none;
}
.plan.is-disabled:hover{
  transform:none;
  border-color: rgba(99,215,207,.35);
}
.plan.is-selected{
  border-color: rgba(15,23,42,.28);
  background: rgba(99,215,207,.14);
  box-shadow: 0 12px 24px rgba(15,23,42,.08);
}
.plan:hover{
  transform: translateY(-1px);
  border-color: rgba(15,23,42,.22);
}
.plan input{ margin-top: 2px; }
.plan__text{
  font-size: 13px;
  color: rgba(17,24,39,.80);
  line-height: 1.4;
}
.plan__price{
  display:block;
  margin-top: 6px;
  font-weight: 900;
  color:#111;
}
.plan__strike{
  text-decoration: line-through;
  color: rgba(17,24,39,.45);
}
.plan__hint{
  display:block;
  color: rgba(17,24,39,.55);
  font-size: 12px;
  margin-top: 4px;
}
.plan-lock{
  margin:-2px 0 10px;
  font-size:12px;
  color: rgba(27,20,52,.7);
}

.badge{
  position:absolute;
  right: 10px;
  top: 10px;
  font-size: 10px;
  font-weight: 900;
  padding: 4px 8px;
  border-radius: 999px;
}
.badge--hot{
  background: rgba(255,45,134,.12);
  border: 1px solid rgba(255,45,134,.25);
  color: var(--teal);
}
.badge--best{
  background: rgba(79,211,162,.16);
  border: 1px solid rgba(79,211,162,.30);
  color: #0d7a55;
}

.reg-price{
  border-radius: 12px;
  border: 1px solid rgba(15,23,42,.14);
  background: linear-gradient(135deg, rgba(255,255,255,.95), rgba(255,255,255,.8));
  padding: 12px;
  box-shadow: 0 14px 26px rgba(15,23,42,.08);
  margin-top: 12px;
}
.reg-price__label{
  font-size: 11px;
  font-weight: 900;
  color:#111;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.reg-price__row{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  margin-top: 8px;
}
.reg-price__name{
  font-size: 13px;
  font-weight: 800;
  color:#111;
}
.reg-price__value{
  font-size: 18px;
  font-weight: 900;
  color:#111;
}
.reg-price__meta{
  margin-top: 6px;
  font-size: 11px;
  color: rgba(17,24,39,.60);
}

.reg-proof-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 12px;
}
.reg-proof-card{
  border-radius: 12px;
  border: 1px solid rgba(99,215,207,.35);
  background: #fff;
  padding: 12px;
  box-shadow: 0 12px 24px rgba(15,23,42,.06);
}
.reg-proof-num{
  font-weight: 900;
  font-size: 20px;
  color:#111;
}
.reg-proof-title{
  margin-top: 6px;
  font-weight: 800;
  font-size: 12px;
  color:#111;
}
.reg-proof-sub{
  margin-top: 4px;
  font-size: 11px;
  color: rgba(17,24,39,.60);
  line-height: 1.55;
}

.reg-check{ margin: 12px 0 14px; }
.checkline{
  display:flex;
  gap:10px;
  align-items:flex-start;
  font-size: 12px;
  color: rgba(17,24,39,.70);
}
.checkline a{ color:var(--teal); text-decoration:underline; }

.reg-submit{
  width:100%;
  height: 50px;
  border-radius: 12px;
  border: 0;
  background: #0b0b0c;
  color:#fff;
  font-weight: 900;
  cursor:pointer;
  box-shadow: 0 18px 34px rgba(0,0,0,.16);
  transition: transform .15s ease, box-shadow .15s ease;
}
.reg-submit:hover{
  transform: translateY(-1px);
  box-shadow: 0 22px 42px rgba(0,0,0,.18);
}

.reg-small{
  margin-top: 12px;
  font-size: 12px;
  color: rgba(17,24,39,.60);
  text-align:left;
}
.reg-small a{ color:var(--teal); text-decoration:underline; }

/* header ctas (only for this page if used) */
.nav-cta{
  border: 1px solid rgba(15,23,42,.14);
  border-radius: 10px;
  padding: 8px 12px;
}
.nav-cta--dark{
  background:#5b45d4;
  color:#fff !important;
  border-color:#5b45d4;
}
.nav-cta--light{
  background:rgba(255,255,255,.12);
  color:#f8f7ff !important;
  border-color:rgba(255,255,255,.35);
}

/* login page */
.login-page{
  padding: 56px 0 70px;
}

.login-wrap{
  width: min(520px, calc(100% - 28px));
  margin: 0 auto;
  text-align: center;
}

.login-title{
  font-family: "acumin-pro-condensed", sans-serif;
  font-size: 30px;
  font-weight: 700;
  margin: 0 0 14px;
  color: #111;
}

.login-line{
  width: 420px;
  max-width: 100%;
  height: 2px;
  margin: 0 auto 26px;
  background: rgba(99,215,207,.65);
  border-radius: 999px;
}

.login-form{
  text-align: left;
}

.login-field{
  display: grid;
  gap: 10px;
  margin-bottom: 18px;
}

.login-field label{
  font-size: 12px;
  font-weight: 800;
  color: rgba(17,24,39,.65);
}

.login-field input{
  height: 48px;
  border-radius: 10px;
  border: 1px solid rgba(99,215,207,.60);
  background: #fff;
  padding: 0 14px;
  outline: none;
}

.login-field input:focus{
  border-color: rgba(99,215,207,.95);
  box-shadow: 0 0 0 4px rgba(99,215,207,.18);
}

.login-forgot{
  display: inline-block;
  margin-top: -6px;
  margin-bottom: 16px;
  font-size: 12px;
  color: var(--teal);
  text-decoration: underline;
}

.login-btn{
  width: 100%;
  height: 52px;
  border-radius: 10px;
  border: 0;
  background: #0b0b0c;
  color: #fff;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 16px 30px rgba(0,0,0,.14);
  transition: transform .15s ease, box-shadow .15s ease;
}

.login-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 20px 36px rgba(0,0,0,.18);
}

.login-bottom{
  margin-top: 16px;
  font-size: 12px;
  color: rgba(17,24,39,.60);
  text-align: center;
}

.login-bottom a{
  color: var(--teal);
  text-decoration: underline;
}

/* responsive */
@media (max-width: 1024px){
  .reg-grid{ grid-template-columns: 1fr; }
  .reg-hero-title{ font-size: 36px; }
  .reg-proof-grid{ grid-template-columns: 1fr; }
}
.reg-page + .footer{
  margin-top: 40px;
}

/* ===========================
   FREE RESOURCES PAGE (image + text rows)
   =========================== */
.free-page{ padding:0; }
.free-hero{
  background: var(--orange);
  padding: 40px 0 36px;
}
.free-title{
  margin: 0 0 6px;
  font-family: "acumin-pro-condensed", sans-serif;
  font-size: 38px;
  font-weight: 700;
  color:#f8f7ff;
}
.free-list{
  padding: 28px 0 44px;
  background: #fff;
}
.free-row{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 34px;
  align-items:center;
  padding: 28px 0;
  border-bottom: 1px solid rgba(15,23,42,.08);
}
.free-row:last-child{
  border-bottom: 0;
}
.free-copy{
  max-width: 520px;
}
.free-row--alt{
  grid-template-columns: .95fr 1.05fr;
}
.free-meta{
  font-size: 11px;
  font-weight: 800;
  color: rgba(17,24,39,.60);
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.free-h2{
  margin: 0 0 8px;
  font-family: "acumin-pro-condensed", sans-serif;
  font-size: 24px;
  font-weight: 700;
  color:#111;
}
.free-text{
  margin: 0 0 12px;
  font-size: 14px;
  color: rgba(17,24,39,.72);
  line-height: 1.7;
}
.free-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height: 38px;
  padding: 0 14px;
  border-radius: 10px;
  background:#f4c54a;
  color:#111;
  font-weight: 800;
  text-decoration:none;
  border: 1px solid rgba(15,23,42,.08);
  box-shadow: 0 10px 18px rgba(15,23,42,.10);
}
.free-btn--muted{
  background: #cfcfcf;
  color:#111;
}
.free-media{
  display:flex;
  justify-content:flex-end;
}
.free-placeholder{
  width: min(360px, 100%);
  height: 240px;
  border-radius: 12px;
  border: 1px dashed rgba(15,23,42,.22);
  background: linear-gradient(135deg, rgba(15,23,42,.05), rgba(99,215,207,.12));
  color: rgba(17,24,39,.65);
  font-weight: 800;
  font-size: 12px;
  display:grid;
  place-items:center;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.free-row--alt .free-media{
  justify-content:flex-start;
}

@media (max-width: 1024px){
  .free-row{ grid-template-columns: 1fr; }
  .free-row--alt{ grid-template-columns: 1fr; }
  .free-media{ justify-content:flex-start; }
}

/* ===========================
   ABOUT PAGE
   =========================== */
.about-page{ padding:0; }
.about-hero{
  background:
    linear-gradient(0deg, rgba(99,215,207,.12), rgba(99,215,207,.12)),
    var(--teal);
  padding: 46px 0 40px;
}
.about-title{
  margin: 0 0 6px;
  font-family: "acumin-pro-condensed", sans-serif;
  font-size: 38px;
  font-weight: 700;
  color:#111;
}
.about-sub{
  margin: 0;
  font-size: 15px;
  color: rgba(17,24,39,.70);
  max-width: 640px;
}
.about-body{
  padding: 30px 0 28px;
  background: #fff;
}
.about-copy p{
  margin: 0 0 12px;
  font-size: 14px;
  color: rgba(17,24,39,.72);
  line-height: 1.7;
}
.about-quote{
  margin-top: 18px;
  padding: 16px;
  border-radius: 12px;
  background: rgba(243,160,111,.12);
  border: 1px solid rgba(243,160,111,.35);
}
.about-quote__title{
  font-weight: 900;
  font-size: 13px;
  color:#111;
  margin-bottom: 10px;
}
.about-quote-list{
  margin: 0 0 10px;
  padding-left: 18px;
  color: rgba(17,24,39,.72);
  font-size: 13px;
  line-height: 1.6;
}
.about-link{
  font-size: 13px;
  font-weight: 900;
  color:var(--teal);
  text-decoration: underline;
}
.about-reco{
  padding: 22px 0 30px;
  background: #fff7f0;
}
.about-reco__inner{
  border-radius: 16px;
  border: 1px solid rgba(243,160,111,.4);
  background: #fff2e8;
  padding: 16px;
}
.about-reco__title{
  text-align:center;
  font-weight: 900;
  font-size: 14px;
  color:#111;
  margin-bottom: 14px;
}
.about-logos{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 12px;
}
.about-logo-card{
  border-radius: 12px;
  border: 1px solid rgba(15,23,42,.12);
  background:#fff;
  padding: 12px;
  display:flex;
  align-items:center;
  gap:10px;
}
.about-logo-mark{
  width: 32px;
  height: 32px;
  border-radius: 10px;
  display:grid;
  place-items:center;
  background: rgba(99,215,207,.2);
  border: 1px solid rgba(99,215,207,.35);
  font-weight: 900;
  color:#111;
  font-size: 12px;
}
.about-logo-name{
  font-size: 12px;
  font-weight: 900;
  color:#111;
}
.about-features{
  padding: 30px 0 32px;
  background: #fff;
}
.about-h2{
  margin: 0 0 12px;
  font-family: "acumin-pro-condensed", sans-serif;
  font-size: 22px;
  font-weight: 700;
  color:#111;
}
.about-list{
  margin: 0 0 12px;
  padding-left: 18px;
  font-size: 13px;
  color: rgba(17,24,39,.72);
  line-height: 1.7;
}
.about-foot{
  margin: 0;
  font-size: 13px;
  color: rgba(17,24,39,.72);
  line-height: 1.7;
}
.about-help{
  padding: 28px 0 44px;
  background: #fff;
}
.about-help p{
  margin: 0 0 10px;
  font-size: 13px;
  color: rgba(17,24,39,.72);
  line-height: 1.7;
}
.about-mail{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-weight: 900;
  font-size: 12px;
  color:var(--teal);
  text-decoration: underline;
}

@media (max-width: 1024px){
  .about-logos{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}

/* ===========================
   REVIEWS WALL
   =========================== */
.reviews-page{ padding:0; }
.reviews-hero{
  padding: 48px 0 42px;
  background: linear-gradient(135deg, #4a3bbf 0%, #5b45d4 45%, #7a63f2 100%);
}
.reviews-hero__inner{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap: 10px;
}
.reviews-search{
  width: min(520px, 100%);
  display:flex;
  align-items:center;
  gap:10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255,255,255,.9);
  border: 1px solid rgba(15,23,42,.12);
  box-shadow: 0 12px 24px rgba(15,23,42,.10);
}
.reviews-search__icon{
  font-size: 14px;
}
.reviews-search input{
  width: 100%;
  border: 0;
  background: transparent;
  font-size: 14px;
  outline: none;
}
.reviews-title{
  margin: 0;
  font-family: "acumin-pro-condensed", sans-serif;
  font-size: 32px;
  font-weight: 700;
  color:#111;
}
.reviews-sub{
  margin: 0;
  font-size: 14px;
  color: rgba(17,24,39,.70);
}
.reviews-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height: 38px;
  padding: 0 16px;
  border-radius: 12px;
  background:#0b0b0c;
  color:#fff;
  font-weight: 800;
  text-decoration:none;
  box-shadow: 0 14px 26px rgba(0,0,0,.16);
}
.reviews-grid{
  padding: 32px 0 44px;
  background: #f7fbfa;
}
.reviews-columns{
  column-count: 3;
  column-gap: 18px;
}
.review-card{
  break-inside: avoid;
  background: #fff;
  border-radius: 12px;
  border: 1px solid rgba(15,23,42,.10);
  box-shadow: 0 14px 28px rgba(15,23,42,.08);
  padding: 12px;
  margin: 0 0 18px;
}
.review-card__head{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom: 8px;
}
.review-avatar{
  width: 32px;
  height: 32px;
  border-radius: 10px;
  display:grid;
  place-items:center;
  background: rgba(99,215,207,.2);
  border: 1px solid rgba(99,215,207,.35);
  font-weight: 900;
  color:#111;
  font-size: 12px;
}
.review-name{
  font-weight: 900;
  font-size: 13px;
  color:#111;
}
.review-meta{
  font-size: 12px;
  color: rgba(17,24,39,.60);
}
.review-stars{
  color:#f4c54a;
  font-size: 12px;
  letter-spacing: 1px;
  margin-bottom: 6px;
}
.review-text{
  margin: 0;
  font-size: 13px;
  color: rgba(17,24,39,.72);
  line-height: 1.6;
}
.review-media{
  width: 100%;
  height: 160px;
  border-radius: 10px;
  border: 1px dashed rgba(15,23,42,.2);
  background: linear-gradient(135deg, rgba(15,23,42,.04), rgba(99,215,207,.12));
  color: rgba(17,24,39,.60);
  font-weight: 800;
  font-size: 11px;
  display:grid;
  place-items:center;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 8px;
}

@media (max-width: 1100px){
  .reviews-columns{ column-count: 2; }
}
@media (max-width: 720px){
  .reviews-columns{ column-count: 1; }
  .reviews-hero{ padding: 40px 0 34px; }
  .reviews-title{ font-size: 28px; }
}

/* ===========================
   FREE RESOURCES PAGE
   =========================== */

.resources-page{ padding: 0; }

.resources-hero{
  padding: 64px 0 50px;
  background:
    radial-gradient(520px 260px at 12% -10%, rgba(99,215,207,.28), transparent 60%),
    radial-gradient(520px 260px at 100% 0%, rgba(243,160,111,.22), transparent 60%),
    #fff;
}
.resources-hero__grid{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 22px;
  align-items:center;
}
.resources-kicker{
  display:inline-block;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(99,215,207,.18);
  border: 1px solid rgba(99,215,207,.35);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .02em;
}
.resources-hero__title{
  margin: 14px 0 10px;
  font-family: "acumin-pro-condensed", sans-serif;
  font-size: 48px;
  font-weight: 700;
  color:#111;
  line-height:1.05;
}
.resources-hero__sub{
  margin: 0 0 12px;
  color: rgba(17,24,39,.75);
  font-size: 15px;
  max-width: 560px;
}
.resources-hero__bullets{
  list-style:none;
  margin: 0 0 14px;
  padding: 0;
  display:grid;
  gap:8px;
}
.resources-hero__bullets li{
  position:relative;
  padding-left: 26px;
  font-size: 14px;
  color: rgba(17,24,39,.78);
}
.resources-hero__bullets li::before{
  content:"\2713";
  position:absolute;
  left:0;
  top:1px;
  width: 18px;
  height: 18px;
  border-radius: 6px;
  display:grid;
  place-items:center;
  background: rgba(15,23,42,.08);
  font-weight: 900;
}
.resources-hero__actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom: 12px;
}
.resources-trust{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.resources-pill{
  font-size: 12px;
  font-weight: 800;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.8);
  border: 1px solid rgba(15,23,42,.12);
}
.resources-hero__card{
  border-radius: 16px;
  border: 1px solid rgba(15,23,42,.12);
  background: rgba(255,255,255,.9);
  box-shadow: 0 18px 36px rgba(15,23,42,.10);
  padding: 18px;
}
.resources-hero__badge{
  display:inline-block;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(15,23,42,.08);
}
.resources-hero__card-title{
  margin: 12px 0 6px;
  font-weight: 900;
  font-size: 20px;
  color:#111;
}
.resources-hero__card-sub{
  margin: 0 0 12px;
  font-size: 14px;
  color: rgba(17,24,39,.70);
}
.resources-hero__list{
  display:grid;
  gap:8px;
  font-size: 13px;
  color: rgba(17,24,39,.70);
}
.resources-hero__list span{
  display:flex;
  gap:8px;
  align-items:center;
}
.resources-hero__list span::before{
  content:"\2713";
  width: 16px;
  height: 16px;
  border-radius: 6px;
  display:grid;
  place-items:center;
  background: rgba(99,215,207,.16);
  font-weight: 900;
  font-size: 11px;
}

.resources-grid{
  padding: 40px 0 34px;
  background: #fff;
}
.resources-h2{
  margin: 0 0 16px;
  font-family: "acumin-pro-condensed", sans-serif;
  font-size: 30px;
  font-weight: 700;
  color:#111;
}
.resources-cards{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 16px;
}
.resource-card{
  border-radius: 16px;
  border: 1px solid rgba(15,23,42,.12);
  background: #fff;
  padding: 16px;
  box-shadow: 0 18px 34px rgba(15,23,42,.08);
}
.resource-card--teal{
  border-color: rgba(99,215,207,.45);
  background: rgba(99,215,207,.08);
}
.resource-tag{
  display:inline-block;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(15,23,42,.08);
}
.resource-title{
  margin: 10px 0 6px;
  font-weight: 900;
  font-size: 17px;
  color:#111;
}
.resource-text{
  margin: 0 0 10px;
  font-size: 14px;
  color: rgba(17,24,39,.70);
}
.resource-list{
  list-style:none;
  padding: 0;
  margin: 0 0 12px;
  display:grid;
  gap:8px;
  font-size: 13px;
  color: rgba(17,24,39,.70);
}
.resource-list li{
  position:relative;
  padding-left: 22px;
}
.resource-list li::before{
  content:"\2713";
  position:absolute;
  left:0;
  top:1px;
  width: 16px;
  height: 16px;
  border-radius: 6px;
  display:grid;
  place-items:center;
  background: rgba(99,215,207,.2);
  font-weight: 900;
  font-size: 11px;
}
.resource-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-weight: 900;
  font-size: 13px;
  color:var(--teal);
  text-decoration: underline;
}

.resources-steps{
  padding: 34px 0 38px;
  background: #f7fbfa;
}
.resources-steps__head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:12px;
  margin-bottom: 16px;
}
.resources-steps__sub{
  margin:0;
  color: rgba(17,24,39,.65);
  font-size: 14px;
}
.resources-steps__grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 16px;
}
.resources-step{
  border-radius: 16px;
  border: 1px solid rgba(15,23,42,.12);
  background: #fff;
  padding: 16px;
  box-shadow: 0 18px 34px rgba(15,23,42,.08);
}
.resources-step--accent{
  border-color: rgba(99,215,207,.45);
  background: rgba(99,215,207,.10);
}
.resources-step__num{
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .18em;
  color: rgba(17,24,39,.55);
}
.resources-step__title{
  margin: 10px 0 6px;
  font-weight: 900;
  font-size: 15px;
  color:#111;
}
.resources-step__text{
  margin: 0;
  font-size: 13px;
  color: rgba(17,24,39,.70);
}

.resources-cta{
  padding: 34px 0 40px;
  background: var(--orange);
}
.resources-cta__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 16px;
}
.resources-cta__title{
  margin: 0 0 6px;
  font-family: "acumin-pro-condensed", sans-serif;
  font-size: 28px;
  font-weight: 700;
  color:#111;
}
.resources-cta__sub{
  margin:0;
  font-size: 13px;
  color: rgba(17,24,39,.70);
}
.resources-cta__actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

@media (max-width: 1024px){
  .resources-hero__grid{ grid-template-columns: 1fr; }
  .resources-cards{ grid-template-columns: 1fr; }
  .resources-steps__head{ flex-direction: column; align-items:flex-start; }
  .resources-steps__grid{ grid-template-columns: 1fr; }
  .resources-cta__inner{ flex-direction: column; align-items:flex-start; }
  .resources-hero__title{ font-size: 40px; }
}