/* Final accessibility override loaded after standalone inline presentation rules. */
@media (prefers-reduced-motion: reduce) {
    body.kb-platform-standalone::before {
        animation: none !important;
        transform: none !important;
        opacity: .55 !important;
    }

    body.kb-platform-standalone,
    body.kb-platform-standalone *,
    body.kb-platform-standalone *::before,
    body.kb-platform-standalone *::after {
        scroll-behavior: auto !important;
    }
}

/*
 * Shared boot — native activity indicator only.
 *
 * A platform loading state should not look like an app card or branded prompt.
 * Flatten the legacy HUD completely and leave one centered, segmented activity
 * indicator. The existing role/status + aria-label still carries "Preparing"
 * for assistive technology, so no visible loading copy is required.
 */
html[data-kb-boot="pending"] .kb-boot-card {
    display: grid !important;
    grid-template-columns: 1fr !important;
    place-items: center !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    gap: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}
html[data-kb-theme="light"][data-kb-boot="pending"] .kb-boot-card {
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
}
html[data-kb-boot="pending"] .kb-boot-mark {
    position: relative !important;
    display: block !important;
    flex: none !important;
    width: 28px !important;
    height: 28px !important;
    margin: 0 !important;
    border-radius: 50% !important;
    background: transparent !important;
    background-image: none !important;
    color: rgba(235, 235, 245, .72) !important;
    box-shadow: none !important;
}
html[data-kb-theme="light"][data-kb-boot="pending"] .kb-boot-mark {
    color: rgba(60, 60, 67, .56) !important;
}
html[data-kb-boot-page="vip"][data-kb-boot="pending"] .kb-boot-mark {
    color: rgba(217, 184, 97, .84) !important;
}
html[data-kb-boot="pending"] .kb-boot-mark::before {
    inset: 0 !important;
    background: repeating-conic-gradient(
        from 0deg,
        currentColor 0deg 7deg,
        transparent 7deg 30deg
    ) !important;
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px)) !important;
    mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px)) !important;
    opacity: 1 !important;
    animation: kbSystemActivity 780ms steps(12, end) infinite !important;
}
html[data-kb-boot="pending"] .kb-boot-copy {
    display: none !important;
}
html[data-kb-boot="pending"] .kb-boot-track {
    display: none !important;
}
@media (prefers-reduced-motion: reduce) {
    html[data-kb-boot="pending"] .kb-boot-mark::before {
        animation: none !important;
        transform: rotate(24deg) !important;
        opacity: .62 !important;
    }
}

/*
 * Submission completion — system-native success treatment.
 *
 * This stylesheet is the final public presentation layer, so keep the upload
 * result readable after the older inline modal styles in both appearance modes.
 * The success mark is intentionally a quiet circular status badge instead of a
 * neon/glassy tile; partial submissions retain a distinct amber state.
 */
.kb-upload-result {
    color-scheme: dark !important;
}
.kb-upload-result-icon {
    width: 64px !important;
    height: 64px !important;
    margin-bottom: 17px !important;
    border-radius: 50% !important;
    background: rgba(48, 209, 88, .11) !important;
    background-image: none !important;
    border: 1px solid rgba(48, 209, 88, .22) !important;
    color: #30d158 !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .08),
        0 8px 22px rgba(0, 0, 0, .15) !important;
}
.kb-upload-result-icon i {
    font-size: 25px !important;
    line-height: 1 !important;
}
.kb-upload-result.is-partial .kb-upload-result-icon {
    background: rgba(255, 214, 10, .10) !important;
    background-image: none !important;
    border-color: rgba(255, 214, 10, .22) !important;
    color: #ffd60a !important;
}
.kb-upload-result h4 {
    color: #f5f5f7 !important;
    font-size: 21px !important;
    font-weight: 700 !important;
    letter-spacing: -.022em !important;
}
.kb-upload-result p {
    color: #a1a1aa !important;
    max-width: 36ch !important;
}
.kb-upload-result .kb-upload-done {
    min-height: 48px !important;
    border: 0 !important;
    border-radius: 14px !important;
    background: #0a84ff !important;
    background-image: none !important;
    color: #fff !important;
    font-weight: 680 !important;
    text-shadow: none !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .20),
        0 8px 20px rgba(10, 132, 255, .20) !important;
}

html[data-kb-theme="light"] .kb-upload-result {
    color-scheme: light !important;
}
html[data-kb-theme="light"] .kb-upload-result-icon {
    background: rgba(52, 199, 89, .09) !important;
    background-image: none !important;
    border-color: rgba(36, 138, 61, .17) !important;
    color: #248a3d !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .94),
        0 8px 20px rgba(36, 138, 61, .07) !important;
}
html[data-kb-theme="light"] .kb-upload-result.is-partial .kb-upload-result-icon {
    background: rgba(255, 179, 0, .09) !important;
    background-image: none !important;
    border-color: rgba(154, 103, 0, .16) !important;
    color: #9a6700 !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .94),
        0 8px 20px rgba(154, 103, 0, .055) !important;
}
html[data-kb-theme="light"] .kb-upload-result h4 {
    color: #1d1d1f !important;
}
html[data-kb-theme="light"] .kb-upload-result p {
    color: #6e6e73 !important;
}
html[data-kb-theme="light"] .kb-upload-result .kb-upload-done {
    background: #007aff !important;
    background-image: none !important;
    color: #fff !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .22),
        0 8px 20px rgba(0, 122, 255, .16) !important;
}

