*{box-sizing:border-box}body{margin:0;font-family:system-ui,Arial,sans-serif;background:#f1f5f9;color:#0f172a;padding-bottom:70px}
header{background:#2563eb;color:#fff;padding:14px 16px;display:flex;justify-content:space-between;align-items:center;position:sticky;top:0}header h1{font-size:1.3rem;margin:0}
main{padding:16px;max-width:600px;margin:auto}.card{background:#fff;border-radius:14px;padding:14px;margin-bottom:12px;box-shadow:0 1px 3px #0002}
.unit{display:flex;align-items:center;gap:12px;cursor:pointer}.unit .e{font-size:2rem}.unit h3{margin:0}.unit small{color:#64748b}
.bar{height:8px;background:#e2e8f0;border-radius:4px;margin-top:6px;overflow:hidden}.bar i{display:block;height:100%;background:#22c55e}
.word{display:flex;justify-content:space-between;align-items:center}.en{font-size:1.15rem;font-weight:700}.es{color:#334155}.pr{color:#2563eb;font-size:.9rem}
button{font:inherit}.btn{background:#2563eb;color:#fff;border:0;border-radius:10px;padding:12px 16px;width:100%;font-weight:700;margin-top:8px}
.sec{background:#e2e8f0;color:#0f172a}.spk{background:#dbeafe;border:0;border-radius:50%;width:44px;height:44px;font-size:1.2rem}
.opt{display:block;width:100%;text-align:left;background:#fff;border:2px solid #cbd5e1;border-radius:10px;padding:12px;margin:8px 0}
.ok{border-color:#22c55e;background:#dcfce7}.bad{border-color:#ef4444;background:#fee2e2}
nav{position:fixed;bottom:0;left:0;right:0;display:flex;background:#fff;border-top:1px solid #e2e8f0}nav button{flex:1;padding:14px;border:0;background:none;font-weight:600}
.big{font-size:2.2rem;text-align:center;margin:6px 0}
.opt:disabled{color:#0f172a}.spk{display:inline-flex;align-items:center;justify-content:center}