/* /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/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/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-content[b-lwpc9ss3dp] {
        flex-wrap: wrap;
        height: auto;
        padding: 1rem 0;
    }

    .ww-logo[b-lwpc9ss3dp] {
        order: 1;
    }

    .ww-nav-actions[b-lwpc9ss3dp] {
        order: 2;
    }

    .ww-search-bar[b-lwpc9ss3dp] {
        order: 3;
        max-width: 100%;
        flex-basis: 100%;
        margin-top: 0.75rem;
    }
}

/* 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: 600px) {
    .ww-footer-content[b-lwpc9ss3dp] {
        flex-direction: column;
        text-align: center;
    }
}
/* /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: #141414;
    border: 1px solid #333;
    border-radius: 8px;
    color: #e8e8e8;
    font-size: 0.875rem;
    font-family: inherit;
    transition: all 0.2s ease;
}

.ww-search-input:focus[b-zynzase7ls] {
    outline: none;
    border-color: #d4af37;
    background: #1a1a1a;
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.1);
}

.ww-search-input[b-zynzase7ls]::placeholder {
    color: #666;
}

.ww-search-icon[b-zynzase7ls] {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: #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: #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: #e8e8e8;
    background: #333;
}

/* Dropdown */
.ww-search-dropdown[b-zynzase7ls] {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: #1a1a1a;
    border: 1px solid #333;
    border-radius: 8px;
    box-shadow: 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: #888;
}

.ww-search-spinner[b-zynzase7ls] {
    width: 16px;
    height: 16px;
    border: 2px solid #333;
    border-top-color: #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: #888;
    font-size: 0.875rem;
}

/* Category */
.ww-search-category[b-zynzase7ls] {
    border-bottom: 1px solid #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: #141414;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #888;
}

.ww-search-count[b-zynzase7ls] {
    background: #333;
    color: #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: #252525;
}

.ww-search-result-img[b-zynzase7ls] {
    width: 40px;
    height: 40px;
    border-radius: 6px;
    object-fit: cover;
    flex-shrink: 0;
    background: #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: #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: #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: #d4af37;
    color: #000;
    border-radius: 3px;
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
}

.ww-search-result-desc[b-zynzase7ls] {
    color: #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: #141414;
    color: #d4af37;
    text-decoration: none;
    font-size: 0.8rem;
    font-weight: 500;
    border-top: 1px solid #2a2a2a;
    transition: background 0.15s ease;
}

.ww-search-view-all:hover[b-zynzase7ls] {
    background: #1f1f1f;
}
/* /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-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/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);
    }

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

    .pillar-grid[b-hbxhhfcrt3] {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 1rem;
    }

    .creation-form[b-hbxhhfcrt3] {
        padding: 1.5rem;
    }

    .form-actions[b-hbxhhfcrt3] {
        flex-direction: column;
    }

    .create-header h1[b-hbxhhfcrt3] {
        font-size: 2rem;
    }
}

/* 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;
}
/* /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.75rem;
    text-align: center;
}

.quick-stat[b-k3hl80x77e] {
    padding: 0.75rem;
    background: var(--lb-bg-elevated-2, #1a1a1a);
    border-radius: 8px;
}

.stat-value[b-k3hl80x77e] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--lb-accent-primary, #d4af37);
}

.stat-label[b-k3hl80x77e] {
    font-size: 0.75rem;
    color: var(--lb-text-muted, #666);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* 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;
    }

.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);
    }
}
/* /Components/Pages/Pillars/Apparel.razor.rz.scp.css */
/* /Components/Pages/Pillars/AttributePickerModal.razor.rz.scp.css */
/* Attribute Picker Modal - Option 3 Design (Collapsible Sections) */

/* Overlay */
.attribute-picker-overlay[b-kjfqo4b9hs] {
    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-kjfqo4b9hs 0.2s ease-in-out;
}

    .attribute-picker-overlay.show[b-kjfqo4b9hs] {
        display: flex;
    }

@keyframes fadeIn-b-kjfqo4b9hs {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Modal Container */
.attribute-picker-modal[b-kjfqo4b9hs] {
    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-kjfqo4b9hs 0.3s ease-out;
}

@keyframes slideUp-b-kjfqo4b9hs {
    from {
        transform: translateY(30px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Header */
.attribute-picker-header[b-kjfqo4b9hs] {
    padding: 1.5rem;
    border-bottom: 1px solid var(--lb-border-default);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.attribute-picker-title[b-kjfqo4b9hs] {
    margin: 0;
    font-size: 1.5rem;
    color: var(--lb-text-primary);
    font-weight: 600;
}

.attribute-picker-close[b-kjfqo4b9hs] {
    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-kjfqo4b9hs] {
        background: var(--lb-bg-hover);
        color: var(--lb-text-primary);
    }

/* Body */
.attribute-picker-body[b-kjfqo4b9hs] {
    padding: 1.5rem;
    overflow-y: auto;
    flex: 1;
    min-height: 400px;
}

/* Loading State */
.attribute-picker-loading[b-kjfqo4b9hs] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    color: var(--lb-text-muted);
}

    .attribute-picker-loading .spinner[b-kjfqo4b9hs] {
        width: 40px;
        height: 40px;
        border: 3px solid var(--lb-border-default);
        border-top-color: var(--lb-accent-primary);
        border-radius: 50%;
        animation: spin-b-kjfqo4b9hs 0.8s linear infinite;
        margin-bottom: 1rem;
    }

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

/* Search Bar */
.attribute-search-bar[b-kjfqo4b9hs] {
    position: relative;
    margin-bottom: 1.5rem;
}

.attribute-search-icon[b-kjfqo4b9hs] {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--lb-text-muted);
    pointer-events: none;
}

.attribute-search-input[b-kjfqo4b9hs] {
    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-kjfqo4b9hs] {
        outline: none;
        border-color: var(--lb-accent-primary);
        box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.1);
    }

.attribute-search-clear[b-kjfqo4b9hs] {
    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-kjfqo4b9hs] {
        background: var(--lb-bg-hover);
        color: var(--lb-text-primary);
    }

/* Section (Collapsible) */
.attribute-section[b-kjfqo4b9hs] {
    margin-bottom: 0.75rem;
}

.attribute-section-header[b-kjfqo4b9hs] {
    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-kjfqo4b9hs] {
        background: var(--lb-bg-elevated-3);
        border-color: var(--lb-border-default);
    }

    .attribute-section-header.recommended[b-kjfqo4b9hs] {
        border-left: 4px solid var(--lb-success);
    }

.attribute-section-icon[b-kjfqo4b9hs] {
    font-size: 1.125rem;
    flex-shrink: 0;
}

.attribute-section-title[b-kjfqo4b9hs] {
    flex: 1;
    font-weight: 600;
    color: var(--lb-text-primary);
}

.attribute-section-count[b-kjfqo4b9hs] {
    color: var(--lb-text-muted);
    font-size: 0.875rem;
}

.attribute-section-chevron[b-kjfqo4b9hs] {
    color: var(--lb-text-muted);
    transition: transform 0.2s;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.attribute-section-header.expanded .attribute-section-chevron[b-kjfqo4b9hs] {
    transform: rotate(90deg);
}

.attribute-section-content[b-kjfqo4b9hs] {
    padding: 0.5rem 0 0 0;
}

/* Attribute Item */
.attribute-item[b-kjfqo4b9hs] {
    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-kjfqo4b9hs] {
        background: var(--lb-bg-elevated-3);
        border-color: var(--lb-border-default);
    }

    .attribute-item.selected[b-kjfqo4b9hs] {
        border-color: var(--lb-accent-primary);
        background: rgba(212, 175, 55, 0.08);
    }

.attribute-item-content[b-kjfqo4b9hs] {
    flex: 1;
}

.attribute-item-name[b-kjfqo4b9hs] {
    font-weight: 600;
    color: var(--lb-text-primary);
    margin-bottom: 0.25rem;
}

.attribute-item-description[b-kjfqo4b9hs] {
    font-size: 0.875rem;
    color: var(--lb-text-muted);
    line-height: 1.4;
}

.attribute-item-category[b-kjfqo4b9hs] {
    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-kjfqo4b9hs] {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--lb-text-muted);
}

.attribute-empty-icon[b-kjfqo4b9hs] {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}

.attribute-empty-state p[b-kjfqo4b9hs] {
    margin: 0 0 0.5rem 0;
    font-size: 1rem;
}

.attribute-empty-state small[b-kjfqo4b9hs] {
    font-size: 0.875rem;
}

/* Configuration Panel */
.attribute-config-panel[b-kjfqo4b9hs] {
    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-kjfqo4b9hs] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    font-size: 0.95rem;
}

    .attribute-config-header span[b-kjfqo4b9hs] {
        font-weight: 500;
        color: var(--lb-accent-primary);
    }

    .attribute-config-header strong[b-kjfqo4b9hs] {
        color: var(--lb-text-primary);
    }

.attribute-recommended-badge[b-kjfqo4b9hs] {
    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-kjfqo4b9hs] {
    margin-bottom: 1rem;
}

    .attribute-config-group:last-child[b-kjfqo4b9hs] {
        margin-bottom: 0;
    }

.attribute-config-label[b-kjfqo4b9hs] {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: var(--lb-text-primary);
    font-size: 0.9rem;
}

    .attribute-config-label .required[b-kjfqo4b9hs] {
        color: var(--lb-error);
    }

.attribute-config-input[b-kjfqo4b9hs],
.attribute-config-select[b-kjfqo4b9hs] {
    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-kjfqo4b9hs],
    .attribute-config-select:focus[b-kjfqo4b9hs] {
        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-kjfqo4b9hs] {
        border-color: var(--lb-error);
    }

.attribute-config-grid[b-kjfqo4b9hs] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

/* Footer */
.attribute-picker-footer[b-kjfqo4b9hs] {
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--lb-border-default);
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
}

