:root{
  --bg: #f4f6f8;
  --hero: #2f4253;
  --card: #ffffff;
  --text: #0f172a;
  --muted: rgba(15, 23, 42, .65);
  --line: rgba(15, 23, 42, .12);

  --accent: #2d6cdf;
  --accentSoft: rgba(45, 108, 223, .12);

  --success: #1f9d55;
  --danger: #d64545;

  --shadow: 0 12px 34px rgba(0,0,0,.08);
  --radius: 16px;
}

*{ box-sizing: border-box; }
html, body{ height: 100%; }
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
}

.hidden{ display:none !important; }

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

.page{
  width: min(1100px, 92vw);
  margin: 0 auto;
  padding: 22px 0 40px 0;
}

.heroHeader{
  background: var(--hero);
  color: #fff;
  padding: 28px 0 18px 0;
}

.heroInner{
  width: min(1100px, 92vw);
  margin: 0 auto;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
}

.heroTitle{
  font-family: Poppins, Inter, system-ui, sans-serif;
  font-size: 44px;
  line-height: 1.05;
  margin: 0;
}

.heroSubtitle{
  margin-top: 10px;
  font-size: 18px;
  color: rgba(255,255,255,.8);
}

.btnSoft{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 12px 16px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.10);
  color:#fff;
  text-decoration:none;
  font-weight: 600;
}
.btnSoft:hover{ background: rgba(255,255,255,.16); }

.heroControls{
  width: min(1100px, 92vw);
  margin: 18px auto 0 auto;
}

