/* Unified app toolbar behavior and visual language */

:root {
    --mx-bg: #0a0a0a;
    --mx-green: #d62976;
    --mx-green-dim: rgba(214, 41, 118, 0.18);
    --mx-border: rgba(255, 255, 255, 0.06);
    --mx-text-mid: #a0a0a0;
    --app-toolbar-top-gap: 6px;
    --app-scroll-y: 0px;
    --app-glass-sheen: 0.5;
    --app-glass-drift: 0;
    --app-glass-shift: 0px;
    --app-glass-depth: 0;
    --app-glass-card-bg: rgba(5, 10, 16, 0.1);
    --app-glass-card-border: rgba(188, 220, 246, 0.11);
    --app-glass-card-border-soft: rgba(188, 220, 246, 0.08);
    --app-glass-card-shadow:
        0 16px 32px rgba(0, 0, 0, 0.2),
        0 1px 0 rgba(255, 255, 255, 0.06) inset,
        0 -10px 18px rgba(80, 150, 220, 0.035) inset;
    --app-toolbar-row-height: 52px;
    --app-toolbar-row-gap: 12px;
    --app-page-max: 1080px;
    --app-page-gutter: 16px;
    --app-shell-max: var(--app-page-max);
    --app-shell-gutter: var(--app-page-gutter);
    /* Brand wordmark source of truth: catalog (.mk-brand) */
    --app-brand-font-family: "Inter", system-ui, -apple-system, sans-serif;
    --app-brand-font-size: 0.9rem;
    --app-brand-font-weight: 700;
    --app-brand-letter-spacing: -0.02em;
    --app-brand-line-height: 1.1;
    --app-brand-color: #ffffff;
    --app-brand-accent: #d62976;
    --app-control-height: 40px;
    --app-control-radius: 12px;
    --app-control-text-color: rgba(240, 248, 255, 0.95);
    --app-control-placeholder-color: rgba(208, 223, 238, 0.55);
    --app-control-bg: linear-gradient(165deg, rgba(7, 12, 18, 0.86), rgba(4, 8, 13, 0.7));
    --app-control-bg-focus: linear-gradient(165deg, rgba(10, 16, 24, 0.9), rgba(6, 10, 16, 0.74));
}

html {
    scroll-padding-top: var(--app-toolbar-offset, 0px);
    min-height: 100%;
    background-color: var(--mx-bg);
}

body {
    min-height: 100%;
    background-color: var(--mx-bg);
}

/* Background must always fill edge-to-edge.
   Page padding is internal to content wrappers, never on body. */
:where(
    body.mk-page,
    body.ac-page,
    body.ac-auth-page,
    body.adm-page,
    body.adm-login-page,
    body.journey-page,
    body.mx-page,
    body.checkout-page
) {
    margin: 0 !important;
    padding: 0 !important;
}

@media (max-width: 760px) {
    :root {
        --app-page-gutter: 12px;
    }
}

.app-toolbar {
    --toolbar-progress: 0;
    position: sticky;
    top: max(0px, env(safe-area-inset-top));
    z-index: 180;
    isolation: isolate;
    opacity: 1;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
    padding-top: var(--app-toolbar-top-gap);
    transition:
        transform 0.44s cubic-bezier(0.2, 0.82, 0.2, 1),
        opacity 0.32s ease-out;
    will-change: transform, opacity;
}

.app-toolbar.is-toolbar-booting {
    transition: none !important;
}

.app-toolbar-slot {
    display: block;
    width: 100%;
    visibility: hidden;
    pointer-events: none;
}

.app-toolbar.is-toolbar-floating {
    position: fixed !important;
    top: max(0px, env(safe-area-inset-top));
}

.app-toolbar > * {
    position: relative;
    z-index: 1;
}

.app-toolbar.app-toolbar--glass {
    background: transparent !important;
}

.app-toolbar.app-toolbar--glass::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 100vw;
    height: calc(100% + 16px);
    transform: translateX(-50%);
    pointer-events: none;
    z-index: 0;
    opacity: calc(0.62 + (0.2 * var(--toolbar-progress, 0)));
    background:
        linear-gradient(
            180deg,
            rgba(5, 10, 16, calc(0.42 + (0.2 * var(--toolbar-progress, 0)))) 0%,
            rgba(5, 10, 16, calc(0.3 + (0.16 * var(--toolbar-progress, 0)))) 54%,
            rgba(5, 10, 16, 0) 100%
        );
    backdrop-filter: saturate(calc(168% + (16% * var(--toolbar-progress, 0)))) blur(calc(20px + (20px * var(--toolbar-progress, 0))));
    -webkit-backdrop-filter: saturate(calc(168% + (16% * var(--toolbar-progress, 0)))) blur(calc(20px + (20px * var(--toolbar-progress, 0))));
    transition: opacity 0.2s linear, background 0.22s linear, backdrop-filter 0.22s linear, -webkit-backdrop-filter 0.22s linear;
}

.app-toolbar.app-toolbar--glass::after {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 100vw;
    height: 100%;
    transform: translateX(-50%);
    pointer-events: none;
    z-index: 0;
    opacity: calc(0.08 + (0.1 * var(--toolbar-progress, 0)));
    background:
        radial-gradient(120% 64% at calc(8% + (var(--app-glass-sheen, 0.5) * 72%)) calc(-34% + (var(--app-glass-shift, 0px) * 0.58)),
            rgba(255, 255, 255, 0.18) 0%,
            rgba(210, 234, 255, 0.08) 30%,
            rgba(255, 255, 255, 0) 72%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.025) 36%, rgba(255, 255, 255, 0) 100%);
    transition: opacity 0.22s linear;
}

.app-toolbar.is-toolbar-at-top {
    --toolbar-progress: 0;
}

.app-toolbar.is-toolbar-hidden {
    transform: translateY(calc(-100% - env(safe-area-inset-top) - 8px));
    opacity: 0.02;
    pointer-events: none;
}

/* Unified app background to match experience on every toolbar-enabled page.
   Applied both by class (JS) and by known page classes (pre-JS) to avoid flash/cut. */
html.has-app-toolbar-root,
body.has-app-toolbar,
body.journey-page,
body.mx-page,
body.checkout-page,
body.mk-page,
body.adm-page,
body.adm-login-page,
body.ac-page,
body.ac-auth-page {
    background: var(--mx-bg) !important;
    background-repeat: repeat !important;
    background-attachment: scroll !important;
    background-size: auto !important;
    color: #fff;
}

html.has-app-toolbar-root,
body.has-app-toolbar {
    min-height: 100%;
}

