/* ===========================================================
   IDENTITY.CSS — WanderingWU Enterprise Glass System
   wwwroot/css/identity.css

   PAGES COVERED
   ┌─────────────────────────────────────────────────────────┐
   │ Login.cshtml            .identity-auth-*  (new NS)      │
   │ Register.cshtml         .identity-auth-*  (new NS)      │
   │ ForgotPassword.cshtml   .auth-* .form-*   (old NS)      │
   │ ResendEmailConfirm.cshtml .auth-* .form-* (old NS)      │
   │ Invite.cshtml           .invite-*         (welcome NS)  │
   └─────────────────────────────────────────────────────────┘

   LAYOUT CONTEXT
   ─────────────────────────────────────────────────────────
   body.layout-public  → main.main-content → .identity-auth-container
   body.layout-welcome → _WelcomeHeader + main.main-content → .welcome-page.invite-page
   body.layout-app     → sidebar + .minimal-header + main.main-content

   Auth containers sit inside main.main-content.
   main.css owns body background + main sizing — we inherit from it.

   INSTALL
   ─────────────────────────────────────────────────────────
   Add to _Layout.cshtml after dashboard.css:
     <link rel="stylesheet" href="~/css/identity.css" asp-append-version="true" />

   DESIGN TOKENS
   ─────────────────────────────────────────────────────────
   Mirrors dashboard.css and heaven.css exactly.
   Glass recipe: border(glass-stroke) + gradient(glass-strong→.78) + blur(18px)
   Hover recipe: translateY(-1px) + elevated shadow + accent border
   Focus recipe: accent border + --id-focus ring (3px rgba(37,99,235,.16))

   MAINTENANCE RULES
   ─────────────────────────────────────────────────────────
   1) Tokens live in :root — only one source of truth
   2) Old-NS (.auth-*, .form-*, .btn-primary) are selector aliases
      — never duplicate rules, always comma-join with new-NS
   3) Invite selectors are scoped to .invite-page or .invite-form
      to avoid colliding with welcome.css .cta-button
   4) No !important except .identity-validation-error:empty
   =========================================================== */


/* ==========================================================
   0. DESIGN TOKENS
   ========================================================== */

:root {
    /* Surface */
    --id-bg: #f1f5f9;
    --id-surface: #ffffff;
    --id-surface-subtle: #f9fafb;
    /* Text */
    --id-text-main: #0f172a;
    --id-text-body: #1e293b;
    --id-text-muted: #6b7280;
    --id-text-placeholder: #94a3b8;
    /* Accent */
    --id-accent: #2563eb;
    --id-accent-strong: #1d4ed8;
    --id-accent-soft: #dbeafe;
    --id-accent-mid: rgba(37,99,235,.12);
    /* Semantic */
    --id-positive: #16a34a;
    --id-negative: #dc2626;
    --id-warning: #f59e0b;
    /* Glass */
    --id-glass: rgba(255,255,255,.78);
    --id-glass-strong: rgba(255,255,255,.94);
    --id-glass-stroke: rgba(148,163,184,.28);
    --id-glass-stroke-strong: rgba(148,163,184,.45);
    /* Shape */
    --id-r-card: 16px;
    --id-r-control: 12px;
    --id-r-pill: 999px;
    /* Motion */
    --id-t-fast: .18s ease-out;
    --id-t-med: .28s ease-out;
    /* Focus */
    --id-focus: 0 0 0 3px rgba(37,99,235,.16);
    /* Elevation */
    --id-shadow-soft: 0 14px 40px rgba(15,23,42,.08);
    --id-shadow-glass: 0 16px 44px rgba(15,23,42,.10);
    --id-shadow-card: 0 20px 56px rgba(15,23,42,.13), 0 0 0 1px rgba(148,163,184,.16);
    --id-shadow-btn: 0 10px 26px rgba(37,99,235,.30);
    --id-shadow-btn-hover: 0 14px 34px rgba(37,99,235,.40);
    /* Controls */
    --id-control-h: 44px;
    --id-input-pad: .56rem .8rem;
}


/* ==========================================================
   1. AUTH CONTAINER
   Centers auth pages inside main.main-content.
   min-height:100% fills main (which main.css sizes to viewport).
   ========================================================== */

