html { background: #1E1F24; color: #ECEDF2; -webkit-text-size-adjust: 100%; }
body { overflow-x: hidden; }
::selection { background: #8FB4FF; color: #1E1F24; }
.grad { background: linear-gradient(92deg, #8FB4FF 0%, #C7A6FF 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; border-radius: 999px; font-weight: 600; transition: transform .15s, background .15s, border-color .15s, opacity .15s; }
.btn:active { transform: scale(.98); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-acc { background: #ECEDF2; color: #1E1F24; }
.btn-acc:hover { background: #fff; }
.btn-line { border: 1px solid #363741; color: #ECEDF2; }
.btn-line:hover { border-color: #6E7080; }
.card { background: #26272D; border: 1px solid #363741; border-radius: 1.25rem; }
.chip { border: 1px solid #363741; border-radius: 999px; padding: .35rem .8rem; font-size: 13px; color: #A3A5B1; transition: color .15s, border-color .15s; white-space: nowrap; }
.chip:hover { color: #ECEDF2; border-color: #6E7080; }
.chip[aria-pressed="true"] { color: #1E1F24; background: #ECEDF2; border-color: #ECEDF2; }
.field { width: 100%; background: #1E1F24; border: 1px solid #363741; border-radius: .75rem; padding: .55rem .75rem; font-size: 14px; color: #ECEDF2; outline: none; }
.field:focus { border-color: #8FB4FF; }
.bar { height: 6px; border-radius: 99px; background: #363741; overflow: hidden; }
.bar > i { display: block; height: 100%; background: linear-gradient(90deg, #8FB4FF, #C7A6FF); border-radius: 99px; }
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }
input[type=range] { accent-color: #8FB4FF; }
.no-scrollbar::-webkit-scrollbar { display: none; } .no-scrollbar { scrollbar-width: none; }