:root{
  --bg:#f6f8fb;
  --card:#ffffff;
  --accent:#1463ff;
  --accent-soft:#e6efff;
  --good:#19a974;
  --bad:#ff4d4f;
  --ink:#1f2937;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Noto Sans",sans-serif}
.container{max-width:1100px;margin:0 auto;padding:24px}
.header{display:flex;gap:16px;align-items:center;justify-content:space-between;margin-bottom:16px}
.brand{display:flex;gap:12px;align-items:center}
.brand .logo{width:40px;height:40px}
.brand h1{font-size:22px;margin:0}
.top-actions{display:flex;gap:8px;align-items:center}
button, .btn{
  appearance:none;border:none;background:var(--accent);color:#fff;border-radius:12px;
  padding:10px 14px;cursor:pointer;font-weight:600;box-shadow:0 6px 14px rgba(20,99,255,.18);
}
button.secondary,.btn.secondary{background:#eef3ff;color:#2043a6;box-shadow:none}
button.ghost{background:transparent;color:var(--accent);box-shadow:none}
.score-pill{background:var(--accent-soft);color:var(--accent);padding:8px 12px;border-radius:999px;font-weight:700}
.search{flex:1;display:flex;gap:8px}
.search input{flex:1;padding:10px 12px;border-radius:12px;border:1px solid #dbe3f4;background:#fff}
.tabs{display:flex;gap:8px;margin:12px 0 16px;flex-wrap:wrap}
.tab{padding:8px 12px;border-radius:10px;background:#eef3ff;color:#2043a6;font-weight:600;text-decoration:none}
.tab.active{background:var(--accent);color:#fff}
.grid{display:grid;grid-template-columns:1fr;gap:16px}
@media (min-width:900px){.grid{grid-template-columns:1.1fr .9fr}}
.card{background:var(--card);border-radius:16px;padding:16px;box-shadow:0 6px 16px rgba(0,0,0,.06)}
.card h2{margin:.2rem 0 0.6rem;font-size:20px}
.card h3{margin:.2rem 0 0.4rem;font-size:18px}
.rule{background:#f9fbff;border:1px solid #e6efff;border-radius:12px;padding:12px;margin:10px 0}
.exercise{border:1px dashed #e5ebf7;border-radius:12px;padding:12px;margin:12px 0}
.exercise.correct{border-color:#b6f2d3;background:#f2fff9}
.exercise.wrong{border-color:#ffd3d3;background:#fff7f7}
.exercise .head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.exercise .choices{display:flex;flex-wrap:wrap;gap:8px}
/* HOTFIX: Ensure choices always use dark text on light backgrounds */
.choice{
  padding:8px 10px;border:1px solid #dbe3f4;border-radius:10px;background:#fff;cursor:pointer;
  color: var(--ink) !important;
}
.choice.selected{border-color:var(--accent);background:var(--accent-soft);color: var(--ink) !important;}
.choice.correct{border-color:var(--good);background:#eafff6;color: var(--ink) !important;}
.choice.wrong{border-color:var(--bad);background:#fff0f0;color: var(--ink) !important;}
.choice:hover{background:#f7faff;border-color:#c7d2fe}
.choice:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.message{font-weight:700;margin-top:8px}
.footer-actions{display:flex;gap:8px;flex-wrap:wrap}
kbd{background:#f3f4f6;padding:2px 6px;border-radius:6px;border:1px solid #e5e7eb}
.whiteboard body{font-size:22px}
.whiteboard .card{padding:22px}
.whiteboard .choice{padding:14px;font-weight:600}
.badge{display:inline-flex;gap:6px;align-items:center;padding:6px 8px;border-radius:999px;background:#f4f8ff;border:1px solid #e6efff;font-size:12px}
hr.sep{border:0;border-top:1px solid #e5ebf7;margin:16px 0}
.hidden{display:none}
.flex{display:flex;gap:10px;align-items:center}
ul.clean{margin:8px 0 0 18px}
mark{background: #fff1a8;padding:2px 4px;border-radius:4px}
.draggable{display:inline-block;padding:6px 10px;background:#fff;border:1px solid #dbe3f4;border-radius:8px;margin:4px;cursor:grab;color:var(--ink)}
.dropzone{min-height:48px;border:2px dashed #c7d2fe;border-radius:12px;padding:8px}
.table{width:100%;border-collapse:collapse}
.table th,.table td{border-bottom:1px solid #eef2f7;padding:8px;text-align:left}
.small{font-size:13px;color:#6b7280}
.toast{position:fixed;right:12px;bottom:12px;background:#111827;color:#fff;padding:12px 14px;border-radius:12px;box-shadow:0 8px 22px rgba(0,0,0,.25);opacity:0;transform:translateY(10px);transition:all .25s}
.toast.show{opacity:1;transform:translateY(0)}