/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-8v8v8qfg2z],
.components-reconnect-repeated-attempt-visible[b-8v8v8qfg2z],
.components-reconnect-failed-visible[b-8v8v8qfg2z],
.components-pause-visible[b-8v8v8qfg2z],
.components-resume-failed-visible[b-8v8v8qfg2z],
.components-rejoining-animation[b-8v8v8qfg2z] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-8v8v8qfg2z],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-8v8v8qfg2z],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-8v8v8qfg2z],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-8v8v8qfg2z],
#components-reconnect-modal.components-reconnect-retrying[b-8v8v8qfg2z],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-8v8v8qfg2z],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-8v8v8qfg2z],
#components-reconnect-modal.components-reconnect-failed[b-8v8v8qfg2z],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-8v8v8qfg2z] {
    display: block;
}


#components-reconnect-modal[b-8v8v8qfg2z] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-8v8v8qfg2z 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-8v8v8qfg2z 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-8v8v8qfg2z 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-8v8v8qfg2z]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-8v8v8qfg2z 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-8v8v8qfg2z {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-8v8v8qfg2z {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-8v8v8qfg2z {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-8v8v8qfg2z] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-8v8v8qfg2z] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-8v8v8qfg2z] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-8v8v8qfg2z] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-8v8v8qfg2z] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-8v8v8qfg2z] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-8v8v8qfg2z] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-8v8v8qfg2z 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-8v8v8qfg2z] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-8v8v8qfg2z {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Pages/Home.razor.rz.scp.css */
/* ======================= Home page ====================== */
.home[b-u35c3ag44f] {
    max-width: 960px;
    margin: 0 auto;
    padding: 8px 4px 40px;
}

/* Hero backdrop + title/sub colors live in global app.css (so they render even
   when the scoped bundle fails to serve under MapStaticAssets). Only the
   hero's entrance animation + badge are scoped here. */
