/* ══════════════════════════════════════════════════════════
   ResourceHub — CSS Classes & Dark Mode Support
   All templates use these classes instead of inline styles.
   Colors come from theme CSS variables → automatic dark mode.
   Addon-specific overrides use --rh-* prefix (style property bridge).
   ══════════════════════════════════════════════════════════ */

/* ── Layout ── */
.rb-rh-container {
    margin: 0 auto;
    padding: 0;
}

.rb-rh-grid {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 20px;
}

.rb-rh-grid-content {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 20px;
}

@media (max-width: 768px) {
    .rb-rh-grid {
        grid-template-columns: 1fr;
    }
    .rb-rh-grid-content {
        grid-template-columns: 1fr;
    }
    /* Header stacks; the "Add" button goes full-width under the title. */
    .rb-rh-page-header {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }
    /* Horizontal scrollers instead of cramped wrap. */
    .rb-rh-sort-bar {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap;
    }
    .rb-rh-sort-tab { white-space: nowrap; }
    .rb-rh-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    /* Breadcrumb + meta wrap instead of overflowing. */
    .rb-rh-breadcrumb,
    .rb-rh-view-meta { flex-wrap: wrap; row-gap: 6px; }
    /* Commercial price/currency pair stacks. */
    .rb-rh-commercial-grid { grid-template-columns: 1fr; }
    /* Resource card: let the stats wrap under the info on narrow screens. */
    .rb-rh-resource-card { flex-wrap: wrap; }
    .rb-rh-stats { width: 100%; justify-content: flex-start; }
    /* Moderator bar wraps. */
    .rb-rh-mod-bar { flex-wrap: wrap; }
    /* Create wizard step labels: hide text labels, dots carry the progress. */
    .rb-rh-step-labels { font-size: 11px; }
}

@media (max-width: 480px) {
    /* Tiny screens: drop the step text labels entirely (dots remain). */
    .rb-rh-step-labels { display: none; }
}

/* ── Header ── */
.rb-rh-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
}

.rb-rh-page-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--rh-text-primary, var(--foreground));
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.rb-rh-page-title i {
    color: var(--rh-accent, var(--primary));
}

.rb-rh-page-desc {
    font-size: 13px;
    color: var(--rh-text-dim, var(--muted-foreground));
    margin-top: 4px;
}

/* ── Buttons ── */
.rb-rh-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    padding: 8px 16px;
    border-radius: var(--rh-radius, 8px);
    text-decoration: none;
    background: var(--rh-accent, var(--primary));
    color: #fff;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: opacity 0.15s;
}

.rb-rh-btn-primary:hover {
    opacity: 0.9;
}

/* ── Cards ── */
.rb-rh-card {
    background: var(--rh-card-bg, var(--surface));
    border: 1px solid var(--rh-card-border, var(--border));
    border-radius: var(--rh-radius, 12px);
    overflow: hidden;
}

.rb-rh-card-padded {
    background: var(--rh-card-bg, var(--surface));
    border: 1px solid var(--rh-card-border, var(--border));
    border-radius: var(--rh-radius, 12px);
    padding: 20px;
}

.rb-rh-card-section {
    background: var(--rh-card-bg, var(--surface));
    border: 1px solid var(--rh-card-border, var(--border));
    border-radius: var(--rh-radius, 12px);
    padding: 16px;
}

/* ── Sidebar Categories ── */
.rb-rh-sidebar-header {
    padding: 12px 16px;
    border-bottom: 1px solid var(--rh-card-border, var(--border));
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--rh-text-dim, var(--muted-foreground));
}

.rb-rh-sidebar-header i {
    margin-right: 4px;
}

.rb-rh-sidebar-list {
    padding: 4px;
}

.rb-rh-category-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 13px;
    text-decoration: none;
    color: var(--rh-text-primary, var(--foreground));
    background: transparent;
    font-weight: 400;
    transition: all 0.15s;
}

.rb-rh-category-item:hover {
    background: var(--rh-hover-bg, var(--muted));
}

.rb-rh-category-item.active {
    color: var(--rh-accent, var(--primary));
    background: color-mix(in srgb, var(--rh-accent, var(--primary)) 8%, transparent);
    font-weight: 600;
}

.rb-rh-category-count {
    font-size: 11px;
    color: var(--rh-text-dim, var(--muted-foreground));
}

/* ── Sort Tabs ── */
.rb-rh-sort-bar {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 16px;
    background: var(--rh-card-bg, var(--surface));
    border: 1px solid var(--rh-card-border, var(--border));
    border-radius: 10px;
    padding: 4px;
}

.rb-rh-sort-tab {
    flex: 1;
    text-align: center;
    padding: 8px 12px;
    border-radius: 7px;
    font-size: 12px;
    font-weight: 400;
    text-decoration: none;
    /* !important: the sort tabs are <a> links, and the theme's content
       link-color rule (oklch foreground) loads after this file and would
       otherwise win, turning the active pill's text dark. */
    color: var(--rh-text-dim, var(--muted-foreground)) !important;
    background: transparent;
    transition: all 0.15s;
}

.rb-rh-sort-tab:hover {
    background: var(--rh-hover-bg, var(--muted));
}

