:root{--ink:#0e2433;--muted:#5b7b99;--brand:#3a86ff;--bg:#f6fbff}
*{box-sizing:border-box}body{margin:0;font-family:Poppins,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:var(--ink);background:var(--bg)}
.container{max-width:1024px;margin:0 auto;padding:16px}
.app-header{position:sticky;top:0;background:#ffffffcc;backdrop-filter:blur(8px);border-bottom:1px solid #e6eef8}
.head-wrap{display:flex;align-items:center;justify-content:space-between;padding:12px 16px}
.brand{display:flex;gap:12px;align-items:center}
.brand img{width:44px;height:44px;border-radius:12px;background:#fff;padding:4px}
nav.top a{margin-left:8px;padding:6px 10px;border:1px solid #d1e4fb;border-radius:10px;font-weight:700;background:#fff}
.panel{background:#fff;border:1px solid #e6eef8;border-radius:16px;box-shadow:0 8px 18px rgba(9,30,66,.08);padding:16px;margin:16px 0}
.input-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
button,select,input{border:1px solid #cfe2f7;background:#fff;padding:10px 12px;border-radius:12px;font-weight:600}
button.accent{background:var(--brand);color:#001b2e;border-color:var(--brand)}
.actions{display:flex;gap:10px;flex-wrap:wrap}
.list{display:grid;gap:8px}
.card{border:1px dashed #d7e7fb;border-radius:14px;padding:12px;background:#fff}
.tag{display:inline-block;border:1px solid #d1e4fb;border-radius:999px;padding:4px 8px;font-size:12px;background:#fff;margin-right:6px}
#options-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
#options-list li{border:1px solid #d3e6fb;border-radius:12px;padding:12px;background:#fff;display:flex;justify-content:space-between;align-items:center}
#options-list li.correct{background:#e7f7ed;border-color:#b6ebc8}
#options-list li.incorrect{background:#fdecec;border-color:#f5b7b7}
.explanation{margin-top:10px;padding:10px;border-left:4px solid #3a86ff;background:#eef6ff;border-radius:8px}
.footer{color:#5b7b99;text-align:center;padding:20px}