.identity-auth-container,
.auth-container {
    min-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem 3.5rem;
    box-sizing: border-box;
    /* Subtle radial mesh — consistent with dashboard page backgrounds */
    background: radial-gradient(ellipse 72% 58% at 18% -8%, rgba(37,99,235,.09) 0%, transparent 58%), radial-gradient(ellipse 52% 44% at 88% 110%, rgba(99,102,241,.07) 0%, transparent 52%), var(--id-bg);
}

    /* Heaven.cshtml also wraps in .auth-container — don't constrain it */
    .auth-container:has(.heaven-shell) {
        min-height: unset;
        align-items: flex-start;
        padding: .5rem .25rem;
        background: var(--id-bg);
    }


/* ==========================================================
   2. AUTH CARD
   Glass surface shared by Login, Register, ForgotPassword, Resend.
   ========================================================== */

.identity-auth-card,
.auth-card {
    width: 100%;
    max-width: 440px;
    padding: 2.25rem 2.4rem 2.5rem;
    border-radius: var(--id-r-card);
    border: 1px solid var(--id-glass-stroke);
    background: linear-gradient(160deg, var(--id-glass-strong) 0%, rgba(255,255,255,.82) 100%);
    box-shadow: var(--id-shadow-card);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-sizing: border-box;
    position: relative;
    /* Soft top-edge highlight */
    border-top-color: rgba(255,255,255,.72);
}

/* Register card is wider — fits invitation details panel */
.identity-register-card {
    max-width: 560px;
}


/* ==========================================================
   3. CARD HEADER & TITLE
   ========================================================== */

/* Inline header row — used by ResendEmailConfirmation */
.auth-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

/* Page titles */
.identity-auth-title,
.auth-title {
    margin: 0 0 1.75rem;
    font-size: 1.55rem;
    font-weight: 750;
    letter-spacing: -.025em;
    color: var(--id-text-main);
    line-height: 1.18;
}

/* Title inside .auth-card-header needs no bottom margin */
.auth-card-header .auth-title {
    margin-bottom: 0;
}

/* Login uses .identity-auth-header wrapper */
.identity-auth-header {
    margin-bottom: 1.75rem;
}

    .identity-auth-header .identity-auth-title {
        margin-bottom: 0;
    }

/* Optional brand lockup above title */
.identity-auth-brand {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin-bottom: 1.35rem;
}

.identity-auth-brand-mark {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--id-accent), var(--id-accent-strong));
    display: flex;
    align-items: center;
    justify-content: center;
    color: #f9fafb;
    font-size: .88rem;
    box-shadow: 0 8px 18px rgba(37,99,235,.28);
    flex-shrink: 0;
}

.identity-auth-brand-name {
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--id-text-muted);
}

/* Close / exit control — ResendEmailConfirmation */
.auth-nav-exit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--id-r-pill);
    border: 1px solid var(--id-glass-stroke-strong);
    background: rgba(255,255,255,.70);
    color: var(--id-text-muted);
    font-size: .88rem;
    text-decoration: none;
    flex-shrink: 0;
    transition: background var(--id-t-fast), color var(--id-t-fast), transform var(--id-t-fast);
}

    .auth-nav-exit:hover {
        background: #fee2e2;
        color: var(--id-negative);
        transform: translateY(-1px);
    }

/* Info / instructional message (ForgotPassword, Resend) */
.info-message {
    margin: 0 0 1.5rem;
    padding: .6rem .8rem;
    border-radius: var(--id-r-control);
    background: var(--id-accent-soft);
    border: 1px solid rgba(37,99,235,.18);
    font-size: .85rem;
    color: #1e40af;
    line-height: 1.48;
}


/* ==========================================================
   4. FORM GROUPS & INPUTS
   Both namespaces share identical visual rules.
   ========================================================== */

.identity-auth-form,
.auth-form {
    display: flex;
    flex-direction: column;
}

/* Field wrapper */
.identity-form-group,
.form-group {
    display: flex;
    flex-direction: column;
    gap: .28rem;
    margin-bottom: 1.1rem;
}

/* Labels */
.identity-form-label,
.form-label {
    font-size: .79rem;
    font-weight: 650;
    color: #374151;
    letter-spacing: .008em;
}

