/* /Features/Home/Home.razor.rz.scp.css */
/* ── Hero ──────────────────────────────────────────────
   Prawie żadnej dekoracji: jedyny "efekt" to ilość powietrza
   wokół nagłówka. Bardzo delikatny wash w prawym górnym rogu
   ociepla biel, żeby nie czytała się jako pusty arkusz. */

.hero[b-72iomq13ys] {
    position: relative;
    padding: calc(var(--header-h) / 2 + var(--space-20)) 0 var(--space-16);
    background:
        radial-gradient(60rem 34rem at 82% -18%, var(--accent-wash) 0%, rgba(255, 244, 236, 0) 62%),
        radial-gradient(48rem 30rem at 8% -12%, var(--slate-wash) 0%, rgba(242, 246, 249, 0) 58%),
        var(--surface);
    overflow: hidden;
}

/* Hairline u dołu hero — "linia bazowa" rysunku technicznego. */
.hero[b-72iomq13ys]::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: var(--hairline);
}

.hero__content[b-72iomq13ys] { max-width: 54rem; }

.hero h1[b-72iomq13ys] { margin-bottom: var(--space-6); }

.hero__break[b-72iomq13ys] { display: none; }

@media (min-width: 56.25rem) {
    .hero__break[b-72iomq13ys] { display: block; }
}

/* Akcent nie jako kolor tekstu (2.59:1 — nieczytelny), tylko jako
   podkreślenie POD tekstem. Kolor niesie uwagę, grafit niesie treść.

   Realizowane gradientem tła, nie pseudo-elementem: ::after z
   z-index:-1 wpadłby za tło sekcji i zniknął, a bez z-index
   przykryłby dolną krawędź liter. Tło maluje się pod tekstem
   z definicji, więc animacja background-size jest tu pewniejsza. */
/* display:inline + box-decoration-break:clone, NIE inline-block:
   przy inline-block cały (wielowierszowy na mobile) box dostaje
   jeden pasek na 88% swojej wysokości — czyli kreskę przecinającą
   tekst w poprzek. Clone daje każdemu wierszowi własne podkreślenie. */
.hero__accent[b-72iomq13ys] {
    display: inline;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    background-image: linear-gradient(var(--accent), var(--accent));
    background-repeat: no-repeat;
    background-position: 0 88%;
    background-size: 0% 0.16em;
    transition: background-size 0.7s var(--ease) 0.15s;
}

/* Bez JS podkreślenie jest po prostu narysowane — nigdy nie zostaje
   w stanie "niedokończonym". */
.js .reveal.revealed .hero__accent[b-72iomq13ys],
html:not(.js) .hero__accent[b-72iomq13ys] {
    background-size: 100% 0.16em;
}

.hero__lede[b-72iomq13ys] {
    max-width: 40rem;
    font-size: 1.1875rem;
    line-height: 1.65;
    color: var(--text-soft);
}

.hero__actions[b-72iomq13ys] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin-top: var(--space-10);
}

/* ── Trust strip ───────────────────────────────────── */

.trust-strip[b-72iomq13ys] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-8);
    margin: var(--space-20) 0 0;
    padding-top: var(--space-8);
    border-top: 1px solid var(--hairline);
}

.trust-strip__item + .trust-strip__item[b-72iomq13ys] {
    border-left: 1px solid var(--hairline);
    padding-left: var(--space-8);
}

.trust-strip dt[b-72iomq13ys] {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--slate);
    margin-bottom: var(--space-2);
}

.trust-strip dd[b-72iomq13ys] {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text);
}

@media (max-width: 43.75rem) {
    .trust-strip[b-72iomq13ys] {
        grid-template-columns: 1fr;
        gap: var(--space-5);
    }

    .trust-strip__item + .trust-strip__item[b-72iomq13ys] {
        border-left: 0;
        padding-left: 0;
        border-top: 1px solid var(--hairline);
        padding-top: var(--space-5);
    }
}

/* ── Grids ─────────────────────────────────────────── */

