.authentication-card {
    max-width: 460px;
    margin: 60px auto;
    padding: 40px;

    background: rgba(15, 15, 15, .88);
    border: 1px solid rgba(255, 255, 255, .10);
    border-radius: 18px;
    box-shadow: 0 0 30px rgba(0, 0, 0, .45);

    color: white;
}

.authentication-card h2 {
    margin: 0 0 8px;
    font-size: 1.7rem;
    font-weight: 800;
}

.subtitle {
    color: rgba(255, 255, 255, .65);
    font-size: .9rem;
    margin-bottom: 4px;
}

.esm-input {

    width: 100%;

    margin-bottom: 18px;

    padding: 14px 18px;

    border-radius: 10px;

    border: none;

    background: #232937;

    color: white;

    font-size: 16px;
}

label {

    display: block;

    margin-top: 18px;

    margin-bottom: 8px;

    font-weight: 600;
}

.forgot-password-link {
    display: block;
    text-align: right;
    margin-top: 8px;

    color: rgba(255, 255, 255, .6);
    font-size: .82rem;
    text-decoration: none;
}

.forgot-password-link:hover {
    color: #d4af37;
    text-decoration: underline;
}

/* Shared base for both button variants below — full-width, matching
   the .esm-input fields above so the whole form reads as one
   consistent column. */
.esm-button {
    display: block;
    width: 100%;
    padding: 14px 18px;
    margin-top: 8px;

    border-radius: 10px;
    border: none;

    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: .2s;
}

/* Primary action (Create Account / Login submit) — solid gold, matching
   .esm-button-primary used throughout the rest of the app. */
.register {
    background: #d4af37;
    color: black;
}

.register:hover {
    background: #e6c75a;
}

/* Secondary action (Back to Login / Back to Register) — outlined, not
   competing with the primary gold button above it for attention. */
.login {
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .20);
    color: white;
}

.login:hover {
    background: rgba(255, 255, 255, .12);
}

.separator {

    display: flex;

    justify-content: center;
    align-items: center;
    gap: 14px;

    margin: 25px 0;

    color: #999;
}

/* The two dividing lines flanking the "OR" text inside .separator —
   previously undefined, so they collapsed to zero width/height and
   were invisible. */
.line {
    flex: 1;
    height: 1px;
    background: rgba(255, 255, 255, .15);
}

.remember-me {

    display: flex;

    align-items: center;

    gap: 10px;

    margin: 20px 0;
}

.validation-message {

    color: #ff7373;

    font-size: 13px;

    display: block;

    margin-top: 5px;
}