* {
    box-sizing: border-box;
}

body {
    min-height: 100vh;
    margin: 0;

    display: grid;
    place-items: center;

    font-family: Arial, sans-serif;
    color: white;

    background:
        radial-gradient(circle at top, #173b63, #050911 70%);
}

.login-card {
    width: min(90%, 420px);
    padding: 40px;

    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 18px;

    background: rgba(5, 12, 22, 0.85);
    backdrop-filter: blur(12px);

    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
}

h1 {
    margin: 0;
    text-align: center;
    font-size: 3rem;
}

.subtitle {
    margin: 8px 0 28px;
    text-align: center;
    color: #9fb2c8;
}

form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

label {
    margin-top: 8px;
}

input {
    width: 100%;
    padding: 13px;

    color: white;
    background: #0c1624;

    border: 1px solid #31445b;
    border-radius: 8px;

    font-size: 1rem;
}

input:focus {
    outline: 2px solid #70d7ff;
    border-color: transparent;
}

button {
    position: relative;
    z-index: 10;

    padding: 12px 20px;
    margin: 6px;

    cursor: pointer;
    pointer-events: auto;
    touch-action: manipulation;

    -webkit-appearance: none;
    appearance: none;
}

button:disabled {
    opacity: 0.6;
    cursor: wait;
}

#message {
    min-height: 24px;
    margin-bottom: 0;

    text-align: center;
    color: #ff9c9c;
}