/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* MainLayout - minimal, Discord handles all layout */
/* /Components/Layout/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-9kvfpixown] {
    appearance: none;
    cursor: pointer;
    width: 3.5rem;
    height: 2.5rem;
    color: white;
    position: absolute;
    top: 0.5rem;
    right: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem rgba(255, 255, 255, 0.1);
}

.navbar-toggler:checked[b-9kvfpixown] {
    background-color: rgba(255, 255, 255, 0.5);
}

.top-row[b-9kvfpixown] {
    min-height: 3.5rem;
    background-color: rgba(0,0,0,0.4);
}

.navbar-brand[b-9kvfpixown] {
    font-size: 1.1rem;
}

.bi[b-9kvfpixown] {
    display: inline-block;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    top: -1px;
    background-size: cover;
}

.bi-house-door-fill-nav-menu[b-9kvfpixown] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
}

.bi-plus-square-fill-nav-menu[b-9kvfpixown] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
}

.bi-list-nested-nav-menu[b-9kvfpixown] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
}

.nav-item[b-9kvfpixown] {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
}

    .nav-item:first-of-type[b-9kvfpixown] {
        padding-top: 1rem;
    }

    .nav-item:last-of-type[b-9kvfpixown] {
        padding-bottom: 1rem;
    }

    .nav-item[b-9kvfpixown]  .nav-link {
        color: #d7d7d7;
        background: none;
        border: none;
        border-radius: 4px;
        height: 3rem;
        display: flex;
        align-items: center;
        line-height: 3rem;
        width: 100%;
    }

.nav-item[b-9kvfpixown]  a.active {
    background-color: rgba(255,255,255,0.37);
    color: white;
}

.nav-item[b-9kvfpixown]  .nav-link:hover {
    background-color: rgba(255,255,255,0.1);
    color: white;
}

.nav-scrollable[b-9kvfpixown] {
    display: none;
}

.navbar-toggler:checked ~ .nav-scrollable[b-9kvfpixown] {
    display: block;
}

@media (min-width: 641px) {
    .navbar-toggler[b-9kvfpixown] {
        display: none;
    }

    .nav-scrollable[b-9kvfpixown] {
        /* Never collapse the sidebar for wide screens */
        display: block;

        /* Allow sidebar to scroll for tall menus */
        height: calc(100vh - 3.5rem);
        overflow-y: auto;
    }
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
/* ── Visibility rules ────────────────────────────────────────────────────── */

.components-reconnect-first-attempt-visible[b-48u7o9hmoi],
.components-reconnect-repeated-attempt-visible[b-48u7o9hmoi],
.components-reconnect-failed-visible[b-48u7o9hmoi],
.components-pause-visible[b-48u7o9hmoi],
.components-resume-failed-visible[b-48u7o9hmoi],
.components-rejoining-animation[b-48u7o9hmoi],
.components-circuit-rejected-visible[b-48u7o9hmoi] {
    display: none;
}

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

#components-reconnect-modal[data-circuit-rejected] .components-circuit-rejected-visible[b-48u7o9hmoi] {
    display: flex;
}

/* ── Dialog shell ────────────────────────────────────────────────────────── */

#components-reconnect-modal[b-48u7o9hmoi] {
    background: #1e2030;
    border: 1px solid #2c2f3b;
    color: #dcddde;
    width: 340px;
    margin: 20vh auto;
    padding: 28px 24px;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
    opacity: 0;
    transition: display 0.4s allow-discrete, overlay 0.4s allow-discrete;
    animation: rcm-fadeOut-b-48u7o9hmoi 0.4s both;
}

#components-reconnect-modal[open][b-48u7o9hmoi] {
    animation: rcm-slideUp-b-48u7o9hmoi 0.4s cubic-bezier(.05, .89, .25, 1.02) 0.1s,
               rcm-fadeIn-b-48u7o9hmoi  0.3s ease-in-out 0.1s;
    animation-fill-mode: both;
}

#components-reconnect-modal[b-48u7o9hmoi]::backdrop {
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(3px);
    animation: rcm-fadeIn-b-48u7o9hmoi 0.3s ease-in-out;
    opacity: 1;
}

/* ── Container ───────────────────────────────────────────────────────────── */

.components-reconnect-container[b-48u7o9hmoi] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
}

#components-reconnect-modal p[b-48u7o9hmoi] {
    margin: 0;
    font-size: 14px;
    color: #b9bbbe;
    line-height: 1.4;
}

/* ── Reconnect / retry buttons ───────────────────────────────────────────── */

#components-reconnect-modal button[b-48u7o9hmoi] {
    margin-top: 4px;
    padding: 8px 24px;
    border-radius: 6px;
    background: #5865f2;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: background .15s;
}

#components-reconnect-modal button:hover[b-48u7o9hmoi] { background: #4752c4; }

/* ── Circuit-rejected state ──────────────────────────────────────────────── */

.components-circuit-rejected-visible[b-48u7o9hmoi] {
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.rcm-error-icon[b-48u7o9hmoi] {
    font-size: 42px;
    color: #ed4245;
    line-height: 1;
}

.rcm-error-title[b-48u7o9hmoi] {
    margin: 0;
    font-size: 17px !important;
    font-weight: 700;
    color: #fff !important;
}

.rcm-error-sub[b-48u7o9hmoi] {
    margin: 0;
    font-size: 13px !important;
    color: #8e9297 !important;
}

.rcm-reload-btn[b-48u7o9hmoi] {
    display: flex !important;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    padding: 9px 22px !important;
    background: #ed4245 !important;
}

.rcm-reload-btn:hover[b-48u7o9hmoi] { background: #c03537 !important; }

/* ── Reconnecting spinner ────────────────────────────────────────────────── */

.components-rejoining-animation[b-48u7o9hmoi] {
    position: relative;
    width: 60px;
    height: 60px;
}

.components-rejoining-animation div[b-48u7o9hmoi] {
    position: absolute;
    border: 3px solid #5865f2;
    opacity: 1;
    border-radius: 50%;
    animation: rcm-pulse-b-48u7o9hmoi 1.4s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}

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

@keyframes rcm-pulse-b-48u7o9hmoi {
    0%   { top: 30px; left: 30px; width: 0;    height: 0;    opacity: 0; }
    4.9% { top: 30px; left: 30px; width: 0;    height: 0;    opacity: 0; }
    5%   { top: 30px; left: 30px; width: 0;    height: 0;    opacity: 1; }
    100% { top: 0;    left: 0;    width: 60px; height: 60px; opacity: 0; }
}

/* ── Animations ──────────────────────────────────────────────────────────── */

@keyframes rcm-slideUp-b-48u7o9hmoi {
    from { transform: translateY(20px) scale(0.97); }
    to   { transform: translateY(0)    scale(1);    }
}

@keyframes rcm-fadeIn-b-48u7o9hmoi  { from { opacity: 0; } to { opacity: 1; } }
@keyframes rcm-fadeOut-b-48u7o9hmoi { from { opacity: 1; } to { opacity: 0; } }
/* /Components/Pages/Chat.razor.rz.scp.css */
/* ── Keyboard shortcuts help modal ───────────────────────────────────────── */

.ks-backdrop[b-npevlp9w11] {
    position: fixed;
    inset: 0;
    z-index: 3000;
    background: rgba(0,0,0,0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: ks-fade-b-npevlp9w11 0.12s ease;
}
@keyframes ks-fade-b-npevlp9w11 { from { opacity: 0; } to { opacity: 1; } }

.ks-modal[b-npevlp9w11] {
    width: 420px;
    background: #1e2030;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.55);
    overflow: hidden;
    animation: ks-pop-b-npevlp9w11 0.12s ease;
}
@keyframes ks-pop-b-npevlp9w11 {
    from { opacity: 0; transform: scale(0.96); }
    to   { opacity: 1; transform: none; }
}

.ks-modal-header[b-npevlp9w11] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px 14px;
    border-bottom: 1px solid rgba(255,255,255,0.07);
}

.ks-modal-title[b-npevlp9w11] {
    font-size: 15px;
    font-weight: 700;
    color: #e6edf6;
}

.ks-modal-close[b-npevlp9w11] {
    background: transparent;
    border: none;
    color: #5a7394;
    font-size: 16px;
    cursor: pointer;
    padding: 3px 5px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    transition: color 0.12s, background 0.12s;
}
.ks-modal-close:hover[b-npevlp9w11] { color: #c9d4e2; background: rgba(255,255,255,0.06); }

.ks-modal-body[b-npevlp9w11] { padding: 12px 18px 18px; }

.ks-group[b-npevlp9w11] { margin-bottom: 16px; }
.ks-group:last-child[b-npevlp9w11] { margin-bottom: 0; }

.ks-group-label[b-npevlp9w11] {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #5a7394;
    margin-bottom: 6px;
}

.ks-row[b-npevlp9w11] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 0;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}
.ks-row:last-child[b-npevlp9w11] { border-bottom: none; }

.ks-desc[b-npevlp9w11] {
    font-size: 13px;
    color: #8da2ba;
}

.ks-keys[b-npevlp9w11] {
    display: flex;
    align-items: center;
    gap: 3px;
}

.ks-keys kbd[b-npevlp9w11] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 7px;
    min-width: 24px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    border-bottom-width: 2px;
    border-radius: 5px;
    font-size: 11px;
    font-weight: 600;
    font-family: inherit;
    color: #c9d4e2;
}

/* ===== PHOSPHOR ICON SIZING ===== */
.server-item i[b-npevlp9w11] { font-size: 22px; line-height: 1; }
.server-header-btn i[b-npevlp9w11] { font-size: 16px; line-height: 1; }
.category-add-btn i[b-npevlp9w11] { font-size: 16px; line-height: 1; }
.channel-hash i[b-npevlp9w11] { font-size: 16px; line-height: 1; }
.channel-action-btn i[b-npevlp9w11] { font-size: 16px; line-height: 1; }
.dm-close i[b-npevlp9w11] { font-size: 14px; line-height: 1; }
.user-panel-btn i[b-npevlp9w11] { font-size: 20px; line-height: 1; }
.chat-header-hash i[b-npevlp9w11] { font-size: 22px; line-height: 1; }
.header-action-btn i[b-npevlp9w11] { font-size: 22px; line-height: 1; }
.msg-action-btn i[b-npevlp9w11] { font-size: 16px; line-height: 1; }
.attach-btn i[b-npevlp9w11] { font-size: 24px; line-height: 1; }
.input-action-btn i[b-npevlp9w11] { font-size: 22px; line-height: 1; }

/* ===== APP ROOT ===== */
.app-root[b-npevlp9w11] {
    display: flex;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background-color: var(--dc-bg-primary);
}

/* ===== SERVER LIST ===== */
.server-list[b-npevlp9w11] {
    flex: 0 0 72px;
    width: 72px;
    height: 100%;
    background-color: var(--dc-bg-tertiary);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 0;
    gap: 8px;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;
}

.server-list[b-npevlp9w11]::-webkit-scrollbar { display: none; }

.server-item[b-npevlp9w11] {
    position: relative;
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: var(--dc-bg-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: border-radius 0.15s ease, background-color 0.15s ease;
    color: var(--dc-interactive-normal);
    font-weight: 600;
    font-size: 18px;
    user-select: none;
}

.server-item[b-npevlp9w11]::before {
    content: '';
    position: absolute;
    left: -16px;
    top: 50%;
    transform: translateY(-50%) scaleY(0);
    width: 4px;
    height: 8px;
    border-radius: 0 4px 4px 0;
    background-color: #fff;
    transition: transform 0.15s ease, height 0.15s ease;
}

.server-item.has-unread[b-npevlp9w11]::before {
    transform: translateY(-50%) scaleY(1);
    height: 8px;
}

.server-item:hover[b-npevlp9w11] {
    border-radius: 16px;
    background-color: var(--dc-brand);
    color: #fff;
}

.server-item:hover[b-npevlp9w11]::before {
    transform: translateY(-50%) scaleY(1);
    height: 20px;
}

.server-item.active[b-npevlp9w11] {
    border-radius: 16px;
    background-color: var(--dc-brand);
    color: #fff;
}

.server-item.active[b-npevlp9w11]::before {
    transform: translateY(-50%) scaleY(1);
    height: 40px;
}

.server-item.server-dm[b-npevlp9w11] {
    background-color: var(--dc-bg-secondary);
    color: #fff;
    overflow: hidden;
}

.server-dm-icon[b-npevlp9w11] {
    font-size: 26px;
    color: var(--dc-text-normal);
    line-height: 1;
}

.server-item.server-dm:hover[b-npevlp9w11],
.server-item.server-dm.active[b-npevlp9w11] {
    background-color: var(--dc-brand);
}

.server-item.server-add:hover[b-npevlp9w11],
.server-item.server-discover:hover[b-npevlp9w11] {
    background-color: var(--dc-green);
    border-radius: 16px;
    color: #fff;
}

.server-icon-text[b-npevlp9w11] {
    font-size: 16px;
    font-weight: 600;
    pointer-events: none;
}

.server-icon-img[b-npevlp9w11] {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 50%;
    pointer-events: none;
    transition: border-radius 0.2s;
}

.server-item.active .server-icon-img[b-npevlp9w11],
.server-item:hover .server-icon-img[b-npevlp9w11] {
    border-radius: 16px;
}

.server-separator[b-npevlp9w11] {
    width: 32px;
    height: 2px;
    background-color: var(--dc-separator);
    border-radius: 1px;
    flex-shrink: 0;
    margin: 4px 0;
}

.server-spacer[b-npevlp9w11] {
    flex: 1;
}

.server-unread-dot[b-npevlp9w11] {
    position: absolute;
    left: -12px;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #fff;
}

/* ===== CHANNEL SIDEBAR ===== */
.channel-sidebar[b-npevlp9w11] {
    flex: 0 0 240px;
    width: 240px;
    height: 100%;
    background-color: var(--dc-bg-secondary);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.server-header[b-npevlp9w11] {
    flex: 0 0 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    border-bottom: 1px solid rgba(0,0,0,0.3);
    box-shadow: 0 1px 0 rgba(0,0,0,0.3);
    cursor: pointer;
    transition: background-color 0.15s;
    user-select: none;
}

.server-header:hover[b-npevlp9w11] {
    background-color: var(--dc-bg-modifier-hover);
}

.server-name[b-npevlp9w11] {
    font-weight: 700;
    font-size: 15px;
    color: var(--dc-header-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.server-header-btn[b-npevlp9w11] {
    background: none;
    color: var(--dc-interactive-normal);
    padding: 4px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    transition: color 0.15s;
}

.server-header-btn:hover[b-npevlp9w11] { color: var(--dc-interactive-hover); }

/* Channel search (DM mode) */
.channel-search-box[b-npevlp9w11] {
    padding: 8px 8px 4px 8px;
}

.channel-search[b-npevlp9w11] {
    width: 100%;
    background-color: var(--dc-input-bg);
    border: none;
    border-radius: 4px;
    padding: 6px 8px;
    font-size: 13px;
    color: var(--dc-text-normal);
    cursor: pointer;
}

.channel-search[b-npevlp9w11]::placeholder { color: var(--dc-input-placeholder); }

/* Scrollable channel list body */
.channel-sidebar > .channel-category[b-npevlp9w11],
.channel-sidebar > .channel-section-label[b-npevlp9w11],
.channel-sidebar > .dm-item[b-npevlp9w11] {
    flex-shrink: 0;
}

.channel-sidebar > *:not(.server-header):not(.user-panel)[b-npevlp9w11] {
    overflow-y: visible;
}

/* We need a scrollable region — wrap categories */
.channel-category[b-npevlp9w11] {
    padding: 0 8px;
    margin-top: 16px;
}

.channel-category-header[b-npevlp9w11] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 4px;
    cursor: pointer;
    border-radius: 4px;
    color: var(--dc-text-muted);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    user-select: none;
    margin-bottom: 2px;
}

.channel-category-header:hover[b-npevlp9w11] {
    color: var(--dc-interactive-hover);
}

.category-arrow[b-npevlp9w11] {
    transition: transform 0.15s ease;
    flex-shrink: 0;
    font-size: 12px;
    transform: rotate(90deg);
}

.category-arrow.collapsed[b-npevlp9w11] {
    transform: rotate(0deg);
}

.category-add-btn[b-npevlp9w11] {
    background: none;
    color: inherit;
    margin-left: auto;
    display: flex;
    align-items: center;
    padding: 2px;
    border-radius: 2px;
    opacity: 0;
    transition: opacity 0.15s;
}

.channel-category-header:hover .category-add-btn[b-npevlp9w11] {
    opacity: 1;
}

/* ── Quick channel create form ────────────────────────────────────────────── */

.cat-quick-create[b-npevlp9w11] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 4px 6px;
    flex-wrap: wrap;
}

.cat-qc-input[b-npevlp9w11] {
    flex: 1;
    min-width: 0;
    background: #1a1b23;
    border: 1px solid #5865f2;
    border-radius: 4px;
    color: #dcddde;
    font-size: 12px;
    padding: 4px 7px;
    outline: none;
}

.cat-qc-input[b-npevlp9w11]::placeholder { color: #4f545c; }

.cat-qc-type[b-npevlp9w11] {
    background: #1a1b23;
    border: 1px solid #2c2f3b;
    border-radius: 4px;
    color: #b9bbbe;
    font-size: 11px;
    padding: 4px 4px;
    outline: none;
    cursor: pointer;
    flex-shrink: 0;
}

.cat-qc-actions[b-npevlp9w11] {
    display: flex;
    gap: 2px;
    flex-shrink: 0;
}

.cat-qc-confirm[b-npevlp9w11],
.cat-qc-cancel[b-npevlp9w11] {
    width: 26px;
    height: 26px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    transition: background .12s, color .12s;
}

.cat-qc-confirm[b-npevlp9w11] {
    background: #5865f2;
    color: #fff;
}

.cat-qc-confirm:hover:not(:disabled)[b-npevlp9w11] { background: #4752c4; }

.cat-qc-confirm:disabled[b-npevlp9w11] {
    opacity: .4;
    cursor: not-allowed;
}

.cat-qc-cancel[b-npevlp9w11] {
    background: transparent;
    color: #8e9297;
}

.cat-qc-cancel:hover[b-npevlp9w11] {
    background: #1e2030;
    color: #dcddde;
}

.qc-spinner[b-npevlp9w11] {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,.3);
    border-top-color: #fff;
    animation: qc-spin-b-npevlp9w11 .6s linear infinite;
}

@keyframes qc-spin-b-npevlp9w11 { to { transform: rotate(360deg); } }

.channel-section-label[b-npevlp9w11] {
    padding: 16px 8px 4px 12px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--dc-text-muted);
}

/* Channel items */
.channel-item[b-npevlp9w11] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    border-radius: 6px;
    cursor: pointer;
    color: var(--dc-text-muted);
    font-size: 15px;
    font-weight: 500;
    position: relative;
    margin-bottom: 2px;
    transition: color 0.1s, background-color 0.1s;
    user-select: none;
}

.channel-item:hover[b-npevlp9w11] {
    background-color: var(--dc-bg-modifier-hover);
    color: var(--dc-interactive-hover);
}

.channel-item.active[b-npevlp9w11] {
    background-color: var(--dc-bg-modifier-selected);
    color: var(--dc-interactive-active);
}

.channel-item.unread[b-npevlp9w11] {
    color: var(--dc-header-primary);
    font-weight: 600;
}

.channel-item.muted[b-npevlp9w11] {
    color: var(--dc-text-muted);
    opacity: 0.5;
}

.channel-hash[b-npevlp9w11] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    opacity: 0.8;
}

.channel-name[b-npevlp9w11] {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.channel-mention-badge[b-npevlp9w11] {
    background-color: var(--dc-red, #f23f42);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 0 5px;
    border-radius: 8px;
    min-width: 18px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-left: auto;
}

.channel-unread-dot[b-npevlp9w11] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--dc-text-normal, #dbdee1);
    flex-shrink: 0;
    margin-left: auto;
}

.channel-actions[b-npevlp9w11] {
    display: none;
    align-items: center;
    gap: 2px;
    margin-left: auto;
}

.channel-item:hover .channel-unread-dot[b-npevlp9w11],
.channel-item:hover .channel-mention-badge[b-npevlp9w11] { display: none; }

.channel-item:hover .channel-actions[b-npevlp9w11] {
    display: flex;
}

.channel-action-btn[b-npevlp9w11] {
    background: none;
    color: var(--dc-interactive-normal);
    padding: 2px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    transition: color 0.15s;
}

.channel-action-btn:hover[b-npevlp9w11] { color: var(--dc-interactive-hover); }

/* DM items */
.dm-item[b-npevlp9w11] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 8px;
    border-radius: 6px;
    cursor: pointer;
    margin: 1px 8px;
    transition: background-color 0.1s;
}

.dm-item:hover[b-npevlp9w11] { background-color: var(--dc-bg-modifier-hover); }
.dm-item.active[b-npevlp9w11] { background-color: var(--dc-bg-modifier-selected); }
.dm-item.unread .dm-name[b-npevlp9w11] { color: var(--dc-text-normal, #dbdee1); font-weight: 600; }

.dm-unread-badge[b-npevlp9w11] {
    margin-left: auto;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--dc-red, #f23f42);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.dm-avatar[b-npevlp9w11] {
    position: relative;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 14px;
    color: #fff;
    flex-shrink: 0;
}

.status-dot[b-npevlp9w11] {
    position: absolute;
    bottom: -1px;
    right: -1px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid var(--dc-bg-secondary);
}

.status-dot.online[b-npevlp9w11] { background-color: var(--dc-green); }
.status-dot.idle[b-npevlp9w11] { background-color: var(--dc-yellow); }
.status-dot.dnd[b-npevlp9w11] { background-color: var(--dc-red); }
.status-dot.offline[b-npevlp9w11] { background-color: var(--dc-text-muted); }

.dm-name[b-npevlp9w11] {
    flex: 1;
    font-size: 15px;
    font-weight: 500;
    color: var(--dc-interactive-normal);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dm-item:hover .dm-name[b-npevlp9w11] { color: var(--dc-interactive-hover); }
.dm-item.active .dm-name[b-npevlp9w11] { color: var(--dc-interactive-active); }

.dm-close[b-npevlp9w11] {
    background: none;
    color: var(--dc-text-muted);
    padding: 2px;
    border-radius: 4px;
    display: none;
    align-items: center;
}

.dm-item:hover .dm-close[b-npevlp9w11] { display: flex; }

/* ===== USER PANEL ===== */
.user-panel[b-npevlp9w11] {
    flex: 0 0 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 8px;
    background-color: var(--dc-bg-secondary-alt);
    margin-top: auto;
    border-top: 1px solid rgba(0,0,0,0.3);
}

.user-panel-info[b-npevlp9w11] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    transition: background-color 0.15s;
}

.user-panel-info:hover[b-npevlp9w11] { background-color: var(--dc-bg-modifier-hover); }

.user-avatar-wrap[b-npevlp9w11] {
    position: relative;
    flex-shrink: 0;
}

.user-avatar[b-npevlp9w11] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
    color: #fff;
}

.user-status-dot[b-npevlp9w11] {
    position: absolute;
    bottom: -1px;
    right: -1px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid var(--dc-bg-secondary-alt);
}

.user-status-dot.online[b-npevlp9w11] { background-color: var(--dc-green); }

.user-panel-names[b-npevlp9w11] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.user-panel-username[b-npevlp9w11] {
    font-size: 13px;
    font-weight: 700;
    color: var(--dc-header-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.3;
}

.user-panel-tag[b-npevlp9w11] {
    font-size: 11px;
    color: var(--dc-text-muted);
    line-height: 1.3;
}

.user-panel-actions[b-npevlp9w11] {
    display: flex;
    align-items: center;
}

.user-panel-btn[b-npevlp9w11] {
    background: none;
    color: var(--dc-interactive-normal);
    width: 32px;
    height: 32px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s, background-color 0.15s;
}

.user-panel-btn:hover[b-npevlp9w11] {
    color: var(--dc-interactive-hover);
    background-color: var(--dc-bg-modifier-hover);
}

/* ===== CHAT MAIN ===== */
.chat-main[b-npevlp9w11] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    background-color: var(--dc-bg-primary);
    overflow: hidden;
}

/* ===== CHAT HEADER ===== */
.chat-header[b-npevlp9w11] {
    flex: 0 0 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    background-color: var(--dc-bg-primary);
    border-bottom: 1px solid rgba(0,0,0,0.3);
    box-shadow: 0 1px 0 rgba(0,0,0,0.3);
    z-index: 10;
}

.chat-header-left[b-npevlp9w11] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    overflow: hidden;
}

.chat-header-hash[b-npevlp9w11] {
    flex-shrink: 0;
    color: var(--dc-text-muted);
    display: flex;
    align-items: center;
}

.chat-header-channel-name[b-npevlp9w11] {
    font-weight: 700;
    font-size: 16px;
    color: var(--dc-header-primary);
    white-space: nowrap;
}

.chat-header-divider[b-npevlp9w11] {
    width: 1px;
    height: 20px;
    background-color: var(--dc-separator);
    flex-shrink: 0;
}

.chat-header-topic[b-npevlp9w11] {
    font-size: 14px;
    color: var(--dc-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-header-actions[b-npevlp9w11] {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.header-action-btn[b-npevlp9w11] {
    background: none;
    color: var(--dc-interactive-normal);
    width: 36px;
    height: 36px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s, background-color 0.15s;
}

.header-action-btn:hover[b-npevlp9w11] {
    color: var(--dc-interactive-hover);
    background-color: var(--dc-bg-modifier-hover);
}

.header-action-btn.active[b-npevlp9w11] {
    color: var(--dc-interactive-active);
}

.header-action-btn.muted[b-npevlp9w11] {
    color: var(--dc-text-muted, #949ba4);
    opacity: 0.7;
}

.header-search-box[b-npevlp9w11] {
    position: relative;
    display: flex;
    align-items: center;
}

.header-search[b-npevlp9w11] {
    background-color: var(--dc-bg-tertiary);
    border: none;
    border-radius: 4px;
    padding: 4px 8px 4px 28px;
    font-size: 14px;
    color: var(--dc-text-normal);
    width: 144px;
    transition: width 0.2s;
}

.header-search:focus[b-npevlp9w11] { width: 200px; }
.header-search[b-npevlp9w11]::placeholder { color: var(--dc-text-muted); }

.header-search-icon[b-npevlp9w11] {
    position: absolute;
    left: 8px;
    color: var(--dc-text-muted);
    pointer-events: none;
    font-size: 14px;
    line-height: 1;
}

/* ===== MESSAGES AREA ===== */
.messages-area[b-npevlp9w11] {
    flex: 1;
    overflow: hidden;
    position: relative;
}

.messages-scroll[b-npevlp9w11] {
    height: 100%;
    overflow-y: auto;
    padding: 0 0 16px 0;
    display: flex;
    flex-direction: column;
}

/* Loading state */
.messages-loading[b-npevlp9w11] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.messages-spinner[b-npevlp9w11] {
    width: 32px;
    height: 32px;
    border: 3px solid rgba(255,255,255,0.1);
    border-top-color: var(--dc-blurple);
    border-radius: 50%;
    animation: spin-b-npevlp9w11 0.7s linear infinite;
}

@keyframes spin-b-npevlp9w11 { to { transform: rotate(360deg); } }

/* ── Skeleton loading ─────────────────────────────────────────────────── */

@keyframes pulse-b-npevlp9w11 {
    0%, 100% { opacity: 0.06; }
    50%      { opacity: 0.12; }
}

.pulse[b-npevlp9w11] {
    animation: pulse-b-npevlp9w11 1.5s ease-in-out infinite;
}

/* Server list skeletons */
.skeleton-server-icon[b-npevlp9w11] {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #fff;
    margin: 0 auto 8px;
    flex-shrink: 0;
}

/* Channel sidebar skeletons */
.skeleton-channel-section[b-npevlp9w11] {
    padding: 0;
}

.skeleton-channel[b-npevlp9w11] {
    height: 32px;
    margin: 2px 8px;
    border-radius: 4px;
    background: #fff;
}

/* Generic text skeletons */
.skeleton-text[b-npevlp9w11] {
    height: 14px;
    border-radius: 6px;
    background: #fff;
}

.skeleton-text-xs[b-npevlp9w11] { height: 10px; }
.skeleton-text-sm[b-npevlp9w11] { height: 12px; width: 80px; }
.skeleton-text-md[b-npevlp9w11] { height: 14px; width: 120px; }
.skeleton-text-lg[b-npevlp9w11] { height: 18px; width: 140px; margin: 14px 16px; }

/* Message skeletons */
.skeleton-messages[b-npevlp9w11] {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 16px;
    gap: 20px;
}

.skeleton-message[b-npevlp9w11] {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.skeleton-avatar[b-npevlp9w11] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #fff;
    flex-shrink: 0;
}

.skeleton-msg-body[b-npevlp9w11] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.skeleton-msg-header[b-npevlp9w11] {
    height: 12px;
    width: 120px;
    border-radius: 6px;
    background: #fff;
}

.skeleton-msg-line[b-npevlp9w11] {
    height: 14px;
    border-radius: 6px;
    background: #fff;
}

.skeleton-msg-line-short[b-npevlp9w11] {
    height: 14px;
}

/* Member sidebar skeletons */
.skeleton-member[b-npevlp9w11] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 8px 6px 16px;
}

.skeleton-avatar-sm[b-npevlp9w11] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #fff;
    flex-shrink: 0;
}

/* Skeleton input bar */
.skeleton-input[b-npevlp9w11] {
    height: 44px;
    margin: 0 16px 24px;
    border-radius: 8px;
    background: #fff;
}

/* Channel welcome */
.channel-welcome[b-npevlp9w11] {
    padding: 40px 16px 16px;
    border-bottom: 1px solid var(--dc-separator);
    margin-bottom: 16px;
}

.channel-welcome-icon[b-npevlp9w11] {
    width: 68px;
    height: 68px;
    background-color: var(--dc-bg-secondary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    color: var(--dc-interactive-normal);
    font-size: 36px;
}

.channel-welcome-title[b-npevlp9w11] {
    font-size: 32px;
    font-weight: 700;
    color: var(--dc-header-primary);
    margin-bottom: 8px;
}

.channel-welcome-desc[b-npevlp9w11] {
    font-size: 15px;
    color: var(--dc-text-muted);
}

/* Message groups */
.message-group[b-npevlp9w11] {
    position: relative;
    display: flex;
    align-items: flex-start;
    padding: 2px 16px 2px 72px;
    gap: 0;
    transition: background-color 0.05s;
}

.message-group.has-reply-context[b-npevlp9w11] {
    margin-top: 0;
}

.message-group:hover[b-npevlp9w11] {
    background-color: rgba(0,0,0,0.06);
}

.message-group:hover .message-actions[b-npevlp9w11],
.message-group.picker-open .message-actions[b-npevlp9w11] {
    display: flex;
}

.message-group.message-header[b-npevlp9w11] {
    margin-top: 16px;
    padding-top: 4px;
    padding-bottom: 4px;
}

.message-avatar[b-npevlp9w11] {
    position: absolute;
    left: 16px;
    top: 4px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 16px;
    color: #fff;
    cursor: pointer;
    flex-shrink: 0;
}

.message-avatar:hover[b-npevlp9w11] {
    filter: brightness(0.9);
}

.message-content[b-npevlp9w11] {
    flex: 1;
    min-width: 0;
}

.message-meta[b-npevlp9w11] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 2px;
}

.message-username[b-npevlp9w11] {
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}

.message-username:hover[b-npevlp9w11] { text-decoration: underline; }

.message-timestamp[b-npevlp9w11] {
    font-size: 12px;
    color: var(--dc-text-muted);
    font-weight: 400;
}

.message-text[b-npevlp9w11] {
    font-size: 15px;
    color: var(--dc-text-normal);
    line-height: 1.4;
    word-break: break-word;
}

/* ── Markdown styles inside messages ── */
.message-text strong[b-npevlp9w11] { font-weight: 700; }
.message-text em[b-npevlp9w11] { font-style: italic; }
.message-text del[b-npevlp9w11] { text-decoration: line-through; color: var(--dc-text-muted); }

.message-text code[b-npevlp9w11] {
    background: rgba(0,0,0,0.3);
    padding: 1px 5px;
    border-radius: 4px;
    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
    font-size: 13.5px;
    color: #e9a0ff;
}

.message-text pre[b-npevlp9w11] {
    background: #1a1a2e;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 6px;
    padding: 10px 14px;
    margin: 6px 0;
    overflow-x: auto;
    max-width: 100%;
}

.message-text pre code[b-npevlp9w11] {
    background: none;
    padding: 0;
    border-radius: 0;
    font-size: 13px;
    color: #d4d4d4;
    white-space: pre;
}

.message-text blockquote[b-npevlp9w11] {
    border-left: 3px solid var(--dc-text-muted, #949ba4);
    margin: 4px 0;
    padding: 2px 0 2px 12px;
    color: var(--dc-text-muted);
}

.message-text a[b-npevlp9w11] {
    color: #00a8fc;
    text-decoration: none;
}

.message-text a:hover[b-npevlp9w11] {
    text-decoration: underline;
}

.message-text ul[b-npevlp9w11], .message-text ol[b-npevlp9w11] {
    margin: 4px 0;
    padding-left: 24px;
}

.message-text li[b-npevlp9w11] { margin: 2px 0; }

.message-text h1[b-npevlp9w11], .message-text h2[b-npevlp9w11], .message-text h3[b-npevlp9w11],
.message-text h4[b-npevlp9w11], .message-text h5[b-npevlp9w11], .message-text h6[b-npevlp9w11] {
    margin: 8px 0 4px;
    font-weight: 700;
    color: var(--dc-header-primary, #f2f3f5);
}

.message-text h1[b-npevlp9w11] { font-size: 1.4em; }
.message-text h2[b-npevlp9w11] { font-size: 1.25em; }
.message-text h3[b-npevlp9w11] { font-size: 1.1em; }

.message-text p[b-npevlp9w11] {
    margin: 4px 0;
}

.message-text p:first-child[b-npevlp9w11] { margin-top: 0; }
.message-text p:last-child[b-npevlp9w11]  { margin-bottom: 0; }

.message-text hr[b-npevlp9w11] {
    border: none;
    border-top: 1px solid var(--dc-separator, rgba(255,255,255,0.06));
    margin: 8px 0;
}

.message-text img[b-npevlp9w11] {
    max-width: 100%;
    max-height: 300px;
    border-radius: 6px;
    margin: 4px 0;
}

.message-text input[type="checkbox"][b-npevlp9w11] {
    margin-right: 6px;
    pointer-events: none;
}

.message-continuation-time[b-npevlp9w11] {
    position: absolute;
    left: 16px;
    font-size: 11px;
    color: transparent;
    width: 56px;
    text-align: right;
    padding-right: 8px;
    line-height: 22px;
    white-space: nowrap;
    user-select: none;
}

.message-group:hover .message-continuation-time[b-npevlp9w11] {
    color: var(--dc-text-muted);
}

.message-image-placeholder[b-npevlp9w11] {
    margin-top: 8px;
    width: 300px;
    height: 180px;
    border-radius: 8px;
    overflow: hidden;
    background-color: var(--dc-bg-secondary);
}

.message-attachment[b-npevlp9w11] {
    margin-top: 8px;
    display: inline-block;
    max-width: 100%;
    position: relative;
}

.message-attachment img[b-npevlp9w11] {
    max-width: 550px;
    max-height: 400px;
    border-radius: 8px;
    cursor: zoom-in;
    display: block;
    object-fit: contain;
    background-color: #2b2d31;
}

.attachment-video[b-npevlp9w11] {
    max-width: 550px;
    max-height: 400px;
    border-radius: 8px;
    display: block;
    background-color: #2b2d31;
}

.attachment-preview-bar[b-npevlp9w11] {
    display: flex;
    align-items: center;
    gap: 12px;
    background-color: var(--dc-bg-secondary);
    border-radius: 8px 8px 0 0;
    padding: 8px 12px;
    border-bottom: 1px solid var(--dc-separator);
}

.attachment-preview-thumb[b-npevlp9w11] {
    width: 40px;
    height: 40px;
    border-radius: 4px;
    object-fit: cover;
    background-color: #2b2d31;
}

.attachment-preview-name[b-npevlp9w11] {
    flex: 1;
    font-size: 13px;
    color: var(--dc-text-normal);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.image-ph-inner[b-npevlp9w11] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--dc-text-muted);
    font-size: 13px;
}

/* Edited tag */
.message-edited[b-npevlp9w11] {
    font-size: 11px;
    color: var(--dc-text-muted);
    margin-left: 4px;
    cursor: default;
    user-select: none;
}

/* Inline edit UI */
.message-group.editing[b-npevlp9w11] {
    background-color: var(--dc-bg-modifier-hover);
}

.message-edit-wrap[b-npevlp9w11] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 2px;
}

.message-edit-input[b-npevlp9w11] {
    width: 100%;
    background-color: var(--dc-channeltextarea-bg);
    border: none;
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 15px;
    color: var(--dc-text-normal);
    line-height: 1.375;
    outline: none;
}

.message-edit-input:focus[b-npevlp9w11] {
    box-shadow: 0 0 0 2px var(--dc-brand);
}

.message-edit-hint[b-npevlp9w11] {
    font-size: 11px;
    color: var(--dc-text-muted);
    padding: 0 2px 2px;
}

.edit-hint-btn[b-npevlp9w11] {
    background: none;
    border: none;
    color: var(--dc-brand);
    font-size: 11px;
    cursor: pointer;
    padding: 0;
}

.edit-hint-btn:hover[b-npevlp9w11] {
    text-decoration: underline;
}

/* ===== REPLY CONTEXT (standalone block above message-group) ===== */
.reply-context[b-npevlp9w11] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 16px 0 72px;
    font-size: 13px;
    color: var(--dc-text-muted);
    position: relative;
    margin-top: 16px;
}

.reply-spine[b-npevlp9w11] {
    position: absolute;
    left: 36px;
    bottom: -8px;
    width: 28px;
    height: 18px;
    border-left: 2px solid var(--dc-text-muted);
    border-top: 2px solid var(--dc-text-muted);
    border-top-left-radius: 6px;
    opacity: 0.4;
}

.reply-avatar-mini[b-npevlp9w11] {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
}

.reply-username[b-npevlp9w11] {
    font-weight: 600;
    color: var(--dc-interactive-hover);
    cursor: pointer;
    flex-shrink: 0;
}

.reply-username:hover[b-npevlp9w11] {
    text-decoration: underline;
}

.reply-preview[b-npevlp9w11] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    opacity: 0.7;
    cursor: pointer;
}

.reply-preview:hover[b-npevlp9w11] {
    opacity: 1;
}

/* ===== REPLY BAR (above input) ===== */
.reply-bar[b-npevlp9w11] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--dc-bg-secondary);
    border-radius: 8px 8px 0 0;
    padding: 8px 12px;
    font-size: 13px;
    color: var(--dc-text-normal);
}