.hero-badge[b-u35c3ag44f] {
    display: inline-flex; align-items: center; justify-content: center;
    width: 74px; height: 74px; border-radius: 22px;
    font-size: 2.2rem; margin-bottom: 20px;
    background: linear-gradient(135deg, #FFF9E2, #FFEFAF);
    border: 2px solid var(--yellow-light);
    box-shadow: var(--shadow-yellow);
    animation: heroPop-b-u35c3ag44f .55s var(--ease-pop) backwards;
}
@keyframes heroPop-b-u35c3ag44f { from { opacity: 0; transform: scale(.5) rotate(-14deg); } to { opacity: 1; transform: scale(1) rotate(0); } }
.hero-title[b-u35c3ag44f] {
    color: #FFFFFF;
    text-shadow: 0 2px 20px rgba(11, 15, 44, .85), 0 1px 3px rgba(11, 15, 44, .6);
    font-size: 2.7rem; font-weight: 800; margin: 0;
    animation: heroRise-b-u35c3ag44f .5s var(--ease) .08s backwards;
}
@keyframes heroRise-b-u35c3ag44f { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
.hero-sub[b-u35c3ag44f] {
    color: rgba(255, 255, 255, .92);
    text-shadow: 0 1px 12px rgba(11, 15, 44, .8);
    font-size: 1.12rem;
    max-width: 560px; margin: 12px auto 0;
    animation: heroRise-b-u35c3ag44f .5s var(--ease) .16s backwards;
}
.hero-actions[b-u35c3ag44f] {
    display: flex; gap: 14px; justify-content: center; flex-wrap: wrap;
    margin-top: 26px;
    animation: heroRise-b-u35c3ag44f .5s var(--ease) .24s backwards;
}

/* Founding-member promo banner (first 100 members → free Level 2) */
.promo-banner[b-u35c3ag44f] {
    max-width: 780px;
    margin: 0 auto 18px;
    padding: 12px 18px;
    border-radius: 14px;
    background: rgba(255, 249, 226, .94);
    border: 2px solid var(--yellow, #D4B84A);
    box-shadow: var(--shadow-yellow, 0 6px 24px rgba(212, 184, 74, .25));
    color: #6B5400;
    font-size: .98rem;
    line-height: 1.5;
    text-align: center;
    animation: heroRise-b-u35c3ag44f .5s var(--ease) .05s backwards;
}
.promo-banner strong[b-u35c3ag44f] { color: #8B6B00; }

/* Section titles */
.section-title[b-u35c3ag44f] {
    text-align: center;
    color: var(--yellow); /* bright gold reads on the dark bg (was yellow-dark, lost on dark) */
    text-shadow: 0 1px 10px rgba(11, 15, 44, .8);
    font-size: 1.35rem;
    margin: 40px 0 18px;
    position: relative;
    padding-bottom: 10px;
}
.section-title[b-u35c3ag44f]::after {
    content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
    width: 64px; height: 3px; border-radius: 3px;
    background: linear-gradient(90deg, var(--yellow), var(--yellow-bright));
}

/* Steps */
.steps[b-u35c3ag44f] {
    display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
}
.step-card[b-u35c3ag44f] { text-align: center; padding: 28px 20px; }
.step-icon[b-u35c3ag44f] { font-size: 2rem; margin-bottom: 8px; }
.step-card h3[b-u35c3ag44f] { margin: 6px 0 8px; font-size: 1.02rem; }
.step-card p[b-u35c3ag44f] { color: var(--fg-secondary); font-size: .86rem; margin: 0; }

/* Levels */
.levels[b-u35c3ag44f] {
    display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
}
.level-card[b-u35c3ag44f] { border-top: 4px solid; }
.level-card h3[b-u35c3ag44f] { margin: 0 0 6px; font-size: 1.02rem; }
.level-card p[b-u35c3ag44f] { color: var(--fg-secondary); font-size: .87rem; margin: 0 0 8px; }
.level-0[b-u35c3ag44f] { border-top-color: #9CA3AF; }
.level-1[b-u35c3ag44f] { border-top-color: var(--yellow); }
.level-2[b-u35c3ag44f] { border-top-color: var(--blue); }
.level-wide[b-u35c3ag44f] { grid-column: 1 / -1; }
.level-wide .btn[b-u35c3ag44f] { margin-top: 10px; }

/* Download */
.download-card[b-u35c3ag44f] { padding: 28px; margin: 36px 0; }
.download-card h3[b-u35c3ag44f] { margin: 0 0 4px; }
.download-card p[b-u35c3ag44f] { color: var(--fg-secondary); font-size: .9rem; margin: 0 0 14px; }

/* Comparison table */
.compare-card[b-u35c3ag44f] { padding: 6px 20px 6px; overflow-x: auto; }
.compare-table[b-u35c3ag44f] { width: 100%; border-collapse: collapse; font-size: .88rem; }
.compare-table th[b-u35c3ag44f] {
    text-align: left; padding: 12px 10px; color: var(--yellow-dark);
    border-bottom: 2px solid var(--yellow-light); font-size: .8rem;
    text-transform: uppercase; letter-spacing: .05em;
}
.compare-table td[b-u35c3ag44f] { padding: 11px 10px; border-bottom: 1px solid #F2ECD8; }
.compare-table tr:last-child td[b-u35c3ag44f] { border-bottom: none; }
.compare-table tr:hover td[b-u35c3ag44f] { background: #FFFBEA; }
.compare-table .yes[b-u35c3ag44f] { color: var(--green); font-weight: 700; }
.compare-table .no[b-u35c3ag44f] { color: var(--fg-secondary); }
.compare-table .warn[b-u35c3ag44f] { color: #B45309; }

@media (max-width: 700px) {
    .steps[b-u35c3ag44f], .levels[b-u35c3ag44f] { grid-template-columns: 1fr; }
    .level-wide[b-u35c3ag44f] { grid-column: auto; }
    .hero[b-u35c3ag44f] { padding: 52px 16px 44px; }
    .hero-title[b-u35c3ag44f] { font-size: 2rem; }
}