/* /Components/Admin/Analytics.razor.rz.scp.css */
.analytics-page[b-bc0vs3mqp7] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
}

.page-header[b-bc0vs3mqp7] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 2rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.back-link[b-bc0vs3mqp7] {
    color: var(--lb-text-muted, #888);
    text-decoration: none;
    font-size: 0.875rem;
    display: block;
    margin-bottom: 0.5rem;
}

.back-link:hover[b-bc0vs3mqp7] {
    color: var(--lb-accent-primary, #d4af37);
}

.page-header h1[b-bc0vs3mqp7] {
    margin: 0;
    font-size: 1.75rem;
    color: var(--lb-text-primary, #e0e0e0);
}

.text-muted[b-bc0vs3mqp7] {
    color: var(--lb-text-muted, #888);
    margin: 0.25rem 0 0 0;
    font-size: 0.875rem;
}

.header-actions[b-bc0vs3mqp7] {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.period-select[b-bc0vs3mqp7] {
    background: var(--lb-bg-elevated-2, #222);
    border: 1px solid var(--lb-border-default, #333);
    border-radius: 6px;
    color: var(--lb-text-primary, #e0e0e0);
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    cursor: pointer;
}

.period-select:focus[b-bc0vs3mqp7] {
    outline: none;
    border-color: var(--lb-accent-primary, #d4af37);
}

/* Loading State */
.loading-state[b-bc0vs3mqp7] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    gap: 1rem;
    color: var(--lb-text-muted, #888);
}

.spinner[b-bc0vs3mqp7] {
    width: 40px;
    height: 40px;
    border: 3px solid var(--lb-border-default, #333);
    border-top-color: var(--lb-accent-primary, #d4af37);
    border-radius: 50%;
    animation: spin-b-bc0vs3mqp7 0.8s linear infinite;
}

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

/* Stats Grid */
.stats-grid[b-bc0vs3mqp7] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 2rem;
}

.stat-card[b-bc0vs3mqp7] {
    background: var(--lb-bg-elevated, #1a1a1a);
    border: 1px solid var(--lb-border-default, #333);
    border-radius: 8px;
    padding: 1.25rem;
    text-align: center;
}

.stat-value[b-bc0vs3mqp7] {
    font-size: 2rem;
    font-weight: 700;
    color: var(--lb-accent-primary, #d4af37);
    margin-bottom: 0.25rem;
}

.stat-label[b-bc0vs3mqp7] {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--lb-text-muted, #888);
}

/* Analytics Grid */
.analytics-grid[b-bc0vs3mqp7] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.analytics-section[b-bc0vs3mqp7] {
    background: var(--lb-bg-elevated, #1a1a1a);
    border: 1px solid var(--lb-border-default, #333);
    border-radius: 8px;
    padding: 1.5rem;
}

.analytics-section h3[b-bc0vs3mqp7] {
    margin: 0 0 1rem 0;
    font-size: 1rem;
    color: var(--lb-text-primary, #e0e0e0);
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--lb-border-default, #333);
}

.trend-section[b-bc0vs3mqp7] {
    grid-column: span 2;
}

/* Trend Chart */
.trend-chart[b-bc0vs3mqp7] {
    display: flex;
    gap: 4px;
    height: 150px;
    align-items: flex-end;
    padding: 0.5rem 0;
}

.trend-bar-container[b-bc0vs3mqp7] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    position: relative;
}

.trend-bar[b-bc0vs3mqp7] {
    width: 100%;
    max-width: 30px;
    border-radius: 4px 4px 0 0;
    position: absolute;
    bottom: 20px;
    transition: height 0.3s;
}

.trend-bar.anon[b-bc0vs3mqp7] {
    background: rgba(212, 175, 55, 0.3);
}

.trend-bar.auth[b-bc0vs3mqp7] {
    background: var(--lb-accent-primary, #d4af37);
}

.trend-date[b-bc0vs3mqp7] {
    position: absolute;
    bottom: 0;
    font-size: 0.625rem;
    color: var(--lb-text-muted, #888);
}

.trend-legend[b-bc0vs3mqp7] {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--lb-border-default, #333);
}

.legend-item[b-bc0vs3mqp7] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: var(--lb-text-muted, #888);
}

.legend-color[b-bc0vs3mqp7] {
    width: 12px;
    height: 12px;
    border-radius: 2px;
}

.legend-color.auth[b-bc0vs3mqp7] {
    background: var(--lb-accent-primary, #d4af37);
}

.legend-color.anon[b-bc0vs3mqp7] {
    background: rgba(212, 175, 55, 0.3);
}

/* Top List */
.top-list[b-bc0vs3mqp7] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.top-item[b-bc0vs3mqp7] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0.75rem;
    background: var(--lb-bg-elevated-2, #222);
    border-radius: 4px;
}

.top-item-info[b-bc0vs3mqp7] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
    flex: 1;
}

.top-item-name[b-bc0vs3mqp7] {
    font-size: 0.8125rem;
    color: var(--lb-text-primary, #e0e0e0);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.top-item-meta[b-bc0vs3mqp7] {
    font-size: 0.6875rem;
    color: var(--lb-text-muted, #888);
}

.top-item-value[b-bc0vs3mqp7] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--lb-accent-primary, #d4af37);
    margin-left: 1rem;
    flex-shrink: 0;
}

/* Feature Categories */
.feature-categories[b-bc0vs3mqp7] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.feature-category h4[b-bc0vs3mqp7] {
    margin: 0 0 0.5rem 0;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--lb-text-muted, #888);
}

.feature-list[b-bc0vs3mqp7] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.feature-item[b-bc0vs3mqp7] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.375rem 0.5rem;
    background: var(--lb-bg-elevated-2, #222);
    border-radius: 4px;
}

.feature-name[b-bc0vs3mqp7] {
    font-size: 0.8125rem;
    color: var(--lb-text-primary, #e0e0e0);
}

.feature-count[b-bc0vs3mqp7] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--lb-accent-primary, #d4af37);
}

/* No Data */
.no-data[b-bc0vs3mqp7] {
    text-align: center;
    color: var(--lb-text-muted, #888);
    font-size: 0.875rem;
    padding: 2rem;
}

/* Footer Info */
.footer-info[b-bc0vs3mqp7] {
    display: flex;
    justify-content: space-between;
    padding: 1rem;
    background: var(--lb-bg-elevated, #1a1a1a);
    border: 1px solid var(--lb-border-default, #333);
    border-radius: 8px;
    font-size: 0.75rem;
    color: var(--lb-text-muted, #888);
}

/* Buttons */
.btn[b-bc0vs3mqp7] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-weight: 500;
    cursor: pointer;
    border: none;
    transition: all 0.15s;
    font-size: 0.875rem;
}

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

.btn-secondary[b-bc0vs3mqp7] {
    background: var(--lb-bg-elevated-2, #222);
    color: var(--lb-text-primary, #e0e0e0);
    border: 1px solid var(--lb-border-default, #333);
}

.btn-secondary:hover:not(:disabled)[b-bc0vs3mqp7] {
    background: var(--lb-bg-elevated-3, #333);
}

/* Responsive */
@media (max-width: 1024px) {
    .analytics-grid[b-bc0vs3mqp7] {
        grid-template-columns: 1fr;
    }

    .trend-section[b-bc0vs3mqp7] {
        grid-column: span 1;
    }
}

@media (max-width: 768px) {
    .analytics-page[b-bc0vs3mqp7] {
        padding: 1rem;
    }

    .page-header[b-bc0vs3mqp7] {
        flex-direction: column;
    }

    .stats-grid[b-bc0vs3mqp7] {
        grid-template-columns: repeat(2, 1fr);
    }

    .trend-chart[b-bc0vs3mqp7] {
        height: 100px;
    }

    .footer-info[b-bc0vs3mqp7] {
        flex-direction: column;
        gap: 0.5rem;
        text-align: center;
    }
}
/* /Components/Admin/AuditLogs.razor.rz.scp.css */
.audit-logs-page[b-4ynhe2dopd] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 2rem;
}

.page-header[b-4ynhe2dopd] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 2rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.back-link[b-4ynhe2dopd] {
    color: var(--lb-text-muted, #888);
    text-decoration: none;
    font-size: 0.875rem;
    display: block;
    margin-bottom: 0.5rem;
}

.back-link:hover[b-4ynhe2dopd] {
    color: var(--lb-accent-primary, #d4af37);
}

.page-header h1[b-4ynhe2dopd] {
    margin: 0;
    font-size: 1.75rem;
    color: var(--lb-text-primary, #e0e0e0);
}

.text-muted[b-4ynhe2dopd] {
    color: var(--lb-text-muted, #888);
    margin: 0.25rem 0 0 0;
    font-size: 0.875rem;
}

.header-actions[b-4ynhe2dopd] {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

/* Stats Grid */
.stats-grid[b-4ynhe2dopd] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.stat-card[b-4ynhe2dopd] {
    background: var(--lb-bg-elevated, #1a1a1a);
    border: 1px solid var(--lb-border-default, #333);
    border-radius: 8px;
    padding: 1.25rem;
    cursor: pointer;
    transition: all 0.15s;
}

.stat-card:hover[b-4ynhe2dopd] {
    border-color: var(--lb-accent-primary, #d4af37);
}

.stat-card.active[b-4ynhe2dopd] {
    border-color: var(--lb-accent-primary, #d4af37);
    background: var(--lb-bg-elevated-2, #222);
}

.stat-card.auth .stat-value[b-4ynhe2dopd] { color: #3b82f6; }
.stat-card.admin .stat-value[b-4ynhe2dopd] { color: #8b5cf6; }
.stat-card.security .stat-value[b-4ynhe2dopd] { color: #ef4444; }

.stat-value[b-4ynhe2dopd] {
    font-size: 2rem;
    font-weight: 700;
    color: var(--lb-text-primary, #e0e0e0);
}

.stat-label[b-4ynhe2dopd] {
    font-size: 0.875rem;
    color: var(--lb-text-secondary, #ccc);
    margin-top: 0.25rem;
}

.stat-sub[b-4ynhe2dopd] {
    font-size: 0.75rem;
    color: var(--lb-text-muted, #888);
    margin-top: 0.25rem;
}

/* Alert Banner */
.alert-banner[b-4ynhe2dopd] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-radius: 6px;
    margin-bottom: 1.5rem;
}

.alert-banner.warning[b-4ynhe2dopd] {
    background: rgba(245, 158, 11, 0.15);
    border: 1px solid rgba(245, 158, 11, 0.3);
    color: #f59e0b;
}

.alert-icon[b-4ynhe2dopd] {
    font-size: 1.25rem;
}

/* Filters */
.filters[b-4ynhe2dopd] {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    align-items: flex-end;
    background: var(--lb-bg-elevated, #1a1a1a);
    border-radius: 8px;
    padding: 1rem;
    border: 1px solid var(--lb-border-default, #333);
}

.filter-group[b-4ynhe2dopd] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.filter-group label[b-4ynhe2dopd] {
    font-size: 0.75rem;
    color: var(--lb-text-muted, #888);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.filter-group select[b-4ynhe2dopd],
.filter-group input[b-4ynhe2dopd] {
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--lb-border-default, #333);
    border-radius: 4px;
    background: var(--lb-bg-elevated-2, #222);
    color: var(--lb-text-primary, #e0e0e0);
    font-size: 0.875rem;
    min-width: 140px;
}

.filter-group.search[b-4ynhe2dopd] {
    flex: 1;
    min-width: 200px;
}

.filter-group.search input[b-4ynhe2dopd] {
    width: 100%;
}

/* Logs Table */
.logs-table-container[b-4ynhe2dopd] {
    background: var(--lb-bg-elevated, #1a1a1a);
    border-radius: 8px;
    border: 1px solid var(--lb-border-default, #333);
    overflow: hidden;
}

.logs-table[b-4ynhe2dopd] {
    width: 100%;
    border-collapse: collapse;
}

.logs-table thead[b-4ynhe2dopd] {
    background: var(--lb-bg-elevated-2, #222);
}

.logs-table th[b-4ynhe2dopd] {
    padding: 0.75rem 1rem;
    text-align: left;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--lb-text-muted, #888);
    border-bottom: 1px solid var(--lb-border-default, #333);
}

.logs-table td[b-4ynhe2dopd] {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--lb-border-default, #333);
    font-size: 0.875rem;
    color: var(--lb-text-secondary, #ccc);
    vertical-align: top;
}

.log-row:hover[b-4ynhe2dopd] {
    background: var(--lb-bg-elevated-2, #222);
}

.log-row.critical[b-4ynhe2dopd] {
    border-left: 3px solid #ef4444;
}

.log-row.warning[b-4ynhe2dopd] {
    border-left: 3px solid #f59e0b;
}

/* Badges */
.severity-badge[b-4ynhe2dopd],
.category-badge[b-4ynhe2dopd] {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

.severity-badge.info[b-4ynhe2dopd] {
    background: rgba(59, 130, 246, 0.2);
    color: #3b82f6;
}

.severity-badge.warning[b-4ynhe2dopd] {
    background: rgba(245, 158, 11, 0.2);
    color: #f59e0b;
}

.severity-badge.critical[b-4ynhe2dopd] {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

.category-badge.auth[b-4ynhe2dopd] {
    background: rgba(59, 130, 246, 0.2);
    color: #3b82f6;
}

.category-badge.admin[b-4ynhe2dopd] {
    background: rgba(139, 92, 246, 0.2);
    color: #8b5cf6;
}

.category-badge.security[b-4ynhe2dopd] {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

.category-badge.entity[b-4ynhe2dopd] {
    background: rgba(34, 197, 94, 0.2);
    color: #22c55e;
}

.action-cell[b-4ynhe2dopd] {
    font-family: monospace;
    font-size: 0.8125rem;
}

.description-cell[b-4ynhe2dopd] {
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-cell[b-4ynhe2dopd] {
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.time-cell[b-4ynhe2dopd] {
    white-space: nowrap;
    color: var(--lb-text-muted, #888);
}

.btn-details[b-4ynhe2dopd] {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    background: var(--lb-bg-elevated-2, #222);
    border: 1px solid var(--lb-border-default, #333);
    border-radius: 4px;
    color: var(--lb-text-secondary, #ccc);
    cursor: pointer;
}

.btn-details:hover[b-4ynhe2dopd] {
    background: var(--lb-accent-primary, #d4af37);
    color: var(--lb-text-inverse, #0f0f0f);
    border-color: var(--lb-accent-primary, #d4af37);
}

/* Pagination */
.pagination[b-4ynhe2dopd] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    border-top: 1px solid var(--lb-border-default, #333);
}

.page-info[b-4ynhe2dopd] {
    font-size: 0.875rem;
    color: var(--lb-text-muted, #888);
}

/* Empty State */
.empty-state[b-4ynhe2dopd] {
    text-align: center;
    padding: 3rem 2rem;
    color: var(--lb-text-muted, #888);
}

.empty-state h4[b-4ynhe2dopd] {
    margin: 0 0 0.5rem 0;
    color: var(--lb-text-secondary, #ccc);
}

/* Loading State */
.loading-state[b-4ynhe2dopd] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    gap: 1rem;
    color: var(--lb-text-muted, #888);
}

.spinner[b-4ynhe2dopd] {
    width: 40px;
    height: 40px;
    border: 3px solid var(--lb-border-default, #333);
    border-top-color: var(--lb-accent-primary, #d4af37);
    border-radius: 50%;
    animation: spin-b-4ynhe2dopd 0.8s linear infinite;
}

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

/* Modal */
.modal-overlay[b-4ynhe2dopd] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
}

.modal-content[b-4ynhe2dopd] {
    background: var(--lb-bg-elevated, #1a1a1a);
    border: 1px solid var(--lb-border-default, #333);
    border-radius: 12px;
    width: 100%;
    max-width: 700px;
    max-height: 90vh;
    overflow-y: auto;
}

.modal-header[b-4ynhe2dopd] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--lb-border-default, #333);
}

.modal-header h3[b-4ynhe2dopd] {
    margin: 0;
    font-size: 1.25rem;
    color: var(--lb-text-primary, #e0e0e0);
}

.close-btn[b-4ynhe2dopd] {
    background: transparent;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--lb-text-muted, #888);
    padding: 0;
    line-height: 1;
}

.close-btn:hover[b-4ynhe2dopd] {
    color: var(--lb-text-primary, #e0e0e0);
}

.modal-body[b-4ynhe2dopd] {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.detail-section[b-4ynhe2dopd] {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--lb-border-default, #333);
}

.detail-section h4[b-4ynhe2dopd] {
    margin: 0 0 0.75rem 0;
    font-size: 0.875rem;
    color: var(--lb-text-muted, #888);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.detail-row[b-4ynhe2dopd] {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.detail-row.full-width[b-4ynhe2dopd] {
    flex-direction: column;
    gap: 0.5rem;
}

.detail-row label[b-4ynhe2dopd] {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--lb-text-muted, #888);
    min-width: 100px;
    flex-shrink: 0;
}

.detail-row span[b-4ynhe2dopd],
.detail-row pre[b-4ynhe2dopd] {
    color: var(--lb-text-secondary, #ccc);
    word-break: break-word;
}

.monospace[b-4ynhe2dopd] {
    font-family: monospace;
    font-size: 0.875rem;
}

.description-full[b-4ynhe2dopd] {
    background: var(--lb-bg-elevated-2, #222);
    padding: 0.75rem;
    border-radius: 6px;
    font-size: 0.875rem;
    white-space: pre-wrap;
    word-break: break-word;
    margin: 0;
}

.json-value[b-4ynhe2dopd] {
    background: var(--lb-bg-elevated-2, #222);
    padding: 0.75rem;
    border-radius: 6px;
    font-family: monospace;
    font-size: 0.75rem;
    white-space: pre-wrap;
    word-break: break-word;
    margin: 0;
    max-height: 200px;
    overflow-y: auto;
}

.user-agent[b-4ynhe2dopd] {
    font-size: 0.75rem;
    word-break: break-all;
}

/* Buttons */
.btn[b-4ynhe2dopd] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-weight: 500;
    cursor: pointer;
    border: none;
    transition: all 0.15s;
    font-size: 0.875rem;
}

.btn:disabled[b-4ynhe2dopd] {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-secondary[b-4ynhe2dopd] {
    background: var(--lb-bg-elevated-2, #222);
    color: var(--lb-text-primary, #e0e0e0);
    border: 1px solid var(--lb-border-default, #333);
}

.btn-secondary:hover:not(:disabled)[b-4ynhe2dopd] {
    background: var(--lb-bg-elevated-3, #333);
}

.btn-sm[b-4ynhe2dopd] {
    padding: 0.375rem 0.75rem;
    font-size: 0.8125rem;
}

/* Responsive */
@media (max-width: 768px) {
    .audit-logs-page[b-4ynhe2dopd] {
        padding: 1rem;
    }

    .page-header[b-4ynhe2dopd] {
        flex-direction: column;
    }

    .stats-grid[b-4ynhe2dopd] {
        grid-template-columns: repeat(2, 1fr);
    }

    .filters[b-4ynhe2dopd] {
        flex-direction: column;
    }

    .filter-group[b-4ynhe2dopd] {
        width: 100%;
    }

    .filter-group select[b-4ynhe2dopd],
    .filter-group input[b-4ynhe2dopd] {
        width: 100%;
    }

    .logs-table[b-4ynhe2dopd] {
        font-size: 0.8125rem;
    }

    .logs-table th[b-4ynhe2dopd],
    .logs-table td[b-4ynhe2dopd] {
        padding: 0.5rem;
    }
}
/* /Components/Admin/ErrorLogs.razor.rz.scp.css */
.error-logs-page[b-nte3jd3baq] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 2rem;
}

.page-header[b-nte3jd3baq] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 2rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.back-link[b-nte3jd3baq] {
    color: var(--lb-text-muted, #888);
    text-decoration: none;
    font-size: 0.875rem;
    display: block;
    margin-bottom: 0.5rem;
}

.back-link:hover[b-nte3jd3baq] {
    color: var(--lb-accent-primary, #d4af37);
}

.page-header h1[b-nte3jd3baq] {
    margin: 0;
    font-size: 1.75rem;
    color: var(--lb-text-primary, #e0e0e0);
}

.text-muted[b-nte3jd3baq] {
    color: var(--lb-text-muted, #888);
    margin: 0.25rem 0 0 0;
    font-size: 0.875rem;
}

.header-actions[b-nte3jd3baq] {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

/* Stats Grid */
.stats-grid[b-nte3jd3baq] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.stat-card[b-nte3jd3baq] {
    background: var(--lb-bg-elevated, #1a1a1a);
    border: 1px solid var(--lb-border-default, #333);
    border-radius: 8px;
    padding: 1.25rem;
    cursor: pointer;
    transition: all 0.15s;
}

.stat-card:hover[b-nte3jd3baq] {
    border-color: var(--lb-accent-primary, #d4af37);
}

.stat-card.active[b-nte3jd3baq] {
    border-color: var(--lb-accent-primary, #d4af37);
    background: var(--lb-bg-elevated-2, #222);
}

.stat-card.errors .stat-value[b-nte3jd3baq] {
    color: #ef4444;
}

.stat-card.warnings .stat-value[b-nte3jd3baq] {
    color: #f59e0b;
}

.stat-value[b-nte3jd3baq] {
    font-size: 2rem;
    font-weight: 700;
    color: var(--lb-text-primary, #e0e0e0);
}

.stat-label[b-nte3jd3baq] {
    font-size: 0.875rem;
    color: var(--lb-text-secondary, #ccc);
    margin-top: 0.25rem;
}

.stat-sub[b-nte3jd3baq] {
    font-size: 0.75rem;
    color: var(--lb-text-muted, #888);
    margin-top: 0.25rem;
}

/* Filters */
.filters[b-nte3jd3baq] {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    align-items: flex-end;
    background: var(--lb-bg-elevated, #1a1a1a);
    border-radius: 8px;
    padding: 1rem;
    border: 1px solid var(--lb-border-default, #333);
}

.filter-group[b-nte3jd3baq] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.filter-group label[b-nte3jd3baq] {
    font-size: 0.75rem;
    color: var(--lb-text-muted, #888);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.filter-group select[b-nte3jd3baq],
.filter-group input[b-nte3jd3baq] {
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--lb-border-default, #333);
    border-radius: 4px;
    background: var(--lb-bg-elevated-2, #222);
    color: var(--lb-text-primary, #e0e0e0);
    font-size: 0.875rem;
    min-width: 140px;
}

.filter-group.search[b-nte3jd3baq] {
    flex: 1;
    min-width: 200px;
}

.filter-group.search input[b-nte3jd3baq] {
    width: 100%;
}

/* Logs Table */
.logs-table-container[b-nte3jd3baq] {
    background: var(--lb-bg-elevated, #1a1a1a);
    border-radius: 8px;
    border: 1px solid var(--lb-border-default, #333);
    overflow: hidden;
}

.logs-table[b-nte3jd3baq] {
    width: 100%;
    border-collapse: collapse;
}

.logs-table thead[b-nte3jd3baq] {
    background: var(--lb-bg-elevated-2, #222);
}

.logs-table th[b-nte3jd3baq] {
    padding: 0.75rem 1rem;
    text-align: left;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--lb-text-muted, #888);
    border-bottom: 1px solid var(--lb-border-default, #333);
}

.logs-table td[b-nte3jd3baq] {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--lb-border-default, #333);
    font-size: 0.875rem;
    color: var(--lb-text-secondary, #ccc);
    vertical-align: top;
}

.log-row:hover[b-nte3jd3baq] {
    background: var(--lb-bg-elevated-2, #222);
}

.log-row.error[b-nte3jd3baq] {
    border-left: 3px solid #ef4444;
}

.log-row.warning[b-nte3jd3baq] {
    border-left: 3px solid #f59e0b;
}

.level-badge[b-nte3jd3baq] {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

.level-badge.error[b-nte3jd3baq] {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

.level-badge.warning[b-nte3jd3baq] {
    background: rgba(245, 158, 11, 0.2);
    color: #f59e0b;
}

.time-cell[b-nte3jd3baq] {
    white-space: nowrap;
    color: var(--lb-text-muted, #888);
}

.source-cell[b-nte3jd3baq] {
    font-family: monospace;
    font-size: 0.8125rem;
    color: var(--lb-text-muted, #888);
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.message-cell[b-nte3jd3baq] {
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-cell[b-nte3jd3baq] {
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.btn-details[b-nte3jd3baq] {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    background: var(--lb-bg-elevated-2, #222);
    border: 1px solid var(--lb-border-default, #333);
    border-radius: 4px;
    color: var(--lb-text-secondary, #ccc);
    cursor: pointer;
}

.btn-details:hover[b-nte3jd3baq] {
    background: var(--lb-accent-primary, #d4af37);
    color: var(--lb-text-inverse, #0f0f0f);
    border-color: var(--lb-accent-primary, #d4af37);
}

/* Pagination */
.pagination[b-nte3jd3baq] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    border-top: 1px solid var(--lb-border-default, #333);
}

.page-info[b-nte3jd3baq] {
    font-size: 0.875rem;
    color: var(--lb-text-muted, #888);
}

/* Empty State */
.empty-state[b-nte3jd3baq] {
    text-align: center;
    padding: 3rem 2rem;
    color: var(--lb-text-muted, #888);
}

.empty-state h4[b-nte3jd3baq] {
    margin: 0 0 0.5rem 0;
    color: var(--lb-text-secondary, #ccc);
}

/* Loading State */
.loading-state[b-nte3jd3baq] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    gap: 1rem;
    color: var(--lb-text-muted, #888);
}

.spinner[b-nte3jd3baq] {
    width: 40px;
    height: 40px;
    border: 3px solid var(--lb-border-default, #333);
    border-top-color: var(--lb-accent-primary, #d4af37);
    border-radius: 50%;
    animation: spin-b-nte3jd3baq 0.8s linear infinite;
}

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

/* Modal */
.modal-overlay[b-nte3jd3baq] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
}

.modal-content[b-nte3jd3baq] {
    background: var(--lb-bg-elevated, #1a1a1a);
    border: 1px solid var(--lb-border-default, #333);
    border-radius: 12px;
    width: 100%;
    max-width: 800px;
    max-height: 90vh;
    overflow-y: auto;
}

.modal-header[b-nte3jd3baq] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--lb-border-default, #333);
}

.modal-header h3[b-nte3jd3baq] {
    margin: 0;
    font-size: 1.25rem;
    color: var(--lb-text-primary, #e0e0e0);
}

.close-btn[b-nte3jd3baq] {
    background: transparent;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--lb-text-muted, #888);
    padding: 0;
    line-height: 1;
}

.close-btn:hover[b-nte3jd3baq] {
    color: var(--lb-text-primary, #e0e0e0);
}

.modal-body[b-nte3jd3baq] {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.detail-row[b-nte3jd3baq] {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.detail-row.full-width[b-nte3jd3baq] {
    flex-direction: column;
    gap: 0.5rem;
}

.detail-row label[b-nte3jd3baq] {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--lb-text-muted, #888);
    min-width: 100px;
    flex-shrink: 0;
}

.detail-row span[b-nte3jd3baq],
.detail-row pre[b-nte3jd3baq] {
    color: var(--lb-text-secondary, #ccc);
    word-break: break-word;
}

.source-full[b-nte3jd3baq] {
    font-family: monospace;
    font-size: 0.875rem;
}

.message-full[b-nte3jd3baq] {
    background: var(--lb-bg-elevated-2, #222);
    padding: 1rem;
    border-radius: 6px;
    font-size: 0.875rem;
    white-space: pre-wrap;
    word-break: break-word;
    margin: 0;
    max-height: 150px;
    overflow-y: auto;
}

.exception-type[b-nte3jd3baq] {
    font-family: monospace;
    color: #ef4444;
}

.stack-trace[b-nte3jd3baq] {
    background: var(--lb-bg-elevated-2, #222);
    padding: 1rem;
    border-radius: 6px;
    font-family: monospace;
    font-size: 0.75rem;
    white-space: pre-wrap;
    word-break: break-word;
    margin: 0;
    max-height: 300px;
    overflow-y: auto;
    color: #ef4444;
}

.browser-info[b-nte3jd3baq] {
    font-size: 0.8125rem;
    word-break: break-all;
}

/* Confirm Modal */
.confirm-modal[b-nte3jd3baq] {
    max-width: 400px;
    text-align: center;
    padding: 2rem;
}

.confirm-modal h3[b-nte3jd3baq] {
    margin: 0 0 1rem 0;
    color: var(--lb-text-primary, #e0e0e0);
}

.confirm-modal p[b-nte3jd3baq] {
    color: var(--lb-text-secondary, #ccc);
    margin-bottom: 1.5rem;
}

.modal-actions[b-nte3jd3baq] {
    display: flex;
    justify-content: center;
    gap: 1rem;
}

/* Buttons */
.btn[b-nte3jd3baq] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-weight: 500;
    cursor: pointer;
    border: none;
    transition: all 0.15s;
    font-size: 0.875rem;
}

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

.btn-secondary[b-nte3jd3baq] {
    background: var(--lb-bg-elevated-2, #222);
    color: var(--lb-text-primary, #e0e0e0);
    border: 1px solid var(--lb-border-default, #333);
}

.btn-secondary:hover:not(:disabled)[b-nte3jd3baq] {
    background: var(--lb-bg-elevated-3, #333);
}

.btn-warning[b-nte3jd3baq] {
    background: #f59e0b;
    color: #000;
}

.btn-warning:hover:not(:disabled)[b-nte3jd3baq] {
    background: #d97706;
}

.btn-danger[b-nte3jd3baq] {
    background: #ef4444;
    color: #fff;
}

.btn-danger:hover:not(:disabled)[b-nte3jd3baq] {
    background: #dc2626;
}

.btn-sm[b-nte3jd3baq] {
    padding: 0.375rem 0.75rem;
    font-size: 0.8125rem;
}

/* Responsive */
@media (max-width: 768px) {
    .error-logs-page[b-nte3jd3baq] {
        padding: 1rem;
    }

    .page-header[b-nte3jd3baq] {
        flex-direction: column;
    }

    .stats-grid[b-nte3jd3baq] {
        grid-template-columns: repeat(2, 1fr);
    }

    .filters[b-nte3jd3baq] {
        flex-direction: column;
    }

    .filter-group[b-nte3jd3baq] {
        width: 100%;
    }

    .filter-group select[b-nte3jd3baq],
    .filter-group input[b-nte3jd3baq] {
        width: 100%;
    }

    .logs-table[b-nte3jd3baq] {
        font-size: 0.8125rem;
    }

    .logs-table th[b-nte3jd3baq],
    .logs-table td[b-nte3jd3baq] {
        padding: 0.5rem;
    }
}
/* /Components/Admin/FeatureFlags.razor.rz.scp.css */
.feature-flags-page[b-hzub5n505f] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
}

.page-header[b-hzub5n505f] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 2rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.back-link[b-hzub5n505f] {
    color: var(--lb-text-muted, #888);
    text-decoration: none;
    font-size: 0.875rem;
    display: block;
    margin-bottom: 0.5rem;
}

.back-link:hover[b-hzub5n505f] {
    color: var(--lb-accent-primary, #d4af37);
}

.page-header h1[b-hzub5n505f] {
    margin: 0;
    font-size: 1.75rem;
    color: var(--lb-text-primary, #e0e0e0);
}

.text-muted[b-hzub5n505f] {
    color: var(--lb-text-muted, #888);
    margin: 0.25rem 0 0 0;
    font-size: 0.875rem;
}

.header-actions[b-hzub5n505f] {
    display: flex;
    gap: 0.75rem;
}

/* Loading & Empty States */
.loading-state[b-hzub5n505f],
.empty-state[b-hzub5n505f] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    gap: 1rem;
    color: var(--lb-text-muted, #888);
}

.spinner[b-hzub5n505f] {
    width: 40px;
    height: 40px;
    border: 3px solid var(--lb-border-default, #333);
    border-top-color: var(--lb-accent-primary, #d4af37);
    border-radius: 50%;
    animation: spin-b-hzub5n505f 0.8s linear infinite;
}

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

.empty-icon[b-hzub5n505f] {
    font-size: 4rem;
    opacity: 0.5;
}

.empty-state h3[b-hzub5n505f] {
    margin: 0;
    color: var(--lb-text-primary, #e0e0e0);
}

.empty-state p[b-hzub5n505f] {
    margin: 0;
}

/* Flags Grid */
.flags-grid[b-hzub5n505f] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
    gap: 1.5rem;
}

.flag-card[b-hzub5n505f] {
    background: var(--lb-bg-elevated, #1a1a1a);
    border: 1px solid var(--lb-border-default, #333);
    border-radius: 12px;
    padding: 1.25rem;
    border-left: 4px solid;
    transition: all 0.2s;
}

.flag-card.enabled[b-hzub5n505f] {
    border-left-color: #22c55e;
}

.flag-card.disabled[b-hzub5n505f] {
    border-left-color: #6b7280;
}

.flag-header[b-hzub5n505f] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.flag-status[b-hzub5n505f] {
    flex-shrink: 0;
}

.toggle-btn[b-hzub5n505f] {
    width: 48px;
    height: 26px;
    border-radius: 13px;
    border: none;
    cursor: pointer;
    position: relative;
    transition: background 0.2s;
}

.toggle-btn.off[b-hzub5n505f] {
    background: #374151;
}

.toggle-btn.on[b-hzub5n505f] {
    background: #22c55e;
}

.toggle-slider[b-hzub5n505f] {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    background: white;
    border-radius: 50%;
    transition: transform 0.2s;
}

.toggle-btn.on .toggle-slider[b-hzub5n505f] {
    transform: translateX(22px);
}

.flag-info[b-hzub5n505f] {
    flex: 1;
    min-width: 0;
}

.flag-info h3[b-hzub5n505f] {
    margin: 0 0 0.25rem 0;
    font-size: 1rem;
    color: var(--lb-text-primary, #e0e0e0);
}

.flag-key[b-hzub5n505f] {
    font-size: 0.75rem;
    color: var(--lb-accent-primary, #d4af37);
    background: var(--lb-bg-elevated-2, #222);
    padding: 0.125rem 0.375rem;
    border-radius: 4px;
}

.flag-actions[b-hzub5n505f] {
    display: flex;
    gap: 0.25rem;
}

.btn-icon[b-hzub5n505f] {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0.375rem;
    border-radius: 4px;
    font-size: 1rem;
    opacity: 0.6;
    transition: all 0.2s;
}

.btn-icon:hover[b-hzub5n505f] {
    opacity: 1;
    background: var(--lb-bg-elevated-2, #222);
}

.btn-icon.danger:hover[b-hzub5n505f] {
    background: rgba(239, 68, 68, 0.2);
}

.flag-description[b-hzub5n505f] {
    margin: 0 0 1rem 0;
    font-size: 0.875rem;
    color: var(--lb-text-secondary, #ccc);
    line-height: 1.4;
}

.flag-details[b-hzub5n505f] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.75rem 0;
    border-top: 1px solid var(--lb-border-default, #333);
}

.detail-item[b-hzub5n505f] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.8125rem;
}

.detail-label[b-hzub5n505f] {
    color: var(--lb-text-muted, #888);
}

.detail-value[b-hzub5n505f] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--lb-text-secondary, #ccc);
}

.progress-bar[b-hzub5n505f] {
    width: 80px;
    height: 6px;
    background: var(--lb-bg-elevated-2, #222);
    border-radius: 3px;
    overflow: hidden;
}

.progress-fill[b-hzub5n505f] {
    height: 100%;
    background: var(--lb-accent-primary, #d4af37);
    transition: width 0.3s;
}

.badge[b-hzub5n505f] {
    font-size: 0.6875rem;
    padding: 0.125rem 0.375rem;
    border-radius: 4px;
    font-weight: 500;
}

.badge.role[b-hzub5n505f] {
    background: rgba(99, 102, 241, 0.2);
    color: #818cf8;
}

.badge.env[b-hzub5n505f] {
    background: rgba(34, 197, 94, 0.2);
    color: #22c55e;
}

.flag-footer[b-hzub5n505f] {
    padding-top: 0.75rem;
    border-top: 1px solid var(--lb-border-default, #333);
}

.updated-info[b-hzub5n505f] {
    font-size: 0.75rem;
    color: var(--lb-text-muted, #888);
}

/* Buttons */
.btn[b-hzub5n505f] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-weight: 500;
    cursor: pointer;
    border: none;
    transition: all 0.15s;
    font-size: 0.875rem;
}

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

.btn-primary[b-hzub5n505f] {
    background: var(--lb-accent-primary, #d4af37);
    color: #000;
}

.btn-primary:hover:not(:disabled)[b-hzub5n505f] {
    filter: brightness(1.1);
}

.btn-secondary[b-hzub5n505f] {
    background: var(--lb-bg-elevated-2, #222);
    color: var(--lb-text-primary, #e0e0e0);
    border: 1px solid var(--lb-border-default, #333);
}

.btn-secondary:hover:not(:disabled)[b-hzub5n505f] {
    background: var(--lb-bg-elevated-3, #333);
}

.btn-danger[b-hzub5n505f] {
    background: #ef4444;
    color: white;
}

.btn-danger:hover:not(:disabled)[b-hzub5n505f] {
    background: #dc2626;
}

/* Modal */
.modal-overlay[b-hzub5n505f] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
}

.modal-content[b-hzub5n505f] {
    background: var(--lb-bg-elevated, #1a1a1a);
    border: 1px solid var(--lb-border-default, #333);
    border-radius: 12px;
    width: 100%;
    max-width: 500px;
    max-height: 90vh;
    overflow-y: auto;
}

.modal-content.small[b-hzub5n505f] {
    max-width: 400px;
}

.modal-header[b-hzub5n505f] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--lb-border-default, #333);
}

.modal-header h3[b-hzub5n505f] {
    margin: 0;
    font-size: 1.125rem;
    color: var(--lb-text-primary, #e0e0e0);
}

.close-btn[b-hzub5n505f] {
    background: transparent;
    border: none;
    color: var(--lb-text-muted, #888);
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

.close-btn:hover[b-hzub5n505f] {
    color: var(--lb-text-primary, #e0e0e0);
}

.modal-body[b-hzub5n505f] {
    padding: 1.25rem;
}

.modal-footer[b-hzub5n505f] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--lb-border-default, #333);
}

/* Forms */
.form-group[b-hzub5n505f] {
    margin-bottom: 1rem;
}

.form-group label[b-hzub5n505f] {
    display: block;
    font-size: 0.875rem;
    color: var(--lb-text-secondary, #ccc);
    margin-bottom: 0.375rem;
}

.form-group input[type="text"][b-hzub5n505f],
.form-group textarea[b-hzub5n505f],
.form-group select[b-hzub5n505f] {
    width: 100%;
    padding: 0.5rem 0.75rem;
    background: var(--lb-bg-elevated-2, #222);
    border: 1px solid var(--lb-border-default, #333);
    border-radius: 6px;
    color: var(--lb-text-primary, #e0e0e0);
    font-size: 0.875rem;
}

.form-group textarea[b-hzub5n505f] {
    min-height: 80px;
    resize: vertical;
}

.form-group input:focus[b-hzub5n505f],
.form-group textarea:focus[b-hzub5n505f],
.form-group select:focus[b-hzub5n505f] {
    outline: none;
    border-color: var(--lb-accent-primary, #d4af37);
}

.form-group small[b-hzub5n505f] {
    display: block;
    font-size: 0.75rem;
    color: var(--lb-text-muted, #888);
    margin-top: 0.25rem;
}

.form-row[b-hzub5n505f] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

/* Switch */
.switch[b-hzub5n505f] {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 26px;
}

.switch input[b-hzub5n505f] {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider[b-hzub5n505f] {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background: #374151;
    border-radius: 13px;
    transition: 0.2s;
}

.slider[b-hzub5n505f]:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 3px;
    bottom: 3px;
    background: white;
    border-radius: 50%;
    transition: 0.2s;
}

.switch input:checked + .slider[b-hzub5n505f] {
    background: #22c55e;
}

.switch input:checked + .slider[b-hzub5n505f]:before {
    transform: translateX(22px);
}

/* Range */
.range-input[b-hzub5n505f] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.range-input input[type="range"][b-hzub5n505f] {
    flex: 1;
    height: 6px;
    background: var(--lb-bg-elevated-2, #222);
    border-radius: 3px;
    -webkit-appearance: none;
}

.range-input input[type="range"][b-hzub5n505f]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    background: var(--lb-accent-primary, #d4af37);
    border-radius: 50%;
    cursor: pointer;
}

.range-input span[b-hzub5n505f] {
    min-width: 40px;
    text-align: right;
    font-size: 0.875rem;
    color: var(--lb-text-secondary, #ccc);
}

.error-message[b-hzub5n505f] {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 6px;
    padding: 0.75rem;
    color: #ef4444;
    font-size: 0.875rem;
    margin-top: 1rem;
}

.warning[b-hzub5n505f] {
    color: #f59e0b;
    font-size: 0.875rem;
}

/* Responsive */
@media (max-width: 768px) {
    .feature-flags-page[b-hzub5n505f] {
        padding: 1rem;
    }

    .page-header[b-hzub5n505f] {
        flex-direction: column;
    }

    .flags-grid[b-hzub5n505f] {
        grid-template-columns: 1fr;
    }

    .form-row[b-hzub5n505f] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Admin/Moderation/ModerationQueue.razor.rz.scp.css */
.moderation-page[b-qw8gjzm7wg] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 2rem;
}

.page-header[b-qw8gjzm7wg] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 2rem;
}

.back-link[b-qw8gjzm7wg] {
    color: var(--lb-text-muted, #888);
    text-decoration: none;
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
    display: inline-block;
}

    .back-link:hover[b-qw8gjzm7wg] {
        color: var(--lb-primary, #6366f1);
    }

.page-header h1[b-qw8gjzm7wg] {
    margin: 0;
    font-size: 2rem;
}

.btn-refresh[b-qw8gjzm7wg] {
    background: var(--lb-surface, #1a1a2e);
    border: 1px solid var(--lb-border, #333);
    color: var(--lb-text, #fff);
    padding: 0.5rem 1rem;
    border-radius: 8px;
    cursor: pointer;
}

    .btn-refresh:hover[b-qw8gjzm7wg] {
        background: var(--lb-primary, #6366f1);
    }

.loading-state[b-qw8gjzm7wg] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 3rem;
    color: var(--lb-text-muted, #888);
}

.spinner[b-qw8gjzm7wg] {
    width: 40px;
    height: 40px;
    border: 3px solid var(--lb-border, #333);
    border-top-color: var(--lb-primary, #6366f1);
    border-radius: 50%;
    animation: spin-b-qw8gjzm7wg 1s linear infinite;
    margin-bottom: 1rem;
}

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

/* Stats Grid */
.stats-grid[b-qw8gjzm7wg] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.stat-card[b-qw8gjzm7wg] {
    background: var(--lb-surface, #1a1a2e);
    border-radius: 12px;
    padding: 1.25rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    border: 2px solid transparent;
}

    .stat-card:hover[b-qw8gjzm7wg] {
        transform: translateY(-2px);
        border-color: var(--lb-primary, #6366f1);
    }

    .stat-card.critical[b-qw8gjzm7wg] {
        border-left: 4px solid #ef4444;
    }

    .stat-card.high[b-qw8gjzm7wg] {
        border-left: 4px solid #f59e0b;
    }

    .stat-card.normal[b-qw8gjzm7wg] {
        border-left: 4px solid #3b82f6;
    }

    .stat-card.auto[b-qw8gjzm7wg] {
        border-left: 4px solid #8b5cf6;
    }

    .stat-card.resolved[b-qw8gjzm7wg] {
        border-left: 4px solid #22c55e;
    }

.stat-icon[b-qw8gjzm7wg] {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

.stat-value[b-qw8gjzm7wg] {
    font-size: 2rem;
    font-weight: 700;
}

.stat-label[b-qw8gjzm7wg] {
    font-size: 0.85rem;
    color: var(--lb-text-muted, #888);
}

/* Content Status */
.content-status[b-qw8gjzm7wg] {
    background: var(--lb-surface, #1a1a2e);
    border-radius: 12px;
    padding: 1.25rem;
    margin-bottom: 2rem;
}

    .content-status h3[b-qw8gjzm7wg] {
        margin: 0 0 1rem 0;
        font-size: 1rem;
        color: var(--lb-text-muted, #888);
    }

.status-pills[b-qw8gjzm7wg] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.status-pill[b-qw8gjzm7wg] {
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.85rem;
    background: var(--lb-background, #0f0f1a);
}

    .status-pill.illegal[b-qw8gjzm7wg] {
        color: #ef4444;
        border: 1px solid #ef4444;
    }

    .status-pill.review[b-qw8gjzm7wg] {
        color: #f59e0b;
        border: 1px solid #f59e0b;
    }

    .status-pill.copyright[b-qw8gjzm7wg] {
        color: #3b82f6;
        border: 1px solid #3b82f6;
    }

    .status-pill.pending[b-qw8gjzm7wg] {
        color: #8b5cf6;
        border: 1px solid #8b5cf6;
    }

/* Filters */
.filters[b-qw8gjzm7wg] {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.filter-group[b-qw8gjzm7wg] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

    .filter-group label[b-qw8gjzm7wg] {
        color: var(--lb-text-muted, #888);
        font-size: 0.9rem;
    }

    .filter-group select[b-qw8gjzm7wg] {
        background: var(--lb-surface, #1a1a2e);
        border: 1px solid var(--lb-border, #333);
        color: var(--lb-text, #fff);
        padding: 0.5rem 1rem;
        border-radius: 6px;
    }

/* Reports Table */
.reports-table-container[b-qw8gjzm7wg] {
    background: var(--lb-surface, #1a1a2e);
    border-radius: 12px;
    overflow: hidden;
}

.reports-table[b-qw8gjzm7wg] {
    width: 100%;
    border-collapse: collapse;
}

    .reports-table th[b-qw8gjzm7wg] {
        background: var(--lb-background, #0f0f1a);
        padding: 1rem;
        text-align: left;
        font-weight: 600;
        font-size: 0.85rem;
        text-transform: uppercase;
        color: var(--lb-text-muted, #888);
    }

    .reports-table td[b-qw8gjzm7wg] {
        padding: 1rem;
        border-top: 1px solid var(--lb-border, #333);
    }

    .reports-table tr.severity-5[b-qw8gjzm7wg] {
        background: rgba(239, 68, 68, 0.1);
    }

    .reports-table tr.severity-4[b-qw8gjzm7wg] {
        background: rgba(245, 158, 11, 0.1);
    }

.priority-badge[b-qw8gjzm7wg] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
}

    .priority-badge.severity-5[b-qw8gjzm7wg] {
        background: #ef4444;
        color: white;
    }

    .priority-badge.severity-4[b-qw8gjzm7wg] {
        background: #f59e0b;
        color: white;
    }

    .priority-badge.severity-3[b-qw8gjzm7wg] {
        background: #3b82f6;
        color: white;
    }

    .priority-badge.severity-2[b-qw8gjzm7wg] {
        background: #6b7280;
        color: white;
    }

    .priority-badge.severity-1[b-qw8gjzm7wg] {
        background: #374151;
        color: white;
    }

.reason-cell[b-qw8gjzm7wg] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.report-details[b-qw8gjzm7wg] {
    color: var(--lb-text-muted, #888);
    font-size: 0.8rem;
}

.status-badge[b-qw8gjzm7wg] {
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    text-transform: uppercase;
}

    .status-badge.status-pending[b-qw8gjzm7wg] {
        background: #f59e0b;
        color: #000;
    }

    .status-badge.status-reviewing[b-qw8gjzm7wg] {
        background: #3b82f6;
        color: white;
    }

    .status-badge.status-auto_actioned[b-qw8gjzm7wg] {
        background: #8b5cf6;
        color: white;
    }

    .status-badge.status-resolved[b-qw8gjzm7wg] {
        background: #22c55e;
        color: white;
    }

    .status-badge.status-dismissed[b-qw8gjzm7wg] {
        background: #6b7280;
        color: white;
    }

.report-count-badge[b-qw8gjzm7wg] {
    background: var(--lb-danger, #ef4444);
    color: white;
    padding: 0.25rem 0.5rem;
    border-radius: 10px;
    font-size: 0.75rem;
    font-weight: 600;
}

.action-buttons[b-qw8gjzm7wg] {
    display: flex;
    gap: 0.5rem;
}

.btn-action[b-qw8gjzm7wg] {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .btn-action.btn-review[b-qw8gjzm7wg] {
        background: var(--lb-primary, #6366f1);
    }

    .btn-action.btn-dismiss[b-qw8gjzm7wg] {
        background: var(--lb-surface-alt, #252540);
    }

    .btn-action:hover[b-qw8gjzm7wg] {
        opacity: 0.8;
    }

/* Empty State */
.empty-state[b-qw8gjzm7wg] {
    text-align: center;
    padding: 4rem 2rem;
    color: var(--lb-text-muted, #888);
}

.empty-icon[b-qw8gjzm7wg] {
    font-size: 4rem;
    margin-bottom: 1rem;
}

.empty-state h4[b-qw8gjzm7wg] {
    margin: 0 0 0.5rem 0;
    color: var(--lb-text, #fff);
}

/* Pagination */
.pagination[b-qw8gjzm7wg] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    border-top: 1px solid var(--lb-border, #333);
}

    .pagination button[b-qw8gjzm7wg] {
        background: var(--lb-surface-alt, #252540);
        border: none;
        color: var(--lb-text, #fff);
        padding: 0.5rem 1rem;
        border-radius: 6px;
        cursor: pointer;
    }

        .pagination button:disabled[b-qw8gjzm7wg] {
            opacity: 0.5;
            cursor: not-allowed;
        }
/* /Components/Admin/Moderation/ReportReview.razor.rz.scp.css */
.review-page[b-sl55kuh6x2] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 2rem;
}

.page-header[b-sl55kuh6x2] {
    margin-bottom: 2rem;
}

.back-link[b-sl55kuh6x2] {
    color: var(--lb-text-muted, #888);
    text-decoration: none;
    font-size: 0.9rem;
}

    .back-link:hover[b-sl55kuh6x2] {
        color: var(--lb-primary, #6366f1);
    }

.page-header h1[b-sl55kuh6x2] {
    margin: 0.5rem 0 0 0;
    font-size: 1.75rem;
}

.loading-state[b-sl55kuh6x2], .error-state[b-sl55kuh6x2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 4rem;
    text-align: center;
}

.spinner[b-sl55kuh6x2] {
    width: 40px;
    height: 40px;
    border: 3px solid var(--lb-border, #333);
    border-top-color: var(--lb-primary, #6366f1);
    border-radius: 50%;
    animation: spin-b-sl55kuh6x2 1s linear infinite;
    margin-bottom: 1rem;
}

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

.error-icon[b-sl55kuh6x2] {
    font-size: 4rem;
    margin-bottom: 1rem;
}

.btn-back[b-sl55kuh6x2] {
    margin-top: 1rem;
    padding: 0.75rem 1.5rem;
    background: var(--lb-primary, #6366f1);
    color: white;
    text-decoration: none;
    border-radius: 8px;
}

/* Layout */
.review-layout[b-sl55kuh6x2] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}

@media (max-width: 1024px) {
    .review-layout[b-sl55kuh6x2] {
        grid-template-columns: 1fr;
    }
}

/* Cards */
.info-card[b-sl55kuh6x2], .details-card[b-sl55kuh6x2], .related-reports[b-sl55kuh6x2], .resolution-card[b-sl55kuh6x2], .content-card[b-sl55kuh6x2], .action-card[b-sl55kuh6x2] {
    background: var(--lb-surface, #1a1a2e);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

    .info-card.severity-5[b-sl55kuh6x2] {
        border-left: 4px solid #ef4444;
    }

    .info-card.severity-4[b-sl55kuh6x2] {
        border-left: 4px solid #f59e0b;
    }

    .info-card.severity-3[b-sl55kuh6x2] {
        border-left: 4px solid #3b82f6;
    }

.card-header[b-sl55kuh6x2] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--lb-border, #333);
}

    .card-header h3[b-sl55kuh6x2] {
        margin: 0;
        font-size: 1rem;
    }

.severity-badge[b-sl55kuh6x2] {
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

.status-badge[b-sl55kuh6x2] {
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    text-transform: uppercase;
}

    .status-badge.status-pending[b-sl55kuh6x2] {
        background: #f59e0b;
        color: #000;
    }

    .status-badge.status-auto_actioned[b-sl55kuh6x2] {
        background: #8b5cf6;
        color: white;
    }

    .status-badge.status-resolved[b-sl55kuh6x2] {
        background: #22c55e;
        color: white;
    }

.info-row[b-sl55kuh6x2] {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--lb-border, #222);
}

    .info-row:last-child[b-sl55kuh6x2] {
        border-bottom: none;
    }

    .info-row .label[b-sl55kuh6x2] {
        color: var(--lb-text-muted, #888);
    }

    .info-row.highlight[b-sl55kuh6x2] {
        background: rgba(239, 68, 68, 0.1);
        margin: 0.5rem -0.5rem;
        padding: 0.75rem;
        border-radius: 6px;
    }

.danger[b-sl55kuh6x2] {
    color: #ef4444;
}

/* Details Card */
.details-card h3[b-sl55kuh6x2] {
    margin: 0 0 1rem 0;
    font-size: 1rem;
}

.report-text[b-sl55kuh6x2] {
    background: var(--lb-background, #0f0f1a);
    padding: 1rem;
    border-radius: 8px;
    white-space: pre-wrap;
    margin: 0;
}

.evidence-link[b-sl55kuh6x2] {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--lb-border, #333);
}

    .evidence-link a[b-sl55kuh6x2] {
        color: var(--lb-primary, #6366f1);
        word-break: break-all;
    }

/* Auto-action Notice */
.auto-action-notice[b-sl55kuh6x2] {
    display: flex;
    gap: 1rem;
    background: rgba(139, 92, 246, 0.1);
    border: 1px solid #8b5cf6;
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1.5rem;
}

.notice-icon[b-sl55kuh6x2] {
    font-size: 1.5rem;
}

.notice-content strong[b-sl55kuh6x2] {
    color: #8b5cf6;
}

.notice-content p[b-sl55kuh6x2] {
    margin: 0.25rem 0 0 0;
    font-size: 0.9rem;
    color: var(--lb-text-muted, #888);
}

/* Related Reports */
.related-reports h3[b-sl55kuh6x2] {
    margin: 0 0 1rem 0;
    font-size: 1rem;
}

.reports-list[b-sl55kuh6x2] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.related-report[b-sl55kuh6x2] {
    background: var(--lb-background, #0f0f1a);
    padding: 1rem;
    border-radius: 8px;
    border: 1px solid var(--lb-border, #333);
}

    .related-report.current[b-sl55kuh6x2] {
        border-color: var(--lb-primary, #6366f1);
        background: rgba(99, 102, 241, 0.1);
    }

.report-header[b-sl55kuh6x2] {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    margin-bottom: 0.5rem;
}

.report-id[b-sl55kuh6x2] {
    color: var(--lb-text-muted, #888);
    font-size: 0.85rem;
}

.report-reason[b-sl55kuh6x2] {
    font-weight: 600;
}

.report-status[b-sl55kuh6x2] {
    margin-left: auto;
    padding: 0.125rem 0.375rem;
    border-radius: 4px;
    font-size: 0.7rem;
    text-transform: uppercase;
}

.report-snippet[b-sl55kuh6x2] {
    font-size: 0.9rem;
    color: var(--lb-text-muted, #888);
    margin: 0 0 0.5rem 0;
}

.report-meta[b-sl55kuh6x2] {
    display: flex;
    gap: 1rem;
    font-size: 0.8rem;
    color: var(--lb-text-muted, #666);
}

/* Content Preview */
.content-preview[b-sl55kuh6x2] {
    background: var(--lb-background, #0f0f1a);
    padding: 1.5rem;
    border-radius: 8px;
    min-height: 150px;
}

.moderation-status[b-sl55kuh6x2] {
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    text-transform: uppercase;
}

    .moderation-status.mod-hidden_illegal[b-sl55kuh6x2] {
        background: #ef4444;
        color: white;
    }

    .moderation-status.mod-hidden_review[b-sl55kuh6x2] {
        background: #f59e0b;
        color: black;
    }

    .moderation-status.mod-copyright_claim[b-sl55kuh6x2] {
        background: #3b82f6;
        color: white;
    }

    .moderation-status.mod-under_review[b-sl55kuh6x2] {
        background: #8b5cf6;
        color: white;
    }

.comment-preview .comment-content[b-sl55kuh6x2] {
    font-size: 1rem;
    margin-bottom: 1rem;
    white-space: pre-wrap;
}

.comment-meta[b-sl55kuh6x2], .entity-meta[b-sl55kuh6x2] {
    font-size: 0.85rem;
    color: var(--lb-text-muted, #888);
    display: flex;
    gap: 1rem;
}

.entity-preview h4[b-sl55kuh6x2] {
    margin: 0 0 0.5rem 0;
}

.view-link[b-sl55kuh6x2] {
    display: inline-block;
    margin-top: 1rem;
    color: var(--lb-primary, #6366f1);
    text-decoration: none;
}

    .view-link:hover[b-sl55kuh6x2] {
        text-decoration: underline;
    }

    .view-link.disabled[b-sl55kuh6x2] {
        color: var(--lb-text-muted, #888);
        cursor: not-allowed;
        font-style: italic;
    }

.no-content[b-sl55kuh6x2] {
    text-align: center;
    color: var(--lb-text-muted, #888);
    padding: 2rem;
}

/* Action Card */
.action-card h3[b-sl55kuh6x2] {
    margin: 0 0 1rem 0;
    font-size: 1rem;
}

.action-notes[b-sl55kuh6x2] {
    margin-bottom: 1.5rem;
}

    .action-notes label[b-sl55kuh6x2] {
        display: block;
        margin-bottom: 0.5rem;
        color: var(--lb-text-muted, #888);
        font-size: 0.9rem;
    }

    .action-notes textarea[b-sl55kuh6x2] {
        width: 100%;
        background: var(--lb-background, #0f0f1a);
        border: 1px solid var(--lb-border, #333);
        border-radius: 8px;
        padding: 0.75rem;
        color: var(--lb-text, #fff);
        font-family: inherit;
        resize: vertical;
    }

.action-buttons[b-sl55kuh6x2] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.btn-action[b-sl55kuh6x2] {
    padding: 0.75rem 1.25rem;
    border: none;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

    .btn-action:disabled[b-sl55kuh6x2] {
        opacity: 0.5;
        cursor: not-allowed;
    }

    .btn-action.btn-danger[b-sl55kuh6x2] {
        background: #ef4444;
        color: white;
    }

    .btn-action.btn-warning[b-sl55kuh6x2] {
        background: #f59e0b;
        color: black;
    }

    .btn-action.btn-success[b-sl55kuh6x2] {
        background: #22c55e;
        color: white;
    }

    .btn-action.btn-secondary[b-sl55kuh6x2] {
        background: var(--lb-surface-alt, #252540);
        color: var(--lb-text, #fff);
    }

    .btn-action.btn-outline[b-sl55kuh6x2] {
        background: transparent;
        border: 1px solid var(--lb-border, #333);
        color: var(--lb-text, #fff);
    }

    .btn-action:hover:not(:disabled)[b-sl55kuh6x2] {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    }

.restore-section[b-sl55kuh6x2] {
    margin-top: 1.5rem;
}

    .restore-section hr[b-sl55kuh6x2] {
        border: none;
        border-top: 1px solid var(--lb-border, #333);
        margin-bottom: 1rem;
    }

.restore-note[b-sl55kuh6x2] {
    font-size: 0.9rem;
    color: var(--lb-text-muted, #888);
    margin-bottom: 1rem;
}

.error-message[b-sl55kuh6x2] {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid #ef4444;
    color: #ef4444;
    padding: 0.75rem;
    border-radius: 8px;
    margin-bottom: 1rem;
}

.success-message[b-sl55kuh6x2] {
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid #22c55e;
    color: #22c55e;
    padding: 0.75rem;
    border-radius: 8px;
    margin-bottom: 1rem;
}
/* /Components/Admin/PerformanceMetrics.razor.rz.scp.css */
.metrics-page[b-44fks10aam] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
}

.page-header[b-44fks10aam] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 2rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.back-link[b-44fks10aam] {
    color: var(--lb-text-muted, #888);
    text-decoration: none;
    font-size: 0.875rem;
    display: block;
    margin-bottom: 0.5rem;
}

.back-link:hover[b-44fks10aam] {
    color: var(--lb-accent-primary, #d4af37);
}

.page-header h1[b-44fks10aam] {
    margin: 0;
    font-size: 1.75rem;
    color: var(--lb-text-primary, #e0e0e0);
}

.text-muted[b-44fks10aam] {
    color: var(--lb-text-muted, #888);
    margin: 0.25rem 0 0 0;
    font-size: 0.875rem;
}

.header-actions[b-44fks10aam] {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.auto-refresh[b-44fks10aam] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--lb-text-secondary, #ccc);
    cursor: pointer;
}

.auto-refresh input[b-44fks10aam] {
    cursor: pointer;
}

/* Stats Grid */
.stats-grid[b-44fks10aam] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.stat-card[b-44fks10aam] {
    background: var(--lb-bg-elevated, #1a1a1a);
    border: 1px solid var(--lb-border-default, #333);
    border-radius: 12px;
    padding: 1.5rem;
    text-align: center;
}

.stat-value[b-44fks10aam] {
    font-size: 2rem;
    font-weight: 700;
    color: var(--lb-text-primary, #e0e0e0);
    margin-bottom: 0.25rem;
}

.stat-label[b-44fks10aam] {
    font-size: 0.875rem;
    color: var(--lb-text-muted, #888);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Metrics Section */
.metrics-section[b-44fks10aam] {
    background: var(--lb-bg-elevated, #1a1a1a);
    border: 1px solid var(--lb-border-default, #333);
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.metrics-section h3[b-44fks10aam] {
    margin: 0 0 1rem 0;
    font-size: 1rem;
    color: var(--lb-text-primary, #e0e0e0);
}

/* Percentile Grid */
.percentile-grid[b-44fks10aam] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

.percentile-card[b-44fks10aam] {
    text-align: center;
    padding: 1rem;
    background: var(--lb-bg-elevated-2, #222);
    border-radius: 8px;
}

.percentile-card.highlight[b-44fks10aam] {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    border: 1px solid rgba(102, 126, 234, 0.3);
}

.percentile-value[b-44fks10aam] {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--lb-text-primary, #e0e0e0);
}

.percentile-value .unit[b-44fks10aam] {
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--lb-text-muted, #888);
    margin-left: 0.25rem;
}

.percentile-label[b-44fks10aam] {
    font-size: 0.75rem;
    color: var(--lb-text-muted, #888);
    margin-top: 0.25rem;
    text-transform: uppercase;
}

/* Response time colors */
.fast[b-44fks10aam] {
    color: #22c55e !important;
}

.normal[b-44fks10aam] {
    color: #f59e0b !important;
}

.slow[b-44fks10aam] {
    color: #f97316 !important;
}

.critical[b-44fks10aam] {
    color: #ef4444 !important;
}

/* Memory Grid */
.memory-grid[b-44fks10aam] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 1rem;
}

.memory-card[b-44fks10aam] {
    text-align: center;
    padding: 1rem;
    background: var(--lb-bg-elevated-2, #222);
    border-radius: 8px;
}

.memory-value[b-44fks10aam] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--lb-text-primary, #e0e0e0);
}

.memory-value .unit[b-44fks10aam] {
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--lb-text-muted, #888);
}

.memory-label[b-44fks10aam] {
    font-size: 0.75rem;
    color: var(--lb-text-muted, #888);
    margin-top: 0.25rem;
}

/* Mini Chart */
.mini-chart[b-44fks10aam] {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--lb-border-default, #333);
}

.chart-label[b-44fks10aam] {
    font-size: 0.75rem;
    color: var(--lb-text-muted, #888);
    margin-bottom: 0.5rem;
}

.sparkline[b-44fks10aam] {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 60px;
    padding: 0.5rem;
    background: var(--lb-bg-elevated-2, #222);
    border-radius: 6px;
}

.spark-bar[b-44fks10aam] {
    flex: 1;
    min-width: 2px;
    background: linear-gradient(180deg, #667eea 0%, #764ba2 100%);
    border-radius: 2px 2px 0 0;
    transition: opacity 0.2s;
}

.spark-bar:hover[b-44fks10aam] {
    opacity: 0.8;
}

.spark-bar.requests[b-44fks10aam] {
    background: linear-gradient(180deg, #22c55e 0%, #16a34a 100%);
}

.requests-chart[b-44fks10aam] {
    height: 80px;
}

/* Endpoints Table */
.endpoints-table[b-44fks10aam] {
    overflow-x: auto;
}

.endpoints-table table[b-44fks10aam] {
    width: 100%;
    border-collapse: collapse;
}

.endpoints-table th[b-44fks10aam],
.endpoints-table td[b-44fks10aam] {
    padding: 0.75rem;
    text-align: left;
    border-bottom: 1px solid var(--lb-border-default, #333);
}

.endpoints-table th[b-44fks10aam] {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--lb-text-muted, #888);
    font-weight: 600;
}

.endpoints-table td[b-44fks10aam] {
    font-size: 0.875rem;
    color: var(--lb-text-secondary, #ccc);
}

.endpoints-table tr:hover[b-44fks10aam] {
    background: var(--lb-bg-elevated-2, #222);
}

.endpoints-table tr.has-errors[b-44fks10aam] {
    background: rgba(239, 68, 68, 0.05);
}

.endpoint-path code[b-44fks10aam] {
    font-size: 0.8125rem;
    color: var(--lb-accent-primary, #d4af37);
    background: var(--lb-bg-elevated-2, #222);
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
}

.numeric[b-44fks10aam] {
    text-align: right;
    font-family: monospace;
}

.error-count[b-44fks10aam] {
    color: #ef4444;
}

.no-errors[b-44fks10aam] {
    color: var(--lb-text-muted, #888);
}

/* Footer */
.footer-info[b-44fks10aam] {
    display: flex;
    justify-content: space-between;
    padding: 1rem;
    font-size: 0.75rem;
    color: var(--lb-text-muted, #888);
}

/* Loading State */
.loading-state[b-44fks10aam] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    gap: 1rem;
    color: var(--lb-text-muted, #888);
}

.spinner[b-44fks10aam] {
    width: 40px;
    height: 40px;
    border: 3px solid var(--lb-border-default, #333);
    border-top-color: var(--lb-accent-primary, #d4af37);
    border-radius: 50%;
    animation: spin-b-44fks10aam 0.8s linear infinite;
}

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

.no-data[b-44fks10aam] {
    color: var(--lb-text-muted, #888);
    text-align: center;
    padding: 2rem;
}

/* Buttons */
.btn[b-44fks10aam] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-weight: 500;
    cursor: pointer;
    border: none;
    transition: all 0.15s;
    font-size: 0.875rem;
}

.btn:disabled[b-44fks10aam] {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-secondary[b-44fks10aam] {
    background: var(--lb-bg-elevated-2, #222);
    color: var(--lb-text-primary, #e0e0e0);
    border: 1px solid var(--lb-border-default, #333);
}

.btn-secondary:hover:not(:disabled)[b-44fks10aam] {
    background: var(--lb-bg-elevated-3, #333);
}

.btn-warning[b-44fks10aam] {
    background: #f59e0b;
    color: #000;
}

.btn-warning:hover:not(:disabled)[b-44fks10aam] {
    background: #d97706;
}

.btn-sm[b-44fks10aam] {
    padding: 0.375rem 0.75rem;
    font-size: 0.8125rem;
}

/* Responsive */
@media (max-width: 768px) {
    .metrics-page[b-44fks10aam] {
        padding: 1rem;
    }

    .page-header[b-44fks10aam] {
        flex-direction: column;
    }

    .percentile-grid[b-44fks10aam] {
        grid-template-columns: repeat(2, 1fr);
    }

    .memory-grid[b-44fks10aam] {
        grid-template-columns: 1fr;
    }

    .endpoints-table[b-44fks10aam] {
        font-size: 0.8125rem;
    }

    .endpoint-path code[b-44fks10aam] {
        font-size: 0.75rem;
    }
}
/* /Components/Admin/SlowQueries.razor.rz.scp.css */
.slow-queries-page[b-9gljl6xwln] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 2rem;
}

.page-header[b-9gljl6xwln] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 2rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.back-link[b-9gljl6xwln] {
    color: var(--lb-text-muted, #888);
    text-decoration: none;
    font-size: 0.875rem;
    display: block;
    margin-bottom: 0.5rem;
}

.back-link:hover[b-9gljl6xwln] {
    color: var(--lb-accent-primary, #d4af37);
}

.page-header h1[b-9gljl6xwln] {
    margin: 0;
    font-size: 1.75rem;
    color: var(--lb-text-primary, #e0e0e0);
}

.text-muted[b-9gljl6xwln] {
    color: var(--lb-text-muted, #888);
    margin: 0.25rem 0 0 0;
    font-size: 0.875rem;
}

.header-actions[b-9gljl6xwln] {
    display: flex;
    gap: 0.75rem;
}

/* Stats Grid */
.stats-grid[b-9gljl6xwln] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.stat-card[b-9gljl6xwln] {
    background: var(--lb-bg-elevated, #1a1a1a);
    border: 1px solid var(--lb-border-default, #333);
    border-radius: 8px;
    padding: 1.25rem;
}

.stat-card.severity .stat-value[b-9gljl6xwln] { color: #ef4444; }
.stat-card.duration .stat-value[b-9gljl6xwln] { color: #f59e0b; }

.stat-value[b-9gljl6xwln] {
    font-size: 2rem;
    font-weight: 700;
    color: var(--lb-text-primary, #e0e0e0);
}

.stat-label[b-9gljl6xwln] {
    font-size: 0.875rem;
    color: var(--lb-text-secondary, #ccc);
    margin-top: 0.25rem;
}

.stat-sub[b-9gljl6xwln] {
    font-size: 0.75rem;
    color: var(--lb-text-muted, #888);
    margin-top: 0.25rem;
}

/* Top Offenders */
.top-offenders[b-9gljl6xwln] {
    background: var(--lb-bg-elevated, #1a1a1a);
    border: 1px solid var(--lb-border-default, #333);
    border-radius: 8px;
    padding: 1.25rem;
    margin-bottom: 1.5rem;
}

.top-offenders h3[b-9gljl6xwln] {
    margin: 0 0 1rem 0;
    font-size: 1rem;
    color: var(--lb-text-primary, #e0e0e0);
}

.offenders-grid[b-9gljl6xwln] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.75rem;
}

.offender-card[b-9gljl6xwln] {
    background: var(--lb-bg-elevated-2, #222);
    border-radius: 6px;
    padding: 0.75rem;
}

.offender-stats[b-9gljl6xwln] {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.avg-duration[b-9gljl6xwln] {
    font-weight: 600;
    color: #f59e0b;
}

.occurrences[b-9gljl6xwln] {
    font-size: 0.75rem;
    color: var(--lb-text-muted, #888);
}

.offender-hash[b-9gljl6xwln] {
    font-family: monospace;
    font-size: 0.75rem;
    color: var(--lb-text-muted, #888);
    margin-bottom: 0.25rem;
}

.offender-dates[b-9gljl6xwln] {
    font-size: 0.75rem;
    color: var(--lb-text-muted, #888);
}

/* Filters */
.filters[b-9gljl6xwln] {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    align-items: flex-end;
    background: var(--lb-bg-elevated, #1a1a1a);
    border-radius: 8px;
    padding: 1rem;
    border: 1px solid var(--lb-border-default, #333);
}

.filter-group[b-9gljl6xwln] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.filter-group label[b-9gljl6xwln] {
    font-size: 0.75rem;
    color: var(--lb-text-muted, #888);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.filter-group select[b-9gljl6xwln],
.filter-group input[b-9gljl6xwln] {
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--lb-border-default, #333);
    border-radius: 4px;
    background: var(--lb-bg-elevated-2, #222);
    color: var(--lb-text-primary, #e0e0e0);
    font-size: 0.875rem;
    min-width: 120px;
}

.filter-group.search[b-9gljl6xwln] {
    flex: 1;
    min-width: 200px;
}

.filter-group.search input[b-9gljl6xwln] {
    width: 100%;
}

/* Queries Table */
.queries-table-container[b-9gljl6xwln] {
    background: var(--lb-bg-elevated, #1a1a1a);
    border-radius: 8px;
    border: 1px solid var(--lb-border-default, #333);
    overflow: hidden;
}

.queries-table[b-9gljl6xwln] {
    width: 100%;
    border-collapse: collapse;
}

.queries-table thead[b-9gljl6xwln] {
    background: var(--lb-bg-elevated-2, #222);
}

.queries-table th[b-9gljl6xwln] {
    padding: 0.75rem 1rem;
    text-align: left;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--lb-text-muted, #888);
    border-bottom: 1px solid var(--lb-border-default, #333);
}

.queries-table td[b-9gljl6xwln] {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--lb-border-default, #333);
    font-size: 0.875rem;
    color: var(--lb-text-secondary, #ccc);
    vertical-align: top;
}

.query-row:hover[b-9gljl6xwln] {
    background: var(--lb-bg-elevated-2, #222);
}

.query-row.critical[b-9gljl6xwln] {
    border-left: 3px solid #ef4444;
}

.query-row.very-slow[b-9gljl6xwln] {
    border-left: 3px solid #f59e0b;
}

.query-row.slow[b-9gljl6xwln] {
    border-left: 3px solid #eab308;
}

/* Duration Badge */
.duration-badge[b-9gljl6xwln] {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    font-family: monospace;
}

.duration-badge.slow[b-9gljl6xwln] {
    background: rgba(234, 179, 8, 0.2);
    color: #eab308;
}

.duration-badge.very-slow[b-9gljl6xwln] {
    background: rgba(245, 158, 11, 0.2);
    color: #f59e0b;
}

.duration-badge.critical[b-9gljl6xwln] {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

.query-cell[b-9gljl6xwln] {
    max-width: 400px;
}

.query-cell code[b-9gljl6xwln] {
    font-size: 0.75rem;
    color: var(--lb-text-muted, #888);
    word-break: break-all;
}

.source-cell[b-9gljl6xwln] {
    font-size: 0.8125rem;
    color: var(--lb-text-muted, #888);
}

.time-cell[b-9gljl6xwln] {
    white-space: nowrap;
    color: var(--lb-text-muted, #888);
}

.btn-details[b-9gljl6xwln] {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    background: var(--lb-bg-elevated-2, #222);
    border: 1px solid var(--lb-border-default, #333);
    border-radius: 4px;
    color: var(--lb-text-secondary, #ccc);
    cursor: pointer;
}

.btn-details:hover[b-9gljl6xwln] {
    background: var(--lb-accent-primary, #d4af37);
    color: var(--lb-text-inverse, #0f0f0f);
    border-color: var(--lb-accent-primary, #d4af37);
}

/* Pagination */
.pagination[b-9gljl6xwln] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    border-top: 1px solid var(--lb-border-default, #333);
}

.page-info[b-9gljl6xwln] {
    font-size: 0.875rem;
    color: var(--lb-text-muted, #888);
}

/* Empty State */
.empty-state[b-9gljl6xwln] {
    text-align: center;
    padding: 3rem 2rem;
    color: var(--lb-text-muted, #888);
}

.empty-state h4[b-9gljl6xwln] {
    margin: 0 0 0.5rem 0;
    color: var(--lb-text-secondary, #ccc);
}

/* Loading State */
.loading-state[b-9gljl6xwln] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    gap: 1rem;
    color: var(--lb-text-muted, #888);
}

.spinner[b-9gljl6xwln] {
    width: 40px;
    height: 40px;
    border: 3px solid var(--lb-border-default, #333);
    border-top-color: var(--lb-accent-primary, #d4af37);
    border-radius: 50%;
    animation: spin-b-9gljl6xwln 0.8s linear infinite;
}

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

/* Modal */
.modal-overlay[b-9gljl6xwln] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
}

.modal-content[b-9gljl6xwln] {
    background: var(--lb-bg-elevated, #1a1a1a);
    border: 1px solid var(--lb-border-default, #333);
    border-radius: 12px;
    width: 100%;
    max-width: 900px;
    max-height: 90vh;
    overflow-y: auto;
}

.modal-header[b-9gljl6xwln] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--lb-border-default, #333);
}

.modal-header h3[b-9gljl6xwln] {
    margin: 0;
    font-size: 1.25rem;
    color: var(--lb-text-primary, #e0e0e0);
}

.close-btn[b-9gljl6xwln] {
    background: transparent;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--lb-text-muted, #888);
    padding: 0;
    line-height: 1;
}

.close-btn:hover[b-9gljl6xwln] {
    color: var(--lb-text-primary, #e0e0e0);
}

.modal-body[b-9gljl6xwln] {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.detail-row[b-9gljl6xwln] {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.detail-row.full-width[b-9gljl6xwln] {
    flex-direction: column;
    gap: 0.5rem;
}

.detail-row label[b-9gljl6xwln] {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--lb-text-muted, #888);
    min-width: 100px;
    flex-shrink: 0;
}

.detail-row span[b-9gljl6xwln],
.detail-row pre[b-9gljl6xwln] {
    color: var(--lb-text-secondary, #ccc);
    word-break: break-word;
}

.monospace[b-9gljl6xwln] {
    font-family: monospace;
    font-size: 0.8125rem;
}

.query-full[b-9gljl6xwln] {
    background: var(--lb-bg-elevated-2, #222);
    padding: 1rem;
    border-radius: 6px;
    font-family: monospace;
    font-size: 0.75rem;
    white-space: pre-wrap;
    word-break: break-all;
    margin: 0;
    max-height: 300px;
    overflow-y: auto;
    color: #f59e0b;
}

.parameters[b-9gljl6xwln] {
    background: var(--lb-bg-elevated-2, #222);
    padding: 0.75rem;
    border-radius: 6px;
    font-family: monospace;
    font-size: 0.75rem;
    margin: 0;
    color: var(--lb-text-muted, #888);
}

/* Buttons */
.btn[b-9gljl6xwln] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-weight: 500;
    cursor: pointer;
    border: none;
    transition: all 0.15s;
    font-size: 0.875rem;
}

.btn:disabled[b-9gljl6xwln] {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-secondary[b-9gljl6xwln] {
    background: var(--lb-bg-elevated-2, #222);
    color: var(--lb-text-primary, #e0e0e0);
    border: 1px solid var(--lb-border-default, #333);
}

.btn-secondary:hover:not(:disabled)[b-9gljl6xwln] {
    background: var(--lb-bg-elevated-3, #333);
}

.btn-sm[b-9gljl6xwln] {
    padding: 0.375rem 0.75rem;
    font-size: 0.8125rem;
}

/* Responsive */
@media (max-width: 768px) {
    .slow-queries-page[b-9gljl6xwln] {
        padding: 1rem;
    }

    .page-header[b-9gljl6xwln] {
        flex-direction: column;
    }

    .stats-grid[b-9gljl6xwln] {
        grid-template-columns: repeat(2, 1fr);
    }

    .filters[b-9gljl6xwln] {
        flex-direction: column;
    }

    .filter-group[b-9gljl6xwln] {
        width: 100%;
    }

    .filter-group select[b-9gljl6xwln],
    .filter-group input[b-9gljl6xwln] {
        width: 100%;
    }

    .queries-table[b-9gljl6xwln] {
        font-size: 0.8125rem;
    }

    .queries-table th[b-9gljl6xwln],
    .queries-table td[b-9gljl6xwln] {
        padding: 0.5rem;
    }
}
/* /Components/Admin/Support/SuggestionsQueue.razor.rz.scp.css */
.suggestions-page[b-nviitfpieb] {
    max-width: 1000px;
    margin: 0 auto;
    padding: 2rem;
}

.page-header[b-nviitfpieb] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--border-color, #e9ecef);
}

.header-content h1[b-nviitfpieb] {
    margin: 0.5rem 0;
    font-size: 2rem;
}

.back-link[b-nviitfpieb] {
    color: var(--primary-color, #667eea);
    text-decoration: none;
    font-size: 0.9rem;
}

    .back-link:hover[b-nviitfpieb] {
        text-decoration: underline;
    }

.btn-refresh[b-nviitfpieb], .btn-clear[b-nviitfpieb] {
    padding: 0.5rem 1rem;
    border: 2px solid var(--border-color, #e9ecef);
    border-radius: 8px;
    background: white;
    cursor: pointer;
    transition: all 0.2s;
}

    .btn-refresh:hover[b-nviitfpieb], .btn-clear:hover[b-nviitfpieb] {
        border-color: var(--primary-color, #667eea);
        background: #f8f9ff;
    }

/* Stats Grid */
.stats-grid[b-nviitfpieb] {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1rem;
    margin-bottom: 2rem;
}

.stat-card[b-nviitfpieb] {
    padding: 1rem;
    border-radius: 12px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    border: 2px solid transparent;
    background: #f8f9fa;
    color: #333; /* Ensure base text color is dark */
}

    .stat-card:hover[b-nviitfpieb], .stat-card.active[b-nviitfpieb] {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    }

    .stat-card.active[b-nviitfpieb] {
        border-color: var(--primary-color, #667eea);
    }

    .stat-card.pending[b-nviitfpieb] {
        background: #fff3e0;
    }

    .stat-card.reviewed[b-nviitfpieb] {
        background: #e3f2fd;
    }

    .stat-card.planned[b-nviitfpieb] {
        background: #e8f5e9;
    }

    .stat-card.implemented[b-nviitfpieb] {
        background: #c8e6c9;
    }

    .stat-card.declined[b-nviitfpieb] {
        background: #ffebee;
    }

.stat-icon[b-nviitfpieb] {
    font-size: 1.25rem;
    margin-bottom: 0.25rem;
}

/* Force dark text on all light cards */
.stat-card .stat-value[b-nviitfpieb] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #333 !important;
}

.stat-card .stat-label[b-nviitfpieb] {
    font-size: 0.75rem;
    color: #555 !important;
}

/* Filters */
.filters[b-nviitfpieb] {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
    align-items: center;
}

.filter-group[b-nviitfpieb] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

    .filter-group label[b-nviitfpieb] {
        font-weight: 500;
        color: #666;
    }

    .filter-group select[b-nviitfpieb] {
        padding: 0.5rem 1rem;
        border: 2px solid var(--border-color, #e9ecef);
        border-radius: 8px;
        background: white;
    }

/* Suggestions List */
.suggestions-list[b-nviitfpieb] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.suggestion-card[b-nviitfpieb] {
    background: white;
    border: 2px solid #e9ecef;
    border-radius: 12px;
    padding: 1.5rem;
    transition: all 0.2s;
}

    .suggestion-card:hover[b-nviitfpieb] {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

.suggestion-header[b-nviitfpieb] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.suggestion-meta[b-nviitfpieb] {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    font-size: 0.85rem;
}

.suggestion-id[b-nviitfpieb] {
    font-family: monospace;
    font-weight: 600;
    color: #667eea;
}

.category-badge[b-nviitfpieb] {
    background: #f0f0f0;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
}

.date[b-nviitfpieb] {
    color: #888;
}

.status-badge[b-nviitfpieb] {
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 500;
}

    .status-badge.status-pending[b-nviitfpieb] {
        background: #fff3e0;
        color: #e65100;
    }

    .status-badge.status-reviewed[b-nviitfpieb] {
        background: #e3f2fd;
        color: #1565c0;
    }

    .status-badge.status-planned[b-nviitfpieb] {
        background: #e8f5e9;
        color: #2e7d32;
    }

    .status-badge.status-implemented[b-nviitfpieb] {
        background: #c8e6c9;
        color: #1b5e20;
    }

    .status-badge.status-declined[b-nviitfpieb] {
        background: #ffebee;
        color: #c62828;
    }

.suggestion-title[b-nviitfpieb] {
    margin: 0 0 0.5rem 0;
    font-size: 1.2rem;
    color: #333;
}

.suggestion-description[b-nviitfpieb] {
    color: #555;
    margin: 0 0 1rem 0;
    line-height: 1.5;
    white-space: pre-wrap;
}

.suggestion-actions[b-nviitfpieb] {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    padding: 1rem;
    background: #f8f9fa;
    border-radius: 8px;
    margin-bottom: 0.75rem;
}

.status-select[b-nviitfpieb] {
    padding: 0.5rem;
    border: 1px solid #ddd;
    border-radius: 6px;
    min-width: 140px;
}

.notes-input[b-nviitfpieb] {
    flex: 1;
    padding: 0.5rem 0.75rem;
    border: 1px solid #ddd;
    border-radius: 6px;
}

.btn-save[b-nviitfpieb] {
    padding: 0.5rem 1rem;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.2s;
}

    .btn-save:hover[b-nviitfpieb] {
        transform: translateY(-1px);
        box-shadow: 0 2px 8px rgba(102, 126, 234, 0.4);
    }

.existing-notes[b-nviitfpieb] {
    padding: 0.75rem;
    background: #e8f5e9;
    border-radius: 6px;
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}

.reviewed-info[b-nviitfpieb] {
    font-size: 0.8rem;
    color: #888;
}

/* Empty & Loading States */
.empty-state[b-nviitfpieb], .loading-state[b-nviitfpieb] {
    text-align: center;
    padding: 4rem 2rem;
}

.empty-icon[b-nviitfpieb] {
    font-size: 4rem;
    margin-bottom: 1rem;
}

.spinner[b-nviitfpieb] {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #667eea;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 1rem;
}

@@keyframes spin {
    0%[b-nviitfpieb] {
        transform: rotate(0deg);
    }

    100%[b-nviitfpieb] {
        transform: rotate(360deg);
    }
}

@@media (max-width: 768px) {
    .stats-grid[b-nviitfpieb] {
        grid-template-columns: repeat(3, 1fr);
    }

    .suggestion-actions[b-nviitfpieb] {
        flex-direction: column;
    }

    .notes-input[b-nviitfpieb] {
        width: 100%;
    }
}
/* /Components/Admin/Support/SupportQueue.razor.rz.scp.css */

.support-page[b-xyisk0ph3s] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 2rem;
}

.page-header[b-xyisk0ph3s] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--border-color, #e9ecef);
}

.header-content h1[b-xyisk0ph3s] {
    margin: 0.5rem 0;
    font-size: 2rem;
}

.back-link[b-xyisk0ph3s] {
    color: var(--primary-color, #667eea);
    text-decoration: none;
    font-size: 0.9rem;
}

    .back-link:hover[b-xyisk0ph3s] {
        text-decoration: underline;
    }

.btn-refresh[b-xyisk0ph3s] {
    padding: 0.5rem 1rem;
    border: 2px solid var(--border-color, #e9ecef);
    border-radius: 8px;
    background: white;
    cursor: pointer;
    transition: all 0.2s;
}

    .btn-refresh:hover[b-xyisk0ph3s] {
        border-color: var(--primary-color, #667eea);
        background: #f8f9ff;
    }

/* Stats Grid */
.stats-grid[b-xyisk0ph3s] {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1rem;
    margin-bottom: 2rem;
}

.stat-card[b-xyisk0ph3s] {
    padding: 1.25rem;
    border-radius: 12px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    border: 2px solid transparent;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    color: #333; /* Ensure base text color is dark */
}

    .stat-card:hover[b-xyisk0ph3s], .stat-card.active[b-xyisk0ph3s] {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    }

    .stat-card.active[b-xyisk0ph3s] {
        border-color: var(--primary-color, #667eea);
    }

    .stat-card.open[b-xyisk0ph3s] {
        background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
    }

    .stat-card.progress[b-xyisk0ph3s] {
        background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%);
    }

    .stat-card.resolved[b-xyisk0ph3s] {
        background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
    }

    .stat-card.closed[b-xyisk0ph3s] {
        background: linear-gradient(135deg, #f3e5f5 0%, #e1bee7 100%);
    }

    .stat-card.all[b-xyisk0ph3s] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    }

.stat-icon[b-xyisk0ph3s] {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

/* Force dark text on light cards */
.stat-card.open .stat-value[b-xyisk0ph3s],
.stat-card.progress .stat-value[b-xyisk0ph3s],
.stat-card.resolved .stat-value[b-xyisk0ph3s],
.stat-card.closed .stat-value[b-xyisk0ph3s] {
    font-size: 2rem;
    font-weight: 700;
    color: #333 !important;
}

.stat-card.open .stat-label[b-xyisk0ph3s],
.stat-card.progress .stat-label[b-xyisk0ph3s],
.stat-card.resolved .stat-label[b-xyisk0ph3s],
.stat-card.closed .stat-label[b-xyisk0ph3s] {
    font-size: 0.875rem;
    color: #555 !important;
}

/* Force white text on purple "all" card */
.stat-card.all .stat-value[b-xyisk0ph3s] {
    font-size: 2rem;
    font-weight: 700;
    color: #fff !important;
}

.stat-card.all .stat-label[b-xyisk0ph3s] {
    font-size: 0.875rem;
    color: #fff !important;
}

/* Filters */
.filters[b-xyisk0ph3s] {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.filter-group[b-xyisk0ph3s] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

    .filter-group label[b-xyisk0ph3s] {
        font-weight: 500;
        color: #666;
    }

    .filter-group select[b-xyisk0ph3s] {
        padding: 0.5rem 1rem;
        border: 2px solid var(--border-color, #e9ecef);
        border-radius: 8px;
        background: white;
        cursor: pointer;
    }

/* Table */
.tickets-table-container[b-xyisk0ph3s] {
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    overflow: hidden;
}

.tickets-table[b-xyisk0ph3s] {
    width: 100%;
    border-collapse: collapse;
}

    .tickets-table th[b-xyisk0ph3s] {
        background: #f8f9fa;
        padding: 1rem;
        text-align: left;
        font-weight: 600;
        border-bottom: 2px solid var(--border-color, #e9ecef);
    }

    .tickets-table td[b-xyisk0ph3s] {
        padding: 1rem;
        border-bottom: 1px solid var(--border-color, #e9ecef);
    }

    .tickets-table tr:hover[b-xyisk0ph3s] {
        background: #f8f9ff;
    }

.ticket-id[b-xyisk0ph3s] {
    font-family: monospace;
    font-weight: 600;
    color: var(--primary-color, #667eea);
}

.subject-cell[b-xyisk0ph3s] {
    max-width: 250px;
}

.subject-text[b-xyisk0ph3s] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-cell[b-xyisk0ph3s] {
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Badges */
.status-badge[b-xyisk0ph3s] {
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 500;
}

    .status-badge.status-open[b-xyisk0ph3s] {
        background: #e3f2fd;
        color: #1565c0;
    }

    .status-badge.status-inprogress[b-xyisk0ph3s] {
        background: #fff3e0;
        color: #e65100;
    }

    .status-badge.status-resolved[b-xyisk0ph3s] {
        background: #e8f5e9;
        color: #2e7d32;
    }

    .status-badge.status-closed[b-xyisk0ph3s] {
        background: #f3e5f5;
        color: #7b1fa2;
    }

.category-badge[b-xyisk0ph3s] {
    padding: 0.25rem 0.5rem;
    background: #f0f0f0;
    border-radius: 4px;
    font-size: 0.85rem;
}

/* Actions */
.action-buttons[b-xyisk0ph3s] {
    display: flex;
    gap: 0.5rem;
}

.btn-action[b-xyisk0ph3s] {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

    .btn-action.btn-view[b-xyisk0ph3s] {
        background: #e3f2fd;
    }

    .btn-action:hover[b-xyisk0ph3s] {
        transform: scale(1.1);
    }

/* Empty State */
.empty-state[b-xyisk0ph3s] {
    text-align: center;
    padding: 4rem 2rem;
}

.empty-icon[b-xyisk0ph3s] {
    font-size: 4rem;
    margin-bottom: 1rem;
}

.empty-state h4[b-xyisk0ph3s] {
    margin: 0 0 0.5rem 0;
    color: #333;
}

.empty-state p[b-xyisk0ph3s] {
    color: #666;
    margin: 0;
}

/* Loading */
.loading-state[b-xyisk0ph3s] {
    text-align: center;
    padding: 4rem;
}

.spinner[b-xyisk0ph3s] {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid var(--primary-color, #667eea);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 1rem;
}

@@keyframes spin {
    0%[b-xyisk0ph3s] {
        transform: rotate(0deg);
    }

    100%[b-xyisk0ph3s] {
        transform: rotate(360deg);
    }
}

/* Modal */
.modal-overlay[b-xyisk0ph3s] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
}

.modal-content[b-xyisk0ph3s] {
    background: white;
    border-radius: 12px;
    width: 100%;
    max-width: 700px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.modal-header[b-xyisk0ph3s] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem;
    border-bottom: 1px solid var(--border-color, #e9ecef);
}

    .modal-header h2[b-xyisk0ph3s] {
        margin: 0;
        font-size: 1.5rem;
    }

.btn-close[b-xyisk0ph3s] {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: #666;
    padding: 0.5rem;
    line-height: 1;
}

    .btn-close:hover[b-xyisk0ph3s] {
        color: #333;
    }

.modal-body[b-xyisk0ph3s] {
    padding: 1.5rem;
}

.ticket-meta[b-xyisk0ph3s] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: #f8f9fa;
    border-radius: 8px;
}

.meta-item[b-xyisk0ph3s] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

    .meta-item label[b-xyisk0ph3s] {
        font-size: 0.8rem;
        color: #666;
        font-weight: 500;
    }

    .meta-item select[b-xyisk0ph3s] {
        padding: 0.5rem;
        border: 1px solid var(--border-color, #e9ecef);
        border-radius: 6px;
    }

.ticket-user[b-xyisk0ph3s], .ticket-subject[b-xyisk0ph3s], .ticket-message[b-xyisk0ph3s] {
    margin-bottom: 1.5rem;
}

    .ticket-user label[b-xyisk0ph3s], .ticket-subject label[b-xyisk0ph3s], .ticket-message label[b-xyisk0ph3s] {
        display: block;
        font-weight: 600;
        margin-bottom: 0.5rem;
        color: #333;
    }

.message-content[b-xyisk0ph3s] {
    background: #f8f9fa;
    padding: 1rem;
    border-radius: 8px;
    white-space: pre-wrap;
    max-height: 200px;
    overflow-y: auto;
}

.admin-notes-section[b-xyisk0ph3s] {
    margin-bottom: 1rem;
}

    .admin-notes-section label[b-xyisk0ph3s] {
        display: block;
        font-weight: 600;
        margin-bottom: 0.5rem;
        color: #333;
    }

    .admin-notes-section textarea[b-xyisk0ph3s] {
        width: 100%;
        padding: 0.75rem;
        border: 2px solid var(--border-color, #e9ecef);
        border-radius: 8px;
        resize: vertical;
        font-family: inherit;
    }

        .admin-notes-section textarea:focus[b-xyisk0ph3s] {
            outline: none;
            border-color: var(--primary-color, #667eea);
        }

.resolved-info[b-xyisk0ph3s] {
    padding: 0.75rem;
    background: #e8f5e9;
    border-radius: 8px;
    color: #2e7d32;
    font-size: 0.9rem;
}

.modal-footer[b-xyisk0ph3s] {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    padding: 1.5rem;
    border-top: 1px solid var(--border-color, #e9ecef);
    align-items: center;
}

.error-message[b-xyisk0ph3s] {
    color: #d32f2f;
    margin-right: auto;
}

.btn[b-xyisk0ph3s] {
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.2s;
}

.btn-secondary[b-xyisk0ph3s] {
    background: #e9ecef;
    color: #333;
}

    .btn-secondary:hover[b-xyisk0ph3s] {
        background: #dee2e6;
    }

.btn-primary[b-xyisk0ph3s] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

    .btn-primary:hover:not(:disabled)[b-xyisk0ph3s] {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
    }

    .btn-primary:disabled[b-xyisk0ph3s] {
        opacity: 0.6;
        cursor: not-allowed;
    }

@media (max-width: 768px) {
    .stats-grid[b-xyisk0ph3s] {
        grid-template-columns: repeat(2, 1fr);
    }

    .stat-card.all[b-xyisk0ph3s] {
        grid-column: span 2;
    }

    .tickets-table th:nth-child(6)[b-xyisk0ph3s],
    .tickets-table td:nth-child(6)[b-xyisk0ph3s],
    .tickets-table th:nth-child(7)[b-xyisk0ph3s],
    .tickets-table td:nth-child(7)[b-xyisk0ph3s] {
        display: none;
    }

    .ticket-meta[b-xyisk0ph3s] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Admin/SystemHealth.razor.rz.scp.css */
.health-page[b-jsytoxny7l] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
}

.page-header[b-jsytoxny7l] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 2rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.back-link[b-jsytoxny7l] {
    color: var(--lb-text-muted, #888);
    text-decoration: none;
    font-size: 0.875rem;
    display: block;
    margin-bottom: 0.5rem;
}

.back-link:hover[b-jsytoxny7l] {
    color: var(--lb-accent-primary, #d4af37);
}

.page-header h1[b-jsytoxny7l] {
    margin: 0;
    font-size: 1.75rem;
    color: var(--lb-text-primary, #e0e0e0);
}

.text-muted[b-jsytoxny7l] {
    color: var(--lb-text-muted, #888);
    margin: 0.25rem 0 0 0;
    font-size: 0.875rem;
}

.header-actions[b-jsytoxny7l] {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.auto-refresh[b-jsytoxny7l] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--lb-text-secondary, #ccc);
    cursor: pointer;
}

.auto-refresh input[b-jsytoxny7l] {
    cursor: pointer;
}

/* Loading State */
.loading-state[b-jsytoxny7l] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    gap: 1rem;
    color: var(--lb-text-muted, #888);
}

.spinner[b-jsytoxny7l] {
    width: 40px;
    height: 40px;
    border: 3px solid var(--lb-border-default, #333);
    border-top-color: var(--lb-accent-primary, #d4af37);
    border-radius: 50%;
    animation: spin-b-jsytoxny7l 0.8s linear infinite;
}

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

/* Overall Status */
.overall-status[b-jsytoxny7l] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 1.5rem 2rem;
    border-radius: 12px;
    margin-bottom: 2rem;
}

.overall-status.healthy[b-jsytoxny7l] {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.15) 0%, rgba(34, 197, 94, 0.05) 100%);
    border: 2px solid rgba(34, 197, 94, 0.3);
}

.overall-status.degraded[b-jsytoxny7l] {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.15) 0%, rgba(245, 158, 11, 0.05) 100%);
    border: 2px solid rgba(245, 158, 11, 0.3);
}

.overall-status.unhealthy[b-jsytoxny7l] {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.15) 0%, rgba(239, 68, 68, 0.05) 100%);
    border: 2px solid rgba(239, 68, 68, 0.3);
}

.status-icon[b-jsytoxny7l] {
    font-size: 3rem;
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.overall-status.healthy .status-icon[b-jsytoxny7l] {
    background: rgba(34, 197, 94, 0.2);
    color: #22c55e;
}

.overall-status.degraded .status-icon[b-jsytoxny7l] {
    background: rgba(245, 158, 11, 0.2);
    color: #f59e0b;
}

.overall-status.unhealthy .status-icon[b-jsytoxny7l] {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

.status-info h2[b-jsytoxny7l] {
    margin: 0 0 0.25rem 0;
    font-size: 1.5rem;
    color: var(--lb-text-primary, #e0e0e0);
}

.status-info p[b-jsytoxny7l] {
    margin: 0;
    color: var(--lb-text-secondary, #ccc);
    font-size: 0.875rem;
}

.status-info .last-check[b-jsytoxny7l] {
    color: var(--lb-text-muted, #888);
    font-size: 0.8125rem;
    margin-top: 0.25rem;
}

/* Health Check Cards */
.checks-grid[b-jsytoxny7l] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.check-card[b-jsytoxny7l] {
    background: var(--lb-bg-elevated, #1a1a1a);
    border: 1px solid var(--lb-border-default, #333);
    border-radius: 8px;
    padding: 1.25rem;
    border-left: 4px solid;
}

.check-card.healthy[b-jsytoxny7l] {
    border-left-color: #22c55e;
}

.check-card.degraded[b-jsytoxny7l] {
    border-left-color: #f59e0b;
}

.check-card.unhealthy[b-jsytoxny7l] {
    border-left-color: #ef4444;
}

.check-header[b-jsytoxny7l] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.check-status-icon[b-jsytoxny7l] {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 0.875rem;
    font-weight: 600;
}

.check-card.healthy .check-status-icon[b-jsytoxny7l] {
    background: rgba(34, 197, 94, 0.2);
    color: #22c55e;
}

.check-card.degraded .check-status-icon[b-jsytoxny7l] {
    background: rgba(245, 158, 11, 0.2);
    color: #f59e0b;
}

.check-card.unhealthy .check-status-icon[b-jsytoxny7l] {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

.check-header h3[b-jsytoxny7l] {
    margin: 0;
    flex: 1;
    font-size: 1rem;
    color: var(--lb-text-primary, #e0e0e0);
}

.check-duration[b-jsytoxny7l] {
    font-size: 0.75rem;
    color: var(--lb-text-muted, #888);
    background: var(--lb-bg-elevated-2, #222);
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
}

.check-description[b-jsytoxny7l] {
    margin: 0 0 0.75rem 0;
    font-size: 0.875rem;
    color: var(--lb-text-secondary, #ccc);
}

.check-error[b-jsytoxny7l] {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 4px;
    padding: 0.5rem 0.75rem;
    font-size: 0.8125rem;
    color: #ef4444;
    margin-bottom: 0.75rem;
}

.check-data[b-jsytoxny7l] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--lb-border-default, #333);
}

.data-item[b-jsytoxny7l] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.8125rem;
}

.data-key[b-jsytoxny7l] {
    color: var(--lb-text-muted, #888);
}

.data-value[b-jsytoxny7l] {
    color: var(--lb-text-secondary, #ccc);
    font-family: monospace;
}

/* System Info */
.system-info[b-jsytoxny7l],
.endpoints-info[b-jsytoxny7l] {
    background: var(--lb-bg-elevated, #1a1a1a);
    border: 1px solid var(--lb-border-default, #333);
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.system-info h3[b-jsytoxny7l],
.endpoints-info h3[b-jsytoxny7l] {
    margin: 0 0 1rem 0;
    font-size: 1rem;
    color: var(--lb-text-primary, #e0e0e0);
}

.info-grid[b-jsytoxny7l] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.info-item[b-jsytoxny7l] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.info-label[b-jsytoxny7l] {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--lb-text-muted, #888);
}

.info-value[b-jsytoxny7l] {
    font-size: 0.875rem;
    color: var(--lb-text-secondary, #ccc);
}

/* Endpoints */
.endpoint-list[b-jsytoxny7l] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.endpoint-item[b-jsytoxny7l] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.endpoint-item code[b-jsytoxny7l] {
    background: var(--lb-bg-elevated-2, #222);
    padding: 0.375rem 0.75rem;
    border-radius: 4px;
    font-size: 0.875rem;
    color: var(--lb-accent-primary, #d4af37);
    min-width: 140px;
}

.endpoint-desc[b-jsytoxny7l] {
    font-size: 0.875rem;
    color: var(--lb-text-muted, #888);
}

/* Buttons */
.btn[b-jsytoxny7l] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-weight: 500;
    cursor: pointer;
    border: none;
    transition: all 0.15s;
    font-size: 0.875rem;
}

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

.btn-secondary[b-jsytoxny7l] {
    background: var(--lb-bg-elevated-2, #222);
    color: var(--lb-text-primary, #e0e0e0);
    border: 1px solid var(--lb-border-default, #333);
}

.btn-secondary:hover:not(:disabled)[b-jsytoxny7l] {
    background: var(--lb-bg-elevated-3, #333);
}

.btn-sm[b-jsytoxny7l] {
    padding: 0.375rem 0.75rem;
    font-size: 0.8125rem;
}

.btn-warning[b-jsytoxny7l] {
    background: #f59e0b;
    color: #000;
}

.btn-warning:hover:not(:disabled)[b-jsytoxny7l] {
    background: #d97706;
}

/* Cache Info */
.cache-info[b-jsytoxny7l] {
    background: var(--lb-bg-elevated, #1a1a1a);
    border: 1px solid var(--lb-border-default, #333);
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.cache-header[b-jsytoxny7l] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.cache-header h3[b-jsytoxny7l] {
    margin: 0;
    font-size: 1rem;
    color: var(--lb-text-primary, #e0e0e0);
}

.cache-stats[b-jsytoxny7l] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

.cache-stat[b-jsytoxny7l] {
    text-align: center;
    padding: 0.75rem;
    background: var(--lb-bg-elevated-2, #222);
    border-radius: 6px;
}

.cache-stat-value[b-jsytoxny7l] {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--lb-text-primary, #e0e0e0);
}

.cache-stat-value.good[b-jsytoxny7l] {
    color: #22c55e;
}

.cache-stat-value.ok[b-jsytoxny7l] {
    color: #f59e0b;
}

.cache-stat-value.poor[b-jsytoxny7l] {
    color: #ef4444;
}

.cache-stat-label[b-jsytoxny7l] {
    display: block;
    font-size: 0.75rem;
    color: var(--lb-text-muted, #888);
    margin-top: 0.25rem;
}

.cache-keys details[b-jsytoxny7l] {
    background: var(--lb-bg-elevated-2, #222);
    border-radius: 6px;
    padding: 0.75rem;
}

.cache-keys summary[b-jsytoxny7l] {
    cursor: pointer;
    font-size: 0.875rem;
    color: var(--lb-text-secondary, #ccc);
}

.cache-keys ul[b-jsytoxny7l] {
    margin: 0.75rem 0 0 0;
    padding-left: 1.25rem;
    max-height: 200px;
    overflow-y: auto;
}

.cache-keys li[b-jsytoxny7l] {
    margin-bottom: 0.25rem;
}

.cache-keys code[b-jsytoxny7l] {
    font-size: 0.75rem;
    color: var(--lb-text-muted, #888);
}

/* Maintenance Info */
.maintenance-info[b-jsytoxny7l] {
    background: var(--lb-bg-elevated, #1a1a1a);
    border: 1px solid var(--lb-border-default, #333);
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.maintenance-header[b-jsytoxny7l] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.maintenance-header h3[b-jsytoxny7l] {
    margin: 0;
    font-size: 1rem;
    color: var(--lb-text-primary, #e0e0e0);
}

.maintenance-status[b-jsytoxny7l] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    border-radius: 8px;
    margin-bottom: 1rem;
}

.maintenance-status.success[b-jsytoxny7l] {
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.3);
}

.maintenance-status.failed[b-jsytoxny7l] {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.maintenance-status-icon[b-jsytoxny7l] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 1.25rem;
}

.maintenance-status.success .maintenance-status-icon[b-jsytoxny7l] {
    background: rgba(34, 197, 94, 0.2);
    color: #22c55e;
}

.maintenance-status.failed .maintenance-status-icon[b-jsytoxny7l] {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

.maintenance-status-info[b-jsytoxny7l] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.maintenance-status-info strong[b-jsytoxny7l] {
    color: var(--lb-text-primary, #e0e0e0);
    font-size: 0.875rem;
}

.maintenance-status-info span[b-jsytoxny7l] {
    color: var(--lb-text-muted, #888);
    font-size: 0.8125rem;
}

.maintenance-stats[b-jsytoxny7l] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

.maintenance-stat[b-jsytoxny7l] {
    text-align: center;
    padding: 0.75rem;
    background: var(--lb-bg-elevated-2, #222);
    border-radius: 6px;
}

.maintenance-stat-value[b-jsytoxny7l] {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--lb-text-primary, #e0e0e0);
}

.maintenance-stat-label[b-jsytoxny7l] {
    display: block;
    font-size: 0.75rem;
    color: var(--lb-text-muted, #888);
    margin-top: 0.25rem;
}

.maintenance-error[b-jsytoxny7l] {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 4px;
    padding: 0.75rem;
    font-size: 0.8125rem;
    color: #ef4444;
    margin-bottom: 1rem;
}

.maintenance-details[b-jsytoxny7l] {
    background: var(--lb-bg-elevated-2, #222);
    border-radius: 6px;
    padding: 0.75rem;
}

.maintenance-details summary[b-jsytoxny7l] {
    cursor: pointer;
    font-size: 0.875rem;
    color: var(--lb-text-secondary, #ccc);
}

.maintenance-detail-grid[b-jsytoxny7l] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.detail-section h4[b-jsytoxny7l] {
    margin: 0 0 0.5rem 0;
    font-size: 0.8125rem;
    color: var(--lb-text-primary, #e0e0e0);
}

.detail-section ul[b-jsytoxny7l] {
    margin: 0;
    padding-left: 1.25rem;
}

.detail-section li[b-jsytoxny7l] {
    font-size: 0.75rem;
    color: var(--lb-text-muted, #888);
    margin-bottom: 0.25rem;
}

.no-maintenance[b-jsytoxny7l] {
    color: var(--lb-text-muted, #888);
    font-size: 0.875rem;
    text-align: center;
    padding: 1rem;
}

/* SignalR Info */
.signalr-info[b-jsytoxny7l] {
    background: var(--lb-bg-elevated, #1a1a1a);
    border: 1px solid var(--lb-border-default, #333);
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.signalr-header[b-jsytoxny7l] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.signalr-header h3[b-jsytoxny7l] {
    margin: 0;
    font-size: 1rem;
    color: var(--lb-text-primary, #e0e0e0);
}

.signalr-summary[b-jsytoxny7l] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 1rem;
}

.signalr-stat-card[b-jsytoxny7l] {
    text-align: center;
    padding: 1rem;
    background: var(--lb-bg-elevated-2, #222);
    border-radius: 8px;
}

.signalr-stat-value[b-jsytoxny7l] {
    display: block;
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--lb-text-primary, #e0e0e0);
}

.signalr-stat-value.error[b-jsytoxny7l] {
    color: #ef4444;
}

.signalr-stat-label[b-jsytoxny7l] {
    display: block;
    font-size: 0.75rem;
    color: var(--lb-text-muted, #888);
    margin-top: 0.25rem;
}

.hubs-grid[b-jsytoxny7l] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
}

.hub-card[b-jsytoxny7l] {
    background: var(--lb-bg-elevated-2, #222);
    border-radius: 8px;
    padding: 1rem;
    border-left: 4px solid #22c55e;
}

.hub-card.has-errors[b-jsytoxny7l] {
    border-left-color: #f59e0b;
}

.hub-card-header[b-jsytoxny7l] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.hub-card-header h4[b-jsytoxny7l] {
    margin: 0;
    font-size: 0.875rem;
    color: var(--lb-text-primary, #e0e0e0);
}

.hub-connections[b-jsytoxny7l] {
    font-size: 0.75rem;
    background: rgba(34, 197, 94, 0.2);
    color: #22c55e;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
}

.hub-stats[b-jsytoxny7l] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
}

.hub-stat[b-jsytoxny7l] {
    text-align: center;
}

.hub-stat .value[b-jsytoxny7l] {
    display: block;
    font-size: 1rem;
    font-weight: 600;
    color: var(--lb-text-primary, #e0e0e0);
}

.hub-stat .value.error[b-jsytoxny7l] {
    color: #ef4444;
}

.hub-stat .label[b-jsytoxny7l] {
    display: block;
    font-size: 0.625rem;
    color: var(--lb-text-muted, #888);
    text-transform: uppercase;
}

.hub-last-error[b-jsytoxny7l] {
    margin-top: 0.75rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--lb-border-default, #333);
    font-size: 0.6875rem;
    color: #f59e0b;
}

.no-hubs[b-jsytoxny7l] {
    color: var(--lb-text-muted, #888);
    font-size: 0.875rem;
    text-align: center;
    padding: 1rem;
}

/* Circuit Breaker Info */
.circuit-info[b-jsytoxny7l] {
    background: var(--lb-bg-elevated, #1a1a1a);
    border: 1px solid var(--lb-border-default, #333);
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.circuit-header[b-jsytoxny7l] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.circuit-header h3[b-jsytoxny7l] {
    margin: 0;
    font-size: 1rem;
    color: var(--lb-text-primary, #e0e0e0);
}

.circuit-summary[b-jsytoxny7l] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    border-radius: 8px;
    margin-bottom: 1rem;
}

.circuit-summary.healthy[b-jsytoxny7l] {
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.3);
}

.circuit-summary.degraded[b-jsytoxny7l] {
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.circuit-summary-icon[b-jsytoxny7l] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 1.25rem;
}

.circuit-summary.healthy .circuit-summary-icon[b-jsytoxny7l] {
    background: rgba(34, 197, 94, 0.2);
    color: #22c55e;
}

.circuit-summary.degraded .circuit-summary-icon[b-jsytoxny7l] {
    background: rgba(245, 158, 11, 0.2);
    color: #f59e0b;
}

.circuit-summary-info[b-jsytoxny7l] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.circuit-summary-info strong[b-jsytoxny7l] {
    color: var(--lb-text-primary, #e0e0e0);
    font-size: 0.875rem;
}

.circuit-summary-info span[b-jsytoxny7l] {
    color: var(--lb-text-muted, #888);
    font-size: 0.8125rem;
}

.circuits-grid[b-jsytoxny7l] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
}

.circuit-card[b-jsytoxny7l] {
    background: var(--lb-bg-elevated-2, #222);
    border-radius: 8px;
    padding: 1rem;
    border-left: 4px solid;
}

.circuit-card.healthy[b-jsytoxny7l] {
    border-left-color: #22c55e;
}

.circuit-card.degraded[b-jsytoxny7l] {
    border-left-color: #f59e0b;
}

.circuit-card.unhealthy[b-jsytoxny7l] {
    border-left-color: #ef4444;
}

.circuit-card-header[b-jsytoxny7l] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.circuit-state-icon[b-jsytoxny7l] {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 0.75rem;
}

.circuit-card.healthy .circuit-state-icon[b-jsytoxny7l] {
    background: rgba(34, 197, 94, 0.2);
    color: #22c55e;
}

.circuit-card.degraded .circuit-state-icon[b-jsytoxny7l] {
    background: rgba(245, 158, 11, 0.2);
    color: #f59e0b;
}

.circuit-card.unhealthy .circuit-state-icon[b-jsytoxny7l] {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

.circuit-card-header h4[b-jsytoxny7l] {
    margin: 0;
    flex: 1;
    font-size: 0.875rem;
    color: var(--lb-text-primary, #e0e0e0);
}

.circuit-state-badge[b-jsytoxny7l] {
    font-size: 0.625rem;
    text-transform: uppercase;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-weight: 600;
}

.circuit-state-badge.healthy[b-jsytoxny7l] {
    background: rgba(34, 197, 94, 0.2);
    color: #22c55e;
}

.circuit-state-badge.degraded[b-jsytoxny7l] {
    background: rgba(245, 158, 11, 0.2);
    color: #f59e0b;
}

.circuit-state-badge.unhealthy[b-jsytoxny7l] {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

.circuit-stats[b-jsytoxny7l] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.circuit-stat[b-jsytoxny7l] {
    text-align: center;
}

.circuit-stat .stat-value[b-jsytoxny7l] {
    display: block;
    font-size: 1rem;
    font-weight: 600;
    color: var(--lb-text-primary, #e0e0e0);
}

.circuit-stat .stat-value.error[b-jsytoxny7l] {
    color: #ef4444;
}

.circuit-stat .stat-label[b-jsytoxny7l] {
    display: block;
    font-size: 0.625rem;
    color: var(--lb-text-muted, #888);
    text-transform: uppercase;
}

.circuit-last-failure[b-jsytoxny7l] {
    font-size: 0.75rem;
    color: var(--lb-text-muted, #888);
    padding-top: 0.5rem;
    border-top: 1px solid var(--lb-border-default, #333);
}

.circuit-last-failure .failure-reason[b-jsytoxny7l] {
    display: block;
    color: #ef4444;
    margin-top: 0.25rem;
    font-size: 0.6875rem;
}

.no-circuits[b-jsytoxny7l] {
    color: var(--lb-text-muted, #888);
    font-size: 0.875rem;
    text-align: center;
    padding: 1rem;
}

/* Responsive */
@media (max-width: 768px) {
    .health-page[b-jsytoxny7l] {
        padding: 1rem;
    }

    .page-header[b-jsytoxny7l] {
        flex-direction: column;
    }

    .overall-status[b-jsytoxny7l] {
        flex-direction: column;
        text-align: center;
    }

    .checks-grid[b-jsytoxny7l] {
        grid-template-columns: 1fr;
    }

    .endpoint-item[b-jsytoxny7l] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }
}
/* /Components/Campaign/CombatantCard.razor.rz.scp.css */
.combatant-card[b-jmc0gk8zsn] {
    background: var(--surface-color, #2a2a2a);
    border: 1px solid var(--border-color, #444);
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 8px;
    transition: all 0.2s ease;
}

.combatant-card.current-turn[b-jmc0gk8zsn] {
    border-color: var(--primary-color, #4a9eff);
    box-shadow: 0 0 10px rgba(74, 158, 255, 0.3);
    background: var(--surface-highlight, #333);
}

.combatant-card.inactive[b-jmc0gk8zsn] {
    opacity: 0.5;
}

.combatant-card.party[b-jmc0gk8zsn] {
    border-left: 3px solid var(--success-color, #4caf50);
}

.combatant-card.enemy[b-jmc0gk8zsn] {
    border-left: 3px solid var(--danger-color, #f44336);
}

.combatant-card.neutral[b-jmc0gk8zsn] {
    border-left: 3px solid var(--warning-color, #ff9800);
}

.combatant-header[b-jmc0gk8zsn] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.initiative[b-jmc0gk8zsn] {
    background: var(--primary-color, #4a9eff);
    color: white;
    font-weight: bold;
    padding: 4px 8px;
    border-radius: 4px;
    min-width: 32px;
    text-align: center;
    font-size: 14px;
}

.combatant-name[b-jmc0gk8zsn] {
    font-weight: 600;
    font-size: 16px;
    flex: 1;
}

.player-name[b-jmc0gk8zsn] {
    color: var(--text-muted, #888);
    font-size: 14px;
}

.side-badge[b-jmc0gk8zsn] {
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: uppercase;
    background: var(--surface-color, #333);
    border: 1px solid var(--border-color, #555);
}

.hp-section[b-jmc0gk8zsn] {
    margin: 8px 0;
}

.hp-bar-container[b-jmc0gk8zsn] {
    height: 16px;
    background: var(--surface-color, #1a1a1a);
    border-radius: 8px;
    overflow: hidden;
    position: relative;
}

.hp-bar[b-jmc0gk8zsn] {
    height: 100%;
    background: linear-gradient(90deg, var(--danger-color, #f44336), var(--success-color, #4caf50));
    background-size: 200% 100%;
    background-position: right;
    transition: width 0.3s ease;
}

.temp-hp-bar[b-jmc0gk8zsn] {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    background: var(--primary-color, #4a9eff);
    opacity: 0.7;
}

.hp-text[b-jmc0gk8zsn] {
    font-size: 13px;
    text-align: center;
    margin-top: 4px;
    color: var(--text-color, #fff);
}

.temp-hp[b-jmc0gk8zsn] {
    color: var(--primary-color, #4a9eff);
    margin-left: 4px;
}

.conditions[b-jmc0gk8zsn] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 8px 0;
}

.condition-tag[b-jmc0gk8zsn] {
    background: var(--warning-color, #ff9800);
    color: #000;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 11px;
    cursor: pointer;
    transition: opacity 0.2s;
}

.condition-tag:hover[b-jmc0gk8zsn] {
    opacity: 0.8;
}

.notes[b-jmc0gk8zsn] {
    font-size: 12px;
    color: var(--text-muted, #888);
    font-style: italic;
    padding: 4px 0;
}

.combatant-controls[b-jmc0gk8zsn] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--border-color, #444);
}

.hp-controls[b-jmc0gk8zsn] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.hp-input[b-jmc0gk8zsn] {
    width: 60px;
    padding: 4px 8px;
    border: 1px solid var(--border-color, #444);
    border-radius: 4px;
    background: var(--input-bg, #1a1a1a);
    color: var(--text-color, #fff);
    text-align: center;
}

.btn-damage[b-jmc0gk8zsn],
.btn-heal[b-jmc0gk8zsn] {
    padding: 4px 12px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    font-size: 16px;
}

.btn-damage[b-jmc0gk8zsn] {
    background: var(--danger-color, #f44336);
    color: white;
}

.btn-heal[b-jmc0gk8zsn] {
    background: var(--success-color, #4caf50);
    color: white;
}

.btn-damage:hover[b-jmc0gk8zsn],
.btn-heal:hover[b-jmc0gk8zsn] {
    opacity: 0.9;
}

.action-controls[b-jmc0gk8zsn] {
    display: flex;
    gap: 4px;
}

.btn-icon[b-jmc0gk8zsn] {
    padding: 4px 8px;
    border: 1px solid var(--border-color, #444);
    border-radius: 4px;
    background: transparent;
    color: var(--text-color, #fff);
    cursor: pointer;
}

.btn-icon:hover[b-jmc0gk8zsn] {
    background: var(--surface-color, #333);
}

.icon-edit[b-jmc0gk8zsn]::before {
    content: "Edit";
    font-size: 11px;
}

.icon-remove[b-jmc0gk8zsn]::before {
    content: "X";
    font-size: 11px;
    color: var(--danger-color, #f44336);
}

/* Hidden combatant styles (GM only sees these) */
.combatant-card.hidden-combatant[b-jmc0gk8zsn] {
    opacity: 0.6;
    border-style: dashed;
    background: repeating-linear-gradient(
        45deg,
        var(--surface-color, #2a2a2a),
        var(--surface-color, #2a2a2a) 10px,
        rgba(0, 0, 0, 0.1) 10px,
        rgba(0, 0, 0, 0.1) 20px
    );
}

.combatant-card.hidden-combatant .combatant-header[b-jmc0gk8zsn]::after {
    content: "HIDDEN";
    font-size: 9px;
    background: var(--warning-color, #ff9800);
    color: #000;
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: auto;
    font-weight: bold;
}

.btn-icon.active[b-jmc0gk8zsn] {
    background: var(--primary-color, #4a9eff);
    border-color: var(--primary-color, #4a9eff);
}

.icon-visibility[b-jmc0gk8zsn] {
    font-size: 14px;
}

/* Condition management styles */
.conditions-section[b-jmc0gk8zsn] {
    margin: 6px 0;
}

.condition-tag[b-jmc0gk8zsn] {
    position: relative;
    cursor: pointer;
    user-select: none;
}

.condition-tag .remove-x[b-jmc0gk8zsn] {
    margin-left: 4px;
    font-weight: bold;
    opacity: 0.7;
}

.condition-tag:hover .remove-x[b-jmc0gk8zsn] {
    opacity: 1;
    color: var(--danger-color, #f44336);
}

.add-condition[b-jmc0gk8zsn] {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 6px;
}

.btn-condition[b-jmc0gk8zsn] {
    padding: 2px 8px;
    font-size: 11px;
    background: transparent;
    border: 1px dashed var(--border-color, #444);
    border-radius: 12px;
    color: var(--text-muted, #888);
    cursor: pointer;
    transition: all 0.15s;
}

.btn-condition:hover[b-jmc0gk8zsn] {
    border-color: var(--primary-color, #4a9eff);
    color: var(--primary-color, #4a9eff);
}

.condition-select[b-jmc0gk8zsn] {
    padding: 2px 6px;
    font-size: 12px;
    border: 1px solid var(--border-color, #444);
    border-radius: 4px;
    background: var(--input-bg, #1a1a1a);
    color: var(--text-color, #fff);
    min-width: 120px;
}

.btn-add-cond[b-jmc0gk8zsn],
.btn-cancel-cond[b-jmc0gk8zsn] {
    padding: 2px 8px;
    font-size: 12px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.btn-add-cond[b-jmc0gk8zsn] {
    background: var(--success-color, #4caf50);
    color: white;
}

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

.btn-cancel-cond[b-jmc0gk8zsn] {
    background: var(--surface-color, #333);
    color: var(--text-muted, #888);
}
/* /Components/Campaign/CombatLog.razor.rz.scp.css */
.combat-log[b-7qm2iohnbv] {
    background: var(--surface-color, #1e1e1e);
    border: 1px solid var(--border-color, #333);
    border-radius: 12px;
    margin-top: 16px;
    max-height: 300px;
    display: flex;
    flex-direction: column;
}

.log-header[b-7qm2iohnbv] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color, #333);
}

.log-header h3[b-7qm2iohnbv] {
    margin: 0;
    font-size: 16px;
    color: var(--text-color, #fff);
}

.btn-clear-log[b-7qm2iohnbv] {
    background: transparent;
    border: 1px solid var(--border-color, #444);
    color: var(--text-muted, #888);
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 11px;
    cursor: pointer;
}

.btn-clear-log:hover[b-7qm2iohnbv] {
    border-color: var(--danger-color, #f44336);
    color: var(--danger-color, #f44336);
}

.log-entries[b-7qm2iohnbv] {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
}

.log-empty[b-7qm2iohnbv] {
    text-align: center;
    color: var(--text-muted, #888);
    padding: 16px;
    font-size: 13px;
}

.log-entry[b-7qm2iohnbv] {
    display: flex;
    gap: 8px;
    padding: 4px 8px;
    font-size: 12px;
    border-radius: 4px;
    margin-bottom: 2px;
}

.log-entry:nth-child(odd)[b-7qm2iohnbv] {
    background: rgba(255, 255, 255, 0.02);
}

.log-time[b-7qm2iohnbv] {
    color: var(--text-muted, #666);
    font-family: monospace;
    font-size: 11px;
    min-width: 60px;
}

.log-message[b-7qm2iohnbv] {
    flex: 1;
    color: var(--text-color, #ddd);
}

/* Entry type colors */
.log-entry.damage .log-message[b-7qm2iohnbv] {
    color: var(--danger-color, #f44336);
}

.log-entry.heal .log-message[b-7qm2iohnbv] {
    color: var(--success-color, #4caf50);
}

.log-entry.turn .log-message[b-7qm2iohnbv] {
    color: var(--primary-color, #4a9eff);
}

.log-entry.status .log-message[b-7qm2iohnbv] {
    color: var(--warning-color, #ff9800);
}
/* /Components/Campaign/CombatTracker.razor.rz.scp.css */
.combat-tracker[b-lq3i81xccq] {
    background: var(--panel-bg, #1e1e1e);
    border: 1px solid var(--border-color, #444);
    border-radius: 12px;
    overflow: hidden;
}

.tracker-header[b-lq3i81xccq] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    background: var(--surface-color, #2a2a2a);
    border-bottom: 1px solid var(--border-color, #444);
}

.encounter-info h3[b-lq3i81xccq] {
    margin: 0 0 4px 0;
    font-size: 18px;
}

.encounter-status[b-lq3i81xccq] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.status-badge[b-lq3i81xccq] {
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
}

.status-badge.planned[b-lq3i81xccq] {
    background: var(--text-muted, #666);
    color: white;
}

.status-badge.inprogress[b-lq3i81xccq] {
    background: var(--success-color, #4caf50);
    color: white;
}

.status-badge.completed[b-lq3i81xccq] {
    background: var(--primary-color, #4a9eff);
    color: white;
}

.round-info[b-lq3i81xccq] {
    font-size: 14px;
    color: var(--text-muted, #888);
}

.encounter-controls[b-lq3i81xccq] {
    display: flex;
    gap: 8px;
}

.btn[b-lq3i81xccq] {
    padding: 8px 16px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.2s;
}

.btn-primary[b-lq3i81xccq] {
    background: var(--primary-color, #4a9eff);
    color: white;
}

.btn-secondary[b-lq3i81xccq] {
    background: var(--surface-color, #333);
    color: var(--text-color, #fff);
    border: 1px solid var(--border-color, #555);
}

.btn-danger[b-lq3i81xccq] {
    background: var(--danger-color, #f44336);
    color: white;
}

.btn:hover:not(:disabled)[b-lq3i81xccq] {
    opacity: 0.9;
    transform: translateY(-1px);
}

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

.combatants-list[b-lq3i81xccq] {
    padding: 16px;
    max-height: 60vh;
    overflow-y: auto;
}

.empty-state[b-lq3i81xccq] {
    text-align: center;
    padding: 40px;
    color: var(--text-muted, #888);
}

.empty-state p[b-lq3i81xccq] {
    margin-bottom: 16px;
}

.tracker-footer[b-lq3i81xccq] {
    display: flex;
    gap: 8px;
    padding: 16px;
    background: var(--surface-color, #2a2a2a);
    border-top: 1px solid var(--border-color, #444);
}
/* /Components/Campaign/DiceRoller.razor.rz.scp.css */
.dice-roller[b-5jxs4gabe2] {
    background: var(--panel-bg, #1e1e1e);
    border: 1px solid var(--border-color, #444);
    border-radius: 12px;
    overflow: hidden;
}

.roller-header[b-5jxs4gabe2] {
    padding: 12px 16px;
    background: var(--surface-color, #2a2a2a);
    border-bottom: 1px solid var(--border-color, #444);
}

.roller-header h4[b-5jxs4gabe2] {
    margin: 0;
    font-size: 16px;
}

.quick-roll[b-5jxs4gabe2] {
    padding: 16px;
    border-bottom: 1px solid var(--border-color, #444);
}

.roll-input-group[b-5jxs4gabe2] {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}

.roll-input[b-5jxs4gabe2] {
    flex: 1;
    padding: 10px 14px;
    border: 2px solid var(--border-color, #444);
    border-radius: 8px;
    background: var(--input-bg, #1a1a1a);
    color: var(--text-color, #fff);
    font-size: 16px;
    font-family: monospace;
}

.roll-input:focus[b-5jxs4gabe2] {
    outline: none;
    border-color: var(--primary-color, #4a9eff);
}

.roll-input.invalid[b-5jxs4gabe2] {
    border-color: var(--danger-color, #f44336);
}

.btn-roll[b-5jxs4gabe2] {
    padding: 10px 24px;
    background: var(--primary-color, #4a9eff);
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-roll:hover:not(:disabled)[b-5jxs4gabe2] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(74, 158, 255, 0.4);
}

.btn-roll:disabled[b-5jxs4gabe2] {
    opacity: 0.5;
    cursor: not-allowed;
}

.quick-buttons[b-5jxs4gabe2] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.btn-quick[b-5jxs4gabe2] {
    padding: 6px 12px;
    background: var(--surface-color, #333);
    color: var(--text-color, #fff);
    border: 1px solid var(--border-color, #555);
    border-radius: 6px;
    cursor: pointer;
    font-family: monospace;
    transition: all 0.2s;
}

.btn-quick:hover[b-5jxs4gabe2] {
    background: var(--primary-color, #4a9eff);
    border-color: var(--primary-color, #4a9eff);
}

.pending-requests[b-5jxs4gabe2] {
    padding: 16px;
    border-bottom: 1px solid var(--border-color, #444);
}

.pending-requests h5[b-5jxs4gabe2] {
    margin: 0 0 12px 0;
    font-size: 14px;
    color: var(--text-muted, #888);
    text-transform: uppercase;
}

.roll-request[b-5jxs4gabe2] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    background: var(--surface-color, #2a2a2a);
    border-radius: 8px;
    margin-bottom: 8px;
    border-left: 3px solid var(--warning-color, #ff9800);
}

.request-info[b-5jxs4gabe2] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.roll-type[b-5jxs4gabe2] {
    font-weight: 600;
}

.description[b-5jxs4gabe2] {
    font-size: 13px;
    color: var(--text-muted, #888);
}

.dc[b-5jxs4gabe2] {
    font-size: 12px;
    color: var(--primary-color, #4a9eff);
}

.request-actions[b-5jxs4gabe2] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.formula[b-5jxs4gabe2] {
    font-family: monospace;
    background: var(--input-bg, #1a1a1a);
    padding: 4px 8px;
    border-radius: 4px;
}

.btn[b-5jxs4gabe2] {
    padding: 8px 16px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 500;
}

.btn-primary[b-5jxs4gabe2] {
    background: var(--primary-color, #4a9eff);
    color: white;
}

.roll-history[b-5jxs4gabe2] {
    padding: 16px;
    max-height: 300px;
    overflow-y: auto;
}

.roll-history h5[b-5jxs4gabe2] {
    margin: 0 0 12px 0;
    font-size: 14px;
    color: var(--text-muted, #888);
    text-transform: uppercase;
}

.roll-result[b-5jxs4gabe2] {
    padding: 12px;
    background: var(--surface-color, #2a2a2a);
    border-radius: 8px;
    margin-bottom: 8px;
}

.roll-result.critical[b-5jxs4gabe2] {
    border-left: 3px solid var(--success-color, #4caf50);
    background: rgba(76, 175, 80, 0.1);
}

.roll-result.fumble[b-5jxs4gabe2] {
    border-left: 3px solid var(--danger-color, #f44336);
    background: rgba(244, 67, 54, 0.1);
}

.result-header[b-5jxs4gabe2] {
    display: flex;
    justify-content: space-between;
    margin-bottom: 6px;
}

.roller-name[b-5jxs4gabe2] {
    font-weight: 600;
}

.roll-type[b-5jxs4gabe2] {
    color: var(--text-muted, #888);
    font-size: 13px;
}

.result-details[b-5jxs4gabe2] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: monospace;
}

.dice[b-5jxs4gabe2] {
    color: var(--primary-color, #4a9eff);
}

.modifier[b-5jxs4gabe2] {
    color: var(--text-muted, #888);
}

.total[b-5jxs4gabe2] {
    font-weight: bold;
    font-size: 18px;
}

.dc-result[b-5jxs4gabe2] {
    margin-top: 8px;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 13px;
}

.dc-result.success[b-5jxs4gabe2] {
    background: rgba(76, 175, 80, 0.2);
    color: var(--success-color, #4caf50);
}

.dc-result.failure[b-5jxs4gabe2] {
    background: rgba(244, 67, 54, 0.2);
    color: var(--danger-color, #f44336);
}

.crit-label[b-5jxs4gabe2] {
    margin-top: 8px;
    padding: 4px 8px;
    background: var(--success-color, #4caf50);
    color: white;
    border-radius: 4px;
    font-weight: bold;
    text-align: center;
    animation: pulse-b-5jxs4gabe2 1s infinite;
}

@keyframes pulse-b-5jxs4gabe2 {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}
/* /Components/Campaign/EntityPicker.razor.rz.scp.css */
.entity-picker[b-lxb7jquu4m] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

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

.search-input[b-lxb7jquu4m] {
    width: 100%;
    padding: 10px 36px 10px 12px;
    border: 1px solid var(--border-color, #444);
    border-radius: 6px;
    background: var(--input-bg, #1a1a1a);
    color: var(--text-color, #fff);
    font-size: 14px;
}

.search-input:focus[b-lxb7jquu4m] {
    outline: none;
    border-color: var(--primary-color, #4a9eff);
}

.btn-clear[b-lxb7jquu4m] {
    position: absolute;
    right: 8px;
    background: none;
    border: none;
    color: var(--text-muted, #888);
    font-size: 18px;
    cursor: pointer;
    padding: 4px 8px;
}

.btn-clear:hover[b-lxb7jquu4m] {
    color: var(--text-color, #fff);
}

.search-loading[b-lxb7jquu4m],
.no-results[b-lxb7jquu4m],
.search-hint[b-lxb7jquu4m] {
    padding: 12px;
    text-align: center;
    color: var(--text-muted, #888);
    font-size: 13px;
}

.search-results[b-lxb7jquu4m] {
    max-height: 300px;
    overflow-y: auto;
    border: 1px solid var(--border-color, #444);
    border-radius: 6px;
    background: var(--surface-color, #2a2a2a);
}

.result-item[b-lxb7jquu4m] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    cursor: pointer;
    border-bottom: 1px solid var(--border-color, #333);
    transition: background 0.15s ease;
}

.result-item:last-child[b-lxb7jquu4m] {
    border-bottom: none;
}

.result-item:hover[b-lxb7jquu4m] {
    background: var(--surface-highlight, #333);
}

.result-image[b-lxb7jquu4m] {
    width: 40px;
    height: 40px;
    border-radius: 6px;
    object-fit: cover;
    flex-shrink: 0;
}

.result-image.placeholder[b-lxb7jquu4m] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-color, #4a9eff);
    color: white;
    font-weight: bold;
    font-size: 18px;
}

.result-info[b-lxb7jquu4m] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow: hidden;
}

.result-name[b-lxb7jquu4m] {
    font-weight: 600;
    font-size: 14px;
    color: var(--text-color, #fff);
}

.result-summary[b-lxb7jquu4m] {
    font-size: 12px;
    color: var(--text-muted, #888);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.result-type[b-lxb7jquu4m] {
    font-size: 11px;
    color: var(--primary-color, #4a9eff);
    text-transform: uppercase;
}

.selected-entity[b-lxb7jquu4m] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: var(--surface-highlight, #333);
    border: 1px solid var(--primary-color, #4a9eff);
    border-radius: 6px;
}

.selected-label[b-lxb7jquu4m] {
    font-size: 12px;
    color: var(--text-muted, #888);
}

.selected-name[b-lxb7jquu4m] {
    font-weight: 600;
    flex: 1;
}

.btn-remove[b-lxb7jquu4m] {
    background: none;
    border: none;
    color: var(--danger-color, #f44336);
    font-size: 16px;
    cursor: pointer;
    padding: 2px 6px;
}

.btn-remove:hover[b-lxb7jquu4m] {
    opacity: 0.8;
}
/* /Components/Campaign/PartyOverview.razor.rz.scp.css */
.party-overview[b-ed0ledt5on] {
    background: var(--surface-color, #1e1e1e);
    border: 1px solid var(--border-color, #333);
    border-radius: 12px;
    margin-top: 16px;
}

.panel-header[b-ed0ledt5on] {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color, #333);
}

.panel-header h3[b-ed0ledt5on] {
    margin: 0;
    font-size: 16px;
    color: var(--text-color, #fff);
}

.empty-party[b-ed0ledt5on] {
    padding: 24px 16px;
    text-align: center;
    color: var(--text-muted, #888);
}

.party-list[b-ed0ledt5on] {
    padding: 8px;
}

.party-member[b-ed0ledt5on] {
    background: var(--panel-bg, #2a2a2a);
    border: 1px solid var(--border-color, #444);
    border-left: 3px solid var(--success-color, #4caf50);
    border-radius: 6px;
    padding: 10px;
    margin-bottom: 8px;
}

.party-member:last-child[b-ed0ledt5on] {
    margin-bottom: 0;
}

.party-member.downed[b-ed0ledt5on] {
    opacity: 0.6;
    border-left-color: var(--danger-color, #f44336);
}

.member-header[b-ed0ledt5on] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
}

.member-name[b-ed0ledt5on] {
    font-weight: 600;
    font-size: 14px;
}

.player-name[b-ed0ledt5on] {
    font-size: 12px;
    color: var(--text-muted, #888);
}

.hp-display[b-ed0ledt5on] {
    margin-bottom: 6px;
}

.hp-bar-bg[b-ed0ledt5on] {
    height: 8px;
    background: var(--surface-color, #1a1a1a);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 2px;
}

.hp-bar-fill[b-ed0ledt5on] {
    height: 100%;
    background: linear-gradient(90deg, var(--danger-color, #f44336), var(--success-color, #4caf50));
    background-size: 200% 100%;
    background-position: right;
    transition: width 0.3s ease;
}

.hp-text[b-ed0ledt5on] {
    font-size: 11px;
    color: var(--text-muted, #888);
}

.member-stats[b-ed0ledt5on] {
    display: flex;
    gap: 8px;
    margin-bottom: 4px;
}

.stat[b-ed0ledt5on] {
    font-size: 11px;
    padding: 2px 6px;
    background: var(--surface-color, #333);
    border-radius: 4px;
    color: var(--text-color, #fff);
}

.member-conditions[b-ed0ledt5on] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
}

.condition-badge[b-ed0ledt5on] {
    font-size: 10px;
    padding: 1px 6px;
    background: var(--warning-color, #ff9800);
    color: #000;
    border-radius: 10px;
}
/* /Components/Layout/CRTOverlay.razor.rz.scp.css */
/* ============================================================================
   CRT OVERLAY EFFECTS
   ============================================================================
   Visual effects that overlay the entire page when CRT theme is active.
   Includes scanlines, phosphor glow, vignette, refresh line, and power LED.

   IMPORTANT: All overlays use viewport units (vh/vw) to ensure they cover
   the entire screen regardless of page length or scroll position.
   ============================================================================ */

/* Hide SVG filter definitions (only used for filter reference) */
.crt-svg-filters[b-jn712xgjlh] {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
    pointer-events: none;
}

/* Screen bulge - DISABLED */
.crt-screen-bulge[b-jn712xgjlh] {
    display: none;
}

/* Glass reflection hotspot (top-left glare) - prominent curved glass reflection */
.crt-screen-bulge[b-jn712xgjlh]::before {
    content: '';
    position: absolute;
    top: 3vh;
    left: 5vw;
    width: 40vw;
    height: 25vh;
    background: radial-gradient(
        ellipse at 25% 25%,
        rgba(255, 255, 255, 0.08) 0%,
        rgba(255, 255, 255, 0.04) 25%,
        rgba(255, 255, 255, 0.02) 50%,
        transparent 70%
    );
    border-radius: 50%;
    pointer-events: none;
    transform: rotate(-12deg) skewX(-5deg);
    filter: blur(2px);
}

/* Secondary reflection (bottom-right, dimmer) + edge highlight strip */
.crt-screen-bulge[b-jn712xgjlh]::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    border-radius: 40px;
    /* Edge highlight that follows the curve - simulates light hitting curved edge */
    background:
        /* Top edge highlight */
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.03) 0%,
            transparent 3%
        ),
        /* Left edge highlight */
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.02) 0%,
            transparent 2%
        ),
        /* Bottom-right subtle reflection */
        radial-gradient(
            ellipse 30% 25% at 85% 85%,
            rgba(255, 255, 255, 0.015) 0%,
            transparent 60%
        );
}

/* Chromatic aberration - DISABLED */
.crt-chromatic-aberration[b-jn712xgjlh] {
    display: none;
}

/* Scan lines overlay - z-index high enough to be above modals */
.crt-scanlines[b-jn712xgjlh] {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    pointer-events: none;
    z-index: 99990;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(0, 0, 0, 0.3) 2px,
        rgba(0, 0, 0, 0.3) 4px
    );
}

/* Horizontal refresh line that sweeps down the screen */
.crt-refresh-line[b-jn712xgjlh] {
    position: fixed !important;
    left: 0 !important;
    width: 100vw !important;
    height: 12px;
    pointer-events: none;
    z-index: 99991;
    background: linear-gradient(
        180deg,
        transparent,
        rgba(var(--crt-r, 74), var(--crt-g, 222), var(--crt-b, 128), 0.15),
        rgba(var(--crt-r, 74), var(--crt-g, 222), var(--crt-b, 128), 0.08),
        transparent
    );
    animation: refreshLine-b-jn712xgjlh 3s linear infinite;
}

/* Phosphor color overlay - subtle green tint */
.crt-phosphor-overlay[b-jn712xgjlh] {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    pointer-events: none;
    z-index: 99985;
    background: linear-gradient(
        180deg,
        rgba(var(--crt-r, 74), var(--crt-g, 222), var(--crt-b, 128), 0.05) 0%,
        rgba(var(--crt-r, 74), var(--crt-g, 222), var(--crt-b, 128), 0.08) 50%,
        rgba(var(--crt-r, 74), var(--crt-g, 222), var(--crt-b, 128), 0.05) 100%
    );
    mix-blend-mode: screen;
}

/* Vignette - darkened edges like old CRT monitors */
.crt-vignette[b-jn712xgjlh] {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    pointer-events: none;
    z-index: 99992;
    background: radial-gradient(
        ellipse at center,
        transparent 0%,
        transparent 50%,
        rgba(0, 0, 0, 0.3) 75%,
        rgba(0, 0, 0, 0.7) 100%
    );
}

/* Screen glare - subtle reflection effect */
.crt-glare[b-jn712xgjlh] {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    pointer-events: none;
    z-index: 99993;
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.02) 0%,
        transparent 40%,
        transparent 60%,
        rgba(255, 255, 255, 0.01) 100%
    );
}

/* Power LED indicator */
.crt-power-led[b-jn712xgjlh] {
    position: fixed !important;
    bottom: 24px !important;
    right: 24px !important;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    z-index: 99995;
    background: rgb(var(--crt-r, 74), var(--crt-g, 222), var(--crt-b, 128));
    box-shadow:
        0 0 8px rgb(var(--crt-r, 74), var(--crt-g, 222), var(--crt-b, 128)),
        0 0 16px rgb(var(--crt-r, 74), var(--crt-g, 222), var(--crt-b, 128)),
        0 0 24px rgba(var(--crt-r, 74), var(--crt-g, 222), var(--crt-b, 128), 0.5);
    animation: pulse-b-jn712xgjlh 2s ease-in-out infinite;
}

/* Animations - use viewport units for consistent speed */
@keyframes refreshLine-b-jn712xgjlh {
    0% {
        top: -15px;
        opacity: 0;
    }
    3% {
        opacity: 0.8;
    }
    97% {
        opacity: 0.8;
    }
    100% {
        top: 100vh;
        opacity: 0;
    }
}

@keyframes pulse-b-jn712xgjlh {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.6;
        transform: scale(0.9);
    }
}

/* Optional: Screen flicker effect (applied via JS) */
@keyframes flicker-b-jn712xgjlh {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.95;
    }
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* Main Layout Styles - Using LoreBench Theme */

.ww-layout[b-lwpc9ss3dp] {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Top Bar */
.ww-topbar[b-lwpc9ss3dp] {
    background: linear-gradient(180deg, var(--lb-bg-elevated-2) 0%, var(--lb-bg-elevated) 100%);
    border-bottom: 1px solid var(--lb-border-default);
    padding: 0 2rem;
    position: sticky;
    top: 0;
    z-index: 100;
}

.ww-topbar-content[b-lwpc9ss3dp] {
    max-width: 1600px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    height: 70px;
}

.ww-logo[b-lwpc9ss3dp] {
    font-size: var(--lb-font-size-xl);
    font-weight: var(--lb-font-weight-bold);
    color: var(--lb-accent-primary);
    text-decoration: none;
    font-family: Georgia, 'Times New Roman', serif;
    letter-spacing: 0.5px;
    transition: color var(--lb-transition-base);
    white-space: nowrap;
}

    .ww-logo:hover[b-lwpc9ss3dp] {
        color: var(--lb-accent-primary-light);
    }

/* Search Bar - Inline */
.ww-search-bar[b-lwpc9ss3dp] {
    flex: 1;
    max-width: 600px;
    position: relative;
}

.ww-search-input[b-lwpc9ss3dp] {
    width: 100%;
    padding: 0.625rem 1rem 0.625rem 2.5rem;
    background: var(--lb-bg-input);
    border: 1px solid var(--lb-border-default);
    border-radius: var(--lb-radius-md);
    color: var(--lb-text-primary);
    font-size: var(--lb-font-size-sm);
    transition: all var(--lb-transition-base);
}

    .ww-search-input:focus[b-lwpc9ss3dp] {
        outline: none;
        border-color: var(--lb-accent-primary);
        background: var(--lb-bg-elevated-2);
        box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.1);
    }

    .ww-search-input[b-lwpc9ss3dp]::placeholder {
        color: var(--lb-text-muted);
    }

.ww-search-icon[b-lwpc9ss3dp] {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--lb-text-muted);
    font-size: var(--lb-font-size-base);
    pointer-events: none;
}

.ww-search-clear[b-lwpc9ss3dp] {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--lb-text-muted);
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    font-size: var(--lb-font-size-sm);
    border-radius: var(--lb-radius-sm);
    transition: all var(--lb-transition-base);
}

.ww-search-clear:hover[b-lwpc9ss3dp] {
    color: var(--lb-text-primary);
    background: var(--lb-bg-hover);
}

/* Navigation Actions */
.ww-nav-actions[b-lwpc9ss3dp] {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    white-space: nowrap;
}

.ww-nav-link[b-lwpc9ss3dp] {
    color: var(--lb-text-secondary);
    text-decoration: none;
    padding: var(--lb-spacing-sm) var(--lb-spacing-md);
    border-radius: var(--lb-radius-sm);
    transition: all var(--lb-transition-base);
    font-size: var(--lb-font-size-sm);
    font-weight: var(--lb-font-weight-medium);
    border: 1px solid transparent;
}

    .ww-nav-link:hover[b-lwpc9ss3dp] {
        color: var(--lb-text-primary);
        background: var(--lb-bg-hover);
        border-color: var(--lb-border-default);
    }

/* Sign In Link - Special Styling */
.ww-nav-signin[b-lwpc9ss3dp] {
    color: var(--lb-accent-primary);
    font-weight: var(--lb-font-weight-semibold);
}

    .ww-nav-signin:hover[b-lwpc9ss3dp] {
        color: var(--lb-accent-primary-light);
        background: transparent;
        border-color: var(--lb-accent-primary);
    }

.ww-btn-create[b-lwpc9ss3dp] {
    background: var(--lb-button-primary-bg);
    color: var(--lb-button-primary-text);
    padding: var(--lb-spacing-sm) 1.25rem;
    border-radius: var(--lb-radius-sm);
    font-weight: var(--lb-font-weight-semibold);
    border: none;
    cursor: pointer;
    transition: all var(--lb-transition-base);
    font-size: var(--lb-font-size-sm);
    text-decoration: none;
    display: inline-block;
}

    .ww-btn-create:hover[b-lwpc9ss3dp] {
        background: var(--lb-button-primary-hover);
        transform: translateY(-1px);
    }

/* Main Content */
.ww-main-content[b-lwpc9ss3dp] {
    flex: 1;
    max-width: 1400px;
    width: 90%;
    margin: 0 auto;
    padding: var(--lb-spacing-xl) var(--lb-spacing-xl) 4rem;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .ww-topbar[b-lwpc9ss3dp] {
        padding: 0 1rem;
    }

    .ww-topbar-content[b-lwpc9ss3dp] {
        gap: 1rem;
    }

    .ww-search-bar[b-lwpc9ss3dp] {
        max-width: 400px;
    }
}

@media (max-width: 768px) {
    .ww-topbar[b-lwpc9ss3dp] {
        padding: 0 0.5rem;
        /* Remove sticky positioning on mobile - let it scroll with page */
        position: relative;
        top: auto;
    }

    .ww-topbar-content[b-lwpc9ss3dp] {
        height: 56px;
        padding: 0;
        gap: 0.5rem;
    }

    .ww-logo[b-lwpc9ss3dp] {
        flex: 1;
        font-size: 1.1rem;
    }

    /* Hide search bar on mobile - it's in the mobile drawer */
    .ww-search-bar[b-lwpc9ss3dp] {
        display: none !important;
    }

    /* Hide nav actions on mobile - they're in the mobile drawer */
    .ww-nav-actions[b-lwpc9ss3dp] {
        display: none !important;
    }

    /* Main content full width on mobile */
    .ww-main-content[b-lwpc9ss3dp] {
        width: 100%;
        padding: 1rem;
    }
}

/* Add these styles to your existing layout CSS file */

/* Auth Buttons in Nav */
.ww-nav-signin[b-lwpc9ss3dp],
.ww-nav-register[b-lwpc9ss3dp] {
    cursor: pointer;
    transition: all 0.2s ease;
}

    .ww-nav-signin:hover[b-lwpc9ss3dp] {
        color: var(--accent-primary, #d4af37);
    }

.ww-nav-register[b-lwpc9ss3dp] {
    padding: 0.5rem 1rem;
    background: var(--accent-primary, #d4af37);
    color: #0a0a0a;
    border-radius: 6px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s ease;
}

    .ww-nav-register:hover[b-lwpc9ss3dp] {
        background: var(--accent-secondary, #b8960f);
        transform: translateY(-1px);
    }

/* Sign in button (when used as button element) */
button.ww-nav-signin[b-lwpc9ss3dp] {
    background: none;
    border: none;
    font-size: inherit;
    font-family: inherit;
    padding: 0;
    margin: 0;
}

/* Create button styling */
.ww-btn-create[b-lwpc9ss3dp] {
    padding: 0.5rem 1rem;
    background: linear-gradient(135deg, var(--accent-primary, #d4af37), var(--accent-secondary, #b8960f));
    color: #0a0a0a;
    border-radius: 6px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

    .ww-btn-create:hover[b-lwpc9ss3dp] {
        transform: translateY(-1px);
        box-shadow: 0 4px 8px rgba(212, 175, 55, 0.3);
    }

    .ww-btn-create[b-lwpc9ss3dp]::before {
        content: '?';
    }

/* Adjust nav actions spacing */
.ww-nav-actions[b-lwpc9ss3dp] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

/* Profile link styling */
a[href^="/profile/"][b-lwpc9ss3dp] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

    a[href^="/profile/"][b-lwpc9ss3dp]::before {
        content: '??';
    }

/* ============================================
   User Dropdown Menu
   ============================================ */
.ww-user-dropdown[b-lwpc9ss3dp] {
    position: relative;
    display: inline-block;
}

.ww-dropdown-toggle[b-lwpc9ss3dp] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.875rem;
    background: var(--lb-bg-elevated-2, #1a1a1a);
    border: 1px solid var(--lb-border-default, #333);
    border-radius: 6px;
    color: var(--lb-text-primary, #e8e8e8);
    cursor: pointer;
    font-size: 0.875rem;
    font-family: inherit;
    transition: all 0.2s ease;
}

.ww-dropdown-toggle:hover[b-lwpc9ss3dp] {
    background: var(--lb-bg-hover, #252525);
    border-color: var(--lb-accent-primary, #d4af37);
}

.ww-user-icon[b-lwpc9ss3dp] {
    font-size: 1rem;
}

.ww-username[b-lwpc9ss3dp] {
    font-weight: 500;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ww-dropdown-arrow[b-lwpc9ss3dp] {
    font-size: 0.5rem;
    opacity: 0.7;
    margin-left: 0.25rem;
}

.ww-dropdown-menu[b-lwpc9ss3dp] {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 180px;
    background: var(--lb-bg-elevated-2, #1a1a1a);
    border: 1px solid var(--lb-border-default, #333);
    border-radius: 8px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    z-index: 1000;
    overflow: hidden;
    padding: 0.5rem 0;
}

.ww-dropdown-item[b-lwpc9ss3dp] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.625rem 1rem;
    color: var(--lb-text-secondary, #a0a0a0);
    text-decoration: none;
    font-size: 0.875rem;
    transition: all 0.15s ease;
    border: none;
    background: none;
    width: 100%;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
}

.ww-dropdown-item:hover[b-lwpc9ss3dp] {
    background: var(--lb-bg-hover, #252525);
    color: var(--lb-text-primary, #e8e8e8);
}

.ww-dropdown-divider[b-lwpc9ss3dp] {
    height: 1px;
    background: var(--lb-border-default, #333);
    margin: 0.375rem 0;
}

.ww-dropdown-admin[b-lwpc9ss3dp] {
    color: #f59e0b;
}

.ww-dropdown-admin:hover[b-lwpc9ss3dp] {
    background: rgba(245, 158, 11, 0.15);
    color: #fbbf24;
}

.ww-dropdown-logout[b-lwpc9ss3dp] {
    color: var(--lb-text-muted, #666);
}

.ww-dropdown-logout:hover[b-lwpc9ss3dp] {
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
}

/* Remove the ? prefix from Create button */
.ww-btn-create[b-lwpc9ss3dp]::before {
    content: none;
}

/* Invisible backdrop to close dropdown */
.ww-dropdown-backdrop[b-lwpc9ss3dp] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
}

/* ============================================
   Footer
   ============================================ */
.ww-footer[b-lwpc9ss3dp] {
    margin-top: auto;
    padding: 1.5rem 2rem;
    border-top: 1px solid var(--lb-border-default, #333);
    background: var(--lb-bg-elevated, #141414);
}

.ww-footer-content[b-lwpc9ss3dp] {
    max-width: 1600px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.ww-footer-brand[b-lwpc9ss3dp] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.ww-footer-logo[b-lwpc9ss3dp] {
    font-family: Georgia, serif;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--lb-accent-primary, #d4af37);
}

.ww-footer-tagline[b-lwpc9ss3dp] {
    color: var(--lb-text-muted, #666);
    font-size: 0.85rem;
}

.ww-footer-links[b-lwpc9ss3dp] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.85rem;
}

.ww-footer-links a[b-lwpc9ss3dp] {
    color: var(--lb-text-muted, #666);
    text-decoration: none;
    transition: color 0.2s;
}

.ww-footer-links a:hover[b-lwpc9ss3dp] {
    color: var(--lb-accent-primary, #d4af37);
}

.ww-footer-divider[b-lwpc9ss3dp] {
    color: var(--lb-text-muted, #666);
    opacity: 0.5;
}

.ww-footer-copy[b-lwpc9ss3dp] {
    color: var(--lb-text-muted, #666);
}

@media (max-width: 768px) {
    .ww-footer[b-lwpc9ss3dp] {
        padding: 1.25rem 1rem;
    }

    .ww-footer-links[b-lwpc9ss3dp] {
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.5rem;
    }

    .ww-footer-links a[b-lwpc9ss3dp] {
        padding: 0.5rem;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }
}

@media (max-width: 600px) {
    .ww-footer-content[b-lwpc9ss3dp] {
        flex-direction: column;
        text-align: center;
        gap: 1rem;
    }

    .ww-footer-brand[b-lwpc9ss3dp] {
        flex-direction: column;
        gap: 0.25rem;
    }
}
/* /Components/Layout/MobileNav.razor.rz.scp.css */
/* ============================================================================
   MOBILE NAVIGATION COMPONENT
   ============================================================================
   Hamburger menu with slide-out drawer for mobile devices.
   Only visible at 768px and below.
   ============================================================================ */

/* ============================================================================
   HAMBURGER TOGGLE BUTTON
   ============================================================================ */

.mobile-nav-toggle[b-1k3g9xnbwg] {
    display: none; /* Hidden by default on desktop */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 8px;
    background: transparent;
    border: none;
    cursor: pointer;
    z-index: 1002;
    border-radius: var(--lb-radius-sm, 4px);
    transition: background 0.2s ease;
}

.mobile-nav-toggle:hover[b-1k3g9xnbwg] {
    background: var(--lb-bg-hover, rgba(255, 255, 255, 0.1));
}

.hamburger-line[b-1k3g9xnbwg] {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--lb-text-primary, #e8e8e8);
    border-radius: 2px;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Animated X when open */
.mobile-nav-toggle.open .hamburger-line:nth-child(1)[b-1k3g9xnbwg] {
    transform: translateY(7px) rotate(45deg);
}

.mobile-nav-toggle.open .hamburger-line:nth-child(2)[b-1k3g9xnbwg] {
    opacity: 0;
}

.mobile-nav-toggle.open .hamburger-line:nth-child(3)[b-1k3g9xnbwg] {
    transform: translateY(-7px) rotate(-45deg);
}

/* Show hamburger on mobile */
@media (max-width: 768px) {
    .mobile-nav-toggle[b-1k3g9xnbwg] {
        display: flex;
    }
}

/* ============================================================================
   OVERLAY BACKDROP
   ============================================================================ */

.mobile-nav-overlay[b-1k3g9xnbwg] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.mobile-nav-overlay.visible[b-1k3g9xnbwg] {
    opacity: 1;
    visibility: visible;
}

/* ============================================================================
   SLIDE-OUT DRAWER
   ============================================================================ */

.mobile-nav-drawer[b-1k3g9xnbwg] {
    position: fixed;
    top: 0;
    left: 0;
    width: 300px;
    max-width: 85vw;
    height: 100vh;
    height: 100dvh; /* Dynamic viewport height for mobile browsers */
    background: var(--lb-bg-elevated, #141414);
    border-right: 1px solid var(--lb-border-default, #333);
    z-index: 1001;
    transform: translateX(-100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

.mobile-nav-drawer.open[b-1k3g9xnbwg] {
    transform: translateX(0);
}

/* Safe area padding for notched devices */
@supports (padding: env(safe-area-inset-top)) {
    .mobile-nav-drawer[b-1k3g9xnbwg] {
        padding-top: env(safe-area-inset-top);
        padding-bottom: env(safe-area-inset-bottom);
    }
}

/* ============================================================================
   DRAWER HEADER
   ============================================================================ */

.mobile-nav-header[b-1k3g9xnbwg] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--lb-border-default, #333);
    flex-shrink: 0;
}

.mobile-nav-logo[b-1k3g9xnbwg] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--lb-accent-primary, #d4af37);
    text-decoration: none;
    font-family: Georgia, 'Times New Roman', serif;
}

.mobile-nav-close[b-1k3g9xnbwg] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: transparent;
    border: none;
    color: var(--lb-text-muted, #888);
    font-size: 1.5rem;
    cursor: pointer;
    border-radius: var(--lb-radius-sm, 4px);
    transition: background 0.2s, color 0.2s;
}

.mobile-nav-close:hover[b-1k3g9xnbwg] {
    background: var(--lb-bg-hover, rgba(255, 255, 255, 0.1));
    color: var(--lb-text-primary, #e8e8e8);
}

/* ============================================================================
   SEARCH BAR
   ============================================================================ */

.mobile-nav-search[b-1k3g9xnbwg] {
    position: relative;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--lb-border-default, #333);
    flex-shrink: 0;
}

.mobile-search-input[b-1k3g9xnbwg] {
    width: 100%;
    padding: 0.75rem 2.5rem 0.75rem 1rem;
    background: var(--lb-bg-input, #0a0a0a);
    border: 1px solid var(--lb-border-default, #333);
    border-radius: var(--lb-radius-md, 8px);
    color: var(--lb-text-primary, #e8e8e8);
    font-size: 1rem; /* 16px to prevent iOS zoom */
    transition: border-color 0.2s, box-shadow 0.2s;
}

.mobile-search-input:focus[b-1k3g9xnbwg] {
    outline: none;
    border-color: var(--lb-accent-primary, #d4af37);
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.1);
}

.mobile-search-input[b-1k3g9xnbwg]::placeholder {
    color: var(--lb-text-muted, #888);
}

.mobile-search-clear[b-1k3g9xnbwg] {
    position: absolute;
    right: 1.5rem;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: var(--lb-text-muted, #888);
    font-size: 1.25rem;
    cursor: pointer;
    padding: 0.25rem;
    line-height: 1;
}

.mobile-search-clear:hover[b-1k3g9xnbwg] {
    color: var(--lb-text-primary, #e8e8e8);
}

/* ============================================================================
   NAVIGATION LINKS
   ============================================================================ */

.mobile-nav-links[b-1k3g9xnbwg] {
    display: flex;
    flex-direction: column;
    padding: 0.5rem 0;
    flex-shrink: 0;
}

.mobile-nav-link[b-1k3g9xnbwg] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1.25rem;
    color: var(--lb-text-secondary, #a0a0a0);
    text-decoration: none;
    font-size: 1rem;
    font-weight: 500;
    transition: background 0.2s, color 0.2s;
    min-height: 48px; /* Touch-friendly */
    border: none;
    background: transparent;
    width: 100%;
    text-align: left;
    cursor: pointer;
}

.mobile-nav-link:hover[b-1k3g9xnbwg],
.mobile-nav-link:focus[b-1k3g9xnbwg] {
    background: var(--lb-bg-hover, rgba(255, 255, 255, 0.05));
    color: var(--lb-text-primary, #e8e8e8);
}

.mobile-nav-link.active[b-1k3g9xnbwg] {
    background: var(--lb-bg-hover, rgba(255, 255, 255, 0.05));
    color: var(--lb-accent-primary, #d4af37);
}

.nav-icon[b-1k3g9xnbwg] {
    font-size: 1.25rem;
    width: 24px;
    text-align: center;
    flex-shrink: 0;
}

/* ============================================================================
   DIVIDER
   ============================================================================ */

.mobile-nav-divider[b-1k3g9xnbwg] {
    height: 1px;
    background: var(--lb-border-default, #333);
    margin: 0.5rem 1.25rem;
}

/* ============================================================================
   AUTH SECTION
   ============================================================================ */

.mobile-nav-auth[b-1k3g9xnbwg] {
    display: flex;
    flex-direction: column;
    padding: 0.5rem 0;
    flex-shrink: 0;
}

.mobile-nav-user[b-1k3g9xnbwg] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1.25rem;
    color: var(--lb-text-primary, #e8e8e8);
    text-decoration: none;
    transition: background 0.2s;
    min-height: 56px;
}

.mobile-nav-user:hover[b-1k3g9xnbwg] {
    background: var(--lb-bg-hover, rgba(255, 255, 255, 0.05));
}

.mobile-user-avatar[b-1k3g9xnbwg] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--lb-accent-primary, #d4af37), var(--lb-accent-primary-dark, #b8960f));
    display: flex;
    align-items: center;
    justify-content: center;
    color: #000;
    font-weight: 600;
    font-size: 1rem;
    flex-shrink: 0;
}

.mobile-user-name[b-1k3g9xnbwg] {
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mobile-nav-create[b-1k3g9xnbwg] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1.25rem;
    margin: 0.5rem 1.25rem;
    background: linear-gradient(135deg, var(--lb-accent-primary, #d4af37), var(--lb-accent-primary-dark, #b8960f));
    color: #000;
    text-decoration: none;
    font-weight: 600;
    border-radius: var(--lb-radius-md, 8px);
    transition: transform 0.2s, box-shadow 0.2s;
    min-height: 48px;
    justify-content: center;
}

.mobile-nav-create:hover[b-1k3g9xnbwg] {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(212, 175, 55, 0.3);
}

.mobile-edit-btn.active[b-1k3g9xnbwg] {
    background: rgba(212, 175, 55, 0.15);
    color: var(--lb-accent-primary, #d4af37);
}

.mobile-logout-form[b-1k3g9xnbwg] {
    margin: 0;
}

.mobile-logout[b-1k3g9xnbwg] {
    color: var(--lb-text-muted, #888) !important;
}

.mobile-logout:hover[b-1k3g9xnbwg] {
    color: var(--lb-error, #ff4444) !important;
    background: rgba(255, 68, 68, 0.1) !important;
}

/* ============================================================================
   THEME SWITCHER
   ============================================================================ */

.mobile-nav-theme[b-1k3g9xnbwg] {
    padding: 1rem 1.25rem;
    flex-shrink: 0;
}

.theme-label[b-1k3g9xnbwg] {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--lb-text-muted, #888);
    margin-bottom: 0.75rem;
}

.theme-options[b-1k3g9xnbwg] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
}

.theme-btn[b-1k3g9xnbwg] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 1;
    background: var(--lb-bg-elevated-2, #1a1a1a);
    border: 2px solid transparent;
    border-radius: var(--lb-radius-sm, 4px);
    font-size: 1.25rem;
    cursor: pointer;
    transition: border-color 0.2s, transform 0.2s;
}

.theme-btn:hover[b-1k3g9xnbwg] {
    border-color: var(--lb-border-default, #333);
    transform: scale(1.05);
}

.theme-btn.active[b-1k3g9xnbwg] {
    border-color: var(--lb-accent-primary, #d4af37);
    background: rgba(212, 175, 55, 0.1);
}

/* ============================================================================
   FOOTER LINKS
   ============================================================================ */

.mobile-nav-footer[b-1k3g9xnbwg] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    padding: 1rem 1.25rem;
    margin-top: auto;
    border-top: 1px solid var(--lb-border-default, #333);
}

.mobile-nav-footer a[b-1k3g9xnbwg] {
    color: var(--lb-text-muted, #888);
    text-decoration: none;
    font-size: 0.85rem;
    padding: 0.25rem 0;
    transition: color 0.2s;
}

.mobile-nav-footer a:hover[b-1k3g9xnbwg] {
    color: var(--lb-text-primary, #e8e8e8);
}

/* ============================================================================
   THEME-SPECIFIC OVERRIDES
   ============================================================================ */

/* CRT Theme - Apply grayscale filter to drawer for monochrome effect */
:root[data-theme="crt"] .mobile-nav-drawer[b-1k3g9xnbwg] {
    border-right-color: var(--crt-color-30, rgba(74, 222, 128, 0.3));
    /* Apply same filter as .ww-layout for consistent monochrome look */
    filter: grayscale(1) sepia(1) hue-rotate(var(--crt-hue, 75deg)) saturate(2) brightness(0.85) contrast(1.1);
    background: #000000;
}

:root[data-theme="crt"] .mobile-nav-overlay[b-1k3g9xnbwg] {
    /* Apply filter to overlay backdrop too */
    filter: grayscale(1) sepia(1) hue-rotate(var(--crt-hue, 75deg)) saturate(2) brightness(0.85) contrast(1.1);
}

:root[data-theme="crt"] .mobile-nav-logo[b-1k3g9xnbwg] {
    color: var(--crt-color, #4ade80);
    text-shadow: 0 0 10px var(--crt-color-50, rgba(74, 222, 128, 0.5));
}

:root[data-theme="crt"] .mobile-nav-create[b-1k3g9xnbwg] {
    background: var(--crt-color, #4ade80);
    color: #000;
}

/* Win95 Theme */
:root[data-theme="win95"] .mobile-nav-drawer[b-1k3g9xnbwg] {
    background: #c0c0c0;
    border-right: 2px solid;
    border-color: #ffffff #808080 #808080 #ffffff;
}

:root[data-theme="win95"] .mobile-nav-header[b-1k3g9xnbwg] {
    background: linear-gradient(90deg, #000080 0%, #1084d0 100%);
    border-bottom: 2px solid #808080;
}

:root[data-theme="win95"] .mobile-nav-logo[b-1k3g9xnbwg] {
    color: #ffffff;
}

:root[data-theme="win95"] .mobile-nav-close[b-1k3g9xnbwg] {
    color: #ffffff;
    background: #c0c0c0;
    border: 2px solid;
    border-color: #ffffff #808080 #808080 #ffffff;
}

:root[data-theme="win95"] .mobile-nav-link[b-1k3g9xnbwg] {
    color: #000000;
}

:root[data-theme="win95"] .mobile-nav-link:hover[b-1k3g9xnbwg] {
    background: #000080;
    color: #ffffff;
}

:root[data-theme="win95"] .mobile-search-input[b-1k3g9xnbwg] {
    background: #ffffff;
    border: 2px solid;
    border-color: #808080 #ffffff #ffffff #808080;
    color: #000000;
    border-radius: 0;
}

:root[data-theme="win95"] .mobile-nav-create[b-1k3g9xnbwg] {
    background: #c0c0c0;
    color: #000000;
    border: 2px solid;
    border-color: #ffffff #808080 #808080 #ffffff;
    border-radius: 0;
}

:root[data-theme="win95"] .mobile-nav-divider[b-1k3g9xnbwg] {
    background: #808080;
    box-shadow: 0 1px 0 #ffffff;
}

:root[data-theme="win95"] .theme-btn[b-1k3g9xnbwg] {
    background: #c0c0c0;
    border: 2px solid;
    border-color: #ffffff #808080 #808080 #ffffff;
    border-radius: 0;
}

:root[data-theme="win95"] .theme-btn.active[b-1k3g9xnbwg] {
    border-color: #808080 #ffffff #ffffff #808080;
}

:root[data-theme="win95"] .mobile-nav-footer[b-1k3g9xnbwg] {
    background: #c0c0c0;
    border-top: 2px solid #808080;
}

:root[data-theme="win95"] .mobile-nav-footer a[b-1k3g9xnbwg] {
    color: #0000ff;
    text-decoration: underline;
}
/* /Components/Layout/SearchBar.razor.rz.scp.css */
/* SearchBar Scoped Styles */
.ww-search-bar[b-zynzase7ls] {
    flex: 1;
    max-width: 600px;
    position: relative;
}

.ww-search-input[b-zynzase7ls] {
    width: 100%;
    padding: 0.625rem 2.5rem 0.625rem 2.5rem;
    background: var(--lb-bg-elevated, #141414);
    border: 1px solid var(--lb-border-default, #333);
    border-radius: 8px;
    color: var(--lb-text-primary, #e8e8e8);
    font-size: 0.875rem;
    font-family: inherit;
    transition: all 0.2s ease;
}

.ww-search-input:focus[b-zynzase7ls] {
    outline: none;
    border-color: var(--lb-accent-primary, #d4af37);
    background: var(--lb-bg-elevated-2, #1a1a1a);
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.1);
}

.ww-search-input[b-zynzase7ls]::placeholder {
    color: var(--lb-text-muted, #666);
}

.ww-search-icon[b-zynzase7ls] {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--lb-text-muted, #666);
    font-size: 0.875rem;
    pointer-events: none;
    z-index: 1;
}

.ww-search-clear[b-zynzase7ls] {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--lb-text-muted, #666);
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
    border-radius: 4px;
    transition: all 0.15s ease;
    z-index: 1;
}

.ww-search-clear:hover[b-zynzase7ls] {
    color: var(--lb-text-primary, #e8e8e8);
    background: var(--lb-bg-hover, #333);
}

/* Dropdown */
.ww-search-dropdown[b-zynzase7ls] {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: var(--lb-bg-elevated, #1a1a1a);
    border: 1px solid var(--lb-border-default, #333);
    border-radius: 8px;
    box-shadow: var(--lb-shadow-lg, 0 8px 24px rgba(0, 0, 0, 0.5));
    z-index: 1000;
    max-height: 400px;
    overflow-y: auto;
    animation: dropdownFadeIn-b-zynzase7ls 0.15s ease-out;
}

@keyframes dropdownFadeIn-b-zynzase7ls {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Loading State */
.ww-search-loading[b-zynzase7ls] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1.5rem;
    color: var(--lb-text-muted, #888);
}

.ww-search-spinner[b-zynzase7ls] {
    width: 16px;
    height: 16px;
    border: 2px solid var(--lb-border-default, #333);
    border-top-color: var(--lb-accent-primary, #d4af37);
    border-radius: 50%;
    animation: spin-b-zynzase7ls 0.6s linear infinite;
}

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

/* No Results */
.ww-search-no-results[b-zynzase7ls] {
    padding: 1.5rem;
    text-align: center;
    color: var(--lb-text-muted, #888);
    font-size: 0.875rem;
}

/* Category */
.ww-search-category[b-zynzase7ls] {
    border-bottom: 1px solid var(--lb-border-subtle, #2a2a2a);
}

.ww-search-category:last-of-type[b-zynzase7ls] {
    border-bottom: none;
}

.ww-search-category-header[b-zynzase7ls] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0.75rem;
    background: var(--lb-bg-elevated-2, #141414);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--lb-text-muted, #888);
}

.ww-search-count[b-zynzase7ls] {
    background: var(--lb-bg-hover, #333);
    color: var(--lb-text-secondary, #aaa);
    padding: 0.125rem 0.375rem;
    border-radius: 10px;
    font-size: 0.65rem;
}

/* Result Item */
.ww-search-result[b-zynzase7ls] {
    display: flex;
    gap: 0.75rem;
    padding: 0.625rem 0.75rem;
    text-decoration: none;
    color: inherit;
    transition: background 0.15s ease;
}

.ww-search-result:hover[b-zynzase7ls] {
    background: var(--lb-bg-hover, #252525);
}

.ww-search-result-img[b-zynzase7ls] {
    width: 40px;
    height: 40px;
    border-radius: 6px;
    object-fit: cover;
    flex-shrink: 0;
    background: var(--lb-bg-elevated-3, #252525);
}

.ww-search-result-img.avatar[b-zynzase7ls] {
    border-radius: 50%;
}

.ww-search-result-img.placeholder[b-zynzase7ls] {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    color: var(--lb-text-muted, #666);
}

.ww-search-result-info[b-zynzase7ls] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.ww-search-result-name[b-zynzase7ls] {
    font-weight: 500;
    color: var(--lb-text-primary, #e8e8e8);
    font-size: 0.875rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ww-search-result-meta[b-zynzase7ls] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.125rem;
}

.ww-search-result-type[b-zynzase7ls] {
    display: inline-block;
    padding: 0.0625rem 0.375rem;
    background: var(--lb-accent-primary, #d4af37);
    color: var(--lb-text-inverse, #000);
    border-radius: 3px;
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
}

.ww-search-result-desc[b-zynzase7ls] {
    color: var(--lb-text-muted, #888);
    font-size: 0.75rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* View All Link */
.ww-search-view-all[b-zynzase7ls] {
    display: block;
    padding: 0.75rem;
    text-align: center;
    background: var(--lb-bg-elevated-2, #141414);
    color: var(--lb-accent-primary, #d4af37);
    text-decoration: none;
    font-size: 0.8rem;
    font-weight: 500;
    border-top: 1px solid var(--lb-border-subtle, #2a2a2a);
    transition: background 0.15s ease;
}

.ww-search-view-all:hover[b-zynzase7ls] {
    background: var(--lb-bg-elevated-3, #1f1f1f);
}

/* ============================================
   MOBILE BREAKPOINT (768px)
   ============================================ */
@media (max-width: 768px) {
    /* Search Bar in Mobile Drawer is handled by MobileNav */
    /* This handles any remaining search bar instances */

    .ww-search-bar[b-zynzase7ls] {
        max-width: 100%;
    }

    .ww-search-input[b-zynzase7ls] {
        font-size: 16px; /* Prevent iOS zoom */
        padding: 0.75rem 2.5rem;
        min-height: 44px;
    }

    .ww-search-clear[b-zynzase7ls] {
        min-width: 44px;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Dropdown - Fixed position on mobile */
    .ww-search-dropdown[b-zynzase7ls] {
        position: fixed;
        top: 56px; /* Below mobile nav */
        left: 0;
        right: 0;
        max-height: calc(100vh - 56px);
        border-radius: 0;
        border-left: none;
        border-right: none;
    }

    /* Result items - Larger touch targets */
    .ww-search-result[b-zynzase7ls] {
        padding: 0.875rem;
        min-height: 60px;
    }

    .ww-search-result-img[b-zynzase7ls] {
        width: 48px;
        height: 48px;
    }

    .ww-search-result-name[b-zynzase7ls] {
        font-size: 0.95rem;
    }

    .ww-search-result-type[b-zynzase7ls] {
        font-size: 0.7rem;
    }

    /* View All */
    .ww-search-view-all[b-zynzase7ls] {
        padding: 1rem;
        min-height: 48px;
    }
}
/* /Components/Layout/ThemeSwitcher.razor.rz.scp.css */
/* ThemeSwitcher Scoped Styles */
.ww-theme-switcher[b-hv65tfw51z] {
    position: relative;
    display: inline-block;
}

.ww-theme-toggle[b-hv65tfw51z] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.75rem;
    background: var(--lb-bg-elevated, #1a1a1a);
    border: 1px solid var(--lb-border-default, #333);
    border-radius: 6px;
    color: var(--lb-text-primary, #e8e8e8);
    cursor: pointer;
    font-size: 0.875rem;
    font-family: inherit;
    transition: all 0.2s ease;
}

    .ww-theme-toggle:hover[b-hv65tfw51z] {
        background: var(--lb-bg-elevated-2, #252525);
        border-color: var(--lb-accent-primary, #d4af37);
    }

.ww-theme-icon[b-hv65tfw51z] {
    font-size: 1.125rem;
    line-height: 1;
}

.ww-dropdown-arrow[b-hv65tfw51z] {
    font-size: 0.5rem;
    opacity: 0.7;
}

.ww-theme-menu[b-hv65tfw51z] {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 140px;
    background: var(--lb-bg-elevated, #1f1f1f);
    border: 1px solid var(--lb-border-default, #333);
    border-radius: 8px;
    box-shadow: var(--lb-shadow-lg, 0 10px 40px rgba(0, 0, 0, 0.5));
    z-index: 1000;
    overflow: hidden;
    padding: 0.375rem 0;
}

.ww-theme-item[b-hv65tfw51z] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem 0.875rem;
    color: var(--lb-text-secondary, #a0a0a0);
    font-size: 0.875rem;
    transition: all 0.15s ease;
    border: none;
    background: none;
    width: 100%;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
}

    .ww-theme-item:hover[b-hv65tfw51z] {
        background: var(--lb-bg-hover, #2a2a2a);
        color: var(--lb-text-primary, #e8e8e8);
    }

    .ww-theme-item.active[b-hv65tfw51z] {
        color: var(--lb-accent-primary, #d4af37);
    }

        .ww-theme-item.active:hover[b-hv65tfw51z] {
            background: var(--lb-bg-hover, #2a2a2a);
        }

.ww-theme-item-icon[b-hv65tfw51z] {
    font-size: 1rem;
    line-height: 1;
    width: 1.25rem;
    text-align: center;
}

.ww-theme-item-label[b-hv65tfw51z] {
    flex: 1;
}

.ww-theme-check[b-hv65tfw51z] {
    font-size: 0.75rem;
    color: var(--lb-accent-primary, #d4af37);
}

/* Invisible backdrop to close dropdown */
.ww-theme-backdrop[b-hv65tfw51z] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
}

/* CRT Color Picker */
.ww-crt-color-picker[b-hv65tfw51z] {
    width: 24px;
    height: 24px;
    padding: 0;
    border: 1px solid var(--lb-border-default, #333);
    background: transparent;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.ww-crt-color-picker[b-hv65tfw51z]::-webkit-color-swatch-wrapper {
    padding: 2px;
}

.ww-crt-color-picker[b-hv65tfw51z]::-webkit-color-swatch {
    border: none;
}

.ww-crt-color-picker[b-hv65tfw51z]::-moz-color-swatch {
    border: none;
}

.ww-crt-color-picker:hover[b-hv65tfw51z] {
    border-color: var(--lb-accent-primary, #d4af37);
}
/* /Components/Layout/UserDropdown.razor.rz.scp.css */
/* UserDropdown Scoped Styles */
.ww-user-dropdown[b-2twz377ij6] {
    position: relative;
    display: inline-block;
}

.ww-dropdown-toggle[b-2twz377ij6] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.875rem;
    background: #1a1a1a;
    border: 1px solid #333;
    border-radius: 6px;
    color: #e8e8e8;
    cursor: pointer;
    font-size: 0.875rem;
    font-family: inherit;
    transition: all 0.2s ease;
}

    .ww-dropdown-toggle:hover[b-2twz377ij6] {
        background: #252525;
        border-color: #d4af37;
    }

.ww-user-icon[b-2twz377ij6] {
    font-size: 1rem;
}

.ww-user-avatar[b-2twz377ij6] {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--lb-accent-primary, #d4af37);
}

.ww-username[b-2twz377ij6] {
    font-weight: 500;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ww-dropdown-arrow[b-2twz377ij6] {
    font-size: 0.5rem;
    opacity: 0.7;
    margin-left: 0.25rem;
}

.ww-dropdown-menu[b-2twz377ij6] {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 180px;
    background: #1f1f1f;
    border: 1px solid #333;
    border-radius: 8px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    z-index: 1000;
    overflow: hidden;
    padding: 0.5rem 0;
}

.ww-dropdown-item[b-2twz377ij6] {
    display: block;
    padding: 0.625rem 1rem;
    color: #a0a0a0;
    text-decoration: none;
    font-size: 0.875rem;
    transition: all 0.15s ease;
    border: none;
    background: none;
    width: 100%;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
}

    .ww-dropdown-item:hover[b-2twz377ij6] {
        background: #2a2a2a;
        color: #e8e8e8;
    }

.ww-dropdown-divider[b-2twz377ij6] {
    height: 1px;
    background: #333;
    margin: 0.375rem 0;
}

.ww-dropdown-admin[b-2twz377ij6] {
    color: #f59e0b;
}

    .ww-dropdown-admin:hover[b-2twz377ij6] {
        background: rgba(245, 158, 11, 0.15);
        color: #fbbf24;
    }

.ww-dropdown-logout[b-2twz377ij6] {
    color: #888;
}

    .ww-dropdown-logout:hover[b-2twz377ij6] {
        background: rgba(239, 68, 68, 0.15);
        color: #f87171;
    }

/* Invisible backdrop to close dropdown */
.ww-dropdown-backdrop[b-2twz377ij6] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
}
/* /Components/Pages/Campaign/CampaignCreate.razor.rz.scp.css */
.create-campaign-page[b-1hmoeetxz8] {
    max-width: 800px;
    margin: 0 auto;
    padding: 2rem;
}

.page-header[b-1hmoeetxz8] {
    margin-bottom: 2rem;
}

.back-link[b-1hmoeetxz8] {
    display: inline-block;
    color: var(--lb-text-muted, var(--text-muted, #888));
    text-decoration: none;
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

.back-link:hover[b-1hmoeetxz8] {
    color: var(--lb-accent-primary, var(--accent-color, #d4af37));
}

.page-header h1[b-1hmoeetxz8] {
    margin: 0 0 0.5rem 0;
    font-size: 2rem;
    color: var(--lb-text-primary, var(--text-primary, #e0e0e0));
}

.header-subtitle[b-1hmoeetxz8] {
    margin: 0;
    color: var(--lb-text-muted, var(--text-muted, #888));
}

.wizard-container[b-1hmoeetxz8] {
    background: var(--lb-bg-elevated, var(--card-bg, #1a1a1a));
    border-radius: 1rem;
    border: 1px solid var(--lb-border-default, var(--border-color, #333));
    overflow: hidden;
}

/* Step Indicator */
.step-indicator[b-1hmoeetxz8] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem 2rem;
    background: var(--lb-bg-elevated-2, var(--bg-secondary, #222));
    border-bottom: 1px solid var(--lb-border-default, var(--border-color, #333));
}

.step[b-1hmoeetxz8] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--lb-text-muted, var(--text-muted, #666));
}

.step.active[b-1hmoeetxz8] {
    color: var(--lb-accent-primary, var(--accent-color, #d4af37));
}

.step.completed[b-1hmoeetxz8] {
    color: var(--lb-success, var(--success-color, #4caf50));
}

.step-number[b-1hmoeetxz8] {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--lb-bg-elevated-3, var(--bg-tertiary, #333));
    font-size: 0.85rem;
    font-weight: 600;
}

.step.active .step-number[b-1hmoeetxz8] {
    background: var(--lb-accent-primary, var(--accent-color, #d4af37));
    color: var(--lb-text-inverse, #0f0f0f);
}

.step.completed .step-number[b-1hmoeetxz8] {
    background: var(--lb-success, var(--success-color, #4caf50));
    color: white;
}

.step-label[b-1hmoeetxz8] {
    font-size: 0.9rem;
    font-weight: 500;
}

.step-connector[b-1hmoeetxz8] {
    width: 60px;
    height: 2px;
    background: var(--lb-border-default, var(--border-color, #333));
    margin: 0 1rem;
}

.step-connector.completed[b-1hmoeetxz8] {
    background: var(--lb-success, var(--success-color, #4caf50));
}

/* Step Content */
.step-content[b-1hmoeetxz8] {
    padding: 2rem;
}

.form-section h2[b-1hmoeetxz8] {
    margin: 0 0 0.5rem 0;
    font-size: 1.5rem;
    color: var(--lb-text-primary, var(--text-primary, #e0e0e0));
}

.section-help[b-1hmoeetxz8] {
    margin: 0 0 1.5rem 0;
    color: var(--lb-text-muted, var(--text-muted, #888));
}

.form-group[b-1hmoeetxz8] {
    margin-bottom: 1.5rem;
}

.form-group label[b-1hmoeetxz8] {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: var(--lb-text-primary, var(--text-primary, #e0e0e0));
}

.form-group input[type="text"][b-1hmoeetxz8],
.form-group input[type="url"][b-1hmoeetxz8],
.form-group textarea[b-1hmoeetxz8] {
    width: 100%;
    padding: 0.75rem 1rem;
    background: var(--lb-bg-elevated-2, var(--bg-secondary, #222));
    border: 1px solid var(--lb-border-default, var(--border-color, #333));
    border-radius: 0.5rem;
    color: var(--lb-text-primary, var(--text-primary, #e0e0e0));
    font-size: 1rem;
    transition: border-color 0.2s;
}

.form-group input:focus[b-1hmoeetxz8],
.form-group textarea:focus[b-1hmoeetxz8] {
    outline: none;
    border-color: var(--lb-accent-primary, var(--accent-color, #d4af37));
}

.form-group textarea[b-1hmoeetxz8] {
    resize: vertical;
    min-height: 100px;
}

.field-error[b-1hmoeetxz8] {
    display: block;
    margin-top: 0.5rem;
    color: var(--lb-error, var(--error-color, #ef4444));
    font-size: 0.85rem;
}

.field-help[b-1hmoeetxz8] {
    margin: 0.5rem 0 0 0;
    color: var(--lb-text-subtle, var(--text-muted, #666));
    font-size: 0.85rem;
}

.checkbox-label[b-1hmoeetxz8] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    color: var(--lb-text-primary, var(--text-primary, #e0e0e0));
}

.checkbox-label input[type="checkbox"][b-1hmoeetxz8] {
    width: 18px;
    height: 18px;
    accent-color: var(--lb-accent-primary, var(--accent-color, #d4af37));
}

.image-preview[b-1hmoeetxz8] {
    margin-top: 1rem;
    border-radius: 0.5rem;
    overflow: hidden;
    max-width: 300px;
}

.image-preview img[b-1hmoeetxz8] {
    width: 100%;
    height: auto;
    display: block;
}

/* Universe Selection */
.loading-inline[b-1hmoeetxz8] {
    padding: 2rem;
    text-align: center;
    color: var(--lb-text-muted, var(--text-muted, #888));
}

.empty-universes[b-1hmoeetxz8] {
    padding: 2rem;
    text-align: center;
    background: var(--lb-bg-elevated-2, var(--bg-secondary, #222));
    border-radius: 0.5rem;
}

.empty-universes p[b-1hmoeetxz8] {
    margin: 0 0 1rem 0;
    color: var(--lb-text-muted, var(--text-muted, #888));
}

.universe-list[b-1hmoeetxz8] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.universe-item[b-1hmoeetxz8] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: var(--lb-bg-elevated-2, var(--bg-secondary, #222));
    border: 1px solid var(--lb-border-default, var(--border-color, #333));
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.2s;
}

.universe-item:hover[b-1hmoeetxz8] {
    border-color: var(--lb-accent-primary, var(--accent-color, #d4af37));
}

.universe-item.selected[b-1hmoeetxz8] {
    border-color: var(--lb-accent-primary, var(--accent-color, #d4af37));
    background: rgba(212, 175, 55, 0.1);
}

.universe-checkbox input[b-1hmoeetxz8] {
    width: 18px;
    height: 18px;
    accent-color: var(--lb-accent-primary, var(--accent-color, #d4af37));
}

.universe-info[b-1hmoeetxz8] {
    flex: 1;
}

.universe-name[b-1hmoeetxz8] {
    font-weight: 500;
    color: var(--lb-text-primary, var(--text-primary, #e0e0e0));
}

.universe-description[b-1hmoeetxz8] {
    margin-top: 0.25rem;
    font-size: 0.85rem;
    color: var(--lb-text-muted, var(--text-muted, #888));
}

.btn-primary-toggle[b-1hmoeetxz8] {
    padding: 0.375rem 0.75rem;
    background: transparent;
    border: 1px solid var(--lb-border-default, var(--border-color, #444));
    border-radius: 0.375rem;
    color: var(--lb-text-muted, var(--text-muted, #888));
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-primary-toggle:hover[b-1hmoeetxz8] {
    border-color: var(--lb-accent-primary, var(--accent-color, #d4af37));
    color: var(--lb-accent-primary, var(--accent-color, #d4af37));
}

.btn-primary-toggle.is-primary[b-1hmoeetxz8] {
    background: var(--lb-accent-primary, var(--accent-color, #d4af37));
    border-color: var(--lb-accent-primary, var(--accent-color, #d4af37));
    color: var(--lb-text-inverse, #0f0f0f);
}

/* Review */
.review-card[b-1hmoeetxz8] {
    background: var(--lb-bg-elevated-2, var(--bg-secondary, #222));
    border-radius: 0.75rem;
    overflow: hidden;
}

.review-image[b-1hmoeetxz8] {
    height: 160px;
    background-size: cover;
    background-position: center;
}

.review-content[b-1hmoeetxz8] {
    padding: 1.5rem;
}

.review-content h3[b-1hmoeetxz8] {
    margin: 0 0 0.75rem 0;
    font-size: 1.5rem;
    color: var(--lb-text-primary, var(--text-primary, #e0e0e0));
}

.review-description[b-1hmoeetxz8] {
    margin: 0 0 1rem 0;
    color: var(--lb-text-secondary, var(--text-muted, #ccc));
    line-height: 1.5;
}

.review-meta[b-1hmoeetxz8] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.review-item[b-1hmoeetxz8] {
    display: flex;
    gap: 0.5rem;
    font-size: 0.9rem;
}

.review-label[b-1hmoeetxz8] {
    color: var(--lb-text-muted, var(--text-muted, #888));
}

.review-value[b-1hmoeetxz8] {
    color: var(--lb-text-primary, var(--text-primary, #e0e0e0));
}

.error-message[b-1hmoeetxz8] {
    margin-top: 1rem;
    padding: 1rem;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid var(--lb-error, var(--error-color, #ef4444));
    border-radius: 0.5rem;
    color: var(--lb-error, var(--error-color, #ef4444));
}

/* Wizard Actions */
.wizard-actions[b-1hmoeetxz8] {
    display: flex;
    justify-content: space-between;
    padding: 1.5rem 2rem;
    background: var(--lb-bg-elevated-2, var(--bg-secondary, #222));
    border-top: 1px solid var(--lb-border-default, var(--border-color, #333));
}

.btn[b-1hmoeetxz8] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    font-weight: 500;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
    text-decoration: none;
}

.btn:disabled[b-1hmoeetxz8] {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-primary[b-1hmoeetxz8] {
    background: var(--lb-accent-primary, var(--accent-color, #d4af37));
    color: var(--lb-text-inverse, #0f0f0f);
}

.btn-primary:hover:not(:disabled)[b-1hmoeetxz8] {
    background: var(--lb-accent-primary-light, var(--accent-hover, #f4d03f));
    transform: translateY(-1px);
}

.btn-secondary[b-1hmoeetxz8] {
    background: transparent;
    color: var(--lb-text-primary, var(--text-primary, #e0e0e0));
    border: 1px solid var(--lb-border-default, var(--border-color, #444));
}

.btn-secondary:hover:not(:disabled)[b-1hmoeetxz8] {
    border-color: var(--lb-text-muted, var(--text-muted, #888));
    background: var(--lb-bg-hover, rgba(255,255,255,0.05));
}

@media (max-width: 768px) {
    .create-campaign-page[b-1hmoeetxz8] {
        padding: 1rem;
    }

    .step-indicator[b-1hmoeetxz8] {
        padding: 1rem;
    }

    .step-label[b-1hmoeetxz8] {
        display: none;
    }

    .step-connector[b-1hmoeetxz8] {
        width: 40px;
    }

    .step-content[b-1hmoeetxz8] {
        padding: 1.5rem;
    }

    .wizard-actions[b-1hmoeetxz8] {
        padding: 1rem 1.5rem;
    }
}
/* /Components/Pages/Campaign/CampaignDashboard.razor.rz.scp.css */
.loading-page[b-krkmxqazv7], .error-page[b-krkmxqazv7] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    text-align: center;
    padding: 2rem;
}

.loading-spinner[b-krkmxqazv7] {
    width: 50px;
    height: 50px;
    border: 3px solid var(--lb-border-default, var(--border-color, #333));
    border-top-color: var(--lb-accent-primary, var(--accent-color, #d4af37));
    border-radius: 50%;
    animation: spin-b-krkmxqazv7 1s linear infinite;
    margin-bottom: 1rem;
}

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

.error-page h1[b-krkmxqazv7] {
    margin: 0 0 0.5rem 0;
    color: var(--lb-text-primary, var(--text-primary, #e0e0e0));
}

.error-page p[b-krkmxqazv7] {
    margin: 0 0 1.5rem 0;
    color: var(--lb-text-muted, var(--text-muted, #888));
}

.campaign-dashboard[b-krkmxqazv7] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
}

/* Header */
.campaign-header[b-krkmxqazv7] {
    margin-bottom: 2rem;
}

.back-link[b-krkmxqazv7] {
    display: inline-block;
    color: var(--lb-text-muted, var(--text-muted, #888));
    text-decoration: none;
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

.back-link:hover[b-krkmxqazv7] {
    color: var(--lb-accent-primary, var(--accent-color, #d4af37));
}

.header-content[b-krkmxqazv7] {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 1rem;
}

.campaign-image[b-krkmxqazv7] {
    width: 120px;
    height: 120px;
    border-radius: 1rem;
    background-size: cover;
    background-position: center;
    flex-shrink: 0;
}

.header-info[b-krkmxqazv7] {
    flex: 1;
}

.header-top[b-krkmxqazv7] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.5rem;
}

.header-top h1[b-krkmxqazv7] {
    margin: 0;
    font-size: 2rem;
    color: var(--lb-text-primary, var(--text-primary, #e0e0e0));
}

.campaign-status[b-krkmxqazv7] {
    padding: 0.375rem 1rem;
    border-radius: 1rem;
    font-size: 0.8rem;
    font-weight: 500;
    text-transform: uppercase;
}

.status-planning[b-krkmxqazv7] { background: rgba(212, 175, 55, 0.15); color: var(--lb-accent-primary, #d4af37); }
.status-active[b-krkmxqazv7] { background: rgba(212, 175, 55, 0.25); color: var(--lb-accent-primary-light, #f4d03f); }
.status-paused[b-krkmxqazv7] { background: rgba(251, 191, 36, 0.2); color: var(--lb-warning, #fbbf24); }
.status-completed[b-krkmxqazv7] { background: rgba(76, 175, 80, 0.15); color: var(--lb-success, #4caf50); }

.campaign-description[b-krkmxqazv7] {
    margin: 0 0 1rem 0;
    color: var(--lb-text-secondary, var(--text-muted, #ccc));
    line-height: 1.5;
}

.campaign-meta[b-krkmxqazv7] {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.meta-item[b-krkmxqazv7] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: var(--lb-text-muted, var(--text-muted, #888));
}

.meta-icon[b-krkmxqazv7] {
    font-size: 1rem;
}

.header-actions[b-krkmxqazv7] {
    margin-top: 1rem;
}

/* Quick Stats */
.quick-stats[b-krkmxqazv7] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 2rem;
}

.stat-card[b-krkmxqazv7] {
    background: var(--lb-bg-elevated, var(--card-bg, #1a1a1a));
    border: 1px solid var(--lb-border-default, var(--border-color, #333));
    border-radius: 0.75rem;
    padding: 1.25rem;
    text-align: center;
}

.stat-value[b-krkmxqazv7] {
    font-size: 2rem;
    font-weight: 600;
    color: var(--lb-accent-primary, var(--accent-color, #d4af37));
}

.stat-label[b-krkmxqazv7] {
    font-size: 0.9rem;
    color: var(--lb-text-muted, var(--text-muted, #888));
    margin-top: 0.25rem;
}

/* Dashboard Grid */
.dashboard-grid[b-krkmxqazv7] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

.dashboard-panel[b-krkmxqazv7] {
    background: var(--lb-bg-elevated, var(--card-bg, #1a1a1a));
    border: 1px solid var(--lb-border-default, var(--border-color, #333));
    border-radius: 1rem;
    overflow: hidden;
}

.panel-header[b-krkmxqazv7] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--lb-border-default, var(--border-color, #333));
}

.panel-header h2[b-krkmxqazv7] {
    margin: 0;
    font-size: 1.1rem;
    color: var(--lb-text-primary, var(--text-primary, #e0e0e0));
}

.panel-empty[b-krkmxqazv7] {
    padding: 2rem;
    text-align: center;
    color: var(--lb-text-muted, var(--text-muted, #888));
}

.panel-empty p[b-krkmxqazv7] {
    margin: 0 0 1rem 0;
}

.panel-footer[b-krkmxqazv7] {
    padding: 0.75rem 1.25rem;
    border-top: 1px solid var(--lb-border-default, var(--border-color, #333));
}

.link-more[b-krkmxqazv7] {
    color: var(--lb-accent-primary, var(--accent-color, #d4af37));
    text-decoration: none;
    font-size: 0.9rem;
}

.link-more:hover[b-krkmxqazv7] {
    text-decoration: underline;
}

/* Session List */
.session-list[b-krkmxqazv7] {
    padding: 0.5rem 0;
}

.session-item[b-krkmxqazv7] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 0.875rem 1.25rem;
    cursor: pointer;
    transition: background 0.2s;
}

.session-item:hover[b-krkmxqazv7] {
    background: var(--lb-bg-elevated-2, var(--bg-secondary, #222));
}

.session-number[b-krkmxqazv7] {
    flex-shrink: 0;
    width: 70px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--lb-accent-primary, var(--accent-color, #d4af37));
}

.session-info[b-krkmxqazv7] {
    flex: 1;
}

.session-title[b-krkmxqazv7] {
    font-weight: 500;
    color: var(--lb-text-primary, var(--text-primary, #e0e0e0));
    margin-bottom: 0.25rem;
}

.session-meta[b-krkmxqazv7] {
    display: flex;
    gap: 0.75rem;
    font-size: 0.8rem;
    color: var(--lb-text-muted, var(--text-muted, #888));
}

.session-status[b-krkmxqazv7] {
    padding: 0.125rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.7rem;
    text-transform: uppercase;
}

/* Party */
.party-info[b-krkmxqazv7] {
    padding: 1rem 1.25rem;
}

.party-header[b-krkmxqazv7] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.party-name[b-krkmxqazv7] {
    font-weight: 500;
    color: var(--lb-text-primary, var(--text-primary, #e0e0e0));
}

.player-count[b-krkmxqazv7] {
    font-size: 0.85rem;
    color: var(--lb-text-muted, var(--text-muted, #888));
}

.player-list[b-krkmxqazv7] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
}

.player-item[b-krkmxqazv7] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.player-avatar[b-krkmxqazv7] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--lb-accent-primary, var(--accent-color, #d4af37));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--lb-text-inverse, #0f0f0f);
}

.player-name[b-krkmxqazv7] {
    font-size: 0.9rem;
    color: var(--lb-text-primary, var(--text-primary, #e0e0e0));
}

.player-role[b-krkmxqazv7] {
    font-size: 0.75rem;
    color: var(--lb-text-muted, var(--text-muted, #888));
}

.join-code-display[b-krkmxqazv7] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--lb-border-default, var(--border-color, #333));
}

.join-label[b-krkmxqazv7] {
    font-size: 0.85rem;
    color: var(--lb-text-muted, var(--text-muted, #888));
}

.join-code[b-krkmxqazv7] {
    padding: 0.375rem 0.75rem;
    background: var(--lb-bg-elevated-2, var(--bg-secondary, #222));
    border-radius: 0.375rem;
    font-family: monospace;
    font-size: 1rem;
    color: var(--lb-accent-primary, var(--accent-color, #d4af37));
}

.btn-copy[b-krkmxqazv7] {
    padding: 0.375rem;
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    opacity: 0.7;
}

.btn-copy:hover[b-krkmxqazv7] {
    opacity: 1;
}

/* Universe List */
.universe-list[b-krkmxqazv7] {
    padding: 0.5rem 0;
}

.universe-item[b-krkmxqazv7] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1.25rem;
    text-decoration: none;
    transition: background 0.2s;
}

.universe-item:hover[b-krkmxqazv7] {
    background: var(--lb-bg-elevated-2, var(--bg-secondary, #222));
}

.universe-name[b-krkmxqazv7] {
    color: var(--lb-text-primary, var(--text-primary, #e0e0e0));
}

.primary-badge[b-krkmxqazv7] {
    padding: 0.125rem 0.5rem;
    background: rgba(212, 175, 55, 0.2);
    color: var(--lb-accent-primary, #d4af37);
    border-radius: 0.25rem;
    font-size: 0.7rem;
    text-transform: uppercase;
}

/* Notes List */
.notes-list[b-krkmxqazv7] {
    padding: 0.5rem 0;
}

.note-item[b-krkmxqazv7] {
    padding: 0.875rem 1.25rem;
    border-bottom: 1px solid var(--lb-border-default, var(--border-color, #333));
}

.note-item:last-child[b-krkmxqazv7] {
    border-bottom: none;
}

.note-content[b-krkmxqazv7] {
    font-size: 0.9rem;
    color: var(--lb-text-primary, var(--text-primary, #e0e0e0));
    line-height: 1.5;
    margin-bottom: 0.5rem;
}

.note-meta[b-krkmxqazv7] {
    display: flex;
    gap: 0.75rem;
    font-size: 0.8rem;
    color: var(--lb-text-muted, var(--text-muted, #888));
}

.gm-only-badge[b-krkmxqazv7] {
    padding: 0.125rem 0.5rem;
    background: rgba(251, 191, 36, 0.2);
    color: var(--lb-warning, #fbbf24);
    border-radius: 0.25rem;
    font-size: 0.7rem;
}

/* Buttons */
.btn[b-krkmxqazv7] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    border-radius: 0.5rem;
    font-weight: 500;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
    text-decoration: none;
}

.btn-sm[b-krkmxqazv7] {
    padding: 0.375rem 0.875rem;
    font-size: 0.85rem;
}

.btn-primary[b-krkmxqazv7] {
    background: var(--lb-accent-primary, var(--accent-color, #d4af37));
    color: var(--lb-text-inverse, #0f0f0f);
}

.btn-primary:hover[b-krkmxqazv7] {
    background: var(--lb-accent-primary-light, var(--primary-hover, #f4d03f));
    transform: translateY(-1px);
}

.btn-secondary[b-krkmxqazv7] {
    background: transparent;
    color: var(--lb-text-primary, var(--text-primary, #e0e0e0));
    border: 1px solid var(--lb-border-default, var(--border-color, #444));
}

.btn-secondary:hover[b-krkmxqazv7] {
    border-color: var(--lb-text-muted, var(--text-muted, #888));
    background: var(--lb-bg-hover, rgba(255,255,255,0.05));
}

@media (max-width: 768px) {
    .campaign-dashboard[b-krkmxqazv7] {
        padding: 1rem;
    }

    .header-content[b-krkmxqazv7] {
        flex-direction: column;
    }

    .campaign-image[b-krkmxqazv7] {
        width: 100%;
        height: 160px;
    }

    .quick-stats[b-krkmxqazv7] {
        grid-template-columns: 1fr;
    }

    .dashboard-grid[b-krkmxqazv7] {
        grid-template-columns: 1fr;
    }

    .player-list[b-krkmxqazv7] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Campaign/CampaignEdit.razor.rz.scp.css */
.edit-campaign-page[b-zqtz0xf1d9] {
    max-width: 800px;
    margin: 0 auto;
    padding: 2rem 1rem;
}

.page-header[b-zqtz0xf1d9] {
    margin-bottom: 2rem;
}

.back-link[b-zqtz0xf1d9] {
    display: inline-block;
    color: var(--lb-text-muted, #888);
    text-decoration: none;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
}

    .back-link:hover[b-zqtz0xf1d9] {
        color: var(--lb-accent-primary, #d4af37);
    }

.page-header h1[b-zqtz0xf1d9] {
    margin: 0;
    font-size: 2rem;
    color: var(--lb-text-primary, #e8e8e8);
}

.loading-container[b-zqtz0xf1d9],
.error-container[b-zqtz0xf1d9] {
    text-align: center;
    padding: 4rem 2rem;
    color: var(--lb-text-muted, #888);
}

.loading-spinner[b-zqtz0xf1d9] {
    width: 40px;
    height: 40px;
    border: 4px solid var(--lb-border-default, #333);
    border-top-color: var(--lb-accent-primary, #d4af37);
    border-radius: 50%;
    animation: spin-b-zqtz0xf1d9 1s linear infinite;
    margin: 0 auto 1rem;
}

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

.form-container[b-zqtz0xf1d9] {
    background: var(--lb-bg-elevated, #141414);
    border: 1px solid var(--lb-border-default, #333);
    border-radius: 12px;
    padding: 2rem;
}

.form-section[b-zqtz0xf1d9] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.form-group[b-zqtz0xf1d9] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.form-group label[b-zqtz0xf1d9] {
    font-weight: 600;
    color: var(--lb-text-primary, #e8e8e8);
    font-size: 0.95rem;
}

.form-group input[type="text"][b-zqtz0xf1d9],
.form-group input[type="url"][b-zqtz0xf1d9],
.form-group textarea[b-zqtz0xf1d9],
.form-group select[b-zqtz0xf1d9] {
    padding: 0.75rem 1rem;
    background: var(--lb-bg-elevated-2, #1a1a1a);
    border: 1px solid var(--lb-border-default, #333);
    border-radius: 8px;
    color: var(--lb-text-primary, #e8e8e8);
    font-size: 1rem;
    transition: border-color 0.2s;
}

    .form-group input:focus[b-zqtz0xf1d9],
    .form-group textarea:focus[b-zqtz0xf1d9],
    .form-group select:focus[b-zqtz0xf1d9] {
        outline: none;
        border-color: var(--lb-accent-primary, #d4af37);
    }

.form-group textarea[b-zqtz0xf1d9] {
    resize: vertical;
    min-height: 100px;
}

.field-error[b-zqtz0xf1d9] {
    color: var(--lb-danger, #f44336);
    font-size: 0.85rem;
}

.field-help[b-zqtz0xf1d9] {
    color: var(--lb-text-muted, #888);
    font-size: 0.85rem;
    margin: 0;
}

.checkbox-label[b-zqtz0xf1d9] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-weight: normal !important;
}

    .checkbox-label input[type="checkbox"][b-zqtz0xf1d9] {
        width: 18px;
        height: 18px;
        cursor: pointer;
    }

.image-preview[b-zqtz0xf1d9] {
    margin-top: 0.5rem;
    border-radius: 8px;
    overflow: hidden;
    max-width: 300px;
}

    .image-preview img[b-zqtz0xf1d9] {
        width: 100%;
        height: auto;
        display: block;
    }

.error-message[b-zqtz0xf1d9] {
    background: rgba(244, 67, 54, 0.1);
    border: 1px solid var(--lb-danger, #f44336);
    color: var(--lb-danger, #f44336);
    padding: 1rem;
    border-radius: 8px;
    margin-top: 1.5rem;
}

.success-message[b-zqtz0xf1d9] {
    background: rgba(76, 175, 80, 0.1);
    border: 1px solid var(--lb-success, #4caf50);
    color: var(--lb-success, #4caf50);
    padding: 1rem;
    border-radius: 8px;
    margin-top: 1.5rem;
}

.form-actions[b-zqtz0xf1d9] {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--lb-border-default, #333);
}

.btn[b-zqtz0xf1d9] {
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
}

.btn-primary[b-zqtz0xf1d9] {
    background: var(--lb-accent-primary, #d4af37);
    color: #0f0f0f;
}

    .btn-primary:hover:not(:disabled)[b-zqtz0xf1d9] {
        background: var(--lb-accent-primary-light, #e0c35a);
        transform: translateY(-2px);
    }

    .btn-primary:disabled[b-zqtz0xf1d9] {
        opacity: 0.6;
        cursor: not-allowed;
    }

.btn-secondary[b-zqtz0xf1d9] {
    background: var(--lb-bg-elevated-2, #1a1a1a);
    color: var(--lb-text-primary, #e8e8e8);
    border: 1px solid var(--lb-border-default, #333);
}

    .btn-secondary:hover[b-zqtz0xf1d9] {
        background: var(--lb-bg-elevated-3, #252525);
        border-color: var(--lb-accent-primary, #d4af37);
    }

/* Danger Zone */
.danger-zone[b-zqtz0xf1d9] {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--lb-border-default, #333);
}

.danger-zone h3[b-zqtz0xf1d9] {
    color: var(--lb-danger, #f44336);
    margin: 0 0 1rem 0;
    font-size: 1rem;
}

.danger-item[b-zqtz0xf1d9] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: rgba(244, 67, 54, 0.05);
    border: 1px solid rgba(244, 67, 54, 0.2);
    border-radius: 8px;
}

.danger-info strong[b-zqtz0xf1d9] {
    display: block;
    color: var(--lb-text-primary, #e8e8e8);
    margin-bottom: 0.25rem;
}

.danger-info p[b-zqtz0xf1d9] {
    margin: 0;
    color: var(--lb-text-muted, #888);
    font-size: 0.85rem;
}

.btn-danger-outline[b-zqtz0xf1d9] {
    background: transparent;
    color: var(--lb-danger, #f44336);
    border: 1px solid var(--lb-danger, #f44336);
    padding: 0.5rem 1rem;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    white-space: nowrap;
    transition: all 0.2s;
}

.btn-danger-outline:hover[b-zqtz0xf1d9] {
    background: var(--lb-danger, #f44336);
    color: white;
}

.btn-danger[b-zqtz0xf1d9] {
    background: var(--lb-danger, #f44336);
    color: white;
}

.btn-danger:hover:not(:disabled)[b-zqtz0xf1d9] {
    background: #d32f2f;
}

.btn-danger:disabled[b-zqtz0xf1d9] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Modal */
.modal-backdrop[b-zqtz0xf1d9] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
}

.modal-content[b-zqtz0xf1d9] {
    background: var(--lb-bg-elevated, #141414);
    border: 1px solid var(--lb-border-default, #333);
    border-radius: 12px;
    max-width: 500px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
}

.modal-header[b-zqtz0xf1d9] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--lb-border-default, #333);
}

.modal-header h2[b-zqtz0xf1d9] {
    margin: 0;
    font-size: 1.25rem;
    color: var(--lb-text-primary, #e8e8e8);
}

.modal-close[b-zqtz0xf1d9] {
    background: transparent;
    border: none;
    color: var(--lb-text-muted, #888);
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

.modal-close:hover[b-zqtz0xf1d9] {
    color: var(--lb-text-primary, #e8e8e8);
}

.modal-body[b-zqtz0xf1d9] {
    padding: 1.5rem;
}

.modal-body p[b-zqtz0xf1d9] {
    margin: 0 0 1rem 0;
    color: var(--lb-text-primary, #e8e8e8);
}

.modal-body .text-muted[b-zqtz0xf1d9] {
    color: var(--lb-text-muted, #888);
    font-size: 0.9rem;
}

.modal-footer[b-zqtz0xf1d9] {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--lb-border-default, #333);
}

/* Mobile */
@media (max-width: 768px) {
    .edit-campaign-page[b-zqtz0xf1d9] {
        padding: 1rem;
    }

    .form-container[b-zqtz0xf1d9] {
        padding: 1.5rem;
    }

    .form-actions[b-zqtz0xf1d9] {
        flex-direction: column-reverse;
    }

    .btn[b-zqtz0xf1d9] {
        width: 100%;
    }
}
/* /Components/Pages/Campaign/CampaignList.razor.rz.scp.css */
.campaigns-page[b-7bfilc1siq] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
}

.page-header[b-7bfilc1siq] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--lb-border-default, var(--border-color, #333));
}

.header-content h1[b-7bfilc1siq] {
    margin: 0 0 0.5rem 0;
    font-size: 2rem;
    color: var(--lb-text-primary, var(--text-primary, #e0e0e0));
}

.header-subtitle[b-7bfilc1siq] {
    margin: 0;
    color: var(--lb-text-muted, var(--text-muted, #888));
}

.header-actions[b-7bfilc1siq] {
    display: flex;
    gap: 0.75rem;
}

/* Buttons */
.btn[b-7bfilc1siq] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
    font-size: 0.9375rem;
}

.btn-primary[b-7bfilc1siq] {
    background: var(--lb-accent-primary, var(--accent-color, #d4af37));
    color: var(--lb-text-inverse, #0f0f0f);
}

.btn-primary:hover[b-7bfilc1siq] {
    background: var(--lb-accent-primary-light, var(--primary-hover, #f4d03f));
    transform: translateY(-1px);
}

.btn-secondary[b-7bfilc1siq] {
    background: var(--lb-bg-elevated-3, var(--surface-color, #2a2a2a));
    color: var(--lb-text-secondary, var(--text-primary, #ccc));
    border: 1px solid var(--lb-border-default, var(--border-color, #333));
}

.btn-secondary:hover[b-7bfilc1siq] {
    background: var(--lb-bg-hover, var(--border-color, #333));
    transform: translateY(-1px);
}

/* Loading */
.loading-container[b-7bfilc1siq] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem;
    color: var(--lb-text-muted, var(--text-muted, #888));
}

.loading-spinner[b-7bfilc1siq] {
    width: 40px;
    height: 40px;
    border: 3px solid var(--lb-border-default, var(--border-color, #333));
    border-top-color: var(--lb-accent-primary, var(--accent-color, #d4af37));
    border-radius: 50%;
    animation: spin-b-7bfilc1siq 1s linear infinite;
    margin-bottom: 1rem;
}

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

/* Empty State */
.empty-state[b-7bfilc1siq] {
    text-align: center;
    padding: 4rem 2rem;
    background: var(--lb-bg-elevated, var(--card-bg, #1a1a1a));
    border-radius: 1rem;
    border: 1px dashed var(--lb-border-default, var(--border-color, #333));
}

.empty-icon[b-7bfilc1siq] {
    font-size: 4rem;
    margin-bottom: 1rem;
}

.empty-state h2[b-7bfilc1siq] {
    margin: 0 0 0.5rem 0;
    color: var(--lb-text-primary, var(--text-primary, #e0e0e0));
}

.empty-state p[b-7bfilc1siq] {
    margin: 0 0 1.5rem 0;
    color: var(--lb-text-muted, var(--text-muted, #888));
}

/* Campaign Grid */
.campaigns-grid[b-7bfilc1siq] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 1.5rem;
}

.campaign-card[b-7bfilc1siq] {
    background: var(--lb-bg-elevated, var(--card-bg, #1a1a1a));
    border-radius: 1rem;
    overflow: hidden;
    border: 1px solid var(--lb-border-default, var(--border-color, #333));
    cursor: pointer;
    transition: all 0.2s;
}

.campaign-card:hover[b-7bfilc1siq] {
    transform: translateY(-4px);
    box-shadow: var(--lb-shadow-lg, 0 8px 24px rgba(0,0,0,0.3));
    border-color: var(--lb-accent-primary, var(--accent-color, #d4af37));
}

/* Campaign Image */
.campaign-image[b-7bfilc1siq] {
    height: 140px;
    background-size: cover;
    background-position: center;
    background-color: var(--lb-bg-elevated-2, var(--bg-secondary, #222));
}

.campaign-image-placeholder[b-7bfilc1siq] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--lb-accent-primary-dark, #b8941f) 0%, var(--lb-accent-primary, #d4af37) 100%);
}

.campaign-image-placeholder span[b-7bfilc1siq] {
    font-size: 3rem;
    opacity: 0.5;
}

/* Campaign Content */
.campaign-content[b-7bfilc1siq] {
    padding: 1.25rem;
}

.campaign-header[b-7bfilc1siq] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.campaign-name[b-7bfilc1siq] {
    margin: 0;
    font-size: 1.25rem;
    color: var(--lb-text-primary, var(--text-primary, #e0e0e0));
    line-height: 1.3;
}

/* Status Badges */
.campaign-status[b-7bfilc1siq] {
    flex-shrink: 0;
    padding: 0.25rem 0.75rem;
    border-radius: 1rem;
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
}

.status-planning[b-7bfilc1siq] {
    background: rgba(212, 175, 55, 0.15);
    color: var(--lb-accent-primary, #d4af37);
}

.status-active[b-7bfilc1siq] {
    background: rgba(212, 175, 55, 0.25);
    color: var(--lb-accent-primary-light, #f4d03f);
}

.status-paused[b-7bfilc1siq] {
    background: rgba(212, 175, 55, 0.15);
    color: var(--lb-warning, #f4d03f);
}

.status-completed[b-7bfilc1siq] {
    background: rgba(76, 175, 80, 0.15);
    color: var(--lb-success, #4caf50);
}

.status-archived[b-7bfilc1siq] {
    background: var(--lb-bg-elevated-3, rgba(107, 114, 128, 0.2));
    color: var(--lb-text-muted, #888);
}

/* Campaign Description & Meta */
.campaign-description[b-7bfilc1siq] {
    margin: 0 0 1rem 0;
    color: var(--lb-text-secondary, var(--text-muted, #ccc));
    font-size: 0.9rem;
    line-height: 1.5;
}

.campaign-meta[b-7bfilc1siq] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1rem;
}

.meta-item[b-7bfilc1siq] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.85rem;
    color: var(--lb-text-muted, var(--text-muted, #888));
}

.meta-icon[b-7bfilc1siq] {
    font-size: 1rem;
}

/* Campaign Footer */
.campaign-footer[b-7bfilc1siq] {
    padding-top: 0.75rem;
    border-top: 1px solid var(--lb-border-subtle, var(--border-color, #2a2a2a));
}

.campaign-date[b-7bfilc1siq] {
    font-size: 0.8rem;
    color: var(--lb-text-subtle, var(--text-muted, #666));
}

/* Responsive */
@media (max-width: 768px) {
    .campaigns-page[b-7bfilc1siq] {
        padding: 1rem;
    }

    .page-header[b-7bfilc1siq] {
        flex-direction: column;
        gap: 1rem;
    }

    .header-actions[b-7bfilc1siq] {
        width: 100%;
    }

    .header-actions .btn[b-7bfilc1siq] {
        flex: 1;
        justify-content: center;
    }

    .campaigns-grid[b-7bfilc1siq] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Campaign/Party/JoinParty.razor.rz.scp.css */
.join-party-page[b-m2n8aff6kn] {
    min-height: calc(100vh - 120px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.join-card[b-m2n8aff6kn] {
    background: var(--lb-bg-elevated, var(--card-bg, #1a1a1a));
    border-radius: 16px;
    border: 1px solid var(--lb-border-default, var(--border-color, #333));
    padding: 2.5rem;
    width: 100%;
    max-width: 420px;
    text-align: center;
}

.join-header[b-m2n8aff6kn] {
    margin-bottom: 2rem;
}

.join-icon[b-m2n8aff6kn] {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.join-header h1[b-m2n8aff6kn] {
    margin: 0 0 0.5rem 0;
    font-size: 1.5rem;
    color: var(--lb-text-primary, var(--text-primary, #e0e0e0));
}

.join-header p[b-m2n8aff6kn] {
    margin: 0;
    color: var(--lb-text-muted, var(--text-secondary, #888));
}

/* Form */
.join-form[b-m2n8aff6kn] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.form-group[b-m2n8aff6kn] {
    text-align: left;
}

.form-group label[b-m2n8aff6kn] {
    display: block;
    font-weight: 500;
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
    color: var(--lb-text-primary, var(--text-primary, #e0e0e0));
}

.code-input[b-m2n8aff6kn] {
    width: 100%;
    padding: 1rem;
    font-size: 1.25rem;
    font-family: monospace;
    letter-spacing: 0.15em;
    text-align: center;
    text-transform: uppercase;
    border: 2px solid var(--lb-border-default, var(--border-color, #333));
    border-radius: 8px;
    background: var(--lb-bg-elevated-2, var(--surface-color, #222));
    color: var(--lb-accent-primary, var(--accent-color, #d4af37));
    transition: border-color 0.15s;
}

.code-input:focus[b-m2n8aff6kn] {
    outline: none;
    border-color: var(--lb-accent-primary, var(--accent-color, #d4af37));
}

.code-input.error[b-m2n8aff6kn] {
    border-color: var(--lb-error, #dc2626);
}

.field-error[b-m2n8aff6kn] {
    display: block;
    color: var(--lb-error, #dc2626);
    font-size: 0.8125rem;
    margin-top: 0.5rem;
}

/* Buttons */
.btn[b-m2n8aff6kn] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-weight: 500;
    cursor: pointer;
    border: none;
    transition: all 0.15s;
    text-decoration: none;
    font-size: 1rem;
}

.btn:disabled[b-m2n8aff6kn] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-primary[b-m2n8aff6kn] {
    background: var(--lb-accent-primary, var(--accent-color, #d4af37));
    color: var(--lb-text-inverse, #0f0f0f);
}

.btn-primary:hover:not(:disabled)[b-m2n8aff6kn] {
    background: var(--lb-accent-primary-light, var(--primary-hover, #f4d03f));
    transform: translateY(-1px);
}

.btn-large[b-m2n8aff6kn] {
    width: 100%;
    padding: 1rem;
    font-size: 1.0625rem;
}

/* Success State */
.success-state[b-m2n8aff6kn] {
    padding: 1rem 0;
}

.success-icon[b-m2n8aff6kn] {
    font-size: 3rem;
    color: var(--lb-success, #4caf50);
    margin-bottom: 1rem;
}

.success-state h2[b-m2n8aff6kn] {
    margin: 0 0 0.5rem 0;
    color: var(--lb-success, #4caf50);
}

.success-state p[b-m2n8aff6kn] {
    margin: 0 0 1.5rem 0;
    color: var(--lb-text-muted, var(--text-secondary, #888));
}

.success-state strong[b-m2n8aff6kn] {
    color: var(--lb-text-primary, var(--text-primary, #e0e0e0));
}

/* Responsive */
@media (max-width: 480px) {
    .join-card[b-m2n8aff6kn] {
        padding: 1.5rem;
    }

    .join-header h1[b-m2n8aff6kn] {
        font-size: 1.25rem;
    }

    .code-input[b-m2n8aff6kn] {
        font-size: 1.125rem;
    }
}
/* /Components/Pages/Campaign/Party/PartyManagement.razor.rz.scp.css */
.party-management-page[b-n08wgl3gg6] {
    max-width: 1000px;
    margin: 0 auto;
    padding: 2rem;
}

.page-header[b-n08wgl3gg6] {
    margin-bottom: 2rem;
}

.back-link[b-n08wgl3gg6] {
    color: var(--lb-text-muted, var(--text-secondary, #888));
    text-decoration: none;
    font-size: 0.875rem;
    display: inline-block;
    margin-bottom: 0.5rem;
}

.back-link:hover[b-n08wgl3gg6] {
    color: var(--lb-accent-primary, var(--accent-color, #d4af37));
}

.page-header h1[b-n08wgl3gg6] {
    margin: 0 0 0.25rem 0;
    font-size: 1.75rem;
    color: var(--lb-text-primary, var(--text-primary, #e0e0e0));
}

.header-subtitle[b-n08wgl3gg6] {
    color: var(--lb-text-muted, var(--text-secondary, #888));
    margin: 0;
}

/* Empty State */
.no-party-section[b-n08wgl3gg6] {
    padding: 3rem 0;
}

.empty-state[b-n08wgl3gg6] {
    text-align: center;
    padding: 3rem 2rem;
    background: var(--lb-bg-elevated, var(--card-bg, #1a1a1a));
    border-radius: 12px;
    border: 1px solid var(--lb-border-default, var(--border-color, #333));
}

.empty-icon[b-n08wgl3gg6] {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.empty-state h2[b-n08wgl3gg6] {
    margin: 0 0 0.5rem 0;
    color: var(--lb-text-primary, var(--text-primary, #e0e0e0));
}

.empty-state p[b-n08wgl3gg6] {
    color: var(--lb-text-muted, var(--text-secondary, #888));
    margin-bottom: 1.5rem;
}

/* Party Content */
.party-content[b-n08wgl3gg6] {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

/* Party Info Card */
.party-info-card[b-n08wgl3gg6] {
    background: var(--lb-bg-elevated, var(--card-bg, #1a1a1a));
    border-radius: 12px;
    border: 1px solid var(--lb-border-default, var(--border-color, #333));
    padding: 1.5rem;
}

.card-header[b-n08wgl3gg6] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.card-header h2[b-n08wgl3gg6] {
    margin: 0;
    font-size: 1.25rem;
    color: var(--lb-text-primary, var(--text-primary, #e0e0e0));
}

.player-count[b-n08wgl3gg6] {
    color: var(--lb-text-muted, var(--text-secondary, #888));
    font-size: 0.875rem;
}

.party-description[b-n08wgl3gg6] {
    color: var(--lb-text-secondary, var(--text-secondary, #ccc));
    margin-bottom: 1.5rem;
}

/* Join Code Section */
.join-code-section[b-n08wgl3gg6] {
    background: var(--lb-bg-elevated-2, var(--surface-color, #222));
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1.5rem;
}

.join-code-header[b-n08wgl3gg6] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.join-code-header h3[b-n08wgl3gg6] {
    margin: 0;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--lb-text-muted, var(--text-secondary, #888));
}

.join-code-display[b-n08wgl3gg6] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.join-code[b-n08wgl3gg6] {
    font-family: monospace;
    font-size: 1.5rem;
    font-weight: bold;
    letter-spacing: 0.2em;
    padding: 0.5rem 1rem;
    background: var(--lb-bg-elevated, var(--card-bg, #1a1a1a));
    border-radius: 6px;
    border: 2px dashed var(--lb-accent-primary, var(--accent-color, #d4af37));
    color: var(--lb-accent-primary, var(--accent-color, #d4af37));
}

.btn-copy[b-n08wgl3gg6] {
    background: transparent;
    border: 1px solid var(--lb-border-default, var(--border-color, #333));
    border-radius: 6px;
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    font-size: 1rem;
    color: var(--lb-text-secondary, var(--text-secondary, #ccc));
}

.btn-copy:hover[b-n08wgl3gg6] {
    background: var(--lb-bg-elevated-3, var(--surface-color, #2a2a2a));
}

.join-instructions[b-n08wgl3gg6] {
    font-size: 0.8125rem;
    color: var(--lb-text-muted, var(--text-secondary, #888));
    margin: 0.5rem 0 0 0;
}

.join-instructions code[b-n08wgl3gg6] {
    background: var(--lb-bg-elevated, var(--card-bg, #1a1a1a));
    padding: 0.125rem 0.375rem;
    border-radius: 4px;
    color: var(--lb-accent-primary, var(--accent-color, #d4af37));
}

.code-expiry[b-n08wgl3gg6] {
    font-size: 0.75rem;
    color: var(--lb-text-subtle, var(--text-muted, #666));
    margin: 0.25rem 0 0 0;
}

.party-actions[b-n08wgl3gg6] {
    display: flex;
    gap: 0.75rem;
}

/* Player Slots Section */
.player-slots-section[b-n08wgl3gg6] {
    background: var(--lb-bg-elevated, var(--card-bg, #1a1a1a));
    border-radius: 12px;
    border: 1px solid var(--lb-border-default, var(--border-color, #333));
    padding: 1.5rem;
}

.section-header[b-n08wgl3gg6] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.section-header h2[b-n08wgl3gg6] {
    margin: 0;
    font-size: 1.125rem;
    color: var(--lb-text-primary, var(--text-primary, #e0e0e0));
}

.empty-slots[b-n08wgl3gg6] {
    text-align: center;
    padding: 2rem;
    color: var(--lb-text-muted, var(--text-secondary, #888));
}

.slots-grid[b-n08wgl3gg6] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
}

.player-slot[b-n08wgl3gg6] {
    background: var(--lb-bg-elevated-2, var(--surface-color, #222));
    border-radius: 8px;
    padding: 1rem;
    border: 1px solid var(--lb-border-default, var(--border-color, #333));
}

.player-slot.filled[b-n08wgl3gg6] {
    border-color: var(--lb-accent-primary, var(--accent-color, #d4af37));
}

.slot-header[b-n08wgl3gg6] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.slot-role[b-n08wgl3gg6] {
    font-weight: 500;
    font-size: 0.875rem;
    color: var(--lb-text-primary, var(--text-primary, #e0e0e0));
}

.role-select[b-n08wgl3gg6] {
    padding: 0.25rem 0.5rem;
    font-size: 0.8125rem;
    font-weight: 500;
    border: 1px solid var(--lb-border-default, var(--border-color, #333));
    border-radius: 4px;
    background: var(--lb-bg-elevated, var(--card-bg, #1a1a1a));
    color: var(--lb-text-primary, var(--text-primary, #e0e0e0));
    cursor: pointer;
}

.role-select:focus[b-n08wgl3gg6] {
    outline: none;
    border-color: var(--lb-accent-primary, var(--accent-color, #d4af37));
}

.slot-status[b-n08wgl3gg6] {
    font-size: 0.75rem;
    padding: 0.125rem 0.5rem;
    border-radius: 10px;
    background: var(--lb-bg-elevated, var(--card-bg, #1a1a1a));
}

.slot-status.status-active[b-n08wgl3gg6] {
    background: rgba(76, 175, 80, 0.15);
    color: var(--lb-success, #4caf50);
}

.slot-status.status-invited[b-n08wgl3gg6] {
    background: rgba(212, 175, 55, 0.15);
    color: var(--lb-accent-primary, #d4af37);
}

.slot-status.status-empty[b-n08wgl3gg6] {
    background: var(--lb-bg-elevated, var(--card-bg, #1a1a1a));
    color: var(--lb-text-muted, var(--text-muted, #888));
}

.slot-player[b-n08wgl3gg6] {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    margin-bottom: 0.75rem;
}

.player-avatar[b-n08wgl3gg6] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--lb-accent-primary, var(--accent-color, #d4af37));
    color: var(--lb-text-inverse, #0f0f0f);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.875rem;
}

.player-info[b-n08wgl3gg6] {
    flex: 1;
}

.player-name[b-n08wgl3gg6] {
    font-weight: 500;
    color: var(--lb-text-primary, var(--text-primary, #e0e0e0));
}

.character-name[b-n08wgl3gg6] {
    font-size: 0.8125rem;
    color: var(--lb-text-muted, var(--text-secondary, #888));
}

.slot-empty[b-n08wgl3gg6] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--lb-text-muted, var(--text-muted, #666));
    padding: 0.5rem 0;
}

.empty-icon[b-n08wgl3gg6] {
    font-size: 1.25rem;
}

.slot-actions[b-n08wgl3gg6] {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

/* Modal */
.modal-overlay[b-n08wgl3gg6] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
}

.modal-content[b-n08wgl3gg6] {
    background: var(--lb-bg-elevated, var(--card-bg, #1a1a1a));
    border: 1px solid var(--lb-border-default, var(--border-color, #333));
    border-radius: 12px;
    width: 100%;
    max-width: 480px;
    max-height: 90vh;
    overflow-y: auto;
}

.modal-header[b-n08wgl3gg6] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--lb-border-default, var(--border-color, #333));
}

.modal-header h2[b-n08wgl3gg6] {
    margin: 0;
    font-size: 1.125rem;
    color: var(--lb-text-primary, var(--text-primary, #e0e0e0));
}

.modal-close[b-n08wgl3gg6] {
    background: transparent;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--lb-text-muted, var(--text-secondary, #888));
    padding: 0;
    line-height: 1;
}

.modal-close:hover[b-n08wgl3gg6] {
    color: var(--lb-text-primary, var(--text-primary, #e0e0e0));
}

.modal-body[b-n08wgl3gg6] {
    padding: 1.5rem;
}

.modal-footer[b-n08wgl3gg6] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--lb-border-default, var(--border-color, #333));
}

/* Form */
.form-group[b-n08wgl3gg6] {
    margin-bottom: 1.25rem;
}

.form-group:last-child[b-n08wgl3gg6] {
    margin-bottom: 0;
}

.form-group label[b-n08wgl3gg6] {
    display: block;
    font-weight: 500;
    margin-bottom: 0.375rem;
    font-size: 0.875rem;
    color: var(--lb-text-primary, var(--text-primary, #e0e0e0));
}

.form-group input[b-n08wgl3gg6],
.form-group textarea[b-n08wgl3gg6],
.form-group select[b-n08wgl3gg6] {
    width: 100%;
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--lb-border-default, var(--border-color, #333));
    border-radius: 6px;
    background: var(--lb-bg-elevated-2, var(--surface-color, #222));
    color: var(--lb-text-primary, var(--text-primary, #e0e0e0));
    font-size: 0.9375rem;
}

.form-group input:focus[b-n08wgl3gg6],
.form-group textarea:focus[b-n08wgl3gg6],
.form-group select:focus[b-n08wgl3gg6] {
    outline: none;
    border-color: var(--lb-accent-primary, var(--accent-color, #d4af37));
}

.form-group input[type="number"][b-n08wgl3gg6] {
    width: 100px;
}

/* Buttons */
.btn[b-n08wgl3gg6] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    padding: 0.625rem 1.25rem;
    border-radius: 6px;
    font-weight: 500;
    cursor: pointer;
    border: none;
    transition: all 0.15s;
    text-decoration: none;
    font-size: 0.9375rem;
}

.btn:disabled[b-n08wgl3gg6] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-primary[b-n08wgl3gg6] {
    background: var(--lb-accent-primary, var(--accent-color, #d4af37));
    color: var(--lb-text-inverse, #0f0f0f);
}

.btn-primary:hover:not(:disabled)[b-n08wgl3gg6] {
    background: var(--lb-accent-primary-light, var(--primary-hover, #f4d03f));
    transform: translateY(-1px);
}

.btn-secondary[b-n08wgl3gg6] {
    background: var(--lb-bg-elevated-2, var(--surface-color, #222));
    color: var(--lb-text-primary, var(--text-primary, #e0e0e0));
    border: 1px solid var(--lb-border-default, var(--border-color, #333));
}

.btn-secondary:hover:not(:disabled)[b-n08wgl3gg6] {
    background: var(--lb-bg-elevated-3, var(--border-color, #333));
}

.btn-danger[b-n08wgl3gg6] {
    background: var(--lb-error, #dc2626);
    color: white;
}

.btn-danger:hover:not(:disabled)[b-n08wgl3gg6] {
    background: #b91c1c;
}

.btn-sm[b-n08wgl3gg6] {
    padding: 0.375rem 0.75rem;
    font-size: 0.8125rem;
}

/* Loading & Error */
.loading-page[b-n08wgl3gg6],
.error-page[b-n08wgl3gg6] {
    text-align: center;
    padding: 4rem 2rem;
}

.loading-spinner[b-n08wgl3gg6] {
    width: 40px;
    height: 40px;
    border: 3px solid var(--lb-border-default, var(--border-color, #333));
    border-top-color: var(--lb-accent-primary, var(--accent-color, #d4af37));
    border-radius: 50%;
    animation: spin-b-n08wgl3gg6 0.8s linear infinite;
    margin: 0 auto 1rem;
}

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

.error-page h1[b-n08wgl3gg6] {
    margin-bottom: 0.5rem;
    color: var(--lb-text-primary, var(--text-primary, #e0e0e0));
}

.error-page p[b-n08wgl3gg6] {
    color: var(--lb-text-muted, var(--text-secondary, #888));
    margin-bottom: 1.5rem;
}

/* Responsive */
@media (max-width: 640px) {
    .party-management-page[b-n08wgl3gg6] {
        padding: 1rem;
    }

    .page-header h1[b-n08wgl3gg6] {
        font-size: 1.5rem;
    }

    .slots-grid[b-n08wgl3gg6] {
        grid-template-columns: 1fr;
    }

    .join-code[b-n08wgl3gg6] {
        font-size: 1.25rem;
    }

    .card-header[b-n08wgl3gg6] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
}
/* /Components/Pages/Campaign/Sessions/LiveSession.razor.rz.scp.css */
.live-session[b-1xyg7zzeh0] {
    min-height: 100vh;
    background: var(--body-bg, #121212);
}

.loading-state[b-1xyg7zzeh0],
.error-state[b-1xyg7zzeh0] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 50vh;
    text-align: center;
}

.error-state h2[b-1xyg7zzeh0] {
    margin-bottom: 16px;
}

.error-state a[b-1xyg7zzeh0] {
    color: var(--primary-color, #4a9eff);
    text-decoration: none;
    margin-top: 16px;
}

.session-header[b-1xyg7zzeh0] {
    padding: 16px 24px;
    background: var(--surface-color, #1e1e1e);
    border-bottom: 1px solid var(--border-color, #333);
}

.back-link[b-1xyg7zzeh0] {
    color: var(--text-muted, #888);
    text-decoration: none;
    font-size: 14px;
    margin-bottom: 8px;
    display: inline-block;
}

.back-link:hover[b-1xyg7zzeh0] {
    color: var(--primary-color, #4a9eff);
}

.session-info h1[b-1xyg7zzeh0] {
    margin: 8px 0;
    font-size: 24px;
}

.session-meta[b-1xyg7zzeh0] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.status[b-1xyg7zzeh0] {
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
}

.status.planning[b-1xyg7zzeh0] {
    background: var(--text-muted, #666);
    color: white;
}

.status.scheduled[b-1xyg7zzeh0] {
    background: var(--warning-color, #ff9800);
    color: white;
}

.status.inprogress[b-1xyg7zzeh0] {
    background: var(--success-color, #4caf50);
    color: white;
}

.status.completed[b-1xyg7zzeh0] {
    background: var(--primary-color, #4a9eff);
    color: white;
}

.role-badge[b-1xyg7zzeh0] {
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
}

.role-badge.gm[b-1xyg7zzeh0] {
    background: var(--warning-color, #ff9800);
    color: #000;
}

.role-badge.player[b-1xyg7zzeh0] {
    background: var(--primary-color, #4a9eff);
    color: white;
}

/* Refresh button */
.btn-refresh[b-1xyg7zzeh0] {
    background: transparent;
    border: 1px solid var(--border-color, #444);
    color: var(--text-muted, #888);
    width: 32px;
    height: 32px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.btn-refresh:hover:not(:disabled)[b-1xyg7zzeh0] {
    border-color: var(--primary-color, #4a9eff);
    color: var(--primary-color, #4a9eff);
}

.btn-refresh:disabled[b-1xyg7zzeh0] {
    opacity: 0.5;
    cursor: not-allowed;
}

.refresh-icon[b-1xyg7zzeh0] {
    font-size: 18px;
    line-height: 1;
}

.refresh-icon.spinning[b-1xyg7zzeh0] {
    animation: spin-b-1xyg7zzeh0 1s linear infinite;
}

@keyframes spin-b-1xyg7zzeh0 {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Error toast */
.error-toast[b-1xyg7zzeh0] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: rgba(244, 67, 54, 0.15);
    border: 1px solid var(--danger-color, #f44336);
    border-radius: 8px;
    margin-top: 12px;
}

.error-toast .error-message[b-1xyg7zzeh0] {
    flex: 1;
    color: var(--danger-color, #f44336);
    font-size: 14px;
}

.error-toast .btn-dismiss[b-1xyg7zzeh0] {
    background: transparent;
    border: none;
    color: var(--danger-color, #f44336);
    font-size: 20px;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
}

.error-toast .btn-dismiss:hover[b-1xyg7zzeh0] {
    opacity: 0.7;
}

.connection-status[b-1xyg7zzeh0] {
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.connection-status[b-1xyg7zzeh0]::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.connection-status.connected[b-1xyg7zzeh0]::before {
    background: var(--success-color, #4caf50);
}

.connection-status.disconnected[b-1xyg7zzeh0]::before {
    background: var(--danger-color, #f44336);
}

.session-content[b-1xyg7zzeh0] {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: 24px;
    padding: 24px;
    max-width: 1600px;
    margin: 0 auto;
}

@media (max-width: 1200px) {
    .session-content[b-1xyg7zzeh0] {
        grid-template-columns: 1fr;
    }

    .side-panel[b-1xyg7zzeh0] {
        order: -1;
    }
}

.main-panel[b-1xyg7zzeh0] {
    min-height: 400px;
}

.no-encounter[b-1xyg7zzeh0] {
    text-align: center;
    padding: 40px;
    background: var(--surface-color, #1e1e1e);
    border: 1px solid var(--border-color, #333);
    border-radius: 12px;
}

.no-encounter h3[b-1xyg7zzeh0] {
    margin-bottom: 8px;
}

.no-encounter p[b-1xyg7zzeh0] {
    color: var(--text-muted, #888);
    margin-bottom: 24px;
}

.scene-encounters[b-1xyg7zzeh0] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 16px;
    margin-top: 24px;
    text-align: left;
}

.scene-card[b-1xyg7zzeh0] {
    background: var(--panel-bg, #2a2a2a);
    border: 1px solid var(--border-color, #444);
    border-radius: 8px;
    padding: 16px;
}

.scene-card h4[b-1xyg7zzeh0] {
    margin: 0 0 12px 0;
    font-size: 16px;
}

.btn-encounter[b-1xyg7zzeh0] {
    display: block;
    width: 100%;
    padding: 8px 12px;
    margin-bottom: 8px;
    background: var(--surface-color, #333);
    border: 1px solid var(--border-color, #555);
    border-radius: 6px;
    color: var(--text-color, #fff);
    cursor: pointer;
    text-align: left;
    transition: all 0.2s;
}

.btn-encounter:hover[b-1xyg7zzeh0] {
    background: var(--primary-color, #4a9eff);
    border-color: var(--primary-color, #4a9eff);
}

.btn-add-encounter[b-1xyg7zzeh0] {
    display: block;
    width: 100%;
    padding: 8px 12px;
    background: transparent;
    border: 1px dashed var(--border-color, #555);
    border-radius: 6px;
    color: var(--text-muted, #888);
    cursor: pointer;
    transition: all 0.2s;
}

.btn-add-encounter:hover[b-1xyg7zzeh0] {
    border-color: var(--primary-color, #4a9eff);
    color: var(--primary-color, #4a9eff);
}

.side-panel[b-1xyg7zzeh0] {
    position: sticky;
    top: 24px;
    height: fit-content;
}

/* Modal styles */
.modal-overlay[b-1xyg7zzeh0] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.modal-content[b-1xyg7zzeh0] {
    background: var(--surface-color, #1e1e1e);
    border: 1px solid var(--border-color, #444);
    border-radius: 12px;
    width: 100%;
    max-width: 480px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

.modal-content.modal-wide[b-1xyg7zzeh0] {
    max-width: 600px;
}

.modal-header[b-1xyg7zzeh0] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color, #444);
}

.modal-header h3[b-1xyg7zzeh0] {
    margin: 0;
    font-size: 18px;
}

.btn-close[b-1xyg7zzeh0] {
    background: none;
    border: none;
    font-size: 24px;
    color: var(--text-muted, #888);
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

.btn-close:hover[b-1xyg7zzeh0] {
    color: var(--text-color, #fff);
}

.modal-body[b-1xyg7zzeh0] {
    padding: 20px;
}

.modal-footer[b-1xyg7zzeh0] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 20px;
    border-top: 1px solid var(--border-color, #444);
}

.form-group[b-1xyg7zzeh0] {
    margin-bottom: 16px;
}

.form-group label[b-1xyg7zzeh0] {
    display: block;
    margin-bottom: 6px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-muted, #aaa);
}

.form-control[b-1xyg7zzeh0] {
    width: 100%;
    padding: 10px 12px;
    background: var(--input-bg, #1a1a1a);
    border: 1px solid var(--border-color, #444);
    border-radius: 6px;
    color: var(--text-color, #fff);
    font-size: 14px;
}

.form-control:focus[b-1xyg7zzeh0] {
    outline: none;
    border-color: var(--primary-color, #4a9eff);
}

textarea.form-control[b-1xyg7zzeh0] {
    resize: vertical;
    min-height: 80px;
}

.form-row[b-1xyg7zzeh0] {
    display: flex;
    gap: 16px;
}

.form-group.half[b-1xyg7zzeh0] {
    flex: 1;
}

.form-group.third[b-1xyg7zzeh0] {
    flex: 1;
    min-width: 0;
}

.checkbox-label[b-1xyg7zzeh0] {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.checkbox-label input[type="checkbox"][b-1xyg7zzeh0] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.btn[b-1xyg7zzeh0] {
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-primary[b-1xyg7zzeh0] {
    background: var(--primary-color, #4a9eff);
    color: white;
}

.btn-primary:hover[b-1xyg7zzeh0] {
    filter: brightness(1.1);
}

.btn-secondary[b-1xyg7zzeh0] {
    background: var(--surface-color, #333);
    color: var(--text-color, #fff);
    border: 1px solid var(--border-color, #555);
}

.btn-secondary:hover[b-1xyg7zzeh0] {
    background: var(--border-color, #444);
}
/* /Components/Pages/Campaign/Sessions/SessionDetail.razor.rz.scp.css */
.session-detail-page[b-1s4x08lc9u] {
    max-width: 900px;
    margin: 0 auto;
    padding: 2rem;
}

.page-header[b-1s4x08lc9u] {
    margin-bottom: 2rem;
}

.back-link[b-1s4x08lc9u] {
    color: var(--lb-text-secondary, var(--text-secondary, #ccc));
    text-decoration: none;
    font-size: 0.875rem;
    display: inline-block;
    margin-bottom: 0.5rem;
}

.back-link:hover[b-1s4x08lc9u] {
    color: var(--lb-accent-primary, var(--accent-color, #d4af37));
}

.page-header h1[b-1s4x08lc9u] {
    margin: 0 0 0.5rem 0;
    font-size: 1.75rem;
    display: inline-block;
    margin-right: 0.75rem;
    color: var(--lb-text-primary, var(--text-primary, #e0e0e0));
}

.session-status[b-1s4x08lc9u] {
    font-size: 0.8125rem;
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-weight: 500;
    vertical-align: middle;
}

/* Status colors using theme variables */
.status-planning[b-1s4x08lc9u] {
    background: rgba(212, 175, 55, 0.15);
    color: var(--lb-accent-primary, #d4af37);
}
.status-scheduled[b-1s4x08lc9u] {
    background: var(--lb-info, rgba(74, 158, 255, 0.2));
    color: var(--lb-info, #4a9eff);
}
.status-inprogress[b-1s4x08lc9u] {
    background: rgba(212, 175, 55, 0.25);
    color: var(--lb-accent-primary-light, #f4d03f);
}
.status-completed[b-1s4x08lc9u] {
    background: rgba(76, 175, 80, 0.2);
    color: var(--lb-success, #4caf50);
}
.status-cancelled[b-1s4x08lc9u] {
    background: var(--lb-bg-elevated-3, rgba(107, 114, 128, 0.2));
    color: var(--lb-text-muted, #888);
}

.btn-go-live[b-1s4x08lc9u] {
    margin-left: 1rem;
    padding: 0.5rem 1.25rem;
    background: linear-gradient(135deg, #4caf50, #45a049);
    color: white;
    border: none;
    border-radius: 6px;
    font-weight: 600;
    text-decoration: none;
    display: inline-block;
    vertical-align: middle;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(76, 175, 80, 0.3);
}

.btn-go-live:hover[b-1s4x08lc9u] {
    background: linear-gradient(135deg, #45a049, #3d8b40);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(76, 175, 80, 0.4);
}

/* Content */
.session-content[b-1s4x08lc9u] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.detail-card[b-1s4x08lc9u] {
    background: var(--lb-bg-elevated, var(--bg-card, #1a1a1a));
    border: 1px solid var(--lb-border-default, var(--border-color, #333));
    border-radius: 12px;
    overflow: hidden;
}

.card-header[b-1s4x08lc9u] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--lb-border-default, var(--border-color, #333));
    background: var(--lb-bg-elevated-1, var(--surface-color, #1e1e1e));
}

.card-header h2[b-1s4x08lc9u] {
    margin: 0;
    font-size: 1rem;
    color: var(--lb-text-primary, var(--text-primary, #e0e0e0));
}

.header-actions[b-1s4x08lc9u] {
    display: flex;
    gap: 0.5rem;
}

/* Form Content */
.form-content[b-1s4x08lc9u],
.view-content[b-1s4x08lc9u] {
    padding: 1.25rem;
}

.form-row[b-1s4x08lc9u] {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.form-group[b-1s4x08lc9u] {
    margin-bottom: 1rem;
}

.form-group.flex-1[b-1s4x08lc9u] {
    flex: 1;
    min-width: 200px;
}

.form-group:last-child[b-1s4x08lc9u] {
    margin-bottom: 0;
}

.form-group label[b-1s4x08lc9u] {
    display: block;
    font-weight: 500;
    margin-bottom: 0.375rem;
    font-size: 0.875rem;
    color: var(--lb-text-secondary, var(--text-secondary, #ccc));
}

.form-group input[b-1s4x08lc9u],
.form-group textarea[b-1s4x08lc9u],
.form-group select[b-1s4x08lc9u] {
    width: 100%;
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--lb-border-default, var(--border-color, #333));
    border-radius: 6px;
    background: var(--lb-bg-input, var(--surface-color, #222));
    color: var(--lb-text-primary, var(--text-primary, #e0e0e0));
    font-size: 0.9375rem;
}

.form-group input:focus[b-1s4x08lc9u],
.form-group textarea:focus[b-1s4x08lc9u],
.form-group select:focus[b-1s4x08lc9u] {
    outline: none;
    border-color: var(--lb-accent-primary, var(--accent-color, #d4af37));
}

.form-actions[b-1s4x08lc9u] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--lb-border-default, var(--border-color, #333));
}

.checkbox-label[b-1s4x08lc9u] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-weight: normal;
}

.checkbox-label input[b-1s4x08lc9u] {
    width: auto;
}

/* View Content */
.detail-row[b-1s4x08lc9u] {
    display: flex;
    gap: 1rem;
    margin-bottom: 0.75rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--lb-border-subtle, var(--border-color, #2a2a2a));
}

.detail-row:last-child[b-1s4x08lc9u] {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.detail-row.vertical[b-1s4x08lc9u] {
    flex-direction: column;
    gap: 0.375rem;
}

.detail-label[b-1s4x08lc9u] {
    font-size: 0.8125rem;
    color: var(--lb-text-muted, var(--text-secondary, #888));
    min-width: 120px;
}

.detail-value[b-1s4x08lc9u] {
    color: var(--lb-text-primary, var(--text-primary, #e0e0e0));
}

.detail-row.vertical .detail-value[b-1s4x08lc9u] {
    margin: 0;
    white-space: pre-wrap;
}

/* Empty Section */
.empty-section[b-1s4x08lc9u] {
    padding: 2rem;
    text-align: center;
    color: var(--lb-text-secondary, var(--text-secondary, #ccc));
}

.empty-section p[b-1s4x08lc9u] {
    margin: 0;
}

.empty-hint[b-1s4x08lc9u] {
    font-size: 0.8125rem;
    margin-top: 0.5rem !important;
    color: var(--lb-text-muted, var(--text-muted, #888));
}

/* Scenes List */
.scenes-list[b-1s4x08lc9u] {
    padding: 0.5rem;
}

.scene-item[b-1s4x08lc9u] {
    display: flex;
    gap: 0.75rem;
    padding: 0.75rem;
    border-radius: 8px;
    align-items: flex-start;
    cursor: pointer;
    transition: background 0.15s;
}

.scene-item:hover[b-1s4x08lc9u] {
    background: var(--lb-bg-hover, var(--surface-color, #333));
}

.scene-item.expanded[b-1s4x08lc9u] {
    background: var(--lb-bg-elevated-1, var(--surface-color, #1e1e1e));
    border: 1px solid var(--lb-border-default, var(--border-color, #333));
}

.scene-order[b-1s4x08lc9u] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--lb-accent-primary, var(--accent-color, #d4af37));
    color: var(--lb-text-inverse, #0f0f0f);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8125rem;
    font-weight: 600;
    flex-shrink: 0;
}

.scene-content[b-1s4x08lc9u] {
    flex: 1;
    min-width: 0;
}

.scene-header[b-1s4x08lc9u] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}

.scene-title[b-1s4x08lc9u] {
    font-weight: 500;
    color: var(--lb-text-primary, var(--text-primary, #e0e0e0));
}

.scene-type[b-1s4x08lc9u] {
    font-size: 0.6875rem;
    padding: 0.125rem 0.5rem;
    border-radius: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Scene types using theme-aware colors */
.scene-type.type-combat[b-1s4x08lc9u] {
    background: var(--lb-error-bg, rgba(255, 102, 102, 0.15));
    color: var(--lb-error, #ff6666);
}
.scene-type.type-social[b-1s4x08lc9u] {
    background: rgba(74, 158, 255, 0.15);
    color: var(--lb-info, #4a9eff);
}
.scene-type.type-exploration[b-1s4x08lc9u] {
    background: rgba(76, 175, 80, 0.15);
    color: var(--lb-success, #4caf50);
}
.scene-type.type-puzzle[b-1s4x08lc9u] {
    background: rgba(212, 175, 55, 0.15);
    color: var(--lb-accent-primary, #d4af37);
}
.scene-type.type-narrative[b-1s4x08lc9u] {
    background: rgba(212, 175, 55, 0.25);
    color: var(--lb-accent-primary-light, #f4d03f);
}
.scene-type.type-transition[b-1s4x08lc9u] {
    background: var(--lb-bg-elevated-3, rgba(107, 114, 128, 0.2));
    color: var(--lb-text-muted, #888);
}

.scene-description[b-1s4x08lc9u] {
    font-size: 0.875rem;
    color: var(--lb-text-secondary, var(--text-secondary, #ccc));
    margin: 0;
}

.scene-duration[b-1s4x08lc9u] {
    font-size: 0.6875rem;
    color: var(--lb-text-muted, #888);
    margin-left: auto;
}

/* Scene Details (expanded view) */
.scene-details[b-1s4x08lc9u] {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--lb-border-subtle, var(--border-color, #2a2a2a));
}

.scene-gm-notes[b-1s4x08lc9u] {
    background: rgba(212, 175, 55, 0.08);
    border-left: 3px solid var(--lb-accent-primary, #d4af37);
    padding: 0.75rem;
    border-radius: 0 6px 6px 0;
    margin-bottom: 0.75rem;
}

.gm-notes-label[b-1s4x08lc9u] {
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--lb-accent-primary, #d4af37);
    margin-bottom: 0.375rem;
    font-weight: 600;
}

.gm-notes-content[b-1s4x08lc9u] {
    font-size: 0.875rem;
    color: var(--lb-text-secondary, var(--text-secondary, #ccc));
    white-space: pre-wrap;
}

.scene-encounters[b-1s4x08lc9u] {
    margin-bottom: 0.5rem;
}

.encounters-count[b-1s4x08lc9u] {
    font-size: 0.8125rem;
    color: var(--lb-text-muted, #888);
}

.scene-status[b-1s4x08lc9u] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.status-badge[b-1s4x08lc9u] {
    font-size: 0.6875rem;
    padding: 0.125rem 0.5rem;
    border-radius: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.status-badge.status-planned[b-1s4x08lc9u] {
    background: rgba(212, 175, 55, 0.15);
    color: var(--lb-accent-primary, #d4af37);
}

.status-badge.status-inprogress[b-1s4x08lc9u] {
    background: rgba(212, 175, 55, 0.25);
    color: var(--lb-accent-primary-light, #f4d03f);
}

.status-badge.status-completed[b-1s4x08lc9u] {
    background: rgba(76, 175, 80, 0.15);
    color: var(--lb-success, #4caf50);
}

.scene-actions[b-1s4x08lc9u] {
    display: flex;
    gap: 0.25rem;
    opacity: 0;
    transition: opacity 0.15s;
}

.scene-item:hover .scene-actions[b-1s4x08lc9u],
.scene-item.expanded .scene-actions[b-1s4x08lc9u] {
    opacity: 1;
}

.btn-icon[b-1s4x08lc9u] {
    background: transparent;
    border: none;
    padding: 0.375rem;
    cursor: pointer;
    border-radius: 4px;
    font-size: 0.875rem;
    color: var(--lb-text-secondary, var(--text-secondary, #ccc));
}

.btn-icon:hover[b-1s4x08lc9u] {
    background: var(--lb-bg-hover, var(--border-color, #333));
}

.btn-icon.danger:hover[b-1s4x08lc9u] {
    background: var(--lb-error-bg, rgba(255, 102, 102, 0.15));
    color: var(--lb-error, #ff6666);
}

/* Notes List */
.notes-list[b-1s4x08lc9u] {
    padding: 0.5rem;
}

.note-item[b-1s4x08lc9u] {
    padding: 0.75rem;
    border-radius: 8px;
    margin-bottom: 0.5rem;
    background: var(--lb-bg-elevated-1, var(--surface-color, #1e1e1e));
}

.note-item:last-child[b-1s4x08lc9u] {
    margin-bottom: 0;
}

.note-item.gm-only[b-1s4x08lc9u] {
    border-left: 3px solid var(--lb-warning, var(--lb-accent-primary, #d4af37));
}

.note-content[b-1s4x08lc9u] {
    margin-bottom: 0.5rem;
    white-space: pre-wrap;
    color: var(--lb-text-primary, var(--text-primary, #e0e0e0));
}

.note-meta[b-1s4x08lc9u] {
    display: flex;
    gap: 0.75rem;
    font-size: 0.75rem;
    color: var(--lb-text-muted, var(--text-muted, #888));
}

.gm-badge[b-1s4x08lc9u] {
    color: var(--lb-warning, var(--lb-accent-primary, #d4af37));
    font-weight: 500;
}

/* Modal */
.modal-overlay[b-1s4x08lc9u] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
    backdrop-filter: blur(4px);
}

.modal-content[b-1s4x08lc9u] {
    background: var(--lb-bg-elevated, var(--bg-card, #1a1a1a));
    border: 1px solid var(--lb-border-default, var(--border-color, #333));
    border-radius: 12px;
    width: 100%;
    max-width: 560px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: var(--lb-shadow-lg, 0 8px 16px rgba(0, 0, 0, 0.5));
}

.modal-content.modal-sm[b-1s4x08lc9u] {
    max-width: 420px;
}

.text-muted[b-1s4x08lc9u] {
    color: var(--lb-text-muted, var(--text-muted, #888));
    font-size: 0.875rem;
}

.modal-header[b-1s4x08lc9u] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--lb-border-default, var(--border-color, #333));
    background: var(--lb-bg-elevated-1, var(--surface-color, #1e1e1e));
}

.modal-header h2[b-1s4x08lc9u] {
    margin: 0;
    font-size: 1.25rem;
    color: var(--lb-text-primary, var(--text-primary, #e0e0e0));
}

.modal-close[b-1s4x08lc9u] {
    background: transparent;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--lb-text-secondary, var(--text-secondary, #ccc));
    padding: 0;
    line-height: 1;
}

.modal-close:hover[b-1s4x08lc9u] {
    color: var(--lb-text-primary, var(--text-primary, #e0e0e0));
}

.modal-body[b-1s4x08lc9u] {
    padding: 1.5rem;
}

.modal-body .form-group[b-1s4x08lc9u] {
    margin-bottom: 1.25rem;
}

.form-divider[b-1s4x08lc9u] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 1.5rem 0;
    color: var(--lb-text-muted, var(--text-muted, #888));
    font-size: 0.8125rem;
}

.form-divider[b-1s4x08lc9u]::before,
.form-divider[b-1s4x08lc9u]::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--lb-border-default, var(--border-color, #444));
}

.selected-entity-preview[b-1s4x08lc9u] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: var(--lb-bg-elevated-2, var(--surface-color, #2a2a2a));
    border: 1px solid var(--lb-accent-primary, var(--accent-color, #d4af37));
    border-radius: 8px;
    margin-top: 1rem;
}

.selected-entity-preview img[b-1s4x08lc9u] {
    width: 48px;
    height: 48px;
    border-radius: 6px;
    object-fit: cover;
}

.selected-entity-preview span[b-1s4x08lc9u] {
    font-size: 0.8125rem;
    color: var(--lb-text-muted, var(--text-muted, #888));
}

.modal-footer[b-1s4x08lc9u] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1.25rem 1.5rem;
    border-top: 1px solid var(--lb-border-default, var(--border-color, #333));
    background: var(--lb-bg-elevated-1, var(--surface-color, #1e1e1e));
}

/* Buttons */
.btn[b-1s4x08lc9u] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    padding: 0.625rem 1.25rem;
    border-radius: 6px;
    font-weight: 500;
    cursor: pointer;
    border: none;
    transition: all 0.15s;
    text-decoration: none;
    font-size: 0.9375rem;
}

.btn:disabled[b-1s4x08lc9u] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-primary[b-1s4x08lc9u] {
    background: var(--lb-accent-primary, var(--accent-color, #d4af37));
    color: var(--lb-text-inverse, #0f0f0f);
}

.btn-primary:hover:not(:disabled)[b-1s4x08lc9u] {
    background: var(--lb-accent-primary-light, var(--primary-hover, #f4d03f));
}

.btn-secondary[b-1s4x08lc9u] {
    background: var(--lb-bg-elevated-3, var(--surface-color, #2a2a2a));
    color: var(--lb-text-secondary, var(--text-primary, #ccc));
    border: 1px solid var(--lb-border-default, var(--border-color, #333));
}

.btn-secondary:hover:not(:disabled)[b-1s4x08lc9u] {
    background: var(--lb-bg-hover, var(--border-color, #333));
}

.btn-danger[b-1s4x08lc9u] {
    background: var(--lb-error, #ff6666);
    color: var(--lb-text-inverse, #0f0f0f);
}

.btn-danger:hover:not(:disabled)[b-1s4x08lc9u] {
    filter: brightness(0.9);
}

.btn-sm[b-1s4x08lc9u] {
    padding: 0.375rem 0.75rem;
    font-size: 0.8125rem;
}

/* Loading & Error */
.loading-page[b-1s4x08lc9u],
.error-page[b-1s4x08lc9u] {
    text-align: center;
    padding: 4rem 2rem;
}

.loading-spinner[b-1s4x08lc9u] {
    width: 40px;
    height: 40px;
    border: 3px solid var(--lb-border-default, var(--border-color, #333));
    border-top-color: var(--lb-accent-primary, var(--accent-color, #d4af37));
    border-radius: 50%;
    animation: spin-b-1s4x08lc9u 0.8s linear infinite;
    margin: 0 auto 1rem;
}

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

.error-page h1[b-1s4x08lc9u] {
    margin-bottom: 0.5rem;
    color: var(--lb-text-primary, var(--text-primary, #e0e0e0));
}

.error-page p[b-1s4x08lc9u] {
    color: var(--lb-text-secondary, var(--text-secondary, #ccc));
    margin-bottom: 1.5rem;
}

/* Responsive */
@media (max-width: 640px) {
    .session-detail-page[b-1s4x08lc9u] {
        padding: 1rem;
    }

    .page-header h1[b-1s4x08lc9u] {
        font-size: 1.5rem;
    }

    .form-row[b-1s4x08lc9u] {
        flex-direction: column;
    }

    .scene-actions[b-1s4x08lc9u] {
        opacity: 1;
    }
}

/* ============================================
   Encounter Management Styles
   ============================================ */

.scene-encounters-section[b-1s4x08lc9u] {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--lb-border-default, #333);
}

.encounters-header[b-1s4x08lc9u] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.encounters-label[b-1s4x08lc9u] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--lb-text-secondary, #aaa);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.encounters-list[b-1s4x08lc9u] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.encounter-item[b-1s4x08lc9u] {
    background: var(--lb-bg-elevated-2, rgba(255, 255, 255, 0.03));
    border: 1px solid var(--lb-border-subtle, #2a2a2a);
    border-radius: 8px;
    overflow: hidden;
}

.encounter-item.expanded[b-1s4x08lc9u] {
    border-color: var(--lb-accent-primary, #d4af37);
}

.encounter-header[b-1s4x08lc9u] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    cursor: pointer;
    transition: background 0.2s;
}

.encounter-header:hover[b-1s4x08lc9u] {
    background: var(--lb-bg-hover, rgba(255, 255, 255, 0.05));
}

.encounter-name[b-1s4x08lc9u] {
    font-weight: 500;
    flex: 1;
    color: var(--lb-text-primary, #e0e0e0);
}

.encounter-type[b-1s4x08lc9u] {
    font-size: 0.75rem;
    padding: 0.2rem 0.5rem;
    background: var(--lb-bg-elevated-3, rgba(255, 255, 255, 0.1));
    border-radius: 4px;
    color: var(--lb-text-secondary, #aaa);
}

.encounter-status[b-1s4x08lc9u] {
    font-size: 0.7rem;
    padding: 0.15rem 0.4rem;
    border-radius: 3px;
    text-transform: uppercase;
    font-weight: 600;
}

.encounter-status.status-planned[b-1s4x08lc9u] {
    background: rgba(212, 175, 55, 0.15);
    color: var(--lb-accent-primary, #d4af37);
}

.encounter-status.status-inprogress[b-1s4x08lc9u] {
    background: rgba(76, 175, 80, 0.2);
    color: var(--lb-success, #4caf50);
}

.encounter-status.status-completed[b-1s4x08lc9u] {
    background: rgba(74, 158, 255, 0.2);
    color: var(--lb-info, #4a9eff);
}

.encounter-actions[b-1s4x08lc9u] {
    display: flex;
    gap: 0.25rem;
    opacity: 0;
    transition: opacity 0.2s;
}

.encounter-header:hover .encounter-actions[b-1s4x08lc9u] {
    opacity: 1;
}

.btn-icon-sm[b-1s4x08lc9u] {
    padding: 0.25rem 0.4rem;
    background: transparent;
    border: none;
    color: var(--lb-text-secondary, #aaa);
    cursor: pointer;
    font-size: 0.8rem;
    border-radius: 4px;
    transition: all 0.2s;
}

.btn-icon-sm:hover[b-1s4x08lc9u] {
    background: var(--lb-bg-elevated-3, rgba(255, 255, 255, 0.1));
    color: var(--lb-text-primary, #fff);
}

.btn-icon-sm.danger:hover[b-1s4x08lc9u] {
    background: rgba(244, 67, 54, 0.2);
    color: var(--lb-error, #f44336);
}

.encounter-details[b-1s4x08lc9u] {
    padding: 0.75rem 1rem 1rem;
    border-top: 1px solid var(--lb-border-subtle, #2a2a2a);
    background: var(--lb-bg-elevated, rgba(0, 0, 0, 0.2));
}

.encounter-description[b-1s4x08lc9u] {
    font-size: 0.875rem;
    color: var(--lb-text-secondary, #bbb);
    margin: 0 0 1rem 0;
    line-height: 1.5;
}

.empty-encounters[b-1s4x08lc9u] {
    font-size: 0.875rem;
    color: var(--lb-text-muted, #666);
    font-style: italic;
    margin: 0;
}

/* ============================================
   Combatant Management Styles
   ============================================ */

.combatants-section[b-1s4x08lc9u] {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px dashed var(--lb-border-subtle, #333);
}

.combatants-header[b-1s4x08lc9u] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.combatants-label[b-1s4x08lc9u] {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--lb-text-secondary, #aaa);
}

.combatants-list[b-1s4x08lc9u] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.combatant-item[b-1s4x08lc9u] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    background: var(--lb-bg-elevated-2, rgba(255, 255, 255, 0.02));
    border-radius: 6px;
    border-left: 3px solid var(--lb-text-muted, #666);
    font-size: 0.875rem;
}

.combatant-item.side-party[b-1s4x08lc9u] {
    border-left-color: var(--lb-success, #4caf50);
}

.combatant-item.side-enemy[b-1s4x08lc9u] {
    border-left-color: var(--lb-error, #f44336);
}

.combatant-item.side-neutral[b-1s4x08lc9u] {
    border-left-color: var(--lb-warning, #ff9800);
}

.combatant-name[b-1s4x08lc9u] {
    flex: 1;
    font-weight: 500;
    color: var(--lb-text-primary, #e0e0e0);
}

.combatant-hp[b-1s4x08lc9u] {
    font-family: monospace;
    font-size: 0.8rem;
    padding: 0.15rem 0.4rem;
    background: var(--lb-bg-elevated-3, rgba(255, 255, 255, 0.08));
    border-radius: 3px;
    color: var(--lb-text-secondary, #aaa);
}

.combatant-init[b-1s4x08lc9u] {
    font-family: monospace;
    font-size: 0.75rem;
    color: var(--lb-text-muted, #888);
}

.combatant-side[b-1s4x08lc9u] {
    font-size: 0.7rem;
    text-transform: uppercase;
    padding: 0.1rem 0.35rem;
    border-radius: 3px;
    background: var(--lb-bg-elevated-3, rgba(255, 255, 255, 0.05));
    color: var(--lb-text-muted, #888);
}

.combatant-actions[b-1s4x08lc9u] {
    display: flex;
    gap: 0.2rem;
    opacity: 0;
    transition: opacity 0.2s;
}

.combatant-item:hover .combatant-actions[b-1s4x08lc9u] {
    opacity: 1;
}

.btn-icon-xs[b-1s4x08lc9u] {
    padding: 0.15rem 0.3rem;
    background: transparent;
    border: none;
    color: var(--lb-text-secondary, #aaa);
    cursor: pointer;
    font-size: 0.7rem;
    border-radius: 3px;
    transition: all 0.2s;
}

.btn-icon-xs:hover[b-1s4x08lc9u] {
    background: var(--lb-bg-elevated-3, rgba(255, 255, 255, 0.1));
    color: var(--lb-text-primary, #fff);
}

.btn-icon-xs.danger:hover[b-1s4x08lc9u] {
    background: rgba(244, 67, 54, 0.2);
    color: var(--lb-error, #f44336);
}

.empty-combatants[b-1s4x08lc9u] {
    font-size: 0.8rem;
    color: var(--lb-text-muted, #666);
    font-style: italic;
    margin: 0;
}

/* Button sizes */
.btn-xs[b-1s4x08lc9u] {
    padding: 0.25rem 0.6rem;
    font-size: 0.75rem;
    border-radius: 4px;
}

.btn-success[b-1s4x08lc9u] {
    background: var(--lb-success, #4caf50);
    color: white;
    border: none;
}

.btn-success:hover[b-1s4x08lc9u] {
    filter: brightness(1.1);
}

.combatants-actions[b-1s4x08lc9u] {
    display: flex;
    gap: 0.5rem;
}

/* Hidden combatant styling */
.hidden-combatant[b-1s4x08lc9u] {
    opacity: 0.6;
    border-style: dashed;
}

.hidden-badge[b-1s4x08lc9u] {
    font-size: 0.75rem;
    opacity: 0.7;
}

.checkbox-label[b-1s4x08lc9u] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

.checkbox-label input[type="checkbox"][b-1s4x08lc9u] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

/* Entity linking styles */
.form-hint[b-1s4x08lc9u] {
    font-size: 0.8125rem;
    color: var(--lb-text-secondary, #888);
    margin: 0 0 0.75rem 0;
}

.linked-entities-list[b-1s4x08lc9u] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.linked-entity-tag[b-1s4x08lc9u] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    background: var(--lb-surface-secondary, rgba(212, 175, 55, 0.15));
    border: 1px solid var(--lb-accent-primary, #d4af37);
    border-radius: 4px;
    font-size: 0.8125rem;
    color: var(--lb-accent-primary, #d4af37);
}

.btn-remove-entity[b-1s4x08lc9u] {
    background: none;
    border: none;
    color: var(--lb-danger, #f44336);
    cursor: pointer;
    padding: 0;
    font-size: 1rem;
    line-height: 1;
    opacity: 0.7;
}

.btn-remove-entity:hover[b-1s4x08lc9u] {
    opacity: 1;
}

.note-linked-entities[b-1s4x08lc9u] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.note-entity-link[b-1s4x08lc9u] {
    font-size: 0.75rem;
    padding: 0.125rem 0.5rem;
    background: var(--lb-surface-secondary, rgba(74, 158, 255, 0.1));
    border-radius: 12px;
    color: var(--lb-accent-secondary, #4a9eff);
    text-decoration: none;
    transition: all 0.15s;
}

.note-entity-link:hover[b-1s4x08lc9u] {
    background: var(--lb-accent-secondary, #4a9eff);
    color: white;
}

.modal-content.modal-wide[b-1s4x08lc9u] {
    max-width: 560px;
}
/* /Components/Pages/Campaign/Sessions/SessionList.razor.rz.scp.css */
.sessions-page[b-6rrsra0e20] {
    max-width: 900px;
    margin: 0 auto;
    padding: 2rem;
}

.page-header[b-6rrsra0e20] {
    margin-bottom: 2rem;
}

.back-link[b-6rrsra0e20] {
    color: var(--lb-text-muted, var(--text-secondary, #888));
    text-decoration: none;
    font-size: 0.875rem;
    display: inline-block;
    margin-bottom: 0.5rem;
}

.back-link:hover[b-6rrsra0e20] {
    color: var(--lb-accent-primary, var(--accent-color, #d4af37));
}

.header-content[b-6rrsra0e20] {
    margin-bottom: 1rem;
}

.header-content h1[b-6rrsra0e20] {
    margin: 0 0 0.25rem 0;
    font-size: 1.75rem;
    color: var(--lb-text-primary, var(--text-primary, #e0e0e0));
}

.header-subtitle[b-6rrsra0e20] {
    color: var(--lb-text-muted, var(--text-secondary, #888));
    margin: 0;
}

.header-actions[b-6rrsra0e20] {
    margin-top: 1rem;
}

/* Stats Bar */
.stats-bar[b-6rrsra0e20] {
    display: flex;
    gap: 1rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

.stat[b-6rrsra0e20] {
    background: var(--lb-bg-elevated, var(--card-bg, #1a1a1a));
    border: 1px solid var(--lb-border-default, var(--border-color, #333));
    border-radius: 8px;
    padding: 1rem 1.25rem;
    text-align: center;
    flex: 1;
    min-width: 100px;
}

.stat-value[b-6rrsra0e20] {
    display: block;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--lb-accent-primary, var(--accent-color, #d4af37));
}

.stat-label[b-6rrsra0e20] {
    font-size: 0.75rem;
    color: var(--lb-text-muted, var(--text-secondary, #888));
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Empty State */
.empty-state[b-6rrsra0e20] {
    text-align: center;
    padding: 4rem 2rem;
    background: var(--lb-bg-elevated, var(--card-bg, #1a1a1a));
    border-radius: 12px;
    border: 1px solid var(--lb-border-default, var(--border-color, #333));
}

.empty-icon[b-6rrsra0e20] {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.empty-state h2[b-6rrsra0e20] {
    margin: 0 0 0.5rem 0;
    color: var(--lb-text-primary, var(--text-primary, #e0e0e0));
}

.empty-state p[b-6rrsra0e20] {
    color: var(--lb-text-muted, var(--text-secondary, #888));
    margin-bottom: 1.5rem;
}

/* Sessions List */
.sessions-list[b-6rrsra0e20] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.session-card[b-6rrsra0e20] {
    display: flex;
    gap: 1rem;
    background: var(--lb-bg-elevated, var(--card-bg, #1a1a1a));
    border: 1px solid var(--lb-border-default, var(--border-color, #333));
    border-radius: 12px;
    padding: 1.25rem;
    cursor: pointer;
    transition: all 0.15s;
    align-items: center;
}

.session-card:hover[b-6rrsra0e20] {
    border-color: var(--lb-accent-primary, var(--accent-color, #d4af37));
    transform: translateX(4px);
}

.session-number[b-6rrsra0e20] {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--lb-accent-primary, var(--accent-color, #d4af37));
    color: var(--lb-text-inverse, #0f0f0f);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 1.125rem;
    flex-shrink: 0;
}

.session-info[b-6rrsra0e20] {
    flex: 1;
    min-width: 0;
}

.session-header[b-6rrsra0e20] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.session-header h3[b-6rrsra0e20] {
    margin: 0;
    font-size: 1.0625rem;
    color: var(--lb-text-primary, var(--text-primary, #e0e0e0));
}

.session-status[b-6rrsra0e20] {
    font-size: 0.75rem;
    padding: 0.25rem 0.625rem;
    border-radius: 12px;
    font-weight: 500;
    white-space: nowrap;
}

.session-status.status-planning[b-6rrsra0e20] {
    background: rgba(212, 175, 55, 0.15);
    color: var(--lb-accent-primary, #d4af37);
}

.session-status.status-scheduled[b-6rrsra0e20] {
    background: rgba(59, 130, 246, 0.2);
    color: #60a5fa;
}

.session-status.status-inprogress[b-6rrsra0e20] {
    background: rgba(212, 175, 55, 0.25);
    color: var(--lb-accent-primary-light, #f4d03f);
}

.session-status.status-completed[b-6rrsra0e20] {
    background: rgba(76, 175, 80, 0.15);
    color: var(--lb-success, #4caf50);
}

.session-status.status-cancelled[b-6rrsra0e20] {
    background: var(--lb-bg-elevated-3, rgba(107, 114, 128, 0.2));
    color: var(--lb-text-muted, #888);
}

.session-summary[b-6rrsra0e20] {
    color: var(--lb-text-secondary, var(--text-secondary, #ccc));
    font-size: 0.875rem;
    margin: 0 0 0.75rem 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.session-meta[b-6rrsra0e20] {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.meta-item[b-6rrsra0e20] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.8125rem;
    color: var(--lb-text-muted, var(--text-secondary, #888));
}

.meta-icon[b-6rrsra0e20] {
    font-size: 0.875rem;
}

.session-arrow[b-6rrsra0e20] {
    color: var(--lb-text-subtle, var(--text-muted, #666));
    font-size: 1.25rem;
    flex-shrink: 0;
}

/* Buttons */
.btn[b-6rrsra0e20] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    padding: 0.625rem 1.25rem;
    border-radius: 6px;
    font-weight: 500;
    cursor: pointer;
    border: none;
    transition: all 0.15s;
    text-decoration: none;
    font-size: 0.9375rem;
}

.btn-primary[b-6rrsra0e20] {
    background: var(--lb-accent-primary, var(--accent-color, #d4af37));
    color: var(--lb-text-inverse, #0f0f0f);
}

.btn-primary:hover[b-6rrsra0e20] {
    background: var(--lb-accent-primary-light, var(--primary-hover, #f4d03f));
    transform: translateY(-1px);
}

/* Loading & Error */
.loading-page[b-6rrsra0e20],
.error-page[b-6rrsra0e20] {
    text-align: center;
    padding: 4rem 2rem;
}

.loading-spinner[b-6rrsra0e20] {
    width: 40px;
    height: 40px;
    border: 3px solid var(--lb-border-default, var(--border-color, #333));
    border-top-color: var(--lb-accent-primary, var(--accent-color, #d4af37));
    border-radius: 50%;
    animation: spin-b-6rrsra0e20 0.8s linear infinite;
    margin: 0 auto 1rem;
}

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

.error-page h1[b-6rrsra0e20] {
    margin-bottom: 0.5rem;
    color: var(--lb-text-primary, var(--text-primary, #e0e0e0));
}

.error-page p[b-6rrsra0e20] {
    color: var(--lb-text-muted, var(--text-secondary, #888));
    margin-bottom: 1.5rem;
}

/* Responsive */
@media (max-width: 640px) {
    .sessions-page[b-6rrsra0e20] {
        padding: 1rem;
    }

    .stats-bar[b-6rrsra0e20] {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .session-card[b-6rrsra0e20] {
        flex-direction: column;
        align-items: flex-start;
    }

    .session-number[b-6rrsra0e20] {
        width: 36px;
        height: 36px;
        font-size: 0.9375rem;
    }

    .session-arrow[b-6rrsra0e20] {
        display: none;
    }

    .session-header[b-6rrsra0e20] {
        flex-wrap: wrap;
    }
}
/* /Components/Pages/Contact.razor.rz.scp.css */
.support-page[b-rcvyswfo0u] {
    width: 100%;
    padding: 0;
}

.support-header[b-rcvyswfo0u] {
    text-align: center;
    margin-bottom: 2rem;
}

    .support-header h1[b-rcvyswfo0u] {
        font-size: 2.5rem;
        font-family: Georgia, serif;
        color: var(--lb-accent-primary, #d4af37);
        margin-bottom: 0.5rem;
    }

.support-subtitle[b-rcvyswfo0u] {
    color: var(--lb-text-secondary, #a0a0a0);
    font-size: 1.1rem;
}

.support-grid[b-rcvyswfo0u] {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 2rem;
}

@media (max-width: 768px) {
    .support-grid[b-rcvyswfo0u] {
        grid-template-columns: 1fr;
    }
}

/* Quick Links */
.quick-links[b-rcvyswfo0u] {
    background: var(--lb-bg-elevated, #141414);
    border: 1px solid var(--lb-border-default, #333);
    border-radius: 12px;
    padding: 1.5rem;
    height: fit-content;
}

    .quick-links h2[b-rcvyswfo0u] {
        font-size: 1.25rem;
        color: var(--lb-text-primary, #e8e8e8);
        margin-bottom: 1rem;
        padding-bottom: 0.75rem;
        border-bottom: 1px solid var(--lb-border-default, #333);
    }

.quick-link[b-rcvyswfo0u] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.875rem;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.2s;
    margin-bottom: 0.5rem;
}

    .quick-link:hover[b-rcvyswfo0u] {
        background: var(--lb-bg-hover, #252525);
    }

.link-icon[b-rcvyswfo0u] {
    font-size: 1.5rem;
}

.link-content[b-rcvyswfo0u] {
    display: flex;
    flex-direction: column;
}

    .link-content strong[b-rcvyswfo0u] {
        color: var(--lb-text-primary, #e8e8e8);
        font-size: 0.95rem;
    }

    .link-content span[b-rcvyswfo0u] {
        color: var(--lb-text-muted, #666);
        font-size: 0.8rem;
    }

/* Contact Form */
.contact-form-card[b-rcvyswfo0u] {
    background: var(--lb-bg-elevated, #141414);
    border: 1px solid var(--lb-border-default, #333);
    border-radius: 12px;
    padding: 2rem;
}

    .contact-form-card h2[b-rcvyswfo0u] {
        font-size: 1.5rem;
        color: var(--lb-text-primary, #e8e8e8);
        margin-bottom: 1.5rem;
    }

.form-info[b-rcvyswfo0u] {
    background: var(--lb-bg-elevated-2, #1a1a1a);
    border: 1px solid var(--lb-border-default, #333);
    border-radius: 6px;
    padding: 0.75rem 1rem;
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
    color: var(--lb-text-secondary, #a0a0a0);
}

    .form-info strong[b-rcvyswfo0u] {
        color: var(--lb-accent-primary, #d4af37);
    }

.form-group[b-rcvyswfo0u] {
    margin-bottom: 1.5rem;
}

    .form-group label[b-rcvyswfo0u] {
        display: block;
        margin-bottom: 0.5rem;
        color: var(--lb-text-primary, #e8e8e8);
        font-weight: 500;
    }

.form-input[b-rcvyswfo0u], .form-select[b-rcvyswfo0u], .form-textarea[b-rcvyswfo0u] {
    width: 100%;
    padding: 0.75rem 1rem;
    background: var(--lb-bg-elevated-2, #1a1a1a);
    border: 1px solid var(--lb-border-default, #333);
    border-radius: 6px;
    color: var(--lb-text-primary, #e8e8e8);
    font-size: 1rem;
    font-family: inherit;
    transition: all 0.2s;
}

    .form-input:focus[b-rcvyswfo0u], .form-select:focus[b-rcvyswfo0u], .form-textarea:focus[b-rcvyswfo0u] {
        outline: none;
        border-color: var(--lb-accent-primary, #d4af37);
        box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.1);
    }

.form-textarea[b-rcvyswfo0u] {
    resize: vertical;
    min-height: 120px;
}

.form-actions[b-rcvyswfo0u] {
    display: flex;
    justify-content: flex-end;
}

.btn-submit[b-rcvyswfo0u] {
    padding: 0.875rem 2rem;
    background: var(--lb-accent-primary, #d4af37);
    color: #0f0f0f;
    border: none;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

    .btn-submit:hover:not(:disabled)[b-rcvyswfo0u] {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(212, 175, 55, 0.3);
    }

    .btn-submit:disabled[b-rcvyswfo0u] {
        opacity: 0.6;
        cursor: not-allowed;
    }

/* Success State */
.success-card[b-rcvyswfo0u] {
    background: var(--lb-bg-elevated, #141414);
    border: 1px solid var(--lb-border-default, #333);
    border-radius: 12px;
    padding: 3rem;
    text-align: center;
    max-width: 500px;
    margin: 0 auto;
}

.success-icon[b-rcvyswfo0u] {
    width: 60px;
    height: 60px;
    background: var(--lb-accent-primary, #d4af37);
    color: #0f0f0f;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    margin: 0 auto 1.5rem;
}

.success-card h2[b-rcvyswfo0u] {
    color: var(--lb-text-primary, #e8e8e8);
    margin-bottom: 0.75rem;
}

.success-card p[b-rcvyswfo0u] {
    color: var(--lb-text-secondary, #a0a0a0);
    margin-bottom: 1.5rem;
}

.success-actions[b-rcvyswfo0u] {
    display: flex;
    gap: 1rem;
    justify-content: center;
}

.btn-primary[b-rcvyswfo0u] {
    padding: 0.75rem 1.5rem;
    background: var(--lb-accent-primary, #d4af37);
    color: #0f0f0f;
    border: none;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s;
}

.btn-secondary[b-rcvyswfo0u] {
    padding: 0.75rem 1.5rem;
    background: transparent;
    color: var(--lb-text-secondary, #a0a0a0);
    border: 1px solid var(--lb-border-default, #333);
    border-radius: 6px;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.2s;
}

    .btn-secondary:hover[b-rcvyswfo0u] {
        background: var(--lb-bg-hover, #252525);
        color: var(--lb-text-primary, #e8e8e8);
    }

/* Validation */
.validation-message[b-rcvyswfo0u] {
    color: #ef4444;
    font-size: 0.85rem;
    margin-top: 0.25rem;
}
/* /Components/Pages/Create.razor.rz.scp.css */
/* Create Page Styling - Gold/Dark Theme */

.create-page[b-hbxhhfcrt3] {
    width: 100%;
    padding: 0;
}

/* Universe Context Banner */
.universe-context-banner[b-hbxhhfcrt3] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.15) 0%, rgba(212, 175, 55, 0.05) 100%);
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: 8px;
    margin-bottom: 1.5rem;
}

.universe-context-banner .banner-icon[b-hbxhhfcrt3] {
    font-size: 1.5rem;
}

.universe-context-banner .banner-text[b-hbxhhfcrt3] {
    flex: 1;
    color: #ccc;
    font-size: 0.95rem;
}

.universe-context-banner .banner-text strong[b-hbxhhfcrt3] {
    color: #d4af37;
}

.universe-context-banner .btn-outline-secondary[b-hbxhhfcrt3] {
    padding: 0.25rem 0.5rem;
    font-size: 0.8rem;
    border-color: #666;
    color: #999;
}

.universe-context-banner .btn-outline-secondary:hover[b-hbxhhfcrt3] {
    border-color: #999;
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
}

.create-header[b-hbxhhfcrt3] {
    text-align: center;
    margin-bottom: 3rem;
}

    .create-header h1[b-hbxhhfcrt3] {
        color: #d4af37;
        font-size: 2.5rem;
        margin-bottom: 0.5rem;
        font-weight: 700;
    }

.subtitle[b-hbxhhfcrt3] {
    color: #999;
    font-size: 1.1rem;
}

/* Loading State */
.loading-spinner[b-hbxhhfcrt3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 0;
}

.spinner[b-hbxhhfcrt3] {
    width: 50px;
    height: 50px;
    border: 4px solid rgba(212, 175, 55, 0.2);
    border-top-color: #d4af37;
    border-radius: 50%;
    animation: spin-b-hbxhhfcrt3 1s linear infinite;
}

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

/* Error Message */
.error-message[b-hbxhhfcrt3] {
    background: rgba(220, 53, 69, 0.1);
    border: 1px solid rgba(220, 53, 69, 0.3);
    border-radius: 8px;
    padding: 1rem;
    margin: 1rem 0;
    color: #ff6b6b;
}

/* Pillar Grid */
.pillar-grid[b-hbxhhfcrt3] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}

.pillar-card[b-hbxhhfcrt3] {
    background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%);
    border: 2px solid #333;
    border-radius: 12px;
    padding: 1.5rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-height: 150px;
}

    .pillar-card:hover[b-hbxhhfcrt3] {
        border-color: #d4af37;
        background: linear-gradient(135deg, #2f2f2f 0%, #1f1f1f 100%);
        transform: translateY(-4px);
        box-shadow: 0 8px 16px rgba(212, 175, 55, 0.2);
    }

.pillar-icon[b-hbxhhfcrt3] {
    font-size: 3rem;
    margin-bottom: 0.5rem;
}

.pillar-name[b-hbxhhfcrt3] {
    font-size: 1.25rem;
    font-weight: 600;
    color: #d4af37;
}

.pillar-description[b-hbxhhfcrt3] {
    font-size: 0.875rem;
    color: #999;
    line-height: 1.4;
}

/* Creation Form */
.creation-form[b-hbxhhfcrt3] {
    max-width: 600px;
    margin: 0 auto;
    background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%);
    border: 2px solid #333;
    border-radius: 12px;
    padding: 2rem;
}

.form-header[b-hbxhhfcrt3] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 2px solid #333;
}

.back-button[b-hbxhhfcrt3] {
    background: transparent;
    border: 1px solid #666;
    color: #999;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.9rem;
    align-self: flex-start;
}

    .back-button:hover[b-hbxhhfcrt3] {
        border-color: #d4af37;
        color: #d4af37;
        background: rgba(212, 175, 55, 0.05);
    }

.form-header h2[b-hbxhhfcrt3] {
    color: #d4af37;
    font-size: 1.75rem;
    margin: 0;
}

/* Form Groups */
.form-group[b-hbxhhfcrt3] {
    margin-bottom: 1.5rem;
}

    .form-group label[b-hbxhhfcrt3] {
        display: block;
        color: #d4af37;
        font-weight: 600;
        margin-bottom: 0.5rem;
        font-size: 1rem;
    }

.required[b-hbxhhfcrt3] {
    color: #ff6b6b;
}

.form-control[b-hbxhhfcrt3] {
    width: 100%;
    padding: 0.75rem;
    background: #1a1a1a;
    border: 2px solid #333;
    border-radius: 6px;
    color: #fff;
    font-size: 1rem;
    transition: all 0.2s ease;
}

    .form-control:focus[b-hbxhhfcrt3] {
        outline: none;
        border-color: #d4af37;
        background: #222;
        box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.1);
    }

    .form-control[b-hbxhhfcrt3]::placeholder {
        color: #666;
    }

textarea.form-control[b-hbxhhfcrt3] {
    resize: vertical;
    font-family: inherit;
}

select.form-control[b-hbxhhfcrt3] {
    cursor: pointer;
}

.form-text[b-hbxhhfcrt3] {
    display: block;
    margin-top: 0.5rem;
    font-size: 0.875rem;
    color: #999;
}

/* Checkbox */
.checkbox-label[b-hbxhhfcrt3] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    color: #fff;
    font-weight: normal;
}

    .checkbox-label input[type="checkbox"][b-hbxhhfcrt3] {
        width: 1.25rem;
        height: 1.25rem;
        cursor: pointer;
        accent-color: #d4af37;
    }

/* Form Actions */
.form-actions[b-hbxhhfcrt3] {
    display: flex;
    gap: 1rem;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 2px solid #333;
}

.btn[b-hbxhhfcrt3] {
    padding: 0.75rem 2rem;
    border: none;
    border-radius: 6px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
}

.btn-primary[b-hbxhhfcrt3] {
    background: linear-gradient(135deg, #d4af37 0%, #c9a332 100%);
    color: #1a1a1a;
    flex: 1;
}

    .btn-primary:hover:not(:disabled)[b-hbxhhfcrt3] {
        background: linear-gradient(135deg, #e0bb47 0%, #d4af37 100%);
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(212, 175, 55, 0.4);
    }

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

.btn-lg[b-hbxhhfcrt3] {
    padding: 1rem 2rem;
    font-size: 1.1rem;
}

.btn-secondary[b-hbxhhfcrt3] {
    background: transparent;
    border: 2px solid #666;
    color: #999;
}

    .btn-secondary:hover:not(:disabled)[b-hbxhhfcrt3] {
        border-color: #d4af37;
        color: #d4af37;
        background: rgba(212, 175, 55, 0.05);
    }

/* ============================================
   TABLET BREAKPOINT (1024px)
   ============================================ */
@media (max-width: 1024px) {
    .pillar-grid[b-hbxhhfcrt3] {
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    }

    .media-type-grid[b-hbxhhfcrt3] {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ============================================
   MOBILE BREAKPOINT (768px)
   ============================================ */
@media (max-width: 768px) {
    .create-page[b-hbxhhfcrt3] {
        padding: 0;
    }

    .create-header[b-hbxhhfcrt3] {
        margin-bottom: 2rem;
    }

    .create-header h1[b-hbxhhfcrt3] {
        font-size: 1.75rem;
    }

    .subtitle[b-hbxhhfcrt3] {
        font-size: 1rem;
    }

    /* Pillar Grid - 2 columns on mobile */
    .pillar-grid[b-hbxhhfcrt3] {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.875rem;
        margin-top: 1.5rem;
    }

    .pillar-card[b-hbxhhfcrt3] {
        padding: 1rem;
        min-height: 120px;
    }

    .pillar-icon[b-hbxhhfcrt3] {
        font-size: 2rem;
        margin-bottom: 0.25rem;
    }

    .pillar-name[b-hbxhhfcrt3] {
        font-size: 1rem;
    }

    .pillar-description[b-hbxhhfcrt3] {
        font-size: 0.8rem;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* Section Headers */
    .section-title[b-hbxhhfcrt3] {
        font-size: 1.5rem;
    }

    .section-subtitle[b-hbxhhfcrt3] {
        font-size: 0.95rem;
    }

    /* Universe Create Card */
    .universe-create-card[b-hbxhhfcrt3] {
        padding: 1.25rem;
        gap: 1rem;
        flex-direction: column;
        text-align: center;
    }

    .universe-icon[b-hbxhhfcrt3] {
        font-size: 3rem;
    }

    .universe-content[b-hbxhhfcrt3] {
        text-align: center;
    }

    .universe-name[b-hbxhhfcrt3] {
        font-size: 1.25rem;
    }

    .universe-description[b-hbxhhfcrt3] {
        font-size: 0.9rem;
    }

    .create-arrow[b-hbxhhfcrt3] {
        display: none;
    }

    /* Creation Form */
    .creation-form[b-hbxhhfcrt3] {
        padding: 1.25rem;
        border-radius: 8px;
    }

    .form-header[b-hbxhhfcrt3] {
        margin-bottom: 1.5rem;
        padding-bottom: 1rem;
    }

    .form-header h2[b-hbxhhfcrt3] {
        font-size: 1.5rem;
    }

    .back-button[b-hbxhhfcrt3] {
        min-height: 44px;
        padding: 0.75rem 1rem;
    }

    /* Form Inputs - Touch friendly */
    .form-control[b-hbxhhfcrt3],
    .form-input[b-hbxhhfcrt3],
    .form-textarea[b-hbxhhfcrt3],
    .form-select[b-hbxhhfcrt3] {
        font-size: 16px; /* Prevent iOS zoom */
        padding: 0.875rem;
        min-height: 48px;
    }

    textarea.form-control[b-hbxhhfcrt3],
    .form-textarea[b-hbxhhfcrt3] {
        min-height: 120px;
    }

    /* Checkbox */
    .checkbox-label[b-hbxhhfcrt3] {
        min-height: 44px;
    }

    .checkbox-label input[type="checkbox"][b-hbxhhfcrt3] {
        width: 1.5rem;
        height: 1.5rem;
    }

    /* Form Actions */
    .form-actions[b-hbxhhfcrt3] {
        flex-direction: column;
        gap: 0.75rem;
    }

    .btn[b-hbxhhfcrt3] {
        min-height: 48px;
        width: 100%;
    }

    .btn-primary[b-hbxhhfcrt3] {
        order: 1;
    }

    .btn-secondary[b-hbxhhfcrt3] {
        order: 2;
    }

    /* Media Type Grid */
    .media-type-grid[b-hbxhhfcrt3] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .media-type-card[b-hbxhhfcrt3] {
        padding: 1.25rem;
        flex-direction: row;
        text-align: left;
        gap: 1rem;
    }

    .media-type-icon[b-hbxhhfcrt3] {
        font-size: 2.5rem;
        margin-bottom: 0;
    }

    .media-type-name[b-hbxhhfcrt3] {
        font-size: 1.1rem;
    }

    .media-type-desc[b-hbxhhfcrt3] {
        font-size: 0.85rem;
    }

    /* Upload Tabs */
    .upload-tabs[b-hbxhhfcrt3] {
        margin-bottom: 0.75rem;
    }

    .upload-tab[b-hbxhhfcrt3] {
        min-height: 44px;
        font-size: 0.85rem;
    }

    /* File Input */
    .form-file-input[b-hbxhhfcrt3] {
        padding: 1.5rem 1rem;
    }

    /* Divider */
    .divider[b-hbxhhfcrt3] {
        margin: 2rem 0;
    }

    /* Universe Context Banner */
    .universe-context-banner[b-hbxhhfcrt3] {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .universe-context-banner .btn-outline-secondary[b-hbxhhfcrt3] {
        min-height: 44px;
        padding: 0.5rem 1rem;
    }
}

/* ============================================
   SMALL MOBILE BREAKPOINT (480px)
   ============================================ */
@media (max-width: 480px) {
    .create-header h1[b-hbxhhfcrt3] {
        font-size: 1.5rem;
    }

    .subtitle[b-hbxhhfcrt3] {
        font-size: 0.9rem;
    }

    /* Pillar Grid - Still 2 columns but smaller */
    .pillar-grid[b-hbxhhfcrt3] {
        gap: 0.625rem;
    }

    .pillar-card[b-hbxhhfcrt3] {
        padding: 0.875rem;
        min-height: 100px;
    }

    .pillar-icon[b-hbxhhfcrt3] {
        font-size: 1.75rem;
    }

    .pillar-name[b-hbxhhfcrt3] {
        font-size: 0.9rem;
    }

    .pillar-description[b-hbxhhfcrt3] {
        font-size: 0.75rem;
    }

    .section-title[b-hbxhhfcrt3] {
        font-size: 1.25rem;
    }

    .creation-form[b-hbxhhfcrt3] {
        padding: 1rem;
    }

    .form-header h2[b-hbxhhfcrt3] {
        font-size: 1.35rem;
    }

    .media-type-icon[b-hbxhhfcrt3] {
        font-size: 2rem;
    }

    .media-type-name[b-hbxhhfcrt3] {
        font-size: 1rem;
    }
}

/* Universe Creation Section */
.content-type-section[b-hbxhhfcrt3] {
    margin-bottom: 3rem;
}

.section-title[b-hbxhhfcrt3] {
    color: #d4af37;
    font-size: 1.8rem;
    margin-bottom: 0.5rem;
    font-weight: 700;
}

.section-subtitle[b-hbxhhfcrt3] {
    color: #999;
    font-size: 1rem;
    margin-bottom: 1.5rem;
}

.universe-create-card[b-hbxhhfcrt3] {
    width: 100%;
    background: linear-gradient(145deg, #1a1a1a 0%, #222 100%);
    border: 2px solid #2a2a2a;
    border-radius: 12px;
    padding: 2rem;
    display: flex;
    align-items: center;
    gap: 2rem;
    cursor: pointer;
    transition: all 0.3s;
}

    .universe-create-card:hover[b-hbxhhfcrt3] {
        border-color: #d4af37;
        transform: translateY(-4px);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    }

.universe-icon[b-hbxhhfcrt3] {
    font-size: 4rem;
    flex-shrink: 0;
}

.universe-content[b-hbxhhfcrt3] {
    flex: 1;
    text-align: left;
}

.universe-name[b-hbxhhfcrt3] {
    color: #e0e0e0;
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.universe-description[b-hbxhhfcrt3] {
    color: #999;
    font-size: 1rem;
}

.create-arrow[b-hbxhhfcrt3] {
    font-size: 2rem;
    color: #d4af37;
    flex-shrink: 0;
}

.divider[b-hbxhhfcrt3] {
    display: flex;
    align-items: center;
    text-align: center;
    margin: 3rem 0;
}

    .divider[b-hbxhhfcrt3]::before,
    .divider[b-hbxhhfcrt3]::after {
        content: '';
        flex: 1;
        border-bottom: 1px solid #333;
    }

    .divider span[b-hbxhhfcrt3] {
        color: #666;
        padding: 0 1rem;
        font-weight: 600;
        letter-spacing: 1px;
    }

/* Creation Form */
.creation-form[b-hbxhhfcrt3] {
    max-width: 800px;
    margin: 0 auto;
}

.form-header[b-hbxhhfcrt3] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 2rem;
}

.back-button[b-hbxhhfcrt3] {
    background: transparent;
    border: none;
    color: #d4af37;
    font-size: 1rem;
    cursor: pointer;
    padding: 0.5rem 1rem;
    transition: all 0.2s;
}

    .back-button:hover[b-hbxhhfcrt3] {
        background: rgba(212, 175, 55, 0.1);
        border-radius: 8px;
    }

.form-header h2[b-hbxhhfcrt3] {
    color: #d4af37;
    font-size: 2rem;
    margin: 0;
    flex: 1;
}

.form-section[b-hbxhhfcrt3] {
    margin-bottom: 2rem;
}

.form-label[b-hbxhhfcrt3] {
    display: block;
    color: #e0e0e0;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.form-input[b-hbxhhfcrt3],
.form-textarea[b-hbxhhfcrt3] {
    width: 100%;
    padding: 1rem;
    background: #1a1a1a;
    border: 1px solid #2a2a2a;
    border-radius: 8px;
    color: #e0e0e0;
    font-size: 1rem;
    font-family: inherit;
    transition: border-color 0.2s;
}

    .form-input:focus[b-hbxhhfcrt3],
    .form-textarea:focus[b-hbxhhfcrt3] {
        outline: none;
        border-color: #d4af37;
    }

.form-textarea[b-hbxhhfcrt3] {
    resize: vertical;
    line-height: 1.6;
}

.form-actions[b-hbxhhfcrt3] {
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
    margin-top: 2rem;
}

.btn[b-hbxhhfcrt3] {
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
    font-size: 1rem;
}

.btn-primary[b-hbxhhfcrt3] {
    background: #d4af37;
    color: #0f0f0f;
}

    .btn-primary:hover:not(:disabled)[b-hbxhhfcrt3] {
        background: #f4d03f;
        transform: translateY(-2px);
    }

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

.btn-secondary[b-hbxhhfcrt3] {
    background: #2a2a2a;
    color: #e0e0e0;
    border: 1px solid #333;
}

    .btn-secondary:hover[b-hbxhhfcrt3] {
        background: #333;
        border-color: #d4af37;
    }

.error-banner[b-hbxhhfcrt3] {
    margin-top: 1rem;
    padding: 1rem;
    background: rgba(220, 53, 69, 0.1);
    border: 1px solid rgba(220, 53, 69, 0.3);
    border-radius: 8px;
    color: #dc3545;
}

/* Media Card Variant */
.universe-create-card.media-card[b-hbxhhfcrt3] {
    background: linear-gradient(145deg, #1a1f2a 0%, #1a2235 100%);
}

.universe-create-card.media-card:hover[b-hbxhhfcrt3] {
    border-color: #667eea;
    box-shadow: 0 8px 24px rgba(102, 126, 234, 0.3);
}

/* Upload Tabs */
.upload-tabs[b-hbxhhfcrt3] {
    display: flex;
    gap: 0;
    margin-bottom: 1rem;
    border: 1px solid #2a2a2a;
    border-radius: 8px;
    overflow: hidden;
}

.upload-tab[b-hbxhhfcrt3] {
    flex: 1;
    padding: 0.75rem 1rem;
    background: #1a1a1a;
    border: none;
    color: #999;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.2s;
}

.upload-tab:first-child[b-hbxhhfcrt3] {
    border-right: 1px solid #2a2a2a;
}

.upload-tab:hover[b-hbxhhfcrt3] {
    background: #222;
    color: #e0e0e0;
}

.upload-tab.active[b-hbxhhfcrt3] {
    background: #d4af37;
    color: #0f0f0f;
}

/* Form Select */
.form-select[b-hbxhhfcrt3] {
    width: 100%;
    padding: 1rem;
    background: #1a1a1a;
    border: 1px solid #2a2a2a;
    border-radius: 8px;
    color: #e0e0e0;
    font-size: 1rem;
    cursor: pointer;
    transition: border-color 0.2s;
}

.form-select:focus[b-hbxhhfcrt3] {
    outline: none;
    border-color: #d4af37;
}

.form-select option[b-hbxhhfcrt3] {
    background: #1a1a1a;
    color: #e0e0e0;
}

/* File Input */
.form-file-input[b-hbxhhfcrt3] {
    width: 100%;
    padding: 1rem;
    background: #1a1a1a;
    border: 2px dashed #2a2a2a;
    border-radius: 8px;
    color: #e0e0e0;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s;
}

.form-file-input:hover[b-hbxhhfcrt3] {
    border-color: #d4af37;
    background: rgba(212, 175, 55, 0.05);
}

.form-file-input[b-hbxhhfcrt3]::file-selector-button {
    padding: 0.5rem 1rem;
    margin-right: 1rem;
    background: #d4af37;
    border: none;
    border-radius: 6px;
    color: #0f0f0f;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

.form-file-input[b-hbxhhfcrt3]::file-selector-button:hover {
    background: #f4d03f;
}

/* Form Hint */
.form-hint[b-hbxhhfcrt3] {
    display: block;
    margin-top: 0.5rem;
    font-size: 0.85rem;
    color: #666;
}

/* Selected File Info */
.selected-file[b-hbxhhfcrt3] {
    margin-top: 0.75rem;
    padding: 0.75rem 1rem;
    background: rgba(212, 175, 55, 0.1);
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: 6px;
    color: #d4af37;
    font-size: 0.9rem;
}

/* Media Type Grid */
.media-type-grid[b-hbxhhfcrt3] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.media-type-card[b-hbxhhfcrt3] {
    position: relative;
    background: linear-gradient(145deg, #1a1a1a 0%, #222 100%);
    border: 2px solid #2a2a2a;
    border-radius: 12px;
    padding: 2rem 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    transition: all 0.3s;
    text-align: center;
}

.media-type-card:hover:not(:disabled)[b-hbxhhfcrt3] {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

.media-type-card:disabled[b-hbxhhfcrt3] {
    opacity: 0.6;
    cursor: not-allowed;
}

.media-type-card.image-card[b-hbxhhfcrt3] {
    background: linear-gradient(145deg, #1a1f2a 0%, #1a2235 100%);
}

.media-type-card.image-card:hover[b-hbxhhfcrt3] {
    border-color: #667eea;
    box-shadow: 0 8px 24px rgba(102, 126, 234, 0.3);
}

.media-type-card.model-card[b-hbxhhfcrt3] {
    background: linear-gradient(145deg, #1a2a1f 0%, #1a3520 100%);
}

.media-type-card.model-card:hover:not(:disabled)[b-hbxhhfcrt3] {
    border-color: #00cec9;
    box-shadow: 0 8px 24px rgba(0, 206, 201, 0.3);
}

.media-type-card.audio-card[b-hbxhhfcrt3] {
    background: linear-gradient(145deg, #2a1a2a 0%, #351a35 100%);
}

.media-type-card.audio-card:hover:not(:disabled)[b-hbxhhfcrt3] {
    border-color: #a855f7;
    box-shadow: 0 8px 24px rgba(168, 85, 247, 0.3);
}

.media-type-icon[b-hbxhhfcrt3] {
    font-size: 3rem;
    margin-bottom: 0.5rem;
}

.media-type-name[b-hbxhhfcrt3] {
    color: #e0e0e0;
    font-size: 1.25rem;
    font-weight: 700;
}

.media-type-desc[b-hbxhhfcrt3] {
    color: #888;
    font-size: 0.9rem;
}

.coming-soon-badge[b-hbxhhfcrt3] {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    background: rgba(212, 175, 55, 0.2);
    color: #d4af37;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
/* /Components/Pages/Dashboard.razor.rz.scp.css */
.dashboard-page[b-k3hl80x77e] {
    width: 100%;
    padding: 0;
}

/* Header */
.dashboard-header[b-k3hl80x77e] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--lb-border-default, #333);
}

.header-greeting h1[b-k3hl80x77e] {
    font-size: 2rem;
    color: var(--lb-text-primary, #e8e8e8);
    margin: 0 0 0.25rem 0;
}

.header-subtitle[b-k3hl80x77e] {
    color: var(--lb-text-muted, #666);
    margin: 0;
}

.btn-create[b-k3hl80x77e] {
    padding: 0.75rem 1.5rem;
    background: var(--lb-accent-primary, #d4af37);
    color: #0f0f0f;
    border-radius: 6px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s;
}

    .btn-create:hover[b-k3hl80x77e] {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(212, 175, 55, 0.3);
    }

/* Grid Layout */
.dashboard-grid[b-k3hl80x77e] {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 2rem;
}

@media (max-width: 1024px) {
    .dashboard-grid[b-k3hl80x77e] {
        grid-template-columns: 1fr;
    }

    .dashboard-sidebar[b-k3hl80x77e] {
        order: -1;
    }
}

/* Sections */
.dashboard-section[b-k3hl80x77e] {
    background: var(--lb-bg-elevated, #141414);
    border: 1px solid var(--lb-border-default, #333);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.section-header[b-k3hl80x77e] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

    .section-header h2[b-k3hl80x77e] {
        font-size: 1.25rem;
        color: var(--lb-text-primary, #e8e8e8);
        margin: 0;
    }

.section-link[b-k3hl80x77e] {
    font-size: 0.9rem;
    color: var(--lb-accent-primary, #d4af37);
    text-decoration: none;
}

    .section-link:hover[b-k3hl80x77e] {
        text-decoration: underline;
    }

/* Recent Work Grid */
.recent-work-grid[b-k3hl80x77e] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
}

.work-card[b-k3hl80x77e] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    background: var(--lb-bg-elevated-2, #1a1a1a);
    border: 1px solid var(--lb-border-default, #333);
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.2s;
}

    .work-card:hover[b-k3hl80x77e] {
        border-color: var(--lb-accent-primary, #d4af37);
        transform: translateY(-2px);
    }

.work-icon[b-k3hl80x77e] {
    font-size: 1.5rem;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--lb-bg-elevated-3, #252525);
    border-radius: 8px;
}

.work-info[b-k3hl80x77e] {
    flex: 1;
    min-width: 0;
}

.work-type[b-k3hl80x77e] {
    font-size: 0.7rem;
    color: var(--lb-accent-primary, #d4af37);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.work-name[b-k3hl80x77e] {
    font-weight: 600;
    color: var(--lb-text-primary, #e8e8e8);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.work-time[b-k3hl80x77e] {
    font-size: 0.75rem;
    color: var(--lb-text-muted, #666);
}

/* Activity Feed */
.activity-feed[b-k3hl80x77e] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.activity-item[b-k3hl80x77e] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: var(--lb-bg-elevated-2, #1a1a1a);
    border: 1px solid var(--lb-border-default, #333);
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.2s;
}

    .activity-item:hover[b-k3hl80x77e] {
        border-color: var(--lb-accent-primary, #d4af37);
        background: var(--lb-bg-hover, #252525);
    }

.activity-icon[b-k3hl80x77e] {
    font-size: 1.25rem;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--lb-bg-elevated-3, #252525);
    border-radius: 6px;
}

.activity-content[b-k3hl80x77e] {
    flex: 1;
    min-width: 0;
}

.activity-title[b-k3hl80x77e] {
    font-weight: 600;
    color: var(--lb-text-primary, #e8e8e8);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.activity-meta[b-k3hl80x77e] {
    font-size: 0.85rem;
    color: var(--lb-text-muted, #666);
    display: flex;
    gap: 0.5rem;
}

.activity-type[b-k3hl80x77e] {
    color: var(--lb-accent-primary, #d4af37);
}

.activity-time[b-k3hl80x77e] {
    font-size: 0.8rem;
    color: var(--lb-text-muted, #666);
    white-space: nowrap;
}

/* Empty States */
.empty-state[b-k3hl80x77e] {
    text-align: center;
    padding: 2rem;
    color: var(--lb-text-muted, #666);
}

.empty-icon[b-k3hl80x77e] {
    font-size: 2.5rem;
    margin-bottom: 0.75rem;
    opacity: 0.6;
}

.empty-state p[b-k3hl80x77e] {
    margin: 0 0 1rem 0;
}

.btn-secondary[b-k3hl80x77e] {
    display: inline-block;
    padding: 0.5rem 1rem;
    background: transparent;
    color: var(--lb-text-secondary, #a0a0a0);
    border: 1px solid var(--lb-border-default, #333);
    border-radius: 6px;
    text-decoration: none;
    font-size: 0.9rem;
    transition: all 0.2s;
}

    .btn-secondary:hover[b-k3hl80x77e] {
        background: var(--lb-bg-hover, #252525);
        border-color: var(--lb-accent-primary, #d4af37);
        color: var(--lb-text-primary, #e8e8e8);
    }

/* Sidebar */
.dashboard-sidebar[b-k3hl80x77e] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.sidebar-card[b-k3hl80x77e] {
    background: var(--lb-bg-elevated, #141414);
    border: 1px solid var(--lb-border-default, #333);
    border-radius: 12px;
    padding: 1.25rem;
}

    .sidebar-card h3[b-k3hl80x77e] {
        font-size: 1rem;
        color: var(--lb-text-primary, #e8e8e8);
        margin: 0 0 1rem 0;
    }

.sidebar-header[b-k3hl80x77e] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

    .sidebar-header h3[b-k3hl80x77e] {
        margin: 0;
    }

.add-link[b-k3hl80x77e] {
    font-size: 0.85rem;
    color: var(--lb-accent-primary, #d4af37);
    text-decoration: none;
}

    .add-link:hover[b-k3hl80x77e] {
        text-decoration: underline;
    }

/* Quick Stats */
.quick-stats[b-k3hl80x77e] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    text-align: center;
}

.quick-stat[b-k3hl80x77e] {
    padding: 0.75rem 0.5rem;
    background: var(--lb-bg-elevated-2, #1a1a1a);
    border-radius: 8px;
    min-width: 0;
}

.stat-value[b-k3hl80x77e] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--lb-accent-primary, #d4af37);
}

.stat-label[b-k3hl80x77e] {
    font-size: 0.65rem;
    color: var(--lb-text-muted, #666);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* Universe List */
.universe-list[b-k3hl80x77e] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.universe-item[b-k3hl80x77e] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem;
    background: var(--lb-bg-elevated-2, #1a1a1a);
    border: 1px solid var(--lb-border-default, #333);
    border-radius: 6px;
    text-decoration: none;
    transition: all 0.2s;
}

    .universe-item:hover[b-k3hl80x77e] {
        border-color: var(--lb-accent-primary, #d4af37);
    }

.universe-name[b-k3hl80x77e] {
    font-weight: 500;
    color: var(--lb-text-primary, #e8e8e8);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.universe-count[b-k3hl80x77e] {
    font-size: 0.8rem;
    color: var(--lb-text-muted, #666);
    white-space: nowrap;
}

.view-all-link[b-k3hl80x77e] {
    display: block;
    text-align: center;
    margin-top: 0.75rem;
    font-size: 0.85rem;
    color: var(--lb-accent-primary, #d4af37);
    text-decoration: none;
}

    .view-all-link:hover[b-k3hl80x77e] {
        text-decoration: underline;
    }

/* Campaign List */
.campaign-list[b-k3hl80x77e] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.campaign-item[b-k3hl80x77e] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem;
    background: var(--lb-bg-elevated-2, #1a1a1a);
    border: 1px solid var(--lb-border-default, #333);
    border-radius: 6px;
    text-decoration: none;
    transition: all 0.2s;
}

    .campaign-item:hover[b-k3hl80x77e] {
        border-color: var(--lb-accent-primary, #d4af37);
    }

.campaign-name[b-k3hl80x77e] {
    font-weight: 500;
    color: var(--lb-text-primary, #e8e8e8);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.campaign-meta[b-k3hl80x77e] {
    font-size: 0.75rem;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    background: var(--lb-bg-elevated-3, #252525);
    text-transform: capitalize;
}

    .campaign-meta.active[b-k3hl80x77e] {
        color: var(--lb-success, #4caf50);
        background: rgba(76, 175, 80, 0.15);
    }

    .campaign-meta.planning[b-k3hl80x77e] {
        color: var(--lb-accent-primary, #d4af37);
        background: rgba(212, 175, 55, 0.15);
    }

    .campaign-meta.completed[b-k3hl80x77e] {
        color: var(--lb-text-muted, #888);
    }

    .campaign-meta.paused[b-k3hl80x77e] {
        color: var(--lb-warning, #ff9800);
        background: rgba(255, 152, 0, 0.15);
    }

.empty-sidebar[b-k3hl80x77e] {
    text-align: center;
    padding: 1rem;
    color: var(--lb-text-muted, #666);
}

    .empty-sidebar p[b-k3hl80x77e] {
        margin: 0 0 0.75rem 0;
        font-size: 0.9rem;
    }

.btn-small[b-k3hl80x77e] {
    display: inline-block;
    padding: 0.5rem 1rem;
    background: var(--lb-accent-primary, #d4af37);
    color: #0f0f0f;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s;
}

    .btn-small:hover[b-k3hl80x77e] {
        transform: translateY(-1px);
    }

/* Quick Links */
.quick-links[b-k3hl80x77e] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.quick-link[b-k3hl80x77e] {
    display: block;
    padding: 0.625rem 0.75rem;
    color: var(--lb-text-secondary, #a0a0a0);
    text-decoration: none;
    border-radius: 6px;
    transition: all 0.2s;
}

    .quick-link:hover[b-k3hl80x77e] {
        background: var(--lb-bg-hover, #252525);
        color: var(--lb-text-primary, #e8e8e8);
    }

/* Loading */
.loading-container[b-k3hl80x77e] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    color: var(--lb-text-muted, #666);
}

.loading-spinner[b-k3hl80x77e] {
    width: 40px;
    height: 40px;
    border: 4px solid var(--lb-border-default, #333);
    border-top-color: var(--lb-accent-primary, #d4af37);
    border-radius: 50%;
    animation: spin-b-k3hl80x77e 1s linear infinite;
    margin-bottom: 1rem;
}

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

/* Media Library Card */
.media-library-card[b-k3hl80x77e] {
    display: flex;
    align-items: center;
    gap: 1rem;
    text-decoration: none;
    transition: all 0.2s;
    cursor: pointer;
}

    .media-library-card:hover[b-k3hl80x77e] {
        border-color: var(--lb-accent-primary, #d4af37);
        transform: translateY(-2px);
    }

.media-library-icon[b-k3hl80x77e] {
    font-size: 2rem;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--lb-bg-elevated-2, #1a1a1a);
    border-radius: 8px;
}

.media-library-info[b-k3hl80x77e] {
    flex: 1;
}

    .media-library-info h3[b-k3hl80x77e] {
        margin: 0 0 0.25rem 0;
        font-size: 1rem;
        color: var(--lb-text-primary, #e8e8e8);
    }

    .media-library-info p[b-k3hl80x77e] {
        margin: 0;
        font-size: 0.85rem;
        color: var(--lb-text-muted, #666);
    }

.media-library-arrow[b-k3hl80x77e] {
    font-size: 1.25rem;
    color: var(--lb-accent-primary, #d4af37);
    opacity: 0;
    transition: opacity 0.2s;
}

.media-library-card:hover .media-library-arrow[b-k3hl80x77e] {
    opacity: 1;
}

/* ============================================
   MOBILE BREAKPOINT (768px)
   ============================================ */
@media (max-width: 768px) {
    /* Dashboard Header - Stack on mobile */
    .dashboard-header[b-k3hl80x77e] {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
        margin-bottom: 1.5rem;
        padding-bottom: 1rem;
    }

    .header-greeting h1[b-k3hl80x77e] {
        font-size: 1.5rem;
    }

    .btn-create[b-k3hl80x77e] {
        width: 100%;
        text-align: center;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Dashboard Grid - Single column */
    .dashboard-grid[b-k3hl80x77e] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .dashboard-sidebar[b-k3hl80x77e] {
        order: 0;
    }

    /* Sections */
    .dashboard-section[b-k3hl80x77e] {
        padding: 1rem;
        margin-bottom: 1rem;
        border-radius: 8px;
    }

    .section-header[b-k3hl80x77e] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .section-header h2[b-k3hl80x77e] {
        font-size: 1.1rem;
    }

    /* Recent Work Grid - Single column */
    .recent-work-grid[b-k3hl80x77e] {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    /* Work Card - Touch friendly */
    .work-card[b-k3hl80x77e] {
        padding: 1rem;
        min-height: 60px;
    }

    .work-icon[b-k3hl80x77e] {
        width: 44px;
        height: 44px;
    }

    /* Activity Feed */
    .activity-item[b-k3hl80x77e] {
        padding: 1rem;
        min-height: 60px;
    }

    .activity-icon[b-k3hl80x77e] {
        width: 40px;
        height: 40px;
    }

    .activity-meta[b-k3hl80x77e] {
        flex-direction: column;
        gap: 0.25rem;
    }

    /* Sidebar Cards */
    .sidebar-card[b-k3hl80x77e] {
        padding: 1rem;
        border-radius: 8px;
    }

    .sidebar-card h3[b-k3hl80x77e] {
        font-size: 0.95rem;
    }

    /* Quick Stats - Horizontal scroll if needed */
    .quick-stats[b-k3hl80x77e] {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.5rem;
    }

    .quick-stat[b-k3hl80x77e] {
        padding: 0.625rem 0.25rem;
    }

    .stat-value[b-k3hl80x77e] {
        font-size: 1.25rem;
    }

    .stat-label[b-k3hl80x77e] {
        font-size: 0.6rem;
    }

    /* Universe List */
    .universe-item[b-k3hl80x77e] {
        padding: 0.875rem;
        min-height: 48px;
    }

    /* Campaign List */
    .campaign-item[b-k3hl80x77e] {
        padding: 0.875rem;
        min-height: 48px;
    }

    /* Quick Links - Touch friendly */
    .quick-link[b-k3hl80x77e] {
        min-height: 44px;
        display: flex;
        align-items: center;
    }

    /* Buttons */
    .btn-secondary[b-k3hl80x77e],
    .btn-small[b-k3hl80x77e] {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Empty States */
    .empty-state[b-k3hl80x77e] {
        padding: 1.5rem 1rem;
    }

    .empty-icon[b-k3hl80x77e] {
        font-size: 2rem;
    }

    /* Media Library Card */
    .media-library-card[b-k3hl80x77e] {
        min-height: 60px;
    }

    .media-library-icon[b-k3hl80x77e] {
        width: 44px;
        height: 44px;
    }

    .media-library-arrow[b-k3hl80x77e] {
        opacity: 1;
    }
}

/* ============================================
   SMALL MOBILE BREAKPOINT (480px)
   ============================================ */
@media (max-width: 480px) {
    .header-greeting h1[b-k3hl80x77e] {
        font-size: 1.35rem;
    }

    .section-header h2[b-k3hl80x77e] {
        font-size: 1rem;
    }

    /* Work Cards - Compact layout */
    .work-card[b-k3hl80x77e] {
        padding: 0.875rem;
    }

    .work-icon[b-k3hl80x77e] {
        width: 40px;
        height: 40px;
        font-size: 1.25rem;
    }

    .work-name[b-k3hl80x77e] {
        font-size: 0.95rem;
    }

    /* Quick Stats - Smaller */
    .quick-stats[b-k3hl80x77e] {
        gap: 0.375rem;
    }

    .quick-stat[b-k3hl80x77e] {
        padding: 0.5rem 0.25rem;
    }

    .stat-value[b-k3hl80x77e] {
        font-size: 1.1rem;
    }

    /* Sidebar Cards */
    .sidebar-card[b-k3hl80x77e] {
        padding: 0.875rem;
    }

    /* Activity Feed */
    .activity-item[b-k3hl80x77e] {
        gap: 0.75rem;
    }

    .activity-icon[b-k3hl80x77e] {
        width: 36px;
        height: 36px;
        font-size: 1rem;
    }

    .activity-title[b-k3hl80x77e] {
        font-size: 0.95rem;
    }
}
/* /Components/Pages/MediaBrowser.razor.rz.scp.css */
.media-browser-page[b-5tqc37awez] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 2rem;
}

/* Header */
.page-header[b-5tqc37awez] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 2rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.header-content h1[b-5tqc37awez] {
    margin: 0 0 0.25rem 0;
    font-size: 2rem;
    color: var(--lb-text-primary);
}

.subtitle[b-5tqc37awez] {
    margin: 0;
    color: var(--lb-text-secondary);
    font-size: 1rem;
}

.btn[b-5tqc37awez] {
    padding: 0.75rem 1.5rem;
    border-radius: var(--lb-radius-md);
    font-weight: 500;
    cursor: pointer;
    border: none;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: all var(--lb-transition-base);
}

.btn-primary[b-5tqc37awez] {
    background: var(--lb-accent-primary);
    color: white;
}

.btn-primary:hover[b-5tqc37awez] {
    background: var(--lb-accent-hover);
}

/* Filters */
.filters-bar[b-5tqc37awez] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 2rem;
    padding: 1rem;
    background: var(--lb-bg-secondary);
    border-radius: var(--lb-radius-lg);
    border: 1px solid var(--lb-border-subtle);
}

.search-box[b-5tqc37awez] {
    display: flex;
    flex: 1;
    min-width: 200px;
    max-width: 400px;
}

.search-box input[b-5tqc37awez] {
    flex: 1;
    padding: 0.625rem 1rem;
    border: 1px solid var(--lb-border-subtle);
    border-right: none;
    border-radius: var(--lb-radius-md) 0 0 var(--lb-radius-md);
    background: var(--lb-bg-primary);
    color: var(--lb-text-primary);
    font-size: 0.9rem;
}

.search-box input:focus[b-5tqc37awez] {
    outline: none;
    border-color: var(--lb-accent-primary);
}

.search-btn[b-5tqc37awez] {
    padding: 0.625rem 1rem;
    background: var(--lb-accent-primary);
    color: white;
    border: none;
    border-radius: 0 var(--lb-radius-md) var(--lb-radius-md) 0;
    cursor: pointer;
    font-weight: 500;
}

.search-btn:hover[b-5tqc37awez] {
    background: var(--lb-accent-hover);
}

.filter-group select[b-5tqc37awez] {
    padding: 0.625rem 2rem 0.625rem 1rem;
    border: 1px solid var(--lb-border-subtle);
    border-radius: var(--lb-radius-md);
    background: var(--lb-bg-primary);
    color: var(--lb-text-primary);
    font-size: 0.9rem;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%239ca3af' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
}

.filter-group select:focus[b-5tqc37awez] {
    outline: none;
    border-color: var(--lb-accent-primary);
}

/* Loading & Empty States */
.loading[b-5tqc37awez] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    gap: 1rem;
}

.spinner[b-5tqc37awez] {
    width: 40px;
    height: 40px;
    border: 3px solid var(--lb-border-subtle);
    border-top-color: var(--lb-accent-primary);
    border-radius: 50%;
    animation: spin-b-5tqc37awez 1s linear infinite;
}

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

.alert-error[b-5tqc37awez] {
    padding: 1rem 1.5rem;
    border-radius: var(--lb-radius-lg);
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #ef4444;
}

.empty-state[b-5tqc37awez] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    text-align: center;
    gap: 1rem;
}

.empty-icon[b-5tqc37awez] {
    font-size: 4rem;
    opacity: 0.5;
}

.empty-state h3[b-5tqc37awez] {
    margin: 0;
    font-size: 1.5rem;
    color: var(--lb-text-primary);
}

.empty-state p[b-5tqc37awez] {
    margin: 0;
    color: var(--lb-text-secondary);
}

/* Results Info */
.results-info[b-5tqc37awez] {
    margin-bottom: 1rem;
    color: var(--lb-text-secondary);
    font-size: 0.875rem;
}

/* Media Grid */
.media-grid[b-5tqc37awez] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1.5rem;
}

.media-card[b-5tqc37awez] {
    display: block;
    background: var(--lb-bg-secondary);
    border-radius: var(--lb-radius-lg);
    overflow: hidden;
    border: 1px solid var(--lb-border-subtle);
    text-decoration: none;
    transition: all var(--lb-transition-base);
}

.media-card:hover[b-5tqc37awez] {
    transform: translateY(-4px);
    box-shadow: var(--lb-shadow-lg);
    border-color: var(--lb-accent-primary);
}

.media-thumbnail[b-5tqc37awez] {
    position: relative;
    aspect-ratio: 4 / 3;
    background: var(--lb-bg-tertiary);
    overflow: hidden;
}

.media-thumbnail img[b-5tqc37awez] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.media-card:hover .media-thumbnail img[b-5tqc37awez] {
    transform: scale(1.05);
}

.thumbnail-placeholder[b-5tqc37awez] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    color: var(--lb-text-muted);
}

/* Card Badges */
.card-badges[b-5tqc37awez] {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    display: flex;
    gap: 0.25rem;
}

.badge[b-5tqc37awez] {
    padding: 0.2rem 0.5rem;
    border-radius: var(--lb-radius-sm);
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ai-badge[b-5tqc37awez] {
    background: linear-gradient(135deg, #8b5cf6, #6366f1);
    color: white;
}

.free-badge[b-5tqc37awez] {
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
}

/* Card Info */
.media-card-info[b-5tqc37awez] {
    padding: 1rem;
}

.media-card-title[b-5tqc37awez] {
    margin: 0 0 0.5rem 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--lb-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.media-card-meta[b-5tqc37awez] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.8rem;
    color: var(--lb-text-secondary);
}

.rating[b-5tqc37awez] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.rating[b-5tqc37awez]::before {
    content: "⭐";
    font-size: 0.75rem;
}

/* Pagination */
.pagination[b-5tqc37awez] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid var(--lb-border-subtle);
}

.page-btn[b-5tqc37awez] {
    padding: 0.5rem 1rem;
    background: var(--lb-bg-secondary);
    border: 1px solid var(--lb-border-subtle);
    border-radius: var(--lb-radius-md);
    color: var(--lb-text-primary);
    cursor: pointer;
    transition: all var(--lb-transition-base);
}

.page-btn:hover:not(:disabled)[b-5tqc37awez] {
    background: var(--lb-bg-tertiary);
    border-color: var(--lb-accent-primary);
}

.page-btn:disabled[b-5tqc37awez] {
    opacity: 0.5;
    cursor: not-allowed;
}

.page-info[b-5tqc37awez] {
    color: var(--lb-text-secondary);
    font-size: 0.9rem;
}

/* Responsive */
@media (max-width: 768px) {
    .media-browser-page[b-5tqc37awez] {
        padding: 1rem;
    }

    .page-header[b-5tqc37awez] {
        flex-direction: column;
        align-items: stretch;
    }

    .filters-bar[b-5tqc37awez] {
        flex-direction: column;
    }

    .search-box[b-5tqc37awez] {
        max-width: none;
    }

    .media-grid[b-5tqc37awez] {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 1rem;
    }
}
/* /Components/Pages/MediaDetail.razor.rz.scp.css */
.media-detail-page[b-kyr70lurnk] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
}

.loading[b-kyr70lurnk] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: 1rem;
}

.spinner[b-kyr70lurnk] {
    width: 40px;
    height: 40px;
    border: 3px solid var(--lb-border-subtle);
    border-top-color: var(--lb-accent-primary);
    border-radius: 50%;
    animation: spin-b-kyr70lurnk 1s linear infinite;
}

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

.alert-error[b-kyr70lurnk],
.alert-warning[b-kyr70lurnk] {
    padding: 1rem 1.5rem;
    border-radius: var(--lb-radius-lg);
    margin-bottom: 1rem;
}

.alert-error[b-kyr70lurnk] {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #ef4444;
}

.alert-warning[b-kyr70lurnk] {
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.3);
    color: #f59e0b;
}

/* Main Content Layout */
.media-content[b-kyr70lurnk] {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 2rem;
    margin-bottom: 2rem;
}

@media (max-width: 900px) {
    .media-content[b-kyr70lurnk] {
        grid-template-columns: 1fr;
    }
}

/* Hero Image Section */
.media-hero[b-kyr70lurnk] {
    position: relative;
    background: var(--lb-bg-secondary);
    border-radius: var(--lb-radius-lg);
    overflow: hidden;
    border: 1px solid var(--lb-border-subtle);
}

.media-image-container[b-kyr70lurnk] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    max-height: 700px;
}

.media-image[b-kyr70lurnk] {
    max-width: 100%;
    max-height: 700px;
    object-fit: contain;
}

.media-audio-player[b-kyr70lurnk] {
    width: 100%;
    padding: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.media-audio-player audio[b-kyr70lurnk] {
    width: 100%;
    max-width: 720px;
}

.media-placeholder[b-kyr70lurnk] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 3rem;
    color: var(--lb-text-muted);
}

.media-type-icon[b-kyr70lurnk] {
    font-size: 4rem;
}

/* Badges */
.media-badges[b-kyr70lurnk] {
    position: absolute;
    top: 1rem;
    right: 1rem;
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.badge[b-kyr70lurnk] {
    padding: 0.25rem 0.75rem;
    border-radius: var(--lb-radius-full);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ai-badge[b-kyr70lurnk] {
    background: linear-gradient(135deg, #8b5cf6, #6366f1);
    color: white;
}

.free-badge[b-kyr70lurnk] {
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
}

.approval-badge[b-kyr70lurnk] {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: white;
}

.assigned-badge[b-kyr70lurnk] {
    background: rgba(100, 116, 139, 0.8);
    color: white;
}

/* Info Panel */
.media-info[b-kyr70lurnk] {
    background: var(--lb-bg-secondary);
    border-radius: var(--lb-radius-lg);
    padding: 1.5rem;
    border: 1px solid var(--lb-border-subtle);
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.media-header[b-kyr70lurnk] {
    border-bottom: 1px solid var(--lb-border-subtle);
    padding-bottom: 1rem;
}

.media-title[b-kyr70lurnk] {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--lb-text-primary);
    margin: 0 0 0.5rem 0;
}

.media-meta[b-kyr70lurnk] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    font-size: 0.875rem;
    color: var(--lb-text-secondary);
}

.media-meta a[b-kyr70lurnk] {
    color: var(--lb-accent-primary);
    text-decoration: none;
}

.media-meta a:hover[b-kyr70lurnk] {
    text-decoration: underline;
}

.media-description[b-kyr70lurnk] {
    color: var(--lb-text-secondary);
    line-height: 1.6;
}

.media-description p[b-kyr70lurnk] {
    margin: 0;
}

/* Stats */
.media-stats[b-kyr70lurnk] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    padding: 1rem 0;
    border-top: 1px solid var(--lb-border-subtle);
    border-bottom: 1px solid var(--lb-border-subtle);
}

.stat[b-kyr70lurnk] {
    text-align: center;
}

.stat-value[b-kyr70lurnk] {
    display: block;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--lb-text-primary);
}

.stat-label[b-kyr70lurnk] {
    display: block;
    font-size: 0.75rem;
    color: var(--lb-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Technical Details */
.media-technical[b-kyr70lurnk] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.tech-item[b-kyr70lurnk] {
    padding: 0.25rem 0.75rem;
    background: var(--lb-bg-tertiary);
    border-radius: var(--lb-radius-sm);
    font-size: 0.8rem;
    color: var(--lb-text-secondary);
}

/* Actions */
.media-actions[b-kyr70lurnk] {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.btn[b-kyr70lurnk] {
    padding: 0.75rem 1.5rem;
    border-radius: var(--lb-radius-md);
    font-weight: 500;
    cursor: pointer;
    border: none;
    transition: all var(--lb-transition-base);
}

.btn-primary[b-kyr70lurnk] {
    background: var(--lb-accent-primary);
    color: white;
}

.btn-primary:hover:not(:disabled)[b-kyr70lurnk] {
    background: var(--lb-accent-hover);
}

.btn-secondary[b-kyr70lurnk] {
    background: var(--lb-bg-tertiary);
    color: var(--lb-text-primary);
    border: 1px solid var(--lb-border-subtle);
}

.btn-secondary:hover:not(:disabled)[b-kyr70lurnk] {
    background: var(--lb-bg-elevated);
}

.btn-danger[b-kyr70lurnk] {
    background: #ef4444;
    color: white;
}

.btn-danger:hover:not(:disabled)[b-kyr70lurnk] {
    background: #dc2626;
}

.btn:disabled[b-kyr70lurnk] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* License Section */
.media-license[b-kyr70lurnk] {
    padding-top: 1rem;
    border-top: 1px solid var(--lb-border-subtle);
}

.media-license h4[b-kyr70lurnk] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--lb-text-secondary);
    margin: 0 0 0.75rem 0;
}

.media-license p[b-kyr70lurnk] {
    margin: 0.25rem 0;
    font-size: 0.875rem;
    color: var(--lb-text-secondary);
}

/* Rating Section */
.rating-section[b-kyr70lurnk] {
    background: var(--lb-bg-secondary);
    border-radius: var(--lb-radius-lg);
    padding: 1.5rem;
    border: 1px solid var(--lb-border-subtle);
    margin-bottom: 2rem;
}

/* Comments Section */
.comments-section[b-kyr70lurnk] {
    background: var(--lb-bg-secondary);
    border-radius: var(--lb-radius-lg);
    padding: 1.5rem;
    border: 1px solid var(--lb-border-subtle);
}

.comments-section h3[b-kyr70lurnk] {
    margin: 0 0 1rem 0;
    font-size: 1.125rem;
    color: var(--lb-text-primary);
}

/* Modal */
.modal-overlay[b-kyr70lurnk] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
}

.modal-content[b-kyr70lurnk] {
    background: var(--lb-bg-secondary);
    border-radius: var(--lb-radius-lg);
    width: 100%;
    max-width: 500px;
    border: 1px solid var(--lb-border-subtle);
}

.modal-header[b-kyr70lurnk] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--lb-border-subtle);
}

.modal-header h3[b-kyr70lurnk] {
    margin: 0;
    font-size: 1.125rem;
    color: var(--lb-text-primary);
}

.close-btn[b-kyr70lurnk] {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--lb-text-muted);
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

.close-btn:hover[b-kyr70lurnk] {
    color: var(--lb-text-primary);
}

.modal-body[b-kyr70lurnk] {
    padding: 1.5rem;
}

.modal-body p[b-kyr70lurnk] {
    margin: 0 0 1rem 0;
    color: var(--lb-text-secondary);
}

.form-group[b-kyr70lurnk] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.form-group label[b-kyr70lurnk] {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--lb-text-secondary);
}

.form-group textarea[b-kyr70lurnk] {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--lb-border-subtle);
    border-radius: var(--lb-radius-md);
    background: var(--lb-bg-primary);
    color: var(--lb-text-primary);
    font-family: inherit;
    font-size: 0.9rem;
    resize: vertical;
}

.form-group textarea:focus[b-kyr70lurnk] {
    outline: none;
    border-color: var(--lb-accent-primary);
}

.char-count[b-kyr70lurnk] {
    font-size: 0.75rem;
    color: var(--lb-text-muted);
    text-align: right;
}

.modal-footer[b-kyr70lurnk] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--lb-border-subtle);
}

/* Edit Mode Inputs */
.edit-title-input[b-kyr70lurnk] {
    width: 100%;
    padding: 0.75rem;
    font-size: 1.5rem;
    font-weight: 600;
    border: 2px solid var(--lb-accent-primary);
    border-radius: var(--lb-radius-md);
    background: var(--lb-bg-primary);
    color: var(--lb-text-primary);
    margin-bottom: 0.5rem;
}

.edit-title-input:focus[b-kyr70lurnk] {
    outline: none;
    box-shadow: 0 0 0 3px rgba(var(--lb-accent-primary-rgb), 0.2);
}

.edit-description-input[b-kyr70lurnk] {
    width: 100%;
    padding: 0.75rem;
    border: 2px solid var(--lb-accent-primary);
    border-radius: var(--lb-radius-md);
    background: var(--lb-bg-primary);
    color: var(--lb-text-primary);
    font-family: inherit;
    font-size: 0.9rem;
    resize: vertical;
    min-height: 100px;
}

.edit-description-input:focus[b-kyr70lurnk] {
    outline: none;
    box-shadow: 0 0 0 3px rgba(var(--lb-accent-primary-rgb), 0.2);
}

.media-description.edit-mode[b-kyr70lurnk] {
    margin-top: 0.5rem;
}

.edit-mode-actions[b-kyr70lurnk] {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--lb-border-subtle);
}

/* Delete Confirmation Modal */
.delete-confirm-modal[b-kyr70lurnk] {
    max-width: 400px;
}

.delete-warning[b-kyr70lurnk] {
    font-size: 1rem;
    font-weight: 500;
    color: var(--lb-text-primary);
}

.delete-info[b-kyr70lurnk] {
    font-size: 0.875rem;
    color: var(--lb-text-muted);
}
/* /Components/Pages/MediaRequests.razor.rz.scp.css */
.media-requests-page[b-bizf94nmbi] {
    max-width: 900px;
    margin: 0 auto;
    padding: 2rem;
}

.page-header[b-bizf94nmbi] {
    margin-bottom: 2rem;
}

.page-header h1[b-bizf94nmbi] {
    margin: 0 0 0.25rem 0;
    font-size: 2rem;
    color: var(--lb-text-primary);
}

.subtitle[b-bizf94nmbi] {
    margin: 0;
    color: var(--lb-text-secondary);
}

/* Tabs */
.tabs[b-bizf94nmbi] {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--lb-border-subtle);
    padding-bottom: 0.5rem;
}

.tab[b-bizf94nmbi] {
    padding: 0.75rem 1.5rem;
    background: none;
    border: none;
    color: var(--lb-text-secondary);
    font-weight: 500;
    cursor: pointer;
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: color var(--lb-transition-base);
}

.tab:hover[b-bizf94nmbi] {
    color: var(--lb-text-primary);
}

.tab.active[b-bizf94nmbi] {
    color: var(--lb-accent-primary);
}

.tab.active[b-bizf94nmbi]::after {
    content: '';
    position: absolute;
    bottom: -0.5rem;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--lb-accent-primary);
}

.tab .badge[b-bizf94nmbi] {
    background: var(--lb-accent-primary);
    color: white;
    padding: 0.15rem 0.5rem;
    border-radius: var(--lb-radius-full);
    font-size: 0.75rem;
}

/* Filter */
.filter-bar[b-bizf94nmbi] {
    margin-bottom: 1.5rem;
}

.filter-bar select[b-bizf94nmbi] {
    padding: 0.5rem 2rem 0.5rem 1rem;
    border: 1px solid var(--lb-border-subtle);
    border-radius: var(--lb-radius-md);
    background: var(--lb-bg-secondary);
    color: var(--lb-text-primary);
    font-size: 0.9rem;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%239ca3af' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
}

/* Loading & Empty */
.loading[b-bizf94nmbi] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    gap: 1rem;
}

.spinner[b-bizf94nmbi] {
    width: 40px;
    height: 40px;
    border: 3px solid var(--lb-border-subtle);
    border-top-color: var(--lb-accent-primary);
    border-radius: 50%;
    animation: spin-b-bizf94nmbi 1s linear infinite;
}

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

.alert-error[b-bizf94nmbi] {
    padding: 1rem 1.5rem;
    border-radius: var(--lb-radius-lg);
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #ef4444;
    margin-bottom: 1rem;
}

.empty-state[b-bizf94nmbi] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    text-align: center;
    gap: 1rem;
}

.empty-icon[b-bizf94nmbi] {
    font-size: 4rem;
    opacity: 0.5;
}

.empty-state h3[b-bizf94nmbi] {
    margin: 0;
    color: var(--lb-text-primary);
}

.empty-state p[b-bizf94nmbi] {
    margin: 0;
    color: var(--lb-text-secondary);
}

/* Request Cards */
.requests-list[b-bizf94nmbi] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.request-card[b-bizf94nmbi] {
    display: flex;
    gap: 1rem;
    background: var(--lb-bg-secondary);
    border-radius: var(--lb-radius-lg);
    padding: 1rem;
    border: 1px solid var(--lb-border-subtle);
}

.request-card.approved[b-bizf94nmbi] {
    border-left: 4px solid #10b981;
}

.request-card.denied[b-bizf94nmbi] {
    border-left: 4px solid #ef4444;
}

.request-card.pending[b-bizf94nmbi] {
    border-left: 4px solid #f59e0b;
}

.request-media[b-bizf94nmbi] {
    flex-shrink: 0;
    width: 100px;
    height: 75px;
    border-radius: var(--lb-radius-md);
    overflow: hidden;
    background: var(--lb-bg-tertiary);
}

.request-media a[b-bizf94nmbi] {
    display: block;
    width: 100%;
    height: 100%;
}

.request-media img[b-bizf94nmbi] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.media-placeholder[b-bizf94nmbi] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: var(--lb-text-muted);
}

.request-content[b-bizf94nmbi] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.request-header[b-bizf94nmbi] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
}

.request-header h4[b-bizf94nmbi] {
    margin: 0;
    font-size: 1rem;
}

.request-header h4 a[b-bizf94nmbi] {
    color: var(--lb-text-primary);
    text-decoration: none;
}

.request-header h4 a:hover[b-bizf94nmbi] {
    color: var(--lb-accent-primary);
}

.status-badge[b-bizf94nmbi] {
    padding: 0.2rem 0.6rem;
    border-radius: var(--lb-radius-full);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.status-badge.pending[b-bizf94nmbi] {
    background: rgba(245, 158, 11, 0.2);
    color: #f59e0b;
}

.status-badge.approved[b-bizf94nmbi] {
    background: rgba(16, 185, 129, 0.2);
    color: #10b981;
}

.status-badge.denied[b-bizf94nmbi] {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

.request-meta[b-bizf94nmbi] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    font-size: 0.85rem;
    color: var(--lb-text-secondary);
}

.request-meta strong[b-bizf94nmbi] {
    color: var(--lb-text-primary);
}

.date[b-bizf94nmbi] {
    color: var(--lb-text-muted);
}

.request-message[b-bizf94nmbi],
.response-message[b-bizf94nmbi] {
    font-size: 0.9rem;
    color: var(--lb-text-secondary);
    padding: 0.75rem;
    background: var(--lb-bg-tertiary);
    border-radius: var(--lb-radius-md);
}

.response-message[b-bizf94nmbi] {
    border-left: 3px solid var(--lb-accent-primary);
}

/* Actions */
.request-actions[b-bizf94nmbi] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 0.5rem;
}

.response-input input[b-bizf94nmbi] {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--lb-border-subtle);
    border-radius: var(--lb-radius-md);
    background: var(--lb-bg-primary);
    color: var(--lb-text-primary);
    font-size: 0.85rem;
}

.response-input input:focus[b-bizf94nmbi] {
    outline: none;
    border-color: var(--lb-accent-primary);
}

.action-buttons[b-bizf94nmbi] {
    display: flex;
    gap: 0.5rem;
}

.btn[b-bizf94nmbi] {
    padding: 0.5rem 1rem;
    border-radius: var(--lb-radius-md);
    font-weight: 500;
    cursor: pointer;
    border: none;
    font-size: 0.85rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all var(--lb-transition-base);
}

.btn:disabled[b-bizf94nmbi] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-primary[b-bizf94nmbi] {
    background: var(--lb-accent-primary);
    color: white;
}

.btn-primary:hover:not(:disabled)[b-bizf94nmbi] {
    background: var(--lb-accent-hover);
}

.btn-approve[b-bizf94nmbi] {
    background: #10b981;
    color: white;
}

.btn-approve:hover:not(:disabled)[b-bizf94nmbi] {
    background: #059669;
}

.btn-deny[b-bizf94nmbi] {
    background: transparent;
    color: #ef4444;
    border: 1px solid #ef4444;
}

.btn-deny:hover:not(:disabled)[b-bizf94nmbi] {
    background: rgba(239, 68, 68, 0.1);
}

/* Responsive */
@media (max-width: 600px) {
    .media-requests-page[b-bizf94nmbi] {
        padding: 1rem;
    }

    .request-card[b-bizf94nmbi] {
        flex-direction: column;
    }

    .request-media[b-bizf94nmbi] {
        width: 100%;
        height: 150px;
    }

    .tabs[b-bizf94nmbi] {
        overflow-x: auto;
    }
}
/* /Components/Pages/Pillars/Apparel.razor.rz.scp.css */
/* /Components/Pages/Pillars/Biome.razor.rz.scp.css */
/* /Components/Pages/Pillars/Character.razor.rz.scp.css */
/* /Components/Pages/Pillars/Civilization.razor.rz.scp.css */
/* /Components/Pages/Pillars/Creature.razor.rz.scp.css */
/* /Components/Pages/Pillars/Effector.razor.rz.scp.css */
/* /Components/Pages/Pillars/Faction.razor.rz.scp.css */
/* /Components/Pages/Pillars/Flora.razor.rz.scp.css */
/* /Components/Pages/Pillars/Item.razor.rz.scp.css */
/* /Components/Pages/Pillars/Location.razor.rz.scp.css */
/* /Components/Pages/Pillars/Magic.razor.rz.scp.css */
/* /Components/Pages/Pillars/Material.razor.rz.scp.css */
/* /Components/Pages/Pillars/Phenomena.razor.rz.scp.css */
/* /Components/Pages/Pillars/Planet.razor.rz.scp.css */

.planet-tools[b-glknc99tvq] {
    display: flex;
    justify-content: flex-end;
    margin: 12px 0;
}

.planet-tools .btn[b-glknc99tvq] {
    padding: 6px 12px;
    border-radius: 4px;
    text-decoration: none;
    border: 1px solid var(--lb-border-subtle, rgba(255, 255, 255, 0.2));
    color: var(--lb-text-primary, #e0e0e0);
    background: var(--lb-bg-elevated-2, rgba(255, 255, 255, 0.05));
}

.planet-tools .btn:hover[b-glknc99tvq] {
    border-color: var(--lb-accent-primary, #d4a843);
    color: var(--lb-accent-primary, #d4a843);
}
/* /Components/Pages/Pillars/Spell.razor.rz.scp.css */
/* /Components/Pages/Pillars/StarSystem.razor.rz.scp.css */
/* /Components/Pages/Pillars/Vehicle.razor.rz.scp.css */
/* /Components/Pages/Pillars/Weapon.razor.rz.scp.css */
/* /Components/Pages/Roadmap.razor.rz.scp.css */
.roadmap-page[b-7zsxae2z0g] {
    width: 100%;
    padding: 0;
}

.roadmap-header[b-7zsxae2z0g] {
    text-align: center;
    margin-bottom: 3rem;
}

    .roadmap-header h1[b-7zsxae2z0g] {
        font-size: 3rem;
        font-family: Georgia, serif;
        color: var(--lb-accent-primary, #d4af37);
        margin-bottom: 0.5rem;
    }

.roadmap-subtitle[b-7zsxae2z0g] {
    color: var(--lb-text-secondary, #a0a0a0);
    font-size: 1.2rem;
}

/* Timeline Structure */
.timeline[b-7zsxae2z0g] {
    position: relative;
    padding-left: 60px;
}

    .timeline[b-7zsxae2z0g]::before {
        content: '';
        position: absolute;
        left: 20px;
        top: 0;
        bottom: 0;
        width: 2px;
        background: linear-gradient(to bottom, var(--lb-accent-primary, #d4af37) 0%, var(--lb-border-default, #333) 100%);
    }

.timeline-section[b-7zsxae2z0g] {
    position: relative;
    margin-bottom: 3rem;
}

.timeline-marker[b-7zsxae2z0g] {
    position: absolute;
    left: -49px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    z-index: 1;
}

    .timeline-marker.completed[b-7zsxae2z0g] {
        background: var(--lb-accent-primary, #d4af37);
        color: #0f0f0f;
    }

    .timeline-marker.in-progress[b-7zsxae2z0g] {
        background: #3b82f6;
        color: white;
        animation: pulse-b-7zsxae2z0g 2s infinite;
    }

    .timeline-marker.planned[b-7zsxae2z0g] {
        background: var(--lb-bg-elevated-2, #1a1a1a);
        border: 2px solid var(--lb-accent-primary, #d4af37);
        color: var(--lb-accent-primary, #d4af37);
    }

    .timeline-marker.future[b-7zsxae2z0g] {
        background: var(--lb-bg-elevated-2, #1a1a1a);
        border: 2px solid var(--lb-border-default, #333);
        color: var(--lb-text-muted, #666);
    }

@keyframes pulse-b-7zsxae2z0g {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.4);
    }

    50% {
        box-shadow: 0 0 0 10px rgba(59, 130, 246, 0);
    }
}

.timeline-content[b-7zsxae2z0g] {
    padding-bottom: 1rem;
}

.section-title[b-7zsxae2z0g] {
    font-size: 1.5rem;
    color: var(--lb-text-primary, #e8e8e8);
    margin-bottom: 1.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--lb-border-default, #333);
}

/* Timeline Items */
.timeline-item[b-7zsxae2z0g] {
    background: var(--lb-bg-elevated, #141414);
    border: 1px solid var(--lb-border-default, #333);
    border-radius: 8px;
    padding: 1.25rem;
    margin-bottom: 1rem;
    transition: all 0.2s;
}

    .timeline-item:hover[b-7zsxae2z0g] {
        border-color: var(--lb-border-hover, #444);
        transform: translateX(4px);
    }

    .timeline-item.completed[b-7zsxae2z0g] {
        border-left: 3px solid var(--lb-accent-primary, #d4af37);
    }

    .timeline-item.in-progress[b-7zsxae2z0g] {
        border-left: 3px solid #3b82f6;
        background: linear-gradient(90deg, rgba(59, 130, 246, 0.05) 0%, transparent 100%);
    }

    .timeline-item.planned[b-7zsxae2z0g] {
        border-left: 3px solid var(--lb-text-muted, #666);
    }

    .timeline-item.future[b-7zsxae2z0g] {
        border-left: 3px solid var(--lb-border-default, #333);
        opacity: 0.8;
    }

.item-date[b-7zsxae2z0g] {
    font-size: 0.75rem;
    color: var(--lb-text-muted, #666);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 0.5rem;
}

.timeline-item h3[b-7zsxae2z0g] {
    font-size: 1.1rem;
    color: var(--lb-text-primary, #e8e8e8);
    margin: 0 0 0.5rem 0;
}

.timeline-item p[b-7zsxae2z0g] {
    font-size: 0.95rem;
    color: var(--lb-text-secondary, #a0a0a0);
    margin: 0;
    line-height: 1.5;
}

/* Suggestion Section */
.suggestion-section[b-7zsxae2z0g] {
    margin-top: 4rem;
    padding-top: 3rem;
    border-top: 1px solid var(--lb-border-default, #333);
}

.suggestion-content[b-7zsxae2z0g] {
    background: var(--lb-bg-elevated, #141414);
    border: 1px solid var(--lb-border-default, #333);
    border-radius: 12px;
    padding: 2rem;
    text-align: center;
}

    .suggestion-content h2[b-7zsxae2z0g] {
        font-size: 1.75rem;
        color: var(--lb-accent-primary, #d4af37);
        margin-bottom: 0.75rem;
    }

.suggestion-intro[b-7zsxae2z0g] {
    color: var(--lb-text-secondary, #a0a0a0);
    font-size: 1.1rem;
    margin-bottom: 1.5rem;
}

.suggestion-disclaimer[b-7zsxae2z0g] {
    background: var(--lb-bg-elevated-2, #1a1a1a);
    border: 1px solid var(--lb-border-default, #333);
    border-radius: 8px;
    padding: 1rem;
    font-size: 0.85rem;
    color: var(--lb-text-muted, #666);
    text-align: left;
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

    .suggestion-disclaimer strong[b-7zsxae2z0g] {
        color: var(--lb-text-secondary, #a0a0a0);
    }

.btn-suggest[b-7zsxae2z0g] {
    display: inline-block;
    padding: 0.875rem 2rem;
    background: var(--lb-accent-primary, #d4af37);
    color: #0f0f0f;
    font-weight: 600;
    font-size: 1rem;
    border-radius: 6px;
    text-decoration: none;
    transition: all 0.2s;
}

    .btn-suggest:hover[b-7zsxae2z0g] {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(212, 175, 55, 0.3);
    }

/* Responsive */
@media (max-width: 600px) {
    .roadmap-page[b-7zsxae2z0g] {
        padding: 1rem;
    }

    .timeline[b-7zsxae2z0g] {
        padding-left: 40px;
    }

        .timeline[b-7zsxae2z0g]::before {
            left: 10px;
        }

    .timeline-marker[b-7zsxae2z0g] {
        left: -39px;
        width: 30px;
        height: 30px;
        font-size: 0.9rem;
    }

    .roadmap-header h1[b-7zsxae2z0g] {
        font-size: 2rem;
    }
}
/* /Components/Pages/UniverseDetail.razor.rz.scp.css */
.universe-detail-page[b-7t7gnlyize] {
    width: 100%;
    padding: 0;
}

.loading-container[b-7t7gnlyize], .error-container[b-7t7gnlyize] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: 1rem;
}

.loading-spinner[b-7t7gnlyize] {
    width: 40px;
    height: 40px;
    border: 4px solid var(--lb-border-default);
    border-top-color: var(--lb-accent-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@@keyframes spin {
    to[b-7t7gnlyize] {
        transform: rotate(360deg);
    }
}

.loading-text[b-7t7gnlyize] {
    color: var(--lb-text-muted);
}

.error-icon[b-7t7gnlyize] {
    font-size: 4rem;
    opacity: 0.5;
}

.error-container h2[b-7t7gnlyize] {
    margin: 1rem 0 0.5rem;
    color: var(--lb-text-primary);
}

.error-container p[b-7t7gnlyize] {
    color: var(--lb-text-secondary);
    margin-bottom: 1.5rem;
}

.universe-hero[b-7t7gnlyize] {
    position: relative;
    height: 400px;
    border-radius: var(--lb-radius-lg);
    overflow: hidden;
    margin-bottom: 2rem;
}

.hero-background[b-7t7gnlyize] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.hero-placeholder[b-7t7gnlyize] {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--lb-bg-elevated-3) 0%, var(--lb-bg-elevated) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 8rem;
}

.universe-hero.edit-mode[b-7t7gnlyize] {
    cursor: pointer;
}

.hero-edit-overlay[b-7t7gnlyize] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s ease;
    z-index: 5;
}

.universe-hero.edit-mode:hover .hero-edit-overlay[b-7t7gnlyize] {
    opacity: 1;
}

.hero-edit-icon[b-7t7gnlyize] {
    font-size: 3rem;
    margin-bottom: 0.5rem;
}

.hero-edit-text[b-7t7gnlyize] {
    color: var(--lb-text-primary);
    font-size: 1.2rem;
    font-weight: 600;
}

.hero-overlay[b-7t7gnlyize] {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(15, 15, 15, 0.95) 0%, transparent 100%);
    padding: 3rem 2rem 2rem;
}

.hero-content[b-7t7gnlyize] {
    max-width: 1200px;
    margin: 0 auto;
}

.hero-title[b-7t7gnlyize] {
    font-size: 3rem;
    font-weight: 700;
    color: var(--lb-accent-primary);
    margin: 0 0 1rem;
    font-family: Georgia, serif;
}

.hero-title-input[b-7t7gnlyize] {
    font-size: 3rem;
    font-weight: 700;
    color: var(--lb-accent-primary);
    margin: 0 0 1rem;
    font-family: Georgia, serif;
    background: transparent;
    border: 2px solid var(--lb-accent-primary);
    border-radius: var(--lb-radius-md);
    padding: 0.5rem;
    width: 100%;
}

.hero-meta[b-7t7gnlyize] {
    display: flex;
    gap: 1rem;
    color: var(--lb-text-secondary);
    font-size: 1rem;
}

.meta-separator[b-7t7gnlyize] {
    color: var(--lb-text-muted);
}

.creator-link[b-7t7gnlyize] {
    color: var(--lb-accent-primary);
    text-decoration: none;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

    .creator-link:hover[b-7t7gnlyize] {
        color: var(--lb-accent-primary-light);
        text-decoration: underline;
    }

.creator-avatar-inline[b-7t7gnlyize] {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--lb-accent-primary, #d4af37);
    vertical-align: middle;
    transition: transform 0.2s, box-shadow 0.2s;
}

.creator-link:hover .creator-avatar-inline[b-7t7gnlyize] {
    transform: scale(1.1);
    box-shadow: 0 0 8px rgba(212, 175, 55, 0.5);
}

.actions-bar[b-7t7gnlyize] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.actions-left[b-7t7gnlyize], .actions-right[b-7t7gnlyize] {
    display: flex;
    gap: 1rem;
}

.btn[b-7t7gnlyize] {
    padding: 0.75rem 1.5rem;
    border-radius: var(--lb-radius-md);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
    font-size: 1rem;
}

.btn-primary[b-7t7gnlyize] {
    background: var(--lb-accent-primary);
    color: #0f0f0f;
}

    .btn-primary:hover[b-7t7gnlyize] {
        background: var(--lb-accent-primary-light);
        transform: translateY(-2px);
    }

.btn-secondary[b-7t7gnlyize] {
    background: var(--lb-bg-elevated-3);
    color: var(--lb-text-primary);
    border: 1px solid var(--lb-border-default);
}

    .btn-secondary:hover[b-7t7gnlyize] {
        background: var(--lb-bg-elevated-2);
        border-color: var(--lb-accent-primary);
    }

.btn-campaign[b-7t7gnlyize] {
    background: linear-gradient(135deg, #7c4dff 0%, #536dfe 100%);
    color: #fff;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

    .btn-campaign:hover[b-7t7gnlyize] {
        background: linear-gradient(135deg, #9c7aff 0%, #738ffe 100%);
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(124, 77, 255, 0.3);
    }

.stats-bar[b-7t7gnlyize] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    padding: 1.5rem;
    background: var(--lb-bg-elevated);
    border: 1px solid var(--lb-border-default);
    border-radius: var(--lb-radius-md);
    margin-bottom: 2rem;
}

.stat-item[b-7t7gnlyize] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.stat-link[b-7t7gnlyize] {
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s;
    padding: 0.5rem 1rem;
    border-radius: var(--lb-radius-md);
}

    .stat-link:hover[b-7t7gnlyize] {
        background: var(--lb-bg-elevated-2);
        transform: translateY(-2px);
    }

    .stat-link:hover .stat-value[b-7t7gnlyize] {
        color: var(--lb-accent-primary-light);
    }

.stat-value[b-7t7gnlyize] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--lb-accent-primary);
}

.stat-label[b-7t7gnlyize] {
    font-size: 0.85rem;
    color: var(--lb-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.stat-divider[b-7t7gnlyize] {
    width: 1px;
    height: 40px;
    background: var(--lb-border-default);
}

.universe-content[b-7t7gnlyize] {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.content-section[b-7t7gnlyize] {
    background: var(--lb-bg-elevated);
    border: 1px solid var(--lb-border-default);
    border-radius: var(--lb-radius-lg);
    padding: 2rem;
}

.section-header[b-7t7gnlyize] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.section-title[b-7t7gnlyize] {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--lb-accent-primary);
    margin: 0 0 1.5rem;
    font-family: Georgia, serif;
}

.section-header .section-title[b-7t7gnlyize] {
    margin: 0;
}

.description-input[b-7t7gnlyize] {
    width: 100%;
    padding: 1rem;
    background: var(--lb-bg-base);
    border: 1px solid var(--lb-border-default);
    border-radius: var(--lb-radius-md);
    color: var(--lb-text-primary);
    font-size: 1rem;
    font-family: inherit;
    line-height: 1.6;
    resize: vertical;
}

    .description-input:focus[b-7t7gnlyize] {
        outline: none;
        border-color: var(--lb-accent-primary);
    }

.description-text[b-7t7gnlyize] {
    color: var(--lb-text-secondary);
    font-size: 1.05rem;
    line-height: 1.8;
}

.description-editor-container[b-7t7gnlyize] {
    background: var(--lb-bg-base);
    border: 1px solid var(--lb-border-subtle);
    border-radius: var(--lb-radius-md);
    padding: 1rem;
    min-height: 200px;
}

.text-muted[b-7t7gnlyize] {
    color: var(--lb-text-muted);
    font-style: italic;
}

.entities-grid[b-7t7gnlyize] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
}

.entity-card[b-7t7gnlyize] {
    background: var(--lb-bg-base);
    border: 1px solid var(--lb-border-subtle);
    border-radius: var(--lb-radius-md);
    padding: 1.25rem;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    gap: 1rem;
}

    .entity-card:hover[b-7t7gnlyize] {
        border-color: var(--lb-accent-primary);
        transform: translateY(-2px);
    }

.entity-icon[b-7t7gnlyize] {
    font-size: 2.5rem;
    flex-shrink: 0;
}

.entity-body[b-7t7gnlyize] {
    flex: 1;
    min-width: 0;
}

.entity-type[b-7t7gnlyize] {
    color: var(--lb-accent-primary);
    font-size: 0.7rem;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.5px;
    margin-bottom: 0.25rem;
}

.entity-name[b-7t7gnlyize] {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--lb-text-primary);
    margin-bottom: 0.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.entity-summary[b-7t7gnlyize] {
    color: var(--lb-text-muted);
    font-size: 0.9rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.empty-state[b-7t7gnlyize] {
    text-align: center;
    padding: 3rem 2rem;
    color: var(--lb-text-muted);
}

.empty-icon[b-7t7gnlyize] {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}

.empty-text[b-7t7gnlyize] {
    font-size: 1rem;
    margin-bottom: 1.5rem;
}

@@media (max-width: 968px) {
    .universe-detail-page[b-7t7gnlyize] {
        padding: 1rem;
    }

    .hero-title[b-7t7gnlyize], .hero-title-input[b-7t7gnlyize] {
        font-size: 2rem;
    }

    .universe-hero[b-7t7gnlyize] {
        height: 300px;
    }

    .hero-placeholder[b-7t7gnlyize] {
        font-size: 5rem;
    }

    .entities-grid[b-7t7gnlyize] {
        grid-template-columns: 1fr;
    }

    .actions-bar[b-7t7gnlyize] {
        flex-direction: column;
        align-items: stretch;
    }

    .actions-left[b-7t7gnlyize], .actions-right[b-7t7gnlyize] {
        justify-content: stretch;
    }
}

/* Collaboration Settings */
.collaboration-settings[b-7t7gnlyize] {
    background: var(--lb-bg-elevated);
    border: 1px solid var(--lb-border-default);
    border-radius: var(--lb-radius-lg);
    padding: 1.5rem;
}

.collaboration-settings .section-subtitle[b-7t7gnlyize] {
    color: var(--lb-text-secondary);
    margin-bottom: 1.5rem;
    font-size: 0.95rem;
}

.setting-group[b-7t7gnlyize] {
    margin-bottom: 1rem;
}

.setting-label[b-7t7gnlyize] {
    display: block;
    font-weight: 600;
    color: var(--lb-text-primary);
    margin-bottom: 0.5rem;
}

.setting-select[b-7t7gnlyize] {
    width: 100%;
    max-width: 400px;
    padding: 0.75rem 1rem;
    background: var(--lb-bg-primary);
    border: 1px solid var(--lb-border-default);
    border-radius: var(--lb-radius-md);
    color: var(--lb-text-primary);
    font-size: 0.95rem;
    cursor: pointer;
    transition: border-color 0.2s;
}

.setting-select:focus[b-7t7gnlyize] {
    outline: none;
    border-color: var(--lb-accent-primary);
}

.setting-select option[b-7t7gnlyize] {
    background: var(--lb-bg-primary);
    color: var(--lb-text-primary);
}

.setting-hint[b-7t7gnlyize] {
    display: block;
    margin-top: 0.5rem;
    font-size: 0.85rem;
    color: var(--lb-text-muted);
}
/* /Components/Shared/AttributeCard.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════ */
/* COLLAPSIBLE SECTIONS */
/* ═══════════════════════════════════════════════════════ */
.collapsible-section[b-d8g5dpqg82] {
    background: var(--lb-bg-elevated-1, #1e1e1e);
    border: 1px solid var(--lb-border-default, #3a3a3a);
    border-radius: 8px;
    overflow: hidden;
}

.collapsible-header[b-d8g5dpqg82] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    cursor: pointer;
    user-select: none;
    transition: background 0.2s;
}

.collapsible-header:hover[b-d8g5dpqg82] {
    background: var(--lb-bg-elevated-2, #252525);
}

.collapsible-icon[b-d8g5dpqg82] {
    font-size: 12px;
    color: var(--lb-text-muted, #888);
    width: 16px;
}

.collapsible-title[b-d8g5dpqg82] {
    font-size: 16px;
    font-weight: 600;
    color: var(--lb-text-primary, #e8e8e8);
    flex: 1;
}

.collapsible-count[b-d8g5dpqg82] {
    font-size: 13px;
    color: var(--lb-accent-primary, #d4a84b);
    background: rgba(212, 168, 75, 0.15);
    padding: 2px 10px;
    border-radius: 12px;
    font-weight: 600;
}

.collapsible-content[b-d8g5dpqg82] {
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--lb-border-default, #3a3a3a);
}

/* ═══════════════════════════════════════════════════════ */
/* ATTRIBUTE LIST - VIEW MODE */
/* ═══════════════════════════════════════════════════════ */
.attribute-list[b-d8g5dpqg82] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.attribute-item[b-d8g5dpqg82] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.6rem 0.75rem;
    background: var(--lb-bg-elevated-2, #252525);
    border-radius: 6px;
}

.attribute-name[b-d8g5dpqg82] {
    font-size: 14px;
    color: var(--lb-text-secondary, #a0a0a0);
    font-weight: 500;
}

.attribute-value[b-d8g5dpqg82] {
    font-size: 14px;
    color: var(--lb-accent-primary, #d4a84b);
    font-weight: 600;
}

/* ═══════════════════════════════════════════════════════ */
/* ATTRIBUTE LIST - EDIT MODE */
/* ═══════════════════════════════════════════════════════ */
.attribute-edit-list[b-d8g5dpqg82] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.attribute-edit-item[b-d8g5dpqg82] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: var(--lb-bg-elevated-2, #252525);
    border-radius: 6px;
    border: 1px solid var(--lb-border-default, #3a3a3a);
}

.attribute-edit-header[b-d8g5dpqg82] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.attribute-edit-info[b-d8g5dpqg82] {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    flex-wrap: wrap;
    min-width: 0;
}

.attribute-edit-name[b-d8g5dpqg82] {
    font-weight: 600;
    color: var(--lb-text-primary, #e8e8e8);
    font-size: 14px;
}

.attribute-edit-value[b-d8g5dpqg82] {
    color: var(--lb-accent-primary, #d4a84b);
    font-size: 14px;
}

.attribute-edit-actions[b-d8g5dpqg82] {
    display: flex;
    gap: 0.25rem;
    flex-shrink: 0;
}

/* Empty state */
.empty-state[b-d8g5dpqg82] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 2rem 1.5rem;
    text-align: center;
    border: 1px dashed var(--lb-border-subtle);
    border-radius: 8px;
    background: var(--lb-bg-elevated);
}

.empty-state-text[b-d8g5dpqg82] {
    color: var(--lb-text-muted);
    font-size: 14px;
}

.placeholder[b-d8g5dpqg82] {
    color: var(--lb-text-muted);
    font-style: italic;
    font-size: 14px;
    padding: 1.5rem;
    text-align: center;
    background: transparent;
    border: 1px dashed var(--lb-border-subtle);
    border-radius: 6px;
}

/* Buttons */
.btn[b-d8g5dpqg82] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
}

.btn-sm[b-d8g5dpqg82] {
    padding: 0.375rem 0.75rem;
    font-size: 13px;
}

.btn-outline-primary[b-d8g5dpqg82] {
    background: transparent;
    color: var(--lb-accent-primary);
    border: 1px solid var(--lb-accent-primary);
}

.btn-outline-primary:hover[b-d8g5dpqg82] {
    background: var(--lb-accent-primary);
    color: white;
}

.btn-icon[b-d8g5dpqg82] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: var(--lb-text-secondary);
    font-size: 14px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-icon:hover[b-d8g5dpqg82] {
    background: var(--lb-bg-hover);
    color: var(--lb-text-primary);
}

.btn-icon-danger:hover[b-d8g5dpqg82] {
    background: rgba(220, 53, 69, 0.15);
    color: #ff6b7a;
}

.mt-2[b-d8g5dpqg82] {
    margin-top: 0.5rem;
}
/* /Components/Shared/AttributeEditorModal.razor.rz.scp.css */
/* AttributeEditorModal - Two-Column Layout */

.aem-overlay[b-ulfuvaspdb] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    z-index: 1050;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, visibility 0.2s;
}

    .aem-overlay.show[b-ulfuvaspdb] {
        opacity: 1;
        visibility: visible;
    }

/* Wide modal for two-column layout */
.aem-modal-wide[b-ulfuvaspdb] {
    background: #1e1e1e;
    border-radius: 8px;
    width: 80vw;
    height: 80vh;
    max-width: 1200px;
    display: flex;
    flex-direction: column;
    border: 1px solid #333;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    overflow: hidden;
}

/* Header */
.aem-header[b-ulfuvaspdb] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    border-bottom: 1px solid #333;
    flex-shrink: 0;
}

.aem-title[b-ulfuvaspdb] {
    margin: 0;
    font-size: 18px;
    font-weight: 500;
    color: #fff;
}

.aem-close[b-ulfuvaspdb] {
    background: transparent;
    border: none;
    color: #888;
    font-size: 28px;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: color 0.15s;
}

    .aem-close:hover[b-ulfuvaspdb] {
        color: #fff;
    }

/* Two-column body */
.aem-body-split[b-ulfuvaspdb] {
    display: flex;
    flex: 1;
    overflow: hidden;
}

/* Left column - attribute list */
.aem-left-column[b-ulfuvaspdb] {
    width: 38%;
    border-right: 1px solid #333;
    display: flex;
    flex-direction: column;
    background: #1a1a1a;
}

.aem-instruction[b-ulfuvaspdb] {
    padding: 16px 20px 0 20px;
    font-size: 14px;
    color: #888;
}

.aem-search[b-ulfuvaspdb] {
    padding: 16px 20px;
}

    .aem-search input[b-ulfuvaspdb] {
        width: 100%;
        padding: 12px 16px;
        background: #2a2a2a;
        border: 1px solid #3a3a3a;
        border-radius: 6px;
        color: #fff;
        font-size: 14px;
        outline: none;
        box-sizing: border-box;
    }

        .aem-search input:focus[b-ulfuvaspdb] {
            border-color: #b8960c;
        }

        .aem-search input[b-ulfuvaspdb]::placeholder {
            color: #666;
        }

.aem-definition-list[b-ulfuvaspdb] {
    flex: 1;
    overflow-y: auto;
    padding: 0 12px 12px 12px;
}

.aem-section[b-ulfuvaspdb] {
    margin-bottom: 4px;
}

.aem-section-header[b-ulfuvaspdb] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 8px;
    font-size: 12px;
    font-weight: 600;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

    .aem-section-header.clickable[b-ulfuvaspdb] {
        cursor: pointer;
        user-select: none;
    }

        .aem-section-header.clickable:hover[b-ulfuvaspdb] {
            color: #aaa;
        }

    .aem-section-header .section-icon[b-ulfuvaspdb] {
        font-size: 14px;
    }

        .aem-section-header .section-icon:first-child[b-ulfuvaspdb] {
            color: #b8960c;
        }

    .aem-section-header .section-chevron[b-ulfuvaspdb] {
        margin-left: auto;
        font-size: 16px;
        transition: transform 0.15s;
    }

        .aem-section-header .section-chevron.expanded[b-ulfuvaspdb] {
            transform: rotate(90deg);
        }

.aem-definition-item[b-ulfuvaspdb] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.1s;
    margin-bottom: 2px;
}

    .aem-definition-item:hover[b-ulfuvaspdb] {
        background: #252525;
    }

    .aem-definition-item.selected[b-ulfuvaspdb] {
        background: #2a2a2a;
        border-left: 3px solid #b8960c;
    }

    .aem-definition-item.already-added[b-ulfuvaspdb] {
        opacity: 0.5;
        cursor: not-allowed;
    }

    .aem-definition-item .def-info[b-ulfuvaspdb] {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    .aem-definition-item .def-name[b-ulfuvaspdb] {
        color: #fff;
        font-size: 14px;
    }

    .aem-definition-item .def-type[b-ulfuvaspdb] {
        color: #666;
        font-size: 12px;
    }

    .aem-definition-item .def-category[b-ulfuvaspdb] {
        background: #3d3d1a;
        color: #b8960c;
        padding: 4px 10px;
        border-radius: 4px;
        font-size: 11px;
        font-weight: 500;
    }

    .aem-definition-item .def-added-badge[b-ulfuvaspdb] {
        background: rgba(74, 222, 128, 0.15);
        color: #4ade80;
        padding: 3px 8px;
        border-radius: 4px;
        font-size: 11px;
        font-weight: 500;
    }

.aem-no-results[b-ulfuvaspdb] {
    padding: 24px;
    text-align: center;
    color: #666;
    font-size: 14px;
}

.aem-loading[b-ulfuvaspdb] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px;
    color: #888;
}

    .aem-loading .spinner[b-ulfuvaspdb] {
        width: 32px;
        height: 32px;
        border: 3px solid #333;
        border-top-color: #b8960c;
        border-radius: 50%;
        animation: spin-b-ulfuvaspdb 1s linear infinite;
        margin-bottom: 12px;
    }

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

/* Right column - configuration */
.aem-right-column[b-ulfuvaspdb] {
    width: 62%;
    display: flex;
    flex-direction: column;
    background: #1e1e1e;
}

.aem-empty-config[b-ulfuvaspdb] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px;
}

.aem-empty-icon[b-ulfuvaspdb] {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.3;
}

.aem-empty-text[b-ulfuvaspdb] {
    font-size: 14px;
    color: #666;
    text-align: center;
}

.aem-config-panel[b-ulfuvaspdb] {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.aem-config-header[b-ulfuvaspdb] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 24px;
    border-bottom: 1px solid #333;
    background: #1a1a1a;
    flex-shrink: 0;
}

    .aem-config-header .btn-back[b-ulfuvaspdb] {
        background: #2a2a2a;
        border: none;
        color: #888;
        font-size: 16px;
        cursor: pointer;
        padding: 6px 10px;
        border-radius: 4px;
        transition: all 0.15s;
    }

        .aem-config-header .btn-back:hover[b-ulfuvaspdb] {
            background: #333;
            color: #fff;
        }

.aem-config-info[b-ulfuvaspdb] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
}

.aem-config-name[b-ulfuvaspdb] {
    font-size: 16px;
    font-weight: 500;
    color: #fff;
}

.aem-config-type[b-ulfuvaspdb] {
    font-size: 12px;
    color: #666;
}

.aem-unit-selector[b-ulfuvaspdb] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.aem-unit-label[b-ulfuvaspdb] {
    font-size: 13px;
    color: #888;
}

.aem-unit-select[b-ulfuvaspdb] {
    padding: 8px 12px;
    background: #2a2a2a;
    border: 1px solid #3a3a3a;
    border-radius: 4px;
    color: #fff;
    font-size: 13px;
    outline: none;
    min-width: 140px;
}

.aem-config-description[b-ulfuvaspdb] {
    padding: 12px 24px;
    font-size: 13px;
    color: #888;
    border-bottom: 1px solid #2a2a2a;
    flex-shrink: 0;
}

.aem-config-body[b-ulfuvaspdb] {
    flex: 1;
    overflow-y: auto;
    padding: 0;
}

/* Measurement header for Number+Variants */
.aem-measurement-header[b-ulfuvaspdb] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    background: #1a1a1a;
    border-bottom: 1px solid #333;
}

.aem-measurement-label[b-ulfuvaspdb] {
    font-size: 13px;
    color: #888;
}

.aem-unit-selector-inline[b-ulfuvaspdb] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.aem-unit-select-inline[b-ulfuvaspdb] {
    padding: 8px 12px;
    background: #2a2a2a;
    border: 1px solid #3a3a3a;
    border-radius: 4px;
    color: #fff;
    font-size: 13px;
    outline: none;
    min-width: 100px;
}

/* Base value section for Number with variants */
.aem-base-value-section[b-ulfuvaspdb] {
    border-bottom: 1px solid #333;
}

.aem-base-row[b-ulfuvaspdb] {
    background: rgba(184, 150, 12, 0.05);
}

    .aem-base-row .aem-variant-name[b-ulfuvaspdb] {
        color: #b8960c;
    }

/* Variants section label */
.aem-variants-section[b-ulfuvaspdb] {
    padding-top: 8px;
}

.aem-variants-label[b-ulfuvaspdb] {
    display: block;
    padding: 8px 24px 4px 24px;
    font-size: 12px;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Variant rows for Number type */
.aem-variant-list[b-ulfuvaspdb] {
    display: flex;
    flex-direction: column;
}

.aem-variant-row[b-ulfuvaspdb] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 24px;
    border-bottom: 1px solid #2a2a2a;
}

    .aem-variant-row:hover[b-ulfuvaspdb] {
        background: #1a1a1a;
    }

.aem-variant-label[b-ulfuvaspdb] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
}

.aem-variant-name[b-ulfuvaspdb] {
    color: #fff;
    font-size: 14px;
    font-weight: 500;
}

.aem-variant-desc[b-ulfuvaspdb] {
    color: #666;
    font-size: 12px;
}

.aem-variant-input[b-ulfuvaspdb] {
    display: flex;
    align-items: center;
    gap: 8px;
}

    .aem-variant-input input[b-ulfuvaspdb] {
        width: 120px;
        padding: 10px 14px;
        background: #2a2a2a;
        border: 1px solid #3a3a3a;
        border-radius: 6px;
        color: #fff;
        font-size: 14px;
        text-align: right;
        outline: none;
    }

        .aem-variant-input input:focus[b-ulfuvaspdb] {
            border-color: #b8960c;
        }

        .aem-variant-input input[b-ulfuvaspdb]::placeholder {
            color: #555;
        }

.aem-variant-unit[b-ulfuvaspdb] {
    color: #888;
    font-size: 14px;
    min-width: 40px;
}

/* Single value input */
.aem-single-value[b-ulfuvaspdb] {
    padding: 20px 24px;
}

    .aem-single-value label[b-ulfuvaspdb] {
        display: block;
        font-size: 13px;
        color: #888;
        margin-bottom: 8px;
    }

    .aem-single-value input[b-ulfuvaspdb] {
        width: 100%;
        padding: 12px 16px;
        background: #2a2a2a;
        border: 1px solid #3a3a3a;
        border-radius: 6px;
        color: #fff;
        font-size: 14px;
        outline: none;
        box-sizing: border-box;
    }

        .aem-single-value input:focus[b-ulfuvaspdb] {
            border-color: #b8960c;
        }

.aem-value-row[b-ulfuvaspdb] {
    display: flex;
    align-items: center;
    gap: 12px;
}

    .aem-value-row input[b-ulfuvaspdb] {
        flex: 1;
    }

.aem-value-unit[b-ulfuvaspdb] {
    color: #888;
    font-size: 14px;
    min-width: 40px;
}

/* Boolean field */
.aem-bool-field[b-ulfuvaspdb] {
    padding: 20px 24px;
}

.aem-bool-label[b-ulfuvaspdb] {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    color: #fff;
    font-size: 14px;
}

    .aem-bool-label input[b-ulfuvaspdb] {
        width: 18px;
        height: 18px;
        accent-color: #b8960c;
    }

.aem-bool-hint[b-ulfuvaspdb] {
    margin: 8px 0 0 0;
    color: #666;
    font-size: 12px;
}

/* Scale selection */
.aem-scale-list[b-ulfuvaspdb] {
    display: flex;
    flex-direction: column;
}

.aem-scale-row[b-ulfuvaspdb] {
    display: flex;
    align-items: center;
    padding: 14px 24px;
    cursor: pointer;
    border-bottom: 1px solid #2a2a2a;
    transition: background 0.1s;
}

    .aem-scale-row:hover[b-ulfuvaspdb] {
        background: #1a1a1a;
    }

    .aem-scale-row.selected[b-ulfuvaspdb] {
        background: rgba(184, 150, 12, 0.1);
    }

.aem-scale-indicator[b-ulfuvaspdb] {
    width: 24px;
    display: flex;
    justify-content: center;
    margin-right: 12px;
}

.aem-scale-dot[b-ulfuvaspdb] {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid #444;
    background: transparent;
    transition: all 0.15s;
}

    .aem-scale-dot.active[b-ulfuvaspdb] {
        border-color: #b8960c;
        background: #b8960c;
    }

.aem-scale-info[b-ulfuvaspdb] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.aem-scale-name[b-ulfuvaspdb] {
    color: #fff;
    font-size: 14px;
    font-weight: 500;
}

.aem-scale-desc[b-ulfuvaspdb] {
    color: #666;
    font-size: 12px;
}

.aem-scale-value[b-ulfuvaspdb] {
    color: #555;
    font-size: 14px;
    font-weight: 600;
    width: 24px;
    text-align: center;
}

/* Hierarchical selection */
.aem-hierarchy-container[b-ulfuvaspdb] {
    padding: 8px 0;
}

.aem-hierarchy-row[b-ulfuvaspdb] {
    display: flex;
    align-items: center;
    padding: 8px 16px;
    gap: 8px;
}

.aem-expand-btn[b-ulfuvaspdb] {
    background: transparent;
    border: none;
    color: #666;
    font-size: 10px;
    cursor: pointer;
    padding: 4px;
    width: 24px;
    text-align: center;
}

    .aem-expand-btn:hover[b-ulfuvaspdb] {
        color: #888;
    }

.aem-expand-placeholder[b-ulfuvaspdb] {
    width: 24px;
}

.aem-hierarchy-label[b-ulfuvaspdb] {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

    .aem-hierarchy-label input[b-ulfuvaspdb] {
        width: 18px;
        height: 18px;
        accent-color: #b8960c;
        cursor: pointer;
    }

.aem-hierarchy-name[b-ulfuvaspdb] {
    color: #fff;
    font-size: 14px;
}

.aem-hierarchy-desc[b-ulfuvaspdb] {
    color: #555;
    font-size: 12px;
    margin-left: auto;
}

/* Summary bar */
.aem-summary[b-ulfuvaspdb] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: #252525;
    border-top: 1px solid #333;
    flex-shrink: 0;
}

.aem-summary-label[b-ulfuvaspdb] {
    color: #888;
    font-size: 13px;
}

.aem-summary-value[b-ulfuvaspdb] {
    color: #b8960c;
    font-size: 13px;
    font-weight: 500;
}

/* Config footer with add button */
.aem-config-footer[b-ulfuvaspdb] {
    padding: 16px 24px;
    border-top: 1px solid #333;
    flex-shrink: 0;
}

.aem-add-btn[b-ulfuvaspdb] {
    width: 100%;
    padding: 14px;
    background: #b8960c;
    border: none;
    border-radius: 6px;
    color: #000;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}

    .aem-add-btn:hover:not(:disabled)[b-ulfuvaspdb] {
        background: #d4af37;
    }

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

/* Modal footer */
.aem-footer[b-ulfuvaspdb] {
    display: flex;
    justify-content: flex-end;
    padding: 16px 24px;
    border-top: 1px solid #333;
    flex-shrink: 0;
}

    .aem-footer .btn-secondary[b-ulfuvaspdb] {
        padding: 10px 20px;
        background: transparent;
        border: 1px solid #3a3a3a;
        border-radius: 4px;
        color: #fff;
        font-size: 14px;
        cursor: pointer;
        transition: all 0.15s;
    }

        .aem-footer .btn-secondary:hover[b-ulfuvaspdb] {
            background: #2a2a2a;
            border-color: #444;
        }

/* Button styles used in the component */
.btn-primary[b-ulfuvaspdb] {
    background: #b8960c;
    color: #000;
    border: none;
    font-weight: 600;
}

.btn-secondary[b-ulfuvaspdb] {
    background: transparent;
    border: 1px solid #3a3a3a;
    color: #fff;
}
/* /Components/Shared/AttributePickerModal.razor.rz.scp.css */
/* Attribute Picker Modal - Option 3 Design (Collapsible Sections) */

/* Overlay */
.attribute-picker-overlay[b-rn9u7gdpgc] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.75);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    animation: fadeIn-b-rn9u7gdpgc 0.2s ease-in-out;
}

    .attribute-picker-overlay.show[b-rn9u7gdpgc] {
        display: flex;
    }

@keyframes fadeIn-b-rn9u7gdpgc {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Modal Container */
.attribute-picker-modal[b-rn9u7gdpgc] {
    background: var(--lb-bg-elevated);
    border-radius: var(--lb-radius-lg);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
    max-width: 700px;
    width: 90%;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--lb-border-strong);
    animation: slideUp-b-rn9u7gdpgc 0.3s ease-out;
}

@keyframes slideUp-b-rn9u7gdpgc {
    from {
        transform: translateY(30px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Header */
.attribute-picker-header[b-rn9u7gdpgc] {
    padding: 1.5rem;
    border-bottom: 1px solid var(--lb-border-default);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.attribute-picker-title[b-rn9u7gdpgc] {
    margin: 0;
    font-size: 1.5rem;
    color: var(--lb-text-primary);
    font-weight: 600;
}

.attribute-picker-close[b-rn9u7gdpgc] {
    background: none;
    border: none;
    color: var(--lb-text-secondary);
    font-size: 1.75rem;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    border-radius: var(--lb-radius-sm);
    transition: all 0.2s;
    line-height: 1;
}

    .attribute-picker-close:hover[b-rn9u7gdpgc] {
        background: var(--lb-bg-hover);
        color: var(--lb-text-primary);
    }

/* Body */
.attribute-picker-body[b-rn9u7gdpgc] {
    padding: 1.5rem;
    overflow-y: auto;
    flex: 1;
    min-height: 400px;
}

/* Loading State */
.attribute-picker-loading[b-rn9u7gdpgc] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    color: var(--lb-text-muted);
}

    .attribute-picker-loading .spinner[b-rn9u7gdpgc] {
        width: 40px;
        height: 40px;
        border: 3px solid var(--lb-border-default);
        border-top-color: var(--lb-accent-primary);
        border-radius: 50%;
        animation: spin-b-rn9u7gdpgc 0.8s linear infinite;
        margin-bottom: 1rem;
    }

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

/* Search Bar */
.attribute-search-bar[b-rn9u7gdpgc] {
    position: relative;
    margin-bottom: 1.5rem;
}

.attribute-search-icon[b-rn9u7gdpgc] {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--lb-text-muted);
    pointer-events: none;
}

.attribute-search-input[b-rn9u7gdpgc] {
    width: 100%;
    padding: 0.65rem 2.5rem 0.65rem 2.5rem;
    background: var(--lb-bg-input);
    border: 1px solid var(--lb-border-default);
    border-radius: var(--lb-radius-sm);
    color: var(--lb-text-primary);
    font-size: 0.95rem;
    transition: all 0.2s;
}

    .attribute-search-input:focus[b-rn9u7gdpgc] {
        outline: none;
        border-color: var(--lb-accent-primary);
        box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.1);
    }

.attribute-search-clear[b-rn9u7gdpgc] {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--lb-text-muted);
    font-size: 1.25rem;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    border-radius: var(--lb-radius-sm);
    transition: all 0.2s;
}

    .attribute-search-clear:hover[b-rn9u7gdpgc] {
        background: var(--lb-bg-hover);
        color: var(--lb-text-primary);
    }

/* Section (Collapsible) */
.attribute-section[b-rn9u7gdpgc] {
    margin-bottom: 0.75rem;
}

.attribute-section-header[b-rn9u7gdpgc] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: var(--lb-bg-elevated-2);
    border-radius: var(--lb-radius-sm);
    cursor: pointer;
    transition: all 0.2s;
    border: 1px solid var(--lb-border-subtle);
}

    .attribute-section-header:hover[b-rn9u7gdpgc] {
        background: var(--lb-bg-elevated-3);
        border-color: var(--lb-border-default);
    }

    .attribute-section-header.recommended[b-rn9u7gdpgc] {
        border-left: 4px solid var(--lb-success);
    }

.attribute-section-icon[b-rn9u7gdpgc] {
    font-size: 1.125rem;
    flex-shrink: 0;
}

.attribute-section-title[b-rn9u7gdpgc] {
    flex: 1;
    font-weight: 600;
    color: var(--lb-text-primary);
}

.attribute-section-count[b-rn9u7gdpgc] {
    color: var(--lb-text-muted);
    font-size: 0.875rem;
}

.attribute-section-chevron[b-rn9u7gdpgc] {
    color: var(--lb-text-muted);
    transition: transform 0.2s;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.attribute-section-header.expanded .attribute-section-chevron[b-rn9u7gdpgc] {
    transform: rotate(90deg);
}

.attribute-section-content[b-rn9u7gdpgc] {
    padding: 0.5rem 0 0 0;
}

/* Attribute Item */
.attribute-item[b-rn9u7gdpgc] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 0.75rem;
    background: var(--lb-bg-elevated-2);
    border: 1px solid var(--lb-border-subtle);
    border-radius: var(--lb-radius-sm);
    cursor: pointer;
    transition: all 0.2s;
    margin-bottom: 0.5rem;
}

    .attribute-item:hover[b-rn9u7gdpgc] {
        background: var(--lb-bg-elevated-3);
        border-color: var(--lb-border-default);
    }

    .attribute-item.selected[b-rn9u7gdpgc] {
        border-color: var(--lb-accent-primary);
        background: rgba(212, 175, 55, 0.08);
    }

.attribute-item-content[b-rn9u7gdpgc] {
    flex: 1;
}

.attribute-item-name[b-rn9u7gdpgc] {
    font-weight: 600;
    color: var(--lb-text-primary);
    margin-bottom: 0.25rem;
}

.attribute-item-description[b-rn9u7gdpgc] {
    font-size: 0.875rem;
    color: var(--lb-text-muted);
    line-height: 1.4;
}

.attribute-item-category[b-rn9u7gdpgc] {
    display: inline-block;
    padding: 0.25rem 0.625rem;
    background: var(--lb-bg-elevated-3);
    color: var(--lb-text-secondary);
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 500;
    flex-shrink: 0;
}

/* Empty State */
.attribute-empty-state[b-rn9u7gdpgc] {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--lb-text-muted);
}

.attribute-empty-icon[b-rn9u7gdpgc] {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}

.attribute-empty-state p[b-rn9u7gdpgc] {
    margin: 0 0 0.5rem 0;
    font-size: 1rem;
}

.attribute-empty-state small[b-rn9u7gdpgc] {
    font-size: 0.875rem;
}

/* Configuration Panel */
.attribute-config-panel[b-rn9u7gdpgc] {
    margin-top: 1.5rem;
    padding: 1rem;
    background: rgba(212, 175, 55, 0.08);
    border: 1px solid var(--lb-accent-primary);
    border-radius: var(--lb-radius-md);
}

.attribute-config-header[b-rn9u7gdpgc] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    font-size: 0.95rem;
}

    .attribute-config-header span[b-rn9u7gdpgc] {
        font-weight: 500;
        color: var(--lb-accent-primary);
    }

    .attribute-config-header strong[b-rn9u7gdpgc] {
        color: var(--lb-text-primary);
    }

.attribute-recommended-badge[b-rn9u7gdpgc] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.625rem;
    background: rgba(76, 175, 80, 0.2);
    border: 1px solid var(--lb-success);
    color: var(--lb-success);
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    margin-left: auto;
}

.attribute-config-group[b-rn9u7gdpgc] {
    margin-bottom: 1rem;
}

    .attribute-config-group:last-child[b-rn9u7gdpgc] {
        margin-bottom: 0;
    }

.attribute-config-label[b-rn9u7gdpgc] {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: var(--lb-text-primary);
    font-size: 0.9rem;
}

    .attribute-config-label .required[b-rn9u7gdpgc] {
        color: var(--lb-error);
    }

.attribute-config-input[b-rn9u7gdpgc],
.attribute-config-select[b-rn9u7gdpgc] {
    width: 100%;
    padding: 0.625rem 0.75rem;
    background: var(--lb-bg-input);
    border: 1px solid var(--lb-border-default);
    border-radius: var(--lb-radius-sm);
    color: var(--lb-text-primary);
    font-size: 0.9rem;
    transition: all 0.2s;
}

    .attribute-config-input:focus[b-rn9u7gdpgc],
    .attribute-config-select:focus[b-rn9u7gdpgc] {
        outline: none;
        border-color: var(--lb-accent-primary);
        box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.1);
    }

    .attribute-config-input.invalid[b-rn9u7gdpgc] {
        border-color: var(--lb-error);
    }

.attribute-config-grid[b-rn9u7gdpgc] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

/* Footer */
.attribute-picker-footer[b-rn9u7gdpgc] {
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--lb-border-default);
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
}

.btn[b-rn9u7gdpgc] {
    padding: 0.5rem 1.25rem;
    border-radius: var(--lb-radius-sm);
    border: none;
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: 500;
    transition: all 0.2s;
}

.btn-primary[b-rn9u7gdpgc] {
    background: var(--lb-accent-primary);
    color: #000;
}

    .btn-primary:hover:not(:disabled)[b-rn9u7gdpgc] {
        background: var(--lb-accent-primary-light);
    }

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

.btn-secondary[b-rn9u7gdpgc] {
    background: var(--lb-bg-elevated-3);
    color: var(--lb-text-primary);
    border: 1px solid var(--lb-border-default);
}

    .btn-secondary:hover[b-rn9u7gdpgc] {
        background: var(--lb-bg-hover);
    }

/* Responsive */
@media (max-width: 768px) {
    .attribute-picker-modal[b-rn9u7gdpgc] {
        max-width: 95%;
        max-height: 90vh;
    }

    .attribute-config-grid[b-rn9u7gdpgc] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Shared/BaseDetails.razor.rz.scp.css */
/* BaseDetails Page Styles */
.ww-details-shell[b-1hluwdwzw0] {
    width: 100%;
}

.ww-main[b-1hluwdwzw0] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* ═══════════════════════════════════════════════════════ */
/* WIKI-STYLE LAYOUT: Infobox on LEFT, Summary on RIGHT */
/* ═══════════════════════════════════════════════════════ */
.top-row[b-1hluwdwzw0] {
    display: grid;
    grid-template-columns: clamp(240px, 25vw, 320px) 1fr;
    gap: 1.5rem;
    align-items: start;
}

/* LEFT: INFOBOX (Hero + Title + Attributes) */
.infobox[b-1hluwdwzw0] {
    background: var(--lb-bg-elevated-2, #2a2a2a);
    border: 1px solid var(--lb-border-default, #3a3a3a);
    border-radius: 8px;
    overflow: hidden;
}

.infobox-hero[b-1hluwdwzw0] {
    background: var(--lb-bg-elevated-1, #222);
    padding: 1rem;
    border-bottom: 1px solid var(--lb-border-default, #3a3a3a);
}

.infobox-hero.clickable[b-1hluwdwzw0] {
    cursor: pointer;
    transition: all 0.2s;
}

.infobox-hero.clickable:hover[b-1hluwdwzw0] {
    background: var(--lb-bg-elevated-2, #2a2a2a);
}

/* Pillar type badge */
.pillar-badge[b-1hluwdwzw0] {
    display: block;
    background: var(--lb-accent-primary);
    color: var(--lb-text-inverse);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0.25rem 0.75rem;
    border-radius: 3px;
    margin: 0.75rem auto 0;
    text-align: center;
    width: fit-content;
}

.infobox-title[b-1hluwdwzw0] {
    font-size: 18px;
    font-weight: 700;
    color: var(--lb-text-primary);
    text-align: center;
    padding: 0.75rem 1rem 0.25rem;
    border-bottom: 1px solid var(--lb-accent-primary, #d4a84b);
}

/* Editable name input */
.infobox-title-input[b-1hluwdwzw0] {
    display: block;
    width: calc(100% - 2rem);
    margin: 0.75rem 1rem 0.25rem;
    padding: 0.5rem;
    font-size: 18px;
    font-weight: 700;
    text-align: center;
    background: var(--lb-bg-elevated-2, #2a2a2a);
    border: 1px solid var(--lb-accent-primary, #d4a84b);
    border-radius: 4px;
    color: var(--lb-text-primary);
}

.infobox-title-input:focus[b-1hluwdwzw0] {
    outline: none;
    border-color: #e5b95c;
    box-shadow: 0 0 0 2px rgba(212, 168, 75, 0.2);
}

.infobox-subtitle[b-1hluwdwzw0] {
    font-size: 13px;
    font-style: italic;
    color: var(--lb-text-muted);
    text-align: center;
    padding: 0.25rem 1rem 0.75rem;
}

.infobox-attrs[b-1hluwdwzw0] {
    padding: 0.75rem 1rem;
}

.infobox-empty[b-1hluwdwzw0] {
    color: var(--lb-text-muted);
    font-style: italic;
    font-size: 13px;
    text-align: center;
    padding: 0.5rem 0;
}

/* RIGHT: SUMMARY CARD */
.summary-card[b-1hluwdwzw0] {
    min-height: 280px;
}

/* ═══════════════════════════════════════════════════════ */
/* INFOBOX ATTRIBUTE ROWS (View Mode) */
/* ═══════════════════════════════════════════════════════ */
.infobox-row[b-1hluwdwzw0] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--lb-border-subtle);
}

.infobox-row:last-child[b-1hluwdwzw0] {
    border-bottom: none;
}

.infobox-label[b-1hluwdwzw0] {
    font-size: 13px;
    color: var(--lb-text-muted);
    font-weight: 500;
}

.infobox-value[b-1hluwdwzw0] {
    font-size: 13px;
    color: var(--lb-accent-primary);
    font-weight: 600;
    text-align: right;
}

/* Responsive */
@media (max-width: 768px) {
    .top-row[b-1hluwdwzw0] {
        grid-template-columns: 1fr;
    }
    
    .infobox[b-1hluwdwzw0] {
        max-width: 360px;
        margin: 0 auto;
    }
}

.ww-hero-left[b-1hluwdwzw0] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    height: 100%; /* Ensure card fills grid cell height */
}

.fill-parent[b-1hluwdwzw0] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ww-attr-list[b-1hluwdwzw0] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--lb-border-default);
}

    .ww-attr-list .kv[b-1hluwdwzw0] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 1rem;
    }

    .ww-attr-list .k[b-1hluwdwzw0] {
        font-size: 13px;
        color: var(--lb-text-muted);
        font-weight: 500;
    }

    .ww-attr-list .v[b-1hluwdwzw0] {
        font-size: 14px;
        color: var(--lb-text-primary);
        font-weight: 600;
    }

.list[b-1hluwdwzw0] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

    .list li[b-1hluwdwzw0] {
        padding: 0.75rem 1rem;
        background: var(--lb-bg-elevated-2);
        border-radius: 6px;
        font-size: 14px;
    }

.pill[b-1hluwdwzw0] {
    display: inline-block;
    padding: 2px 8px;
    background: var(--lb-accent-primary);
    color: white;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    margin-right: 8px;
}

.list li a[b-1hluwdwzw0] {
    color: var(--lb-accent-primary);
    text-decoration: none;
    font-weight: 500;
}

    .list li a:hover[b-1hluwdwzw0] {
        text-decoration: underline;
    }

/* ═══════════════════════════════════════════════════════ */
/* UTILITY CLASSES */
/* ═══════════════════════════════════════════════════════ */
.d-flex[b-1hluwdwzw0] {
    display: flex;
}

.align-items-center[b-1hluwdwzw0] {
    align-items: center;
}

.gap-2[b-1hluwdwzw0] {
    gap: 0.5rem;
}

.mt-2[b-1hluwdwzw0] {
    margin-top: 0.5rem;
}

.mb-3[b-1hluwdwzw0] {
    margin-bottom: 1rem;
}

.text-muted[b-1hluwdwzw0] {
    color: var(--lb-text-muted);
}

.placeholder[b-1hluwdwzw0] {
    color: var(--lb-text-muted);
    font-style: italic;
    font-size: 14px;
    padding: 1.5rem;
    text-align: center;
    background: transparent;
    border: 1px dashed var(--lb-border-subtle);
    border-radius: 6px;
}

/* Empty state - centered with optional action button */
.empty-state[b-1hluwdwzw0] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 2rem 1.5rem;
    text-align: center;
    border: 1px dashed var(--lb-border-subtle);
    border-radius: 8px;
    background: var(--lb-bg-elevated);
}

.empty-state-text[b-1hluwdwzw0] {
    color: var(--lb-text-muted);
    font-size: 14px;
}

/* Author box in infobox */
.infobox-author[b-1hluwdwzw0] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    margin-top: 1rem;
    border-top: 1px solid var(--lb-border-subtle);
    background: var(--lb-bg-elevated-2);
}

.author-avatar[b-1hluwdwzw0] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--lb-accent-primary);
    color: var(--lb-text-inverse);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
    flex-shrink: 0;
}

.author-info[b-1hluwdwzw0] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.author-name[b-1hluwdwzw0] {
    color: var(--lb-accent-primary);
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.author-name:hover[b-1hluwdwzw0] {
    text-decoration: underline;
    color: #e5b95c;
}

.author-date[b-1hluwdwzw0] {
    color: var(--lb-text-muted);
    font-size: 12px;
}

.summary-text[b-1hluwdwzw0] {
    white-space: pre-line;
    margin: 0;
    line-height: 1.6;
}

/* ═══════════════════════════════════════════════════════ */
/* BUTTONS */
/* ═══════════════════════════════════════════════════════ */
.btn[b-1hluwdwzw0] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
}

.btn-sm[b-1hluwdwzw0] {
    padding: 0.375rem 0.75rem;
    font-size: 13px;
}

.btn-outline-secondary[b-1hluwdwzw0] {
    background: transparent;
    color: var(--lb-text-secondary);
    border: 1px solid var(--lb-border-default);
}

    .btn-outline-secondary:hover[b-1hluwdwzw0] {
        background: var(--lb-bg-hover);
        border-color: var(--lb-accent-primary);
        color: var(--lb-text-primary);
    }

.btn-outline-primary[b-1hluwdwzw0] {
    background: transparent;
    color: var(--lb-accent-primary);
    border: 1px solid var(--lb-accent-primary);
}

    .btn-outline-primary:hover[b-1hluwdwzw0] {
        background: var(--lb-accent-primary);
        color: white;
    }

.btn-primary[b-1hluwdwzw0] {
    background: var(--lb-accent-primary);
    color: white;
    border: none;
}

    .btn-primary:hover[b-1hluwdwzw0] {
        background: var(--lb-accent-primary-dark);
    }

.btn-secondary[b-1hluwdwzw0] {
    background: var(--lb-bg-elevated-2);
    color: var(--lb-text-primary);
    border: 1px solid var(--lb-border-default);
}

    .btn-secondary:hover[b-1hluwdwzw0] {
        background: var(--lb-bg-hover);
    }

.btn-danger[b-1hluwdwzw0], .btn-outline-danger[b-1hluwdwzw0] {
    background: transparent;
    color: #dc3545;
    border: 1px solid #dc3545;
}

    .btn-danger:hover[b-1hluwdwzw0], .btn-outline-danger:hover[b-1hluwdwzw0] {
        background: #dc3545;
        color: white;
    }

.btn-link[b-1hluwdwzw0] {
    background: transparent;
    color: var(--lb-accent-primary);
    border: none;
    padding: 0.25rem 0.5rem;
    text-decoration: none;
}

    .btn-link:hover[b-1hluwdwzw0] {
        text-decoration: underline;
    }

.btn:disabled[b-1hluwdwzw0] {
    opacity: 0.5;
    cursor: not-allowed;
}

input[type="checkbox"][b-1hluwdwzw0] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

label[b-1hluwdwzw0] {
    font-size: 14px;
    color: var(--lb-text-secondary);
    cursor: pointer;
    user-select: none;
}

/* ═══════════════════════════════════════════════════════ */
/* ALERTS */
/* ═══════════════════════════════════════════════════════ */
.alert[b-1hluwdwzw0] {
    padding: 0.75rem 1rem;
    border-radius: 6px;
    font-size: 14px;
    margin-top: 0.5rem;
}

.alert-danger[b-1hluwdwzw0] {
    background: rgba(220, 53, 69, 0.1);
    border: 1px solid rgba(220, 53, 69, 0.3);
    color: #ff6b7a;
}

.alert-success[b-1hluwdwzw0] {
    background: rgba(40, 167, 69, 0.1);
    border: 1px solid rgba(40, 167, 69, 0.3);
    color: #4ade80;
}

.alert-warning[b-1hluwdwzw0] {
    background: rgba(255, 193, 7, 0.1);
    border: 1px solid rgba(255, 193, 7, 0.3);
    color: #ffc107;
}

/* ═══════════════════════════════════════════════════════ */
/* BADGES */
/* ═══════════════════════════════════════════════════════ */
.badge[b-1hluwdwzw0] {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
}

.badge-primary[b-1hluwdwzw0] {
    background: var(--lb-accent-primary);
    color: white;
}

.badge-success[b-1hluwdwzw0] {
    background: #28a745;
    color: white;
}

.system-badge[b-1hluwdwzw0] {
    padding: 2px 8px;
    background: var(--lb-accent-primary);
    color: white;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
}

/* ═══════════════════════════════════════════════════════ */
/* RATING COMPONENT STYLES */
/* ═══════════════════════════════════════════════════════ */
.rating-component[b-1hluwdwzw0] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.rating-display[b-1hluwdwzw0] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.rating-stars[b-1hluwdwzw0] {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.rating-value[b-1hluwdwzw0] {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--lb-accent-primary);
}

.stars[b-1hluwdwzw0] {
    display: flex;
    gap: 2px;
}

.star[b-1hluwdwzw0] {
    font-size: 1.5rem;
    color: var(--lb-border-default);
}

    .star.filled[b-1hluwdwzw0] {
        color: #ffd700;
    }

.rating-count[b-1hluwdwzw0] {
    color: var(--lb-text-muted);
    font-size: 14px;
}

.user-rating-section[b-1hluwdwzw0] {
    padding: 1rem;
    background: var(--bg-tertiary);
    border-radius: 6px;
}

.current-rating[b-1hluwdwzw0] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 14px;
}

.rating-input[b-1hluwdwzw0] {
    margin-top: 1rem;
}

.star-input[b-1hluwdwzw0] {
    display: flex;
    gap: 4px;
    margin-bottom: 0.75rem;
}

.star-button[b-1hluwdwzw0] {
    background: transparent;
    border: none;
    font-size: 2rem;
    color: var(--lb-border-default);
    cursor: pointer;
    padding: 0;
    transition: color 0.1s ease;
}

    .star-button:hover[b-1hluwdwzw0],
    .star-button.filled[b-1hluwdwzw0] {
        color: #ffd700;
    }

.rating-actions[b-1hluwdwzw0] {
    display: flex;
    gap: 0.5rem;
}

.rating-breakdown[b-1hluwdwzw0] {
    margin-top: 1rem;
}

    .rating-breakdown summary[b-1hluwdwzw0] {
        cursor: pointer;
        font-size: 14px;
        color: var(--lb-text-secondary);
        user-select: none;
    }

.breakdown-bars[b-1hluwdwzw0] {
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.breakdown-row[b-1hluwdwzw0] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 13px;
}

.stars-label[b-1hluwdwzw0] {
    width: 3rem;
    color: var(--lb-text-secondary);
}

.progress-bar[b-1hluwdwzw0] {
    flex: 1;
    height: 8px;
    background: var(--bg-tertiary);
    border-radius: 4px;
    overflow: hidden;
}

.progress-fill[b-1hluwdwzw0] {
    height: 100%;
    background: var(--lb-accent-primary);
    transition: width 0.3s ease;
}

.breakdown-row .count[b-1hluwdwzw0] {
    width: 2rem;
    text-align: right;
    color: var(--lb-text-muted);
}

.no-ratings[b-1hluwdwzw0],
.login-prompt[b-1hluwdwzw0] {
    padding: 1rem;
    text-align: center;
}

/* ═══════════════════════════════════════════════════════ */
/* COMMENT COMPONENT STYLES */
/* ═══════════════════════════════════════════════════════ */
.comment-list-component[b-1hluwdwzw0] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.no-comments[b-1hluwdwzw0] {
    padding: 1rem;
    text-align: center;
}

.comments-container[b-1hluwdwzw0] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.load-more[b-1hluwdwzw0] {
    display: flex;
    justify-content: center;
    margin-top: 1rem;
}

.comment-item[b-1hluwdwzw0] {
    padding: 1rem;
    background: var(--lb-bg-elevated-2);
    border-radius: 6px;
    border-left: 3px solid var(--lb-border-default);
}

    .comment-item.deleted[b-1hluwdwzw0] {
        opacity: 0.6;
        font-style: italic;
    }

.comment-header[b-1hluwdwzw0] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.comment-author[b-1hluwdwzw0] {
    font-size: 14px;
    font-weight: 600;
    color: var(--lb-text-primary);
}

.comment-meta[b-1hluwdwzw0] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 12px;
    color: var(--lb-text-muted);
}

.edited-badge[b-1hluwdwzw0] {
    font-style: italic;
}

.comment-body[b-1hluwdwzw0] {
    margin-bottom: 0.75rem;
}

.comment-content[b-1hluwdwzw0] {
    font-size: 14px;
    color: var(--lb-text-secondary);
    line-height: 1.6;
    margin: 0;
}

.comment-actions[b-1hluwdwzw0] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.comment-reply-editor[b-1hluwdwzw0] {
    margin-top: 1rem;
    padding-left: 1rem;
    border-left: 2px solid var(--lb-accent-primary);
}

.comment-replies[b-1hluwdwzw0] {
    margin-top: 1rem;
    padding-left: 1rem;
    border-left: 2px solid var(--lb-border-default);
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.deleted-message[b-1hluwdwzw0] {
    padding: 0.5rem;
}

/* Comment Editor */
.comment-editor[b-1hluwdwzw0] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.editor-container[b-1hluwdwzw0] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.comment-textarea[b-1hluwdwzw0] {
    width: 100%;
    min-height: 100px;
    padding: 0.75rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--lb-border-default);
    border-radius: 6px;
    color: var(--lb-text-primary);
    font-size: 14px;
    font-family: inherit;
    resize: vertical;
}

    .comment-textarea:focus[b-1hluwdwzw0] {
        outline: none;
        border-color: var(--lb-accent-primary);
    }

.editor-footer[b-1hluwdwzw0] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.character-count[b-1hluwdwzw0] {
    font-size: 12px;
}

    .character-count.text-warning[b-1hluwdwzw0] {
        color: #ffc107;
    }

.editor-actions[b-1hluwdwzw0] {
    display: flex;
    gap: 0.5rem;
}

.new-comment-section[b-1hluwdwzw0] {
    margin-bottom: 1.5rem;
}

/* ═══════════════════════════════════════════════════════ */
/* STAT BLOCK COMPONENT STYLES */
/* ═══════════════════════════════════════════════════════ */
.stat-block-display[b-1hluwdwzw0] {
    padding: 1rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--lb-border-default);
    border-radius: 6px;
}

.stat-block-header[b-1hluwdwzw0] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.stat-block-title-row[b-1hluwdwzw0] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.stat-block-title[b-1hluwdwzw0] {
    font-size: 18px;
    font-weight: 600;
    color: var(--lb-text-primary);
    margin: 0;
}

.stat-block-actions[b-1hluwdwzw0] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.stat-groups[b-1hluwdwzw0] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.stat-group[b-1hluwdwzw0] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.stat-group-title[b-1hluwdwzw0] {
    font-size: 16px;
    font-weight: 600;
    color: var(--lb-accent-primary);
    margin: 0 0 0.5rem 0;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--lb-border-default);
}

.stat-values[b-1hluwdwzw0] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.stat-row[b-1hluwdwzw0] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--lb-border-subtle);
}

    .stat-row:last-child[b-1hluwdwzw0] {
        border-bottom: none;
    }

.stat-name[b-1hluwdwzw0] {
    font-size: 14px;
    color: var(--lb-text-secondary);
}

.stat-value[b-1hluwdwzw0] {
    font-size: 14px;
    color: var(--lb-text-primary);
    font-weight: 600;
}

    .stat-value .form-control-sm[b-1hluwdwzw0] {
        width: 120px;
        padding: 0.25rem 0.5rem;
        font-size: 13px;
    }

.edit-actions[b-1hluwdwzw0] {
    display: flex;
    gap: 0.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--lb-border-default);
}

.stat-blocks-container[b-1hluwdwzw0] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.stat-block-wrapper[b-1hluwdwzw0] {
    /* Spacing between stat blocks */
}

/* ═══════════════════════════════════════════════════════ */
/* MEDIA GALLERY COMPONENT STYLES */
/* ═══════════════════════════════════════════════════════ */
.media-gallery-component[b-1hluwdwzw0] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.no-media[b-1hluwdwzw0] {
    padding: 1rem;
    text-align: center;
}

.media-grid[b-1hluwdwzw0] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
}

    .media-grid.list[b-1hluwdwzw0] {
        grid-template-columns: 1fr;
    }

.media-item[b-1hluwdwzw0] {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    background: var(--lb-bg-elevated-2);
    aspect-ratio: 1;
    cursor: pointer;
    transition: transform 0.2s ease;
}

    .media-item:hover[b-1hluwdwzw0] {
        transform: scale(1.02);
    }

    .media-item.main-image[b-1hluwdwzw0] {
        grid-column: span 2;
        grid-row: span 2;
    }

.media-image-container[b-1hluwdwzw0] {
    position: relative;
    width: 100%;
    height: 100%;
}

.media-image[b-1hluwdwzw0] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.main-image-badge[b-1hluwdwzw0] {
    position: absolute;
    top: 8px;
    right: 8px;
}

.media-placeholder[b-1hluwdwzw0] {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--lb-text-muted);
    font-size: 14px;
    gap: 0.5rem;
}

.media-type-icon[b-1hluwdwzw0] {
    font-size: 2rem;
}

.media-caption[b-1hluwdwzw0] {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0.5rem;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    font-size: 12px;
}

.media-size[b-1hluwdwzw0] {
    position: absolute;
    top: 8px;
    left: 8px;
    padding: 2px 6px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    font-size: 11px;
    border-radius: 4px;
}

.gallery-actions[b-1hluwdwzw0] {
    display: flex;
    justify-content: center;
}

/* Media Viewer Overlay */
.media-viewer-overlay[b-1hluwdwzw0] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 2rem;
}

.media-viewer-container[b-1hluwdwzw0] {
    background: var(--bg-primary);
    border-radius: 8px;
    max-width: 90vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.media-viewer-header[b-1hluwdwzw0] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    border-bottom: 1px solid var(--lb-border-default);
}

    .media-viewer-header h5[b-1hluwdwzw0] {
        margin: 0;
        font-size: 16px;
        color: var(--lb-text-primary);
    }

.btn-close[b-1hluwdwzw0] {
    background: transparent;
    border: none;
    color: var(--lb-text-primary);
    font-size: 24px;
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .btn-close:hover[b-1hluwdwzw0] {
        color: var(--lb-accent-primary);
    }

.media-viewer-body[b-1hluwdwzw0] {
    padding: 2rem;
    overflow: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.media-viewer-image[b-1hluwdwzw0] {
    max-width: 100%;
    max-height: 70vh;
    object-fit: contain;
}

.media-viewer-placeholder[b-1hluwdwzw0] {
    text-align: center;
    padding: 2rem;
}

.media-viewer-actions[b-1hluwdwzw0] {
    display: flex;
    gap: 0.5rem;
    padding: 1rem;
    border-top: 1px solid var(--lb-border-default);
    justify-content: center;
}

/* Upload Dialog */
.upload-dialog-overlay[b-1hluwdwzw0] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.upload-dialog[b-1hluwdwzw0] {
    background: var(--bg-primary);
    border: 1px solid var(--lb-border-default);
    border-radius: 8px;
    padding: 2rem;
    max-width: 500px;
    width: 90%;
}

    .upload-dialog h5[b-1hluwdwzw0] {
        margin: 0 0 1rem 0;
        font-size: 18px;
        color: var(--lb-text-primary);
    }

/* ═══════════════════════════════════════════════════════ */
/* FORM CONTROLS */
/* ═══════════════════════════════════════════════════════ */
.form-control[b-1hluwdwzw0] {
    width: 100%;
    padding: 0.5rem 0.75rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--lb-border-default);
    border-radius: 6px;
    color: var(--lb-text-primary);
    font-size: 14px;
    font-family: inherit;
}

    .form-control:focus[b-1hluwdwzw0] {
        outline: none;
        border-color: var(--lb-accent-primary);
    }

.form-control-sm[b-1hluwdwzw0] {
    padding: 0.375rem 0.5rem;
    font-size: 13px;
}

/* ═══════════════════════════════════════════════════════ */
/* RESPONSIVE - TABLET (1024px)
/* ═══════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
    .top-row[b-1hluwdwzw0] {
        grid-template-columns: clamp(220px, 30vw, 280px) 1fr;
        gap: 1.25rem;
    }
}

/* ═══════════════════════════════════════════════════════ */
/* RESPONSIVE - MOBILE (768px)
/* ═══════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    /* Main layout - Stack vertically */
    .top-row[b-1hluwdwzw0] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .infobox[b-1hluwdwzw0] {
        max-width: 100%;
        margin: 0;
        order: 1;
    }

    .top-row-right[b-1hluwdwzw0] {
        order: 2;
    }

    .ww-main[b-1hluwdwzw0] {
        gap: 1rem;
    }

    /* Infobox adjustments */
    .infobox-title[b-1hluwdwzw0] {
        font-size: 16px;
        padding: 0.625rem 0.75rem 0.25rem;
    }

    .infobox-hero[b-1hluwdwzw0] {
        padding: 0.75rem;
    }

    .infobox-attrs[b-1hluwdwzw0] {
        padding: 0.625rem 0.75rem;
    }

    .infobox-row[b-1hluwdwzw0] {
        padding: 0.5rem 0;
        gap: 0.5rem;
    }

    .infobox-label[b-1hluwdwzw0],
    .infobox-value[b-1hluwdwzw0] {
        font-size: 12px;
    }

    /* Collapsible sections - Touch friendly */
    .collapsible-header[b-1hluwdwzw0] {
        padding: 1rem;
        min-height: 48px;
    }

    .collapsible-title[b-1hluwdwzw0] {
        font-size: 15px;
    }

    .collapsible-content[b-1hluwdwzw0] {
        padding: 0.875rem 1rem;
    }

    /* Ratings */
    .rating-stars[b-1hluwdwzw0] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .rating-value[b-1hluwdwzw0] {
        font-size: 2rem;
    }

    .star[b-1hluwdwzw0] {
        font-size: 1.25rem;
    }

    .star-button[b-1hluwdwzw0] {
        font-size: 1.75rem;
        min-width: 44px;
        min-height: 44px;
    }

    /* Media Gallery */
    .media-grid[b-1hluwdwzw0] {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: 0.75rem;
    }

    .media-item.main-image[b-1hluwdwzw0] {
        grid-column: span 1;
        grid-row: span 1;
    }

    .media-viewer-overlay[b-1hluwdwzw0] {
        padding: 0;
    }

    .media-viewer-container[b-1hluwdwzw0] {
        max-width: 100vw;
        max-height: 100vh;
        border-radius: 0;
    }

    /* Stat blocks */
    .stat-row[b-1hluwdwzw0] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }

    .stat-value .form-control-sm[b-1hluwdwzw0] {
        width: 100%;
    }

    .stat-block-header[b-1hluwdwzw0] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .stat-block-actions[b-1hluwdwzw0] {
        width: 100%;
        justify-content: flex-start;
    }

    /* Comments */
    .comment-item[b-1hluwdwzw0] {
        padding: 0.875rem;
    }

    .comment-header[b-1hluwdwzw0] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.375rem;
    }

    .comment-actions[b-1hluwdwzw0] {
        margin-top: 0.5rem;
    }

    .comment-actions .btn[b-1hluwdwzw0] {
        min-height: 44px;
    }

    .comment-replies[b-1hluwdwzw0] {
        padding-left: 0.75rem;
    }

    /* Attributes */
    .attribute-item[b-1hluwdwzw0] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
        padding: 0.75rem;
    }

    .attribute-value[b-1hluwdwzw0] {
        text-align: left;
    }

    .attribute-edit-header[b-1hluwdwzw0] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .attribute-edit-actions[b-1hluwdwzw0] {
        width: 100%;
        justify-content: flex-end;
    }

    /* Relationships */
    .relationship-item[b-1hluwdwzw0] {
        padding: 0.875rem;
    }

    .relationship-edit-header[b-1hluwdwzw0] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .relationship-edit-actions[b-1hluwdwzw0] {
        width: 100%;
        justify-content: flex-end;
    }

    /* Buttons - Touch friendly */
    .btn[b-1hluwdwzw0] {
        min-height: 44px;
        padding: 0.625rem 1rem;
    }

    .btn-sm[b-1hluwdwzw0] {
        min-height: 40px;
        padding: 0.5rem 0.75rem;
    }

    .btn-icon[b-1hluwdwzw0] {
        width: 40px;
        height: 40px;
    }

    /* Forms */
    .form-control[b-1hluwdwzw0] {
        font-size: 16px; /* Prevent iOS zoom */
        padding: 0.75rem;
    }

    .comment-textarea[b-1hluwdwzw0] {
        font-size: 16px;
        min-height: 120px;
    }

    /* Upload Dialog */
    .upload-dialog[b-1hluwdwzw0] {
        width: 100%;
        max-width: 100%;
        border-radius: 0;
        min-height: 100vh;
    }

    /* Empty States */
    .empty-state[b-1hluwdwzw0] {
        padding: 1.5rem 1rem;
    }

    .placeholder[b-1hluwdwzw0] {
        padding: 1rem;
    }

    /* Author box */
    .infobox-author[b-1hluwdwzw0] {
        padding: 0.875rem;
    }

    .author-avatar[b-1hluwdwzw0] {
        width: 40px;
        height: 40px;
    }
}

/* ═══════════════════════════════════════════════════════ */
/* RESPONSIVE - SMALL MOBILE (480px)
/* ═══════════════════════════════════════════════════════ */
@media (max-width: 480px) {
    .infobox-title[b-1hluwdwzw0] {
        font-size: 15px;
    }

    .pillar-badge[b-1hluwdwzw0] {
        font-size: 10px;
    }

    /* Ratings */
    .rating-value[b-1hluwdwzw0] {
        font-size: 1.75rem;
    }

    .star[b-1hluwdwzw0] {
        font-size: 1.1rem;
    }

    .star-button[b-1hluwdwzw0] {
        font-size: 1.5rem;
    }

    /* Media Grid */
    .media-grid[b-1hluwdwzw0] {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
    }

    /* Collapsible */
    .collapsible-header[b-1hluwdwzw0] {
        padding: 0.875rem;
    }

    .collapsible-title[b-1hluwdwzw0] {
        font-size: 14px;
    }

    .collapsible-count[b-1hluwdwzw0] {
        font-size: 12px;
        padding: 2px 8px;
    }

    /* Stat blocks */
    .stat-group-title[b-1hluwdwzw0] {
        font-size: 14px;
    }

    .stat-name[b-1hluwdwzw0],
    .stat-value[b-1hluwdwzw0] {
        font-size: 13px;
    }

    /* Comments */
    .comment-item[b-1hluwdwzw0] {
        padding: 0.75rem;
    }

    .comment-author[b-1hluwdwzw0] {
        font-size: 13px;
    }

    .comment-content[b-1hluwdwzw0] {
        font-size: 13px;
    }

    /* Universe link */
    .infobox-universe[b-1hluwdwzw0] {
        flex-direction: column;
        gap: 0.25rem;
    }
}

/* ═══════════════════════════════════════════════════════ */
/* RELATIONSHIP STYLES - VIEW MODE */
/* ═══════════════════════════════════════════════════════ */
.relationship-list[b-1hluwdwzw0] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.relationship-item[b-1hluwdwzw0] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: var(--lb-bg-elevated-2);
    border-radius: 6px;
    font-size: 14px;
}

.relationship-phrase[b-1hluwdwzw0] {
    color: var(--lb-text-secondary);
    font-weight: 500;
}

.relationship-target[b-1hluwdwzw0] {
    color: var(--lb-accent-primary);
    font-weight: 600;
    text-decoration: none;
    transition: color 0.15s ease;
}

.relationship-target:hover[b-1hluwdwzw0] {
    color: #5aa3e0;
    text-decoration: underline;
}

.relationship-notes[b-1hluwdwzw0] {
    flex-basis: 100%;
    margin-top: 0.25rem;
    font-size: 13px;
    color: var(--lb-text-muted);
    font-style: italic;
}

/* ═══════════════════════════════════════════════════════ */
/* RELATIONSHIP STYLES - EDIT MODE */
/* ═══════════════════════════════════════════════════════ */
.relationship-edit-list[b-1hluwdwzw0] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.relationship-edit-item[b-1hluwdwzw0] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: var(--lb-bg-elevated-2);
    border-radius: 6px;
    border: 1px solid var(--lb-border-default);
}

.relationship-edit-header[b-1hluwdwzw0] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.relationship-edit-info[b-1hluwdwzw0] {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    flex-wrap: wrap;
    min-width: 0;
}

.relationship-edit-phrase[b-1hluwdwzw0] {
    font-weight: 600;
    color: var(--lb-text-primary);
    font-size: 14px;
}

.relationship-edit-target[b-1hluwdwzw0] {
    color: var(--lb-accent-primary);
    font-size: 14px;
}

.relationship-edit-actions[b-1hluwdwzw0] {
    display: flex;
    gap: 0.25rem;
    flex-shrink: 0;
}

.btn-icon[b-1hluwdwzw0] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: var(--lb-text-secondary);
    font-size: 14px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-icon:hover[b-1hluwdwzw0] {
    background: var(--lb-bg-hover);
    color: var(--lb-text-primary);
}

.btn-icon-danger:hover[b-1hluwdwzw0] {
    background: rgba(220, 53, 69, 0.15);
    color: #ff6b7a;
}

.relationship-edit-item textarea[b-1hluwdwzw0] {
    background: var(--lb-bg-elevated-1);
    border-color: var(--lb-border-default);
    font-size: 13px;
    resize: none;
}

.relationship-edit-item textarea:focus[b-1hluwdwzw0] {
    border-color: var(--lb-accent-primary);
    outline: none;
}

.top-row-right[b-1hluwdwzw0] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    flex: 1;
    min-width: 0;
}

/* ═══════════════════════════════════════════════════════ */
/* COLLAPSIBLE SECTIONS */
/* ═══════════════════════════════════════════════════════ */
.collapsible-section[b-1hluwdwzw0] {
    background: var(--lb-bg-elevated-1, #1e1e1e);
    border: 1px solid var(--lb-border-default, #3a3a3a);
    border-radius: 8px;
    overflow: hidden;
}

.collapsible-header[b-1hluwdwzw0] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    cursor: pointer;
    user-select: none;
    transition: background 0.2s;
}

.collapsible-header:hover[b-1hluwdwzw0] {
    background: var(--lb-bg-elevated-2, #252525);
}

.collapsible-icon[b-1hluwdwzw0] {
    font-size: 12px;
    color: var(--lb-text-muted, #888);
    width: 16px;
}

.collapsible-title[b-1hluwdwzw0] {
    font-size: 16px;
    font-weight: 600;
    color: var(--lb-text-primary, #e8e8e8);
    flex: 1;
}

.collapsible-count[b-1hluwdwzw0] {
    font-size: 13px;
    color: var(--lb-accent-primary);
    background: var(--lb-bg-elevated-3);
    padding: 2px 10px;
    border-radius: 12px;
    font-weight: 600;
}

.collapsible-content[b-1hluwdwzw0] {
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--lb-border-default, #3a3a3a);
}

/* ═══════════════════════════════════════════════════════ */
/* ATTRIBUTE LIST - VIEW MODE */
/* ═══════════════════════════════════════════════════════ */
.attribute-list[b-1hluwdwzw0] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.attribute-item[b-1hluwdwzw0] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.6rem 0.75rem;
    background: var(--lb-bg-elevated-2, #252525);
    border-radius: 6px;
}

.attribute-name[b-1hluwdwzw0] {
    font-size: 14px;
    color: var(--lb-text-secondary, #a0a0a0);
    font-weight: 500;
}

.attribute-value[b-1hluwdwzw0] {
    font-size: 14px;
    color: var(--lb-accent-primary, #d4a84b);
    font-weight: 600;
}

/* ═══════════════════════════════════════════════════════ */
/* ATTRIBUTE LIST - EDIT MODE */
/* ═══════════════════════════════════════════════════════ */
.attribute-edit-list[b-1hluwdwzw0] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.attribute-edit-item[b-1hluwdwzw0] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: var(--lb-bg-elevated-2, #252525);
    border-radius: 6px;
    border: 1px solid var(--lb-border-default, #3a3a3a);
}

.attribute-edit-header[b-1hluwdwzw0] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.attribute-edit-info[b-1hluwdwzw0] {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    flex-wrap: wrap;
    min-width: 0;
}

.attribute-edit-name[b-1hluwdwzw0] {
    font-weight: 600;
    color: var(--lb-text-primary, #e8e8e8);
    font-size: 14px;
}

.attribute-edit-value[b-1hluwdwzw0] {
    color: var(--lb-accent-primary, #d4a84b);
    font-size: 14px;
}

.attribute-edit-actions[b-1hluwdwzw0] {
    display: flex;
    gap: 0.25rem;
    flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════ */
/* INFOBOX ADDITIONS */
/* ═══════════════════════════════════════════════════════ */
.infobox-more[b-1hluwdwzw0] {
    font-size: 12px;
    color: var(--lb-text-muted);
    text-align: center;
    padding: 0.5rem 0;
    font-style: italic;
}

.infobox-config-btn[b-1hluwdwzw0] {
    width: 100%;
    margin-top: 0.75rem;
}

.infobox-row-rel[b-1hluwdwzw0] {
    background: var(--lb-bg-elevated-3);
    margin: 0 -1rem;
    padding: 0.5rem 1rem;
}

.infobox-link[b-1hluwdwzw0] {
    text-decoration: none;
    transition: color 0.15s;
}

.infobox-link:hover[b-1hluwdwzw0] {
    text-decoration: underline;
    color: #e5b95c;
}

/* Universe Section */
.infobox-universe[b-1hluwdwzw0] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: linear-gradient(135deg, rgba(138, 43, 226, 0.1), rgba(75, 0, 130, 0.15));
    border-top: 1px solid rgba(138, 43, 226, 0.2);
}

.universe-label[b-1hluwdwzw0] {
    font-size: 12px;
    color: var(--lb-text-muted);
    font-weight: 500;
}

.universe-link[b-1hluwdwzw0] {
    font-size: 14px;
    font-weight: 600;
    color: #a855f7;
    text-decoration: none;
    transition: all 0.2s;
}

.universe-link:hover[b-1hluwdwzw0] {
    color: #c084fc;
    text-decoration: underline;
}

/* Collaboration Settings */
.collaboration-settings-content[b-1hluwdwzw0] {
    padding: 0.5rem 0;
}

.collaboration-settings-content .setting-description[b-1hluwdwzw0] {
    color: var(--lb-text-secondary);
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

.collaboration-settings-content .setting-group[b-1hluwdwzw0] {
    margin-bottom: 1rem;
}

.collaboration-settings-content .setting-label[b-1hluwdwzw0] {
    display: block;
    font-weight: 600;
    color: var(--lb-text-primary);
    margin-bottom: 0.5rem;
}

.collaboration-settings-content .setting-select[b-1hluwdwzw0] {
    width: 100%;
    max-width: 400px;
    padding: 0.75rem 1rem;
    background: var(--lb-bg-primary);
    border: 1px solid var(--lb-border-default);
    border-radius: var(--lb-radius-md, 8px);
    color: var(--lb-text-primary);
    font-size: 0.95rem;
    cursor: pointer;
    transition: border-color 0.2s;
}

.collaboration-settings-content .setting-select:focus[b-1hluwdwzw0] {
    outline: none;
    border-color: var(--lb-accent-primary);
}

.collaboration-settings-content .setting-select option[b-1hluwdwzw0] {
    background: var(--lb-bg-primary);
    color: var(--lb-text-primary);
}

.collaboration-settings-content .setting-hint[b-1hluwdwzw0] {
    display: block;
    margin-top: 0.5rem;
    font-size: 0.85rem;
    color: var(--lb-text-muted);
}
/* /Components/Shared/EditToolbar.razor.rz.scp.css */
/* Edit Toolbar - Sticky bar below nav when editing */

.ww-edit-toolbar[b-68djonctr5] {
    position: sticky;
    top: 70px; /* Position below the nav bar (70px height) */
    z-index: 99; /* Below nav's z-index of 100 */
    background: linear-gradient(135deg, #1a1a1a 0%, #0d0d0d 100%);
    border-bottom: 1px solid var(--lb-accent-primary, #d4af37);
    padding: 0.75rem 2rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.ww-edit-toolbar-content[b-68djonctr5] {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.ww-edit-toolbar-left[b-68djonctr5] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.ww-edit-toolbar-indicator[b-68djonctr5] {
    width: 8px;
    height: 8px;
    background: var(--lb-accent-primary, #d4af37);
    border-radius: 50%;
    animation: pulse-b-68djonctr5 2s infinite;
}

@keyframes pulse-b-68djonctr5 {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

.ww-edit-toolbar-label[b-68djonctr5] {
    color: var(--lb-accent-primary, #d4af37);
    font-weight: 600;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.ww-edit-toolbar-target[b-68djonctr5] {
    color: var(--lb-text-primary, #e8e8e8);
    font-size: 0.875rem;
}

.ww-edit-toolbar-right[b-68djonctr5] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Toolbar buttons base */
.ww-btn-toolbar[b-68djonctr5] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
}

/* Save button - gold */
.ww-btn-toolbar-save[b-68djonctr5] {
    background: linear-gradient(135deg, var(--lb-accent-primary, #d4af37), var(--lb-accent-secondary, #b8960f));
    color: #0a0a0a;
}

    .ww-btn-toolbar-save:hover[b-68djonctr5] {
        transform: translateY(-1px);
        box-shadow: 0 4px 8px rgba(212, 175, 55, 0.3);
        color: #0a0a0a;
    }

/* Cancel button - dark */
.ww-btn-toolbar-cancel[b-68djonctr5] {
    background: var(--lb-bg-elevated, #1a1a1a);
    border: 1px solid var(--lb-border-default, #444);
    color: var(--lb-text-secondary, #a0a0a0);
}

    .ww-btn-toolbar-cancel:hover[b-68djonctr5] {
        background: var(--lb-bg-hover, #252525);
        color: var(--lb-text-primary, #e8e8e8);
    }

/* Danger/Delete button - red outline */
.ww-btn-toolbar-danger[b-68djonctr5] {
    background: transparent;
    border: 1px solid var(--lb-danger, #dc3545);
    color: var(--lb-danger, #dc3545);
}

    .ww-btn-toolbar-danger:hover[b-68djonctr5] {
        background: var(--lb-danger, #dc3545);
        color: #ffffff;
    }

/* Divider */
.ww-toolbar-divider[b-68djonctr5] {
    width: 1px;
    height: 24px;
    background: var(--lb-border-default, #444);
    margin: 0 0.5rem;
}

/* Delete confirmation text */
.ww-delete-confirm-text[b-68djonctr5] {
    color: var(--lb-danger, #dc3545);
    font-size: 0.875rem;
    font-weight: 600;
    margin-right: 0.5rem;
}

/* Error message in toolbar */
.ww-edit-toolbar-error[b-68djonctr5] {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(220, 53, 69, 0.15);
    border: 1px solid rgba(220, 53, 69, 0.3);
    border-radius: 6px;
    padding: 0.5rem 0.75rem;
    color: #ff6b7a;
    font-size: 0.8rem;
    margin: 0 1rem;
}

.ww-error-dismiss[b-68djonctr5] {
    background: transparent;
    border: none;
    color: #ff6b7a;
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 0.25rem;
    opacity: 0.7;
    transition: opacity 0.2s;
}

.ww-error-dismiss:hover[b-68djonctr5] {
    opacity: 1;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .ww-edit-toolbar[b-68djonctr5] {
        padding: 0.5rem 1rem;
        top: auto; /* On mobile, let it flow naturally since nav height varies */
        position: relative;
    }

    .ww-edit-toolbar-content[b-68djonctr5] {
        flex-wrap: wrap;
    }

    .ww-edit-toolbar-target[b-68djonctr5] {
        display: none;
    }

    .ww-btn-toolbar[b-68djonctr5] {
        padding: 0.4rem 0.75rem;
        font-size: 0.8rem;
    }
}
/* /Components/Shared/HeroCardConfigModal.razor.rz.scp.css */
/* Hero Card Configuration Modal */

/* Overlay */
.hcc-overlay[b-999e33j8c4] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 2000;
}

.hcc-overlay.show[b-999e33j8c4] {
    display: flex;
}

/* Modal Container */
.hcc-modal[b-999e33j8c4] {
    background: var(--lb-bg-elevated, #1e1e1e);
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
    width: 560px;
    max-width: 95vw;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--lb-border-default, #333);
    overflow: hidden;
    animation: hccSlideUp-b-999e33j8c4 0.3s ease-out;
}

@keyframes hccSlideUp-b-999e33j8c4 {
    from {
        transform: translateY(30px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Header */
.hcc-header[b-999e33j8c4] {
    padding: 20px 24px;
    border-bottom: 1px solid var(--lb-border-default, #333);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}

.hcc-title[b-999e33j8c4] {
    margin: 0;
    font-size: 1.25rem;
    color: var(--lb-text-primary, #fff);
    font-weight: 600;
}

.hcc-close[b-999e33j8c4] {
    background: none;
    border: none;
    color: var(--lb-text-muted, #888);
    font-size: 24px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    line-height: 1;
    transition: all 0.2s;
}

.hcc-close:hover[b-999e33j8c4] {
    background: var(--lb-bg-hover, #333);
    color: var(--lb-text-primary, #fff);
}

/* Body */
.hcc-body[b-999e33j8c4] {
    flex: 1;
    overflow-y: auto;
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.hcc-description[b-999e33j8c4] {
    font-size: 14px;
    color: var(--lb-text-secondary, #aaa);
    line-height: 1.5;
}

/* Tabs */
.hcc-tabs[b-999e33j8c4] {
    display: flex;
    gap: 8px;
    background: var(--lb-bg-elevated-2, #252525);
    padding: 4px;
    border-radius: 8px;
}

.hcc-tab[b-999e33j8c4] {
    flex: 1;
    padding: 10px 16px;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: var(--lb-text-muted, #888);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.hcc-tab:hover[b-999e33j8c4] {
    color: var(--lb-text-primary, #fff);
}

.hcc-tab.active[b-999e33j8c4] {
    background: var(--lb-accent-primary, #d4af37);
    color: #000;
}

/* Content */
.hcc-content[b-999e33j8c4] {
    flex: 1;
    min-height: 200px;
    max-height: 250px;
    overflow-y: auto;
}

.hcc-items-list[b-999e33j8c4] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.hcc-item[b-999e33j8c4] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: var(--lb-bg-elevated-2, #252525);
    border: 1px solid var(--lb-border-default, #333);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.hcc-item:hover[b-999e33j8c4] {
    background: var(--lb-bg-elevated-3, #2a2a2a);
    border-color: var(--lb-border-strong, #444);
}

.hcc-item.selected[b-999e33j8c4] {
    border-color: var(--lb-accent-primary, #d4af37);
    background: rgba(212, 175, 55, 0.08);
}

.hcc-item-checkbox[b-999e33j8c4] {
    flex-shrink: 0;
}

.hcc-item-checkbox input[type="checkbox"][b-999e33j8c4] {
    width: 18px;
    height: 18px;
    accent-color: var(--lb-accent-primary, #d4af37);
    cursor: pointer;
}

.hcc-item-info[b-999e33j8c4] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.hcc-item-name[b-999e33j8c4] {
    font-size: 14px;
    font-weight: 600;
    color: var(--lb-text-primary, #fff);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hcc-item-value[b-999e33j8c4] {
    font-size: 12px;
    color: var(--lb-accent-primary, #d4af37);
}

.hcc-item-order[b-999e33j8c4] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex-shrink: 0;
}

.hcc-order-btn[b-999e33j8c4] {
    width: 24px;
    height: 18px;
    background: var(--lb-bg-elevated-3, #2a2a2a);
    border: 1px solid var(--lb-border-default, #333);
    border-radius: 4px;
    color: var(--lb-text-muted, #888);
    font-size: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.hcc-order-btn:hover[b-999e33j8c4] {
    background: var(--lb-bg-hover, #333);
    color: var(--lb-text-primary, #fff);
    border-color: var(--lb-border-strong, #444);
}

.hcc-empty[b-999e33j8c4] {
    padding: 24px;
    text-align: center;
    color: var(--lb-text-muted, #888);
    font-size: 14px;
}

/* Preview */
.hcc-preview[b-999e33j8c4] {
    background: var(--lb-bg-elevated-2, #252525);
    border: 1px solid var(--lb-border-default, #333);
    border-radius: 8px;
    overflow: hidden;
}

.hcc-preview-header[b-999e33j8c4] {
    padding: 10px 14px;
    background: var(--lb-bg-elevated-3, #2a2a2a);
    font-size: 12px;
    font-weight: 600;
    color: var(--lb-text-muted, #888);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid var(--lb-border-default, #333);
}

.hcc-preview-content[b-999e33j8c4] {
    padding: 12px 14px;
    max-height: 140px;
    overflow-y: auto;
}

.hcc-preview-item[b-999e33j8c4] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    border-bottom: 1px solid var(--lb-border-subtle, rgba(255,255,255,0.06));
}

.hcc-preview-item:last-child[b-999e33j8c4] {
    border-bottom: none;
}

.hcc-preview-label[b-999e33j8c4] {
    font-size: 13px;
    color: var(--lb-text-secondary, #aaa);
}

.hcc-preview-value[b-999e33j8c4] {
    font-size: 13px;
    color: var(--lb-accent-primary, #d4af37);
    font-weight: 600;
}

.hcc-preview-empty[b-999e33j8c4] {
    font-size: 13px;
    color: var(--lb-text-muted, #666);
    font-style: italic;
    text-align: center;
    padding: 12px;
}

/* Footer */
.hcc-footer[b-999e33j8c4] {
    padding: 16px 24px;
    border-top: 1px solid var(--lb-border-default, #333);
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    flex-shrink: 0;
}

.btn-primary[b-999e33j8c4] {
    padding: 10px 24px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    border: none;
    transition: all 0.2s;
    background: var(--lb-accent-primary, #d4af37);
    color: #000;
}

.btn-primary:hover:not(:disabled)[b-999e33j8c4] {
    filter: brightness(1.1);
}

.btn-secondary[b-999e33j8c4] {
    padding: 10px 24px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    background: transparent;
    border: 1px solid var(--lb-border-default, #333);
    color: var(--lb-text-secondary, #aaa);
    transition: all 0.2s;
}

.btn-secondary:hover[b-999e33j8c4] {
    background: var(--lb-bg-hover, #333);
    color: var(--lb-text-primary, #fff);
}

/* Responsive */
@media (max-width: 600px) {
    .hcc-modal[b-999e33j8c4] {
        width: 100%;
        max-width: 100%;
        max-height: 100vh;
        border-radius: 0;
    }
}
/* /Components/Shared/InfoboxCard.razor.rz.scp.css */
/* INFOBOX - Clean Modern Design */
.infobox[b-rp4yzwpcf4] {
    background: var(--lb-bg-elevated, #1e1e1e);
    border: 1px solid var(--lb-border-default, #333);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

/* Hero Image - Full Bleed */
.infobox-hero[b-rp4yzwpcf4] {
    position: relative;
    display: flex;
    justify-content: center;
}

    .infobox-hero.clickable[b-rp4yzwpcf4] {
        cursor: pointer;
    }

    .infobox-hero.upload-prompt[b-rp4yzwpcf4] {
        cursor: pointer;
    }

    .infobox-hero :deep(.ux-image)[b-rp4yzwpcf4],
    .infobox-hero :deep(.ux-image img)[b-rp4yzwpcf4] {
        border-radius: 16px 16px 0 0;
        width: 100%;
        min-height: 280px;
    }

/* Hero Upload Placeholder */
.hero-upload-placeholder[b-rp4yzwpcf4] {
    width: 100%;
    min-height: 280px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: linear-gradient(135deg, var(--lb-bg-elevated, #1a1a1a) 0%, var(--lb-bg-elevated-3, #252525) 100%);
    border-bottom: 1px dashed var(--lb-border-default, #333);
    transition: all 0.2s;
}

/* Hero 3D Model Viewer */
.hero-model-container[b-rp4yzwpcf4] {
    width: 100%;
    height: 280px;
    position: relative;
    background: linear-gradient(135deg, #0a0e14 0%, #1a1a2e 100%);
}

    .hero-model-container :deep(.mv-embed)[b-rp4yzwpcf4] {
        border-radius: 16px 16px 0 0;
        border: none;
    }

    .hero-model-container :deep(.hero-model-embed)[b-rp4yzwpcf4] {
        border-radius: 16px 16px 0 0;
    }


/* Control buttons for 3D model viewer */
.hero-model-controls[b-rp4yzwpcf4] {
    position: absolute;
    bottom: 12px;
    right: 12px;
    display: flex;
    gap: 8px;
    opacity: 0;
    transition: opacity 0.2s;
    z-index: 10;
}

.hero-model-container:hover .hero-model-controls[b-rp4yzwpcf4] {
    opacity: 1;
}

.hero-model-btn[b-rp4yzwpcf4] {
    height: 32px;
    padding: 0 12px;
    border: none;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.7);
    color: var(--lb-text-primary, #e8e8e8);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 500;
    transition: all 0.2s;
    backdrop-filter: blur(4px);
}

    .hero-model-btn i[b-rp4yzwpcf4] {
        font-size: 11px;
    }

    .hero-model-btn:hover[b-rp4yzwpcf4] {
        background: var(--lb-accent-primary, #d4af37);
        color: var(--lb-text-inverse, #1a1a1a);
    }

/* Model viewer hero doesn't need clickable cursor on container */
.infobox-hero.model-viewer-hero[b-rp4yzwpcf4] {
    cursor: default;
}

    .infobox-hero.upload-prompt:hover .hero-upload-placeholder[b-rp4yzwpcf4] {
        background: linear-gradient(135deg, var(--lb-bg-elevated-2, #222) 0%, var(--lb-bg-hover, #2a2a2a) 100%);
        border-bottom-color: var(--lb-accent-primary, #d4af37);
    }

.upload-icon[b-rp4yzwpcf4] {
    font-size: 48px;
    color: var(--lb-text-muted, #666);
    transition: color 0.2s;
}

    .infobox-hero.upload-prompt:hover .upload-icon[b-rp4yzwpcf4] {
        color: var(--lb-accent-primary, #d4af37);
    }

.upload-text[b-rp4yzwpcf4] {
    font-size: 14px;
    color: var(--lb-text-muted, #666);
    font-weight: 500;
    transition: color 0.2s;
}

    .infobox-hero.upload-prompt:hover .upload-text[b-rp4yzwpcf4] {
        color: var(--lb-text-primary, #fff);
    }

/* Pillar Badge - Full Width Flat Bar */
.pillar-badge[b-rp4yzwpcf4] {
    display: block;
    background: var(--lb-accent-primary, #d4af37);
    color: var(--lb-text-inverse, #1a1a1a);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 10px 20px;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
}

/* Title */
.infobox-title[b-rp4yzwpcf4] {
    font-size: 22px;
    font-weight: 700;
    color: var(--lb-text-primary, #fff);
    text-align: center;
    padding: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Editable name input */
.infobox-title-input[b-rp4yzwpcf4] {
    display: block;
    width: calc(100% - 32px);
    margin: 16px 16px 4px;
    padding: 12px;
    font-size: 20px;
    font-weight: 700;
    text-align: center;
    background: var(--lb-bg-elevated-2, #252525);
    border: 1px solid var(--lb-accent-primary, #d4af37);
    border-radius: 8px;
    color: var(--lb-text-primary, #fff);
    box-sizing: border-box;
}

    .infobox-title-input:focus[b-rp4yzwpcf4] {
        outline: none;
        border-color: #e5b95c;
        box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.2);
    }

/* Subtitle */
.infobox-subtitle[b-rp4yzwpcf4] {
    font-size: 14px;
    font-style: italic;
    color: var(--lb-text-muted, #888);
    text-align: center;
    padding: 0 16px 12px;
}

/* Attributes Section */
.infobox-attrs[b-rp4yzwpcf4] {
    padding: 16px 20px;
    background: rgba(0, 0, 0, 0.1);
    border-top: 1px solid var(--lb-border-default, #333);
}

.infobox-empty[b-rp4yzwpcf4] {
    color: var(--lb-text-muted, #888);
    font-style: italic;
    font-size: 13px;
    text-align: center;
    padding: 8px 0;
}

/* Attribute Rows */
.infobox-row[b-rp4yzwpcf4] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--lb-border-subtle, rgba(255, 255, 255, 0.06));
}

    .infobox-row:last-child[b-rp4yzwpcf4] {
        border-bottom: none;
    }

.infobox-label[b-rp4yzwpcf4] {
    font-size: 13px;
    color: var(--lb-text-muted, #888);
    font-weight: 500;
}

.infobox-value[b-rp4yzwpcf4] {
    font-size: 13px;
    color: var(--lb-accent-primary, #d4af37);
    font-weight: 600;
    text-align: right;
}

/* Relationship rows */
.infobox-row-rel[b-rp4yzwpcf4] {
    background: rgba(212, 175, 55, 0.05);
    margin: 0 -20px;
    padding: 12px 20px;
}

.infobox-link[b-rp4yzwpcf4] {
    text-decoration: none;
    transition: color 0.15s;
}

    .infobox-link:hover[b-rp4yzwpcf4] {
        text-decoration: underline;
        color: #e5b95c;
    }

/* Configure button */
.infobox-config-btn[b-rp4yzwpcf4] {
    width: 100%;
    margin-top: 12px;
}

/* Author Section - Centered */
.infobox-author[b-rp4yzwpcf4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px;
    background: rgba(0, 0, 0, 0.2);
    border-top: 1px solid var(--lb-border-default, #333);
}

.author-avatar-link[b-rp4yzwpcf4] {
    text-decoration: none;
}

.author-avatar[b-rp4yzwpcf4] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--lb-accent-primary, #d4af37);
    color: var(--lb-text-inverse, #1a1a1a);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 16px;
    flex-shrink: 0;
    overflow: hidden;
    border: 3px solid var(--lb-accent-primary, #d4af37);
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}

.author-avatar:hover[b-rp4yzwpcf4] {
    transform: scale(1.05);
    box-shadow: 0 0 12px rgba(212, 175, 55, 0.4);
}

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

.author-info[b-rp4yzwpcf4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.author-name[b-rp4yzwpcf4] {
    color: var(--lb-accent-primary, #d4af37);
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
}

    .author-name:hover[b-rp4yzwpcf4] {
        text-decoration: underline;
        color: #e5b95c;
    }

.author-date[b-rp4yzwpcf4] {
    color: var(--lb-text-muted, #666);
    font-size: 12px;
}

/* Universe Section */
.infobox-universe[b-rp4yzwpcf4] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 16px;
    background: linear-gradient(135deg, rgba(138, 43, 226, 0.1), rgba(75, 0, 130, 0.15));
    border-top: 1px solid rgba(138, 43, 226, 0.2);
}

.universe-label[b-rp4yzwpcf4] {
    font-size: 12px;
    color: var(--lb-text-muted, #888);
    font-weight: 500;
}

.universe-link[b-rp4yzwpcf4] {
    font-size: 14px;
    font-weight: 600;
    color: #a855f7;
    text-decoration: none;
    transition: all 0.2s;
}

    .universe-link:hover[b-rp4yzwpcf4] {
        color: #c084fc;
        text-decoration: underline;
    }

/* Buttons */
.btn[b-rp4yzwpcf4] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 16px;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
}

.btn-sm[b-rp4yzwpcf4] {
    padding: 8px 12px;
    font-size: 13px;
}

.btn-outline-primary[b-rp4yzwpcf4] {
    background: transparent;
    color: var(--lb-accent-primary, #d4af37);
    border: 1px solid var(--lb-accent-primary, #d4af37);
}

    .btn-outline-primary:hover[b-rp4yzwpcf4] {
        background: var(--lb-accent-primary, #d4af37);
        color: var(--lb-text-inverse, #1a1a1a);
    }

/* Responsive */
@media (max-width: 768px) {
    .infobox[b-rp4yzwpcf4] {
        max-width: 100%;
        border-radius: 12px;
    }

    .infobox-hero :deep(.ux-image)[b-rp4yzwpcf4],
    .infobox-hero :deep(.ux-image img)[b-rp4yzwpcf4] {
        border-radius: 12px 12px 0 0;
        min-height: 240px;
    }

    .hero-upload-placeholder[b-rp4yzwpcf4] {
        min-height: 240px;
    }

    .hero-model-container[b-rp4yzwpcf4] {
        height: 240px;
    }

    .infobox-title[b-rp4yzwpcf4] {
        font-size: 20px;
    }
}
/* /Components/Shared/InlineAttributeEditor.razor.rz.scp.css */
/* InlineAttributeEditor Styles */
.inline-attr-editor[b-e1d2kmsi8a] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.attr-loading[b-e1d2kmsi8a] {
    color: var(--text-muted, #888);
    font-style: italic;
    padding: 1rem 0;
    font-size: 13px;
}

.attr-empty[b-e1d2kmsi8a] {
    color: var(--text-muted, #888);
    font-style: italic;
    font-size: 13px;
    padding: 0.5rem 0;
}

/* Category grouping */
.attr-category[b-e1d2kmsi8a] {
    margin-bottom: 0.75rem;
}

.attr-category:last-child[b-e1d2kmsi8a] {
    margin-bottom: 0;
}

.attr-category-header[b-e1d2kmsi8a] {
    font-size: 11px;
    font-weight: 700;
    color: var(--lb-accent-primary, #d4a84b);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0.5rem 0 0.25rem;
    border-bottom: 1px solid var(--lb-accent-primary, #d4a84b);
    margin-bottom: 0.25rem;
}

.attr-category-header-other[b-e1d2kmsi8a] {
    color: var(--text-muted, #888);
    border-bottom-color: var(--lb-border-subtle, rgba(255,255,255,0.1));
}

/* Individual attribute field */
.attr-field[b-e1d2kmsi8a] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.35rem 0;
    border-bottom: 1px solid var(--lb-border-subtle, rgba(255,255,255,0.06));
}

.attr-field:last-child[b-e1d2kmsi8a] {
    border-bottom: none;
}

.attr-field.has-value .attr-label[b-e1d2kmsi8a] {
    color: var(--lb-text-primary);
}

.attr-label[b-e1d2kmsi8a] {
    font-size: 12px;
    color: var(--text-muted, #888);
    font-weight: 500;
}

.attr-input-row[b-e1d2kmsi8a] {
    display: flex;
    gap: 0.35rem;
    align-items: center;
}

.attr-input-row input[b-e1d2kmsi8a] {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    padding: 0.3rem 0.5rem;
    background: var(--lb-bg-elevated-1, #252525);
    border: 1px solid var(--lb-border-default, #3a3a3a);
    color: var(--lb-text-primary);
    border-radius: 4px;
}

.attr-input-row input:focus[b-e1d2kmsi8a] {
    border-color: var(--lb-accent-primary, #d4a84b);
    outline: none;
}

.attr-input-row input[b-e1d2kmsi8a]::placeholder {
    color: var(--text-muted, #666);
}

.attr-unit-select[b-e1d2kmsi8a] {
    width: auto;
    min-width: 70px;
    max-width: 100px;
    font-size: 12px;
    padding: 0.3rem 0.4rem;
    background: var(--lb-bg-elevated-1, #252525);
    border: 1px solid var(--lb-border-default, #3a3a3a);
    color: var(--lb-text-primary);
    border-radius: 4px;
}

.attr-unit-select:focus[b-e1d2kmsi8a] {
    border-color: var(--lb-accent-primary, #d4a84b);
    outline: none;
}

/* Other attributes section */
.attr-other-section[b-e1d2kmsi8a] {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--lb-border-default, #3a3a3a);
}

.attr-other-toggle[b-e1d2kmsi8a] {
    background: none;
    border: none;
    color: var(--text-muted, #888);
    font-size: 12px;
    cursor: pointer;
    padding: 0.25rem 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    text-align: left;
}

.attr-other-toggle:hover[b-e1d2kmsi8a] {
    color: var(--lb-text-primary);
}

.attr-other-list[b-e1d2kmsi8a] {
    margin-top: 0.5rem;
    padding-left: 0.5rem;
    border-left: 2px solid var(--lb-border-subtle, rgba(255,255,255,0.08));
}

.attr-show-all[b-e1d2kmsi8a] {
    font-size: 12px;
    color: var(--lb-accent-primary, #d4a84b);
    padding: 0.5rem 0;
}

.attr-show-all:hover[b-e1d2kmsi8a] {
    color: #e5b95c;
}

/* Variant select (for Number types with modifiers) */
.attr-variant-select[b-e1d2kmsi8a] {
    width: auto;
    min-width: 70px;
    max-width: 100px;
    font-size: 12px;
    padding: 0.3rem 0.4rem;
    background: var(--lb-bg-elevated-1, #252525);
    border: 1px solid var(--lb-border-default, #3a3a3a);
    color: var(--lb-text-primary);
    border-radius: 4px;
}

.attr-variant-select:focus[b-e1d2kmsi8a] {
    border-color: var(--lb-accent-primary, #d4a84b);
    outline: none;
}

/* Boolean field - checkbox inline with label */
.attr-field-bool[b-e1d2kmsi8a] {
    flex-direction: row;
    align-items: center;
    padding: 0.25rem 0;
}

.attr-label-bool[b-e1d2kmsi8a] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 13px;
    color: var(--text-muted, #888);
    cursor: pointer;
}

.attr-field-bool.has-value .attr-label-bool[b-e1d2kmsi8a] {
    color: var(--lb-text-primary);
}

.attr-label-bool .form-check-input[b-e1d2kmsi8a] {
    width: 16px;
    height: 16px;
    margin: 0;
    cursor: pointer;
    accent-color: var(--lb-accent-primary, #d4a84b);
}

.attr-description[b-e1d2kmsi8a] {
    font-size: 11px;
    color: var(--text-muted, #666);
    cursor: help;
    opacity: 0.6;
}

.attr-description:hover[b-e1d2kmsi8a] {
    opacity: 1;
}

/* Scale field - full width dropdown */
.attr-input-row select.form-select[b-e1d2kmsi8a] {
    flex: 1;
    font-size: 13px;
    padding: 0.3rem 0.5rem;
    background: var(--lb-bg-elevated-1, #252525);
    border: 1px solid var(--lb-border-default, #3a3a3a);
    color: var(--lb-text-primary);
    border-radius: 4px;
}

.attr-input-row select.form-select:focus[b-e1d2kmsi8a] {
    border-color: var(--lb-accent-primary, #d4a84b);
    outline: none;
}

/* Hierarchical tree field */
.attr-field-tree[b-e1d2kmsi8a] {
    flex-direction: column;
}

.attr-tree[b-e1d2kmsi8a] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.25rem 0;
}

.attr-tree-node[b-e1d2kmsi8a] {
    display: flex;
    align-items: center;
}

.attr-tree-label[b-e1d2kmsi8a] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 13px;
    color: var(--text-muted, #888);
    cursor: pointer;
    padding: 0.15rem 0;
}

.attr-tree-label:hover[b-e1d2kmsi8a] {
    color: var(--lb-text-primary);
}

.attr-tree-label .form-check-input[b-e1d2kmsi8a] {
    width: 14px;
    height: 14px;
    margin: 0;
    cursor: pointer;
    accent-color: var(--lb-accent-primary, #d4a84b);
}

.attr-tree-label .form-check-input:checked + span[b-e1d2kmsi8a] {
    color: var(--lb-text-primary);
}

/* Parent nodes in tree (have children) */
.attr-tree-parent[b-e1d2kmsi8a] {
    font-weight: 600;
}
/* /Components/Shared/MentionPicker.razor.rz.scp.css */
.mention-picker[b-5walhjve6u] {
    position: fixed;
    z-index: 10000;
    width: 320px;
    max-height: 400px;
    background: var(--lb-bg-elevated, #1a1a1a);
    border: 1px solid var(--lb-border-default, #333);
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.mention-picker-header[b-5walhjve6u] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--lb-border-subtle, #2a2a2a);
    background: var(--lb-bg-elevated-2, #222);
}

.mention-picker-title[b-5walhjve6u] {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--lb-text-muted, #888);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.mention-picker-close[b-5walhjve6u] {
    background: none;
    border: none;
    color: var(--lb-text-muted, #888);
    cursor: pointer;
    font-size: 1rem;
    padding: 0.25rem;
    line-height: 1;
    border-radius: 4px;
    transition: all 0.15s ease;
}

.mention-picker-close:hover[b-5walhjve6u] {
    color: var(--lb-text-primary, #e0e0e0);
    background: var(--lb-bg-hover, #333);
}

.mention-picker-hint-bar[b-5walhjve6u] {
    padding: 0.4rem 0.75rem;
    font-size: 0.75rem;
    color: var(--lb-text-muted, #888);
    background: var(--lb-bg-base, #0f0f0f);
    border-bottom: 1px solid var(--lb-border-subtle, #2a2a2a);
}

.mention-picker-search[b-5walhjve6u] {
    padding: 0.5rem;
    border-bottom: 1px solid var(--lb-border-subtle, #2a2a2a);
}

.mention-picker-search input[b-5walhjve6u] {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--lb-border-default, #333);
    border-radius: 6px;
    background: var(--lb-bg-base, #0f0f0f);
    color: var(--lb-text-primary, #e0e0e0);
    font-size: 0.9rem;
    outline: none;
    transition: border-color 0.15s ease;
}

.mention-picker-search input:focus[b-5walhjve6u] {
    border-color: var(--lb-accent-primary, #d4af37);
}

.mention-picker-search input[b-5walhjve6u]::placeholder {
    color: var(--lb-text-muted, #888);
}

.mention-picker-results[b-5walhjve6u] {
    flex: 1;
    overflow-y: auto;
    max-height: 280px;
}

.mention-picker-loading[b-5walhjve6u],
.mention-picker-empty[b-5walhjve6u] {
    padding: 1.5rem;
    text-align: center;
    color: var(--lb-text-muted, #888);
    font-size: 0.85rem;
}

.mention-picker-item[b-5walhjve6u] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    transition: background 0.15s ease;
}

.mention-picker-item:hover[b-5walhjve6u],
.mention-picker-item.selected[b-5walhjve6u] {
    background: var(--lb-bg-hover, #333);
}

.mention-picker-item.selected[b-5walhjve6u] {
    background: var(--lb-accent-primary-dark, #b8941f);
}

.mention-item-icon[b-5walhjve6u] {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: var(--lb-bg-elevated-2, #222);
    overflow: hidden;
}

.mention-item-icon img[b-5walhjve6u] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mention-item-pillar-icon[b-5walhjve6u] {
    font-size: 1.25rem;
}

.mention-create-icon[b-5walhjve6u] {
    font-size: 1.5rem;
    color: var(--lb-accent-primary, #d4af37);
    font-weight: 300;
}

.mention-item-content[b-5walhjve6u] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.mention-item-name[b-5walhjve6u] {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--lb-text-primary, #e0e0e0);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mention-item-meta[b-5walhjve6u] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: var(--lb-text-muted, #888);
    margin-top: 0.125rem;
}

.mention-item-pillar[b-5walhjve6u] {
    color: var(--lb-accent-primary, #d4af37);
    font-weight: 500;
}

.mention-item-summary[b-5walhjve6u] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mention-item-hint[b-5walhjve6u] {
    font-style: italic;
}

.mention-picker-create[b-5walhjve6u] {
    border-top: 1px solid var(--lb-border-subtle, #2a2a2a);
    background: var(--lb-bg-elevated-2, #222);
}

.mention-picker-footer[b-5walhjve6u] {
    padding: 0.5rem 0.75rem;
    border-top: 1px solid var(--lb-border-subtle, #2a2a2a);
    background: var(--lb-bg-elevated-2, #222);
}

.mention-picker-hint[b-5walhjve6u] {
    font-size: 0.7rem;
    color: var(--lb-text-muted, #888);
}

.mention-picker-hint kbd[b-5walhjve6u] {
    display: inline-block;
    padding: 0.125rem 0.375rem;
    font-size: 0.65rem;
    font-family: inherit;
    background: var(--lb-bg-base, #0f0f0f);
    border: 1px solid var(--lb-border-default, #333);
    border-radius: 3px;
    margin: 0 0.125rem;
}

/* Scrollbar styling */
.mention-picker-results[b-5walhjve6u]::-webkit-scrollbar {
    width: 6px;
}

.mention-picker-results[b-5walhjve6u]::-webkit-scrollbar-track {
    background: transparent;
}

.mention-picker-results[b-5walhjve6u]::-webkit-scrollbar-thumb {
    background: var(--lb-border-default, #333);
    border-radius: 3px;
}

.mention-picker-results[b-5walhjve6u]::-webkit-scrollbar-thumb:hover {
    background: var(--lb-border-strong, #444);
}
/* /Components/Shared/NavActions.razor.rz.scp.css */
/* NavActions button styles - scoped to this component */

.ww-nav-actions-inner[b-doylr6aq2m] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* Edit/Editing toggle button */
.ww-btn-edit[b-doylr6aq2m] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: transparent;
    border: 1px solid var(--lb-border-default, #444);
    border-radius: 6px;
    color: var(--lb-text-secondary, #a0a0a0);
    cursor: pointer;
    font-size: 0.875rem;
    font-family: inherit;
    font-weight: 600;
    transition: all 0.2s ease;
    text-decoration: none;
}

    .ww-btn-edit:hover[b-doylr6aq2m] {
        background: var(--lb-bg-hover, #252525);
        border-color: var(--lb-accent-primary, #d4af37);
        color: var(--lb-text-primary, #e8e8e8);
    }

    /* Active state - gold gradient background */
    .ww-btn-edit.active[b-doylr6aq2m] {
        background: linear-gradient(135deg, var(--lb-accent-primary, #d4af37), var(--lb-accent-secondary, #b8960f));
        border-color: transparent;
        color: #0a0a0a;
        font-weight: 600;
    }

        .ww-btn-edit.active:hover[b-doylr6aq2m] {
            transform: translateY(-1px);
            box-shadow: 0 4px 8px rgba(212, 175, 55, 0.3);
            color: #0a0a0a;
        }

/* Create button */
.ww-btn-create[b-doylr6aq2m] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1.25rem;
    background: linear-gradient(135deg, var(--lb-accent-primary, #d4af37), var(--lb-accent-secondary, #b8960f));
    border: none;
    border-radius: 6px;
    color: #0a0a0a;
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s ease;
}

    .ww-btn-create:hover[b-doylr6aq2m] {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(212, 175, 55, 0.4);
        color: #0a0a0a;
    }

/* Sign in link */
.ww-nav-link[b-doylr6aq2m] {
    color: var(--lb-text-secondary, #a0a0a0);
    text-decoration: none;
    font-size: 0.875rem;
    padding: 0.5rem 1rem;
    transition: color 0.2s ease;
}

    .ww-nav-link:hover[b-doylr6aq2m] {
        color: var(--lb-text-primary, #e8e8e8);
    }
/* /Components/Shared/RelationshipCard.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════ */
/* COLLAPSIBLE SECTIONS */
/* ═══════════════════════════════════════════════════════ */
.collapsible-section[b-4ixalvyqam] {
    background: var(--lb-bg-elevated-1, #1e1e1e);
    border: 1px solid var(--lb-border-default, #3a3a3a);
    border-radius: 8px;
    overflow: hidden;
}

.collapsible-header[b-4ixalvyqam] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    cursor: pointer;
    user-select: none;
    transition: background 0.2s;
}

.collapsible-header:hover[b-4ixalvyqam] {
    background: var(--lb-bg-elevated-2, #252525);
}

.collapsible-icon[b-4ixalvyqam] {
    font-size: 12px;
    color: var(--lb-text-muted, #888);
    width: 16px;
}

.collapsible-title[b-4ixalvyqam] {
    font-size: 16px;
    font-weight: 600;
    color: var(--lb-text-primary, #e8e8e8);
    flex: 1;
}

.collapsible-count[b-4ixalvyqam] {
    font-size: 13px;
    color: var(--lb-accent-primary, #d4a84b);
    background: rgba(212, 168, 75, 0.15);
    padding: 2px 10px;
    border-radius: 12px;
    font-weight: 600;
}

.collapsible-content[b-4ixalvyqam] {
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--lb-border-default, #3a3a3a);
}

/* ═══════════════════════════════════════════════════════ */
/* RELATIONSHIP STYLES - VIEW MODE */
/* ═══════════════════════════════════════════════════════ */
.relationship-list[b-4ixalvyqam] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.relationship-item[b-4ixalvyqam] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: var(--lb-bg-elevated-2);
    border-radius: 6px;
    font-size: 14px;
}

.relationship-phrase[b-4ixalvyqam] {
    color: var(--lb-text-secondary);
    font-weight: 500;
}

.relationship-target[b-4ixalvyqam] {
    color: var(--lb-accent-primary);
    font-weight: 600;
    text-decoration: none;
    transition: color 0.15s ease;
}

.relationship-target:hover[b-4ixalvyqam] {
    color: #5aa3e0;
    text-decoration: underline;
}

.relationship-notes[b-4ixalvyqam] {
    flex-basis: 100%;
    margin-top: 0.25rem;
    font-size: 13px;
    color: var(--lb-text-muted);
    font-style: italic;
}

/* ═══════════════════════════════════════════════════════ */
/* RELATIONSHIP STYLES - EDIT MODE */
/* ═══════════════════════════════════════════════════════ */
.relationship-edit-list[b-4ixalvyqam] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.relationship-edit-item[b-4ixalvyqam] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: var(--lb-bg-elevated-2);
    border-radius: 6px;
    border: 1px solid var(--lb-border-default);
}

.relationship-edit-header[b-4ixalvyqam] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.relationship-edit-info[b-4ixalvyqam] {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    flex-wrap: wrap;
    min-width: 0;
}

.relationship-edit-phrase[b-4ixalvyqam] {
    font-weight: 600;
    color: var(--lb-text-primary);
    font-size: 14px;
}

.relationship-edit-target[b-4ixalvyqam] {
    color: var(--lb-accent-primary);
    font-size: 14px;
}

.relationship-edit-actions[b-4ixalvyqam] {
    display: flex;
    gap: 0.25rem;
    flex-shrink: 0;
}

/* Empty state */
.empty-state[b-4ixalvyqam] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 2rem 1.5rem;
    text-align: center;
    border: 1px dashed var(--lb-border-subtle);
    border-radius: 8px;
    background: var(--lb-bg-elevated);
}

.empty-state-text[b-4ixalvyqam] {
    color: var(--lb-text-muted);
    font-size: 14px;
}

.placeholder[b-4ixalvyqam] {
    color: var(--lb-text-muted);
    font-style: italic;
    font-size: 14px;
    padding: 1.5rem;
    text-align: center;
    background: transparent;
    border: 1px dashed var(--lb-border-subtle);
    border-radius: 6px;
}

/* Buttons */
.btn[b-4ixalvyqam] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
}

.btn-sm[b-4ixalvyqam] {
    padding: 0.375rem 0.75rem;
    font-size: 13px;
}

.btn-outline-primary[b-4ixalvyqam] {
    background: transparent;
    color: var(--lb-accent-primary);
    border: 1px solid var(--lb-accent-primary);
}

.btn-outline-primary:hover[b-4ixalvyqam] {
    background: var(--lb-accent-primary);
    color: white;
}

.btn-icon[b-4ixalvyqam] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: var(--lb-text-secondary);
    font-size: 14px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-icon:hover[b-4ixalvyqam] {
    background: var(--lb-bg-hover);
    color: var(--lb-text-primary);
}

.btn-icon-danger:hover[b-4ixalvyqam] {
    background: rgba(220, 53, 69, 0.15);
    color: #ff6b7a;
}

.mt-2[b-4ixalvyqam] {
    margin-top: 0.5rem;
}

/* Form control */
.form-control[b-4ixalvyqam] {
    width: 100%;
    padding: 0.5rem 0.75rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--lb-border-default);
    border-radius: 6px;
    color: var(--lb-text-primary);
    font-size: 14px;
    font-family: inherit;
}

.form-control:focus[b-4ixalvyqam] {
    outline: none;
    border-color: var(--lb-accent-primary);
}

.form-control-sm[b-4ixalvyqam] {
    padding: 0.375rem 0.5rem;
    font-size: 13px;
}

.relationship-edit-item textarea[b-4ixalvyqam] {
    background: var(--lb-bg-elevated-1);
    border-color: var(--lb-border-default);
    font-size: 13px;
    resize: none;
}

.relationship-edit-item textarea:focus[b-4ixalvyqam] {
    border-color: var(--lb-accent-primary);
    outline: none;
}
/* /Components/Shared/RelationshipPickerModal.razor.rz.scp.css */
/* Relationship Picker Modal - Diagram-as-Interface Design */

/* Overlay */
.rp-overlay[b-et8j4492s5] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 2000;
}

    .rp-overlay.show[b-et8j4492s5] {
        display: flex;
    }

/* Modal Container */
.rp-modal[b-et8j4492s5] {
    background: var(--lb-bg-elevated, #1e1e1e);
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
    width: 80vw;
    max-width: 1100px;
    min-width: 700px;
    height: 80vh;
    max-height: 800px;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--lb-border-default, #333);
    position: relative;
    overflow: visible;
    transition: all 0.3s ease;
    z-index: 10;
    animation: modalSlideUp-b-et8j4492s5 0.3s ease-out;
}

@keyframes modalSlideUp-b-et8j4492s5 {
    from {
        transform: translateY(30px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.rp-modal.panel-open[b-et8j4492s5] {
    border-radius: 16px 0 0 16px;
}

/* Header */
.rp-header[b-et8j4492s5] {
    padding: 20px 24px;
    border-bottom: 1px solid var(--lb-border-default, #333);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.rp-title[b-et8j4492s5] {
    margin: 0;
    font-size: 1.25rem;
    color: var(--lb-text-primary, #fff);
    font-weight: 600;
}

.rp-close[b-et8j4492s5] {
    background: none;
    border: none;
    color: var(--lb-text-muted, #888);
    font-size: 24px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    line-height: 1;
    transition: all 0.2s;
}

    .rp-close:hover[b-et8j4492s5] {
        background: var(--lb-bg-hover, #333);
        color: var(--lb-text-primary, #fff);
    }

/* Body */
.rp-body[b-et8j4492s5] {
    padding: 40px;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    overflow: auto;
    gap: 32px;
}

/* Loading State */
.rp-loading[b-et8j4492s5] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    color: var(--lb-text-muted, #888);
}

    .rp-loading .spinner[b-et8j4492s5] {
        width: 40px;
        height: 40px;
        border: 3px solid var(--lb-border-default, #333);
        border-top-color: var(--lb-accent-primary, #d4af37);
        border-radius: 50%;
        animation: spin-b-et8j4492s5 0.8s linear infinite;
        margin-bottom: 1rem;
    }

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

/* THE DIAGRAM */
.rp-diagram[b-et8j4492s5] {
    display: flex;
    align-items: center;
    gap: 32px;
    width: 100%;
    justify-content: center;
    flex: 1;
    padding-top: 20px;
}

/* Entity Box - Card Style - BIG */
.rp-entity-box[b-et8j4492s5] {
    width: 280px;
    padding: 24px;
    background: #141414;
    border: 2px solid #3d3d1a;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    transition: all 0.2s;
}

    .rp-entity-box.clickable[b-et8j4492s5] {
        cursor: pointer;
    }

        .rp-entity-box.clickable:hover[b-et8j4492s5] {
            border-color: var(--lb-border-strong, #444);
            background: #1a1a1a;
            transform: translateY(-2px);
        }

    .rp-entity-box.active[b-et8j4492s5] {
        border-color: var(--lb-accent-primary, #d4af37);
        box-shadow: 0 0 20px rgba(212, 175, 55, 0.3);
    }

    .rp-entity-box.source[b-et8j4492s5] {
        border-color: var(--lb-accent-primary, #d4af37);
        box-shadow: 0 0 20px rgba(212, 175, 55, 0.15);
    }

    .rp-entity-box.target.has-selection[b-et8j4492s5] {
        border-color: #2d5a2d;
        box-shadow: 0 0 20px rgba(74, 222, 128, 0.1);
    }

.entity-image[b-et8j4492s5] {
    width: 200px;
    height: 200px;
    border-radius: 8px;
    overflow: hidden;
    background: #2a2a2a;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .entity-image img[b-et8j4492s5] {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .entity-image.placeholder[b-et8j4492s5] {
        border: 1px dashed #3a3a3a;
        background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%);
    }

        .entity-image.placeholder span[b-et8j4492s5],
        .entity-image .image-placeholder[b-et8j4492s5] {
            font-size: 64px;
            color: var(--lb-text-muted, #888);
        }

.entity-label[b-et8j4492s5] {
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.entity-name[b-et8j4492s5] {
    display: block;
    font-weight: 600;
    color: var(--lb-text-primary, #fff);
    font-size: 18px;
    max-width: 240px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

    .entity-name.placeholder-text[b-et8j4492s5] {
        color: var(--lb-text-muted, #888);
    }

.entity-pillar[b-et8j4492s5] {
    font-size: 13px;
    color: var(--lb-text-muted, #666);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Arrow Section - Vertical Stack */
.rp-arrow-section[b-et8j4492s5] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

/* Arrow Box */
.rp-arrow-box[b-et8j4492s5] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px 24px;
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.2s;
    min-width: 120px;
    border: 2px solid transparent;
}

    .rp-arrow-box:hover[b-et8j4492s5] {
        background: #252525;
        border-color: var(--lb-border-default, #333);
    }

    .rp-arrow-box.active[b-et8j4492s5] {
        background: #252525;
        border-color: var(--lb-accent-primary, #d4af37);
        box-shadow: 0 0 20px rgba(212, 175, 55, 0.2);
    }

    .rp-arrow-box.has-selection .arrow-icon[b-et8j4492s5] {
        color: var(--lb-success, #4caf50);
    }

.arrow-icon[b-et8j4492s5] {
    font-size: 56px;
    color: var(--lb-accent-primary, #d4af37);
    transition: transform 0.3s ease-in-out, color 0.2s;
    line-height: 1;
}

.arrow-label[b-et8j4492s5] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    text-align: center;
}

.rel-phrase[b-et8j4492s5] {
    color: var(--lb-text-primary, #fff);
    font-weight: 500;
}

.rel-placeholder[b-et8j4492s5] {
    color: var(--lb-text-muted, #888);
    font-style: italic;
}

/* Direction Toggle Button - Pill Style */
.rp-direction-toggle-btn[b-et8j4492s5] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: #252525;
    border: 1px solid #3a3a3a;
    border-radius: 20px;
    color: #888;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
}

    .rp-direction-toggle-btn:hover[b-et8j4492s5] {
        background: #2a2a2a;
        border-color: var(--lb-accent-primary, #d4af37);
        color: var(--lb-accent-primary, #d4af37);
    }

    .rp-direction-toggle-btn .toggle-icon[b-et8j4492s5] {
        transition: transform 0.3s ease-in-out;
    }

    .rp-direction-toggle-btn .toggle-label[b-et8j4492s5] {
        font-weight: 500;
    }

/* Legacy direction toggle - keep for backwards compat but hidden */
.rp-direction-toggle[b-et8j4492s5] {
    display: none;
}

/* Sentence Preview */
.rp-sentence[b-et8j4492s5] {
    padding: 20px 32px;
    background: #252525;
    border-radius: 8px;
    font-size: 16px;
    color: var(--lb-text-primary, #fff);
    text-align: center;
    min-height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    flex-shrink: 0;
}

    .rp-sentence strong[b-et8j4492s5] {
        color: var(--lb-accent-primary, #d4af37);
    }

.sentence-hint[b-et8j4492s5] {
    color: var(--lb-text-muted, #888);
    font-style: italic;
}

/* Footer */
.rp-footer[b-et8j4492s5] {
    padding: 16px 24px;
    border-top: 1px solid var(--lb-border-default, #333);
    display: flex;
    justify-content: flex-end;
}

.btn-primary[b-et8j4492s5] {
    padding: 12px 24px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: all 0.2s;
    background: var(--lb-accent-primary, #d4af37);
    color: #000;
}

    .btn-primary:hover:not(:disabled)[b-et8j4492s5] {
        filter: brightness(1.1);
    }

    .btn-primary:disabled[b-et8j4492s5] {
        opacity: 0.4;
        cursor: not-allowed;
    }

/* Side Panel - Slides out but stays BEHIND the modal */
.rp-side-panel[b-et8j4492s5] {
    position: absolute;
    top: 0;
    left: 100%;
    margin-left: -1px;
    width: 320px;
    height: 100%;
    background: var(--lb-bg-elevated, #1e1e1e);
    border: 1px solid var(--lb-border-default, #333);
    border-left: none;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-top-right-radius: 16px;
    border-bottom-right-radius: 16px;
    transform: translateX(-20px);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.3s ease, opacity 0.2s ease;
    display: flex;
    flex-direction: column;
    z-index: -1;
    overflow: hidden;
}

    .rp-side-panel.open[b-et8j4492s5] {
        transform: translateX(0);
        opacity: 1;
        pointer-events: auto;
    }

.panel-header[b-et8j4492s5] {
    padding: 20px 24px;
    border-bottom: 1px solid var(--lb-border-default, #333);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}

    .panel-header h6[b-et8j4492s5] {
        margin: 0;
        font-size: 14px;
        font-weight: 600;
        color: var(--lb-text-primary, #fff);
    }

.panel-close[b-et8j4492s5] {
    background: none;
    border: none;
    color: var(--lb-text-muted, #888);
    font-size: 20px;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
    line-height: 1;
}

    .panel-close:hover[b-et8j4492s5] {
        background: var(--lb-bg-hover, #333);
        color: var(--lb-text-primary, #fff);
    }

.panel-search[b-et8j4492s5] {
    padding: 16px 24px;
    border-bottom: 1px solid var(--lb-border-default, #333);
    flex-shrink: 0;
}

    .panel-search input[b-et8j4492s5] {
        width: 100%;
        padding: 10px 14px;
        background: var(--lb-bg-input, #121212);
        border: 1px solid var(--lb-border-default, #333);
        border-radius: 6px;
        color: var(--lb-text-primary, #fff);
        font-size: 14px;
        box-sizing: border-box;
    }

        .panel-search input:focus[b-et8j4492s5] {
            outline: none;
            border-color: var(--lb-accent-primary, #d4af37);
        }

        .panel-search input[b-et8j4492s5]::placeholder {
            color: var(--lb-text-muted, #888);
        }

.panel-content[b-et8j4492s5] {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
    scrollbar-width: thin;
    scrollbar-color: var(--lb-border-strong, #444) transparent;
}

    .panel-content[b-et8j4492s5]::-webkit-scrollbar {
        width: 6px;
    }

    .panel-content[b-et8j4492s5]::-webkit-scrollbar-track {
        background: transparent;
        border-radius: 3px;
        margin: 8px 0;
    }

    .panel-content[b-et8j4492s5]::-webkit-scrollbar-thumb {
        background: var(--lb-border-strong, #444);
        border-radius: 3px;
    }

        .panel-content[b-et8j4492s5]::-webkit-scrollbar-thumb:hover {
            background: var(--lb-text-muted, #888);
        }

.panel-loading[b-et8j4492s5] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px;
    color: var(--lb-text-muted, #888);
}

.mini-spinner[b-et8j4492s5] {
    width: 16px;
    height: 16px;
    border: 2px solid var(--lb-border-default, #333);
    border-top-color: var(--lb-accent-primary, #d4af37);
    border-radius: 50%;
    animation: spin-b-et8j4492s5 0.6s linear infinite;
}

.panel-section[b-et8j4492s5] {
    margin-bottom: 20px;
}

    .panel-section:last-child[b-et8j4492s5] {
        margin-bottom: 0;
    }

.section-header[b-et8j4492s5] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 600;
    color: var(--lb-text-muted, #888);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
}

.section-icon[b-et8j4492s5] {
    font-size: 14px;
}

/* Entity Grid */
.entity-grid[b-et8j4492s5] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.entity-card[b-et8j4492s5] {
    padding: 10px;
    background: var(--lb-bg-elevated-2, #252525);
    border: 1px solid var(--lb-border-default, #333);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

    .entity-card:hover[b-et8j4492s5] {
        background: var(--lb-bg-elevated-3, #2a2a2a);
        border-color: var(--lb-border-strong, #444);
        transform: translateY(-2px);
    }

    .entity-card.selected[b-et8j4492s5] {
        border-color: var(--lb-accent-primary, #d4af37);
        background: rgba(212, 175, 55, 0.1);
    }

.card-image[b-et8j4492s5] {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 8px;
    background: var(--lb-bg-elevated-3, #2a2a2a);
    display: flex;
    align-items: center;
    justify-content: center;
}

    .card-image img[b-et8j4492s5] {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .card-image .image-placeholder[b-et8j4492s5] {
        font-size: 24px;
        color: var(--lb-text-muted, #888);
    }

.card-info[b-et8j4492s5] {
    text-align: center;
}

.card-name[b-et8j4492s5] {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: var(--lb-text-primary, #fff);
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.card-pillar[b-et8j4492s5] {
    font-size: 9px;
    color: var(--lb-accent-primary, #d4af37);
    text-transform: uppercase;
    font-weight: 500;
}

/* Relationship List */
.relationship-list[b-et8j4492s5] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.relationship-item[b-et8j4492s5] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: var(--lb-bg-elevated-2, #252525);
    border: 1px solid var(--lb-border-default, #333);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
}

    .relationship-item:hover[b-et8j4492s5] {
        background: var(--lb-bg-elevated-3, #2a2a2a);
        border-color: var(--lb-border-strong, #444);
    }

    .relationship-item.selected[b-et8j4492s5] {
        border-color: var(--lb-accent-primary, #d4af37);
        background: rgba(212, 175, 55, 0.1);
    }

.rel-item-info[b-et8j4492s5] {
    flex: 1;
}

.rel-item-key[b-et8j4492s5] {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--lb-text-primary, #fff);
}

.rel-item-phrase[b-et8j4492s5] {
    display: block;
    font-size: 11px;
    color: var(--lb-text-muted, #888);
    font-style: italic;
}

.rel-badge[b-et8j4492s5] {
    font-size: 14px;
    color: var(--lb-accent-primary, #d4af37);
}

.no-results[b-et8j4492s5] {
    padding: 24px;
    text-align: center;
    color: var(--lb-text-muted, #888);
    font-size: 13px;
}

/* Responsive */
@media (max-width: 900px) {
    .rp-modal[b-et8j4492s5] {
        width: 95%;
        min-width: auto;
    }

    .rp-diagram[b-et8j4492s5] {
        flex-direction: column;
        gap: 16px;
    }

    .rp-arrow-section[b-et8j4492s5] {
        flex-direction: row;
        gap: 16px;
    }

    .rp-arrow-box[b-et8j4492s5] {
        padding: 12px 16px;
    }

        .rp-arrow-box .arrow-icon[b-et8j4492s5] {
            transform: rotate(90deg) !important;
        }

    .rp-side-panel[b-et8j4492s5] {
        position: fixed;
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: 60vh;
        border-radius: 16px 16px 0 0;
        border: 1px solid var(--lb-border-default, #333);
        border-bottom: none;
        margin-left: 0;
        transform: translateY(100%);
    }

        .rp-side-panel.open[b-et8j4492s5] {
            transform: translateY(0);
        }

    .rp-modal.panel-open[b-et8j4492s5] {
        border-radius: 16px;
    }
}
/* /Components/Shared/StatBlockModal.razor.rz.scp.css */
/* Stat Block Modal - Wizard Style */

/* Overlay */
.stat-modal-overlay[b-kw3jwkyzw2] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.75);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    animation: statFadeIn-b-kw3jwkyzw2 0.2s ease-in-out;
}

    .stat-modal-overlay.show[b-kw3jwkyzw2] {
        display: flex;
    }

@keyframes statFadeIn-b-kw3jwkyzw2 {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Modal Container */
.stat-modal[b-kw3jwkyzw2] {
    background: var(--lb-bg-elevated);
    border-radius: var(--lb-radius-lg);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
    max-width: 600px;
    width: 90%;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--lb-border-strong);
    animation: statSlideUp-b-kw3jwkyzw2 0.3s ease-out;
}

.stat-modal-large[b-kw3jwkyzw2] {
    max-width: 900px;
}

@keyframes statSlideUp-b-kw3jwkyzw2 {
    from {
        transform: translateY(30px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Header */
.stat-modal-header[b-kw3jwkyzw2] {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--lb-border-default);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.stat-modal-header-content[b-kw3jwkyzw2] {
    flex: 1;
}

.stat-modal-title[b-kw3jwkyzw2] {
    margin: 0;
    font-size: 1.35rem;
    color: var(--lb-text-primary);
    font-weight: 600;
}

.stat-modal-breadcrumb[b-kw3jwkyzw2] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.375rem;
    font-size: 0.875rem;
    color: var(--lb-text-secondary);
}

.breadcrumb-separator[b-kw3jwkyzw2] {
    color: var(--lb-text-muted);
}

.stat-modal-close[b-kw3jwkyzw2] {
    background: none;
    border: none;
    color: var(--lb-text-secondary);
    font-size: 1.75rem;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    border-radius: var(--lb-radius-sm);
    transition: all 0.2s;
    line-height: 1;
}

    .stat-modal-close:hover[b-kw3jwkyzw2] {
        background: var(--lb-bg-hover);
        color: var(--lb-text-primary);
    }

/* Body */
.stat-modal-body[b-kw3jwkyzw2] {
    padding: 1.5rem;
    overflow-y: auto;
    flex: 1;
    min-height: 300px;
}

/* Loading State */
.stat-modal-loading[b-kw3jwkyzw2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    color: var(--lb-text-muted);
}

    .stat-modal-loading .spinner[b-kw3jwkyzw2] {
        width: 40px;
        height: 40px;
        border: 3px solid var(--lb-border-default);
        border-top-color: var(--lb-accent-primary);
        border-radius: 50%;
        animation: statSpin-b-kw3jwkyzw2 0.8s linear infinite;
        margin-bottom: 1rem;
    }

@keyframes statSpin-b-kw3jwkyzw2 {
    to {
        transform: rotate(360deg);
    }
}

/* Error State */
.stat-modal-error[b-kw3jwkyzw2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    text-align: center;
}

.error-icon[b-kw3jwkyzw2] {
    font-size: 2.5rem;
    margin-bottom: 0.75rem;
}

.stat-modal-error p[b-kw3jwkyzw2] {
    color: var(--lb-error);
    margin: 0 0 1rem 0;
}

/* Step Content */
.stat-step[b-kw3jwkyzw2] {
    animation: statStepIn-b-kw3jwkyzw2 0.25s ease-out;
}

@keyframes statStepIn-b-kw3jwkyzw2 {
    from {
        opacity: 0;
        transform: translateX(20px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.stat-step-instruction[b-kw3jwkyzw2] {
    font-size: 1rem;
    color: var(--lb-text-secondary);
    margin: 0 0 1.25rem 0;
}

/* Card Grid (for systems and profiles) */
.stat-card-grid[b-kw3jwkyzw2] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
}

.stat-card[b-kw3jwkyzw2] {
    display: flex;
    gap: 0.875rem;
    padding: 1rem;
    background: var(--lb-bg-elevated-2);
    border: 2px solid var(--lb-border-subtle);
    border-radius: var(--lb-radius-md);
    cursor: pointer;
    transition: all 0.2s;
}

    .stat-card:hover[b-kw3jwkyzw2] {
        background: var(--lb-bg-elevated-3);
        border-color: var(--lb-border-default);
    }

    .stat-card.selected[b-kw3jwkyzw2] {
        border-color: var(--lb-accent-primary);
        background: rgba(212, 175, 55, 0.08);
    }

.stat-card-icon[b-kw3jwkyzw2] {
    font-size: 1.75rem;
    flex-shrink: 0;
}

.stat-card-content[b-kw3jwkyzw2] {
    flex: 1;
    min-width: 0;
}

.stat-card-name[b-kw3jwkyzw2] {
    font-weight: 600;
    color: var(--lb-text-primary);
    margin-bottom: 0.125rem;
}

.stat-card-shortname[b-kw3jwkyzw2] {
    font-size: 0.8rem;
    color: var(--lb-accent-primary);
    margin-bottom: 0.25rem;
}

.stat-card-description[b-kw3jwkyzw2] {
    font-size: 0.8rem;
    color: var(--lb-text-muted);
    line-height: 1.4;
}

.stat-card-meta[b-kw3jwkyzw2] {
    font-size: 0.75rem;
    color: var(--lb-text-muted);
    margin-top: 0.25rem;
}

/* Popularity badge */
.stat-card.popular[b-kw3jwkyzw2] {
    border-color: var(--lb-accent-primary);
    position: relative;
}

.stat-card-badge[b-kw3jwkyzw2] {
    position: absolute;
    top: -0.5rem;
    right: 0.75rem;
    background: var(--lb-accent-primary);
    color: #000;
    font-size: 0.65rem;
    font-weight: 600;
    padding: 0.2rem 0.5rem;
    border-radius: var(--lb-radius-sm);
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

/* Admin actions */
.stat-admin-actions[b-kw3jwkyzw2] {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--lb-border-subtle);
    display: flex;
    justify-content: center;
}

/* Admin modal */
.stat-admin-modal[b-kw3jwkyzw2] {
    background: var(--lb-bg-elevated);
    border-radius: var(--lb-radius-lg);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
    max-width: 500px;
    width: 90%;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--lb-border-strong);
    animation: statSlideUp-b-kw3jwkyzw2 0.3s ease-out;
}

.stat-admin-modal .stat-modal-body[b-kw3jwkyzw2] {
    min-height: auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.stat-admin-modal .stat-field-fullwidth[b-kw3jwkyzw2] {
    margin-top: 0;
    padding: 0;
}

/* Empty State */
.stat-empty-state[b-kw3jwkyzw2] {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--lb-text-muted);
}

.empty-icon[b-kw3jwkyzw2] {
    font-size: 3rem;
    display: block;
    margin-bottom: 1rem;
    opacity: 0.5;
}

.stat-empty-state p[b-kw3jwkyzw2] {
    margin: 0 0 0.5rem 0;
    font-size: 1rem;
}

.stat-empty-state small[b-kw3jwkyzw2] {
    font-size: 0.875rem;
}

/* Step 3: Stats Form */
.stat-form-step[b-kw3jwkyzw2] {
    /* Form styles */
}

.stat-title-row[b-kw3jwkyzw2] {
    margin-bottom: 1.5rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--lb-border-subtle);
}

.stat-label[b-kw3jwkyzw2] {
    display: block;
    font-weight: 600;
    color: var(--lb-text-primary);
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
}

    .stat-label .optional[b-kw3jwkyzw2] {
        font-weight: 400;
        color: var(--lb-text-muted);
    }

.stat-input[b-kw3jwkyzw2] {
    width: 100%;
    padding: 0.625rem 0.75rem;
    background: var(--lb-bg-input);
    border: 1px solid var(--lb-border-default);
    border-radius: var(--lb-radius-sm);
    color: var(--lb-text-primary);
    font-size: 0.9rem;
    transition: all 0.2s;
}

    .stat-input:focus[b-kw3jwkyzw2] {
        outline: none;
        border-color: var(--lb-accent-primary);
        box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.1);
    }

.stat-input-number[b-kw3jwkyzw2] {
    max-width: 100px;
}

.stat-select[b-kw3jwkyzw2] {
    width: 100%;
    padding: 0.625rem 0.75rem;
    background: var(--lb-bg-input);
    border: 1px solid var(--lb-border-default);
    border-radius: var(--lb-radius-sm);
    color: var(--lb-text-primary);
    font-size: 0.9rem;
    transition: all 0.2s;
    cursor: pointer;
}

    .stat-select:focus[b-kw3jwkyzw2] {
        outline: none;
        border-color: var(--lb-accent-primary);
        box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.1);
    }

.stat-checkbox[b-kw3jwkyzw2] {
    width: 1.125rem;
    height: 1.125rem;
    margin-right: 0.5rem;
    cursor: pointer;
}

.stat-checkbox-label[b-kw3jwkyzw2] {
    display: flex;
    align-items: center;
    cursor: pointer;
    color: var(--lb-text-primary);
}

.stat-textarea[b-kw3jwkyzw2] {
    width: 100%;
    min-height: 100px;
    padding: 0.625rem 0.75rem;
    background: var(--lb-bg-input);
    border: 1px solid var(--lb-border-default);
    border-radius: var(--lb-radius-sm);
    color: var(--lb-text-primary);
    font-size: 0.9rem;
    font-family: inherit;
    resize: vertical;
    transition: all 0.2s;
}

    .stat-textarea:focus[b-kw3jwkyzw2] {
        outline: none;
        border-color: var(--lb-accent-primary);
        box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.1);
    }

    .stat-textarea[b-kw3jwkyzw2]::placeholder {
        color: var(--lb-text-muted);
    }

/* Stat Groups */
.stat-group[b-kw3jwkyzw2] {
    margin-bottom: 1.5rem;
}

.stat-group-header[b-kw3jwkyzw2] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.625rem 0.875rem;
    background: var(--lb-bg-elevated-2);
    border-radius: var(--lb-radius-sm);
    margin-bottom: 0.875rem;
    border-left: 3px solid var(--lb-accent-primary);
}

.stat-group-icon[b-kw3jwkyzw2] {
    font-size: 1.125rem;
}

.stat-group-name[b-kw3jwkyzw2] {
    font-weight: 600;
    color: var(--lb-text-primary);
}

.stat-group-fields[b-kw3jwkyzw2] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1rem;
    padding: 0 0.25rem;
}

.stat-field[b-kw3jwkyzw2] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.stat-field-fullwidth[b-kw3jwkyzw2] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    margin-top: 1rem;
    padding: 0 0.25rem;
}

.stat-field-label[b-kw3jwkyzw2] {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--lb-text-secondary);
}

.stat-unit[b-kw3jwkyzw2] {
    color: var(--lb-text-muted);
    font-weight: 400;
}

.stat-required[b-kw3jwkyzw2] {
    color: var(--lb-error);
    margin-left: 0.125rem;
}

/* Footer */
.stat-modal-footer[b-kw3jwkyzw2] {
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--lb-border-default);
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.footer-spacer[b-kw3jwkyzw2] {
    flex: 1;
}

/* Buttons (scoped) */
.stat-modal .btn[b-kw3jwkyzw2] {
    padding: 0.5rem 1.25rem;
    border-radius: var(--lb-radius-sm);
    border: none;
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: 500;
    transition: all 0.2s;
}

.stat-modal .btn-primary[b-kw3jwkyzw2] {
    background: var(--lb-accent-primary);
    color: #000;
}

    .stat-modal .btn-primary:hover:not(:disabled)[b-kw3jwkyzw2] {
        background: var(--lb-accent-primary-light);
    }

    .stat-modal .btn-primary:disabled[b-kw3jwkyzw2] {
        opacity: 0.5;
        cursor: not-allowed;
    }

.stat-modal .btn-secondary[b-kw3jwkyzw2] {
    background: var(--lb-bg-elevated-3);
    color: var(--lb-text-primary);
    border: 1px solid var(--lb-border-default);
}

    .stat-modal .btn-secondary:hover[b-kw3jwkyzw2] {
        background: var(--lb-bg-hover);
    }

.stat-modal .btn-sm[b-kw3jwkyzw2] {
    padding: 0.375rem 0.875rem;
    font-size: 0.875rem;
}

/* Responsive */
@media (max-width: 768px) {
    .stat-modal[b-kw3jwkyzw2] {
        max-width: 95%;
        max-height: 90vh;
    }

    .stat-modal-large[b-kw3jwkyzw2] {
        max-width: 95%;
    }

    .stat-card-grid[b-kw3jwkyzw2] {
        grid-template-columns: 1fr;
    }

    .stat-group-fields[b-kw3jwkyzw2] {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 480px) {
    .stat-group-fields[b-kw3jwkyzw2] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Social/CommentItem.razor.rz.scp.css */
/* Thread Lines Comment Style */

/*.thread-comment {
    position: relative;
    padding-left: 3rem;
    margin-bottom: 1.5rem;
}*/

    /* Thread line connecting replies */
    /*.thread-comment::before {
        content: '';
        position: absolute;
        left: 20px;
        top: 50px;
        bottom: -10px;
        width: 2px;
        background: var(--lb-bg-hover);
    }*/

    /* Hide line on last child */
    /*.thread-comment:last-child::before {
        display: none;
    }*/

    /* Top-level comments */
    /*.thread-comment.top-level {
        padding-left: 3rem;
    }

        .thread-comment.top-level::before {
            top: 50px;
        }*/

/* Avatar */
/*.thread-avatar {
    position: absolute;
    left: 0;
    top: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #d4af37 0%, #f4d03f 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: var(--lb-bg-base);
    border: 3px solid #1a1a1a;
    z-index: 2;
    font-size: 1rem;
}*/

/* Deleted avatar */
/*.deleted-avatar {
    background: var(--lb-border-strong);
    color: var(--lb-text-muted);
}*/

/* Content Wrapper */
/*.thread-content-wrapper {
    background: var(--lb-bg-elevated-2);
    border-radius: 12px;
    padding: 1.25rem;
    border: 1px solid #333;
    transition: border-color 0.2s ease;
}

    .thread-content-wrapper:hover {
        border-color: var(--lb-border-strong);
    }

.deleted-wrapper {
    background: var(--lb-bg-elevated);
}*/

/* Header */
/*.thread-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.thread-author {
    font-weight: 600;
    color: #fff;
    font-size: 0.95rem;
}

.thread-meta {
    display: flex;
    gap: 0.75rem;
    color: var(--lb-text-subtle);
    font-size: 0.85rem;
    align-items: center;
}

.thread-badge {
    background: var(--lb-bg-hover);
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    color: var(--lb-accent-primary);
    font-size: 0.8rem;
}*/

/* Content */
/*.thread-content {
    color: var(--lb-text-secondary);
    line-height: 1.6;
    margin-bottom: 0.75rem;
    word-wrap: break-word;
    white-space: pre-wrap;*/ /* ADD THIS - preserves line breaks */
/*}*/

/* Actions */
/*.thread-actions {
    display: flex;
    gap: 1.25rem;
    flex-wrap: wrap;
}

.action-btn {
    background: none;
    border: none;
    color: var(--lb-text-muted);
    cursor: pointer;
    font-size: 0.85rem;
    padding: 0;
    transition: color 0.2s ease;
    font-family: inherit;
}

    .action-btn:hover {
        color: var(--lb-accent-primary);
    }*/

/* Reply Form */
/*.thread-reply-form {
    margin-top: 1rem;
}

.comment-reply-input {
    width: 100%;
    min-height: 80px;
    padding: 0.75rem;
    background: var(--lb-bg-elevated);
    border: 1px solid #444;
    border-radius: 6px;
    color: #fff;
    font-family: inherit;
    font-size: 0.9rem;
    line-height: 1.5;
    resize: vertical;
    margin-bottom: 0.75rem;
}

    .comment-reply-input:focus {
        outline: none;
        border-color: var(--lb-accent-primary);
    }

    .comment-reply-input::placeholder {
        color: var(--lb-text-subtle);
    }

.reply-form-actions {
    display: flex;
    gap: 0.75rem;
}

.btn-reply-submit,
.btn-reply-cancel {
    padding: 0.5rem 1rem;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 500;
    transition: all 0.2s ease;
    font-family: inherit;
}

.btn-reply-submit {
    background: var(--lb-accent-primary);
    color: var(--lb-bg-base);
}

    .btn-reply-submit:hover:not(:disabled) {
        background: var(--lb-accent-primary-light);
    }

    .btn-reply-submit:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }

.btn-reply-cancel {
    background: var(--lb-bg-hover);
    color: var(--lb-text-secondary);
}

    .btn-reply-cancel:hover {
        background: var(--lb-border-strong);
    }*/

/* Edit Form */
/*.comment-edit-form {
    margin-bottom: 0.75rem;
}

.comment-edit-input {
    width: 100%;
    min-height: 80px;
    padding: 0.75rem;
    background: var(--lb-bg-elevated);
    border: 1px solid #444;
    border-radius: 6px;
    color: #fff;
    font-family: inherit;
    font-size: 0.9rem;
    line-height: 1.5;
    resize: vertical;
    margin-bottom: 0.75rem;
}

    .comment-edit-input:focus {
        outline: none;
        border-color: var(--lb-accent-primary);
    }

.comment-edit-actions {
    display: flex;
    gap: 0.75rem;
}

.btn-edit-save,
.btn-edit-cancel {
    padding: 0.5rem 1rem;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 500;
    transition: all 0.2s ease;
    font-family: inherit;
}

.btn-edit-save {
    background: var(--lb-accent-primary);
    color: var(--lb-bg-base);
}

    .btn-edit-save:hover {
        background: var(--lb-accent-primary-light);
    }

.btn-edit-cancel {
    background: var(--lb-bg-hover);
    color: var(--lb-text-secondary);
}

    .btn-edit-cancel:hover {
        background: var(--lb-border-strong);
    }*/

/* Nested Replies */
/*.thread-replies {
    margin-top: 1rem;
}

.thread-comment .thread-comment {
    margin-bottom: 1rem;
}*/

    /* Deeper nesting - slightly different avatar colors for variety */
    /*.thread-comment .thread-comment .thread-avatar {
        background: linear-gradient(135deg, #b8941f 0%, #d4af37 100%);
    }

    .thread-comment .thread-comment .thread-comment .thread-avatar {
        background: linear-gradient(135deg, #9c7d1a 0%, #b8941f 100%);
    }*/

/* Deleted Message */
/*.deleted-message {
    color: var(--lb-text-subtle);
    font-style: italic;
    font-size: 0.9rem;
}*/

/* Error Message */
/*.error-message {
    background: #3a1f1f;
    border: 1px solid #6b2c2c;
    color: #ff8888;
    padding: 0.75rem;
    border-radius: 6px;
    margin-top: 0.75rem;
    font-size: 0.85rem;
}*/

/* Responsive */
/*@media (max-width: 768px) {
    .thread-comment {
        padding-left: 2.5rem;
    }

        .thread-comment.top-level {
            padding-left: 2.5rem;
        }

        .thread-comment::before {
            left: 16px;
        }

    .thread-avatar {
        width: 32px;
        height: 32px;
        font-size: 0.9rem;
    }

    .thread-content-wrapper {
        padding: 1rem;
    }

    .thread-header {
        font-size: 0.9rem;
    }

    .thread-content {
        font-size: 0.9rem;
    }
}*/
/* Thread Lines Comment Style - Using Theme Variables */

.thread-comment[b-lz6fdbhtv0] {
    position: relative;
    padding-left: 3rem;
    margin-bottom: 1.5rem;
}

    /* Thread line connecting replies */
    .thread-comment[b-lz6fdbhtv0]::before {
        content: '';
        position: absolute;
        left: 20px;
        top: 50px;
        bottom: -10px;
        width: 2px;
        background: var(--lb-border-default);
    }

    /* Hide line on last child */
    .thread-comment:last-child[b-lz6fdbhtv0]::before {
        display: none;
    }

    /* Top-level comments */
    .thread-comment.top-level[b-lz6fdbhtv0] {
        padding-left: 3rem;
    }

        .thread-comment.top-level[b-lz6fdbhtv0]::before {
            top: 50px;
        }

/* Avatar */
.thread-avatar[b-lz6fdbhtv0] {
    position: absolute;
    left: 0;
    top: 0;
    width: 40px;
    height: 40px;
    border-radius: var(--lb-radius-full);
    background: linear-gradient(135deg, var(--lb-accent-primary) 0%, var(--lb-accent-primary-light) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: var(--lb-text-inverse);
    border: 3px solid var(--lb-accent-primary, #d4af37);
    z-index: 2;
    font-size: 1rem;
    overflow: hidden;
    text-decoration: none;
    transition: transform 0.2s, box-shadow 0.2s;
}

.thread-avatar:hover[b-lz6fdbhtv0] {
    transform: scale(1.05);
    box-shadow: 0 0 12px rgba(212, 175, 55, 0.4);
}

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

.thread-avatar .avatar-initial[b-lz6fdbhtv0] {
    /* Inherits styles from parent */
}

/* Deleted avatar */
.deleted-avatar[b-lz6fdbhtv0] {
    background: var(--lb-border-strong);
    color: var(--lb-text-muted);
}

/* Content Wrapper */
.thread-content-wrapper[b-lz6fdbhtv0] {
    background: var(--lb-bg-elevated-2);
    border-radius: var(--lb-radius-lg);
    padding: 1.25rem;
    border: 1px solid var(--lb-border-default);
    transition: border-color var(--lb-transition-base);
}

    .thread-content-wrapper:hover[b-lz6fdbhtv0] {
        border-color: var(--lb-border-strong);
    }

.deleted-wrapper[b-lz6fdbhtv0] {
    background: var(--lb-bg-elevated);
}

/* Header */
.thread-header[b-lz6fdbhtv0] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
    gap: var(--lb-spacing-sm);
}

.thread-author[b-lz6fdbhtv0] {
    font-weight: 600;
    color: var(--lb-accent-primary, #d4af37);
    font-size: 0.95rem;
    text-decoration: none;
    transition: color 0.2s;
}

.thread-author:hover[b-lz6fdbhtv0] {
    color: var(--lb-accent-primary-light, #e5c158);
    text-decoration: underline;
}

.thread-meta[b-lz6fdbhtv0] {
    display: flex;
    gap: 0.75rem;
    color: var(--lb-text-subtle);
    font-size: 0.85rem;
    align-items: center;
}

.thread-badge[b-lz6fdbhtv0] {
    background: var(--lb-bg-hover);
    padding: 0.15rem 0.4rem;
    border-radius: var(--lb-radius-sm);
    color: var(--lb-accent-primary);
    font-size: 0.8rem;
}

/* Content */
.thread-content[b-lz6fdbhtv0] {
    color: var(--lb-text-secondary);
    line-height: 1.6;
    margin-bottom: 0.75rem;
    word-wrap: break-word;
    white-space: pre-wrap;
}

/* Actions */
.thread-actions[b-lz6fdbhtv0] {
    display: flex;
    gap: 1.25rem;
    flex-wrap: wrap;
}

.action-btn[b-lz6fdbhtv0] {
    background: none;
    border: none;
    color: var(--lb-text-muted);
    cursor: pointer;
    font-size: 0.85rem;
    padding: 0;
    transition: color var(--lb-transition-base);
    font-family: inherit;
}

    .action-btn:hover[b-lz6fdbhtv0] {
        color: var(--lb-accent-primary);
    }

/* Reply Form */
.thread-reply-form[b-lz6fdbhtv0] {
    margin-top: var(--lb-spacing-md);
}

.comment-reply-input[b-lz6fdbhtv0] {
    width: 100%;
    min-height: 80px;
    padding: 0.75rem;
    background: var(--lb-bg-base);
    border: 1px solid var(--lb-border-strong);
    border-radius: var(--lb-radius-md);
    color: var(--lb-text-primary);
    font-family: inherit;
    font-size: 0.9rem;
    line-height: 1.5;
    resize: vertical;
    margin-bottom: 0.75rem;
}

    .comment-reply-input:focus[b-lz6fdbhtv0] {
        outline: none;
        border-color: var(--lb-border-focus);
    }

    .comment-reply-input[b-lz6fdbhtv0]::placeholder {
        color: var(--lb-text-subtle);
    }

.reply-form-actions[b-lz6fdbhtv0] {
    display: flex;
    gap: 0.75rem;
}

.btn-reply-submit[b-lz6fdbhtv0],
.btn-reply-cancel[b-lz6fdbhtv0] {
    padding: 0.5rem 1rem;
    border-radius: var(--lb-radius-md);
    border: none;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 500;
    transition: all var(--lb-transition-base);
    font-family: inherit;
}

.btn-reply-submit[b-lz6fdbhtv0] {
    background: var(--lb-button-primary-bg);
    color: var(--lb-button-primary-text);
}

    .btn-reply-submit:hover:not(:disabled)[b-lz6fdbhtv0] {
        background: var(--lb-button-primary-hover);
    }

    .btn-reply-submit:disabled[b-lz6fdbhtv0] {
        opacity: 0.5;
        cursor: not-allowed;
    }

.btn-reply-cancel[b-lz6fdbhtv0] {
    background: var(--lb-bg-hover);
    color: var(--lb-text-secondary);
}

    .btn-reply-cancel:hover[b-lz6fdbhtv0] {
        background: var(--lb-border-strong);
    }

/* Edit Form */
.comment-edit-form[b-lz6fdbhtv0] {
    margin-bottom: 0.75rem;
}

.comment-edit-input[b-lz6fdbhtv0] {
    width: 100%;
    min-height: 80px;
    padding: 0.75rem;
    background: var(--lb-bg-base);
    border: 1px solid var(--lb-border-strong);
    border-radius: var(--lb-radius-md);
    color: var(--lb-text-primary);
    font-family: inherit;
    font-size: 0.9rem;
    line-height: 1.5;
    resize: vertical;
    margin-bottom: 0.75rem;
}

    .comment-edit-input:focus[b-lz6fdbhtv0] {
        outline: none;
        border-color: var(--lb-border-focus);
    }

.comment-edit-actions[b-lz6fdbhtv0] {
    display: flex;
    gap: 0.75rem;
}

.btn-edit-save[b-lz6fdbhtv0],
.btn-edit-cancel[b-lz6fdbhtv0] {
    padding: 0.5rem 1rem;
    border-radius: var(--lb-radius-md);
    border: none;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 500;
    transition: all var(--lb-transition-base);
    font-family: inherit;
}

.btn-edit-save[b-lz6fdbhtv0] {
    background: var(--lb-button-primary-bg);
    color: var(--lb-button-primary-text);
}

    .btn-edit-save:hover[b-lz6fdbhtv0] {
        background: var(--lb-button-primary-hover);
    }

.btn-edit-cancel[b-lz6fdbhtv0] {
    background: var(--lb-bg-hover);
    color: var(--lb-text-secondary);
}

    .btn-edit-cancel:hover[b-lz6fdbhtv0] {
        background: var(--lb-border-strong);
    }

/* Nested Replies */
.thread-replies[b-lz6fdbhtv0] {
    margin-top: var(--lb-spacing-md);
}

.thread-comment .thread-comment[b-lz6fdbhtv0] {
    margin-bottom: var(--lb-spacing-md);
}

    /* Deeper nesting - slightly different avatar colors for variety */
    .thread-comment .thread-comment .thread-avatar[b-lz6fdbhtv0] {
        background: linear-gradient(135deg, var(--lb-accent-primary-dark) 0%, var(--lb-accent-primary) 100%);
    }

    .thread-comment .thread-comment .thread-comment .thread-avatar[b-lz6fdbhtv0] {
        background: linear-gradient(135deg, var(--lb-accent-primary-darker) 0%, var(--lb-accent-primary-dark) 100%);
    }

/* Deleted Message */
.deleted-message[b-lz6fdbhtv0] {
    color: var(--lb-text-subtle);
    font-style: italic;
    font-size: 0.9rem;
}

/* Error Message */
.error-message[b-lz6fdbhtv0] {
    background: var(--lb-error-bg);
    border: 1px solid var(--lb-error-border);
    color: var(--lb-error);
    padding: 0.75rem;
    border-radius: var(--lb-radius-md);
    margin-top: 0.75rem;
    font-size: 0.85rem;
}

/* ============================================
   MOBILE BREAKPOINT (768px)
   ============================================ */
@media (max-width: 768px) {
    .thread-comment[b-lz6fdbhtv0] {
        padding-left: 2.5rem;
        margin-bottom: 1rem;
    }

    .thread-comment.top-level[b-lz6fdbhtv0] {
        padding-left: 2.5rem;
    }

    .thread-comment[b-lz6fdbhtv0]::before {
        left: 16px;
    }

    .thread-avatar[b-lz6fdbhtv0] {
        width: 32px;
        height: 32px;
        font-size: 0.85rem;
    }

    .thread-content-wrapper[b-lz6fdbhtv0] {
        padding: 1rem;
    }

    .thread-header[b-lz6fdbhtv0] {
        font-size: 0.9rem;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }

    .thread-meta[b-lz6fdbhtv0] {
        font-size: 0.8rem;
    }

    .thread-content[b-lz6fdbhtv0] {
        font-size: 0.9rem;
    }

    /* Actions - Touch friendly */
    .thread-actions[b-lz6fdbhtv0] {
        gap: 0.75rem;
    }

    .action-btn[b-lz6fdbhtv0] {
        min-height: 44px;
        padding: 0.5rem 0.25rem;
        display: inline-flex;
        align-items: center;
    }

    /* Reply Form */
    .comment-reply-input[b-lz6fdbhtv0],
    .comment-edit-input[b-lz6fdbhtv0] {
        font-size: 16px; /* Prevent iOS zoom */
        min-height: 100px;
        padding: 0.875rem;
    }

    .reply-form-actions[b-lz6fdbhtv0],
    .comment-edit-actions[b-lz6fdbhtv0] {
        flex-wrap: wrap;
    }

    .btn-reply-submit[b-lz6fdbhtv0],
    .btn-reply-cancel[b-lz6fdbhtv0],
    .btn-edit-save[b-lz6fdbhtv0],
    .btn-edit-cancel[b-lz6fdbhtv0] {
        min-height: 44px;
        padding: 0.625rem 1rem;
    }

    /* Nested replies - Reduce padding */
    .thread-replies[b-lz6fdbhtv0] {
        margin-top: 0.75rem;
    }

    .thread-comment .thread-comment[b-lz6fdbhtv0] {
        margin-bottom: 0.75rem;
    }
}

/* ============================================
   SMALL MOBILE BREAKPOINT (480px)
   ============================================ */
@media (max-width: 480px) {
    .thread-comment[b-lz6fdbhtv0] {
        padding-left: 2rem;
    }

    .thread-comment.top-level[b-lz6fdbhtv0] {
        padding-left: 2rem;
    }

    .thread-comment[b-lz6fdbhtv0]::before {
        left: 12px;
    }

    .thread-avatar[b-lz6fdbhtv0] {
        width: 28px;
        height: 28px;
        font-size: 0.75rem;
    }

    .thread-content-wrapper[b-lz6fdbhtv0] {
        padding: 0.875rem;
    }

    .thread-author[b-lz6fdbhtv0] {
        font-size: 0.9rem;
    }

    .thread-meta[b-lz6fdbhtv0] {
        font-size: 0.75rem;
        gap: 0.5rem;
    }

    .thread-content[b-lz6fdbhtv0] {
        font-size: 0.85rem;
    }
}
/* /Components/Social/CommentReactions.razor.rz.scp.css */
.comment-reactions[b-sj0ns1u383] {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.reaction-btn[b-sj0ns1u383] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    border: 1px solid var(--border-secondary);
    background: var(--bg-secondary);
    border-radius: 0.375rem;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.875rem;
    color: var(--text-primary);
}

.reaction-btn:hover:not(:disabled)[b-sj0ns1u383] {
    background: var(--bg-hover);
    border-color: var(--accent-primary);
    transform: translateY(-1px);
}

.reaction-btn:active:not(:disabled)[b-sj0ns1u383] {
    transform: translateY(0);
}

.reaction-btn:disabled[b-sj0ns1u383] {
    opacity: 0.5;
    cursor: not-allowed;
}

.reaction-btn.active[b-sj0ns1u383] {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    color: var(--text-on-accent);
}

.reaction-btn.active:hover:not(:disabled)[b-sj0ns1u383] {
    background: var(--accent-secondary);
    border-color: var(--accent-secondary);
}

.reaction-icon[b-sj0ns1u383] {
    font-size: 1rem;
    line-height: 1;
}

.reaction-count[b-sj0ns1u383] {
    font-weight: 600;
    min-width: 1.25rem;
    text-align: center;
}

/* Dark theme support */
@media (prefers-color-scheme: dark) {
    .reaction-btn[b-sj0ns1u383] {
        border-color: rgba(255, 255, 255, 0.1);
        background: rgba(255, 255, 255, 0.05);
    }

    .reaction-btn:hover:not(:disabled)[b-sj0ns1u383] {
        background: rgba(255, 255, 255, 0.1);
    }

    .reaction-btn.active[b-sj0ns1u383] {
        background: var(--accent-primary);
        border-color: var(--accent-primary);
    }
}
/* /Components/Social/CommunityFeedback.razor.rz.scp.css */
/* Community Feedback Component - Variation A: Elegant Stacked */

/*.community-feedback-card {
    background: #1a1a1a;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #2a2a2a;
}

.loading-state {
    padding: 3rem;
    text-align: center;
    color: #888;
}*/

/* Section Headers */
/*.section-header {
    background: linear-gradient(135deg, #2a2a2a 0%, #1f1f1f 100%);
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid #333;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.section-title {
    font-size: 1.1rem;
    color: #d4af37;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.section-icon {
    font-size: 1.25rem;
}

.section-badge {
    background: #333;
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.85rem;
    color: #888;
}*/

/* Rating Section */
/*.rating-section {
    padding: 2rem;
    border-bottom: 2px solid #2a2a2a;
}

.rating-display {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 2rem;
    align-items: center;
}

@media (max-width: 768px) {
    .rating-display {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
}

.rating-score {
    text-align: center;
    min-width: 150px;
}

.rating-number {
    font-size: 3.5rem;
    font-weight: 700;
    color: #d4af37;
    line-height: 1;
}

.rating-stars {
    font-size: 1.25rem;
    color: #d4af37;
    margin: 0.5rem 0;
    letter-spacing: 0.1rem;
}

.rating-count {
    color: #888;
    font-size: 0.9rem;
    font-weight: 500;
}*/

/* Rating Breakdown */
/*.rating-breakdown {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    flex: 1;
}

.rating-bar-row {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.rating-label {
    min-width: 60px;
    color: #888;
    font-size: 0.9rem;
}

.rating-bar-container {
    flex: 1;
    height: 8px;
    background: #2a2a2a;
    border-radius: 4px;
    overflow: hidden;
}

.rating-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #d4af37 0%, #f4d03f 100%);
    transition: width 0.3s ease;
}

.rating-bar-count {
    min-width: 40px;
    text-align: right;
    color: #888;
    font-size: 0.9rem;
}*/

/* Your Rating */
/*.your-rating-inline {
    background: #222;
    padding: 1.25rem;
    border-radius: 8px;
    border: 1px solid #333;
    display: flex;
    align-items: center;
    gap: 1rem;
    min-width: 220px;
}

@media (max-width: 768px) {
    .your-rating-inline {
        justify-content: center;
    }
}

.your-rating-label {
    color: #fff;
    font-weight: 500;
    white-space: nowrap;
}

.star-selector {
    display: flex;
    gap: 0.5rem;
    font-size: 1.75rem;
}

.star {
    cursor: pointer;
    color: #444;
    transition: all 0.2s ease;
    user-select: none;
}

    .star:hover {
        color: #d4af37;
        transform: scale(1.15);
    }

    .star.filled {
        color: #d4af37;
    }

    .star.hover {
        color: #f4d03f;
    }*/

/* Clear Rating Button */
/*.clear-rating-btn {
    background: #333;
    border: 1px solid #444;
    color: #888;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.2s ease;
    padding: 0;
    margin-left: 0.5rem;
}

    .clear-rating-btn:hover {
        background: #444;
        color: #ff6666;
        border-color: #555;
        transform: scale(1.1);
    }*/

/* Empty Rating State */
/*.empty-rating-state {
    text-align: center;
    padding: 3rem 1rem;
}

.empty-icon {
    font-size: 3rem;
    opacity: 0.3;
    margin-bottom: 1rem;
}

.empty-text {
    color: #666;
    font-size: 0.95rem;
}*/

/* Discussion Section */
/*.discussion-section {
    padding: 2rem;
}*/

/* Comment Form */
/*.comment-form {
    margin-bottom: 2rem;
}

.comment-input {
    width: 100%;
    min-height: 100px;
    padding: 1rem;
    background: #222;
    border: 1px solid #444;
    border-radius: 8px;
    color: #fff;
    font-family: inherit;
    font-size: 0.95rem;
    line-height: 1.6;
    resize: vertical;
    margin-bottom: 1rem;
    transition: border-color 0.2s ease;
}

    .comment-input:focus {
        outline: none;
        border-color: #d4af37;
    }

    .comment-input::placeholder {
        color: #666;
    }

.form-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.character-count {
    color: #666;
    font-size: 0.85rem;
}

    .character-count.warning {
        color: #f4d03f;
    }*/

/* Buttons */
/*.btn {
    padding: 0.75rem 1.5rem;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    font-weight: 500;
    font-size: 0.95rem;
    transition: all 0.2s ease;
    font-family: inherit;
}

    .btn:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }

.btn-primary {
    background: #d4af37;
    color: #0f0f0f;
}

    .btn-primary:hover:not(:disabled) {
        background: #f4d03f;
        transform: translateY(-1px);
    }

.btn-ghost {
    background: transparent;
    color: #888;
    border: 1px solid #444;
}

    .btn-ghost:hover:not(:disabled) {
        background: #222;
        color: #fff;
        border-color: #555;
    }*/

/* Login Prompt */
/*.login-prompt {
    text-align: center;
    padding: 2rem;
    background: #222;
    border-radius: 8px;
    border: 1px solid #333;
}

    .login-prompt p {
        color: #888;
        margin: 0;
    }*/

/* Comments List */
/*.comment-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.loading-comments {
    text-align: center;
    padding: 2rem;
    color: #888;
}

.empty-comments-state {
    text-align: center;
    padding: 3rem 1rem;
}

.load-more {
    text-align: center;
    padding: 1rem;
    margin-top: 1rem;
}*/

/* Error Messages */
/*.error-message {
    background: #3a1f1f;
    border: 1px solid #6b2c2c;
    color: #ff8888;
    padding: 1rem;
    border-radius: 6px;
    margin-top: 1rem;
    font-size: 0.9rem;
}*/

/* Responsive Adjustments */
/*@media (max-width: 768px) {
    .rating-section,
    .discussion-section {
        padding: 1.5rem;
    }

    .section-header {
        padding: 1rem;
    }

    .rating-number {
        font-size: 2.5rem;
    }

    .star-selector {
        font-size: 1.5rem;
    }

    .rating-bar-row {
        gap: 0.75rem;
    }

    .rating-label {
        min-width: 50px;
        font-size: 0.85rem;
    }
}*/


/* Community Feedback Component - Using Theme Variables */

.community-feedback-card[b-w8ievwvort] {
    background: var(--lb-card-bg);
    border-radius: var(--lb-radius-lg);
    overflow: hidden;
    border: 1px solid var(--lb-card-border);
}

.loading-state[b-w8ievwvort] {
    padding: var(--lb-spacing-xl);
    text-align: center;
    color: var(--lb-text-muted);
}

/* Section Headers */
.section-header[b-w8ievwvort] {
    background: var(--lb-card-header-bg);
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--lb-border-default);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.section-title[b-w8ievwvort] {
    font-size: 1.1rem;
    color: var(--lb-accent-primary);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: var(--lb-spacing-sm);
}

.section-icon[b-w8ievwvort] {
    font-size: 1.25rem;
}

.section-badge[b-w8ievwvort] {
    background: var(--lb-bg-hover);
    padding: 0.25rem 0.75rem;
    border-radius: var(--lb-radius-lg);
    font-size: 0.85rem;
    color: var(--lb-text-muted);
}

/* Rating Section */
.rating-section[b-w8ievwvort] {
    padding: var(--lb-spacing-xl);
    border-bottom: 2px solid var(--lb-border-subtle);
}

.rating-display[b-w8ievwvort] {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: var(--lb-spacing-xl);
    align-items: center;
}

@media (max-width: 768px) {
    .rating-display[b-w8ievwvort] {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
}

.rating-score[b-w8ievwvort] {
    text-align: center;
    min-width: 150px;
}

.rating-number[b-w8ievwvort] {
    font-size: 3.5rem;
    font-weight: 700;
    color: var(--lb-accent-primary);
    line-height: 1;
}

.rating-stars[b-w8ievwvort] {
    font-size: 1.25rem;
    color: var(--lb-rating-fill);
    margin: 0.5rem 0;
    letter-spacing: 0.1rem;
}

.rating-count[b-w8ievwvort] {
    color: var(--lb-text-muted);
    font-size: 0.9rem;
    font-weight: 500;
}

/* Rating Breakdown */
.rating-breakdown[b-w8ievwvort] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    flex: 1;
}

.rating-bar-row[b-w8ievwvort] {
    display: flex;
    align-items: center;
    gap: var(--lb-spacing-md);
}

.rating-label[b-w8ievwvort] {
    min-width: 60px;
    color: var(--lb-text-muted);
    font-size: 0.9rem;
}

.rating-bar-container[b-w8ievwvort] {
    flex: 1;
    height: 8px;
    background: var(--lb-border-subtle);
    border-radius: var(--lb-radius-sm);
    overflow: hidden;
}

.rating-bar-fill[b-w8ievwvort] {
    height: 100%;
    background: linear-gradient(90deg, var(--lb-accent-primary) 0%, var(--lb-accent-primary-light) 100%);
    transition: width var(--lb-transition-slow);
}

.rating-bar-count[b-w8ievwvort] {
    min-width: 40px;
    text-align: right;
    color: var(--lb-text-muted);
    font-size: 0.9rem;
}

/* Your Rating */
.your-rating-inline[b-w8ievwvort] {
    background: var(--lb-bg-elevated-2);
    padding: 1.25rem;
    border-radius: var(--lb-radius-md);
    border: 1px solid var(--lb-border-default);
    display: flex;
    align-items: center;
    gap: var(--lb-spacing-md);
    min-width: 220px;
}

@media (max-width: 768px) {
    .your-rating-inline[b-w8ievwvort] {
        justify-content: center;
    }
}

.your-rating-label[b-w8ievwvort] {
    color: var(--lb-text-primary);
    font-weight: 500;
    white-space: nowrap;
}

.star-selector[b-w8ievwvort] {
    display: flex;
    gap: var(--lb-spacing-sm);
    font-size: 1.75rem;
}

.star[b-w8ievwvort] {
    cursor: pointer;
    color: var(--lb-rating-empty);
    transition: all var(--lb-transition-base);
    user-select: none;
}

    .star:hover[b-w8ievwvort] {
        color: var(--lb-rating-fill);
        transform: scale(1.15);
    }

    .star.filled[b-w8ievwvort] {
        color: var(--lb-rating-fill);
    }

    .star.hover[b-w8ievwvort] {
        color: var(--lb-rating-hover);
    }

/* Clear Rating Button */
.clear-rating-btn[b-w8ievwvort] {
    background: var(--lb-bg-hover);
    border: 1px solid var(--lb-border-strong);
    color: var(--lb-text-muted);
    width: 24px;
    height: 24px;
    border-radius: var(--lb-radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all var(--lb-transition-base);
    padding: 0;
    margin-left: var(--lb-spacing-sm);
}

    .clear-rating-btn:hover[b-w8ievwvort] {
        background: var(--lb-border-strong);
        color: var(--lb-error);
        border-color: var(--lb-border-strong);
        transform: scale(1.1);
    }

/* Empty Rating State */
.empty-rating-state[b-w8ievwvort] {
    text-align: center;
    padding: 3rem 1rem;
}

.empty-icon[b-w8ievwvort] {
    font-size: 3rem;
    opacity: 0.3;
    margin-bottom: var(--lb-spacing-md);
}

.empty-text[b-w8ievwvort] {
    color: var(--lb-text-subtle);
    font-size: 0.95rem;
}

/* Discussion Section */
.discussion-section[b-w8ievwvort] {
    padding: var(--lb-spacing-xl);
}

/* Comment Form */
.comment-form[b-w8ievwvort] {
    margin-bottom: var(--lb-spacing-xl);
}

.comment-input[b-w8ievwvort] {
    width: 100%;
    min-height: 100px;
    padding: var(--lb-spacing-md);
    background: var(--lb-bg-input);
    border: 1px solid var(--lb-border-strong);
    border-radius: var(--lb-radius-md);
    color: var(--lb-text-primary);
    font-family: inherit;
    font-size: 0.95rem;
    line-height: 1.6;
    resize: vertical;
    margin-bottom: var(--lb-spacing-md);
    transition: border-color var(--lb-transition-base);
}

    .comment-input:focus[b-w8ievwvort] {
        outline: none;
        border-color: var(--lb-border-focus);
    }

    .comment-input[b-w8ievwvort]::placeholder {
        color: var(--lb-text-subtle);
    }

.form-actions[b-w8ievwvort] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.character-count[b-w8ievwvort] {
    color: var(--lb-text-subtle);
    font-size: 0.85rem;
}

    .character-count.warning[b-w8ievwvort] {
        color: var(--lb-warning);
    }

/* Buttons */
.btn[b-w8ievwvort] {
    padding: 0.75rem 1.5rem;
    border-radius: var(--lb-radius-md);
    border: none;
    cursor: pointer;
    font-weight: 500;
    font-size: 0.95rem;
    transition: all var(--lb-transition-base);
    font-family: inherit;
}

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

.btn-primary[b-w8ievwvort] {
    background: var(--lb-button-primary-bg);
    color: var(--lb-button-primary-text);
}

    .btn-primary:hover:not(:disabled)[b-w8ievwvort] {
        background: var(--lb-button-primary-hover);
        transform: translateY(-1px);
    }

.btn-ghost[b-w8ievwvort] {
    background: transparent;
    color: var(--lb-text-muted);
    border: 1px solid var(--lb-border-strong);
}

    .btn-ghost:hover:not(:disabled)[b-w8ievwvort] {
        background: var(--lb-bg-elevated-2);
        color: var(--lb-text-primary);
        border-color: var(--lb-border-strong);
    }

/* Login Prompt */
.login-prompt[b-w8ievwvort] {
    text-align: center;
    padding: var(--lb-spacing-xl);
    background: var(--lb-bg-elevated-2);
    border-radius: var(--lb-radius-md);
    border: 1px solid var(--lb-border-default);
}

    .login-prompt p[b-w8ievwvort] {
        color: var(--lb-text-muted);
        margin: 0;
    }

/* Comments List */
.comment-list[b-w8ievwvort] {
    display: flex;
    flex-direction: column;
    gap: var(--lb-spacing-md);
}

.loading-comments[b-w8ievwvort] {
    text-align: center;
    padding: var(--lb-spacing-xl);
    color: var(--lb-text-muted);
}

.empty-comments-state[b-w8ievwvort] {
    text-align: center;
    padding: 3rem 1rem;
}

.load-more[b-w8ievwvort] {
    text-align: center;
    padding: var(--lb-spacing-md);
    margin-top: var(--lb-spacing-md);
}

/* Error Messages */
.error-message[b-w8ievwvort] {
    background: var(--lb-error-bg);
    border: 1px solid var(--lb-error-border);
    color: var(--lb-error);
    padding: var(--lb-spacing-md);
    border-radius: var(--lb-radius-md);
    margin-top: var(--lb-spacing-md);
    font-size: 0.9rem;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .rating-section[b-w8ievwvort],
    .discussion-section[b-w8ievwvort] {
        padding: 1.5rem;
    }

    .section-header[b-w8ievwvort] {
        padding: var(--lb-spacing-md);
    }

    .rating-number[b-w8ievwvort] {
        font-size: 2.5rem;
    }

    .star-selector[b-w8ievwvort] {
        font-size: 1.5rem;
    }

    .rating-bar-row[b-w8ievwvort] {
        gap: 0.75rem;
    }

    .rating-label[b-w8ievwvort] {
        min-width: 50px;
        font-size: 0.85rem;
    }
}
/* Report Section */
.report-section[b-w8ievwvort] {
    padding: var(--lb-spacing-md) var(--lb-spacing-xl);
    border-top: 1px solid var(--lb-border-subtle);
    display: flex;
    justify-content: flex-end;
    background: var(--lb-bg-elevated-2);
}

.report-btn[b-w8ievwvort] {
    background: transparent;
    border: 1px solid var(--lb-border-default);
    color: var(--lb-text-muted);
    padding: 0.5rem 1rem;
    border-radius: var(--lb-radius-md);
    font-size: 0.85rem;
    cursor: pointer;
    transition: all var(--lb-transition-base);
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

    .report-btn:hover[b-w8ievwvort] {
        background: rgba(239, 68, 68, 0.1);
        border-color: var(--lb-error);
        color: var(--lb-error);
    }
/* /Components/Social/EditProfile.razor.rz.scp.css */
.edit-profile-overlay[b-ul876fiyir] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: 1rem;
}

.edit-profile-modal[b-ul876fiyir] {
    background: var(--lb-bg-elevated, #1a1a1a);
    border: 1px solid var(--lb-border-default, #333);
    border-radius: 12px;
    max-width: 600px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
}

.modal-header[b-ul876fiyir] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--lb-border-default, #333);
    position: sticky;
    top: 0;
    background: var(--lb-bg-elevated, #1a1a1a);
    z-index: 1;
}

.modal-header h2[b-ul876fiyir] {
    margin: 0;
    font-size: 1.25rem;
    color: var(--lb-text-primary, #fff);
}

.close-btn[b-ul876fiyir] {
    background: none;
    border: none;
    color: var(--lb-text-muted, #888);
    font-size: 1.25rem;
    cursor: pointer;
    padding: 0.25rem;
}

.close-btn:hover[b-ul876fiyir] {
    color: var(--lb-text-primary, #fff);
}

.modal-body[b-ul876fiyir] {
    padding: 1.25rem;
}

.loading[b-ul876fiyir] {
    text-align: center;
    padding: 3rem 2rem;
    color: var(--lb-text-muted, #888);
}

.spinner[b-ul876fiyir] {
    width: 40px;
    height: 40px;
    border: 3px solid var(--lb-border-default, #333);
    border-top-color: var(--lb-accent-primary, #d4af37);
    border-radius: 50%;
    animation: spin-b-ul876fiyir 1s linear infinite;
    margin: 0 auto 1rem;
}

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

.error-message[b-ul876fiyir] {
    text-align: center;
    padding: 2rem;
    color: #ff6b6b;
}

.error-banner[b-ul876fiyir] {
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid #ef4444;
    border-radius: 6px;
    padding: 0.75rem;
    margin-bottom: 1rem;
    color: #fca5a5;
    font-size: 0.9rem;
}

.success-message[b-ul876fiyir] {
    background: rgba(40, 167, 69, 0.1);
    border: 1px solid rgba(40, 167, 69, 0.3);
    color: #51cf66;
    padding: 1rem;
    border-radius: 8px;
    margin: 1rem 1.25rem;
    text-align: center;
}

.form-group[b-ul876fiyir] {
    margin-bottom: 1.25rem;
}

.form-group label[b-ul876fiyir] {
    display: block;
    margin-bottom: 0.5rem;
    color: var(--lb-text-secondary, #aaa);
    font-size: 0.9rem;
    font-weight: 500;
}

.form-control[b-ul876fiyir] {
    width: 100%;
    padding: 0.75rem;
    background: var(--lb-bg-base, #0f0f0f);
    border: 1px solid var(--lb-border-default, #333);
    border-radius: 6px;
    color: var(--lb-text-primary, #e0e0e0);
    font-size: 0.95rem;
    transition: border-color 0.2s;
}

.form-control:focus[b-ul876fiyir] {
    outline: none;
    border-color: var(--lb-accent-primary, #d4af37);
}

.form-control[b-ul876fiyir]::placeholder {
    color: var(--lb-text-muted, #666);
}

textarea.form-control[b-ul876fiyir] {
    resize: vertical;
    min-height: 80px;
    font-family: inherit;
}

.form-group small[b-ul876fiyir] {
    display: block;
    margin-top: 0.25rem;
    color: var(--lb-text-muted, #666);
    font-size: 0.8rem;
}

.input-with-prefix[b-ul876fiyir] {
    display: flex;
    align-items: center;
}

.input-with-prefix .prefix[b-ul876fiyir] {
    background: var(--lb-bg-elevated-2, #252525);
    padding: 0.75rem;
    border: 1px solid var(--lb-border-default, #333);
    border-right: none;
    border-radius: 6px 0 0 6px;
    color: var(--lb-text-muted, #888);
    font-size: 0.85rem;
    white-space: nowrap;
}

.input-with-prefix .form-control[b-ul876fiyir] {
    border-radius: 0 6px 6px 0;
}

.social-section[b-ul876fiyir],
.privacy-section[b-ul876fiyir] {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--lb-border-default, #333);
}

.social-section h3[b-ul876fiyir],
.privacy-section h3[b-ul876fiyir] {
    margin: 0 0 1rem 0;
    color: var(--lb-text-primary, #fff);
    font-size: 1rem;
}

.checkbox-group[b-ul876fiyir] {
    margin-bottom: 1rem;
}

.checkbox-group label[b-ul876fiyir] {
    display: flex;
    align-items: flex-start;
    cursor: pointer;
    margin: 0;
}

.checkbox-group input[type="checkbox"][b-ul876fiyir] {
    margin-right: 0.75rem;
    margin-top: 0.2rem;
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: var(--lb-accent-primary, #d4af37);
}

.checkbox-group label span[b-ul876fiyir] {
    color: var(--lb-text-primary, #e0e0e0);
}

.checkbox-group small[b-ul876fiyir] {
    display: block;
    margin-left: 28px;
    margin-top: 0.25rem;
}

.form-actions[b-ul876fiyir] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--lb-border-default, #333);
    position: sticky;
    bottom: 0;
    background: var(--lb-bg-elevated, #1a1a1a);
}

.save-button[b-ul876fiyir],
.cancel-button[b-ul876fiyir] {
    padding: 0.6rem 1.25rem;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
}

.save-button[b-ul876fiyir] {
    background: var(--lb-accent-primary, #d4af37);
    color: #0f0f0f;
    border: none;
}

.save-button:hover:not(:disabled)[b-ul876fiyir] {
    filter: brightness(1.1);
}

.save-button:disabled[b-ul876fiyir] {
    opacity: 0.5;
    cursor: not-allowed;
}

.cancel-button[b-ul876fiyir] {
    background: transparent;
    color: var(--lb-text-primary, #fff);
    border: 1px solid var(--lb-border-default, #333);
}

.cancel-button:hover:not(:disabled)[b-ul876fiyir] {
    background: var(--lb-bg-elevated-2, #252525);
}

.cancel-button:disabled[b-ul876fiyir] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Avatar Upload Area */
.avatar-upload-area[b-ul876fiyir] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: var(--lb-bg-base, #0f0f0f);
    border: 1px solid var(--lb-border-default, #333);
    border-radius: 8px;
}

.avatar-preview[b-ul876fiyir] {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--lb-bg-elevated-2, #252525);
}

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

.avatar-placeholder-large[b-ul876fiyir] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--lb-accent-primary, #d4af37);
}

.avatar-upload-controls[b-ul876fiyir] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.avatar-upload-controls .file-input[b-ul876fiyir] {
    display: none;
}

.avatar-upload-controls .upload-btn[b-ul876fiyir] {
    display: inline-block;
    padding: 0.5rem 1rem;
    background: var(--lb-accent-primary, #d4af37);
    color: #0f0f0f;
    border-radius: 6px;
    font-weight: 500;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
}

.avatar-upload-controls .upload-btn:hover[b-ul876fiyir] {
    filter: brightness(1.1);
}

.avatar-upload-controls .remove-btn[b-ul876fiyir] {
    padding: 0.4rem 0.75rem;
    background: transparent;
    border: 1px solid #ef4444;
    color: #ef4444;
    border-radius: 6px;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s;
}

.avatar-upload-controls .remove-btn:hover[b-ul876fiyir] {
    background: #ef4444;
    color: white;
}

.avatar-error[b-ul876fiyir] {
    color: #ef4444;
    font-size: 0.8rem;
}

/* Responsive */
@media (max-width: 640px) {
    .edit-profile-overlay[b-ul876fiyir] {
        padding: 0;
    }

    .edit-profile-modal[b-ul876fiyir] {
        max-width: 100%;
        max-height: 100vh;
        border-radius: 0;
    }

    .avatar-upload-area[b-ul876fiyir] {
        flex-direction: column;
        text-align: center;
    }
}
/* /Components/Social/FollowButton.razor.rz.scp.css */
.follow-btn[b-1ri01yv3q4] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    border: 1px solid var(--lb-accent-primary, #d4af37);
    background: var(--lb-accent-primary, #d4af37);
    color: #0f0f0f;
}

    .follow-btn:hover:not(:disabled)[b-1ri01yv3q4] {
        transform: translateY(-1px);
        box-shadow: 0 2px 8px rgba(212, 175, 55, 0.3);
    }

    .follow-btn:disabled[b-1ri01yv3q4] {
        opacity: 0.6;
        cursor: not-allowed;
    }

    .follow-btn.following[b-1ri01yv3q4] {
        background: transparent;
        color: var(--lb-accent-primary, #d4af37);
    }

        .follow-btn.following:hover[b-1ri01yv3q4] {
            background: rgba(239, 68, 68, 0.1);
            border-color: #ef4444;
            color: #ef4444;
        }

    .follow-btn .follow-hover-text[b-1ri01yv3q4] {
        display: none;
    }

    .follow-btn.following:hover .follow-text[b-1ri01yv3q4] {
        display: none;
    }

    .follow-btn.following:hover .follow-hover-text[b-1ri01yv3q4] {
        display: inline;
    }

    .follow-btn.following:hover .follow-icon[b-1ri01yv3q4] {
        display: none;
    }

.follow-icon[b-1ri01yv3q4] {
    font-size: 1rem;
}

.follow-loading[b-1ri01yv3q4] {
    animation: pulse-b-1ri01yv3q4 1s infinite;
}

@keyframes pulse-b-1ri01yv3q4 {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}
/* /Components/Social/MediaGallery.razor.rz.scp.css */
.media-gallery-component[b-w7zmszwe0e] {
    width: 100%;
}

.empty-state[b-w7zmszwe0e] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 2rem;
    text-align: center;
    color: var(--lb-text-muted, #666);
}

.media-grid[b-w7zmszwe0e] {
    display: grid;
    gap: 1rem;
}

    .media-grid.grid[b-w7zmszwe0e] {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    }

.media-item[b-w7zmszwe0e] {
    background: var(--lb-bg-elevated-2, #1a1a1a);
    border: 1px solid var(--lb-border-default, #333);
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.2s;
}

    .media-item:hover[b-w7zmszwe0e] {
        border-color: var(--lb-accent-primary, #d4af37);
        transform: translateY(-2px);
    }

    .media-item.main-image[b-w7zmszwe0e] {
        border-color: var(--lb-accent-primary, #d4af37);
    }

.media-image-container[b-w7zmszwe0e] {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    overflow: hidden;
}

.media-image[b-w7zmszwe0e] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.main-image-badge[b-w7zmszwe0e] {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
}

    .main-image-badge .badge[b-w7zmszwe0e] {
        background: var(--lb-accent-primary, #d4af37);
        color: #0f0f0f;
        font-size: 0.7rem;
        padding: 0.25rem 0.5rem;
        border-radius: 4px;
        font-weight: 600;
    }

.ai-badge[b-w7zmszwe0e] {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    background: rgba(0, 0, 0, 0.7);
    padding: 0.25rem 0.4rem;
    border-radius: 4px;
    font-size: 0.8rem;
}

.media-placeholder[b-w7zmszwe0e] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    background: var(--lb-bg-elevated-3, #252525);
}

.media-type-icon[b-w7zmszwe0e] {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.media-caption[b-w7zmszwe0e] {
    padding: 0.5rem 0.75rem;
    font-size: 0.85rem;
    color: var(--lb-text-secondary, #a0a0a0);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.media-size[b-w7zmszwe0e] {
    padding: 0 0.75rem 0.5rem;
    font-size: 0.75rem;
    color: var(--lb-text-muted, #666);
}

.gallery-actions[b-w7zmszwe0e] {
    margin-top: 1rem;
}
/* /Components/Social/StatBlockDisplay.razor.rz.scp.css */
/* Stat Block Wrapper - Expandable */
.stat-block-wrapper[b-s47kdkqcjf] {
    background: var(--lb-bg-elevated-2);
    border: 1px solid var(--lb-border-subtle);
    border-radius: var(--lb-radius-md);
    overflow: hidden;
    transition: all 0.2s;
}

    .stat-block-wrapper:hover[b-s47kdkqcjf] {
        border-color: var(--lb-border-default);
    }

    .stat-block-wrapper.default[b-s47kdkqcjf] {
        border-color: var(--lb-accent-primary);
        border-width: 2px;
    }

    .stat-block-wrapper.expanded[b-s47kdkqcjf] {
        background: var(--lb-bg-elevated);
    }

/* Header - Always visible, clickable */
.stat-block-header[b-s47kdkqcjf] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.875rem 1rem;
    cursor: pointer;
    transition: background 0.15s;
}

    .stat-block-header:hover[b-s47kdkqcjf] {
        background: var(--lb-bg-hover);
    }

.stat-block-title-row[b-s47kdkqcjf] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.stat-block-icon[b-s47kdkqcjf] {
    font-size: 1.1rem;
}

.stat-block-name[b-s47kdkqcjf] {
    font-weight: 600;
    color: var(--lb-text-primary);
    font-size: 0.95rem;
}

.stat-block-badges[b-s47kdkqcjf] {
    display: flex;
    gap: 0.375rem;
    margin-left: 0.5rem;
}

.badge[b-s47kdkqcjf] {
    display: inline-block;
    padding: 0.15rem 0.4rem;
    border-radius: 8px;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
}

.badge-default[b-s47kdkqcjf] {
    background: rgba(212, 175, 55, 0.2);
    color: var(--lb-accent-primary);
}

.badge-official[b-s47kdkqcjf] {
    background: rgba(76, 175, 80, 0.2);
    color: var(--lb-success);
}

.stat-block-chevron[b-s47kdkqcjf] {
    color: var(--lb-text-muted);
    font-size: 0.75rem;
    transition: transform 0.2s;
}

.stat-block-loading[b-s47kdkqcjf],
.stat-block-error[b-s47kdkqcjf] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.spinner-sm[b-s47kdkqcjf] {
    width: 18px;
    height: 18px;
    border: 2px solid var(--lb-border-default);
    border-top-color: var(--lb-accent-primary);
    border-radius: 50%;
    animation: spin-b-s47kdkqcjf 0.8s linear infinite;
}

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

/* Expanded Body */
.stat-block-body[b-s47kdkqcjf] {
    padding: 0 1rem 1rem 1rem;
    border-top: 1px solid var(--lb-border-subtle);
    animation: slideDown-b-s47kdkqcjf 0.2s ease-out;
}

@keyframes slideDown-b-s47kdkqcjf {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Stat Groups */
.stat-group[b-s47kdkqcjf] {
    margin-bottom: 1rem;
}

    .stat-group:last-of-type[b-s47kdkqcjf] {
        margin-bottom: 0.75rem;
    }

.stat-group-title[b-s47kdkqcjf] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--lb-accent-primary);
    margin: 0.75rem 0 0.5rem 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.stat-grid[b-s47kdkqcjf] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 0.5rem;
}

.stat-item[b-s47kdkqcjf] {
    background: var(--lb-bg-elevated-2);
    border-radius: var(--lb-radius-sm);
    padding: 0.5rem 0.625rem;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.stat-label[b-s47kdkqcjf] {
    font-size: 0.7rem;
    color: var(--lb-text-muted);
    font-weight: 500;
}

.stat-value[b-s47kdkqcjf] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--lb-text-primary);
}

.stat-input[b-s47kdkqcjf] {
    width: 100%;
    padding: 0.25rem 0.375rem;
    background: var(--lb-bg-input);
    border: 1px solid var(--lb-border-default);
    border-radius: var(--lb-radius-sm);
    color: var(--lb-text-primary);
    font-size: 0.95rem;
    font-weight: 600;
}

    .stat-input:focus[b-s47kdkqcjf] {
        outline: none;
        border-color: var(--lb-accent-primary);
    }

.stat-empty[b-s47kdkqcjf] {
    text-align: center;
    padding: 1rem;
    color: var(--lb-text-muted);
    font-size: 0.9rem;
}

/* Textarea Stats - Full Width */
.stat-textarea-item[b-s47kdkqcjf] {
    margin-top: 0.75rem;
    padding: 0.75rem;
    background: var(--lb-bg-elevated-2);
    border-radius: var(--lb-radius-sm);
}

.stat-textarea-label[b-s47kdkqcjf] {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--lb-accent-primary);
    margin-bottom: 0.375rem;
    text-transform: uppercase;
}

.stat-textarea-value[b-s47kdkqcjf] {
    font-size: 0.9rem;
    color: var(--lb-text-primary);
    line-height: 1.5;
    white-space: pre-wrap;
}

.stat-textarea-input[b-s47kdkqcjf] {
    width: 100%;
    min-height: 80px;
    padding: 0.5rem;
    background: var(--lb-bg-input);
    border: 1px solid var(--lb-border-default);
    border-radius: var(--lb-radius-sm);
    color: var(--lb-text-primary);
    font-size: 0.9rem;
    font-family: inherit;
    resize: vertical;
}

    .stat-textarea-input:focus[b-s47kdkqcjf] {
        outline: none;
        border-color: var(--lb-accent-primary);
    }

/* Alerts */
.stat-alert[b-s47kdkqcjf] {
    margin: 0.75rem 0;
    padding: 0.5rem 0.75rem;
    border-radius: var(--lb-radius-sm);
    font-size: 0.85rem;
}

    .stat-alert.error[b-s47kdkqcjf] {
        background: rgba(244, 67, 54, 0.15);
        color: var(--lb-error);
    }

    .stat-alert.success[b-s47kdkqcjf] {
        background: rgba(76, 175, 80, 0.15);
        color: var(--lb-success);
    }

/* Actions */
.stat-actions[b-s47kdkqcjf] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--lb-border-subtle);
}

/* Buttons */
.btn[b-s47kdkqcjf] {
    padding: 0.5rem 1rem;
    border-radius: var(--lb-radius-sm);
    border: none;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.15s;
}

.btn-sm[b-s47kdkqcjf] {
    padding: 0.375rem 0.75rem;
    font-size: 0.8rem;
}

.btn-primary[b-s47kdkqcjf] {
    background: var(--lb-accent-primary);
    color: #000;
}

    .btn-primary:hover:not(:disabled)[b-s47kdkqcjf] {
        background: var(--lb-accent-primary-light);
    }

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

.btn-secondary[b-s47kdkqcjf] {
    background: var(--lb-bg-elevated-3);
    color: var(--lb-text-primary);
    border: 1px solid var(--lb-border-default);
}

    .btn-secondary:hover[b-s47kdkqcjf] {
        background: var(--lb-bg-hover);
    }

.btn-danger-outline[b-s47kdkqcjf] {
    background: transparent;
    color: var(--lb-error);
    border: 1px solid var(--lb-error);
}

    .btn-danger-outline:hover[b-s47kdkqcjf] {
        background: rgba(244, 67, 54, 0.1);
    }

/* Responsive */
@media (max-width: 500px) {
    .stat-grid[b-s47kdkqcjf] {
        grid-template-columns: repeat(2, 1fr);
    }

    .stat-actions[b-s47kdkqcjf] {
        flex-wrap: wrap;
    }
}
/* /Components/Social/UserCard.razor.rz.scp.css */
.user-card[b-ps6j2q88as] {
    display: inline-block;
}

.user-card-link[b-ps6j2q88as] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
    color: var(--text-primary, #e0e0e0);
    transition: opacity 0.2s;
}

.user-card-link:hover[b-ps6j2q88as] {
    opacity: 0.8;
}

.user-avatar[b-ps6j2q88as],
.user-avatar-placeholder[b-ps6j2q88as] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    flex-shrink: 0;
}

.user-avatar[b-ps6j2q88as] {
    object-fit: cover;
    border: 2px solid var(--accent-primary, #d4af37);
}

.user-avatar-placeholder[b-ps6j2q88as] {
    background: linear-gradient(135deg, var(--accent-primary, #d4af37), var(--accent-secondary, #b8960f));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: bold;
    color: var(--bg-primary, #0a0a0a);
    border: 2px solid var(--accent-primary, #d4af37);
}

.user-info[b-ps6j2q88as] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.user-name[b-ps6j2q88as] {
    font-weight: 600;
    color: var(--accent-primary, #d4af37);
    font-size: 1rem;
}

.user-stats[b-ps6j2q88as] {
    display: flex;
    gap: 0.75rem;
    font-size: 0.8rem;
    color: var(--text-secondary, #888);
}

/* Small Size Variant */
.user-card-small .user-avatar[b-ps6j2q88as],
.user-card-small .user-avatar-placeholder[b-ps6j2q88as] {
    width: 28px;
    height: 28px;
    font-size: 0.75rem;
}

.user-name-small[b-ps6j2q88as] {
    font-size: 0.9rem;
    color: var(--accent-primary, #d4af37);
    font-weight: 500;
}

/* Dark Theme Support */
@media (prefers-color-scheme: dark) {
    .user-card[b-ps6j2q88as] {
        --bg-primary: #0a0a0a;
        --text-primary: #e0e0e0;
        --text-secondary: #888;
        --accent-primary: #d4af37;
        --accent-secondary: #b8960f;
    }
}
/* /Components/Social/UserProfile.razor.rz.scp.css */
.profile-page[b-f17r98hrtk] {
    width: 100%;
    padding: 0;
}

/* HEADER ------------------------------------------------------ */

.profile-header-card[b-f17r98hrtk] {
    background: var(--lb-bg-elevated);
    padding: 2rem;
    border-radius: var(--lb-radius-lg);
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 2rem;
    margin-bottom: 2rem;
    box-shadow: var(--lb-shadow-lg);
    border: 1px solid var(--lb-border-subtle);
}

.avatar-box img[b-f17r98hrtk],
.avatar-placeholder[b-f17r98hrtk] {
    width: 120px;
    height: 120px;
    border-radius: var(--lb-radius-full);
    border: 4px solid var(--lb-accent-primary);
    object-fit: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.3rem;
    font-weight: var(--lb-font-weight-bold);
    color: var(--lb-text-primary);
    background: var(--lb-bg-elevated-3);
}

.header-info h1[b-f17r98hrtk] {
    margin: 0;
    color: var(--lb-text-primary);
    font-size: var(--lb-font-size-3xl);
}

.header-top-row[b-f17r98hrtk] {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.follow-stats[b-f17r98hrtk] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.5rem;
    font-size: 0.95rem;
    color: var(--lb-text-secondary);
}

.follow-stat strong[b-f17r98hrtk] {
    color: var(--lb-text-primary);
}

.follow-divider[b-f17r98hrtk] {
    color: var(--lb-text-muted);
}

.joined[b-f17r98hrtk] {
    margin-top: .25rem;
    color: var(--lb-text-muted);
    font-size: var(--lb-font-size-sm);
}

.joined-info[b-f17r98hrtk] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.5rem;
    font-size: var(--lb-font-size-sm);
    color: var(--lb-text-muted);
}

.user-number[b-f17r98hrtk] {
    background: linear-gradient(135deg, var(--lb-accent-primary), var(--lb-accent-secondary, #9333ea));
    color: #000;
    padding: 0.2rem 0.6rem;
    border-radius: var(--lb-radius-full);
    font-weight: var(--lb-font-weight-bold);
    font-size: 0.8rem;
    letter-spacing: 0.5px;
}

.joined-date[b-f17r98hrtk] {
    color: var(--lb-text-muted);
}

.bio[b-f17r98hrtk] {
    margin-top: 1rem;
    line-height: var(--lb-line-height-relaxed);
    color: var(--lb-text-secondary);
}

/* STATS GRID ------------------------------------------------ */

.stats-grid[b-f17r98hrtk] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .75rem;
}

.stat-card[b-f17r98hrtk] {
    background: var(--lb-bg-elevated-2);
    border-radius: var(--lb-radius-md);
    padding: .75rem;
    text-align: center;
    border: 1px solid var(--lb-border-subtle);
}

.stat-card.clickable[b-f17r98hrtk] {
    cursor: pointer;
    transition: transform var(--lb-transition-base), border-color var(--lb-transition-base);
}

.stat-card.clickable:hover[b-f17r98hrtk] {
    transform: translateY(-2px);
    border-color: var(--lb-accent-primary);
}

    .stat-card .v[b-f17r98hrtk] {
        font-size: 1.8rem;
        color: var(--lb-accent-primary);
        font-weight: var(--lb-font-weight-semibold);
    }

    .stat-card .l[b-f17r98hrtk] {
        font-size: var(--lb-font-size-xs);
        color: var(--lb-text-muted);
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

/* EDIT BUTTON ------------------------------------------------ */

.edit-btn-bar[b-f17r98hrtk] {
    text-align: center;
    margin-bottom: 2rem;
}

.edit-btn[b-f17r98hrtk] {
    padding: .8rem 2rem;
    border-radius: var(--lb-radius-md);
    background: var(--lb-accent-primary);
    color: var(--lb-text-inverse);
    text-decoration: none;
    font-weight: var(--lb-font-weight-medium);
    transition: background var(--lb-transition-base);
    display: inline-block;
}

    .edit-btn:hover[b-f17r98hrtk] {
        background: var(--lb-accent-primary-light);
    }

/* TABS -------------------------------------------------------- */

.tabs[b-f17r98hrtk] {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
    border-bottom: 2px solid var(--lb-border-default);
}

.tab[b-f17r98hrtk] {
    padding: .75rem 1.5rem;
    cursor: pointer;
    border: none;
    background: none;
    color: var(--lb-text-muted);
    font-size: var(--lb-font-size-base);
    font-weight: var(--lb-font-weight-medium);
    transition: color var(--lb-transition-base);
    position: relative;
}

    .tab:hover[b-f17r98hrtk] {
        color: var(--lb-text-secondary);
    }

    .tab.active[b-f17r98hrtk] {
        color: var(--lb-accent-primary);
    }

        .tab.active[b-f17r98hrtk]::after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            right: 0;
            height: 3px;
            background: var(--lb-accent-primary);
        }

/* GENERAL CARD ------------------------------------------------ */

.card[b-f17r98hrtk] {
    background: var(--lb-bg-elevated);
    padding: 1.25rem 1.5rem;
    border-radius: var(--lb-radius-lg);
    margin-bottom: 1rem;
    box-shadow: var(--lb-shadow-md);
    border: 1px solid var(--lb-border-subtle);
}

/* ACTIVITY --------------------------------------------------- */

.item-card[b-f17r98hrtk] {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.icon[b-f17r98hrtk] {
    font-size: 1.7rem;
    flex-shrink: 0;
}

.content[b-f17r98hrtk] {
    flex: 1;
}

.line[b-f17r98hrtk] {
    color: var(--lb-text-primary);
    margin-bottom: 0.25rem;
}

.time[b-f17r98hrtk] {
    font-size: var(--lb-font-size-sm);
    color: var(--lb-text-muted);
}

/* CONTENT GRID (for entities, universes) --------------------- */

.content-grid[b-f17r98hrtk] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
}

.grid-card[b-f17r98hrtk] {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    transition: transform var(--lb-transition-base), box-shadow var(--lb-transition-base);
    overflow: hidden;
    padding: 0;
    margin-bottom: 0;
}

    .grid-card:hover[b-f17r98hrtk] {
        transform: translateY(-4px);
        box-shadow: var(--lb-shadow-lg);
    }

.card-image[b-f17r98hrtk] {
    width: 100%;
    aspect-ratio: 1;
    overflow: hidden;
    background: var(--lb-bg-elevated-2);
}

    .card-image img[b-f17r98hrtk] {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.image-placeholder[b-f17r98hrtk] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    color: var(--lb-text-muted);
    background: var(--lb-bg-elevated-2);
}

.card-body[b-f17r98hrtk] {
    padding: 1rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.card-type[b-f17r98hrtk] {
    font-size: var(--lb-font-size-xs);
    color: var(--lb-text-muted);
    text-transform: uppercase;
    margin-bottom: 0.25rem;
    font-weight: var(--lb-font-weight-semibold);
    letter-spacing: 0.5px;
}

.card-title[b-f17r98hrtk] {
    font-size: var(--lb-font-size-base);
    font-weight: var(--lb-font-weight-semibold);
    color: var(--lb-text-primary);
    margin-bottom: 0.5rem;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.card-stats[b-f17r98hrtk] {
    margin-top: auto;
    display: flex;
    gap: 0.75rem;
    color: var(--lb-text-muted);
    font-size: var(--lb-font-size-sm);
}

/* ACTIVITY GRID --------------------------------------------- */

.activity-grid[b-f17r98hrtk] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 1rem;
}

    .activity-grid .card[b-f17r98hrtk] {
        margin-bottom: 0;
    }

/* COMMENTS GRID --------------------------------------------- */

.comments-grid[b-f17r98hrtk] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
    gap: 1rem;
}

    .comments-grid .card[b-f17r98hrtk] {
        margin-bottom: 0;
    }

/* COMMENTS ---------------------------------------------------- */

.comment-card .text[b-f17r98hrtk] {
    color: var(--lb-text-primary);
    margin-bottom: .75rem;
    line-height: var(--lb-line-height-normal);
}

.comment-card .meta[b-f17r98hrtk] {
    display: flex;
    gap: .75rem;
    flex-wrap: wrap;
    font-size: var(--lb-font-size-sm);
    color: var(--lb-text-muted);
    align-items: center;
}

.entity-link[b-f17r98hrtk] {
    color: var(--lb-accent-primary);
    text-decoration: none;
    transition: color var(--lb-transition-base);
}

    .entity-link:hover[b-f17r98hrtk] {
        color: var(--lb-accent-primary-light);
    }

/* FOLLOWERS --------------------------------------------------- */

.follower-list[b-f17r98hrtk] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
}

.follower-card[b-f17r98hrtk] {
    display: block;
    text-decoration: none;
    transition: transform var(--lb-transition-base), box-shadow var(--lb-transition-base);
}

    .follower-card:hover[b-f17r98hrtk] {
        transform: translateY(-2px);
        box-shadow: var(--lb-shadow-lg);
    }

.follower-name[b-f17r98hrtk] {
    font-weight: var(--lb-font-weight-semibold);
    color: var(--lb-text-primary);
    margin-bottom: 0.25rem;
}

.follower-time[b-f17r98hrtk] {
    font-size: var(--lb-font-size-sm);
    color: var(--lb-text-muted);
}

/* BADGES ------------------------------------------------------ */

.badge-grid[b-f17r98hrtk] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1rem;
}

.badge-card[b-f17r98hrtk] {
    text-align: center;
}

    .badge-card .badge-icon[b-f17r98hrtk] {
        margin-bottom: .75rem;
        font-size: 3rem;
    }

    .badge-card img[b-f17r98hrtk] {
        max-width: 64px;
        height: 64px;
        object-fit: contain;
    }

    .badge-card .placeholder[b-f17r98hrtk],
    .badge-card .emoji-icon[b-f17r98hrtk] {
        font-size: 3rem;
        color: var(--lb-accent-primary);
    }

    .badge-card .title[b-f17r98hrtk] {
        font-weight: var(--lb-font-weight-semibold);
        color: var(--lb-text-primary);
        margin-bottom: 0.25rem;
    }

    .badge-card .desc[b-f17r98hrtk] {
        font-size: var(--lb-font-size-sm);
        color: var(--lb-text-secondary);
        margin-bottom: 0.5rem;
    }

/* TIERED BADGES ----------------------------------------------- */

.badge-card.tiered[b-f17r98hrtk] {
    position: relative;
    cursor: pointer;
}

.badge-card[b-f17r98hrtk] {
    cursor: pointer;
    transition: transform var(--lb-transition-base), border-color var(--lb-transition-base);
}

.badge-card:hover[b-f17r98hrtk] {
    transform: translateY(-2px);
    border-color: var(--lb-accent-primary);
}

.tier-indicator[b-f17r98hrtk] {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    background: var(--lb-accent-primary);
    color: var(--lb-text-inverse);
    font-size: var(--lb-font-size-xs);
    font-weight: var(--lb-font-weight-bold);
    padding: 0.2rem 0.5rem;
    border-radius: var(--lb-radius-full);
}

/* Badge Modal */
.badge-modal-overlay[b-f17r98hrtk] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
    backdrop-filter: blur(4px);
}

.badge-modal[b-f17r98hrtk] {
    background: var(--lb-bg-elevated);
    border: 1px solid var(--lb-border-default);
    border-radius: var(--lb-radius-xl);
    max-width: 480px;
    width: 100%;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: var(--lb-shadow-xl);
    position: relative;
}

.badge-modal-close[b-f17r98hrtk] {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: none;
    border: none;
    color: var(--lb-text-muted);
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    line-height: 1;
    transition: color var(--lb-transition-base);
}

.badge-modal-close:hover[b-f17r98hrtk] {
    color: var(--lb-text-primary);
}

.badge-modal-header[b-f17r98hrtk] {
    text-align: center;
    padding: 2rem 2rem 1.5rem;
    border-bottom: 1px solid var(--lb-border-subtle);
}

.badge-modal-icon[b-f17r98hrtk] {
    font-size: 3rem;
    display: block;
    margin-bottom: 0.75rem;
}

.badge-modal-header h3[b-f17r98hrtk] {
    margin: 0 0 0.5rem 0;
    color: var(--lb-text-primary);
    font-size: var(--lb-font-size-xl);
}

.badge-modal-progress[b-f17r98hrtk] {
    color: var(--lb-accent-primary);
    font-weight: var(--lb-font-weight-bold);
    font-size: var(--lb-font-size-lg);
}

.badge-modal-tiers[b-f17r98hrtk] {
    padding: 1rem;
}

.tier-row[b-f17r98hrtk] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    border-radius: var(--lb-radius-md);
    margin-bottom: 0.5rem;
    transition: background var(--lb-transition-base);
}

.tier-row.earned[b-f17r98hrtk] {
    background: rgba(var(--lb-accent-primary-rgb, 212, 175, 55), 0.1);
}

.tier-row.locked[b-f17r98hrtk] {
    opacity: 0.5;
}

.tier-row-icon[b-f17r98hrtk] {
    font-size: 1.5rem;
    flex-shrink: 0;
}

.tier-row-info[b-f17r98hrtk] {
    flex: 1;
    min-width: 0;
}

.tier-row-title[b-f17r98hrtk] {
    display: block;
    font-weight: var(--lb-font-weight-semibold);
    color: var(--lb-text-primary);
    margin-bottom: 0.25rem;
}

.tier-row-desc[b-f17r98hrtk] {
    display: block;
    font-size: var(--lb-font-size-sm);
    color: var(--lb-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tier-row-status[b-f17r98hrtk] {
    flex-shrink: 0;
    text-align: right;
}

.tier-earned-check[b-f17r98hrtk] {
    color: var(--lb-success, #22c55e);
    font-weight: var(--lb-font-weight-bold);
    font-size: 1.25rem;
    display: block;
}

.tier-earned-date[b-f17r98hrtk] {
    font-size: var(--lb-font-size-xs);
    color: var(--lb-text-muted);
}

.tier-threshold-label[b-f17r98hrtk] {
    background: var(--lb-bg-elevated-2);
    padding: 0.25rem 0.5rem;
    border-radius: var(--lb-radius-sm);
    font-size: var(--lb-font-size-sm);
    color: var(--lb-text-muted);
}

/* MEDIA CARDS ------------------------------------------------- */

.media-card[b-f17r98hrtk] {
    transition: transform var(--lb-transition-base), box-shadow var(--lb-transition-base), border-color var(--lb-transition-base);
}

.media-card:hover[b-f17r98hrtk] {
    border-color: #00cec9;
}

.unassigned-badge[b-f17r98hrtk] {
    background: rgba(0, 206, 201, 0.15);
    color: #00cec9;
    padding: 0.15rem 0.5rem;
    border-radius: var(--lb-radius-sm);
    font-size: var(--lb-font-size-xs);
    font-weight: var(--lb-font-weight-medium);
}

/* EMPTY STATES ------------------------------------------------ */

.empty[b-f17r98hrtk] {
    text-align: center;
    padding: 3rem 2rem;
    color: var(--lb-text-muted);
    font-size: var(--lb-font-size-lg);
}

/* LOADING ----------------------------------------------------- */

.loading[b-f17r98hrtk] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    gap: 1rem;
}

    .loading p[b-f17r98hrtk] {
        color: var(--lb-text-secondary);
    }

.spinner[b-f17r98hrtk] {
    width: 40px;
    height: 40px;
    border: 4px solid var(--lb-border-default);
    border-top-color: var(--lb-accent-primary);
    border-radius: 50%;
    animation: spin-b-f17r98hrtk 1s linear infinite;
}

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

/* ALERTS ------------------------------------------------------ */

.alert-error[b-f17r98hrtk] {
    padding: 1rem;
    background: var(--lb-error-bg);
    color: var(--lb-error);
    border-radius: var(--lb-radius-md);
    border: 1px solid var(--lb-error-border);
}

.alert-warning[b-f17r98hrtk] {
    padding: 1rem;
    background: var(--lb-bg-elevated-2);
    color: var(--lb-warning);
    border-radius: var(--lb-radius-md);
    border: 1px solid var(--lb-border-default);
}

/* ============================================
   TABLET BREAKPOINT (1024px)
   ============================================ */
@media (max-width: 1024px) {
    .profile-header-card[b-f17r98hrtk] {
        gap: 1.5rem;
    }

    .content-grid[b-f17r98hrtk] {
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    }
}

/* ============================================
   MOBILE BREAKPOINT (768px)
   ============================================ */
@media (max-width: 768px) {
    /* Profile Header - Stack vertically */
    .profile-header-card[b-f17r98hrtk] {
        grid-template-columns: 1fr;
        text-align: center;
        padding: 1.5rem;
        gap: 1.25rem;
    }

    .avatar-box[b-f17r98hrtk] {
        justify-self: center;
    }

    .avatar-box img[b-f17r98hrtk],
    .avatar-placeholder[b-f17r98hrtk] {
        width: 90px;
        height: 90px;
        font-size: 1.75rem;
    }

    .header-info h1[b-f17r98hrtk] {
        font-size: 1.5rem;
    }

    .header-top-row[b-f17r98hrtk] {
        justify-content: center;
    }

    .follow-stats[b-f17r98hrtk] {
        justify-content: center;
        flex-wrap: wrap;
    }

    .joined-info[b-f17r98hrtk] {
        justify-content: center;
    }

    .bio[b-f17r98hrtk] {
        margin-top: 0.75rem;
        font-size: 0.95rem;
    }

    /* Stats Grid - 2 columns on mobile */
    .stats-grid[b-f17r98hrtk] {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
    }

    .stat-card[b-f17r98hrtk] {
        padding: 0.625rem;
    }

    .stat-card .v[b-f17r98hrtk] {
        font-size: 1.5rem;
    }

    .stat-card .l[b-f17r98hrtk] {
        font-size: 0.65rem;
    }

    /* Edit Button */
    .edit-btn-bar[b-f17r98hrtk] {
        margin-bottom: 1.5rem;
    }

    .edit-btn[b-f17r98hrtk] {
        min-height: 44px;
        padding: 0.75rem 1.5rem;
    }

    /* Tabs - Horizontal scroll */
    .tabs[b-f17r98hrtk] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        gap: 0;
    }

    .tabs[b-f17r98hrtk]::-webkit-scrollbar {
        display: none;
    }

    .tab[b-f17r98hrtk] {
        flex-shrink: 0;
        min-height: 48px;
        padding: 0.75rem 1rem;
    }

    /* Cards */
    .card[b-f17r98hrtk] {
        padding: 1rem;
        margin-bottom: 0.75rem;
    }

    /* Content Grid - 2 columns */
    .content-grid[b-f17r98hrtk] {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }

    .card-image[b-f17r98hrtk] {
        aspect-ratio: 1;
    }

    .image-placeholder[b-f17r98hrtk] {
        font-size: 2.25rem;
    }

    .card-body[b-f17r98hrtk] {
        padding: 0.75rem;
    }

    .card-type[b-f17r98hrtk] {
        font-size: 0.6rem;
    }

    .card-title[b-f17r98hrtk] {
        font-size: 0.9rem;
        -webkit-line-clamp: 2;
    }

    .card-stats[b-f17r98hrtk] {
        font-size: 0.75rem;
        gap: 0.5rem;
    }

    /* Activity Grid */
    .activity-grid[b-f17r98hrtk] {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .item-card[b-f17r98hrtk] {
        gap: 0.75rem;
    }

    .icon[b-f17r98hrtk] {
        font-size: 1.5rem;
    }

    /* Comments Grid */
    .comments-grid[b-f17r98hrtk] {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    /* Followers */
    .follower-list[b-f17r98hrtk] {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .follower-card[b-f17r98hrtk] {
        min-height: 48px;
    }

    /* Badges - 3 columns on mobile */
    .badge-grid[b-f17r98hrtk] {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.75rem;
    }

    .badge-card .badge-icon[b-f17r98hrtk] {
        font-size: 2.25rem;
        margin-bottom: 0.5rem;
    }

    .badge-card img[b-f17r98hrtk] {
        max-width: 48px;
        height: 48px;
    }

    .badge-card .placeholder[b-f17r98hrtk],
    .badge-card .emoji-icon[b-f17r98hrtk] {
        font-size: 2.25rem;
    }

    .badge-card .title[b-f17r98hrtk] {
        font-size: 0.85rem;
    }

    .badge-card .desc[b-f17r98hrtk] {
        font-size: 0.75rem;
    }

    /* Empty states */
    .empty[b-f17r98hrtk] {
        padding: 2rem 1rem;
        font-size: 1rem;
    }
}

/* ============================================
   SMALL MOBILE BREAKPOINT (480px)
   ============================================ */
@media (max-width: 480px) {
    .profile-header-card[b-f17r98hrtk] {
        padding: 1.25rem;
    }

    .avatar-box img[b-f17r98hrtk],
    .avatar-placeholder[b-f17r98hrtk] {
        width: 80px;
        height: 80px;
        font-size: 1.5rem;
    }

    .header-info h1[b-f17r98hrtk] {
        font-size: 1.35rem;
    }

    .follow-stats[b-f17r98hrtk] {
        font-size: 0.85rem;
    }

    /* Stats Grid - Still 2 columns but smaller */
    .stat-card .v[b-f17r98hrtk] {
        font-size: 1.35rem;
    }

    /* Tabs - Even more compact */
    .tab[b-f17r98hrtk] {
        padding: 0.625rem 0.75rem;
        font-size: 0.9rem;
    }

    /* Content Grid - Still 2 columns */
    .content-grid[b-f17r98hrtk] {
        gap: 0.5rem;
    }

    .card-body[b-f17r98hrtk] {
        padding: 0.625rem;
    }

    .card-title[b-f17r98hrtk] {
        font-size: 0.85rem;
    }

    /* Badges - 2 columns on very small */
    .badge-grid[b-f17r98hrtk] {
        grid-template-columns: repeat(2, 1fr);
    }
}
/* /Components/Ux/UxButton.razor.rz.scp.css */
/* UxButton Component Styles */

.ux-btn[b-ruicbez1xw] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0.625rem 1.125rem;
    border: none;
    border-radius: var(--lb-radius-md);
    font-size: var(--lb-font-size-sm);
    font-weight: var(--lb-font-weight-medium);
    font-family: var(--lb-font-family);
    cursor: pointer;
    transition: all var(--lb-transition-base);
    white-space: nowrap;
    text-decoration: none;
}

.ux-btn:disabled[b-ruicbez1xw] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Variants */
.ux-btn--primary[b-ruicbez1xw] {
    background: var(--lb-button-primary-bg);
    color: var(--lb-button-primary-text);
    border: 1px solid transparent;
}

.ux-btn--primary:hover:not(:disabled)[b-ruicbez1xw] {
    background: var(--lb-button-primary-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(212, 175, 55, 0.3);
}

.ux-btn--secondary[b-ruicbez1xw] {
    background: var(--lb-button-secondary-bg);
    color: var(--lb-button-secondary-text);
    border: 1px solid var(--lb-border-default);
}

.ux-btn--secondary:hover:not(:disabled)[b-ruicbez1xw] {
    background: var(--lb-button-secondary-hover);
    border-color: var(--lb-accent-primary);
}

.ux-btn--ghost[b-ruicbez1xw] {
    background: transparent;
    color: var(--lb-text-secondary);
    border: 1px solid transparent;
}

.ux-btn--ghost:hover:not(:disabled)[b-ruicbez1xw] {
    background: var(--lb-bg-hover);
    color: var(--lb-text-primary);
}

.ux-btn--danger[b-ruicbez1xw] {
    background: var(--lb-error);
    color: white;
    border: 1px solid transparent;
}

.ux-btn--danger:hover:not(:disabled)[b-ruicbez1xw] {
    background: #cc5555;
    transform: translateY(-1px);
}

.ux-btn--success[b-ruicbez1xw] {
    background: var(--lb-success);
    color: white;
    border: 1px solid transparent;
}

.ux-btn--success:hover:not(:disabled)[b-ruicbez1xw] {
    background: #3d8b40;
    transform: translateY(-1px);
}

/* Sizes */
.ux-btn[data-size="sm"][b-ruicbez1xw],
.ux-btn.ux-btn--sm[b-ruicbez1xw] {
    padding: 0.375rem 0.75rem;
    font-size: var(--lb-font-size-xs);
}

.ux-btn[data-size="md"][b-ruicbez1xw],
.ux-btn.ux-btn--md[b-ruicbez1xw] {
    padding: 0.625rem 1.125rem;
    font-size: var(--lb-font-size-sm);
}

.ux-btn[data-size="lg"][b-ruicbez1xw],
.ux-btn.ux-btn--lg[b-ruicbez1xw] {
    padding: 0.75rem 1.5rem;
    font-size: var(--lb-font-size-base);
}
/* /Components/Ux/UxCard.razor.rz.scp.css */
/* UxCard Component Styles */

.ux-card[b-ax8jg8bitw] {
    background: var(--lb-card-bg);
    border: 1px solid var(--lb-card-border);
    border-radius: var(--lb-radius-lg);
    overflow: hidden;
    transition: all var(--lb-transition-base);
    display: flex;
    flex-direction: column;
}

.ux-card:hover[b-ax8jg8bitw] {
    border-color: var(--lb-accent-primary);
    transform: translateY(-2px);
    box-shadow: var(--lb-shadow-lg);
}

.ux-card-header[b-ax8jg8bitw] {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--lb-border-default);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--lb-spacing-md);
}

.ux-card-title[b-ax8jg8bitw] {
    font-size: var(--lb-font-size-base);
    font-weight: var(--lb-font-weight-semibold);
    color: var(--lb-text-primary);
    margin: 0;
    line-height: var(--lb-line-height-tight);
}

.ux-card-subtitle[b-ax8jg8bitw] {
    font-size: var(--lb-font-size-xs);
    color: var(--lb-text-muted);
    margin-top: 4px;
    line-height: var(--lb-line-height-tight);
}

.ux-card-body[b-ax8jg8bitw] {
    padding: 1.25rem 1.5rem;
    flex: 1;
    color: var(--lb-text-secondary);
    font-size: var(--lb-font-size-sm);
    line-height: var(--lb-line-height-relaxed);
}

.ux-card-footer[b-ax8jg8bitw] {
    padding: var(--lb-spacing-md) 1.5rem;
    border-top: 1px solid var(--lb-border-default);
}

.ux-card-actions[b-ax8jg8bitw] {
    display: flex;
    gap: var(--lb-spacing-sm);
    align-items: center;
}

/* Sizing Modes */
.ux-card--fixed[b-ax8jg8bitw] {
    width: var(--card-w, 360px);
    height: var(--card-h, 220px);
}

.ux-card--grow[b-ax8jg8bitw] {
    width: 100%;
    height: auto;
}

.ux-card--maxh-scroll[b-ax8jg8bitw] {
    width: 100%;
    max-height: var(--card-max-h, 70vh);
    overflow-y: auto;
}

.ux-card--fitw[b-ax8jg8bitw] {
    height: auto;
}

.ux-card--fitc[b-ax8jg8bitw] {
    width: 100%;
    height: 100%; /* Stretch to fill grid cell */
}

.ux-card--aspect[b-ax8jg8bitw] {
    aspect-ratio: var(--ar, 16/9);
    height: auto;
}

.ux-card--auto[b-ax8jg8bitw] {
    width: auto;
    max-width: 100%;
    height: 100%; /* Changed from 'auto' to stretch in grid/flex containers */
    flex: 1 1 auto;
}

/* Placeholder styles */
.placeholder[b-ax8jg8bitw] {
    color: var(--lb-text-muted);
    font-style: italic;
    font-size: var(--lb-font-size-sm);
}
/* /Components/Ux/UxGrid.razor.rz.scp.css */
/* UxGrid Component Styles */

.ux-grid[b-3ozwr6gurk] {
    display: grid;
    gap: 28px 32px;
    align-items: stretch; /* Changed from 'start' to make items same height */
}

.ux-grid--no-grid[b-3ozwr6gurk] {
    display: contents;
}

/* ============================================
   TABLET BREAKPOINT (1024px)
   ============================================ */
@media (max-width: 1024px) {
    .ux-grid[b-3ozwr6gurk] {
        gap: 20px 24px;
    }
}

/* ============================================
   MOBILE BREAKPOINT (768px)
   ============================================ */
@media (max-width: 768px) {
    .ux-grid[b-3ozwr6gurk] {
        gap: 16px 16px;
    }
}

/* ============================================
   SMALL MOBILE BREAKPOINT (480px)
   ============================================ */
@media (max-width: 480px) {
    .ux-grid[b-3ozwr6gurk] {
        gap: 12px 12px;
    }
}