.hidden-visual {
    display: none !important;
}

/* Mobile/tablet defaults: keep the auth flow identical to the working mobile UI. */
.auth-desktop-layout {
    width: 100%;
    max-width: 100%;
}

.auth-desktop-panel {
    display: none !important;
}

@media (max-width: 768px) {
    html.entry-public #auth.login-screen,
    html.entry-public section#auth.login-screen {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        overflow-x: hidden !important;
    }

    .auth-desktop-layout {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .auth-desktop-layout > .login-content {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
    }
}

@media (min-width: 769px) {
    body {
        display: block;
        min-height: 100vh;
        padding: 0;
    }

    html.entry-public body {
        display: block;
        background:
            radial-gradient(circle at 10% 14%, rgba(96, 86, 255, 0.16), transparent 28%),
            radial-gradient(circle at 88% 12%, rgba(79, 180, 255, 0.14), transparent 24%),
            radial-gradient(circle at 52% 82%, rgba(111, 64, 255, 0.1), transparent 28%),
            linear-gradient(180deg, #06070c 0%, #05050a 48%, #040409 100%);
    }

    html.entry-public #auth.login-screen,
    html.entry-public section#auth.login-screen {
        position: relative !important;
        inset: auto !important;
        width: 100% !important;
        max-width: none !important;
        min-height: 100vh !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        padding: clamp(2rem, 4vw, 4rem) !important;
        background: transparent !important;
        z-index: 2 !important;
        overflow: hidden !important;
    }

    html.entry-public #auth.login-screen::before,
    html.entry-public section#auth.login-screen::before {
        content: "";
        position: absolute;
        inset: 0;
        background:
            linear-gradient(120deg, rgba(255, 255, 255, 0.02), transparent 38%),
            radial-gradient(circle at 18% 26%, rgba(118, 76, 255, 0.14), transparent 30%),
            radial-gradient(circle at 84% 20%, rgba(62, 165, 255, 0.1), transparent 26%);
        pointer-events: none;
    }

    html.entry-public .auth-desktop-layout {
        position: relative;
        z-index: 1;
        width: min(100%, 76rem);
        display: grid !important;
        grid-template-columns: minmax(0, 1.08fr) minmax(26rem, 35rem) !important;
        gap: clamp(1.5rem, 3vw, 3.25rem);
        align-items: stretch;
    }

    html.entry-public .auth-desktop-panel {
        display: block !important;
        grid-column: 1 !important;
        min-width: 0;
    }

    html.entry-public .auth-desktop-panel__surface {
        position: relative;
        min-height: 100%;
        padding: clamp(2rem, 4vw, 3rem);
        border-radius: 2rem;
        border: 1px solid rgba(255, 255, 255, 0.08);
        background:
            linear-gradient(155deg, rgba(19, 20, 36, 0.92) 0%, rgba(10, 11, 20, 0.96) 52%, rgba(7, 8, 16, 0.98) 100%);
        box-shadow:
            0 30px 80px rgba(0, 0, 0, 0.4),
            inset 0 1px 0 rgba(255, 255, 255, 0.06);
        overflow: hidden;
        display: grid;
        gap: 1.35rem;
        align-content: start;
    }

    html.entry-public .auth-desktop-panel__surface::before {
        content: "";
        position: absolute;
        inset: auto -8% -16% auto;
        width: 24rem;
        height: 24rem;
        border-radius: 50%;
        background:
            radial-gradient(circle, rgba(99, 102, 241, 0.28) 0%, rgba(99, 102, 241, 0.08) 42%, transparent 72%);
        filter: blur(12px);
        pointer-events: none;
    }

    html.entry-public .auth-desktop-badge {
        position: relative;
        z-index: 1;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: fit-content;
        min-height: 2rem;
        padding: 0.45rem 0.8rem;
        border-radius: 999px;
        border: 1px solid rgba(167, 139, 250, 0.24);
        background: rgba(98, 63, 255, 0.12);
        color: #ded7ff;
        font-size: 0.76rem;
        font-weight: 700;
        letter-spacing: 0.16em;
        text-transform: uppercase;
    }

    html.entry-public .auth-desktop-copy {
        position: relative;
        z-index: 1;
        display: none;
        gap: 0.9rem;
    }

    html.entry-public .auth-desktop-copy--default {
        display: grid;
    }

    html.entry-public.auth-mode-login .auth-desktop-copy--default,
    html.entry-public.auth-mode-register .auth-desktop-copy--default,
    html.entry-public .auth-desktop-copy--login,
    html.entry-public .auth-desktop-copy--register {
        display: none;
    }

    html.entry-public.auth-mode-login .auth-desktop-copy--login,
    html.entry-public.auth-mode-register .auth-desktop-copy--register {
        display: grid;
    }

    html.entry-public .auth-desktop-eyebrow {
        margin: 0;
        color: rgba(196, 181, 253, 0.82);
        font-size: 0.82rem;
        font-weight: 700;
        letter-spacing: 0.18em;
        text-transform: uppercase;
    }

    html.entry-public .auth-desktop-copy h2 {
        margin: 0;
        max-width: 29rem;
        color: #f8f8ff;
        font-family: "Space Grotesk", "Inter", sans-serif;
        font-size: clamp(2.1rem, 3.4vw, 3.5rem);
        line-height: 1.02;
        letter-spacing: -0.05em;
    }

    html.entry-public .auth-desktop-lead {
        margin: 0;
        max-width: 35rem;
        color: rgba(230, 236, 255, 0.72);
        font-size: 1.02rem;
        line-height: 1.7;
    }

    html.entry-public .auth-desktop-orbit {
        position: relative;
        z-index: 1;
        display: flex;
        flex-wrap: wrap;
        gap: 0.8rem;
        margin-top: 0.15rem;
    }

    html.entry-public .auth-orbit-card {
        display: inline-flex;
        align-items: center;
        min-height: 2.75rem;
        padding: 0.8rem 1rem;
        border-radius: 1rem;
        border: 1px solid rgba(255, 255, 255, 0.1);
        background: rgba(255, 255, 255, 0.04);
        color: #eef2ff;
        font-size: 0.94rem;
        font-weight: 650;
        letter-spacing: -0.01em;
    }

    html.entry-public .auth-orbit-card--primary {
        background: linear-gradient(135deg, rgba(88, 88, 255, 0.18), rgba(88, 88, 255, 0.08));
        border-color: rgba(129, 140, 248, 0.24);
    }

    html.entry-public .auth-orbit-card--secondary {
        background: linear-gradient(135deg, rgba(14, 165, 233, 0.16), rgba(37, 99, 235, 0.08));
        border-color: rgba(96, 165, 250, 0.2);
    }

    html.entry-public .auth-orbit-card--accent {
        background: linear-gradient(135deg, rgba(74, 222, 128, 0.16), rgba(21, 128, 61, 0.08));
        border-color: rgba(74, 222, 128, 0.16);
    }

    html.entry-public .auth-desktop-trust {
        position: relative;
        z-index: 1;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.9rem;
        margin-top: auto;
        padding-top: 0.4rem;
    }

    html.entry-public .auth-trust-card {
        display: grid;
        gap: 0.45rem;
        align-content: start;
        min-height: 9.5rem;
        padding: 1.05rem;
        border-radius: 1.3rem;
        border: 1px solid rgba(255, 255, 255, 0.08);
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.025));
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
    }

    html.entry-public .auth-trust-card__label {
        color: rgba(168, 188, 255, 0.68);
        font-size: 0.73rem;
        font-weight: 700;
        letter-spacing: 0.16em;
        text-transform: uppercase;
    }

    html.entry-public .auth-trust-card strong {
        color: #ffffff;
        font-size: 1rem;
        font-weight: 700;
        line-height: 1.25;
    }

    html.entry-public .auth-trust-card p {
        margin: 0;
        color: rgba(224, 232, 255, 0.68);
        font-size: 0.9rem;
        line-height: 1.55;
    }

    html.entry-public .login-content {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        align-self: center !important;
        justify-self: stretch !important;
        grid-column: 2 !important;
        flex: none !important;
        position: relative;
        z-index: 2;
        padding: clamp(1.9rem, 3vw, 2.6rem);
        border-radius: 2rem;
        border: 1px solid rgba(255, 255, 255, 0.08);
        background:
            linear-gradient(180deg, rgba(19, 19, 30, 0.92), rgba(11, 11, 18, 0.98));
        box-shadow:
            0 32px 90px rgba(0, 0, 0, 0.42),
            inset 0 1px 0 rgba(255, 255, 255, 0.06);
        backdrop-filter: blur(22px);
        -webkit-backdrop-filter: blur(22px);
        display: grid !important;
        gap: 1.25rem;
        box-sizing: border-box !important;
        animation: none !important;
    }

    html.entry-public .login-header {
        display: grid !important;
        gap: 1rem;
        text-align: left !important;
        margin-bottom: 0 !important;
    }

    html.entry-public .auth-logo-icon {
        width: 4.75rem;
        height: 4.75rem;
        margin: 0 !important;
        display: grid !important;
        place-items: center;
        border-radius: 1.55rem;
        color: #f7f7ff;
        background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
        box-shadow: 0 18px 48px rgba(99, 102, 241, 0.35);
    }

    html.entry-public .auth-logo-icon svg {
        width: 2.15rem;
        height: 2.15rem;
    }

    html.entry-public #auth-title {
        margin: 0;
        font-size: clamp(2.1rem, 3vw, 2.95rem);
        font-weight: 800;
        letter-spacing: -0.04em;
        background: none !important;
        -webkit-background-clip: border-box !important;
        background-clip: border-box !important;
        -webkit-text-fill-color: #f7f5ff !important;
        color: #f7f5ff !important;
        text-shadow: none !important;
    }

    html.entry-public #auth-subtitle {
        margin: 0;
        max-width: none;
        color: rgba(255, 255, 255, 0.62);
        font-size: 1rem;
        line-height: 1.55;
    }

    html.entry-public .auth-form-container,
    html.entry-public #action-area,
    html.entry-public #state-choice,
    html.entry-public #state-login,
    html.entry-public #state-register,
    html.entry-public #identity-fields {
        width: 100% !important;
    }

    html.entry-public .auth-form-container {
        display: grid !important;
        gap: 1rem;
    }

    html.entry-public #action-area {
        display: grid !important;
        gap: 1rem;
    }

    html.entry-public .auth-toggle-wrapper {
        margin-bottom: 0;
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 1.2rem;
        padding: 0.28rem;
        min-height: 3.45rem;
        display: flex !important;
        align-items: center;
    }

    html.entry-public .auth-toggle-glider {
        height: calc(100% - 0.56rem);
        border-radius: 0.96rem;
        background: linear-gradient(180deg, rgba(53, 57, 86, 0.96), rgba(33, 37, 60, 0.98));
        box-shadow: 0 10px 22px rgba(0, 0, 0, 0.24);
    }

    html.entry-public .auth-toggle-btn {
        min-height: 3rem;
        color: rgba(255, 255, 255, 0.62);
        font-size: 0.98rem;
        font-weight: 650;
        letter-spacing: -0.01em;
    }

    html.entry-public .auth-toggle-btn.active {
        color: #fff;
    }

    html.entry-public .auth-onboarding-hint {
        margin: 0;
        padding: 0.95rem 1rem;
        border-radius: 1rem;
        font-size: 0.93rem;
    }

    html.entry-public #identity-fields {
        display: grid !important;
        gap: 0.55rem;
        margin-bottom: 0;
    }

    html.entry-public.auth-mode-login #identity-fields,
    html.entry-public.auth-mode-register #identity-fields {
        display: grid !important;
    }

    html.entry-public .auth-choice-state {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.95rem;
    }

    html.entry-public.auth-mode-login #state-login,
    html.entry-public.auth-mode-register #state-register {
        display: grid !important;
        gap: 1rem;
    }

    html.entry-public.auth-mode-login #state-choice,
    html.entry-public.auth-mode-register #state-choice {
        display: none !important;
    }

    html.entry-public .auth-choice-card {
        position: relative;
        min-height: 9.5rem;
        padding: 1.15rem 1.1rem 1.1rem;
        border-radius: 1.2rem;
        display: flex !important;
        flex-direction: column;
        justify-content: flex-end;
        gap: 0.25rem;
        background:
            linear-gradient(165deg, rgba(18, 27, 58, 0.86), rgba(12, 20, 47, 0.76));
        border: 1px solid rgba(154, 177, 255, 0.22);
        box-shadow: 0 18px 32px rgba(6, 10, 26, 0.28);
    }

    html.entry-public .auth-choice-card::before {
        content: "";
        position: absolute;
        top: 1rem;
        left: 1rem;
        width: 2.6rem;
        height: 2.6rem;
        border-radius: 0.95rem;
        background: linear-gradient(135deg, rgba(99, 102, 241, 0.24), rgba(139, 92, 246, 0.14));
        border: 1px solid rgba(167, 139, 250, 0.18);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
    }

    html.entry-public .auth-choice-card:hover {
        transform: translateY(-2px);
        border-color: rgba(167, 139, 250, 0.42);
        box-shadow: 0 18px 34px rgba(38, 49, 112, 0.28);
    }

    html.entry-public .auth-choice-card__title {
        font-size: 1.02rem;
    }

    html.entry-public .auth-choice-card__meta {
        margin-top: 0.05rem;
        font-size: 0.88rem;
        line-height: 1.4;
    }

    html.entry-public .premium-input-label {
        margin: 0;
        font-size: 0.82rem;
        font-weight: 700;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        color: rgba(225, 232, 255, 0.72);
    }

    html.entry-public .input-group-premium {
        position: relative;
    }

    html.entry-public .input-icon-left {
        left: 1rem;
    }

    html.entry-public .login__input {
        min-height: 3.8rem;
        border-radius: 1.05rem;
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid rgba(255, 255, 255, 0.11);
        padding: 1rem 1rem 1rem 3rem !important;
        color: #fff;
        font-size: 1rem;
    }

    html.entry-public .login__input:focus {
        background: rgba(255, 255, 255, 0.06);
        border-color: #8b5cf6;
        box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.14);
    }

    html.entry-public .premium-input-helper {
        margin: 0;
        font-size: 0.86rem;
        color: rgba(255, 255, 255, 0.58);
        line-height: 1.45;
    }

    html.entry-public .info-card-biometric {
        padding: 1.2rem 1.25rem;
        border-radius: 1.35rem;
        background: linear-gradient(180deg, rgba(32, 62, 43, 0.42), rgba(11, 23, 15, 0.55));
        border: 1px solid rgba(74, 222, 128, 0.2);
        display: grid !important;
        grid-template-columns: auto 1fr;
        gap: 0.95rem;
        align-items: start;
        justify-items: start;
        text-align: left !important;
    }

    html.entry-public .info-card-biometric svg {
        width: 2rem;
        height: 2rem;
        color: #4ade80;
        margin-top: 0.05rem;
    }

    html.entry-public .info-card-biometric p {
        margin: 0;
        color: rgba(255, 255, 255, 0.88);
        font-size: 0.95rem;
        line-height: 1.5;
    }

    html.entry-public .btn-premium-large {
        min-height: 3.9rem;
        border-radius: 1.1rem;
        font-size: 1rem;
        font-weight: 700;
        letter-spacing: -0.01em;
    }

    html.entry-public .btn-primary {
        background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
        box-shadow: 0 16px 34px rgba(99, 102, 241, 0.28);
    }

    html.entry-public .btn-secondary-accent {
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.05));
        border: 1px solid rgba(255, 255, 255, 0.1);
    }

    html.entry-public #auth-error.alert {
        margin-bottom: 0 !important;
        padding: 0.9rem 1rem;
        border-radius: 1rem;
        border: 1px solid rgba(239, 68, 68, 0.22);
        background: rgba(127, 29, 29, 0.18);
        color: #fecaca;
    }

    html.entry-public #auth-error.alert:empty {
        display: none;
    }

    html.entry-public .auth-footer {
        margin-top: 0.2rem;
        text-align: left !important;
    }

    html.entry-public .text-link {
        background: none;
        border: none;
        color: rgba(255, 255, 255, 0.58);
        font-size: 0.94rem;
        padding: 0;
        cursor: pointer;
        transition: color 0.2s ease, opacity 0.2s ease;
    }

    html.entry-public .text-link:hover {
        color: #fff;
        opacity: 1;
        text-decoration: underline;
    }

    #main-container.app-shell {
        width: min(100%, 82rem);
        max-width: calc(100vw - 3rem);
        margin: 1.5rem auto 2.5rem;
        padding: 0;
        border: none;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        transform: none;
        opacity: 1;
        animation: none;
    }

    #main-container.app-shell::before {
        display: none;
    }

    .app-topbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        padding: 0.25rem 0 1.15rem;
        margin-bottom: 0.4rem;
        position: sticky;
        top: 0;
        z-index: 20;
        background: linear-gradient(180deg, rgba(2, 2, 5, 0.96) 0%, rgba(2, 2, 5, 0.78) 72%, rgba(2, 2, 5, 0) 100%);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
    }

    .topbar-account {
        display: inline-flex;
        align-items: center;
        gap: 0.8rem;
        padding: 0.8rem 1rem;
        border-radius: 999px;
        border: 1px solid rgba(255, 255, 255, 0.08);
        background: rgba(255, 255, 255, 0.04);
        color: #eef2ff;
        font-weight: 650;
        letter-spacing: -0.01em;
    }

    .acct-badge {
        width: 2.25rem;
        height: 2.25rem;
        display: grid;
        place-items: center;
        border-radius: 0.85rem;
        background: linear-gradient(135deg, rgba(167, 139, 250, 0.2), rgba(99, 102, 241, 0.14));
        border: 1px solid rgba(167, 139, 250, 0.24);
        color: #c4b5fd;
        font-weight: 800;
    }

    .acct-name {
        font-size: 0.98rem;
    }

    .topbar-actions {
        display: inline-flex;
        align-items: center;
        gap: 0.75rem;
    }

    .icon-pill {
        width: 2.7rem;
        height: 2.7rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 999px;
        border: 1px solid rgba(255, 255, 255, 0.08);
        background: rgba(255, 255, 255, 0.04);
        color: rgba(255, 255, 255, 0.72);
        padding: 0;
    }

    .icon-pill svg {
        width: 1.15rem;
        height: 1.15rem;
    }

    .subnav,
    #app-nav {
        display: flex;
        flex-wrap: wrap;
        gap: 0.65rem;
        align-items: center;
        margin: 0 0 1.4rem;
        padding: 0 0 0.35rem;
        border: none;
        background: transparent;
    }

    #app-nav.hidden {
        display: none !important;
    }

    #app-nav .nav-btn,
    #app-nav .tab {
        min-height: 2.65rem;
        padding: 0.72rem 1rem;
        border-radius: 999px;
        border: 1px solid rgba(255, 255, 255, 0.08);
        background: rgba(255, 255, 255, 0.04);
        color: rgba(255, 255, 255, 0.7);
        font-weight: 600;
        font-size: 0.92rem;
        box-shadow: none;
    }

    #app-nav .nav-btn.active,
    #app-nav .tab.active {
        color: #eef2ff;
        border-color: rgba(139, 92, 246, 0.36);
        background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(139, 92, 246, 0.18));
        box-shadow: 0 12px 24px rgba(80, 70, 229, 0.16);
    }

    .app-main {
        display: grid;
        gap: 1.6rem;
    }

    .app-main > section {
        margin-bottom: 0;
    }

    .hero-card,
    .glass-card,
    .settings-card,
    .card.glass-card {
        border-radius: 1.7rem !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        background: linear-gradient(180deg, rgba(21, 21, 31, 0.84), rgba(13, 13, 21, 0.92)) !important;
        box-shadow:
            0 18px 42px rgba(0, 0, 0, 0.28),
            inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
        backdrop-filter: blur(18px) saturate(145%);
        -webkit-backdrop-filter: blur(18px) saturate(145%);
    }

    .hero-card {
        padding: 1.75rem !important;
    }

    .hero-kicker {
        margin-bottom: 0.9rem;
        color: rgba(255, 255, 255, 0.52);
        font-size: 0.88rem;
    }

    .hero-row {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 1rem;
        margin-bottom: 1.15rem;
    }

    .hero-cta {
        display: flex;
        flex-wrap: wrap;
        gap: 0.85rem;
        margin-bottom: 1.15rem;
    }

    .quick-actions {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.85rem;
        max-width: 26rem;
    }

    .qa-btn {
        display: grid !important;
        gap: 0.55rem;
        justify-items: center;
        min-height: 7rem;
        padding: 1rem 0.8rem !important;
        border-radius: 1.2rem !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        background: rgba(255, 255, 255, 0.04) !important;
    }

    .qa-ic {
        width: 2.75rem;
        height: 2.75rem;
        display: grid;
        place-items: center;
        border-radius: 999px;
        background: rgba(139, 92, 246, 0.14);
        color: #c4b5fd;
    }

    .qa-ic svg {
        width: 1.25rem;
        height: 1.25rem;
    }

    .qa-tx {
        color: #eef2ff;
        font-weight: 650;
    }

    #mobile-bottom-nav {
        display: none !important;
    }
}