.reply-bar-text[b-npevlp9w11] {
    display: flex;
    align-items: center;
    gap: 4px;
    overflow: hidden;
    white-space: nowrap;
    min-width: 0;
}

.reply-bar-text strong[b-npevlp9w11] {
    color: var(--dc-interactive-hover);
}

.reply-bar-preview[b-npevlp9w11] {
    color: var(--dc-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.reply-bar-close[b-npevlp9w11] {
    background: none;
    border: none;
    color: var(--dc-text-muted);
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: color 0.15s, background-color 0.15s;
}

.reply-bar-close:hover[b-npevlp9w11] {
    color: var(--dc-interactive-hover);
    background-color: var(--dc-bg-modifier-hover);
}

.reply-bar-close i[b-npevlp9w11] {
    font-size: 16px;
    line-height: 1;
}

.message-input-wrap.has-reply[b-npevlp9w11] {
    border-radius: 0 0 8px 8px;
}

/* Message hover actions */
.message-actions[b-npevlp9w11] {
    display: none;
    position: absolute;
    top: -16px;
    right: 16px;
    background-color: var(--dc-bg-secondary);
    border: 1px solid rgba(0,0,0,0.3);
    border-radius: 6px;
    padding: 4px;
    gap: 2px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    z-index: 5;
}

.msg-action-btn[b-npevlp9w11] {
    background: none;
    color: var(--dc-interactive-normal);
    width: 30px;
    height: 30px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s, background-color 0.15s;
}

.msg-action-btn:hover[b-npevlp9w11] {
    color: var(--dc-interactive-hover);
    background-color: var(--dc-bg-modifier-hover);
}

.msg-delete-btn:hover[b-npevlp9w11] {
    color: var(--dc-red);
    background-color: rgba(242, 63, 66, 0.1);
}

/* ===== EMOJI PICKER ANCHOR ===== */
.emoji-picker-anchor[b-npevlp9w11] {
    position: absolute;
    top: -8px;
    right: 16px;
    z-index: 10;
}

/* ===== REACTIONS ===== */
.reactions-row[b-npevlp9w11] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 4px 0 2px;
}

.reaction-chip[b-npevlp9w11] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 6px;
    background-color: var(--dc-bg-secondary);
    border: 1px solid transparent;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s;
    font-size: 14px;
    line-height: 1.4;
}

.reaction-chip:hover[b-npevlp9w11] {
    background-color: var(--dc-bg-modifier-hover);
    border-color: var(--dc-text-muted);
}

.reaction-chip.reacted[b-npevlp9w11] {
    background-color: rgba(74, 158, 255, 0.15);
    border-color: var(--dc-brand);
}

.reaction-chip.reacted:hover[b-npevlp9w11] {
    background-color: rgba(74, 158, 255, 0.25);
}

.reaction-emoji[b-npevlp9w11] {
    font-size: 16px;
    line-height: 1;
}

.reaction-count[b-npevlp9w11] {
    font-size: 12px;
    font-weight: 600;
    color: var(--dc-text-muted);
    min-width: 8px;
    text-align: center;
}

.reaction-chip.reacted .reaction-count[b-npevlp9w11] {
    color: var(--dc-brand);
}

/* ===== MESSAGE INPUT ===== */
.message-input-area[b-npevlp9w11] {
    flex: 0 0 auto;
    padding: 0 16px 24px;
    position: relative;
}

/* ── Typing indicator ─────────────────────────────────── */
.typing-indicator[b-npevlp9w11] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 12px 4px;
    height: 20px;
}

.typing-text[b-npevlp9w11] {
    font-size: 12px;
    color: #b5bac1;
    font-weight: 500;
}

.typing-dots[b-npevlp9w11] {
    display: flex;
    gap: 3px;
    align-items: center;
}

.typing-dots span[b-npevlp9w11] {
    display: block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #b5bac1;
    animation: typingBounce-b-npevlp9w11 1.4s infinite ease-in-out;
}

.typing-dots span:nth-child(1)[b-npevlp9w11] { animation-delay: 0s; }
.typing-dots span:nth-child(2)[b-npevlp9w11] { animation-delay: 0.2s; }
.typing-dots span:nth-child(3)[b-npevlp9w11] { animation-delay: 0.4s; }

@keyframes typingBounce-b-npevlp9w11 {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
    30% { transform: translateY(-4px); opacity: 1; }
}

.message-input-wrap[b-npevlp9w11] {
    display: flex;
    align-items: center;
    background-color: var(--dc-channeltextarea-bg);
    border-radius: 8px;
    padding: 0 16px 0 0;
    gap: 0;
}

.attach-btn[b-npevlp9w11] {
    background: none;
    color: var(--dc-interactive-normal);
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 8px;
    transition: color 0.15s;
}

.attach-btn:hover[b-npevlp9w11] { color: var(--dc-interactive-hover); }

.message-input[b-npevlp9w11] {
    flex: 1;
    background: none;
    border: none;
    color: var(--dc-text-normal);
    font-size: 15px;
    padding: 11px 0;
    line-height: 1.375;
}

.message-input[b-npevlp9w11]::placeholder { color: var(--dc-text-muted); }

.message-input-right[b-npevlp9w11] {
    display: flex;
    align-items: center;
    gap: 2px;
}

.input-action-btn[b-npevlp9w11] {
    background: none;
    color: var(--dc-interactive-normal);
    width: 36px;
    height: 36px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s, background-color 0.15s;
}

.input-action-btn:hover[b-npevlp9w11] {
    color: var(--dc-interactive-hover);
    background-color: var(--dc-bg-modifier-hover);
}

/* ===== MEMBERS PANEL ===== */
.members-panel[b-npevlp9w11] {
    flex: 0 0 240px;
    width: 240px;
    height: 100%;
    background-color: var(--dc-bg-secondary);
    overflow-y: auto;
    padding: 16px 8px;
}

.members-section[b-npevlp9w11] {
    margin-bottom: 16px;
}

.members-section-label[b-npevlp9w11] {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--dc-text-muted);
    padding: 8px 8px 4px 8px;
}

.member-item[b-npevlp9w11] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 8px;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.1s;
}

.member-item:hover[b-npevlp9w11] {
    background-color: var(--dc-bg-modifier-hover);
}

.member-item.offline[b-npevlp9w11] {
    opacity: 0.5;
}

.member-avatar-wrap[b-npevlp9w11] {
    position: relative;
    flex-shrink: 0;
}

.member-avatar[b-npevlp9w11] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
    color: #fff;
}

.member-status[b-npevlp9w11] {
    position: absolute;
    bottom: -1px;
    right: -1px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid var(--dc-bg-secondary);
}

.member-status.online[b-npevlp9w11] { background-color: var(--dc-green); }
.member-status.idle[b-npevlp9w11] { background-color: var(--dc-yellow); }
.member-status.dnd[b-npevlp9w11] { background-color: var(--dc-red); }
.member-status.offline[b-npevlp9w11] { background-color: var(--dc-text-muted); }

.member-info[b-npevlp9w11] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.member-name[b-npevlp9w11] {
    font-size: 14px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--dc-interactive-normal);
    line-height: 1.3;
}

.member-item:hover .member-name[b-npevlp9w11] {
    color: var(--dc-interactive-hover);
}

.member-activity[b-npevlp9w11] {
    font-size: 11px;
    color: var(--dc-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.3;
}

/* ===== SCROLLABLE CHANNEL AREA ===== */
.channel-scroll[b-npevlp9w11] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding-bottom: 8px;
}

/* ===== DM BADGE ===== */
.dm-badge[b-npevlp9w11] {
    position: absolute;
    bottom: -2px;
    right: -2px;
    background-color: var(--dc-red);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    border: 3px solid var(--dc-bg-tertiary);
    line-height: 1;
}

/* ===== DM NAV ITEM ===== */
.dm-nav-item[b-npevlp9w11] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    margin: 4px 8px;
    border-radius: 6px;
    cursor: pointer;
    color: var(--dc-text-muted);
    font-size: 15px;
    font-weight: 500;
    transition: background-color 0.1s, color 0.1s;
    user-select: none;
}

.dm-nav-item:hover[b-npevlp9w11] {
    background-color: var(--dc-bg-modifier-hover);
    color: var(--dc-interactive-hover);
}

.dm-nav-item.active[b-npevlp9w11] {
    background-color: var(--dc-bg-modifier-selected);
    color: var(--dc-interactive-active);
}

.dm-nav-badge[b-npevlp9w11] {
    background-color: var(--dc-red);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    min-width: 16px;
    height: 16px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    margin-left: auto;
}

/* ===== FRIENDS TAB BAR ===== */
.friends-tab-bar[b-npevlp9w11] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.friends-tab[b-npevlp9w11] {
    background: none;
    border: none;
    color: var(--dc-interactive-normal);
    font-size: 14px;
    font-weight: 500;
    padding: 4px 10px;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 4px;
}

.friends-tab:hover[b-npevlp9w11] {
    background-color: var(--dc-bg-modifier-hover);
    color: var(--dc-interactive-hover);
}

.friends-tab.active[b-npevlp9w11] {
    background-color: var(--dc-bg-modifier-selected);
    color: var(--dc-interactive-active);
}

.friends-tab.add-friend-tab[b-npevlp9w11] {
    background-color: var(--dc-green);
    color: #fff;
    font-weight: 600;
}

.friends-tab.add-friend-tab:hover[b-npevlp9w11] {
    background-color: color-mix(in srgb, var(--dc-green) 85%, black);
}

.friends-tab.add-friend-tab.active[b-npevlp9w11] {
    background-color: transparent;
    color: var(--dc-green);
    border: 1px solid var(--dc-green);
}

.friends-tab-badge[b-npevlp9w11] {
    background-color: var(--dc-red);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    min-width: 14px;
    height: 14px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 3px;
}

/* ===== FRIENDS VIEW ===== */
.friends-view[b-npevlp9w11] {
    flex: 1;
    overflow-y: auto;
    padding: 8px 20px;
}

.friends-section-label[b-npevlp9w11] {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--dc-text-muted);
    padding: 16px 10px 8px;
}

.friend-row[b-npevlp9w11] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 10px;
    border-top: 1px solid var(--dc-separator);
    cursor: pointer;
    border-radius: 8px;
    transition: background-color 0.1s;
}

.friend-row:hover[b-npevlp9w11] {
    background-color: var(--dc-bg-modifier-hover);
}

.friend-info[b-npevlp9w11] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.friend-name[b-npevlp9w11] {
    font-size: 15px;
    font-weight: 600;
    color: var(--dc-header-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.friend-subtitle[b-npevlp9w11] {
    font-size: 13px;
    color: var(--dc-text-muted);
    text-transform: capitalize;
}

.friend-actions[b-npevlp9w11] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.friend-action-btn[b-npevlp9w11] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: var(--dc-bg-secondary);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s;
    color: var(--dc-interactive-normal);
    font-size: 18px;
}

.friend-action-btn:hover[b-npevlp9w11] {
    color: var(--dc-interactive-hover);
}

.friend-action-btn.accept:hover[b-npevlp9w11] {
    color: var(--dc-green);
}

.friend-action-btn.decline:hover[b-npevlp9w11] {
    color: var(--dc-red);
}

.friend-action-btn.message:hover[b-npevlp9w11] {
    color: var(--dc-brand);
}

.friend-action-btn i[b-npevlp9w11] { font-size: 18px; line-height: 1; }

/* Friends empty state */
.friends-empty[b-npevlp9w11] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    color: var(--dc-text-muted);
    text-align: center;
    gap: 12px;
}

.friends-empty i[b-npevlp9w11] {
    font-size: 48px;
    opacity: 0.5;
}

.friends-empty p[b-npevlp9w11] {
    font-size: 15px;
    margin: 0;
}

/* ===== ADD FRIEND ===== */
.add-friend-section[b-npevlp9w11] {
    padding: 20px 10px;
    border-bottom: 1px solid var(--dc-separator);
}

.add-friend-section h3[b-npevlp9w11] {
    font-size: 16px;
    font-weight: 700;
    color: var(--dc-header-primary);
    margin: 0 0 4px;
}

.add-friend-desc[b-npevlp9w11] {
    font-size: 14px;
    color: var(--dc-text-muted);
    margin: 0 0 16px;
}

.add-friend-input-row[b-npevlp9w11] {
    display: flex;
    align-items: center;
    gap: 0;
    background-color: var(--dc-input-bg);
    border-radius: 8px;
    padding: 4px 4px 4px 12px;
    border: 1px solid var(--dc-separator);
    transition: border-color 0.15s;
}

.add-friend-input-row:focus-within[b-npevlp9w11] {
    border-color: var(--dc-brand);
}

.add-friend-input[b-npevlp9w11] {
    flex: 1;
    background: none;
    border: none;
    color: var(--dc-text-normal);
    font-size: 15px;
    padding: 8px 0;
    outline: none;
}

.add-friend-input[b-npevlp9w11]::placeholder {
    color: var(--dc-text-muted);
}

.add-friend-btn[b-npevlp9w11] {
    background-color: var(--dc-brand);
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.15s;
    white-space: nowrap;
}

.add-friend-btn:hover:not(:disabled)[b-npevlp9w11] {
    opacity: 0.85;
}

.add-friend-btn:disabled[b-npevlp9w11] {
    opacity: 0.5;
    cursor: not-allowed;
}

.add-friend-success[b-npevlp9w11] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    font-size: 14px;
    color: var(--dc-green);
}

.add-friend-error[b-npevlp9w11] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    font-size: 14px;
    color: var(--dc-red);
}

/* ===== VOICE CHAT ===== */

/* Voice users listed under voice channel in sidebar */
.voice-user[b-npevlp9w11] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 3px 8px 3px 44px;
    font-size: 13px;
    color: var(--dc-text-muted);
    border-radius: 4px;
    margin: 1px 8px;
}

.voice-user:hover[b-npevlp9w11] {
    background-color: var(--dc-bg-modifier-hover);
}

.voice-user-avatar[b-npevlp9w11] {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
}

.voice-user-name[b-npevlp9w11] {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.voice-user-icon[b-npevlp9w11] {
    font-size: 12px;
    color: var(--dc-red);
    flex-shrink: 0;
    line-height: 1;
}

/* Voice channel active state */
.voice-channel.active[b-npevlp9w11] {
    color: var(--dc-interactive-active);
    background-color: var(--dc-bg-modifier-selected);
}

/* Voice connected panel (above user panel) */
.voice-connected-panel[b-npevlp9w11] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
    background-color: var(--dc-bg-secondary-alt);
    border-top: 1px solid var(--dc-separator);
    flex-shrink: 0;
}

.voice-connected-info[b-npevlp9w11] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.voice-connected-label[b-npevlp9w11] {
    font-size: 12px;
    font-weight: 600;
    color: var(--dc-green);
    display: flex;
    align-items: center;
    gap: 4px;
}

.voice-connected-label i[b-npevlp9w11] {
    font-size: 14px;
    line-height: 1;
}

