html { scroll-behavior: smooth; }
body { -webkit-tap-highlight-color: transparent; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:.5rem; font-weight:600; border-radius:.75rem; transition: background-color .15s, color .15s, border-color .15s, opacity .15s; white-space:nowrap; }
.btn:disabled { opacity:.55; cursor:not-allowed; }
.input { width:100%; border:1px solid #e4e4e7; background:#fff; border-radius:.75rem; padding:.65rem .85rem; font-size:.95rem; outline:none; transition:border-color .15s; }
.input:focus { border-color: var(--accent, #6d28d9); }
.label { display:block; font-size:.8rem; font-weight:600; color:#52525b; margin-bottom:.35rem; }
.card { background:#fff; border:1px solid #e4e4e7; border-radius:1rem; }
.fade-in { animation: fade .25s ease; }
@keyframes fade { from { opacity:0; transform: translateY(4px);} to { opacity:1; transform:none; } }
.spinner { width:20px; height:20px; border:2px solid #e4e4e7; border-top-color: var(--accent,#6d28d9); border-radius:50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.line-clamp-2 { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.chip-active { background:#18181b; color:#fff; }
.toggle { width:40px; height:24px; border-radius:999px; background:#d4d4d8; position:relative; transition: background .15s; flex-shrink:0; }
.toggle::after { content:''; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:#fff; transition: transform .15s; }
.toggle.on { background: var(--accent,#6d28d9); }
.toggle.on::after { transform: translateX(16px); }
.rank-1 { background:#fef3c7; color:#92400e; }
.rank-2 { background:#f4f4f5; color:#3f3f46; }
.rank-3 { background:#ffedd5; color:#9a3412; }