:root{--b:#2246A3;--l:#DCE6F1;--g:#2e7d32;--r:#c62828;--s:#f7f9fc;--rad:14px}
*{box-sizing:border-box} body{margin:0;font-family:Segoe UI,system-ui,Roboto,Arial;background:var(--s);color:#111}
.header{background:var(--b);color:#fff;padding:22px 16px}.header h1{margin:0;font-size:22px}
.container{max-width:980px;margin:auto;padding:18px}
.card{background:#fff;border-radius:var(--rad);border:1px solid var(--l);box-shadow:0 6px 18px rgba(0,0,0,.06);padding:16px;margin:14px 0}
h2{margin:12px 0}.badge{display:inline-block;padding:6px 10px;border-radius:999px;background:#eef3ff;border:1px solid var(--l);color:#2246A3;font-weight:700}
.table{width:100%;border-collapse:separate;border-spacing:0;overflow:hidden;border-radius:12px;border:1px solid var(--l)}
.table th,.table td{padding:12px;border-top:1px solid var(--l);text-align:left}
.table thead th{background:var(--l);border-top:0;text-align:center;font-weight:700}
.table tbody tr:nth-child(even){background:#fafcff}
.input{width:100%;padding:10px 12px;border:1px solid #cfd7e3;border-radius:10px;font-weight:600}
.input[readonly]{background:#f2f4f8;font-weight:700}
.btn{appearance:none;border:0;background:#2246A3;color:#fff;padding:12px 16px;border-radius:12px;cursor:pointer;font-weight:700}
.btn:disabled{opacity:.6;cursor:not-allowed}
.note{font-size:.94rem;color:#223;opacity:.8}
.pill{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:999px;color:#fff;font-weight:700}
.pill.gold{background:linear-gradient(90deg,#b8860b,#ffd700)}
.pill.silver{background:linear-gradient(90deg,#8a8a8a,#c0c0c0)}
.pill.bronze{background:linear-gradient(90deg,#8b4513,#cd7f32)}
.small{font-size:.95rem;color:#333} kbd{background:#eef3ff;border:1px solid #cbd7f2;border-bottom-color:#b0c4f9;border-radius:6px;padding:2px 6px}
.score{font-weight:800} footer{opacity:.8;margin:12px 0 24px}