.rb-rh-sort-tab.active {
    font-weight: 600;
    color: #fff !important;
    background: var(--rh-accent, var(--primary));
}

.rb-rh-sort-tab i {
    margin-right: 3px;
    font-size: 10px;
}

/* ── Resource Cards ── */
.rb-rh-resource-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rb-rh-resource-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: var(--rh-card-bg, var(--surface));
    border: 1px solid var(--rh-card-border, var(--border));
    border-radius: 10px;
    text-decoration: none;
    transition: all 0.15s;
    cursor: pointer;
}

.rb-rh-resource-card:hover {
    border-color: var(--rh-hover-border, var(--primary));
    box-shadow: 0 2px 8px color-mix(in srgb, var(--rh-accent, var(--primary)) 8%, transparent);
}

.rb-rh-resource-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: var(--rh-icon-bg, color-mix(in srgb, var(--primary) 10%, transparent));
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.rb-rh-resource-icon i {
    font-size: 16px;
    color: var(--rh-accent, var(--primary));
}

.rb-rh-resource-icon-lg {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    background: var(--rh-icon-bg, color-mix(in srgb, var(--primary) 10%, transparent));
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.rb-rh-resource-icon-lg i {
    font-size: 22px;
    color: var(--rh-accent, var(--primary));
}

.rb-rh-resource-info {
    flex: 1;
    min-width: 0;
}

.rb-rh-resource-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--rh-text-primary, var(--foreground));
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rb-rh-resource-tagline {
    font-size: 12px;
    color: var(--rh-text-dim, var(--muted-foreground));
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rb-rh-resource-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 4px;
    font-size: 11px;
    color: var(--rh-text-dim, var(--muted-foreground));
}

.rb-rh-resource-meta i {
    margin-right: 2px;
}

.rb-rh-resource-author, .rb-rh-view-author {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.rb-rh-resource-author .rb-avatar, .rb-rh-view-author .rb-avatar { color: #fff; }

/* ── Stats ── */
.rb-rh-stats {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
}

.rb-rh-stat {
    text-align: center;
}

.rb-rh-stat-value {
    font-size: 14px;
    font-weight: 700;
    color: var(--rh-text-primary, var(--foreground));
}

.rb-rh-stat-label {
    font-size: 10px;
    color: var(--rh-text-dim, var(--muted-foreground));
}

.rb-rh-stat-rating {
    font-size: 14px;
    font-weight: 700;
    color: var(--color-warning, var(--warning, #f59e0b));
    display: flex;
    align-items: center;
    gap: 2px;
    justify-content: center;
}

.rb-rh-stat-rating i {
    font-size: 10px;
}

/* ── Pagination ── */
.rb-rh-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin-top: 20px;
}

.rb-rh-page-link {
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 12px;
    text-decoration: none;
    font-weight: 400;
    color: var(--rh-text-dim, var(--muted-foreground));
    background: var(--rh-card-bg, var(--surface));
    border: 1px solid var(--rh-card-border, var(--border));
    transition: all 0.15s;
}

.rb-rh-page-link:hover {
    border-color: var(--rh-accent, var(--primary));
}

.rb-rh-page-link.active {
    font-weight: 600;
    color: #fff;
    background: var(--rh-accent, var(--primary));
    border-color: var(--rh-accent, var(--primary));
}

/* ── Empty State ── */
.rb-rh-empty {
    text-align: center;
    padding: 60px 20px;
    background: var(--rh-card-bg, var(--surface));
    border: 1px solid var(--rh-card-border, var(--border));
    border-radius: var(--rh-radius, 12px);
}

.rb-rh-empty-icon {
    font-size: 36px;
    color: var(--rh-text-dim, var(--muted-foreground));
    opacity: 0.3;
    display: block;
    margin-bottom: 12px;
}

.rb-rh-empty-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--rh-text-primary, var(--foreground));
}

.rb-rh-empty-hint {
    font-size: 12px;
    color: var(--rh-text-dim, var(--muted-foreground));
    margin-top: 4px;
}

/* ── Breadcrumb ── */
.rb-rh-breadcrumb {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--rh-text-dim, var(--muted-foreground));
    margin-bottom: 16px;
}

.rb-rh-breadcrumb a {
    color: var(--rh-accent, var(--primary));
    text-decoration: none;
}

.rb-rh-breadcrumb a:hover {
    opacity: 0.8;
}

.rb-rh-breadcrumb .separator {
    font-size: 8px;
}

.rb-rh-breadcrumb .current {
    color: var(--rh-text-primary, var(--foreground));
}

/* ── View Page Header ── */
.rb-rh-view-header {
    display: flex;
    align-items: start;
    gap: 16px;
}

.rb-rh-view-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--rh-text-primary, var(--foreground));
    margin: 0;
}

.rb-rh-view-tagline {
    font-size: 13px;
    color: var(--rh-text-dim, var(--muted-foreground));
    margin: 4px 0 0;
}

.rb-rh-view-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 8px;
    font-size: 12px;
    color: var(--rh-text-dim, var(--muted-foreground));
}

.rb-rh-view-meta span {
    display: flex;
    align-items: center;
    gap: 4px;
}

.rb-rh-view-meta img {
    width: 20px;
    height: 20px;
    border-radius: var(--rb-avatar-border-radius, 50%);
}

