/* KAD ACCESS REQUEST V1 */

body.kad-access-active {
    overflow: hidden;
}

body.kad-access-active .app-shell {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}

body.kad-access-active #network,
body.kad-access-active .ambient {
    opacity: 0;
}

.kad-access {
    position: fixed;
    z-index: 2100;
    inset: 0;
    display: grid;
    overflow: auto;
    place-items: center;
    padding:
        max(24px, env(safe-area-inset-top))
        20px
        max(24px, env(safe-area-inset-bottom));
    color: #f7f6fb;
    background:
        radial-gradient(
            circle at 50% 35%,
            rgba(118, 83, 230, 0.13),
            transparent 38%
        ),
        linear-gradient(
            180deg,
            #09090d 0%,
            #0d0c13 100%
        );
}

.kad-access[hidden] {
    display: none;
}

.kad-access-frame {
    width: min(100%, 430px);
}

.kad-access-content {
    width: 100%;
}

.kad-access-screen {
    display: flex;
    min-height: min(680px, 78vh);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    animation:
        kad-access-enter
        260ms
        ease
        both;
}

.kad-access-logo {
    color: #f6f4fb;
    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "SF Pro Display",
        "Helvetica Neue",
        Arial,
        sans-serif;
    font-size: clamp(58px, 19vw, 82px);
    font-weight: 900;
    letter-spacing: -0.085em;
    line-height: 0.9;
    filter:
        drop-shadow(
            0 0 24px
            rgba(120, 83, 225, 0.12)
        );
}

.kad-access-icon {
    display: grid;
    width: 62px;
    height: 62px;
    margin-bottom: 25px;
    place-items: center;
    border: 1px solid rgba(165, 135, 245, 0.17);
    border-radius: 21px;
    color: rgba(222, 212, 250, 0.96);
    background: rgba(112, 78, 205, 0.08);
    font-size: 25px;
}

.kad-access-screen h1 {
    max-width: 330px;
    margin: 31px 0 0;
    color: #f7f6fb;
    font-size: clamp(27px, 8vw, 36px);
    line-height: 1.08;
    letter-spacing: -0.045em;
}

.kad-access-description {
    max-width: 310px;
    margin: 14px auto 0;
    color: rgba(235, 231, 244, 0.53);
    font-size: 12px;
    line-height: 1.65;
}

.kad-access-primary {
    width: 100%;
    min-height: 52px;
    margin-top: 31px;
    padding: 14px 18px;
    border: 1px solid rgba(170, 139, 255, 0.2);
    border-radius: 17px;
    color: #ffffff;
    background:
        linear-gradient(
            135deg,
            #7654dc,
            #5b3daf
        );
    box-shadow:
        0 15px 38px
        rgba(71, 42, 157, 0.25);
    font: inherit;
    font-size: 13px;
    font-weight: 750;
    cursor: pointer;
}

.kad-access-primary:active {
    transform: scale(0.985);
}

.kad-access-primary:disabled {
    cursor: default;
    opacity: 0.5;
}

.kad-access-note {
    max-width: 300px;
    margin-top: 13px;
    color: rgba(235, 231, 244, 0.34);
    font-size: 10px;
    line-height: 1.55;
}

.kad-access-pending {
    width: 100%;
    margin-top: 31px;
    padding: 17px 18px;
    border: 1px solid rgba(164, 137, 237, 0.12);
    border-radius: 17px;
    color: rgba(235, 231, 244, 0.72);
    background: rgba(255, 255, 255, 0.03);
    font-size: 12px;
    font-weight: 650;
}

.kad-access-error {
    min-height: 18px;
    margin-top: 13px;
    color: rgba(255, 174, 174, 0.82);
    font-size: 10px;
    line-height: 1.5;
}

@keyframes kad-access-enter {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .kad-access-screen {
        animation-duration: 1ms;
    }
}