.btn[b-kjfqo4b9hs] {
    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-kjfqo4b9hs] {
    background: var(--lb-accent-primary);
    color: #000;
}

    .btn-primary:hover:not(:disabled)[b-kjfqo4b9hs] {
        background: var(--lb-accent-primary-light);
    }

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

.btn-secondary[b-kjfqo4b9hs] {
    background: var(--lb-bg-elevated-3);
    color: var(--lb-text-primary);
    border: 1px solid var(--lb-border-default);
}

    .btn-secondary:hover[b-kjfqo4b9hs] {
        background: var(--lb-bg-hover);
    }

/* Responsive */
@media (max-width: 768px) {
    .attribute-picker-modal[b-kjfqo4b9hs] {
        max-width: 95%;
        max-height: 90vh;
    }

    .attribute-config-grid[b-kjfqo4b9hs] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Pillars/BaseDetails.razor.rz.scp.css */
/* BaseDetails Page Styles */
.ww-details-shell[b-xv52nuslm9] {
    width: 100%;
}

.ww-main[b-xv52nuslm9] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* ═══════════════════════════════════════════════════════ */
/* WIKI-STYLE LAYOUT: Infobox on LEFT, Summary on RIGHT */
/* ═══════════════════════════════════════════════════════ */
.top-row[b-xv52nuslm9] {
    display: grid;
    grid-template-columns: clamp(240px, 25vw, 320px) 1fr;
    gap: 1.5rem;
    align-items: start;
}

/* LEFT: INFOBOX (Hero + Title + Attributes) */
.infobox[b-xv52nuslm9] {
    background: var(--lb-bg-elevated-2, #2a2a2a);
    border: 1px solid var(--lb-border-default, #3a3a3a);
    border-radius: 8px;
    overflow: hidden;
}

.infobox-hero[b-xv52nuslm9] {
    background: var(--lb-bg-elevated-1, #222);
    padding: 1rem;
    border-bottom: 1px solid var(--lb-border-default, #3a3a3a);
}

.infobox-hero.clickable[b-xv52nuslm9] {
    cursor: pointer;
    transition: all 0.2s;
}

.infobox-hero.clickable:hover[b-xv52nuslm9] {
    background: var(--lb-bg-elevated-2, #2a2a2a);
}

/* Pillar type badge */
.pillar-badge[b-xv52nuslm9] {
    display: block;
    background: var(--lb-accent-primary, #d4a84b);
    color: #1a1a1a;
    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-xv52nuslm9] {
    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-xv52nuslm9] {
    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-xv52nuslm9] {
    outline: none;
    border-color: #e5b95c;
    box-shadow: 0 0 0 2px rgba(212, 168, 75, 0.2);
}

.infobox-subtitle[b-xv52nuslm9] {
    font-size: 13px;
    font-style: italic;
    color: var(--text-muted, #888);
    text-align: center;
    padding: 0.25rem 1rem 0.75rem;
}

.infobox-attrs[b-xv52nuslm9] {
    padding: 0.75rem 1rem;
}

.infobox-empty[b-xv52nuslm9] {
    color: var(--text-muted, #888);
    font-style: italic;
    font-size: 13px;
    text-align: center;
    padding: 0.5rem 0;
}

/* RIGHT: SUMMARY CARD */
.summary-card[b-xv52nuslm9] {
    min-height: 280px;
}

/* ═══════════════════════════════════════════════════════ */
/* INFOBOX ATTRIBUTE ROWS (View Mode) */
/* ═══════════════════════════════════════════════════════ */
.infobox-row[b-xv52nuslm9] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--lb-border-subtle, rgba(255,255,255,0.08));
}

.infobox-row:last-child[b-xv52nuslm9] {
    border-bottom: none;
}

.infobox-label[b-xv52nuslm9] {
    font-size: 13px;
    color: var(--text-muted, #888);
    font-weight: 500;
}

.infobox-value[b-xv52nuslm9] {
    font-size: 13px;
    color: var(--lb-accent-primary, #d4a84b);
    font-weight: 600;
    text-align: right;
}

/* Responsive */
@media (max-width: 768px) {
    .top-row[b-xv52nuslm9] {
        grid-template-columns: 1fr;
    }
    
    .infobox[b-xv52nuslm9] {
        max-width: 360px;
        margin: 0 auto;
    }
}

.ww-hero-left[b-xv52nuslm9] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    height: 100%; /* Ensure card fills grid cell height */
}

.fill-parent[b-xv52nuslm9] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ww-attr-list[b-xv52nuslm9] {
    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-xv52nuslm9] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 1rem;
    }

    .ww-attr-list .k[b-xv52nuslm9] {
        font-size: 13px;
        color: var(--text-muted, #888);
        font-weight: 500;
    }

    .ww-attr-list .v[b-xv52nuslm9] {
        font-size: 14px;
        color: var(--lb-text-primary);
        font-weight: 600;
    }

.list[b-xv52nuslm9] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

    .list li[b-xv52nuslm9] {
        padding: 0.75rem 1rem;
        background: var(--lb-bg-elevated-2);
        border-radius: 6px;
        font-size: 14px;
    }

.pill[b-xv52nuslm9] {
    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-xv52nuslm9] {
    color: var(--lb-accent-primary);
    text-decoration: none;
    font-weight: 500;
}

    .list li a:hover[b-xv52nuslm9] {
        text-decoration: underline;
    }

/* ═══════════════════════════════════════════════════════ */
/* UTILITY CLASSES */
/* ═══════════════════════════════════════════════════════ */
.d-flex[b-xv52nuslm9] {
    display: flex;
}

.align-items-center[b-xv52nuslm9] {
    align-items: center;
}

.gap-2[b-xv52nuslm9] {
    gap: 0.5rem;
}

.mt-2[b-xv52nuslm9] {
    margin-top: 0.5rem;
}

.mb-3[b-xv52nuslm9] {
    margin-bottom: 1rem;
}

.text-muted[b-xv52nuslm9] {
    color: var(--text-muted, #888);
}

.placeholder[b-xv52nuslm9] {
    color: var(--text-muted, #666);
    font-style: italic;
    font-size: 14px;
    padding: 1.5rem;
    text-align: center;
    background: transparent;
    border: 1px dashed var(--lb-border-subtle, rgba(255,255,255,0.1));
    border-radius: 6px;
}

/* Empty state - centered with optional action button */
.empty-state[b-xv52nuslm9] {
    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, rgba(255,255,255,0.15));
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.02);
}

.empty-state-text[b-xv52nuslm9] {
    color: var(--text-muted, #999);
    font-size: 14px;
}

/* Author box in infobox */
.infobox-author[b-xv52nuslm9] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    margin-top: 1rem;
    border-top: 1px solid var(--lb-border-subtle, rgba(255,255,255,0.1));
    background: rgba(0, 0, 0, 0.15);
}

.author-avatar[b-xv52nuslm9] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--lb-accent-primary, #d4a84b);
    color: #1a1a1a;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
    flex-shrink: 0;
}

.author-info[b-xv52nuslm9] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.author-name[b-xv52nuslm9] {
    color: var(--lb-accent-primary, #d4a84b);
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.author-name:hover[b-xv52nuslm9] {
    text-decoration: underline;
    color: #e5b95c;
}

.author-date[b-xv52nuslm9] {
    color: var(--text-muted, #777);
    font-size: 12px;
}

.summary-text[b-xv52nuslm9] {
    white-space: pre-line;
    margin: 0;
    line-height: 1.6;
}

/* ═══════════════════════════════════════════════════════ */
/* BUTTONS */
/* ═══════════════════════════════════════════════════════ */
.btn[b-xv52nuslm9] {
    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-xv52nuslm9] {
    padding: 0.375rem 0.75rem;
    font-size: 13px;
}

.btn-outline-secondary[b-xv52nuslm9] {
    background: transparent;
    color: var(--lb-text-secondary);
    border: 1px solid var(--lb-border-default);
}

    .btn-outline-secondary:hover[b-xv52nuslm9] {
        background: var(--lb-bg-hover);
        border-color: var(--lb-accent-primary);
        color: var(--lb-text-primary);
    }

.btn-outline-primary[b-xv52nuslm9] {
    background: transparent;
    color: var(--lb-accent-primary);
    border: 1px solid var(--lb-accent-primary);
}

    .btn-outline-primary:hover[b-xv52nuslm9] {
        background: var(--lb-accent-primary);
        color: white;
    }

.btn-primary[b-xv52nuslm9] {
    background: var(--lb-accent-primary);
    color: white;
    border: none;
}

    .btn-primary:hover[b-xv52nuslm9] {
        background: #3a7fc6;
    }

.btn-secondary[b-xv52nuslm9] {
    background: var(--lb-bg-elevated-2);
    color: var(--lb-text-primary);
    border: 1px solid var(--lb-border-default);
}

    .btn-secondary:hover[b-xv52nuslm9] {
        background: var(--lb-bg-hover);
    }

.btn-danger[b-xv52nuslm9], .btn-outline-danger[b-xv52nuslm9] {
    background: transparent;
    color: #dc3545;
    border: 1px solid #dc3545;
}

    .btn-danger:hover[b-xv52nuslm9], .btn-outline-danger:hover[b-xv52nuslm9] {
        background: #dc3545;
        color: white;
    }

.btn-link[b-xv52nuslm9] {
    background: transparent;
    color: var(--lb-accent-primary);
    border: none;
    padding: 0.25rem 0.5rem;
    text-decoration: none;
}

    .btn-link:hover[b-xv52nuslm9] {
        text-decoration: underline;
    }

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

input[type="checkbox"][b-xv52nuslm9] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

label[b-xv52nuslm9] {
    font-size: 14px;
    color: var(--lb-text-secondary);
    cursor: pointer;
    user-select: none;
}

/* ═══════════════════════════════════════════════════════ */
/* ALERTS */
/* ═══════════════════════════════════════════════════════ */
.alert[b-xv52nuslm9] {
    padding: 0.75rem 1rem;
    border-radius: 6px;
    font-size: 14px;
    margin-top: 0.5rem;
}

.alert-danger[b-xv52nuslm9] {
    background: rgba(220, 53, 69, 0.1);
    border: 1px solid rgba(220, 53, 69, 0.3);
    color: #ff6b7a;
}

.alert-success[b-xv52nuslm9] {
    background: rgba(40, 167, 69, 0.1);
    border: 1px solid rgba(40, 167, 69, 0.3);
    color: #4ade80;
}

.alert-warning[b-xv52nuslm9] {
    background: rgba(255, 193, 7, 0.1);
    border: 1px solid rgba(255, 193, 7, 0.3);
    color: #ffc107;
}

/* ═══════════════════════════════════════════════════════ */
/* BADGES */
/* ═══════════════════════════════════════════════════════ */
.badge[b-xv52nuslm9] {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
}

.badge-primary[b-xv52nuslm9] {
    background: var(--lb-accent-primary);
    color: white;
}

.badge-success[b-xv52nuslm9] {
    background: #28a745;
    color: white;
}

.system-badge[b-xv52nuslm9] {
    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-xv52nuslm9] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.rating-display[b-xv52nuslm9] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.rating-stars[b-xv52nuslm9] {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.rating-value[b-xv52nuslm9] {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--lb-accent-primary);
}

.stars[b-xv52nuslm9] {
    display: flex;
    gap: 2px;
}

.star[b-xv52nuslm9] {
    font-size: 1.5rem;
    color: var(--lb-border-default);
}

    .star.filled[b-xv52nuslm9] {
        color: #ffd700;
    }

.rating-count[b-xv52nuslm9] {
    color: var(--text-muted, #888);
    font-size: 14px;
}

.user-rating-section[b-xv52nuslm9] {
    padding: 1rem;
    background: var(--bg-tertiary, #1a1a1a);
    border-radius: 6px;
}

.current-rating[b-xv52nuslm9] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 14px;
}

.rating-input[b-xv52nuslm9] {
    margin-top: 1rem;
}

.star-input[b-xv52nuslm9] {
    display: flex;
    gap: 4px;
    margin-bottom: 0.75rem;
}

.star-button[b-xv52nuslm9] {
    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-xv52nuslm9],
    .star-button.filled[b-xv52nuslm9] {
        color: #ffd700;
    }

.rating-actions[b-xv52nuslm9] {
    display: flex;
    gap: 0.5rem;
}

.rating-breakdown[b-xv52nuslm9] {
    margin-top: 1rem;
}

    .rating-breakdown summary[b-xv52nuslm9] {
        cursor: pointer;
        font-size: 14px;
        color: var(--lb-text-secondary);
        user-select: none;
    }

.breakdown-bars[b-xv52nuslm9] {
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.breakdown-row[b-xv52nuslm9] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 13px;
}

.stars-label[b-xv52nuslm9] {
    width: 3rem;
    color: var(--lb-text-secondary);
}

.progress-bar[b-xv52nuslm9] {
    flex: 1;
    height: 8px;
    background: var(--bg-tertiary, #1a1a1a);
    border-radius: 4px;
    overflow: hidden;
}

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

.breakdown-row .count[b-xv52nuslm9] {
    width: 2rem;
    text-align: right;
    color: var(--text-muted, #888);
}

.no-ratings[b-xv52nuslm9],
.login-prompt[b-xv52nuslm9] {
    padding: 1rem;
    text-align: center;
}

/* ═══════════════════════════════════════════════════════ */
/* COMMENT COMPONENT STYLES */
/* ═══════════════════════════════════════════════════════ */
.comment-list-component[b-xv52nuslm9] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.no-comments[b-xv52nuslm9] {
    padding: 1rem;
    text-align: center;
}

.comments-container[b-xv52nuslm9] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.load-more[b-xv52nuslm9] {
    display: flex;
    justify-content: center;
    margin-top: 1rem;
}

.comment-item[b-xv52nuslm9] {
    padding: 1rem;
    background: var(--lb-bg-elevated-2);
    border-radius: 6px;
    border-left: 3px solid var(--lb-border-default);
}

    .comment-item.deleted[b-xv52nuslm9] {
        opacity: 0.6;
        font-style: italic;
    }

.comment-header[b-xv52nuslm9] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.comment-author[b-xv52nuslm9] {
    font-size: 14px;
    font-weight: 600;
    color: var(--lb-text-primary);
}

.comment-meta[b-xv52nuslm9] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 12px;
    color: var(--text-muted, #888);
}

.edited-badge[b-xv52nuslm9] {
    font-style: italic;
}

.comment-body[b-xv52nuslm9] {
    margin-bottom: 0.75rem;
}

.comment-content[b-xv52nuslm9] {
    font-size: 14px;
    color: var(--lb-text-secondary);
    line-height: 1.6;
    margin: 0;
}

.comment-actions[b-xv52nuslm9] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.comment-reply-editor[b-xv52nuslm9] {
    margin-top: 1rem;
    padding-left: 1rem;
    border-left: 2px solid var(--lb-accent-primary);
}

.comment-replies[b-xv52nuslm9] {
    margin-top: 1rem;
    padding-left: 1rem;
    border-left: 2px solid var(--lb-border-default);
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.deleted-message[b-xv52nuslm9] {
    padding: 0.5rem;
}

/* Comment Editor */
.comment-editor[b-xv52nuslm9] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.editor-container[b-xv52nuslm9] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.comment-textarea[b-xv52nuslm9] {
    width: 100%;
    min-height: 100px;
    padding: 0.75rem;
    background: var(--bg-tertiary, #1a1a1a);
    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-xv52nuslm9] {
        outline: none;
        border-color: var(--lb-accent-primary);
    }

.editor-footer[b-xv52nuslm9] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.character-count[b-xv52nuslm9] {
    font-size: 12px;
}

    .character-count.text-warning[b-xv52nuslm9] {
        color: #ffc107;
    }

.editor-actions[b-xv52nuslm9] {
    display: flex;
    gap: 0.5rem;
}

.new-comment-section[b-xv52nuslm9] {
    margin-bottom: 1.5rem;
}

/* ═══════════════════════════════════════════════════════ */
/* STAT BLOCK COMPONENT STYLES */
/* ═══════════════════════════════════════════════════════ */
.stat-block-display[b-xv52nuslm9] {
    padding: 1rem;
    background: var(--bg-tertiary, #1a1a1a);
    border: 1px solid var(--lb-border-default);
    border-radius: 6px;
}

.stat-block-header[b-xv52nuslm9] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.stat-block-title-row[b-xv52nuslm9] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.stat-block-title[b-xv52nuslm9] {
    font-size: 18px;
    font-weight: 600;
    color: var(--lb-text-primary);
    margin: 0;
}

.stat-block-actions[b-xv52nuslm9] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.stat-groups[b-xv52nuslm9] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.stat-group[b-xv52nuslm9] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.stat-group-title[b-xv52nuslm9] {
    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-xv52nuslm9] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.stat-row[b-xv52nuslm9] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

    .stat-row:last-child[b-xv52nuslm9] {
        border-bottom: none;
    }

.stat-name[b-xv52nuslm9] {
    font-size: 14px;
    color: var(--lb-text-secondary);
}

.stat-value[b-xv52nuslm9] {
    font-size: 14px;
    color: var(--lb-text-primary);
    font-weight: 600;
}

    .stat-value .form-control-sm[b-xv52nuslm9] {
        width: 120px;
        padding: 0.25rem 0.5rem;
        font-size: 13px;
    }

.edit-actions[b-xv52nuslm9] {
    display: flex;
    gap: 0.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--lb-border-default);
}

.stat-blocks-container[b-xv52nuslm9] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.stat-block-wrapper[b-xv52nuslm9] {
    /* Spacing between stat blocks */
}

/* ═══════════════════════════════════════════════════════ */
/* MEDIA GALLERY COMPONENT STYLES */
/* ═══════════════════════════════════════════════════════ */
.media-gallery-component[b-xv52nuslm9] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.no-media[b-xv52nuslm9] {
    padding: 1rem;
    text-align: center;
}

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

    .media-grid.list[b-xv52nuslm9] {
        grid-template-columns: 1fr;
    }

.media-item[b-xv52nuslm9] {
    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-xv52nuslm9] {
        transform: scale(1.02);
    }

    .media-item.main-image[b-xv52nuslm9] {
        grid-column: span 2;
        grid-row: span 2;
    }

.media-image-container[b-xv52nuslm9] {
    position: relative;
    width: 100%;
    height: 100%;
}

.media-image[b-xv52nuslm9] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.main-image-badge[b-xv52nuslm9] {
    position: absolute;
    top: 8px;
    right: 8px;
}

.media-placeholder[b-xv52nuslm9] {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--text-muted, #888);
    font-size: 14px;
    gap: 0.5rem;
}

.media-type-icon[b-xv52nuslm9] {
    font-size: 2rem;
}

.media-caption[b-xv52nuslm9] {
    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-xv52nuslm9] {
    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-xv52nuslm9] {
    display: flex;
    justify-content: center;
}

/* Media Viewer Overlay */
.media-viewer-overlay[b-xv52nuslm9] {
    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-xv52nuslm9] {
    background: var(--bg-primary, #1a1a1a);
    border-radius: 8px;
    max-width: 90vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.media-viewer-header[b-xv52nuslm9] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    border-bottom: 1px solid var(--lb-border-default);
}

    .media-viewer-header h5[b-xv52nuslm9] {
        margin: 0;
        font-size: 16px;
        color: var(--lb-text-primary);
    }

.btn-close[b-xv52nuslm9] {
    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-xv52nuslm9] {
        color: var(--lb-accent-primary);
    }

.media-viewer-body[b-xv52nuslm9] {
    padding: 2rem;
    overflow: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.media-viewer-image[b-xv52nuslm9] {
    max-width: 100%;
    max-height: 70vh;
    object-fit: contain;
}

.media-viewer-placeholder[b-xv52nuslm9] {
    text-align: center;
    padding: 2rem;
}

.media-viewer-actions[b-xv52nuslm9] {
    display: flex;
    gap: 0.5rem;
    padding: 1rem;
    border-top: 1px solid var(--lb-border-default);
    justify-content: center;
}

/* Upload Dialog */
.upload-dialog-overlay[b-xv52nuslm9] {
    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-xv52nuslm9] {
    background: var(--bg-primary, #1a1a1a);
    border: 1px solid var(--lb-border-default);
    border-radius: 8px;
    padding: 2rem;
    max-width: 500px;
    width: 90%;
}

    .upload-dialog h5[b-xv52nuslm9] {
        margin: 0 0 1rem 0;
        font-size: 18px;
        color: var(--lb-text-primary);
    }

/* ═══════════════════════════════════════════════════════ */
/* FORM CONTROLS */
/* ═══════════════════════════════════════════════════════ */
.form-control[b-xv52nuslm9] {
    width: 100%;
    padding: 0.5rem 0.75rem;
    background: var(--bg-tertiary, #1a1a1a);
    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-xv52nuslm9] {
        outline: none;
        border-color: var(--lb-accent-primary);
    }

.form-control-sm[b-xv52nuslm9] {
    padding: 0.375rem 0.5rem;
    font-size: 13px;
}

/* ═══════════════════════════════════════════════════════ */
/* RESPONSIVE */
/* ═══════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .rating-stars[b-xv52nuslm9] {
        flex-direction: column;
        align-items: flex-start;
    }

    .media-grid[b-xv52nuslm9] {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    }

    .media-item.main-image[b-xv52nuslm9] {
        grid-column: span 1;
        grid-row: span 1;
    }

    .stat-row[b-xv52nuslm9] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }

    .comment-item[b-xv52nuslm9] {
        padding: 0.75rem;
    }
}

/* ═══════════════════════════════════════════════════════ */
/* RELATIONSHIP STYLES - VIEW MODE */
/* ═══════════════════════════════════════════════════════ */
.relationship-list[b-xv52nuslm9] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.relationship-item[b-xv52nuslm9] {
    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-xv52nuslm9] {
    color: var(--lb-text-secondary);
    font-weight: 500;
}

.relationship-target[b-xv52nuslm9] {
    color: var(--lb-accent-primary);
    font-weight: 600;
    text-decoration: none;
    transition: color 0.15s ease;
}

.relationship-target:hover[b-xv52nuslm9] {
    color: #5aa3e0;
    text-decoration: underline;
}

.relationship-notes[b-xv52nuslm9] {
    flex-basis: 100%;
    margin-top: 0.25rem;
    font-size: 13px;
    color: var(--text-muted, #888);
    font-style: italic;
}

/* ═══════════════════════════════════════════════════════ */
/* RELATIONSHIP STYLES - EDIT MODE */
/* ═══════════════════════════════════════════════════════ */
.relationship-edit-list[b-xv52nuslm9] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.relationship-edit-item[b-xv52nuslm9] {
    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-xv52nuslm9] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.relationship-edit-info[b-xv52nuslm9] {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    flex-wrap: wrap;
    min-width: 0;
}

.relationship-edit-phrase[b-xv52nuslm9] {
    font-weight: 600;
    color: var(--lb-text-primary);
    font-size: 14px;
}

.relationship-edit-target[b-xv52nuslm9] {
    color: var(--lb-accent-primary);
    font-size: 14px;
}

.relationship-edit-actions[b-xv52nuslm9] {
    display: flex;
    gap: 0.25rem;
    flex-shrink: 0;
}

.btn-icon[b-xv52nuslm9] {
    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-xv52nuslm9] {
    background: var(--lb-bg-hover);
    color: var(--lb-text-primary);
}

.btn-icon-danger:hover[b-xv52nuslm9] {
    background: rgba(220, 53, 69, 0.15);
    color: #ff6b7a;
}

.relationship-edit-item textarea[b-xv52nuslm9] {
    background: var(--lb-bg-elevated-1);
    border-color: var(--lb-border-default);
    font-size: 13px;
    resize: none;
}

.relationship-edit-item textarea:focus[b-xv52nuslm9] {
    border-color: var(--lb-accent-primary);
    outline: none;
}

.top-row-right[b-xv52nuslm9] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem; /* increase if 1rem isn't enough */
    flex: 1;
    min-width: 0;
}
/* /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/InlineAttributeEditor.razor.rz.scp.css */
/* InlineAttributeEditor Styles */
.inline-attr-editor[b-j559022nkq] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.attr-loading[b-j559022nkq] {
    color: var(--text-muted, #888);
    font-style: italic;
    padding: 1rem 0;
    font-size: 13px;
}

.attr-empty[b-j559022nkq] {
    color: var(--text-muted, #888);
    font-style: italic;
    font-size: 13px;
    padding: 0.5rem 0;
}

/* Category grouping */
.attr-category[b-j559022nkq] {
    margin-bottom: 0.75rem;
}

.attr-category:last-child[b-j559022nkq] {
    margin-bottom: 0;
}

.attr-category-header[b-j559022nkq] {
    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-j559022nkq] {
    color: var(--text-muted, #888);
    border-bottom-color: var(--lb-border-subtle, rgba(255,255,255,0.1));
}

/* Individual attribute field */
.attr-field[b-j559022nkq] {
    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-j559022nkq] {
    border-bottom: none;
}

.attr-field.has-value .attr-label[b-j559022nkq] {
    color: var(--lb-text-primary);
}

.attr-label[b-j559022nkq] {
    font-size: 12px;
    color: var(--text-muted, #888);
    font-weight: 500;
}

.attr-input-row[b-j559022nkq] {
    display: flex;
    gap: 0.35rem;
    align-items: center;
}

.attr-input-row input[b-j559022nkq] {
    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-j559022nkq] {
    border-color: var(--lb-accent-primary, #d4a84b);
    outline: none;
}

.attr-input-row input[b-j559022nkq]::placeholder {
    color: var(--text-muted, #666);
}

.attr-unit-select[b-j559022nkq] {
    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-j559022nkq] {
    border-color: var(--lb-accent-primary, #d4a84b);
    outline: none;
}

/* Other attributes section */
.attr-other-section[b-j559022nkq] {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--lb-border-default, #3a3a3a);
}

.attr-other-toggle[b-j559022nkq] {
    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-j559022nkq] {
    color: var(--lb-text-primary);
}

.attr-other-list[b-j559022nkq] {
    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-j559022nkq] {
    font-size: 12px;
    color: var(--lb-accent-primary, #d4a84b);
    padding: 0.5rem 0;
}

.attr-show-all:hover[b-j559022nkq] {
    color: #e5b95c;
}

/* Variant select (for Number types with modifiers) */
.attr-variant-select[b-j559022nkq] {
    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-j559022nkq] {
    border-color: var(--lb-accent-primary, #d4a84b);
    outline: none;
}

/* Boolean field - checkbox inline with label */
.attr-field-bool[b-j559022nkq] {
    flex-direction: row;
    align-items: center;
    padding: 0.25rem 0;
}

.attr-label-bool[b-j559022nkq] {
    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-j559022nkq] {
    color: var(--lb-text-primary);
}

.attr-label-bool .form-check-input[b-j559022nkq] {
    width: 16px;
    height: 16px;
    margin: 0;
    cursor: pointer;
    accent-color: var(--lb-accent-primary, #d4a84b);
}

.attr-description[b-j559022nkq] {
    font-size: 11px;
    color: var(--text-muted, #666);
    cursor: help;
    opacity: 0.6;
}

.attr-description:hover[b-j559022nkq] {
    opacity: 1;
}

/* Scale field - full width dropdown */
.attr-input-row select.form-select[b-j559022nkq] {
    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-j559022nkq] {
    border-color: var(--lb-accent-primary, #d4a84b);
    outline: none;
}

/* Hierarchical tree field */
.attr-field-tree[b-j559022nkq] {
    flex-direction: column;
}

.attr-tree[b-j559022nkq] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.25rem 0;
}

.attr-tree-node[b-j559022nkq] {
    display: flex;
    align-items: center;
}

.attr-tree-label[b-j559022nkq] {
    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-j559022nkq] {
    color: var(--lb-text-primary);
}

.attr-tree-label .form-check-input[b-j559022nkq] {
    width: 14px;
    height: 14px;
    margin: 0;
    cursor: pointer;
    accent-color: var(--lb-accent-primary, #d4a84b);
}

.attr-tree-label .form-check-input:checked + span[b-j559022nkq] {
    color: var(--lb-text-primary);
}

/* Parent nodes in tree (have children) */
.attr-tree-parent[b-j559022nkq] {
    font-weight: 600;
}
/* /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 */
/* /Components/Pages/Pillars/RelationshipPickerModal.razor.rz.scp.css */
/* Relationship Picker Modal - Diagram-as-Interface Design */

/* Overlay */
.rp-overlay[b-43r4n80vlq] {
    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-43r4n80vlq] {
    display: flex;
}

/* Modal Container */
.rp-modal[b-43r4n80vlq] {
    background: var(--lb-bg-elevated, #1e1e1e);
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
    width: 580px;
    max-width: 95vw;
    max-height: 90vh;
    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-43r4n80vlq 0.3s ease-out;
}

@keyframes modalSlideUp-b-43r4n80vlq {
    from {
        transform: translateY(30px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.rp-modal.panel-open[b-43r4n80vlq] {
    border-radius: 16px 0 0 16px;
}

/* Header */
.rp-header[b-43r4n80vlq] {
    padding: 20px 24px;
    border-bottom: 1px solid var(--lb-border-default, #333);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.rp-title[b-43r4n80vlq] {
    margin: 0;
    font-size: 1.25rem;
    color: var(--lb-text-primary, #fff);
    font-weight: 600;
}

.rp-close[b-43r4n80vlq] {
    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-43r4n80vlq] {
    background: var(--lb-bg-hover, #333);
    color: var(--lb-text-primary, #fff);
}

/* Body */
.rp-body[b-43r4n80vlq] {
    padding: 24px;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}

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

.rp-loading .spinner[b-43r4n80vlq] {
    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-43r4n80vlq 0.8s linear infinite;
    margin-bottom: 1rem;
}

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

/* Direction Toggle */
.rp-direction-toggle[b-43r4n80vlq] {
    display: flex;
    gap: 8px;
    margin-bottom: 24px;
}

.dir-btn[b-43r4n80vlq] {
    padding: 6px 16px;
    background: transparent;
    border: 1px solid var(--lb-border-default, #333);
    color: var(--lb-text-muted, #888);
    border-radius: 20px;
    cursor: pointer;
    font-size: 13px;
    transition: all 0.2s;
}

.dir-btn:hover[b-43r4n80vlq] {
    background: var(--lb-bg-hover, #333);
}

.dir-btn.active[b-43r4n80vlq] {
    background: var(--lb-accent-primary, #d4af37);
    color: #000;
    border-color: var(--lb-accent-primary, #d4af37);
}

/* THE DIAGRAM */
.rp-diagram[b-43r4n80vlq] {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    justify-content: center;
}

.rp-entity-box[b-43r4n80vlq] {
    width: 150px;
    padding: 16px;
    background: var(--lb-bg-elevated-2, #252525);
    border: 2px solid var(--lb-border-default, #333);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    transition: all 0.2s;
}

.rp-entity-box.clickable[b-43r4n80vlq] {
    cursor: pointer;
}

.rp-entity-box.clickable:hover[b-43r4n80vlq] {
    border-color: var(--lb-border-strong, #444);
    background: var(--lb-bg-elevated-3, #2a2a2a);
    transform: translateY(-2px);
}

.rp-entity-box.active[b-43r4n80vlq] {
    border-color: var(--lb-accent-primary, #d4af37);
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.3);
}

.rp-entity-box.source[b-43r4n80vlq] {
    border-color: var(--lb-accent-primary, #d4af37);
    background: rgba(212, 175, 55, 0.05);
}

.rp-entity-box.has-selection[b-43r4n80vlq] {
    border-color: var(--lb-success, #4caf50);
    background: rgba(76, 175, 80, 0.05);
}

.entity-image[b-43r4n80vlq] {
    width: 72px;
    height: 72px;
    border-radius: 8px;
    overflow: hidden;
    background: var(--lb-bg-elevated-3, #2a2a2a);
    display: flex;
    align-items: center;
    justify-content: center;
}

.entity-image img[b-43r4n80vlq] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.entity-image.placeholder[b-43r4n80vlq] {
    border: 2px dashed var(--lb-border-strong, #444);
}

.entity-image.placeholder span[b-43r4n80vlq],
.entity-image .image-placeholder[b-43r4n80vlq] {
    font-size: 28px;
    color: var(--lb-text-muted, #888);
}

.entity-label[b-43r4n80vlq] {
    text-align: center;
}

.entity-name[b-43r4n80vlq] {
    display: block;
    font-weight: 600;
    color: var(--lb-text-primary, #fff);
    font-size: 13px;
    margin-bottom: 4px;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.entity-name.placeholder-text[b-43r4n80vlq] {
    color: var(--lb-text-muted, #888);
}

.entity-pillar[b-43r4n80vlq] {
    font-size: 10px;
    color: var(--lb-text-muted, #888);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Arrow Box */
.rp-arrow-box[b-43r4n80vlq] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px 20px;
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.2s;
    min-width: 110px;
    border: 2px solid transparent;
}

.rp-arrow-box:hover[b-43r4n80vlq] {
    background: var(--lb-bg-elevated-3, #2a2a2a);
    border-color: var(--lb-border-default, #333);
}

.rp-arrow-box.active[b-43r4n80vlq] {
    background: var(--lb-bg-elevated-3, #2a2a2a);
    border-color: var(--lb-accent-primary, #d4af37);
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.3);
}

.rp-arrow-box.has-selection .arrow-icon[b-43r4n80vlq] {
    color: var(--lb-success, #4caf50);
}

.arrow-icon[b-43r4n80vlq] {
    font-size: 28px;
    color: var(--lb-accent-primary, #d4af37);
    transition: color 0.2s;
}

.arrow-label[b-43r4n80vlq] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    text-align: center;
}

.rel-phrase[b-43r4n80vlq] {
    color: var(--lb-text-primary, #fff);
    font-weight: 500;
}

.rel-placeholder[b-43r4n80vlq] {
    color: var(--lb-text-muted, #888);
    font-style: italic;
}

/* Sentence Preview */
.rp-sentence[b-43r4n80vlq] {
    margin-top: 24px;
    padding: 14px 24px;
    background: var(--lb-bg-elevated-2, #252525);
    border-radius: 8px;
    font-size: 14px;
    color: var(--lb-text-primary, #fff);
    text-align: center;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.rp-sentence strong[b-43r4n80vlq] {
    color: var(--lb-accent-primary, #d4af37);
}

.sentence-hint[b-43r4n80vlq] {
    color: var(--lb-text-muted, #888);
    font-style: italic;
}

/* Footer */
.rp-footer[b-43r4n80vlq] {
    padding: 16px 24px;
    border-top: 1px solid var(--lb-border-default, #333);
    display: flex;
    justify-content: flex-end;
}

.btn-primary[b-43r4n80vlq] {
    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-43r4n80vlq] {
    filter: brightness(1.1);
}

.btn-primary:disabled[b-43r4n80vlq] {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Side Panel - Slides out but stays BEHIND the modal */
.rp-side-panel[b-43r4n80vlq] {
    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-43r4n80vlq] {
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
}

.panel-header[b-43r4n80vlq] {
    padding: 16px 20px;
    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-43r4n80vlq] {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--lb-text-primary, #fff);
}

.panel-close[b-43r4n80vlq] {
    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-43r4n80vlq] {
    background: var(--lb-bg-hover, #333);
    color: var(--lb-text-primary, #fff);
}

.panel-search[b-43r4n80vlq] {
    padding: 12px 16px;
    border-bottom: 1px solid var(--lb-border-default, #333);
    flex-shrink: 0;
}

.panel-search input[b-43r4n80vlq] {
    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;
}

.panel-search input:focus[b-43r4n80vlq] {
    outline: none;
    border-color: var(--lb-accent-primary, #d4af37);
}

.panel-search input[b-43r4n80vlq]::placeholder {
    color: var(--lb-text-muted, #888);
}

.panel-content[b-43r4n80vlq] {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    padding-bottom: 24px;
    scrollbar-width: thin;
    scrollbar-color: var(--lb-border-strong, #444) transparent;
}

.panel-content[b-43r4n80vlq]::-webkit-scrollbar {
    width: 6px;
}

.panel-content[b-43r4n80vlq]::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 3px;
    margin: 8px 0;
}

.panel-content[b-43r4n80vlq]::-webkit-scrollbar-thumb {
    background: var(--lb-border-strong, #444);
    border-radius: 3px;
}

.panel-content[b-43r4n80vlq]::-webkit-scrollbar-thumb:hover {
    background: var(--lb-text-muted, #888);
}

.panel-loading[b-43r4n80vlq] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px;
    color: var(--lb-text-muted, #888);
}

.mini-spinner[b-43r4n80vlq] {
    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-43r4n80vlq 0.6s linear infinite;
}

.panel-section[b-43r4n80vlq] {
    margin-bottom: 20px;
}

.panel-section:last-child[b-43r4n80vlq] {
    margin-bottom: 0;
}

.section-header[b-43r4n80vlq] {
    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-43r4n80vlq] {
    font-size: 14px;
}

/* Entity Grid */
.entity-grid[b-43r4n80vlq] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.entity-card[b-43r4n80vlq] {
    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-43r4n80vlq] {
    background: var(--lb-bg-elevated-3, #2a2a2a);
    border-color: var(--lb-border-strong, #444);
    transform: translateY(-2px);
}

.entity-card.selected[b-43r4n80vlq] {
    border-color: var(--lb-accent-primary, #d4af37);
    background: rgba(212, 175, 55, 0.1);
}

.card-image[b-43r4n80vlq] {
    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-43r4n80vlq] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.card-image .image-placeholder[b-43r4n80vlq] {
    font-size: 24px;
    color: var(--lb-text-muted, #888);
}

.card-info[b-43r4n80vlq] {
    text-align: center;
}

.card-name[b-43r4n80vlq] {
    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-43r4n80vlq] {
    font-size: 9px;
    color: var(--lb-accent-primary, #d4af37);
    text-transform: uppercase;
    font-weight: 500;
}

/* Relationship List */
.relationship-list[b-43r4n80vlq] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.relationship-item[b-43r4n80vlq] {
    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-43r4n80vlq] {
    background: var(--lb-bg-elevated-3, #2a2a2a);
    border-color: var(--lb-border-strong, #444);
}

.relationship-item.selected[b-43r4n80vlq] {
    border-color: var(--lb-accent-primary, #d4af37);
    background: rgba(212, 175, 55, 0.1);
}

.rel-item-info[b-43r4n80vlq] {
    flex: 1;
}

.rel-item-key[b-43r4n80vlq] {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--lb-text-primary, #fff);
}

.rel-item-phrase[b-43r4n80vlq] {
    display: block;
    font-size: 11px;
    color: var(--lb-text-muted, #888);
    font-style: italic;
}

.rel-badge[b-43r4n80vlq] {
    font-size: 14px;
    color: var(--lb-accent-primary, #d4af37);
}

.no-results[b-43r4n80vlq] {
    padding: 24px;
    text-align: center;
    color: var(--lb-text-muted, #888);
    font-size: 13px;
}

/* Responsive */
@media (max-width: 900px) {
    .rp-modal[b-43r4n80vlq] {
        width: 95%;
    }

    .rp-diagram[b-43r4n80vlq] {
        flex-direction: column;
        gap: 12px;
    }

    .rp-arrow-box[b-43r4n80vlq] {
        transform: rotate(90deg);
        padding: 12px 16px;
    }

    .arrow-label[b-43r4n80vlq] {
        transform: rotate(-90deg);
    }

    .rp-side-panel[b-43r4n80vlq] {
        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-43r4n80vlq] {
        transform: translateY(0);
    }

    .rp-modal.panel-open[b-43r4n80vlq] {
        border-radius: 16px;
    }
}
/* /Components/Pages/Pillars/Spell.razor.rz.scp.css */
/* /Components/Pages/Pillars/StarSystem.razor.rz.scp.css */
/* /Components/Pages/Pillars/StatBlockModal.razor.rz.scp.css */
/* Stat Block Modal - Wizard Style */

/* Overlay */
.stat-modal-overlay[b-1f1rivpjow] {
    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-1f1rivpjow 0.2s ease-in-out;
}

    .stat-modal-overlay.show[b-1f1rivpjow] {
        display: flex;
    }

@keyframes statFadeIn-b-1f1rivpjow {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Modal Container */
.stat-modal[b-1f1rivpjow] {
    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-1f1rivpjow 0.3s ease-out;
}

.stat-modal-large[b-1f1rivpjow] {
    max-width: 900px;
}

@keyframes statSlideUp-b-1f1rivpjow {
    from {
        transform: translateY(30px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Header */
.stat-modal-header[b-1f1rivpjow] {
    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-1f1rivpjow] {
    flex: 1;
}

.stat-modal-title[b-1f1rivpjow] {
    margin: 0;
    font-size: 1.35rem;
    color: var(--lb-text-primary);
    font-weight: 600;
}

.stat-modal-breadcrumb[b-1f1rivpjow] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.375rem;
    font-size: 0.875rem;
    color: var(--lb-text-secondary);
}

.breadcrumb-separator[b-1f1rivpjow] {
    color: var(--lb-text-muted);
}

.stat-modal-close[b-1f1rivpjow] {
    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-1f1rivpjow] {
        background: var(--lb-bg-hover);
        color: var(--lb-text-primary);
    }

/* Body */
.stat-modal-body[b-1f1rivpjow] {
    padding: 1.5rem;
    overflow-y: auto;
    flex: 1;
    min-height: 300px;
}

/* Loading State */
.stat-modal-loading[b-1f1rivpjow] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    color: var(--lb-text-muted);
}

    .stat-modal-loading .spinner[b-1f1rivpjow] {
        width: 40px;
        height: 40px;
        border: 3px solid var(--lb-border-default);
        border-top-color: var(--lb-accent-primary);
        border-radius: 50%;
        animation: statSpin-b-1f1rivpjow 0.8s linear infinite;
        margin-bottom: 1rem;
    }

@keyframes statSpin-b-1f1rivpjow {
    to {
        transform: rotate(360deg);
    }
}

/* Error State */
.stat-modal-error[b-1f1rivpjow] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    text-align: center;
}

.error-icon[b-1f1rivpjow] {
    font-size: 2.5rem;
    margin-bottom: 0.75rem;
}

.stat-modal-error p[b-1f1rivpjow] {
    color: var(--lb-error);
    margin: 0 0 1rem 0;
}

/* Step Content */
.stat-step[b-1f1rivpjow] {
    animation: statStepIn-b-1f1rivpjow 0.25s ease-out;
}

@keyframes statStepIn-b-1f1rivpjow {
    from {
        opacity: 0;
        transform: translateX(20px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.stat-step-instruction[b-1f1rivpjow] {
    font-size: 1rem;
    color: var(--lb-text-secondary);
    margin: 0 0 1.25rem 0;
}

/* Card Grid (for systems and profiles) */
.stat-card-grid[b-1f1rivpjow] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
}

.stat-card[b-1f1rivpjow] {
    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-1f1rivpjow] {
        background: var(--lb-bg-elevated-3);
        border-color: var(--lb-border-default);
    }

    .stat-card.selected[b-1f1rivpjow] {
        border-color: var(--lb-accent-primary);
        background: rgba(212, 175, 55, 0.08);
    }

.stat-card-icon[b-1f1rivpjow] {
    font-size: 1.75rem;
    flex-shrink: 0;
}

.stat-card-content[b-1f1rivpjow] {
    flex: 1;
    min-width: 0;
}

.stat-card-name[b-1f1rivpjow] {
    font-weight: 600;
    color: var(--lb-text-primary);
    margin-bottom: 0.125rem;
}

.stat-card-shortname[b-1f1rivpjow] {
    font-size: 0.8rem;
    color: var(--lb-accent-primary);
    margin-bottom: 0.25rem;
}

.stat-card-description[b-1f1rivpjow] {
    font-size: 0.8rem;
    color: var(--lb-text-muted);
    line-height: 1.4;
}

/* Empty State */
.stat-empty-state[b-1f1rivpjow] {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--lb-text-muted);
}

.empty-icon[b-1f1rivpjow] {
    font-size: 3rem;
    display: block;
    margin-bottom: 1rem;
    opacity: 0.5;
}

.stat-empty-state p[b-1f1rivpjow] {
    margin: 0 0 0.5rem 0;
    font-size: 1rem;
}

.stat-empty-state small[b-1f1rivpjow] {
    font-size: 0.875rem;
}

/* Step 3: Stats Form */
.stat-form-step[b-1f1rivpjow] {
    /* Form styles */
}

.stat-title-row[b-1f1rivpjow] {
    margin-bottom: 1.5rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--lb-border-subtle);
}

.stat-label[b-1f1rivpjow] {
    display: block;
    font-weight: 600;
    color: var(--lb-text-primary);
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
}

    .stat-label .optional[b-1f1rivpjow] {
        font-weight: 400;
        color: var(--lb-text-muted);
    }

.stat-input[b-1f1rivpjow] {
    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-1f1rivpjow] {
        outline: none;
        border-color: var(--lb-accent-primary);
        box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.1);
    }

.stat-input-number[b-1f1rivpjow] {
    max-width: 100px;
}

.stat-select[b-1f1rivpjow] {
    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-1f1rivpjow] {
        outline: none;
        border-color: var(--lb-accent-primary);
        box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.1);
    }

.stat-checkbox[b-1f1rivpjow] {
    width: 1.125rem;
    height: 1.125rem;
    margin-right: 0.5rem;
    cursor: pointer;
}

.stat-checkbox-label[b-1f1rivpjow] {
    display: flex;
    align-items: center;
    cursor: pointer;
    color: var(--lb-text-primary);
}

.stat-textarea[b-1f1rivpjow] {
    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-1f1rivpjow] {
        outline: none;
        border-color: var(--lb-accent-primary);
        box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.1);
    }

    .stat-textarea[b-1f1rivpjow]::placeholder {
        color: var(--lb-text-muted);
    }

/* Stat Groups */
.stat-group[b-1f1rivpjow] {
    margin-bottom: 1.5rem;
}

.stat-group-header[b-1f1rivpjow] {
    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-1f1rivpjow] {
    font-size: 1.125rem;
}

.stat-group-name[b-1f1rivpjow] {
    font-weight: 600;
    color: var(--lb-text-primary);
}

.stat-group-fields[b-1f1rivpjow] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1rem;
    padding: 0 0.25rem;
}

.stat-field[b-1f1rivpjow] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.stat-field-fullwidth[b-1f1rivpjow] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    margin-top: 1rem;
    padding: 0 0.25rem;
}

.stat-field-label[b-1f1rivpjow] {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--lb-text-secondary);
}

.stat-unit[b-1f1rivpjow] {
    color: var(--lb-text-muted);
    font-weight: 400;
}

.stat-required[b-1f1rivpjow] {
    color: var(--lb-error);
    margin-left: 0.125rem;
}

/* Footer */
.stat-modal-footer[b-1f1rivpjow] {
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--lb-border-default);
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.footer-spacer[b-1f1rivpjow] {
    flex: 1;
}

/* Buttons (scoped) */
.stat-modal .btn[b-1f1rivpjow] {
    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-1f1rivpjow] {
    background: var(--lb-accent-primary);
    color: #000;
}

    .stat-modal .btn-primary:hover:not(:disabled)[b-1f1rivpjow] {
        background: var(--lb-accent-primary-light);
    }

    .stat-modal .btn-primary:disabled[b-1f1rivpjow] {
        opacity: 0.5;
        cursor: not-allowed;
    }

.stat-modal .btn-secondary[b-1f1rivpjow] {
    background: var(--lb-bg-elevated-3);
    color: var(--lb-text-primary);
    border: 1px solid var(--lb-border-default);
}

    .stat-modal .btn-secondary:hover[b-1f1rivpjow] {
        background: var(--lb-bg-hover);
    }

.stat-modal .btn-sm[b-1f1rivpjow] {
    padding: 0.375rem 0.875rem;
    font-size: 0.875rem;
}

/* Responsive */
@media (max-width: 768px) {
    .stat-modal[b-1f1rivpjow] {
        max-width: 95%;
        max-height: 90vh;
    }

    .stat-modal-large[b-1f1rivpjow] {
        max-width: 95%;
    }

    .stat-card-grid[b-1f1rivpjow] {
        grid-template-columns: 1fr;
    }

    .stat-group-fields[b-1f1rivpjow] {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 480px) {
    .stat-group-fields[b-1f1rivpjow] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Pillars/Vehicle.razor.rz.scp.css */
/* /Components/Pages/Pillars/Weapon.razor.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;
}

.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;
}

    .creator-link:hover[b-7t7gnlyize] {
        color: var(--lb-accent-primary-light);
        text-decoration: underline;
    }

.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);
    }

.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;
    }
}
/* /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/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/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-bg-elevated);
    z-index: 2;
    font-size: 1rem;
}

/* 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-text-primary);
    font-size: 0.95rem;
}

.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;
}

/* Responsive */
@media (max-width: 768px) {
    .thread-comment[b-lz6fdbhtv0] {
        padding-left: 2.5rem;
    }

        .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.9rem;
    }

    .thread-content-wrapper[b-lz6fdbhtv0] {
        padding: var(--lb-spacing-md);
    }

    .thread-header[b-lz6fdbhtv0] {
        font-size: 0.9rem;
    }

    .thread-content[b-lz6fdbhtv0] {
        font-size: 0.9rem;
    }
}
/* /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-container[b-ul876fiyir] {
    max-width: 800px;
    margin: 0 auto;
    padding: 2rem 1rem;
}

.loading[b-ul876fiyir] {
    text-align: center;
    padding: 4rem 2rem;
    color: var(--text-secondary, #888);
}

.spinner[b-ul876fiyir] {
    width: 40px;
    height: 40px;
    border: 3px solid var(--bg-tertiary, #2a2a2a);
    border-top-color: var(--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] {
    background: rgba(220, 53, 69, 0.1);
    border: 1px solid rgba(220, 53, 69, 0.3);
    color: #ff6b6b;
    padding: 1rem;
    border-radius: 8px;
    margin-bottom: 1rem;
}

.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-top: 1rem;
    text-align: center;
}

.edit-profile-card[b-ul876fiyir] {
    background: var(--bg-secondary, #1a1a1a);
    border: 1px solid var(--bg-tertiary, #2a2a2a);
    border-radius: 12px;
    padding: 2rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

.header[b-ul876fiyir] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--accent-primary, #d4af37);
}

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

.form-group[b-ul876fiyir] {
    margin-bottom: 1.5rem;
}

.form-group label[b-ul876fiyir] {
    display: block;
    margin-bottom: 0.5rem;
    color: var(--text-primary, #e0e0e0);
    font-weight: 500;
}

.form-control[b-ul876fiyir] {
    width: 100%;
    padding: 0.75rem;
    background: var(--bg-primary, #0a0a0a);
    border: 1px solid var(--bg-tertiary, #2a2a2a);
    border-radius: 6px;
    color: var(--text-primary, #e0e0e0);
    font-size: 1rem;
    transition: border-color 0.2s;
}

.form-control:focus[b-ul876fiyir] {
    outline: none;
    border-color: var(--accent-primary, #d4af37);
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.1);
}

.form-control[b-ul876fiyir]::placeholder {
    color: var(--text-secondary, #888);
}

textarea.form-control[b-ul876fiyir] {
    resize: vertical;
    min-height: 100px;
    font-family: inherit;
}

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

.input-with-prefix[b-ul876fiyir] {
    display: flex;
    align-items: center;
}

.input-with-prefix .prefix[b-ul876fiyir] {
    background: var(--bg-tertiary, #2a2a2a);
    padding: 0.75rem;
    border: 1px solid var(--bg-tertiary, #2a2a2a);
    border-right: none;
    border-radius: 6px 0 0 6px;
    color: var(--accent-primary, #d4af37);
    font-weight: 500;
}

.input-with-prefix .form-control[b-ul876fiyir] {
    border-radius: 0 6px 6px 0;
}

.social-section[b-ul876fiyir],
.privacy-section[b-ul876fiyir] {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid var(--bg-tertiary, #2a2a2a);
}

.social-section h3[b-ul876fiyir],
.privacy-section h3[b-ul876fiyir] {
    margin-bottom: 1.5rem;
    color: var(--accent-primary, #d4af37);
    font-size: 1.2rem;
}

.checkbox-group[b-ul876fiyir] {
    margin-bottom: 1.5rem;
}

.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.25rem;
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--accent-primary, #d4af37);
}

.checkbox-group label span[b-ul876fiyir] {
    color: var(--text-primary, #e0e0e0);
}

.checkbox-group small[b-ul876fiyir] {
    display: block;
    margin-left: 26px;
    margin-top: 0.25rem;
}

.form-actions[b-ul876fiyir] {
    display: flex;
    gap: 1rem;
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid var(--bg-tertiary, #2a2a2a);
}

.save-button[b-ul876fiyir],
.cancel-button[b-ul876fiyir] {
    padding: 0.75rem 1.5rem;
    border-radius: 6px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
}

.save-button[b-ul876fiyir] {
    background: var(--accent-primary, #d4af37);
    color: #0a0a0a;
    flex: 1;
}

.save-button:hover:not(:disabled)[b-ul876fiyir] {
    background: var(--accent-secondary, #b8960f);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(212, 175, 55, 0.3);
}

.save-button:disabled[b-ul876fiyir] {
    opacity: 0.6;
    cursor: not-allowed;
}

.cancel-button[b-ul876fiyir] {
    background: transparent;
    border: 1px solid var(--bg-tertiary, #2a2a2a);
    color: var(--text-secondary, #888);
}

.cancel-button:hover:not(:disabled)[b-ul876fiyir] {
    background: var(--bg-tertiary, #2a2a2a);
    color: var(--text-primary, #e0e0e0);
}

.header .cancel-button[b-ul876fiyir] {
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
}

/* Responsive */
@media (max-width: 768px) {
    .edit-profile-container[b-ul876fiyir] {
        padding: 1rem 0.5rem;
    }

    .edit-profile-card[b-ul876fiyir] {
        padding: 1.5rem 1rem;
    }

    .header[b-ul876fiyir] {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .header .cancel-button[b-ul876fiyir] {
        align-self: stretch;
    }

    .form-actions[b-ul876fiyir] {
        flex-direction: column-reverse;
    }
}

/* Dark theme support */
@media (prefers-color-scheme: dark) {
    :root[b-ul876fiyir] {
        --bg-primary: #0a0a0a;
        --bg-secondary: #1a1a1a;
        --bg-tertiary: #2a2a2a;
        --bg-hover: #3a3a3a;
        --text-primary: #e0e0e0;
        --text-secondary: #888;
        --accent-primary: #d4af37;
        --accent-secondary: #b8960f;
    }
}
/* /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);
}

.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 .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);
}

/* ENTITIES --------------------------------------------------- */

.entity-card .etype[b-f17r98hrtk] {
    font-size: var(--lb-font-size-xs);
    color: var(--lb-text-muted);
    text-transform: uppercase;
    margin-bottom: .4rem;
    font-weight: var(--lb-font-weight-semibold);
    letter-spacing: 0.5px;
}

.entity-card .title[b-f17r98hrtk] {
    margin-bottom: 0.5rem;
}

    .entity-card .title a[b-f17r98hrtk] {
        font-size: var(--lb-font-size-xl);
        font-weight: var(--lb-font-weight-semibold);
        text-decoration: none;
        color: var(--lb-text-primary);
        transition: color var(--lb-transition-base);
    }

        .entity-card .title a:hover[b-f17r98hrtk] {
            color: var(--lb-accent-primary);
        }

.entity-card .stats[b-f17r98hrtk] {
    margin-top: .5rem;
    display: flex;
    gap: 1rem;
    color: var(--lb-text-muted);
    font-size: var(--lb-font-size-sm);
}

/* 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);
    }

/* 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] {
        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;
    }

/* 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);
}

/* RESPONSIVE -------------------------------------------------- */

@media (max-width: 768px) {
    .profile-header-card[b-f17r98hrtk] {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .avatar-box[b-f17r98hrtk] {
        justify-self: center;
    }

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

    .tabs[b-f17r98hrtk] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .badge-grid[b-f17r98hrtk] {
        grid-template-columns: repeat(auto-fill, minmax(140px, 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;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .ux-grid[b-3ozwr6gurk] {
        gap: 16px 20px;
    }
}