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

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


#components-reconnect-modal[b-29jlijryo0] {
    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-29jlijryo0 0.5s both;
    &[open]

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

}

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

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

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

@keyframes components-reconnect-modal-fadeInOpacity-b-29jlijryo0 {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

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

    100% {
        opacity: 0;
    }
}

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

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

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

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

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

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

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

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

@keyframes components-rejoining-animation-b-29jlijryo0 {
    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 */
/* ---------- background ---------- */
.bg[b-l98luz7h49] { position: fixed; inset: 0; overflow: hidden; z-index: -1; background: radial-gradient(1200px 800px at 50% -10%, #1b1f3b 0%, #0b0d17 60%); }
.blob[b-l98luz7h49] { position: absolute; width: 520px; height: 520px; border-radius: 50%; filter: blur(90px); opacity: .45; animation: float-b-l98luz7h49 18s ease-in-out infinite; }
.b1[b-l98luz7h49] { background: #6d5dfc; top: -120px; left: -80px; }
.b2[b-l98luz7h49] { background: #00c2ff; bottom: -160px; right: -60px; animation-delay: -6s; }
.b3[b-l98luz7h49] { background: #ff4fa3; top: 40%; left: 55%; width: 380px; height: 380px; opacity: .25; animation-delay: -12s; }
@keyframes float-b-l98luz7h49 { 0%,100% { transform: translate(0,0) scale(1); } 33% { transform: translate(60px,-40px) scale(1.08); } 66% { transform: translate(-40px,50px) scale(.95); } }

/* ---------- shell ---------- */
.shell[b-l98luz7h49] { min-height: 100vh; max-width: 1280px; margin: 0 auto; padding: 24px 24px 48px; display: flex; flex-direction: column; }
.shell.is-empty[b-l98luz7h49] { justify-content: flex-start; }
.brand[b-l98luz7h49] { display: flex; align-items: center; gap: 10px; font-size: 1.05rem; letter-spacing: .02em; color: #cfd3ff; }
.wordmark[b-l98luz7h49] { position: relative; font-family: "Jost", "Futura", "Century Gothic", sans-serif; font-weight: 400; font-size: 1.02rem;
             letter-spacing: .32em; text-transform: uppercase; color: #fff; text-decoration: none; padding: 6px 0; white-space: nowrap; }
.wordmark .tld[b-l98luz7h49] { color: rgba(255,255,255,.5); font-weight: 300; }
/* a thin candle-light underline that warms up on hover */
.wordmark[b-l98luz7h49]::after { content: ""; position: absolute; left: 0; right: .32em; bottom: 0; height: 1px; border-radius: 1px;
                   background: linear-gradient(90deg, transparent, rgba(255,211,138,.0) 10%, rgba(255,211,138,.55) 50%, rgba(255,211,138,0) 90%, transparent);
                   opacity: .5; transition: opacity .3s, transform .3s; transform: scaleX(.6); }
.wordmark:hover[b-l98luz7h49]::after { opacity: 1; transform: scaleX(1); }
@media (max-width: 560px) { .wordmark[b-l98luz7h49] { font-size: .85rem; letter-spacing: .22em; } }
.usage[b-l98luz7h49] { margin-left: auto; font-size: .82rem; padding: 6px 12px; border-radius: 999px; color: #dfe3ff; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); }
.usage.empty[b-l98luz7h49] { color: #ffb3c4; border-color: rgba(255,79,120,.4); background: rgba(255,79,120,.1); }
.usage.owner[b-l98luz7h49] { color: #0b0d17; background: linear-gradient(90deg, #ffd38a, #ffb547); border-color: transparent; font-weight: 600; }

/* ---------- hero / drop zone ---------- */
.hero[b-l98luz7h49] { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 40px 0; }
.hero h1[b-l98luz7h49] { font-size: clamp(2rem, 5vw, 3.4rem); line-height: 1.15; padding-bottom: .08em; margin: 0 0 10px; font-weight: 800; letter-spacing: -.02em;
           background: linear-gradient(90deg, #fff 0%, #c7c2ff 45%, #7fe3ff 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sub[b-l98luz7h49] { max-width: 560px; color: #a9aed6; font-size: 1.05rem; margin: 0 0 36px; }

.dropzone[b-l98luz7h49] { position: relative; width: min(640px, 100%); aspect-ratio: 16 / 9; border-radius: 28px; cursor: pointer; display: block;
            background: rgba(255,255,255,.04); backdrop-filter: blur(18px); border: 1px solid rgba(255,255,255,.1);
            box-shadow: 0 30px 80px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.08); transition: transform .25s ease, border-color .25s ease, background .25s ease; overflow: hidden; }
.dropzone[b-l98luz7h49]::before { content: ""; position: absolute; inset: 14px; border-radius: 20px; border: 2px dashed rgba(170,165,255,.35); transition: inherit; pointer-events: none; }
.dropzone[b-l98luz7h49]::after { content: ""; position: absolute; inset: -40%; background: conic-gradient(from 0deg, transparent 0 70%, rgba(109,93,252,.35) 80%, rgba(0,194,255,.35) 90%, transparent 100%);
                   animation: spin-b-l98luz7h49 6s linear infinite; opacity: 0; transition: opacity .3s; pointer-events: none; z-index: 0; }
.dropzone:hover[b-l98luz7h49] { transform: translateY(-3px); border-color: rgba(170,165,255,.45); }
.dropzone:hover[b-l98luz7h49]::before { border-color: rgba(170,165,255,.7); }
.dropzone[data-drag][b-l98luz7h49] { transform: scale(1.03); background: rgba(109,93,252,.14); border-color: #8f84ff; }
.dropzone[data-drag][b-l98luz7h49]::before { border-color: #a99fff; border-style: solid; }
.dropzone[data-drag][b-l98luz7h49]::after { opacity: 1; }
@keyframes spin-b-l98luz7h49 { to { transform: rotate(360deg); } }

/* the real <input type=file> covers the whole zone, invisible, so native drag & drop just works */
.dropzone[b-l98luz7h49]  input[type=file], .stage[b-l98luz7h49]  input[type=file] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; z-index: 2; }

.dropzone.limit[b-l98luz7h49] { cursor: not-allowed; opacity: .85; }
.dropzone.limit:hover[b-l98luz7h49] { transform: none; }
.dropzone.limit .dz-icon[b-l98luz7h49] { background: linear-gradient(135deg, #5a5f86, #3a3e5c); box-shadow: none; animation: none; }
.dz-inner[b-l98luz7h49] { position: relative; z-index: 1; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; pointer-events: none; }
.dz-icon[b-l98luz7h49] { width: 76px; height: 76px; border-radius: 22px; display: grid; place-items: center; margin-bottom: 10px; color: #fff;
           background: linear-gradient(135deg, #6d5dfc, #00c2ff); box-shadow: 0 14px 34px rgba(109,93,252,.5); animation: bob-b-l98luz7h49 3s ease-in-out infinite; }
.dz-icon svg[b-l98luz7h49] { width: 36px; height: 36px; }
@keyframes bob-b-l98luz7h49 { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.dz-title[b-l98luz7h49] { font-size: 1.45rem; font-weight: 700; color: #fff; }
.when-drag[b-l98luz7h49] { display: none; }
.dropzone[data-drag] .when-drag[b-l98luz7h49] { display: inline; }
.dropzone[data-drag] .when-idle[b-l98luz7h49] { display: none; }
.dz-hint[b-l98luz7h49] { color: #a9aed6; }
.dz-hint u[b-l98luz7h49] { text-decoration-color: rgba(169,174,214,.5); text-underline-offset: 3px; }
.dz-formats[b-l98luz7h49] { margin-top: 10px; font-size: .78rem; letter-spacing: .12em; color: #6f75a3; }

.error[b-l98luz7h49] { margin-top: 20px; padding: 10px 16px; border-radius: 12px; background: rgba(255,79,120,.12); border: 1px solid rgba(255,79,120,.35); color: #ffb3c4; }

/* ---------- workspace ---------- */
.workspace[b-l98luz7h49] { margin-top: 28px; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(320px, 1fr); gap: 28px; align-items: start; animation: rise-b-l98luz7h49 .45s ease both; }
@media (max-width: 900px) { .workspace[b-l98luz7h49] { grid-template-columns: 1fr; } }
@keyframes rise-b-l98luz7h49 { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.stage-col[b-l98luz7h49] { position: sticky; top: 20px; display: flex; flex-direction: column; gap: 14px; }
.stage[b-l98luz7h49] { position: relative; border-radius: 22px; overflow: hidden; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1);
         box-shadow: 0 30px 80px rgba(0,0,0,.45); min-height: 240px; }
.stage img[b-l98luz7h49] { display: block; width: 100%; height: auto; max-height: 78vh; object-fit: contain; }
.stage.scanning img[b-l98luz7h49] { filter: saturate(.6) brightness(.75); }
.scanline[b-l98luz7h49] { position: absolute; left: 0; right: 0; height: 120px; top: -120px; background: linear-gradient(180deg, transparent, rgba(0,194,255,.35), transparent);
            border-bottom: 2px solid #5fe0ff; animation: scan-b-l98luz7h49 1.6s ease-in-out infinite; }
@keyframes scan-b-l98luz7h49 { to { top: 100%; } }
.busy-label[b-l98luz7h49] { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); padding: 8px 16px; border-radius: 999px; background: rgba(11,13,23,.75);
              backdrop-filter: blur(8px); color: #dfe3ff; display: flex; align-items: center; gap: 10px; font-size: .92rem; }
.spinner[b-l98luz7h49] { width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(255,255,255,.25); border-top-color: #5fe0ff; animation: spin-b-l98luz7h49 .8s linear infinite; }

.facebox[b-l98luz7h49] { position: absolute; border: 2px solid rgba(127,227,255,.9); border-radius: 10px; box-shadow: 0 0 0 9999px rgba(0,0,0,0), 0 0 18px rgba(0,194,255,.55);
           transition: all .2s ease; animation: pop-b-l98luz7h49 .4s ease both; cursor: default; }
.facebox.hover[b-l98luz7h49] { border-color: #fff; box-shadow: 0 0 0 9999px rgba(5,6,14,.45), 0 0 26px rgba(255,255,255,.7); z-index: 3; }
@keyframes pop-b-l98luz7h49 { from { opacity: 0; transform: scale(1.25); } to { opacity: 1; transform: none; } }
.tag[b-l98luz7h49] { position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translateX(-50%); white-space: nowrap; padding: 3px 10px; border-radius: 999px;
       font-size: .8rem; font-weight: 700; color: #0b0d17; background: linear-gradient(90deg, #a99fff, #7fe3ff); box-shadow: 0 6px 16px rgba(0,0,0,.35); }

/* the analysed photo doubles as the drop zone for the next one */
.stage[b-l98luz7h49] { display: block; cursor: pointer; transition: border-color .2s, box-shadow .2s, transform .2s; }
.stage.scanning[b-l98luz7h49] { cursor: progress; }
.stage:hover:not(.scanning)[b-l98luz7h49] { border-color: rgba(170,165,255,.45); }
.stage .facebox[b-l98luz7h49] { z-index: 3; }
.stage[data-drag] .facebox[b-l98luz7h49], .stage[data-drag] .replace-hint[b-l98luz7h49] { pointer-events: none; opacity: 0; }
.replace-hint[b-l98luz7h49] { position: absolute; left: 50%; bottom: 14px; transform: translate(-50%, 6px); z-index: 3; pointer-events: none; white-space: nowrap;
                padding: 7px 14px; border-radius: 999px; font-size: .85rem; color: #dfe3ff; background: rgba(11,13,23,.72); backdrop-filter: blur(8px);
                border: 1px solid rgba(255,255,255,.12); opacity: 0; transition: opacity .2s, transform .2s; }
.stage:hover .replace-hint[b-l98luz7h49] { opacity: 1; transform: translate(-50%, 0); }
.drop-overlay[b-l98luz7h49] { position: absolute; inset: 0; z-index: 4; pointer-events: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
                background: rgba(20,16,60,.72); backdrop-filter: blur(6px); border: 2px dashed #a99fff; border-radius: 22px; opacity: 0; transition: opacity .2s; }
.drop-overlay .dz-title[b-l98luz7h49] { color: #fff; }
.stage[data-drag][b-l98luz7h49] { border-color: #8f84ff; transform: scale(1.01); box-shadow: 0 30px 80px rgba(0,0,0,.45), 0 0 0 4px rgba(143,132,255,.25); }
.stage[data-drag] .drop-overlay[b-l98luz7h49] { opacity: 1; }

/* ---------- result cards ---------- */
.results[b-l98luz7h49] { display: flex; flex-direction: column; gap: 16px; }
.summary[b-l98luz7h49] { display: flex; flex-direction: column; gap: 2px; color: #fff; font-weight: 600; font-size: 1.1rem; }
.muted[b-l98luz7h49] { color: #6f75a3; font-weight: 400; font-size: .82rem; }

.card[b-l98luz7h49] { position: relative; padding: 22px; border-radius: 22px; background: rgba(255,255,255,.05); backdrop-filter: blur(18px);
        border: 1px solid rgba(255,255,255,.09); box-shadow: 0 18px 50px rgba(0,0,0,.35); transition: border-color .2s, transform .2s; animation: rise-b-l98luz7h49 .45s ease both; }
.card:nth-child(3)[b-l98luz7h49] { animation-delay: .08s; } .card:nth-child(4)[b-l98luz7h49] { animation-delay: .16s; } .card:nth-child(5)[b-l98luz7h49] { animation-delay: .24s; }
.card.hover[b-l98luz7h49] { border-color: rgba(127,227,255,.6); transform: translateX(-3px); }
.card h3[b-l98luz7h49] { margin: 0 0 6px; color: #fff; }
.card.empty p[b-l98luz7h49] { color: #a9aed6; margin: 0; }

.card-head[b-l98luz7h49] { display: flex; justify-content: space-between; align-items: center; }
.badge[b-l98luz7h49] { font-weight: 800; font-size: .85rem; padding: 3px 10px; border-radius: 999px; color: #0b0d17; background: linear-gradient(90deg, #a99fff, #7fe3ff); }
.group[b-l98luz7h49] { font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: #a9aed6; }

.age[b-l98luz7h49] { display: flex; align-items: baseline; gap: 8px; margin-top: 10px; }
.age-num[b-l98luz7h49] { font-size: 4rem; font-weight: 800; line-height: 1; letter-spacing: -.03em; background: linear-gradient(90deg, #fff, #c7c2ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.age-unit[b-l98luz7h49] { color: #a9aed6; font-size: 1.1rem; }
.range-text[b-l98luz7h49] { color: #a9aed6; font-size: .92rem; margin-top: 4px; }
.range-text strong[b-l98luz7h49] { color: #fff; }

.range[b-l98luz7h49] { position: relative; height: 10px; margin: 16px 0 26px; border-radius: 999px; background: rgba(255,255,255,.08); }
.band[b-l98luz7h49] { position: absolute; top: 0; bottom: 0; border-radius: 999px; background: linear-gradient(90deg, rgba(109,93,252,.75), rgba(0,194,255,.75)); }
.marker[b-l98luz7h49] { position: absolute; top: 50%; width: 18px; height: 18px; border-radius: 50%; background: #fff; transform: translate(-50%, -50%); box-shadow: 0 0 0 4px rgba(127,227,255,.35), 0 4px 10px rgba(0,0,0,.4); }
.ticks[b-l98luz7h49] { position: absolute; top: 16px; left: 0; right: 0; display: flex; justify-content: space-between; font-size: .7rem; color: #6f75a3; }

.metrics[b-l98luz7h49] { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.metric label[b-l98luz7h49] { display: block; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: #6f75a3; }
.metric .val[b-l98luz7h49] { color: #fff; font-weight: 600; margin: 3px 0 6px; }
.metric small[b-l98luz7h49] { color: #a9aed6; font-weight: 400; }
.bar[b-l98luz7h49] { height: 6px; border-radius: 999px; background: rgba(255,255,255,.08); overflow: hidden; }
.bar span[b-l98luz7h49] { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #ff4fa3, #a99fff); }
.bar.q span[b-l98luz7h49] { background: linear-gradient(90deg, #ffb547, #5be3a3); }

.warnings[b-l98luz7h49] { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.warnings span[b-l98luz7h49] { font-size: .78rem; padding: 3px 9px; border-radius: 999px; color: #ffd38a; background: rgba(255,181,71,.12); border: 1px solid rgba(255,181,71,.3); }

details[b-l98luz7h49] { margin-top: 14px; color: #a9aed6; font-size: .85rem; }
summary[b-l98luz7h49] { cursor: pointer; color: #8b91c2; }
dl[b-l98luz7h49] { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; margin: 10px 0 0; }
dt[b-l98luz7h49] { color: #6f75a3; }
dd[b-l98luz7h49] { margin: 0; color: #dfe3ff; }

.skeleton[b-l98luz7h49] { height: 220px; display: flex; flex-direction: column; gap: 14px; }
.skeleton div[b-l98luz7h49] { height: 18px; border-radius: 8px; background: linear-gradient(90deg, rgba(255,255,255,.05), rgba(255,255,255,.12), rgba(255,255,255,.05)); background-size: 200% 100%; animation: shimmer-b-l98luz7h49 1.2s linear infinite; }
.skeleton div:nth-child(1)[b-l98luz7h49] { width: 30%; } .skeleton div:nth-child(2)[b-l98luz7h49] { width: 55%; height: 56px; } .skeleton div:nth-child(3)[b-l98luz7h49] { width: 80%; }
@keyframes shimmer-b-l98luz7h49 { to { background-position: -200% 0; } }