.grid-2[b-72iomq13ys] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-6);
}

@media (max-width: 48rem) {
    .grid-2[b-72iomq13ys] { grid-template-columns: 1fr; }
}

.risk-list li[b-72iomq13ys] { font-size: 1.0625rem; }

/* Kolorowa krawędź tylko na górze karty (2px) zamiast obramowania
   całości — sygnalizuje rejestr (ostrzeżenie / potwierdzenie),
   nie krzyczy kolorem. */
.card--bad[b-72iomq13ys], .card--good[b-72iomq13ys] { position: relative; overflow: hidden; }

.card--bad[b-72iomq13ys]::before,
.card--good[b-72iomq13ys]::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
}

.card--bad[b-72iomq13ys]::before  { background: var(--bad); }
.card--good[b-72iomq13ys]::before { background: var(--good); }

/* ── About ─────────────────────────────────────────── */

.about[b-72iomq13ys] {
    display: grid;
    grid-template-columns: 18rem 1fr;
    gap: var(--space-16);
    align-items: start;
}

.about__portrait[b-72iomq13ys] {
    aspect-ratio: 4 / 5;
    border: 1px solid var(--hairline-strong);
    border-radius: var(--radius-lg);
    background:
        repeating-linear-gradient(
            -45deg,
            var(--surface) 0 10px,
            var(--surface-muted) 10px 20px
        );
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-soft);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    box-shadow: var(--shadow-sm);
}

.about__body h2[b-72iomq13ys] { margin-bottom: var(--space-5); }

.about__body p[b-72iomq13ys] { color: var(--text-soft); }

.about__note[b-72iomq13ys] {
    margin-top: var(--space-6);
    padding-left: var(--space-5);
    border-left: 2px solid var(--slate-line);
    font-size: 0.875rem;
    color: var(--text-soft);
}

@media (max-width: 56.25rem) {
    .about[b-72iomq13ys] {
        grid-template-columns: 1fr;
        gap: var(--space-8);
    }

    .about__portrait[b-72iomq13ys] { max-width: 14rem; }
}

/* ── Credential module ─────────────────────────────────
   Ma czytać się jak wyciąg z rejestru, nie jak karta produktu:
   mono-etykiety, wiersze rozdzielone hairline'ami, chłodna
   slate'owa rama, zero zaokrągleń "konsumenckich". Dlatego
   też brak hover-liftu — dokument urzędowy nie reaguje na kursor. */

.credential[b-72iomq13ys] {
    border: 1px solid var(--slate-line);
    border-radius: var(--radius-md);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    max-width: 52rem;
}

.credential__header[b-72iomq13ys] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
    padding: var(--space-5) var(--space-8);
    background: var(--slate-wash);
    border-bottom: 1px solid var(--slate-line);
}

.credential__label[b-72iomq13ys] {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--slate);
}

.credential__fields[b-72iomq13ys] { margin: 0; padding: 0 var(--space-8); }

.credential__row[b-72iomq13ys] {
    display: grid;
    grid-template-columns: 14rem 1fr;
    gap: var(--space-6);
    padding: var(--space-5) 0;
    border-bottom: 1px solid var(--hairline);
}

.credential__row:last-child[b-72iomq13ys] { border-bottom: 0; }

.credential__row dt[b-72iomq13ys] {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-soft);
    padding-top: 0.15em;
}

.credential__row dd[b-72iomq13ys] {
    margin: 0;
    font-weight: 600;
    color: var(--text);
}

/* Placeholder ma wyglądać na celowo pusty slot, nie na treść. */
.is-pending[b-72iomq13ys] {
    color: var(--accent-text) !important;
    font-family: var(--font-mono);
    font-size: 0.875rem;
    font-weight: 500 !important;
}

