@import '_content/RTUB.Shared/RTUB.Shared.q9vl9dg580.bundle.scp.css';

/* /Components/Portal/AboutUsContent.razor.rz.scp.css */
/* Video modal styles (matches Events.razor pattern) */
.video-player-container[b-ii78imh7el] {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #000;
    border-radius: 8px;
    overflow: hidden;
}

.modal-video[b-ii78imh7el] {
    width: 100%;
    max-width: 100%;
    max-height: 70vh;
    display: block;
}

.video-selector[b-ii78imh7el] {
    margin-bottom: 1rem;
}

.video-selector .list-group-item[b-ii78imh7el] {
    cursor: pointer;
    transition: background-color 0.2s;
}

.video-selector .list-group-item:hover:not(.active)[b-ii78imh7el] {
    background-color: var(--bs-primary); /* Purple hover using theme color */
    color: white;
}

.video-selector .list-group-item.active[b-ii78imh7el] {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
    color: white;
}

/* Video title truncation to prevent overflow */
.video-selector .list-group-item[b-ii78imh7el] {
    padding-right: 1rem;
    overflow: hidden;
}

.video-selector .video-title-content[b-ii78imh7el] {
    display: inline-block;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
}

/* Responsive video sizing for modal */
@media (max-width: 768px) {
    .modal-video[b-ii78imh7el] {
        max-height: 50vh;
    }
    
    /* Mobile/PWA optimizations for video list */
    .video-selector .list-group-item[b-ii78imh7el] {
        padding: 0.75rem 1rem;
        font-size: 0.95rem;
    }
}

@media (min-width: 769px) {
    .modal-video[b-ii78imh7el] {
        max-height: 70vh;
    }
}

/* PWA-specific improvements for standalone mode */
@media (display-mode: standalone) {
    .video-player-container[b-ii78imh7el] {
        /* Account for safe areas on mobile devices */
        padding-bottom: env(safe-area-inset-bottom);
    }
    
    .modal-video[b-ii78imh7el] {
        /* Optimize for full-screen PWA experience */
        max-height: calc(80vh - env(safe-area-inset-bottom));
    }
}

/* ========================================
   ABOUT US CONTENT STYLES (migrated from global)
   ======================================== */

/* About Us Container — Glassmorphism */
.about-us-container[b-ii78imh7el] {
    max-width: 900px;
    margin: 0 auto;
    padding: 2rem;
    background: rgba(30, 30, 35, 0.65);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(111, 66, 193, 0.15);
    border-radius: 1rem;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.about-us-container:hover[b-ii78imh7el] {
    border-color: rgba(111, 66, 193, 0.3);
    box-shadow: 0 4px 24px rgba(111, 66, 193, 0.08);
}

.about-us-header[b-ii78imh7el] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 1rem;
}

.about-us-title[b-ii78imh7el] {
    font-size: 2.5rem;
    font-weight: 700;
    color: #e2e2e2;
    margin: 0;
}

.about-us-title[b-ii78imh7el]::first-letter {
    text-transform: uppercase;
}

.about-us-divider[b-ii78imh7el] {
    height: 3px;
    background: linear-gradient(90deg, transparent, #6f42c1, transparent);
    border-radius: 2px;
    margin-bottom: 1.75rem;
}

.about-us-content[b-ii78imh7el] {
    line-height: 1.8;
    font-size: 1.0625rem;
    color: #e2e2e2;
    text-align: left;
}

.about-us-content[b-ii78imh7el]::first-line {
    font-size: 1.15rem;
    color: #f0f0f0;
    font-weight: 500;
}

/* Mobile responsive styles for About Us */
@media (max-width: 768px) {
    .about-us-container[b-ii78imh7el] {
        padding: 1.5rem;
        border-radius: 0.75rem;
        margin: 0 1rem;
    }

    .about-us-title[b-ii78imh7el] {
        font-size: 1.875rem;
    }

    .about-us-header[b-ii78imh7el] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .about-us-content[b-ii78imh7el] {
        font-size: 1rem;
        line-height: 1.7;
    }

    .about-us-content[b-ii78imh7el]::first-line {
        font-size: 1.0625rem;
    }
}

@media (max-width: 375px) {
    .about-us-container[b-ii78imh7el] {
        padding: 1.25rem;
        margin: 0 0.75rem;
    }

    .about-us-title[b-ii78imh7el] {
        font-size: 1.625rem;
    }
}
/* /Components/Portal/FitabContent.razor.rz.scp.css */
/* FITAB Content Styles
   Migrated from wwwroot/css/4-pages/fitab.css
   (outer container handled by .portal-card,
    inner cards handled by .portal-inner-card) */

/* Features list styling */
.fitab-features-list[b-763kw6l8ui] {
    list-style: none;
    padding: 0;
    margin: 0;
}

[b-763kw6l8ui] .fitab-features-list li {
    font-size: 1rem;
    line-height: 1.8;
    color: #e2e2e2;
    padding: 0.5rem 0 0.5rem 2rem;
    position: relative;
    text-align: left;
}

[b-763kw6l8ui] .fitab-features-list li::before {
    content: "▸";
    position: absolute;
    left: 0;
    color: var(--bs-primary);
    font-size: 1.2rem;
}
/* /Components/Portal/HierarchyContent.razor.rz.scp.css */
/* Hierarchy Content Styles
   Migrated from wwwroot/css/4-pages/hierarchy.css
   (outer container handled by .portal-card) */

/* Stage Cards Grid */
.hierarchy-grid[b-1f12s5jf9w] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-top: 1rem;
}

/* Stage Card */
.hierarchy-card[b-1f12s5jf9w] {
    background-color: rgba(21, 21, 22, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    display: flex;
    flex-direction: column;
    position: relative;
    height: 100%;
}

.hierarchy-card:hover[b-1f12s5jf9w],
.hierarchy-card:focus-within[b-1f12s5jf9w] {
    transform: translateY(-4px);
    box-shadow: 0 6px 16px rgba(var(--bs-primary-rgb), 0.3);
}

/* Card Image */
.hierarchy-card-image-wrapper[b-1f12s5jf9w] {
    position: relative;
    width: 100%;
    height: 250px; /* Fallback for browsers without aspect-ratio support */
    overflow: hidden;
    background-color: rgba(0, 0, 0, 0.3);
}

@supports (aspect-ratio: 4 / 3) {
    .hierarchy-card-image-wrapper[b-1f12s5jf9w] {
        height: auto;
        aspect-ratio: 4 / 3;
    }
}

.hierarchy-card-image[b-1f12s5jf9w] {
    width: 100%;
    height: 100%;
    min-height: 250px; /* Ensure minimum height */
    object-fit: cover;
    object-position: center;
    display: block;
}

/* Card Content */
.hierarchy-card-content[b-1f12s5jf9w] {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

/* Stage Badge */
.hierarchy-stage-badge[b-1f12s5jf9w] {
    display: inline-block;
    margin-bottom: 0.75rem;
}

/* Card Header with Edit Button */
.hierarchy-card-header[b-1f12s5jf9w] {
    display: flex;
    justify-content: space-between;
    align-items: start;
    margin-bottom: 0.75rem;
}

.hierarchy-card-title[b-1f12s5jf9w] {
    font-size: 1.25rem;
    font-weight: 600;
    color: #e2e2e2;
    margin: 0;
    flex: 1;
}

.hierarchy-edit-button[b-1f12s5jf9w] {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    background-color: rgba(var(--bs-primary-rgb), 0.9);
    border: none;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease;
    z-index: 2;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.hierarchy-edit-button:hover[b-1f12s5jf9w],
.hierarchy-edit-button:focus[b-1f12s5jf9w] {
    background-color: var(--bs-primary);
    transform: scale(1.1);
}

.hierarchy-edit-button:focus[b-1f12s5jf9w] {
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
}

/* Card Description */
.hierarchy-card-description-wrapper[b-1f12s5jf9w] {
    display: flex;
    justify-content: space-between;
    align-items: start;
    gap: 0.5rem;
}

.hierarchy-card-description[b-1f12s5jf9w] {
    font-size: 1rem;
    line-height: 1.6;
    color: #e2e2e2;
    margin: 0;
    flex: 1;
    text-align: left;
}

.hierarchy-description-edit[b-1f12s5jf9w] {
    flex-shrink: 0;
}

/* Responsive Breakpoints */
@media (max-width: 768px) {
    .hierarchy-grid[b-1f12s5jf9w] {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }

    .hierarchy-card-content[b-1f12s5jf9w] {
        padding: 1.25rem;
    }
}

@media (max-width: 375px) {
    .hierarchy-grid[b-1f12s5jf9w] {
        gap: 1rem;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .hierarchy-grid[b-1f12s5jf9w] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1025px) {
    .hierarchy-grid[b-1f12s5jf9w] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1400px) {
    .hierarchy-grid[b-1f12s5jf9w] {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Accessibility */
.hierarchy-card:focus-within .hierarchy-edit-button[b-1f12s5jf9w] {
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
}

[b-1f12s5jf9w] .hierarchy-card-image-wrapper img[alt]:empty::after {
    content: attr(alt);
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #e2e2e2;
    font-size: 0.875rem;
}
/* /Components/Portal/HistoryContent.razor.rz.scp.css */
/* ============================================
   A NOSSA HISTÓRIA (HISTORY) CONTENT STYLES
   Migrated from wwwroot/css/4-pages/history.css
   (outer container handled by .portal-card)
   ============================================ */

/* Timeline inner card — left accent border */
.history-timeline-inner[b-1o02kweu2l] {
    border-left: 4px solid var(--bs-primary);
}

/* Closing Callout Section */
.closing-callout[b-1o02kweu2l] {
    background: linear-gradient(135deg, rgba(var(--bs-primary-rgb), 0.2) 0%, rgba(90, 47, 158, 0.2) 100%);
    border: 1px solid rgba(var(--bs-primary-rgb), 0.3);
    border-radius: 0.75rem;
    padding: 2rem;
    box-shadow: 0 4px 8px rgba(var(--bs-primary-rgb), 0.2);
}

.closing-content[b-1o02kweu2l] {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    color: #e2e2e2;
}

[b-1o02kweu2l] .closing-content i {
    font-size: 2rem;
    color: var(--bs-primary);
    margin-top: 0.25rem;
    flex-shrink: 0;
}

.closing-text-wrapper[b-1o02kweu2l] {
    flex: 1;
}

.closing-title[b-1o02kweu2l] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #e2e2e2;
    margin: 0;
}

.closing-text[b-1o02kweu2l] {
    font-size: 1.0625rem;
    line-height: 1.8;
    color: #e2e2e2;
    margin: 0;
    text-align: left;
}

/* Responsive */
@media (max-width: 768px) {
    .closing-callout[b-1o02kweu2l] {
        padding: 1.5rem;
    }

    .closing-title[b-1o02kweu2l] {
        font-size: 1.25rem;
    }
}

@media (max-width: 375px) {
    .closing-callout[b-1o02kweu2l] {
        padding: 1.25rem;
    }

    .closing-title[b-1o02kweu2l] {
        font-size: 1.125rem;
    }
}
/* /Components/Portal/JoinUsContent.razor.rz.scp.css */
/* ============================================
   JUNTA-TE A NÓS (JOIN US) CONTENT STYLES
   Migrated from wwwroot/css/4-pages/join-us.css
   (outer container handled by .portal-card)
   ============================================ */

/* How-to section title */
.how-to-title[b-3ws8g714mq] {
    font-size: 1.25rem;
    font-weight: 600;
    color: #e2e2e2;
    margin: 0;
}

.how-to-icon[b-3ws8g714mq] {
    font-size: 1.25rem;
    color: var(--bs-primary);
    flex-shrink: 0;
}

/* Motivational Banner */
.motivation-banner[b-3ws8g714mq] {
    padding: 1.75rem 2rem;
    background: linear-gradient(135deg, var(--bs-primary) 0%, #8b5cf6 100%);
    border-radius: 0.75rem;
    box-shadow: 0 4px 12px rgba(var(--bs-primary-rgb), 0.4);
    position: relative;
    overflow: hidden;
}

.motivation-banner[b-3ws8g714mq]::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
    animation: pulse-b-3ws8g714mq 3s ease-in-out infinite;
}

@keyframes pulse-b-3ws8g714mq {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

.motivation-content[b-3ws8g714mq] {
    display: flex;
    align-items: center;
    color: #ffffff;
    font-size: 1.25rem;
    position: relative;
    z-index: 1;
}

[b-3ws8g714mq] .motivation-content i {
    font-size: 2rem;
    color: #ffd700;
}

[b-3ws8g714mq] .motivation-content strong {
    white-space: pre-wrap;
}

.motivation-edit-button[b-3ws8g714mq] {
    position: relative;
    z-index: 2;
}

/* Responsive */
@media (max-width: 768px) {
    .motivation-banner[b-3ws8g714mq] {
        padding: 1.5rem;
    }
}

@media (max-width: 375px) {
    .motivation-banner[b-3ws8g714mq] {
        padding: 1.25rem;
    }
}
/* /Components/ReconnectModal.razor.rz.scp.css */
/* ReconnectModal Scoped Styles - Moved from inline for better performance */

.reconnect-modal[b-jrkkrns1y0] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

/* Show modal during reconnection states */
:global(body.components-reconnect-show) .reconnect-modal[b-jrkkrns1y0],
:global(body.components-reconnect-failed) .reconnect-modal[b-jrkkrns1y0],
:global(body.components-reconnect-rejected) .reconnect-modal[b-jrkkrns1y0] {
    display: flex;
}

/* Loading state - show logo */
:global(body.components-reconnect-show) .reconnect-logo[b-jrkkrns1y0] {
    display: flex;
    justify-content: center;
}

.reconnect-content[b-jrkkrns1y0] {
    background: white;
    border-radius: 12px;
    padding: 2rem;
    text-align: center;
    max-width: 400px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.reconnect-icon[b-jrkkrns1y0] {
    font-size: 3rem;
    color: #dc3545;
    margin-bottom: 1rem;
}

.reconnect-title[b-jrkkrns1y0] {
    color: #212529;
    margin-bottom: 0.5rem;
    font-size: 1.5rem;
    font-weight: 600;
}

.reconnect-message[b-jrkkrns1y0] {
    color: #6c757d;
    margin-bottom: 1.5rem;
}

.reconnect-logo[b-jrkkrns1y0] {
    display: none;
    margin: 1rem 0 1.25rem;
}

.reconnect-logo img[b-jrkkrns1y0] {
    width: 72px;
    height: 72px;
    object-fit: contain;
}

.reconnect-message-pwa[b-jrkkrns1y0] {
    display: none;
}

.reconnect-spinner[b-jrkkrns1y0] {
    display: flex;
    justify-content: center;
}

.reconnect-reload[b-jrkkrns1y0] {
    display: none;
    margin-top: 1.5rem;
    padding: 0.6rem 1.6rem;
    font-weight: 600;
}

/* Failed and rejected states - common styles */
:global(body.components-reconnect-failed) .reconnect-message[b-jrkkrns1y0]::after,
:global(body.components-reconnect-rejected) .reconnect-message[b-jrkkrns1y0]::after {
    content: " Por favor, recarregue a página.";
    display: block;
    margin-top: 0.5rem;
    font-weight: 600;
}

/* Failed state - specific styles */
:global(body.components-reconnect-failed) .reconnect-title[b-jrkkrns1y0]::after {
    content: " - Falha";
}

/* Rejected state - specific styles */
:global(body.components-reconnect-rejected) .reconnect-icon[b-jrkkrns1y0] {
    color: #ffc107;
}

:global(body.components-reconnect-rejected) .reconnect-title[b-jrkkrns1y0]::after {
    content: " - Rejeitada";
}

/* PWA-specific styling */
:global(html.pwa-mode) .reconnect-modal[b-jrkkrns1y0] {
    background: rgba(6, 10, 20, 0.9);
    backdrop-filter: blur(6px);
}

:global(html.pwa-mode) .reconnect-content[b-jrkkrns1y0] {
    background: #0f1118;
    color: #ffffff;
    border-radius: 18px;
    max-width: 320px;
    padding: 2.25rem 1.75rem;
    border: 2px solid #7c4dff;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.55);
}

:global(html.pwa-mode) .reconnect-title[b-jrkkrns1y0] {
    color: #ffffff;
}

:global(html.pwa-mode) .reconnect-message-default[b-jrkkrns1y0] {
    display: none;
}

:global(html.pwa-mode) .reconnect-message-pwa[b-jrkkrns1y0] {
    display: block;
    color: #ffffff;
}

:global(html.pwa-mode) .reconnect-icon[b-jrkkrns1y0] {
    color: #ffffff;
}

:global(html.pwa-mode) .reconnect-message[b-jrkkrns1y0] {
    color: #ffffff;
}

:global(html.pwa-mode) .reconnect-reload[b-jrkkrns1y0] {
    background: #6f42c1;
    border-color: #6f42c1;
}

:global(html.pwa-mode) .reconnect-reload:hover[b-jrkkrns1y0],
:global(html.pwa-mode) .reconnect-reload:focus[b-jrkkrns1y0] {
    background: #5b34a1;
    border-color: #5b34a1;
}

:global(html.pwa-mode body.components-reconnect-failed) .reconnect-reload[b-jrkkrns1y0],
:global(html.pwa-mode body.components-reconnect-rejected) .reconnect-reload[b-jrkkrns1y0] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

:global(html.pwa-mode body.components-reconnect-failed) .reconnect-message[b-jrkkrns1y0]::after,
:global(html.pwa-mode body.components-reconnect-rejected) .reconnect-message[b-jrkkrns1y0]::after {
    content: " Toque em recarregar para voltar a entrar.";
    color: #f2b8b5;
    font-weight: 600;
}
/* /Pages/Activities/EventDiscussion.razor.rz.scp.css */
/* Discussion Page Styles */

/* Page wrapper */
.discussion-page-wrapper[b-50b8swzc11] {
    min-height: 100vh;
    width: 100%;
    max-width: 100%;
    padding-inline: 0;
    overflow-x: hidden;
    padding-bottom: 2rem;
}

.discussion-header[b-50b8swzc11] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    justify-content: space-between;
    text-align: left;
}

.discussion-header-title[b-50b8swzc11] {
    flex: 1 1 200px;
    min-width: 0;
    text-align: center;
}

.discussion-header-actions[b-50b8swzc11] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.discussion-header .page-header-actions[b-50b8swzc11] {
    width: auto;
    max-width: none;
    margin-left: auto;
}

@media (max-width: 576px) {
    .discussion-page-wrapper[b-50b8swzc11] {
        padding-inline: 0.75rem;
    }

    .discussion-header[b-50b8swzc11] {
        justify-content: flex-start;
    }

    .discussion-header-title[b-50b8swzc11] {
        order: 2;
        width: 100%;
    }

    .discussion-header-actions:first-child[b-50b8swzc11] {
        order: 1;
    }

    .discussion-header-actions:last-child[b-50b8swzc11] {
        order: 3;
        width: 100%;
        justify-content: flex-end;
    }
}

/* Posts section */
.posts-list[b-50b8swzc11] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.post-wrapper[b-50b8swzc11] {
    margin-bottom: 1rem;
}

/* Expanded post content */
.post-expanded-content[b-50b8swzc11] {
    background-color: #1a1a1a;
    border: 1px solid #2f2f2f;
    border-top: none;
    border-radius: 0 0 12px 12px;
    padding: 1.5rem;
    margin-top: -1rem;
}

.comments-section h6[b-50b8swzc11] {
    color: #e2e2e2;
    font-weight: 600;
}

/* Pagination */
.pagination-wrapper[b-50b8swzc11] {
    display: flex;
    justify-content: center;
}
/* /Pages/Activities/EventEnrollments.razor.rz.scp.css */
.enrollments-page-wrapper[b-ta10udl09n] {
    display: flex;
    justify-content: center;
    padding: 1rem;
}

.enrollments-inner[b-ta10udl09n] {
    width: 100%;
    max-width: 1200px;
}

.page-header-block[b-ta10udl09n] {
    align-items: center;
    text-align: center;
}

.page-header-row[b-ta10udl09n] {
    position: relative;
    justify-content: center;
    width: 100%;
    padding-inline: 2.5rem;
}

.page-header-text h1[b-ta10udl09n],
.page-header-text .page-header-subtitle[b-ta10udl09n] {
    margin-bottom: 0;
}

.page-header-text[b-ta10udl09n] {
    flex: 1;
}

.back-button[b-ta10udl09n] {
    position: absolute;
    left: 0;
}

.page-header-subtitle[b-ta10udl09n] {
    font-weight: 500;
}

.participation-card[b-ta10udl09n] {
    background-color: var(--rtub-surface-alt);
    border: 1px solid #2f2f2f;
    max-width: 360px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
    margin: 0 auto;
}

.participation-details[b-ta10udl09n] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.status-pill[b-ta10udl09n] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    font-weight: 700;
    color: #0f0f0f;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
}

.status-pill.going[b-ta10udl09n] {
    background: linear-gradient(135deg, #2db06e, #1f7a4b);
    color: #f1fff6;
}

.status-pill.not-going[b-ta10udl09n] {
    background: linear-gradient(135deg, #b9474f, #7d252d);
    color: #fff1f1;
}

.instrument-chip[b-ta10udl09n] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.6rem;
    border-radius: 12px;
    background: #232324;
    color: #f8f9fa;
    border: 1px solid #323232;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.note-line[b-ta10udl09n] {
    display: flex;
    align-items: flex-start;
    gap: 0.35rem;
    color: #f1f1f1;
    background: #161616;
    border: 1px solid #2a2a2b;
    border-radius: 10px;
    padding: 0.5rem 0.75rem;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.participation-toggle-row[b-ta10udl09n] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.25rem;
}

.participation-toggle[b-ta10udl09n] {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35);
}

.participation-toggle .toggle-inner[b-ta10udl09n] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #d9d9d9;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #1f1f1f;
    font-size: 1rem;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25);
}

.participation-toggle.going[b-ta10udl09n] {
    background: linear-gradient(135deg, #1c7d4f, #145c3a);
}

.participation-toggle.not-going[b-ta10udl09n] {
    background: linear-gradient(135deg, #a52932, #7d1d25);
}

.participation-toggle.is-selected[b-ta10udl09n] {
    transform: scale(1.02);
    opacity: 1;
}

.participation-toggle.is-unselected[b-ta10udl09n] {
    opacity: 0.8;
    transform: scale(0.96);
}

.participation-toggle:hover[b-ta10udl09n] {
    transform: scale(1.04);
    opacity: 1;
}

.participation-toggle:focus-visible[b-ta10udl09n] {
    outline: 2px solid #a88ee5;
    outline-offset: 2px;
}

.participation-toggle-row .participation-toggle:active[b-ta10udl09n] {
    transform: scale(0.94);
}

@media (max-width: 576px) {
    .enrollments-page-wrapper[b-ta10udl09n] {
        padding: 0.5rem;
    }

    .page-header-row[b-ta10udl09n] {
        justify-content: center;
        text-align: center;
        width: 100%;
        padding-inline: 1.25rem;
    }

    .page-header-text[b-ta10udl09n] {
        text-align: center;
        flex: 1;
    }

    .participation-toggle-row[b-ta10udl09n] {
        justify-content: center;
    }

    .participation-card[b-ta10udl09n] {
        max-width: 100%;
    }
}
/* /Pages/Activities/Events.razor.rz.scp.css */
.events-page[b-11ni40gyh8] {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding-inline: clamp(0.75rem, 2vw, 1.5rem);
    overflow-x: hidden;
}

@media (max-width: 576px) {
    .events-page[b-11ni40gyh8] {
        padding-inline: 0.75rem;
    }

    .events-page .row[b-11ni40gyh8] {
        margin-left: 0;
        margin-right: 0;
    }
}

/* Video modal styles (matches Songs.razor pattern) */
.video-player-container[b-11ni40gyh8] {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #000;
    border-radius: 8px;
    overflow: hidden;
}

.modal-video[b-11ni40gyh8] {
    width: 100%;
    max-width: 100%;
    max-height: 70vh;
    display: block;
}

.video-selector[b-11ni40gyh8] {
    margin-bottom: 1rem;
}

.video-selector .list-group-item[b-11ni40gyh8] {
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

/* Drag-and-drop styles for videos */
.video-selector .list-group-item[draggable="true"][b-11ni40gyh8] {
    cursor: grab;
}

.video-selector .list-group-item.dragging[b-11ni40gyh8] {
    opacity: 1; /* Keep full opacity to avoid grey overlay while dragging */
    cursor: grabbing;
    transform: scale(1.02); /* Subtle lift effect without color change */
    background-color: var(--bs-list-group-bg);
    color: var(--bs-body-color);
    box-shadow: 0 8px 16px rgba(var(--bs-primary-rgb), 0.3);
}

/* Keep active background color when dragging */
.video-selector .list-group-item.active.dragging[b-11ni40gyh8] {
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
    opacity: 1;
}

.video-selector .list-group-item.drag-over[b-11ni40gyh8] {
    background-color: rgba(var(--bs-primary-rgb), 0.2) !important;
    border-color: rgba(var(--bs-primary-rgb), 0.7);
    border-width: 2px;
    box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), 0.2);
}

.video-selector .list-group-item:hover:not(.active):not(.dragging)[b-11ni40gyh8] {
    background-color: var(--bs-primary); /* Purple hover using theme color */
    color: white;
}

.video-selector .list-group-item.active[b-11ni40gyh8] {
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
    color: white !important;
}

/* Drag handle for videos */
.drag-handle-video[b-11ni40gyh8] {
    cursor: grab;
    color: var(--bs-primary);
    font-size: 1.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem;
    opacity: 0.6;
    transition: all 0.2s ease;
    margin-right: 0.5rem;
    vertical-align: middle;
}

/* Button styles */
.btn-purple-light[b-11ni40gyh8] {
    font-weight: 400;
}

/* Content display */
.content-pre-line[b-11ni40gyh8] {
    white-space: pre-line;
}

/* Cancellation reason styles */
.cancellation-reason-text[b-11ni40gyh8] {
    white-space: pre-line;
    color: #FCA5A5;
}

/* Trophy card */
.trophy-card[b-11ni40gyh8] {
    background-color: var(--rtub-surface);
    border: 2px solid #2f2f2f;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Trophy icon */
.trophy-icon-large[b-11ni40gyh8] {
    font-size: 3rem;
}

/* User stats header clickable */
.user-stats-header-clickable[b-11ni40gyh8] {
    cursor: pointer;
}

/* Loading overlay */
.loading-overlay-container[b-11ni40gyh8] {
    min-height: 200px;
}

.loading-overlay-backdrop[b-11ni40gyh8] {
    background-color: rgba(0,0,0,0.7);
    z-index: 1000;
    border-radius: 8px;
}

/* Spinner size */
.spinner-large[b-11ni40gyh8] {
    width: 3rem;
    height: 3rem;
}

.drag-handle-video:hover[b-11ni40gyh8] {
    opacity: 1;
    color: #a88ee5;
    transform: scale(1.1);
}

.drag-handle-video:active[b-11ni40gyh8] {
    cursor: grabbing;
}

.video-selector .list-group-item:hover .drag-handle-video[b-11ni40gyh8] {
    opacity: 0.9;
}

/* Video title truncation to prevent overflow when edit and delete buttons are present */
.video-selector .list-group-item[b-11ni40gyh8] {
    padding-right: 5rem; /* Make room for edit and delete buttons */
    overflow: hidden; /* Prevent any content from overflowing */
}

.video-selector .video-title-content[b-11ni40gyh8] {
    display: inline-block;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
}

/* Fix filename overflow in file picker */
.localized-file-picker .localized-file-name[b-11ni40gyh8] {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}

/* Responsive video sizing for modal */
@media (max-width: 768px) {
    .modal-video[b-11ni40gyh8] {
        max-height: 50vh;
    }
    
    /* Mobile/PWA optimizations for video list */
    .video-selector .list-group-item[b-11ni40gyh8] {
        padding: 0.75rem 1rem;
        padding-right: 5rem; /* Maintain space for edit and delete buttons */
        font-size: 0.95rem;
    }
    
    /* Make edit and delete buttons more touch-friendly on mobile */
    .video-selector .admin-btn-edit[b-11ni40gyh8],
    .video-selector .admin-btn-delete[b-11ni40gyh8] {
        min-width: 36px;
        min-height: 36px;
    }
    
    /* Better file picker on mobile */
    .localized-file-picker[b-11ni40gyh8] {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .localized-file-picker .localized-file-button[b-11ni40gyh8] {
        width: 100%;
    }
    
    .localized-file-picker .localized-file-name[b-11ni40gyh8] {
        width: 100%;
        text-align: center;
    }
}

@media (min-width: 769px) {
    .modal-video[b-11ni40gyh8] {
        max-height: 70vh;
    }
}

/* PWA-specific improvements for standalone mode */
@media (display-mode: standalone) {
    .video-player-container[b-11ni40gyh8] {
        /* Account for safe areas on mobile devices */
        padding-bottom: env(safe-area-inset-bottom);
    }
    
    .modal-video[b-11ni40gyh8] {
        /* Optimize for full-screen PWA experience */
        max-height: calc(80vh - env(safe-area-inset-bottom));
    }
}

/* Filter dropdown container */
.filter-dropdown-container[b-11ni40gyh8] {
    min-width: 180px;
}

/* Statistics Cards */
.statistics-container[b-11ni40gyh8] {
    padding: 0.5rem;
}

.stats-card-grid[b-11ni40gyh8] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.stats-card[b-11ni40gyh8] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background-color: #1e1e1e;
    border-radius: 8px;
    border: 1px solid rgba(var(--bs-primary-rgb), 0.2);
    transition: all 0.2s ease;
}

.stats-card:hover[b-11ni40gyh8] {
    border-color: rgba(var(--bs-primary-rgb), 0.4);
    background-color: #252525;
}

.stats-card-position[b-11ni40gyh8] {
    flex-shrink: 0;
    width: 50px;
    text-align: center;
    font-size: 1.5rem;
}

.stats-medal[b-11ni40gyh8] {
    font-size: 2rem;
}

.stats-position[b-11ni40gyh8] {
    font-size: 1.25rem;
    font-weight: 600;
    color: #ffffff;
}

.stats-card-content[b-11ni40gyh8] {
    flex-grow: 1;
    min-width: 0;
}

.stats-card-title[b-11ni40gyh8] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--bs-body-color);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.stats-card-subtitle[b-11ni40gyh8] {
    font-size: 0.875rem;
    color: #ffffff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.stats-card-count[b-11ni40gyh8] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--bs-primary);
}

.stats-card-count i[b-11ni40gyh8] {
    font-size: 1.5rem;
}

.stats-card-detailed[b-11ni40gyh8] {
    background-color: #1a1a1a;
}

/* User stats grouping */
.user-stats-group[b-11ni40gyh8] {
    border: 1px solid rgba(var(--bs-primary-rgb), 0.3);
    border-radius: 8px;
    padding: 1rem;
    background-color: rgba(var(--bs-primary-rgb), 0.05);
}

.user-stats-header[b-11ni40gyh8] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--bs-primary);
    padding: 0.5rem;
    border-radius: 6px;
    transition: background-color 0.2s ease;
}

.user-stats-header:hover[b-11ni40gyh8] {
    background-color: rgba(var(--bs-primary-rgb), 0.1);
}

.user-stats-info[b-11ni40gyh8] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.user-stats-nickname[b-11ni40gyh8] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--bs-primary);
}

.user-stats-fullname[b-11ni40gyh8] {
    font-size: 0.85rem;
    font-weight: 400;
    color: #ffffff;
}

.user-stats-total[b-11ni40gyh8] {
    font-size: 0.9rem;
    color: #ffffff;
    margin-left: auto;
    margin-right: 0.5rem;
}

.user-stats-header i[b-11ni40gyh8] {
    font-size: 1.3rem;
}

/* Responsive styles for statistics */
@media (max-width: 576px) {
    .stats-card[b-11ni40gyh8] {
        gap: 0.75rem;
        padding: 0.75rem;
    }
    
    .stats-card-position[b-11ni40gyh8] {
        width: 40px;
    }
    
    .stats-medal[b-11ni40gyh8] {
        font-size: 1.5rem;
    }
    
    .stats-card-title[b-11ni40gyh8] {
        font-size: 0.9rem;
    }
    
    .stats-card-subtitle[b-11ni40gyh8] {
        font-size: 0.8rem;
    }
    
    .stats-card-count[b-11ni40gyh8] {
        font-size: 1rem;
    }
    
    .stats-card-count i[b-11ni40gyh8] {
        font-size: 1.25rem;
    }
    
    .filter-dropdown-container[b-11ni40gyh8] {
        min-width: 100%;
    }
}

/* Videos-only toggle */
.videos-only-toggle[b-11ni40gyh8] {
    white-space: nowrap;
    padding-bottom: 0.35rem;
    margin-left: 0.5rem;
}

.videos-only-toggle .form-check-label[b-11ni40gyh8] {
    font-size: 0.875rem;
    user-select: none;
    color: rgba(255, 255, 255, 0.8);
}

@media (max-width: 991.98px) {
    .videos-only-toggle[b-11ni40gyh8] {
        margin-left: 0;
        padding-top: 0.25rem;
    }
}
/* /Pages/Activities/HallOfFame.razor.rz.scp.css */
/* Hall of Fame Layout - Equal height panels */

.hof-row[b-sgr2yfabiz] {
    display: flex;
    gap: 1.5rem;
    align-items: stretch;
    margin-bottom: 1.5rem;
}

.hof-panel[b-sgr2yfabiz] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0; /* Important for flex children */
}

.hof-panel section[b-sgr2yfabiz] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.hof-panel .card[b-sgr2yfabiz] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.hof-panel .card-body[b-sgr2yfabiz] {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 200px; /* Minimum height for consistency */
}

/* Mobile responsiveness */
@media (max-width: 767.98px) {
    .hof-row[b-sgr2yfabiz] {
        flex-direction: column;
        gap: 1rem;
    }
    
    .hof-panel .card-body[b-sgr2yfabiz] {
        min-height: 150px;
    }
}
/* /Pages/Activities/Leaderboard.razor.rz.scp.css */
/* Ranks Grid Layout */
.ranks-grid[b-jjsxke2jk2] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    padding: 20px 0;
    position: relative;
}

.rank-grid-item[b-jjsxke2jk2] {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Grid positioning classes for desktop snake pattern */
.row-1[b-jjsxke2jk2] { grid-row: 1; }
.row-2[b-jjsxke2jk2] { grid-row: 2; }
.row-3[b-jjsxke2jk2] { grid-row: 3; }
.row-4[b-jjsxke2jk2] { grid-row: 4; }

.col-1[b-jjsxke2jk2] { grid-column: 1; }
.col-2[b-jjsxke2jk2] { grid-column: 2; }
.col-3[b-jjsxke2jk2] { grid-column: 3; }

/* Rank Card */
.rank-card[b-jjsxke2jk2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem 1.25rem;
    background: #000000;
    border-radius: 0.5rem;
    border: 2px solid var(--bs-primary);
    transition: all 0.2s ease;
    position: relative;
    min-width: 140px;
    z-index: 2;
}

.rank-card:hover[b-jjsxke2jk2] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(138, 43, 226, 0.3);
}

.rank-level[b-jjsxke2jk2] {
    font-weight: 700;
    font-size: 0.9rem;
    color: #ffffff;
    white-space: nowrap;
}

.rank-name[b-jjsxke2jk2] {
    font-weight: 600;
    font-size: 0.8rem;
    color: #ffffff;
    white-space: nowrap;
    text-transform: uppercase;
    text-align: center;
}

.rank-xp[b-jjsxke2jk2] {
    font-weight: 500;
    font-size: 0.7rem;
    color: #a0a0a0;
    white-space: nowrap;
    text-align: center;
}

/* Trophy icon for Level 12 */
.rank-trophy-icon[b-jjsxke2jk2] {
    font-size: 1.5rem;
    color: #FFD700;
    margin-bottom: 0.25rem;
}

/* Final level (Level 12) styling */
.rank-final[b-jjsxke2jk2] {
    /* Grid position is set inline, no need for grid-column here */
}

.rank-final .rank-card[b-jjsxke2jk2] {
    border-color: #FFD700;
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.3);
}

/* Connectors */
/* Horizontal connector to the right */
.rank-connector-horizontal-right[b-jjsxke2jk2] {
    position: absolute;
    width: calc(100% + 2rem);
    height: 2px;
    background: #6c757d;
    top: 50%;
    left: 50%;
    transform: translateY(-50%);
    z-index: 1;
    pointer-events: none;
}

/* Horizontal connector to the left */
.rank-connector-horizontal-left[b-jjsxke2jk2] {
    position: absolute;
    width: calc(100% + 2rem);
    height: 2px;
    background: #6c757d;
    top: 50%;
    right: 50%;
    transform: translateY(-50%);
    z-index: 1;
    pointer-events: none;
}

/* Connector from Level 3 down to Level 4 (down-right) */
.rank-connector-down-right[b-jjsxke2jk2] {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 2px;
    height: calc(2rem + 100%);
    background: #6c757d;
    z-index: 1;
    pointer-events: none;
}

/* Connector from Level 6 down to Level 7 (down-left) */
.rank-connector-down-left[b-jjsxke2jk2] {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 2px;
    height: calc(2rem + 100%);
    background: #6c757d;
    z-index: 1;
    pointer-events: none;
}

/* Mobile adjustments for grid */
@media (max-width: 992px) {
    .ranks-grid[b-jjsxke2jk2] {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
    
    /* Override desktop grid positioning for 2-column layout */
    .rank-grid-item[b-jjsxke2jk2] {
        grid-row: auto !important;
        grid-column: auto !important;
    }
    
    /* Use order property based on level for sequential display */
    .level-1[b-jjsxke2jk2] { order: 1; }
    .level-2[b-jjsxke2jk2] { order: 2; }
    .level-3[b-jjsxke2jk2] { order: 3; }
    .level-4[b-jjsxke2jk2] { order: 4; }
    .level-5[b-jjsxke2jk2] { order: 5; }
    .level-6[b-jjsxke2jk2] { order: 6; }
    .level-7[b-jjsxke2jk2] { order: 7; }
    .level-8[b-jjsxke2jk2] { order: 8; }
    .level-9[b-jjsxke2jk2] { order: 9; }
    .level-10[b-jjsxke2jk2] { order: 10; }
    .level-11[b-jjsxke2jk2] { order: 11; }
    .level-12[b-jjsxke2jk2] { order: 12; }
    
    .rank-final[b-jjsxke2jk2] {
        grid-column: span 2; /* Span both columns on smaller screens */
    }
}

@media (max-width: 768px) {
    .ranks-grid[b-jjsxke2jk2] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    /* Reset grid positioning classes for single column on mobile */
    .row-1[b-jjsxke2jk2], .row-2[b-jjsxke2jk2], .row-3[b-jjsxke2jk2], .row-4[b-jjsxke2jk2] {
        grid-row: auto !important;
    }
    
    .col-1[b-jjsxke2jk2], .col-2[b-jjsxke2jk2], .col-3[b-jjsxke2jk2] {
        grid-column: 1 !important;
    }
    
    .rank-final[b-jjsxke2jk2] {
        grid-column: 1 !important;
    }
    
    .rank-card[b-jjsxke2jk2] {
        width: 100%;
        max-width: 280px;
        margin: 0 auto;
    }
    
    /* Hide connectors on mobile */
    .rank-connector-horizontal-right[b-jjsxke2jk2],
    .rank-connector-horizontal-left[b-jjsxke2jk2],
    .rank-connector-down-right[b-jjsxke2jk2],
    .rank-connector-down-left[b-jjsxke2jk2] {
        display: none;
    }
}

/* Chevron animation */
.ranks-timeline-header i.bi-chevron-up[b-jjsxke2jk2],
.ranks-timeline-header i.bi-chevron-down[b-jjsxke2jk2] {
    transition: transform 0.3s ease;
    font-size: 0.875rem;
}

/* Comments Section Styles */
.add-comment-form[b-jjsxke2jk2] {
    background-color: var(--rtub-surface-alt);
    border: 1px solid #343536;
    border-radius: 8px;
    padding: 1rem;
}

.add-comment-form textarea[b-jjsxke2jk2] {
    background-color: var(--rtub-surface-alt);
    border: 1px solid #343536;
    color: var(--bs-white);
    resize: vertical;
}

.add-comment-form textarea:focus[b-jjsxke2jk2] {
    background-color: var(--rtub-surface-alt);
    border-color: var(--bs-primary);
    color: var(--bs-white);
}

.add-comment-form textarea[b-jjsxke2jk2]::placeholder {
    color: #818384;
}

.comments-list[b-jjsxke2jk2] {
    max-height: 400px;
    overflow-y: auto;
}

/* Custom scrollbar for comments list */
.comments-list[b-jjsxke2jk2]::-webkit-scrollbar {
    width: 8px;
}

.comments-list[b-jjsxke2jk2]::-webkit-scrollbar-track {
    background: var(--rtub-surface-alt);
    border-radius: 4px;
}

.comments-list[b-jjsxke2jk2]::-webkit-scrollbar-thumb {
    background: #343536;
    border-radius: 4px;
}

.comments-list[b-jjsxke2jk2]::-webkit-scrollbar-thumb:hover {
    background: #4a4a4b;
}

/* Mobile responsiveness for comments */
@media (max-width: 768px) {
    .add-comment-form[b-jjsxke2jk2] {
        padding: 0.75rem;
    }
    
    .comments-list[b-jjsxke2jk2] {
        max-height: 300px;
    }
}

/* Add spacing between filter controls and leaderboard body on mobile */
@media (max-width: 768px) {
    .filter-search-container[b-jjsxke2jk2],
    .filter-dropdown-container[b-jjsxke2jk2] {
        margin-bottom: 0.5rem;
    }
}

/* Header clickable */
.ranks-timeline-header[b-jjsxke2jk2] {
    cursor: pointer;
}

/* Ranking story panel */
.ranking-story-panel[b-jjsxke2jk2] {
    background-color: var(--rtub-surface-alt);
    border: 1px solid #343536;
    border-radius: 8px;
    padding: 1.5rem;
    position: relative;
}

/* Edit button positioning */
.ranking-story-edit-btn[b-jjsxke2jk2] {
    position: absolute;
    top: 1rem;
    right: 1rem;
}

/* Content display */
.ranking-story-content[b-jjsxke2jk2] {
    white-space: pre-line;
    line-height: 1.6;
}

/* Avatar large */
.member-avatar-large[b-jjsxke2jk2] {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    border: 3px solid var(--bs-primary);
}

/* Badge styles */
.badge-purple[b-jjsxke2jk2] {
    background-color: var(--bs-primary);
}/* Modal section header */
.modal-section-header[b-jjsxke2jk2] {
    cursor: pointer;
}

/* Modal section body */
.modal-section-body-scrollable[b-jjsxke2jk2] {
    max-height: 400px;
    overflow-y: auto;
}

/* Activity list item */
.activity-list-item[b-jjsxke2jk2] {
    background-color: var(--rtub-surface-alt);
    border-color: #343536;
    margin-bottom: 0.5rem;
    border-radius: 4px;
}

/* Badge alignment */
.badge-center[b-jjsxke2jk2] {
    align-self: center;
}

/* ========================================
   LEADERBOARD STYLES (migrated from global)
   ======================================== */

/* Ranks Timeline */
.ranks-timeline-container[b-jjsxke2jk2] {
    background-color: #1a1a1a;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.ranks-timeline-header[b-jjsxke2jk2] {
    margin-bottom: 20px;
}

[b-jjsxke2jk2] .ranks-timeline-header h3 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: #ffffff;
}

.ranks-timeline[b-jjsxke2jk2] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: flex-start;
    overflow-x: auto;
    padding: 10px 0;
}

/* Mobile adjustments for timeline */
@media (max-width: 768px) {
    .ranks-timeline[b-jjsxke2jk2] {
        flex-direction: column;
        align-items: stretch;
    }
}

/* Leaderboard Container */
.leaderboard-container[b-jjsxke2jk2] {
    background-color: #1a1a1a;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.leaderboard-header[b-jjsxke2jk2] {
    background-color: #2a2a2a;
    padding: 20px 24px;
    border-bottom: 2px solid #3a3a3a;
    text-align: center;
}

[b-jjsxke2jk2] .leaderboard-header h2 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: #ffffff;
}

.leaderboard-body[b-jjsxke2jk2] {
    padding: 0;
}

/* Leaderboard Card (Row) — rendered by LeaderboardCard child component */
[b-jjsxke2jk2] .leaderboard-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 24px;
    border-bottom: 1px solid #2a2a2a;
    transition: background-color 0.2s ease;
    cursor: pointer;
}

[b-jjsxke2jk2] .leaderboard-card:hover {
    background-color: rgba(138, 43, 226, 0.1);
}

[b-jjsxke2jk2] .leaderboard-card:last-child {
    border-bottom: none;
}

/* Rank Number */
[b-jjsxke2jk2] .leaderboard-rank {
    flex-shrink: 0;
    width: 50px;
    text-align: center;
    font-size: 1.5rem;
    font-weight: 700;
    color: #ffffff;
}

/* Medal styling for top 3 */
[b-jjsxke2jk2] .leaderboard-card.position-first .leaderboard-rank {
    font-size: 2rem;
}

[b-jjsxke2jk2] .leaderboard-card.position-second .leaderboard-rank {
    font-size: 2rem;
}

[b-jjsxke2jk2] .leaderboard-card.position-third .leaderboard-rank {
    font-size: 2rem;
}

/* Avatar */
[b-jjsxke2jk2] .leaderboard-avatar {
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid #3a3a3a;
}

[b-jjsxke2jk2] .leaderboard-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Player Info */
[b-jjsxke2jk2] .leaderboard-info {
    flex: 1;
    min-width: 0;
}

[b-jjsxke2jk2] .leaderboard-nickname {
    font-size: 1.125rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

[b-jjsxke2jk2] .leaderboard-name {
    font-size: 0.875rem;
    color: #b0b0b0;
    margin-bottom: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

[b-jjsxke2jk2] .leaderboard-instrument {
    font-size: 0.75rem;
    color: #888888;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

[b-jjsxke2jk2] .leaderboard-stats {
    font-size: 0.75rem;
    color: #999999;
    margin-top: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Level Badge */
[b-jjsxke2jk2] .leaderboard-level {
    flex-shrink: 0;
}

[b-jjsxke2jk2] .level-pill {
    display: inline-block;
    padding: 8px 16px;
    background-color: var(--bs-primary);
    color: #ffffff;
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 600;
    white-space: nowrap;
}

/* XP Score */
[b-jjsxke2jk2] .leaderboard-xp {
    flex-shrink: 0;
    min-width: 100px;
    text-align: right;
    font-size: 1.25rem;
    font-weight: 700;
    color: #ffffff;
}

/* Top 3 Position Styling */
[b-jjsxke2jk2] .leaderboard-card.position-first {
    background: linear-gradient(90deg, rgba(255, 215, 0, 0.05), transparent);
    border-left: 4px solid #FFD700;
}

[b-jjsxke2jk2] .leaderboard-card.position-first:hover {
    background: linear-gradient(90deg, rgba(255, 215, 0, 0.15), rgba(138, 43, 226, 0.1));
}

[b-jjsxke2jk2] .leaderboard-card.position-first .leaderboard-avatar {
    border-color: #FFD700;
}

[b-jjsxke2jk2] .leaderboard-card.position-second {
    background: linear-gradient(90deg, rgba(192, 192, 192, 0.05), transparent);
    border-left: 4px solid #C0C0C0;
}

[b-jjsxke2jk2] .leaderboard-card.position-second:hover {
    background: linear-gradient(90deg, rgba(192, 192, 192, 0.15), rgba(138, 43, 226, 0.1));
}

[b-jjsxke2jk2] .leaderboard-card.position-second .leaderboard-avatar {
    border-color: #C0C0C0;
}

[b-jjsxke2jk2] .leaderboard-card.position-third {
    background: linear-gradient(90deg, rgba(205, 127, 50, 0.05), transparent);
    border-left: 4px solid #CD7F32;
}

[b-jjsxke2jk2] .leaderboard-card.position-third:hover {
    background: linear-gradient(90deg, rgba(205, 127, 50, 0.15), rgba(138, 43, 226, 0.1));
}

[b-jjsxke2jk2] .leaderboard-card.position-third .leaderboard-avatar {
    border-color: #CD7F32;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    [b-jjsxke2jk2] .leaderboard-card {
        flex-wrap: wrap;
        gap: 12px;
        padding: 12px 16px;
    }

    [b-jjsxke2jk2] .leaderboard-rank {
        width: 40px;
        font-size: 1.25rem;
    }

    [b-jjsxke2jk2] .leaderboard-card.position-first .leaderboard-rank,
    [b-jjsxke2jk2] .leaderboard-card.position-second .leaderboard-rank,
    [b-jjsxke2jk2] .leaderboard-card.position-third .leaderboard-rank {
        font-size: 1.5rem;
    }

    [b-jjsxke2jk2] .leaderboard-avatar {
        width: 50px;
        height: 50px;
    }

    [b-jjsxke2jk2] .leaderboard-info {
        flex: 1 1 100%;
        order: 3;
    }

    [b-jjsxke2jk2] .leaderboard-level {
        flex: 1 1 100%;
        order: 4;
    }

    [b-jjsxke2jk2] .level-pill {
        display: block;
        text-align: center;
        padding: 6px 12px;
        font-size: 0.8rem;
    }

    [b-jjsxke2jk2] .leaderboard-xp {
        order: 2;
        min-width: auto;
        font-size: 1.1rem;
    }

    [b-jjsxke2jk2] .leaderboard-nickname {
        font-size: 1rem;
    }

    [b-jjsxke2jk2] .leaderboard-name {
        font-size: 0.8rem;
    }

    [b-jjsxke2jk2] .leaderboard-instrument {
        font-size: 0.7rem;
    }
    
    [b-jjsxke2jk2] .leaderboard-stats {
        white-space: normal;
        word-break: break-word;
    }
}

@media (max-width: 480px) {
    .leaderboard-header[b-jjsxke2jk2] {
        padding: 16px;
    }

    [b-jjsxke2jk2] .leaderboard-header h2 {
        font-size: 1.25rem;
    }

    [b-jjsxke2jk2] .leaderboard-card {
        padding: 10px 12px;
    }
    
    .leaderboard-container[b-jjsxke2jk2] {
        border-radius: 8px;
    }
    
    .ranks-timeline-container[b-jjsxke2jk2] {
        padding: 16px;
        border-radius: 8px;
    }
}
/* /Pages/Activities/Meetings.razor.rz.scp.css */
/* Icon sizes */
.icon-large[b-wk46dofxco] {
    font-size: 3rem;
}

.icon-large-primary[b-wk46dofxco] {
    font-size: 3rem;
    color: var(--bs-primary);
}

/* Content display */
.content-pre-line[b-wk46dofxco] {
    white-space: pre-line;
}

/* Loading overlay */
.loading-overlay-container[b-wk46dofxco] {
    min-height: 200px;
}

.loading-overlay-backdrop[b-wk46dofxco] {
    background-color: rgba(0,0,0,0.7);
    z-index: 1000;
    border-radius: 8px;
}

/* Spinner size */
.spinner-large[b-wk46dofxco] {
    width: 3rem;
    height: 3rem;
}

/* Scrollable preview container */
.preview-container-scrollable[b-wk46dofxco] {
    max-height: 400px;
    overflow-y: auto;
    background-color: transparent;
}
/* /Pages/Activities/Naipes.razor.rz.scp.css */
/* Video player constraints */
.video-player[b-seij76aoej] {
    max-height: 400px;
    background: #000;
}

/* Image display constraints */
.content-image[b-seij76aoej] {
    max-height: 500px;
    object-fit: contain;
    background: #000;
}

/* Content description display */
.content-description[b-seij76aoej] {
    white-space: pre-line;
}
/* /Pages/Activities/NaipesConfig.razor.rz.scp.css */
/* Spinner color */
.spinner-primary[b-zlwulovqo5] {
    color: var(--bs-primary);
}

/* Avatar display */
.config-avatar[b-zlwulovqo5] {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border: 3px solid var(--bs-primary);
}

/* Icon container */
.icon-container[b-zlwulovqo5] {
    width: 100px;
    height: 100px;
    background-color: var(--bs-primary);
}

.icon-container-large[b-zlwulovqo5] {
    font-size: 2.5rem;
}
/* /Pages/Activities/Rehearsals.razor.rz.scp.css */
/* Filter Controls - Responsive */
.filter-search-container[b-qkgpf3vagj] {
    width: 100%;
    max-width: 100%;
}

.filter-dropdown-container[b-qkgpf3vagj] {
    width: 100%;
    max-width: 100%;
}

/* Desktop - apply min/max widths */
@media (min-width: 992px) {
    .filter-search-container[b-qkgpf3vagj] {
        min-width: 360px;
        max-width: 640px;
    }
    
    .filter-dropdown-container[b-qkgpf3vagj] {
        min-width: 220px;
        max-width: 260px;
    }
}

/* Show All Toggle Styles */
.form-check-input:checked[b-qkgpf3vagj] {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}

.form-check-label[b-qkgpf3vagj] {
    cursor: pointer;
    user-select: none;
}

/* Modal backdrop */
.modal-backdrop-custom[b-qkgpf3vagj] {
    background-color: rgba(0,0,0,0.5);
}

/* Modal header */
.modal-header-custom[b-qkgpf3vagj] {
    background: rgba(var(--bs-primary-rgb), 0.1);
}

/* Content display */
.content-pre-line[b-qkgpf3vagj] {
    white-space: pre-line;
}

/* Cancellation reason styles */
.cancellation-reason-text[b-qkgpf3vagj] {
    white-space: pre-line;
    color: #FCA5A5;
}

/* Loading overlay */
.loading-overlay-container[b-qkgpf3vagj] {
    min-height: 200px;
}

.loading-overlay-backdrop[b-qkgpf3vagj] {
    background-color: rgba(0,0,0,0.7);
    z-index: 1000;
    border-radius: 8px;
}

/* Spinner size */
.spinner-large[b-qkgpf3vagj] {
    width: 3rem;
    height: 3rem;
}
/* /Pages/Games/AvoidQuestions.razor.rz.scp.css */
/* Layout balance spacer */
.header-spacer[b-wi5twvayhx] {
    width: 38px;
}
/* /Pages/Games/Bets.razor.rz.scp.css */
/* Page-scoped styles for Bets.razor */

/* MATCH category member selection */
.selected-members-chips[b-ofyenrwomr] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.member-chip-with-odds[b-ofyenrwomr] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem;
    background-color: rgba(var(--bs-primary-rgb), 0.05);
    border: 1px solid rgba(var(--bs-primary-rgb), 0.2);
    border-radius: 8px;
}

.member-chip[b-ofyenrwomr] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.5rem 0.25rem 0.25rem;
    background-color: rgba(var(--bs-primary-rgb), 0.15);
    border: 1px solid rgba(var(--bs-primary-rgb), 0.3);
    border-radius: 20px;
    font-size: 0.85rem;
    color: var(--bs-body-color);
}

.member-chip-avatar[b-ofyenrwomr] {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
}

.member-chip-name[b-ofyenrwomr] {
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.member-chip-remove[b-ofyenrwomr] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    padding: 0;
    margin-left: 0.25rem;
    background: transparent;
    border: none;
    border-radius: 50%;
    color: var(--bs-danger);
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.member-chip-remove:hover[b-ofyenrwomr] {
    background-color: rgba(var(--bs-danger-rgb), 0.2);
}

.member-chip-remove i[b-ofyenrwomr] {
    font-size: 0.75rem;
}

.odds-input-container[b-ofyenrwomr] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.odds-input-container label[b-ofyenrwomr] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--bs-body-color);
    margin-bottom: 0;
}

.odds-input-container input[b-ofyenrwomr] {
    width: 100px;
}

.odds-input-narrow[b-ofyenrwomr] {
    width: 120px;
}

/* Member list for selection */
.member-list-scrollable[b-ofyenrwomr] {
    max-height: 200px;
    overflow-y: auto;
}

.member-list-scrollable-override[b-ofyenrwomr] {
    max-height: 200px;
}

.member-item[b-ofyenrwomr] {
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.member-item:hover[b-ofyenrwomr],
.member-item:focus[b-ofyenrwomr] {
    background-color: rgba(var(--bs-primary-rgb), 0.1);
}

.member-avatar-small[b-ofyenrwomr] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
}

.member-avatar-medium[b-ofyenrwomr] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

.clickable-row[b-ofyenrwomr] {
    outline: none;
}

.clickable-row:focus-visible[b-ofyenrwomr] {
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
}

/* Comments section styling (matching Leaderboard) */
.add-comment-form textarea[b-ofyenrwomr] {
    background-color: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
    color: var(--bs-body-color);
}

.add-comment-form textarea:focus[b-ofyenrwomr] {
    background-color: rgba(255, 255, 255, 0.08);
    border-color: var(--bs-primary);
    color: var(--bs-body-color);
}

/* Fix overlapping borders in comment form */
.add-comment-form .localized-file-picker[b-ofyenrwomr] {
    margin-bottom: 0.75rem;
}

.add-comment-form .d-flex.justify-content-between[b-ofyenrwomr] {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.comments-list[b-ofyenrwomr] {
    max-height: 400px;
    overflow-y: auto;
    padding-right: 0.5rem;
}

.leaderboard-comment-item[b-ofyenrwomr] {
    position: relative;
    padding: 1rem;
    border-radius: 8px;
    background-color: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.comment-header[b-ofyenrwomr] {
    display: flex;
    align-items: center;
    padding-right: 2.5rem;
}

.comment-avatar[b-ofyenrwomr] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
}

.comment-meta[b-ofyenrwomr] {
    display: flex;
    flex-direction: column;
}

.comment-author[b-ofyenrwomr] {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--bs-body-color);
}

.comment-date[b-ofyenrwomr] {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
}

.comment-body[b-ofyenrwomr] {
    color: var(--bs-body-color);
    line-height: 1.5;
    font-size: 0.9rem;
}

.comment-body-pre-line[b-ofyenrwomr] {
    white-space: pre-line;
}

.comment-media[b-ofyenrwomr] {
    margin-top: 0.5rem;
}

.comment-media video[b-ofyenrwomr] {
    max-height: 300px;
}

.comment-media img[b-ofyenrwomr],
.comment-media video[b-ofyenrwomr] {
    max-height: 300px;
}

/* Badge styles */
.badge-purple[b-ofyenrwomr] {
    background-color: #8a2be2;
    font-size: 1rem;
    padding: 0.5rem 1rem;
}

.badge-purple-resolved[b-ofyenrwomr] {
    background-color: #8a2be2;
    color: white;
}

/* Text color */
.text-purple[b-ofyenrwomr] {
    color: #8a2be2;
    font-weight: 600;
}

.comment-delete-btn[b-ofyenrwomr] {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
}

/* File picker styling */
.localized-file-picker[b-ofyenrwomr] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.localized-file-button[b-ofyenrwomr] {
    white-space: nowrap;
}

.localized-file-name[b-ofyenrwomr] {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.85rem;
}

@media (max-width: 576px) {
    .member-chip-name[b-ofyenrwomr] {
        max-width: 80px;
    }
    
    .odds-input-container input[b-ofyenrwomr] {
        width: 80px;
    }
    
    .member-chip-with-odds[b-ofyenrwomr] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    
    .comments-list[b-ofyenrwomr] {
        max-height: 300px;
    }
    
    .bet-option-summary-card[b-ofyenrwomr] {
        min-width: 100px;
        max-width: 160px;
        padding: 0.75rem;
    }
    
    .bet-option-summary-odds[b-ofyenrwomr] {
        font-size: 1.25rem;
    }
}

/* Option summary cards in All Bets modal */
.bet-option-summary-card[b-ofyenrwomr] {
    flex: 1 1 140px;
    max-width: 200px;
    padding: 1rem;
    background: rgba(138, 43, 226, 0.08);
    border: 1px solid rgba(138, 43, 226, 0.25);
    border-radius: 12px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
}

.bet-option-summary-title[b-ofyenrwomr] {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--bs-body-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.bet-option-summary-odds[b-ofyenrwomr] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #8a2be2;
}

.bet-option-summary-stats[b-ofyenrwomr] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.7);
}
/* /Pages/Games/BmrBebeMaisRui.razor.rz.scp.css */
/* Layout balance spacer */
.header-spacer[b-rbwoa39eff] {
    width: 38px;
}

/* Gold text color for special elements */
.text-gold[b-rbwoa39eff] {
    color: gold;
}

/* ========================================
   BMR GAME STYLES (migrated from global)
   ======================================== */
.bmr-container[b-rbwoa39eff] {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 1rem;
}

[b-rbwoa39eff] .bmr-container .game-canvas-wrapper {
    position: relative;
    background-color: var(--rtub-surface-alt);
    border: 2px solid #343536;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 1rem;
}

[b-rbwoa39eff] #bmrGameCanvas {
    display: block;
    width: 100%;
    height: auto;
}

[b-rbwoa39eff] .bmr-container .game-stats {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

[b-rbwoa39eff] .bmr-container .stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: var(--rtub-surface-alt);
    border: 1px solid #343536;
    border-radius: 8px;
    padding: 0.75rem 1.5rem;
    min-width: 80px;
}

[b-rbwoa39eff] .bmr-container .stat-item i {
    font-size: 1.25rem;
    margin-bottom: 0.25rem;
}

[b-rbwoa39eff] .bmr-container .stat-value {
    font-size: 1.5rem;
    font-weight: bold;
    color: #ffffff;
}

[b-rbwoa39eff] .bmr-container .stat-label {
    font-size: 0.75rem;
    color: #808080;
    text-transform: uppercase;
}

[b-rbwoa39eff] .bmr-container .game-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.85);
    z-index: 10;
}

[b-rbwoa39eff] .bmr-container .overlay-content {
    text-align: center;
    padding: 2rem;
    max-width: 400px;
}

[b-rbwoa39eff] .bmr-container .overlay-content h3 {
    color: #ffffff;
    margin-bottom: 1rem;
}

[b-rbwoa39eff] .bmr-container .game-instructions {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem 0;
    text-align: left;
}

[b-rbwoa39eff] .bmr-container .game-instructions li {
    padding: 0.5rem 0;
    color: #b0b0b0;
    border-bottom: 1px solid #343536;
}

[b-rbwoa39eff] .bmr-container .game-instructions li:last-child {
    border-bottom: none;
}

[b-rbwoa39eff] .bmr-container .game-instructions kbd {
    background-color: #343536;
    padding: 0.125rem 0.375rem;
    border-radius: 4px;
    font-size: 0.875rem;
}

[b-rbwoa39eff] .bmr-container .final-stats {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

[b-rbwoa39eff] .bmr-container .final-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem;
    background-color: #242526;
    border-radius: 8px;
    min-width: 100px;
}

[b-rbwoa39eff] .bmr-container .final-stat-value {
    font-size: 2rem;
    font-weight: bold;
    color: var(--bs-primary);
}

[b-rbwoa39eff] .bmr-container .final-stat-label {
    font-size: 0.75rem;
    color: #808080;
    text-transform: uppercase;
}

[b-rbwoa39eff] .bmr-container .game-controls-mobile {
    display: none;
    justify-content: center;
    gap: 1rem;
    margin-top: 1rem;
}

[b-rbwoa39eff] .bmr-container .control-row {
    display: flex;
    gap: 1rem;
}

[b-rbwoa39eff] .bmr-container .control-btn {
    width: 80px;
    height: 80px;
    font-size: 2rem;
    background-color: var(--rtub-surface-alt);
    border: 2px solid #343536;
    border-radius: 12px;
    color: #ffffff;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    display: flex;
    align-items: center;
    justify-content: center;
}

[b-rbwoa39eff] .bmr-container .control-btn:active {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}

@media (max-width: 768px) {
    [b-rbwoa39eff] .bmr-container .game-stats {
        gap: 0.5rem;
    }
    
    [b-rbwoa39eff] .bmr-container .stat-item {
        padding: 0.5rem 0.75rem;
        min-width: 60px;
    }
    
    [b-rbwoa39eff] .bmr-container .stat-value {
        font-size: 1.25rem;
    }
    
    [b-rbwoa39eff] .bmr-container .game-controls-mobile {
        display: flex;
    }

    [b-rbwoa39eff] .bmr-container .game-overlay {
        align-items: stretch;
        padding: 0.75rem;
    }

    [b-rbwoa39eff] .bmr-container .overlay-content {
        max-height: 100%;
        overflow-y: auto;
        padding: 1.25rem;
    }

    [b-rbwoa39eff] .bmr-container .overlay-content h3 {
        font-size: 1.25rem;
    }

    [b-rbwoa39eff] .bmr-container .game-instructions li {
        font-size: 0.95rem;
    }
}

@media (max-width: 480px) {
    .bmr-container[b-rbwoa39eff] {
        padding: 0 0.5rem;
    }
    
    [b-rbwoa39eff] .bmr-container .final-stats {
        gap: 0.5rem;
    }
    
    [b-rbwoa39eff] .bmr-container .final-stat {
        min-width: 80px;
        padding: 0.75rem;
    }
    
    [b-rbwoa39eff] .bmr-container .final-stat-value {
        font-size: 1.5rem;
    }

    [b-rbwoa39eff] .bmr-container .game-overlay {
        padding: 0.5rem;
    }

    [b-rbwoa39eff] .bmr-container .overlay-content {
        padding: 1rem;
    }

    [b-rbwoa39eff] .bmr-container .game-instructions li {
        font-size: 0.9rem;
    }
    
    [b-rbwoa39eff] .bmr-container .control-btn {
        width: 60px;
        height: 60px;
        font-size: 1.5rem;
    }
}
/* /Pages/Games/PassaroMaluco.razor.rz.scp.css */
/* Layout balance spacer */
.header-spacer[b-w7szrq6x1k] {
    width: 38px;
}
/* /Pages/Games/TomatoThrower.razor.rz.scp.css */
/* Layout balance spacer */
.header-spacer[b-2b0gdv9hzb] {
    width: 38px;
}
/* /Pages/Index.razor.rz.scp.css */
/* Scoped styles for Index.razor (Landing Page — Scroll Sections Refactor) */

/* ========================================
   CAROUSEL
   ======================================== */

.carousel-inner[b-m45ov1k34z] {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.carousel-item[b-m45ov1k34z] {
    position: relative;
    display: none;
    float: none;
    width: 100%;
    margin-right: 0;
    backface-visibility: hidden;
    transition: transform 0.6s ease-in-out;
}

.carousel-item.active[b-m45ov1k34z] {
    display: block;
}

.carousel-item-next[b-m45ov1k34z],
.carousel-item-prev[b-m45ov1k34z] {
    display: block;
    position: absolute;
    top: 0;
}

.carousel-item-next:not(.carousel-item-start)[b-m45ov1k34z] {
    transform: translateX(100%);
}

.carousel-item-prev:not(.carousel-item-end)[b-m45ov1k34z] {
    transform: translateX(-100%);
}

.carousel-image[b-m45ov1k34z] {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
}

.carousel-caption[b-m45ov1k34z] {
    position: absolute;
    right: 15%;
    bottom: 1.25rem;
    left: 15%;
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
    color: #fff;
    text-align: center;
}

/* Bottom gradient fade on carousel blending into page bg */
.carousel-fade-bottom[b-m45ov1k34z] {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 80px;
    background: linear-gradient(to top, #0f0f10, transparent);
    z-index: 2;
    pointer-events: none;
}

/* ========================================
   HERO / LOGO
   ======================================== */

.homepage-hero[b-m45ov1k34z] {
    padding: 2rem 0 1rem;
}

.logo-main[b-m45ov1k34z] {
    max-width: 300px;
    height: auto;
}

/* ========================================
   RESPONSIVE BREAKPOINTS
   ======================================== */

/* Phone (≤768px) */
@media (max-width: 768px) {
    .carousel-image[b-m45ov1k34z] {
        height: 250px;
        object-fit: contain;
    }

    .carousel-caption[b-m45ov1k34z] {
        padding: 0.5rem;
    }

    .carousel-caption h2[b-m45ov1k34z],
    .carousel-caption .h3[b-m45ov1k34z] {
        font-size: 1.1rem;
        margin-bottom: 0.25rem;
    }

    .carousel-caption p[b-m45ov1k34z] {
        font-size: 0.85rem;
        margin-bottom: 0;
    }

    .logo-main[b-m45ov1k34z] {
        max-width: 220px;
    }

    .homepage-hero[b-m45ov1k34z] {
        padding: 1.5rem 0 0.5rem;
    }
}

/* Phone landscape */
@media (max-width: 768px) and (orientation: landscape) {
    .carousel-image[b-m45ov1k34z] {
        height: 200px;
        object-fit: contain;
    }
}

/* Tablet (769px - 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
    .carousel-image[b-m45ov1k34z] {
        height: 350px;
    }

    .logo-main[b-m45ov1k34z] {
        max-width: 250px;
    }

    .carousel-item:not(.active)[b-m45ov1k34z] {
        display: none !important;
    }

    .carousel-item.active[b-m45ov1k34z] {
        display: block !important;
    }
}

/* Desktop (≥1025px) */
@media (min-width: 1025px) {
    .carousel-image[b-m45ov1k34z] {
        height: 440px;
    }

    .homepage-hero[b-m45ov1k34z] {
        padding: 2.5rem 0 1.5rem;
    }
}

/* Small phones */
@media (max-width: 375px) {
    .carousel-image[b-m45ov1k34z] {
        height: 200px;
        object-fit: contain;
    }

    .logo-main[b-m45ov1k34z] {
        max-width: 170px;
    }
}

/* ========================================
   MOBILE / PWA LAYOUT
   ======================================== */

@media (max-width: 1024px) {
    .homepage-content[b-m45ov1k34z] {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        overflow-x: hidden;
        min-height: 100vh;
        min-height: 100dvh;
    }
}

/* /Pages/Inventory/Inventory.razor.rz.scp.css */
/* Stats grid layout */
.stats-grid[b-iivbcldbx0] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    max-width: 700px;
    width: 100%;
}

/* Search bar container */
.search-bar-container[b-iivbcldbx0] {
    min-width: 360px;
    max-width: 640px;
}

/* Filter dropdown containers */
.filter-dropdown-container[b-iivbcldbx0] {
    min-width: 200px;
    max-width: 240px;
}

/* Mobile responsiveness for Inventory page */
@media (max-width: 768px) {
    /* Make filter dropdowns full width like search bar on mobile */
    .d-flex.flex-column.flex-sm-row .flex-sm-shrink-0[b-iivbcldbx0] {
        min-width: 100% !important;
        max-width: 100% !important;
    }
}
/* /Pages/Inventory/Shop.razor.rz.scp.css */
/* Search bar container */
.search-bar-container[b-h7cr1qzdjw] {
    min-width: 360px;
    max-width: 640px;
}

/* Filter dropdown containers */
.filter-dropdown-container[b-h7cr1qzdjw] {
    min-width: 200px;
    max-width: 240px;
}

/* Product description display */
.product-description[b-h7cr1qzdjw] {
    white-space: pre-line;
}

/* Mobile responsiveness for Shop page */
@media (max-width: 768px) {
    /* Make filter dropdowns full width like search bar on mobile */
    .flex-lg-shrink-0[b-h7cr1qzdjw] {
        min-width: 100% !important;
        max-width: 100% !important;
    }
}
/* /Pages/Management/Finance.razor.rz.scp.css */
/* =====================================================
   Finance Module Styles
   Migrated from wwwroot/css/4-pages/finance-reports.css
   ===================================================== */

/* Finance report card grid layout */
.finance-report-grid[b-jbg2qz5dbr] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
    align-items: stretch;
}

/* Ensure grid items stretch to fill height but not width */
[b-jbg2qz5dbr] .finance-report-grid > div {
    display: flex;
    flex-direction: column;
    max-width: 600px; /* Prevent cards from becoming too wide */
}

/* Report cards fill their container */
[b-jbg2qz5dbr] .finance-report-grid .report-card {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Card body fills available space and uses flexbox */
[b-jbg2qz5dbr] .finance-report-grid .report-card .card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: visible;
    min-width: 0;
}

/* Responsive adjustments for tablet */
@media (min-width: 768px) and (max-width: 991px) {
    .finance-report-grid[b-jbg2qz5dbr] {
        grid-template-columns: repeat(2, 1fr);
    }
    
    [b-jbg2qz5dbr] .finance-report-grid > div {
        max-width: 100%; /* Allow full width on tablet for 2-column layout */
    }
}

/* Responsive adjustments for mobile */
@media (max-width: 767px) {
    .finance-report-grid[b-jbg2qz5dbr] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    [b-jbg2qz5dbr] .finance-report-grid > div {
        max-width: 100%; /* Allow full width on mobile */
    }
}

/* Stat tiles for ReportCard - ensure values display fully */
[b-jbg2qz5dbr] .stat-tiles-container {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1rem;
    width: 100%;
    min-width: 0;
    overflow: visible;
}

[b-jbg2qz5dbr] .stat-tile {
    flex: 1;
    min-width: 0; /* Allow flex items to shrink below content size */
    max-width: 100%;
    background-color: rgba(21, 21, 22, 0.6);
    border-radius: 0.5rem;
    padding: 0.75rem 0.4rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    overflow: visible;
    align-items: center;
    justify-content: center;
}

[b-jbg2qz5dbr] .stat-title {
    font-size: 0.75rem;
    color: #b0b0b0;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

[b-jbg2qz5dbr] .stat-value {
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.3;
    word-break: break-all;
    overflow-wrap: break-word;
    white-space: normal;
    min-height: 1.3em;
    max-width: 100%;
    overflow: visible;
    hyphens: auto;
    display: block;
}

[b-jbg2qz5dbr] .stat-icon {
    font-size: 0.85rem;
    margin-right: 0.25rem;
}

/* Responsive adjustments for stat tiles */
@media (max-width: 767px) {
    [b-jbg2qz5dbr] .stat-tiles-container {
        gap: 0.5rem;
    }
    
    [b-jbg2qz5dbr] .stat-tile {
        padding: 0.6rem 0.4rem;
    }
    
    [b-jbg2qz5dbr] .stat-value {
        font-size: 0.9rem;
    }
    
    [b-jbg2qz5dbr] .stat-title {
        font-size: 0.7rem;
    }
}
/* /Pages/Management/Labels.razor.rz.scp.css */
/* Label content display */
.label-content[b-5bec8wm9xi] {
    white-space: pre-line;
}
/* /Pages/Management/Logistics.razor.rz.scp.css */
/* Logistics Page - Clean Bootstrap Grid Layout */

/* Wrapper for full width background */
.logistics-page-wrapper[b-df9oqws1xu] {
    width: 100%;
    animation: fadeIn-b-df9oqws1xu 0.3s ease-in;
}

@keyframes fadeIn-b-df9oqws1xu {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Centered container with max-width */
.logistics-page-container[b-df9oqws1xu] {
    max-width: 1400px;
    margin-inline: auto;
    padding-inline: 1.5rem;
}

/* Page header */
.page-header[b-df9oqws1xu] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    gap: 1rem;
}

/* Search bar container */
.search-bar-container[b-df9oqws1xu] {
    margin-bottom: 2rem;
}

/* Enhanced loading state */
.spinner-border[b-df9oqws1xu] {
    width: 3rem;
    height: 3rem;
    border-width: 0.3rem;
}

/* Ensure no horizontal scroll */
.logistics-page-wrapper[b-df9oqws1xu] {
    overflow-x: hidden;
}

/* Mobile responsive adjustments */
@media (max-width: 575px) {
    .logistics-page-container[b-df9oqws1xu] {
        padding-inline: 1rem;
    }
    
    .page-header[b-df9oqws1xu] {
        flex-direction: column;
        align-items: stretch;
        margin-bottom: 1.5rem;
    }
    
    .page-header h1[b-df9oqws1xu] {
        font-size: 1.5rem;
    }
    
    .page-header .btn[b-df9oqws1xu] {
        width: 100%;
    }
}

/* Modal styles */
.modal-backdrop-custom[b-df9oqws1xu] {
    background: rgba(0,0,0,0.7);
}

.modal-header-custom[b-df9oqws1xu] {
    background: rgba(var(--bs-primary-rgb), 0.1);
}

/* Scrollable event list */
.event-list-scrollable[b-df9oqws1xu] {
    max-height: 200px;
    overflow-y: auto;
}

/* Event list item */
.event-list-item[b-df9oqws1xu] {
    color: #E0E0E0;
    background-color: #1A1A1A;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.event-list-item:hover[b-df9oqws1xu] {
    background-color: #6E56CF;
    color: #FFFFFF;
}
/* /Pages/Management/LogisticsBoard.razor.rz.scp.css */
/* Logistics Board Page Specific Styles */

.logistics-board-header[b-qxqn30svr7] {
    background: linear-gradient(135deg, rgba(var(--bs-primary-rgb), 0.05) 0%, rgba(var(--bs-primary-rgb), 0.02) 100%);
    border-radius: 0.5rem;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    border: 1px solid rgba(var(--bs-primary-rgb), 0.1);
    animation: fadeInDown-b-qxqn30svr7 0.4s ease-out;
}

.logistics-board-header h1[b-qxqn30svr7] {
    margin: 0;
    white-space: nowrap;
}

@keyframes fadeInDown-b-qxqn30svr7 {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Improved kanban board scrollbar */
.kanban-board[b-qxqn30svr7] {
    animation: fadeIn-b-qxqn30svr7 0.5s ease-in;
}

@keyframes fadeIn-b-qxqn30svr7 {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Filter dropdown container */
.filter-dropdown-narrow[b-qxqn30svr7] {
    max-width: 300px;
}

/* Badge label - dynamic color is acceptable, but ensure white text */
.badge-label[b-qxqn30svr7] {
    color: white;
}

/* Modal backdrop */
.logistics-modal-backdrop[b-qxqn30svr7] {
    background: rgba(0,0,0,0.7);
}

/* Modal header */
.logistics-modal-header[b-qxqn30svr7] {
    background: rgba(var(--bs-primary-rgb), 0.1);
}

/* Scrollable lists */
.list-group-scrollable[b-qxqn30svr7] {
    max-height: 200px;
    overflow-y: auto;
}

.member-list-scrollable-override[b-qxqn30svr7] {
    max-height: 200px;
    overflow-y: auto;
}

/* Badge padding */
.badge-padded[b-qxqn30svr7] {
    padding: 0.4rem 0.6rem;
}

/* Close button small */
.btn-close-small[b-qxqn30svr7] {
    font-size: 0.6rem;
    padding: 0;
}

/* Color input */
.color-input-narrow[b-qxqn30svr7] {
    max-width: 60px;
}

/* Dropdown positioning */
.dropdown-absolute[b-qxqn30svr7] {
    top: 100%;
    z-index: 1000;
}

/* Avatar sizes */
.member-avatar-tiny[b-qxqn30svr7] {
    width: 24px;
    height: 24px;
    border-radius: 50%;
}

.member-avatar-small-override[b-qxqn30svr7] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
}

/* Enhanced card hover states */
.kanban-card[b-qxqn30svr7] {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.kanban-card.clickable[b-qxqn30svr7] {
    cursor: pointer;
}

.kanban-card.clickable:hover[b-qxqn30svr7] {
    transform: translateY(-2px);
}

.kanban-card:not(.clickable)[b-qxqn30svr7] {
    cursor: default;
}

/* Improved list header */
.kanban-list-header[b-qxqn30svr7] {
    background: linear-gradient(135deg, #0f0f10 0%, var(--rtub-surface-alt) 100%);
}

/* Better card status indicators */
.card-status-bar[b-qxqn30svr7] {
    font-size: 0.75rem;
    letter-spacing: 0.5px;
    font-weight: 700;
}

/* Fix dropdown selected background - use dark background */
[b-qxqn30svr7] .form-select option:checked,
[b-qxqn30svr7] .form-select option:hover {
    background-color: #0f0f10 !important;
    color: #ffffff !important;
}

/* Change "+" button colors from blue to purple */
[b-qxqn30svr7] .btn-outline-primary.add-button,
[b-qxqn30svr7] .input-group .btn-outline-primary {
    --bs-btn-color: #6E56CF;
    --bs-btn-border-color: #6E56CF;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #6E56CF;
    --bs-btn-hover-border-color: #6E56CF;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #6E56CF;
    --bs-btn-active-border-color: #6E56CF;
    --bs-btn-disabled-color: #6E56CF;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #6E56CF;
}

/* Modal improvements for card details */
.modal-dialog-scrollable .modal-body[b-qxqn30svr7] {
    scrollbar-width: thin;
    scrollbar-color: var(--bs-primary) #0f0f10;
}

.modal-dialog-scrollable .modal-body[b-qxqn30svr7]::-webkit-scrollbar {
    width: 8px;
}

.modal-dialog-scrollable .modal-body[b-qxqn30svr7]::-webkit-scrollbar-track {
    background: #0f0f10;
    border-radius: 4px;
}

.modal-dialog-scrollable .modal-body[b-qxqn30svr7]::-webkit-scrollbar-thumb {
    background: var(--bs-primary);
    border-radius: 4px;
}

.modal-dialog-scrollable .modal-body[b-qxqn30svr7]::-webkit-scrollbar-thumb:hover {
    background: #8a5dd3;
}

/* Improved form control focus states in modals */
.modal-content .form-control:focus[b-qxqn30svr7],
.modal-content .form-select:focus[b-qxqn30svr7] {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
}

/* Fix dropdown options background color in dark mode */
.modal-content .form-select[b-qxqn30svr7] {
    background-color: #0f0f10;
    color: #ffffff;
}

.modal-content .form-select option[b-qxqn30svr7] {
    background-color: #0f0f10;
    color: #ffffff;
}

/* Fix list-group-item-action active and hover background */
[b-qxqn30svr7] .list-group-item-action:hover,
[b-qxqn30svr7] .list-group-item-action:focus {
    background-color: #1a1a1c !important;
    color: #ffffff !important;
}

[b-qxqn30svr7] .list-group-item-action:active {
    background-color: #2a2a2c !important;
    color: #ffffff !important;
}

/* Badge enhancements */
.modal-content .badge[b-qxqn30svr7] {
    transition: all 0.2s ease;
}

.modal-content .badge:hover[b-qxqn30svr7] {
    transform: scale(1.05);
}

/* Cursor pointer for clickable items */
.cursor-pointer[b-qxqn30svr7] {
    cursor: pointer;
}

.cursor-pointer:hover[b-qxqn30svr7] {
    opacity: 0.8;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .logistics-board-header h1[b-qxqn30svr7] {
        font-size: 1.5rem;
    }
    
    .logistics-board-header .d-flex[b-qxqn30svr7] {
        flex-direction: column;
        gap: 0.5rem !important;
    }
    
    .logistics-board-header .btn[b-qxqn30svr7] {
        width: 100%;
    }
    
    .kanban-board[b-qxqn30svr7] {
        flex-direction: column !important;
        overflow-x: visible !important;
    }
    
    .kanban-list[b-qxqn30svr7] {
        width: 100% !important;
        min-width: 100% !important;
        margin-bottom: 1rem;
    }
    
    .kanban-list-header[b-qxqn30svr7] {
        flex-wrap: wrap;
    }
    
    .kanban-list-header .d-flex[b-qxqn30svr7] {
        gap: 0.25rem !important;
    }
    
    .kanban-list-header .btn-sm[b-qxqn30svr7] {
        font-size: 0.7rem;
        padding: 0.15rem 0.3rem;
    }
}

@media (max-width: 576px) {
    .logistics-board-header[b-qxqn30svr7] {
        padding: 1rem;
    }
    
    .modal-dialog[b-qxqn30svr7] {
        margin: 0.5rem;
    }
    
    .modal-body[b-qxqn30svr7] {
        padding: 1rem;
    }
    
    .kanban-card[b-qxqn30svr7] {
        font-size: 0.9rem;
    }
    
    .member-chip-name[b-qxqn30svr7] {
        max-width: 80px;
    }
}

/* Member chip styles for reminder user selection */
.selected-members-chips[b-qxqn30svr7] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.member-chip[b-qxqn30svr7] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.5rem 0.25rem 0.25rem;
    background-color: rgba(var(--bs-primary-rgb), 0.15);
    border: 1px solid rgba(var(--bs-primary-rgb), 0.3);
    border-radius: 20px;
    font-size: 0.85rem;
    color: var(--bs-body-color);
}

.member-chip-avatar[b-qxqn30svr7] {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
}

.member-chip-name[b-qxqn30svr7] {
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.member-chip-remove[b-qxqn30svr7] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    padding: 0;
    margin-left: 0.25rem;
    background: transparent;
    border: none;
    border-radius: 50%;
    color: var(--bs-danger);
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.member-chip-remove:hover[b-qxqn30svr7] {
    background-color: rgba(var(--bs-danger-rgb), 0.2);
}

.member-chip-remove i[b-qxqn30svr7] {
    font-size: 0.75rem;
}

/* Member list styles */
.member-list-scrollable[b-qxqn30svr7] {
    max-height: 200px;
    overflow-y: auto;
}

.member-item[b-qxqn30svr7] {
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.member-item:hover[b-qxqn30svr7],
.member-item:focus[b-qxqn30svr7] {
    background-color: rgba(var(--bs-primary-rgb), 0.1);
}

.clickable-row[b-qxqn30svr7] {
    outline: none;
}

.clickable-row:focus-visible[b-qxqn30svr7] {
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
}

/* Purple button for reminder modal */
.btn-purple[b-qxqn30svr7] {
    background-color: #6E56CF;
    border-color: #6E56CF;
    color: #fff;
}

.btn-purple:hover[b-qxqn30svr7],
.btn-purple:focus[b-qxqn30svr7] {
    background-color: #5b47a8;
    border-color: #5b47a8;
    color: #fff;
}

.btn-purple:disabled[b-qxqn30svr7] {
    background-color: #6E56CF;
    border-color: #6E56CF;
    opacity: 0.65;
}
/* /Pages/Management/NerbaOrderDetail.razor.rz.scp.css */
.day-cards-row[b-60kroi0g50] {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    flex-wrap: wrap;
    justify-content: center;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    padding-bottom: 0.5rem;
}

.day-card[b-60kroi0g50] {
    flex: 0 0 180px;
    border: 2px solid rgba(255,255,255,0.08);
    border-radius: 0.75rem;
    padding: 1.5rem 1.25rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    text-align: center;
}

.day-card--active[b-60kroi0g50] {
    border-color: #7c3aed;
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.2);
}

.day-card__date[b-60kroi0g50] {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1;
}

.day-card__number[b-60kroi0g50] {
    font-size: 3rem;
    font-weight: 700;
    color: #ffffff;
    line-height: 1;
}

.day-card__month[b-60kroi0g50] {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #9ca3af;
    margin-top: 0.15rem;
}

.day-card__badges[b-60kroi0g50] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.3rem;
    width: 100%;
}

.day-card__badges .badge[b-60kroi0g50] {
    font-size: 0.8rem;
    padding: 0.4rem 0.6rem;
}
/* /Pages/Management/Questions.razor.rz.scp.css */
/* Member list scrollable */
.member-list-scrollable[b-llho4cwmzj] {
    max-height: 200px;
    overflow-y: auto;
}

/* Avatar sizes */
.member-avatar-medium[b-llho4cwmzj] {
    width: 36px;
    height: 36px;
    object-fit: cover;
}

.member-avatar-small[b-llho4cwmzj] {
    width: 40px;
    height: 40px;
    object-fit: cover;
}

/* Question content display */
.question-content-display[b-llho4cwmzj] {
    white-space: pre-wrap;
    word-break: break-word;
}

/* Reply content display */
.reply-content-display[b-llho4cwmzj] {
    white-space: pre-line;
}

/* Replies list scrollable */
.replies-list-scrollable[b-llho4cwmzj] {
    max-height: 400px;
    overflow-y: auto;
}
/* /Pages/Management/Report.razor.rz.scp.css */
/* Discussion header styles for centered title */
.discussion-header[b-amd6nre6eb] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    justify-content: space-between;
    text-align: left;
}

.discussion-header-title[b-amd6nre6eb] {
    flex: 1 1 200px;
    min-width: 0;
    text-align: center;
}

.discussion-header-actions[b-amd6nre6eb] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.discussion-header .page-header-actions[b-amd6nre6eb] {
    width: auto;
    max-width: none;
    margin-left: auto;
}

/* Mobile responsiveness - prevent horizontal scrolling on page */
@media (max-width: 767.98px) {
    .summary-cards-container[b-amd6nre6eb] {
        overflow-x: hidden;
    }
    
    .accordion-body[b-amd6nre6eb] {
        overflow-x: hidden;
    }
    
    /* Make table cells wrap on mobile for better display */
    .table td[b-amd6nre6eb], .table th[b-amd6nre6eb] {
        white-space: normal;
        word-break: break-word;
    }
    
    /* Ensure action buttons don't wrap */
    .table td:last-child[b-amd6nre6eb] {
        white-space: nowrap;
    }
}

@media (max-width: 576px) {
    .discussion-header[b-amd6nre6eb] {
        justify-content: flex-start;
    }

    .discussion-header-title[b-amd6nre6eb] {
        order: 2;
        width: 100%;
    }

    .discussion-header-actions:first-child[b-amd6nre6eb] {
        order: 1;
    }

    .discussion-header-actions:last-child[b-amd6nre6eb] {
        order: 3;
        width: 100%;
        justify-content: flex-end;
    }
}
/* Compact transaction card grid */
.transaction-grid[b-amd6nre6eb] {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(auto-fill, minmax(220px, 260px));
    align-items: start;
}

@media (max-width: 575.98px) {
    .transaction-grid[b-amd6nre6eb] {
        grid-template-columns: 1fr;
    }
}

/* Statistics Cards for Transaction History */
.statistics-container[b-amd6nre6eb] {
    padding: 0.5rem 0;
}

.stats-card-grid[b-amd6nre6eb] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.stats-card[b-amd6nre6eb] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background-color: #1e1e1e;
    border-radius: 8px;
    border: 1px solid rgba(var(--bs-primary-rgb), 0.2);
    transition: all 0.2s ease;
}

.stats-card:hover[b-amd6nre6eb] {
    border-color: rgba(var(--bs-primary-rgb), 0.4);
    background-color: #252525;
}

.stats-card-content[b-amd6nre6eb] {
    flex-grow: 1;
    min-width: 0;
}

.stats-card-title[b-amd6nre6eb] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--bs-body-color);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-bottom: 0.25rem;
}

.stats-card-subtitle[b-amd6nre6eb] {
    font-size: 0.875rem;
    color: #ffffff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Button styles */
.btn-purple-light[b-amd6nre6eb] {
    font-weight: 400;
}

/* Edit button positioning */
.summary-card-edit-btn[b-amd6nre6eb] {
    top: 4px;
    right: 4px;
    padding: 2px 6px;
    font-size: 0.7rem;
}

/* Image constraints */
.receipt-thumbnail[b-amd6nre6eb] {
    max-height: 150px;
}

.receipt-viewer[b-amd6nre6eb] {
    max-height: 70vh;
}
/* /Pages/Management/Requests.razor.rz.scp.css */
/* Search bar container */
.search-bar-container[b-uccmn23x5i] {
    min-width: 360px;
    max-width: 640px;
}

/* Filter dropdown containers */
.filter-dropdown-container[b-uccmn23x5i] {
    min-width: 200px;
}

.filter-dropdown-container-wide[b-uccmn23x5i] {
    min-width: 240px;
}

/* Request message display */
.request-message[b-uccmn23x5i] {
    white-space: pre-line;
}
/* /Pages/Management/UserRoles.razor.rz.scp.css */
/* User Roles Page - Responsive Table */

.user-roles-table[b-3v2stpr6ly] {
    min-width: 320px;
}

.user-roles-table .member-avatar-small[b-3v2stpr6ly] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
}

/* Desktop view - hide certain columns on smaller screens */
@media (max-width: 1199px) {
    .user-roles-table .d-xl-table-cell[b-3v2stpr6ly] {
        display: none !important;
    }
}

@media (max-width: 991px) {
    .user-roles-table .d-lg-table-cell[b-3v2stpr6ly] {
        display: none !important;
    }
}

@media (max-width: 767px) {
    .user-roles-table .d-md-table-cell[b-3v2stpr6ly] {
        display: none !important;
    }
}

/* Mobile card-based layout */
@media (max-width: 576px) {
    .user-roles-table[b-3v2stpr6ly] {
        font-size: 0.9rem;
    }

    .user-roles-table thead[b-3v2stpr6ly] {
        display: none;
    }

    .user-roles-table tbody[b-3v2stpr6ly],
    .user-roles-table tr[b-3v2stpr6ly],
    .user-roles-table td[b-3v2stpr6ly] {
        display: block;
        width: 100%;
    }

    .user-roles-table tr[b-3v2stpr6ly] {
        margin-bottom: 0.75rem;
        border: 1px solid rgba(var(--bs-primary-rgb), 0.15);
        border-radius: 0.5rem;
        padding: 0.5rem 0.75rem;
        background-color: rgba(var(--bs-primary-rgb), 0.02);
    }

    .user-roles-table td[b-3v2stpr6ly] {
        display: grid;
        grid-template-columns: auto 1fr;
        align-items: center;
        gap: 0.5rem 0.75rem;
        border-bottom: 1px dashed rgba(var(--bs-primary-rgb), 0.1);
        padding: 0.5rem 0;
    }

    .user-roles-table td:last-child[b-3v2stpr6ly] {
        border-bottom: none;
        padding-bottom: 0;
    }

    .user-roles-table td[b-3v2stpr6ly]::before {
        content: attr(data-label);
        font-weight: 600;
        color: var(--bs-gray-400);
        letter-spacing: 0.01em;
    }

    /* Show all columns on mobile in card view */
    .user-roles-table td.d-none[b-3v2stpr6ly] {
        display: grid !important;
    }

    .user-roles-table .member-avatar-small[b-3v2stpr6ly] {
        width: 42px;
        height: 42px;
    }

    .user-roles-table .btn-sm[b-3v2stpr6ly] {
        min-width: 36px;
        min-height: 36px;
    }

    /* User column - special handling for the avatar layout */
    .user-roles-table td[data-label="Utilizador"][b-3v2stpr6ly] {
        grid-template-columns: 1fr;
    }

    .user-roles-table td[data-label="Utilizador"][b-3v2stpr6ly]::before {
        margin-bottom: 0.25rem;
    }

    /* Actions column - right align buttons */
    .user-roles-table td[data-label="Ações"][b-3v2stpr6ly] {
        display: flex;
        justify-content: flex-end;
        gap: 0.25rem;
    }

    .user-roles-table td[data-label="Ações"][b-3v2stpr6ly]::before {
        display: none;
    }
}

/* Ensure badges wrap properly */
.user-roles-table .badge[b-3v2stpr6ly] {
    white-space: nowrap;
}

/* Touch-friendly action buttons */
@media (hover: none) and (pointer: coarse) {
    .user-roles-table .btn-sm[b-3v2stpr6ly] {
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}

/* /Pages/Media/Albums.razor.rz.scp.css */
/* Page-scoped styles for Albums.razor */

/* Private album badge styling */
.badge.bg-warning[b-byuymreq3w] {
    font-size: 0.7rem;
    padding: 0.25rem 0.5rem;
}

.badge.bg-warning i[b-byuymreq3w] {
    font-size: 0.7rem;
}

/* IsPrivate checkbox styling in form */
.form-check-label[b-byuymreq3w] {
    cursor: pointer;
    user-select: none;
}

.form-check-input:checked[b-byuymreq3w] {
    background-color: #ffc107;
    border-color: #ffc107;
}

/* Statistics Cards */
.stats-card-grid[b-byuymreq3w] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.stats-card[b-byuymreq3w] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background-color: #1e1e1e;
    border-radius: 8px;
    border: 1px solid rgba(var(--bs-primary-rgb), 0.2);
    transition: all 0.2s ease;
}

.stats-card:hover[b-byuymreq3w] {
    border-color: rgba(var(--bs-primary-rgb), 0.4);
    background-color: #252525;
}

.stats-card-position[b-byuymreq3w] {
    flex-shrink: 0;
    width: 50px;
    text-align: center;
}

/* Button styles */
.btn-purple-light[b-byuymreq3w] {
    font-weight: 400;
}

/* User stats header */
.user-stats-header[b-byuymreq3w] {
    cursor: pointer;
    font-size: 1.5rem;
}

.stats-medal[b-byuymreq3w] {
    font-size: 2rem;
}

.stats-position[b-byuymreq3w] {
    font-size: 1.25rem;
    font-weight: 600;
    color: #ffffff;
}

.stats-card-content[b-byuymreq3w] {
    flex-grow: 1;
    min-width: 0;
}

.stats-card-title[b-byuymreq3w] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--bs-body-color);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.stats-card-subtitle[b-byuymreq3w] {
    font-size: 0.875rem;
    color: #ffffff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.stats-card-user[b-byuymreq3w] {
    font-size: 0.75rem;
    color: var(--bs-primary);
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.stats-card-count[b-byuymreq3w] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--bs-primary);
}

.stats-card-count i[b-byuymreq3w] {
    font-size: 1.5rem;
}

.stats-card-detailed[b-byuymreq3w] {
    background-color: #1a1a1a;
}

/* User stats grouping */
.user-stats-group[b-byuymreq3w] {
    border: 1px solid rgba(var(--bs-primary-rgb), 0.3);
    border-radius: 8px;
    padding: 1rem;
    background-color: rgba(var(--bs-primary-rgb), 0.05);
}

.user-stats-header[b-byuymreq3w] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--bs-primary);
    padding: 0.5rem;
    border-radius: 6px;
    transition: background-color 0.2s ease;
}

.user-stats-header:hover[b-byuymreq3w] {
    background-color: rgba(var(--bs-primary-rgb), 0.1);
}

.user-stats-avatar[b-byuymreq3w] {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--bs-primary);
}

.user-stats-info[b-byuymreq3w] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.user-stats-nickname[b-byuymreq3w] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--bs-primary);
}

.user-stats-fullname[b-byuymreq3w] {
    font-size: 0.85rem;
    font-weight: 400;
    color: #ffffff;
}

.user-stats-total[b-byuymreq3w] {
    font-size: 0.9rem;
    color: #ffffff;
    margin-left: auto;
    margin-right: 0.5rem;
}

.user-stats-header i[b-byuymreq3w] {
    font-size: 1.3rem;
}

/* Ensure badge doesn't wrap on small screens */
@media (max-width: 576px) {
    .badge.bg-warning[b-byuymreq3w] {
        font-size: 0.65rem;
        padding: 0.2rem 0.4rem;
    }
    
    .stats-card[b-byuymreq3w] {
        gap: 0.75rem;
        padding: 0.75rem;
    }
    
    .stats-card-position[b-byuymreq3w] {
        width: 40px;
    }
    
    .stats-medal[b-byuymreq3w] {
        font-size: 1.5rem;
    }
    
    .stats-card-title[b-byuymreq3w] {
        font-size: 0.9rem;
    }
    
    .stats-card-subtitle[b-byuymreq3w] {
        font-size: 0.8rem;
    }
    
    .stats-card-count[b-byuymreq3w] {
        font-size: 1rem;
    }
    
    .stats-card-count i[b-byuymreq3w] {
        font-size: 1.25rem;
    }
}

/* Exclusive album badge styling */
.badge.bg-purple[b-byuymreq3w] {
    font-size: 0.7rem;
    padding: 0.25rem 0.5rem;
}

.badge.bg-purple i[b-byuymreq3w] {
    font-size: 0.7rem;
}

/* Exclusive checkbox styling */
.rtub-checkbox-exclusive:checked[b-byuymreq3w] {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}

/* Exclusive members section */
.exclusive-members-section[b-byuymreq3w] {
    padding: 1rem;
    background-color: rgba(var(--bs-primary-rgb), 0.05);
    border: 1px solid rgba(var(--bs-primary-rgb), 0.2);
    border-radius: 8px;
}

/* Selected members chips */
.selected-members-chips[b-byuymreq3w] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.member-chip[b-byuymreq3w] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.5rem 0.25rem 0.25rem;
    background-color: rgba(var(--bs-primary-rgb), 0.15);
    border: 1px solid rgba(var(--bs-primary-rgb), 0.3);
    border-radius: 20px;
    font-size: 0.85rem;
    color: var(--bs-body-color);
}

.member-chip-avatar[b-byuymreq3w] {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
}

.member-chip-name[b-byuymreq3w] {
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.member-chip-remove[b-byuymreq3w] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    padding: 0;
    margin-left: 0.25rem;
    background: transparent;
    border: none;
    border-radius: 50%;
    color: var(--bs-danger);
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.member-chip-remove:hover[b-byuymreq3w] {
    background-color: rgba(var(--bs-danger-rgb), 0.2);
}

.member-chip-remove i[b-byuymreq3w] {
    font-size: 0.75rem;
}

/* Member list for selection (scoped version) */
.member-list-scrollable[b-byuymreq3w] {
    max-height: 200px;
    overflow-y: auto;
}

.member-item[b-byuymreq3w] {
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.member-item:hover[b-byuymreq3w],
.member-item:focus[b-byuymreq3w] {
    background-color: rgba(var(--bs-primary-rgb), 0.1);
}

.clickable-row[b-byuymreq3w] {
    outline: none;
}

.clickable-row:focus-visible[b-byuymreq3w] {
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
}

@media (max-width: 576px) {
    .badge.bg-purple[b-byuymreq3w] {
        font-size: 0.65rem;
        padding: 0.2rem 0.4rem;
    }
    
    .member-chip-name[b-byuymreq3w] {
        max-width: 80px;
    }
    
    .exclusive-members-section[b-byuymreq3w] {
        padding: 0.75rem;
    }
}
/* /Pages/Media/Documentation.razor.rz.scp.css */
.documentation-page[b-68cyt05510] {
    width: 100%;
    max-width: 100%;
    padding-inline: 0;
    overflow-x: hidden;
}

@media (max-width: 576px) {
    .documentation-page[b-68cyt05510] {
        padding-inline: 0.75rem;
    }

    .documentation-page .row[b-68cyt05510] {
        margin-left: 0;
        margin-right: 0;
    }
}

/* PDF viewer container */
.pdf-viewer-container[b-68cyt05510] {
    height: 80vh;
}

.pdf-viewer-iframe[b-68cyt05510] {
    width: 100%;
    height: 100%;
    border: none;
}
/* /Pages/Media/Gallery.razor.rz.scp.css */
/* ========================================
   GALLERY TIMELINE - SIMPLIFIED LAYOUT
   ======================================== */

/* Base container */
.gallery-timeline[b-lgwqcdydpm] {
    position: relative;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 0;
}

/* Central vertical line */
.gallery-timeline-line[b-lgwqcdydpm] {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 2px;
    background: var(--bs-purple);
    pointer-events: none;
    z-index: 0;
}

/* Year badge/pill */
.timeline-year-node[b-lgwqcdydpm] {
    position: relative;
    display: flex;
    justify-content: center;
    margin: 40px 0;
    z-index: 1;
}

.timeline-year-marker[b-lgwqcdydpm] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 15px;
    background: var(--bs-dark);
    padding: 10px 30px;
    border-radius: 30px;
    border: 3px solid var(--bs-purple);
}

.timeline-year-dot[b-lgwqcdydpm] {
    width: 20px;
    height: 20px;
    background: var(--bs-purple);
    border-radius: 50%;
    border: 3px solid var(--bs-dark);
}

.timeline-year-label[b-lgwqcdydpm] {
    margin: 0;
    color: white;
    font-weight: bold;
    font-size: 1.8rem;
}

/* Month label - just text near the line */
.gallery-timeline-month-label[b-lgwqcdydpm] {
    position: relative;
    margin: 1rem 0 0.5rem;
    text-align: center;
    font-size: 0.9rem;
    color: #b0b0b0;
    font-weight: 500;
    text-transform: capitalize;
    z-index: 1;
}

/* Timeline item - one card per item */
.gallery-timeline-item[b-lgwqcdydpm] {
    position: relative;
    width: 100%;
    margin: 3rem 0;
}

/* Dot on the line for each item */
.gallery-timeline-dot[b-lgwqcdydpm] {
    position: absolute;
    left: 50%;
    top: 1.25rem;
    transform: translateX(-50%);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--bs-purple);
    border: 2px solid var(--bs-dark);
    z-index: 1;
}

/* Card positioning - left and right */
.gallery-timeline-item.left .gallery-card[b-lgwqcdydpm] {
    margin-right: auto;
    margin-left: 0;
}

.gallery-timeline-item.right .gallery-card[b-lgwqcdydpm] {
    margin-left: auto;
    margin-right: 0;
}

/* Gallery card base styles */
.gallery-card[b-lgwqcdydpm] {
    width: min(420px, 45%);
    position: relative;
    background: var(--bs-card-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    z-index: 1;
}

/* Hover style matching Members.razor avatar-card */
.gallery-card:hover[b-lgwqcdydpm],
.gallery-card:focus[b-lgwqcdydpm] {
    transform: translateY(-2px);
    box-shadow: 0 0 0 2px var(--bs-primary);
    outline: none;
}

.gallery-card:focus-visible[b-lgwqcdydpm] {
    transform: translateY(-2px);
    box-shadow: 0 0 0 2px var(--bs-primary);
    outline: none;
}

/* Admin overlay (edit/delete buttons) */
.gallery-admin-overlay[b-lgwqcdydpm] {
    position: absolute;
    top: 6px;
    right: 6px;
    display: flex;
    gap: 4px;
    z-index: 10;
    opacity: 0.85;
    transition: opacity 0.2s ease;
}

.gallery-card:hover .gallery-admin-overlay[b-lgwqcdydpm] {
    opacity: 1;
}

.media-card-image[b-lgwqcdydpm] {
    position: relative;
    width: 100%;
    height: 250px;
    overflow: hidden;
    background: var(--bs-gray-900);
}

.media-card-image img[b-lgwqcdydpm] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.media-card-image video[b-lgwqcdydpm] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.media-card:hover .media-card-image img[b-lgwqcdydpm],
.media-card:hover .media-card-image video[b-lgwqcdydpm] {
    transform: scale(1.05);
}

.video-thumbnail[b-lgwqcdydpm] {
    position: relative;
    width: 100%;
    height: 100%;
}

.video-thumbnail img[b-lgwqcdydpm] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.video-overlay[b-lgwqcdydpm] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 4rem;
    color: white;
    opacity: 0.8;
    transition: opacity 0.3s ease;
}

.media-card:hover .video-overlay[b-lgwqcdydpm] {
    opacity: 1;
}

.media-card-body[b-lgwqcdydpm] {
    padding: 15px;
}

.media-card-title[b-lgwqcdydpm] {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--bs-body-color);
    margin-bottom: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.media-card-meta[b-lgwqcdydpm] {
    margin-bottom: 10px;
}

.uploader-avatar[b-lgwqcdydpm] {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--bs-purple);
}

.tagged-people[b-lgwqcdydpm] {
    display: flex;
    align-items: center;
    gap: 5px;
    color: white;
}

.tagged-people i[b-lgwqcdydpm] {
    color: var(--bs-purple);
}

.media-card-actions[b-lgwqcdydpm] {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}

/* Lightbox */
.lightbox-content[b-lgwqcdydpm] {
    max-height: 80vh;
    overflow-y: auto;
}

.lightbox-content > img[b-lgwqcdydpm] {
    display: block;
    max-width: 100%;
    max-height: 70vh;
    object-fit: contain;
    border-radius: 8px;
    margin: 0 auto;
}

.lightbox-content video[b-lgwqcdydpm] {
    border-radius: 8px;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    /* Shift line to the left */
    .gallery-timeline-line[b-lgwqcdydpm] {
        left: 30px;
    }

    /* Shift dot to the left */
    .gallery-timeline-dot[b-lgwqcdydpm] {
        left: 30px;
        transform: translateX(-50%);
    }

    /* All cards to the right of the line */
    .gallery-timeline-item.left .gallery-card[b-lgwqcdydpm],
    .gallery-timeline-item.right .gallery-card[b-lgwqcdydpm] {
        margin-left: 3.5rem;
        margin-right: 0;
        width: auto;
    }

    /* Month label aligned left */
    .gallery-timeline-month-label[b-lgwqcdydpm] {
        text-align: left;
        padding-left: 3.5rem;
    }

    /* Year marker aligned left */
    .timeline-year-node[b-lgwqcdydpm] {
        justify-content: flex-start;
        padding-left: 3.5rem;
    }

    .timeline-year-marker[b-lgwqcdydpm] {
        padding: 8px 20px;
    }

    .timeline-year-label[b-lgwqcdydpm] {
        font-size: 1.5rem;
    }

    .media-card-image[b-lgwqcdydpm] {
        height: 200px;
    }
}

/* Extra small devices */
@media (max-width: 576px) {
    /* Line closer to left edge */
    .gallery-timeline-line[b-lgwqcdydpm] {
        left: 20px;
    }

    /* Dot closer to left edge */
    .gallery-timeline-dot[b-lgwqcdydpm] {
        left: 20px;
    }

    /* Cards with less left margin */
    .gallery-timeline-item.left .gallery-card[b-lgwqcdydpm],
    .gallery-timeline-item.right .gallery-card[b-lgwqcdydpm] {
        margin-left: 2.5rem;
    }

    /* Month label closer */
    .gallery-timeline-month-label[b-lgwqcdydpm] {
        padding-left: 2.5rem;
    }

    /* Year marker closer */
    .timeline-year-node[b-lgwqcdydpm] {
        padding-left: 2.5rem;
    }

    .timeline-year-marker[b-lgwqcdydpm] {
        padding: 6px 15px;
    }

    .timeline-year-dot[b-lgwqcdydpm] {
        width: 16px;
        height: 16px;
    }

    .timeline-year-label[b-lgwqcdydpm] {
        font-size: 1.3rem;
    }
}

/* Gallery-specific override for larger image in modal */
[b-lgwqcdydpm] .details-modal-image-rectangular {
    max-width: 1000px;
    max-height: 80vh;
    width: auto;
    height: auto;
    object-fit: contain;
}

@media (max-width: 768px) {
    [b-lgwqcdydpm] .details-modal-image-rectangular {
        max-width: 100%;
        max-height: 70vh;
    }
}

/* Person selector styling */
[b-lgwqcdydpm] .list-group-item {
    background-color: var(--bs-card-bg);
    border-color: var(--bs-border-color);
    color: var(--bs-body-color);
}

[b-lgwqcdydpm] .list-group-item:hover {
    background-color: rgba(138, 43, 226, 0.1);
    border-color: var(--bs-purple);
}

[b-lgwqcdydpm] .list-group-item.active {
    background-color: rgba(138, 43, 226, 0.2);
    border-color: var(--bs-purple);
    color: var(--bs-body-color);
}

/* Gallery media modal preview - crisp, non-pixelated preview for both images and videos */
.gallery-media-modal__preview img[b-lgwqcdydpm],
.gallery-media-modal__preview video[b-lgwqcdydpm] {
    max-width: 220px;
    max-height: 180px;
    width: auto;
    height: auto;
    object-fit: cover;
}

/* Search and filter containers */
.search-field-container[b-lgwqcdydpm] {
    min-width: 300px;
    max-width: 400px;
}

.filter-year-container[b-lgwqcdydpm] {
    min-width: 200px;
    max-width: 240px;
}

.items-per-page-container[b-lgwqcdydpm] {
    min-width: 150px;
    max-width: 180px;
}

/* Scrollable member lists */
.member-list-scrollable[b-lgwqcdydpm] {
    max-height: 200px;
    overflow-y: auto;
}

/* Small avatar */
.member-avatar-tiny[b-lgwqcdydpm] {
    width: 30px;
    height: 30px;
    object-fit: cover;
}
/* /Pages/Media/Slideshows.razor.rz.scp.css */
/* Search bar container */
.search-bar-container[b-grob9myv89] {
    min-width: 260px;
}
/* /Pages/Media/Songs.razor.rz.scp.css */
/* Video modal styles (matches PostCard pattern) */
.video-player-container[b-t96b0at2ad] {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #000;
    border-radius: 8px;
    overflow: hidden;
}

.modal-video[b-t96b0at2ad] {
    width: 100%;
    max-width: 100%;
    max-height: 70vh;
    display: block;
}

.video-selector[b-t96b0at2ad] {
    margin-bottom: 1rem;
}

.video-selector .list-group-item[b-t96b0at2ad] {
    cursor: pointer;
    transition: background-color 0.2s;
}

.video-selector .list-group-item:hover:not(.active)[b-t96b0at2ad] {
    background-color: var(--bs-primary); /* Purple hover using theme color */
    color: white;
}

.video-selector .list-group-item.active[b-t96b0at2ad] {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
    color: white;
}

/* Video title truncation to prevent overflow when delete button is present */
.video-selector .list-group-item[b-t96b0at2ad] {
    padding-right: 3.5rem; /* Make room for delete button */
    overflow: hidden; /* Prevent any content from overflowing */
}

.video-selector .video-title-content[b-t96b0at2ad] {
    display: inline-block;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* PDF viewer container */
.pdf-viewer-container[b-t96b0at2ad] {
    height: 80vh;
    overflow: auto;
}

.pdf-viewer-iframe[b-t96b0at2ad] {
    width: 100%;
    height: 100%;
    border: none;
    vertical-align: middle;
}

/* Fix filename overflow in file picker */
.localized-file-picker .localized-file-name[b-t96b0at2ad] {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}

/* Responsive video sizing for modal */
@media (max-width: 768px) {
    .modal-video[b-t96b0at2ad] {
        max-height: 50vh;
    }
    
    /* Mobile/PWA optimizations for video list */
    .video-selector .list-group-item[b-t96b0at2ad] {
        padding: 0.75rem 1rem;
        padding-right: 3.5rem; /* Maintain space for delete button */
        font-size: 0.95rem;
    }
    
    /* Make delete button more touch-friendly on mobile */
    .video-selector .admin-btn-delete[b-t96b0at2ad] {
        min-width: 36px;
        min-height: 36px;
    }
    
    /* Better file picker on mobile */
    .localized-file-picker[b-t96b0at2ad] {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .localized-file-picker .localized-file-button[b-t96b0at2ad] {
        width: 100%;
    }
    
    .localized-file-picker .localized-file-name[b-t96b0at2ad] {
        width: 100%;
        text-align: center;
    }
}

@media (min-width: 769px) {
    .modal-video[b-t96b0at2ad] {
        max-height: 70vh;
    }
}

/* PWA-specific improvements for standalone mode */
@media (display-mode: standalone) {
    .video-player-container[b-t96b0at2ad] {
        /* Account for safe areas on mobile devices */
        padding-bottom: env(safe-area-inset-bottom);
    }
    
    .modal-video[b-t96b0at2ad] {
        /* Optimize for full-screen PWA experience */
        max-height: calc(80vh - env(safe-area-inset-bottom));
    }
}

/* Mobile bottom padding to account for MobileBottomNav overlap */
@media (max-width: 1199.98px) {
    [b-t96b0at2ad] .song-grid {
        padding-bottom: 5rem;
    }
}
/* /Pages/Members/Hierarchy.razor.rz.scp.css */
/* Hierarquia Family Tree Styles - All scoped under .family-tree-page */
/* Migrated from wwwroot/css/4-pages/family-tree.css */

/* Page wrapper - scopes all styles to this page only */
.family-tree-page[b-nkeatqx80n] {
    width: 100%;
}

/* Desktop: Scroll wrapper is transparent */
[b-nkeatqx80n] .family-tree-page .family-tree-scroll {
    width: 100%;
    overflow: visible;
}

/* Viewport wrapper - allows full horizontal scrolling without clipping */
[b-nkeatqx80n] .family-tree-page .family-tree-viewport {
    width: 100%;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    position: relative;
    margin-left: 0;
    margin-right: 0;
}

[b-nkeatqx80n] .family-tree-page .family-tree-container {
    padding: 20px;
    min-height: 400px;
    display: inline-block;
    min-width: 100%;
    width: fit-content;
}

[b-nkeatqx80n] .family-tree-page .tree-level {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    /* Desktop: maintain original flex-start to preserve existing layout */
    justify-content: flex-start;
    margin-bottom: 20px;
    min-width: fit-content;
}

[b-nkeatqx80n] .family-tree-page .tree-node-wrapper {
    flex: 0 0 auto;
}

[b-nkeatqx80n] .family-tree-page .member-node {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

[b-nkeatqx80n] .family-tree-page .member-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 15px;
    background: rgba(var(--bs-primary-rgb), 0.1);
    border: 2px solid var(--bs-primary);
    border-radius: 15px;
    min-width: 150px;
    transition: all 0.3s ease;
    cursor: pointer;
}

[b-nkeatqx80n] .family-tree-page .member-card:hover {
    background: rgba(var(--bs-primary-rgb), 0.2);
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(var(--bs-primary-rgb), 0.3);
}

[b-nkeatqx80n] .family-tree-page .member-info {
    text-align: center;
    margin-top: 8px;
}

[b-nkeatqx80n] .family-tree-page .member-name {
    font-weight: 600;
    font-size: 14px;
    color: var(--bs-body-color);
}

[b-nkeatqx80n] .family-tree-page .member-nickname {
    font-size: 12px;
    color: #6c757d;
    font-style: italic;
}

[b-nkeatqx80n] .family-tree-page .children-connector {
    width: 2px;
    height: 30px;
    background: var(--bs-primary);
    margin: 10px auto;
}

[b-nkeatqx80n] .family-tree-page .children-container {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    justify-content: center;
    position: relative;
}

[b-nkeatqx80n] .family-tree-page .children-container::before {
    content: '';
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 60px);
    height: 2px;
    background: var(--bs-primary);
}

[b-nkeatqx80n] .family-tree-page .child-node {
    position: relative;
    flex: 0 0 auto;
}

[b-nkeatqx80n] .family-tree-page .child-node::before {
    content: '';
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 10px;
    background: var(--bs-primary);
}

/* Mobile responsive styles - all scoped under .family-tree-page */
@media (max-width: 768px) {
    /* Scroll container enables horizontal + vertical scrolling on mobile */
    [b-nkeatqx80n] .family-tree-page .family-tree-scroll {
        width: 100%;
        height: calc(100vh - 180px);
        overflow-x: auto;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        position: relative;
    }

    [b-nkeatqx80n] .family-tree-page .family-tree-viewport {
        width: 100%;
        overflow: visible;
        min-width: fit-content;
    }

    [b-nkeatqx80n] .family-tree-page .family-tree-container {
        padding: 10px;
        min-width: fit-content;
        width: fit-content;
        display: block;
    }

    [b-nkeatqx80n] .family-tree-page .tree-level {
        gap: 20px;
        flex-wrap: nowrap;
        min-width: fit-content;
        /* Mobile: flex-start allows tree to scroll from left edge */
        justify-content: flex-start;
        display: flex;
    }
    
    [b-nkeatqx80n] .family-tree-page .children-container {
        gap: 20px;
        flex-wrap: nowrap;
        min-width: fit-content;
    }

    [b-nkeatqx80n] .family-tree-page .member-node {
        min-width: fit-content;
    }

    [b-nkeatqx80n] .family-tree-page .member-card {
        max-width: 220px;
        width: 70vw;
        min-width: 120px;
        padding: 10px;
        border-width: 1.5px;
    }

    [b-nkeatqx80n] .family-tree-page .member-avatar-medium {
        width: 50px;
        height: 50px;
    }

    [b-nkeatqx80n] .family-tree-page .member-name {
        font-size: 12px;
        word-break: break-word;
    }

    [b-nkeatqx80n] .family-tree-page .member-nickname {
        font-size: 11px;
        word-break: break-word;
    }

    [b-nkeatqx80n] .family-tree-page .children-connector {
        height: 25px;
        margin: 8px auto;
    }

    [b-nkeatqx80n] .family-tree-page .children-container::before {
        width: calc(100% - 40px);
    }

    [b-nkeatqx80n] .family-tree-page .child-node::before {
        height: 8px;
        top: -8px;
    }
}
/* /Pages/Members/MemberMap.razor.rz.scp.css */
.member-map-container[b-scpdetalty] {
    position: relative;
    width: 100%;
}

.member-map[b-scpdetalty] {
    width: 100%;
    height: 600px;
    min-height: 600px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    background: var(--rtub-surface-alt);
    z-index: 1;
    position: relative;
}

/* Ensure Leaflet tiles load properly */
[b-scpdetalty] .leaflet-container {
    height: 100%;
    width: 100%;
    border-radius: 8px;
}

[b-scpdetalty] .leaflet-tile-container {
    z-index: 2 !important;
}

.map-stats[b-scpdetalty] {
    margin-top: 1.5rem;
}

.stat-card[b-scpdetalty] {
    background: var(--card-bg);
    border: 2px solid var(--purple);
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.stat-card:hover[b-scpdetalty] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(138, 43, 226, 0.3);
}

.stat-card-header[b-scpdetalty] {
    padding: 1.5rem;
    text-align: center;
    cursor: pointer;
    user-select: none;
    transition: background 0.2s ease;
    position: relative;
}

.stat-card-header:hover[b-scpdetalty] {
    background: rgba(111, 66, 193, 0.1);
}

.stat-card-header .chevron[b-scpdetalty] {
    position: absolute;
    right: 1.5rem;
    top: 50%;
    transform: translateY(-50%);
    transition: transform 0.3s ease;
    color: var(--purple);
    font-size: 1.2rem;
}

.stat-card-header .chevron.rotated[b-scpdetalty] {
    transform: translateY(-50%) rotate(180deg);
}

.stat-card i[b-scpdetalty] {
    font-size: 2rem;
    color: var(--purple);
    margin-bottom: 0.5rem;
}

.stat-value[b-scpdetalty] {
    font-size: 2.5rem;
    font-weight: bold;
    color: var(--text-white-full);
    margin: 0.5rem 0;
}

.stat-label[b-scpdetalty] {
    font-size: 0.875rem;
    color: var(--text-light-theme);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.stat-card-body[b-scpdetalty] {
    max-height: 400px;
    overflow-y: auto;
    padding: 0;
    border-top: 1px solid var(--purple);
}

.member-list[b-scpdetalty] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.member-list-item[b-scpdetalty] {
    display: flex;
    align-items: center;
    padding: 0.75rem 1.5rem;
    border-bottom: 1px solid var(--border-color);
    transition: background 0.2s ease;
}

.member-list-item:last-child[b-scpdetalty] {
    border-bottom: none;
}

.member-list-item:hover[b-scpdetalty] {
    background: var(--hover-bg);
}

.member-avatar[b-scpdetalty] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 0.75rem;
    border: 2px solid var(--purple);
    flex-shrink: 0;
}

.member-info[b-scpdetalty] {
    flex: 1;
    min-width: 0;
}

.member-nickname[b-scpdetalty] {
    font-weight: 600;
    color: var(--text-white-full);
    margin: 0;
    font-size: 0.9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.member-city[b-scpdetalty] {
    font-size: 0.75rem;
    color: var(--text-light-theme);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.city-list-item[b-scpdetalty] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1.5rem;
    border-bottom: 1px solid var(--border-color);
    transition: background 0.2s ease;
}

.city-list-item:last-child[b-scpdetalty] {
    border-bottom: none;
}

.city-list-item:hover[b-scpdetalty] {
    background: var(--hover-bg);
}

.city-name[b-scpdetalty] {
    font-weight: 600;
    color: var(--text-white-full);
    font-size: 0.9rem;
}

.city-count[b-scpdetalty] {
    background: var(--purple);
    color: white;
    padding: 0.25rem 0.5rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: bold;
}

/* Custom scrollbar */
.stat-card-body[b-scpdetalty]::-webkit-scrollbar {
    width: 8px;
}

.stat-card-body[b-scpdetalty]::-webkit-scrollbar-track {
    background: var(--bs-dark);
}

.stat-card-body[b-scpdetalty]::-webkit-scrollbar-thumb {
    background: var(--purple);
    border-radius: 4px;
}

.stat-card-body[b-scpdetalty]::-webkit-scrollbar-thumb:hover {
    background: var(--purple-hover);
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .member-map[b-scpdetalty] {
        height: 450px;
        min-height: 450px;
    }

    .stat-value[b-scpdetalty] {
        font-size: 2rem;
    }

    .stat-card i[b-scpdetalty] {
        font-size: 1.5rem;
    }

    .stat-card-header[b-scpdetalty] {
        padding: 1rem;
    }

    .stat-card-header .chevron[b-scpdetalty] {
        right: 1rem;
    }

    .member-list-item[b-scpdetalty],
    .city-list-item[b-scpdetalty] {
        padding: 0.5rem 1rem;
    }

    .stat-card-body[b-scpdetalty] {
        max-height: 300px;
    }
}
/* /Pages/Members/Members.razor.rz.scp.css */
/* Members.razor specific styles - Anniversaries Modal Mobile Support */

/* Desktop: Keep table as-is (default behavior) */

.active-only-toggle[b-s4t90a1fix] {
    height: 100%;
    padding-left: 2.5rem;
}

/* Mobile: Full-width search and filters on small screens */
@media (max-width: 991.98px) {
    /* Make search bar full-width on mobile/tablet */
    .search-controls-container > div:first-child[b-s4t90a1fix] {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }
    
    /* Make filter container full-width on mobile/tablet */
    .search-controls-container > div:last-child[b-s4t90a1fix] {
        width: 100% !important;
    }
}

@media (max-width: 575.98px) {
    /* Make individual filter dropdowns full-width on mobile */
    .search-controls-container .flex-sm-row > div[b-s4t90a1fix] {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    /* Align toggle to the left on mobile like other dropdowns */
    .search-controls-container .active-only-toggle[b-s4t90a1fix] {
        padding-left: 0 !important;
        justify-content: flex-start !important;
        width: 100%;
    }
    
    /* Remove toggle container width constraints on mobile */
    .search-controls-container .flex-sm-row > div:last-child[b-s4t90a1fix] {
        min-width: 0 !important;
        max-width: 100% !important;
    }
}

/* Mobile: Responsive anniversaries table */
@media (max-width: 768px) {
    /* Transform table rows into cards on mobile */
    .table-responsive table.table thead[b-s4t90a1fix] {
        display: none;
    }
    
    .table-responsive table.table[b-s4t90a1fix],
    .table-responsive table.table tbody[b-s4t90a1fix],
    .table-responsive table.table tr[b-s4t90a1fix] {
        display: block;
        width: 100%;
    }
    
    .table-responsive table.table tr[b-s4t90a1fix] {
        margin-bottom: 1rem;
        border: 1px solid #343536;
        border-radius: 8px;
        background-color: var(--rtub-surface-alt);
        padding: 0.75rem;
    }
    
    .table-responsive table.table td[b-s4t90a1fix] {
        display: block;
        text-align: left !important;
        padding: 0.5rem 0;
        border: none;
        position: relative;
        padding-left: 45%;
    }
    
    /* Add labels for each field on mobile */
    .table-responsive table.table td[b-s4t90a1fix]::before {
        content: attr(data-label);
        position: absolute;
        left: 0;
        width: 40%;
        padding-right: 10px;
        font-weight: 600;
        color: var(--bs-primary);
        text-align: left;
    }
    
    /* First cell (Member) - special layout */
    .table-responsive table.table tr td:first-child[b-s4t90a1fix] {
        padding-left: 0;
        padding-bottom: 0.75rem;
        border-bottom: 1px solid #343536;
        margin-bottom: 0.5rem;
    }
    
    .table-responsive table.table tr td:first-child[b-s4t90a1fix]::before {
        display: none;
    }
    
    /* Member info stays horizontal with avatar */
    .table-responsive table.table tr td:first-child .d-flex[b-s4t90a1fix] {
        display: flex !important;
        align-items: center;
        gap: 0.75rem;
    }
    
    /* Avatar sizing */
    .member-avatar-small[b-s4t90a1fix] {
        width: 48px;
        height: 48px;
        min-width: 48px;
    }
    
    /* Actions cell */
    .table-responsive table.table tr td.actions-cell[b-s4t90a1fix] {
        padding-left: 0;
        padding-top: 0.75rem;
        border-top: 1px solid #343536;
        margin-top: 0.5rem;
        text-align: center !important;
    }

    .table-responsive table.table tr td.actions-cell[b-s4t90a1fix]::before {
        display: none;
    }

    .table-responsive table.table tr td.actions-cell .btn[b-s4t90a1fix] {
        width: 100%;
        max-width: 200px;
    }
    
    /* Badges alignment on mobile */
    .table-responsive table.table td .badge[b-s4t90a1fix] {
        display: inline-block;
        margin-right: 0.25rem;
        margin-bottom: 0.25rem;
    }
}

/* Extra small devices - further optimizations */
@media (max-width: 480px) {
    .table-responsive table.table td[b-s4t90a1fix] {
        padding-left: 0;
        padding-top: 0.35rem;
        padding-bottom: 0.35rem;
    }
    
    .table-responsive table.table td[b-s4t90a1fix]::before {
        position: static;
        display: block;
        width: 100%;
        padding-bottom: 0.25rem;
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }
    
    /* Tighter spacing on very small screens */
    .table-responsive table.table tr[b-s4t90a1fix] {
        padding: 0.625rem;
        margin-bottom: 0.75rem;
    }
    
    .member-avatar-small[b-s4t90a1fix] {
        width: 40px;
        height: 40px;
        min-width: 40px;
    }
}

/* Search bar container */
.search-bar-container[b-s4t90a1fix] {
    min-width: 360px;
    max-width: 640px;
}

/* Filter dropdown containers */
.filter-dropdown-container[b-s4t90a1fix] {
    min-width: 200px;
    max-width: 240px;
}

/* Form check cursor */
.form-check-input-clickable[b-s4t90a1fix],
.form-check-label-clickable[b-s4t90a1fix] {
    cursor: pointer;
}

/* Avatar large */
.member-avatar-large[b-s4t90a1fix] {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    border: 3px solid var(--bs-primary);
}

/* Progress bar compact */
.progress-compact[b-s4t90a1fix] {
    height: 8px;
}

/* Section divider */
.section-divider[b-s4t90a1fix] {
    border-top: 1px solid #343536;
    padding-top: 1rem;
}

/* Section header clickable */
.section-header-clickable[b-s4t90a1fix] {
    cursor: pointer;
}

/* Scrollable container */
.scrollable-container[b-s4t90a1fix] {
    max-height: 400px;
    overflow-y: auto;
}

/* Activity list item */
.activity-list-item[b-s4t90a1fix] {
    background-color: var(--rtub-surface-alt);
    border-color: #343536;
    margin-bottom: 0.5rem;
    border-radius: 4px;
}

/* Subscriber list scrollable */
.subscriber-list-scrollable[b-s4t90a1fix] {
    max-height: 300px;
    overflow-y: auto;
}

/* Loading overlay */
.loading-overlay-container[b-s4t90a1fix] {
    min-height: 200px;
}

.loading-overlay-backdrop[b-s4t90a1fix] {
    background-color: rgba(0,0,0,0.7);
    z-index: 1000;
    border-radius: 8px;
}

/* Spinner size */
.spinner-large[b-s4t90a1fix] {
    width: 3rem;
    height: 3rem;
}
/* /Pages/Members/Profile.razor.rz.scp.css */
.notification-toggle-list[b-rioutprxdl] {
    display: flex;
    flex-direction: column;
}

.notification-toggle-row[b-rioutprxdl] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    padding-left: 0.5rem;
}

.notification-toggle-row:last-child[b-rioutprxdl] {
    margin-bottom: 0;
}

.notification-toggle-row .form-check[b-rioutprxdl] {
    margin-bottom: 0;
}

/* Flex container constraints */
.flex-min-width-zero[b-rioutprxdl] {
    min-width: 0;
}

/* Progress bar styles */
.progress-compact[b-rioutprxdl] {
    height: 8px;
}

.progress-bar-width[b-rioutprxdl] {
    /* Width is set dynamically via inline style binding, but we ensure it works */
}
/* /Pages/Messages/Inbox.razor.rz.scp.css */
/* ============================================================================
   RTUB MESSAGING COMPONENT STYLES (Inbox.razor.css)
   ============================================================================
   
   BEM-like Naming Convention:
   - Root component: .rtub-messages
   - Sub-elements: .rtub-messages__[element] (e.g., .rtub-messages__panel)
   - Modifiers: .rtub-messages__[element]--[modifier] (e.g., .rtub-messages__panel--mobile)
   - State classes: .is-[state] (e.g., .is-active, .is-sending)
   
   CSS Custom Properties are defined at the root component level for easy adjustment.
   
   Media Query Breakpoints:
   - Desktop: >= 992px
   - Tablet: 768px - 991px  
   - Mobile: <= 767px
   
   ============================================================================ */

/* ============================================================================
   SECTION 1: CSS CUSTOM PROPERTIES (Design Tokens)
   ============================================================================ */

.rtub-messages[b-nxphmaxxog] {
    /* Layout dimensions */
    --rtub-msg-content-offset: 80px; /* Avatar (40px) + horizontal padding/margins (~40px) */
    --rtub-msg-navbar-height: 56px;
    --rtub-msg-avatar-size: 32px;
    --rtub-msg-avatar-margin: 0.5rem;
    --rtub-msg-primary-hover: #8b5cf6; /* Lighter purple for hover states */
    /* Mobile chat layout dimensions */
    --rtub-msg-mobile-header-height: 60px;
    --rtub-msg-mobile-footer-height: 60px;
    --rtub-msg-mobile-bottomnav-height: 56px;
    
    /* Desktop: account for navbar and footer */
    min-height: 600px;
    height: calc(100vh - 160px);
    background: var(--bs-dark);
    max-height: calc(100vh - 160px);
    overflow: hidden;
}

.rtub-messages .container-fluid[b-nxphmaxxog] {
    padding: 0;
    height: 100%;
}

.rtub-messages .row[b-nxphmaxxog] {
    margin: 0;
    height: 100%;
    flex-wrap: nowrap;
    align-items: stretch;
}

/* ============================================================================
   SECTION 2: CONVERSATIONS PANEL (Left Sidebar)
   ============================================================================ */

/* --- 2.1: Panel Container --- */
.rtub-messages__panel[b-nxphmaxxog] {
    background: var(--rtub-surface-alt);
    border-right: 1px solid var(--bs-border-color);
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 0;
    flex: 0 0 320px;
    max-width: 360px;
    min-width: 0;
    min-height: 0; /* Allow proper flex scrolling */
}

/* On desktop (lg and above), ensure conversations panel stays visible with flex display even when d-lg-block is applied */
@media (min-width: 992px) {
    .rtub-messages__panel.d-lg-block[b-nxphmaxxog] {
        display: flex !important;
        flex-direction: column;
    }
}

/* --- 2.2: Panel Header (Desktop) --- */
.rtub-messages__panel-header[b-nxphmaxxog] {
    padding: 1.5rem 1rem;
    border-bottom: 1px solid var(--bs-border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #0f0f10;
}

/* --- 2.3: Panel Header (Mobile) --- */
.rtub-messages__panel-header--mobile[b-nxphmaxxog] {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--bs-border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    background: #0f0f10;
}

.rtub-messages__panel-header--mobile .btn-link[b-nxphmaxxog] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    background-color: var(--bs-primary);
    border-radius: 0.375rem;
    text-decoration: none;
}

.rtub-messages__panel-header--mobile .btn-link i[b-nxphmaxxog] {
    color: white !important;
    font-size: 1.1rem;
}

/* Remove hover effect from back button */
.rtub-messages__panel-header--mobile .btn-link:hover[b-nxphmaxxog],
.rtub-messages__panel-header--mobile .btn-link:focus[b-nxphmaxxog],
.rtub-messages__panel-header--mobile .btn-link:active[b-nxphmaxxog] {
    background-color: var(--bs-primary);
    color: white;
}

.rtub-messages__panel-header--mobile h3[b-nxphmaxxog] {
    color: var(--bs-body-color);
    font-size: 1.1rem;
    flex: 1;
    margin: 0;
}

.rtub-messages__panel-header--mobile .dropdown[b-nxphmaxxog] {
    flex-shrink: 0;
}

.rtub-messages__panel-header h3[b-nxphmaxxog] {
    color: var(--bs-body-color);
    font-size: 1.25rem;
}

/* --- 2.4: Conversations List --- */
.rtub-messages__list[b-nxphmaxxog] {
    flex: 1;
    overflow-y: auto;
}

/* --- 2.5: Conversation Item --- */
.rtub-messages__item[b-nxphmaxxog] {
    display: flex;
    align-items: center;
    padding: 1rem;
    border-bottom: 1px solid var(--bs-border-color);
    cursor: pointer;
    transition: background-color 0.2s;
    position: relative;
}

.rtub-messages__item:hover[b-nxphmaxxog] {
    background-color: rgba(111, 66, 193, 0.1);
}

.rtub-messages__item.is-active[b-nxphmaxxog] {
    background-color: rgba(111, 66, 193, 0.2);
    border-left: 3px solid var(--bs-primary);
}

/* --- 2.6: Conversation Avatar --- */
.rtub-messages__avatar[b-nxphmaxxog] {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    margin-right: 1rem;
}

.rtub-messages__avatar img[b-nxphmaxxog] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.rtub-messages__item-content[b-nxphmaxxog] {
    flex: 1;
    min-width: 0;
    padding-right: 2.5rem;
}

.rtub-messages__item-header[b-nxphmaxxog] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 0.25rem;
}

.rtub-messages__item-name[b-nxphmaxxog] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--bs-body-color);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
}

.rtub-messages__item-status-icon[b-nxphmaxxog] {
    font-size: 0.75rem;
    flex-shrink: 0;
}

.rtub-messages__item-time[b-nxphmaxxog] {
    font-size: 0.75rem;
    color: #888;
    white-space: nowrap;
    margin-left: 0.5rem;
}

.rtub-messages__item-preview[b-nxphmaxxog] {
    font-size: 0.875rem;
    color: #888;
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.25;
    word-break: break-word;
}

.rtub-messages__item-preview .fw-bold[b-nxphmaxxog] {
    color: var(--bs-body-color);
}

.rtub-messages__item-badge[b-nxphmaxxog] {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    min-width: 1.5rem;
    height: 1.5rem;
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
}

/* Message Thread Panel */
.rtub-messages__thread-panel[b-nxphmaxxog] {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 0;
    background: var(--bs-dark);
    flex: 1 1 0; /* Allow both growing and shrinking */
    min-width: 0;
    min-height: 0; /* Allow flex child to shrink and enable scrolling */
    overflow: hidden; /* Prevent outer container from scrolling */
}

.rtub-messages__thread[b-nxphmaxxog] {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-width: 0;
    min-height: 0; /* Allow flex child to shrink and enable scrolling */
    flex: 1 1 0; /* Take available space and allow shrinking */
    overflow: hidden; /* Contain the scroll within thread-body */
}

.rtub-messages__thread-header[b-nxphmaxxog] {
    padding: 1rem;
    border-bottom: 1px solid var(--bs-border-color);
    background: var(--rtub-surface-alt);
    display: flex;
    align-items: center;
    flex-shrink: 0; /* Prevent header from shrinking */
}

.rtub-messages__thread-header .rtub-messages__avatar[b-nxphmaxxog] {
    width: 40px;
    height: 40px;
}

.rtub-messages__thread-header h5[b-nxphmaxxog] {
    color: var(--bs-body-color);
}

/* Back button styling - purple square with white icon */
.rtub-messages__thread-header .btn-link[b-nxphmaxxog] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    background-color: var(--bs-primary);
    border-radius: 0.375rem;
    text-decoration: none;
}

.rtub-messages__thread-header .btn-link i[b-nxphmaxxog] {
    color: white !important;
    font-size: 1.1rem;
}

/* Remove hover effect from back button */
.rtub-messages__thread-header .btn-link:hover[b-nxphmaxxog],
.rtub-messages__thread-header .btn-link:focus[b-nxphmaxxog],
.rtub-messages__thread-header .btn-link:active[b-nxphmaxxog] {
    background-color: var(--bs-primary);
    color: white;
}

/* Header action buttons (mute, pin, dropdown) */
.rtub-messages__header-actions[b-nxphmaxxog] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
}

.rtub-messages__header-btn[b-nxphmaxxog] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    background-color: var(--bs-primary);
    border-radius: 0.375rem; /* Square with slight rounding */
    transition: background-color 0.2s;
}

.rtub-messages__header-btn:hover[b-nxphmaxxog] {
    background-color: var(--rtub-msg-primary-hover);
}

.rtub-messages__header-btn:active[b-nxphmaxxog] {
    background-color: var(--bs-primary);
}

/* Highlight active state for pin and mute when ON */
.rtub-messages__header-btn.is-active[b-nxphmaxxog] {
    background-color: var(--rtub-msg-primary-hover);
}

/* Ensure all icons are white and same size */
.rtub-messages__header-actions .rtub-messages__header-btn i[b-nxphmaxxog],
.rtub-messages__header-actions .rtub-messages__header-btn .bi[b-nxphmaxxog],
.rtub-messages__header-actions .btn-link i[b-nxphmaxxog],
.rtub-messages__header-actions .btn-link .bi[b-nxphmaxxog] {
    color: white !important;
    font-size: 1.1rem;
}

/* Dropdown button styling */
.rtub-messages__header-actions .dropdown .btn-link[b-nxphmaxxog] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    background-color: var(--bs-primary);
    border-radius: 0.375rem; /* Square with slight rounding */
    transition: background-color 0.2s;
}

.rtub-messages__header-actions .dropdown .btn-link:hover[b-nxphmaxxog] {
    background-color: var(--rtub-msg-primary-hover);
}

.rtub-messages__header-actions .dropdown .btn-link:active[b-nxphmaxxog] {
    background-color: var(--bs-primary);
}

.rtub-messages__thread-body[b-nxphmaxxog] {
    flex: 1 1 0; /* Allow both growing and shrinking from zero base */
    overflow-y: auto;
    overflow-x: hidden;
    padding: 1rem 1.25rem 1rem 1rem;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0; /* Critical: Allow scrolling when content exceeds container height */
    max-height: 100%; /* Constrain height to parent */
    align-items: stretch;
    scrollbar-gutter: stable both-edges;
    /* Ensure scroll works on all platforms */
    -webkit-overflow-scrolling: touch;
    /* Override inherited scroll-behavior: smooth from body/bootstrap.
       Smooth scroll causes programmatic scrollTop assignments to animate,
       which can be interrupted by re-renders, keyboard animations, or resizes,
       resulting in incomplete scrolls. Programmatic scrolls must be instant. */
    scroll-behavior: auto;
}

/* Inner wrapper for bottom-aligning messages (WhatsApp/Telegram style) */
.rtub-messages__thread-wrapper[b-nxphmaxxog] {
    /* Use flex-grow to fill available space, don't shrink (0), use auto basis */
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    width: 100%;
    /* Ensure proper sizing for scroll calculation - use 0 for better cross-browser compatibility */
    min-height: 0;
}

.rtub-messages__bubble[b-nxphmaxxog] {
    display: flex;
    margin-bottom: 1rem;
    width: 100%;
    min-width: 0;
}

.rtub-messages__bubble--sent[b-nxphmaxxog] {
    justify-content: flex-end;
    flex-direction: row-reverse;
}

.rtub-messages__bubble--received[b-nxphmaxxog] {
    justify-content: flex-start;
}

.rtub-messages__bubble-avatar[b-nxphmaxxog] {
    width: var(--rtub-msg-avatar-size);
    height: var(--rtub-msg-avatar-size);
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    margin: 0 var(--rtub-msg-avatar-margin);
}

.rtub-messages__bubble-avatar img[b-nxphmaxxog] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.rtub-messages__bubble-content[b-nxphmaxxog] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    max-width: 80%;
    width: auto;
}

.rtub-messages__bubble--system[b-nxphmaxxog] {
    align-items: flex-start;
}

.rtub-messages__bubble--sent .rtub-messages__bubble-content[b-nxphmaxxog] {
    align-items: flex-end;
    margin-left: auto;
}

.rtub-messages__bubble--received .rtub-messages__bubble-content[b-nxphmaxxog] {
    align-items: flex-start;
    margin-right: auto;
}

.rtub-messages__bubble-body[b-nxphmaxxog] {
    background: rgba(111, 66, 193, 0.2);
    padding: 0.75rem 1rem;
    border-radius: 1rem;
    word-wrap: break-word;
    color: var(--bs-body-color);
    display: inline-block;
    max-width: 100%;
    white-space: pre-wrap;
    box-sizing: border-box;
    overflow-wrap: anywhere;
}

.rtub-messages__bubble-text[b-nxphmaxxog] {
    margin: 0;
}

.rtub-messages__bubble--sent .rtub-messages__bubble-body[b-nxphmaxxog] {
    background: var(--bs-primary);
    color: white;
    border-bottom-right-radius: 0.25rem;
}

.rtub-messages__bubble--received .rtub-messages__bubble-body[b-nxphmaxxog] {
    background: #2a2a2b;
    border-bottom-left-radius: 0.25rem;
}

.rtub-messages__bubble-body--system[b-nxphmaxxog] {
    background: linear-gradient(135deg, #252431, #1f1f2a);
    border: 1px solid rgba(var(--bs-primary-rgb), 0.35);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
    width: 100%;
}

.rtub-messages__bubble--system .rtub-messages__bubble-content[b-nxphmaxxog] {
    align-items: flex-start;
}

.rtub-messages__bubble-actions[b-nxphmaxxog] {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.5rem;
}

.rtub-messages__bubble-link[b-nxphmaxxog] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    border: 1px solid rgba(var(--bs-primary-rgb), 0.45);
    background: rgba(var(--bs-primary-rgb), 0.12);
    color: #e6e3ff;
    text-decoration: none;
    font-weight: 600;
    transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.rtub-messages__bubble-link:hover[b-nxphmaxxog],
.rtub-messages__bubble-link:focus[b-nxphmaxxog] {
    background: rgba(var(--bs-primary-rgb), 0.2);
    border-color: var(--bs-primary);
    color: #ffffff;
    transform: translateY(-1px);
    text-decoration: none;
}

.rtub-messages__bubble-time[b-nxphmaxxog] {
    font-size: 0.75rem;
    color: #888;
    margin-top: 0.25rem;
}

/* Message Grouping Styles */
.rtub-messages__bubble-avatar-placeholder[b-nxphmaxxog] {
    width: var(--rtub-msg-avatar-size);
    height: var(--rtub-msg-avatar-size);
    flex-shrink: 0;
    margin: 0 var(--rtub-msg-avatar-margin);
    /* Invisible placeholder to maintain alignment */
}

/* Reduce spacing between grouped messages */
.rtub-messages__bubble--group-first[b-nxphmaxxog] {
    margin-bottom: 0.15rem;
}

.rtub-messages__bubble--group-middle[b-nxphmaxxog] {
    margin-bottom: 0.15rem;
}

.rtub-messages__bubble--group-last[b-nxphmaxxog] {
    margin-bottom: 1rem;
}

.rtub-messages__bubble--group-single[b-nxphmaxxog] {
    margin-bottom: 1rem;
}

/* Adjust bubble border radius for grouped messages */
.rtub-messages__bubble--sent.rtub-messages__bubble--group-first .rtub-messages__bubble-body[b-nxphmaxxog] {
    border-bottom-right-radius: 0.35rem;
}

.rtub-messages__bubble--sent.rtub-messages__bubble--group-middle .rtub-messages__bubble-body[b-nxphmaxxog] {
    border-top-right-radius: 0.35rem;
    border-bottom-right-radius: 0.35rem;
}

.rtub-messages__bubble--sent.rtub-messages__bubble--group-last .rtub-messages__bubble-body[b-nxphmaxxog] {
    border-top-right-radius: 0.35rem;
}

.rtub-messages__bubble--received.rtub-messages__bubble--group-first .rtub-messages__bubble-body[b-nxphmaxxog] {
    border-bottom-left-radius: 0.35rem;
}

.rtub-messages__bubble--received.rtub-messages__bubble--group-middle .rtub-messages__bubble-body[b-nxphmaxxog] {
    border-top-left-radius: 0.35rem;
    border-bottom-left-radius: 0.35rem;
}

.rtub-messages__bubble--received.rtub-messages__bubble--group-last .rtub-messages__bubble-body[b-nxphmaxxog] {
    border-top-left-radius: 0.35rem;
}

.rtub-messages__thread-footer[b-nxphmaxxog] {
    padding: 1rem;
    border-top: 1px solid var(--bs-border-color);
    background: var(--rtub-surface-alt);
    flex-shrink: 0; /* Prevent footer from shrinking */
}

.rtub-messages__composer[b-nxphmaxxog] {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
    width: 100%;
    background-color: #1a1c24;
    color: #ffffff;
    border: 1px solid rgba(var(--bs-primary-rgb), 0.65);
    border-radius: 999px;
    padding: 0.5rem 0.5rem 0.5rem 0.75rem;
    box-shadow: 0 0 0 0 rgba(var(--bs-primary-rgb), 0.2);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.rtub-messages__composer:focus-within[b-nxphmaxxog] {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 0.15rem rgba(var(--bs-primary-rgb), 0.25);
    background-color: #202331;
}

.rtub-messages__composer-input[b-nxphmaxxog] {
    flex: 1;
    background: transparent;
    border: none;
    color: #ffffff;
    outline: none;
    padding: 0.5rem 0.75rem;
    /* Textarea-specific styles for multi-line support */
    resize: none;
    min-height: 24px;
    max-height: 120px; /* Desktop max height - reduced on mobile */
    overflow-y: auto;
    line-height: 1.5;
    font-family: inherit;
    font-size: inherit;
}

.rtub-messages__composer-input:focus[b-nxphmaxxog] {
    box-shadow: none;
}

.rtub-messages__composer-input[b-nxphmaxxog]::placeholder {
    color: #bdbdd1;
}

.rtub-messages__composer-send[b-nxphmaxxog] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 46px;
    height: 38px;
    background: var(--bs-primary);
    border: 1px solid rgba(var(--bs-primary-rgb), 0.65);
    color: #ffffff;
    border-radius: 999px;
    padding: 0.35rem 0.85rem;
    line-height: 1;
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.rtub-messages__composer-send:hover[b-nxphmaxxog],
.rtub-messages__composer-send:focus[b-nxphmaxxog] {
    background: #7b5bc7;
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 0.15rem rgba(var(--bs-primary-rgb), 0.25);
}

.rtub-messages__composer-send:disabled[b-nxphmaxxog] {
    background: #6f42c140;
    border-color: #6f42c1;
    color: #e6dbff;
    box-shadow: none;
}

.rtub-messages__composer-send .spinner-border[b-nxphmaxxog] {
    width: 1rem;
    height: 1rem;
}

/* Empty State */
.rtub-messages__empty[b-nxphmaxxog] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Member search in modal */
.rtub-messages__member-list[b-nxphmaxxog] {
    max-height: 300px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    overscroll-behavior: contain;
}

.rtub-messages__member-item[b-nxphmaxxog] {
    background: var(--bs-dark);
    border-color: var(--bs-border-color) !important;
    cursor: pointer;
    transition: background-color 0.2s;
}

.rtub-messages__member-item:hover[b-nxphmaxxog] {
    background: rgba(111, 66, 193, 0.1) !important;
}

.rtub-messages__member-avatar[b-nxphmaxxog] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

.rtub-messages__clickable[b-nxphmaxxog] {
    cursor: pointer;
}

.rtub-messages__modal[b-nxphmaxxog] {
    max-width: 640px;
}

.rtub-messages__modal.rtub-messages__modal--group[b-nxphmaxxog] {
    max-width: 900px;
}

.rtub-messages__modal .modal-content[b-nxphmaxxog] {
    border-radius: 1rem;
}

.rtub-messages__modal .modal-body[b-nxphmaxxog] {
    padding: 1.25rem;
}

/* Mobile responsive */
@media (max-width: 991px) {
    .rtub-messages__panel.d-none[b-nxphmaxxog] {
        display: none !important;
    }

    .rtub-messages__panel[b-nxphmaxxog] {
        flex: 1 1 100%;
        max-width: 100%;
    }

    .rtub-messages__thread-panel.d-none[b-nxphmaxxog] {
        display: none !important;
    }

    .rtub-messages__thread-panel[b-nxphmaxxog] {
        flex: 1 1 100%;
        max-width: 100%;
    }

    .rtub-messages__bubble[b-nxphmaxxog] {
        max-width: 85%;
    }

    /* Message wrapping for mobile */
    .rtub-messages__bubble-body[b-nxphmaxxog] {
        max-width: 100%;
        word-wrap: break-word;
        word-break: break-word;
        overflow-wrap: anywhere;
        white-space: pre-wrap;
    }

    .rtub-messages__bubble-content[b-nxphmaxxog] {
        max-width: calc(100vw - var(--rtub-msg-content-offset));
    }
}

@media (max-width: 767px) {
    /* =============================================
       AREA A: FULL-SCREEN INBOX ON MOBILE
       ============================================= */
    
    /* Mobile (browser and PWA): position fixed creates proper containing block 
       for flex children and allows sticky footer to work correctly.
       
       IMPORTANT: Multiple height values are provided for compatibility:
       - 100vh: Standard fallback for older browsers
       - 100dvh: Dynamic viewport height for modern mobile browsers (adjusts for browser UI)
       - -webkit-fill-available: iOS Safari/PWA specific - fills available space correctly
       
       For PWA standalone mode on iOS, -webkit-fill-available is crucial as
       100vh/100dvh don't account for the safe area properly in standalone mode.
    */
    .rtub-messages[b-nxphmaxxog] {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        /* Height fallback chain for maximum compatibility:
           1. 100vh - Standard fallback for older browsers
           2. -webkit-fill-available - iOS Safari/PWA specific (WebKit)
           3. 100dvh - Modern standard that takes precedence when supported
        */
        height: 100vh; /* Fallback for older browsers */
        height: -webkit-fill-available; /* iOS Safari/PWA - fills available space */
        height: 100dvh; /* Dynamic viewport height for modern browsers */
        min-height: 0; /* Override desktop min-height: 600px */
        max-height: none; /* Override desktop max-height: calc(100vh - 160px) */
        /* Safe area handling for iPhone notch/home indicator in PWA mode */
        padding-top: env(safe-area-inset-top, 0px);
        display: flex;
        flex-direction: column;
        overflow: hidden;
        z-index: 1050; /* Bootstrap modal z-index level, above navbar (1030) */
        padding-bottom: 0;
        margin-bottom: 0;
    }

    /* MobileBottomNav inside the fixed .rtub-messages container —
       override to flow as flex child instead of fixed positioning */
    .rtub-messages[b-nxphmaxxog]  .mobile-bottom-nav {
        position: static;
        flex-shrink: 0;
        z-index: auto;
        box-shadow: none;
        border-top: 1px solid rgba(111, 66, 193, 0.25);
    }
}

@media (max-width: 767px) {

    .rtub-messages .container-fluid[b-nxphmaxxog] {
        flex: 1;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        min-height: 0;
        padding: 0;
        margin: 0;
    }

    .rtub-messages .row[b-nxphmaxxog] {
        flex: 1;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        min-height: 0;
        margin: 0;
    }

    /* Conversations panel - full height with internal scroll */
    .rtub-messages__panel[b-nxphmaxxog] {
        flex: 1;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        min-height: 0;
        border-radius: 0;
    }

    /* Mobile header adjustments */
    .rtub-messages__panel-header--mobile[b-nxphmaxxog] {
        flex-shrink: 0;
    }

    .rtub-messages__panel-header[b-nxphmaxxog] {
        flex-shrink: 0;
        padding: 0.75rem;
    }

    /* Conversations list - reaches bottom with minimal safe-area padding */
    .rtub-messages__list[b-nxphmaxxog] {
        flex: 1;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        /* Use minimal safe-area padding for iOS notch/home indicator */
        /* Only add padding-bottom if absolutely necessary for safe area */
        padding-bottom: env(safe-area-inset-bottom, 0px);
        /* Prevent elastic scroll bounce - only allow vertical panning */
        touch-action: pan-y;
        overscroll-behavior: contain;
    }

    /* Message thread panel - flex child that fills remaining space.
       All ancestors in the flex chain have min-height: 0 so this
       correctly shrinks when the MobileBottomNav is present. */
    .rtub-messages__thread-panel[b-nxphmaxxog] {
        flex: 1;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        min-height: 0;
        width: 100%;
        border-radius: 0;
        /* Safe area padding for notch devices */
        padding-top: env(safe-area-inset-top, 0px);
        /* Prevent any scrolling of this container */
        overscroll-behavior: none;
        /* GPU acceleration to prevent visual glitches during resize */
        transform: translateZ(0);
        will-change: height, top;
    }

    .rtub-messages__thread[b-nxphmaxxog] {
        flex: 1;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        min-height: 0;
    }

    /* Header - flex-shrink: 0 keeps it at fixed height within the flex container
       The parent container's height is adjusted by JS when keyboard opens */
    .rtub-messages__thread-header[b-nxphmaxxog] {
        flex-shrink: 0;
        height: var(--rtub-msg-mobile-header-height);
        background: #0f0f10;
        border-bottom: 1px solid var(--bs-border-color);
        padding: 0.75rem;
        z-index: 1001;
        display: flex;
        align-items: center;
        /* GPU acceleration to keep header stable */
        transform: translateZ(0);
    }

    /* Scrollable message body - flex child that fills remaining space */
    .rtub-messages__thread-body[b-nxphmaxxog] {
        flex: 1 1 0;
        min-height: 0;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        padding: 0.5rem 0.75rem;
        /* Prevent elastic scroll bounce */
        touch-action: pan-y;
        overscroll-behavior: contain;
    }

    /* Footer - flex child, does not shrink */
    .rtub-messages__thread-footer[b-nxphmaxxog] {
        flex-shrink: 0;
        background: #0f0f10;
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.3);
        padding: 0.5rem 0.75rem;
        padding-bottom: calc(0.5rem + env(safe-area-inset-bottom, 0px));
        display: flex;
        align-items: center;
    }

    /* Read-only footer mobile override */
    .rtub-messages__thread-footer--readonly[b-nxphmaxxog] {
        flex-shrink: 0;
        background: #0f0f10;
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.3);
        padding: 0.5rem 0.75rem;
        padding-bottom: calc(0.5rem + env(safe-area-inset-bottom, 0px));
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Thread wrapper on mobile - allows messages to align to bottom */
    .rtub-messages__thread-wrapper[b-nxphmaxxog] {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        min-height: 100%;
        width: 100%;
    }

    /* Message styling for mobile */
    .rtub-messages__bubble[b-nxphmaxxog] {
        margin-bottom: 0.5rem;
        max-width: 100%;
    }

    /* Override margin for grouped messages on mobile */
    .rtub-messages__bubble--group-first[b-nxphmaxxog],
    .rtub-messages__bubble--group-middle[b-nxphmaxxog] {
        margin-bottom: 0.1rem;
    }

    .rtub-messages__bubble--group-last[b-nxphmaxxog],
    .rtub-messages__bubble--group-single[b-nxphmaxxog] {
        margin-bottom: 0.5rem;
    }

    /* Avatar placeholder for mobile */
    .rtub-messages__bubble-avatar-placeholder[b-nxphmaxxog] {
        width: 32px;
        height: 32px;
        margin: 0 0.4rem;
    }

    .rtub-messages__bubble-content[b-nxphmaxxog] {
        max-width: calc(100vw - var(--rtub-msg-content-offset));
    }

    .rtub-messages__bubble-body[b-nxphmaxxog] {
        border-radius: 1.15rem;
        padding: 0.65rem 0.9rem;
        max-width: 100%;
        word-wrap: break-word;
        word-break: break-word;
        overflow-wrap: anywhere;
        white-space: pre-wrap;
    }

    .rtub-messages__bubble-avatar[b-nxphmaxxog] {
        margin: 0 0.4rem;
    }

    /* =============================================
       AREA C: MESSAGE COMPOSER - PREVENT iOS ZOOM
       ============================================= */
    
    /* Message composer styling for textarea - mobile-specific overrides */
    .rtub-messages__composer[b-nxphmaxxog] {
        padding: 0.45rem 0.6rem 0.45rem 0.75rem;
        border-radius: 1rem;
        align-items: flex-end;
    }

    .rtub-messages__composer-input[b-nxphmaxxog] {
        /* !important is intentional here: iOS Safari auto-zooms inputs with font-size < 16px
           This is a critical mobile UX requirement to prevent jarring zoom behavior
           when users tap the message input field. The 16px minimum is a documented
           iOS Safari requirement that cannot be achieved through cascade alone. */
        font-size: 16px !important;
        resize: none;
        max-height: 100px; /* Smaller max height for mobile screens */
        overflow-y: auto;
        line-height: 1.4; /* Tighter line height for mobile */
    }

    .rtub-messages__composer-send[b-nxphmaxxog] {
        min-width: 42px;
        height: 36px;
        flex-shrink: 0;
    }

    /* Other mobile adjustments */
    .rtub-messages__item[b-nxphmaxxog] {
        padding: 0.75rem;
    }

    .rtub-messages__item-content[b-nxphmaxxog] {
        padding-right: 2rem;
    }

    .rtub-messages__item-header[b-nxphmaxxog] {
        align-items: flex-start;
        gap: 0.35rem;
    }

    .rtub-messages__item-time[b-nxphmaxxog] {
        margin-left: 0;
    }

    .rtub-messages__avatar[b-nxphmaxxog],
    .rtub-messages__thread-header .rtub-messages__avatar[b-nxphmaxxog] {
        width: 44px;
        height: 44px;
        margin-right: 0.75rem;
    }

    /* Header actions on mobile - smaller square buttons */
    .rtub-messages__header-actions[b-nxphmaxxog] {
        gap: 0.35rem;
    }

    .rtub-messages__header-btn[b-nxphmaxxog],
    .rtub-messages__header-actions .dropdown .btn-link[b-nxphmaxxog] {
        width: 32px;
        height: 32px;
        border-radius: 0.25rem; /* Smaller rounding for mobile */
    }

    .rtub-messages__thread-header .btn-link[b-nxphmaxxog],
    .rtub-messages__panel-header--mobile .btn-link[b-nxphmaxxog] {
        width: 32px;
        height: 32px;
        border-radius: 0.25rem;
    }

    .rtub-messages__header-actions .rtub-messages__header-btn i[b-nxphmaxxog],
    .rtub-messages__header-actions .rtub-messages__header-btn .bi[b-nxphmaxxog],
    .rtub-messages__header-actions .btn-link i[b-nxphmaxxog],
    .rtub-messages__header-actions .btn-link .bi[b-nxphmaxxog],
    .rtub-messages__panel-header--mobile .btn-link i[b-nxphmaxxog] {
        font-size: 1rem;
    }

    /* Smaller status icons on mobile */
    .rtub-messages__item-status-icon[b-nxphmaxxog] {
        font-size: 0.65rem;
    }

    .rtub-messages__group-member[b-nxphmaxxog] {
        padding: 0.65rem;
    }

    .rtub-messages__modal[b-nxphmaxxog] {
        margin: 0.5rem;
    }

    .rtub-messages__modal.modal-lg[b-nxphmaxxog] {
        max-width: 100%;
    }

    .rtub-messages__modal .modal-content[b-nxphmaxxog] {
        min-height: 80vh;
        border-radius: 0.85rem;
        /* Prevent horizontal scroll on mobile */
        overflow-x: hidden;
    }

    .rtub-messages__modal .modal-header[b-nxphmaxxog],
    .rtub-messages__modal .modal-body[b-nxphmaxxog],
    .rtub-messages__modal .modal-footer[b-nxphmaxxog] {
        padding: 0.9rem 1rem;
    }

    .rtub-messages__modal .modal-body[b-nxphmaxxog] {
        /* Ensure modal body can scroll vertically but not horizontally */
        overflow-x: hidden;
        overflow-y: auto;
    }

    .rtub-messages__modal .rtub-messages__member-list[b-nxphmaxxog] {
        max-height: 240px;
    }

    /* =============================================
       AREA B: FULL-SCREEN MODALS ON MOBILE
       ============================================= */
    
    /* 
     * All messaging modals (New Message, New Group, Group Members) 
     * should be full-screen on mobile to maximize usable space
     * and prevent iOS keyboard issues
     */
    
    /* Modal backdrop - full screen overlay */
    .modal.show[b-nxphmaxxog] {
        z-index: 1060; /* Above messages page (1050) */
    }
    
    /* Modal dialog - full screen on mobile */
    .rtub-messages__modal.modal-dialog[b-nxphmaxxog] {
        position: fixed;
        inset: 0; /* top: 0, right: 0, bottom: 0, left: 0 */
        margin: 0;
        max-width: 100%;
        width: 100%;
        height: 100vh; /* Fallback */
        height: 100dvh; /* Dynamic viewport height */
        display: flex;
        flex-direction: column;
    }
    
    /* Modal content - full height flex layout */
    .rtub-messages__modal .modal-content[b-nxphmaxxog] {
        flex: 1;
        display: flex;
        flex-direction: column;
        height: 100%;
        max-height: 100%;
        border-radius: 0; /* No rounded corners on mobile full-screen */
        border: none;
        overflow: hidden;
    }
    
    /* Modal header - fixed at top */
    .rtub-messages__modal .modal-header[b-nxphmaxxog] {
        flex-shrink: 0;
        padding: 1rem;
        border-bottom: 1px solid var(--bs-border-color);
        background: #0f0f10;
    }
    
    /* Modal body - scrollable flex content with compact spacing */
    .rtub-messages__modal .modal-body[b-nxphmaxxog] {
        flex: 1;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        padding: 0.75rem 1rem;
        /* Prevent horizontal overflow */
        max-width: 100vw;
        /* Compact spacing between sections */
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
        /* Prevent elastic scroll bounce */
        touch-action: pan-y;
        overscroll-behavior: contain;
    }
    
    /* Reduce spacing for form groups in modals on mobile */
    .rtub-messages__modal .modal-body .mb-3[b-nxphmaxxog] {
        margin-bottom: 0 !important;
    }
    
    /* Reduce label spacing */
    .rtub-messages__modal .modal-body .form-label[b-nxphmaxxog] {
        margin-bottom: 0.375rem;
        font-size: 0.9rem;
        font-weight: 600;
    }
    
    /* Small helper text */
    .rtub-messages__modal .modal-body small[b-nxphmaxxog] {
        font-size: 0.75rem;
        display: block;
        margin-top: 0.25rem;
    }
    
    /* Modal footer - fixed at bottom with iOS safe area */
    .rtub-messages__modal .modal-footer[b-nxphmaxxog] {
        flex-shrink: 0;
        padding: 0.75rem 1rem;
        padding-bottom: max(0.75rem, env(safe-area-inset-bottom, 0px)); /* iOS notch support */
        border-top: 1px solid var(--bs-border-color);
        background: #0f0f10;
        display: flex;
        gap: 0.5rem;
        justify-content: stretch;
    }
    
    /* Make footer buttons equal width on mobile */
    .rtub-messages__modal .modal-footer .btn[b-nxphmaxxog] {
        flex: 1;
    }
    
    /* 
     * Prevent iOS zoom on input focus
     * All text inputs and textareas in modals MUST have 16px font-size minimum
     * !important is required: iOS Safari auto-zooms inputs with font-size < 16px
     * This is a documented iOS Safari behavior that affects mobile PWA usability
     */
    .rtub-messages__modal input[type="text"][b-nxphmaxxog],
    .rtub-messages__modal textarea[b-nxphmaxxog],
    .rtub-messages__modal .form-control[b-nxphmaxxog],
    .rtub-messages__modal .search-bar__input[b-nxphmaxxog] {
        font-size: 16px !important;
    }
    
    /* Group name input - minimum touch target for accessibility */
    .rtub-messages__modal input[type="text"].form-control[b-nxphmaxxog] {
        min-height: 44px;
        padding: 0.625rem 0.875rem;
    }
    
    /* Message textarea in New Message modal */
    .rtub-messages__modal textarea.form-control[b-nxphmaxxog] {
        font-size: 16px !important;
        min-height: 100px;
        resize: vertical;
    }
    
    /* SearchBar inside modals - prevent iOS zoom */
    .rtub-messages__modal .search-bar__input[b-nxphmaxxog] {
        font-size: 16px !important;
        min-height: 44px;
        padding: 0.625rem 0.875rem;
    }
    
    /* SearchBar in conversations list - prevent iOS zoom */
    .search-bar__input[b-nxphmaxxog] {
        font-size: 16px !important;
    }
    
    /* Member list scrollable area - compact height for better space usage */
    .rtub-messages__modal .rtub-messages__member-list[b-nxphmaxxog] {
        max-height: 35vh; /* Use viewport height for responsive sizing */
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        margin-bottom: 0.5rem;
        /* Prevent elastic scroll bounce */
        touch-action: pan-y;
        overscroll-behavior: contain;
    }
    
    /* Member search results section */
    .rtub-messages__modal .rtub-messages__member-list[b-nxphmaxxog] {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }
    
    /* Modal close button - larger touch target */
    .rtub-messages__modal .btn-close[b-nxphmaxxog] {
        min-width: 44px;
        min-height: 44px;
        padding: 0.5rem;
    }
    
    /* Modal buttons - proper touch targets */
    .rtub-messages__modal .modal-footer .btn[b-nxphmaxxog] {
        min-height: 44px;
        padding: 0.625rem 1.25rem;
        font-size: 1rem;
    }
    
    /* Group Members modal - specific adjustments */
    .rtub-messages__modal .rtub-messages__group-members-list[b-nxphmaxxog] {
        max-height: calc(100dvh - 300px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        /* Prevent elastic scroll bounce */
        touch-action: pan-y;
        overscroll-behavior: contain;
    }
    
    /* Member item cards - compact spacing */
    .rtub-messages__modal .rtub-messages__member-item[b-nxphmaxxog] {
        padding: 0.625rem;
        margin-bottom: 0;
    }
    
    /* Member avatar in search results */
    .rtub-messages__modal .rtub-messages__member-avatar[b-nxphmaxxog] {
        width: 36px;
        height: 36px;
    }
    
    /* Badge counter for selected count */
    .rtub-messages__modal .badge.bg-primary[b-nxphmaxxog] {
        font-size: 0.75rem;
        padding: 0.25rem 0.5rem;
    }
    
    /* Selected members section - card-style block with internal scroll */
    .rtub-messages__modal .rtub-messages__selected-members[b-nxphmaxxog] {
        padding: 0.75rem;
        max-height: 40vh; /* Use viewport height - takes up to 40% of screen */
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        background: rgba(111, 66, 193, 0.08);
        border-radius: 0.5rem;
        border: 1px solid rgba(111, 66, 193, 0.15);
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        /* Prevent elastic scroll bounce */
        touch-action: pan-y;
        overscroll-behavior: contain;
    }
    
    /* Label for selected members */
    .rtub-messages__modal .rtub-messages__selected-members .form-label[b-nxphmaxxog] {
        margin-bottom: 0.5rem;
        font-size: 0.875rem;
        font-weight: 600;
        flex-shrink: 0;
    }
    
    /* Container for badge chips - wraps and scrolls if needed */
    .rtub-messages__modal .rtub-messages__selected-members > div[b-nxphmaxxog] {
        display: flex;
        flex-wrap: wrap;
        gap: 0.4rem;
        flex: 1;
        align-content: flex-start;
    }
    
    .rtub-messages__modal .rtub-messages__selected-members .badge[b-nxphmaxxog] {
        font-size: 0.8rem;
        padding: 0.35rem 0.5rem;
        margin-bottom: 0;
        display: inline-flex;
        align-items: center;
        gap: 0.3rem;
        white-space: nowrap;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    .rtub-messages__modal .rtub-messages__selected-members .btn-close[b-nxphmaxxog] {
        font-size: 0.55rem;
        padding: 0;
        margin-left: 0.15rem;
        width: 16px;
        height: 16px;
        flex-shrink: 0;
    }
}

/* Scrollbar styling for dark theme */
.rtub-messages__list[b-nxphmaxxog]::-webkit-scrollbar,
.rtub-messages__thread-body[b-nxphmaxxog]::-webkit-scrollbar,
.rtub-messages__member-list[b-nxphmaxxog]::-webkit-scrollbar {
    width: 8px;
}

.rtub-messages__list[b-nxphmaxxog]::-webkit-scrollbar-track,
.rtub-messages__thread-body[b-nxphmaxxog]::-webkit-scrollbar-track,
.rtub-messages__member-list[b-nxphmaxxog]::-webkit-scrollbar-track {
    background: var(--bs-dark);
}

.rtub-messages__list[b-nxphmaxxog]::-webkit-scrollbar-thumb,
.rtub-messages__thread-body[b-nxphmaxxog]::-webkit-scrollbar-thumb,
.rtub-messages__member-list[b-nxphmaxxog]::-webkit-scrollbar-thumb {
    background: var(--bs-border-color);
    border-radius: 4px;
}

.rtub-messages__list[b-nxphmaxxog]::-webkit-scrollbar-thumb:hover,
.rtub-messages__thread-body[b-nxphmaxxog]::-webkit-scrollbar-thumb:hover,
.rtub-messages__member-list[b-nxphmaxxog]::-webkit-scrollbar-thumb:hover {
    background: var(--bs-primary);
}

/* Group avatar icon */
.rtub-messages__avatar--group[b-nxphmaxxog] {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--bs-primary) 0%, #8b5cf6 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: white;
    font-size: 1.25rem;
}

.rtub-messages__avatar .rtub-messages__avatar--group[b-nxphmaxxog] {
    font-size: 1.5rem;
}

.rtub-messages__thread-header .rtub-messages__avatar--group[b-nxphmaxxog] {
    font-size: 1.25rem;
}

/* Group message sender name */
.rtub-messages__bubble-sender[b-nxphmaxxog] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--bs-primary);
    margin-bottom: 0.25rem;
}

/* Group member selection */
.rtub-messages__member-item.is-selected[b-nxphmaxxog] {
    background: rgba(111, 66, 193, 0.2) !important;
    border-color: var(--bs-primary) !important;
}

.rtub-messages__selected-members[b-nxphmaxxog] {
    padding: 0.5rem 0;
    background: transparent;
}

.rtub-messages__selected-members .badge[b-nxphmaxxog] {
    padding: 0.35rem 0.5rem;
    font-size: 0.875rem;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.rtub-messages__selected-members .btn-close[b-nxphmaxxog] {
    padding: 0;
    margin-left: 0.25rem;
    font-size: 0.625rem;
}

/* Group members modal */
.rtub-messages__group-members-list[b-nxphmaxxog] {
    max-height: 400px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    overscroll-behavior: contain;
}

.rtub-messages__group-member[b-nxphmaxxog] {
    display: flex;
    align-items: center;
    padding: 0.75rem;
    border-radius: 0.5rem;
    margin-bottom: 0.5rem;
    background: var(--bs-dark);
    border: 1px solid var(--bs-border-color);
    transition: background-color 0.2s;
}

.rtub-messages__group-member:hover[b-nxphmaxxog] {
    background: rgba(111, 66, 193, 0.1);
}

.rtub-messages__group-member-avatar[b-nxphmaxxog] {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 1rem;
    flex-shrink: 0;
}

.rtub-messages__group-member-info[b-nxphmaxxog] {
    flex: 1;
    min-width: 0;
}

.rtub-messages__group-member-name[b-nxphmaxxog] {
    font-weight: 600;
    color: var(--bs-body-color);
    font-size: 1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rtub-messages__group-member-fullname[b-nxphmaxxog] {
    font-size: 0.875rem;
    color: #888;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Group preview clickable */
.rtub-messages__group-preview[b-nxphmaxxog] {
    cursor: pointer;
}

/* Modal backdrop */
.rtub-messages__modal-backdrop[b-nxphmaxxog] {
    background-color: rgba(0,0,0,0.5);
}

.rtub-messages__group-preview[b-nxphmaxxog] {
    font-size: 0.75rem;
}

.rtub-messages__group-preview:hover[b-nxphmaxxog] {
    color: var(--bs-primary) !important;
}

/* Read-only footer for announcement channels */
.rtub-messages__thread-footer--readonly[b-nxphmaxxog] {
    display: flex;
    justify-content: center;
    align-items: center;
}

.rtub-messages__readonly-notice[b-nxphmaxxog] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #888;
    font-size: 0.875rem;
}

.rtub-messages__readonly-notice i[b-nxphmaxxog] {
    font-size: 1rem;
}

/* Typing Indicator */
.rtub-messages__typing[b-nxphmaxxog] {
    padding: 0.5rem 1rem;
    margin: 0.5rem 0;
    display: flex;
    align-items: center;
}

.rtub-messages__typing-content[b-nxphmaxxog] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.rtub-messages__typing-dots[b-nxphmaxxog] {
    display: flex;
    gap: 0.25rem;
    padding: 0.5rem 0.75rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 1rem;
}

.rtub-messages__typing-dots span[b-nxphmaxxog] {
    width: 6px;
    height: 6px;
    background: var(--bs-primary);
    border-radius: 50%;
    animation: rtub-messages-typing-bounce-b-nxphmaxxog 1.4s infinite;
}

.rtub-messages__typing-dots span:nth-child(2)[b-nxphmaxxog] {
    animation-delay: 0.2s;
}

.rtub-messages__typing-dots span:nth-child(3)[b-nxphmaxxog] {
    animation-delay: 0.4s;
}

@keyframes rtub-messages-typing-bounce-b-nxphmaxxog {
    0%, 60%, 100% {
        transform: translateY(0);
        opacity: 0.7;
    }
    30% {
        transform: translateY(-6px);
        opacity: 1;
    }
}

.rtub-messages__typing-text[b-nxphmaxxog] {
    color: #888;
    font-size: 0.875rem;
    font-style: italic;
}

/* Modal backdrop */
.rtub-messages__modal-backdrop[b-nxphmaxxog] {
    background-color: rgba(0,0,0,0.5);
}
/* /Pages/MyTuno/Arena.razor.rz.scp.css */
/* Arena page — normal layout for selection, fullscreen only for battle */
.arena-page[b-ohsyti29cy] {
    padding: 1rem;
}

.arena-battle-fullscreen[b-ohsyti29cy] {
    position: fixed;
    inset: 0;
    background: #000;
    z-index: 100;
    overflow: hidden;
}

.arena-battle-screen[b-ohsyti29cy] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    background: #000;
    overflow: hidden;
}

.arena-battle-canvas[b-ohsyti29cy] {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    background: #1a1a1a;
}

.arena-battle-canvas canvas[b-ohsyti29cy] {
    display: block;
    width: 100% !important;
    height: 100% !important;
}

.arena-top-bar[b-ohsyti29cy] {
    display: none; /* replaced by Stage-style .battle-top-bar */
}

/* Stage-style top bar for arena battles */
.battle-top-bar[b-ohsyti29cy] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    padding-top: calc(6px + env(safe-area-inset-top, 0px));
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.5) 60%, transparent 100%);
    min-height: 44px;
    flex-wrap: nowrap;
}

.battle-back-btn[b-ohsyti29cy] {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    color: #fff;
    font-size: 1rem;
    cursor: pointer;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.12);
    transition: background 0.15s;
    flex-shrink: 0;
}

.battle-back-btn:hover[b-ohsyti29cy] {
    background: rgba(255, 255, 255, 0.1);
}

.battle-floor-indicator[b-ohsyti29cy] {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 36px;
    pointer-events: none;
    z-index: 1;
}

.floor-label[b-ohsyti29cy] {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
}

.battle-controls[b-ohsyti29cy] {
    display: flex;
    align-items: center;
    gap: 3px;
    flex-shrink: 0;
    margin-left: auto;
}

.battle-ctrl-btn[b-ohsyti29cy] {
    min-width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    font-size: 0.65rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.7);
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    cursor: pointer;
    transition: all 0.15s;
    padding: 0 4px;
}

.battle-ctrl-btn:hover[b-ohsyti29cy] {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.battle-ctrl-btn.active[b-ohsyti29cy] {
    background: rgba(124, 77, 255, 0.6);
    border-color: rgba(124, 77, 255, 0.8);
    color: #fff;
}

.battle-ctrl-btn--audio[b-ohsyti29cy] {
    color: rgba(255, 193, 7, 0.8);
}

.battle-ctrl-btn--stop[b-ohsyti29cy] {
    color: rgba(255, 68, 68, 0.8);
    border-color: rgba(255, 68, 68, 0.3);
}

.battle-ctrl-btn--stop:hover[b-ohsyti29cy] {
    background: rgba(255, 68, 68, 0.2);
    color: #ff4444;
}

/* ===== Battle Result - Game-style results panel ===== */

.result-overlay[b-ohsyti29cy] {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 1rem 0;
}

.result-panel[b-ohsyti29cy] {
  position: relative;
  width: 100%;
  max-width: 400px;
  background: linear-gradient(180deg, #1a1028 0%, #0d0a14 100%);
  border: 2px solid rgba(124, 77, 255, 0.4);
  border-radius: 24px;
  padding: 3.5rem 2rem 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  box-shadow:
    0 0 40px rgba(124, 77, 255, 0.15),
    0 20px 60px rgba(0, 0, 0, 0.6);
  animation: result-slide-in-b-ohsyti29cy 0.4s ease-out;
}

@keyframes result-slide-in-b-ohsyti29cy {
  from {
    opacity: 0;
    transform: scale(0.9) translateY(20px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.result-banner[b-ohsyti29cy] {
  position: absolute;
  top: -18px;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.5rem 2.5rem;
  border-radius: 999px;
  white-space: nowrap;
}

.result-banner-win[b-ohsyti29cy] {
  background: linear-gradient(135deg, #43a047, #2e7d32);
  box-shadow:
    0 4px 20px rgba(67, 160, 71, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.result-banner-loss[b-ohsyti29cy] {
  background: linear-gradient(135deg, #e53935, #c62828);
  box-shadow:
    0 4px 20px rgba(229, 57, 53, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.result-banner span[b-ohsyti29cy] {
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: 3px;
  color: #fff;
  text-transform: uppercase;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.result-subtitle[b-ohsyti29cy] {
  font-size: 1.6rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.95);
  letter-spacing: 0.5px;
}

.result-rewards[b-ohsyti29cy] {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  width: 100%;
  padding: 1rem 1.25rem;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.result-reward-row[b-ohsyti29cy] {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 1rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
}

.result-reward-row i[b-ohsyti29cy] {
  font-size: 1.1rem;
  width: 20px;
  text-align: center;
}

.result-buff-row[b-ohsyti29cy] {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
}

.result-buff-row i[b-ohsyti29cy] {
  font-size: 1rem;
}

.result-btn[b-ohsyti29cy] {
  width: 100%;
  padding: 0.85rem;
  border: none;
  border-radius: 14px;
  background: linear-gradient(135deg, #7c4dff, #651fff);
  color: #fff;
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 16px rgba(124, 77, 255, 0.35);
}

.result-btn:hover[b-ohsyti29cy] {
  background: linear-gradient(135deg, #9165ff, #7c4dff);
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(124, 77, 255, 0.5);
}

.result-btn:active[b-ohsyti29cy] {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(124, 77, 255, 0.3);
}

.result-btn-secondary[b-ohsyti29cy] {
  background: linear-gradient(135deg, #546e7a, #455a64);
  box-shadow: 0 4px 16px rgba(84, 110, 122, 0.35);
  font-size: 0.95rem;
  letter-spacing: 1.5px;
}

.result-btn-secondary:hover[b-ohsyti29cy] {
  background: linear-gradient(135deg, #607d8b, #546e7a);
  box-shadow: 0 6px 24px rgba(84, 110, 122, 0.5);
}

/* Mobile responsive styles */
@media (max-width: 768px) {
  .result-panel[b-ohsyti29cy] {
    max-width: 340px;
    padding: 3rem 1.5rem 1.5rem;
  }

  .result-subtitle[b-ohsyti29cy] {
    font-size: 1.3rem;
  }
}

@media (max-width: 480px) {
  .result-panel[b-ohsyti29cy] {
    max-width: 300px;
    padding: 2.5rem 1.25rem 1.25rem;
  }
}

/* Arena stat cards */
.stat-box-square[b-ohsyti29cy] {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: linear-gradient(135deg, rgba(26, 26, 35, 0.95), rgba(18, 18, 24, 0.95));
  border: 2px solid transparent;
  border-radius: 12px;
  padding: 1rem 1.25rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  min-width: 100px;
  transition: all 0.3s ease;
  overflow: hidden;
}

.stat-box-square[b-ohsyti29cy]::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 12px;
  padding: 2px;
  background: linear-gradient(135deg, rgba(138, 43, 226, 0.4), rgba(186, 85, 211, 0.2));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.stat-box-square:hover[b-ohsyti29cy] {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(138, 43, 226, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.stat-box-square .badge[b-ohsyti29cy] {
  font-size: 1.5rem;
  font-weight: 700;
  padding: 0.4rem 0.8rem;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  letter-spacing: 0.5px;
}

.stat-box-square p[b-ohsyti29cy] {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 0;
  color: rgba(255, 255, 255, 0.7);
}

/* ── Current Player Card ── */
.arena-own-card[b-ohsyti29cy] {
    position: relative;
    background: var(--bs-body-bg, #1a1a2e);
    border: 2px solid rgba(124, 77, 255, 0.45);
    border-radius: 12px;
    padding: 1rem;
    width: 100%;
    max-width: 340px;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    box-shadow: 0 0 20px rgba(124, 77, 255, 0.12);
}
.arena-own-record[b-ohsyti29cy] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
}

/* ── Arena Opponent Cards (FantasyTile style) ── */
.arena-opponent-card[b-ohsyti29cy] {
    position: relative;
    background: var(--bs-body-bg, #1a1a2e);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    padding: 1rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    transition: border-color 0.2s;
}
.arena-opponent-card:hover[b-ohsyti29cy] {
    border-color: rgba(111, 66, 193, 0.5);
}
.arena-opponent-card-header[b-ohsyti29cy] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.arena-opponent-avatar[b-ohsyti29cy] {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(111, 66, 193, 0.4);
}
.arena-opponent-avatar-placeholder[b-ohsyti29cy] {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(111, 66, 193, 0.2);
    color: rgba(111, 66, 193, 0.6);
    font-size: 1.5rem;
    border: 2px solid rgba(111, 66, 193, 0.4);
}
.arena-opponent-rank[b-ohsyti29cy] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.75rem;
    border-radius: 8px;
    border: 1px solid;
    background: rgba(255,255,255,0.03);
    font-size: 0.9rem;
}
.arena-opponent-stats[b-ohsyti29cy] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
}
.arena-opponent-section-label[b-ohsyti29cy] {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(255,255,255,0.45);
    margin-bottom: -0.25rem;
}
.arena-opponent-divider[b-ohsyti29cy] {
    border-color: rgba(255,255,255,0.08);
    margin: 0;
}
.arena-fight-btn[b-ohsyti29cy] {
    margin-top: auto;
    font-weight: 600;
}
/* /Pages/MyTuno/BossMode.razor.rz.scp.css */
/* ═══════════════════════════════════════════
   Boss Mode — Fullscreen Battle Layout
   ═══════════════════════════════════════════ */

.stage-page[b-3300ht8tev] {
    position: fixed;
    inset: 0;
    background: #000;
    z-index: 100;
    overflow-y: auto;
    overflow-x: hidden;
}

.battle-screen[b-3300ht8tev] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    background: #000;
    overflow: hidden;
}

.battle-canvas[b-3300ht8tev] {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    background: #1a1a1a;
}

[b-3300ht8tev] .battle-canvas canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
}

.battle-top-bar[b-3300ht8tev] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    padding-top: calc(6px + env(safe-area-inset-top, 0px));
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.5) 60%, transparent 100%);
    min-height: 44px;
    flex-wrap: nowrap;
}

.battle-controls[b-3300ht8tev] {
    display: flex;
    align-items: center;
    gap: 3px;
    flex-shrink: 0;
    margin-left: auto;
}

.battle-ctrl-btn[b-3300ht8tev] {
    min-width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    font-size: 0.65rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.7);
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    cursor: pointer;
    transition: all 0.15s;
    padding: 0 4px;
}

.battle-ctrl-btn:hover[b-3300ht8tev] {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.battle-ctrl-btn.active[b-3300ht8tev] {
    background: rgba(124, 77, 255, 0.6);
    border-color: rgba(124, 77, 255, 0.8);
    color: #fff;
}

.battle-ctrl-btn--audio[b-3300ht8tev] {
    color: rgba(255, 193, 7, 0.8);
}

.battle-ctrl-btn--stop[b-3300ht8tev] {
    color: rgba(255, 68, 68, 0.8);
    border-color: rgba(255, 68, 68, 0.3);
}

.battle-ctrl-btn--stop:hover[b-3300ht8tev] {
    background: rgba(255, 68, 68, 0.2);
    color: #ff4444;
}

/* ── Active Buff Indicators (below top bar, matching Stage mode) ── */
.boss-buff-strip[b-3300ht8tev] {
    position: absolute;
    top: 152px;
    top: calc(152px + env(safe-area-inset-top, 0px));
    left: 10px;
    z-index: 10;
    display: flex;
    gap: 4px;
}

.boss-buff-tag[b-3300ht8tev] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 6px;
    border-radius: 999px;
    font-size: 0.6rem;
    font-weight: 700;
    color: #fff;
    backdrop-filter: blur(4px);
}

.boss-buff-tag--shot[b-3300ht8tev] {
    background: rgba(123, 31, 162, 0.5);
    border: 1px solid rgba(123, 31, 162, 0.7);
}

.boss-buff-tag--dodge[b-3300ht8tev] {
    background: rgba(0, 188, 212, 0.4);
    border: 1px solid rgba(0, 188, 212, 0.6);
}

.boss-buff-tag--penalty[b-3300ht8tev] {
    background: rgba(13, 202, 240, 0.4);
    border: 1px solid rgba(13, 202, 240, 0.6);
}

/* ═══════════════════════════════════════════
   Defeat Summary Panel
   ═══════════════════════════════════════════ */

.defeat-overlay[b-3300ht8tev] {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100%;
  padding: 1rem 0;
}

.defeat-panel[b-3300ht8tev] {
  position: relative;
  width: 100%;
  max-width: 400px;
  background: linear-gradient(180deg, #1a1028 0%, #0d0a14 100%);
  border: 2px solid rgba(124, 77, 255, 0.4);
  border-radius: 24px;
  padding: 3.5rem 2rem 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  box-shadow:
    0 0 40px rgba(124, 77, 255, 0.15),
    0 20px 60px rgba(0, 0, 0, 0.6);
  animation: defeat-slide-in-b-3300ht8tev 0.4s ease-out;
}

@keyframes defeat-slide-in-b-3300ht8tev {
  from {
    opacity: 0;
    transform: scale(0.9) translateY(20px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.defeat-banner[b-3300ht8tev] {
  position: absolute;
  top: -18px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #7c4dff, #651fff);
  padding: 0.5rem 2.5rem;
  border-radius: 999px;
  box-shadow:
    0 4px 20px rgba(124, 77, 255, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  white-space: nowrap;
}

.defeat-banner span[b-3300ht8tev] {
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: 3px;
  color: #fff;
  text-transform: uppercase;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.defeat-stage[b-3300ht8tev] {
  font-size: 1.6rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.95);
  letter-spacing: 0.5px;
}

.defeat-rewards[b-3300ht8tev] {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  width: 100%;
  padding: 1rem 1.25rem;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.defeat-reward-row[b-3300ht8tev] {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 1rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
}

.defeat-reward-row i[b-3300ht8tev] {
  font-size: 1.1rem;
  width: 20px;
  text-align: center;
}

.defeat-no-rewards[b-3300ht8tev] {
  color: rgba(255, 255, 255, 0.4);
  font-size: 0.95rem;
  margin: 0;
}

.defeat-btn[b-3300ht8tev] {
  width: 100%;
  padding: 0.85rem;
  border: none;
  border-radius: 14px;
  background: linear-gradient(135deg, #7c4dff, #651fff);
  color: #fff;
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 16px rgba(124, 77, 255, 0.35);
}

.defeat-btn:hover[b-3300ht8tev] {
  background: linear-gradient(135deg, #9165ff, #7c4dff);
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(124, 77, 255, 0.5);
}

.defeat-btn:active[b-3300ht8tev] {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(124, 77, 255, 0.3);
}

@media (max-width: 768px) {
  .defeat-panel[b-3300ht8tev] {
    max-width: 340px;
    padding: 3rem 1.5rem 1.5rem;
  }

  .defeat-stage[b-3300ht8tev] {
    font-size: 1.3rem;
  }
}

/* ═══════════════════════════════════════════
   Buff Screen (post-defeat consumable usage)
   ═══════════════════════════════════════════ */

.buff-panel[b-3300ht8tev] {
  max-width: 440px;
  gap: 1rem;
}

.buff-section[b-3300ht8tev] {
  width: 100%;
  padding: 0.75rem 1rem;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.buff-section-title[b-3300ht8tev] {
  font-size: 0.9rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 0.5rem;
}

.buff-active-list[b-3300ht8tev] {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.buff-badge[b-3300ht8tev] {
  font-size: 0.8rem;
  font-weight: 600;
}

.buff-none[b-3300ht8tev] {
  color: rgba(255, 255, 255, 0.35);
  font-size: 0.85rem;
  margin: 0;
  font-style: italic;
}

/* FITAB Balance Display */
.buff-fitab[b-3300ht8tev] {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  width: 100%;
  padding: 0.6rem 1rem;
  background: rgba(124, 77, 255, 0.1);
  border: 1px solid rgba(124, 77, 255, 0.3);
  border-radius: 12px;
  font-size: 1rem;
  font-weight: 700;
  color: #c9a0ff;
}

.buff-fitab i[b-3300ht8tev] {
  color: #b388ff;
  font-size: 1.1rem;
}

.buff-fitab__cost[b-3300ht8tev] {
  font-size: 0.75rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.4);
  margin-left: 0.25rem;
}

/* Consumable Grid */
.buff-item-grid[b-3300ht8tev] {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem;
  margin-top: 0.25rem;
}

.buff-item-card[b-3300ht8tev] {
  position: relative;
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #1a1a2e 0%, #0f0f1c 100%);
  border: 2px solid rgba(111, 66, 193, 0.25);
  border-radius: 10px;
  padding: 0.35rem;
  overflow: hidden;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.buff-item-card:hover:not(.buff-item-card--locked):not(.buff-item-card--disabled)[b-3300ht8tev] {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(111, 66, 193, 0.3);
}

.buff-item-card--shot[b-3300ht8tev] {
  border-color: rgba(13, 202, 240, 0.5);
  background: linear-gradient(180deg, #0f1a2e 0%, #081018 100%);
}

.buff-item-card--shot:hover:not(.buff-item-card--locked):not(.buff-item-card--disabled)[b-3300ht8tev] {
  border-color: #0dcaf0;
  box-shadow: 0 4px 12px rgba(13, 202, 240, 0.3);
}

.buff-item-card--shot .buff-item-card__icon[b-3300ht8tev] {
  color: #0dcaf0;
}

.buff-item-card--penalty[b-3300ht8tev] {
  border-color: rgba(13, 202, 240, 0.5);
  background: linear-gradient(180deg, #0f2e3a 0%, #081a22 100%);
}

.buff-item-card--penalty:hover:not(.buff-item-card--locked):not(.buff-item-card--disabled)[b-3300ht8tev] {
  border-color: #0dcaf0;
  box-shadow: 0 4px 12px rgba(13, 202, 240, 0.3);
}

.buff-item-card--penalty .buff-item-card__icon[b-3300ht8tev] {
  color: #0dcaf0;
}

.buff-item-card--locked[b-3300ht8tev] {
  opacity: 0.35;
  cursor: not-allowed !important;
  filter: grayscale(0.7);
  pointer-events: none;
}

.buff-item-card--disabled[b-3300ht8tev] {
  opacity: 0.5;
}

.buff-item-card__qty[b-3300ht8tev] {
  position: absolute;
  top: 3px;
  left: 5px;
  font-size: 0.8rem;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
  z-index: 1;
}

.buff-item-card__icon[b-3300ht8tev] {
  font-size: 1.8rem;
  line-height: 1;
}

.buff-item-card__name[b-3300ht8tev] {
  font-size: 0.7rem;
  font-weight: 700;
  color: #e2e2e2;
  line-height: 1.1;
  margin-top: 2px;
  text-align: center;
}

.buff-item-card__desc[b-3300ht8tev] {
  font-size: 0.55rem;
  color: rgba(255, 255, 255, 0.4);
  line-height: 1;
  text-align: center;
}

/* Toast Messages */
.buff-toast[b-3300ht8tev] {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border-radius: 10px;
  font-size: 0.85rem;
  font-weight: 600;
  text-align: center;
  animation: defeat-slide-in-b-3300ht8tev 0.2s ease-out;
}

.buff-toast--success[b-3300ht8tev] {
  background: rgba(40, 167, 69, 0.15);
  border: 1px solid rgba(40, 167, 69, 0.4);
  color: #6fdc8c;
}

.buff-toast--error[b-3300ht8tev] {
  background: rgba(220, 53, 69, 0.15);
  border: 1px solid rgba(220, 53, 69, 0.4);
  color: #f5a3ab;
}

/* Action Buttons */
.buff-actions[b-3300ht8tev] {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 100%;
}

.buff-btn--retry[b-3300ht8tev] {
  background: linear-gradient(135deg, #28a745, #1e7e34) !important;
  box-shadow: 0 4px 16px rgba(40, 167, 69, 0.35) !important;
}

.buff-btn--retry:hover[b-3300ht8tev] {
  background: linear-gradient(135deg, #34ce57, #28a745) !important;
  box-shadow: 0 6px 24px rgba(40, 167, 69, 0.5) !important;
}

.buff-btn--retry:disabled[b-3300ht8tev] {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: 0 2px 8px rgba(40, 167, 69, 0.2) !important;
}

.buff-btn--end[b-3300ht8tev] {
  background: linear-gradient(135deg, #6c757d, #565e64) !important;
  box-shadow: 0 4px 16px rgba(108, 117, 125, 0.3) !important;
  font-size: 0.9rem !important;
  padding: 0.65rem !important;
}

.buff-btn--end:hover[b-3300ht8tev] {
  background: linear-gradient(135deg, #7d868e, #6c757d) !important;
  box-shadow: 0 6px 24px rgba(108, 117, 125, 0.4) !important;
}

@media (max-width: 768px) {
  .buff-panel[b-3300ht8tev] {
    max-width: 340px;
    padding: 3rem 1.25rem 1.25rem;
  }

  .buff-item-grid[b-3300ht8tev] {
    gap: 0.35rem;
  }

  .buff-item-card__icon[b-3300ht8tev] {
    font-size: 1.5rem;
  }
}

/* ── Compact rewards strip (matching Stage mode style) ── */

.battle-rewards-strip[b-3300ht8tev] {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
    flex: 1;
    min-width: 0;
}

.reward-tag[b-3300ht8tev] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 6px;
    border-radius: 999px;
    font-size: 0.65rem;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    backdrop-filter: blur(4px);
}

.reward-tag i[b-3300ht8tev] {
    font-size: 0.6rem;
}

.reward-tag--fidelis[b-3300ht8tev] {
    background: rgba(124, 77, 255, 0.35);
    border: 1px solid rgba(124, 77, 255, 0.5);
}

.reward-tag--drink[b-3300ht8tev] {
    background: rgba(245, 166, 35, 0.35);
    border: 1px solid rgba(245, 166, 35, 0.5);
}
/* /Pages/MyTuno/Components/MyTunoImprovements.razor.rz.scp.css */
/* ==========================================
   RPG-style Enhance Row (Improvements Shop)
   Re-uses the same structure as UpgradeShop
   with unique icon color themes
   ========================================== */
.enhance-row[b-at9gs3pf58] {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem;
  background: linear-gradient(180deg, #1a1a2e 0%, #151525 40%, #0f0f1c 100%);
  border: 2px solid rgba(111, 66, 193, 0.3);
  border-radius: 8px;
  box-shadow: inset 0 1px 0 rgba(111, 66, 193, 0.1), 0 3px 8px rgba(0, 0, 0, 0.4);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.enhance-row:hover[b-at9gs3pf58] {
  transform: translateY(-2px);
  border-color: rgba(111, 66, 193, 0.5);
  box-shadow: inset 0 1px 0 rgba(111, 66, 193, 0.15), 0 6px 16px rgba(111, 66, 193, 0.2);
}

.enhance-row--maxed[b-at9gs3pf58] {
  background: linear-gradient(180deg, #1a1a1e 0%, #141418 40%, #0f0f12 100%);
  border-color: rgba(255, 255, 255, 0.1);
}

.enhance-row--maxed:hover[b-at9gs3pf58] {
  transform: none;
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 3px 8px rgba(0, 0, 0, 0.4);
}

.enhance-row__icon[b-at9gs3pf58] {
  width: 44px;
  height: 44px;
  min-width: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  border: 2px solid rgba(0, 0, 0, 0.3);
  font-size: 1.25rem;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
  overflow: hidden;
}

.enhance-row__img[b-at9gs3pf58] {
  width: 34px;
  height: 34px;
  object-fit: contain;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4));
}

.enhance-row__icon--energy[b-at9gs3pf58] {
  background: linear-gradient(135deg, #f39c12, #d68910);
  color: #fff;
}

.enhance-row__icon--regen[b-at9gs3pf58] {
  background: linear-gradient(135deg, #1abc9c, #16a085);
  color: #fff;
}

.enhance-row__icon--shot[b-at9gs3pf58] {
  background: linear-gradient(135deg, #e74c3c, #c0392b);
  color: #fff;
}

.enhance-row__icon--fidelis[b-at9gs3pf58] {
  background: linear-gradient(135deg, #8e44ad, #6c3483);
  color: #fff;
}

.enhance-row__info[b-at9gs3pf58] {
  flex: 1;
  min-width: 0;
}

.enhance-row__title[b-at9gs3pf58] {
  font-weight: 700;
  font-size: 0.95rem;
  color: #e2e2e2;
  line-height: 1.2;
}

.enhance-row__level[b-at9gs3pf58] {
  font-weight: 600;
  font-size: 0.8rem;
  color: #a88ee5;
}

.enhance-row__desc[b-at9gs3pf58] {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.5);
  font-weight: 500;
}

.enhance-row__stat[b-at9gs3pf58] {
  font-size: 0.8rem;
  font-weight: 700;
  color: #e2e2e2;
  margin-top: 1px;
}

.enhance-row--maxed .enhance-row__title[b-at9gs3pf58],
.enhance-row--maxed .enhance-row__stat[b-at9gs3pf58] {
  color: rgba(255, 255, 255, 0.4);
}

.enhance-row--maxed .enhance-row__level[b-at9gs3pf58],
.enhance-row--maxed .enhance-row__desc[b-at9gs3pf58] {
  color: rgba(255, 255, 255, 0.25);
}

.enhance-row__action[b-at9gs3pf58] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  min-width: 80px;
}

.enhance-row__btn[b-at9gs3pf58] {
  width: 100%;
  padding: 0.35rem 0.6rem;
  font-weight: 700;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border: 2px solid rgba(111, 66, 193, 0.4);
  border-radius: 6px;
  background: linear-gradient(180deg, #7c4ddb 0%, #6f42c1 50%, #5a35a0 100%);
  color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.15);
  transition: background 0.15s ease, transform 0.1s ease;
}

.enhance-row__btn:hover:not(:disabled)[b-at9gs3pf58] {
  background: linear-gradient(180deg, #8e5ce8 0%, #7c4ddb 50%, #6f42c1 100%);
  color: #fff;
  transform: translateY(-1px);
}

.enhance-row__btn:active:not(:disabled)[b-at9gs3pf58] {
  transform: translateY(1px);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), inset 0 1px 2px rgba(0, 0, 0, 0.1);
}

.enhance-row__btn:disabled[b-at9gs3pf58] {
  opacity: 0.6;
  cursor: not-allowed;
  box-shadow: none;
}

.enhance-row__btn--maxed[b-at9gs3pf58] {
  background: linear-gradient(180deg, #2a2a30, #1e1e24) !important;
  color: rgba(255, 255, 255, 0.4) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

.enhance-row__cost[b-at9gs3pf58] {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.72rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.7);
}

.enhance-row__cost i[b-at9gs3pf58] {
  color: #a88ee5;
  font-size: 0.8rem;
}

.enhance-row--maxed .enhance-row__cost[b-at9gs3pf58] {
  color: rgba(255, 255, 255, 0.3);
}

.enhance-row--maxed .enhance-row__cost i[b-at9gs3pf58] {
  color: rgba(255, 255, 255, 0.2);
}

/* ── Mobile: keep single-row layout, tighter sizing ── */
@media (max-width: 768px) {
  .enhance-row[b-at9gs3pf58] {
    gap: 0.4rem;
    padding: 0.4rem;
  }

  .enhance-row__icon[b-at9gs3pf58] {
    width: 32px;
    height: 32px;
    min-width: 32px;
    font-size: 0.9rem;
  }

  .enhance-row__title[b-at9gs3pf58] {
    font-size: 0.8rem;
  }

  .enhance-row__level[b-at9gs3pf58] {
    font-size: 0.7rem;
  }

  .enhance-row__desc[b-at9gs3pf58] {
    font-size: 0.65rem;
  }

  .enhance-row__stat[b-at9gs3pf58] {
    font-size: 0.7rem;
  }

  .enhance-row__action[b-at9gs3pf58] {
    min-width: 68px;
    gap: 0.15rem;
  }

  .enhance-row__btn[b-at9gs3pf58] {
    padding: 0.25rem 0.4rem;
    font-size: 0.65rem;
    letter-spacing: 0.3px;
  }

  .enhance-row__cost[b-at9gs3pf58] {
    font-size: 0.6rem;
    white-space: nowrap;
  }
}
/* /Pages/MyTuno/Components/MyTunoUpgradeShop.razor.rz.scp.css */
/* ==========================================
   RPG-style Enhance Row (Upgrade Shop)
   ========================================== */
.enhance-row[b-14yj4l3616] {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem;
  background: linear-gradient(180deg, #1a1a2e 0%, #151525 40%, #0f0f1c 100%);
  border: 2px solid rgba(111, 66, 193, 0.3);
  border-radius: 8px;
  box-shadow: inset 0 1px 0 rgba(111, 66, 193, 0.1), 0 3px 8px rgba(0, 0, 0, 0.4);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.enhance-row:hover[b-14yj4l3616] {
  transform: translateY(-2px);
  border-color: rgba(111, 66, 193, 0.5);
  box-shadow: inset 0 1px 0 rgba(111, 66, 193, 0.15), 0 6px 16px rgba(111, 66, 193, 0.2);
}

.enhance-row--maxed[b-14yj4l3616] {
  background: linear-gradient(180deg, #1a1a1e 0%, #141418 40%, #0f0f12 100%);
  border-color: rgba(255, 255, 255, 0.1);
}

.enhance-row--maxed:hover[b-14yj4l3616] {
  transform: none;
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 3px 8px rgba(0, 0, 0, 0.4);
}

/* Icon */
.enhance-row__icon[b-14yj4l3616] {
  width: 44px;
  height: 44px;
  min-width: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  border: 2px solid rgba(0, 0, 0, 0.3);
  font-size: 1.25rem;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
}

.enhance-row__icon--hp[b-14yj4l3616] {
  background: linear-gradient(135deg, #c0392b, #922b21);
  color: #fff;
}

.enhance-row__icon--power[b-14yj4l3616] {
  background: linear-gradient(135deg, #27ae60, #1e8449);
  color: #fff;
}

.enhance-row__icon--speed[b-14yj4l3616] {
  background: linear-gradient(135deg, #2980b9, #1a5276);
  color: #fff;
}

.enhance-row__icon--critical[b-14yj4l3616] {
  background: linear-gradient(135deg, #e67e22, #d35400);
  color: #fff;
}

.enhance-row__icon--defense[b-14yj4l3616] {
  background: linear-gradient(135deg, #7f8c8d, #515a5a);
  color: #fff;
}

/* Info section */
.enhance-row__info[b-14yj4l3616] {
  flex: 1;
  min-width: 0;
}

.enhance-row__title[b-14yj4l3616] {
  font-weight: 700;
  font-size: 0.95rem;
  color: #e2e2e2;
  line-height: 1.2;
}

.enhance-row__level[b-14yj4l3616] {
  font-weight: 600;
  font-size: 0.8rem;
  color: #a88ee5;
}

.enhance-row__desc[b-14yj4l3616] {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.5);
  font-weight: 500;
}

.enhance-row__stat[b-14yj4l3616] {
  font-size: 0.8rem;
  font-weight: 700;
  color: #e2e2e2;
  margin-top: 1px;
}

.enhance-row--maxed .enhance-row__title[b-14yj4l3616],
.enhance-row--maxed .enhance-row__stat[b-14yj4l3616] {
  color: rgba(255, 255, 255, 0.4);
}

.enhance-row--maxed .enhance-row__level[b-14yj4l3616],
.enhance-row--maxed .enhance-row__desc[b-14yj4l3616] {
  color: rgba(255, 255, 255, 0.25);
}

/* Action section (button + cost) */
.enhance-row__action[b-14yj4l3616] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  min-width: 80px;
}

.enhance-row__btn[b-14yj4l3616] {
  width: 100%;
  padding: 0.35rem 0.6rem;
  font-weight: 700;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border: 2px solid rgba(111, 66, 193, 0.4);
  border-radius: 6px;
  background: linear-gradient(180deg, #7c4ddb 0%, #6f42c1 50%, #5a35a0 100%);
  color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.15);
  transition: background 0.15s ease, transform 0.1s ease;
}

.enhance-row__btn:hover:not(:disabled)[b-14yj4l3616] {
  background: linear-gradient(180deg, #8e5ce8 0%, #7c4ddb 50%, #6f42c1 100%);
  color: #fff;
  transform: translateY(-1px);
}

.enhance-row__btn:active:not(:disabled)[b-14yj4l3616] {
  transform: translateY(1px);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), inset 0 1px 2px rgba(0, 0, 0, 0.1);
}

.enhance-row__btn:disabled[b-14yj4l3616] {
  opacity: 0.6;
  cursor: not-allowed;
  box-shadow: none;
}

.enhance-row__btn--maxed[b-14yj4l3616] {
  background: linear-gradient(180deg, #2a2a30, #1e1e24) !important;
  color: rgba(255, 255, 255, 0.4) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

/* Cost label */
.enhance-row__cost[b-14yj4l3616] {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.72rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.7);
}

.enhance-row__cost i[b-14yj4l3616] {
  color: #a88ee5;
  font-size: 0.8rem;
}

.enhance-row--maxed .enhance-row__cost[b-14yj4l3616] {
  color: rgba(255, 255, 255, 0.3);
}

.enhance-row--maxed .enhance-row__cost i[b-14yj4l3616] {
  color: rgba(255, 255, 255, 0.2);
}

/* ── Mobile: keep single-row layout, tighter sizing ── */
@media (max-width: 768px) {
  .enhance-row[b-14yj4l3616] {
    gap: 0.4rem;
    padding: 0.4rem;
  }

  .enhance-row__icon[b-14yj4l3616] {
    width: 32px;
    height: 32px;
    min-width: 32px;
    font-size: 0.9rem;
  }

  .enhance-row__title[b-14yj4l3616] {
    font-size: 0.8rem;
  }

  .enhance-row__level[b-14yj4l3616] {
    font-size: 0.7rem;
  }

  .enhance-row__desc[b-14yj4l3616] {
    font-size: 0.65rem;
  }

  .enhance-row__stat[b-14yj4l3616] {
    font-size: 0.7rem;
  }

  .enhance-row__action[b-14yj4l3616] {
    min-width: 68px;
    gap: 0.15rem;
  }

  .enhance-row__btn[b-14yj4l3616] {
    padding: 0.25rem 0.4rem;
    font-size: 0.65rem;
    letter-spacing: 0.3px;
  }

  .enhance-row__cost[b-14yj4l3616] {
    font-size: 0.6rem;
    white-space: nowrap;
  }
}
/* /Pages/MyTuno/MyTunoHome.razor.rz.scp.css */
/* ==========================================
   Shot Buff Aura (blue glow on character)
   ========================================== */
.shot-buff-aura[b-t56smwc8j2] {
  filter: drop-shadow(0 0 8px rgba(0, 170, 255, 0.7))
          drop-shadow(0 0 20px rgba(0, 170, 255, 0.4))
          drop-shadow(0 0 40px rgba(0, 170, 255, 0.2));
  animation: buff-pulse-b-t56smwc8j2 2s ease-in-out infinite;
}

@keyframes buff-pulse-b-t56smwc8j2 {
  0%, 100% {
    filter: drop-shadow(0 0 8px rgba(0, 170, 255, 0.7))
            drop-shadow(0 0 20px rgba(0, 170, 255, 0.4))
            drop-shadow(0 0 40px rgba(0, 170, 255, 0.2));
  }
  50% {
    filter: drop-shadow(0 0 12px rgba(0, 170, 255, 0.9))
            drop-shadow(0 0 28px rgba(0, 170, 255, 0.6))
            drop-shadow(0 0 50px rgba(0, 170, 255, 0.3));
  }
}

/* ==========================================
   Item Grid (Inventory - RPG-style cards)
   ========================================== */
.item-grid[b-t56smwc8j2] {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem;
  flex: 1;
  align-content: start;
}

.item-card[b-t56smwc8j2] {
  position: relative;
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #1a1a2e 0%, #0f0f1c 100%);
  border: 2px solid rgba(111, 66, 193, 0.25);
  border-radius: 10px;
  padding: 0.4rem;
  overflow: hidden;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.item-card:hover:not(.item-card--empty)[b-t56smwc8j2] {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(111, 66, 193, 0.3);
}

/* Beer card - warm yellow/orange */
.item-card--beer[b-t56smwc8j2] {
  border-color: rgba(255, 193, 7, 0.5);
  background: linear-gradient(180deg, #2a2210 0%, #1a1608 100%);
}

.item-card--beer:hover[b-t56smwc8j2] {
  border-color: #ffc107;
  box-shadow: 0 4px 12px rgba(255, 193, 7, 0.3);
}

.item-card--beer .item-card__icon[b-t56smwc8j2] {
  color: #ffc107;
}

/* Shot card - cyan/info */
.item-card--shot[b-t56smwc8j2] {
  border-color: rgba(13, 202, 240, 0.5);
  background: linear-gradient(180deg, #0f1a2e 0%, #081018 100%);
}

.item-card--shot:hover[b-t56smwc8j2] {
  border-color: #0dcaf0;
  box-shadow: 0 4px 12px rgba(13, 202, 240, 0.3);
}

.item-card--shot .item-card__icon[b-t56smwc8j2] {
  color: #0dcaf0;
}

/* Penalty card - blue like other consumables */
.item-card--penalty[b-t56smwc8j2] {
  border-color: rgba(13, 202, 240, 0.5);
  background: linear-gradient(180deg, #0f2e3a 0%, #081a22 100%);
}

.item-card--penalty:hover[b-t56smwc8j2] {
  border-color: #0dcaf0;
  box-shadow: 0 4px 12px rgba(13, 202, 240, 0.3);
}

.item-card--penalty .item-card__icon[b-t56smwc8j2] {
  color: #0dcaf0;
}

/* Locked consumable - mirrors gather-node--locked */
.item-card--locked[b-t56smwc8j2] {
  opacity: 0.35;
  cursor: not-allowed !important;
  filter: grayscale(0.7);
  pointer-events: none;
}

.item-card--locked .item-card__name[b-t56smwc8j2] {
  color: #888;
}

.item-card--locked:hover[b-t56smwc8j2] {
  transform: none !important;
  box-shadow: none !important;
}

/* Empty/locked slot */
.item-card--empty[b-t56smwc8j2] {
  border-color: rgba(255, 255, 255, 0.06);
  background: rgba(15, 15, 20, 0.6);
  cursor: default;
}

.item-card--empty .item-card__icon[b-t56smwc8j2] {
  color: rgba(255, 255, 255, 0.12);
  font-size: 1.4rem;
}

/* Vodka card - silver/clear */
.item-card--vodka[b-t56smwc8j2] {
  border-color: rgba(200, 200, 220, 0.4);
  background: linear-gradient(180deg, #1a1a28 0%, #12121e 100%);
  cursor: default;
}

.item-card--vodka .item-card__icon[b-t56smwc8j2] {
  color: #c8c8dc;
}

/* Gin card - green/herbal */
.item-card--gin[b-t56smwc8j2] {
  border-color: rgba(46, 204, 113, 0.4);
  background: linear-gradient(180deg, #0f1f1a 0%, #0a1512 100%);
  cursor: default;
}

.item-card--gin .item-card__icon[b-t56smwc8j2] {
  color: #2ecc71;
}

/* Whisky card - amber */
.item-card--whisky[b-t56smwc8j2] {
  border-color: rgba(230, 126, 34, 0.4);
  background: linear-gradient(180deg, #221a0f 0%, #18120a 100%);
  cursor: default;
}

.item-card--whisky .item-card__icon[b-t56smwc8j2] {
  color: #e67e22;
}

/* Absinto card - bright green */
.item-card--absinto[b-t56smwc8j2] {
  border-color: rgba(0, 255, 100, 0.4);
  background: linear-gradient(180deg, #0f1f14 0%, #0a150e 100%);
  cursor: default;
}

.item-card--absinto .item-card__icon[b-t56smwc8j2] {
  color: #00ff64;
}

/* Quantity badge (top-left) */
.item-card__qty[b-t56smwc8j2] {
  position: absolute;
  top: 4px;
  left: 6px;
  font-size: 0.9rem;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
  z-index: 1;
}

/* Instrument part card - purple */
.item-card--instrument[b-t56smwc8j2] {
  border-color: rgba(111, 66, 193, 0.5);
  background: linear-gradient(180deg, #1a1030 0%, #110a20 100%);
  cursor: default;
}

.item-card--instrument .item-card__icon[b-t56smwc8j2] {
  color: #a855f7;
}

.item-card--instrument .item-card__icon img[b-t56smwc8j2] {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

/* Equipment card - amber/orange */
.item-card--equipment[b-t56smwc8j2] {
  border-color: rgba(245, 158, 11, 0.5);
  background: linear-gradient(180deg, #1f1a0f 0%, #15100a 100%);
  cursor: default;
}

.item-card--equipment .item-card__icon[b-t56smwc8j2] {
  color: #f59e0b;
}

/* Equippable card - clickable from inventory */
.item-card--equippable[b-t56smwc8j2] {
  cursor: pointer !important;
  border-width: 2px;
}

.item-card--equippable:hover[b-t56smwc8j2] {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 6px 18px rgba(40, 167, 69, 0.35);
  border-color: rgba(40, 167, 69, 0.7) !important;
}

.item-card--equippable .item-card__desc[b-t56smwc8j2] {
  color: rgba(40, 167, 69, 0.8);
  font-weight: 600;
}

/* Clickable inventory card */
.item-card--clickable[b-t56smwc8j2] {
  cursor: pointer;
  transition: transform 0.1s ease, box-shadow 0.15s ease;
}

.item-card--clickable:hover[b-t56smwc8j2] {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.3);
}

/* Discard modal reward highlight */
.discard-fidelis-reward[b-t56smwc8j2] {
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0.75rem;
  background: rgba(220, 53, 69, 0.1);
  border: 1px solid rgba(220, 53, 69, 0.3);
  border-radius: 8px;
  font-size: 0.95rem;
}

/* Icon */
.item-card__icon[b-t56smwc8j2] {
  font-size: 2.2rem;
  line-height: 1;
}

/* Name & desc */
.item-card__name[b-t56smwc8j2] {
  font-size: 0.85rem;
  font-weight: 700;
  color: #e2e2e2;
  line-height: 1.1;
  margin-top: 4px;
  text-align: center;
}

.item-card__desc[b-t56smwc8j2] {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.4);
  line-height: 1;
  text-align: center;
}

/* ==========================================
   Equipment Layout (slots around character)
   ========================================== */
.equip-layout[b-t56smwc8j2] {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 0.75rem;
  flex: 1;
  padding: 0.75rem 0.25rem 0.5rem;
}

.equip-layout__side[b-t56smwc8j2] {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.6rem;
}

.equip-layout__center[b-t56smwc8j2] {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  min-width: 90px;
}

.equip-layout__sprite[b-t56smwc8j2] {
  max-height: 200px;
  width: 100%;
  object-fit: contain;
  image-rendering: auto;
  filter: drop-shadow(0 3px 8px rgba(111, 66, 193, 0.4));
  opacity: 0.65;
}

.equip-slot[b-t56smwc8j2] {
  position: relative;
  width: 96px;
  height: 96px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #1a1a2e 0%, #0f0f1c 100%);
  border: 2px dashed rgba(111, 66, 193, 0.25);
  border-radius: 10px;
  color: rgba(255, 255, 255, 0.2);
  font-size: 1.5rem;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.equip-slot:hover[b-t56smwc8j2] {
  border-color: rgba(111, 66, 193, 0.45);
  color: rgba(255, 255, 255, 0.35);
}

.equip-slot--filled[b-t56smwc8j2] {
  border-style: solid;
  border-color: rgba(111, 66, 193, 0.6);
  color: rgba(255, 255, 255, 0.85);
  background: linear-gradient(180deg, #1e1040 0%, #140a2e 100%);
}

.equip-slot--filled:hover[b-t56smwc8j2] {
  border-color: rgba(192, 57, 43, 0.6);
  color: rgba(192, 57, 43, 0.7);
}

/* Rare set upgrade applied */
.equip-slot--rare[b-t56smwc8j2] {
  border-color: rgba(255, 215, 0, 0.7) !important;
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.25), inset 0 0 8px rgba(255, 215, 0, 0.08);
  background: linear-gradient(180deg, #2a1e00 0%, #1a1200 100%);
}

.equip-slot--rare:hover[b-t56smwc8j2] {
  border-color: rgba(255, 215, 0, 0.9) !important;
  box-shadow: 0 0 16px rgba(255, 215, 0, 0.4), inset 0 0 12px rgba(255, 215, 0, 0.12);
}

.equip-slot__rare-badge[b-t56smwc8j2] {
  position: absolute;
  top: -6px;
  left: -6px;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #ffd700, #daa520);
  border-radius: 50%;
  font-size: 0.55rem;
  color: #1a1200;
  box-shadow: 0 2px 6px rgba(255, 215, 0, 0.5);
  z-index: 2;
  pointer-events: none;
  animation: rare-glow-b-t56smwc8j2 2s ease-in-out infinite;
}

@keyframes rare-glow-b-t56smwc8j2 {
  0%, 100% { box-shadow: 0 2px 6px rgba(255, 215, 0, 0.4); }
  50% { box-shadow: 0 2px 10px rgba(255, 215, 0, 0.8); }
}

@keyframes rare-tab-pulse-b-t56smwc8j2 {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}

/* Slot has item available in inventory to equip */
.equip-slot--available[b-t56smwc8j2] {
  border-color: rgba(40, 167, 69, 0.5);
  border-style: dashed;
  animation: equip-pulse-b-t56smwc8j2 2s ease-in-out infinite;
  color: rgba(40, 167, 69, 0.6);
}

.equip-slot--available:hover[b-t56smwc8j2] {
  border-color: rgba(40, 167, 69, 0.8);
  color: rgba(40, 167, 69, 0.9);
  box-shadow: 0 0 12px rgba(40, 167, 69, 0.3);
}

@keyframes equip-pulse-b-t56smwc8j2 {
  0%, 100% { border-color: rgba(40, 167, 69, 0.35); }
  50% { border-color: rgba(40, 167, 69, 0.7); }
}

.equip-slot__img[b-t56smwc8j2] {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

.equip-slot__label[b-t56smwc8j2] {
  font-size: 0.55rem;
  font-weight: 600;
  margin-top: 2px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.equip-slot__level[b-t56smwc8j2] {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 24px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  background: linear-gradient(135deg, #f39c12, #e67e22);
  border-radius: 10px;
  font-size: 0.65rem;
  font-weight: 800;
  color: #fff;
  box-shadow: 0 2px 6px rgba(243, 156, 18, 0.5);
  z-index: 2;
  pointer-events: none;
}

/* Weapon slots row below character */
.equip-weapons[b-t56smwc8j2] {
  display: flex;
  justify-content: center;
  gap: 1rem;
  padding: 0 1rem;
}

.equip-slot--weapon[b-t56smwc8j2] {
  flex: 1;
  max-width: 130px;
  height: 68px;
  border-color: rgba(192, 57, 43, 0.35);
}

.equip-slot--weapon:hover[b-t56smwc8j2] {
  border-color: rgba(192, 57, 43, 0.6);
  color: rgba(192, 57, 43, 0.5);
}

.equip-slot--weapon.equip-slot--filled[b-t56smwc8j2] {
  border-color: rgba(192, 57, 43, 0.6);
  color: rgba(255, 255, 255, 0.85);
  background: linear-gradient(180deg, #1e1015 0%, #140a0e 100%);
}

/* ==========================================
   Equipment Bonus Bar (Fidelis-bar style)
   ========================================== */
.equip-bonus-bar[b-t56smwc8j2] {
  display: flex;
  justify-content: center;
  margin-bottom: 0.5rem;
}

.equip-bonus-bar__inner[b-t56smwc8j2] {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.45rem 1.2rem;
  background: linear-gradient(180deg, #1a1a2e 0%, #151525 40%, #0f0f1c 100%);
  border: 2px solid rgba(111, 66, 193, 0.3);
  border-radius: 50px;
  box-shadow: 0 4px 16px rgba(111, 66, 193, 0.15), inset 0 1px 0 rgba(111, 66, 193, 0.1);
  width: 100%;
  justify-content: center;
}

.equip-bonus-bar__level[b-t56smwc8j2] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: linear-gradient(135deg, #f39c12, #e67e22);
  border-radius: 50%;
  font-size: 0.75rem;
  font-weight: 800;
  color: #fff;
  box-shadow: 0 2px 6px rgba(243, 156, 18, 0.4);
  flex-shrink: 0;
}

.equip-bonus-bar__stat[b-t56smwc8j2] {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.equip-bonus-bar__label[b-t56smwc8j2] {
  font-size: 0.6rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.45);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.equip-bonus-bar__value[b-t56smwc8j2] {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.equip-stats-summary[b-t56smwc8j2] {
  font-size: 0.65rem;
}

/* Equip confirmation modal */
.equip-confirm-icon[b-t56smwc8j2] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(180deg, #1a1a2e 0%, #0f0f1c 100%);
  border: 2px solid rgba(111, 66, 193, 0.4);
  box-shadow: 0 0 20px rgba(111, 66, 193, 0.2);
}

.equip-confirm-stats[b-t56smwc8j2] {
  background: rgba(15, 15, 28, 0.6);
  border: 1px solid rgba(111, 66, 193, 0.2);
  border-radius: 8px;
  padding: 0.5rem 0.75rem;
}

/* Weapon upgrade requirements card */
.wpn-upgrade-section[b-t56smwc8j2] {
  background: rgba(15, 15, 28, 0.6);
  border: 1px solid rgba(111, 66, 193, 0.2);
  border-radius: 8px;
  padding: 0.6rem 0.75rem;
}

.wpn-upgrade-req[b-t56smwc8j2] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.35rem 0.5rem;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.03);
}

.wpn-upgrade-req--missing[b-t56smwc8j2] {
  background: rgba(220, 53, 69, 0.08);
  border: 1px solid rgba(220, 53, 69, 0.2);
}

/* ==========================================
   Item Detail Modal (Weapon & Equipment)
   ========================================== */
.item-detail-header[b-t56smwc8j2] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 0.75rem;
}

.item-detail-name[b-t56smwc8j2] {
  margin: 0;
  color: #e2e2e2;
  font-size: 1.1rem;
}

/* Weapon rename */
.weapon-rename-pencil[b-t56smwc8j2] {
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.4);
  font-size: 0.7rem;
  padding: 0 0.25rem;
  vertical-align: middle;
  transition: color 0.15s;
}

.weapon-rename-pencil:hover[b-t56smwc8j2] {
  color: var(--bs-warning);
}

.weapon-rename-row[b-t56smwc8j2] {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.weapon-rename-input[b-t56smwc8j2] {
  background: rgba(15, 15, 28, 0.8);
  border: 1px solid rgba(111, 66, 193, 0.4);
  border-radius: 4px;
  color: #e2e2e2;
  font-size: 0.95rem;
  padding: 0.15rem 0.4rem;
  width: 160px;
  outline: none;
}

.weapon-rename-input:focus[b-t56smwc8j2] {
  border-color: var(--bs-warning);
  box-shadow: 0 0 4px rgba(255, 193, 7, 0.3);
}

.weapon-rename-btn[b-t56smwc8j2] {
  padding: 0.1rem 0.35rem;
  font-size: 0.75rem;
  line-height: 1;
}

.item-detail-tags[b-t56smwc8j2] {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  justify-content: center;
}

.item-detail-tags .badge[b-t56smwc8j2] {
  font-size: 0.72rem;
  font-weight: 500;
}

.item-detail-section[b-t56smwc8j2] {
  background: rgba(15, 15, 28, 0.6);
  border: 1px solid rgba(111, 66, 193, 0.2);
  border-radius: 8px;
  padding: 0.5rem 0.75rem;
  margin-bottom: 0.5rem;
}

.item-detail-section__label[b-t56smwc8j2] {
  font-size: 0.72rem;
  color: #aaa;
  margin-bottom: 0.4rem;
  font-weight: 500;
}

/* Stat rows — compact horizontal layout */
.item-detail-stats[b-t56smwc8j2] {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.item-stat-row[b-t56smwc8j2] {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.25rem 0.4rem;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.03);
  font-size: 0.82rem;
}

.item-stat-row--preview[b-t56smwc8j2] {
  background: rgba(76, 175, 80, 0.06);
  border: 1px solid rgba(76, 175, 80, 0.15);
}

.item-stat-row__icon[b-t56smwc8j2] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 4px;
  font-size: 0.7rem;
  flex-shrink: 0;
}

.item-stat-row__icon--hp[b-t56smwc8j2] { background: rgba(220, 53, 69, 0.2); color: #ff6b7a; }
.item-stat-row__icon--pow[b-t56smwc8j2] { background: rgba(76, 175, 80, 0.2); color: #81c784; }
.item-stat-row__icon--def[b-t56smwc8j2] { background: rgba(158, 158, 158, 0.2); color: #bdbdbd; }
.item-stat-row__icon--spd[b-t56smwc8j2] { background: rgba(33, 150, 243, 0.2); color: #64b5f6; }
.item-stat-row__icon--crit[b-t56smwc8j2] { background: rgba(255, 193, 7, 0.2); color: #ffd54f; }

.item-stat-row__label[b-t56smwc8j2] {
  color: #ccc;
  min-width: 55px;
}

.item-stat-row__value[b-t56smwc8j2] {
  color: #e2e2e2;
  font-weight: 600;
  margin-left: auto;
}

.item-stat-row__delta[b-t56smwc8j2] {
  color: #4caf50;
  font-size: 0.72rem;
  font-weight: 500;
  min-width: 55px;
  text-align: right;
}

.item-stat-row__delta:empty[b-t56smwc8j2] {
  display: none;
}

/* Upgrade button inside section */
.item-detail-upgrade-btn[b-t56smwc8j2] {
  background: linear-gradient(135deg, rgba(111, 66, 193, 0.3), rgba(111, 66, 193, 0.15));
  border: 1px solid rgba(111, 66, 193, 0.4);
  color: #e2e2e2;
  font-size: 0.82rem;
  font-weight: 500;
  border-radius: 6px;
  padding: 0.4rem 0.75rem;
  transition: all 0.2s;
}

.item-detail-upgrade-btn:hover:not(:disabled)[b-t56smwc8j2] {
  background: linear-gradient(135deg, rgba(111, 66, 193, 0.5), rgba(111, 66, 193, 0.3));
  border-color: rgba(111, 66, 193, 0.6);
  color: #fff;
}

.item-detail-upgrade-btn:disabled[b-t56smwc8j2] {
  opacity: 0.5;
  color: #999;
}

.item-detail-upgrade-btn--drink[b-t56smwc8j2] {
  background: linear-gradient(135deg, rgba(255, 193, 7, 0.2), rgba(255, 193, 7, 0.08));
  border-color: rgba(255, 193, 7, 0.35);
}

.item-detail-upgrade-btn--drink:hover:not(:disabled)[b-t56smwc8j2] {
  background: linear-gradient(135deg, rgba(255, 193, 7, 0.35), rgba(255, 193, 7, 0.15));
  border-color: rgba(255, 193, 7, 0.55);
}

/* Footer action buttons */
.item-detail-actions[b-t56smwc8j2] {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  width: 100%;
}

/* Mobile responsive */
@media (max-width: 480px) {
  .item-stat-row[b-t56smwc8j2] {
    font-size: 0.78rem;
    padding: 0.2rem 0.3rem;
  }

  .item-stat-row__icon[b-t56smwc8j2] {
    width: 20px;
    height: 20px;
    font-size: 0.65rem;
  }

  .item-stat-row__label[b-t56smwc8j2] {
    min-width: 45px;
  }

  .item-stat-row__delta[b-t56smwc8j2] {
    min-width: 45px;
    font-size: 0.68rem;
  }

  .item-detail-section[b-t56smwc8j2] {
    padding: 0.4rem 0.5rem;
  }

  .item-detail-name[b-t56smwc8j2] {
    font-size: 1rem;
  }
}

/* ==========================================
   Fidelis Balance Bar (top currency display)
   ========================================== */
.fidelis-bar[b-t56smwc8j2] {
  display: flex;
  justify-content: center;
  margin-bottom: 1rem;
  max-width: 100%;
}

.fidelis-bar__inner[b-t56smwc8j2] {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 1.5rem;
  background: linear-gradient(180deg, #1a1a2e 0%, #151525 40%, #0f0f1c 100%);
  border: 2px solid rgba(111, 66, 193, 0.3);
  border-radius: 50px;
  box-shadow: 0 4px 16px rgba(111, 66, 193, 0.15), inset 0 1px 0 rgba(111, 66, 193, 0.1);
  flex-wrap: wrap;
  max-width: 100%;
  box-sizing: border-box;
}

.fidelis-bar__icon[b-t56smwc8j2] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: linear-gradient(135deg, #27ae60, #1e8449);
  border-radius: 50%;
  font-size: 1.1rem;
  color: #fff;
  box-shadow: 0 2px 6px rgba(39, 174, 96, 0.4);
}

.fidelis-bar__info[b-t56smwc8j2] {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.fidelis-bar__label[b-t56smwc8j2] {
  font-size: 0.65rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.fidelis-bar__value[b-t56smwc8j2] {
  font-size: 1.15rem;
  font-weight: 700;
  color: #2ecc71;
  letter-spacing: 0.5px;
}

/* ==========================================
   RPG-style Enhance Row (Upgrade Shop)
   ========================================== */
.enhance-row[b-t56smwc8j2] {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem;
  background: linear-gradient(180deg, #1a1a2e 0%, #151525 40%, #0f0f1c 100%);
  border: 2px solid rgba(111, 66, 193, 0.3);
  border-radius: 8px;
  box-shadow: inset 0 1px 0 rgba(111, 66, 193, 0.1), 0 3px 8px rgba(0, 0, 0, 0.4);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.enhance-row:hover[b-t56smwc8j2] {
  transform: translateY(-2px);
  border-color: rgba(111, 66, 193, 0.5);
  box-shadow: inset 0 1px 0 rgba(111, 66, 193, 0.15), 0 6px 16px rgba(111, 66, 193, 0.2);
}

.enhance-row--maxed[b-t56smwc8j2] {
  background: linear-gradient(180deg, #1a1a1e 0%, #141418 40%, #0f0f12 100%);
  border-color: rgba(255, 255, 255, 0.1);
}

.enhance-row--maxed:hover[b-t56smwc8j2] {
  transform: none;
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 3px 8px rgba(0, 0, 0, 0.4);
}

/* Icon */
.enhance-row__icon[b-t56smwc8j2] {
  width: 44px;
  height: 44px;
  min-width: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  border: 2px solid rgba(0, 0, 0, 0.3);
  font-size: 1.25rem;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
}

.enhance-row__icon--hp[b-t56smwc8j2] {
  background: linear-gradient(135deg, #c0392b, #922b21);
  color: #fff;
}

.enhance-row__icon--power[b-t56smwc8j2] {
  background: linear-gradient(135deg, #27ae60, #1e8449);
  color: #fff;
}

.enhance-row__icon--speed[b-t56smwc8j2] {
  background: linear-gradient(135deg, #2980b9, #1a5276);
  color: #fff;
}

.enhance-row__icon--critical[b-t56smwc8j2] {
  background: linear-gradient(135deg, #e67e22, #d35400);
  color: #fff;
}

.enhance-row__icon--defense[b-t56smwc8j2] {
  background: linear-gradient(135deg, #7f8c8d, #515a5a);
  color: #fff;
}

/* Info section */
.enhance-row__info[b-t56smwc8j2] {
  flex: 1;
  min-width: 0;
}

.enhance-row__title[b-t56smwc8j2] {
  font-weight: 700;
  font-size: 0.95rem;
  color: #e2e2e2;
  line-height: 1.2;
}

.enhance-row__level[b-t56smwc8j2] {
  font-weight: 600;
  font-size: 0.8rem;
  color: #a88ee5;
}

.enhance-row__desc[b-t56smwc8j2] {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.5);
  font-weight: 500;
}

.enhance-row__stat[b-t56smwc8j2] {
  font-size: 0.8rem;
  font-weight: 700;
  color: #e2e2e2;
  margin-top: 1px;
}

.enhance-row--maxed .enhance-row__title[b-t56smwc8j2],
.enhance-row--maxed .enhance-row__stat[b-t56smwc8j2] {
  color: rgba(255, 255, 255, 0.4);
}

.enhance-row--maxed .enhance-row__level[b-t56smwc8j2],
.enhance-row--maxed .enhance-row__desc[b-t56smwc8j2] {
  color: rgba(255, 255, 255, 0.25);
}

/* Action section (button + cost) */
.enhance-row__action[b-t56smwc8j2] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  min-width: 80px;
}

.enhance-row__btn[b-t56smwc8j2] {
  width: 100%;
  padding: 0.35rem 0.6rem;
  font-weight: 700;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border: 2px solid rgba(111, 66, 193, 0.4);
  border-radius: 6px;
  background: linear-gradient(180deg, #7c4ddb 0%, #6f42c1 50%, #5a35a0 100%);
  color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.15);
  transition: background 0.15s ease, transform 0.1s ease;
}

.enhance-row__btn:hover:not(:disabled)[b-t56smwc8j2] {
  background: linear-gradient(180deg, #8e5ce8 0%, #7c4ddb 50%, #6f42c1 100%);
  color: #fff;
  transform: translateY(-1px);
}

.enhance-row__btn:active:not(:disabled)[b-t56smwc8j2] {
  transform: translateY(1px);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), inset 0 1px 2px rgba(0, 0, 0, 0.1);
}

.enhance-row__btn:disabled[b-t56smwc8j2] {
  opacity: 0.6;
  cursor: not-allowed;
  box-shadow: none;
}

.enhance-row__btn--maxed[b-t56smwc8j2] {
  background: linear-gradient(180deg, #2a2a30, #1e1e24) !important;
  color: rgba(255, 255, 255, 0.4) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

/* Cost label */
.enhance-row__cost[b-t56smwc8j2] {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.72rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.7);
}

.enhance-row__cost i[b-t56smwc8j2] {
  color: #a88ee5;
  font-size: 0.8rem;
}

.enhance-row--maxed .enhance-row__cost[b-t56smwc8j2] {
  color: rgba(255, 255, 255, 0.3);
}

.enhance-row--maxed .enhance-row__cost i[b-t56smwc8j2] {
  color: rgba(255, 255, 255, 0.2);
}

/* ── Mobile: keep single-row layout, tighter sizing (Leitão row) ── */
@media (max-width: 768px) {
  .enhance-row[b-t56smwc8j2] {
    gap: 0.4rem;
    padding: 0.4rem;
  }

  .enhance-row__icon[b-t56smwc8j2] {
    width: 32px;
    height: 32px;
    min-width: 32px;
    font-size: 0.9rem;
  }

  .enhance-row__title[b-t56smwc8j2] {
    font-size: 0.8rem;
  }

  .enhance-row__desc[b-t56smwc8j2] {
    font-size: 0.65rem;
  }

  .enhance-row__stat[b-t56smwc8j2] {
    font-size: 0.7rem;
  }

  .enhance-row__action[b-t56smwc8j2] {
    min-width: 68px;
    gap: 0.15rem;
  }

  .enhance-row__btn[b-t56smwc8j2] {
    padding: 0.25rem 0.4rem;
    font-size: 0.65rem;
    letter-spacing: 0.3px;
  }

  .enhance-row__cost[b-t56smwc8j2] {
    font-size: 0.6rem;
    white-space: nowrap;
  }
}

.mytuno-balance-badge[b-t56smwc8j2] {
  font-size: 0.8rem;
  padding: 0.3rem 0.5rem;
  border-radius: 999px;
}

/* Stage Modal Styles */
.stage-progress-info[b-t56smwc8j2] {
  background: linear-gradient(135deg, rgba(13, 110, 253, 0.08), rgba(13, 110, 253, 0.04));
  border: 1px solid rgba(13, 110, 253, 0.2);
  border-radius: 12px;
  padding: 1.5rem;
}

.stage-progress-info .text-muted[b-t56smwc8j2] {
  font-size: 0.9rem;
  display: block;
  margin-bottom: 0.25rem;
}

/* ==========================================
   Stage Biome List
   ========================================== */
.stage-biomes-list[b-t56smwc8j2] {
    max-height: 460px;
    overflow-y: auto;
    padding: 4px;
}

.biome-card[b-t56smwc8j2] {
    background: #252535;
    border-radius: 10px;
    border-left: 4px solid var(--bc);
    margin-bottom: 12px;
}

.biome-card:last-child[b-t56smwc8j2] {
    margin-bottom: 0;
}

.biome-card.biome-current[b-t56smwc8j2] {
    background: #2a2a42;
    outline: 1px solid var(--bc);
    outline-offset: -1px;
}

.biome-card.biome-done[b-t56smwc8j2] {
    background: #222232;
}

.biome-card.biome-locked[b-t56smwc8j2] {
    opacity: 0.35;
    background: #1c1c28;
}

.biome-row[b-t56smwc8j2] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 16px;
}

.biome-clickable[b-t56smwc8j2] {
    cursor: pointer;
}

.biome-clickable:hover[b-t56smwc8j2] {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 0 8px 8px 0;
}

.biome-grid[b-t56smwc8j2] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 6px 16px 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.biome-cp[b-t56smwc8j2] {
    min-width: 52px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.78rem;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    transition: all 0.15s ease;
    padding: 0 6px;
}

.biome-cp:hover[b-t56smwc8j2] {
    background: var(--bc);
    color: #fff;
    border-color: var(--bc);
    transform: translateY(-1px);
}

.biome-cp-active[b-t56smwc8j2] {
    background: var(--bc);
    color: #fff;
    border-color: var(--bc);
    box-shadow: 0 0 8px color-mix(in srgb, var(--bc) 40%, transparent);
}

/* Leaderboard tabs - purple active state */
.nav-pills .nav-link.active[b-t56smwc8j2] {
  background-color: #6f42c1 !important;
}

/* Inventory tabs - remove yellow, use purple theme */
.nav-tabs .nav-link:hover[b-t56smwc8j2],
.nav-tabs .nav-link:focus[b-t56smwc8j2] {
  border-color: #6f42c1 #6f42c1 var(--bs-border-color);
  background-color: rgba(111, 66, 193, 0.1);
}

.nav-tabs .nav-link.active[b-t56smwc8j2] {
  color: #6f42c1;
  background-color: var(--bs-body-bg);
  border-color: #6f42c1 #6f42c1 var(--bs-body-bg);
}

/* ==========================================
   Energy Bar (Destilaria)
   ========================================== */
.energy-bar[b-t56smwc8j2] {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.energy-bar__header[b-t56smwc8j2] {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.energy-bar__label[b-t56smwc8j2] {
  font-size: 0.8rem;
  font-weight: 700;
  color: #f1c40f;
}

.energy-bar__value[b-t56smwc8j2] {
  font-size: 0.8rem;
  font-weight: 700;
  color: #f1c40f;
}

.energy-bar__track[b-t56smwc8j2] {
  height: 10px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 5px;
  overflow: hidden;
  border: 1px solid rgba(241, 196, 15, 0.2);
}

.energy-bar__fill[b-t56smwc8j2] {
  height: 100%;
  background: linear-gradient(90deg, #f39c12, #f1c40f);
  border-radius: 5px;
  transition: width 0.4s ease;
  box-shadow: 0 0 8px rgba(241, 196, 15, 0.4);
}

.energy-bar__regen[b-t56smwc8j2] {
  font-size: 0.65rem;
  color: rgba(241, 196, 15, 0.6);
  text-align: right;
}

/* ==========================================
   Cast Bar (gathering progress)
   ========================================== */
.cast-bar[b-t56smwc8j2] {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.cast-bar__header[b-t56smwc8j2] {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.cast-bar__label[b-t56smwc8j2] {
  font-size: 0.75rem;
  font-weight: 700;
  color: #a88ee5;
}

.cast-bar__time[b-t56smwc8j2] {
  font-size: 0.75rem;
  font-weight: 700;
  color: #a88ee5;
}

.cast-bar__track[b-t56smwc8j2] {
  height: 14px;
  background: rgba(111, 66, 193, 0.1);
  border-radius: 7px;
  overflow: hidden;
  border: 1px solid rgba(111, 66, 193, 0.3);
}

.cast-bar__fill[b-t56smwc8j2] {
  height: 100%;
  background: linear-gradient(90deg, #7c4ddb, #a88ee5);
  border-radius: 7px;
  box-shadow: 0 0 10px rgba(111, 66, 193, 0.5);
}

/* ==========================================
   Double Gathering Flash Effect
   ========================================== */
.double-gather-flash[b-t56smwc8j2] {
  text-align: center;
  padding: 0.75rem;
  margin-bottom: 0.75rem;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(255, 107, 53, 0.15), rgba(255, 149, 0, 0.15));
  border: 2px solid rgba(255, 149, 0, 0.5);
  animation: doubleGatherPulse-b-t56smwc8j2 0.6s ease-out, doubleGatherFadeIn-b-t56smwc8j2 0.3s ease-out;
  box-shadow: 0 0 20px rgba(255, 107, 53, 0.4), inset 0 0 20px rgba(255, 149, 0, 0.1);
}

.double-gather-flash__icon[b-t56smwc8j2] {
  font-size: 2rem;
  animation: doubleGatherBounce-b-t56smwc8j2 0.6s ease-out;
}

.double-gather-flash__text[b-t56smwc8j2] {
  font-size: 1.1rem;
  font-weight: 700;
  color: #ff9500;
  text-shadow: 0 0 10px rgba(255, 149, 0, 0.5);
  letter-spacing: 2px;
  animation: doubleGatherScale-b-t56smwc8j2 0.5s ease-out;
}

@keyframes doubleGatherPulse-b-t56smwc8j2 {
  0% { box-shadow: 0 0 5px rgba(255, 107, 53, 0.2); }
  50% { box-shadow: 0 0 30px rgba(255, 107, 53, 0.6), inset 0 0 30px rgba(255, 149, 0, 0.2); }
  100% { box-shadow: 0 0 20px rgba(255, 107, 53, 0.4), inset 0 0 20px rgba(255, 149, 0, 0.1); }
}

@keyframes doubleGatherFadeIn-b-t56smwc8j2 {
  0% { opacity: 0; transform: scale(0.8); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes doubleGatherBounce-b-t56smwc8j2 {
  0% { transform: scale(0.5) rotate(-10deg); }
  50% { transform: scale(1.3) rotate(5deg); }
  100% { transform: scale(1) rotate(0deg); }
}

@keyframes doubleGatherScale-b-t56smwc8j2 {
  0% { transform: scale(0.5); opacity: 0; }
  60% { transform: scale(1.15); }
  100% { transform: scale(1); opacity: 1; }
}

/* ==========================================
   Gather Grid (Destilaria resource nodes)
   ========================================== */
.gather-grid[b-t56smwc8j2] {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.6rem;
  flex: 1;
  align-content: start;
}

.gather-node[b-t56smwc8j2] {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #1a1a2e 0%, #0f0f1c 100%);
  border: 2px solid rgba(111, 66, 193, 0.25);
  border-radius: 12px;
  padding: 0.75rem 0.5rem;
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
  min-height: 100px;
}

.gather-node:hover:not(.gather-node--disabled)[b-t56smwc8j2] {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(111, 66, 193, 0.25);
}

.gather-node:active:not(.gather-node--disabled)[b-t56smwc8j2] {
  transform: translateY(1px);
}

.gather-node--disabled[b-t56smwc8j2] {
  opacity: 0.4;
  cursor: not-allowed;
}

.gather-node--locked[b-t56smwc8j2] {
  opacity: 0.35;
  cursor: not-allowed;
  filter: grayscale(0.7);
}

.gather-node--locked .gather-node__name[b-t56smwc8j2] {
  color: #888;
}

.gather-node--active[b-t56smwc8j2] {
  border-color: rgba(241, 196, 15, 0.6) !important;
  box-shadow: 0 0 16px rgba(241, 196, 15, 0.2) !important;
}

/* Cerveja - golden yellow beer */
.gather-node--cerveja[b-t56smwc8j2] {
  border-color: rgba(241, 196, 15, 0.4);
  background: linear-gradient(180deg, #1f1c0f 0%, #15120a 100%);
}
.gather-node--cerveja:hover:not(.gather-node--disabled):not(.gather-node--locked)[b-t56smwc8j2] {
  border-color: rgba(241, 196, 15, 0.7);
  box-shadow: 0 4px 16px rgba(241, 196, 15, 0.2);
}
.gather-node--cerveja .gather-node__icon[b-t56smwc8j2] { color: #f1c40f; }

/* Vinho - deep red wine */
.gather-node--vinho[b-t56smwc8j2] {
  border-color: rgba(192, 57, 43, 0.4);
  background: linear-gradient(180deg, #1f0f0f 0%, #150a0a 100%);
}
.gather-node--vinho:hover:not(.gather-node--disabled):not(.gather-node--locked)[b-t56smwc8j2] {
  border-color: rgba(192, 57, 43, 0.7);
  box-shadow: 0 4px 16px rgba(192, 57, 43, 0.2);
}
.gather-node--vinho .gather-node__icon[b-t56smwc8j2] { color: #c0392b; }

/* Licor - purple/pink liqueur */
.gather-node--licor[b-t56smwc8j2] {
  border-color: rgba(155, 89, 182, 0.4);
  background: linear-gradient(180deg, #1a0f1f 0%, #120a15 100%);
}
.gather-node--licor:hover:not(.gather-node--disabled):not(.gather-node--locked)[b-t56smwc8j2] {
  border-color: rgba(155, 89, 182, 0.7);
  box-shadow: 0 4px 16px rgba(155, 89, 182, 0.2);
}
.gather-node--licor .gather-node__icon[b-t56smwc8j2] { color: #9b59b6; }

/* Rum - dark amber */
.gather-node--rum[b-t56smwc8j2] {
  border-color: rgba(180, 100, 50, 0.4);
  background: linear-gradient(180deg, #1f150f 0%, #150f0a 100%);
}
.gather-node--rum:hover:not(.gather-node--disabled):not(.gather-node--locked)[b-t56smwc8j2] {
  border-color: rgba(180, 100, 50, 0.7);
  box-shadow: 0 4px 16px rgba(180, 100, 50, 0.2);
}
.gather-node--rum .gather-node__icon[b-t56smwc8j2] { color: #b46432; }

/* Tequilla - lime green */
.gather-node--tequilla[b-t56smwc8j2] {
  border-color: rgba(39, 174, 96, 0.4);
  background: linear-gradient(180deg, #0f1f14 0%, #0a150e 100%);
}
.gather-node--tequilla:hover:not(.gather-node--disabled):not(.gather-node--locked)[b-t56smwc8j2] {
  border-color: rgba(39, 174, 96, 0.7);
  box-shadow: 0 4px 16px rgba(39, 174, 96, 0.2);
}
.gather-node--tequilla .gather-node__icon[b-t56smwc8j2] { color: #27ae60; }

/* Vodka - clear/white */
.gather-node--vodka[b-t56smwc8j2] {
  border-color: rgba(200, 200, 220, 0.4);
  background: linear-gradient(180deg, #1a1a28 0%, #12121e 100%);
}
.gather-node--vodka:hover:not(.gather-node--disabled):not(.gather-node--locked)[b-t56smwc8j2] {
  border-color: rgba(200, 200, 220, 0.7);
  box-shadow: 0 4px 16px rgba(200, 200, 220, 0.2);
}
.gather-node--vodka .gather-node__icon[b-t56smwc8j2] { color: #c8c8dc; }

/* Gin - light blue/teal */
.gather-node--gin[b-t56smwc8j2] {
  border-color: rgba(52, 152, 219, 0.4);
  background: linear-gradient(180deg, #0f1a1f 0%, #0a1215 100%);
}
.gather-node--gin:hover:not(.gather-node--disabled):not(.gather-node--locked)[b-t56smwc8j2] {
  border-color: rgba(52, 152, 219, 0.7);
  box-shadow: 0 4px 16px rgba(52, 152, 219, 0.2);
}
.gather-node--gin .gather-node__icon[b-t56smwc8j2] { color: #3498db; }

/* Whisky - amber/gold */
.gather-node--whisky[b-t56smwc8j2] {
  border-color: rgba(230, 126, 34, 0.4);
  background: linear-gradient(180deg, #221a0f 0%, #18120a 100%);
}
.gather-node--whisky:hover:not(.gather-node--disabled):not(.gather-node--locked)[b-t56smwc8j2] {
  border-color: rgba(230, 126, 34, 0.7);
  box-shadow: 0 4px 16px rgba(230, 126, 34, 0.2);
}
.gather-node--whisky .gather-node__icon[b-t56smwc8j2] { color: #e67e22; }

/* Absinto - toxic green glow */
.gather-node--absinto[b-t56smwc8j2] {
  border-color: rgba(0, 255, 100, 0.4);
  background: linear-gradient(180deg, #0f1f14 0%, #0a150e 100%);
}
.gather-node--absinto:hover:not(.gather-node--disabled):not(.gather-node--locked)[b-t56smwc8j2] {
  border-color: rgba(0, 255, 100, 0.6);
  box-shadow: 0 4px 16px rgba(0, 255, 100, 0.2);
}
.gather-node--absinto .gather-node__icon[b-t56smwc8j2] { color: #00ff64; }

/* Aguardente - electric purple/lightning */
.gather-node--aguardente[b-t56smwc8j2] {
  border-color: rgba(142, 68, 173, 0.4);
  background: linear-gradient(180deg, #1a0f1f 0%, #120a15 100%);
}
.gather-node--aguardente:hover:not(.gather-node--disabled):not(.gather-node--locked)[b-t56smwc8j2] {
  border-color: rgba(142, 68, 173, 0.8);
  box-shadow: 0 4px 16px rgba(142, 68, 173, 0.3), 0 0 8px rgba(155, 89, 182, 0.3);
}
.gather-node--aguardente .gather-node__icon[b-t56smwc8j2] { color: #8e44ad; }

/* Cost badge (top-right) */
.gather-node__cost[b-t56smwc8j2] {
  position: absolute;
  top: 4px;
  right: 6px;
  font-size: 0.7rem;
  font-weight: 700;
  color: #f1c40f;
  display: flex;
  align-items: center;
  gap: 2px;
}

.gather-node__cost i[b-t56smwc8j2] {
  font-size: 0.65rem;
}

/* Quantity badge (top-left) */
.gather-node__qty[b-t56smwc8j2] {
  position: absolute;
  top: 4px;
  left: 6px;
  font-size: 0.75rem;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

/* Icon */
.gather-node__icon[b-t56smwc8j2] {
  font-size: 2rem;
  line-height: 1;
  margin-bottom: 4px;
}

/* Sprite images for drinks */
.gather-sprite[b-t56smwc8j2] {
  width: 2.5rem;
  height: 2.5rem;
  object-fit: contain;
}

/* Uploaded images in item cards fill the icon area */
.item-card__icon .gather-sprite[b-t56smwc8j2] {
  width: 2.2rem;
  height: 2.2rem;
}

/* Uploaded images in equip slots */
.equip-slot .gather-sprite[b-t56smwc8j2] {
  width: 2rem;
  height: 2rem;
  filter: drop-shadow(0 0 3px rgba(111, 66, 193, 0.5));
}

/* Name */
.gather-node__name[b-t56smwc8j2] {
  font-size: 0.8rem;
  font-weight: 700;
  color: #e2e2e2;
  text-align: center;
}

/* ==========================================
   Forging Section
   ========================================== */
.forge-slots[b-t56smwc8j2] {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
}

.forge-slot[b-t56smwc8j2] {
  width: 80px;
  height: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #1a1a2e 0%, #0f0f1c 100%);
  border: 2px dashed rgba(255, 193, 7, 0.25);
  border-radius: 10px;
  color: rgba(255, 255, 255, 0.2);
  font-size: 1.5rem;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
}

.forge-slot:hover[b-t56smwc8j2] {
  border-color: rgba(255, 193, 7, 0.5);
  color: rgba(255, 255, 255, 0.4);
  transform: translateY(-2px);
}

.forge-slot--filled[b-t56smwc8j2] {
  border-style: solid;
  border-color: rgba(255, 193, 7, 0.6);
  color: rgba(255, 255, 255, 0.85);
  background: linear-gradient(180deg, #2a2210 0%, #1a1608 100%);
}

.forge-slot__label[b-t56smwc8j2] {
  font-size: 0.55rem;
  font-weight: 600;
  margin-top: 2px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: rgba(255, 255, 255, 0.7);
}

.forge-plus[b-t56smwc8j2] {
  font-size: 1.5rem;
  color: rgba(255, 193, 7, 0.5);
  font-weight: 700;
}

/* Forge pickers (dropdown lists) */
.forge-picker[b-t56smwc8j2] {
  background: rgba(15, 15, 28, 0.95);
  border: 1px solid rgba(255, 193, 7, 0.3);
  border-radius: 8px;
  padding: 0.5rem;
  max-height: 200px;
  overflow-y: auto;
}

.forge-picker__item[b-t56smwc8j2] {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.4rem 0.6rem;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  color: #e2e2e2;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
  font-size: 0.8rem;
}

.forge-picker__item:hover[b-t56smwc8j2] {
  background: rgba(255, 193, 7, 0.1);
  border-color: rgba(255, 193, 7, 0.3);
}

.forge-picker__item--selected[b-t56smwc8j2] {
  background: rgba(255, 193, 7, 0.15);
  border-color: rgba(255, 193, 7, 0.5);
}

/* Forged weapons list */
.forge-weapons-list[b-t56smwc8j2] {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 0.5rem;
}

.forge-weapon-card[b-t56smwc8j2] {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.6rem;
  background: linear-gradient(180deg, #1a1a2e 0%, #0f0f1c 100%);
  border: 1px solid rgba(255, 193, 7, 0.2);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.2s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.forge-weapon-card:hover[b-t56smwc8j2] {
  border-color: rgba(255, 193, 7, 0.5);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(255, 193, 7, 0.15);
}

.forge-weapon-card--equipped[b-t56smwc8j2] {
  border-color: rgba(40, 167, 69, 0.5);
  background: linear-gradient(180deg, #0f1e14 0%, #0a1510 100%);
}

.forge-weapon-card--equipped:hover[b-t56smwc8j2] {
  border-color: rgba(40, 167, 69, 0.7);
  box-shadow: 0 2px 8px rgba(40, 167, 69, 0.2);
}

.forge-result-icon[b-t56smwc8j2] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: rgba(255, 193, 7, 0.1);
  border: 2px solid rgba(255, 193, 7, 0.3);
}

/* Mobile responsive styles */
@media (max-width: 768px) {
  .my-tuno-home-page[b-t56smwc8j2] {
    overflow-x: hidden;
  }

  .my-tuno-home-page .card[b-t56smwc8j2] {
    overflow: hidden;
  }

  .my-tuno-home-page .card-body[b-t56smwc8j2] {
    overflow: hidden;
    min-width: 0;
  }

  .fidelis-bar__inner[b-t56smwc8j2] {
    gap: 0.4rem;
    padding: 0.5rem 0.75rem;
    border-radius: 16px;
    justify-content: center;
  }

  .fidelis-bar__icon[b-t56smwc8j2] {
    width: 28px;
    height: 28px;
    font-size: 0.85rem;
  }

  .fidelis-bar__value[b-t56smwc8j2] {
    font-size: 0.9rem;
  }

  .fidelis-bar__label[b-t56smwc8j2] {
    font-size: 0.55rem;
  }

  .item-grid[b-t56smwc8j2] {
    grid-template-columns: repeat(4, 1fr);
    gap: 0.4rem;
  }

  .item-card__icon[b-t56smwc8j2] {
    font-size: 1.5rem;
  }

  .equip-slot[b-t56smwc8j2] {
    width: 52px;
    height: 52px;
    font-size: 1rem;
  }

  .equip-slot--weapon[b-t56smwc8j2] {
    height: 48px;
    max-width: 90px;
  }

  .equip-layout[b-t56smwc8j2] {
    gap: 0.4rem;
    padding: 0.4rem 0;
  }

  .equip-weapons[b-t56smwc8j2] {
    gap: 0.5rem;
    padding: 0 0.5rem;
  }

  .equip-layout__sprite[b-t56smwc8j2] {
    max-height: 120px;
  }

  .gather-grid[b-t56smwc8j2] {
    gap: 0.4rem;
  }

  .gather-node[b-t56smwc8j2] {
    padding: 0.5rem 0.35rem;
    min-height: 80px;
  }

  .gather-node__icon[b-t56smwc8j2] {
    font-size: 1.5rem;
  }

  .forge-slot[b-t56smwc8j2] {
    width: 60px;
    height: 60px;
    font-size: 1.2rem;
  }

  .forge-weapons-list[b-t56smwc8j2] {
    grid-template-columns: 1fr;
  }
}

/* ==========================================
   Embedded Upgrades – strip nested card wrapper
   ========================================== */
[b-t56smwc8j2] .upgrades-embedded > .card {
    border: none;
    box-shadow: none;
    background: transparent;
}

[b-t56smwc8j2] .upgrades-embedded > .card > .card-header {
    display: none;
}

[b-t56smwc8j2] .upgrades-embedded > .card > .card-body {
    padding: 0;
}

/* ==========================================
   FantasyTile Grids (layout helpers)
   ========================================== */
.ftile-grid[b-t56smwc8j2] {
    display: grid;
    gap: 0.5rem;
    min-width: 0;
    overflow: visible;
    width: 100%;
    box-sizing: border-box;
}

.ftile-grid--2col[b-t56smwc8j2] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ftile-grid--3col[b-t56smwc8j2] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Bonus stats: auto-fill columns that fit ~70px min */
.ftile-grid--bonus[b-t56smwc8j2] {
    grid-template-columns: repeat(auto-fill, minmax(68px, 1fr));
    gap: 0.4rem;
}

/* Stock indicator inside FantasyTile (current balance / quantity) */
.ftile-stock[b-t56smwc8j2] {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 8px;
    margin-top: 2px;
}

.ftile-stock--ok[b-t56smwc8j2] {
    color: #28a745;
    background: rgba(40, 167, 69, 0.12);
}

.ftile-stock--low[b-t56smwc8j2] {
    color: #dc3545;
    background: rgba(220, 53, 69, 0.12);
}

@media (max-width: 768px) {
    .ftile-grid--3col[b-t56smwc8j2] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .ftile-grid--2col[b-t56smwc8j2] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ═══════════════════════════════════════════
   Boss Mode Modal — Fantasy Theme
   ═══════════════════════════════════════════ */

.bm-modal[b-t56smwc8j2] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.bm-modal__hero[b-t56smwc8j2] {
    text-align: center;
    padding-bottom: 0.5rem;
}

.bm-modal__hero-icon[b-t56smwc8j2] {
    font-size: 2.4rem;
    color: #ffc107;
    filter: drop-shadow(0 0 10px rgba(255, 193, 7, 0.5));
    display: block;
    margin-bottom: 0.3rem;
}

.bm-modal__title[b-t56smwc8j2] {
    font-size: 1.3rem;
    font-weight: 800;
    letter-spacing: 1.5px;
    color: #fff;
    margin: 0;
}

.bm-modal__subtitle[b-t56smwc8j2] {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.85rem;
    margin: 0.25rem 0 0;
}

.bm-modal__record[b-t56smwc8j2] {
    text-align: center;
    padding: 0.5rem 0;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.95rem;
}

.bm-modal__record-val[b-t56smwc8j2] {
    color: #ffc107;
    font-weight: 700;
}

.bm-modal__record-runs[b-t56smwc8j2] {
    display: block;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.4);
    margin-top: 2px;
}

/* Info cards — gradient glass style */
.bm-modal__info-card[b-t56smwc8j2] {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    padding: 0.75rem 1rem;
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.92);
    line-height: 1.4;
    border: 1px solid transparent;
}

.bm-modal__info-card i[b-t56smwc8j2] {
    font-size: 1.1rem;
    flex-shrink: 0;
    margin-top: 1px;
}

.bm-modal__info-card--fitab[b-t56smwc8j2] {
    background: linear-gradient(135deg, rgba(123, 31, 162, 0.45) 0%, rgba(103, 58, 183, 0.3) 100%);
    border-color: rgba(156, 39, 176, 0.4);
}

.bm-modal__info-card--fitab i[b-t56smwc8j2] {
    color: #ce93d8;
}

.bm-modal__info-card--level[b-t56smwc8j2] {
    background: linear-gradient(135deg, rgba(156, 39, 176, 0.4) 0%, rgba(123, 31, 162, 0.25) 100%);
    border-color: rgba(186, 104, 200, 0.35);
}

.bm-modal__info-card--level i[b-t56smwc8j2] {
    color: #ba68c8;
}

.bm-modal__info-card--daily[b-t56smwc8j2] {
    background: linear-gradient(135deg, rgba(106, 27, 154, 0.4) 0%, rgba(74, 20, 140, 0.25) 100%);
    border-color: rgba(142, 36, 170, 0.35);
}

.bm-modal__info-card--daily i[b-t56smwc8j2] {
    color: #ab47bc;
}

.bm-modal__warning[b-t56smwc8j2] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem 1rem;
    border-radius: 10px;
    background: rgba(255, 152, 0, 0.12);
    border: 1px solid rgba(255, 152, 0, 0.35);
    color: #ffb74d;
    font-size: 0.82rem;
    font-weight: 600;
}

.bm-modal__warning i[b-t56smwc8j2] {
    color: #ff9800;
    flex-shrink: 0;
}

/* Buttons */
.bm-modal__btn[b-t56smwc8j2] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    padding: 0.55rem 1.25rem;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    border: none;
    cursor: pointer;
    transition: all 0.15s ease;
}

.bm-modal__btn--close[b-t56smwc8j2] {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.7);
}

.bm-modal__btn--close:hover[b-t56smwc8j2] {
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
}

.bm-modal__btn--enter[b-t56smwc8j2] {
    background: linear-gradient(135deg, #ffc107, #ff8f00);
    color: #1a0a2e;
    box-shadow: 0 3px 12px rgba(255, 193, 7, 0.35);
}

.bm-modal__btn--enter:hover:not(:disabled)[b-t56smwc8j2] {
    background: linear-gradient(135deg, #ffd54f, #ffc107);
    transform: translateY(-1px);
    box-shadow: 0 5px 18px rgba(255, 193, 7, 0.5);
}

.bm-modal__btn--enter:disabled[b-t56smwc8j2] {
    opacity: 0.45;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* ========================================
   MY TUNO PAGE STYLES (migrated from global)
   ======================================== */

/* Character Sprite Styling */
.character-sprite[b-t56smwc8j2] {
    display: block;
    margin: 0 auto;
    image-rendering: auto; /* Use browser's default smooth scaling */
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
    transition: transform 0.2s ease-in-out;
}

.character-sprite:hover[b-t56smwc8j2] {
    transform: scale(1.05);
}

/* Character Summary Card Enhancements */
[b-t56smwc8j2] .my-tuno-home-page .card-body {
    position: relative;
}

/* Remove gradients from upgrade buttons */
[b-t56smwc8j2] .my-tuno-home-page .btn-warning {
    background-image: none !important;
    background-color: #ffc107 !important;
}

[b-t56smwc8j2] .my-tuno-home-page .btn-warning:hover:not(:disabled) {
    background-color: #e0a800 !important;
    background-image: none !important;
}

[b-t56smwc8j2] .my-tuno-home-page .btn-warning:active:not(:disabled) {
    background-color: #d39e00 !important;
    background-image: none !important;
}

[b-t56smwc8j2] .my-tuno-home-page .btn-danger {
    background-image: none !important;
    background-color: #dc3545 !important;
}

[b-t56smwc8j2] .my-tuno-home-page .btn-danger:hover:not(:disabled) {
    background-color: #c82333 !important;
    background-image: none !important;
}

[b-t56smwc8j2] .my-tuno-home-page .btn-danger:active:not(:disabled) {
    background-color: #bd2130 !important;
    background-image: none !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .character-sprite[b-t56smwc8j2] {
        max-height: 150px !important;
    }
}

/* ========================================
   MY TUNO - MOBILE ADJUSTMENTS
   ======================================== */
@media (max-width: 767px) {
    [b-t56smwc8j2] .my-tuno-home-page .card {
        border-radius: 0.75rem;
    }

    /* Row gutters tighter for mobile */
    [b-t56smwc8j2] .my-tuno-home-page .row.g-4 {
        --bs-gutter-x: 0.5rem;
        --bs-gutter-y: 0.75rem;
    }

    /* Fidelis bar wraps and fits within padding */
    [b-t56smwc8j2] .my-tuno-home-page .fidelis-bar__inner {
        flex-wrap: wrap;
        justify-content: center;
    }

    /* Daily reward badge onto its own row */
    [b-t56smwc8j2] .my-tuno-home-page .fidelis-bar__inner > .ms-auto {
        flex-basis: 100%;
        text-align: center;
        margin-left: 0 !important;
        margin-top: 0.35rem;
    }
}
/* /Pages/MyTuno/Stage.razor.rz.scp.css */
/* ===================================================================
   Stage Mode - WOO-inspired Fullscreen Battle Layout
   Mobile-first -> Desktop adaptation
   =================================================================== */

/* -- Page wrapper -- */
.stage-page[b-yl8511mbyn] {
    position: fixed;
    inset: 0;
    background: #000;
    z-index: 100;
    overflow: hidden;
}

.stage-loading[b-yl8511mbyn] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
}

/* === Battle Screen === */
.battle-screen[b-yl8511mbyn] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    background: #000;
    overflow: hidden;
}

/* Canvas fills the entire screen, sits behind overlays */
.battle-canvas[b-yl8511mbyn] {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    background: #1a1a1a;
}

.battle-canvas canvas[b-yl8511mbyn] {
    display: block;
    width: 100% !important;
    height: 100% !important;
}

/* -- TOP BAR: overlaid on canvas -- */
.battle-top-bar[b-yl8511mbyn] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    padding-top: calc(6px + env(safe-area-inset-top, 0px));
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.5) 60%, transparent 100%);
    min-height: 44px;
    flex-wrap: nowrap;
}

/* Back button */
.battle-back-btn[b-yl8511mbyn] {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    color: #fff;
    font-size: 1rem;
    cursor: pointer;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.12);
    transition: background 0.15s;
    flex-shrink: 0;
}

.battle-back-btn:hover[b-yl8511mbyn] {
    background: rgba(255, 255, 255, 0.1);
}

/* Floor indicator (absolutely centered) */
.battle-floor-indicator[b-yl8511mbyn] {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 36px;
    pointer-events: none;
    z-index: 1;
}

.floor-num[b-yl8511mbyn] {
    font-family: 'Cinzel', 'Times New Roman', serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: #fff;
    line-height: 1;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9);
}

.floor-label[b-yl8511mbyn] {
    font-size: 0.5rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 1px;
}

/* -- Rewards strip (inline badges in top bar) -- */
.battle-rewards-strip[b-yl8511mbyn] {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
    flex: 1;
    min-width: 0;
}

.reward-tag[b-yl8511mbyn] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 6px;
    border-radius: 999px;
    font-size: 0.65rem;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    backdrop-filter: blur(4px);
}

.reward-tag i[b-yl8511mbyn] {
    font-size: 0.6rem;
}

.reward-tag--xp[b-yl8511mbyn] {
    background: rgba(255, 193, 7, 0.35);
    border: 1px solid rgba(255, 193, 7, 0.5);
}

.reward-tag--fidelis[b-yl8511mbyn] {
    background: rgba(124, 77, 255, 0.35);
    border: 1px solid rgba(124, 77, 255, 0.5);
}

.reward-tag--drink[b-yl8511mbyn] {
    background: rgba(245, 166, 35, 0.35);
    border: 1px solid rgba(245, 166, 35, 0.5);
}

.reward-tag--instrument[b-yl8511mbyn] {
    background: rgba(168, 85, 247, 0.35);
    border: 1px solid rgba(168, 85, 247, 0.5);
}

.reward-tag--equip[b-yl8511mbyn] {
    background: rgba(245, 158, 11, 0.35);
    border: 1px solid rgba(245, 158, 11, 0.5);
}

/* -- Battle speed/audio/stop controls (right side) -- */
.battle-controls[b-yl8511mbyn] {
    display: flex;
    align-items: center;
    gap: 3px;
    flex-shrink: 0;
    margin-left: auto;
}

.battle-ctrl-btn[b-yl8511mbyn] {
    min-width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    font-size: 0.65rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.7);
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    cursor: pointer;
    transition: all 0.15s;
    padding: 0 4px;
}

.battle-ctrl-btn:hover[b-yl8511mbyn] {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.battle-ctrl-btn.active[b-yl8511mbyn] {
    background: rgba(124, 77, 255, 0.6);
    border-color: rgba(124, 77, 255, 0.8);
    color: #fff;
}

.battle-ctrl-btn--audio[b-yl8511mbyn] {
    color: rgba(255, 193, 7, 0.8);
}

.battle-ctrl-btn--stop[b-yl8511mbyn] {
    color: rgba(255, 68, 68, 0.8);
    border-color: rgba(255, 68, 68, 0.3);
}

.battle-ctrl-btn--stop:hover[b-yl8511mbyn] {
    background: rgba(255, 68, 68, 0.2);
    color: #ff4444;
}

/* -- Active Buff Indicators (below canhão timer bar) -- */
.battle-buffs-strip[b-yl8511mbyn] {
    position: absolute;
    top: 152px;
    top: calc(152px + env(safe-area-inset-top, 0px));
    left: 10px;
    z-index: 10;
    display: flex;
    gap: 4px;
}

.buff-tag[b-yl8511mbyn] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 6px;
    border-radius: 999px;
    font-size: 0.6rem;
    font-weight: 700;
    color: #fff;
    backdrop-filter: blur(4px);
}

.buff-tag--shot[b-yl8511mbyn] {
    background: rgba(123, 31, 162, 0.5);
    border: 1px solid rgba(123, 31, 162, 0.7);
}

.buff-tag--dodge[b-yl8511mbyn] {
    background: rgba(0, 188, 212, 0.4);
    border: 1px solid rgba(0, 188, 212, 0.6);
}

.buff-tag--aoe[b-yl8511mbyn] {
    background: rgba(239, 83, 80, 0.4);
    border: 1px solid rgba(239, 83, 80, 0.6);
}

.buff-tag--penalty[b-yl8511mbyn] {
    background: rgba(13, 202, 240, 0.4);
    border: 1px solid rgba(13, 202, 240, 0.6);
}

/* === Defeat Overlay (fullscreen, WOO-inspired) === */
.defeat-overlay[b-yl8511mbyn] {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.88);
    z-index: 200;
    animation: overlayFadeIn-b-yl8511mbyn 0.4s ease;
}

@keyframes overlayFadeIn-b-yl8511mbyn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.defeat-panel[b-yl8511mbyn] {
    position: relative;
    width: 92%;
    max-width: 380px;
    background: linear-gradient(180deg, #1a1028 0%, #0d0a14 100%);
    border: 2px solid rgba(124, 77, 255, 0.4);
    border-radius: 20px;
    padding: 3rem 1.5rem 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    box-shadow:
        0 0 40px rgba(124, 77, 255, 0.15),
        0 20px 60px rgba(0, 0, 0, 0.6);
    animation: defeat-slide-in-b-yl8511mbyn 0.4s ease-out;
}

@keyframes defeat-slide-in-b-yl8511mbyn {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.defeat-banner[b-yl8511mbyn] {
    position: absolute;
    top: -16px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #7c4dff, #651fff);
    padding: 0.4rem 2rem;
    border-radius: 999px;
    box-shadow:
        0 4px 20px rgba(124, 77, 255, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    white-space: nowrap;
}

.defeat-banner span[b-yl8511mbyn] {
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: 3px;
    color: #fff;
    text-transform: uppercase;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.defeat-stage[b-yl8511mbyn] {
    font-size: 1.4rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.95);
    letter-spacing: 0.5px;
}

.defeat-rewards[b-yl8511mbyn] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
    padding: 0.85rem 1rem;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    max-height: 45vh;
    overflow-y: auto;
}

.defeat-reward-row[b-yl8511mbyn] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
}

.defeat-reward-row i[b-yl8511mbyn] {
    font-size: 1rem;
    width: 18px;
    text-align: center;
}

.defeat-no-rewards[b-yl8511mbyn] {
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.9rem;
    margin: 0;
}

.defeat-btn[b-yl8511mbyn] {
    width: 100%;
    padding: 0.75rem;
    border: none;
    border-radius: 12px;
    background: linear-gradient(135deg, #7c4dff, #651fff);
    color: #fff;
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 16px rgba(124, 77, 255, 0.35);
}

.defeat-btn:hover[b-yl8511mbyn] {
    background: linear-gradient(135deg, #9165ff, #7c4dff);
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(124, 77, 255, 0.5);
}

.defeat-btn:active[b-yl8511mbyn] {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(124, 77, 255, 0.3);
}

/* Anti-AFK challenge */
.afk-challenge[b-yl8511mbyn] {
    width: 100%;
    text-align: center;
}

.afk-challenge-text[b-yl8511mbyn] {
    font-size: 1.1rem;
    font-weight: 700;
    color: #ffd740;
    margin-bottom: 0.5rem;
    text-shadow: 0 0 6px rgba(255, 215, 64, 0.4);
}

.afk-challenge-input[b-yl8511mbyn] {
    width: 80px;
    padding: 0.5rem 0.75rem;
    border: 2px solid #7c4dff;
    border-radius: 10px;
    background: rgba(30, 30, 50, 0.9);
    color: #fff;
    font-size: 1.1rem;
    font-weight: 700;
    text-align: center;
    outline: none;
    transition: border-color 0.2s;
    -moz-appearance: textfield;
}

.afk-challenge-input[b-yl8511mbyn]::-webkit-outer-spin-button,
.afk-challenge-input[b-yl8511mbyn]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.afk-challenge-input:focus[b-yl8511mbyn] {
    border-color: #ffd740;
    box-shadow: 0 0 8px rgba(255, 215, 64, 0.3);
}

.afk-challenge-wrong[b-yl8511mbyn] {
    color: #ff5252;
    font-size: 0.85rem;
    font-weight: 600;
    margin-top: 0.4rem;
    margin-bottom: 0;
}

/* Instrument / Equipment drop styles in defeat panel */
.instrument-drop-icon[b-yl8511mbyn],
.equipment-drop-icon[b-yl8511mbyn] {
    width: 18px;
    height: 18px;
    object-fit: contain;
    border-radius: 3px;
}

.instrument-part-reward[b-yl8511mbyn] {
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.15), rgba(168, 85, 247, 0.08)) !important;
}

.equipment-reward[b-yl8511mbyn] {
    background: linear-gradient(135deg, rgba(217, 119, 6, 0.15), rgba(245, 158, 11, 0.08)) !important;
}

/* ===================================================================
   Desktop (fullscreen) adaptation
   Canvas stays centered, HUD elements scale up
   =================================================================== */
@media (min-width: 769px) {
    .battle-top-bar[b-yl8511mbyn] {
        padding: 8px 16px;
        gap: 12px;
        flex-wrap: nowrap;
    }

    .battle-back-btn[b-yl8511mbyn] {
        width: 36px;
        height: 36px;
        font-size: 1.1rem;
    }

    .floor-num[b-yl8511mbyn] {
        font-size: 1.5rem;
    }

    .floor-label[b-yl8511mbyn] {
        font-size: 0.6rem;
    }

    .reward-tag[b-yl8511mbyn] {
        font-size: 0.72rem;
        padding: 3px 8px;
    }

    .battle-ctrl-btn[b-yl8511mbyn] {
        min-width: 34px;
        height: 32px;
        font-size: 0.72rem;
        padding: 0 6px;
    }

    .battle-buffs-strip[b-yl8511mbyn] {
        top: 160px;
        gap: 6px;
    }

    .buff-tag[b-yl8511mbyn] {
        font-size: 0.65rem;
        padding: 3px 8px;
    }

    .defeat-panel[b-yl8511mbyn] {
        max-width: 420px;
        padding: 3.5rem 2rem 2rem;
    }

    .defeat-stage[b-yl8511mbyn] {
        font-size: 1.6rem;
    }

    .defeat-reward-row[b-yl8511mbyn] {
        font-size: 1rem;
    }

    .defeat-btn[b-yl8511mbyn] {
        font-size: 1.1rem;
        padding: 0.85rem;
    }
}

/* Large desktop */
@media (min-width: 1200px) {
    .battle-top-bar[b-yl8511mbyn] {
        padding: 10px 24px;
        gap: 16px;
    }

    .floor-num[b-yl8511mbyn] {
        font-size: 1.6rem;
    }

    .reward-tag[b-yl8511mbyn] {
        font-size: 0.78rem;
        padding: 3px 10px;
    }

    .battle-ctrl-btn[b-yl8511mbyn] {
        min-width: 38px;
        height: 34px;
        font-size: 0.78rem;
    }
}

/* === Mobile compact === */
@media (max-width: 480px) {
    .battle-top-bar[b-yl8511mbyn] {
        padding: 4px 6px;
        gap: 4px;
    }

    .battle-back-btn[b-yl8511mbyn] {
        width: 28px;
        height: 28px;
        font-size: 0.85rem;
    }

    .floor-num[b-yl8511mbyn] {
        font-size: 1.1rem;
    }

    .reward-tag[b-yl8511mbyn] {
        font-size: 0.58rem;
        padding: 1px 5px;
    }

    .battle-ctrl-btn[b-yl8511mbyn] {
        min-width: 24px;
        height: 24px;
        font-size: 0.58rem;
    }

    .buff-tag[b-yl8511mbyn] {
        font-size: 0.55rem;
        padding: 1px 5px;
    }

    .defeat-panel[b-yl8511mbyn] {
        width: 95%;
        padding: 2.5rem 1.25rem 1.25rem;
    }

    .defeat-stage[b-yl8511mbyn] {
        font-size: 1.2rem;
    }

    .defeat-reward-row[b-yl8511mbyn] {
        font-size: 0.85rem;
    }
}
/* /Pages/MyTuno/StageEnemies.razor.rz.scp.css */
.stage-enemies-page .region-section[b-e0ttyc6dkm] {
    padding: 1rem 0;
}

.stage-enemies-page .region-header[b-e0ttyc6dkm] {
    border-bottom: 2px solid rgba(255, 255, 255, 0.15);
    padding-bottom: 0.75rem;
}

.stage-enemies-page .region-header h3[b-e0ttyc6dkm] {
    color: var(--bs-white);
    font-weight: 600;
}
/* /Pages/MyTuno/SurviveMode.razor.rz.scp.css */
/* ═══════════════════════════════════════════
   Survive Mode — Scoped Styles
   ═══════════════════════════════════════════ */

/* ─── Fullscreen Battle Layout ─── */
.stage-page[b-fqaqut1ymq] {
    position: fixed;
    inset: 0;
    background: #000;
    z-index: 100;
    overflow: hidden;
}

.stage-loading[b-fqaqut1ymq] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
}

.battle-screen[b-fqaqut1ymq] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    background: #000;
    overflow: hidden;
}

.battle-canvas[b-fqaqut1ymq] {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    background: #1a1a2e;
}

[b-fqaqut1ymq] .battle-canvas canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
}

/* ─── Top Bar (mirrors Stage) ─── */
.battle-top-bar[b-fqaqut1ymq] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    padding-top: calc(6px + env(safe-area-inset-top, 0px));
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.5) 60%, transparent 100%);
    min-height: 44px;
    flex-wrap: nowrap;
}

.battle-back-btn[b-fqaqut1ymq] {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    color: #fff;
    font-size: 1rem;
    cursor: pointer;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.12);
    transition: background 0.15s;
    flex-shrink: 0;
}

.battle-back-btn:hover[b-fqaqut1ymq] {
    background: rgba(255, 255, 255, 0.1);
}

.battle-floor-indicator[b-fqaqut1ymq] {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 36px;
    pointer-events: none;
    z-index: 1;
}

.floor-num[b-fqaqut1ymq] {
    font-family: 'Cinzel', 'Times New Roman', serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: #fff;
    line-height: 1;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9);
}

.floor-label[b-fqaqut1ymq] {
    font-size: 0.5rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 1px;
}

.battle-rewards-strip[b-fqaqut1ymq] {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
    flex: 1;
    min-width: 0;
}

.reward-tag[b-fqaqut1ymq] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 6px;
    border-radius: 999px;
    font-size: 0.65rem;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    backdrop-filter: blur(4px);
}

.reward-tag i[b-fqaqut1ymq] {
    font-size: 0.6rem;
}

.reward-tag--level[b-fqaqut1ymq] {
    background: rgba(67, 160, 71, 0.35);
    border: 1px solid rgba(67, 160, 71, 0.5);
}

.reward-tag--kills[b-fqaqut1ymq] {
    background: rgba(0, 188, 212, 0.35);
    border: 1px solid rgba(0, 188, 212, 0.5);
}

.reward-tag--coins[b-fqaqut1ymq] {
    background: rgba(255, 193, 7, 0.35);
    border: 1px solid rgba(255, 193, 7, 0.5);
}

.battle-controls[b-fqaqut1ymq] {
    display: flex;
    align-items: center;
    gap: 3px;
    flex-shrink: 0;
    margin-left: auto;
}

.battle-ctrl-btn[b-fqaqut1ymq] {
    min-width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    font-size: 0.65rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.7);
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    cursor: pointer;
    transition: all 0.15s;
    padding: 0 4px;
}

.battle-ctrl-btn:hover[b-fqaqut1ymq] {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.battle-ctrl-btn--audio[b-fqaqut1ymq] {
    color: rgba(255, 193, 7, 0.8);
}

.battle-ctrl-btn--stop[b-fqaqut1ymq] {
    color: rgba(255, 68, 68, 0.8);
    border-color: rgba(255, 68, 68, 0.3);
}

.battle-ctrl-btn--stop:hover[b-fqaqut1ymq] {
    background: rgba(255, 68, 68, 0.2);
    color: #ff4444;
}

/* ─── Buff Indicators (below top bar) ─── */
.battle-buffs-strip[b-fqaqut1ymq] {
    position: absolute;
    top: 50px;
    top: calc(50px + env(safe-area-inset-top, 0px));
    left: 10px;
    z-index: 10;
    display: flex;
    gap: 4px;
}

.buff-tag[b-fqaqut1ymq] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 6px;
    border-radius: 999px;
    font-size: 0.6rem;
    font-weight: 700;
    color: #fff;
    backdrop-filter: blur(4px);
}

.buff-tag--dodge[b-fqaqut1ymq] {
    background: rgba(0, 188, 212, 0.4);
    border: 1px solid rgba(0, 188, 212, 0.6);
}

.buff-tag--aoe[b-fqaqut1ymq] {
    background: rgba(239, 83, 80, 0.4);
    border: 1px solid rgba(239, 83, 80, 0.6);
}

.buff-tag--penalty[b-fqaqut1ymq] {
    background: rgba(13, 202, 240, 0.4);
    border: 1px solid rgba(13, 202, 240, 0.6);
}

/* Re-use biome card styles from stage modal */
.stage-biomes-list[b-fqaqut1ymq] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.biome-card[b-fqaqut1ymq] {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    overflow: hidden;
    transition: all 0.2s ease;
}

.biome-card.biome-current[b-fqaqut1ymq] {
    border-color: var(--bc, #43a047);
    background: linear-gradient(90deg, rgba(67, 160, 71, 0.08) 0%, transparent 100%);
    box-shadow: 0 0 12px rgba(67, 160, 71, 0.15);
}

.biome-card.biome-done[b-fqaqut1ymq] {
    opacity: 0.7;
}

.biome-card.biome-locked[b-fqaqut1ymq] {
    opacity: 0.35;
}

.biome-row[b-fqaqut1ymq] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 0.85rem;
}

/* Game container — fullscreen styles applied via .battle-canvas */

/* ─── Defeat / End Summary (mirrors Stage) ─── */
.defeat-overlay[b-fqaqut1ymq] {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 1rem 0;
}

.defeat-panel[b-fqaqut1ymq] {
    position: relative;
    width: 100%;
    max-width: 400px;
    background: linear-gradient(180deg, #1a1028 0%, #0d0a14 100%);
    border: 2px solid rgba(124, 77, 255, 0.4);
    border-radius: 24px;
    padding: 3.5rem 2rem 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    box-shadow:
        0 0 40px rgba(124, 77, 255, 0.15),
        0 20px 60px rgba(0, 0, 0, 0.6);
    animation: defeat-slide-in-b-fqaqut1ymq 0.4s ease-out;
}

@keyframes defeat-slide-in-b-fqaqut1ymq {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.defeat-banner[b-fqaqut1ymq] {
    position: absolute;
    top: -18px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #7c4dff, #651fff);
    padding: 0.5rem 2.5rem;
    border-radius: 999px;
    box-shadow:
        0 4px 20px rgba(124, 77, 255, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    white-space: nowrap;
}

.defeat-banner span[b-fqaqut1ymq] {
    font-size: 1.1rem;
    font-weight: 800;
    letter-spacing: 3px;
    color: #fff;
    text-transform: uppercase;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.defeat-stage[b-fqaqut1ymq] {
    font-size: 1.6rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.95);
    letter-spacing: 0.5px;
}

.defeat-rewards[b-fqaqut1ymq] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    width: 100%;
    padding: 1rem 1.25rem;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.defeat-reward-row[b-fqaqut1ymq] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
}

.defeat-reward-row i[b-fqaqut1ymq] {
    font-size: 1.1rem;
    width: 20px;
    text-align: center;
}

.defeat-no-rewards[b-fqaqut1ymq] {
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.95rem;
    margin: 0;
}

.defeat-btn[b-fqaqut1ymq] {
    width: 100%;
    padding: 0.85rem;
    border: none;
    border-radius: 14px;
    background: linear-gradient(135deg, #7c4dff, #651fff);
    color: #fff;
    font-size: 1.1rem;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 16px rgba(124, 77, 255, 0.35);
}

.defeat-btn:hover[b-fqaqut1ymq] {
    background: linear-gradient(135deg, #9165ff, #7c4dff);
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(124, 77, 255, 0.5);
}

.defeat-btn:active[b-fqaqut1ymq] {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(124, 77, 255, 0.3);
}

/* ===================================================================
   Desktop (fullscreen) adaptation — mirrors Stage
   =================================================================== */
@media (min-width: 769px) {
    .battle-top-bar[b-fqaqut1ymq] {
        padding: 8px 16px;
        gap: 12px;
        flex-wrap: nowrap;
    }

    .battle-back-btn[b-fqaqut1ymq] {
        width: 36px;
        height: 36px;
        font-size: 1.1rem;
    }

    .floor-num[b-fqaqut1ymq] {
        font-size: 1.5rem;
    }

    .floor-label[b-fqaqut1ymq] {
        font-size: 0.6rem;
    }

    .reward-tag[b-fqaqut1ymq] {
        font-size: 0.72rem;
        padding: 3px 8px;
    }

    .battle-ctrl-btn[b-fqaqut1ymq] {
        min-width: 34px;
        height: 32px;
        font-size: 0.72rem;
        padding: 0 6px;
    }

    .battle-buffs-strip[b-fqaqut1ymq] {
        top: 60px;
        gap: 6px;
    }

    .buff-tag[b-fqaqut1ymq] {
        font-size: 0.65rem;
        padding: 3px 8px;
    }

    .defeat-panel[b-fqaqut1ymq] {
        max-width: 420px;
        padding: 3.5rem 2rem 2rem;
    }

    .defeat-stage[b-fqaqut1ymq] {
        font-size: 1.6rem;
    }

    .defeat-reward-row[b-fqaqut1ymq] {
        font-size: 1rem;
    }

    .defeat-btn[b-fqaqut1ymq] {
        font-size: 1.1rem;
        padding: 0.85rem;
    }
}

/* Large desktop */
@media (min-width: 1200px) {
    .battle-top-bar[b-fqaqut1ymq] {
        padding: 10px 24px;
        gap: 16px;
    }

    .floor-num[b-fqaqut1ymq] {
        font-size: 1.6rem;
    }

    .reward-tag[b-fqaqut1ymq] {
        font-size: 0.78rem;
        padding: 3px 10px;
    }

    .battle-ctrl-btn[b-fqaqut1ymq] {
        min-width: 38px;
        height: 34px;
        font-size: 0.78rem;
    }
}

/* === Mobile compact === */
@media (max-width: 480px) {
    .battle-top-bar[b-fqaqut1ymq] {
        padding: 4px 6px;
        gap: 4px;
    }

    .battle-back-btn[b-fqaqut1ymq] {
        width: 28px;
        height: 28px;
        font-size: 0.85rem;
    }

    .floor-num[b-fqaqut1ymq] {
        font-size: 1.1rem;
    }

    .reward-tag[b-fqaqut1ymq] {
        font-size: 0.58rem;
        padding: 1px 5px;
    }

    .battle-ctrl-btn[b-fqaqut1ymq] {
        min-width: 24px;
        height: 24px;
        font-size: 0.58rem;
    }

    .buff-tag[b-fqaqut1ymq] {
        font-size: 0.55rem;
        padding: 1px 5px;
    }

    .defeat-panel[b-fqaqut1ymq] {
        width: 95%;
        padding: 2.5rem 1.25rem 1.25rem;
    }

    .defeat-stage[b-fqaqut1ymq] {
        font-size: 1.2rem;
    }

    .defeat-reward-row[b-fqaqut1ymq] {
        font-size: 0.85rem;
    }
}
/* /Pages/Operations/AuditLog.razor.rz.scp.css */
/* AuditLog Page - Mobile-Friendly Styling */

/* ========================================
   CSS Custom Properties
   ======================================== */
:root[b-trrq1mw9am] {
    --audit-table-min-width-desktop: 800px;
    --audit-table-min-width-mobile: 600px;
    --audit-table-min-width-small: 550px;
}

/* ========================================
   Page Header
   ======================================== */
.audit-log-page[b-trrq1mw9am] {
    padding-bottom: 2rem;
}

.page-header[b-trrq1mw9am] {
    margin-bottom: 1.5rem;
}

.page-header-content[b-trrq1mw9am] {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
}

.page-header-title[b-trrq1mw9am] {
    flex: 1;
    min-width: 250px;
}

.page-header-title .page-title[b-trrq1mw9am] {
    margin-bottom: 0.5rem;
}

.page-header-title .lead[b-trrq1mw9am] {
    margin-bottom: 0;
}

.page-header-actions[b-trrq1mw9am] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* ========================================
   Filters Panel - Collapsible
   ======================================== */
.filters-card[b-trrq1mw9am] {
    margin-bottom: 1.5rem;
    border: 1px solid rgba(var(--bs-primary-rgb), 0.2);
}

.filters-header[b-trrq1mw9am] {
    cursor: pointer;
    user-select: none;
    background-color: rgba(var(--bs-primary-rgb), 0.1);
    transition: background-color 0.2s ease;
}

.filters-header:hover[b-trrq1mw9am] {
    background-color: rgba(var(--bs-primary-rgb), 0.15);
}

.filters-header-content[b-trrq1mw9am] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.filters-header-content i.bi-chevron-up[b-trrq1mw9am],
.filters-header-content i.bi-chevron-down[b-trrq1mw9am] {
    transition: transform 0.3s ease;
    font-size: 1rem;
}

.filters-body[b-trrq1mw9am] {
    transition: max-height 0.3s ease, padding 0.3s ease, opacity 0.3s ease;
    overflow: hidden;
}

.filters-body.expanded[b-trrq1mw9am] {
    max-height: 1000px;
    opacity: 1;
}

.filters-body.collapsed[b-trrq1mw9am] {
    max-height: 0;
    padding: 0 !important;
    opacity: 0;
}

.filters-grid[b-trrq1mw9am] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-bottom: 1rem;
}

.filter-group[b-trrq1mw9am] {
    display: flex;
    flex-direction: column;
}

.filter-group .form-label[b-trrq1mw9am] {
    margin-bottom: 0.375rem;
    font-size: 0.875rem;
}

.filters-bottom[b-trrq1mw9am] {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 1rem;
    align-items: end;
    padding-top: 0.5rem;
    border-top: 1px solid rgba(var(--bs-primary-rgb), 0.1);
}

.filter-search[b-trrq1mw9am] {
    grid-column: 1;
}

.filter-checkbox[b-trrq1mw9am] {
    display: flex;
    align-items: center;
}

.filter-checkbox .form-check[b-trrq1mw9am] {
    margin: 0;
    padding-top: 0.5rem;
}

.filter-clear[b-trrq1mw9am] {
    display: flex;
    align-items: flex-end;
}

/* ========================================
   Stats Grid - Responsive Cards
   ======================================== */
.stats-grid[b-trrq1mw9am] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.stat-card[b-trrq1mw9am] {
    background: rgba(var(--bs-primary-rgb), 0.05);
    border: 1px solid rgba(var(--bs-primary-rgb), 0.2);
    border-radius: 0.5rem;
    padding: 1rem;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.stat-card:hover[b-trrq1mw9am] {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(var(--bs-primary-rgb), 0.2);
    border-color: rgba(var(--bs-primary-rgb), 0.4);
}

.stat-card-content[b-trrq1mw9am] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.stat-icon[b-trrq1mw9am] {
    font-size: 2rem;
    color: var(--bs-primary);
    line-height: 1;
}

.stat-card.stat-critical .stat-icon[b-trrq1mw9am] {
    color: var(--bs-danger);
}

.stat-card.stat-entities .stat-icon[b-trrq1mw9am] {
    color: var(--bs-info);
}

.stat-card.stat-users .stat-icon[b-trrq1mw9am] {
    color: var(--bs-success);
}

.stat-info[b-trrq1mw9am] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.stat-value[b-trrq1mw9am] {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1;
}

.stat-label[b-trrq1mw9am] {
    font-size: 0.875rem;
    color: #fff;
    text-transform: capitalize;
}

/* ========================================
   Activity Log Table - Mobile Responsive
   ======================================== */
.activity-log-card[b-trrq1mw9am] {
    margin-bottom: 1.5rem;
}

.table-container[b-trrq1mw9am] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.activity-log-table[b-trrq1mw9am] {
    min-width: var(--audit-table-min-width-desktop);
}

.activity-log-table th[b-trrq1mw9am] {
    white-space: nowrap;
    font-size: 0.875rem;
    padding: 0.75rem 0.5rem;
}

.activity-log-table td[b-trrq1mw9am] {
    padding: 0.75rem 0.5rem;
    font-size: 0.875rem;
}

.timestamp-cell[b-trrq1mw9am],
.user-cell[b-trrq1mw9am],
.action-cell[b-trrq1mw9am],
.changes-cell[b-trrq1mw9am],
.critical-cell[b-trrq1mw9am] {
    white-space: nowrap;
}

.entity-cell[b-trrq1mw9am] {
    min-width: 150px;
}

.actions-column[b-trrq1mw9am],
.actions-cell[b-trrq1mw9am] {
    width: 80px;
    min-width: 80px;
    text-align: center;
}

.actions-cell .btn[b-trrq1mw9am] {
    white-space: nowrap;
}

/* ========================================
   Tablet Styles (768px - 991px)
   ======================================== */
@media (max-width: 991px) {
    .stats-grid[b-trrq1mw9am] {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ========================================
   Mobile Styles (≤ 768px)
   ======================================== */
@media (max-width: 768px) {
    /* Page Header */
    .page-header-content[b-trrq1mw9am] {
        flex-direction: column;
    }

    .page-header-title[b-trrq1mw9am] {
        width: 100%;
    }

    .page-header-title .page-title[b-trrq1mw9am] {
        font-size: 1.5rem;
    }

    .page-header-title .lead[b-trrq1mw9am] {
        font-size: 0.95rem;
    }

    .page-header-actions[b-trrq1mw9am] {
        width: 100%;
        justify-content: stretch;
        flex-direction: column;
    }

    .page-header-actions > div[b-trrq1mw9am] {
        width: 100%;
        flex-direction: column;
    }

    .page-header-actions .btn[b-trrq1mw9am] {
        width: 100%;
        flex: none;
    }

    /* Filters - Collapsed by default on mobile */
    .filters-body.expanded[b-trrq1mw9am] {
        max-height: none;
    }

    .filters-grid[b-trrq1mw9am] {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .filters-bottom[b-trrq1mw9am] {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .filter-search[b-trrq1mw9am] {
        grid-column: 1;
    }

    .filter-checkbox .form-check[b-trrq1mw9am] {
        padding-top: 0;
    }

    /* Stats Grid */
    .stats-grid[b-trrq1mw9am] {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .stat-card[b-trrq1mw9am] {
        padding: 0.875rem;
    }

    .stat-icon[b-trrq1mw9am] {
        font-size: 1.5rem;
    }

    .stat-value[b-trrq1mw9am] {
        font-size: 1.5rem;
    }

    .stat-label[b-trrq1mw9am] {
        font-size: 0.8rem;
    }

    /* Activity Log Table */
    .activity-log-table[b-trrq1mw9am] {
        min-width: 100%;
        font-size: 0.8rem;
    }

    .activity-log-table th[b-trrq1mw9am],
    .activity-log-table td[b-trrq1mw9am] {
        padding: 0.5rem 0.375rem;
        font-size: 0.8rem;
    }

    .activity-log-table thead[b-trrq1mw9am] {
        display: none;
    }

    .activity-log-table tbody[b-trrq1mw9am],
    .activity-log-table tr[b-trrq1mw9am],
    .activity-log-table td[b-trrq1mw9am] {
        display: block;
        width: 100%;
    }

    .activity-log-table tr[b-trrq1mw9am] {
        margin-bottom: 0.75rem;
        border: 1px solid rgba(var(--bs-primary-rgb), 0.2);
        border-radius: 0.5rem;
        padding: 0.5rem 0.75rem;
        background: rgba(var(--bs-primary-rgb), 0.03);
    }

    .activity-log-table td[b-trrq1mw9am] {
        display: grid;
        grid-template-columns: 1fr 1.4fr;
        align-items: center;
        gap: 0.35rem 0.75rem;
        border-bottom: 1px dashed rgba(var(--bs-primary-rgb), 0.15);
        padding: 0.375rem 0;
    }

    .activity-log-table td:last-child[b-trrq1mw9am] {
        border-bottom: none;
        padding-bottom: 0;
    }

    .activity-log-table td[b-trrq1mw9am]::before {
        content: attr(data-label);
        font-weight: 600;
        color: var(--bs-gray-400);
        letter-spacing: 0.01em;
    }

    .activity-log-table .timestamp-cell small[b-trrq1mw9am] {
        font-size: 0.8rem;
    }

    .activity-log-table .badge[b-trrq1mw9am] {
        font-size: 0.75rem;
        padding: 0.25em 0.4em;
    }

    .activity-log-table .btn-sm[b-trrq1mw9am] {
        padding: 0.25rem 0.4rem;
        font-size: 0.75rem;
    }

    .activity-log-table .actions-cell[b-trrq1mw9am] {
        display: flex;
        justify-content: flex-start;
        gap: 0.5rem;
    }
}

/* ========================================
   Very Small Mobile (≤ 576px)
   ======================================== */
@media (max-width: 576px) {
    .audit-log-page[b-trrq1mw9am] {
        padding-bottom: 1rem;
    }

    .page-header[b-trrq1mw9am] {
        margin-bottom: 1rem;
    }

    .page-header-title .page-title[b-trrq1mw9am] {
        font-size: 1.25rem;
    }

    .page-header-title .lead[b-trrq1mw9am] {
        font-size: 0.875rem;
    }

    .filters-card[b-trrq1mw9am] {
        margin-bottom: 1rem;
    }

    .stats-grid[b-trrq1mw9am] {
        gap: 0.5rem;
        margin-bottom: 1rem;
    }

    .stat-card[b-trrq1mw9am] {
        padding: 0.75rem;
    }

    .stat-card-content[b-trrq1mw9am] {
        gap: 0.75rem;
    }

    .stat-icon[b-trrq1mw9am] {
        font-size: 1.25rem;
    }

    .stat-value[b-trrq1mw9am] {
        font-size: 1.25rem;
    }

    .activity-log-card[b-trrq1mw9am] {
        margin-bottom: 1rem;
    }

    .activity-log-table[b-trrq1mw9am] {
        min-width: 100%;
    }
}

/* Changes display */
.changes-display[b-trrq1mw9am] {
    max-height: 400px;
    overflow-y: auto;
}
/* /Pages/Operations/DatabaseViewer.razor.rz.scp.css */
/* DatabaseViewer Page - Mobile-Friendly Styling */

/* ========================================
   Page Header
   ======================================== */
.database-viewer-page[b-zeh6a076ts] {
    padding-bottom: 2rem;
}

.page-header[b-zeh6a076ts] {
    margin-bottom: 1.5rem;
}

.page-header-content[b-zeh6a076ts] {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
}

.page-header-title[b-zeh6a076ts] {
    flex: 1;
    min-width: 250px;
}

.page-header-title .page-title[b-zeh6a076ts] {
    margin-bottom: 0.5rem;
}

.page-header-title .lead[b-zeh6a076ts] {
    margin-bottom: 0;
}

.page-header-actions[b-zeh6a076ts] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* ========================================
   Sidebar - Tables List
   ======================================== */
.sidebar-column[b-zeh6a076ts] {
    margin-bottom: 1rem;
}

.tables-card[b-zeh6a076ts] {
    position: sticky;
    top: 1rem;
}

.tables-card .card-header[b-zeh6a076ts] {
    background-color: rgba(var(--bs-primary-rgb), 0.1);
}

.table-list[b-zeh6a076ts] {
    max-height: 60vh;
    overflow-y: auto;
}

.table-list-item[b-zeh6a076ts] {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0.75rem 1rem;
    border: none;
    background: transparent;
    text-align: left;
    color: var(--bs-body-color);
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
    border-bottom: 1px solid rgba(var(--bs-primary-rgb), 0.1);
}

.table-list-item:hover[b-zeh6a076ts] {
    background-color: rgba(var(--bs-primary-rgb), 0.1);
}

.table-list-item.active[b-zeh6a076ts] {
    background-color: rgba(var(--bs-primary-rgb), 0.2);
    color: var(--bs-primary);
    font-weight: 600;
}

.table-list-item:last-child[b-zeh6a076ts] {
    border-bottom: none;
}

/* ========================================
   Query Card - Tabs
   ======================================== */
.query-card .card-header[b-zeh6a076ts] {
    background-color: rgba(var(--bs-primary-rgb), 0.1);
    padding: 0;
}

.query-tabs[b-zeh6a076ts] {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
}

.query-tab-btn[b-zeh6a076ts] {
    flex: 1;
    min-width: 150px;
    padding: 0.75rem 1rem;
    border: none;
    background: transparent;
    color: var(--bs-body-color);
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border-bottom: 3px solid transparent;
}

.query-tab-btn:hover[b-zeh6a076ts] {
    background-color: rgba(var(--bs-primary-rgb), 0.15);
}

.query-tab-btn.active[b-zeh6a076ts] {
    background-color: rgba(var(--bs-primary-rgb), 0.2);
    color: var(--bs-primary);
    border-bottom-color: var(--bs-primary);
}

.query-textarea[b-zeh6a076ts] {
    font-size: 0.875rem;
    font-family: 'Courier New', monospace;
}

/* ========================================
   Data Card
   ======================================== */
.data-card[b-zeh6a076ts] {
    min-height: 400px;
}

.data-card .card-header[b-zeh6a076ts] {
    background-color: rgba(var(--bs-primary-rgb), 0.1);
}

.data-table[b-zeh6a076ts] {
    min-width: 800px;
    font-size: 0.875rem;
}

.data-table th[b-zeh6a076ts] {
    white-space: nowrap;
    font-size: 0.8rem;
    padding: 0.5rem;
    background-color: rgba(var(--bs-primary-rgb), 0.05);
    position: sticky;
    top: 0;
    z-index: 1;
}

.data-table td[b-zeh6a076ts] {
    padding: 0.5rem;
    font-size: 0.8rem;
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.data-table tbody tr:hover[b-zeh6a076ts] {
    background-color: rgba(var(--bs-primary-rgb), 0.05);
}

/* ========================================
   Tablet Styles (768px - 991px)
   ======================================== */
@media (max-width: 991px) {
    .table-list[b-zeh6a076ts] {
        max-height: 40vh;
    }
}

/* ========================================
   Mobile Styles (≤ 768px)
   ======================================== */
@media (max-width: 768px) {
    /* Page Header */
    .page-header-content[b-zeh6a076ts] {
        flex-direction: column;
    }

    .page-header-title[b-zeh6a076ts] {
        width: 100%;
    }

    .page-header-title .page-title[b-zeh6a076ts] {
        font-size: 1.5rem;
    }

    .page-header-title .lead[b-zeh6a076ts] {
        font-size: 0.95rem;
    }

    .page-header-actions[b-zeh6a076ts] {
        width: 100%;
        justify-content: stretch;
    }

    .page-header-actions .btn[b-zeh6a076ts] {
        flex: 1;
        min-width: 0;
    }

    .page-header-actions .btn .btn-text[b-zeh6a076ts] {
        display: none;
    }

    /* Query tabs */
    .query-tab-btn[b-zeh6a076ts] {
        min-width: 0;
        padding: 0.5rem 0.75rem;
        font-size: 0.85rem;
    }

    .query-tab-btn i[b-zeh6a076ts] {
        display: none;
    }

    /* Data Table - Card Layout for Mobile */
    .data-table[b-zeh6a076ts] {
        min-width: 100%;
        font-size: 0.8rem;
    }

    .data-table th[b-zeh6a076ts],
    .data-table td[b-zeh6a076ts] {
        padding: 0.375rem;
        font-size: 0.75rem;
    }

    .data-table thead[b-zeh6a076ts] {
        display: none;
    }

    .data-table tbody[b-zeh6a076ts],
    .data-table tr[b-zeh6a076ts],
    .data-table td[b-zeh6a076ts] {
        display: block;
        width: 100%;
    }

    .data-table tr[b-zeh6a076ts] {
        margin-bottom: 0.75rem;
        border: 1px solid rgba(var(--bs-primary-rgb), 0.2);
        border-radius: 0.5rem;
        padding: 0.5rem 0.75rem;
        background: rgba(var(--bs-primary-rgb), 0.03);
    }

    .data-table td[b-zeh6a076ts] {
        display: grid;
        grid-template-columns: 1fr 1.4fr;
        align-items: start;
        gap: 0.35rem 0.75rem;
        border-bottom: 1px dashed rgba(var(--bs-primary-rgb), 0.15);
        padding: 0.375rem 0;
        max-width: none;
        white-space: normal;
        overflow: visible;
    }

    .data-table td:last-child[b-zeh6a076ts] {
        border-bottom: none;
        padding-bottom: 0;
    }

    .data-table td[b-zeh6a076ts]::before {
        content: attr(data-label);
        font-weight: 600;
        color: var(--bs-gray-400);
        letter-spacing: 0.01em;
        font-size: 0.7rem;
    }

    /* Query textarea */
    .query-textarea[b-zeh6a076ts] {
        font-size: 0.75rem;
    }
}

/* ========================================
   Very Small Mobile (≤ 576px)
   ======================================== */
@media (max-width: 576px) {
    .database-viewer-page[b-zeh6a076ts] {
        padding-bottom: 1rem;
    }

    .page-header[b-zeh6a076ts] {
        margin-bottom: 1rem;
    }

    .page-header-title .page-title[b-zeh6a076ts] {
        font-size: 1.25rem;
    }

    .page-header-title .lead[b-zeh6a076ts] {
        font-size: 0.875rem;
    }

    .data-card[b-zeh6a076ts] {
        min-height: 300px;
    }
}
/* /Pages/Operations/Emails.razor.rz.scp.css */
/* Email preview container */
.email-preview[b-8cfctt2k4i] {
    background-color: #F7F7FB;
    padding: 20px;
    border-radius: 8px;
}

.email-preview-card[b-8cfctt2k4i] {
    background-color: white;
    max-width: 600px;
    margin: 0 auto;
    padding: 32px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.email-preview-title[b-8cfctt2k4i] {
    margin: 0 0 16px 0;
    font-size: 28px;
    font-weight: 600;
    color: #0B0B0F;
}

.email-preview-greeting[b-8cfctt2k4i] {
    margin: 0 0 16px 0;
    font-size: 16px;
    color: #333333;
}

.email-preview-content-box[b-8cfctt2k4i] {
    margin: 24px 0;
    padding: 20px;
    background-color: #F7F7FB;
    border-left: 4px solid #6E56CF;
    border-radius: 8px;
}

.email-preview-content[b-8cfctt2k4i] {
    margin: 0;
    font-size: 16px;
    color: #333333;
    white-space: pre-wrap;
}

.email-preview-closing[b-8cfctt2k4i] {
    margin: 16px 0 0 0;
    font-size: 16px;
    color: #333333;
}
/* /Pages/Operations/Notifications.razor.rz.scp.css */
/* Subscriber list with scroll */
.subscriber-list-scrollable[b-6vyjjm0kak] {
    max-height: 400px;
    overflow-y: auto;
}

/* Avatar styling */
.member-avatar-small[b-6vyjjm0kak] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
}

/* Notification preview container */
.notification-preview[b-6vyjjm0kak] {
    background-color: #F7F7FB;
    padding: 20px;
    border-radius: 8px;
}

.notification-preview-card[b-6vyjjm0kak] {
    background-color: white;
    max-width: 600px;
    margin: 0 auto;
    padding: 24px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.notification-preview-header[b-6vyjjm0kak] {
    display: flex;
    align-items: start;
    margin-bottom: 0.75rem;
}

.notification-preview-logo[b-6vyjjm0kak] {
    width: 48px;
    height: 48px;
    margin-right: 16px;
    border-radius: 8px;
}

.notification-preview-content[b-6vyjjm0kak] {
    flex: 1;
}

.notification-preview-title[b-6vyjjm0kak] {
    margin: 0 0 8px 0;
    font-size: 18px;
    font-weight: 600;
    color: #0B0B0F;
}

.notification-preview-body[b-6vyjjm0kak] {
    margin: 0;
    font-size: 14px;
    color: #666666;
    white-space: pre-wrap;
}

.notification-preview-footer[b-6vyjjm0kak] {
    padding-top: 12px;
    border-top: 1px solid #E0E0E0;
}

.notification-preview-footer-text[b-6vyjjm0kak] {
    color: #999999;
    font-size: 12px;
}
/* /Pages/Public/Calotes.razor.rz.scp.css */
/* Calotes page-specific styles
   Migrated from wwwroot/css/4-pages/calotes.css
   (Reuses avatar-card styles from 3-components/avatar-card.css) */

/* Debt badge - displayed in the card */
.calote-debt-badge[b-qcwqmtbisl] {
    background-color: rgba(220, 53, 69, 0.2);
    border: 1px solid var(--bs-danger);
    border-radius: 1rem;
    padding: 0.5rem 1rem;
    text-align: center;
    margin-top: 0.5rem;
    align-self: center;
}

.calote-debt-value[b-qcwqmtbisl] {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--bs-danger);
}

/* Commitment badge - similar to debt badge but purple */
.calote-commitment-badge[b-qcwqmtbisl] {
    background-color: rgba(110, 86, 207, 0.2);
    border: 1px solid rgba(110, 86, 207, 0.6);
    border-radius: 1rem;
    padding: 0.5rem 1rem;
    text-align: center;
    margin: 0.5rem 1rem 0 1rem;
    margin-bottom: 1rem;
    align-self: center;
    flex-shrink: 0;
}

.calote-commitment-value[b-qcwqmtbisl] {
    font-size: 0.9rem;
    font-weight: 600;
    color: rgba(110, 86, 207, 0.95);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .calote-debt-value[b-qcwqmtbisl] {
        font-size: 1rem;
    }

    .calote-commitment-value[b-qcwqmtbisl] {
        font-size: 0.85rem;
    }
}
/* /Pages/Public/Roles.razor.rz.scp.css */
/* Filter dropdown minimum width */
.filter-dropdown-container[b-fdynl9n071] {
    min-width: 240px;
}

/* PDF viewer container */
.pdf-viewer-container[b-fdynl9n071] {
    height: 80vh;
}

.pdf-viewer-iframe[b-fdynl9n071] {
    width: 100%;
    height: 100%;
    border: none;
}

/* ========================================
   ROLES PAGE STYLES (migrated from global)
   ======================================== */

/* Admin action chips */
.admin-action-chips[b-fdynl9n071] {
  display: flex;
  gap: 8px;
  justify-content: center;
}

[b-fdynl9n071] .admin-action-chips .btn {
  border-radius: 20px;
  padding: 4px 12px;
  font-size: 12px;
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
  .admin-action-chips[b-fdynl9n071] {
    flex-wrap: wrap;
  }
}

/* ========================================
   RGI Section
   ======================================== */
.rgi-section[b-fdynl9n071] {
  text-align: center;
  padding: 2rem 1.5rem;
  border: 1px solid rgba(111, 66, 193, 0.3);
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(111, 66, 193, 0.08) 0%, rgba(111, 66, 193, 0.02) 100%);
}

.rgi-section-icon[b-fdynl9n071] {
  font-size: 2.5rem;
  color: var(--bs-primary);
  margin-bottom: 0.75rem;
}

.rgi-section-title[b-fdynl9n071] {
  color: var(--bs-white);
  font-weight: 600;
  margin-bottom: 0.35rem;
}

.rgi-section-subtitle[b-fdynl9n071] {
  color: #818384;
  font-size: 0.9rem;
  margin-bottom: 1rem;
}