/* /Components/Layout/AuthLayout.razor.rz.scp.css */
/* Auth Layout */
.auth-layout[b-ukwnxz2lu4] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    width: 100%;
    background-color: var(--color-background);
    color: var(--color-text-primary);
    padding: 1.5rem;
}

.auth-container[b-ukwnxz2lu4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 400px;
}

.auth-brand[b-ukwnxz2lu4] {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 2rem;
}

.brand-name[b-ukwnxz2lu4] {
    font-family: 'Raleway', sans-serif;
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-primary);
    letter-spacing: 0.5px;
}

.auth-card[b-ukwnxz2lu4] {
    width: 100%;
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 2rem;
}

@media (max-width: 480px) {
    .auth-layout[b-ukwnxz2lu4] {
        padding: 1rem;
    }

    .auth-card[b-ukwnxz2lu4] {
        padding: 1.5rem;
        border-radius: 8px;
    }

    .brand-name[b-ukwnxz2lu4] {
        font-size: 1.75rem;
    }
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
.app-loading-state[b-3peewr3ljr],
.auth-stage[b-3peewr3ljr] {
    min-height:100vh; position:relative; z-index:1; display:flex;
    align-items:center; justify-content:center; flex-direction:column; gap:18px; padding:20px;
}
.app-loading-state img[b-3peewr3ljr] {
    width:110px; height:110px; object-fit:contain;
}

/* Avaelable Web Layout */
.yt-shell[b-3peewr3ljr] { display:flex; min-height:100vh; position:relative; z-index:1; }

/* Sidebar */
.yt-sidebar[b-3peewr3ljr] {
    width:var(--sidebar-w); min-width:var(--sidebar-w);
    background:linear-gradient(180deg,rgba(13,13,21,.94),rgba(7,7,12,.94));
    border-right:1px solid var(--border);
    display:flex; flex-direction:column; height:100vh;
    position:sticky; top:0; z-index:10; overflow-y:auto;
    padding:22px 14px 16px; gap:22px;
}
.yt-sidebar[b-3peewr3ljr]::-webkit-scrollbar {width:4px}
.yt-sidebar[b-3peewr3ljr]::-webkit-scrollbar-thumb {background:rgba(255,255,255,.1);border-radius:2px}

.yt-brand[b-3peewr3ljr] {
    display:flex; align-items:center; gap:10px; padding:0 8px; cursor:pointer; user-select:none;
}
.yt-brand-icon[b-3peewr3ljr] { width:42px; height:42px; object-fit:contain; flex:none; }
.yt-brand strong[b-3peewr3ljr] {
    font-family:var(--display); font-size:21px; font-weight:700; letter-spacing:-.01em; color:var(--text);
}

.yt-nav[b-3peewr3ljr] { flex:1; display:flex; flex-direction:column; gap:3px; }
.yt-nav[b-3peewr3ljr]  .yt-nav-item {
    position:relative; display:flex; align-items:center; gap:14px;
    padding:11px 14px; border-radius:14px; color:#C3C1D2;
    font-size:15px; font-weight:500; text-decoration:none; user-select:none;
    transition:background .15s,color .15s;
}
.yt-nav[b-3peewr3ljr]  .yt-nav-icon { width:22px; display:flex; justify-content:center; flex:none; }
.yt-nav[b-3peewr3ljr]  .yt-nav-item i { font-size:17px; line-height:1; }
.yt-nav[b-3peewr3ljr]  .yt-nav-label { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.yt-nav[b-3peewr3ljr]  .yt-nav-item:hover { background:rgba(255,255,255,.05); color:var(--text); }
.yt-nav[b-3peewr3ljr]  .yt-nav-item.active {
    background:rgba(255,255,255,.08); color:var(--text); font-weight:600;
    box-shadow:inset 3px 0 0 var(--accent);
}
.yt-nav[b-3peewr3ljr]  .yt-nav-item.active i { color:var(--accent); }
.yt-nav[b-3peewr3ljr]  .yt-nav-live i { color:var(--live); }
.yt-nav-sep[b-3peewr3ljr] { height:1px; background:var(--border); margin:10px 8px; }
.yt-nav[b-3peewr3ljr]  .yt-badge {
    margin-left:auto; min-width:22px; padding:1px 7px; border-radius:999px;
    background:var(--accent); color:var(--accent-ink);
    font-size:12px; font-weight:700; text-align:center;
}

.yt-sidebar-footer[b-3peewr3ljr] {
    display:flex; flex-direction:column; gap:8px; padding-top:14px; border-top:1px solid var(--border);
}
.yt-user[b-3peewr3ljr] {
    display:flex; align-items:center; gap:10px; padding:8px; border-radius:14px; min-width:0;
}
.yt-user-av[b-3peewr3ljr] {
    width:38px; height:38px; border-radius:50%; flex:none; overflow:hidden;
    background:linear-gradient(135deg,var(--accent),var(--live));
    display:flex; align-items:center; justify-content:center;
    font-family:var(--display); font-size:14px; font-weight:700; color:#fff;
}
.yt-user-av img[b-3peewr3ljr] { width:100%; height:100%; object-fit:cover; }
.yt-user-info[b-3peewr3ljr] { min-width:0; }
.yt-user-name[b-3peewr3ljr] { font-size:14px; font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.yt-user-email[b-3peewr3ljr] { font-size:12px; color:var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.yt-logout[b-3peewr3ljr] {
    display:flex; align-items:center; gap:12px; padding:10px 14px; border-radius:14px;
    background:transparent; border:0; color:var(--text-muted); font-size:14px; transition:color .2s,background .2s;
}
.yt-logout:hover[b-3peewr3ljr] { color:#FF7A86; background:rgba(255,78,92,.08); }

/* Main */
.yt-main[b-3peewr3ljr] {
    flex:1; min-width:0; padding:28px 36px 48px;
    overflow-y:auto; height:100vh; position:relative; z-index:1;
}
.yt-main:focus[b-3peewr3ljr] { outline:none; }

/* Bottom nav mobile */
.yt-bottom-nav[b-3peewr3ljr] {
    display:none; position:fixed; bottom:0; left:0; right:0;
    background:rgba(7,7,12,.9); border-top:1px solid var(--border);
    backdrop-filter:blur(18px);
    padding:4px 0 env(safe-area-inset-bottom,4px); z-index:100;
    justify-content:space-around;
}
.yt-bottom-nav[b-3peewr3ljr]  .yt-bn-item {
    display:flex; flex-direction:column; align-items:center; gap:2px;
    color:var(--text-muted); font-size:10px; text-decoration:none; padding:6px 12px;
}
.yt-bottom-nav[b-3peewr3ljr]  .yt-bn-item i { font-size:18px; }
.yt-bottom-nav[b-3peewr3ljr]  .yt-bn-item.active { color:var(--accent); }
.yt-bottom-nav[b-3peewr3ljr]  .yt-bn-live i { color:var(--live); }

/* sidebar compatta: solo icone */
@media(max-width:1100px){
    .yt-sidebar[b-3peewr3ljr] {width:84px;min-width:84px;padding:20px 10px;align-items:center}
    .yt-brand strong[b-3peewr3ljr],.yt-nav[b-3peewr3ljr]  .yt-nav-label,.yt-user-info[b-3peewr3ljr],.yt-logout span[b-3peewr3ljr] {display:none}
    .yt-brand[b-3peewr3ljr] {padding:0}
    .yt-nav[b-3peewr3ljr]  .yt-nav-item {justify-content:center;padding:13px}
    .yt-nav[b-3peewr3ljr]  .yt-badge {position:absolute;top:4px;right:2px;min-width:18px;padding:0 5px;font-size:10px}
    .yt-logout[b-3peewr3ljr] {justify-content:center}
    .yt-main[b-3peewr3ljr] {padding:22px 20px 40px}
}
@media(max-width:640px){
    .yt-sidebar[b-3peewr3ljr] {display:none}
    .yt-bottom-nav[b-3peewr3ljr] {display:flex}
    .yt-main[b-3peewr3ljr] {padding:16px 14px 76px}
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-x16c34cn80],
.components-reconnect-repeated-attempt-visible[b-x16c34cn80],
.components-reconnect-failed-visible[b-x16c34cn80],
.components-pause-visible[b-x16c34cn80],
.components-resume-failed-visible[b-x16c34cn80],
.components-rejoining-animation[b-x16c34cn80] {
    display: none;
}

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


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

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

}

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

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

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

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

    100% {
        opacity: 1;
    }
}

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

    100% {
        opacity: 0;
    }
}

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

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

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

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

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

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

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

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

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