/*
|--------------------------------------------------------------------------
| D2.4.4 — External Experience Super Premium Refined
|--------------------------------------------------------------------------
| O v4 preserva a escala tipográfica aprovada das telas originais e eleva
| acabamento, hierarquia, profundidade, contexto e interação ao padrão do
| Dashboard Premium. Sem títulos gigantes e sem microtexto ilegível.
*/

:root {
    color-scheme: dark;
    --x4-bg: #050816;
    --x4-bg-2: #070b19;
    --x4-card: rgba(9, 15, 31, .88);
    --x4-card-strong: rgba(12, 18, 37, .96);
    --x4-soft: rgba(148, 163, 184, .065);
    --x4-hover: rgba(31, 41, 68, .72);
    --x4-border: rgba(148, 163, 184, .14);
    --x4-border-accent: rgba(139, 92, 246, .30);
    --x4-text: #f8fafc;
    --x4-text-2: #dbe4f1;
    --x4-muted: #91a0b8;
    --x4-muted-2: #6f7e96;
    --x4-violet: #8b5cf6;
    --x4-violet-2: #a78bfa;
    --x4-indigo: #6366f1;
    --x4-blue: #4f8cff;
    --x4-cyan: #22d3ee;
    --x4-green: #34d399;
    --x4-amber: #fbbf24;
    --x4-red: #fb7185;
    --x4-shadow: 0 28px 72px rgba(0, 0, 0, .28);
    --x4-shadow-soft: 0 14px 34px rgba(0, 0, 0, .18);
    --x4-font: "DM Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

html.light,
html:not(.dark) {
    color-scheme: light;
    --x4-bg: #f7f9fd;
    --x4-bg-2: #eef3fb;
    --x4-card: rgba(255, 255, 255, .92);
    --x4-card-strong: #ffffff;
    --x4-soft: rgba(15, 23, 42, .045);
    --x4-hover: rgba(241, 245, 249, .94);
    --x4-border: rgba(15, 23, 42, .09);
    --x4-border-accent: rgba(99, 102, 241, .22);
    --x4-text: #0f172a;
    --x4-text-2: #334155;
    --x4-muted: #64748b;
    --x4-muted-2: #94a3b8;
    --x4-shadow: 0 26px 62px rgba(30, 41, 59, .11);
    --x4-shadow-soft: 0 12px 28px rgba(30, 41, 59, .08);
}

html {
    background: var(--x4-bg);
}

body.external-v4,
.external-v4 {
    font-family: var(--x4-font) !important;
    color: var(--x4-text);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

body.external-v4 {
    min-height: 100vh;
    background:
        linear-gradient(rgba(129, 140, 248, .025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(129, 140, 248, .025) 1px, transparent 1px),
        radial-gradient(circle at 11% 10%, rgba(124, 58, 237, .11), transparent 28rem),
        radial-gradient(circle at 88% 14%, rgba(59, 130, 246, .07), transparent 30rem),
        var(--x4-bg) !important;
    background-size: 44px 44px, 44px 44px, auto, auto, auto !important;
    background-attachment: fixed !important;
}

html.light body.external-v4,
html:not(.dark) body.external-v4 {
    background:
        linear-gradient(rgba(15, 23, 42, .025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(15, 23, 42, .025) 1px, transparent 1px),
        radial-gradient(circle at 11% 10%, rgba(124, 58, 237, .055), transparent 28rem),
        radial-gradient(circle at 88% 14%, rgba(59, 130, 246, .045), transparent 30rem),
        var(--x4-bg) !important;
    background-size: 44px 44px, 44px 44px, auto, auto, auto !important;
}

.external-v4 *,
.external-v4 *::before,
.external-v4 *::after {
    box-sizing: border-box;
}

.external-v4 a,
.external-v4 button,
.external-v4 input,
.external-v4 select,
.external-v4 textarea {
    font-family: var(--x4-font) !important;
}

/* ==========================================================================
   TOPBAR — premium, compacta e alinhada ao Dashboard
   ========================================================================== */
.external-v4 .topbar,
.external-v4 .error-topbar {
    width: min(96%, 1480px) !important;
    min-height: 4.25rem !important;
    margin: 1rem auto 0 !important;
    padding: .58rem .85rem !important;
    border: 1px solid var(--x4-border) !important;
    border-radius: 1.15rem !important;
    background: color-mix(in srgb, var(--x4-card) 94%, transparent) !important;
    box-shadow: 0 18px 48px rgba(0, 0, 0, .14) !important;
    backdrop-filter: blur(22px) saturate(1.12) !important;
    -webkit-backdrop-filter: blur(22px) saturate(1.12) !important;
}

.external-v4 .topbar::after,
.external-v4 .error-topbar::after {
    content: "";
    position: absolute;
    inset: auto 1.1rem 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(139, 92, 246, .65), rgba(79, 140, 255, .55), transparent);
    opacity: .55;
    pointer-events: none;
}

.external-v4 .topbar,
.external-v4 .error-topbar {
    position: relative;
}

.external-v4 .topbar-greeting,
.external-v4 .error-topbar-title {
    color: var(--x4-violet-2) !important;
    font-size: .79rem !important;
    font-weight: 900 !important;
    letter-spacing: .11em !important;
    text-transform: uppercase;
}

.external-v4 .topbar-date,
.external-v4 .error-topbar-subtitle {
    color: var(--x4-muted) !important;
    font-size: .76rem !important;
    font-weight: 700 !important;
}

.external-v4 .topbar-pill,
.external-v4 .topbar-cta,
.external-v4 .error-topbar-pill,
.external-v4 .error-topbar-cta {
    min-height: 2.4rem !important;
    border: 1px solid var(--x4-border) !important;
    border-radius: .8rem !important;
    color: var(--x4-text-2) !important;
    background: var(--x4-soft) !important;
    font-size: .79rem !important;
    font-weight: 850 !important;
    text-decoration: none !important;
}

.external-v4 .topbar-pill:hover,
.external-v4 .topbar-cta:hover,
.external-v4 .error-topbar-cta:hover {
    border-color: rgba(139, 92, 246, .28) !important;
    background: var(--x4-hover) !important;
}

.external-v4 .theme-actions {
    gap: .22rem !important;
    padding: .22rem !important;
    border: 1px solid var(--x4-border) !important;
    border-radius: .85rem !important;
    background: var(--x4-soft) !important;
}

.external-v4 .theme-btn {
    width: 2.15rem !important;
    height: 2.15rem !important;
    min-width: 2.15rem !important;
    border-radius: .68rem !important;
}

.external-v4 .theme-btn:hover,
.external-v4 .theme-btn.is-active,
.external-v4 .theme-btn[aria-pressed="true"] {
    color: #fff !important;
    background: linear-gradient(135deg, var(--x4-violet), var(--x4-blue)) !important;
    box-shadow: 0 8px 18px rgba(99, 102, 241, .20) !important;
}

/* ==========================================================================
   TYPOGRAPHY — deliberately restrained
   ========================================================================== */
.external-v4 .welcome-title,
.external-v4 .login-side-title,
.external-v4 .lookup-hero-title,
.external-v4 .lookup-side-title,
.external-v4 .cadastro-hero-title,
.external-v4 .recovery-hero-title,
.external-v4 .reset-hero-title,
.external-v4 .confirm-hero-title {
    color: var(--x4-text) !important;
    font-family: var(--x4-font) !important;
    font-size: clamp(2.45rem, 4.3vw, 4.15rem) !important;
    line-height: 1.015 !important;
    font-weight: 900 !important;
    letter-spacing: -.052em !important;
}

.external-v4 .welcome-title {
    max-width: 900px !important;
    font-size: clamp(2.85rem, 5.5vw, 5rem) !important;
}

.external-v4 .login-side-title {
    max-width: 650px !important;
    font-size: clamp(2.45rem, 4vw, 3.85rem) !important;
}

.external-v4 .cadastro-hero-title,
.external-v4 .lookup-hero-title,
.external-v4 .lookup-side-title,
.external-v4 .recovery-hero-title,
.external-v4 .reset-hero-title,
.external-v4 .confirm-hero-title {
    max-width: 700px !important;
    font-size: clamp(2.35rem, 3.8vw, 3.55rem) !important;
}

.external-v4 .welcome-title-accent,
.external-v4 .login-side-title span,
.external-v4 .lookup-hero-title span,
.external-v4 .lookup-side-title span,
.external-v4 .cadastro-hero-title span,
.external-v4 .recovery-hero-title span,
.external-v4 .reset-hero-title span,
.external-v4 .confirm-hero-title span {
    color: transparent !important;
    background: linear-gradient(100deg, #c4b5fd 0%, #8b5cf6 37%, #60a5fa 78%, #22d3ee 118%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
}

.external-v4 .login-side-text,
.external-v4 .lookup-hero-text,
.external-v4 .lookup-side-text,
.external-v4 .cadastro-hero-text,
.external-v4 .recovery-hero-text,
.external-v4 .reset-hero-text,
.external-v4 .confirm-hero-text,
.external-v4 .welcome-subtitle {
    max-width: 650px !important;
    color: var(--x4-muted) !important;
    font-size: .98rem !important;
    line-height: 1.68 !important;
    font-weight: 520 !important;
}

.external-v4 .login-side-text strong,
.external-v4 .lookup-hero-text strong,
.external-v4 .lookup-side-text strong,
.external-v4 .cadastro-hero-text strong,
.external-v4 .welcome-subtitle strong {
    color: var(--x4-text-2) !important;
}

/* Small premium badges */
.external-v4 .welcome-badge,
.external-v4 .login-side-kicker,
.external-v4 .lookup-kicker,
.external-v4 .lookup-side-kicker,
.external-v4 .cadastro-kicker,
.external-v4 .recovery-kicker,
.external-v4 .reset-kicker,
.external-v4 .confirm-kicker,
.external-v4 .planos-badge,
.external-v4 .badge-alert,
.external-v4 .legal-badge,
.external-v4 .error-badge,
.external-v4 .security-badge {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 1.9rem !important;
    width: fit-content !important;
    padding: .38rem .68rem !important;
    border: 1px solid rgba(139, 92, 246, .25) !important;
    border-radius: 999px !important;
    color: var(--x4-violet-2) !important;
    background: linear-gradient(135deg, rgba(139, 92, 246, .11), rgba(79, 140, 255, .055)) !important;
    font-size: .71rem !important;
    line-height: 1.1 !important;
    font-weight: 900 !important;
    letter-spacing: .095em !important;
    text-transform: uppercase !important;
}

/* ==========================================================================
   LAYOUT — keep original proportions and give them breathing room
   ========================================================================== */
.external-v4 .login-wrapper,
.external-v4 .lookup-page,
.external-v4 .cadastro-page,
.external-v4 .recovery-container,
.external-v4 .reset-container,
.external-v4 .confirm-container {
    width: min(94%, 1380px) !important;
    margin-inline: auto !important;
}

.external-v4 .login-wrapper {
    min-height: calc(100vh - 12rem) !important;
    gap: clamp(2rem, 4vw, 4.2rem) !important;
    padding-top: clamp(2.5rem, 5.6vh, 4.8rem) !important;
    padding-bottom: 2rem !important;
}

.external-v4 .lookup-page,
.external-v4 .cadastro-page {
    gap: clamp(2rem, 4vw, 4rem) !important;
    padding-top: clamp(2.4rem, 5vh, 4.3rem) !important;
    padding-bottom: 2rem !important;
}

/* ==========================================================================
   CARDS — premium like Dashboard, without turning into oversized posters
   ========================================================================== */
.external-v4 .login-card,
.external-v4 .lookup-card,
.external-v4 .cadastro-card,
.external-v4 .confirm-card,
.external-v4 .recovery-card,
.external-v4 .reset-card,
.external-v4 .verify-card,
.external-v4 .planos-card,
.external-v4 .glass-notice-card,
.external-v4 .legal-card,
.external-v4 .error-card,
.external-v4 .feature-card,
.external-v4 .welcome-stat,
.external-v4 .login-side-metric,
.external-v4 .lookup-hero-metric,
.external-v4 .lookup-side-metric,
.external-v4 .cadastro-trust-item,
.external-v4 .recovery-trust-item,
.external-v4 .reset-trust-item,
.external-v4 .confirm-trust-item {
    border-color: var(--x4-border) !important;
    background-color: var(--x4-card) !important;
    box-shadow: var(--x4-shadow-soft) !important;
    backdrop-filter: blur(20px) saturate(1.08) !important;
    -webkit-backdrop-filter: blur(20px) saturate(1.08) !important;
}

.external-v4 .login-card,
.external-v4 .lookup-card,
.external-v4 .cadastro-card,
.external-v4 .confirm-card,
.external-v4 .recovery-card,
.external-v4 .reset-card,
.external-v4 .verify-card,
.external-v4 .glass-notice-card,
.external-v4 .legal-card,
.external-v4 .error-card {
    position: relative !important;
    overflow: hidden !important;
    border: 1px solid var(--x4-border-accent) !important;
    border-radius: 1.25rem !important;
    box-shadow: var(--x4-shadow) !important;
}

.external-v4 .login-card::before,
.external-v4 .lookup-card::before,
.external-v4 .cadastro-card::before,
.external-v4 .confirm-card::before,
.external-v4 .recovery-card::before,
.external-v4 .reset-card::before,
.external-v4 .verify-card::before,
.external-v4 .glass-notice-card::before,
.external-v4 .legal-card::before,
.external-v4 .error-card::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 1.5rem auto !important;
    height: 1px !important;
    background: linear-gradient(90deg, transparent, #8b5cf6 25%, #4f8cff 70%, transparent) !important;
    opacity: .85 !important;
    pointer-events: none !important;
}

.external-v4 .login-card {
    max-width: 500px !important;
    width: 100% !important;
}

.external-v4 .lookup-card {
    max-width: 540px !important;
    width: 100% !important;
}

.external-v4 .cadastro-card {
    max-width: 650px !important;
    width: 100% !important;
}

/* Card headings keep original practical scale */
.external-v4 .login-title,
.external-v4 .lookup-card-title,
.external-v4 .cadastro-title,
.external-v4 .recovery-title,
.external-v4 .reset-title,
.external-v4 .confirm-title,
.external-v4 .verify-title,
.external-v4 .notice-title,
.external-v4 .legal-title,
.external-v4 .error-title {
    color: var(--x4-text) !important;
    font-family: var(--x4-font) !important;
    font-weight: 900 !important;
    letter-spacing: -.035em !important;
}

.external-v4 .login-title {
    font-size: 1.62rem !important;
}

.external-v4 .lookup-card-title,
.external-v4 .cadastro-title,
.external-v4 .recovery-title,
.external-v4 .reset-title,
.external-v4 .confirm-title,
.external-v4 .verify-title {
    font-size: clamp(1.5rem, 2.2vw, 1.9rem) !important;
}

.external-v4 .login-subtitle,
.external-v4 .lookup-card-subtitle,
.external-v4 .cadastro-subtitle,
.external-v4 .recovery-subtitle,
.external-v4 .reset-subtitle,
.external-v4 .confirm-subtitle,
.external-v4 .verify-text,
.external-v4 .notice-desc,
.external-v4 .error-description {
    color: var(--x4-muted) !important;
    font-size: .9rem !important;
    line-height: 1.58 !important;
}

/* Icons */
.external-v4 .login-mark,
.external-v4 .lookup-card-icon,
.external-v4 .cadastro-header-icon,
.external-v4 .recovery-icon,
.external-v4 .reset-icon,
.external-v4 .confirm-icon,
.external-v4 .verify-icon,
.external-v4 .legal-icon,
.external-v4 .error-icon {
    border-color: rgba(139, 92, 246, .24) !important;
    color: #c4b5fd !important;
    background: linear-gradient(145deg, rgba(139, 92, 246, .16), rgba(79, 140, 255, .07)) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06) !important;
}

/* ==========================================================================
   LOGIN — functional micro cards, compact protected environment
   ========================================================================== */
.external-v4 .login-side-metrics {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: .68rem !important;
    margin-top: 1.65rem !important;
}

.external-v4 .login-side-metric {
    min-height: 5.3rem !important;
    padding: .85rem !important;
    border: 1px solid var(--x4-border) !important;
    border-radius: .85rem !important;
    transition: transform .16s ease, border-color .16s ease, background .16s ease !important;
}

.external-v4 .login-side-metric:hover {
    transform: translateY(-2px);
    border-color: rgba(139, 92, 246, .26) !important;
    background: var(--x4-hover) !important;
}

.external-v4 .login-side-metric-icon {
    width: 1.8rem;
    height: 1.8rem;
    display: grid;
    place-items: center;
    margin-bottom: .45rem;
    border-radius: .52rem;
    color: #c4b5fd;
    background: rgba(139, 92, 246, .12);
    font-size: .9rem;
}

.external-v4 .login-side-metric-value {
    display: block;
    color: var(--x4-text) !important;
    font-size: .78rem !important;
    line-height: 1.25 !important;
    font-weight: 900 !important;
}

.external-v4 .login-side-metric-label {
    display: block;
    margin-top: .16rem;
    color: var(--x4-muted) !important;
    font-size: .68rem !important;
    line-height: 1.3 !important;
    font-weight: 650 !important;
}

.external-v4 .x4-protected {
    display: flex;
    align-items: center;
    gap: .7rem;
    margin-top: 1rem;
    padding: .72rem .8rem;
    border: 1px solid var(--x4-border);
    border-radius: .82rem;
    background: var(--x4-soft);
}

.external-v4 .x4-protected-icon {
    width: 2rem;
    height: 2rem;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: .62rem;
    color: #86efac;
    background: rgba(34, 197, 94, .09);
}

.external-v4 .x4-protected strong {
    display: block;
    color: var(--x4-text-2) !important;
    font-size: .76rem;
    line-height: 1.2;
    font-weight: 900;
}

.external-v4 .x4-protected span {
    display: block;
    margin-top: .12rem;
    color: var(--x4-muted) !important;
    font-size: .68rem;
    line-height: 1.35;
    font-weight: 600;
}

/* ==========================================================================
   FORM CONTROLS
   ========================================================================== */
.external-v4 .login-label,
.external-v4 .lookup-label,
.external-v4 .reg-label,
.external-v4 .input-label,
.external-v4 .portal-field label {
    color: var(--x4-muted) !important;
    font-size: .7rem !important;
    font-weight: 900 !important;
    letter-spacing: .095em !important;
    text-transform: uppercase !important;
}

.external-v4 .login-input,
.external-v4 .lookup-input,
.external-v4 .reg-input,
.external-v4 .cadastro-input,
.external-v4 .input-glass,
.external-v4 .portal-input,
.external-v4 .portal-textarea {
    min-height: 3.05rem !important;
    border-color: var(--x4-border) !important;
    border-radius: .82rem !important;
    color: var(--x4-text) !important;
    background: rgba(15, 23, 42, .40) !important;
    font-size: .93rem !important;
    font-weight: 620 !important;
}

html.light .external-v4 .login-input,
html.light .external-v4 .lookup-input,
html.light .external-v4 .reg-input,
html.light .external-v4 .cadastro-input,
html.light .external-v4 .input-glass,
html.light .external-v4 .portal-input,
html.light .external-v4 .portal-textarea {
    background: rgba(248, 250, 252, .92) !important;
}

.external-v4 input::placeholder,
.external-v4 textarea::placeholder {
    color: var(--x4-muted-2) !important;
}

.external-v4 .login-input:focus,
.external-v4 .lookup-input:focus,
.external-v4 .reg-input:focus,
.external-v4 .cadastro-input:focus,
.external-v4 .input-glass:focus,
.external-v4 .portal-input:focus,
.external-v4 .portal-textarea:focus {
    border-color: rgba(139, 92, 246, .58) !important;
    box-shadow: 0 0 0 3px rgba(139, 92, 246, .10) !important;
    outline: none !important;
}

/* ==========================================================================
   ACTIONS
   ========================================================================== */
.external-v4 .btn-login,
.external-v4 .lookup-submit,
.external-v4 .lookup-btn,
.external-v4 .btn-register,
.external-v4 .cadastro-btn,
.external-v4 .btn-recovery,
.external-v4 .recovery-btn,
.external-v4 .btn-reset,
.external-v4 .reset-btn,
.external-v4 .confirm-submit,
.external-v4 .confirm-btn,
.external-v4 .btn-primary,
.external-v4 .btn-resend,
.external-v4 .welcome-btn-primary,
.external-v4 .notice-action-primary,
.external-v4 .error-btn-primary,
.external-v4 .portal-button:not(.portal-button--secondary),
.external-v4 .store-button--primary,
.external-v4 .plano-btn-primary,
.external-v4 .plano-btn-free {
    min-height: 3.05rem !important;
    border-radius: .85rem !important;
    border: 0 !important;
    color: #fff !important;
    background: linear-gradient(105deg, #7c3aed, #6366f1 52%, #4f8cff) !important;
    box-shadow: 0 12px 28px rgba(99, 102, 241, .21) !important;
    font-size: .84rem !important;
    font-weight: 900 !important;
    letter-spacing: .03em !important;
    transition: transform .16s ease, box-shadow .16s ease, filter .16s ease !important;
}

.external-v4 .btn-login:hover,
.external-v4 .lookup-submit:hover,
.external-v4 .lookup-btn:hover,
.external-v4 .btn-register:hover,
.external-v4 .cadastro-btn:hover,
.external-v4 .btn-recovery:hover,
.external-v4 .recovery-btn:hover,
.external-v4 .btn-reset:hover,
.external-v4 .reset-btn:hover,
.external-v4 .confirm-submit:hover,
.external-v4 .confirm-btn:hover,
.external-v4 .btn-primary:hover,
.external-v4 .btn-resend:hover,
.external-v4 .welcome-btn-primary:hover,
.external-v4 .notice-action-primary:hover,
.external-v4 .error-btn-primary:hover,
.external-v4 .portal-button:not(.portal-button--secondary):hover,
.external-v4 .store-button--primary:hover,
.external-v4 .plano-btn-primary:hover,
.external-v4 .plano-btn-free:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 17px 36px rgba(99, 102, 241, .28) !important;
}

.external-v4 .welcome-btn-ghost,
.external-v4 .notice-action-secondary,
.external-v4 .error-btn-secondary,
.external-v4 .portal-button--secondary,
.external-v4 .store-button:not(.store-button--primary),
.external-v4 .plano-btn-secondary,
.external-v4 .login-social-btn,
.external-v4 .btn-back,
.external-v4 .link-secondary {
    border-color: var(--x4-border) !important;
    border-radius: .82rem !important;
    color: var(--x4-text-2) !important;
    background: var(--x4-soft) !important;
    font-weight: 800 !important;
}

/* ==========================================================================
   CADASTRO / LOOKUP — compact, informative and not oversized
   ========================================================================== */
.external-v4 .cadastro-domain-preview,
.external-v4 .lookup-domain-preview,
.external-v4 .cadastro-plan-wrap,
.external-v4 .cadastro-security-box,
.external-v4 .lookup-info-box {
    border-color: var(--x4-border) !important;
    border-radius: .86rem !important;
    background: var(--x4-soft) !important;
}

.external-v4 .cadastro-trust-grid,
.external-v4 .lookup-hero-metrics {
    gap: .65rem !important;
    margin-top: 1.35rem !important;
}

.external-v4 .cadastro-trust-item,
.external-v4 .lookup-hero-metric {
    min-height: 5.7rem !important;
    padding: .8rem !important;
    border: 1px solid var(--x4-border) !important;
    border-radius: .82rem !important;
}

.external-v4 .cadastro-trust-item strong,
.external-v4 .lookup-hero-metric strong {
    color: var(--x4-text-2) !important;
    font-size: .76rem !important;
    font-weight: 900 !important;
}

.external-v4 .cadastro-trust-item span,
.external-v4 .lookup-hero-metric span {
    color: var(--x4-muted) !important;
    font-size: .68rem !important;
    line-height: 1.4 !important;
}

/* ==========================================================================
   HOME
   ========================================================================== */
.external-v4 .welcome-hero {
    width: min(94%, 1260px) !important;
    max-width: 1260px !important;
    padding-top: clamp(4rem, 8vh, 7rem) !important;
    padding-bottom: 2.2rem !important;
}

.external-v4 .welcome-actions {
    gap: .7rem !important;
    margin-top: 1.6rem !important;
}

.external-v4 .welcome-stats {
    width: min(100%, 920px) !important;
    gap: .7rem !important;
    margin-top: 2rem !important;
}

.external-v4 .welcome-stat {
    min-height: 4.7rem !important;
    padding: .8rem !important;
    border: 1px solid var(--x4-border) !important;
    border-radius: .86rem !important;
}

.external-v4 .welcome-stat-value {
    color: var(--x4-text) !important;
    font-size: .9rem !important;
    font-weight: 900 !important;
}

.external-v4 .welcome-stat-label {
    color: var(--x4-muted) !important;
    font-size: .68rem !important;
    font-weight: 700 !important;
}

.external-v4 .features {
    width: min(94%, 1260px) !important;
    max-width: 1260px !important;
    gap: .75rem !important;
}

.external-v4 .feature-card {
    min-height: 10.2rem !important;
    padding: 1.05rem !important;
    border: 1px solid var(--x4-border) !important;
    border-radius: .92rem !important;
    transition: transform .16s ease, border-color .16s ease, background .16s ease !important;
}

.external-v4 .feature-card:hover {
    transform: translateY(-3px) !important;
    border-color: rgba(139, 92, 246, .26) !important;
    background: var(--x4-hover) !important;
}

.external-v4 .feature-title {
    color: var(--x4-text) !important;
    font-size: .94rem !important;
    font-weight: 900 !important;
}

.external-v4 .feature-desc {
    color: var(--x4-muted) !important;
    font-size: .8rem !important;
    line-height: 1.55 !important;
}

/* ==========================================================================
   PLANS
   ========================================================================== */
.external-v4 .planos-page,
.external-v4 .planos-wrapper {
    width: min(96%, 1450px) !important;
    max-width: 1450px !important;
}

.external-v4 .planos-title {
    color: var(--x4-text) !important;
    font-family: var(--x4-font) !important;
    font-size: clamp(2.35rem, 4.4vw, 4rem) !important;
    line-height: 1.02 !important;
    font-weight: 900 !important;
    letter-spacing: -.05em !important;
}

.external-v4 .planos-title span {
    color: transparent !important;
    background: linear-gradient(100deg, #c4b5fd, #8b5cf6 42%, #60a5fa 84%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
}

.external-v4 .plano-item-card {
    border: 1px solid var(--x4-border) !important;
    border-radius: 1rem !important;
    color: var(--x4-text) !important;
    background: var(--x4-card) !important;
    box-shadow: var(--x4-shadow-soft) !important;
    transition: transform .16s ease, border-color .16s ease !important;
}

.external-v4 .plano-item-card:hover {
    transform: translateY(-3px) !important;
    border-color: rgba(139, 92, 246, .28) !important;
}

/* ==========================================================================
   LEGAL / ERRORS
   ========================================================================== */
.external-v4 .empty-state-container,
.external-v4 .legal-container,
.external-v4 .error-page {
    width: min(94%, 1080px) !important;
    margin-inline: auto !important;
    padding-top: clamp(2.5rem, 5vh, 4.5rem) !important;
    padding-bottom: 2rem !important;
}

.external-v4 .legal-content {
    color: var(--x4-text-2) !important;
    font-size: .96rem !important;
    line-height: 1.75 !important;
}

.external-v4 .legal-content h1,
.external-v4 .legal-content h2,
.external-v4 .legal-content h3,
.external-v4 .legal-content strong {
    color: var(--x4-text) !important;
}

/* ==========================================================================
   ASSISTÊNCIA / LOJA ONLINE
   ========================================================================== */
body.assistencia-public-premium.external-v4,
body.store-public-premium.external-v4 {
    font-family: var(--x4-font) !important;
}

.assistencia-public-premium.external-v4 .portal-lookup,
.assistencia-public-premium.external-v4 .portal-shell,
.store-public-premium.external-v4 .store-shell {
    width: min(94%, 1280px) !important;
}

.assistencia-public-premium.external-v4 .portal-brand,
.assistencia-public-premium.external-v4 .portal-card,
.store-public-premium.external-v4 .store-card {
    border: 1px solid var(--x4-border) !important;
    border-radius: 1rem !important;
    color: var(--x4-text) !important;
    background: var(--x4-card) !important;
    box-shadow: var(--x4-shadow-soft) !important;
    backdrop-filter: blur(18px) !important;
}

.assistencia-public-premium.external-v4 .portal-title,
.store-public-premium.external-v4 .store-brand h1 {
    color: var(--x4-text) !important;
    font-family: var(--x4-font) !important;
    font-size: clamp(1.65rem, 3vw, 2.6rem) !important;
    line-height: 1.08 !important;
    font-weight: 900 !important;
    letter-spacing: -.04em !important;
}

.assistencia-public-premium.external-v4 .portal-eyebrow,
.store-public-premium.external-v4 .store-eyebrow {
    color: var(--x4-violet-2) !important;
    font-size: .72rem !important;
    font-weight: 900 !important;
    letter-spacing: .095em !important;
    text-transform: uppercase;
}

.assistencia-public-premium.external-v4 .portal-subtitle,
.assistencia-public-premium.external-v4 .portal-footer,
.store-public-premium.external-v4 .store-copy,
.store-public-premium.external-v4 .store-meta dd {
    color: var(--x4-muted) !important;
}

/* ==========================================================================
   PDV PUBLIC LOGIN ONLY — terminal stays operational
   ========================================================================== */
.pdv-public-page.pdv-login-page.external-v4 .pdv-auth-hero-shell {
    width: min(94%, 1360px) !important;
    gap: clamp(2rem, 4vw, 4rem) !important;
}

.pdv-public-page.pdv-login-page.external-v4 .pdv-auth-side-title {
    font-family: var(--x4-font) !important;
    font-size: clamp(2.35rem, 4vw, 3.8rem) !important;
    line-height: 1.02 !important;
    font-weight: 900 !important;
    letter-spacing: -.05em !important;
}

.pdv-public-page.pdv-login-page.external-v4 .pdv-auth-card-panel {
    border: 1px solid var(--x4-border-accent) !important;
    border-radius: 1.2rem !important;
    background: var(--x4-card) !important;
    box-shadow: var(--x4-shadow) !important;
}

/* ==========================================================================
   SHARED STATUS STRIP
   ========================================================================== */
.x4-platform-strip {
    width: min(94%, 1280px);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .45rem .72rem;
    margin: .9rem auto 1rem;
    padding: .62rem .85rem;
    border: 1px solid var(--x4-border);
    border-radius: .78rem;
    color: var(--x4-muted);
    background: color-mix(in srgb, var(--x4-card) 72%, transparent);
    font-family: var(--x4-font);
    font-size: .69rem;
    line-height: 1.3;
    font-weight: 700;
    backdrop-filter: blur(14px);
}

.x4-platform-strip__dot {
    width: .42rem;
    height: .42rem;
    border-radius: 999px;
    background: var(--x4-green);
    box-shadow: 0 0 0 .2rem rgba(52, 211, 153, .07);
}

.x4-platform-strip__brand {
    color: var(--x4-text-2);
    font-weight: 900;
}

.x4-platform-strip__sep {
    color: var(--x4-muted-2);
}

/* Theme dock only on pages without topbar theme controls */
.x4-theme-dock {
    position: fixed;
    right: .8rem;
    bottom: .8rem;
    z-index: 9998;
    display: flex;
    gap: .22rem;
    padding: .28rem;
    border: 1px solid var(--x4-border);
    border-radius: .82rem;
    background: color-mix(in srgb, var(--x4-card) 94%, transparent);
    box-shadow: var(--x4-shadow-soft);
    backdrop-filter: blur(16px);
}

.x4-theme-dock button {
    width: 2.05rem;
    height: 2.05rem;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: .62rem;
    color: var(--x4-muted);
    background: transparent;
    cursor: pointer;
}

.x4-theme-dock button:hover,
.x4-theme-dock button[aria-pressed="true"] {
    color: #fff;
    background: linear-gradient(135deg, var(--x4-violet), var(--x4-blue));
}

/* ==========================================================================
   ACCESSIBILITY / RESPONSIVE
   ========================================================================== */
.external-v4 :where(a, button, input, textarea, select):focus-visible,
.x4-theme-dock button:focus-visible {
    outline: 2px solid #a78bfa !important;
    outline-offset: 3px !important;
}

@media (max-width: 1180px) {
    .external-v4 .login-wrapper,
    .external-v4 .lookup-page,
    .external-v4 .cadastro-page,
    .external-v4 .recovery-container,
    .external-v4 .reset-container,
    .external-v4 .confirm-container {
        grid-template-columns: 1fr !important;
    }

    .external-v4 .login-side,
    .external-v4 .lookup-hero,
    .external-v4 .lookup-side,
    .external-v4 .cadastro-hero,
    .external-v4 .recovery-hero,
    .external-v4 .reset-hero,
    .external-v4 .confirm-hero {
        max-width: 780px !important;
        margin-inline: auto !important;
    }

    .external-v4 .login-card,
    .external-v4 .lookup-card,
    .external-v4 .cadastro-card,
    .external-v4 .recovery-card,
    .external-v4 .reset-card,
    .external-v4 .confirm-card {
        margin-inline: auto !important;
    }
}

@media (max-width: 760px) {
    body.external-v4 {
        background-attachment: scroll !important;
    }

    .external-v4 .topbar,
    .external-v4 .error-topbar {
        width: calc(100% - 1rem) !important;
        min-height: 3.9rem !important;
        margin-top: .5rem !important;
        padding: .45rem .55rem !important;
        border-radius: .92rem !important;
    }

    .external-v4 .topbar-greeting-wrap,
    .external-v4 .topbar-sep,
    .external-v4 .topbar-weather-city {
        display: none !important;
    }

    .external-v4 .login-wrapper,
    .external-v4 .lookup-page,
    .external-v4 .cadastro-page,
    .external-v4 .recovery-container,
    .external-v4 .reset-container,
    .external-v4 .confirm-container {
        width: calc(100% - 1rem) !important;
        padding-top: 1.7rem !important;
        gap: 1.25rem !important;
    }

    .external-v4 .welcome-title,
    .external-v4 .login-side-title,
    .external-v4 .lookup-hero-title,
    .external-v4 .lookup-side-title,
    .external-v4 .cadastro-hero-title,
    .external-v4 .recovery-hero-title,
    .external-v4 .reset-hero-title,
    .external-v4 .confirm-hero-title {
        font-size: clamp(2rem, 10.5vw, 2.95rem) !important;
    }

    .external-v4 .login-side-metrics,
    .external-v4 .cadastro-trust-grid,
    .external-v4 .lookup-hero-metrics {
        grid-template-columns: 1fr !important;
    }

    .external-v4 .login-side-metric,
    .external-v4 .cadastro-trust-item,
    .external-v4 .lookup-hero-metric {
        min-height: auto !important;
    }

    .external-v4 .welcome-hero {
        width: calc(100% - 1rem) !important;
        padding-top: 3.4rem !important;
    }

    .external-v4 .features {
        width: calc(100% - 1rem) !important;
    }

    .x4-platform-strip {
        width: calc(100% - 1rem);
        justify-content: flex-start;
    }

    .x4-platform-strip__sep {
        display: none;
    }
}

@media (max-width: 460px) {
    .external-v4 .login-card,
    .external-v4 .lookup-card,
    .external-v4 .cadastro-card,
    .external-v4 .recovery-card,
    .external-v4 .reset-card,
    .external-v4 .confirm-card,
    .external-v4 .verify-card {
        border-radius: 1rem !important;
    }

    .external-v4 .theme-actions {
        display: none !important;
    }
}

@media (hover: none) and (pointer: coarse) {
    .external-v4 a:hover,
    .external-v4 button:hover,
    .external-v4 .feature-card:hover,
    .external-v4 .login-side-metric:hover,
    .external-v4 .plano-item-card:hover {
        transform: none !important;
    }

    .external-v4 a,
    .external-v4 button,
    .x4-theme-dock button {
        touch-action: manipulation;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
}


/* ==========================================================================
   D2.4.5 — Ajuste final de proporção aprovado
   --------------------------------------------------------------------------
   1) Home volta a ocupar toda a largura útil do hero, como no layout original.
   2) Status Premium ganha apenas um leve aumento de legibilidade.
   3) Cadastro volta a usar 100% da largura do container, sem coluna vazia.
   ========================================================================== */

.x4-platform-strip {
    font-size: .78rem !important;
}

.x4-platform-strip__brand {
    font-size: .8rem !important;
}

@media (min-width: 761px) {
    .external-v4 .welcome-hero {
        width: 100% !important;
        max-width: none !important;
        min-height: 70vh !important;
        padding: 80px 20px !important;
    }

    .external-v4 .cadastro-page {
        width: calc(100% - 2.5rem) !important;
        max-width: 1260px !important;
        grid-template-columns: 1fr !important;
    }

    .external-v4 .cadastro-card {
        width: 100% !important;
        max-width: none !important;
        margin-inline: 0 !important;
    }
}


/* ==========================================================================
   D2.4.5.2 — Botões da Home com exatamente a mesma dimensão
   ========================================================================== */
@media (min-width: 761px) {
    .external-v4 .welcome-actions .welcome-btn-primary,
    .external-v4 .welcome-actions .welcome-btn-ghost {
        width: 246px !important;
        min-width: 246px !important;
        max-width: 246px !important;
        min-height: 3.05rem !important;
        padding-inline: .95rem !important;
        justify-content: center !important;
        text-align: center !important;
    }
}

@media (max-width: 760px) {
    .external-v4 .welcome-actions .welcome-btn-primary,
    .external-v4 .welcome-actions .welcome-btn-ghost {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        justify-content: center !important;
    }
}