:root{
  --bg:#fbf6ea;
  --card:#ffffff;
  --text:#1f2937;
  --muted:#6b7280;

  --purple:#7c3aed;
  --purple2:#a78bfa;

  --teal:#0ea5a4;
  --teal2:#5eead4;

  --orange:#f59e0b;
  --orange2:#fdba74;

  --border:#e5e7eb;
  --shadow: 0 18px 40px rgba(31,41,55,.10);
  --shadow2: 0 10px 22px rgba(31,41,55,.08);

  --r:28px;
  --r2:22px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: ui-rounded, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  background: var(--bg);
  color: var(--text);
}

#fxCanvas{
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 50;
}

.main{ padding: 18px 14px 44px; max-width: 980px; margin: 0 auto; }

.screen{ display:none; }
.screen.active{ display:block; }

/* topbar */
.topbar{
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(251,246,234,.85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(229,231,235,.75);
  display:flex;
  align-items:center;
  gap: 12px;
  padding: 12px 14px;
}
.topbar.hidden{ display:none; }
.iconBtn{
  border:none;
  background: #fff;
  border-radius: 999px;
  width: 42px;
  height: 42px;
  display:grid;
  place-items:center;
  box-shadow: var(--shadow2);
  cursor:pointer;
}
.iconBtn .icon{ font-size: 18px; }
.topTitle{
  font-weight: 900;
  letter-spacing: .2px;
  font-size: 26px;
  color: var(--purple);
  line-height: 1;
}
.topRight{ margin-left:auto; display:flex; gap: 8px; align-items:center; }

/* home */
.homeWrap{
  min-height: calc(100vh - 80px);
  display:flex;
  flex-direction: column;
  align-items:center;
  justify-content:flex-start;
  gap: 10px;
  padding-top: 22px;
}
.avatar{
  width: 88px;
  height: 88px;
  border-radius: 22px;
  background: rgba(124,58,237,.10);
  display:grid;
  place-items:center;
  font-size: 44px;
  box-shadow: var(--shadow2);
}
.homeTitle{
  margin: 10px 0 0;
  font-size: clamp(38px, 5vw, 56px);
  line-height: 1;
  color: var(--purple);
  font-weight: 1000;
  letter-spacing: .5px;
  text-align:center;
}
.homeSub{
  margin: 4px 0 18px;
  font-size: 18px;
  color: #1f3b74;
  text-align:center;
}
.homeCards{ width:min(560px, 100%); display:flex; flex-direction:column; gap: 14px; }

.bigCard{
  width:100%;
  border:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap: 14px;
  padding: 18px 18px;
  border-radius: var(--r);
  background: #fff;
  box-shadow: var(--shadow);
  text-align:left;
  transition: transform .08s ease, box-shadow .08s ease;
}
.bigCard:active{ transform: translateY(1px); box-shadow: var(--shadow2); }
.bigCardIcon{
  width: 58px; height: 58px; border-radius: 999px;
  display:grid; place-items:center;
  font-size: 26px;
  background: rgba(124,58,237,.12);
  color: var(--purple);
}
.bigCardPrimary{ outline: 3px solid rgba(124,58,237,.25); }
.bigCardPrimary .bigCardIcon{ background: rgba(124,58,237,.14); }
.bigCardTeal{ outline: 3px solid rgba(14,165,164,.25); }
.bigCardTeal .bigCardIcon{ background: rgba(14,165,164,.14); color: var(--teal); }

.bigCardTitle{ font-weight: 900; font-size: 26px; }
.bigCardSub{ color: var(--muted); margin-top: 2px; font-weight: 650; }

.row2{ display:grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.smallCard{
  border:none;
  cursor:pointer;
  background:#fff;
  border-radius: var(--r);
  padding: 16px 14px;
  box-shadow: var(--shadow2);
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  transition: transform .08s ease;
}
.smallCard:active{ transform: translateY(1px); }
.smallCardIcon{ font-size: 20px; }
.smallCardTitle{ font-weight: 900; font-size: 18px; }
.smallCardOrange{ outline: 3px solid rgba(245,158,11,.25); }
.smallCardOrange .smallCardIcon{ color: var(--orange); }

.homeBottom{ margin-top: 8px; }
.tinyNote{ font-size: 13px; color: var(--muted); }

/* generic blocks */
.panel{ width: min(720px, 100%); margin: 10px auto 0; }
.panel.wide{ width: min(980px, 100%); }
.panelTitle{
  margin: 12px 0 14px;
  font-size: 40px;
  color: var(--purple);
  font-weight: 1000;
  letter-spacing: .2px;
}
.card{
  background: #fff;
  border-radius: var(--r);
  box-shadow: var(--shadow);
  padding: 18px;
}
.hint{ color: var(--muted); font-size: 13px; margin-top: 8px; }
.muted{ color: var(--muted); }

.divider{ height: 1px; background: rgba(229,231,235,.75); margin: 14px 0; }

.row{ display:flex; align-items:center; gap: 10px; }
.row.wrap{ flex-wrap:wrap; }
.grid2{ display:grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 520px){ .grid2{ grid-template-columns: 1fr; } .row2{ grid-template-columns: 1fr; } }

.field label{ display:block; font-weight: 850; margin-bottom: 6px; }
.field input{
  width: 100%;
  border: 2px solid rgba(229,231,235,.9);
  border-radius: 18px;
  padding: 14px 14px;
  font-size: 18px;
  outline: none;
}
.field input:focus{ border-color: rgba(124,58,237,.45); box-shadow: 0 0 0 4px rgba(124,58,237,.12); }

/* buttons */
.btnPrimary, .btnSecondary, .btnGhost, .btnOrange{
  border:none;
  border-radius: 18px;
  padding: 12px 14px;
  font-weight: 900;
  font-size: 15px;
  cursor:pointer;
}
.btnPrimary{ background: var(--purple); color: #fff; box-shadow: var(--shadow2); }
.btnSecondary{ background: rgba(124,58,237,.10); color: var(--purple); }
.btnGhost{ background: transparent; border: 2px solid rgba(229,231,235,.9); color: var(--text); }
.btnOrange{ background: var(--orange); color:#111827; border-radius: 999px; padding: 10px 14px; font-weight: 1000; }
.btnPrimary:active,.btnSecondary:active,.btnGhost:active,.btnOrange:active{ transform: translateY(1px); }

.fileBtn{
  position: relative;
  overflow:hidden;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 12px 14px;
  border-radius: 18px;
  background: rgba(31,41,55,.05);
  border: 2px dashed rgba(229,231,235,.95);
  font-weight: 900;
  cursor:pointer;
}
.fileBtn input{ position:absolute; inset:0; opacity:0; cursor:pointer; }

/* quiz */
.quizWrap{ width:min(820px, 100%); margin: 10px auto 0; display:flex; flex-direction:column; gap: 12px; }
.quizMeta{ display:flex; gap: 10px; flex-wrap:wrap; }
.pill{
  background:#fff;
  border-radius: 999px;
  padding: 10px 12px;
  box-shadow: var(--shadow2);
  font-weight: 900;
}
.quizCard{
  background:#fff;
  border-radius: var(--r);
  box-shadow: var(--shadow);
  padding: 18px;
}
.qHeader{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.qTitle{ font-weight: 1000; font-size: 22px; color: var(--purple); }
.qTimer{ display:flex; align-items:center; gap:10px; }
.qTimerBar{ width: 150px; height: 10px; background: rgba(229,231,235,.9); border-radius: 999px; overflow:hidden; }
#qTimerFill{ height:100%; width:100%; background: rgba(124,58,237,.65); }
.qTimerText{ font-weight: 1000; min-width: 28px; text-align:right; }

.prompt{ font-size: 20px; font-weight: 900; margin: 16px 0 14px; line-height: 1.25; }
.choices{ display:grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 640px){ .choices{ grid-template-columns: 1fr; } }
.choiceBtn{
  border:none;
  border-radius: 18px;
  padding: 14px 14px;
  text-align:left;
  cursor:pointer;
  background: rgba(124,58,237,.08);
  font-weight: 900;
  font-size: 16px;
}
.choiceBtn:hover{ background: rgba(124,58,237,.12); }
.choiceBtn.correct{ background: rgba(34,197,94,.14); }
.choiceBtn.wrong{ background: rgba(239,68,68,.14); }
.choiceBtn:disabled{ opacity: .85; cursor: default; }

.feedback{ margin-top: 12px; min-height: 24px; font-weight: 900; }
.actionsRow{ display:flex; justify-content:flex-end; gap: 10px; margin-top: 14px; }

/* result */
.resultWrap{ width:min(820px, 100%); margin: 10px auto 0; }
.resultGrid{ display:grid; grid-template-columns: repeat(4,1fr); gap: 10px; margin-top: 12px; }
@media (max-width: 700px){ .resultGrid{ grid-template-columns: repeat(2,1fr); } }
.stat{ background: rgba(31,41,55,.03); border-radius: 18px; padding: 12px; }
.statLabel{ color: var(--muted); font-weight: 850; font-size: 13px; }
.statValue{ font-size: 30px; font-weight: 1000; margin-top: 4px; color: var(--purple); }
.review{ margin-top: 16px; }
.reviewList{ display:flex; flex-direction:column; gap: 10px; margin-top: 10px; }
.reviewItem{ background: rgba(31,41,55,.03); border-radius: 18px; padding: 12px; }
.reviewQ{ font-weight: 1000; }
.reviewA{ color: var(--muted); margin-top: 4px; }

/* flashcards */
.flashcard{
  width: 100%;
  border: none;
  background: #fff;
  border-radius: var(--r);
  box-shadow: var(--shadow2);
  padding: 22px 16px;
  cursor:pointer;
  text-align:center;
  min-height: 220px;
  position: relative;
}
.flashTerm{ font-size: 34px; font-weight: 1000; color: var(--purple); }
.flashDesc{ margin-top: 10px; font-size: 18px; font-weight: 800; color: #111827; display:none; }
.flashcard.flipped .flashDesc{ display:block; }
.flashcard.flipped .flashTerm{ font-size: 26px; }
.flashHint{ position:absolute; left:0; right:0; bottom: 14px; font-size: 12px; color: var(--muted); font-weight: 700; }

/* stats */
.statsTop{ display:grid; grid-template-columns: 1fr 1fr 1.3fr; gap: 14px; }
@media (max-width: 860px){ .statsTop{ grid-template-columns: 1fr; } }
.statCard{
  background:#fff;
  border-radius: var(--r);
  box-shadow: var(--shadow);
  padding: 16px;
  text-align:center;
  position: relative;
}
.borderPurple{ outline: 3px solid rgba(124,58,237,.25); }
.borderTeal{ outline: 3px solid rgba(14,165,164,.25); }
.borderOrange{ outline: 3px solid rgba(245,158,11,.25); }
.statIcon{ font-size: 26px; margin-bottom: 10px; }
.statLabel{ font-weight: 950; letter-spacing: .08em; font-size: 12px; color: #0f172a; opacity: .85; }
.statBig{ font-weight: 1100; font-size: 54px; margin-top: 8px; color:#0f172a; }
.statsGrid{ display:grid; grid-template-columns: 1.25fr 1fr; gap: 14px; margin-top: 14px; }
@media (max-width: 860px){ .statsGrid{ grid-template-columns: 1fr; } }
.h3{ margin: 0 0 10px; font-size: 22px; font-weight: 1000; color: #0f172a; }

.progRow{ display:grid; grid-template-columns: 1fr 1.6fr 60px; gap: 10px; align-items:center; margin: 12px 0; }
.progLabel{ display:flex; justify-content:space-between; gap: 10px; font-weight: 950; }
.progBar{ height: 12px; background: rgba(229,231,235,.9); border-radius: 999px; overflow:hidden; }
.progFill{ height:100%; width:0%; background: rgba(124,58,237,.65); }
.progPct{ text-align:right; font-weight: 950; color: #0f172a; }

.hardList{ display:flex; flex-direction:column; gap: 10px; }
.hardItem{
  background: rgba(31,41,55,.03);
  border-radius: 18px;
  padding: 12px;
  display:flex;
  justify-content:space-between;
  gap: 10px;
  align-items:center;
}
.hardLeft{ display:flex; flex-direction:column; gap: 2px; }
.hardTerm{ font-weight: 1000; }
.hardDesc{ color: var(--muted); font-weight: 750; font-size: 13px; }
.hardRight{ text-align:right; font-weight: 1000; color: #ef4444; }

/* editor */
.tableWrap{ overflow:auto; border-radius: 18px; border: 1px solid rgba(229,231,235,.9); }
.tbl{ width:100%; border-collapse: separate; border-spacing: 0; }
.tbl th, .tbl td{ padding: 10px; border-bottom: 1px solid rgba(229,231,235,.9); vertical-align:top; }
.tbl th{ text-align:left; font-size: 13px; color: var(--muted); background: rgba(31,41,55,.03); position: sticky; top: 0; }
.tbl td input, .tbl td textarea, .tbl td select{
  width: 100%;
  border: 1px solid rgba(229,231,235,.9);
  border-radius: 12px;
  padding: 10px;
  font: inherit;
}
.tbl td textarea{ min-height: 64px; resize: vertical; }
.delBtn{
  border:none; cursor:pointer;
  background: rgba(239,68,68,.12);
  color: #ef4444;
  border-radius: 12px;
  padding: 10px 10px;
  font-weight: 1000;
}
.editMeta{ margin-bottom: 10px; color: var(--muted); font-size: 13px; }