* {
    box-sizing: border-box;
}

body {
    font-family: 'DM Sans', sans-serif;
    background-color: #080a0f;
    overflow: hidden;
}
html, body {
    height: auto;
    overflow-x: hidden;
}

/* Grid overlay */
.grid-bg {
    background-image: linear-gradient(rgba(79,141,255,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(79,141,255,0.04) 1px, transparent 1px);
    background-size: 48px 48px;
}

/* Geometric ring */
.ring {
    border: 1px solid rgba(79,141,255,0.12);
    border-radius: 50%;
}

/* Input focus ring */
.field:focus-within label {
    color: #4f8dff;
}

.field input:focus {
    border-color: #4f8dff;
    box-shadow: 0 0 0 3px rgba(79,141,255,0.15);
}

/* Shimmer on button */
.btn-primary::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.12) 50%, transparent 60%);
    transform: translateX(-100%);
    transition: transform 0.55s ease;
    border-radius: inherit;
}

.btn-primary:hover::after {
    transform: translateX(100%);
}

/* Checkbox */
input[type="checkbox"] {
    accent-color: #4f8dff;
}

/* Error shake */
@keyframes shake {
    0%, 100% {
        transform: translateX(0);
    }

    20%, 60% {
        transform: translateX(-6px);
    }

    40%, 80% {
        transform: translateX(6px);
    }
}

.shake {
    animation: shake 0.4s ease;
}

/* Password eye button */
.eye-btn {
    color: #3a4460;
    transition: color 0.2s;
}

    .eye-btn:hover {
        color: #c8d0e8;
    }