.credential__scan[b-72iomq13ys] {
    margin: 0 var(--space-8) var(--space-8);
    border: 1.5px dashed var(--slate-line);
    border-radius: var(--radius-sm);
    min-height: 11rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-subtle);
    color: var(--text-soft);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.credential__gate[b-72iomq13ys] {
    margin-top: var(--space-8);
    font-size: 0.875rem;
    color: var(--text-soft);
    padding-left: var(--space-5);
    border-left: 2px solid var(--accent);
}

@media (max-width: 43.75rem) {
    .credential__header[b-72iomq13ys],
    .credential__fields[b-72iomq13ys] { padding-left: var(--space-5); padding-right: var(--space-5); }

    .credential__scan[b-72iomq13ys] { margin-left: var(--space-5); margin-right: var(--space-5); }

    .credential__row[b-72iomq13ys] {
        grid-template-columns: 1fr;
        gap: var(--space-2);
    }
}

/* ── Steps ─────────────────────────────────────────────
   Kwadratowe znaczniki spięte pionową szyną — motyw rury/
   pionu instalacyjnego. Kółka czytałyby się jak "onboarding",
   kwadraty jak rysunek techniczny. */

.steps[b-72iomq13ys] {
    list-style: none;
    padding: 0;
    margin: 0;
    counter-reset: step;
}

.steps li[b-72iomq13ys] {
    counter-increment: step;
    position: relative;
    padding: 0 0 var(--space-10) var(--space-16);
    margin: 0;
}

.steps li:last-child[b-72iomq13ys] { padding-bottom: 0; }

.steps li[b-72iomq13ys]::before {
    content: counter(step, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: 0;
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface);
    border: 1px solid var(--slate-line);
    border-radius: var(--radius-xs);
    color: var(--slate);
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    font-weight: 500;
    z-index: 1;
}

/* Szyna łącząca — nie rysujemy jej pod ostatnim krokiem. */
.steps li:not(:last-child)[b-72iomq13ys]::after {
    content: "";
    position: absolute;
    left: 1.25rem;
    top: 2.5rem;
    bottom: 0;
    width: 1px;
    background: var(--hairline-strong);
}

.steps h3[b-72iomq13ys] { margin-bottom: var(--space-2); padding-top: 0.35rem; }

.steps p[b-72iomq13ys] { color: var(--text-soft); margin: 0; font-size: 0.9375rem; }

@media (max-width: 37.5rem) {
    .steps li[b-72iomq13ys] { padding-left: var(--space-12); }
    .steps li:not(:last-child)[b-72iomq13ys]::after { left: 1.125rem; }
    .steps li[b-72iomq13ys]::before { width: 2.25rem; height: 2.25rem; }
}

/* ── Pricing note ──────────────────────────────────── */

.pricing-note[b-72iomq13ys] {
    margin-top: var(--space-8);
    padding-top: var(--space-6);
    border-top: 1px solid var(--hairline);
    font-size: 0.875rem;
    color: var(--text-soft);
}

/* ── Contact ───────────────────────────────────────── */

.contact[b-72iomq13ys] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-16);
    align-items: start;
}

.contact__intro p[b-72iomq13ys] { color: var(--text-soft); }

.contact__details[b-72iomq13ys] {
    display: flex;
    gap: var(--space-10);
    margin: var(--space-8) 0 0;
    flex-wrap: wrap;
}

.contact__details dt[b-72iomq13ys] {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--slate);
    margin-bottom: var(--space-2);
}

.contact__details dd[b-72iomq13ys] { margin: 0; font-weight: 600; }

.contact-form[b-72iomq13ys] {
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: var(--space-8);
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.form-field[b-72iomq13ys] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.form-field label[b-72iomq13ys] {
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--text);
}