/* Label modifiers */
.identity-label-note {
    font-weight: 400;
    color: var(--id-text-muted);
    font-size: .76rem;
    margin-left: .2rem;
}

.identity-required-star {
    color: var(--id-negative);
    margin-left: .15rem;
}

/* Text inputs — both namespaces */
.identity-form-input,
.form-input {
    width: 100%;
    height: var(--id-control-h);
    padding: var(--id-input-pad);
    border-radius: var(--id-r-control);
    border: 1px solid var(--id-glass-stroke-strong);
    background: rgba(255,255,255,.88);
    color: var(--id-text-main);
    font-size: .9rem;
    font-family: inherit;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
    transition: border-color var(--id-t-fast), box-shadow var(--id-t-fast), background var(--id-t-fast);
}

    .identity-form-input::placeholder,
    .form-input::placeholder {
        color: var(--id-text-placeholder);
    }

    .identity-form-input:hover,
    .form-input:hover {
        border-color: rgba(37,99,235,.38);
        background: rgba(255,255,255,.96);
    }

    .identity-form-input:focus,
    .form-input:focus {
        outline: none;
        border-color: rgba(37,99,235,.55);
        box-shadow: var(--id-focus);
        background: #ffffff;
    }

    /* Readonly — locked email on Register */
    .identity-form-input[readonly],
    .form-input[readonly] {
        background: rgba(241,245,249,.85);
        color: var(--id-text-muted);
        cursor: default;
        border-color: var(--id-glass-stroke);
    }

        .identity-form-input[readonly]:hover,
        .form-input[readonly]:hover {
            border-color: var(--id-glass-stroke);
            box-shadow: none;
        }


/* ==========================================================
   5. CHECKBOXES
   ========================================================== */

/* New namespace — used by Login */
.identity-checkbox-group {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin-bottom: 1.1rem;
    padding: .55rem .65rem;
    border-radius: var(--id-r-control);
    background: rgba(249,250,251,.85);
    border: 1px solid var(--id-glass-stroke);
}

.identity-checkbox-input {
    width: 16px;
    height: 16px;
    border-radius: 5px;
    accent-color: var(--id-accent);
    cursor: pointer;
    flex-shrink: 0;
}

.identity-checkbox-label {
    font-size: .84rem;
    color: var(--id-text-main);
    cursor: pointer;
    line-height: 1.4;
    user-select: none;
}


/* ==========================================================
   6. BUTTONS
   ========================================================== */

/* ── Primary ── */
.identity-btn-primary,
.btn-primary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    width: 100%;
    height: var(--id-control-h);
    margin-top: 1.35rem;
    padding: 0 1.25rem;
    border-radius: var(--id-r-pill);
    border: 1px solid transparent;
    background: linear-gradient(135deg, var(--id-accent), var(--id-accent-strong));
    color: #f9fafb;
    font-size: .9rem;
    font-weight: 650;
    font-family: inherit;
    letter-spacing: .01em;
    cursor: pointer;
    text-decoration: none;
    box-shadow: var(--id-shadow-btn);
    transition: transform var(--id-t-fast), box-shadow var(--id-t-fast), filter var(--id-t-fast);
}

    .identity-btn-primary:hover,
    .btn-primary:hover {
        transform: translateY(-1px);
        box-shadow: var(--id-shadow-btn-hover);
        filter: brightness(1.04);
    }

    .identity-btn-primary:active,
    .btn-primary:active {
        transform: translateY(0);
        box-shadow: var(--id-shadow-btn);
        filter: none;
    }

/* Large variant — Register submit */
.identity-btn-large {
    height: 50px;
    font-size: .95rem;
    margin-top: 1.6rem;
}

/* ── Secondary ── */
.identity-btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    padding: .56rem 1.35rem;
    border-radius: var(--id-r-pill);
    border: 1px solid var(--id-glass-stroke-strong);
    background: rgba(255,255,255,.72);
    color: var(--id-text-muted);
    font-size: .88rem;
    font-weight: 560;
    font-family: inherit;
    cursor: pointer;
    text-decoration: none;
    transition: background var(--id-t-fast), color var(--id-t-fast), transform var(--id-t-fast), box-shadow var(--id-t-fast);
}

    .identity-btn-secondary:hover {
        background: rgba(255,255,255,.96);
        color: var(--id-text-main);
        transform: translateY(-1px);
        box-shadow: var(--id-shadow-soft);
    }


