*{box-sizing:border-box;margin:0;padding:0}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:#0e1525;color:#e7eef7}
header{padding:16px 24px;border-bottom:1px solid #22314d;background:#0b1220;position:sticky;top:0}
main{max-width:1100px;margin:24px auto;padding:0 16px}
.controls{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:16px}
.controls select,.controls button{padding:10px 12px;border:1px solid #2b3a56;background:#101a2c;color:#e7eef7;border-radius:8px}
.controls button{cursor:pointer;border:1px solid #3c7cff}
.controls button:hover{background:#14233d}
.pity{margin-left:8px;opacity:.9}
.animation{height:120px;display:grid;place-items:center;margin:10px 0 16px}
.spinner{width:0;height:0;border-left:30px solid transparent;border-right:30px solid transparent;border-bottom:60px solid #3c7cff;filter:drop-shadow(0 0 12px rgba(60,124,255,.5));opacity:0;transform:translateY(-10px);transition:all .25s ease}
.spinner.spin{opacity:1;animation:spin 1s ease-in-out 0s 3 normal}
@keyframes spin{0%{transform:rotate(0) scale(1)}50%{transform:rotate(180deg) scale(1.05)}100%{transform:rotate(360deg) scale(1)}}
.results{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px}
.card{border:1px solid #23344f;background:#0f1a2d;border-radius:10px;padding:12px}
.card .name{font-weight:700;margin-bottom:4px}
.badge{display:inline-block;padding:3px 8px;border-radius:999px;font-size:12px;margin-top:4px}
.badge.ssr{background:#ffc4001a;border:1px solid #ffd24a;color:#ffe088}
.badge.sr{background:#5e3faf1a;border:1px solid #7a5cff;color:#c8c2ff}
.badge.s{background:#3aa05b1a;border:1px solid #49c06f;color:#b9f1cb}
.badge.a{background:#007dff1a;border:1px solid #3c7cff;color:#b6d1ff}
.badge.b{background:#a78bfa1a;border:1px solid #a78bfa;color:#e6deff}
.badge.c{background:#22314d;border:1px solid #2c415f}
footer{opacity:.7;text-align:center;padding:24px}