@media (min-width: 769px) and (max-width: 959px) {
    html.entry-public .auth-desktop-layout {
        width: min(100%, 58rem);
        grid-template-columns: minmax(0, 1fr) !important;
    }

    html.entry-public .auth-desktop-panel__surface {
        min-height: auto;
    }

    html.entry-public .login-content {
        max-width: 100% !important;
        grid-column: 1 !important;
    }
}

@media (min-width: 769px) and (max-width: 959px) {
    html.entry-public .auth-desktop-trust,
    html.entry-public .auth-choice-state {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 960px) and (max-width: 1279px) {
    html.entry-public .auth-desktop-layout {
        width: min(100%, 68rem);
        grid-template-columns: minmax(0, 0.96fr) minmax(23rem, 30rem) !important;
        gap: clamp(1rem, 2.5vw, 2rem);
    }

    html.entry-public .auth-desktop-copy h2 {
        max-width: 24rem;
        font-size: clamp(1.95rem, 3vw, 2.85rem);
    }

    html.entry-public .auth-desktop-lead {
        max-width: 27rem;
        font-size: 0.97rem;
        line-height: 1.62;
    }

    html.entry-public .auth-desktop-trust {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    html.entry-public .auth-trust-card:last-child {
        grid-column: 1 / -1;
    }
}