/* ==========================================================
   7. FOOTER LINKS
   ========================================================== */

.identity-auth-links,
.auth-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: .3rem 1.1rem;
    margin-top: 1.25rem;
    padding-top: 1.1rem;
    border-top: 1px solid var(--id-glass-stroke);
}

.identity-auth-link,
.auth-link {
    font-size: .80rem;
    color: var(--id-accent);
    font-weight: 560;
    text-decoration: none;
    transition: color var(--id-t-fast);
}

    .identity-auth-link:hover,
    .auth-link:hover {
        color: var(--id-accent-strong);
        text-decoration: underline;
    }


/* ==========================================================
   8. VALIDATION
   ========================================================== */

/* Summary box */
.identity-validation-summary,
.validation-summary {
    margin-bottom: 1.1rem;
    padding: .6rem .78rem;
    border-radius: var(--id-r-control);
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #b91c1c;
    font-size: .82rem;
    line-height: 1.48;
}

    /* ASP.NET renders a <ul> inside validation-summary */
    .identity-validation-summary ul,
    .validation-summary ul {
        margin: .22rem 0 0;
        padding-left: 1.1rem;
    }

    .identity-validation-summary li,
    .validation-summary li {
        margin-bottom: .12rem;
    }

    /* Hide empty validation summary div rendered by ASP.NET */
    .identity-validation-summary:not(:has(li)):empty,
    .validation-summary:not(:has(li)):empty {
        display: none;
    }

/* Inline field error */
.identity-validation-error,
.validation-error {
    display: block;
    font-size: .76rem;
    color: var(--id-negative);
    margin-top: .12rem;
    line-height: 1.4;
}

    .identity-validation-error:empty,
    .validation-error:empty {
        display: none !important;
    }


/* ==========================================================
   9. REGISTER — INVITATION HEADER
   Decorative section shown when InvitationData != null.
   ========================================================== */

.identity-invite-header {
    text-align: center;
    margin-bottom: 1.65rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--id-glass-stroke);
}

.identity-invite-icon {
    font-size: 2.6rem;
    display: block;
    margin-bottom: .55rem;
    line-height: 1;
    animation: id-float 3.8s ease-in-out infinite;
}

@keyframes id-float {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-6px);
    }
}

.identity-invite-title {
    margin: 0 0 .4rem;
    font-size: 1.5rem;
    font-weight: 750;
    letter-spacing: -.022em;
    color: var(--id-text-main);
    line-height: 1.2;
}

.identity-invite-subtitle {
    margin: 0;
    font-size: .9rem;
    color: var(--id-text-muted);
    line-height: 1.48;
}

    .identity-invite-subtitle strong {
        color: var(--id-text-main);
        font-weight: 650;
    }


/* ==========================================================
   10. REGISTER — INVITATION DETAILS BOX
   ========================================================== */

.identity-invite-details {
    margin-bottom: 1.4rem;
    padding: 1rem 1.1rem;
    border-radius: var(--id-r-control);
    border: 1px solid rgba(37,99,235,.18);
    background: linear-gradient(135deg, rgba(219,234,254,.60) 0%, rgba(237,233,254,.42) 100%);
}

.identity-invite-details-title {
    margin: 0 0 .85rem;
    font-size: .74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .15em;
    color: var(--id-accent-strong);
}

.identity-invite-detail-item {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    padding: .45rem 0;
    border-bottom: 1px solid rgba(148,163,184,.18);
}

    .identity-invite-detail-item:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }

.identity-invite-detail-icon {
    font-size: 1rem;
    flex-shrink: 0;
    width: 20px;
    text-align: center;
    margin-top: .06rem;
}

.identity-invite-detail-content {
    display: flex;
    flex-direction: column;
    gap: .08rem;
    min-width: 0;
}

.identity-invite-detail-label {
    font-size: .71rem;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: var(--id-text-muted);
}

.identity-invite-detail-value {
    font-size: .88rem;
    font-weight: 600;
    color: var(--id-text-main);
}


/* ==========================================================
   11. REGISTER — PERSONAL MESSAGE BOX
   ========================================================== */