/* Toolbar branding and action buttons aligned to experience */
.app-toolbar .mx-logo,
.app-toolbar .j-logo,
.app-toolbar .mk-brand,
.app-toolbar .ac-brand,
.app-toolbar .adm-auth-brand,
.app-toolbar .logo,
.app-toolbar .co-brand-inline {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    align-self: center !important;
    min-height: 30px !important;
    margin: 0 !important;
    padding: 0 !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    font-family: var(--app-brand-font-family) !important;
    font-weight: var(--app-brand-font-weight) !important;
    font-size: var(--app-brand-font-size) !important;
    letter-spacing: var(--app-brand-letter-spacing) !important;
    color: var(--app-brand-color) !important;
    line-height: var(--app-brand-line-height) !important;
    -webkit-font-smoothing: auto !important;
    -moz-osx-font-smoothing: auto !important;
    text-rendering: geometricPrecision !important;
    font-synthesis: none !important;
    font-variation-settings: "wght" 700 !important;
    text-shadow: none !important;
    filter: none !important;
    opacity: 1 !important;
}

.app-toolbar .mx-logo span,
.app-toolbar .j-logo span,
.app-toolbar .mk-brand span,
.app-toolbar .ac-brand span,
.app-toolbar .adm-auth-brand span,
.app-toolbar .logo span,
.app-toolbar .logo .text-gradient,
.app-toolbar .co-brand-inline span {
    color: var(--app-brand-accent) !important;
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    -webkit-text-fill-color: currentColor !important;
}

/* Unified wordmark everywhere (including footer variants) */
:where(.mx-logo, .j-logo, .mk-brand, .ac-brand, .adm-auth-brand, .co-brand-inline, .logo, .mx-footer-brand, .footer-brand .logo) {
    font-family: var(--app-brand-font-family) !important;
    font-weight: var(--app-brand-font-weight) !important;
    font-size: var(--app-brand-font-size) !important;
    letter-spacing: var(--app-brand-letter-spacing) !important;
    line-height: var(--app-brand-line-height) !important;
    color: var(--app-brand-color) !important;
    text-decoration: none !important;
    -webkit-font-smoothing: auto !important;
    -moz-osx-font-smoothing: auto !important;
    text-rendering: geometricPrecision !important;
    font-synthesis: none !important;
    font-variation-settings: "wght" 700 !important;
    text-shadow: none !important;
    filter: none !important;
    opacity: 1 !important;
}

:where(.mx-logo, .j-logo, .mk-brand, .ac-brand, .adm-auth-brand, .co-brand-inline, .logo, .mx-footer-brand, .footer-brand .logo) span,
.logo .text-gradient,
.footer-brand .logo .text-gradient {
    color: var(--app-brand-accent) !important;
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    -webkit-text-fill-color: currentColor !important;
}

.app-toolbar .mx-header-actions > a,
.app-toolbar .mx-header-actions > button,
.app-toolbar .j-header-actions > a,
.app-toolbar .j-header-actions > button,
.app-toolbar .j-link,
.app-toolbar .mk-actions > a,
.app-toolbar .mk-actions > button,
.app-toolbar .ac-top-actions > a,
.app-toolbar .ac-top-actions > button,
.app-toolbar .adm-topbar-actions > a,
.app-toolbar .adm-topbar-actions > button,
.app-toolbar .co-home {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 30px !important;
    padding: 0 12px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(188, 220, 246, 0.18) !important;
    background: linear-gradient(140deg, rgba(191, 223, 246, 0.09), rgba(191, 223, 246, 0.035)) !important;
    color: rgba(238, 247, 255, 0.95) !important;
    font-size: 0.74rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.01em !important;
    line-height: 1.2 !important;
    text-decoration: none !important;
    transition: border-color 0.15s, color 0.15s, background 0.15s, transform 0.15s !important;
}

.app-toolbar .mx-header-actions > a:hover,
.app-toolbar .mx-header-actions > button:hover,
.app-toolbar .j-header-actions > a:hover,
.app-toolbar .j-header-actions > button:hover,
.app-toolbar .j-link:hover,
.app-toolbar .mk-actions > a:hover,
.app-toolbar .mk-actions > button:hover,
.app-toolbar .ac-top-actions > a:hover,
.app-toolbar .ac-top-actions > button:hover,
.app-toolbar .adm-topbar-actions > a:hover,
.app-toolbar .adm-topbar-actions > button:hover,
.app-toolbar .co-home:hover {
    border-color: rgba(188, 220, 246, 0.32) !important;
    color: #ffffff !important;
    background: linear-gradient(140deg, rgba(191, 223, 246, 0.14), rgba(191, 223, 246, 0.055)) !important;
    transform: translateY(-1px);
}

.app-toolbar .mx-header-actions > .mx-user-login-btn--primary,
.app-toolbar .j-header-actions > .j-nav-btn--primary,
.app-toolbar .mk-actions > .mk-btn--primary,
.app-toolbar .ac-top-actions > .ac-btn--primary,
.app-toolbar .adm-topbar-actions > .adm-btn--primary {
    border-color: rgba(214, 41, 118, 0.78) !important;
    background: linear-gradient(135deg, rgba(214, 41, 118, 0.9), rgba(150, 47, 191, 0.85)) !important;
    color: #ffffff !important;
    font-weight: 800 !important;
}

.app-toolbar .mx-header-actions > .mx-user-login-btn--primary:hover,
.app-toolbar .j-header-actions > .j-nav-btn--primary:hover,
.app-toolbar .mk-actions > .mk-btn--primary:hover,
.app-toolbar .ac-top-actions > .ac-btn--primary:hover,
.app-toolbar .adm-topbar-actions > .adm-btn--primary:hover {
    border-color: rgba(102, 255, 186, 0.96) !important;
    background: linear-gradient(135deg, rgba(36, 255, 144, 0.95), rgba(90, 255, 184, 0.88)) !important;
    color: #031d10 !important;
}

.app-toolbar .mx-header-actions > .mx-user-login-btn--track,
.app-toolbar .j-header-actions > .j-nav-btn--secondary,
.app-toolbar .j-link,
.app-toolbar .mk-actions > .mk-btn--ghost,
.app-toolbar .mk-actions > .mk-link-btn,
.app-toolbar .ac-top-actions > .ac-btn--ghost,
.app-toolbar .adm-topbar-actions > .adm-btn--ghost,
.app-toolbar .adm-topbar-actions > .adm-btn--tiny {
    border-color: rgba(188, 220, 246, 0.16) !important;
    background: linear-gradient(140deg, rgba(191, 223, 246, 0.06), rgba(191, 223, 246, 0.022)) !important;
    color: rgba(255, 255, 255, 0.9) !important;
}

.app-toolbar .mx-header-actions > .mx-user-login-btn--track:hover,
.app-toolbar .j-header-actions > .j-nav-btn--secondary:hover,
.app-toolbar .mk-actions > .mk-btn--ghost:hover,
.app-toolbar .mk-actions > .mk-link-btn:hover,
.app-toolbar .ac-top-actions > .ac-btn--ghost:hover,
.app-toolbar .adm-topbar-actions > .adm-btn--ghost:hover,
.app-toolbar .adm-topbar-actions > .adm-btn--tiny:hover {
    border-color: rgba(188, 220, 246, 0.3) !important;
    background: linear-gradient(140deg, rgba(191, 223, 246, 0.11), rgba(191, 223, 246, 0.04)) !important;
    color: #fff !important;
}