/* ── Tabs ── */
.rb-rh-tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--rh-card-border, var(--border));
    margin-bottom: 20px;
}

.rb-rh-tab {
    padding: 10px 18px;
    font-size: 13px;
    font-weight: 500;
    color: var(--rh-text-dim, var(--muted-foreground));
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    cursor: pointer;
    transition: all 0.15s;
}

.rb-rh-tab.active,
.rb-rh-tab:hover {
    color: var(--rh-accent, var(--primary));
    border-bottom-color: var(--rh-accent, var(--primary));
}

.rb-rh-tab-content {
    display: none;
}

.rb-rh-tab-content.active {
    display: block;
}

/* ── Content Body ── */
.rb-rh-content-body {
    font-size: 14px;
    line-height: 1.7;
    color: var(--rh-text-primary, var(--foreground));
}

.rb-rh-content-empty {
    font-size: 13px;
    color: var(--rh-text-dim, var(--muted-foreground));
    font-style: italic;
}

/* ── Version List ── */
.rb-rh-version-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rb-rh-version-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: var(--rh-card-bg, var(--surface));
    border: 1px solid var(--rh-card-border, var(--border));
    border-radius: 10px;
}

.rb-rh-version-item.current {
    border-color: var(--rh-accent, var(--primary));
}

.rb-rh-version-badge {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--rh-card-border, var(--border));
    display: flex;
    align-items: center;
    justify-content: center;
}

.rb-rh-version-badge i {
    font-size: 12px;
    color: var(--rh-text-dim, var(--muted-foreground));
}

.rb-rh-version-item.current .rb-rh-version-badge {
    background: var(--rh-accent, var(--primary));
}

.rb-rh-version-item.current .rb-rh-version-badge i {
    color: #fff;
}

.rb-rh-version-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--rh-text-primary, var(--foreground));
}

.rb-rh-version-tag {
    font-size: 10px;
    background: var(--rh-accent, var(--primary));
    color: #fff;
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: 6px;
    font-weight: 600;
}

.rb-rh-version-meta {
    font-size: 11px;
    color: var(--rh-text-dim, var(--muted-foreground));
    margin-top: 2px;
}

/* ── Stars ── */
.rb-rh-stars {
    display: inline-flex;
    gap: 2px;
}

.rb-rh-stars i {
    color: var(--rh-card-border, var(--border));
    font-size: 14px;
}

.rb-rh-stars i.filled {
    color: var(--color-warning, var(--warning, #f59e0b));
}

/* Header/sidebar rating star (also defined inline in resource_view; kept here
   so the class stays themed even on styles without the inline <style> block). */
.rb-rh-star-warn {
    color: var(--color-warning, var(--warning, #f59e0b));
}

.rb-rh-star-input {
    display: inline-flex;
    gap: 2px;
    cursor: pointer;
}

.rb-rh-star-input i {
    color: var(--rh-card-border, var(--border));
    font-size: 20px;
    cursor: pointer;
    transition: color 0.1s;
}

.rb-rh-star-input i:hover,
.rb-rh-star-input i.selected {
    color: var(--color-warning, var(--warning, #f59e0b));
}

/* ── Rating Stats ── */
.rb-rh-rating-overview {
    display: flex;
    align-items: center;
    gap: 20px;
}

.rb-rh-rating-big {
    font-size: 36px;
    font-weight: 800;
    color: var(--rh-text-primary, var(--foreground));
}

.rb-rh-rating-bar-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}

.rb-rh-rating-label {
    font-size: 11px;
    width: 14px;
    text-align: right;
    color: var(--rh-text-dim, var(--muted-foreground));
}

.rb-rh-rating-bar-bg {
    flex: 1;
    height: 6px;
    background: var(--rh-card-border, var(--border));
    border-radius: 3px;
    overflow: hidden;
}

.rb-rh-rating-bar-fill {
    height: 6px;
    border-radius: 3px;
    background: var(--color-warning, var(--warning, #f59e0b));
    transition: width 0.3s;
}

.rb-rh-rating-count {
    font-size: 10px;
    width: 20px;
    color: var(--rh-text-dim, var(--muted-foreground));
}

/* ── Review Cards ── */
.rb-rh-review-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rb-rh-review-card {
    padding: 14px 16px;
    background: var(--rh-card-bg, var(--surface));
    border: 1px solid var(--rh-card-border, var(--border));
    border-radius: 10px;
}

.rb-rh-review-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.rb-rh-review-avatar {
    width: 28px;
    height: 28px;
    border-radius: var(--rb-avatar-border-radius, 50%);
}

.rb-rh-review-author {
    font-size: 13px;
    font-weight: 600;
    color: var(--rh-text-primary, var(--foreground));
}

.rb-rh-review-date {
    font-size: 10px;
    color: var(--rh-text-dim, var(--muted-foreground));
}

.rb-rh-review-body {
    font-size: 13px;
    color: var(--rh-text-primary, var(--foreground));
    line-height: 1.6;
    margin: 0;
}

/* ── Sidebar Detail Rows ── */
.rb-rh-sidebar-card {
    background: var(--rh-card-bg, var(--surface));
    border: 1px solid var(--rh-card-border, var(--border));
    border-radius: var(--rh-radius, 12px);
    overflow: hidden;
    margin-bottom: 16px;
}

.rb-rh-download-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px;
    background: var(--rh-accent, var(--primary));
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: opacity 0.15s;
}

.rb-rh-download-btn:hover {
    opacity: 0.9;
}

.rb-rh-detail-rows {
    padding: 14px;
}

.rb-rh-detail-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    border-bottom: 1px solid var(--rh-card-border, var(--border));
}

.rb-rh-detail-row:last-child {
    border-bottom: none;
}

.rb-rh-detail-label {
    font-size: 12px;
    color: var(--rh-text-dim, var(--muted-foreground));
}

.rb-rh-detail-value {
    font-size: 12px;
    font-weight: 600;
    color: var(--rh-text-primary, var(--foreground));
}

.rb-rh-detail-link {
    font-size: 12px;
    font-weight: 600;
    color: var(--rh-accent, var(--primary));
    text-decoration: none;
}

.rb-rh-detail-link:hover {
    opacity: 0.8;
}

/* ── Author Card ── */
.rb-rh-author-card {
    background: var(--rh-card-bg, var(--surface));
    border: 1px solid var(--rh-card-border, var(--border));
    border-radius: var(--rh-radius, 12px);
    padding: 14px;
}

.rb-rh-author-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--rh-text-dim, var(--muted-foreground));
    margin-bottom: 10px;
}

.rb-rh-author-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.rb-rh-author-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--rh-text-primary, var(--foreground));
}

/* ── Review Form ── */
.rb-rh-form-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--rh-text-dim, var(--muted-foreground));
    display: block;
    margin-bottom: 4px;
}