.form-field input[b-72iomq13ys],
.form-field textarea[b-72iomq13ys] {
    font-family: inherit;
    font-size: 0.9375rem;
    color: var(--text);
    padding: 0.75rem 0.9rem;
    border: 1px solid var(--hairline-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    transition: border-color var(--motion-fast) var(--ease),
                box-shadow var(--motion-fast) var(--ease);
}

.form-field input[b-72iomq13ys]::placeholder,
.form-field textarea[b-72iomq13ys]::placeholder { color: var(--text-soft); }

.form-field input:focus[b-72iomq13ys],
.form-field textarea:focus[b-72iomq13ys] {
    outline: none;
    border-color: var(--slate);
    box-shadow: 0 0 0 3px rgba(55, 87, 111, 0.12);
}

.form-field textarea[b-72iomq13ys] { resize: vertical; min-height: 7rem; }

.contact-form button[b-72iomq13ys] { align-self: flex-start; margin-top: var(--space-2); }

@media (max-width: 56.25rem) {
    .contact[b-72iomq13ys] { grid-template-columns: 1fr; gap: var(--space-10); }
}

/* ── FAQ ───────────────────────────────────────────── */

.faq[b-72iomq13ys] { border-top: 1px solid var(--hairline); }

.faq details[b-72iomq13ys] { border-bottom: 1px solid var(--hairline); }

.faq summary[b-72iomq13ys] {
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-6);
    padding: var(--space-6) 0;
    font-weight: 600;
    font-size: 1rem;
    color: var(--text);
    transition: color var(--motion-fast) var(--ease);
}

.faq summary:hover[b-72iomq13ys] { color: var(--accent-text); }

.faq summary[b-72iomq13ys]::-webkit-details-marker { display: none; }

/* Krzyżyk zbudowany z dwóch kresek — obraca się o 45° przy
   otwarciu, więc "+" płynnie staje się "×". */
.faq summary[b-72iomq13ys]::after {
    content: "";
    flex-shrink: 0;
    width: 0.875rem;
    height: 0.875rem;
    background-image:
        linear-gradient(var(--accent-text) 0 0),
        linear-gradient(var(--accent-text) 0 0);
    background-size: 100% 1.5px, 1.5px 100%;
    background-position: center, center;
    background-repeat: no-repeat;
    transition: transform var(--motion-base) var(--ease);
}

.faq details[open] summary[b-72iomq13ys]::after { transform: rotate(135deg); }

.faq__answer[b-72iomq13ys] {
    padding-bottom: var(--space-6);
    max-width: 42rem;
}

.faq__answer p[b-72iomq13ys] { color: var(--text-soft); margin: 0; font-size: 0.9375rem; }
/* /Shared/Layouts/MainLayout.razor.rz.scp.css */
/* ── Skip link ─────────────────────────────────────── */

.skip-link[b-t7o54f31jr] {
    position: absolute;
    left: var(--space-4);
    top: -4rem;
    z-index: 200;
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--hairline-strong);
    border-radius: var(--radius-sm);
    padding: var(--space-3) var(--space-5);
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    box-shadow: var(--shadow-md);
    transition: top var(--motion-base) var(--ease);
}

.skip-link:focus[b-t7o54f31jr] { top: var(--space-4); }

/* ── Header ────────────────────────────────────────────
   Półprzezroczysta biel + blur: pod nagłówkiem widać, że treść
   przesuwa się dalej, więc pasek nie odcina strony jak listwa,
   tylko unosi się nad nią. Hairline zamiast cienia w stanie
   spoczynku — cień pojawia się dopiero po przewinięciu. */

.site-header[b-t7o54f31jr] {
    position: sticky;
    top: 0;
    z-index: 100;
    height: var(--header-h);
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid transparent;
    transition: border-color var(--motion-base) var(--ease),
                box-shadow var(--motion-base) var(--ease),
                background var(--motion-base) var(--ease);
}

.site-header.scrolled[b-t7o54f31jr] {
    border-bottom-color: var(--hairline);
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 1px 20px rgba(34, 38, 43, 0.05);
}

.site-header__inner[b-t7o54f31jr] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
    width: 100%;
}

/* ── Brand ─────────────────────────────────────────── */

.brand[b-t7o54f31jr] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    text-decoration: none;
    color: var(--text);
    font-weight: 700;
    letter-spacing: -0.015em;
    font-size: 0.9375rem;
}