.app-toolbar .adm-user {
    height: 30px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid rgba(188, 220, 246, 0.14);
    background: linear-gradient(140deg, rgba(191, 223, 246, 0.06), rgba(191, 223, 246, 0.022));
    color: rgba(244, 251, 255, 0.86);
    display: inline-flex;
    align-items: center;
    font-size: 0.73rem;
    line-height: 1.2;
}

/* Unified liquid-glass cards across the app */
body.has-app-toolbar:not(.mx-page) :is(
    .ac-card, .ac-login-card, .ac-kpi, .ac-order, .ac-order-grid div, .ac-note, details.ac-order-note-wrap,
    .adm-card, .adm-login-card, .adm-ai-card, .adm-exec-card, .aff-focus-card, .adm-kpi, .adm-mini-list__item, .adm-intel-funnel-row, .adm-table-wrap,
    .mk-card, .mk-message-card, .mk-stat, .mk-filters, .mk-table-wrap, .mk-note, .mk-empty, .mk-logo,
    .co-card, .co-block, .co-success, .co-success__next, .co-result, .co-flow-status, .co-paylog-panel, .co-price-chip,
    .j-card, .j-plan, .card, .j-card-stage, .j-card-toolbar, .j-classe-card, .j-fallback-card, .j-vd-card,
    .pricing-card, .comparison-card, .graph-card, .step-card, .testimonial-card, .chat-sim-card, .visual-card-glass
) {
    position: relative;
    isolation: isolate;
    overflow: clip;
    background:
        linear-gradient(162deg, rgba(195, 228, 255, 0.08) 0%, rgba(160, 212, 255, 0.03) 26%, rgba(129, 193, 255, 0.012) 46%, rgba(255, 255, 255, 0.006) 100%),
        linear-gradient(180deg, rgba(6, 12, 18, 0.25) 0%, rgba(3, 8, 13, 0.16) 100%),
        var(--app-glass-card-bg) !important;
    border-color: var(--app-glass-card-border) !important;
    box-shadow: var(--app-glass-card-shadow) !important;
    backdrop-filter: saturate(180%) blur(28px);
    -webkit-backdrop-filter: saturate(180%) blur(28px);
}

body.has-app-toolbar:not(.mx-page) :is(
    .ac-card, .ac-login-card, .ac-kpi, .ac-order, .ac-order-grid div, .ac-note, details.ac-order-note-wrap,
    .adm-card, .adm-login-card, .adm-ai-card, .adm-exec-card, .aff-focus-card, .adm-kpi, .adm-mini-list__item, .adm-intel-funnel-row, .adm-table-wrap,
    .mk-card, .mk-message-card, .mk-stat, .mk-filters, .mk-table-wrap, .mk-note, .mk-empty, .mk-logo,
    .co-card, .co-block, .co-success, .co-success__next, .co-result, .co-flow-status, .co-paylog-panel, .co-price-chip,
    .j-card, .j-plan, .card, .j-card-stage, .j-card-toolbar, .j-classe-card, .j-fallback-card, .j-vd-card,
    .pricing-card, .comparison-card, .graph-card, .step-card, .testimonial-card, .chat-sim-card, .visual-card-glass
)::before,
body.has-app-toolbar:not(.mx-page) :is(
    .ac-card, .ac-login-card, .ac-kpi, .ac-order, .ac-order-grid div, .ac-note, details.ac-order-note-wrap,
    .adm-card, .adm-login-card, .adm-ai-card, .adm-exec-card, .aff-focus-card, .adm-kpi, .adm-mini-list__item, .adm-intel-funnel-row, .adm-table-wrap,
    .mk-card, .mk-message-card, .mk-stat, .mk-filters, .mk-table-wrap, .mk-note, .mk-empty, .mk-logo,
    .co-card, .co-block, .co-success, .co-success__next, .co-result, .co-flow-status, .co-paylog-panel, .co-price-chip,
    .j-card, .j-plan, .card, .j-card-stage, .j-card-toolbar, .j-classe-card, .j-fallback-card, .j-vd-card,
    .pricing-card, .comparison-card, .graph-card, .step-card, .testimonial-card, .chat-sim-card, .visual-card-glass
)::after {
    content: "";
    position: absolute;
    inset: -1px;
    pointer-events: none;
    z-index: 0;
    border-radius: inherit;
}

body.has-app-toolbar:not(.mx-page) :is(
    .ac-card, .ac-login-card, .ac-kpi, .ac-order, .ac-order-grid div, .ac-note, details.ac-order-note-wrap,
    .adm-card, .adm-login-card, .adm-ai-card, .adm-exec-card, .aff-focus-card, .adm-kpi, .adm-mini-list__item, .adm-intel-funnel-row, .adm-table-wrap,
    .mk-card, .mk-message-card, .mk-stat, .mk-filters, .mk-table-wrap, .mk-note, .mk-empty, .mk-logo,
    .co-card, .co-block, .co-success, .co-success__next, .co-result, .co-flow-status, .co-paylog-panel, .co-price-chip,
    .j-card, .j-plan, .card, .j-card-stage, .j-card-toolbar, .j-classe-card, .j-fallback-card, .j-vd-card,
    .pricing-card, .comparison-card, .graph-card, .step-card, .testimonial-card, .chat-sim-card, .visual-card-glass
)::before {
    background:
        radial-gradient(132% 64% at calc(7% + (var(--app-glass-sheen, 0.5) * 78%)) calc(-28% + (var(--app-glass-shift, 0px) * 0.72)),
            rgba(255, 255, 255, 0.16) 0%,
            rgba(206, 234, 255, 0.07) 24%,
            rgba(166, 212, 255, 0.026) 43%,
            rgba(255, 255, 255, 0) 70%),
        linear-gradient(158deg, rgba(220, 240, 255, 0.06) 0%, rgba(220, 240, 255, 0.015) 38%, rgba(220, 240, 255, 0) 78%);
    opacity: calc(0.4 + (0.05 * var(--app-glass-depth, 0)));
    transform: translate3d(calc(var(--app-glass-drift, 0) * 2px), calc(var(--app-glass-shift, 0px) * -0.22), 0);
    transition: opacity 220ms linear, transform 260ms ease-out;
}