.rb-rh-textarea {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--rh-card-border, var(--border));
    border-radius: 8px;
    font-size: 13px;
    resize: vertical;
    background: var(--rh-card-bg, var(--surface));
    color: var(--rh-text-primary, var(--foreground));
    box-sizing: border-box;
}

.rb-rh-textarea:focus {
    outline: none;
    border-color: var(--rh-accent, var(--primary));
}

/* ── Login Prompt ── */
.rb-rh-login-prompt {
    text-align: center;
    padding: 16px;
    background: color-mix(in srgb, var(--rh-accent, var(--primary)) 4%, transparent);
    border: 1px solid var(--rh-card-border, var(--border));
    border-radius: 10px;
    margin-bottom: 16px;
}

.rb-rh-login-prompt p {
    font-size: 13px;
    color: var(--rh-text-dim, var(--muted-foreground));
}

/* ══════════════════════════════════════════════
   Create Form — Dark Mode CSS Classes
   ══════════════════════════════════════════════ */

.rb-rh-create-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 24px;
}

.rb-rh-breadcrumb-link {
    color: var(--rh-accent, var(--primary));
    text-decoration: none;
}
.rb-rh-breadcrumb-current {
    color: var(--rh-text-primary, var(--foreground));
}

/* Header */
.rb-rh-create-header {
    text-align: center;
    margin-bottom: 32px;
    padding: 16px 0;
}
.rb-rh-create-header-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: color-mix(in srgb, var(--rh-accent, var(--primary)) 10%, transparent);
    margin-bottom: 14px;
}
.rb-rh-create-header-icon i {
    font-size: 24px;
    color: var(--rh-accent, var(--primary));
}
.rb-rh-create-header-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--rh-text-primary, var(--foreground));
    margin: 0 0 6px;
}
.rb-rh-create-header-desc {
    font-size: 13px;
    color: var(--rh-text-dim, var(--muted-foreground));
    margin: 0;
}

/* Step Indicator */
.rb-rh-step-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 28px;
}
.rb-rh-step-group {
    display: flex;
    align-items: center;
    gap: 8px;
}
.rb-rh-step-dot {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all .2s;
    background: var(--rh-card-bg, var(--surface));
    color: var(--rh-text-dim, var(--muted-foreground));
    border: 2px solid var(--rh-card-border, var(--border));
}
.rb-rh-step-dot--active {
    background: var(--rh-accent, var(--primary));
    color: #fff;
    border-color: var(--rh-accent, var(--primary));
    box-shadow: 0 2px 8px color-mix(in srgb, var(--rh-accent, var(--primary)) 30%, transparent);
}
.rb-rh-step-line {
    width: 40px;
    height: 2px;
    border-radius: 1px;
    transition: background .2s;
    background: var(--rh-card-border, var(--border));
}
.rb-rh-step-line--active {
    background: var(--rh-accent, var(--primary));
}

/* Step Labels */
.rb-rh-step-labels {
    display: flex;
    justify-content: center;
    gap: 32px;
    margin-bottom: 24px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.rb-rh-step-label {
    color: var(--rh-text-dim, var(--muted-foreground));
}
.rb-rh-step-label--active {
    color: var(--rh-accent, var(--primary));
}

/* Form Card */
.rb-rh-form-card {
    background: var(--rh-card-bg, var(--surface));
    border: 1px solid var(--rh-card-border, var(--border));
    border-radius: 14px;
    padding: 28px;
    box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,.04));
}

/* Form Group */
.rb-rh-form-group {
    margin-bottom: 20px;
}

