:root{--bg:#F8FAFC;--surface:#fff;--surface2:#F1F5F9;--ink:#0F172A;--ink2:#475569;--muted:#64748B;--line:#E2E8F0;--ring:#4F46E5;--warn:#B45309;--g:linear-gradient(135deg,#2E1065 0%,#4F46E5 50%,#2563EB 100%)}
.dark{--bg:#080B16;--surface:#111827;--surface2:#172033;--ink:#F8FAFC;--ink2:#CBD5E1;--muted:#94A3B8;--line:#273449;--ring:#60A5FA;--warn:#FBBF24;color-scheme:dark}
html{scroll-behavior:smooth;scroll-padding-top:5rem}
body{background:var(--bg);color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;-webkit-font-smoothing:antialiased;transition:background-color .25s,color .25s}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--ring);outline-offset:2px;border-radius:6px}
.ic{display:block;flex:none;width:1.25rem;height:1.25rem;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:44px;padding:.6rem 1.15rem;border:1px solid transparent;border-radius:.75rem;font-size:.9375rem;font-weight:600;cursor:pointer;transition:transform .15s,box-shadow .2s,background-color .2s,border-color .2s}
.btn:disabled{opacity:.6;cursor:not-allowed}
.btn-primary{color:#fff;background:var(--g);box-shadow:0 8px 22px -10px rgba(79,70,229,.8)}
.btn-primary:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 12px 26px -10px rgba(79,70,229,.9)}
.btn-ghost{color:var(--ink);background:var(--surface);border-color:var(--line)}
.btn-ghost:hover{background:var(--surface2)}
.btn-light{color:#2E1065;background:#fff}.btn-light:hover{background:#EEF2FF}
.btn-icon{width:44px;padding:0}
.card{padding:1.25rem;background:var(--surface);border:1px solid var(--line);border-radius:1rem;transition:transform .2s,box-shadow .2s,background-color .25s,border-color .25s}
.card-hover:hover{transform:translateY(-3px);box-shadow:0 16px 32px -20px rgba(46,16,101,.5)}
.field{width:100%;min-height:44px;padding:.6rem .8rem;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:.75rem;transition:border-color .2s,background-color .25s}
.field::placeholder{color:var(--muted)}
.field:focus{border-color:var(--ring);outline:2px solid var(--ring);outline-offset:0}
textarea.field{resize:vertical;line-height:1.6}
input[type=range]{width:100%;min-height:44px;accent-color:var(--ring)}
.lbl{display:block;margin-bottom:.375rem;font-size:.875rem;font-weight:600}
.h2{font-size:clamp(1.6rem,3.2vw,2.25rem);font-weight:800;letter-spacing:-.02em;line-height:1.15}
.h3{font-size:1.125rem;font-weight:700;line-height:1.3}
.sub{max-width:40rem;margin-top:.5rem;color:var(--ink2)}
.chip{display:inline-flex;align-items:center;padding:.2rem .7rem;font-size:.75rem;font-weight:600;color:var(--ink2);background:var(--surface);border:1px solid var(--line);border-radius:9999px}
.chip.on{color:#fff;background:var(--g);border-color:transparent}
.icon-box{display:grid;place-items:center;width:44px;height:44px;color:#fff;background:var(--g);border-radius:.75rem}
.note{padding:.7rem 1rem;font-size:.875rem;background:var(--surface2);border:1px solid var(--line);border-left:4px solid var(--ring);border-radius:.75rem}
.note.err{border-left-color:var(--warn)}
.eye{position:absolute;inset:0 0 0 auto;display:grid;place-items:center;width:44px;color:var(--muted);border-radius:0 .75rem .75rem 0;cursor:pointer}
.eye:hover{color:var(--ink)}
.spin{width:1rem;height:1rem;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:rot .7s linear infinite}
.wave{display:flex;align-items:center;gap:3px;height:56px}.wave i{flex:1;border-radius:3px;background:linear-gradient(180deg,#60A5FA,#4F46E5)}
.glow{background:radial-gradient(60% 55% at 75% 20%,rgba(79,70,229,.16),transparent 70%)}
.auth-bg{background:radial-gradient(70% 55% at 50% 0,rgba(79,70,229,.18),transparent 70%)}
.up{animation:up .5s ease both}
@keyframes up{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes rot{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}