/* ==========================================================================
   AUTH SCREEN
   ========================================================================== */
.auth-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 20px;
    background: var(--bg-main);
}

.auth-card {
    width: 100%;
    max-width: 440px;
    border-radius: 14px;
    padding: 40px;
    text-align: center;
    box-shadow: var(--shadow-md);
    animation: fadeIn 0.4s ease-out;
}

/* Clear space around the logo is 1/2 N (half the logo height) per the guidelines */
.auth-logo { height: 76px; }

.subtitle { color: var(--ink-3); font-size: 12px; text-transform: uppercase; letter-spacing: 0.14em; font-weight: 500; }
.auth-divider { height: 1px; background: var(--line); margin: 28px 0; }
.auth-action-area h3 { font-size: 18px; margin-bottom: 10px; }
.auth-action-area .desc { color: var(--ink-2); font-size: 14px; margin-bottom: 24px; }

.btn-microsoft {
    width: 100%;
    background-color: var(--nml-deep);
    color: #FFFFFF;
    border: 1px solid var(--nml-deep);
    border-radius: 8px;
    padding: 12px 20px;
    font-weight: 500;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    transition: var(--transition-fast);
}
.btn-microsoft:hover { border-color: var(--nml-electric); }
:root[data-theme="dark"] .btn-microsoft { background: var(--surface-3); border-color: var(--line-strong); }
:root[data-theme="dark"] .btn-microsoft:hover { border-color: var(--nml-electric); }
.provider-logo { width: 20px; height: 20px; }

.error-msg {
    margin-top: 15px;
    color: var(--danger-strong);
    font-size: 12.5px;
    background: var(--danger-soft);
    padding: 10px 12px;
    border-radius: 6px;
    text-align: left;
}

.auth-footer {
    margin-top: 36px;
    font-size: 12px;
    color: var(--ink-3);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
}