/* Override existing rh-form-label for create form context */
.rb-rh-create-container .rb-rh-form-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--rh-text-primary, var(--foreground));
    margin-bottom: 6px;
}
.rb-rh-form-label-icon {
    font-size: 11px;
    color: var(--rh-accent, var(--primary));
}
.rb-rh-required {
    color: var(--danger, var(--destructive, #ef4444));
}

/* Form Inputs */
.rb-rh-form-input {
    width: 100%;
    padding: 11px 14px;
    border: 1px solid var(--rh-card-border, var(--border));
    border-radius: 10px;
    font-size: 14px;
    background: var(--rh-card-bg, var(--surface));
    color: var(--rh-text-primary, var(--foreground));
    box-sizing: border-box;
    transition: border-color .15s, box-shadow .15s;
    font-family: inherit;
}
.rb-rh-form-input:focus {
    outline: none;
    border-color: var(--rh-accent, var(--primary));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--rh-accent, var(--primary)) 10%, transparent);
}
.rb-rh-form-input--error {
    border-color: var(--danger, var(--destructive, #ef4444));
}
.rb-rh-form-input--mono {
    font-family: var(--font-mono, 'JetBrains Mono', 'Fira Code', monospace);
}
.rb-rh-form-select {
    cursor: pointer;
}
.rb-rh-form-textarea {
    resize: vertical;
}

/* Form Hints & Errors */
.rb-rh-form-hint {
    font-size: 12px;
    color: var(--rh-text-dim, var(--muted-foreground));
    margin: 0 0 10px;
}
.rb-rh-form-sub-hint {
    font-size: 11px;
    color: var(--rh-text-dim, var(--muted-foreground));
    margin: 4px 0 0;
}
.rb-rh-form-error {
    font-size: 11px;
    color: var(--danger, var(--destructive, #ef4444));
    margin: 4px 0 0;
    display: flex;
    align-items: center;
    gap: 4px;
}
.rb-rh-form-error i {
    font-size: 10px;
}

/* Section Title */
.rb-rh-form-section-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--rh-text-primary, var(--foreground));
    margin: 0 0 16px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.rb-rh-form-section-title i {
    font-size: 13px;
    color: var(--rh-accent, var(--primary));
}

/* Type Card Grid */
.rb-rh-type-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}
.rb-rh-type-card {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 18px 20px;
    border: 2px solid var(--rh-card-border, var(--border));
    border-radius: 14px;
    cursor: pointer;
    transition: all .25s ease;
    overflow: hidden;
    background: var(--rh-card-bg, var(--surface));
}
.rb-rh-type-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md, 0 4px 12px rgba(0,0,0,.06));
}
.rb-rh-type-card--active {
    box-shadow: var(--shadow-md, 0 4px 16px rgba(0,0,0,.08));
}
.rb-rh-type-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all .25s;
    background: var(--rh-card-border, var(--border));
    color: var(--rh-text-dim, var(--muted-foreground));
}
.rb-rh-type-icon i {
    font-size: 18px;
}
.rb-rh-type-text {
    flex: 1;
    min-width: 0;
}
.rb-rh-type-label {
    font-size: 14px;
    font-weight: 700;
    color: var(--rh-text-primary, var(--foreground));
    margin-bottom: 3px;
    transition: color .2s;
}
.rb-rh-type-desc {
    font-size: 12px;
    color: var(--rh-text-dim, var(--muted-foreground));
    line-height: 1.4;
}
.rb-rh-type-check {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 10px;
}

@media (max-width: 640px) {
    .rb-rh-type-grid {
        grid-template-columns: 1fr;
    }
}

/* Dropzone */
.rb-rh-dropzone {
    border: 2px dashed var(--rh-card-border, var(--border));
    border-radius: 12px;
    padding: 32px 20px;
    text-align: center;
    cursor: pointer;
    transition: all .2s;
}
.rb-rh-dropzone--active {
    border-color: var(--rh-accent, var(--primary));
    background: color-mix(in srgb, var(--rh-accent, var(--primary)) 4%, transparent);
}
.rb-rh-dropzone-icon {
    font-size: 28px;
    color: var(--rh-accent, var(--primary));
    margin-bottom: 10px;
    display: block;
}
.rb-rh-dropzone-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--rh-text-primary, var(--foreground));
    margin: 0 0 4px;
}
.rb-rh-dropzone-hint {
    font-size: 11px;
    color: var(--rh-text-dim, var(--muted-foreground));
    margin: 0;
}
.rb-rh-dropzone-file {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.rb-rh-dropzone-file-icon {
    font-size: 24px;
    color: var(--rh-accent, var(--primary));
}
.rb-rh-dropzone-file-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--rh-text-primary, var(--foreground));
    margin: 0;
}
.rb-rh-dropzone-file-size {
    font-size: 11px;
    color: var(--rh-text-dim, var(--muted-foreground));
    margin: 2px 0 0;
}

/* Commercial Grid */
.rb-rh-commercial-grid {
    display: grid;
    grid-template-columns: 1fr 120px;
    gap: 12px;
    margin-bottom: 16px;
}

