@layer pages {
    .auth-shell {
        display: grid;
        align-content: center;
        gap: 28px;
        width: min(460px, calc(100% - 32px));
        min-height: 100vh;
        margin: 0 auto;
        padding: 32px 0;
    }

    .auth-brand {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
    }

    .auth-brand strong,
    .auth-brand span {
        display: block;
    }

    .auth-brand strong {
        font-size: 17px;
    }

    .auth-brand span {
        margin-top: 3px;
        color: var(--text-muted);
        font-size: 12px;
    }

    .auth-panel {
        display: grid;
        gap: 22px;
        padding: 28px;
        border: 1px solid var(--border);
        border-radius: 8px;
        background: var(--surface);
        box-shadow: var(--shadow);
    }

    .compact-panel {
        text-align: center;
    }

    .auth-panel-heading {
        display: grid;
        gap: 7px;
    }

    .auth-panel-heading h1,
    .admin-header h1,
    .panel-heading h2 {
        margin: 0;
        letter-spacing: 0;
    }

    .auth-panel-heading h1 {
        font-size: 26px;
    }

    .auth-panel-heading p {
        margin: 0;
        color: var(--text-muted);
        font-size: 14px;
        line-height: 1.5;
    }

    .account-form {
        display: grid;
        gap: 16px;
    }

    .auth-alternative {
        margin: -4px 0 0;
        color: var(--text-muted);
        font-size: 13px;
        text-align: center;
    }

    .pending-approval-mark {
        display: grid;
        place-items: center;
        width: 48px;
        height: 48px;
        margin: 0 auto -6px;
        border: 1px solid var(--warning-border);
        border-radius: 50%;
        color: var(--warning-fg);
        background: var(--warning-bg);
    }

    .pending-approval-mark svg {
        width: 22px;
        height: 22px;
    }
}