:root { --bg:#f5f7ff; --card:#fff; --text:#1f2937; --primary:#4f46e5; --ok:#059669; }
*{box-sizing:border-box} body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,PingFang SC,Microsoft YaHei,sans-serif;background:var(--bg);color:var(--text)}
.app{max-width:760px;margin:20px auto;padding:12px}
.card{background:var(--card);border-radius:14px;padding:16px;margin-bottom:12px;box-shadow:0 4px 18px rgba(0,0,0,.06)}
h1{margin:0 0 8px} .footer{display:flex;justify-content:space-between}
.btn{border:none;background:var(--primary);color:#fff;padding:10px 16px;border-radius:10px;cursor:pointer}
.btn.secondary{background:#9ca3af}
.badge{display:inline-block;padding:4px 10px;border-radius:999px;background:#eef2ff;color:#3730a3;margin-right:8px;font-size:13px}
.opt{display:block;width:100%;text-align:left;padding:10px;border:1px solid #e5e7eb;border-radius:10px;margin:8px 0;background:#fff;cursor:pointer}
.opt.correct{border-color:var(--ok);background:#ecfdf5}
.opt.wrong{border-color:#dc2626;background:#fef2f2}
.input{width:100%;padding:10px;border:1px solid #d1d5db;border-radius:10px}
.small{font-size:13px;color:#6b7280}
.list li{margin:6px 0}
.success{color:var(--ok);font-weight:700}