.auth-gate {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 24px;
    background: radial-gradient(circle at 20% 15%, #2f75b533, transparent 38%), var(--bg)
}

.auth-card {
    width: min(100%, 480px);
    padding: 32px;
    display: grid;
    gap: 16px
}

.auth-card h1 {
    margin: 0
}

.auth-card .message {
    min-height: 1.5em
}

.account-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    text-align: right
}

.account-actions>div {
    display: grid;
    gap: 3px
}

.account-actions #userRole {
    text-transform: capitalize
}

.sync-notice {
    max-width: 1036px;
    margin: 12px auto;
    padding: 12px 16px;
    border: 1px solid #755d19;
    border-radius: 12px;
    background: #302812;
    color: #ffe7a3;
    white-space: pre-line
}

.sync-notice.has-error {
    border-color: #8d3434;
    background: #321b1b;
    color: #ffd0d0
}

.status.syncing {
    background: #755d19
}

.status.sync-error {
    background: #7d2525
}

@media(max-width:680px) {
    .account-actions {
        gap: 8px
    }

    .account-actions>div {
        display: none
    }

    .auth-card {
        padding: 24px
    }

    .sync-notice {
        margin: 8px 12px
    }
}