.identity-invite-message {
    display: flex;
    gap: .75rem;
    margin-bottom: 1.4rem;
    padding: .85rem 1rem;
    border-radius: var(--id-r-control);
    background: rgba(255,255,255,.85);
    border: 1px solid var(--id-glass-stroke);
}

.identity-invite-message-icon {
    font-size: 1.2rem;
    flex-shrink: 0;
    margin-top: .04rem;
}

.identity-invite-message-content {
    display: flex;
    flex-direction: column;
    gap: .22rem;
    min-width: 0;
}

.identity-invite-message-label {
    margin: 0;
    font-size: .71rem;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: var(--id-text-muted);
}

.identity-invite-message-text {
    margin: 0;
    font-size: .88rem;
    color: var(--id-text-body);
    line-height: 1.52;
    font-style: italic;
}


/* ==========================================================
   12. REGISTER — FORM SECTION TITLE
   ========================================================== */

.identity-form-section-title {
    margin: .25rem 0 1rem;
    font-size: .74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .15em;
    color: var(--id-text-muted);
    padding-bottom: .55rem;
    border-bottom: 1px solid var(--id-glass-stroke);
}


/* ==========================================================
   13. REGISTER — PASSWORD REQUIREMENTS
   ========================================================== */

.identity-password-requirements {
    margin-top: .4rem;
    padding: .55rem .72rem;
    border-radius: var(--id-r-control);
    background: rgba(249,250,251,.90);
    border: 1px solid var(--id-glass-stroke);
}

.identity-requirements-title {
    margin: 0 0 .28rem;
    font-size: .74rem;
    font-weight: 600;
    color: var(--id-text-muted);
}

.identity-requirements-list {
    margin: 0;
    padding-left: 1.1rem;
    font-size: .76rem;
    color: #4b5563;
    line-height: 1.68;
}


/* ==========================================================
   14. REGISTER — REGISTRATION NOTE
   ========================================================== */

.identity-registration-note {
    margin-top: 1.1rem;
    padding: .6rem .75rem;
    border-radius: var(--id-r-control);
    background: rgba(219,234,254,.42);
    border: 1px solid rgba(37,99,235,.15);
    font-size: .80rem;
    color: #1e40af;
    line-height: 1.48;
}

    .identity-registration-note p {
        margin: 0;
    }


/* ==========================================================
   15. REGISTER — ERROR STATE (invalid / expired invitation)
   ========================================================== */

.identity-error-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: .8rem;
    padding: 1.5rem 0 .75rem;
}

.identity-error-icon {
    font-size: 3rem;
    display: block;
    line-height: 1;
}

.identity-error-state h2 {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--id-text-main);
}

.identity-error-state > p {
    margin: 0;
    font-size: .9rem;
    color: var(--id-text-muted);
}


/* ==========================================================
   16. INVITE PAGE — HERO
   body.layout-welcome → _WelcomeHeader → main → .welcome-page.invite-page
   ========================================================== */