body.has-app-toolbar:not(.mx-page) :is(
    .ac-card, .ac-login-card, .ac-kpi, .ac-order, .ac-order-grid div, .ac-note, details.ac-order-note-wrap,
    .adm-card, .adm-login-card, .adm-ai-card, .adm-exec-card, .aff-focus-card, .adm-kpi, .adm-mini-list__item, .adm-intel-funnel-row, .adm-table-wrap,
    .mk-card, .mk-message-card, .mk-stat, .mk-filters, .mk-table-wrap, .mk-note, .mk-empty, .mk-logo,
    .co-card, .co-block, .co-success, .co-success__next, .co-result, .co-flow-status, .co-paylog-panel, .co-price-chip,
    .j-card, .j-plan, .card, .j-card-stage, .j-card-toolbar, .j-classe-card, .j-fallback-card, .j-vd-card,
    .pricing-card, .comparison-card, .graph-card, .step-card, .testimonial-card, .chat-sim-card, .visual-card-glass
)::after {
    background:
        linear-gradient(128deg, rgba(165, 212, 255, 0.02) 0%, rgba(165, 212, 255, 0) 30%),
        repeating-linear-gradient(112deg, rgba(255, 255, 255, 0.016) 0 1px, rgba(255, 255, 255, 0) 1px 3.8px),
        radial-gradient(120% 110% at 100% 100%, rgba(144, 201, 255, 0.05) 0%, rgba(144, 201, 255, 0) 56%);
    mix-blend-mode: soft-light;
    opacity: calc(0.05 + (0.03 * var(--app-glass-depth, 0)));
}

body.has-app-toolbar:not(.mx-page) :is(
    .ac-card, .ac-login-card, .ac-kpi, .ac-order, .ac-order-grid div, .ac-note, details.ac-order-note-wrap,
    .adm-card, .adm-login-card, .adm-ai-card, .adm-exec-card, .aff-focus-card, .adm-kpi, .adm-mini-list__item, .adm-intel-funnel-row, .adm-table-wrap,
    .mk-card, .mk-message-card, .mk-stat, .mk-filters, .mk-table-wrap, .mk-note, .mk-empty, .mk-logo,
    .co-card, .co-block, .co-success, .co-success__next, .co-result, .co-flow-status, .co-paylog-panel, .co-price-chip,
    .j-card, .j-plan, .card, .j-card-stage, .j-card-toolbar, .j-classe-card, .j-fallback-card, .j-vd-card,
    .pricing-card, .comparison-card, .graph-card, .step-card, .testimonial-card, .chat-sim-card, .visual-card-glass
) > * {
    position: relative;
    z-index: 1;
}

/* Same glass treatment for experience cards (mx-page) */
body.has-app-toolbar.mx-page :is(
    .mx-glass, .mx-plan, .mx-card-shell, .mx-card-hint, .mx-card-load-error, .mx-classe-card, .mx-ctx-card, .mx-done-card, .mx-edu-card,
    .mx-exit-confirm__card, .mx-exit-offer__card, .mx-faq-card, .mx-step-card
) {
    position: relative;
    isolation: isolate;
    overflow: clip;
    background:
        linear-gradient(162deg, rgba(195, 228, 255, 0.08) 0%, rgba(160, 212, 255, 0.03) 26%, rgba(129, 193, 255, 0.012) 46%, rgba(255, 255, 255, 0.006) 100%),
        linear-gradient(180deg, rgba(6, 12, 18, 0.25) 0%, rgba(3, 8, 13, 0.16) 100%),
        var(--app-glass-card-bg) !important;
    border-color: var(--app-glass-card-border) !important;
    box-shadow: var(--app-glass-card-shadow) !important;
    backdrop-filter: saturate(180%) blur(28px);
    -webkit-backdrop-filter: saturate(180%) blur(28px);
}

body.has-app-toolbar.mx-page :is(
    .mx-glass, .mx-plan, .mx-card-shell, .mx-card-hint, .mx-card-load-error, .mx-classe-card, .mx-ctx-card, .mx-done-card, .mx-edu-card,
    .mx-exit-confirm__card, .mx-exit-offer__card, .mx-faq-card, .mx-step-card
)::before,
body.has-app-toolbar.mx-page :is(
    .mx-glass, .mx-plan, .mx-card-shell, .mx-card-hint, .mx-card-load-error, .mx-classe-card, .mx-ctx-card, .mx-done-card, .mx-edu-card,
    .mx-exit-confirm__card, .mx-exit-offer__card, .mx-faq-card, .mx-step-card
)::after {
    content: "";
    position: absolute;
    inset: -1px;
    pointer-events: none;
    z-index: 0;
    border-radius: inherit;
}

body.has-app-toolbar.mx-page :is(
    .mx-glass, .mx-plan, .mx-card-shell, .mx-card-hint, .mx-card-load-error, .mx-classe-card, .mx-ctx-card, .mx-done-card, .mx-edu-card,
    .mx-exit-confirm__card, .mx-exit-offer__card, .mx-faq-card, .mx-step-card
)::before {
    background:
        radial-gradient(132% 64% at calc(7% + (var(--app-glass-sheen, 0.5) * 78%)) calc(-28% + (var(--app-glass-shift, 0px) * 0.72)),
            rgba(255, 255, 255, 0.16) 0%,
            rgba(206, 234, 255, 0.07) 24%,
            rgba(166, 212, 255, 0.026) 43%,
            rgba(255, 255, 255, 0) 70%),
        linear-gradient(158deg, rgba(220, 240, 255, 0.06) 0%, rgba(220, 240, 255, 0.015) 38%, rgba(220, 240, 255, 0) 78%);
    opacity: calc(0.4 + (0.05 * var(--app-glass-depth, 0)));
    transform: translate3d(calc(var(--app-glass-drift, 0) * 2px), calc(var(--app-glass-shift, 0px) * -0.22), 0);
    transition: opacity 220ms linear, transform 260ms ease-out;
}

body.has-app-toolbar.mx-page :is(
    .mx-glass, .mx-plan, .mx-card-shell, .mx-card-hint, .mx-card-load-error, .mx-classe-card, .mx-ctx-card, .mx-done-card, .mx-edu-card,
    .mx-exit-confirm__card, .mx-exit-offer__card, .mx-faq-card, .mx-step-card
)::after {
    background:
        linear-gradient(128deg, rgba(165, 212, 255, 0.02) 0%, rgba(165, 212, 255, 0) 30%),
        repeating-linear-gradient(112deg, rgba(255, 255, 255, 0.016) 0 1px, rgba(255, 255, 255, 0) 1px 3.8px),
        radial-gradient(120% 110% at 100% 100%, rgba(144, 201, 255, 0.05) 0%, rgba(144, 201, 255, 0) 56%);
    mix-blend-mode: soft-light;
    opacity: calc(0.05 + (0.03 * var(--app-glass-depth, 0)));
}

body.has-app-toolbar.mx-page :is(
    .mx-glass, .mx-plan, .mx-card-shell, .mx-card-hint, .mx-card-load-error, .mx-classe-card, .mx-ctx-card, .mx-done-card, .mx-edu-card,
    .mx-exit-confirm__card, .mx-exit-offer__card, .mx-faq-card, .mx-step-card
) > * {
    position: relative;
    z-index: 1;
}

