* { box-sizing: border-box; }
html { font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
body { margin: 0; min-height: 100vh; background: #020617; color: #f1f5f9; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button { cursor: pointer; }
main { min-height: 100vh; }
.grid { display: grid; }
.flex { display: flex; }
.place-items-center { place-items: center; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.flex-col { flex-direction: column; }
.gap-3 { gap: .75rem; }
.gap-4 { gap: 1rem; }
.space-y-5 > * + * { margin-top: 1.25rem; }
.mx-auto { margin-left: auto; margin-right: auto; }
.mt-2 { margin-top: .5rem; }
.mt-5 { margin-top: 1.25rem; }
.mt-6 { margin-top: 1.5rem; }
.mt-10 { margin-top: 2.5rem; }
.mt-12 { margin-top: 3rem; }
.mb-2 { margin-bottom: .5rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-8 { margin-bottom: 2rem; }
.block { display: block; }
.inline-flex { display: inline-flex; }
.w-full { width: 100%; }
.max-w-md { max-width: 28rem; }
.max-w-xl { max-width: 36rem; }
.max-w-3xl { max-width: 48rem; }
.max-w-6xl { max-width: 72rem; }
.min-h-screen { min-height: 100vh; }
.px-3 { padding-left: .75rem; padding-right: .75rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.px-7 { padding-left: 1.75rem; padding-right: 1.75rem; }
.py-1 { padding-top: .25rem; padding-bottom: .25rem; }
.py-2 { padding-top: .5rem; padding-bottom: .5rem; }
.py-3 { padding-top: .75rem; padding-bottom: .75rem; }
.py-10 { padding-top: 2.5rem; padding-bottom: 2.5rem; }
.py-12 { padding-top: 3rem; padding-bottom: 3rem; }
.py-16 { padding-top: 4rem; padding-bottom: 4rem; }
.p-8 { padding: 2rem; }
.rounded-xl { border-radius: .75rem; }
.rounded-3xl { border-radius: 1.5rem; }
.rounded-full { border-radius: 9999px; }
.border { border: 1px solid rgba(255,255,255,.12); }
.border-white\/10, .border-white\/15 { border: 1px solid rgba(255,255,255,.12); }
.bg-white\/\[0\.05\], .bg-white\/\[0\.06\] { background: rgba(255,255,255,.055); }
.bg-slate-900\/80 { background: rgba(15,23,42,.8); }
.bg-cyan-400 { background: #22d3ee; }
.bg-cyan-400\/10 { background: rgba(34,211,238,.1); }
.text-center { text-align: center; }
.text-xs { font-size: .75rem; }
.text-sm { font-size: .875rem; }
.text-lg { font-size: 1.125rem; }
.text-2xl { font-size: 1.5rem; }
.text-3xl { font-size: 1.875rem; }
.text-5xl { font-size: 3rem; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.font-black { font-weight: 900; }
.uppercase { text-transform: uppercase; }
.tracking-widest { letter-spacing: .1em; }
.text-slate-950 { color: #020617; }
.text-slate-400 { color: #94a3b8; }
.text-slate-300 { color: #cbd5e1; }
.text-cyan-300 { color: #67e8f9; }
.text-rose-400 { color: #fb7185; }
input[type="text"], input[type="email"], input[type="password"], select, textarea {
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(15,23,42,.8);
    color: #f8fafc;
    outline: none;
}
input:focus, select:focus, textarea:focus { border-color: #22d3ee; box-shadow: 0 0 0 3px rgba(34,211,238,.16); }
.password-toggle-field {
    position: relative;
}
.password-toggle-field > input {
    padding-right: 3rem;
}
.password-toggle-button {
    position: absolute;
    top: 50%;
    right: .5rem;
    width: 2.25rem;
    height: 2.25rem;
    display: grid;
    place-items: center;
    color: #94a3b8;
    background: transparent;
    border: 0;
    border-radius: .75rem;
    transform: translateY(-50%);
    cursor: pointer;
}
.password-toggle-button:hover,
.password-toggle-button:focus-visible {
    color: #67e8f9;
    background: rgba(34,211,238,.1);
    outline: none;
}
.shadow-2xl { box-shadow: 0 25px 60px rgba(0,0,0,.35); }
.backdrop-blur { backdrop-filter: blur(16px); }
.transition { transition: .2s ease; }
.bg-cyan-400:hover { background: #67e8f9; }
.border:hover { background: rgba(255,255,255,.08); }
@media (min-width: 640px) {
    .sm\:flex-row { flex-direction: row; }
    .sm\:text-7xl { font-size: 4.5rem; }
}
label,
button,
.btn,
[role="button"],
input[type="button"],
input[type="submit"],
input[type="reset"] {
    text-transform: capitalize;
}