.controlsCard{
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.unitPicker{
  min-width: 260px;
  flex: 1 1 320px;
}
.select{
  width: 100%;
  margin-top: 6px;
  padding: 14px 12px;
  border-radius: 14px;
  border: 2px solid rgba(45,108,223,.85);
  outline: none;
  font-size: 16px;
  background: #fff;
}

.tabBar{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 6px;
  border-radius: 14px;
  background: #f3f5f7;
  border: 1px solid rgba(15,23,42,.10);
  flex: 1 1 520px;
  justify-content: flex-end;
}

.tabBtn{
  border: none;
  background: transparent;
  padding: 10px 14px;
  border-radius: 12px;
  font-weight: 700;
  color: rgba(15,23,42,.55);
  display:flex;
  align-items:center;
  gap: 10px;
  cursor:pointer;
}
.tabBtn.isActive{
  color: var(--accent);
  background: #fff;
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
}
.tabBtn i{ font-size: 18px; }

.viewSection{ padding-top: 18px; }

.contentWrap{
  display:flex;
  flex-direction: column;
  gap: 16px;
}

.sectionTitle{
  margin: 0 0 4px 0;
  font-size: 26px;
  font-weight: 800;
}

.card{
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border: 1px solid rgba(15,23,42,.08);
}

.cardHeader{
  padding: 16px 18px 0 18px;
}
.cardHeaderTitle{
  font-weight: 900;
  font-size: 14px;
  color: rgba(15,23,42,.7);
  letter-spacing: .02em;
  text-transform: uppercase;
}

.cardBody{
  padding: 16px 18px 18px 18px;
}

.prose{
  font-size: 16px;
  line-height: 1.6;
}

.termsGrid{
  display:grid;
  gap: 12px;
  grid-template-columns: 1fr 1fr;
}
@media (max-width: 860px){
  .termsGrid{ grid-template-columns: 1fr; }
}

.termItem{
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 14px;
  padding: 12px;
  background: rgba(45,108,223,.04);
}
.term{
  font-weight: 900;
  margin-bottom: 6px;
}

/* Flashcards header and controls */
.flashHeader{
  display:flex;
  align-items:flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.flashControls{
  display:flex;
  gap: 10px;
  align-items:center;
  flex-wrap: wrap;
}

.selectSmall{
  padding: 10px 10px;
  border-radius: 12px;
  border: 1px solid rgba(15,23,42,.14);
  background: #fff;
  font-weight: 700;
}

.btnOutline{
  padding: 10px 14px;
  border-radius: 14px;
  border: 2px solid rgba(15,23,42,.18);
  background: #fff;
  font-weight: 800;
  cursor:pointer;
}
.btnOutline:hover{ background: rgba(0,0,0,.02); }

.btnOutline.success{
  border-color: rgba(31,157,85,.45);
}
.btnOutline.success:hover{
  background: rgba(31,157,85,.08);
}

.btnOutline.danger{
  border-color: rgba(214,69,69,.45);
}
.btnOutline.danger:hover{
  background: rgba(214,69,69,.08);
}

.statusRow{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.statusLeft{
  display:flex;
  align-items:center;
  gap: 10px;
}
.statusRight{
  display:flex;
  align-items:center;
  gap: 10px;
  flex-wrap: wrap;
}

.dot{
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: rgba(15,23,42,.15);
  border: 2px solid rgba(15,23,42,.22);
}
.dot.got{
  background: rgba(31,157,85,.85);
  border-color: rgba(31,157,85,.25);
}
.dot.review{
  background: rgba(214,69,69,.85);
  border-color: rgba(214,69,69,.25);
}

/* Flip flashcards */
.fcFlip{
  perspective: 1200px;
}
.fcFlipInner{
  position: relative;
  width: 100%;
  min-height: 240px;
  transform-style: preserve-3d;
  transition: transform 220ms ease;
  border-radius: 16px;
  border: 1px solid rgba(15,23,42,.10);
  background: linear-gradient(180deg, rgba(45,108,223,.06), rgba(45,108,223,.02));
  box-shadow: 0 14px 38px rgba(0,0,0,.08);
  cursor: pointer;
  outline: none;
}
.fcFlipInner.isFlipped{
  transform: rotateY(180deg);
}
.fcFace{
  position: absolute;
  inset: 0;
  padding: 18px;
  backface-visibility: hidden;
  display:flex;
  flex-direction: column;
  justify-content: space-between;
}
.fcBack{
  transform: rotateY(180deg);
}
.fcLabel{
  font-weight: 900;
  font-size: 20px;
  margin-bottom: 10px;
}
.fcText{
  font-size: 20px;
  line-height: 1.55;
  font-weight: 700;
}
.fcHint{
  font-size: 13px;
  opacity: .65;
  margin-top: 14px;
}

/* Quiz */
.qBlock{
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 14px;
  padding: 14px;
  margin-bottom: 12px;
  background: rgba(0,0,0,.01);
}
.qPrompt{
  font-size: 16px;
  font-weight: 800;
  margin-bottom: 10px;
}
.qChoices{
  display:flex;
  flex-direction: column;
  gap: 8px;
}
.choice{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px;
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 12px;
  background: #fff;
}
.choice input{ transform: scale(1.05); }
.qBlock.isCorrect{
  border-color: rgba(31,157,85,.35);
  background: rgba(31,157,85,.05);
}
.qBlock.isWrong{
  border-color: rgba(214,69,69,.35);
  background: rgba(214,69,69,.05);
}

.frqBlock{
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 14px;
  padding: 14px;
  margin-top: 12px;
  background: rgba(45,108,223,.03);
}
.frqBtns{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.frqPanel{
  margin-top: 12px;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid rgba(15,23,42,.10);
  background: #fff;
}

.codeBlock{
  margin: 8px 0 0 0;
  white-space: pre-wrap;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 13px;
  line-height: 1.5;
}

.footer{
  border-top: 1px solid rgba(15,23,42,.10);
  background: #fff;
}
.footerInner{
  width: min(1100px, 92vw);
  margin: 0 auto;
  padding: 16px 0;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.footerActions{
  display:flex;
  align-items:center;
  gap: 10px;
  flex-wrap: wrap;
}

.pill{
  padding: 10px 12px;
  border-radius: 999px;
  background: rgba(45,108,223,.10);
  border: 1px solid rgba(45,108,223,.18);
  font-weight: 900;
}

.payBanner{
  margin: 18px auto 0 auto;
  width: min(1100px, 92vw);
  border-radius: 18px;
  padding: 14px 14px;
  border: 1px solid rgba(99,102,241,.35);
  background: rgba(99,102,241,.08);
  display:flex;
  gap:12px;
  align-items:center;
  justify-content:space-between;
}
.payBanner.hidden{ display:none; }

.payBanner strong{ font-weight:700; }
.payBanner .muted{ opacity:.9; }
.payBanner .payActions{ display:flex; gap:10px; flex-wrap:wrap; }

.payBanner{ margin: 10px 0 0 0; }
.payBanner.hidden{ display:none; }

.pwBar{
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  border-radius: 14px;
  padding: 8px 10px;
}

.pwToggle{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  background: transparent;
  border:0;
  color: inherit;
  padding:0;
  cursor:pointer;
}

.pwDot{
  width:10px; height:10px; border-radius:50%;
  background: rgba(255, 99, 99, .95);
  box-shadow: 0 0 0 3px rgba(255,99,99,.18);
  flex: 0 0 auto;
}

.pwText{ font-weight:700; font-size:13px; }

.pwChevron{
  font-size:12px;
  padding: 4px 10px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.03);
  flex: 0 0 auto;
}

.pwExpand{ margin-top:10px; display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.pwExpand.hidden{ display:none; }

.pwUnlock{
  text-decoration:none;
  font-weight:700;
  font-size:13px;
  padding: 8px 12px;
  border-radius: 12px;
  border: 1px solid rgba(45,108,223,.35);
  background: rgba(45,108,223,.16);
  color: inherit;
}
.pwUnlock:hover{ filter: brightness(1.05); }