/* Preserve state colors/selection with the new glass baseline */
body.has-app-toolbar.journey-page .j-classe-card:hover {
    background: linear-gradient(160deg, rgba(188, 220, 246, 0.1), rgba(188, 220, 246, 0.035)) !important;
    border-color: rgba(188, 220, 246, 0.24) !important;
}
body.has-app-toolbar.journey-page .j-classe-card.is-selected {
    background: linear-gradient(160deg, rgba(34, 197, 94, 0.11), rgba(34, 197, 94, 0.03)) !important;
    border-color: rgba(34, 197, 94, 0.34) !important;
}
body.has-app-toolbar.journey-page .j-plan:hover {
    background: linear-gradient(160deg, rgba(188, 220, 246, 0.09), rgba(188, 220, 246, 0.03)) !important;
    border-color: rgba(188, 220, 246, 0.22) !important;
}
body.has-app-toolbar.journey-page .j-plan.is-selected {
    background: linear-gradient(160deg, rgba(214, 41, 118, 0.12), rgba(214, 41, 118, 0.035)) !important;
    border-color: rgba(214, 41, 118, 0.34) !important;
}
body.has-app-toolbar.mx-page .mx-classe-card:hover {
    background: linear-gradient(160deg, rgba(188, 220, 246, 0.1), rgba(188, 220, 246, 0.035)) !important;
    border-color: rgba(188, 220, 246, 0.24) !important;
}
body.has-app-toolbar.mx-page .mx-classe-card.is-selected,
body.has-app-toolbar.mx-page .mx-plan.is-selected {
    background: linear-gradient(160deg, rgba(214, 41, 118, 0.12), rgba(214, 41, 118, 0.035)) !important;
    border-color: rgba(214, 41, 118, 0.34) !important;
}
body.has-app-toolbar.mx-page .mx-ctx-card--urgency {
    background: linear-gradient(160deg, rgba(214, 41, 118, 0.09), rgba(214, 41, 118, 0.03)) !important;
    border-color: rgba(214, 41, 118, 0.25) !important;
}
body.has-app-toolbar.mx-page .mx-ctx-card--specialist {
    background: linear-gradient(160deg, rgba(214, 41, 118, 0.08), rgba(214, 41, 118, 0.025)) !important;
    border-color: rgba(214, 41, 118, 0.24) !important;
}
body.has-app-toolbar.mx-page .mx-ctx-card--testimonial {
    background: linear-gradient(160deg, rgba(101, 31, 255, 0.08), rgba(101, 31, 255, 0.025)) !important;
    border-color: rgba(101, 31, 255, 0.24) !important;
}
body.has-app-toolbar.checkout-page .co-flow-status--info {
    border-color: rgba(71, 180, 255, 0.35) !important;
    background: linear-gradient(160deg, rgba(71, 180, 255, 0.11), rgba(71, 180, 255, 0.03)) !important;
}
body.has-app-toolbar.checkout-page .co-flow-status--pending {
    border-color: rgba(255, 196, 74, 0.34) !important;
    background: linear-gradient(160deg, rgba(255, 196, 74, 0.12), rgba(255, 196, 74, 0.03)) !important;
}
body.has-app-toolbar.checkout-page .co-flow-status--ok {
    border-color: rgba(214, 41, 118, 0.35) !important;
    background: linear-gradient(160deg, rgba(214, 41, 118, 0.12), rgba(214, 41, 118, 0.03)) !important;
}
body.has-app-toolbar.checkout-page .co-flow-status--error {
    border-color: rgba(255, 110, 110, 0.36) !important;
    background: linear-gradient(160deg, rgba(255, 110, 110, 0.12), rgba(255, 110, 110, 0.03)) !important;
}

@supports not (overflow: clip) {
    body.has-app-toolbar:not(.mx-page) :is(
        .ac-card, .ac-login-card, .ac-kpi, .ac-order, .ac-order-grid div, .ac-note, details.ac-order-note-wrap,
        .adm-card, .adm-login-card, .adm-ai-card, .adm-exec-card, .aff-focus-card, .adm-kpi, .adm-mini-list__item, .adm-intel-funnel-row, .adm-table-wrap,
        .mk-card, .mk-message-card, .mk-stat, .mk-filters, .mk-table-wrap, .mk-note, .mk-empty, .mk-logo,
        .co-card, .co-block, .co-success, .co-success__next, .co-result, .co-flow-status, .co-paylog-panel, .co-price-chip,
        .j-card, .j-plan, .card, .j-card-stage, .j-card-toolbar, .j-classe-card, .j-fallback-card, .j-vd-card,
        .pricing-card, .comparison-card, .graph-card, .step-card, .testimonial-card, .chat-sim-card, .visual-card-glass
    ) {
        overflow: hidden;
    }
    body.has-app-toolbar.mx-page :is(
        .mx-glass, .mx-plan, .mx-card-shell, .mx-card-hint, .mx-card-load-error, .mx-classe-card, .mx-ctx-card, .mx-done-card, .mx-edu-card,
        .mx-exit-confirm__card, .mx-exit-offer__card, .mx-faq-card, .mx-step-card
    ) {
        overflow: hidden;
    }
}

body.has-app-toolbar:not(.mx-page) :is(
    .ac-form input, .ac-form select, .ac-form textarea,
    .adm-form-grid input, .adm-form-grid textarea, .adm-form-grid select, .adm-filters input, .adm-filters select,
    .mk-form-grid input, .mk-form-grid textarea, .mk-form-grid select, .mk-filters input, .mk-filters select, .mk-filters textarea,
    .co-input-wrap, .co-field input, .co-field select, .co-field textarea
) {
    background: var(--app-control-bg) !important;
    border-color: var(--app-glass-card-border-soft) !important;
    color: var(--app-control-text-color) !important;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 8px 24px rgba(0, 0, 0, 0.16) !important;
}

/* Global control baseline: all text-like inputs and dropdowns share
   same height/background/text color app-wide. */
body.has-app-toolbar :is(
    input[type="text"],
    input[type="search"],
    input[type="email"],
    input[type="number"],
    input[type="tel"],
    input[type="url"],
    input[type="password"],
    input[type="date"],
    input[type="time"],
    input[type="datetime-local"],
    input[type="month"],
    input[type="week"],
    select
) {
    min-height: var(--app-control-height) !important;
    height: var(--app-control-height) !important;
    line-height: 1.2 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    border-radius: var(--app-control-radius) !important;
    background: var(--app-control-bg) !important;
    color: var(--app-control-text-color) !important;
    border-color: var(--app-glass-card-border-soft) !important;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 8px 24px rgba(0, 0, 0, 0.16) !important;
}

body.has-app-toolbar select {
    appearance: none;
    -webkit-appearance: none;
}

body.has-app-toolbar select option,
body.has-app-toolbar select optgroup {
    background: rgba(7, 12, 18, 0.96) !important;
    color: var(--app-control-text-color) !important;
}

body.has-app-toolbar :is(
    input[type="text"],
    input[type="search"],
    input[type="email"],
    input[type="number"],
    input[type="tel"],
    input[type="url"],
    input[type="password"],
    input[type="date"],
    input[type="time"],
    input[type="datetime-local"],
    input[type="month"],
    input[type="week"],
    select
)::placeholder {
    color: var(--app-control-placeholder-color) !important;
}