/* Icon Upload */
.rb-rh-icon-upload {
    display: flex;
    align-items: center;
    gap: 16px;
}
.rb-rh-icon-preview {
    width: 80px;
    height: 80px;
    border-radius: 14px;
    border: 2px dashed var(--rh-card-border, var(--border));
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    cursor: pointer;
    transition: all .2s;
    background: color-mix(in srgb, var(--rh-card-bg, var(--surface)) 80%, transparent);
}
.rb-rh-icon-preview--active {
    border-color: var(--rh-accent, var(--primary));
    background: color-mix(in srgb, var(--rh-accent, var(--primary)) 4%, transparent);
}
.rb-rh-icon-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.rb-rh-icon-placeholder {
    font-size: 20px;
    color: var(--rh-text-dim, var(--muted-foreground));
}

/* Buttons */
.rb-rh-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 10px;
    cursor: pointer;
    transition: all .15s;
    border: none;
}
.rb-rh-btn i {
    font-size: 11px;
}
.rb-rh-btn--primary {
    padding: 10px 24px;
    background: var(--rh-accent, var(--primary));
    color: #fff;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--rh-accent, var(--primary)) 25%, transparent);
}
.rb-rh-btn--primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--rh-accent, var(--primary)) 35%, transparent);
}
.rb-rh-btn--secondary {
    padding: 10px 24px;
    background: var(--rh-card-bg, var(--surface));
    color: var(--rh-text-primary, var(--foreground));
    border: 1px solid var(--rh-card-border, var(--border));
}
.rb-rh-btn--secondary:hover {
    background: var(--rh-hover-bg, var(--muted));
}
.rb-rh-btn--submit {
    padding: 12px 32px;
    font-size: 14px;
    font-weight: 700;
    background: linear-gradient(135deg, var(--rh-accent, var(--primary)), color-mix(in srgb, var(--rh-accent, var(--primary)) 85%, #000));
    color: #fff;
    box-shadow: 0 4px 14px color-mix(in srgb, var(--rh-accent, var(--primary)) 35%, transparent);
}
.rb-rh-btn--submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px color-mix(in srgb, var(--rh-accent, var(--primary)) 45%, transparent);
}

/* Step Navigation */
.rb-rh-step-nav {
    display: flex;
    margin-top: 16px;
}
.rb-rh-step-nav--end {
    justify-content: flex-end;
}
.rb-rh-step-nav--between {
    justify-content: space-between;
    align-items: center;
}

/* ── Moderator / owner action bar (W3) ── */
.rb-rh-mod-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
}
.rb-rh-mod-bar-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--rh-text-dim, var(--muted-foreground));
    margin-right: 4px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.rb-rh-mod-form {
    display: inline;
    margin: 0;
}

/* ── Anonymous-review checkbox (W2) ── */
.rb-rh-anon-check {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--rh-text-dim, var(--muted-foreground));
    margin-bottom: 12px;
    cursor: pointer;
}

/* ── EULA / download confirmation (W7f) ── */
.rb-rh-eula-card {
    max-width: 720px;
    margin: 0 auto;
    padding: 24px;
}
.rb-rh-eula-text {
    max-height: 360px;
    overflow-y: auto;
    padding: 16px;
    margin: 16px 0;
    border: 1px solid var(--rh-card-border, var(--border));
    border-radius: var(--rh-radius, 10px);
    background: var(--rh-hover-bg, var(--muted));
    font-size: 13px;
    line-height: 1.7;
}
.rb-rh-eula-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin: 0;
}

/* ── Warnings (FS7) ── */
.rb-rh-warn-pop {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 30;
    width: 300px;
    padding: 14px;
    background: var(--rh-card-bg, var(--surface));
    border: 1px solid var(--rh-card-border, var(--border));
    border-radius: 10px;
    box-shadow: var(--shadow-lg, 0 8px 24px rgba(0,0,0,.2));
}
.rb-rh-mod-bar { position: relative; }
.rb-rh-warn-form { display: flex; flex-direction: column; gap: 8px; }
.rb-rh-warn-form .form-control { width: 100%; }

/* ── Update attachments (FS6) ── */
.rb-rh-update-form .form-control { width: 100%; }
.rb-rh-mb { margin-bottom: 16px; }
.rb-rh-mb-sm { margin-bottom: 10px; }
.rb-rh-attach-field {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--rh-text-dim, var(--muted-foreground));
    margin-bottom: 10px;
}
.rb-rh-attach-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px dashed var(--rh-card-border, var(--border));
}
.rb-rh-attach-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border: 1px solid var(--rh-card-border, var(--border));
    border-radius: 8px;
    text-decoration: none;
    font-size: 13px;
    color: var(--rh-text-primary, var(--foreground));
    transition: all .15s;
}
.rb-rh-attach-item:hover { border-color: var(--rh-accent, var(--primary)); color: var(--rh-accent, var(--primary)); }
.rb-rh-attach-item i { color: var(--rh-accent, var(--primary)); }
.rb-rh-attach-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rb-rh-attach-size { font-size: 11px; color: var(--rh-text-dim, var(--muted-foreground)); }