.brand:hover[b-t7o54f31jr] { color: var(--text); }

.brand__mark[b-t7o54f31jr] {
    width: 1.5rem;
    height: 1.5rem;
    flex-shrink: 0;
    display: block;
}

.brand__mark svg[b-t7o54f31jr] { width: 100%; height: 100%; display: block; }

/* ── Nav ───────────────────────────────────────────── */

.site-nav[b-t7o54f31jr] {
    display: flex;
    align-items: center;
    gap: var(--space-8);
}

.site-nav a:not(.site-nav__cta)[b-t7o54f31jr] {
    position: relative;
    color: var(--text-soft);
    text-decoration: none;
    font-size: 0.9375rem;
    font-weight: 500;
    padding: 0.25rem 0;
    transition: color var(--motion-fast) var(--ease);
}

/* Podkreślenie wyjeżdża od lewej zamiast pojawiać się skokowo —
   ten sam "precyzyjny" rejestr ruchu co reszta strony. */
.site-nav a:not(.site-nav__cta)[b-t7o54f31jr]::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1.5px;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--motion-base) var(--ease);
}

.site-nav a:not(.site-nav__cta):hover[b-t7o54f31jr] { color: var(--text); }
.site-nav a:not(.site-nav__cta):hover[b-t7o54f31jr]::after { transform: scaleX(1); }

.site-nav__cta[b-t7o54f31jr] {
    padding: 0.65rem 1.15rem;
    font-size: 0.875rem;
}

/* Linki chowamy poniżej 900px (brak miejsca obok CTA), ale nazwa
   firmy zostaje — na tablecie jest na nią miejsce, a marka to
   pierwszy element zaufania. Znika dopiero na wąskich telefonach. */
@media (max-width: 56.25rem) {
    .site-nav a:not(.site-nav__cta)[b-t7o54f31jr] { display: none; }
}

@media (max-width: 30rem) {
    .brand__text[b-t7o54f31jr] { display: none; }
}

/* ── Footer ────────────────────────────────────────────
   Jasna, nie grafitowa. Ciemna stopka "domykałaby" stronę
   ciężarem — tu domyka ją cisza: hairline + dużo powietrza. */

.site-footer[b-t7o54f31jr] {
    background: var(--surface-subtle);
    border-top: 1px solid var(--hairline);
    padding: var(--space-16) 0 var(--space-8);
}

.site-footer__top[b-t7o54f31jr] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-12);
    flex-wrap: wrap;
    padding-bottom: var(--space-10);
}

.site-footer__meta[b-t7o54f31jr] {
    display: flex;
    gap: var(--space-12);
    flex-wrap: wrap;
    margin: 0;
}

.site-footer__meta dt[b-t7o54f31jr] {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--slate);
    margin-bottom: var(--space-2);
}

.site-footer__meta dd[b-t7o54f31jr] {
    margin: 0;
    font-size: 0.9375rem;
    color: var(--text-soft);
}

.site-footer__legal[b-t7o54f31jr] {
    border-top: 1px solid var(--hairline);
    padding-top: var(--space-6);
    margin: 0;
    font-size: 0.8125rem;
    color: var(--text-soft);
}

@media (max-width: 37.5rem) {
    .site-footer__meta[b-t7o54f31jr] { gap: var(--space-6); flex-direction: column; }
}
/* /Shared/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-tttgminszr],
.components-reconnect-repeated-attempt-visible[b-tttgminszr],
.components-reconnect-failed-visible[b-tttgminszr],
.components-pause-visible[b-tttgminszr],
.components-resume-failed-visible[b-tttgminszr],
.components-rejoining-animation[b-tttgminszr] {
    display: none;
}

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


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

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

}

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

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

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

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

    100% {
        opacity: 1;
    }
}

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

    100% {
        opacity: 0;
    }
}

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

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

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

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

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

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

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

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

@keyframes components-rejoining-animation-b-tttgminszr {
    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;
    }
}