body.has-app-toolbar :is(
    input[type="text"],
    input[type="search"],
    input[type="email"],
    input[type="number"],
    input[type="tel"],
    input[type="url"],
    input[type="password"],
    input[type="date"],
    input[type="time"],
    input[type="datetime-local"],
    input[type="month"],
    input[type="week"],
    select
):focus {
    background: var(--app-control-bg-focus) !important;
    color: var(--app-control-text-color) !important;
}

body.has-app-toolbar :is(
    input[type="text"],
    input[type="search"],
    input[type="email"],
    input[type="number"],
    input[type="tel"],
    input[type="url"],
    input[type="password"],
    input[type="date"],
    input[type="time"],
    input[type="datetime-local"],
    input[type="month"],
    input[type="week"]
):-webkit-autofill,
body.has-app-toolbar :is(
    input[type="text"],
    input[type="search"],
    input[type="email"],
    input[type="number"],
    input[type="tel"],
    input[type="url"],
    input[type="password"],
    input[type="date"],
    input[type="time"],
    input[type="datetime-local"],
    input[type="month"],
    input[type="week"]
):-webkit-autofill:hover,
body.has-app-toolbar :is(
    input[type="text"],
    input[type="search"],
    input[type="email"],
    input[type="number"],
    input[type="tel"],
    input[type="url"],
    input[type="password"],
    input[type="date"],
    input[type="time"],
    input[type="datetime-local"],
    input[type="month"],
    input[type="week"]
):-webkit-autofill:focus {
    -webkit-text-fill-color: var(--app-control-text-color) !important;
    box-shadow: 0 0 0 1000px rgba(7, 12, 18, 0.92) inset !important;
    transition: background-color 5000s ease-in-out 0s !important;
}

body.has-app-toolbar:not(.mx-page) :is(
    .ac-form input, .ac-form select, .ac-form textarea,
    .adm-form-grid input, .adm-form-grid textarea, .adm-form-grid select, .adm-filters input, .adm-filters select,
    .mk-form-grid input, .mk-form-grid textarea, .mk-form-grid select, .mk-filters input, .mk-filters select, .mk-filters textarea,
    .co-field input, .co-field select, .co-field textarea
)::placeholder {
    color: var(--app-control-placeholder-color) !important;
}

body.has-app-toolbar:not(.mx-page) :is(
    .ac-form input:focus, .ac-form select:focus, .ac-form textarea:focus,
    .adm-form-grid input:focus, .adm-form-grid textarea:focus, .adm-form-grid select:focus, .adm-filters input:focus, .adm-filters select:focus,
    .mk-form-grid input:focus, .mk-form-grid textarea:focus, .mk-form-grid select:focus, .mk-filters input:focus, .mk-filters select:focus, .mk-filters textarea:focus,
    .co-field input:focus, .co-field select:focus, .co-field textarea:focus
) {
    border-color: rgba(188, 220, 246, 0.32) !important;
    background: var(--app-control-bg-focus) !important;
    box-shadow: 0 0 0 2px rgba(188, 220, 246, 0.12), 0 1px 0 rgba(255, 255, 255, 0.08) inset !important;
}

/* Filter action alignment: Filtrar + Cancelar/Limpar always centered with adjacent controls. */
body.has-app-toolbar :is(
    .adm-filter-actions,
    .adm-actions-row,
    .mk-form-actions,
    .mk-filters .mk-form-actions,
    .mk-filters .adm-actions-row,
    .ac-filters .ac-form-actions,
    .co-filters .co-form-actions
) {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    min-height: var(--app-control-height) !important;
}

body.has-app-toolbar :is(
    .adm-filter-actions .adm-btn,
    .adm-actions-row .adm-btn,
    .mk-form-actions .mk-btn,
    .mk-form-actions .mk-link-btn,
    .mk-filters .mk-btn,
    .mk-filters .mk-link-btn,
    .ac-filters .ac-btn,
    .co-filters .co-btn
) {
    min-height: var(--app-control-height) !important;
    height: var(--app-control-height) !important;
    line-height: 1.2 !important;
}

/* Metric cards: number + label must stay centered for direct reading. */
body.has-app-toolbar :is(.adm-kpi, .ac-kpi, .mk-stat, .mx-stat) {
    text-align: center !important;
    align-items: center !important;
    justify-content: center !important;
}

body.has-app-toolbar :is(.adm-kpi span, .adm-kpi strong, .ac-kpi span, .ac-kpi strong, .mk-stat span, .mk-stat strong, .mx-stat-num, .mx-stat-label) {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

body.has-app-toolbar:not(.mx-page) :is(.adm-table th, .mk-table th, .ac-table th) {
    background: linear-gradient(180deg, rgba(191, 223, 246, 0.11), rgba(191, 223, 246, 0.05)) !important;
    border-color: var(--app-glass-card-border-soft) !important;
}

/* Global table system: glass baseline + horizontal scroll + resize/sort controls.
   Applied by JS enhancer (.mnh-table*) to every table in the app. */
.mnh-table-wrap {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    border: 1px solid var(--app-glass-card-border-soft);
    border-radius: 14px;
    background:
        linear-gradient(165deg, rgba(7, 12, 18, 0.82), rgba(4, 8, 13, 0.68)),
        var(--app-glass-card-bg);
    box-shadow:
        0 14px 30px rgba(0, 0, 0, 0.2),
        0 1px 0 rgba(255, 255, 255, 0.05) inset;
    scrollbar-width: thin;
    scrollbar-color: rgba(188, 220, 246, 0.26) rgba(0, 0, 0, 0.22);
}

.mnh-table-wrap::-webkit-scrollbar {
    height: 8px;
}

.mnh-table-wrap::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.22);
    border-radius: 999px;
}

.mnh-table-wrap::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(188, 220, 246, 0.35), rgba(188, 220, 246, 0.2));
    border-radius: 999px;
}

.mnh-table {
    width: 100%;
    min-width: var(--mnh-table-min-width, 760px);
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
}

.mnh-table :is(th, td) {
    min-width: 0;
    max-width: 100%;
    padding: 10px 12px;
    border-bottom: 1px solid var(--app-glass-card-border-soft);
    vertical-align: middle;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    overflow-wrap: normal;
    word-break: normal;
    line-height: 1.3;
}

.mnh-table th {
    position: sticky;
    top: 0;
    z-index: 2;
    color: rgba(229, 242, 255, 0.96);
    background: linear-gradient(180deg, rgba(191, 223, 246, 0.14), rgba(191, 223, 246, 0.05));
    font-weight: 700;
    font-size: 0.78rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    padding-right: 42px;
}

.mnh-table td {
    color: rgba(224, 238, 248, 0.96);
    font-size: 0.84rem;
}

.mnh-table thead tr:first-child th:first-child {
    border-top-left-radius: 12px;
}

.mnh-table thead tr:first-child th:last-child {
    border-top-right-radius: 12px;
}

.mnh-table tbody tr:last-child td {
    border-bottom: none;
}

