body {
    margin: 50px;
    font-family: "DM Sans", sans-serif;
    background-color: #0d1b3e;
    background-image:
        repeating-linear-gradient(-45deg,
            transparent,
            transparent 60px,
            rgba(255, 255, 255, 0.02) 60px,
            rgba(255, 255, 255, 0.02) 61px),
        radial-gradient(ellipse at 30% 20%, #1e3a6e 0%, #0d1b3e 65%);
}

.login-wrapper {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.login-logo img {
    width: 225px;
    margin-bottom: 20px;
}

.login-card {
    width: 100%;
    max-width: 420px;
    padding: 40px;

    background: linear-gradient(160deg, #1a2e5a 0%, #0f1e40 100%);
    border: 1px solid rgba(200, 168, 75, 0.3);
    border-radius: 12px;

    box-shadow:
        0 2px 0 rgba(200, 168, 75, 0.4),
        0 30px 80px rgba(13, 27, 62, 0.55);
}



label {
    color: #e2c97e !important;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
}

input[type="text"],
input[type="password"] {
    width: 100%;
    padding: 12px;

    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(200, 168, 75, 0.3) !important;
    border-radius: 6px;

    color: #f7f8fc !important;
}

input:focus {
    border-color: #c8a84b !important;
    box-shadow: 0 0 0 3px rgba(200, 168, 75, 0.15) !important;
    outline: none;
}


button {
    width: 105%;
    margin-top: 15px;

    background: linear-gradient(135deg, #c8a84b, #a8872e) !important;
    color: #0d1b3e !important;

    border: none !important;
    padding: 12px;

    text-transform: uppercase;
    letter-spacing: 0.08em;
}

button:hover {
    filter: brightness(1.1);
}

input[type="checkbox"] {
    accent-color: #c8a84b;
}

.text-red-600 {
    color: #ff6b6b !important;
    font-size: 0.8rem;
}

.text-gray-600 {
    color: #8a93a8 !important;
}