.voice-connected-channel[b-npevlp9w11] {
    font-size: 12px;
    color: var(--dc-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.voice-disconnect-btn[b-npevlp9w11] {
    background: none;
    border: none;
    color: var(--dc-text-muted);
    cursor: pointer;
    padding: 6px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s, background-color 0.15s;
}

.voice-disconnect-btn:hover[b-npevlp9w11] {
    color: var(--dc-red);
    background-color: var(--dc-bg-modifier-hover);
}

.voice-disconnect-btn i[b-npevlp9w11] {
    font-size: 20px;
    line-height: 1;
}

/* Mute/deafen active state on user panel buttons */
.user-panel-btn.voice-active[b-npevlp9w11] {
    color: var(--dc-red);
}

.user-panel-btn.voice-active:hover[b-npevlp9w11] {
    color: var(--dc-red);
}

/* ===== ATTACH MENU POPUP ===== */
.attach-menu-wrap[b-npevlp9w11] {
    position: relative;
}

.attach-popup[b-npevlp9w11] {
    position: absolute;
    bottom: 50px;
    left: 0;
    background: var(--dc-bg-floating, #111214);
    border: 1px solid var(--dc-separator, rgba(255,255,255,0.06));
    border-radius: 8px;
    padding: 6px;
    min-width: 180px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
    z-index: 200;
    animation: attach-pop-in-b-npevlp9w11 0.12s ease;
}

@keyframes attach-pop-in-b-npevlp9w11 {
    from { opacity: 0; transform: translateY(8px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.attach-popup-item[b-npevlp9w11] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 12px;
    border-radius: 4px;
    background: none;
    border: none;
    color: var(--dc-interactive-normal, #b5bac1);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.1s, color 0.1s;
    text-align: left;
}

.attach-popup-item:hover[b-npevlp9w11] {
    background: var(--dc-brand, #5865f2);
    color: #fff;
}

.attach-popup-item i[b-npevlp9w11] {
    font-size: 20px;
}

/* ===== GIF PICKER ===== */
.gif-overlay[b-npevlp9w11] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: gif-fade-in-b-npevlp9w11 0.15s ease;
}

@keyframes gif-fade-in-b-npevlp9w11 {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.gif-picker[b-npevlp9w11] {
    background: var(--dc-bg-secondary, #1e1f22);
    border-radius: 12px;
    width: 480px;
    max-width: 95vw;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 12px 40px rgba(0,0,0,0.5);
    animation: gif-scale-in-b-npevlp9w11 0.15s ease;
}

@keyframes gif-scale-in-b-npevlp9w11 {
    from { opacity: 0; transform: scale(0.95); }
    to   { opacity: 1; transform: scale(1); }
}

.gif-picker-header[b-npevlp9w11] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid var(--dc-separator, rgba(255,255,255,0.06));
}

.gif-picker-header h3[b-npevlp9w11] {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--dc-text-normal, #dbdee1);
}

.gif-close-btn[b-npevlp9w11] {
    background: none;
    border: none;
    color: var(--dc-interactive-normal, #b5bac1);
    font-size: 20px;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.12s, background 0.12s;
}

.gif-close-btn:hover[b-npevlp9w11] {
    color: var(--dc-text-normal, #dbdee1);
    background: rgba(255,255,255,0.06);
}

.gif-search-wrap[b-npevlp9w11] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 12px 16px;
    padding: 8px 12px;
    background: var(--dc-bg-tertiary, #313338);
    border-radius: 8px;
}

.gif-search-icon[b-npevlp9w11] {
    color: var(--dc-text-muted, #949ba4);
    font-size: 18px;
    flex-shrink: 0;
}

.gif-search-input[b-npevlp9w11] {
    flex: 1;
    background: none;
    border: none;
    color: var(--dc-text-normal, #dbdee1);
    font-size: 14px;
    outline: none;
    font-family: inherit;
}

.gif-search-input[b-npevlp9w11]::placeholder {
    color: var(--dc-text-muted, #949ba4);
}

.gif-grid-scroll[b-npevlp9w11] {
    flex: 1;
    overflow-y: auto;
    padding: 0 16px 12px;
    min-height: 200px;
    max-height: 50vh;
}

.gif-grid[b-npevlp9w11] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}

.gif-grid-item[b-npevlp9w11] {
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    aspect-ratio: 1;
    background: var(--dc-bg-tertiary, #313338);
    transition: transform 0.1s;
}

.gif-grid-item:hover[b-npevlp9w11] {
    transform: scale(1.04);
}

.gif-grid-item img[b-npevlp9w11] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.gif-loading[b-npevlp9w11] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
}

.gif-empty[b-npevlp9w11] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    color: var(--dc-text-muted, #949ba4);
    font-size: 14px;
}

.gif-footer[b-npevlp9w11] {
    padding: 8px 16px;
    border-top: 1px solid var(--dc-separator, rgba(255,255,255,0.06));
    display: flex;
    justify-content: flex-end;
}

.gif-powered[b-npevlp9w11] {
    font-size: 11px;
    color: var(--dc-text-muted, #949ba4);
}

.gif-grid-scroll[b-npevlp9w11]::-webkit-scrollbar {
    width: 6px;
}

.gif-grid-scroll[b-npevlp9w11]::-webkit-scrollbar-track {
    background: transparent;
}

.gif-grid-scroll[b-npevlp9w11]::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.1);
    border-radius: 3px;
}

/* Inline GIF in messages */
.message-gif[b-npevlp9w11] {
    max-width: 300px;
    max-height: 250px;
    border-radius: 8px;
    margin-top: 4px;
    display: block;
    cursor: pointer;
}

/* ===== LINK EMBED CARDS ===== */
.embed-card[b-npevlp9w11] {
    max-width: 520px;
    background: var(--dc-bg-secondary, #1e1f22);
    border-radius: 6px;
    border-left: 4px solid var(--dc-brand, #5865f2);
    padding: 12px 16px;
    margin-top: 6px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    overflow: hidden;
}

.embed-site[b-npevlp9w11] {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--dc-text-muted, #949ba4);
}

.embed-title[b-npevlp9w11] {
    font-size: 15px;
    font-weight: 700;
    color: #00a8fc;
    text-decoration: none;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.embed-title:hover[b-npevlp9w11] {
    text-decoration: underline;
}

.embed-desc[b-npevlp9w11] {
    font-size: 13px;
    color: var(--dc-text-normal, #dbdee1);
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.embed-image[b-npevlp9w11] {
    max-width: 100%;
    max-height: 280px;
    border-radius: 6px;
    margin-top: 6px;
    object-fit: cover;
    display: block;
}

/* ===== MENTION AUTOCOMPLETE ===== */
.mention-picker[b-npevlp9w11] {
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    background: var(--dc-bg-floating, #111214);
    border: 1px solid var(--dc-separator, rgba(255,255,255,0.06));
    border-radius: 8px;
    padding: 6px;
    margin-bottom: 4px;
    max-height: 280px;
    overflow-y: auto;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
    z-index: 200;
    animation: mention-slide-in-b-npevlp9w11 0.1s ease;
}

@keyframes mention-slide-in-b-npevlp9w11 {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.mention-item[b-npevlp9w11] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    border-radius: 4px;
    background: none;
    border: none;
    color: var(--dc-text-normal, #dbdee1);
    font-size: 14px;
    cursor: pointer;
    transition: background 0.08s;
    text-align: left;
}

.mention-item:hover[b-npevlp9w11],
.mention-item.selected[b-npevlp9w11] {
    background: var(--dc-brand, #5865f2);
    color: #fff;
}

.mention-item.selected .mention-username[b-npevlp9w11] {
    color: rgba(255,255,255,0.6);
}

.mention-name[b-npevlp9w11] {
    font-weight: 600;
    flex-shrink: 0;
}

.mention-username[b-npevlp9w11] {
    font-size: 12px;
    color: var(--dc-text-muted, #949ba4);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ===== MENTION HIGHLIGHT IN MESSAGES ===== */
.message-text[b-npevlp9w11]  .mention {
    background: rgba(88, 101, 242, 0.3);
    color: #dee0fc;
    padding: 0 3px;
    border-radius: 3px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
}

.message-text[b-npevlp9w11]  .mention:hover {
    background: rgba(88, 101, 242, 0.7);
    color: #fff;
}

.message-text[b-npevlp9w11]  .mention-self {
    background: rgba(250, 168, 26, 0.25);
    color: #fac848;
}

.message-text[b-npevlp9w11]  .mention-self:hover {
    background: rgba(250, 168, 26, 0.55);
    color: #fff;
}

/* ===== PINNED MESSAGES ===== */

/* Pin badge on header button */
.pin-badge[b-npevlp9w11] {
    position: absolute;
    top: 2px;
    right: 2px;
    background: var(--dc-brand, #5865f2);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    min-width: 16px;
    height: 16px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    line-height: 1;
}

.header-action-btn[b-npevlp9w11] {
    position: relative;
}

/* Pin indicator next to timestamp */
.pinned-indicator[b-npevlp9w11] {
    color: var(--dc-text-muted, #949ba4);
    font-size: 12px;
    margin-left: 4px;
    vertical-align: middle;
}

/* Active pin action button */
.msg-pin-active[b-npevlp9w11] {
    color: var(--dc-brand, #5865f2) !important;
}

/* ── Pinned messages panel ── */
.pinned-panel[b-npevlp9w11] {
    position: absolute;
    top: 48px;
    right: 16px;
    width: 420px;
    max-height: 70vh;
    background: var(--dc-bg-floating, #111214);
    border: 1px solid var(--dc-separator, rgba(255,255,255,0.06));
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.45);
    z-index: 500;
    display: flex;
    flex-direction: column;
    animation: pinned-slide-in-b-npevlp9w11 0.15s ease;
    overflow: hidden;
}

@keyframes pinned-slide-in-b-npevlp9w11 {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.pinned-header[b-npevlp9w11] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 16px;
    font-size: 15px;
    font-weight: 700;
    color: var(--dc-text-normal, #dbdee1);
    border-bottom: 1px solid var(--dc-separator, rgba(255,255,255,0.06));
    flex-shrink: 0;
}

.pinned-header i:first-child[b-npevlp9w11] {
    color: var(--dc-text-muted);
}

.pinned-close[b-npevlp9w11] {
    margin-left: auto;
    background: none;
    border: none;
    color: var(--dc-text-muted);
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    font-size: 16px;
    display: flex;
    align-items: center;
}

.pinned-close:hover[b-npevlp9w11] {
    color: var(--dc-text-normal);
    background: rgba(255,255,255,0.06);
}

.pinned-list[b-npevlp9w11] {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
}

.pinned-empty[b-npevlp9w11] {
    text-align: center;
    padding: 32px 16px;
    color: var(--dc-text-muted, #949ba4);
}

.pinned-empty-icon[b-npevlp9w11] {
    font-size: 48px;
    display: block;
    margin: 0 auto 12px;
    opacity: 0.4;
}

.pinned-empty p[b-npevlp9w11] {
    font-size: 15px;
    font-weight: 600;
    color: var(--dc-text-normal, #dbdee1);
    margin: 0 0 4px;
}

.pinned-empty span[b-npevlp9w11] {
    font-size: 13px;
}

.pinned-msg[b-npevlp9w11] {
    background: var(--dc-bg-secondary, #1e1f22);
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 8px;
    transition: background 0.12s;
}

.pinned-msg:hover[b-npevlp9w11] {
    background: var(--dc-bg-modifier-hover, rgba(255,255,255,0.04));
}

.pinned-msg-header[b-npevlp9w11] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.pinned-msg-author[b-npevlp9w11] {
    font-size: 14px;
    font-weight: 600;
    color: var(--dc-text-normal, #dbdee1);
}

.pinned-msg-time[b-npevlp9w11] {
    font-size: 11px;
    color: var(--dc-text-muted, #949ba4);
    margin-left: auto;
}

.pinned-msg-content[b-npevlp9w11] {
    font-size: 14px;
    color: var(--dc-text-normal, #dbdee1);
    line-height: 1.4;
    word-break: break-word;
}

.pinned-msg-img[b-npevlp9w11] {
    max-width: 100%;
    max-height: 120px;
    border-radius: 6px;
    margin-top: 6px;
    object-fit: cover;
}

.pinned-msg-actions[b-npevlp9w11] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
}

.pinned-msg-jump[b-npevlp9w11],
.pinned-msg-unpin[b-npevlp9w11] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 4px;
    background: none;
    border: 1px solid rgba(255,255,255,0.08);
    color: var(--dc-text-muted, #949ba4);
    font-size: 12px;
    cursor: pointer;
    transition: color 0.12s, border-color 0.12s, background 0.12s;
}

.pinned-msg-jump:hover[b-npevlp9w11] {
    color: var(--dc-brand, #5865f2);
    border-color: var(--dc-brand, #5865f2);
    background: rgba(88,101,242,0.08);
}

.pinned-msg-unpin:hover[b-npevlp9w11] {
    color: var(--dc-red, #f23f42);
    border-color: var(--dc-red, #f23f42);
    background: rgba(242,63,66,0.08);
}

.pinned-list[b-npevlp9w11]::-webkit-scrollbar {
    width: 6px;
}

.pinned-list[b-npevlp9w11]::-webkit-scrollbar-track {
    background: transparent;
}

.pinned-list[b-npevlp9w11]::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.1);
    border-radius: 3px;
}

/* ── Message highlight (scroll-to) ────────────── */
@keyframes msg-highlight-pulse-b-npevlp9w11 {
    0%   { background-color: rgba(74,158,255,0.18); }
    60%  { background-color: rgba(74,158,255,0.10); }
    100% { background-color: transparent; }
}

.message-group.message-highlight[b-npevlp9w11] {
    animation: msg-highlight-pulse-b-npevlp9w11 2.5s ease forwards;
    border-radius: 4px;
}

/* ── Inbox panel ───────────────────────────────── */
.inbox-panel[b-npevlp9w11] {
    width: 320px;
    min-width: 320px;
    background: var(--dc-bg-secondary);
    border-left: 1px solid var(--dc-separator);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.inbox-header[b-npevlp9w11] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 16px 12px;
    border-bottom: 1px solid var(--dc-separator);
    flex-shrink: 0;
}

.inbox-title[b-npevlp9w11] {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--dc-header-primary);
    display: flex;
    align-items: center;
    gap: 8px;
}

.inbox-close[b-npevlp9w11] {
    background: none;
    border: none;
    color: var(--dc-interactive-normal);
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    transition: color 0.1s;
}

.inbox-close:hover[b-npevlp9w11] { color: var(--dc-interactive-hover); }

/* Loading */
.inbox-loading[b-npevlp9w11] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.inbox-spinner[b-npevlp9w11] {
    width: 22px;
    height: 22px;
    border: 2px solid rgba(255,255,255,0.08);
    border-top-color: var(--dc-brand);
    border-radius: 50%;
    animation: inbox-spin-b-npevlp9w11 0.7s linear infinite;
    display: inline-block;
}

@keyframes inbox-spin-b-npevlp9w11 { to { transform: rotate(360deg); } }

/* Empty */
.inbox-empty[b-npevlp9w11] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--dc-text-muted);
    padding: 40px 24px;
    text-align: center;
}

.inbox-empty-icon[b-npevlp9w11] { font-size: 2.5rem; color: var(--dc-bg-modifier-selected); }
.inbox-empty p[b-npevlp9w11]    { font-size: 0.9rem; font-weight: 600; color: var(--dc-interactive-normal); margin: 0; }
.inbox-empty span[b-npevlp9w11] { font-size: 0.8rem; }

/* List */
.inbox-list[b-npevlp9w11] {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px;
}

.inbox-list[b-npevlp9w11]::-webkit-scrollbar { width: 4px; }
.inbox-list[b-npevlp9w11]::-webkit-scrollbar-track { background: transparent; }
.inbox-list[b-npevlp9w11]::-webkit-scrollbar-thumb { background: var(--dc-scrollbar-thumb); border-radius: 2px; }

/* Item */
.inbox-item[b-npevlp9w11] {
    padding: 10px 12px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 6px;
    transition: background 0.1s;
    border: 1px solid transparent;
}

.inbox-item:hover[b-npevlp9w11] {
    background: var(--dc-bg-modifier-hover);
    border-color: var(--dc-separator);
}

.inbox-item-meta[b-npevlp9w11] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.inbox-badge[b-npevlp9w11] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 10px;
}

.inbox-badge-mention[b-npevlp9w11] {
    background: rgba(74,158,255,0.15);
    color: var(--dc-brand);
}

.inbox-badge-reply[b-npevlp9w11] {
    background: rgba(35,165,90,0.15);
    color: var(--dc-green);
}

.inbox-channel[b-npevlp9w11] {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--dc-text-muted);
    display: flex;
    align-items: center;
    gap: 3px;
}

.inbox-time[b-npevlp9w11] {
    font-size: 0.68rem;
    color: var(--dc-text-muted);
    margin-left: auto;
}

.inbox-reply-orig[b-npevlp9w11] {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    font-size: 0.75rem;
    color: var(--dc-text-muted);
    background: var(--dc-bg-modifier-hover);
    border-left: 2px solid var(--dc-separator);
    padding: 4px 8px;
    border-radius: 0 4px 4px 0;
    font-style: italic;
}

.inbox-item-body[b-npevlp9w11] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.inbox-avatar[b-npevlp9w11] {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
    text-transform: uppercase;
}

.inbox-item-text[b-npevlp9w11] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.inbox-sender[b-npevlp9w11] {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--dc-header-secondary);
}

.inbox-content[b-npevlp9w11] {
    font-size: 0.8rem;
    color: var(--dc-text-normal);
    line-height: 1.35;
    word-break: break-word;
}

.inbox-refresh[b-npevlp9w11] {
    background: none;
    border: none;
    color: var(--dc-text-muted);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 10px 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    border-top: 1px solid var(--dc-separator);
    flex-shrink: 0;
    transition: color 0.1s;
}

.inbox-refresh:hover[b-npevlp9w11] { color: var(--dc-interactive-hover); }

/* ===== SEARCH PANEL ===== */
.search-panel[b-npevlp9w11] {
    width: 320px;
    min-width: 320px;
    background: var(--dc-bg-secondary);
    border-left: 1px solid var(--dc-separator);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.search-panel-header[b-npevlp9w11] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 16px 12px;
    border-bottom: 1px solid var(--dc-separator);
    flex-shrink: 0;
}

.search-panel-title[b-npevlp9w11] {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--dc-header-primary);
    display: flex;
    align-items: center;
    gap: 8px;
}

.search-panel-query[b-npevlp9w11] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--dc-separator);
    flex-shrink: 0;
}

.search-panel-input[b-npevlp9w11] {
    flex: 1;
    background: var(--dc-bg-tertiary);
    border: none;
    border-radius: 4px;
    padding: 6px 10px;
    font-size: 13px;
    color: var(--dc-text-normal);
    outline: none;
}

.search-panel-input[b-npevlp9w11]::placeholder { color: var(--dc-text-muted); }

.search-panel-go[b-npevlp9w11] {
    background: var(--dc-brand, #5865f2);
    border: none;
    border-radius: 4px;
    color: #fff;
    padding: 6px 8px;
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    transition: opacity 0.15s;
}

.search-panel-go:hover[b-npevlp9w11] { opacity: 0.85; }

.search-results-list[b-npevlp9w11] {
    flex: 1;
    overflow-y: auto;
    padding: 8px 0;
}

.search-result-item[b-npevlp9w11] {
    padding: 10px 14px;
    cursor: pointer;
    transition: background 0.1s;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}

.search-result-item:hover[b-npevlp9w11] { background: var(--dc-bg-modifier-hover); }

.search-result-meta[b-npevlp9w11] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 4px;
}

.search-result-author[b-npevlp9w11] {
    font-size: 13px;
    font-weight: 600;
    color: var(--dc-text-normal);
}

.search-result-content[b-npevlp9w11] {
    font-size: 13px;
    color: var(--dc-text-muted);
    line-height: 1.4;
    word-break: break-word;
}

.search-highlight[b-npevlp9w11] {
    background: rgba(250, 166, 26, 0.3);
    color: var(--dc-text-normal);
    border-radius: 2px;
    padding: 0 1px;
}

.search-results-count[b-npevlp9w11] {
    text-align: center;
    font-size: 11px;
    color: var(--dc-text-muted);
    padding: 10px;
}

/* ── Announcement channel ──────────────────────────────────────────────── */
.announcement-channel .channel-hash i[b-npevlp9w11] {
    color: #faa81a;
}
.announcement-channel.active .channel-hash i[b-npevlp9w11] {
    color: #fff;
}

.announcement-locked[b-npevlp9w11] {
    margin: 0 16px 24px;
    padding: 14px 18px;
    background: rgba(250, 168, 26, 0.08);
    border: 1px solid rgba(250, 168, 26, 0.2);
    border-radius: 8px;
    color: #b9a574;
    font-size: 0.88rem;
    display: flex;
    align-items: center;
    gap: 10px;
}
.announcement-locked i[b-npevlp9w11] {
    font-size: 16px;
    color: #faa81a;
    flex-shrink: 0;
}
/* /Components/Pages/Home.razor.rz.scp.css */
.login-root[b-pv2snj2623] {
    min-height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background-color: #0a1628;
    overflow: hidden;
}

/* Animated background blobs — space nebula feel */
.login-bg[b-pv2snj2623] {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.bg-blob[b-pv2snj2623] {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.35;
    animation: blobFloat-b-pv2snj2623 8s ease-in-out infinite;
}

.blob-1[b-pv2snj2623] {
    width: 600px;
    height: 600px;
    background: #1a4a8a;
    top: -200px;
    left: -150px;
    animation-delay: 0s;
}

.blob-2[b-pv2snj2623] {
    width: 500px;
    height: 500px;
    background: #0d2a5c;
    bottom: -150px;
    right: -100px;
    animation-delay: 2s;
}

.blob-3[b-pv2snj2623] {
    width: 400px;
    height: 400px;
    background: #1e3a6e;
    top: 40%;
    left: 40%;
    animation-delay: 4s;
}

@keyframes blobFloat-b-pv2snj2623 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(20px, -20px) scale(1.05); }
    66% { transform: translate(-15px, 15px) scale(0.95); }
}

/* Modal container */
.login-modal[b-pv2snj2623] {
    position: relative;
    z-index: 1;
    display: flex;
    width: 784px;
    min-height: 480px;
    border-radius: 8px;
    background-color: #101827;
    box-shadow: 0 2px 10px rgba(0,0,0,0.5), 0 20px 60px rgba(0,0,0,0.4);
    overflow: hidden;
}

/* Left decorative panel */
.login-left[b-pv2snj2623] {
    flex: 0 0 260px;
    background: linear-gradient(160deg, #1a3a6e 0%, #0d2040 50%, #060d14 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 30px;
    text-align: center;
    gap: 16px;
}

.login-logo[b-pv2snj2623] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

.haven-logo-img[b-pv2snj2623] {
    width: 140px;
    height: auto;
    filter: drop-shadow(0 4px 16px rgba(74,158,255,0.4));
}

.haven-logo-text[b-pv2snj2623] {
    font-size: 28px;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.5px;
}

.login-left h2[b-pv2snj2623] {
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    margin: 0;
}

.login-left p[b-pv2snj2623] {
    font-size: 14px;
    color: rgba(255,255,255,0.7);
    margin: 0;
}

/* Right form panel */
.login-right[b-pv2snj2623] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 40px;
}

.login-form-container[b-pv2snj2623] {
    width: 100%;
    max-width: 360px;
}

.login-form-container h1[b-pv2snj2623] {
    font-size: 24px;
    font-weight: 700;
    color: #e6edf6;
    text-align: center;
    margin-bottom: 8px;
}

.login-subtitle[b-pv2snj2623] {
    font-size: 14px;
    color: #8da2ba;
    text-align: center;
    margin-bottom: 20px;
}

.form-group[b-pv2snj2623] {
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-group label[b-pv2snj2623] {
    font-size: 12px;
    font-weight: 700;
    color: #8da2ba;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.required[b-pv2snj2623] {
    color: #f23f42;
    margin-left: 4px;
}

.form-input[b-pv2snj2623] {
    background-color: #0a1019;
    border: 1px solid #0a1019;
    border-radius: 4px;
    color: #c9d4e2;
    font-size: 16px;
    padding: 10px;
    width: 100%;
    transition: border-color 0.15s ease;
}

.form-input:focus[b-pv2snj2623] {
    border-color: #4a9eff;
    background-color: #0a1019;
}

.form-input[b-pv2snj2623]::placeholder {
    color: #4a6580;
}

.forgot-password[b-pv2snj2623] {
    font-size: 14px;
    color: #5cb8ff;
    text-decoration: none;
    align-self: flex-start;
}

.forgot-password:hover[b-pv2snj2623] {
    text-decoration: underline;
}

.btn-login[b-pv2snj2623] {
    width: 100%;
    padding: 12px;
    border-radius: 4px;
    background-color: #4a9eff;
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    margin-top: 8px;
    margin-bottom: 8px;
    transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

.btn-login:hover[b-pv2snj2623] {
    background-color: #3580d9;
    box-shadow: 0 4px 12px rgba(74, 158, 255, 0.35);
}

.btn-login:active[b-pv2snj2623] {
    background-color: #2968b5;
}

/* Error / success banners */
.login-error[b-pv2snj2623] {
    display: flex;
    align-items: center;
    gap: 8px;
    background-color: rgba(242, 63, 66, 0.15);
    border: 1px solid rgba(242, 63, 66, 0.4);
    border-radius: 4px;
    color: #f23f42;
    font-size: 14px;
    padding: 10px 12px;
    margin-bottom: 16px;
}

.login-success[b-pv2snj2623] {
    display: flex;
    align-items: center;
    gap: 8px;
    background-color: rgba(35, 165, 90, 0.15);
    border: 1px solid rgba(35, 165, 90, 0.4);
    border-radius: 4px;
    color: #23a55a;
    font-size: 14px;
    padding: 10px 12px;
    margin-bottom: 16px;
}

.login-success a[b-pv2snj2623] {
    color: #23a55a;
    font-weight: 600;
}

.input-error[b-pv2snj2623] {
    border-color: #f23f42 !important;
}

/* Loading state */
.btn-login.loading[b-pv2snj2623] {
    opacity: 0.8;
    cursor: not-allowed;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.spinner[b-pv2snj2623] {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin-b-pv2snj2623 0.7s linear infinite;
    flex-shrink: 0;
}

@keyframes spin-b-pv2snj2623 {
    to { transform: rotate(360deg); }
}

/* Register modal — slightly taller */
.register-modal[b-pv2snj2623] {
    min-height: 520px;
}

.register-prompt[b-pv2snj2623] {
    font-size: 14px;
    color: #8da2ba;
    margin-top: 8px;
}

.register-link[b-pv2snj2623] {
    color: #5cb8ff;
    text-decoration: none;
}

.register-link:hover[b-pv2snj2623] {
    text-decoration: underline;
}

/* Guest link below modal */
.guest-link[b-pv2snj2623] {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    color: rgba(255,255,255,0.8);
    font-size: 14px;
    text-decoration: none;
    padding: 8px 20px;
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 20px;
    backdrop-filter: blur(4px);
    background: rgba(255,255,255,0.05);
    transition: all 0.2s ease;
    white-space: nowrap;
}

.guest-link:hover[b-pv2snj2623] {
    background: rgba(255,255,255,0.15);
    color: #fff;
    text-decoration: none;
}
/* /Components/Pages/InviteLanding.razor.rz.scp.css */
.invite-root[b-1zx40udetm] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0f0f13;
    position: relative;
    overflow: hidden;
}

/* Reuse the blob background from login */
.invite-bg[b-1zx40udetm] {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.bg-blob[b-1zx40udetm] {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.18;
}

.blob-1[b-1zx40udetm] {
    width: 500px;
    height: 500px;
    background: #5865f2;
    top: -120px;
    left: -100px;
}

.blob-2[b-1zx40udetm] {
    width: 400px;
    height: 400px;
    background: #7c3aed;
    bottom: -80px;
    right: -80px;
}

.blob-3[b-1zx40udetm] {
    width: 300px;
    height: 300px;
    background: #2dd4bf;
    top: 50%;
    left: 55%;
    transform: translate(-50%, -50%);
}

.invite-card[b-1zx40udetm] {
    position: relative;
    z-index: 1;
    background: #1e1f26;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    padding: 40px 48px;
    width: 100%;
    max-width: 440px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-align: center;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
}

.invite-haven-logo[b-1zx40udetm] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.haven-logo-img[b-1zx40udetm] {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    object-fit: cover;
}

.haven-logo-text[b-1zx40udetm] {
    font-size: 1.1rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.02em;
}

.invite-server-icon[b-1zx40udetm] {
    width: 72px;
    height: 72px;
    border-radius: 20px;
    background: #2d2f3a;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: 700;
    color: #fff;
    border: 2px solid rgba(255, 255, 255, 0.08);
    flex-shrink: 0;
}

.invite-server-icon.invalid[b-1zx40udetm] {
    background: rgba(240, 71, 71, 0.15);
    border-color: rgba(240, 71, 71, 0.3);
    color: #f04747;
}

.invite-server-icon.success[b-1zx40udetm] {
    background: rgba(67, 181, 129, 0.15);
    border-color: rgba(67, 181, 129, 0.3);
    color: #43b581;
}

.invite-eyebrow[b-1zx40udetm] {
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #72767d;
    margin: 0;
}

.invite-title[b-1zx40udetm] {
    font-size: 1.4rem;
    font-weight: 700;
    color: #fff;
    margin: 0;
    line-height: 1.3;
}

.invite-server-name[b-1zx40udetm] {
    color: #5865f2;
}

.invite-subtitle[b-1zx40udetm] {
    font-size: 0.9rem;
    color: #a3a6aa;
    margin: 0;
}

.invite-meta[b-1zx40udetm] {
    font-size: 0.82rem;
    color: #72767d;
    margin: 0;
}

.invite-meta strong[b-1zx40udetm] {
    color: #b9bbbe;
}

.invite-error[b-1zx40udetm] {
    background: rgba(240, 71, 71, 0.1);
    border: 1px solid rgba(240, 71, 71, 0.3);
    border-radius: 8px;
    padding: 10px 14px;
    color: #f04747;
    font-size: 0.85rem;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
}

.invite-btn[b-1zx40udetm] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 32px;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    border: none;
    text-decoration: none;
    transition: background 0.15s, opacity 0.15s;
    background: #5865f2;
    color: #fff;
    width: 100%;
}

.invite-btn:hover:not(:disabled)[b-1zx40udetm] {
    background: #4752c4;
}

.invite-btn:disabled[b-1zx40udetm],
.invite-btn.working[b-1zx40udetm] {
    opacity: 0.6;
    cursor: not-allowed;
}

.invite-btn.secondary[b-1zx40udetm] {
    background: #2d2f3a;
    color: #dcddde;
}

.invite-btn.secondary:hover[b-1zx40udetm] {
    background: #383a47;
}

.invite-auth-btns[b-1zx40udetm] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}

.invite-loading[b-1zx40udetm] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 0;
}

.spinner[b-1zx40udetm] {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin-b-1zx40udetm 0.7s linear infinite;
    display: inline-block;
}

@keyframes spin-b-1zx40udetm {
    to { transform: rotate(360deg); }
}
/* /Components/Pages/Register.razor.rz.scp.css */
/* ===== ROOT ===== */
.reg-root[b-skk1j9y6cy] {
    min-height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background-color: #080e18;
    overflow: hidden;
}

/* ===== BACKGROUND ===== */
.reg-bg[b-skk1j9y6cy] {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.reg-blob[b-skk1j9y6cy] {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.25;
    animation: regBlob-b-skk1j9y6cy 10s ease-in-out infinite;
}

.blob-1[b-skk1j9y6cy] {
    width: 700px;
    height: 700px;
    background: #1a4a8a;
    top: -200px;
    left: -200px;
    animation-delay: 0s;
}

.blob-2[b-skk1j9y6cy] {
    width: 600px;
    height: 600px;
    background: #0d3060;
    bottom: -200px;
    right: -150px;
    animation-delay: 3s;
}

.blob-3[b-skk1j9y6cy] {
    width: 400px;
    height: 400px;
    background: #164578;
    top: 50%;
    left: 55%;
    animation-delay: 6s;
}

@keyframes regBlob-b-skk1j9y6cy {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33%  { transform: translate(30px, -20px) scale(1.06); }
    66%  { transform: translate(-20px, 20px) scale(0.94); }
}

/* ===== CARD ===== */
.reg-card[b-skk1j9y6cy] {
    position: relative;
    z-index: 1;
    width: 460px;
    background: #0c1220;
    border-radius: 16px;
    padding: 40px 44px 36px;
    box-shadow: 0 8px 40px rgba(0,0,0,0.6), 0 2px 8px rgba(0,0,0,0.4);
    border: 1px solid rgba(80,150,255,0.08);
    margin: 32px 16px;
}

/* ===== LOGO ===== */
.reg-logo[b-skk1j9y6cy] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 24px;
}

.reg-logo-img[b-skk1j9y6cy] {
    width: 40px;
    height: auto;
    filter: drop-shadow(0 0 12px rgba(74,158,255,0.5));
}

.reg-logo-text[b-skk1j9y6cy] {
    font-size: 22px;
    font-weight: 800;
    color: #e6edf6;
    letter-spacing: -0.5px;
}

/* ===== TITLE ===== */
.reg-title[b-skk1j9y6cy] {
    font-size: 22px;
    font-weight: 700;
    color: #e6edf6;
    margin: 0 0 6px;
}

.reg-subtitle[b-skk1j9y6cy] {
    font-size: 14px;
    color: #5a7394;
    margin: 0 0 28px;
}

/* ===== STEP INDICATOR ===== */
.reg-steps[b-skk1j9y6cy] {
    display: flex;
    align-items: center;
    gap: 0;
    margin-bottom: 28px;
}

.reg-step[b-skk1j9y6cy] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.reg-step-dot[b-skk1j9y6cy] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid #1a2940;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    color: #5a7394;
    transition: all 0.25s ease;
    flex-shrink: 0;
}

.reg-step.active .reg-step-dot[b-skk1j9y6cy] {
    border-color: #4a9eff;
    background: #4a9eff;
    color: #fff;
    box-shadow: 0 0 0 4px rgba(74,158,255,0.2);
}

.reg-step.done .reg-step-dot[b-skk1j9y6cy] {
    border-color: #23a55a;
    background: #23a55a;
    color: #fff;
}

.reg-step-label[b-skk1j9y6cy] {
    font-size: 13px;
    font-weight: 600;
    color: #5a7394;
    transition: color 0.2s;
}

.reg-step.active .reg-step-label[b-skk1j9y6cy],
.reg-step.done .reg-step-label[b-skk1j9y6cy] {
    color: #c9d4e2;
}

.reg-step-line[b-skk1j9y6cy] {
    flex: 1;
    height: 2px;
    background: #1a2940;
    margin: 0 12px;
    border-radius: 1px;
    transition: background 0.3s ease;
    position: relative;
    overflow: hidden;
}

.reg-step-line[b-skk1j9y6cy]::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 0%;
    background: #23a55a;
    border-radius: 1px;
    transition: width 0.4s ease;
}

.reg-step-line.done[b-skk1j9y6cy]::after {
    width: 100%;
}

/* ===== ERROR BANNER ===== */
.reg-error[b-skk1j9y6cy] {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(242,63,66,0.12);
    border: 1px solid rgba(242,63,66,0.35);
    border-radius: 8px;
    color: #f23f42;
    font-size: 13px;
    padding: 10px 14px;
    margin-bottom: 20px;
}

/* ===== FORM ===== */
.reg-form[b-skk1j9y6cy] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.reg-field[b-skk1j9y6cy] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.reg-field label[b-skk1j9y6cy] {
    font-size: 12px;
    font-weight: 700;
    color: #8da2ba;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.reg-input-wrap[b-skk1j9y6cy] {
    position: relative;
    display: flex;
    align-items: center;
}

.reg-input-icon[b-skk1j9y6cy] {
    position: absolute;
    left: 12px;
    color: #3a5570;
    font-size: 17px;
    pointer-events: none;
    transition: color 0.15s;
}

.reg-input-wrap:focus-within .reg-input-icon[b-skk1j9y6cy] {
    color: #4a9eff;
}

.reg-input[b-skk1j9y6cy] {
    width: 100%;
    background: #0a1019;
    border: 1.5px solid #0a1019;
    border-radius: 8px;
    color: #c9d4e2;
    font-size: 15px;
    padding: 11px 12px 11px 40px;
    transition: border-color 0.15s, background 0.15s;
}

.reg-input:focus[b-skk1j9y6cy] {
    border-color: #4a9eff;
    background: #081018;
    outline: none;
}

.reg-input[b-skk1j9y6cy]::placeholder {
    color: #3a5570;
}

.reg-input-toggle[b-skk1j9y6cy] {
    position: absolute;
    right: 10px;
    background: none;
    color: #3a5570;
    font-size: 17px;
    display: flex;
    align-items: center;
    padding: 4px;
    border-radius: 4px;
    transition: color 0.15s;
}

.reg-input-toggle:hover[b-skk1j9y6cy] { color: #5a7394; }

.reg-field-hint[b-skk1j9y6cy] {
    font-size: 12px;
    color: #5a7394;
}

.reg-field-hint strong[b-skk1j9y6cy] {
    color: #8da2ba;
}

/* ===== PASSWORD STRENGTH ===== */
.pw-strength[b-skk1j9y6cy] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 4px;
}

.pw-strength-bar[b-skk1j9y6cy] {
    flex: 1;
    height: 4px;
    background: #1a2940;
    border-radius: 2px;
    overflow: hidden;
}

.pw-strength-fill[b-skk1j9y6cy] {
    height: 100%;
    border-radius: 2px;
    transition: width 0.3s ease, background-color 0.3s ease;
}

.pw-strength-fill.pw-very-weak[b-skk1j9y6cy]  { background: #f23f42; }
.pw-strength-fill.pw-weak[b-skk1j9y6cy]       { background: #fe7c02; }
.pw-strength-fill.pw-fair[b-skk1j9y6cy]       { background: #fee75c; }
.pw-strength-fill.pw-strong[b-skk1j9y6cy]     { background: #23a55a; }
.pw-strength-fill.pw-very-strong[b-skk1j9y6cy] { background: #1abc9c; }

.pw-strength-label[b-skk1j9y6cy] {
    font-size: 11px;
    font-weight: 600;
    width: 72px;
    text-align: right;
    flex-shrink: 0;
}

.pw-strength-label.pw-very-weak[b-skk1j9y6cy]  { color: #f23f42; }
.pw-strength-label.pw-weak[b-skk1j9y6cy]       { color: #fe7c02; }
.pw-strength-label.pw-fair[b-skk1j9y6cy]       { color: #fee75c; }
.pw-strength-label.pw-strong[b-skk1j9y6cy]     { color: #23a55a; }
.pw-strength-label.pw-very-strong[b-skk1j9y6cy] { color: #1abc9c; }

/* ===== AVATAR COLOR GRID ===== */
.reg-color-grid[b-skk1j9y6cy] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.reg-color-swatch[b-skk1j9y6cy] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px solid transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
    color: #fff;
    font-size: 14px;
}

.reg-color-swatch:hover[b-skk1j9y6cy] {
    transform: scale(1.15);
}

.reg-color-swatch.selected[b-skk1j9y6cy] {
    border-color: #fff;
    box-shadow: 0 0 0 2px rgba(255,255,255,0.3);
    transform: scale(1.1);
}

/* ===== AVATAR PREVIEW ===== */
.reg-preview[b-skk1j9y6cy] {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #0e1624;
    border: 1px solid rgba(80,150,255,0.08);
    border-radius: 10px;
    padding: 12px 16px;
}

.reg-preview-avatar[b-skk1j9y6cy] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
    transition: background-color 0.2s;
}

.reg-preview-info[b-skk1j9y6cy] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.reg-preview-name[b-skk1j9y6cy] {
    font-size: 14px;
    font-weight: 700;
    color: #e6edf6;
}

.reg-preview-tag[b-skk1j9y6cy] {
    font-size: 12px;
    color: #23a55a;
}

/* ===== BUTTONS ===== */
.reg-btn[b-skk1j9y6cy] {
    width: 100%;
    padding: 12px 20px;
    border-radius: 8px;
    background: #4a9eff;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    border: none;
    transition: background 0.15s, box-shadow 0.15s, transform 0.1s;
    text-decoration: none;
}

.reg-btn:hover[b-skk1j9y6cy] {
    background: #3580d9;
    box-shadow: 0 4px 16px rgba(74,158,255,0.35);
    text-decoration: none;
}

.reg-btn:active[b-skk1j9y6cy] {
    transform: scale(0.98);
    background: #2968b5;
}

.reg-btn.loading[b-skk1j9y6cy] {
    opacity: 0.8;
    cursor: not-allowed;
}

.reg-btn-row[b-skk1j9y6cy] {
    display: flex;
    gap: 10px;
    align-items: center;
}

.reg-btn-row .reg-btn[b-skk1j9y6cy] {
    flex: 1;
}

.reg-btn-back[b-skk1j9y6cy] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 12px 16px;
    border-radius: 8px;
    background: #1a2940;
    color: #8da2ba;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s;
    flex-shrink: 0;
}

.reg-btn-back:hover[b-skk1j9y6cy] {
    background: #223550;
    color: #c9d4e2;
}

/* Spinner */
.spinner[b-skk1j9y6cy] {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin-b-skk1j9y6cy 0.7s linear infinite;
    flex-shrink: 0;
}

@keyframes spin-b-skk1j9y6cy { to { transform: rotate(360deg); } }

/* ===== LOGIN PROMPT ===== */
.reg-login-prompt[b-skk1j9y6cy] {
    font-size: 13px;
    color: #5a7394;
    text-align: center;
    margin-top: 20px;
    margin-bottom: 0;
}

.reg-login-link[b-skk1j9y6cy] {
    color: #5cb8ff;
    text-decoration: none;
    font-weight: 500;
}

.reg-login-link:hover[b-skk1j9y6cy] { text-decoration: underline; }

/* ===== SUCCESS STATE ===== */
.reg-success-state[b-skk1j9y6cy] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
    padding: 8px 0;
}

.reg-success-icon[b-skk1j9y6cy] {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: rgba(35,165,90,0.15);
    border: 2px solid rgba(35,165,90,0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #23a55a;
    font-size: 36px;
    margin-bottom: 8px;
}

.reg-success-state h2[b-skk1j9y6cy] {
    font-size: 22px;
    font-weight: 700;
    color: #e6edf6;
    margin: 0;
}

.reg-success-state p[b-skk1j9y6cy] {
    font-size: 14px;
    color: #5a7394;
    margin: 0 0 8px;
    line-height: 1.5;
}

.reg-success-state .reg-btn[b-skk1j9y6cy] {
    width: auto;
    padding: 11px 32px;
}
/* /Components/Pages/ResetPassword.razor.rz.scp.css */
.reset-loading[b-f5qvtz5lr0] {
    display: flex;
    justify-content: center;
    padding: 32px 0;
}

.login-success[b-f5qvtz5lr0] {
    background: rgba(87, 242, 135, 0.1);
    border: 1px solid rgba(87, 242, 135, 0.3);
    color: #57f287;
    border-radius: 4px;
    padding: 12px 16px;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
}
/* /Components/Shared/AddServerModal.razor.rz.scp.css */
/* ── Backdrop ──────────────────────────────── */
.asm-backdrop[b-ik6rmchyzi] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    animation: asm-fade-in-b-ik6rmchyzi 0.15s ease;
}

@keyframes asm-fade-in-b-ik6rmchyzi {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ── Modal card ────────────────────────────── */
.asm-modal[b-ik6rmchyzi] {
    width: 440px;
    background: var(--dc-bg-primary);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 16px 64px rgba(0,0,0,0.7);
    animation: asm-slide-up-b-ik6rmchyzi 0.2s ease;
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(80,150,255,0.08);
}

@keyframes asm-slide-up-b-ik6rmchyzi {
    from { transform: translateY(20px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}

/* ── Header ────────────────────────────────── */
.asm-header[b-ik6rmchyzi] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    font-weight: 700;
    font-size: 18px;
    color: #e6edf6;
    border-bottom: 1px solid rgba(80,150,255,0.08);
}

.asm-header span[b-ik6rmchyzi] { flex: 1; }

.asm-close-btn[b-ik6rmchyzi],
.asm-back-btn[b-ik6rmchyzi] {
    background: none;
    border: none;
    color: #5a7394;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: color 0.15s, background-color 0.15s;
    font-size: 18px;
    flex-shrink: 0;
}

.asm-close-btn:hover[b-ik6rmchyzi],
.asm-back-btn:hover[b-ik6rmchyzi] {
    color: #e6edf6;
    background: rgba(80,150,255,0.1);
}

.asm-back-btn[b-ik6rmchyzi] { margin-right: 8px; }

/* ── Body ──────────────────────────────────── */
.asm-body[b-ik6rmchyzi] {
    padding: 20px;
}

.asm-subtitle[b-ik6rmchyzi] {
    font-size: 14px;
    color: #5a7394;
    margin-bottom: 20px;
    line-height: 1.5;
}

/* ── Pick cards ────────────────────────────── */
.asm-pick-grid[b-ik6rmchyzi] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.asm-pick-card[b-ik6rmchyzi] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--dc-bg-secondary);
    border: 1px solid rgba(80,150,255,0.1);
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    color: #c9d4e2;
    font-size: 15px;
    font-weight: 600;
    text-align: left;
    width: 100%;
}

.asm-pick-card:hover[b-ik6rmchyzi] {
    background: var(--dc-bg-modifier-hover);
    border-color: rgba(80,150,255,0.25);
}

.asm-pick-icon[b-ik6rmchyzi] {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--dc-brand);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: #fff;
    flex-shrink: 0;
}

.asm-pick-icon.join[b-ik6rmchyzi] {
    background: #23a55a;
}

.asm-pick-label[b-ik6rmchyzi] { flex: 1; }

.asm-pick-arrow[b-ik6rmchyzi] {
    color: #5a7394;
    font-size: 16px;
}

/* ── Form fields ───────────────────────────── */
.asm-field[b-ik6rmchyzi] {
    margin-bottom: 16px;
}

.asm-field label[b-ik6rmchyzi] {
    display: block;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #8ba3c2;
    margin-bottom: 8px;
}

.asm-input[b-ik6rmchyzi] {
    width: 100%;
    background: var(--dc-input-bg);
    border: 1px solid rgba(80,150,255,0.12);
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 15px;
    color: #e6edf6;
    transition: border-color 0.15s;
    outline: none;
    box-sizing: border-box;
}

.asm-input:focus[b-ik6rmchyzi] {
    border-color: var(--dc-brand);
}

.asm-input[b-ik6rmchyzi]::placeholder {
    color: #3a5574;
}

.asm-field-hint[b-ik6rmchyzi] {
    display: block;
    font-size: 12px;
    color: #5a7394;
    margin-top: 6px;
}

/* ── Error / success ───────────────────────── */
.asm-error[b-ik6rmchyzi] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: rgba(242,63,66,0.1);
    border: 1px solid rgba(242,63,66,0.2);
    border-radius: 8px;
    color: #f23f42;
    font-size: 13px;
    margin-bottom: 16px;
}

.asm-success[b-ik6rmchyzi] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: rgba(35,165,90,0.1);
    border: 1px solid rgba(35,165,90,0.2);
    border-radius: 8px;
    color: #23a55a;
    font-size: 13px;
    margin-bottom: 16px;
}

/* ── Invite code display ───────────────────── */
.asm-invite-code-box[b-ik6rmchyzi] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: var(--dc-input-bg);
    border: 1px solid rgba(80,150,255,0.15);
    border-radius: 10px;
}

.asm-invite-code[b-ik6rmchyzi] {
    flex: 1;
    font-size: 20px;
    font-weight: 700;
    font-family: 'SF Mono', 'Fira Code', monospace;
    color: var(--dc-brand);
    letter-spacing: 2px;
}

.asm-copy-btn[b-ik6rmchyzi] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: var(--dc-brand);
    border: none;
    border-radius: 6px;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
    white-space: nowrap;
}

.asm-copy-btn:hover[b-ik6rmchyzi] { background: var(--dc-brand-hover); }

.asm-copy-btn.copied[b-ik6rmchyzi] {
    background: #23a55a;
}

.asm-generating[b-ik6rmchyzi] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 20px;
    color: #5a7394;
    font-size: 14px;
}

/* ── Footer ────────────────────────────────── */
.asm-footer[b-ik6rmchyzi] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 20px;
    background: var(--dc-bg-primary);
    border-top: 1px solid rgba(80,150,255,0.08);
}

.asm-btn-back[b-ik6rmchyzi] {
    background: none;
    border: none;
    color: #8ba3c2;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    padding: 8px 16px;
    border-radius: 6px;
    transition: color 0.15s;
}

.asm-btn-back:hover[b-ik6rmchyzi] { color: #e6edf6; }

.asm-btn-primary[b-ik6rmchyzi] {
    background: var(--dc-brand);
    border: none;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    padding: 10px 24px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s, opacity 0.15s;
    display: flex;
    align-items: center;
    gap: 8px;
}

.asm-btn-primary:hover[b-ik6rmchyzi] { background: var(--dc-brand-hover); }

.asm-btn-primary:disabled[b-ik6rmchyzi] {
    opacity: 0.5;
    cursor: not-allowed;
}

.asm-btn-primary.working[b-ik6rmchyzi] {
    pointer-events: none;
    opacity: 0.8;
}

/* ── Spinner ───────────────────────────────── */
.asm-spinner[b-ik6rmchyzi] {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255,255,255,0.2);
    border-top-color: #fff;
    border-radius: 50%;
    animation: asm-spin-b-ik6rmchyzi 0.6s linear infinite;
    flex-shrink: 0;
}

@keyframes asm-spin-b-ik6rmchyzi { to { transform: rotate(360deg); } }
/* /Components/Shared/Documentation.razor.rz.scp.css */
/* ── Root ────────────────────────────────────────────────────────────────── */

.doc-root[b-fougx0sqqa] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    background: var(--dc-bg-primary);
}

/* ── Empty / error / loading states ─────────────────────────────────────── */

.doc-empty-state[b-fougx0sqqa] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    gap: 10px;
    padding: 48px 40px;
    text-align: center;
    color: var(--dc-text-muted, #a3a6aa);
}

.doc-empty-state h2[b-fougx0sqqa] {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--dc-text-normal, #dcddde);
    margin: 0;
}

.doc-empty-state p[b-fougx0sqqa] {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.6;
    max-width: 420px;
}

.doc-empty-icon[b-fougx0sqqa] {
    font-size: 56px;
    opacity: 0.2;
    margin-bottom: 8px;
}

.doc-empty-error .doc-empty-icon[b-fougx0sqqa] { color: var(--dc-red, #f23f42); opacity: 0.5; }

.doc-retry-btn[b-fougx0sqqa] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    padding: 8px 18px;
    background: var(--dc-brand);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}
.doc-retry-btn:hover[b-fougx0sqqa] { background: var(--dc-brand-hover); }

/* ── Spinners ────────────────────────────────────────────────────────────── */

.doc-spinner[b-fougx0sqqa] {
    display: inline-block;
    width: 28px;
    height: 28px;
    border: 3px solid rgba(255,255,255,0.1);
    border-top-color: var(--dc-brand);
    border-radius: 50%;
    animation: doc-spin-b-fougx0sqqa 0.7s linear infinite;
}
.doc-spinner-sm[b-fougx0sqqa] { width: 18px; height: 18px; border-width: 2px; }
.doc-spinner-xs[b-fougx0sqqa] { width: 12px; height: 12px; border-width: 2px; flex-shrink: 0; }

@keyframes doc-spin-b-fougx0sqqa { to { transform: rotate(360deg); } }

/* ── Two-column layout ───────────────────────────────────────────────────── */

.doc-layout[b-fougx0sqqa] {
    display: flex;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

/* ── Navigation sidebar ──────────────────────────────────────────────────── */

.doc-nav[b-fougx0sqqa] {
    width: 260px;
    min-width: 260px;
    display: flex;
    flex-direction: column;
    background: var(--dc-bg-secondary);
    border-right: 1px solid rgba(255,255,255,0.06);
    overflow: hidden;
}

.doc-search-wrap[b-fougx0sqqa] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 10px 8px;
    flex-shrink: 0;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.doc-search-icon[b-fougx0sqqa] {
    color: var(--dc-text-muted, #a3a6aa);
    font-size: 0.95rem;
    flex-shrink: 0;
}

.doc-search-input[b-fougx0sqqa] {
    flex: 1;
    background: var(--dc-input-bg);
    border: none;
    border-radius: 4px;
    color: var(--dc-text-normal, #dcddde);
    font-size: 0.82rem;
    padding: 5px 8px;
    outline: none;
    font-family: inherit;
}
.doc-search-input[b-fougx0sqqa]::placeholder { color: var(--dc-text-muted, #a3a6aa); }
.doc-search-input:focus[b-fougx0sqqa] { outline: 1px solid var(--dc-brand); }

.doc-search-clear[b-fougx0sqqa] {
    background: transparent;
    border: none;
    color: var(--dc-text-muted, #a3a6aa);
    cursor: pointer;
    padding: 2px 4px;
    font-size: 0.8rem;
    border-radius: 3px;
    flex-shrink: 0;
}
.doc-search-clear:hover[b-fougx0sqqa] { color: var(--dc-text-normal, #dcddde); }

.doc-nav-scroll[b-fougx0sqqa] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 6px 0;
}

.doc-nav-loading[b-fougx0sqqa] {
    display: flex;
    justify-content: center;
    padding: 20px;
}

.doc-nav-empty[b-fougx0sqqa] {
    font-size: 0.82rem;
    color: var(--dc-text-muted, #a3a6aa);
    padding: 16px 14px;
    text-align: center;
}

/* ── Tree rows ───────────────────────────────────────────────────────────── */

.doc-tree-row[b-fougx0sqqa] {
    display: flex;
    align-items: center;
    gap: 5px;
    width: 100%;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 5px 10px 5px 6px;
    text-align: left;
    border-radius: 4px;
    color: var(--dc-text-normal, #dcddde);
    font-family: inherit;
    font-size: 0.855rem;
    font-weight: 500;
    transition: background 0.1s;
}
.doc-tree-row:hover[b-fougx0sqqa] { background: var(--dc-bg-modifier-hover); }

.doc-tree-caret[b-fougx0sqqa] {
    font-size: 0.7rem;
    color: var(--dc-text-muted, #a3a6aa);
    transition: transform 0.15s;
    flex-shrink: 0;
    width: 12px;
}
.doc-tree-caret.open[b-fougx0sqqa] { transform: rotate(90deg); }
.doc-tree-caret.hidden[b-fougx0sqqa] { visibility: hidden; }

.doc-tree-label[b-fougx0sqqa] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}

/* Book rows */
.doc-tree-book-row[b-fougx0sqqa] {
    font-weight: 600;
    font-size: 0.875rem;
    color: #e3e5e8;
}
.doc-tree-book-icon[b-fougx0sqqa] {
    font-size: 0.9rem;
    color: var(--dc-brand);
    flex-shrink: 0;
}

/* Chapter rows — indented one level */
.doc-tree-chapter[b-fougx0sqqa] { padding-left: 14px; }
.doc-tree-chapter-row[b-fougx0sqqa] { font-weight: 500; color: #c9cfda; }
.doc-tree-ch-icon[b-fougx0sqqa] {
    font-size: 0.85rem;
    color: var(--dc-text-muted, #a3a6aa);
    flex-shrink: 0;
}

/* Page rows — indented under chapters */
.doc-tree-page-row[b-fougx0sqqa] {
    padding-left: 42px;
    font-weight: 400;
    color: var(--dc-text-muted, #a3a6aa);
    font-size: 0.83rem;
}
.doc-tree-page-row:hover[b-fougx0sqqa] { color: var(--dc-text-normal, #dcddde); }
.doc-tree-page-row.selected[b-fougx0sqqa] {
    background: var(--dc-bg-modifier-selected, rgba(88,101,242,0.2));
    color: #fff;
}
/* Direct pages (no chapter) — indented one level only */
.doc-tree-page-direct[b-fougx0sqqa] { padding-left: 28px; }

.doc-tree-page-icon[b-fougx0sqqa] {
    font-size: 0.8rem;
    flex-shrink: 0;
    margin-right: 1px;
}

/* ── Search results ──────────────────────────────────────────────────────── */

.doc-search-result[b-fougx0sqqa] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 8px 12px;
    text-align: left;
    border-radius: 4px;
    font-family: inherit;
    transition: background 0.1s;
}
.doc-search-result:hover[b-fougx0sqqa] { background: var(--dc-bg-modifier-hover); }

.doc-result-icon[b-fougx0sqqa] {
    font-size: 0.9rem;
    color: var(--dc-brand);
    flex-shrink: 0;
    margin-top: 2px;
}
.doc-result-non-page .doc-result-icon[b-fougx0sqqa] { color: var(--dc-text-muted, #a3a6aa); }

.doc-result-body[b-fougx0sqqa] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    gap: 2px;
}

.doc-result-name[b-fougx0sqqa] {
    font-size: 0.855rem;
    font-weight: 500;
    color: var(--dc-text-normal, #dcddde);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.doc-result-preview[b-fougx0sqqa] {
    font-size: 0.77rem;
    color: var(--dc-text-muted, #a3a6aa);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.doc-result-type[b-fougx0sqqa] {
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--dc-text-muted, #a3a6aa);
    flex-shrink: 0;
    margin-top: 3px;
}

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

.doc-nav-footer[b-fougx0sqqa] {
    padding: 8px 10px;
    border-top: 1px solid rgba(255,255,255,0.06);
    flex-shrink: 0;
}

.doc-open-btn[b-fougx0sqqa] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 5px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--dc-text-muted, #a3a6aa);
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
}
.doc-open-btn:hover[b-fougx0sqqa] {
    background: var(--dc-bg-modifier-hover);
    color: var(--dc-text-normal, #dcddde);
}

/* ── Content panel ───────────────────────────────────────────────────────── */

.doc-content[b-fougx0sqqa] {
    flex: 1;
    min-width: 0;
    overflow-y: auto;
    background: var(--dc-bg-primary);
    display: flex;
    flex-direction: column;
}

.doc-content-loading[b-fougx0sqqa] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
}

.doc-page-wrap[b-fougx0sqqa] {
    padding: 40px 48px 80px;
    max-width: 900px;
    width: 100%;
}

.doc-page-header[b-fougx0sqqa] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 28px;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(255,255,255,0.07);
}

.doc-page-title[b-fougx0sqqa] {
    font-size: 1.9rem;
    font-weight: 800;
    color: #f2f3f5;
    margin: 0;
    line-height: 1.25;
    flex: 1;
    min-width: 0;
}

/* ── Prose styling ───────────────────────────────────────────────────────── */

.doc-prose[b-fougx0sqqa] {
    color: #c8cdd4;
    font-size: 0.95rem;
    line-height: 1.75;
}

.doc-prose h1[b-fougx0sqqa],
.doc-prose h2[b-fougx0sqqa],
.doc-prose h3[b-fougx0sqqa],
.doc-prose h4[b-fougx0sqqa],
.doc-prose h5[b-fougx0sqqa],
.doc-prose h6[b-fougx0sqqa] {
    color: #e8eaed;
    font-weight: 700;
    line-height: 1.3;
    margin: 1.8em 0 0.5em;
}
.doc-prose h1[b-fougx0sqqa] { font-size: 1.6rem; }
.doc-prose h2[b-fougx0sqqa] { font-size: 1.3rem; border-bottom: 1px solid rgba(255,255,255,0.07); padding-bottom: 6px; }
.doc-prose h3[b-fougx0sqqa] { font-size: 1.1rem; }
.doc-prose h4[b-fougx0sqqa] { font-size: 1rem; }

.doc-prose p[b-fougx0sqqa] { margin: 0.75em 0; }

.doc-prose a[b-fougx0sqqa] { color: var(--dc-brand); text-decoration: none; }
.doc-prose a:hover[b-fougx0sqqa] { text-decoration: underline; }

.doc-prose strong[b-fougx0sqqa] { color: #e8eaed; font-weight: 700; }
.doc-prose em[b-fougx0sqqa] { font-style: italic; }

.doc-prose ul[b-fougx0sqqa],
.doc-prose ol[b-fougx0sqqa] { padding-left: 1.6em; margin: 0.75em 0; }
.doc-prose li[b-fougx0sqqa] { margin: 0.3em 0; }

.doc-prose blockquote[b-fougx0sqqa] {
    border-left: 3px solid var(--dc-brand);
    margin: 1em 0;
    padding: 0.5em 1.2em;
    background: rgba(255,255,255,0.03);
    border-radius: 0 4px 4px 0;
    color: var(--dc-text-muted, #a3a6aa);
}

.doc-prose pre[b-fougx0sqqa] {
    background: #0d0f13;
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 6px;
    padding: 1em 1.2em;
    overflow-x: auto;
    margin: 1em 0;
    font-size: 0.84rem;
    line-height: 1.6;
}

.doc-prose code[b-fougx0sqqa] {
    font-family: 'JetBrains Mono', 'Consolas', monospace;
    background: rgba(255,255,255,0.07);
    border-radius: 3px;
    padding: 1px 5px;
    font-size: 0.875em;
    color: #e06c75;
}

.doc-prose pre code[b-fougx0sqqa] {
    background: transparent;
    padding: 0;
    color: #abb2bf;
    font-size: inherit;
}

.doc-prose table[b-fougx0sqqa] {
    width: 100%;
    border-collapse: collapse;
    margin: 1.2em 0;
    font-size: 0.9rem;
}
.doc-prose th[b-fougx0sqqa] {
    background: rgba(255,255,255,0.06);
    padding: 8px 14px;
    text-align: left;
    border: 1px solid rgba(255,255,255,0.1);
    font-weight: 600;
    color: #e8eaed;
}
.doc-prose td[b-fougx0sqqa] {
    padding: 8px 14px;
    border: 1px solid rgba(255,255,255,0.07);
}
.doc-prose tr:nth-child(even) td[b-fougx0sqqa] { background: rgba(255,255,255,0.02); }

.doc-prose img[b-fougx0sqqa] {
    max-width: 100%;
    border-radius: 6px;
    margin: 0.5em 0;
}

.doc-prose hr[b-fougx0sqqa] {
    border: none;
    border-top: 1px solid rgba(255,255,255,0.09);
    margin: 1.8em 0;
}

/* BookStack callout blocks */
.doc-prose .callout[b-fougx0sqqa],
.doc-prose .callout-info[b-fougx0sqqa],
.doc-prose .callout-warning[b-fougx0sqqa],
.doc-prose .callout-danger[b-fougx0sqqa],
.doc-prose .callout-success[b-fougx0sqqa] {
    border-radius: 5px;
    padding: 12px 16px;
    margin: 1em 0;
    border-left: 4px solid;
    font-size: 0.9rem;
}
.doc-prose .callout[b-fougx0sqqa]         { background: rgba(255,255,255,0.04); border-color: #888; }
.doc-prose .callout-info[b-fougx0sqqa]    { background: rgba(88,101,242,0.1);   border-color: var(--dc-brand); }
.doc-prose .callout-success[b-fougx0sqqa] { background: rgba(59,165,93,0.1);    border-color: #3ba55d; }
.doc-prose .callout-warning[b-fougx0sqqa] { background: rgba(250,168,26,0.1);   border-color: #faa81a; }
.doc-prose .callout-danger[b-fougx0sqqa]  { background: rgba(242,63,66,0.1);    border-color: #f23f42; }

/* ── Edit button (view mode page header) ─────────────────────────────────── */

.doc-edit-btn[b-fougx0sqqa] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
    margin-top: 6px;
    padding: 5px 12px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 5px;
    color: var(--dc-text-muted, #a3a6aa);
    font-size: 0.8rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
}
.doc-edit-btn:hover[b-fougx0sqqa] {
    background: rgba(255,255,255,0.1);
    color: var(--dc-text-normal, #dcddde);
}

/* ── Tree row wrapper (book / chapter + new-page button) ─────────────────── */

.doc-tree-row-wrap[b-fougx0sqqa] {
    display: flex;
    align-items: center;
    width: 100%;
    position: relative;
}

.doc-tree-row-wrap .doc-tree-row[b-fougx0sqqa] {
    flex: 1;
    min-width: 0;
    padding-right: 28px; /* leave room so label doesn't slip under the + btn */
}

.doc-tree-new-btn[b-fougx0sqqa] {
    position: absolute;
    right: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 4px;
    color: var(--dc-text-muted, #a3a6aa);
    font-size: 0.72rem;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.12s, background 0.12s, color 0.12s;
    flex-shrink: 0;
}
.doc-tree-row-wrap:hover .doc-tree-new-btn[b-fougx0sqqa] { opacity: 1; }
.doc-tree-new-btn:hover[b-fougx0sqqa] {
    background: var(--dc-brand);
    color: #fff;
}

/* ── Editor panel (shared by edit + create modes) ────────────────────────── */

.doc-editor[b-fougx0sqqa] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    background: var(--dc-bg-primary);
}

/* Toolbar */
.doc-editor-bar[b-fougx0sqqa] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    background: var(--dc-bg-secondary);
    border-bottom: 1px solid rgba(255,255,255,0.07);
    flex-shrink: 0;
    min-height: 44px;
}

.doc-editor-back[b-fougx0sqqa] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    background: transparent;
    border: none;
    border-radius: 4px;
    color: var(--dc-text-muted, #a3a6aa);
    font-size: 0.82rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.12s, color 0.12s;
}
.doc-editor-back:hover[b-fougx0sqqa] {
    background: var(--dc-bg-modifier-hover);
    color: var(--dc-text-normal, #dcddde);
}

.doc-editor-context[b-fougx0sqqa] {
    flex: 1;
    min-width: 0;
    font-size: 0.85rem;
    color: var(--dc-text-muted, #a3a6aa);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.doc-editor-context strong[b-fougx0sqqa] {
    color: var(--dc-text-normal, #dcddde);
    font-weight: 600;
}

.doc-editor-actions[b-fougx0sqqa] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.doc-editor-err[b-fougx0sqqa] {
    font-size: 0.8rem;
    color: #f23f42;
    max-width: 240px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.doc-editor-btn-cancel[b-fougx0sqqa] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 12px;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 5px;
    color: var(--dc-text-muted, #a3a6aa);
    font-size: 0.82rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
}
.doc-editor-btn-cancel:hover:not(:disabled)[b-fougx0sqqa] {
    background: var(--dc-bg-modifier-hover);
    color: var(--dc-text-normal, #dcddde);
}
.doc-editor-btn-cancel:disabled[b-fougx0sqqa] { opacity: 0.45; cursor: not-allowed; }

.doc-editor-btn-save[b-fougx0sqqa] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 14px;
    background: var(--dc-brand, #5865f2);
    border: none;
    border-radius: 5px;
    color: #fff;
    font-size: 0.82rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.12s, opacity 0.12s;
}
.doc-editor-btn-save:hover:not(:disabled)[b-fougx0sqqa] { background: var(--dc-brand-hover, #4752c4); }
.doc-editor-btn-save:disabled[b-fougx0sqqa],
.doc-editor-btn-save.working[b-fougx0sqqa] { opacity: 0.55; cursor: not-allowed; }

/* Title input */
.doc-editor-title-input[b-fougx0sqqa] {
    width: 100%;
    box-sizing: border-box;
    padding: 20px 48px 12px;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    outline: none;
    color: #f2f3f5;
    font-size: 1.7rem;
    font-weight: 800;
    font-family: inherit;
    flex-shrink: 0;
}
.doc-editor-title-input[b-fougx0sqqa]::placeholder { color: rgba(255,255,255,0.2); }

/* Markdown textarea */
.doc-editor-textarea[b-fougx0sqqa] {
    flex: 1;
    min-height: 0;
    width: 100%;
    box-sizing: border-box;
    padding: 20px 48px;
    background: transparent;
    border: none;
    outline: none;
    resize: none;
    color: #c8cdd4;
    font-size: 0.92rem;
    font-family: 'JetBrains Mono', 'Consolas', 'Menlo', monospace;
    line-height: 1.7;
    caret-color: var(--dc-brand, #5865f2);
}
.doc-editor-textarea[b-fougx0sqqa]::placeholder { color: rgba(255,255,255,0.18); }
/* /Components/Shared/EmojiPicker.razor.rz.scp.css */
.emoji-picker[b-hyclwyf648] {
    display: none;
    position: absolute;
    bottom: 100%;
    right: 0;
    width: 352px;
    max-height: 380px;
    background-color: var(--dc-bg-secondary);
    border: 1px solid rgba(0,0,0,0.3);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
    z-index: 100;
    flex-direction: column;
    overflow: hidden;
    margin-bottom: 8px;
}

.emoji-picker.visible[b-hyclwyf648] {
    display: flex;
}

.emoji-search-box[b-hyclwyf648] {
    padding: 8px;
    flex-shrink: 0;
}

.emoji-search[b-hyclwyf648] {
    width: 100%;
    background-color: var(--dc-input-bg);
    border: none;
    border-radius: 4px;
    padding: 6px 10px;
    font-size: 14px;
    color: var(--dc-text-normal);
    outline: none;
}

.emoji-search[b-hyclwyf648]::placeholder {
    color: var(--dc-text-muted);
}

.emoji-search:focus[b-hyclwyf648] {
    box-shadow: 0 0 0 2px var(--dc-brand);
}

.emoji-categories[b-hyclwyf648] {
    display: flex;
    padding: 0 8px;
    gap: 2px;
    border-bottom: 1px solid var(--dc-separator);
    flex-shrink: 0;
}

.emoji-cat-btn[b-hyclwyf648] {
    background: none;
    border: none;
    font-size: 18px;
    padding: 6px 8px;
    cursor: pointer;
    border-radius: 4px;
    opacity: 0.5;
    transition: opacity 0.15s, background-color 0.15s;
    border-bottom: 2px solid transparent;
}

.emoji-cat-btn:hover[b-hyclwyf648] {
    opacity: 1;
    background-color: var(--dc-bg-modifier-hover);
}

.emoji-cat-btn.active[b-hyclwyf648] {
    opacity: 1;
    border-bottom-color: var(--dc-brand);
}

.emoji-grid[b-hyclwyf648] {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 2px;
    padding: 8px;
    overflow-y: auto;
    flex: 1;
    max-height: 280px;
}

.emoji-btn[b-hyclwyf648] {
    background: none;
    border: none;
    font-size: 22px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 4px;
    transition: background-color 0.1s, transform 0.1s;
}

.emoji-btn:hover[b-hyclwyf648] {
    background-color: var(--dc-bg-modifier-hover);
    transform: scale(1.15);
}

.emoji-no-results[b-hyclwyf648] {
    grid-column: 1 / -1;
    text-align: center;
    color: var(--dc-text-muted);
    padding: 20px;
    font-size: 14px;
}
/* /Components/Shared/MasterBoard.razor.rz.scp.css */
/* ── Root ──────────────────────────────────────────────────────────────── */
.mb-root[b-5tuiyl4yu3] {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}

/* ── Sprint tab bar ────────────────────────────────────────────────────── */
.mb-sprint-bar[b-5tuiyl4yu3] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px 0;
    border-bottom: 1px solid var(--dc-bg-tertiary);
    flex-shrink: 0;
    overflow-x: auto;
}

.mb-sprint-tabs[b-5tuiyl4yu3] {
    display: flex;
    gap: 2px;
    flex: 1;
    overflow-x: auto;
}
.mb-sprint-tabs[b-5tuiyl4yu3]::-webkit-scrollbar { height: 0; }

.mb-sprint-tab[b-5tuiyl4yu3] {
    display: flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: #8a8f9b;
    padding: 8px 12px;
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.15s;
    margin-bottom: -1px;
}
.mb-sprint-tab:hover[b-5tuiyl4yu3] { color: #dcddde; }
.mb-sprint-tab.active[b-5tuiyl4yu3] { color: #fff; border-bottom-color: var(--dc-brand); }

.mb-sprint-status-dot[b-5tuiyl4yu3] {
    width: 7px; height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}
.status-planning[b-5tuiyl4yu3] { background: #72767d; }
.status-active[b-5tuiyl4yu3]   { background: #23a55a; }
.status-completed[b-5tuiyl4yu3]{ background: #5865f2; }

.mb-sprint-tab-edit[b-5tuiyl4yu3] {
    background: none;
    border: none;
    color: #6b7280;
    cursor: pointer;
    padding: 2px 3px;
    border-radius: 3px;
    font-size: 11px;
    opacity: 0;
    transition: opacity 0.15s;
}
.mb-sprint-tab:hover .mb-sprint-tab-edit[b-5tuiyl4yu3] { opacity: 1; }
.mb-sprint-tab-edit:hover[b-5tuiyl4yu3] { color: #dcddde; background: rgba(255,255,255,0.08); }

.mb-new-sprint-btn[b-5tuiyl4yu3] {
    display: flex;
    align-items: center;
    gap: 5px;
    background: none;
    border: 1px solid #3a3c45;
    border-radius: 6px;
    color: #8a8f9b;
    padding: 5px 12px;
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s;
    flex-shrink: 0;
    margin-bottom: 4px;
}
.mb-new-sprint-btn:hover[b-5tuiyl4yu3] { background: var(--dc-bg-tertiary); color: #dcddde; }

.mb-sprint-actions[b-5tuiyl4yu3] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    margin-bottom: 4px;
}

.mb-start-sprint-btn[b-5tuiyl4yu3],
.mb-end-sprint-btn[b-5tuiyl4yu3] {
    display: flex;
    align-items: center;
    gap: 5px;
    border: none;
    border-radius: 6px;
    padding: 5px 12px;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, opacity 0.15s;
    flex-shrink: 0;
}
.mb-start-sprint-btn[b-5tuiyl4yu3] {
    background: #23a55a;
    color: #fff;
}
.mb-start-sprint-btn:hover:not(:disabled)[b-5tuiyl4yu3] { background: #1a8a48; }

.mb-end-sprint-btn[b-5tuiyl4yu3] {
    background: rgba(242,63,66,0.15);
    color: #f23f42;
    border: 1px solid rgba(242,63,66,0.3);
}
.mb-end-sprint-btn:hover:not(:disabled)[b-5tuiyl4yu3] { background: rgba(242,63,66,0.25); }

.mb-start-sprint-btn:disabled[b-5tuiyl4yu3],
.mb-end-sprint-btn:disabled[b-5tuiyl4yu3] { opacity: 0.5; cursor: not-allowed; }

/* ── Filter bar ────────────────────────────────────────────────────────── */
.mb-filter-bar[b-5tuiyl4yu3] {
    display: flex;
    gap: 8px;
    padding: 10px 20px;
    flex-shrink: 0;
    flex-wrap: wrap;
}

.mb-search[b-5tuiyl4yu3] {
    flex: 1;
    min-width: 160px;
    background: var(--dc-input-bg);
    border: 1px solid #3a3c45;
    border-radius: 6px;
    color: #dcddde;
    padding: 6px 12px;
    font-size: 13px;
    outline: none;
}
.mb-search:focus[b-5tuiyl4yu3] { border-color: var(--dc-brand); }
.mb-search[b-5tuiyl4yu3]::placeholder { color: #6b7280; }

.mb-filter-select[b-5tuiyl4yu3] {
    background: var(--dc-input-bg);
    border: 1px solid #3a3c45;
    border-radius: 6px;
    color: #dcddde;
    padding: 6px 10px;
    font-size: 13px;
    outline: none;
    cursor: pointer;
}
.mb-filter-select:focus[b-5tuiyl4yu3] { border-color: var(--dc-brand); }

/* ── All Tasks list ────────────────────────────────────────────────────── */
.mb-list-wrap[b-5tuiyl4yu3] {
    flex: 1;
    overflow-y: auto;
    padding: 0 20px 20px;
}
.mb-list-wrap[b-5tuiyl4yu3]::-webkit-scrollbar { width: 5px; }
.mb-list-wrap[b-5tuiyl4yu3]::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 3px; }

.mb-group[b-5tuiyl4yu3] { margin-bottom: 20px; }

.mb-group-header[b-5tuiyl4yu3] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0 6px;
    color: #dcddde;
    font-size: 13px;
    font-weight: 600;
    border-bottom: 1px solid var(--dc-bg-tertiary);
    margin-bottom: 4px;
}
.mb-group-count[b-5tuiyl4yu3] {
    font-size: 12px;
    color: #6b7280;
    background: var(--dc-bg-tertiary);
    border-radius: 10px;
    padding: 1px 7px;
    font-weight: 400;
}

.mb-card-row[b-5tuiyl4yu3] {
    display: grid;
    grid-template-columns: 1fr 100px 90px 80px 90px 140px;
    align-items: center;
    gap: 8px;
    padding: 7px 10px 7px 16px;
    border-radius: 6px;
    border-left: 3px solid transparent;
    transition: background 0.1s;
    font-size: 13px;
}
.mb-card-row:hover[b-5tuiyl4yu3] { background: rgba(255,255,255,0.04); }

/* Priority border colours */
.priority-left-critical[b-5tuiyl4yu3] { border-left-color: #ed4245; }
.priority-left-high[b-5tuiyl4yu3]     { border-left-color: #faa81a; }
.priority-left-medium[b-5tuiyl4yu3]   { border-left-color: #5865f2; }
.priority-left-low[b-5tuiyl4yu3]      { border-left-color: #72767d; }

.mb-card-title-cell[b-5tuiyl4yu3] {
    display: flex;
    align-items: center;
    gap: 6px;
    overflow: hidden;
}
.mb-card-title[b-5tuiyl4yu3] {
    color: #dcddde;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mb-label-chip[b-5tuiyl4yu3] {
    font-size: 11px;
    padding: 1px 6px;
    border-radius: 10px;
    color: rgba(255,255,255,0.85);
    white-space: nowrap;
    flex-shrink: 0;
}

.mb-status-badge[b-5tuiyl4yu3] {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 10px;
    white-space: nowrap;
    text-align: center;
}
.status-bg-backlog[b-5tuiyl4yu3]    { background: rgba(114,118,125,0.25); color: #b9bbbe; }
.status-bg-inprogress[b-5tuiyl4yu3] { background: rgba(88,101,242,0.25);  color: #8b9cf7; }
.status-bg-review[b-5tuiyl4yu3]     { background: rgba(250,168,26,0.2);   color: #faa81a; }
.status-bg-done[b-5tuiyl4yu3]       { background: rgba(35,165,90,0.2);    color: #23a55a; }

.mb-priority-badge[b-5tuiyl4yu3] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    white-space: nowrap;
}

.mb-assignees[b-5tuiyl4yu3] { display: flex; gap: 3px; }
.mb-mini-avatar[b-5tuiyl4yu3] {
    width: 22px; height: 22px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 600; color: #fff;
    flex-shrink: 0;
}

.mb-due[b-5tuiyl4yu3] {
    font-size: 12px;
    color: #8a8f9b;
    display: flex;
    align-items: center;
    gap: 4px;
}
.mb-due.overdue[b-5tuiyl4yu3] { color: #ed4245; }
.mb-due.empty[b-5tuiyl4yu3]   { color: #4a4d52; }

.mb-sprint-select[b-5tuiyl4yu3] {
    width: 100%;
    background: var(--dc-bg-secondary);
    border: 1px solid #3a3c45;
    border-radius: 5px;
    color: #dcddde;
    padding: 4px 6px;
    font-size: 12px;
    outline: none;
    cursor: pointer;
}
.mb-sprint-select:focus[b-5tuiyl4yu3] { border-color: var(--dc-brand); }

/* ── Sprint view ───────────────────────────────────────────────────────── */
.mb-sprint-header[b-5tuiyl4yu3] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px 20px;
    border-bottom: 1px solid var(--dc-bg-tertiary);
    flex-shrink: 0;
    flex-wrap: wrap;
}
.mb-sprint-goal[b-5tuiyl4yu3]  { font-size: 13px; color: #b9bbbe; margin: 0; }
.mb-sprint-dates[b-5tuiyl4yu3] { font-size: 12px; color: #6b7280; }

.mb-progress-bar[b-5tuiyl4yu3] {
    flex: 1;
    min-width: 100px;
    max-width: 200px;
    height: 6px;
    background: var(--dc-bg-tertiary);
    border-radius: 3px;
    overflow: hidden;
}
.mb-progress-fill[b-5tuiyl4yu3] { height: 100%; background: #23a55a; border-radius: 3px; transition: width 0.3s; }
.mb-progress-label[b-5tuiyl4yu3] { font-size: 12px; color: #6b7280; white-space: nowrap; }

.mb-sprint-panels[b-5tuiyl4yu3] {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    padding: 16px 20px;
    overflow: hidden;
    min-height: 0;
}

.mb-panel[b-5tuiyl4yu3] {
    display: flex;
    flex-direction: column;
    background: var(--dc-input-bg);
    border-radius: 10px;
    overflow: hidden;
    min-height: 0;
}
.mb-panel-active[b-5tuiyl4yu3] { border: 1px solid #3a3c45; }

.mb-panel-title[b-5tuiyl4yu3] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 600;
    color: #dcddde;
    border-bottom: 1px solid var(--dc-bg-tertiary);
    flex-shrink: 0;
}

.mb-panel-list[b-5tuiyl4yu3] {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.mb-panel-list[b-5tuiyl4yu3]::-webkit-scrollbar { width: 5px; }
.mb-panel-list[b-5tuiyl4yu3]::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 3px; }

.mb-panel-empty[b-5tuiyl4yu3] { font-size: 13px; color: #6b7280; padding: 12px 6px; }

.mb-sprint-card[b-5tuiyl4yu3] {
    background: var(--dc-bg-primary);
    border-radius: 7px;
    padding: 9px 10px;
    border-left: 3px solid transparent;
    transition: background 0.1s;
}
.mb-sprint-card:hover[b-5tuiyl4yu3] { background: var(--dc-bg-secondary); }

.mb-sprint-card-top[b-5tuiyl4yu3] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 6px;
}
.mb-sprint-card-title[b-5tuiyl4yu3] {
    flex: 1;
    font-size: 13px;
    color: #dcddde;
    line-height: 1.4;
}
.mb-sprint-card-title.done[b-5tuiyl4yu3] { text-decoration: line-through; color: #6b7280; }

.mb-sprint-card-meta[b-5tuiyl4yu3] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.mb-board-chip[b-5tuiyl4yu3] {
    font-size: 11px;
    padding: 1px 7px;
    background: rgba(88,101,242,0.15);
    color: #8b9cf7;
    border-radius: 10px;
    white-space: nowrap;
}

.mb-assign-btn[b-5tuiyl4yu3] {
    background: none;
    border: 1px solid #3a3c45;
    border-radius: 5px;
    color: #6b7280;
    cursor: pointer;
    padding: 3px 7px;
    font-size: 12px;
    flex-shrink: 0;
    transition: background 0.1s, color 0.1s;
}
.mb-assign-btn:hover[b-5tuiyl4yu3] { background: var(--dc-brand); border-color: var(--dc-brand); color: #fff; }
.mb-remove-btn:hover[b-5tuiyl4yu3] { background: #ed4245; border-color: #ed4245; }

/* ── Create/Edit Sprint modal ──────────────────────────────────────────── */
.mb-backdrop[b-5tuiyl4yu3] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 400;
}
.mb-sprint-modal[b-5tuiyl4yu3] {
    background: var(--dc-bg-floating);
    border: 1px solid #3a3c45;
    border-radius: 12px;
    padding: 24px;
    width: 420px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-shadow: 0 16px 48px rgba(0,0,0,0.5);
}
.mb-sprint-modal-title[b-5tuiyl4yu3] {
    font-size: 17px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 4px;
}
.mb-field-label[b-5tuiyl4yu3] {
    font-size: 12px;
    font-weight: 600;
    color: #b9bbbe;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: 2px;
    display: block;
}
.mb-optional[b-5tuiyl4yu3] { font-weight: 400; text-transform: none; color: #6b7280; }
.mb-field-input[b-5tuiyl4yu3] {
    width: 100%;
    box-sizing: border-box;
    background: var(--dc-bg-secondary);
    border: 1px solid #3a3c45;
    border-radius: 6px;
    color: #dcddde;
    padding: 8px 12px;
    font-size: 14px;
    outline: none;
    font-family: inherit;
}
.mb-field-input:focus[b-5tuiyl4yu3] { border-color: var(--dc-brand); }
.mb-field-textarea[b-5tuiyl4yu3] { resize: vertical; min-height: 60px; }
.mb-field-row[b-5tuiyl4yu3] { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mb-modal-actions[b-5tuiyl4yu3] {
    display: flex;
    gap: 8px;
    margin-top: 6px;
    flex-wrap: wrap;
}
.mb-btn-primary[b-5tuiyl4yu3] {
    background: var(--dc-brand);
    border: none;
    border-radius: 6px;
    color: #fff;
    padding: 8px 18px;
    font-size: 14px;
    cursor: pointer;
    font-weight: 500;
}
.mb-btn-primary:hover:not(:disabled)[b-5tuiyl4yu3] { background: var(--dc-brand-hover); }
.mb-btn-primary:disabled[b-5tuiyl4yu3] { opacity: 0.5; cursor: not-allowed; }
.mb-btn-danger[b-5tuiyl4yu3] {
    background: #ed4245;
    border: none;
    border-radius: 6px;
    color: #fff;
    padding: 8px 18px;
    font-size: 14px;
    cursor: pointer;
    font-weight: 500;
}
.mb-btn-danger:hover:not(:disabled)[b-5tuiyl4yu3] { background: #f24b4e; }
.mb-btn-ghost[b-5tuiyl4yu3] {
    background: none;
    border: 1px solid #3a3c45;
    border-radius: 6px;
    color: #b9bbbe;
    padding: 8px 18px;
    font-size: 14px;
    cursor: pointer;
}
.mb-btn-ghost:hover[b-5tuiyl4yu3] { background: rgba(255,255,255,0.05); color: #dcddde; }

/* ── Loading / Empty ───────────────────────────────────────────────────── */
.mb-loading[b-5tuiyl4yu3] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
.mb-empty[b-5tuiyl4yu3] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6b7280;
    font-size: 14px;
    padding: 48px;
}

/* ── Sprint board picker ─────────────────────────────────────────────── */
.mb-board-picker[b-5tuiyl4yu3] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
    max-height: 140px;
    overflow-y: auto;
}

.mb-board-picker-empty[b-5tuiyl4yu3] {
    font-size: 12.5px;
    color: #72767d;
    padding: 6px 2px;
}

.mb-board-chip[b-5tuiyl4yu3] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    background: #2b2d36;
    border: 1px solid transparent;
    border-radius: 14px;
    font-size: 12.5px;
    color: #dcddde;
    cursor: pointer;
    transition: background 0.1s, border-color 0.1s;
}
.mb-board-chip:hover[b-5tuiyl4yu3] {
    background: #34363f;
}
.mb-board-chip input[type="checkbox"][b-5tuiyl4yu3] {
    display: none;
}
.mb-board-chip i[b-5tuiyl4yu3] {
    font-size: 13px;
    color: #72767d;
}
.mb-board-chip.selected[b-5tuiyl4yu3] {
    background: rgba(74,158,255,0.15);
    border-color: rgba(74,158,255,0.45);
    color: #b0d4ff;
}
.mb-board-chip.selected i[b-5tuiyl4yu3] {
    color: #4a9eff;
}

/* ── Sprint tab board-count chip ─────────────────────────────────────── */
.mb-sprint-scope-chip[b-5tuiyl4yu3] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    margin-left: 4px;
    background: rgba(74,158,255,0.18);
    color: #b0d4ff;
    font-size: 10.5px;
    font-weight: 700;
    border-radius: 9px;
}
/* /Components/Shared/MyTasksPanel.razor.rz.scp.css */
.mt-root[b-ugbw9g8dqq] {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ── Loading ───────────────────────────────────────────────────────────── */
.mt-loading[b-ugbw9g8dqq] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mt-spinner[b-ugbw9g8dqq] {
    width: 24px;
    height: 24px;
    border: 2px solid rgba(255,255,255,0.1);
    border-top-color: #5865f2;
    border-radius: 50%;
    animation: mt-spin-b-ugbw9g8dqq 0.7s linear infinite;
    display: inline-block;
}

@keyframes mt-spin-b-ugbw9g8dqq { to { transform: rotate(360deg); } }

/* ── Toolbar ───────────────────────────────────────────────────────────── */
.mt-toolbar[b-ugbw9g8dqq] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 20px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    flex-shrink: 0;
    flex-wrap: wrap;
}

.mt-filter-group[b-ugbw9g8dqq] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.mt-filter-btn[b-ugbw9g8dqq] {
    background: none;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 20px;
    color: #72767d;
    cursor: pointer;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 4px 12px;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}

.mt-filter-btn:hover[b-ugbw9g8dqq] { background: #2d2f3a; color: #dcddde; }
.mt-filter-btn.active[b-ugbw9g8dqq] {
    background: #2d2f3a;
    border-color: rgba(255,255,255,0.15);
    color: #fff;
}

.mt-priority-filter[b-ugbw9g8dqq] {
    background: none;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 6px;
    color: #72767d;
    cursor: pointer;
    font-size: 0.85rem;
    padding: 4px 8px;
    transition: background 0.12s, color 0.12s;
    line-height: 1;
}

.mt-priority-filter:hover[b-ugbw9g8dqq] { background: #2d2f3a; color: #dcddde; }
.mt-priority-filter.active[b-ugbw9g8dqq] { background: #2d2f3a; border-color: rgba(255,255,255,0.15); }

/* Priority text colours */
.priority-text-critical[b-ugbw9g8dqq] { color: #ed4245; }
.priority-text-high[b-ugbw9g8dqq]     { color: #faa81a; }
.priority-text-medium[b-ugbw9g8dqq]   { color: #5865f2; }
.priority-text-low[b-ugbw9g8dqq]      { color: #23a55a; }

/* ── Empty ─────────────────────────────────────────────────────────────── */
.mt-empty[b-ugbw9g8dqq] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #4e525a;
    padding: 40px;
}

.mt-empty-icon[b-ugbw9g8dqq] {
    font-size: 3rem;
    color: #2d2f3a;
}

.mt-empty p[b-ugbw9g8dqq] {
    font-size: 0.9rem;
    margin: 0;
    text-align: center;
}

/* ── List ──────────────────────────────────────────────────────────────── */
.mt-list[b-ugbw9g8dqq] {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.mt-list[b-ugbw9g8dqq]::-webkit-scrollbar { width: 5px; }
.mt-list[b-ugbw9g8dqq]::-webkit-scrollbar-track { background: transparent; }
.mt-list[b-ugbw9g8dqq]::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 3px; }

/* ── Group ─────────────────────────────────────────────────────────────── */
.mt-group[b-ugbw9g8dqq] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.mt-group-header[b-ugbw9g8dqq] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: #72767d;
    padding: 0 2px 4px 2px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    margin-bottom: 4px;
}

.mt-group-count[b-ugbw9g8dqq] {
    background: #2d2f3a;
    color: #72767d;
    font-size: 0.7rem;
    padding: 1px 6px;
    border-radius: 10px;
    font-weight: 600;
}

/* ── Card ──────────────────────────────────────────────────────────────── */
.mt-card[b-ugbw9g8dqq] {
    display: flex;
    background: #2b2d36;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.05);
    cursor: pointer;
    overflow: hidden;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.mt-card:hover[b-ugbw9g8dqq] {
    border-color: rgba(255,255,255,0.12);
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}

.mt-card-stripe[b-ugbw9g8dqq] {
    width: 3px;
    flex-shrink: 0;
}

.priority-stripe-critical[b-ugbw9g8dqq] { background: #ed4245; }
.priority-stripe-high[b-ugbw9g8dqq]     { background: #faa81a; }
.priority-stripe-medium[b-ugbw9g8dqq]   { background: #5865f2; }
.priority-stripe-low[b-ugbw9g8dqq]      { background: #23a55a; }

.mt-card-body[b-ugbw9g8dqq] {
    flex: 1;
    padding: 10px 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.mt-card-top[b-ugbw9g8dqq] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.mt-card-title[b-ugbw9g8dqq] {
    font-size: 0.875rem;
    font-weight: 500;
    color: #dcddde;
    line-height: 1.35;
    flex: 1;
    min-width: 0;
}

.mt-status-badge[b-ugbw9g8dqq] {
    font-size: 0.7rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 10px;
    white-space: nowrap;
    flex-shrink: 0;
}

.mt-card-meta[b-ugbw9g8dqq] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.mt-card-desc[b-ugbw9g8dqq] {
    font-size: 0.78rem;
    color: #4e525a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 280px;
}

.mt-label[b-ugbw9g8dqq] {
    font-size: 0.68rem;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 10px;
    color: rgba(255,255,255,0.8);
}

.mt-card-footer[b-ugbw9g8dqq] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.mt-priority[b-ugbw9g8dqq] {
    font-size: 0.72rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 4px;
}

.mt-card-date[b-ugbw9g8dqq] {
    font-size: 0.72rem;
    color: #4e525a;
}

/* ── Board tag in modal ────────────────────────────────────────────────── */
.mt-modal-board-tag[b-ugbw9g8dqq] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #72767d;
    margin-bottom: 12px;
}

/* ── Card detail modal ─────────────────────────────────────────────────── */
.pb-modal-backdrop[b-ugbw9g8dqq] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.pb-modal[b-ugbw9g8dqq] {
    background: #1e1f26;
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 12px;
    width: 100%;
    max-width: 760px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 24px 64px rgba(0,0,0,0.6);
    overflow: hidden;
}

.pb-modal-head[b-ugbw9g8dqq] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 20px 20px 0 20px;
    flex-shrink: 0;
}

.pb-modal-title-wrap[b-ugbw9g8dqq] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
}

.pb-modal-title[b-ugbw9g8dqq] {
    font-size: 1.1rem;
    font-weight: 600;
    color: #fff;
    margin: 0;
    cursor: text;
    display: flex;
    align-items: center;
    gap: 8px;
}

.pb-title-edit-icon[b-ugbw9g8dqq] {
    font-size: 0.75rem;
    color: #4e525a;
    opacity: 0;
    transition: opacity 0.15s;
}

.pb-modal-title:hover .pb-title-edit-icon[b-ugbw9g8dqq] { opacity: 1; }

.pb-modal-title-input[b-ugbw9g8dqq] {
    font-size: 1.1rem;
    font-weight: 600;
    color: #fff;
    background: #2d2f3a;
    border: 1px solid #5865f2;
    border-radius: 6px;
    padding: 4px 10px;
    outline: none;
    flex: 1;
    font-family: inherit;
}

.pb-modal-col-badge[b-ugbw9g8dqq] {
    font-size: 0.72rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 10px;
    color: #fff;
    white-space: nowrap;
    flex-shrink: 0;
    opacity: 0.85;
}

.pb-modal-close[b-ugbw9g8dqq] {
    background: none;
    border: none;
    color: #72767d;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 6px;
    font-size: 1rem;
    flex-shrink: 0;
    transition: background 0.1s, color 0.1s;
}

.pb-modal-close:hover[b-ugbw9g8dqq] { background: #2d2f3a; color: #dcddde; }

.pb-modal-body[b-ugbw9g8dqq] {
    display: flex;
    gap: 24px;
    padding: 20px;
    overflow-y: auto;
    flex: 1;
}

.pb-modal-body[b-ugbw9g8dqq]::-webkit-scrollbar { width: 5px; }
.pb-modal-body[b-ugbw9g8dqq]::-webkit-scrollbar-track { background: transparent; }
.pb-modal-body[b-ugbw9g8dqq]::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 3px; }

.pb-modal-main[b-ugbw9g8dqq] {
    flex: 1;
    min-width: 0;
}

.pb-modal-sidebar[b-ugbw9g8dqq] {
    width: 200px;
    min-width: 200px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pb-modal-section[b-ugbw9g8dqq] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.pb-modal-section:last-of-type[b-ugbw9g8dqq] { border-bottom: none; }

.pb-modal-label[b-ugbw9g8dqq] {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: #72767d;
    display: flex;
    align-items: center;
    gap: 6px;
}

.pb-modal-desc[b-ugbw9g8dqq] {
    background: #2b2d36;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 6px;
    color: #dcddde;
    font-size: 0.875rem;
    padding: 10px 12px;
    resize: vertical;
    outline: none;
    width: 100%;
    font-family: inherit;
    line-height: 1.5;
    transition: border-color 0.15s;
}

.pb-modal-desc:focus[b-ugbw9g8dqq] { border-color: #5865f2; }
.pb-modal-desc[b-ugbw9g8dqq]::placeholder { color: #4e525a; }

.pb-modal-meta-val[b-ugbw9g8dqq] {
    font-size: 0.82rem;
    color: #72767d;
}

/* Priority picker */
.pb-priority-picker[b-ugbw9g8dqq] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.pb-priority-opt[b-ugbw9g8dqq] {
    background: none;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 5px;
    color: #b9bbbe;
    cursor: pointer;
    padding: 5px 10px;
    font-size: 0.78rem;
    font-weight: 600;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: background 0.1s, border-color 0.1s;
}

.pb-priority-opt:hover[b-ugbw9g8dqq] { background: #2d2f3a; border-color: rgba(255,255,255,0.1); }

.pb-priority-opt.selected.priority-bg-critical[b-ugbw9g8dqq] { background: rgba(237,66,69,0.15); border-color: #ed4245; color: #ed4245; }
.pb-priority-opt.selected.priority-bg-high[b-ugbw9g8dqq]     { background: rgba(250,168,26,0.15); border-color: #faa81a; color: #faa81a; }
.pb-priority-opt.selected.priority-bg-medium[b-ugbw9g8dqq]   { background: rgba(88,101,242,0.15); border-color: #5865f2; color: #5865f2; }
.pb-priority-opt.selected.priority-bg-low[b-ugbw9g8dqq]      { background: rgba(35,165,90,0.15); border-color: #23a55a; color: #23a55a; }

/* Status picker */
.pb-status-picker[b-ugbw9g8dqq] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.pb-col-dot[b-ugbw9g8dqq] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.pb-status-opt[b-ugbw9g8dqq] {
    background: none;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 5px;
    color: #b9bbbe;
    cursor: pointer;
    padding: 5px 10px;
    font-size: 0.78rem;
    font-weight: 500;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: background 0.1s, border-color 0.1s;
}

.pb-status-opt:hover[b-ugbw9g8dqq] { background: #2d2f3a; border-color: rgba(255,255,255,0.1); }
.pb-status-opt.selected[b-ugbw9g8dqq] { background: #2d2f3a; border-color: rgba(255,255,255,0.12); color: #fff; }

/* Chips (assignees / labels) */
.pb-chips[b-ugbw9g8dqq] {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.pb-chip[b-ugbw9g8dqq] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #2d2f3a;
    border-radius: 5px;
    padding: 3px 6px 3px 4px;
    font-size: 0.75rem;
    color: #dcddde;
}

.pb-chip-label[b-ugbw9g8dqq] {
    color: rgba(255,255,255,0.85);
    font-weight: 500;
}

.pb-chip-avatar[b-ugbw9g8dqq] {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #5865f2;
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pb-chip-remove[b-ugbw9g8dqq] {
    background: none;
    border: none;
    color: #72767d;
    cursor: pointer;
    padding: 0 1px;
    font-size: 0.65rem;
    line-height: 1;
    display: flex;
    align-items: center;
    border-radius: 3px;
    transition: color 0.1s;
}

.pb-chip-remove:hover[b-ugbw9g8dqq] { color: #ed4245; }

.pb-chip-input[b-ugbw9g8dqq] {
    background: #2b2d36;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 5px;
    color: #dcddde;
    font-size: 0.78rem;
    padding: 5px 8px;
    outline: none;
    width: 100%;
    font-family: inherit;
    transition: border-color 0.15s;
}

.pb-chip-input:focus[b-ugbw9g8dqq] { border-color: #5865f2; }
.pb-chip-input[b-ugbw9g8dqq]::placeholder { color: #4e525a; }

/* Assign me */
.pb-assign-me-btn[b-ugbw9g8dqq] {
    background: none;
    border: 1px dashed rgba(88,101,242,0.4);
    border-radius: 5px;
    color: #5865f2;
    cursor: pointer;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 4px 10px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: background 0.1s, border-color 0.1s;
}

.pb-assign-me-btn:hover[b-ugbw9g8dqq] {
    background: rgba(88,101,242,0.1);
    border-color: #5865f2;
}

/* Save */
.pb-save-btn[b-ugbw9g8dqq] {
    background: #5865f2;
    border: none;
    border-radius: 6px;
    color: #fff;
    cursor: pointer;
    padding: 7px 12px;
    font-size: 0.78rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    margin-top: 4px;
    transition: background 0.15s, opacity 0.15s;
}

.pb-save-btn:hover:not(:disabled)[b-ugbw9g8dqq] { background: #4752c4; }
.pb-save-btn:disabled[b-ugbw9g8dqq] { opacity: 0.5; cursor: not-allowed; }

/* Member select */
.pb-member-select[b-ugbw9g8dqq] {
    appearance: none;
    cursor: pointer;
}

.pb-member-select option[b-ugbw9g8dqq] { background: #1e1f26; }

/* Spinner */
.pb-spinner[b-ugbw9g8dqq] {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255,255,255,0.2);
    border-top-color: #fff;
    border-radius: 50%;
    animation: pb-spin-b-ugbw9g8dqq 0.7s linear infinite;
    display: inline-block;
    flex-shrink: 0;
}

@keyframes pb-spin-b-ugbw9g8dqq {
    to { transform: rotate(360deg); }
}
/* /Components/Shared/ProfileSettingsModal.razor.rz.scp.css */
/* ── Backdrop ──────────────────────────────── */
.psm-backdrop[b-x74ik7t2gu] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    animation: psm-fade-in-b-x74ik7t2gu 0.15s ease;
}

@keyframes psm-fade-in-b-x74ik7t2gu {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ── Modal card ────────────────────────────── */
.psm-modal[b-x74ik7t2gu] {
    width: 460px;
    background: var(--dc-bg-primary);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 16px 64px rgba(0,0,0,0.7);
    animation: psm-slide-up-b-x74ik7t2gu 0.2s ease;
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(80,150,255,0.08);
}

@keyframes psm-slide-up-b-x74ik7t2gu {
    from { transform: translateY(20px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}

/* ── Header ────────────────────────────────── */
.psm-header[b-x74ik7t2gu] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 20px 16px;
    font-size: 17px;
    font-weight: 700;
    color: #e6edf6;
}

.psm-close-btn[b-x74ik7t2gu] {
    background: none;
    color: #5a7394;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    transition: color 0.15s, background 0.15s;
    cursor: pointer;
}

.psm-close-btn:hover[b-x74ik7t2gu] {
    color: #e6edf6;
    background: rgba(100,170,255,0.08);
}

/* ── Banner + avatar ───────────────────────── */
.psm-banner[b-x74ik7t2gu] {
    height: 100px;
    position: relative;
    flex-shrink: 0;
}

.psm-avatar-wrap[b-x74ik7t2gu] {
    position: absolute;
    bottom: -40px;
    left: 20px;
    display: flex;
    align-items: flex-end;
    gap: 8px;
}

.psm-avatar-container[b-x74ik7t2gu] {
    position: relative;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    cursor: pointer;
    border: 4px solid var(--dc-bg-primary);
    overflow: hidden;
    flex-shrink: 0;
}

.psm-avatar-container[b-x74ik7t2gu]  .ua-wrap,
.psm-avatar-container[b-x74ik7t2gu]  .ua-img,
.psm-avatar-container[b-x74ik7t2gu]  .ua-letter {
    width: 100%;
    height: 100%;
    border-radius: 0;
}

.psm-avatar-overlay[b-x74ik7t2gu] {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.55);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    opacity: 0;
    transition: opacity 0.15s;
    letter-spacing: 0.3px;
}

.psm-avatar-overlay i[b-x74ik7t2gu] { font-size: 22px; }

.psm-avatar-container:hover .psm-avatar-overlay[b-x74ik7t2gu] {
    opacity: 1;
}

.psm-remove-avatar[b-x74ik7t2gu] {
    background: #f23f42;
    color: #fff;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin-bottom: 4px;
    transition: background 0.15s;
    flex-shrink: 0;
    position: absolute;
    bottom: -36px;
    left: 64px;
}

.psm-remove-avatar:hover[b-x74ik7t2gu] { background: #c0302f; }

/* ── Body ──────────────────────────────────── */
.psm-body[b-x74ik7t2gu] {
    padding: 56px 20px 12px;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.psm-section[b-x74ik7t2gu] {
    padding: 12px 0;
}

.psm-section-label[b-x74ik7t2gu] {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #5a7394;
    margin-bottom: 10px;
}

.psm-divider[b-x74ik7t2gu] {
    height: 1px;
    background: rgba(80,150,255,0.08);
    margin: 4px 0;
}

.psm-username-row[b-x74ik7t2gu] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.psm-username[b-x74ik7t2gu] {
    font-size: 20px;
    font-weight: 700;
    color: #e6edf6;
}

/* ── Error ─────────────────────────────────── */
.psm-error[b-x74ik7t2gu] {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(242,63,66,0.12);
    border: 1px solid rgba(242,63,66,0.3);
    border-radius: 8px;
    color: #f23f42;
    font-size: 13px;
    padding: 10px 12px;
    margin-bottom: 4px;
}

/* ── Status grid ───────────────────────────── */
.psm-status-grid[b-x74ik7t2gu] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.psm-status-btn[b-x74ik7t2gu] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 8px;
    background: var(--dc-bg-secondary);
    border: 1.5px solid transparent;
    color: #8da2ba;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    text-align: left;
    position: relative;
}

.psm-status-btn:hover[b-x74ik7t2gu] {
    background: #121d2e;
    color: #c9d4e2;
}

.psm-status-btn.selected[b-x74ik7t2gu] {
    border-color: var(--dc-brand);
    background: var(--dc-bg-modifier-selected);
    color: #e6edf6;
}

.psm-status-dot[b-x74ik7t2gu] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.psm-online[b-x74ik7t2gu]  { background: #23a55a; }
.psm-idle[b-x74ik7t2gu]    { background: #f0b232; }
.psm-dnd[b-x74ik7t2gu]     { background: #f23f42; }
.psm-offline[b-x74ik7t2gu] { background: #5a7394; }

.psm-check[b-x74ik7t2gu] {
    margin-left: auto;
    color: var(--dc-brand);
    font-size: 14px;
}

/* ── Custom status ─────────────────────────── */
.psm-custom-status-wrap[b-x74ik7t2gu] {
    position: relative;
    display: flex;
    align-items: center;
}

.psm-cs-icon[b-x74ik7t2gu] {
    position: absolute;
    left: 12px;
    color: #3a5570;
    font-size: 18px;
    pointer-events: none;
    transition: color 0.15s;
}

.psm-custom-status-wrap:focus-within .psm-cs-icon[b-x74ik7t2gu] {
    color: var(--dc-brand);
}

.psm-custom-status-input[b-x74ik7t2gu] {
    width: 100%;
    background: var(--dc-input-bg);
    border: 1.5px solid var(--dc-input-bg);
    border-radius: 8px;
    color: #c9d4e2;
    font-size: 15px;
    padding: 11px 40px 11px 42px;
    transition: border-color 0.15s;
}

.psm-custom-status-input:focus[b-x74ik7t2gu] {
    border-color: var(--dc-brand);
    outline: none;
}

.psm-bio-input[b-x74ik7t2gu] {
    width: 100%;
    background: var(--dc-input-bg);
    border: 1.5px solid var(--dc-input-bg);
    border-radius: 8px;
    color: #c9d4e2;
    font-size: 14px;
    padding: 11px 12px;
    transition: border-color 0.15s;
    min-height: 100px;
    resize: none;
    font-family: inherit;
}

.psm-bio-input:focus[b-x74ik7t2gu] {
    border-color: var(--dc-brand);
    outline: none;
}

.psm-custom-status-input[b-x74ik7t2gu]::placeholder,
.psm-bio-input[b-x74ik7t2gu]::placeholder { color: #3a5570; }

.psm-cs-clear[b-x74ik7t2gu] {
    position: absolute;
    right: 10px;
    background: none;
    color: #3a5570;
    font-size: 15px;
    display: flex;
    align-items: center;
    padding: 4px;
    border-radius: 4px;
    cursor: pointer;
    transition: color 0.15s;
}

.psm-cs-clear:hover[b-x74ik7t2gu] { color: #5a7394; }

.psm-char-count[b-x74ik7t2gu] {
    font-size: 11px;
    color: #3a5570;
    text-align: right;
    margin-top: 4px;
}

/* ── Footer ────────────────────────────────── */
.psm-footer[b-x74ik7t2gu] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 20px;
    border-top: 1px solid rgba(80,150,255,0.08);
}

.psm-btn-cancel[b-x74ik7t2gu] {
    padding: 10px 20px;
    border-radius: 8px;
    background: none;
    color: #8da2ba;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: color 0.15s;
}

.psm-btn-cancel:hover[b-x74ik7t2gu] { color: #e6edf6; }

.psm-btn-save[b-x74ik7t2gu] {
    padding: 10px 24px;
    border-radius: 8px;
    background: var(--dc-brand);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: background 0.15s, box-shadow 0.15s;
}

.psm-btn-save:hover[b-x74ik7t2gu] {
    background: var(--dc-brand-hover);
    box-shadow: 0 4px 12px rgba(74,158,255,0.35);
}

.psm-btn-save.saving[b-x74ik7t2gu] {
    opacity: 0.8;
    cursor: not-allowed;
}

/* ── Spinner ───────────────────────────────── */
.psm-spinner[b-x74ik7t2gu] {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: psm-spin-b-x74ik7t2gu 0.7s linear infinite;
    flex-shrink: 0;
}

@keyframes psm-spin-b-x74ik7t2gu { to { transform: rotate(360deg); } }
/* /Components/Shared/ProjectBoard.razor.rz.scp.css */
/* ── Root ──────────────────────────────────────────────────────────────── */
.pb-root[b-zesrgf8kga] {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* ── Active sprint banner ───────────────────────────────────────────────── */
.pb-sprint-banner[b-zesrgf8kga] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 16px;
    background: rgba(35,165,90,0.08);
    border-bottom: 1px solid rgba(35,165,90,0.18);
    font-size: 13px;
    flex-shrink: 0;
}

.pb-sprint-banner-dot[b-zesrgf8kga] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #23a55a;
    flex-shrink: 0;
    animation: pb-sprint-pulse-b-zesrgf8kga 2s ease-in-out infinite;
}
@keyframes pb-sprint-pulse-b-zesrgf8kga {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.4; }
}

.pb-sprint-banner-name[b-zesrgf8kga] {
    font-weight: 700;
    color: #2ecb6f;
}

.pb-sprint-banner-sep[b-zesrgf8kga] { color: rgba(255,255,255,0.2); }

.pb-sprint-banner-goal[b-zesrgf8kga] {
    color: #8da2ba;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pb-sprint-banner-date[b-zesrgf8kga] {
    font-size: 12px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    background: rgba(255,255,255,0.06);
    color: #8da2ba;
    flex-shrink: 0;
}
.pb-sprint-banner-date.urgent[b-zesrgf8kga]  { background: rgba(250,168,26,0.15); color: #faa81a; }
.pb-sprint-banner-date.overdue[b-zesrgf8kga] { background: rgba(242,63,66,0.15);  color: #f23f42; }

/* Sprint settings gear */
.pb-sprint-settings-wrap[b-zesrgf8kga] {
    position: relative;
    margin-left: auto;
    flex-shrink: 0;
}

.pb-sprint-settings-btn[b-zesrgf8kga] {
    background: none;
    border: none;
    color: #8da2ba;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 15px;
    transition: color 0.15s, background 0.15s;
}
.pb-sprint-settings-btn:hover[b-zesrgf8kga] {
    color: #fff;
    background: rgba(255,255,255,0.08);
}

.pb-sprint-settings-popup[b-zesrgf8kga] {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 120;
    width: 280px;
    background: #1e2124;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.5);
    padding: 12px;
}

.pb-sprint-settings-header[b-zesrgf8kga] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 700;
    font-size: 14px;
    color: #e0e0e0;
    margin-bottom: 4px;
}

.pb-sprint-settings-close[b-zesrgf8kga] {
    background: none;
    border: none;
    color: #72767d;
    cursor: pointer;
    padding: 2px;
    font-size: 13px;
}
.pb-sprint-settings-close:hover[b-zesrgf8kga] { color: #fff; }

.pb-sprint-settings-hint[b-zesrgf8kga] {
    font-size: 12px;
    color: #72767d;
    margin: 0 0 8px;
    line-height: 1.4;
}

.pb-sprint-board-list[b-zesrgf8kga] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 200px;
    overflow-y: auto;
}

.pb-sprint-board-chip[b-zesrgf8kga] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 6px;
    background: rgba(255,255,255,0.04);
    cursor: pointer;
    font-size: 13px;
    color: #8da2ba;
    transition: background 0.15s;
}
.pb-sprint-board-chip:hover[b-zesrgf8kga] { background: rgba(255,255,255,0.08); }
.pb-sprint-board-chip.selected[b-zesrgf8kga] {
    background: rgba(88,101,242,0.15);
    color: #c5cbff;
}
.pb-sprint-board-chip input[type="checkbox"][b-zesrgf8kga] { display: none; }

.pb-sprint-settings-actions[b-zesrgf8kga] {
    margin-top: 10px;
    display: flex;
    justify-content: flex-end;
}

.pb-sprint-settings-save[b-zesrgf8kga] {
    background: #5865f2;
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 6px 16px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}
.pb-sprint-settings-save:hover[b-zesrgf8kga] { background: #4752c4; }
.pb-sprint-settings-save:disabled[b-zesrgf8kga] { opacity: 0.5; cursor: default; }

.pb-columns[b-zesrgf8kga] {
    display: flex;
    gap: 14px;
    padding: 20px;
    overflow-x: auto;
    overflow-y: hidden;
    flex: 1 1 0;
    min-height: 0;
}

.pb-columns[b-zesrgf8kga]::-webkit-scrollbar { height: 6px; }
.pb-columns[b-zesrgf8kga]::-webkit-scrollbar-track { background: transparent; }
.pb-columns[b-zesrgf8kga]::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 3px; }

/* ── Column ────────────────────────────────────────────────────────────── */
.pb-column[b-zesrgf8kga] {
    width: 272px;
    min-width: 272px;
    height: 100%;
    flex-shrink: 0;
    background: #1e1f26;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    border: 2px solid transparent;
    transition: border-color 0.15s;
    overflow: hidden;
}

.pb-column.drag-over[b-zesrgf8kga] {
    border-color: #5865f2;
    background: #22243080;
}

.pb-column-header[b-zesrgf8kga] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 12px 10px 12px;
    flex-shrink: 0;
}

.pb-col-title-row[b-zesrgf8kga] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pb-col-indicator[b-zesrgf8kga] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.pb-col-title[b-zesrgf8kga] {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #b9bbbe;
}

.pb-col-count[b-zesrgf8kga] {
    font-size: 0.75rem;
    font-weight: 600;
    color: #72767d;
    background: #2d2f3a;
    padding: 1px 7px;
    border-radius: 10px;
}

.pb-col-header-btn[b-zesrgf8kga] {
    background: none;
    border: none;
    color: #72767d;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 4px;
    line-height: 1;
    font-size: 0.85rem;
    transition: background 0.1s, color 0.1s;
}

.pb-col-header-btn:hover[b-zesrgf8kga] {
    background: #2d2f3a;
    color: #dcddde;
}

/* ── Cards scroll area ─────────────────────────────────────────────────── */
.pb-cards[b-zesrgf8kga] {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0 8px 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pb-cards[b-zesrgf8kga]::-webkit-scrollbar { width: 4px; }
.pb-cards[b-zesrgf8kga]::-webkit-scrollbar-track { background: transparent; }
.pb-cards[b-zesrgf8kga]::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 2px; }

/* ── Card ──────────────────────────────────────────────────────────────── */
.pb-card[b-zesrgf8kga] {
    background: #2b2d36;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.05);
    transition: border-color 0.15s, box-shadow 0.15s, opacity 0.15s;
    user-select: none;
    flex-shrink: 0;
}

.pb-card:hover[b-zesrgf8kga] {
    border-color: rgba(255,255,255,0.12);
    box-shadow: 0 2px 12px rgba(0,0,0,0.3);
}

.pb-card.dragging[b-zesrgf8kga] {
    opacity: 0.45;
    box-shadow: none;
}

/* Priority stripe */
.pb-card-stripe[b-zesrgf8kga] {
    width: 3px;
    flex-shrink: 0;
}

.priority-stripe-critical[b-zesrgf8kga] { background: #ed4245; }
.priority-stripe-high[b-zesrgf8kga]     { background: #faa81a; }
.priority-stripe-medium[b-zesrgf8kga]   { background: #5865f2; }
.priority-stripe-low[b-zesrgf8kga]      { background: #23a55a; }

.pb-card-body[b-zesrgf8kga] {
    flex: 1;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.pb-card-labels[b-zesrgf8kga] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.pb-card-label-chip[b-zesrgf8kga] {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 10px;
    color: rgba(255,255,255,0.8);
    white-space: nowrap;
}

.pb-label-more[b-zesrgf8kga] {
    background: #2d2f3a !important;
    color: #72767d;
}

.pb-card-title[b-zesrgf8kga] {
    font-size: 0.875rem;
    font-weight: 500;
    color: #dcddde;
    line-height: 1.35;
}

.pb-card-desc[b-zesrgf8kga] {
    font-size: 0.78rem;
    color: #72767d;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pb-card-footer[b-zesrgf8kga] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 2px;
}

.pb-card-priority[b-zesrgf8kga] {
    font-size: 0.72rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 4px;
}

.priority-text-critical[b-zesrgf8kga] { color: #ed4245; }
.priority-text-high[b-zesrgf8kga]     { color: #faa81a; }
.priority-text-medium[b-zesrgf8kga]   { color: #5865f2; }
.priority-text-low[b-zesrgf8kga]      { color: #23a55a; }

.pb-card-avatars[b-zesrgf8kga] {
    display: flex;
    gap: -4px;
}

.pb-mini-avatar[b-zesrgf8kga] {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #5865f2;
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #2b2d36;
    margin-left: -4px;
}

.pb-mini-avatar:first-child[b-zesrgf8kga] { margin-left: 0; }

.pb-mini-overflow[b-zesrgf8kga] {
    background: #2d2f3a;
    color: #72767d;
    font-size: 0.6rem;
}

/* ── Add card form ─────────────────────────────────────────────────────── */
.pb-add-form[b-zesrgf8kga] {
    background: #2b2d36;
    border-radius: 6px;
    border: 1px solid #5865f2;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pb-add-input[b-zesrgf8kga] {
    background: transparent;
    border: none;
    color: #dcddde;
    font-size: 0.875rem;
    resize: none;
    outline: none;
    width: 100%;
    font-family: inherit;
    line-height: 1.4;
}

.pb-add-input[b-zesrgf8kga]::placeholder { color: #4e525a; }

.pb-add-actions[b-zesrgf8kga] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.pb-add-confirm[b-zesrgf8kga] {
    background: #5865f2;
    color: #fff;
    border: none;
    border-radius: 5px;
    padding: 5px 14px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}

.pb-add-confirm:hover:not(:disabled)[b-zesrgf8kga] { background: #4752c4; }
.pb-add-confirm:disabled[b-zesrgf8kga] { opacity: 0.4; cursor: not-allowed; }

.pb-add-cancel[b-zesrgf8kga] {
    background: none;
    border: none;
    color: #72767d;
    cursor: pointer;
    padding: 5px 7px;
    border-radius: 5px;
    font-size: 0.85rem;
    transition: color 0.1s, background 0.1s;
}

.pb-add-cancel:hover[b-zesrgf8kga] { background: #2d2f3a; color: #dcddde; }

/* ── Column footer add button ──────────────────────────────────────────── */
.pb-col-add-footer[b-zesrgf8kga] {
    background: none;
    border: none;
    color: #72767d;
    cursor: pointer;
    padding: 10px 12px;
    font-size: 0.82rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    text-align: left;
    border-radius: 0 0 10px 10px;
    transition: background 0.1s, color 0.1s;
    flex-shrink: 0;
}

.pb-col-add-footer:hover[b-zesrgf8kga] {
    background: #222430;
    color: #dcddde;
}

/* ── Card detail modal ─────────────────────────────────────────────────── */
.pb-modal-backdrop[b-zesrgf8kga] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.pb-modal[b-zesrgf8kga] {
    background: #1e1f26;
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 12px;
    width: 100%;
    max-width: 760px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 24px 64px rgba(0,0,0,0.6);
    overflow: hidden;
}

.pb-modal-head[b-zesrgf8kga] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 20px 20px 0 20px;
    flex-shrink: 0;
}

.pb-modal-title-wrap[b-zesrgf8kga] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
}

.pb-modal-title[b-zesrgf8kga] {
    font-size: 1.1rem;
    font-weight: 600;
    color: #fff;
    margin: 0;
    cursor: text;
    display: flex;
    align-items: center;
    gap: 8px;
}

.pb-title-edit-icon[b-zesrgf8kga] {
    font-size: 0.75rem;
    color: #4e525a;
    opacity: 0;
    transition: opacity 0.15s;
}

.pb-modal-title:hover .pb-title-edit-icon[b-zesrgf8kga] { opacity: 1; }

.pb-modal-title-input[b-zesrgf8kga] {
    font-size: 1.1rem;
    font-weight: 600;
    color: #fff;
    background: #2d2f3a;
    border: 1px solid #5865f2;
    border-radius: 6px;
    padding: 4px 10px;
    outline: none;
    flex: 1;
    font-family: inherit;
}

.pb-modal-col-badge[b-zesrgf8kga] {
    font-size: 0.72rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 10px;
    color: #fff;
    white-space: nowrap;
    flex-shrink: 0;
    opacity: 0.85;
}

.pb-modal-close[b-zesrgf8kga] {
    background: none;
    border: none;
    color: #72767d;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 6px;
    font-size: 1rem;
    flex-shrink: 0;
    transition: background 0.1s, color 0.1s;
}

.pb-modal-close:hover[b-zesrgf8kga] { background: #2d2f3a; color: #dcddde; }

.pb-modal-body[b-zesrgf8kga] {
    display: flex;
    gap: 24px;
    padding: 20px;
    overflow-y: auto;
    flex: 1;
}

.pb-modal-body[b-zesrgf8kga]::-webkit-scrollbar { width: 5px; }
.pb-modal-body[b-zesrgf8kga]::-webkit-scrollbar-track { background: transparent; }
.pb-modal-body[b-zesrgf8kga]::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 3px; }

.pb-modal-main[b-zesrgf8kga] {
    flex: 1;
    min-width: 0;
}

.pb-modal-sidebar[b-zesrgf8kga] {
    width: 200px;
    min-width: 200px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pb-modal-section[b-zesrgf8kga] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.pb-modal-section:last-of-type[b-zesrgf8kga] { border-bottom: none; }

.pb-modal-label[b-zesrgf8kga] {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: #b5b9c0;
    display: flex;
    align-items: center;
    gap: 6px;
}

.pb-modal-label i[b-zesrgf8kga] {
    font-size: 0.95rem;
    color: var(--dc-brand);
    opacity: 0.85;
}

.pb-modal-desc[b-zesrgf8kga] {
    background: #2b2d36;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 6px;
    color: #dcddde;
    font-size: 0.875rem;
    padding: 10px 12px;
    resize: vertical;
    outline: none;
    width: 100%;
    font-family: inherit;
    line-height: 1.5;
    transition: border-color 0.15s;
}

.pb-modal-desc:focus[b-zesrgf8kga] { border-color: #5865f2; }
.pb-modal-desc[b-zesrgf8kga]::placeholder { color: #4e525a; }

.pb-modal-meta-val[b-zesrgf8kga] {
    font-size: 0.82rem;
    color: #72767d;
}

/* Priority picker */
.pb-priority-picker[b-zesrgf8kga] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.pb-priority-opt[b-zesrgf8kga] {
    background: none;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 5px;
    color: #b9bbbe;
    cursor: pointer;
    padding: 5px 10px;
    font-size: 0.78rem;
    font-weight: 600;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: background 0.1s, border-color 0.1s;
}

.pb-priority-opt:hover[b-zesrgf8kga] { background: #2d2f3a; border-color: rgba(255,255,255,0.1); }

.pb-priority-opt.selected.priority-bg-critical[b-zesrgf8kga] { background: rgba(237,66,69,0.15); border-color: #ed4245; color: #ed4245; }
.pb-priority-opt.selected.priority-bg-high[b-zesrgf8kga]     { background: rgba(250,168,26,0.15); border-color: #faa81a; color: #faa81a; }
.pb-priority-opt.selected.priority-bg-medium[b-zesrgf8kga]   { background: rgba(88,101,242,0.15); border-color: #5865f2; color: #5865f2; }
.pb-priority-opt.selected.priority-bg-low[b-zesrgf8kga]      { background: rgba(35,165,90,0.15); border-color: #23a55a; color: #23a55a; }

/* Status picker */
.pb-status-picker[b-zesrgf8kga] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.pb-col-dot[b-zesrgf8kga] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.pb-status-opt[b-zesrgf8kga] {
    background: none;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 5px;
    color: #b9bbbe;
    cursor: pointer;
    padding: 5px 10px;
    font-size: 0.78rem;
    font-weight: 500;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: background 0.1s, border-color 0.1s;
}

.pb-status-opt:hover[b-zesrgf8kga] { background: #2d2f3a; border-color: rgba(255,255,255,0.1); }
.pb-status-opt.selected[b-zesrgf8kga] { background: #2d2f3a; border-color: rgba(255,255,255,0.12); color: #fff; }

/* Chips (assignees / labels) */
.pb-chips[b-zesrgf8kga] {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.pb-chip[b-zesrgf8kga] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #2d2f3a;
    border-radius: 5px;
    padding: 3px 6px 3px 4px;
    font-size: 0.75rem;
    color: #dcddde;
}

.pb-chip-label[b-zesrgf8kga] {
    color: rgba(255,255,255,0.85);
    font-weight: 500;
}

.pb-chip-avatar[b-zesrgf8kga] {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #5865f2;
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pb-chip-remove[b-zesrgf8kga] {
    background: none;
    border: none;
    color: #72767d;
    cursor: pointer;
    padding: 0 1px;
    font-size: 0.65rem;
    line-height: 1;
    display: flex;
    align-items: center;
    border-radius: 3px;
    transition: color 0.1s;
}

.pb-chip-remove:hover[b-zesrgf8kga] { color: #ed4245; }

.pb-chip-input[b-zesrgf8kga] {
    background: #2b2d36;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 5px;
    color: #dcddde;
    font-size: 0.78rem;
    padding: 5px 8px;
    outline: none;
    width: 100%;
    font-family: inherit;
    transition: border-color 0.15s;
}

.pb-chip-input:focus[b-zesrgf8kga] { border-color: #5865f2; }
.pb-chip-input[b-zesrgf8kga]::placeholder { color: #4e525a; }

/* Delete */
.pb-delete-btn[b-zesrgf8kga] {
    background: none;
    border: 1px solid rgba(237,66,69,0.3);
    border-radius: 6px;
    color: #ed4245;
    cursor: pointer;
    padding: 7px 12px;
    font-size: 0.78rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    width: 100%;
    justify-content: center;
    transition: background 0.15s, border-color 0.15s;
}

.pb-delete-btn:hover[b-zesrgf8kga] {
    background: rgba(237,66,69,0.1);
    border-color: #ed4245;
}

/* Save */
.pb-save-btn[b-zesrgf8kga] {
    background: #5865f2;
    border: none;
    border-radius: 6px;
    color: #fff;
    cursor: pointer;
    padding: 7px 12px;
    font-size: 0.78rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    margin-top: 4px;
    transition: background 0.15s, opacity 0.15s;
}

.pb-save-btn:hover:not(:disabled)[b-zesrgf8kga] { background: #4752c4; }
.pb-save-btn:disabled[b-zesrgf8kga] { opacity: 0.5; cursor: not-allowed; }

/* Member select */
.pb-member-select[b-zesrgf8kga] {
    appearance: none;
    cursor: pointer;
}

.pb-member-select option[b-zesrgf8kga] { background: #1e1f26; }

/* Spinner */
.pb-spinner[b-zesrgf8kga] {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255,255,255,0.2);
    border-top-color: #fff;
    border-radius: 50%;
    animation: pb-spin-b-zesrgf8kga 0.7s linear infinite;
    display: inline-block;
    flex-shrink: 0;
}

.pb-spinner-sm[b-zesrgf8kga] {
    width: 12px;
    height: 12px;
}

@keyframes pb-spin-b-zesrgf8kga {
    to { transform: rotate(360deg); }
}

/* Loading state */
.pb-loading[b-zesrgf8kga] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ── Rich text editor ────────────────────────────────────────────────────── */
.pb-editor-section[b-zesrgf8kga] { flex: 1; min-height: 0; }

.pb-editor-wrap[b-zesrgf8kga] {
    position: relative;
    border-radius: 6px;
    overflow: visible;
}

/* Override Quill Snow theme to match dark Haven UI */
[b-zesrgf8kga] .ql-toolbar.ql-snow {
    background: #1e1f26;
    border: 1px solid #3a3c45;
    border-bottom: none;
    border-radius: 6px 6px 0 0;
    padding: 6px 8px;
}

[b-zesrgf8kga] .ql-toolbar.ql-snow .ql-formats { margin-right: 8px; }

[b-zesrgf8kga] .ql-toolbar.ql-snow button,
[b-zesrgf8kga] .ql-toolbar.ql-snow .ql-picker-label {
    color: #b9bbbe;
    padding: 2px 4px;
    border-radius: 3px;
}

[b-zesrgf8kga] .ql-toolbar.ql-snow button:hover,
[b-zesrgf8kga] .ql-toolbar.ql-snow .ql-picker-label:hover,
[b-zesrgf8kga] .ql-toolbar.ql-snow button.ql-active,
[b-zesrgf8kga] .ql-toolbar.ql-snow .ql-picker-label.ql-active {
    color: #fff;
    background: rgba(255,255,255,0.08);
}

[b-zesrgf8kga] .ql-toolbar.ql-snow button svg .ql-stroke,
[b-zesrgf8kga] .ql-toolbar.ql-snow .ql-picker-label svg .ql-stroke { stroke: currentColor; }
[b-zesrgf8kga] .ql-toolbar.ql-snow button svg .ql-fill { fill: currentColor; }

[b-zesrgf8kga] .ql-container.ql-snow {
    background: #1a1b23;
    border: 1px solid #3a3c45;
    border-radius: 0 0 6px 6px;
    font-family: inherit;
    font-size: 14px;
    color: #dcddde;
    min-height: 160px;
}

[b-zesrgf8kga] .ql-editor { min-height: 160px; padding: 10px 12px; line-height: 1.6; }
[b-zesrgf8kga] .ql-editor.ql-blank::before { color: #6b7280; font-style: normal; }

[b-zesrgf8kga] .ql-editor a { color: #7983f5; }
[b-zesrgf8kga] .ql-editor a:hover { text-decoration: underline; }

[b-zesrgf8kga] .ql-editor code,
[b-zesrgf8kga] .ql-editor pre.ql-syntax {
    background: #111218;
    color: #e3e5e8;
    border-radius: 4px;
    font-family: monospace;
}
[b-zesrgf8kga] .ql-editor pre.ql-syntax { padding: 10px 12px; }

[b-zesrgf8kga] .ql-editor blockquote {
    border-left: 3px solid #5865f2;
    padding-left: 12px;
    margin-left: 0;
    color: #b9bbbe;
}

/* Checklist */
[b-zesrgf8kga] .ql-editor li[data-list="checked"] > .ql-ui:before { color: #23a55a; }
[b-zesrgf8kga] .ql-editor li[data-list="unchecked"] > .ql-ui:before { color: #6b7280; }
[b-zesrgf8kga] .ql-editor li[data-list="checked"] { color: #8a8f9b; text-decoration: line-through; }

/* Picker dropdown */
[b-zesrgf8kga] .ql-snow .ql-picker-options {
    background: #2b2d38;
    border: 1px solid #3a3c45;
    border-radius: 6px;
    color: #dcddde;
}
[b-zesrgf8kga] .ql-snow .ql-picker-item:hover { background: rgba(255,255,255,0.08); }

/* Task-link toolbar button */
[b-zesrgf8kga] .ql-task-link svg { width: 18px; height: 18px; }

/* ── Task picker ──────────────────────────────────────────────────────────── */
.pb-task-picker[b-zesrgf8kga] {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    width: 300px;
    background: #2b2d38;
    border: 1px solid #3a3c45;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
    z-index: 200;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.pb-task-search[b-zesrgf8kga] {
    background: #1a1b23;
    border: 1px solid #3a3c45;
    border-radius: 5px;
    color: #dcddde;
    padding: 6px 10px;
    font-size: 13px;
    outline: none;
    width: 100%;
    box-sizing: border-box;
}
.pb-task-search:focus[b-zesrgf8kga] { border-color: #5865f2; }

.pb-task-picker-list[b-zesrgf8kga] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 200px;
    overflow-y: auto;
}

.pb-task-picker-item[b-zesrgf8kga] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 5px;
    background: none;
    border: none;
    color: #dcddde;
    font-size: 13px;
    cursor: pointer;
    text-align: left;
    width: 100%;
}
.pb-task-picker-item:hover[b-zesrgf8kga] { background: rgba(255,255,255,0.07); }

.pb-task-picker-title[b-zesrgf8kga] {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pb-task-picker-empty[b-zesrgf8kga] {
    color: #6b7280;
    font-size: 13px;
    padding: 6px 8px;
}

.pb-task-picker-close[b-zesrgf8kga] {
    position: absolute;
    top: 8px;
    right: 8px;
    background: none;
    border: none;
    color: #6b7280;
    cursor: pointer;
    font-size: 12px;
    padding: 2px 4px;
}
.pb-task-picker-close:hover[b-zesrgf8kga] { color: #dcddde; }

/* ── Estimate field ───────────────────────────────────────────────────────── */
.pb-estimate-input[b-zesrgf8kga] {
    width: 100%;
    box-sizing: border-box;
    background: #1a1b23;
    border: 1px solid #3a3c45;
    border-radius: 5px;
    color: #dcddde;
    padding: 6px 10px;
    font-size: 13px;
    outline: none;
}
.pb-estimate-input:focus[b-zesrgf8kga] { border-color: #5865f2; }
.pb-estimate-input[b-zesrgf8kga]::placeholder { color: #6b7280; }

.pb-card-estimate[b-zesrgf8kga] {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 11px;
    color: #8a8f9b;
}

/* ── View toolbar ─────────────────────────────────────────────────────────── */
.pb-view-toolbar[b-zesrgf8kga] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 20px 0;
    flex-shrink: 0;
}

/* ── Toolbar right cluster ────────────────────────────────────────────────── */

.pb-toolbar-right[b-zesrgf8kga] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
}

/* ── Search ──────────────────────────────────────────────────────────────── */

.pb-search-wrap[b-zesrgf8kga] {
    display: flex;
    align-items: center;
    background: #1e1f26;
    border: 1px solid #2c2f3b;
    border-radius: 6px;
    padding: 0 8px;
    gap: 5px;
    width: 32px;
    overflow: hidden;
    transition: width .2s ease, border-color .15s;
}

.pb-search-wrap.expanded[b-zesrgf8kga] {
    width: 180px;
    border-color: #5865f2;
}

.pb-search-icon[b-zesrgf8kga] {
    font-size: 13px;
    color: #8a8f9b;
    flex-shrink: 0;
    line-height: 30px;
}

.pb-search-input[b-zesrgf8kga] {
    flex: 1;
    background: none;
    border: none;
    outline: none;
    color: #dcddde;
    font-size: 13px;
    padding: 0;
    height: 30px;
    min-width: 0;
}

.pb-search-input[b-zesrgf8kga]::placeholder { color: #4f545c; }

.pb-search-clear[b-zesrgf8kga] {
    background: none;
    border: none;
    color: #8a8f9b;
    padding: 0;
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 12px;
    flex-shrink: 0;
}

.pb-search-clear:hover[b-zesrgf8kga] { color: #dcddde; }

/* ── Filter button ───────────────────────────────────────────────────────── */

.pb-filter-btn[b-zesrgf8kga] {
    display: flex;
    align-items: center;
    gap: 5px;
    height: 32px;
    padding: 0 10px;
    background: #1e1f26;
    border: 1px solid #2c2f3b;
    border-radius: 6px;
    color: #8a8f9b;
    font-size: 13px;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
    position: relative;
}

.pb-filter-btn:hover[b-zesrgf8kga] { color: #dcddde; border-color: #3a3c45; }

.pb-filter-btn.active[b-zesrgf8kga] {
    background: #2d2f3b;
    color: #dcddde;
    border-color: #5865f2;
}

.pb-filter-btn.has-filters[b-zesrgf8kga] { border-color: #5865f2; color: #5865f2; }

.pb-filter-count[b-zesrgf8kga] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    background: #5865f2;
    color: #fff;
    border-radius: 8px;
    font-size: 10px;
    font-weight: 700;
}

.pb-filter-clear-btn[b-zesrgf8kga] {
    display: flex;
    align-items: center;
    gap: 4px;
    height: 32px;
    padding: 0 10px;
    background: none;
    border: 1px solid #3a3c45;
    border-radius: 6px;
    color: #8a8f9b;
    font-size: 12px;
    cursor: pointer;
    transition: background .15s, color .15s;
}

.pb-filter-clear-btn:hover[b-zesrgf8kga] { background: rgba(237,66,69,.12); color: #ed4245; border-color: #ed4245; }

/* ── Filter panel ────────────────────────────────────────────────────────── */

.pb-filter-panel[b-zesrgf8kga] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 24px;
    align-items: flex-start;
    padding: 10px 20px 12px;
    background: #15161c;
    border-bottom: 1px solid #1e2030;
    flex-shrink: 0;
}

.pb-filter-group[b-zesrgf8kga] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.pb-filter-group-header[b-zesrgf8kga] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.pb-filter-group-label[b-zesrgf8kga] {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: #72767d;
    white-space: nowrap;
}

.pb-filter-group-clear[b-zesrgf8kga] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    border: none;
    background: none;
    color: #72767d;
    cursor: pointer;
    font-size: 10px;
    padding: 0;
    border-radius: 3px;
    transition: color .12s, background .12s;
}

.pb-filter-group-clear:hover[b-zesrgf8kga] {
    color: #ed4245;
    background: rgba(237,66,69,.12);
}

.pb-filter-chips[b-zesrgf8kga] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
}

/* ── Filter chips ─────────────────────────────────────────────────────────── */

.pb-filter-chip[b-zesrgf8kga] {
    display: inline-flex;
    align-items: center;
    height: 26px;
    gap: 4px;
    padding: 0 9px;
    border-radius: 20px;
    border: 1px solid #2c2f3b;
    background: #1e1f26;
    color: #8a8f9b;
    font-size: 12px;
    cursor: pointer;
    transition: background .12s, color .12s, border-color .12s;
    white-space: nowrap;
    line-height: 1;
}

.pb-filter-chip:hover[b-zesrgf8kga] {
    background: #2d2f3b;
    color: #dcddde;
    border-color: #3a3c45;
}

.pb-filter-chip.active[b-zesrgf8kga] {
    background: #5865f2;
    border-color: #5865f2;
    color: #fff;
}

/* Priority-coloured active state */
.pb-filter-chip.priority-chip-critical.active[b-zesrgf8kga] { background: #ed4245; border-color: #ed4245; }
.pb-filter-chip.priority-chip-high.active[b-zesrgf8kga]     { background: #faa81a; border-color: #faa81a; color: #111; }
.pb-filter-chip.priority-chip-medium.active[b-zesrgf8kga]   { background: #5865f2; border-color: #5865f2; }
.pb-filter-chip.priority-chip-low.active[b-zesrgf8kga]      { background: #23a55a; border-color: #23a55a; }

/* Member chip — left-padded to accommodate avatar */
.pb-filter-member[b-zesrgf8kga] {
    padding-left: 4px;
    padding-right: 9px;
}

.pb-filter-avatar[b-zesrgf8kga] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    font-size: 10px;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
}

/* Icon-only avatar (Unassigned) */
.pb-filter-avatar-icon[b-zesrgf8kga] {
    background: #3a3c45;
    color: #8a8f9b;
    font-size: 11px;
}

.pb-filter-chip.active .pb-filter-avatar-icon[b-zesrgf8kga] {
    background: rgba(255,255,255,.2);
    color: #fff;
}

/* ✕ inside active chip */
.pb-chip-x[b-zesrgf8kga] {
    font-size: 9px;
    opacity: .75;
    margin-left: 1px;
}

.pb-filter-label-chip.active[b-zesrgf8kga] {
    /* colour injected inline — no override needed */
}

.pb-view-toggle[b-zesrgf8kga] {
    display: flex;
    background: #1e1f26;
    border-radius: 7px;
    padding: 3px;
    gap: 2px;
}

.pb-view-btn[b-zesrgf8kga] {
    background: none;
    border: none;
    color: #8a8f9b;
    padding: 5px 12px;
    border-radius: 5px;
    font-size: 13px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: background 0.15s, color 0.15s;
}
.pb-view-btn:hover[b-zesrgf8kga] { color: #dcddde; }
.pb-view-btn.active[b-zesrgf8kga] { background: #2d2f3b; color: #fff; }

.pb-gantt-modes[b-zesrgf8kga] {
    display: flex;
    gap: 4px;
}

.pb-gantt-mode-btn[b-zesrgf8kga] {
    background: none;
    border: 1px solid #3a3c45;
    border-radius: 5px;
    color: #8a8f9b;
    padding: 4px 10px;
    font-size: 12px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.pb-gantt-mode-btn:hover[b-zesrgf8kga] { background: #2d2f3b; color: #dcddde; }
.pb-gantt-mode-btn.active[b-zesrgf8kga] { background: #5865f2; border-color: #5865f2; color: #fff; }

/* ── Gantt container ─────────────────────────────────────────────────────── */
.pb-gantt-wrap[b-zesrgf8kga] {
    flex: 1;
    overflow: auto;
    padding: 16px 20px;
}

.pb-gantt-container[b-zesrgf8kga] { min-width: 800px; }

.pb-gantt-empty[b-zesrgf8kga] {
    color: #6b7280;
    font-size: 14px;
    text-align: center;
    padding: 48px 0;
}

/* Dark-theme overrides for frappe-gantt */
[b-zesrgf8kga] .gantt .grid-header { fill: #1a1b23; }
[b-zesrgf8kga] .gantt .grid-row { fill: #1a1b23; }
[b-zesrgf8kga] .gantt .grid-row:nth-child(even) { fill: #1e1f26; }
[b-zesrgf8kga] .gantt .row-line { stroke: #2d2f3b; }
[b-zesrgf8kga] .gantt .tick { stroke: #2d2f3b; }
[b-zesrgf8kga] .gantt .today-highlight { fill: rgba(88,101,242,0.1); }
[b-zesrgf8kga] .gantt .lower-text,
[b-zesrgf8kga] .gantt .upper-text { fill: #8a8f9b; font-size: 12px; }
[b-zesrgf8kga] .gantt .bar { fill: #5865f2; }
[b-zesrgf8kga] .gantt .bar-progress { fill: #23a55a; }
[b-zesrgf8kga] .gantt .bar-label { fill: #fff; font-size: 12px; }
[b-zesrgf8kga] .gantt .bar-wrapper:hover .bar { fill: #6b75f5; }
[b-zesrgf8kga] .gantt .handle { fill: #fff; }

/* Priority-coloured bars */
[b-zesrgf8kga] .gantt-priority-critical .bar { fill: #ed4245; }
[b-zesrgf8kga] .gantt-priority-critical .bar-progress { fill: #a12d2f; }
[b-zesrgf8kga] .gantt-priority-high .bar { fill: #faa81a; }
[b-zesrgf8kga] .gantt-priority-high .bar-progress { fill: #b87a10; }
[b-zesrgf8kga] .gantt-priority-low .bar { fill: #72767d; }
[b-zesrgf8kga] .gantt-priority-low .bar-progress { fill: #4a4d52; }

/* Popup */
[b-zesrgf8kga] .gantt-container .popup-wrapper {
    background: #2b2d38;
    border: 1px solid #3a3c45;
    border-radius: 7px;
    padding: 8px 12px;
    color: #dcddde;
    font-size: 13px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.4);
}
[b-zesrgf8kga] .gantt-container .popup-wrapper .pointer { display: none; }

.pb-gantt-popup strong[b-zesrgf8kga] { display: block; margin-bottom: 3px; }
.pb-gantt-popup-dates[b-zesrgf8kga] { font-size: 12px; color: #8a8f9b; }

/* Due date badge on board card */
.pb-card-due[b-zesrgf8kga] {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 11px;
    color: #b5bac1;
}
.pb-card-due i[b-zesrgf8kga] { color: #c9cdd4; }
.pb-card-due.overdue[b-zesrgf8kga]       { color: #ed4245; }
.pb-card-due.overdue i[b-zesrgf8kga]     { color: #ed4245; }

/* ── Reactions (modal) ─────────────────────────────────────────────────── */
.pb-reactions-section[b-zesrgf8kga] { margin-top: 4px; }

.pb-reactions-row[b-zesrgf8kga] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.pb-reaction-chip[b-zesrgf8kga] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 9px;
    background: #2b2d36;
    border: 1px solid transparent;
    border-radius: 12px;
    cursor: pointer;
    font-size: 13px;
    color: #dcddde;
    transition: background 0.1s, border-color 0.1s, transform 0.08s;
}
.pb-reaction-chip:hover[b-zesrgf8kga] {
    background: #34363f;
    transform: translateY(-1px);
}
.pb-reaction-chip.reacted[b-zesrgf8kga] {
    background: rgba(74,158,255,0.15);
    border-color: rgba(74,158,255,0.4);
    color: #b0d4ff;
}
.pb-reaction-emoji[b-zesrgf8kga] { font-size: 15px; line-height: 1; }
.pb-reaction-count[b-zesrgf8kga] { font-weight: 600; font-size: 12px; }

.pb-reaction-add-wrap[b-zesrgf8kga] {
    position: relative;
}
.pb-reaction-add[b-zesrgf8kga] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 4px 8px;
    background: #2b2d36;
    border: 1px dashed rgba(255,255,255,0.12);
    border-radius: 12px;
    cursor: pointer;
    color: #8b8fa3;
    font-size: 14px;
    transition: background 0.1s, color 0.1s, border-color 0.1s;
}
.pb-reaction-add:hover[b-zesrgf8kga] {
    background: #34363f;
    color: #dcddde;
    border-color: rgba(255,255,255,0.2);
}
.pb-reaction-add-plus[b-zesrgf8kga] { font-size: 10px; }

.pb-reaction-picker[b-zesrgf8kga] {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 10;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
    padding: 6px;
    background: #1a1b23;
    border: 1px solid #2b2d36;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.pb-reaction-picker-btn[b-zesrgf8kga] {
    width: 32px;
    height: 32px;
    background: transparent;
    border: none;
    border-radius: 6px;
    font-size: 18px;
    cursor: pointer;
    transition: background 0.1s, transform 0.08s;
}
.pb-reaction-picker-btn:hover[b-zesrgf8kga] {
    background: rgba(74,158,255,0.12);
    transform: scale(1.15);
}

/* ── Reactions (card list) ─────────────────────────────────────────────── */
.pb-card-reactions[b-zesrgf8kga] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 6px;
}
.pb-card-reaction[b-zesrgf8kga] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 6px;
    background: rgba(255,255,255,0.05);
    border-radius: 10px;
    font-size: 11px;
    color: #b5bac1;
    line-height: 1.3;
}
.pb-card-reaction.reacted[b-zesrgf8kga] {
    background: rgba(74,158,255,0.15);
    color: #b0d4ff;
}
.pb-card-reaction-count[b-zesrgf8kga] {
    font-weight: 600;
    font-size: 10px;
}

/* ── Assign-me toggle in add form ──────────────────────────────────────── */
.pb-add-assign-me[b-zesrgf8kga] {
    display: flex;
    align-items: center;
    gap: 7px;
    background: transparent;
    border: 1px dashed rgba(255,255,255,0.12);
    border-radius: 5px;
    padding: 5px 10px;
    color: #8b8fa3;
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.1s, border-color 0.1s, color 0.1s;
}
.pb-add-assign-me:hover[b-zesrgf8kga] {
    background: rgba(255,255,255,0.04);
    border-color: rgba(255,255,255,0.2);
    color: #dcddde;
}
.pb-add-assign-me.active[b-zesrgf8kga] {
    background: rgba(74,158,255,0.12);
    border: 1px solid rgba(74,158,255,0.45);
    border-style: solid;
    color: #b0d4ff;
}
.pb-add-assign-avatar[b-zesrgf8kga] {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    flex-shrink: 0;
}
.pb-add-assign-check[b-zesrgf8kga] {
    margin-left: auto;
    font-size: 12px;
    color: #4a9eff;
}

/* ── Assign-me button in modal assignees section ───────────────────────── */
.pb-assign-me-btn[b-zesrgf8kga] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    background: transparent;
    border: 1px dashed rgba(255,255,255,0.14);
    border-radius: 6px;
    padding: 6px 10px;
    margin-top: 4px;
    color: #8b8fa3;
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.1s, border-color 0.1s, color 0.1s;
}
.pb-assign-me-btn:hover[b-zesrgf8kga] {
    background: rgba(74,158,255,0.08);
    border-color: rgba(74,158,255,0.4);
    border-style: solid;
    color: #b0d4ff;
}
.pb-assign-me-avatar[b-zesrgf8kga] {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
}
.pb-assign-me-icon[b-zesrgf8kga] {
    margin-left: auto;
    font-size: 13px;
    color: #4a9eff;
}
/* /Components/Shared/QuickSwitcher.razor.rz.scp.css */
/* ── Backdrop ────────────────────────────────────────────────────────────── */
.qs-backdrop[b-x21n1m651t] {
    position: fixed;
    inset: 0;
    z-index: 3000;
    background: rgba(0, 0, 0, 0.65);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 15vh;
    animation: qs-fade-in-b-x21n1m651t 0.1s ease;
}
@keyframes qs-fade-in-b-x21n1m651t { from { opacity: 0; } to { opacity: 1; } }

/* ── Container ───────────────────────────────────────────────────────────── */
.qs-container[b-x21n1m651t] {
    width: 100%;
    max-width: 560px;
    background: #1e2030;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    box-shadow: 0 24px 64px rgba(0,0,0,0.6);
    overflow: hidden;
    animation: qs-drop-in-b-x21n1m651t 0.12s ease;
}
@keyframes qs-drop-in-b-x21n1m651t {
    from { opacity: 0; transform: translateY(-8px) scale(0.98); }
    to   { opacity: 1; transform: none; }
}

/* ── Search bar ──────────────────────────────────────────────────────────── */
.qs-search-bar[b-x21n1m651t] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 16px;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    min-height: 52px;
}

.qs-icon[b-x21n1m651t] {
    font-size: 18px;
    color: #5a7394;
    flex-shrink: 0;
}

.qs-input[b-x21n1m651t] {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: #e6edf6;
    font-size: 16px;
    font-family: inherit;
    caret-color: var(--dc-brand, #5865f2);
}
.qs-input[b-x21n1m651t]::placeholder { color: #3a5570; }

.qs-clear[b-x21n1m651t] {
    background: transparent;
    border: none;
    color: #5a7394;
    cursor: pointer;
    font-size: 13px;
    padding: 3px 5px;
    border-radius: 4px;
    flex-shrink: 0;
    transition: color 0.12s;
}
.qs-clear:hover[b-x21n1m651t] { color: #8da2ba; }

/* ── Results ─────────────────────────────────────────────────────────────── */
.qs-results[b-x21n1m651t] {
    max-height: 360px;
    overflow-y: auto;
    padding: 6px;
}
.qs-results[b-x21n1m651t]::-webkit-scrollbar { width: 4px; }
.qs-results[b-x21n1m651t]::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 2px; }

.qs-empty[b-x21n1m651t] {
    padding: 24px 16px;
    text-align: center;
    color: #5a7394;
    font-size: 14px;
}
.qs-empty strong[b-x21n1m651t] { color: #8da2ba; }

.qs-result[b-x21n1m651t] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    border: none;
    border-radius: 7px;
    background: transparent;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    transition: background 0.1s;
}
.qs-result:hover[b-x21n1m651t]  { background: rgba(255,255,255,0.05); }
.qs-result.selected[b-x21n1m651t] { background: rgba(88,101,242,0.2); }
.qs-result.current[b-x21n1m651t]  { }

.qs-result-icon-wrap[b-x21n1m651t] {
    width: 30px;
    height: 30px;
    border-radius: 7px;
    background: rgba(255,255,255,0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #8da2ba;
    font-size: 14px;
}
.qs-result.selected .qs-result-icon-wrap[b-x21n1m651t] { background: rgba(88,101,242,0.3); color: #a5b4fc; }

.qs-result-name[b-x21n1m651t] {
    flex: 1;
    font-size: 14px;
    font-weight: 500;
    color: #c9d4e2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.qs-result.selected .qs-result-name[b-x21n1m651t] { color: #e6edf6; }

.qs-result-cat[b-x21n1m651t] {
    font-size: 11px;
    color: #3a5570;
    flex-shrink: 0;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.qs-result-badge[b-x21n1m651t] {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 2px 6px;
    border-radius: 10px;
    background: rgba(88,101,242,0.2);
    color: #a5b4fc;
    flex-shrink: 0;
}

/* ── Footer hint bar ─────────────────────────────────────────────────────── */
.qs-footer[b-x21n1m651t] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 8px 16px;
    border-top: 1px solid rgba(255,255,255,0.06);
    font-size: 11px;
    color: #3a5570;
}

.qs-footer kbd[b-x21n1m651t] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1px 5px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 4px;
    font-size: 10px;
    font-family: inherit;
    color: #5a7394;
    margin-right: 3px;
}
/* /Components/Shared/ServerSettingsModal.razor.rz.scp.css */
/* ── Backdrop ──────────────────────────────── */
.ssm-backdrop[b-6oj4p43m6d] {
    position: fixed;
    inset: 0;
    background: var(--dc-bg-primary);
    display: flex;
    z-index: 1000;
    animation: ssm-fade-in-b-6oj4p43m6d 0.15s ease;
}

@keyframes ssm-fade-in-b-6oj4p43m6d {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ── Two-pane layout ──────────────────────── */
.ssm-layout[b-6oj4p43m6d] {
    display: flex;
    width: 100%;
    height: 100%;
}

/* ── Sidebar ──────────────────────────────── */
.ssm-sidebar[b-6oj4p43m6d] {
    width: 220px;
    min-width: 220px;
    background: var(--dc-bg-secondary);
    display: flex;
    flex-direction: column;
    padding: 60px 8px 20px 20px;
    overflow-y: auto;
}

.ssm-sidebar-header[b-6oj4p43m6d] {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #5a7394;
    padding: 0 8px 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ssm-nav-item[b-6oj4p43m6d] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 12px;
    background: none;
    border: none;
    border-radius: 6px;
    color: #8ba3c2;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.1s, color 0.1s;
    text-align: left;
    margin-bottom: 2px;
}

.ssm-nav-item i[b-6oj4p43m6d] { font-size: 16px; }

.ssm-nav-item:hover[b-6oj4p43m6d] {
    background: var(--dc-bg-modifier-hover);
    color: #c9d4e2;
}

.ssm-nav-item.active[b-6oj4p43m6d] {
    background: var(--dc-bg-modifier-selected);
    color: #e6edf6;
}

.ssm-nav-item.danger[b-6oj4p43m6d] { color: #f24a4a; }
.ssm-nav-item.danger:hover[b-6oj4p43m6d] { background: rgba(242,74,74,0.1); }
.ssm-nav-item.danger.active[b-6oj4p43m6d] { background: rgba(242,74,74,0.15); }

.ssm-nav-divider[b-6oj4p43m6d] {
    height: 1px;
    background: rgba(80,150,255,0.08);
    margin: 8px 12px;
}

.ssm-nav-spacer[b-6oj4p43m6d] { flex: 1; }

.ssm-nav-close[b-6oj4p43m6d] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 12px 0 0;
    color: #5a7394;
    font-size: 11px;
    font-weight: 600;
}

.ssm-nav-close-circle[b-6oj4p43m6d] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px solid #2a3a50;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    transition: border-color 0.15s, color 0.15s;
}

.ssm-nav-close:hover .ssm-nav-close-circle[b-6oj4p43m6d] {
    border-color: #8ba3c2;
    color: #e6edf6;
}

/* ── Content ──────────────────────────────── */
.ssm-content[b-6oj4p43m6d] {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    padding: 60px 40px 40px 40px;
    max-width: 740px;
}

.ssm-content-header[b-6oj4p43m6d] {
    margin-bottom: 24px;
}

.ssm-content-header h2[b-6oj4p43m6d] {
    font-size: 20px;
    font-weight: 700;
    color: #e6edf6;
    margin: 0;
}

.ssm-content-body[b-6oj4p43m6d] {
    flex: 1;
}

/* ── Feedback ─────────────────────────────── */
.ssm-error[b-6oj4p43m6d] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: rgba(242,63,66,0.1);
    border: 1px solid rgba(242,63,66,0.2);
    border-radius: 8px;
    color: #f23f42;
    font-size: 13px;
    margin-bottom: 16px;
}

.ssm-success[b-6oj4p43m6d] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: rgba(35,165,90,0.1);
    border: 1px solid rgba(35,165,90,0.2);
    border-radius: 8px;
    color: #23a55a;
    font-size: 13px;
    margin-bottom: 16px;
}

/* ── Sections / Fields ────────────────────── */
.ssm-section[b-6oj4p43m6d] {
    margin-bottom: 24px;
}

.ssm-section h3[b-6oj4p43m6d] {
    font-size: 14px;
    font-weight: 700;
    color: #e6edf6;
    margin: 0 0 12px;
}

.ssm-field[b-6oj4p43m6d] {
    margin-bottom: 16px;
}

.ssm-field label[b-6oj4p43m6d] {
    display: block;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #8ba3c2;
    margin-bottom: 8px;
}

.ssm-input[b-6oj4p43m6d] {
    width: 100%;
    background: var(--dc-bg-secondary);
    border: 1px solid rgba(80,150,255,0.12);
    border-radius: 6px;
    padding: 10px 12px;
    font-size: 15px;
    color: #e6edf6;
    outline: none;
    transition: border-color 0.15s;
    box-sizing: border-box;
}

.ssm-input:focus[b-6oj4p43m6d] { border-color: var(--dc-brand); }
.ssm-input[b-6oj4p43m6d]::placeholder { color: #3a5574; }
.ssm-input:disabled[b-6oj4p43m6d] { opacity: 0.5; cursor: not-allowed; }

.ssm-input-short[b-6oj4p43m6d] { max-width: 100px; }

.ssm-input-danger:focus[b-6oj4p43m6d] { border-color: #f24a4a; }

.ssm-field-hint[b-6oj4p43m6d] {
    display: block;
    font-size: 12px;
    color: #5a7394;
    margin-top: 6px;
}

.ssm-field-row[b-6oj4p43m6d] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
}

.ssm-divider[b-6oj4p43m6d] {
    height: 1px;
    background: rgba(80,150,255,0.08);
    margin: 24px 0;
}

/* ── Info rows (Overview) ─────────────────── */
.ssm-info-row[b-6oj4p43m6d] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
}

.ssm-info-label[b-6oj4p43m6d] {
    font-size: 13px;
    font-weight: 600;
    color: #5a7394;
    min-width: 80px;
}

.ssm-info-value[b-6oj4p43m6d] {
    font-size: 13px;
    color: #8ba3c2;
    font-family: 'SF Mono', 'Fira Code', monospace;
    background: var(--dc-bg-secondary);
    padding: 4px 8px;
    border-radius: 4px;
}

/* ── Create channel row ───────────────────── */
.ssm-create-row[b-6oj4p43m6d] {
    display: flex;
    align-items: flex-end;
    gap: 10px;
}

.ssm-field-grow[b-6oj4p43m6d] { flex: 1; }

.ssm-btn-create-ch[b-6oj4p43m6d] {
    height: 40px;
    width: 40px;
    flex-shrink: 0;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

select.ssm-input[b-6oj4p43m6d] {
    appearance: none;
    min-width: 90px;
    cursor: pointer;
}

/* ── Channel list ─────────────────────────── */
.ssm-channel-category[b-6oj4p43m6d] {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #5a7394;
    padding: 12px 0 6px;
}

.ssm-channel-row[b-6oj4p43m6d] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 6px;
    transition: background 0.1s;
    margin-bottom: 2px;
}

.ssm-channel-row:hover[b-6oj4p43m6d] { background: var(--dc-bg-modifier-hover); }

.ssm-ch-icon[b-6oj4p43m6d] {
    color: #5a7394;
    font-size: 16px;
    flex-shrink: 0;
}

.ssm-ch-name[b-6oj4p43m6d] {
    font-size: 14px;
    font-weight: 500;
    color: #c9d4e2;
}

.ssm-ch-topic[b-6oj4p43m6d] {
    font-size: 12px;
    color: #5a7394;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-left: 8px;
}

.ssm-ch-delete[b-6oj4p43m6d] {
    background: none;
    border: none;
    color: #5a7394;
    padding: 4px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    margin-left: auto;
    transition: color 0.15s;
    opacity: 0;
}

.ssm-channel-row:hover .ssm-ch-delete[b-6oj4p43m6d] { opacity: 1; }
.ssm-ch-delete:hover[b-6oj4p43m6d] { color: #f24a4a; }

/* ── Members ──────────────────────────────── */
.ssm-members-count[b-6oj4p43m6d] {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #5a7394;
    margin-bottom: 12px;
}

.ssm-member-row[b-6oj4p43m6d] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    border-radius: 6px;
    margin-bottom: 2px;
    transition: background 0.1s;
}

.ssm-member-row:hover[b-6oj4p43m6d] { background: var(--dc-bg-modifier-hover); }

.ssm-member-avatar[b-6oj4p43m6d] { flex-shrink: 0; }

.ssm-member-info[b-6oj4p43m6d] {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.ssm-member-name[b-6oj4p43m6d] {
    font-size: 14px;
    font-weight: 600;
    color: #c9d4e2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ssm-role-badge[b-6oj4p43m6d] {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 2px 8px;
    border-radius: 10px;
    flex-shrink: 0;
}

.ssm-role-badge.owner[b-6oj4p43m6d] {
    background: var(--dc-bg-modifier-selected);
    color: var(--dc-brand);
}

.ssm-role-badge.member[b-6oj4p43m6d] {
    background: rgba(90,115,148,0.15);
    color: #5a7394;
}

.ssm-member-actions[b-6oj4p43m6d] {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
}

/* ── Icon buttons ─────────────────────────── */
.ssm-btn-icon[b-6oj4p43m6d] {
    background: none;
    border: none;
    color: #5a7394;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 16px;
    transition: color 0.15s, background 0.15s;
}

.ssm-btn-icon:hover[b-6oj4p43m6d] {
    color: #c9d4e2;
    background: var(--dc-bg-modifier-hover);
}

.ssm-btn-icon.danger:hover[b-6oj4p43m6d] {
    color: #f24a4a;
    background: rgba(242,74,74,0.1);
}

/* ── Inline confirmations ─────────────────── */
.ssm-confirm-inline[b-6oj4p43m6d] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: #8ba3c2;
}

.ssm-btn-danger-sm[b-6oj4p43m6d],
.ssm-btn-cancel-sm[b-6oj4p43m6d] {
    background: none;
    border: 1px solid;
    border-radius: 4px;
    padding: 3px 10px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}

.ssm-btn-danger-sm[b-6oj4p43m6d] {
    border-color: #f24a4a;
    color: #f24a4a;
}
.ssm-btn-danger-sm:hover[b-6oj4p43m6d] { background: rgba(242,74,74,0.15); }

.ssm-btn-cancel-sm[b-6oj4p43m6d] {
    border-color: #2a3a50;
    color: #8ba3c2;
}
.ssm-btn-cancel-sm:hover[b-6oj4p43m6d] { background: var(--dc-bg-modifier-hover); }

/* ── Invites list ─────────────────────────── */
.ssm-invites-list[b-6oj4p43m6d] { display: flex; flex-direction: column; gap: 4px; }

.ssm-invite-row[b-6oj4p43m6d] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px 14px;
    background: var(--dc-bg-secondary);
    border-radius: 8px;
    border: 1px solid rgba(80,150,255,0.06);
}

.ssm-invite-code[b-6oj4p43m6d] {
    font-size: 15px;
    font-weight: 700;
    font-family: 'SF Mono', 'Fira Code', monospace;
    color: var(--dc-brand);
    letter-spacing: 1px;
    flex: 1;
}

.ssm-invite-uses[b-6oj4p43m6d],
.ssm-invite-date[b-6oj4p43m6d] {
    font-size: 12px;
    color: #5a7394;
    white-space: nowrap;
}

/* ── Danger zone ──────────────────────────── */
.ssm-danger-zone[b-6oj4p43m6d] { padding-top: 8px; }

.ssm-danger-card[b-6oj4p43m6d] {
    border: 1px solid rgba(242,74,74,0.3);
    border-radius: 10px;
    padding: 24px;
    background: rgba(242,74,74,0.04);
}

.ssm-danger-card h3[b-6oj4p43m6d] {
    font-size: 16px;
    font-weight: 700;
    color: #f24a4a;
    margin: 0 0 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.ssm-danger-card p[b-6oj4p43m6d] {
    font-size: 14px;
    color: #8ba3c2;
    line-height: 1.6;
    margin-bottom: 20px;
}

.ssm-danger-card .ssm-field label[b-6oj4p43m6d] {
    color: #8ba3c2;
    text-transform: none;
    font-size: 13px;
}

.ssm-danger-card .ssm-field label strong[b-6oj4p43m6d] {
    color: #e6edf6;
}

/* ── Buttons ──────────────────────────────── */
.ssm-btn-primary[b-6oj4p43m6d] {
    background: var(--dc-brand);
    border: none;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    padding: 10px 24px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s, opacity 0.15s;
    display: flex;
    align-items: center;
    gap: 8px;
}

.ssm-btn-primary:hover[b-6oj4p43m6d] { background: var(--dc-brand-hover); }
.ssm-btn-primary:disabled[b-6oj4p43m6d] { opacity: 0.5; cursor: not-allowed; }
.ssm-btn-primary.working[b-6oj4p43m6d] { pointer-events: none; opacity: 0.8; }

.ssm-btn-danger[b-6oj4p43m6d] {
    background: #f24a4a;
    border: none;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    padding: 12px 28px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s, opacity 0.15s;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
}

.ssm-btn-danger:hover[b-6oj4p43m6d] { background: #d43a3a; }
.ssm-btn-danger:disabled[b-6oj4p43m6d] { opacity: 0.5; cursor: not-allowed; }
.ssm-btn-danger.working[b-6oj4p43m6d] { pointer-events: none; opacity: 0.8; }

/* ── New category inline input ───────────── */
.ssm-new-cat-input[b-6oj4p43m6d] {
    margin-top: 6px;
    font-size: 13px;
    padding: 7px 10px;
}

/* ── Channel organizer ────────────────────── */
.ssm-org[b-6oj4p43m6d] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 16px;
}

.ssm-org-cat[b-6oj4p43m6d] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px 6px;
    border-radius: 6px;
    border: 1px solid transparent;
    margin-top: 8px;
    cursor: grab;
    transition: background 0.1s, border-color 0.15s;
    user-select: none;
}

.ssm-org-cat:first-child[b-6oj4p43m6d] { margin-top: 0; }

.ssm-org-cat:hover[b-6oj4p43m6d] { background: rgba(74,158,255,0.05); }

.ssm-org-cat.drag-over[b-6oj4p43m6d] {
    border-color: var(--dc-brand);
    background: var(--dc-bg-modifier-hover);
}

.ssm-org-cat-icon[b-6oj4p43m6d] {
    font-size: 14px;
    color: #5a7394;
    flex-shrink: 0;
}

.ssm-org-cat-name[b-6oj4p43m6d] {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #5a7394;
    flex: 1;
}

.ssm-org-cat-count[b-6oj4p43m6d] {
    font-size: 11px;
    font-weight: 600;
    color: #3a5574;
    background: rgba(80,150,255,0.08);
    padding: 1px 7px;
    border-radius: 10px;
}

.ssm-org-ch[b-6oj4p43m6d] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px 7px 26px;
    border-radius: 6px;
    border-top: 2px solid transparent;
    cursor: grab;
    transition: background 0.1s, border-color 0.15s;
    user-select: none;
}

.ssm-org-ch:hover[b-6oj4p43m6d] { background: var(--dc-bg-modifier-hover); }

.ssm-org-ch.drag-over[b-6oj4p43m6d] {
    border-top-color: var(--dc-brand);
    background: rgba(74,158,255,0.04);
}

.ssm-org-ch.dragging[b-6oj4p43m6d] { opacity: 0.4; }

.ssm-drag-handle[b-6oj4p43m6d] {
    font-size: 16px;
    color: #2a3a50;
    cursor: grab;
    flex-shrink: 0;
    transition: color 0.1s;
}

.ssm-org-cat:hover .ssm-drag-handle[b-6oj4p43m6d],
.ssm-org-ch:hover .ssm-drag-handle[b-6oj4p43m6d] { color: #5a7394; }

.ssm-org-ch-confirm[b-6oj4p43m6d] { margin-left: auto; }

/* ── Inline rename input ──────────────────── */
.ssm-inline-rename[b-6oj4p43m6d] {
    flex: 1;
    background: var(--dc-bg-secondary);
    border: 1px solid var(--dc-brand);
    border-radius: 5px;
    color: #e6edf6;
    font-size: 13px;
    font-weight: 600;
    padding: 3px 8px;
    outline: none;
    font-family: inherit;
    min-width: 0;
}

/* ── Category / channel action buttons ───── */
.ssm-org-cat-actions[b-6oj4p43m6d],
.ssm-org-ch-actions[b-6oj4p43m6d] {
    display: flex;
    gap: 2px;
    margin-left: auto;
    opacity: 0;
    transition: opacity 0.12s;
}

.ssm-org-cat:hover .ssm-org-cat-actions[b-6oj4p43m6d],
.ssm-org-ch:hover .ssm-org-ch-actions[b-6oj4p43m6d] { opacity: 1; }

.ssm-org-cat-confirm[b-6oj4p43m6d] { margin-left: auto; }

.ssm-org-action-btn[b-6oj4p43m6d] {
    width: 26px;
    height: 26px;
    font-size: 13px;
}

/* ── Save bar ─────────────────────────────── */
.ssm-org-save-bar[b-6oj4p43m6d] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--dc-bg-modifier-hover);
    border: 1px solid var(--dc-bg-modifier-selected);
    border-radius: 8px;
    margin-top: 8px;
    font-size: 13px;
    color: #8ba3c2;
}

.ssm-org-save-bar .ssm-btn-primary[b-6oj4p43m6d] {
    padding: 7px 18px;
    font-size: 13px;
}

/* ── Empty state ──────────────────────────── */
.ssm-empty[b-6oj4p43m6d] {
    font-size: 14px;
    color: #5a7394;
    padding: 20px 0;
    text-align: center;
}

/* ── Spinner ──────────────────────────────── */
.ssm-spinner[b-6oj4p43m6d] {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255,255,255,0.2);
    border-top-color: #fff;
    border-radius: 50%;
    animation: ssm-spin-b-6oj4p43m6d 0.6s linear infinite;
    flex-shrink: 0;
}

@keyframes ssm-spin-b-6oj4p43m6d { to { transform: rotate(360deg); } }

/* ── Server Icon Upload ───────────────────── */
.ssm-icon-row[b-6oj4p43m6d] {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
}

.ssm-icon-preview[b-6oj4p43m6d] {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--dc-bg-secondary, #2b2d31);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
    border: 2px solid rgba(255,255,255,0.08);
}

.ssm-icon-img[b-6oj4p43m6d] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ssm-icon-placeholder[b-6oj4p43m6d] {
    font-size: 28px;
    font-weight: 700;
    color: var(--dc-text-normal, #dbdee1);
}

.ssm-icon-actions[b-6oj4p43m6d] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    justify-content: center;
}

.ssm-btn-danger[b-6oj4p43m6d] {
    padding: 6px 14px;
    border-radius: 4px;
    border: none;
    background: rgba(242,63,66,0.15);
    color: var(--dc-red, #f23f42);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s;
}

.ssm-btn-danger:hover[b-6oj4p43m6d] {
    background: rgba(242,63,66,0.3);
}

.ssm-btn-danger:disabled[b-6oj4p43m6d] {
    opacity: 0.5;
    cursor: not-allowed;
}

.ssm-field-error[b-6oj4p43m6d] {
    font-size: 12px;
    color: var(--dc-red, #f23f42);
    margin-top: 4px;
}

/* ── Documentation channel URL display ───── */
.ssm-ch-doc-url[b-6oj4p43m6d] {
    font-size: 11px;
    font-family: 'JetBrains Mono', 'Consolas', monospace;
    color: var(--dc-brand);
    opacity: 0.7;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 220px;
    margin-left: 6px;
    flex-shrink: 1;
}

.ssm-new-cat-input[b-6oj4p43m6d] {
    margin-top: 6px;
}

/* ── Documentation config panel ──────────── */
.ssm-doc-config-panel[b-6oj4p43m6d] {
    margin: 2px 8px 8px 28px;
    padding: 14px 16px;
    background: var(--dc-bg-primary);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ssm-doc-config-title[b-6oj4p43m6d] {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--dc-brand);
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 2px;
}

.ssm-doc-config-hint[b-6oj4p43m6d] {
    font-size: 11px;
    color: var(--dc-text-muted, #a3a6aa);
    line-height: 1.5;
}

.ssm-doc-config-panel .ssm-field[b-6oj4p43m6d] { gap: 4px; }
.ssm-doc-config-panel .ssm-field label[b-6oj4p43m6d] { font-size: 11px; }
.ssm-doc-config-panel .ssm-input[b-6oj4p43m6d] { font-size: 12px; padding: 5px 8px; }

.ssm-btn-sm[b-6oj4p43m6d] {
    padding: 6px 14px;
    font-size: 12px;
}

.ssm-org-action-btn.active[b-6oj4p43m6d] {
    background: rgba(88, 101, 242, 0.2);
    color: var(--dc-brand);
}

/* ── BookStack access warning ─────────────── */
.ssm-doc-access-warning[b-6oj4p43m6d] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
    background: rgba(250, 168, 26, 0.08);
    border: 1px solid rgba(250, 168, 26, 0.25);
    border-radius: 6px;
    font-size: 12px;
    line-height: 1.5;
    color: #c9a227;
}

.ssm-doc-access-warning i[b-6oj4p43m6d] {
    font-size: 14px;
    flex-shrink: 0;
    margin-top: 1px;
    color: #faa81a;
}

.ssm-doc-access-warning strong[b-6oj4p43m6d] {
    color: #e8c060;
}

/* ── Create section header (Channel / Category toggle) ──── */
.ssm-create-section-header[b-6oj4p43m6d] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.ssm-create-section-header h3[b-6oj4p43m6d] {
    margin: 0;
}

.ssm-create-header-btns[b-6oj4p43m6d] {
    display: flex;
    gap: 4px;
    background: var(--dc-bg-primary);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 7px;
    padding: 3px;
}

.ssm-btn-create-type[b-6oj4p43m6d] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border-radius: 5px;
    border: none;
    background: transparent;
    color: #8da2ba;
    font-size: 12px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
    white-space: nowrap;
}
.ssm-btn-create-type:hover[b-6oj4p43m6d] { color: #c9d4e2; background: rgba(255,255,255,0.05); }
.ssm-btn-create-type.active[b-6oj4p43m6d] {
    background: var(--dc-brand, #5865f2);
    color: #fff;
}

/* "Create a category first" hint beneath a missing select */
.ssm-no-cats-hint[b-6oj4p43m6d] {
    font-size: 12px;
    color: #5a7394;
    font-style: italic;
    margin-top: 6px;
}
/* /Components/Shared/UserAvatar.razor.rz.scp.css */
.ua-wrap[b-4zckzexfw4] {
    position: relative;
    flex-shrink: 0;
    display: inline-flex;
}

/* ── Sizes ────────────────────────────── */
.ua-xs[b-4zckzexfw4]  { width: 24px;  height: 24px; }
.ua-sm[b-4zckzexfw4]  { width: 32px;  height: 32px; }
.ua-md[b-4zckzexfw4]  { width: 40px;  height: 40px; }
.ua-lg[b-4zckzexfw4]  { width: 48px;  height: 48px; }
.ua-xl[b-4zckzexfw4]  { width: 80px;  height: 80px; }

/* ── Image ────────────────────────────── */
.ua-img[b-4zckzexfw4] {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

/* ── Letter fallback ──────────────────── */
.ua-letter[b-4zckzexfw4] {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: #fff;
    user-select: none;
}

.ua-xs  .ua-letter span[b-4zckzexfw4] { font-size: 11px; }
.ua-sm  .ua-letter span[b-4zckzexfw4] { font-size: 14px; }
.ua-md  .ua-letter span[b-4zckzexfw4] { font-size: 16px; }
.ua-lg  .ua-letter span[b-4zckzexfw4] { font-size: 20px; }
.ua-xl  .ua-letter span[b-4zckzexfw4] { font-size: 32px; }

/* ── Status dot ───────────────────────── */
.ua-status-dot[b-4zckzexfw4] {
    position: absolute;
    bottom: -1px;
    right: -1px;
    border-radius: 50%;
    border: 2px solid transparent;  /* overridden contextually via JS/parent */
}

/* xs / sm */
.ua-xs.ua-has-status  .ua-status-dot[b-4zckzexfw4],
.ua-sm.ua-has-status  .ua-status-dot[b-4zckzexfw4] { width: 10px; height: 10px; }

/* md */
.ua-md.ua-has-status  .ua-status-dot[b-4zckzexfw4] { width: 12px; height: 12px; border-width: 2px; }

/* lg */
.ua-lg.ua-has-status  .ua-status-dot[b-4zckzexfw4] { width: 14px; height: 14px; border-width: 3px; }

/* xl */
.ua-xl.ua-has-status  .ua-status-dot[b-4zckzexfw4] { width: 20px; height: 20px; border-width: 3px; }

/* Status colours */
.ua-online[b-4zckzexfw4]  { background: #23a55a; }
.ua-idle[b-4zckzexfw4]    { background: #f0b232; }
.ua-dnd[b-4zckzexfw4]     { background: #f23f42; }
.ua-offline[b-4zckzexfw4] { background: #80848e; }
/* /Components/Shared/UserProfileCard.razor.rz.scp.css */
.upc-backdrop[b-pnyhid4mm3] {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.4);
    animation: upc-fade-in-b-pnyhid4mm3 0.15s ease;
}

@keyframes upc-fade-in-b-pnyhid4mm3 {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.upc-card[b-pnyhid4mm3] {
    width: 340px;
    background: #111214;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 8px 16px rgba(0,0,0,0.24);
    animation: upc-slide-up-b-pnyhid4mm3 0.2s ease;
    border: 1px solid rgba(255,255,255,0.05);
}

@keyframes upc-slide-up-b-pnyhid4mm3 {
    from { transform: translateY(10px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}

.upc-banner[b-pnyhid4mm3] {
    height: 60px;
}

.upc-avatar-wrap[b-pnyhid4mm3] {
    margin-top: -45px;
    margin-left: 16px;
    position: relative;
    display: inline-block;
}

.upc-avatar-border[b-pnyhid4mm3] {
    background: #111214;
    padding: 6px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.upc-body[b-pnyhid4mm3] {
    padding: 16px;
    background: #111214;
}

.upc-names[b-pnyhid4mm3] {
    margin-bottom: 12px;
}

.upc-display-name[b-pnyhid4mm3] {
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
}

.upc-username[b-pnyhid4mm3] {
    font-size: 14px;
    color: #b5bac1;
    line-height: 1.2;
}

.upc-custom-status[b-pnyhid4mm3] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #dbdee1;
    margin-bottom: 12px;
}

.upc-cs-icon[b-pnyhid4mm3] {
    font-size: 16px;
    color: #b5bac1;
}

.upc-divider[b-pnyhid4mm3] {
    height: 1px;
    background: rgba(255,255,255,0.06);
    margin: 12px 0;
}

.upc-section[b-pnyhid4mm3] {
    margin-bottom: 12px;
}

.upc-section-label[b-pnyhid4mm3] {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    color: #dbdee1;
    margin-bottom: 6px;
    letter-spacing: 0.2px;
}

.upc-bio[b-pnyhid4mm3] {
    font-size: 14px;
    color: #dbdee1;
    line-height: 1.4;
    white-space: pre-wrap;
}

.upc-bio-empty[b-pnyhid4mm3] {
    color: #949ba4;
    font-style: italic;
}

.upc-date[b-pnyhid4mm3] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #dbdee1;
}

.upc-date i[b-pnyhid4mm3] {
    color: #b5bac1;
    font-size: 16px;
}
/* /Components/Shared/UserSettings.razor.rz.scp.css */
/* ── Full-screen overlay ──────────────────── */
.us-overlay[b-d71gapcbzw] {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    background: var(--dc-bg-primary);
    animation: us-fade-in-b-d71gapcbzw 0.15s ease;
}

@keyframes us-fade-in-b-d71gapcbzw {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ── Sidebar ──────────────────────────────── */
.us-sidebar[b-d71gapcbzw] {
    width: 232px;
    flex-shrink: 0;
    background: var(--dc-bg-primary);
    display: flex;
    flex-direction: column;
    border-right: 1px solid rgba(80,150,255,0.06);
}

.us-sidebar-scroll[b-d71gapcbzw] {
    flex: 1;
    overflow-y: auto;
    padding: 60px 8px 20px 20px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.us-category-label[b-d71gapcbzw] {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #5a7394;
    padding: 8px 10px 6px;
}

.us-nav-item[b-d71gapcbzw] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 10px;
    border-radius: 6px;
    background: none;
    border: none;
    color: #8da2ba;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
    text-align: left;
}

.us-nav-item:hover[b-d71gapcbzw] {
    background: rgba(100,170,255,0.06);
    color: #c9d4e2;
}

.us-nav-item.active[b-d71gapcbzw] {
    background: var(--dc-bg-modifier-selected);
    color: #e6edf6;
    font-weight: 600;
}

.us-nav-danger[b-d71gapcbzw] {
    color: #f23f42 !important;
}

.us-nav-danger:hover[b-d71gapcbzw] {
    background: rgba(242,63,66,0.1) !important;
    color: #ff6b6b !important;
}

.us-separator[b-d71gapcbzw] {
    height: 1px;
    background: rgba(80,150,255,0.08);
    margin: 8px 10px;
}

.us-build-info[b-d71gapcbzw] {
    font-size: 11px;
    color: #3a5570;
    padding: 12px 10px 0;
    margin-top: auto;
}

/* ── Content area ─────────────────────────── */
.us-content[b-d71gapcbzw] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.us-content-scroll[b-d71gapcbzw] {
    flex: 1;
    overflow-y: auto;
    padding: 60px 40px 60px 40px;
    max-width: 740px;
}

.us-title[b-d71gapcbzw] {
    font-size: 20px;
    font-weight: 700;
    color: #e6edf6;
    margin: 0 0 20px;
}

/* ── Close button area ────────────────────── */
.us-close-area[b-d71gapcbzw] {
    position: fixed;
    top: 60px;
    right: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    z-index: 2001;
}

.us-close-btn[b-d71gapcbzw] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: none;
    border: 2px solid #5a7394;
    color: #5a7394;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.us-close-btn:hover[b-d71gapcbzw] {
    border-color: #e6edf6;
    color: #e6edf6;
    background: rgba(100,170,255,0.08);
}

.us-close-hint[b-d71gapcbzw] {
    font-size: 11px;
    color: #3a5570;
    font-weight: 600;
}

/* ── Account card ─────────────────────────── */
.us-account-card[b-d71gapcbzw] {
    border-radius: 10px;
    overflow: hidden;
    background: var(--dc-bg-secondary);
    border: 1px solid rgba(80,150,255,0.08);
}

.us-account-banner[b-d71gapcbzw] {
    height: 100px;
}

.us-account-body[b-d71gapcbzw] {
    padding: 0 16px 16px;
}

.us-account-avatar-row[b-d71gapcbzw] {
    display: flex;
    align-items: flex-end;
    gap: 14px;
    margin-top: -32px;
    margin-bottom: 16px;
}

.us-account-avatar[b-d71gapcbzw] {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    border: 5px solid var(--dc-bg-secondary);
    overflow: hidden;
    flex-shrink: 0;
}

.us-account-avatar[b-d71gapcbzw]  .ua-wrap,
.us-account-avatar[b-d71gapcbzw]  .ua-img,
.us-account-avatar[b-d71gapcbzw]  .ua-letter {
    width: 100%;
    height: 100%;
    border-radius: 0;
}

.us-account-username[b-d71gapcbzw] {
    font-size: 20px;
    font-weight: 700;
    color: #e6edf6;
    padding-bottom: 8px;
}

.us-account-fields[b-d71gapcbzw] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: var(--dc-bg-primary);
    border-radius: 8px;
    padding: 16px;
}

.us-field[b-d71gapcbzw] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.us-field-label[b-d71gapcbzw] {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #5a7394;
}

.us-field-value[b-d71gapcbzw] {
    font-size: 14px;
    color: #c9d4e2;
}

/* ── Sections ─────────────────────────────── */
.us-section[b-d71gapcbzw] {
    padding: 4px 0;
}

.us-section-title[b-d71gapcbzw] {
    font-size: 16px;
    font-weight: 700;
    color: #e6edf6;
    margin: 0 0 6px;
}

.us-section-desc[b-d71gapcbzw] {
    font-size: 13px;
    color: #5a7394;
    margin: 0 0 14px;
    line-height: 1.5;
}

.us-section-desc strong[b-d71gapcbzw] {
    color: #8da2ba;
}

.us-section-divider[b-d71gapcbzw] {
    height: 1px;
    background: rgba(80,150,255,0.08);
    margin: 20px 0;
}

/* ── Inputs ───────────────────────────────── */
.us-input[b-d71gapcbzw] {
    width: 100%;
    padding: 10px 14px;
    background: var(--dc-input-bg);
    border: 1.5px solid rgba(80,150,255,0.1);
    border-radius: 8px;
    color: #c9d4e2;
    font-size: 15px;
    font-family: inherit;
    transition: border-color 0.15s;
    box-sizing: border-box;
}

.us-input:focus[b-d71gapcbzw] {
    border-color: var(--dc-brand);
    outline: none;
}

.us-input[b-d71gapcbzw]::placeholder {
    color: #3a5570;
}

.us-textarea[b-d71gapcbzw] {
    width: 100%;
    padding: 10px 14px;
    background: var(--dc-input-bg);
    border: 1.5px solid rgba(80,150,255,0.1);
    border-radius: 8px;
    color: #c9d4e2;
    font-size: 14px;
    font-family: inherit;
    min-height: 100px;
    resize: vertical;
    transition: border-color 0.15s;
    box-sizing: border-box;
}

.us-textarea:focus[b-d71gapcbzw] {
    border-color: var(--dc-brand);
    outline: none;
}

.us-textarea[b-d71gapcbzw]::placeholder {
    color: #3a5570;
}

.us-char-count[b-d71gapcbzw] {
    font-size: 11px;
    color: #3a5570;
    text-align: right;
    margin-top: 4px;
}

/* ── Buttons ──────────────────────────────── */
.us-btn-primary[b-d71gapcbzw] {
    padding: 8px 20px;
    border-radius: 6px;
    background: var(--dc-brand);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: background 0.15s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.us-btn-primary:hover[b-d71gapcbzw] {
    background: var(--dc-brand-hover);
}

.us-btn-primary:disabled[b-d71gapcbzw] {
    opacity: 0.6;
    cursor: not-allowed;
}

.us-btn-outline[b-d71gapcbzw] {
    padding: 8px 20px;
    border-radius: 6px;
    background: none;
    border: 1.5px solid rgba(80,150,255,0.2);
    color: #8da2ba;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.us-btn-outline:hover[b-d71gapcbzw] {
    border-color: var(--dc-brand);
    color: #e6edf6;
    background: var(--dc-bg-modifier-hover);
}

.us-btn-outline:disabled[b-d71gapcbzw] {
    opacity: 0.4;
    cursor: not-allowed;
}

.us-btn-danger[b-d71gapcbzw] {
    padding: 8px 20px;
    border-radius: 6px;
    background: #f23f42;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: background 0.15s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.us-btn-danger:hover[b-d71gapcbzw] {
    background: #c0302f;
}

.us-btn-danger:disabled[b-d71gapcbzw] {
    opacity: 0.4;
    cursor: not-allowed;
}

.us-btn-sm[b-d71gapcbzw] {
    margin-top: 10px;
}

/* ── Avatar edit ──────────────────────────── */
.us-avatar-edit[b-d71gapcbzw] {
    display: flex;
    align-items: center;
    gap: 20px;
}

.us-avatar-preview[b-d71gapcbzw] {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    border: 3px solid rgba(80,150,255,0.1);
}

.us-avatar-preview[b-d71gapcbzw]  .ua-wrap,
.us-avatar-preview[b-d71gapcbzw]  .ua-img,
.us-avatar-preview[b-d71gapcbzw]  .ua-letter {
    width: 100%;
    height: 100%;
    border-radius: 0;
}

.us-avatar-actions[b-d71gapcbzw] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* ── Color picker ─────────────────────────── */
.us-color-row[b-d71gapcbzw] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.us-color-picker[b-d71gapcbzw] {
    width: 48px;
    height: 38px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    background: none;
    padding: 0;
}

.us-color-picker[b-d71gapcbzw]::-webkit-color-swatch-wrapper {
    padding: 0;
}

.us-color-picker[b-d71gapcbzw]::-webkit-color-swatch {
    border: 2px solid rgba(80,150,255,0.15);
    border-radius: 6px;
}

.us-color-hex[b-d71gapcbzw] {
    font-size: 14px;
    font-family: 'SF Mono', 'Fira Code', monospace;
    color: #8da2ba;
}

/* ── Status grid ──────────────────────────── */
.us-status-grid[b-d71gapcbzw] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.us-status-btn[b-d71gapcbzw] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 8px;
    background: var(--dc-bg-primary);
    border: 1.5px solid transparent;
    color: #8da2ba;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
    text-align: left;
}

.us-status-btn:hover[b-d71gapcbzw] {
    background: #121d2e;
    color: #c9d4e2;
}

.us-status-btn.selected[b-d71gapcbzw] {
    border-color: var(--dc-brand);
    background: rgba(74,158,255,0.1);
    color: #e6edf6;
}

.us-status-dot[b-d71gapcbzw] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.us-online[b-d71gapcbzw]  { background: #23a55a; }
.us-idle[b-d71gapcbzw]    { background: #f0b232; }
.us-dnd[b-d71gapcbzw]     { background: #f23f42; }
.us-offline[b-d71gapcbzw] { background: #5a7394; }

/* ── Info grid (auth section) ─────────────── */
.us-info-grid[b-d71gapcbzw] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.us-info-item[b-d71gapcbzw] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.us-info-label[b-d71gapcbzw] {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #5a7394;
}

.us-info-value[b-d71gapcbzw] {
    font-size: 14px;
    color: #c9d4e2;
    word-break: break-all;
}

.us-mono[b-d71gapcbzw] {
    font-family: 'SF Mono', 'Fira Code', monospace;
    font-size: 12px;
    color: #8da2ba;
}

/* ── Theme cards ──────────────────────────── */
.us-theme-row[b-d71gapcbzw] {
    display: flex;
    gap: 16px;
}

.us-theme-card[b-d71gapcbzw] {
    width: 120px;
    border-radius: 10px;
    overflow: hidden;
    border: 2px solid transparent;
    cursor: pointer;
    transition: border-color 0.15s;
    background: var(--dc-bg-primary);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}

.us-theme-card.selected[b-d71gapcbzw] {
    border-color: var(--dc-brand);
}

.us-theme-card span[b-d71gapcbzw] {
    font-size: 13px;
    color: #8da2ba;
    padding: 8px 0;
    font-weight: 600;
}

.us-theme-card.selected span[b-d71gapcbzw] {
    color: #e6edf6;
}

.us-theme-preview[b-d71gapcbzw] {
    width: 100%;
    height: 80px;
}

.us-theme-dark[b-d71gapcbzw] {
    background: linear-gradient(135deg, var(--dc-bg-primary) 0%, #1a2744 100%);
}

.us-theme-light[b-d71gapcbzw] {
    background: linear-gradient(135deg, #f0f4f8 0%, #dce3ed 100%);
}

/* ── Feedback messages ────────────────────── */
.us-error[b-d71gapcbzw] {
    font-size: 13px;
    color: #f23f42;
    margin-top: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.us-success[b-d71gapcbzw] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: rgba(35,165,90,0.1);
    border: 1px solid rgba(35,165,90,0.25);
    border-radius: 8px;
    color: #23a55a;
    font-size: 13px;
}

.us-success strong[b-d71gapcbzw] {
    color: #2ecb6f;
}

.us-danger-text[b-d71gapcbzw] {
    color: #f23f42 !important;
}

/* ── Scrollbar styling ────────────────────── */
.us-content-scroll[b-d71gapcbzw]::-webkit-scrollbar,
.us-sidebar-scroll[b-d71gapcbzw]::-webkit-scrollbar {
    width: 6px;
}

.us-content-scroll[b-d71gapcbzw]::-webkit-scrollbar-track,
.us-sidebar-scroll[b-d71gapcbzw]::-webkit-scrollbar-track {
    background: transparent;
}

.us-content-scroll[b-d71gapcbzw]::-webkit-scrollbar-thumb,
.us-sidebar-scroll[b-d71gapcbzw]::-webkit-scrollbar-thumb {
    background: rgba(80,150,255,0.12);
    border-radius: 3px;
}

.us-content-scroll[b-d71gapcbzw]::-webkit-scrollbar-thumb:hover,
.us-sidebar-scroll[b-d71gapcbzw]::-webkit-scrollbar-thumb:hover {
    background: rgba(80,150,255,0.2);
}

/* ── Theme group label ────────────────────── */
.us-theme-group-label[b-d71gapcbzw] {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: #5a7394;
    margin: 0 0 6px;
}

/* ── Theme grid ────────────────────────────── */
.us-theme-grid[b-d71gapcbzw] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 12px;
    margin-top: 8px;
}

.us-theme-card[b-d71gapcbzw] {
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 8px;
    border-radius: 10px;
    transition: background 0.12s;
    position: relative;
}

.us-theme-card:hover[b-d71gapcbzw] { background: var(--dc-bg-modifier-hover); }

.us-theme-card.selected[b-d71gapcbzw] { background: var(--dc-bg-modifier-selected); }

.us-theme-swatch[b-d71gapcbzw] {
    width: 80px;
    height: 56px;
    border-radius: 8px;
    border: 2px solid transparent;
    display: flex;
    overflow: hidden;
    transition: border-color 0.15s;
}

.us-swatch-sidebar[b-d71gapcbzw] {
    width: 28%;
    height: 100%;
    flex-shrink: 0;
}

.us-swatch-accent[b-d71gapcbzw] {
    width: 40%;
    height: 10px;
    border-radius: 4px;
    margin: auto 8px;
    align-self: flex-end;
    margin-bottom: 8px;
}

.us-theme-label[b-d71gapcbzw] {
    font-size: 12px;
    font-weight: 600;
    color: #8ba3c2;
}

.us-theme-card.selected .us-theme-label[b-d71gapcbzw] { color: #e6edf6; }

.us-theme-swatch-custom[b-d71gapcbzw] {
    position: relative;
}

.us-swatch-custom-icon[b-d71gapcbzw] {
    position: absolute;
    bottom: 5px;
    right: 6px;
    font-size: 14px;
    color: rgba(255,255,255,0.6);
}

.us-theme-check[b-d71gapcbzw] {
    position: absolute;
    top: 6px;
    right: 6px;
    font-size: 14px;
}

/* ── Custom color pickers ──────────────────── */
.us-custom-colors[b-d71gapcbzw] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.us-color-field label[b-d71gapcbzw] {
    display: block;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #5a7394;
    margin-bottom: 8px;
}

.us-color-row[b-d71gapcbzw] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.us-color-picker[b-d71gapcbzw] {
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    padding: 2px;
    background: var(--dc-input-bg);
}

.us-color-hex[b-d71gapcbzw] {
    font-size: 13px;
    font-family: 'SF Mono', 'Fira Code', monospace;
    color: #8ba3c2;
}

/* ── Notification toggle ──────────────────── */
.us-toggle-row[b-d71gapcbzw] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    gap: 16px;
}

.us-toggle-label[b-d71gapcbzw] {
    font-size: 14px;
    font-weight: 500;
    color: var(--dc-text-normal, #dbdee1);
    margin-bottom: 2px;
}

.us-toggle-hint[b-d71gapcbzw] {
    font-size: 12px;
    color: var(--dc-text-muted, #949ba4);
}

.us-toggle-switch[b-d71gapcbzw] {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    flex-shrink: 0;
}

.us-toggle-switch input[b-d71gapcbzw] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.us-toggle-track[b-d71gapcbzw] {
    width: 44px;
    height: 24px;
    background: var(--dc-bg-tertiary, #1e1f22);
    border-radius: 12px;
    transition: background 0.2s;
    display: flex;
    align-items: center;
    padding: 2px;
}

.us-toggle-switch input:checked + .us-toggle-track[b-d71gapcbzw] {
    background: var(--dc-brand, #5865f2);
}

.us-toggle-thumb[b-d71gapcbzw] {
    width: 20px;
    height: 20px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.2s;
    flex-shrink: 0;
}

.us-toggle-switch input:checked + .us-toggle-track .us-toggle-thumb[b-d71gapcbzw] {
    transform: translateX(20px);
}

/* ── Volume slider ──────────────────────────── */
.us-volume-row[b-d71gapcbzw] {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
}

.us-volume-control[b-d71gapcbzw] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
}

.us-volume-icon[b-d71gapcbzw] {
    font-size: 18px;
    color: var(--dc-text-muted, #949ba4);
    flex-shrink: 0;
    width: 20px;
    text-align: center;
}

.us-volume-slider[b-d71gapcbzw] {
    flex: 1;
    accent-color: var(--dc-brand);
    cursor: pointer;
    height: 4px;
}

.us-volume-pct[b-d71gapcbzw] {
    font-size: 13px;
    color: var(--dc-text-muted, #949ba4);
    min-width: 36px;
    text-align: right;
    flex-shrink: 0;
}

/* ── Integrations tab ─────────────────────── */
.us-int-card[b-d71gapcbzw] {
    background: var(--dc-bg-secondary);
    border: 1px solid rgba(80,150,255,0.08);
    border-radius: 10px;
    padding: 20px;
}

.us-int-card-header[b-d71gapcbzw] {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.us-int-icon[b-d71gapcbzw] {
    font-size: 28px;
    color: var(--dc-brand);
    flex-shrink: 0;
    margin-top: 2px;
}

.us-int-card-info[b-d71gapcbzw] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.us-int-badge[b-d71gapcbzw] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    background: rgba(35,165,90,0.12);
    border: 1px solid rgba(35,165,90,0.25);
    border-radius: 20px;
    color: #23a55a;
    font-size: 12px;
    font-weight: 600;
    flex-shrink: 0;
    white-space: nowrap;
}

.us-int-secret-row[b-d71gapcbzw] {
    display: flex;
    gap: 8px;
    align-items: center;
}

.us-int-secret-row .us-input[b-d71gapcbzw] {
    flex: 1;
}

.us-int-eye-btn[b-d71gapcbzw] {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    background: var(--dc-input-bg);
    border: 1.5px solid rgba(80,150,255,0.1);
    border-radius: 8px;
    color: #5a7394;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s, border-color 0.15s;
}

.us-int-eye-btn:hover[b-d71gapcbzw] {
    color: #8da2ba;
    border-color: rgba(80,150,255,0.25);
}

.us-int-actions[b-d71gapcbzw] {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 4px;
}
/* /Components/Shared/Whiteboard.razor.rz.scp.css */
.wb-root[b-rv78j130ew] {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    background: #1a1b23;
    overflow: hidden;
}

/* ── Toolbar ─────────────────────────────────────────────────────────────── */

.wb-toolbar[b-rv78j130ew] {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 6px 10px;
    background: #111318;
    border-bottom: 1px solid #1e2030;
    flex-shrink: 0;
    flex-wrap: wrap;
}

.wb-tool[b-rv78j130ew] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    color: #8e9297;
    border-radius: 6px;
    cursor: pointer;
    font-size: 16px;
    transition: background .15s, color .15s;
    flex-shrink: 0;
}

.wb-tool:hover[b-rv78j130ew] {
    background: #1e2030;
    color: #dcddde;
}

.wb-tool.active[b-rv78j130ew] {
    background: #5865f2;
    color: #fff;
}

.wb-tool.danger:hover[b-rv78j130ew] {
    background: #ed4245;
    color: #fff;
}

.wb-toolbar-sep[b-rv78j130ew] {
    width: 1px;
    height: 24px;
    background: #1e2030;
    margin: 0 4px;
    flex-shrink: 0;
}

/* ── Color pickers ───────────────────────────────────────────────────────── */

.wb-color-wrap[b-rv78j130ew] {
    display: flex;
    align-items: center;
    gap: 4px;
    position: relative;
    flex-shrink: 0;
}

.wb-color-input[b-rv78j130ew] {
    position: absolute;
    opacity: 0;
    width: 28px;
    height: 28px;
    cursor: pointer;
    border: none;
    padding: 0;
    margin: 0;
}

.wb-color-preview[b-rv78j130ew] {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    cursor: pointer;
    border: 2px solid rgba(255,255,255,.15);
    flex-shrink: 0;
}

.wb-no-fill[b-rv78j130ew] {
    width: 22px;
    height: 22px;
    border: 1px solid #555;
    background: transparent;
    color: #8e9297;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 0;
}

.wb-no-fill.active[b-rv78j130ew],
.wb-no-fill:hover[b-rv78j130ew] {
    color: #fff;
    background: #1e2030;
}

/* ── Stroke width ─────────────────────────────────────────────────────────── */

.wb-width-wrap[b-rv78j130ew] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.wb-range[b-rv78j130ew] {
    width: 80px;
    accent-color: #5865f2;
    cursor: pointer;
}

.wb-width-label[b-rv78j130ew] {
    font-size: 11px;
    color: #8e9297;
    min-width: 18px;
    text-align: right;
}

/* ── Canvas area ─────────────────────────────────────────────────────────── */

.wb-canvas-area[b-rv78j130ew] {
    position: relative;
    flex: 1;
    overflow: hidden;
}

#wb-wrap[b-rv78j130ew] {
    position: absolute;
    inset: 0;
}

#wb-wrap canvas[b-rv78j130ew] {
    display: block;
}

/* ── Cursors overlay ─────────────────────────────────────────────────────── */

#wb-cursors[b-rv78j130ew] {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

[b-rv78j130ew] .wb-cursor {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: flex-end;
    gap: 4px;
    opacity: 0;
    transition: opacity .2s;
    pointer-events: none;
}

[b-rv78j130ew] .wb-cursor.visible {
    opacity: 1;
}

[b-rv78j130ew] .wb-cursor span {
    font-size: 11px;
    color: #fff;
    padding: 2px 6px;
    border-radius: 4px;
    white-space: nowrap;
    margin-bottom: 2px;
}

/* ── Toolbar push spacer ─────────────────────────────────────────────────── */

.wb-toolbar-push[b-rv78j130ew] {
    flex: 1;
}

/* ── Saves panel ─────────────────────────────────────────────────────────── */

.wb-saves-panel[b-rv78j130ew] {
    position: absolute;
    top: 0;
    right: 0;
    width: 280px;
    height: 100%;
    background: #111318;
    border-left: 1px solid #1e2030;
    display: flex;
    flex-direction: column;
    z-index: 10;
    overflow: hidden;
}

.wb-saves-header[b-rv78j130ew] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    border-bottom: 1px solid #1e2030;
    flex-shrink: 0;
}

.wb-saves-title[b-rv78j130ew] {
    font-size: 13px;
    font-weight: 600;
    color: #dcddde;
    display: flex;
    align-items: center;
    gap: 6px;
}

.wb-saves-close[b-rv78j130ew] {
    width: 26px;
    height: 26px;
    border: none;
    background: transparent;
    color: #8e9297;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.wb-saves-close:hover[b-rv78j130ew] {
    background: #1e2030;
    color: #dcddde;
}

/* ── New canvas confirm ───────────────────────────────────────────────────── */

.wb-saves-confirm[b-rv78j130ew] {
    padding: 10px 14px;
    background: #1a1b23;
    border-bottom: 1px solid #1e2030;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.wb-saves-confirm span[b-rv78j130ew] {
    font-size: 12px;
    color: #b9bbbe;
}

.wb-saves-confirm-btns[b-rv78j130ew] {
    display: flex;
    gap: 6px;
}

.wb-saves-confirm-yes[b-rv78j130ew] {
    flex: 1;
    padding: 5px 0;
    border: none;
    border-radius: 4px;
    background: #ed4245;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.wb-saves-confirm-yes:hover[b-rv78j130ew] {
    background: #c03537;
}

.wb-saves-confirm-no[b-rv78j130ew] {
    flex: 1;
    padding: 5px 0;
    border: none;
    border-radius: 4px;
    background: #2c2f3b;
    color: #dcddde;
    font-size: 12px;
    cursor: pointer;
}

.wb-saves-confirm-no:hover[b-rv78j130ew] {
    background: #3a3d4d;
}

.wb-saves-new-btn[b-rv78j130ew] {
    margin: 10px 14px 4px;
    padding: 7px 10px;
    border: 1px dashed #3a3d4d;
    border-radius: 6px;
    background: transparent;
    color: #8e9297;
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    transition: border-color .15s, color .15s;
}

.wb-saves-new-btn:hover[b-rv78j130ew] {
    border-color: #5865f2;
    color: #5865f2;
}

/* ── Save-as row ─────────────────────────────────────────────────────────── */

.wb-saves-saveas-row[b-rv78j130ew] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    flex-shrink: 0;
    border-bottom: 1px solid #1e2030;
}

.wb-saves-name-input[b-rv78j130ew] {
    flex: 1;
    background: #1a1b23;
    border: 1px solid #2c2f3b;
    border-radius: 4px;
    color: #dcddde;
    font-size: 12px;
    padding: 5px 8px;
    outline: none;
}

.wb-saves-name-input:focus[b-rv78j130ew] {
    border-color: #5865f2;
}

.wb-saves-name-input[b-rv78j130ew]::placeholder {
    color: #4f545c;
}

.wb-saves-save-btn[b-rv78j130ew] {
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 4px;
    background: #5865f2;
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background .15s;
}

.wb-saves-save-btn:hover:not(:disabled)[b-rv78j130ew] {
    background: #4752c4;
}

.wb-saves-save-btn:disabled[b-rv78j130ew] {
    opacity: .4;
    cursor: not-allowed;
}

.wb-saves-error[b-rv78j130ew] {
    margin: 4px 14px 0;
    font-size: 11px;
    color: #ed4245;
    flex-shrink: 0;
}

/* ── Save list ───────────────────────────────────────────────────────────── */

.wb-saves-list[b-rv78j130ew] {
    flex: 1;
    overflow-y: auto;
    padding: 6px 0;
}

.wb-saves-list[b-rv78j130ew]::-webkit-scrollbar { width: 4px; }
.wb-saves-list[b-rv78j130ew]::-webkit-scrollbar-track { background: transparent; }
.wb-saves-list[b-rv78j130ew]::-webkit-scrollbar-thumb { background: #2c2f3b; border-radius: 2px; }

.wb-saves-loading[b-rv78j130ew] {
    display: flex;
    justify-content: center;
    padding: 20px 0;
}

.wb-saves-empty[b-rv78j130ew] {
    padding: 20px 14px;
    font-size: 12px;
    color: #4f545c;
    text-align: center;
    line-height: 1.5;
}

.wb-save-row[b-rv78j130ew] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 14px;
    gap: 8px;
    transition: background .12s;
}

.wb-save-row:hover[b-rv78j130ew] {
    background: #1a1b23;
}

.wb-save-row.confirming[b-rv78j130ew] {
    background: rgba(237,66,69,.08);
}

.wb-save-info[b-rv78j130ew] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    cursor: pointer;
    min-width: 0;
}

.wb-save-name[b-rv78j130ew] {
    font-size: 13px;
    color: #dcddde;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wb-save-date[b-rv78j130ew] {
    font-size: 11px;
    color: #72767d;
}

.wb-save-actions[b-rv78j130ew] {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

.wb-save-act-open[b-rv78j130ew],
.wb-save-act-del[b-rv78j130ew],
.wb-save-act-confirm[b-rv78j130ew],
.wb-save-act-cancel[b-rv78j130ew] {
    width: 26px;
    height: 26px;
    border: none;
    border-radius: 4px;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    transition: background .12s, color .12s;
}

.wb-save-act-open[b-rv78j130ew] {
    color: #8e9297;
}

.wb-save-act-open:hover[b-rv78j130ew] {
    background: #1e2030;
    color: #dcddde;
}

.wb-save-act-del[b-rv78j130ew] {
    color: #8e9297;
}

.wb-save-act-del:hover[b-rv78j130ew] {
    background: rgba(237,66,69,.15);
    color: #ed4245;
}

.wb-save-act-confirm[b-rv78j130ew] {
    color: #fff;
    background: #ed4245;
}

.wb-save-act-confirm:hover[b-rv78j130ew] {
    background: #c03537;
}

.wb-save-act-cancel[b-rv78j130ew] {
    color: #8e9297;
}

.wb-save-act-cancel:hover[b-rv78j130ew] {
    background: #1e2030;
    color: #dcddde;
}

/* ── Spinners ────────────────────────────────────────────────────────────── */

.wb-spinner-xs[b-rv78j130ew],
.wb-spinner-sm[b-rv78j130ew] {
    display: inline-block;
    border-radius: 50%;
    border-style: solid;
    border-color: rgba(255,255,255,.2);
    border-top-color: #fff;
    animation: wb-spin-b-rv78j130ew .7s linear infinite;
}

.wb-spinner-xs[b-rv78j130ew] {
    width: 12px;
    height: 12px;
    border-width: 2px;
}

.wb-spinner-sm[b-rv78j130ew] {
    width: 20px;
    height: 20px;
    border-width: 3px;
}

@keyframes wb-spin-b-rv78j130ew {
    to { transform: rotate(360deg); }
}
/* /Components/Shared/WikiChannel.razor.rz.scp.css */
/* ── Root ────────────────────────────────────────────────────────────────── */

.wk-root[b-sso1d1sjgm] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    background: var(--dc-bg-primary);
}

/* ── Empty / error / loading states ─────────────────────────────────────── */

.wk-empty-state[b-sso1d1sjgm] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    gap: 10px;
    padding: 48px 40px;
    text-align: center;
    color: var(--dc-text-muted, #a3a6aa);
}

.wk-empty-state h2[b-sso1d1sjgm] {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--dc-text-normal, #dcddde);
    margin: 0;
}

.wk-empty-state p[b-sso1d1sjgm] {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.6;
    max-width: 380px;
}

.wk-empty-icon[b-sso1d1sjgm] {
    font-size: 56px;
    opacity: 0.2;
    margin-bottom: 8px;
}

.wk-empty-error .wk-empty-icon[b-sso1d1sjgm] { color: var(--dc-red, #f23f42); opacity: 0.5; }

.wk-retry-btn[b-sso1d1sjgm] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    padding: 8px 18px;
    background: var(--dc-brand);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s;
}
.wk-retry-btn:hover[b-sso1d1sjgm] { background: var(--dc-brand-hover); }

/* ── Spinners ────────────────────────────────────────────────────────────── */

.wk-spinner[b-sso1d1sjgm] {
    display: inline-block;
    width: 28px;
    height: 28px;
    border: 3px solid rgba(255,255,255,0.1);
    border-top-color: var(--dc-brand);
    border-radius: 50%;
    animation: wk-spin-b-sso1d1sjgm 0.7s linear infinite;
}
.wk-spinner-xs[b-sso1d1sjgm] { width: 12px; height: 12px; border-width: 2px; flex-shrink: 0; }

@keyframes wk-spin-b-sso1d1sjgm { to { transform: rotate(360deg); } }

/* ── Two-column layout ───────────────────────────────────────────────────── */

.wk-layout[b-sso1d1sjgm] {
    display: flex;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

/* ── Sidebar ─────────────────────────────────────────────────────────────── */

.wk-nav[b-sso1d1sjgm] {
    width: 240px;
    min-width: 240px;
    display: flex;
    flex-direction: column;
    background: var(--dc-bg-secondary);
    border-right: 1px solid rgba(255,255,255,0.06);
    overflow: hidden;
}

.wk-nav-scroll[b-sso1d1sjgm] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 6px 0 12px;
    display: flex;
    flex-direction: column;
}

/* ── Nav top action bar ──────────────────────────────────────────────────── */

.wk-nav-top-actions[b-sso1d1sjgm] {
    display: flex;
    align-items: center;
    padding: 8px 10px 4px;
    flex-shrink: 0;
}

.wk-new-section-btn[b-sso1d1sjgm] {
    display: flex;
    align-items: center;
    gap: 5px;
    width: 100%;
    padding: 5px 8px;
    background: transparent;
    border: 1px dashed rgba(255,255,255,0.1);
    border-radius: 5px;
    color: var(--dc-text-muted, #a3a6aa);
    font-size: 0.8rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.wk-new-section-btn:hover[b-sso1d1sjgm] {
    background: var(--dc-bg-modifier-hover);
    color: var(--dc-text-normal, #dcddde);
    border-color: rgba(255,255,255,0.2);
}

/* ── Nav empty / info ────────────────────────────────────────────────────── */

.wk-nav-empty[b-sso1d1sjgm] {
    font-size: 0.8rem;
    color: var(--dc-text-muted, #a3a6aa);
    padding: 12px 14px;
    text-align: center;
    line-height: 1.6;
}


/* ── Content panel ───────────────────────────────────────────────────────── */

.wk-content[b-sso1d1sjgm] {
    flex: 1;
    min-width: 0;
    overflow-y: auto;
    background: var(--dc-bg-primary);
    display: flex;
    flex-direction: column;
}

.wk-page-wrap[b-sso1d1sjgm] {
    padding: 40px 48px 80px;
    max-width: 860px;
    width: 100%;
}

.wk-page-header[b-sso1d1sjgm] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 28px;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(255,255,255,0.07);
}

.wk-page-title[b-sso1d1sjgm] {
    font-size: 1.9rem;
    font-weight: 800;
    color: #f2f3f5;
    margin: 0;
    line-height: 1.25;
    flex: 1;
    min-width: 0;
}

.wk-page-header-actions[b-sso1d1sjgm] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    margin-top: 6px;
}

.wk-edit-btn[b-sso1d1sjgm] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 5px;
    color: var(--dc-text-muted, #a3a6aa);
    font-size: 0.8rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
}
.wk-edit-btn:hover[b-sso1d1sjgm] { background: rgba(255,255,255,0.1); color: var(--dc-text-normal, #dcddde); }

.wk-delete-btn[b-sso1d1sjgm] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 5px;
    color: var(--dc-text-muted, #a3a6aa);
    font-size: 0.85rem;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.wk-delete-btn:hover[b-sso1d1sjgm] { background: rgba(242,63,66,0.15); color: #f23f42; border-color: rgba(242,63,66,0.3); }

.wk-delete-confirm[b-sso1d1sjgm] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    color: var(--dc-text-muted, #a3a6aa);
}
.wk-delete-yes[b-sso1d1sjgm], .wk-delete-no[b-sso1d1sjgm] {
    padding: 3px 10px;
    border-radius: 4px;
    border: none;
    font-size: 0.8rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
}
.wk-delete-yes[b-sso1d1sjgm] { background: #f23f42; color: #fff; }
.wk-delete-yes:hover[b-sso1d1sjgm] { background: #c0302f; }
.wk-delete-no[b-sso1d1sjgm]  { background: rgba(255,255,255,0.08); color: var(--dc-text-muted, #a3a6aa); }
.wk-delete-no:hover[b-sso1d1sjgm] { background: rgba(255,255,255,0.13); color: var(--dc-text-normal, #dcddde); }

.wk-page-empty-content[b-sso1d1sjgm] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 20px 0;
    font-size: 0.9rem;
    color: var(--dc-text-muted, #a3a6aa);
    font-style: italic;
}

/* ── Prose (rendered markdown) ───────────────────────────────────────────── */

.wk-prose[b-sso1d1sjgm] {
    color: #c8cdd4;
    font-size: 0.95rem;
    line-height: 1.75;
}

.wk-prose h1[b-sso1d1sjgm], .wk-prose h2[b-sso1d1sjgm], .wk-prose h3[b-sso1d1sjgm],
.wk-prose h4[b-sso1d1sjgm], .wk-prose h5[b-sso1d1sjgm], .wk-prose h6[b-sso1d1sjgm] {
    color: #e8eaed;
    font-weight: 700;
    line-height: 1.3;
    margin: 1.8em 0 0.5em;
}
.wk-prose h1[b-sso1d1sjgm] { font-size: 1.6rem; }
.wk-prose h2[b-sso1d1sjgm] { font-size: 1.3rem; border-bottom: 1px solid rgba(255,255,255,0.07); padding-bottom: 6px; }
.wk-prose h3[b-sso1d1sjgm] { font-size: 1.1rem; }
.wk-prose h4[b-sso1d1sjgm] { font-size: 1rem; }

.wk-prose p[b-sso1d1sjgm] { margin: 0.75em 0; }

.wk-prose a[b-sso1d1sjgm] { color: var(--dc-brand); text-decoration: none; }
.wk-prose a:hover[b-sso1d1sjgm] { text-decoration: underline; }

.wk-prose strong[b-sso1d1sjgm] { color: #e8eaed; font-weight: 700; }
.wk-prose em[b-sso1d1sjgm] { font-style: italic; }

.wk-prose ul[b-sso1d1sjgm], .wk-prose ol[b-sso1d1sjgm] { padding-left: 1.6em; margin: 0.75em 0; }
.wk-prose li[b-sso1d1sjgm] { margin: 0.3em 0; }

.wk-prose blockquote[b-sso1d1sjgm] {
    border-left: 3px solid var(--dc-brand);
    margin: 1em 0;
    padding: 0.5em 1.2em;
    background: rgba(255,255,255,0.03);
    border-radius: 0 4px 4px 0;
    color: var(--dc-text-muted, #a3a6aa);
}

.wk-prose pre[b-sso1d1sjgm] {
    background: #0d0f13;
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 6px;
    padding: 1em 1.2em;
    overflow-x: auto;
    margin: 1em 0;
    font-size: 0.84rem;
    line-height: 1.6;
}

.wk-prose code[b-sso1d1sjgm] {
    font-family: 'JetBrains Mono', 'Consolas', monospace;
    background: rgba(255,255,255,0.07);
    border-radius: 3px;
    padding: 1px 5px;
    font-size: 0.875em;
    color: #e06c75;
}

.wk-prose pre code[b-sso1d1sjgm] {
    background: transparent;
    padding: 0;
    color: #abb2bf;
    font-size: inherit;
}

.wk-prose table[b-sso1d1sjgm] {
    width: 100%;
    border-collapse: collapse;
    margin: 1.2em 0;
    font-size: 0.9rem;
}
.wk-prose th[b-sso1d1sjgm] {
    background: rgba(255,255,255,0.06);
    padding: 8px 14px;
    text-align: left;
    border: 1px solid rgba(255,255,255,0.1);
    font-weight: 600;
    color: #e8eaed;
}
.wk-prose td[b-sso1d1sjgm] {
    padding: 8px 14px;
    border: 1px solid rgba(255,255,255,0.07);
}
.wk-prose tr:nth-child(even) td[b-sso1d1sjgm] { background: rgba(255,255,255,0.02); }

.wk-prose img[b-sso1d1sjgm] { max-width: 100%; border-radius: 6px; margin: 0.5em 0; }

.wk-prose hr[b-sso1d1sjgm] {
    border: none;
    border-top: 1px solid rgba(255,255,255,0.09);
    margin: 1.8em 0;
}

/* ── Editor ──────────────────────────────────────────────────────────────── */

.wk-editor[b-sso1d1sjgm] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.wk-editor-bar[b-sso1d1sjgm] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    background: var(--dc-bg-secondary);
    border-bottom: 1px solid rgba(255,255,255,0.07);
    flex-shrink: 0;
    min-height: 44px;
}

.wk-editor-back[b-sso1d1sjgm] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    background: transparent;
    border: none;
    border-radius: 4px;
    color: var(--dc-text-muted, #a3a6aa);
    font-size: 0.82rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.12s, color 0.12s;
}
.wk-editor-back:hover[b-sso1d1sjgm] { background: var(--dc-bg-modifier-hover); color: var(--dc-text-normal, #dcddde); }

.wk-editor-context[b-sso1d1sjgm] {
    flex: 1;
    min-width: 0;
    font-size: 0.85rem;
    color: var(--dc-text-muted, #a3a6aa);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.wk-editor-context strong[b-sso1d1sjgm] { color: var(--dc-text-normal, #dcddde); font-weight: 600; }

.wk-editor-actions[b-sso1d1sjgm] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.wk-editor-err[b-sso1d1sjgm] {
    font-size: 0.8rem;
    color: #f23f42;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wk-editor-btn-cancel[b-sso1d1sjgm] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 12px;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 5px;
    color: var(--dc-text-muted, #a3a6aa);
    font-size: 0.82rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
}
.wk-editor-btn-cancel:hover:not(:disabled)[b-sso1d1sjgm] { background: var(--dc-bg-modifier-hover); color: var(--dc-text-normal, #dcddde); }
.wk-editor-btn-cancel:disabled[b-sso1d1sjgm] { opacity: 0.45; cursor: not-allowed; }

.wk-editor-btn-save[b-sso1d1sjgm] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 14px;
    background: var(--dc-brand, #5865f2);
    border: none;
    border-radius: 5px;
    color: #fff;
    font-size: 0.82rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.12s, opacity 0.12s;
}
.wk-editor-btn-save:hover:not(:disabled)[b-sso1d1sjgm] { background: var(--dc-brand-hover, #4752c4); }
.wk-editor-btn-save:disabled[b-sso1d1sjgm],
.wk-editor-btn-save.working[b-sso1d1sjgm] { opacity: 0.55; cursor: not-allowed; }

.wk-editor-title-input[b-sso1d1sjgm] {
    width: 100%;
    box-sizing: border-box;
    padding: 20px 48px 12px;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    outline: none;
    color: #f2f3f5;
    font-size: 1.7rem;
    font-weight: 800;
    font-family: inherit;
    flex-shrink: 0;
}
.wk-editor-title-input[b-sso1d1sjgm]::placeholder { color: rgba(255,255,255,0.2); }

.wk-editor-textarea[b-sso1d1sjgm] {
    flex: 1;
    min-height: 0;
    width: 100%;
    box-sizing: border-box;
    padding: 20px 48px;
    background: transparent;
    border: none;
    outline: none;
    resize: none;
    color: #c8cdd4;
    font-size: 0.92rem;
    font-family: 'JetBrains Mono', 'Consolas', 'Menlo', monospace;
    line-height: 1.7;
    caret-color: var(--dc-brand, #5865f2);
}
.wk-editor-textarea[b-sso1d1sjgm]::placeholder { color: rgba(255,255,255,0.18); }

/* ── Quill rich-text editor (full-height dark theme) ─────────────────────── */

.wk-editor-quill-wrap[b-sso1d1sjgm] {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Toolbar */
[b-sso1d1sjgm] .ql-toolbar.ql-snow {
    background: #1e1f26;
    border: none;
    border-bottom: 1px solid #3a3c45;
    padding: 6px 48px;
    flex-shrink: 0;
}

[b-sso1d1sjgm] .ql-toolbar.ql-snow .ql-formats { margin-right: 10px; }

[b-sso1d1sjgm] .ql-toolbar.ql-snow button,
[b-sso1d1sjgm] .ql-toolbar.ql-snow .ql-picker-label {
    color: #b9bbbe;
    padding: 2px 4px;
    border-radius: 3px;
}

[b-sso1d1sjgm] .ql-toolbar.ql-snow button:hover,
[b-sso1d1sjgm] .ql-toolbar.ql-snow .ql-picker-label:hover,
[b-sso1d1sjgm] .ql-toolbar.ql-snow button.ql-active,
[b-sso1d1sjgm] .ql-toolbar.ql-snow .ql-picker-label.ql-active {
    color: #fff;
    background: rgba(255,255,255,0.08);
}

[b-sso1d1sjgm] .ql-toolbar.ql-snow button svg .ql-stroke,
[b-sso1d1sjgm] .ql-toolbar.ql-snow .ql-picker-label svg .ql-stroke { stroke: currentColor; }
[b-sso1d1sjgm] .ql-toolbar.ql-snow button svg .ql-fill { fill: currentColor; }

/* Container — fills remaining height */
[b-sso1d1sjgm] .ql-container.ql-snow {
    flex: 1;
    min-height: 0;
    border: none;
    font-family: inherit;
    font-size: 0.95rem;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Editor area — scrollable */
[b-sso1d1sjgm] .ql-editor {
    flex: 1;
    overflow-y: auto;
    padding: 20px 48px;
    color: #c8cdd4;
    line-height: 1.75;
}

[b-sso1d1sjgm] .ql-editor.ql-blank::before {
    color: rgba(255,255,255,0.2);
    font-style: italic;
    left: 48px;
}

[b-sso1d1sjgm] .ql-editor h1 { color: #f2f3f5; font-size: 1.6rem; margin: 1.4em 0 0.4em; }
[b-sso1d1sjgm] .ql-editor h2 { color: #e8eaed; font-size: 1.3rem; margin: 1.2em 0 0.4em; border-bottom: 1px solid rgba(255,255,255,0.07); padding-bottom: 4px; }
[b-sso1d1sjgm] .ql-editor h3 { color: #e8eaed; font-size: 1.1rem; margin: 1em 0 0.4em; }

[b-sso1d1sjgm] .ql-editor a { color: var(--dc-brand, #5865f2); }
[b-sso1d1sjgm] .ql-editor a:hover { text-decoration: underline; }

[b-sso1d1sjgm] .ql-editor blockquote {
    border-left: 3px solid var(--dc-brand, #5865f2);
    padding-left: 12px;
    margin-left: 0;
    color: #8da2ba;
    background: rgba(255,255,255,0.02);
}

[b-sso1d1sjgm] .ql-editor code,
[b-sso1d1sjgm] .ql-editor pre.ql-syntax {
    background: #0d0f13;
    color: #e3e5e8;
    border-radius: 4px;
    font-family: 'JetBrains Mono', 'Consolas', monospace;
}
[b-sso1d1sjgm] .ql-editor pre.ql-syntax { padding: 10px 14px; font-size: 0.85rem; }

/* Picker dropdown */
[b-sso1d1sjgm] .ql-snow .ql-picker-options {
    background: #2b2d38;
    border: 1px solid #3a3c45;
    border-radius: 6px;
    color: #dcddde;
}
[b-sso1d1sjgm] .ql-snow .ql-picker-item { color: #dcddde; }
[b-sso1d1sjgm] .ql-snow .ql-picker-item:hover { background: rgba(255,255,255,0.08); }

/* Link tooltip */
[b-sso1d1sjgm] .ql-snow .ql-tooltip {
    background: #2b2d38;
    border: 1px solid #3a3c45;
    border-radius: 6px;
    color: #c8cdd4;
    box-shadow: 0 4px 16px rgba(0,0,0,0.4);
}
[b-sso1d1sjgm] .ql-snow .ql-tooltip input[type=text] {
    background: #1a1b23;
    border: 1px solid #3a3c45;
    color: #c8cdd4;
    border-radius: 4px;
}
[b-sso1d1sjgm] .ql-snow .ql-tooltip a.ql-action,
[b-sso1d1sjgm] .ql-snow .ql-tooltip a.ql-remove { color: var(--dc-brand, #5865f2); }
/* /Components/Shared/WikiTreeNode.razor.rz.scp.css */
/* ── Tree section wrapper ────────────────────────────────────────────────── */

.wk-tree-section-wrap[b-yogmol5gck] { padding: 1px 0; }

.wk-tree-row-wrap[b-yogmol5gck] {
    display: flex;
    align-items: center;
    position: relative;
}

.wk-tree-row-wrap .wk-tree-row[b-yogmol5gck] { flex: 1; min-width: 0; padding-right: 50px; }

/* ── Base row ────────────────────────────────────────────────────────────── */

.wk-tree-row[b-yogmol5gck] {
    display: flex;
    align-items: center;
    gap: 5px;
    width: 100%;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 5px 10px 5px 8px;
    text-align: left;
    border-radius: 4px;
    color: var(--dc-text-normal, #dcddde);
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 500;
    transition: background 0.1s;
}
.wk-tree-row:hover[b-yogmol5gck] { background: var(--dc-bg-modifier-hover); }

.wk-tree-caret[b-yogmol5gck] {
    font-size: 0.68rem;
    color: var(--dc-text-muted, #a3a6aa);
    transition: transform 0.15s;
    flex-shrink: 0;
    width: 12px;
}
.wk-tree-caret.open[b-yogmol5gck] { transform: rotate(90deg); }

.wk-tree-label[b-yogmol5gck] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}

/* ── Section row ─────────────────────────────────────────────────────────── */

.wk-tree-section-row[b-yogmol5gck] { font-weight: 600; font-size: 0.875rem; color: #e3e5e8; }
.wk-tree-sec-icon[b-yogmol5gck]    { font-size: 0.85rem; color: var(--dc-brand); flex-shrink: 0; }

/* ── Action buttons (+ page, + sub-section) ─────────────────────────────── */

.wk-tree-sec-actions[b-yogmol5gck] {
    position: absolute;
    right: 4px;
    display: flex;
    align-items: center;
    gap: 2px;
    opacity: 0;
    transition: opacity 0.12s;
}
.wk-tree-row-wrap:hover .wk-tree-sec-actions[b-yogmol5gck] { opacity: 1; }

.wk-tree-new-btn[b-yogmol5gck] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 4px;
    color: var(--dc-text-muted, #a3a6aa);
    font-size: 0.7rem;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
}
.wk-tree-new-btn:hover[b-yogmol5gck] { background: var(--dc-brand); color: #fff; }

/* ── Page row ────────────────────────────────────────────────────────────── */

.wk-tree-page-row[b-yogmol5gck] {
    font-weight: 400;
    color: var(--dc-text-muted, #a3a6aa);
    font-size: 0.83rem;
}
.wk-tree-page-row:hover[b-yogmol5gck] { color: var(--dc-text-normal, #dcddde); }
.wk-tree-page-row.selected[b-yogmol5gck] {
    background: var(--dc-bg-modifier-selected, rgba(88,101,242,0.2));
    color: #fff;
}

.wk-tree-page-icon[b-yogmol5gck] { font-size: 0.8rem; flex-shrink: 0; }

/* ── Empty section hint ──────────────────────────────────────────────────── */

.wk-tree-section-empty[b-yogmol5gck] {
    font-size: 0.78rem;
    color: rgba(255,255,255,0.2);
    font-style: italic;
    padding: 3px 10px;
}