.mnh-table tbody tr:last-child td:first-child {
    border-bottom-left-radius: 12px;
}

.mnh-table tbody tr:last-child td:last-child {
    border-bottom-right-radius: 12px;
}

.mnh-table th .mnh-table__sort {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    border: 0;
    background: transparent;
    color: rgba(198, 221, 240, 0.94);
    font-size: 0.7rem;
    line-height: 1;
    padding: 0;
    cursor: pointer;
}

.mnh-table th .mnh-table__sort:hover {
    color: #ffffff;
}

.mnh-table th .mnh-table__sort::before {
    content: "↕";
}

.mnh-table th.is-sort-asc .mnh-table__sort::before {
    content: "↑";
}

.mnh-table th.is-sort-desc .mnh-table__sort::before {
    content: "↓";
}

.mnh-table th .mnh-table__resize {
    position: absolute;
    top: 0;
    right: 0;
    width: 10px;
    height: 100%;
    cursor: col-resize;
    user-select: none;
}

.mnh-table th .mnh-table__resize::before {
    content: "";
    position: absolute;
    top: 20%;
    right: 2px;
    width: 2px;
    height: 60%;
    border-radius: 2px;
    background: rgba(188, 220, 246, 0.38);
}

.mnh-table th .mnh-table__resize:hover::before {
    background: rgba(188, 220, 246, 0.72);
}

.mnh-table.is-resizing,
.mnh-table.is-resizing * {
    cursor: col-resize !important;
    user-select: none !important;
}

/* Keep existing table wrappers visually consistent with global contract */
body.has-app-toolbar :is(.adm-table-wrap, .ac-table-wrap, .mk-table-wrap, .admin-table-scroll, .mx-inpi-table-wrap, .j-inpi-table-wrap) {
    border-radius: 14px !important;
    overflow: auto !important;
}

/* Experience collapsible FAQ cards: rounded dark glass */
body.has-app-toolbar.mx-page .mx-faq-card {
    border: 1px solid var(--app-glass-card-border) !important;
    border-radius: 14px !important;
    background:
        linear-gradient(165deg, rgba(7, 12, 18, 0.78), rgba(4, 8, 13, 0.62)),
        var(--app-glass-card-bg) !important;
    margin-bottom: 10px;
    overflow: hidden;
}
body.has-app-toolbar.mx-page .mx-faq-card:first-child {
    border-top: 1px solid var(--app-glass-card-border) !important;
}
body.has-app-toolbar.mx-page .mx-faq-card summary {
    padding: 14px 14px !important;
}
body.has-app-toolbar.mx-page .mx-faq-card p {
    padding: 0 14px 14px !important;
}

/* Marketplace/account empty states: keep dark glass (no light gray gradient). */
body.has-app-toolbar.mk-page .mk-empty {
    background:
        linear-gradient(165deg, rgba(5, 10, 16, 0.88), rgba(3, 8, 13, 0.72)),
        var(--app-glass-card-bg) !important;
    border: 1px solid rgba(188, 220, 246, 0.14) !important;
    color: rgba(220, 234, 246, 0.86) !important;
    box-shadow:
        0 16px 30px rgba(0, 0, 0, 0.24),
        0 1px 0 rgba(255, 255, 255, 0.05) inset !important;
}

/* Checkout headers inside cards should keep the same visual style
   without floating behavior to avoid overlap over form fields. */
.app-toolbar.app-toolbar--no-float,
.app-toolbar.app-toolbar--no-float.is-toolbar-floating {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: auto !important;
    transform: none !important;
    opacity: 1 !important;
}

/* Keep toolbar layout spacing coherent across screens */
.app-toolbar .mx-header-actions,
.app-toolbar .j-header-actions,
.app-toolbar .mk-actions,
.app-toolbar .ac-top-actions,
.app-toolbar .adm-topbar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    align-self: center;
}

