:root{--bg: linear-gradient(135deg,#ffffff,#ffffff)}html,body,#app{height:100%;margin:0}body{font-family:system-ui,Segoe UI,Roboto,Arial;display:flex;align-items:center;justify-content:center;background:var(--bg);transition:background .8s ease}.card{background:#ffffffd9;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border-radius:12px;padding:20px;max-width:720px;width:90%;box-shadow:0 8px 30px #0000001f}h1{margin:0 0 8px}.question{font-size:1.1rem;margin:12px 0}.answers{display:grid;grid-template-columns:1fr;gap:10px}.answer{padding:12px 14px;border-radius:8px;border:1px solid rgba(0,0,0,.06);cursor:pointer;background:#fff;transition:transform .18s ease,box-shadow .18s ease}.answer:hover{transform:translateY(-4px);box-shadow:0 6px 18px #00000014}.footer{display:flex;align-items:center;justify-content:space-between;margin-top:16px}.progress-bars{display:flex;gap:8px;flex:1;margin-left:12px}.bar{flex:1;height:12px;border-radius:8px;background:#0000000f;overflow:hidden}.bar>i{display:block;height:100%;width:0%;transition:width .6s ease}.legend{display:flex;gap:8px}.badge{padding:6px 8px;border-radius:6px;font-size:.85rem}.center{display:flex;align-items:center}.result{font-weight:600;font-size:1.05rem}.small{font-size:.9rem;color:#555}.reset{background:#f3f3f3;padding:8px 12px;border-radius:8px;border:0;cursor:pointer}