@media (hover: hover) and (pointer: fine) {
    .kb-upload-result .kb-upload-done:hover {
        background: #2897ff !important;
    }
    html[data-kb-theme="light"] .kb-upload-result .kb-upload-done:hover {
        background: #006ee6 !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .kb-upload-result-icon {
        animation: none !important;
        transform: none !important;
    }
}

@media (prefers-contrast: more) {
    .kb-upload-result-icon {
        border-color: currentColor !important;
    }
    .kb-upload-result .kb-upload-done {
        box-shadow: none !important;
    }
}

/* Navigation transitions: destination accent, uninterrupted rotation, and exclusive boot chrome. */
html[data-kb-boot="pending"] .kb-boot-mark {
    --kb-spinner-rgb: 235, 235, 245;
    color: rgb(var(--kb-spinner-rgb)) !important;
}
html[data-kb-theme="light"][data-kb-boot="pending"] .kb-boot-mark {
    --kb-spinner-rgb: 60, 60, 67;
}
html[data-kb-boot-page="vip"][data-kb-boot="pending"] .kb-boot-mark {
    --kb-spinner-rgb: 217, 184, 97;
}
html[data-kb-boot="pending"] .kb-boot-mark > svg {
    display: none !important;
}
html[data-kb-boot="pending"] .kb-boot-mark::before {
    background: conic-gradient(
        from 0deg,
        rgba(var(--kb-spinner-rgb), 1) 0deg 8deg, transparent 8deg 30deg,
        rgba(var(--kb-spinner-rgb), .92) 30deg 38deg, transparent 38deg 60deg,
        rgba(var(--kb-spinner-rgb), .82) 60deg 68deg, transparent 68deg 90deg,
        rgba(var(--kb-spinner-rgb), .72) 90deg 98deg, transparent 98deg 120deg,
        rgba(var(--kb-spinner-rgb), .62) 120deg 128deg, transparent 128deg 150deg,
        rgba(var(--kb-spinner-rgb), .52) 150deg 158deg, transparent 158deg 180deg,
        rgba(var(--kb-spinner-rgb), .43) 180deg 188deg, transparent 188deg 210deg,
        rgba(var(--kb-spinner-rgb), .35) 210deg 218deg, transparent 218deg 240deg,
        rgba(var(--kb-spinner-rgb), .28) 240deg 248deg, transparent 248deg 270deg,
        rgba(var(--kb-spinner-rgb), .22) 270deg 278deg, transparent 278deg 300deg,
        rgba(var(--kb-spinner-rgb), .17) 300deg 308deg, transparent 308deg 330deg,
        rgba(var(--kb-spinner-rgb), .12) 330deg 338deg, transparent 338deg 360deg
    ) !important;
    animation: kbSystemActivity 820ms linear infinite !important;
    will-change: transform !important;
}

/* The boot screen is the only visible application chrome while pending. */
html[data-kb-boot="pending"] body .kb-liquid-nav,
html[data-kb-boot-page][data-kb-boot="pending"] body .kb-liquid-nav,
.kb-liquid-nav.kb-nav-boot-hidden {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

@media (prefers-reduced-motion: reduce) {
    html[data-kb-boot="pending"] .kb-boot-mark::before {
        animation: none !important;
        transform: rotate(24deg) !important;
        opacity: .62 !important;
        will-change: auto !important;
    }
}

/*
 * Outgoing navigation should not replace an already-hydrated page with fake
 * loading chrome. kb-boot-complete is added only after the initial boot has
 * genuinely finished, so first-load/Checker hydration protection remains
 * unchanged while normal menu navigation keeps the live page visible until
 * the browser commits the destination document.
 */
html[data-kb-boot="pending"] body.kb-boot-complete {
    overflow-x: clip !important;
    overflow-y: auto !important;
}
html[data-kb-boot="pending"] body.kb-boot-complete > :not(.kb-boot-screen):not(noscript) {
    visibility: visible !important;
}
html[data-kb-boot="pending"] body.kb-boot-complete > .kb-boot-screen {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}
@media (min-width: 761px) {
    html[data-kb-boot="pending"] body.kb-boot-complete > .kb-liquid-nav {
        display: grid !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }
}
@media (max-width: 760px) {
    html[data-kb-boot="pending"] body.kb-boot-complete > .kb-liquid-nav {
        display: flex !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }
}