/* 登入閘口：可點、可捲、與大廳同款液態玻璃 */
#login-gate.login-gate-wrapper {
    width: min(92vw, 360px);
    max-width: 360px;
    gap: 8px;
    padding: 18px 16px 16px !important;
    top: 12px !important;
    max-height: calc(100dvh - 24px) !important;
    overflow-y: auto !important;
    background: rgba(255, 255, 255, 0.13) !important;
    backdrop-filter: blur(28px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(32px) saturate(180%) !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.4) !important;
    border-radius: 24px !important;
    box-shadow:
        0 12px 36px rgba(0, 0, 0, 0.28),
        inset 0 1px 1px rgba(255, 255, 255, 0.25),
        inset 0 -3px 8px rgba(0, 0, 0, 0.35) !important;
}

#login-gate #lan-gate-title {
    margin: 2px 0 0;
    font-size: 22px;
    line-height: 1.2;
}

.login-gate-tagline {
    margin: 0 0 6px;
    color: var(--text-muted);
    font-size: 12px;
    letter-spacing: 0.03em;
}

.login-google-slot {
    width: 100%;
    min-height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.login-google-slot .g_id_signin {
    display: flex;
    justify-content: center;
}

#login-gate #gate-user,
#login-gate #gate-pwd {
    width: 100%;
    margin: 0 !important;
    padding: 10px 12px !important;
    box-sizing: border-box;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    border-radius: 14px !important;
}

.btn-login-secondary,
#login-gate #lan-gate-loginbtn {
    width: 100%;
    margin: 2px 0 0 !important;
    padding: 10px 16px !important;
    background: rgba(255, 255, 255, 0.12) !important;
    color: var(--text-main) !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0.25),
        inset 0 -2px 4px rgba(0, 0, 0, 0.12) !important;
    height: auto !important;
    border-radius: 16px !important;
}

.btn-register-cta,
#login-gate #btn-show-register {
    width: 100% !important;
    margin: 4px 0 0 !important;
    padding: 12px 16px !important;
    background: #00ff9d !important;
    color: #05140e !important;
    border: none !important;
    box-shadow: 0 0 16px rgba(0, 255, 157, 0.32) !important;
    animation: registerPulse 2.8s ease-in-out infinite;
    font-size: 16px !important;
    font-weight: 800 !important;
    height: auto !important;
    border-radius: 16px !important;
}

.btn-register-cta:hover,
#login-gate #btn-show-register:hover {
    filter: brightness(1.06);
}

.login-divider {
    text-align: center;
    color: var(--text-muted);
    margin: 8px 0 2px;
    font-size: 11px;
}

.login-oauth-stack {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    background: rgba(255, 255, 255, 0.06);
    padding: 10px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.18);
}

.login-oauth-stack > .btn {
    width: 100% !important;
    margin: 0 !important;
    min-height: 40px;
    border-radius: 12px !important;
}

@keyframes registerPulse {
    0%, 100% { box-shadow: 0 0 10px rgba(0, 255, 157, 0.24); }
    50% { box-shadow: 0 0 18px rgba(0, 255, 157, 0.42); }
}

body:has(#login-gate.active-view) .system-controls {
    display: none !important;
}

body.no-glass #login-gate.login-gate-wrapper,
body.no-glass .privacy-modal {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: #1c1c1e !important;
}