/* ── Inline bulk moderation (FS2/inline_mod) ── */
.rb-rh-bulkbar {
    position: sticky;
    top: 8px;
    z-index: 15;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 10px 14px;
    margin-bottom: 12px;
    background: var(--rh-card-bg, var(--surface));
    border: 1px solid var(--rh-accent, var(--primary));
    border-radius: 10px;
    box-shadow: 0 4px 14px color-mix(in srgb, var(--rh-accent, var(--primary)) 14%, transparent);
}
.rb-rh-bulkbar-count { font-size: 13px; font-weight: 700; color: var(--rh-text-primary, var(--foreground)); margin-right: 4px; }
.rb-rh-bulk-move { width: auto; padding: 4px 8px; font-size: 12px; }
/* Inline-mod selection: the checkbox sits INSIDE the card's left edge (not as a
   floating sibling) so the row reads as one integrated unit. */
.rb-rh-mod-row { position: relative; }
.rb-rh-mod-row .rb-rh-resource-card { padding-left: 46px; }
.rb-rh-modcheck {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 18px;
    height: 18px;
    margin: 0;
    cursor: pointer;
    accent-color: var(--rh-accent, var(--primary));
}
/* Highlight the whole card while its checkbox is ticked. */
.rb-rh-mod-row:has(.rb-rh-modcheck:checked) .rb-rh-resource-card {
    border-color: var(--rh-accent, var(--primary));
    background: color-mix(in srgb, var(--rh-accent, var(--primary)) 6%, var(--rh-card-bg, var(--surface)));
}

/* ── Teams (FS4) ── */
.rb-rh-team-manage-link {
    font-size: 11px;
    font-weight: 600;
    color: var(--rh-accent, var(--primary));
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.rb-rh-team-manage-link:hover { text-decoration: underline; }
.rb-rh-team-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 4px;
    font-size: 13px;
    color: var(--rh-text-primary, var(--foreground));
}
.rb-rh-team-chip .rb-avatar { color: #fff; }
.rb-rh-team-add {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.rb-rh-team-add .form-control { flex: 1; min-width: 200px; }
.rb-rh-team-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.rb-rh-team-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
    border: 1px solid var(--rh-card-border, var(--border));
    border-radius: 8px;
}
.rb-rh-team-user { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.rb-rh-team-user .rb-avatar { color: #fff; }
.rb-rh-team-since { font-size: 11px; color: var(--rh-text-dim, var(--muted-foreground)); }

/* ── Reactions (FS3) ── */
.rb-rh-react {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--rh-card-border, var(--border));
    flex-wrap: wrap;
}
.rb-rh-react-trigger { position: relative; }
.rb-rh-react-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: 1px solid var(--rh-card-border, var(--border));
    border-radius: 8px;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 600;
    color: var(--rh-text-dim, var(--muted-foreground));
    cursor: pointer;
    transition: all .15s;
}
.rb-rh-react-btn:hover { color: var(--rh-accent, var(--primary)); border-color: var(--rh-accent, var(--primary)); }
.rb-rh-react-btn.is-on {
    color: #fff;
    background: var(--rh-accent, var(--primary));
    border-color: var(--rh-accent, var(--primary));
}
.rb-rh-react-pop {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 0;
    display: flex;
    gap: 4px;
    padding: 6px 8px;
    background: var(--rh-card-bg, var(--surface));
    border: 1px solid var(--rh-card-border, var(--border));
    border-radius: 999px;
    box-shadow: var(--shadow-lg, 0 6px 20px rgba(0,0,0,.18));
    z-index: 20;
}
.rb-rh-react-opt {
    background: transparent;
    border: 0;
    padding: 2px;
    cursor: pointer;
    line-height: 0;
    border-radius: 50%;
    transition: transform .12s;
}
.rb-rh-react-opt:hover { transform: scale(1.35) translateY(-2px); }
.rb-rh-react-opt img { width: 30px; height: 30px; display: block; }
.rb-rh-react-count {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    font-weight: 600;
    color: var(--rh-text-primary, var(--foreground));
}
.rb-rh-react-count i { color: var(--rh-accent, var(--primary)); }
.rb-rh-react-who { font-size: 12px; color: var(--rh-text-dim, var(--muted-foreground)); }
[x-cloak] { display: none !important; }

/* ── Reactions (FS3) ── */
.rb-rh-react {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--rh-card-border, var(--border));
    flex-wrap: wrap;
}
.rb-rh-react-trigger { position: relative; }
.rb-rh-react-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: 1px solid var(--rh-card-border, var(--border));
    border-radius: 8px;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 600;
    color: var(--rh-text-dim, var(--muted-foreground));
    cursor: pointer;
    transition: all .15s;
}
.rb-rh-react-btn:hover { color: var(--rh-accent, var(--primary)); border-color: var(--rh-accent, var(--primary)); }
.rb-rh-react-btn.is-on {
    color: #fff;
    background: var(--rh-accent, var(--primary));
    border-color: var(--rh-accent, var(--primary));
}
.rb-rh-react-pop {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 0;
    display: flex;
    gap: 4px;
    padding: 6px 8px;
    background: var(--rh-card-bg, var(--surface));
    border: 1px solid var(--rh-card-border, var(--border));
    border-radius: 999px;
    box-shadow: var(--shadow-lg, 0 6px 20px rgba(0,0,0,.18));
    z-index: 20;
}
.rb-rh-react-opt {
    background: transparent;
    border: 0;
    padding: 2px;
    cursor: pointer;
    line-height: 0;
    border-radius: 50%;
    transition: transform .12s;
}
.rb-rh-react-opt:hover { transform: scale(1.35) translateY(-2px); }
.rb-rh-react-opt img { width: 30px; height: 30px; display: block; }
.rb-rh-react-count {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    font-weight: 600;
    color: var(--rh-text-primary, var(--foreground));
}
.rb-rh-react-count i { color: var(--rh-accent, var(--primary)); }
.rb-rh-react-who { font-size: 12px; color: var(--rh-text-dim, var(--muted-foreground)); }
[x-cloak] { display: none !important; }