.welcome-page.invite-page {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

/* Hero band */
.hero.invite-hero {
    padding: 4.5rem 1.5rem 4rem;
    text-align: center;
    border-bottom: 1px solid var(--id-glass-stroke);
    background: radial-gradient(ellipse 72% 58% at 18% -8%, rgba(37,99,235,.10) 0%, transparent 58%), radial-gradient(ellipse 52% 44% at 88% 108%, rgba(99,102,241,.08) 0%, transparent 52%), linear-gradient(180deg, #eef2ff 0%, #f1f5f9 100%);
    position: relative;
}

    .hero.invite-hero .hero-container {
        max-width: 620px;
        margin: 0 auto;
    }

    .hero.invite-hero h1 {
        margin: 0 0 1rem;
        font-size: clamp(2rem, 4.5vw, 2.85rem);
        font-weight: 800;
        letter-spacing: -.03em;
        line-height: 1.1;
        color: var(--id-text-main);
    }

    .hero.invite-hero .description {
        margin: 0;
        font-size: clamp(.92rem, 2vw, 1.05rem);
        color: var(--id-text-muted);
        line-height: 1.62;
        max-width: 510px;
        margin-inline: auto;
    }

    /* Accent rule beneath description */
    .hero.invite-hero::after {
        content: "";
        display: block;
        width: 44px;
        height: 3px;
        border-radius: var(--id-r-pill);
        background: linear-gradient(90deg, var(--id-accent), var(--id-accent-strong));
        margin: 1.85rem auto 0;
        opacity: .6;
    }


/* ==========================================================
   17. INVITE PAGE — FORM SECTION & CARD
   ========================================================== */

.invite-section {
    flex: 1;
    display: flex;
    justify-content: center;
    padding: 3.25rem 1.25rem 4.5rem;
    background: var(--id-bg);
}

.invite-card {
    width: 100%;
    max-width: 580px;
    padding: 2.65rem 2.8rem;
    border-radius: var(--id-r-card);
    border: 1px solid var(--id-glass-stroke);
    background: linear-gradient(160deg, var(--id-glass-strong) 0%, rgba(255,255,255,.82) 100%);
    box-shadow: var(--id-shadow-card);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-sizing: border-box;
    border-top-color: rgba(255,255,255,.72);
}


/* ==========================================================
   18. INVITE PAGE — FORM FIELDS
   ========================================================== */

.invite-form {
    display: flex;
    flex-direction: column;
}

.invite-field {
    display: flex;
    flex-direction: column;
    gap: .28rem;
    margin-bottom: 1.1rem;
}

    .invite-field:last-of-type {
        margin-bottom: 0;
    }

    /* Labels inherit from browser default unless specified */
    .invite-field > label {
        font-size: .79rem;
        font-weight: 650;
        color: #374151;
        letter-spacing: .008em;
    }

/* Text input */
.invite-input {
    width: 100%;
    height: var(--id-control-h);
    padding: var(--id-input-pad);
    border-radius: var(--id-r-control);
    border: 1px solid var(--id-glass-stroke-strong);
    background: rgba(255,255,255,.88);
    color: var(--id-text-main);
    font-size: .9rem;
    font-family: inherit;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
    transition: border-color var(--id-t-fast), box-shadow var(--id-t-fast), background var(--id-t-fast);
}

    .invite-input::placeholder {
        color: var(--id-text-placeholder);
    }

    .invite-input:hover {
        border-color: rgba(37,99,235,.38);
        background: rgba(255,255,255,.96);
    }

    .invite-input:focus {
        outline: none;
        border-color: rgba(37,99,235,.55);
        box-shadow: var(--id-focus);
        background: #ffffff;
    }

/* Textarea */
.invite-textarea {
    width: 100%;
    padding: .62rem .8rem;
    border-radius: var(--id-r-control);
    border: 1px solid var(--id-glass-stroke-strong);
    background: rgba(255,255,255,.88);
    color: var(--id-text-main);
    font-size: .9rem;
    font-family: inherit;
    line-height: 1.52;
    resize: vertical;
    min-height: 112px;
    box-sizing: border-box;
    -webkit-appearance: none;
    transition: border-color var(--id-t-fast), box-shadow var(--id-t-fast), background var(--id-t-fast);
}

    .invite-textarea::placeholder {
        color: var(--id-text-placeholder);
    }

    .invite-textarea:hover {
        border-color: rgba(37,99,235,.38);
        background: rgba(255,255,255,.96);
    }

    .invite-textarea:focus {
        outline: none;
        border-color: rgba(37,99,235,.55);
        box-shadow: var(--id-focus);
        background: #ffffff;
    }

/* Validation */
.invite-validation {
    display: none;
    margin-bottom: .85rem;
    padding: .58rem .75rem;
    border-radius: var(--id-r-control);
    background: #fef2f2;
    border: 1px solid #fecaca;
    font-size: .82rem;
    color: #b91c1c;
    line-height: 1.45;
}

    .invite-validation:not(:empty) {
        display: block;
    }

.invite-error {
    display: block;
    font-size: .76rem;
    color: var(--id-negative);
    margin-top: .1rem;
}

    .invite-error:empty {
        display: none !important;
    }


/* ==========================================================
   19. INVITE PAGE — CHECKBOX FIELD
   ========================================================== */

.invite-field.invite-checkbox {
    flex-direction: row;
    align-items: flex-start;
    gap: .65rem;
    padding: .72rem .85rem;
    border-radius: var(--id-r-control);
    background: rgba(249,250,251,.88);
    border: 1px solid var(--id-glass-stroke);
    margin-bottom: 1.65rem;
}

.invite-checkbox-input {
    width: 16px;
    height: 16px;
    margin-top: .18rem;
    border-radius: 5px;
    accent-color: var(--id-accent);
    flex-shrink: 0;
    cursor: pointer;
}

.invite-checkbox-label {
    font-size: .84rem;
    color: var(--id-text-main);
    line-height: 1.48;
    cursor: pointer;
    user-select: none;
    font-weight: 400;
}


/* ==========================================================
   20. INVITE PAGE — CTA BUTTON
   Scoped to .invite-page / .invite-form to avoid clobbering
   the .cta-button definition in welcome.css.
   ========================================================== */

.invite-page .cta-button,
.invite-form .cta-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    width: 100%;
    height: 50px;
    padding: 0 1.5rem;
    border-radius: var(--id-r-pill);
    border: 1px solid transparent;
    background: linear-gradient(135deg, var(--id-accent), var(--id-accent-strong));
    color: #f9fafb;
    font-size: .95rem;
    font-weight: 650;
    font-family: inherit;
    letter-spacing: .01em;
    cursor: pointer;
    text-decoration: none;
    box-shadow: 0 12px 28px rgba(37,99,235,.32);
    transition: transform var(--id-t-fast), box-shadow var(--id-t-fast), filter var(--id-t-fast);
}

    .invite-page .cta-button:hover,
    .invite-form .cta-button:hover {
        transform: translateY(-1px);
        box-shadow: 0 16px 36px rgba(37,99,235,.42);
        filter: brightness(1.04);
    }

    .invite-page .cta-button:active,
    .invite-form .cta-button:active {
        transform: translateY(0);
        filter: none;
    }


/* ==========================================================
   21. INVITE PAGE — SUCCESS STATE
   ========================================================== */

.invite-success {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: .9rem;
    padding: 1.25rem 0 .75rem;
}

    .invite-success > i.fa-check-circle {
        font-size: 3.2rem;
        color: var(--id-positive);
        animation: id-pop-in .42s cubic-bezier(.34,1.56,.64,1) both;
    }

@keyframes id-pop-in {
    0% {
        transform: scale(0);
        opacity: 0;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.invite-success h2 {
    margin: 0;
    font-size: 1.45rem;
    font-weight: 750;
    letter-spacing: -.02em;
    color: var(--id-text-main);
}

.invite-success > p {
    margin: 0;
    font-size: .9rem;
    color: var(--id-text-muted);
    line-height: 1.58;
    max-width: 380px;
}

    .invite-success > p strong {
        color: var(--id-text-main);
        font-weight: 650;
    }

/* Back-to-login button inside success */
.invite-success .cta-button {
    width: auto;
    padding: 0 2rem;
    height: var(--id-control-h);
    font-size: .9rem;
}


/* ==========================================================
   22. RESPONSIVE
   ========================================================== */

/* ── Tablet ── */
@media (max-width: 640px) {

    .identity-auth-container,
    .auth-container {
        padding: 1.75rem .75rem 2.5rem;
        align-items: flex-start;
    }

    .identity-auth-card,
    .auth-card {
        padding: 1.75rem 1.5rem 2rem;
        border-radius: 14px;
    }

    .identity-register-card {
        max-width: 100%;
    }

    .identity-auth-title,
    .auth-title {
        font-size: 1.38rem;
    }

    .hero.invite-hero {
        padding: 3rem 1.25rem 2.75rem;
    }

    .invite-card {
        padding: 1.85rem 1.6rem 2.1rem;
        border-radius: 14px;
    }

    .invite-section {
        padding: 2rem .75rem 3rem;
    }

    .identity-auth-links,
    .auth-links {
        flex-direction: column;
        align-items: center;
        gap: .55rem;
    }
}

/* ── Mobile ── */
@media (max-width: 420px) {

    .identity-auth-container,
    .auth-container {
        padding: 1.25rem .5rem 2rem;
    }

    .identity-auth-card,
    .auth-card {
        padding: 1.5rem 1.1rem 1.75rem;
    }

    .invite-card {
        padding: 1.5rem 1.15rem 1.75rem;
    }
}

/* ── Tall desktop — prevent card floating too high ── */
@media (min-height: 860px) {

    .identity-auth-container,
    .auth-container {
        padding-top: 4.5rem;
        padding-bottom: 4.5rem;
    }
}