/* Toolbar row normalization: same logo line and spacing across the app. */
.app-toolbar:is(.mx-header, .j-header, .mk-top, .ac-top, .adm-topbar) {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: var(--app-toolbar-row-gap) !important;
    min-height: var(--app-toolbar-row-height) !important;
    padding-top: var(--app-toolbar-top-gap) !important;
    width: min(var(--app-shell-max), calc(100vw - (var(--app-shell-gutter) * 2))) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.app-toolbar:is(.mx-header, .j-header, .mk-top, .ac-top, .adm-topbar) > :first-child,
.app-toolbar:is(.mx-header, .j-header, .mk-top, .ac-top, .adm-topbar) > :last-child {
    align-self: center !important;
}

/* Keep toolbar height exactly like experience:
   strip verbose text blocks that inflate header rows on some screens. */
.app-toolbar.mk-top > div:first-child > :not(.mk-brand) {
    display: none !important;
}

.app-toolbar .adm-topbar-main {
    display: flex !important;
    align-items: center !important;
    gap: 0 !important;
}

.app-toolbar .adm-topbar-main > :not(.adm-auth-brand) {
    display: none !important;
}

.app-toolbar .adm-topbar-main .adm-auth-brand {
    margin: 0 !important;
}

/* Toolbar action buttons: exact experience metrics everywhere */
.app-toolbar :is(
    .mx-header-actions > a,
    .mx-header-actions > button,
    .j-header-actions > a,
    .j-header-actions > button,
    .mk-actions > a,
    .mk-actions > button,
    .ac-top-actions > a,
    .ac-top-actions > button,
    .adm-topbar-actions > a,
    .adm-topbar-actions > button
) {
    height: 30px !important;
    min-height: 30px !important;
    padding: 0 12px !important;
    border-radius: 999px !important;
    font-size: 0.74rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.01em !important;
    line-height: 1.2 !important;
}

/* Landing/outer container normalization when toolbar wraps a .container node. */
.app-toolbar > .container,
.app-toolbar > nav.container {
    max-width: var(--app-shell-max) !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
}

/* Page shell normalization:
   uses marketplace gutter as the global horizontal baseline
   for the whole app content, not only header/title rows. */
:where(body.has-app-toolbar, body.checkout-page) :is(
    .mk-wrap, .ac-wrap, .ac-login-wrap, .adm-login-main, .j-main, .co-main
) {
    width: min(var(--app-shell-max), calc(100vw - (var(--app-shell-gutter) * 2))) !important;
    max-width: min(var(--app-shell-max), calc(100vw - (var(--app-shell-gutter) * 2))) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
}

:where(body.has-app-toolbar, body.checkout-page) :is(
    .mk-wrap, .ac-wrap, .ac-login-wrap, .adm-login-main, .j-main, .co-main
) {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Keep original vertical spacing per page while standardizing horizontal rails */
body.mk-page .mk-wrap {
    padding-top: 16px !important;
    padding-bottom: 16px !important;
}
body.ac-page .ac-wrap {
    padding-top: 16px !important;
    padding-bottom: 16px !important;
}
body.ac-auth-page .ac-login-wrap,
body.adm-login-page .adm-login-main {
    padding-top: 10px !important;
}
body.checkout-page .co-main {
    padding-top: max(20px, env(safe-area-inset-top)) !important;
    padding-bottom: max(40px, env(safe-area-inset-bottom)) !important;
}
body.journey-page .j-main {
    padding-top: 12px !important;
    padding-bottom: max(40px, env(safe-area-inset-bottom)) !important;
}
body.mx-page .mx-hero {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
body.mx-page .mx-workspace {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
body.mx-page:not(.legal-page) .mx-app {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Admin/affiliate pages have direct children under body:
   align every top-level content block to the same page rail. */
body.adm-page > :not(.app-toolbar):not(.app-toolbar-slot):not(script):not(style):not(link):not(.adm-modal):not([class*="modal"]):not(.adm-toast):not([class*="toast"]),
body.adm-login-page > :not(.app-toolbar):not(.app-toolbar-slot):not(script):not(style):not(link):not(.adm-modal):not([class*="modal"]):not(.adm-toast):not([class*="toast"]) {
    width: min(var(--app-shell-max), calc(100vw - (var(--app-shell-gutter) * 2))) !important;
    max-width: min(var(--app-shell-max), calc(100vw - (var(--app-shell-gutter) * 2))) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
}

@media (max-width: 760px) {
    body.mk-page .mk-wrap,
    body.ac-page .ac-wrap {
        padding-top: 12px !important;
        padding-bottom: 12px !important;
    }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .app-toolbar.app-toolbar--glass::before {
        background: linear-gradient(180deg, rgba(10, 15, 21, 0.58) 0%, rgba(10, 15, 21, 0.42) 55%, rgba(10, 15, 21, 0) 100%);
    }
}

/* Context breadcrumb: reusable navigation pattern */
.app-breadcrumb {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
    margin: 10px 0 12px;
    padding: 0 2px;
    font-size: 0.76rem;
    color: rgba(232, 237, 244, 0.72);
    line-height: 1.3;
}

.app-breadcrumb a {
    color: rgba(232, 237, 244, 0.86);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color 0.16s ease, border-color 0.16s ease;
}

.app-breadcrumb a:hover {
    color: #ffffff;
    border-bottom-color: rgba(255, 255, 255, 0.45);
}

.app-breadcrumb__sep {
    opacity: 0.45;
    user-select: none;
}

.app-breadcrumb [aria-current="page"] {
    color: #ffffff;
    font-weight: 600;
}

/* ================================================================
   UI Contract (global component standards for all screens)
   ================================================================ */

:root {
    --app-ui-radius-card: 20px;
    --app-ui-radius-input: 12px;
    --app-ui-radius-control: 12px;
    --app-ui-focus-ring: 0 0 0 2px rgba(188, 220, 246, 0.18);
}

/* Checkout header can use toolbar glass without sticky/floating behavior */
.app-toolbar.co-card__head,
.app-toolbar.co-card__head.is-toolbar-floating {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    margin: 0 !important;
    padding-top: 0 !important;
    transform: none !important;
    opacity: 1 !important;
}

.app-toolbar.co-card__head::before {
    height: 100% !important;
    opacity: 0.54 !important;
}

/* Uniform control geometry and text alignment */
:where(body.has-app-toolbar, body.checkout-page) :is(
    .mx-btn, .mx-cta, .mx-search-btn, .mx-dispute-search-btn, .mx-contact-btn, .mx-copy-btn, .mx-dev-btn, .mx-cart-btn, .mx-track-lookup__btn, .mx-track-screen__btn,
    .j-btn, .j-nav-btn, .j-link, .j-inpi-btn, .j-classe-ai__item-btn,
    .mk-btn, .mk-link-btn,
    .ac-btn,
    .adm-btn,
    .co-action, .co-copy-btn, .co-link-out, .co-pay-tab, .co-home, .co-paylog-fab,
    .hero-button, .cp-btn, .chat-option-btn, .chat-whatsapp-btn, .pulse-btn
) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1.2;
    border-radius: var(--app-ui-radius-control);
}

:where(body.has-app-toolbar, body.checkout-page) :is(
    .mx-btn, .mx-cta, .mx-search-btn, .mx-dispute-search-btn, .mx-contact-btn, .mx-copy-btn, .mx-dev-btn, .mx-cart-btn, .mx-track-lookup__btn, .mx-track-screen__btn,
    .j-btn, .j-nav-btn, .j-link, .j-inpi-btn, .j-classe-ai__item-btn,
    .mk-btn, .mk-link-btn,
    .ac-btn,
    .adm-btn,
    .co-action, .co-copy-btn, .co-link-out, .co-pay-tab, .co-home, .co-paylog-fab,
    .hero-button, .cp-btn, .chat-option-btn, .chat-whatsapp-btn, .pulse-btn
):focus-visible {
    outline: none;
    box-shadow: var(--app-ui-focus-ring);
}

/* Uniform fields style baseline */
:where(body.has-app-toolbar, body.checkout-page) :is(input, select, textarea):not([type="checkbox"]):not([type="radio"]):not([type="range"]) {
    border-radius: var(--app-ui-radius-input);
}

:where(body.has-app-toolbar, body.checkout-page) :is(input, select, textarea):not([type="checkbox"]):not([type="radio"]):not([type="range"]):focus-visible {
    outline: none;
    box-shadow: var(--app-ui-focus-ring);
}

/* Uniform card radius baseline */
:where(body.has-app-toolbar, body.checkout-page) :is(
    .mx-glass, .mx-plan, .mx-card-shell, .mx-classe-card, .mx-ctx-card, .mx-done-card, .mx-edu-card, .mx-faq-card, .mx-step-card, .mx-exit-offer__card, .mx-exit-confirm__card,
    .j-card, .j-plan, .j-card-stage, .j-card-toolbar, .j-classe-card, .j-fallback-card, .j-vd-card, .card,
    .mk-card, .mk-message-card, .mk-stat, .mk-filters, .mk-table-wrap, .mk-note, .mk-empty, .mk-logo,
    .ac-card, .ac-login-card, .ac-kpi, .ac-order, .ac-note, .ac-table-wrap,
    .adm-card, .adm-login-card, .adm-ai-card, .adm-exec-card, .adm-kpi, .adm-mini-list__item, .adm-intel-funnel-row, .adm-table-wrap,
    .co-card, .co-block, .co-result, .co-success, .co-success__next, .co-flow-status, .co-paylog-panel, .co-price-chip
) {
    border-radius: var(--app-ui-radius-card);
}

/* Media blocks/images should never bleed outside rounded cards */
:where(body.has-app-toolbar, body.checkout-page) :is(
    .mk-card img, .mk-logo img, .ac-card img, .adm-card img, .co-result img, .co-success img, .j-card img, .mx-glass img
) {
    border-radius: 12px;
}

@media (prefers-reduced-motion: reduce) {
    .app-toolbar {
        transition: none !important;
    }
    .app-toolbar.app-toolbar--glass::before {
        transition: none !important;
    }
}