/* ── Review voting (W9) ── */
.rb-rh-review-votes {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    font-size: 12px;
}
.rb-rh-review-helpful {
    color: var(--rh-text-dim, var(--muted-foreground));
    margin-right: 2px;
}
.rb-rh-vote-form { display: inline; margin: 0; }
.rb-rh-vote-btn {
    background: transparent;
    border: 1px solid var(--rh-card-border, var(--border));
    border-radius: 6px;
    padding: 3px 8px;
    cursor: pointer;
    color: var(--rh-text-dim, var(--muted-foreground));
    transition: all .15s;
}
.rb-rh-vote-btn:hover { color: var(--rh-accent, var(--primary)); border-color: var(--rh-accent, var(--primary)); }
.rb-rh-vote-btn.is-on {
    color: #fff;
    background: var(--rh-accent, var(--primary));
    border-color: var(--rh-accent, var(--primary));
}
.rb-rh-vote-score {
    font-weight: 700;
    color: var(--rh-text-primary, var(--foreground));
    min-width: 16px;
    text-align: center;
}

/* ── Custom fields (W7d) ── */
/* show_on_list chips on listing rows (data from the resource's custom_fields
   cache — no per-row query). */
.rb-rh-field-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}
.rb-rh-field-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    line-height: 1.4;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--rh-hover-bg, var(--muted));
    border: 1px solid var(--rh-card-border, var(--border));
    max-width: 100%;
}
.rb-rh-field-chip-key {
    color: var(--rh-text-dim, var(--muted-foreground));
    font-weight: 600;
}
.rb-rh-field-chip-val {
    color: var(--rh-text-primary, var(--foreground));
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 160px;
}
.rb-rh-radio-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.rb-rh-color-swatch {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 4px;
    border: 1px solid var(--rh-card-border, var(--border));
    vertical-align: middle;
    margin-right: 4px;
}

/* ── My-hub sidebar card (W7b) ── */
.rb-rh-hub-card { margin-bottom: 12px; }
.rb-rh-action-row {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}
.rb-rh-action-form { flex: 1; margin: 0; }
.rb-rh-action-btn { width: 100%; justify-content: center; }
.rb-rh-action-btn.is-on {
    color: var(--rh-accent, var(--primary));
    border-color: var(--rh-accent, var(--primary));
}

/* ── Updates tab list (W6 — were undefined) ── */
.rb-rh-update-list-wrap { display: block; }
.rb-rh-update-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.rb-rh-update-header {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
.rb-rh-update-title {
    font-weight: 600;
    color: var(--rh-text-primary, var(--foreground));
}
.rb-rh-update-meta {
    font-size: 12px;
    color: var(--rh-text-dim, var(--muted-foreground));
}
.rb-rh-update-body {
    color: var(--rh-text-primary, var(--foreground));
    font-size: 14px;
    line-height: 1.6;
}

/* ── Version list wrap + changelog (W6 — were undefined) ── */
.rb-rh-version-list-wrap { display: block; }
.rb-rh-version-changelog {
    font-size: 13px;
    line-height: 1.6;
    color: var(--rh-text-dim, var(--muted-foreground));
    padding-left: 12px;
    border-left: 2px solid var(--rh-card-border, var(--border));
}

/* ── Sidebar widgets (W4) ── */
.rb-rh-w-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.rb-rh-w-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.rb-rh-w-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--rh-text-primary, var(--foreground));
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.rb-rh-w-title:hover { color: var(--rh-accent, var(--primary)); }
.rb-rh-w-meta {
    font-size: 11px;
    color: var(--rh-text-dim, var(--muted-foreground));
    display: flex;
    align-items: center;
    gap: 4px;
}
.rb-rh-w-stars { font-size: 10px; letter-spacing: 1px; }
.rb-rh-w-star { color: var(--color-warning, var(--warning, #f59e0b)); }
.rb-rh-w-star-dim { color: var(--rh-card-border, var(--border)); }
.rb-rh-w-empty {
    font-size: 13px;
    color: var(--rh-text-dim, var(--muted-foreground));
    margin: 0;
}
.rb-rh-w-stats {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
    gap: 10px;
}
.rb-rh-w-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    text-align: center;
}
.rb-rh-w-stat-icon { font-size: 16px; color: var(--rh-accent, var(--primary)); margin-bottom: 2px; }
.rb-rh-w-stat-val { font-size: 16px; font-weight: 700; color: var(--rh-text-primary, var(--foreground)); }
.rb-rh-w-stat-label { font-size: 10px; color: var(--rh-text-dim, var(--muted-foreground)); text-transform: uppercase; letter-spacing: .4px; }