/* KeyboxHub interaction layer: motion, ads, viewport dialogs and floating feedback. */

:root {
    --kb-motion-out: cubic-bezier(.22, 1, .36, 1);
    --kb-motion-in: cubic-bezier(.4, 0, 1, 1);
    --kb-motion-fast: 180ms;
    --kb-motion-normal: 340ms;
    --kb-motion-dialog: 420ms;
}

/* Loading canvas stays flat. VIP keeps the gold identity; other surfaces are monochrome. */
html[data-kb-boot="pending"],
html[data-kb-boot="pending"] body,
.kb-boot-screen {
    background: #0b0b0c !important;
    background-image: none !important;
}
html[data-kb-theme="light"][data-kb-boot="pending"],
html[data-kb-theme="light"][data-kb-boot="pending"] body,
html[data-kb-theme="light"] .kb-boot-screen { background: #f2f2f7 !important; }
.kb-boot-screen::before,.kb-boot-screen::after { content: none !important; display: none !important; }
.kb-boot-screen { transition: none !important; }
html:not([data-kb-boot-page="vip"]) .kb-boot-mark {
    background: linear-gradient(145deg,#fff,#d9d9de 58%,#a8a8b0) !important;
    color: #111114 !important;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.1),0 10px 24px rgba(0,0,0,.2) !important;
}
html[data-kb-theme="light"]:not([data-kb-boot-page="vip"]) .kb-boot-mark {
    background: linear-gradient(145deg,#242428,#101012) !important;
    color: #fff !important;
}
html:not([data-kb-boot-page="vip"]) .kb-boot-track::after { background: linear-gradient(90deg,transparent,#f7f7f9,transparent) !important; }
html[data-kb-theme="light"]:not([data-kb-boot-page="vip"]) .kb-boot-track::after { background: linear-gradient(90deg,transparent,#202024,transparent) !important; }
html[data-kb-boot="ready"] .kb-boot-screen {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: none !important;
}

/* Navigation geometry has one final owner. */
@media (min-width: 761px) {
    .kb-liquid-nav {
        left: 50% !important; right: auto !important; transform: translateX(-50%) !important;
        width: min(1120px,calc(100vw - 32px)) !important; max-width: calc(100vw - 32px) !important;
        display: grid !important; grid-template-columns: minmax(150px,1fr) minmax(360px,auto) minmax(150px,1fr) !important;
        gap: 14px !important; padding: 9px 12px !important;
    }
    .kb-liquid-brand { justify-self: start !important; min-width: 0 !important; }
    .kb-liquid-links { justify-self: center !important; width: auto !important; gap: 6px !important; padding: 3px !important; }
    .kb-theme-switch { justify-self: end !important; }
    .kb-liquid-link { flex: 0 1 126px !important; min-width: 90px !important; min-height: 38px !important; padding: 0 13px !important; transform: none !important; }
}
@media (max-width: 760px) {
    .kb-liquid-nav { left: 10px !important; right: 10px !important; transform: none !important; width: auto !important; max-width: none !important; height: 76px !important; padding: 7px !important; }
    .kb-liquid-links { width: 100% !important; height: 100% !important; display: grid !important; grid-template-columns: repeat(4,minmax(0,1fr)) !important; gap: 4px !important; padding: 0 !important; }
    .kb-liquid-link { width: 100% !important; min-width: 0 !important; height: 62px !important; min-height: 62px !important; padding: 7px 2px !important; transform: none !important; border-radius: 18px !important; }
}

/* Advertisement: one sticky no-fill state. It clears only after an explicit filled creative.
   The neutral support card sits outside the ad-marked/x-show shell so cosmetic blockers cannot
   hide the fallback. Keep every shell selector below body so a bad root marker cannot hide it. */
body .kb-ad-shell { width: 100% !important; max-width: 100% !important; text-decoration: none !important; }
body .kb-ad-shell :is(a,button,p,h3,span,strong,small) { text-decoration: none !important; }
body .kb-ad-shell[data-kb-ad-state="empty"] { display: none !important; }
.kb-support-card {
    display: none; width: 100%; min-height: 126px; grid-template-columns: auto minmax(0,1fr) auto;
    align-items: center; gap: 16px; padding: 22px; border: 0; border-radius: 24px;
    background: linear-gradient(145deg,rgba(255,255,255,.075),transparent 62%),rgba(25,25,30,.9);
    color: #b3b3bc; box-shadow: inset 0 0 0 1px rgba(255,255,255,.11),0 16px 38px rgba(0,0,0,.22);
    text-align: left; opacity: 0; transform: translateY(8px) scale(.985);
    transition: opacity var(--kb-motion-normal) ease,transform var(--kb-motion-normal) var(--kb-motion-out);
}
.kb-support-card[data-kb-support-state="empty"] { display: grid !important; opacity: 1; visibility: visible !important; transform: none; }
html[data-kb-theme="light"] .kb-support-card { background: linear-gradient(145deg,rgba(255,255,255,.98),rgba(255,255,255,.2) 64%),rgba(246,246,249,.96); color: #62626b; box-shadow: inset 0 0 0 1px rgba(25,25,31,.1),0 15px 34px rgba(34,38,52,.1); }
.kb-support-heart { display: grid; width: 52px; height: 52px; place-items: center; border-radius: 17px; background: rgba(248,113,113,.11); color: #f87171; box-shadow: inset 0 0 0 1px rgba(248,113,113,.18); }
.kb-support-heart svg { width: 24px; height: 24px; fill: currentColor; }
.kb-support-copy { display: grid; min-width: 0; gap: 5px; }
.kb-support-copy strong { color: #f6f6f8; font-size: 15px; font-weight: 790; line-height: 1.25; letter-spacing: -.018em; }
.kb-support-copy span { font-size: 12px; line-height: 1.5; }
html[data-kb-theme="light"] .kb-support-copy strong { color: #202025; }
.kb-support-card button {
    appearance: none !important; display: inline-flex !important; align-items: center; justify-content: center;
    min-height: 44px; padding: 0 18px; border: 0 !important; border-radius: 14px;
    background: rgba(255,255,255,.09) !important; color: #f6f6f8 !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.09) !important;
    font-family: -apple-system,BlinkMacSystemFont,"SF Pro Text",Inter,"Segoe UI",sans-serif !important;
    font-size: 14px !important; font-weight: 700 !important; line-height: 1 !important; letter-spacing: -.012em !important;
    text-transform: none !important; cursor: pointer;
}
html[data-kb-theme="light"] .kb-support-card button { background: rgba(20,20,24,.065) !important; color: #202025 !important; box-shadow: inset 0 0 0 1px rgba(20,20,24,.08) !important; }
@media (max-width: 560px) { .kb-support-card { min-height: 0; grid-template-columns: 48px minmax(0,1fr); gap: 13px; padding: 18px; border-radius: 22px; } .kb-support-card button { grid-column: 1/-1; width: 100%; } }

/* Floating notifications: explicit hidden/open/leaving states and viewport-safe centering. */
#kb157-island,.kb157-island,.kb-checker-toast {
    left: max(10px,env(safe-area-inset-left,0px)) !important;
    right: max(10px,env(safe-area-inset-right,0px)) !important;
    width: auto !important; margin-inline: auto !important; box-sizing: border-box !important;
    opacity: 0 !important; visibility: hidden !important; pointer-events: none !important;
    will-change: transform,opacity;
    transition: opacity var(--kb-motion-fast) ease,transform var(--kb-motion-normal) var(--kb-motion-out),visibility 0s linear var(--kb-motion-normal) !important;
}
#kb157-island,.kb157-island { max-width: 390px !important; transform: translate3d(0,-18px,0) scale(.9) !important; transform-origin: top center !important; }
.kb-checker-toast { max-width: 420px !important; transform: translate3d(0,18px,0) scale(.95) !important; }
#kb157-island.is-visible,.kb157-island.is-visible,.kb-checker-toast.is-visible {
    opacity: 1 !important; visibility: visible !important; pointer-events: auto !important;
    transform: translate3d(0,0,0) scale(1) !important;
    transition: opacity var(--kb-motion-fast) ease,transform var(--kb-motion-normal) var(--kb-motion-out),visibility 0s !important;
}
#kb157-island.is-leaving,.kb157-island.is-leaving { transform: translate3d(0,-10px,0) scale(.96) !important; }
.kb-checker-toast.is-leaving { transform: translate3d(0,10px,0) scale(.97) !important; }
.kb157-island-copy { min-width: 0 !important; max-width: 100% !important; overflow: hidden !important; }
.kb157-island-message { display: -webkit-box !important; overflow: hidden !important; white-space: normal !important; overflow-wrap: anywhere !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 2 !important; }
.kb157-name-callout { max-width: calc(100vw - 24px) !important; box-sizing: border-box !important; overflow-wrap: anywhere !important; }

/* Viewport dialogs animate as a backdrop + sheet pair; no transform:none overrides. */
.kb-motion-dialog {
    position: fixed !important; inset: 0 !important; width: auto !important; max-width: none !important;
    min-height: 100svh !important; height: 100dvh !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    padding: max(14px,env(safe-area-inset-top,0px)) max(14px,env(safe-area-inset-right,0px)) max(14px,env(safe-area-inset-bottom,0px)) max(14px,env(safe-area-inset-left,0px)) !important;
    overflow: hidden !important; isolation: isolate !important; z-index: 2147482200 !important;
    background: rgba(11,11,12,0) !important; -webkit-backdrop-filter: blur(0) saturate(100%) !important; backdrop-filter: blur(0) saturate(100%) !important;
    opacity: 0 !important; visibility: hidden !important; pointer-events: none !important;
    transition: opacity 240ms ease,background-color 300ms ease,backdrop-filter var(--kb-motion-dialog) var(--kb-motion-out),-webkit-backdrop-filter var(--kb-motion-dialog) var(--kb-motion-out),visibility 0s linear var(--kb-motion-dialog) !important;
}
.kb-motion-dialog.is-open {
    opacity: 1 !important; visibility: visible !important; pointer-events: auto !important;
    background: rgba(11,11,12,.76) !important; -webkit-backdrop-filter: blur(18px) saturate(125%) !important; backdrop-filter: blur(18px) saturate(125%) !important;
    transition: opacity 220ms ease,background-color 300ms ease,backdrop-filter var(--kb-motion-dialog) var(--kb-motion-out),-webkit-backdrop-filter var(--kb-motion-dialog) var(--kb-motion-out),visibility 0s !important;
}
.kb-motion-dialog-panel {
    position: relative !important; inset: auto !important; margin: auto !important; box-sizing: border-box !important; overflow: hidden !important;
    opacity: 0 !important; transform: translate3d(0,22px,0) scale(.965) !important; transform-origin: center bottom !important;
    transition: opacity 200ms ease,transform var(--kb-motion-dialog) var(--kb-motion-out) !important;
}
.kb-motion-dialog.is-open > .kb-motion-dialog-panel { opacity: 1 !important; transform: translate3d(0,0,0) scale(1) !important; }
.kb-motion-dialog.is-leaving > .kb-motion-dialog-panel { opacity: 0 !important; transform: translate3d(0,12px,0) scale(.98) !important; transition-timing-function: var(--kb-motion-in) !important; transition-duration: 220ms !important; }
.kb-vip-modal-layer > .kb-motion-dialog-panel { width: min(100%,36rem) !important; max-width: min(36rem,calc(100vw - 28px)) !important; max-height: calc(100dvh - 28px) !important; }
.kb-compare-modal-layer > .kb-motion-dialog-panel { width: min(100%,72rem) !important; max-width: min(72rem,calc(100vw - 24px)) !important; max-height: calc(100dvh - 24px) !important; }
html[data-kb-theme="light"] .kb-motion-dialog { background-color: rgba(232,234,240,0) !important; }
html[data-kb-theme="light"] .kb-motion-dialog.is-open { background-color: rgba(232,234,240,.72) !important; }
html[data-kb-theme="light"] .kb-compare-modal-layer .kb-motion-dialog-panel { background: rgba(250,250,253,.98) !important; color: #17171b !important; border: 0 !important; box-shadow: inset 0 0 0 1px rgba(25,25,31,.11),0 24px 58px rgba(38,41,53,.16) !important; }
html[data-kb-theme="light"] .kb-compare-modal-layer .kb-motion-dialog-panel :is([class*="bg-[#0B0B0C]"],[class*="bg-[#111113]"],[class*="bg-[#161618]"],[class*="bg-black"]) { background: rgba(255,255,255,.82) !important; background-image: none !important; }
html[data-kb-theme="light"] .kb-compare-modal-layer .kb-motion-dialog-panel :is(h1,h2,h3,h4,strong,.text-white,[class*="text-[#F5F5F7]"]) { color: #202025 !important; }
html[data-kb-theme="light"] .kb-compare-modal-layer .kb-motion-dialog-panel :is(p,small,[class*="text-[#A1A1A6]"],[class*="text-[#6E6E73]"]) { color: #5e606a !important; }
html[data-kb-theme="light"] .kb-compare-modal-layer .kb-motion-dialog-panel :is(table,thead,tbody,tr,td,th) { border-color: rgba(25,25,31,.1) !important; }

/* Comparison dock has a real enter/leave transition above the mobile nav. */
.kb-checker-compare-dock {
    position: fixed !important; left: max(12px,env(safe-area-inset-left,0px)) !important; right: max(12px,env(safe-area-inset-right,0px)) !important;
    bottom: calc(28px + env(safe-area-inset-bottom,0px)) !important; width: auto !important; max-width: 470px !important; margin-inline: auto !important;
    opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; transform: translate3d(0,20px,0) scale(.97) !important;
    transition: opacity 180ms ease,transform 340ms var(--kb-motion-out),visibility 0s linear 340ms !important; z-index: 2147481000 !important;
}
.kb-checker-compare-dock.is-open { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; transform: translate3d(0,0,0) scale(1) !important; transition: opacity 180ms ease,transform 340ms var(--kb-motion-out),visibility 0s !important; }
@media (max-width:760px) { .kb-checker-compare-dock { bottom: calc(92px + env(safe-area-inset-bottom,0px)) !important; max-width: 430px !important; } body.kb-surface-checker.kb-checker-compare-visible main { padding-bottom: calc(196px + env(safe-area-inset-bottom,0px)) !important; } }

/* VIP edge cleanup remains explicit without globally disabling transitions. */
body.kb-surface-vip :is(button.btn-liquid,a.btn-liquid,.kb1572-button-edge,.kb157-b2b-submit,.kb-license-accept,.kb-vip-license-actions button,.kb-vip-purchase-cta)::before,
body.kb-surface-vip :is(button.btn-liquid,a.btn-liquid,.kb1572-button-edge,.kb157-b2b-submit,.kb-license-accept,.kb-vip-license-actions button,.kb-vip-purchase-cta)::after { content: none !important; display: none !important; }
body.kb-surface-vip :is(button.btn-liquid,a.btn-liquid,.kb1572-button-edge,.kb157-b2b-submit,.kb-license-accept,.kb-vip-license-actions button,.kb-vip-purchase-cta) { border: 0 !important; outline: 0 !important; clip-path: inset(0 round 16px) !important; -webkit-mask-image: none !important; transition: transform 220ms var(--kb-motion-out),box-shadow 220ms ease,background-color 220ms ease,opacity 180ms ease !important; }

@media (prefers-reduced-motion: reduce) {
    :root { --kb-motion-fast: 1ms; --kb-motion-normal: 1ms; --kb-motion-dialog: 1ms; }
    #kb157-island,.kb157-island,.kb-checker-toast,.kb-motion-dialog,.kb-motion-dialog-panel,.kb-checker-compare-dock,.kb-support-card { transition-duration: 1ms !important; animation: none !important; }
}