@bsb/registry 1.0.1

package/lib/plugins/service-bsb-registry-ui/static/css/style.css

@@ -0,0 +1,1849 @@
+/* Reset and Base Styles */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+:root {
+    /* Core colors - matching BSB docs site */
+    --bg-color: #1a1a1a;
+    --bg-secondary: #242424;
+    --text-color: #ffffff;
+    --text-secondary: #a0a0a0;
+
+    /* Brand colors */
+    --primary-color: #FB8C00;
+    --service-color: #a200ff;
+    --config-color: #03A9F4;
+    --logging-color: #43A047;
+
+    /* UI colors */
+    --border-color: #3a3a3a;
+    --code-bg: #0d0d0d;
+    --card-bg: #2a2a2a;
+    --hover-bg: #333333;
+    --success-color: #43A047;
+    --warning-color: #FB8C00;
+    --error-color: #f44336;
+
+    /* Shadows */
+    --shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.3);
+}
+
+body {
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
+    background: var(--bg-color);
+    color: var(--text-color);
+    line-height: 1.6;
+}
+
+.container {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 0 20px;
+}
+
+/* Header */
+.header {
+    background: var(--bg-secondary);
+    border-bottom: 1px solid var(--border-color);
+    padding: 1rem 0;
+    position: sticky;
+    top: 0;
+    z-index: 100;
+}
+
+.header-content {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.logo a {
+    font-size: 1.5rem;
+    font-weight: 800;
+    color: var(--primary-color);
+    text-decoration: none;
+    letter-spacing: -0.5px;
+}
+
+.nav {
+    display: flex;
+    gap: 0.5rem;
+}
+
+.nav-link {
+    color: var(--text-secondary);
+    text-decoration: none;
+    font-weight: 500;
+    padding: 0.5rem 1rem;
+    border-radius: 6px;
+    transition: all 0.15s ease;
+}
+
+.nav-link:hover {
+    color: var(--text-color);
+    background: var(--hover-bg);
+}
+
+.nav-link.active {
+    color: var(--primary-color);
+}
+
+/* Hero Section */
+.hero {
+    background: linear-gradient(135deg, var(--primary-color), #e65100);
+    color: white;
+    padding: 4rem 2rem;
+    text-align: center;
+}
+
+.hero-title {
+    font-size: 3rem;
+    font-weight: 800;
+    margin-bottom: 1rem;
+    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+}
+
+.hero-subtitle {
+    font-size: 1.25rem;
+    opacity: 0.9;
+    margin-bottom: 2rem;
+    max-width: 600px;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+.search-box {
+    max-width: 600px;
+    margin: 0 auto 1.5rem;
+    display: flex;
+    gap: 0.5rem;
+}
+
+.search-input {
+    flex: 1;
+    padding: 0.875rem 1.25rem;
+    font-size: 1rem;
+    border: 1px solid var(--border-color);
+    border-radius: 8px;
+    background: var(--bg-secondary);
+    color: var(--text-color);
+    box-shadow: var(--shadow-lg);
+}
+
+.search-input:focus {
+    outline: none;
+    border-color: var(--primary-color);
+}
+
+.search-btn {
+    padding: 0.875rem 2rem;
+    font-size: 1rem;
+    font-weight: 600;
+    background: white;
+    color: var(--primary-color);
+    border: none;
+    border-radius: 8px;
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+
+.search-btn:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(255, 255, 255, 0.3);
+}
+
+.quick-filters {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 0.75rem;
+    flex-wrap: wrap;
+}
+
+.filter-label {
+    font-weight: 500;
+    opacity: 0.8;
+}
+
+.filter-tag {
+    padding: 0.5rem 1rem;
+    background: rgba(255, 255, 255, 0.15);
+    border: 1px solid rgba(255, 255, 255, 0.3);
+    color: white;
+    border-radius: 20px;
+    font-size: 0.875rem;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+
+.filter-tag:hover,
+.filter-tag.active {
+    background: rgba(255, 255, 255, 0.3);
+    border-color: rgba(255, 255, 255, 0.5);
+}
+
+/* Stats */
+.stats {
+    padding: 3rem 2rem;
+    background: var(--bg-color);
+}
+
+.stats-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+    gap: 1.5rem;
+    max-width: 1200px;
+    margin: 0 auto;
+}
+
+.stat-card {
+    background: var(--card-bg);
+    padding: 2rem;
+    border-radius: 12px;
+    text-align: center;
+    border: 1px solid var(--border-color);
+    transition: all 0.2s ease;
+}
+
+.stat-card:hover {
+    transform: translateY(-2px);
+    box-shadow: var(--shadow-lg);
+}
+
+.stat-value {
+    font-size: 2.5rem;
+    font-weight: 700;
+    color: var(--primary-color);
+    margin-bottom: 0.5rem;
+}
+
+.stat-label {
+    font-size: 1rem;
+    color: var(--text-secondary);
+}
+
+/* Plugins Section */
+.plugins {
+    padding: 3rem 2rem 5rem;
+    background: var(--bg-color);
+}
+
+.section-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 2rem;
+    max-width: 1200px;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+.section-title {
+    font-size: 1.875rem;
+    font-weight: 700;
+    color: var(--text-color);
+}
+
+.sort-select {
+    padding: 0.5rem 1rem;
+    border: 1px solid var(--border-color);
+    border-radius: 8px;
+    background: var(--card-bg);
+    color: var(--text-color);
+    cursor: pointer;
+    font-family: inherit;
+}
+
+.sort-select:focus {
+    outline: none;
+    border-color: var(--primary-color);
+}
+
+.plugin-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
+    gap: 1.5rem;
+    max-width: 1200px;
+    margin: 0 auto;
+}
+
+.plugin-card {
+    background: var(--card-bg);
+    padding: 1.5rem;
+    border-radius: 12px;
+    border: 1px solid var(--border-color);
+    transition: all 0.2s ease;
+    cursor: pointer;
+}
+
+.plugin-card:hover {
+    border-color: var(--primary-color);
+    box-shadow: var(--shadow-lg);
+    transform: translateY(-4px);
+}
+
+.card-top-tags {
+    margin-bottom: 0.75rem;
+}
+
+.plugin-name {
+    font-size: 1.25rem;
+    font-weight: 600;
+    color: var(--text-color);
+    margin-bottom: 0.25rem;
+}
+
+.plugin-id {
+    font-size: 0.875rem;
+    color: var(--text-secondary);
+    font-family: 'Monaco', 'Menlo', 'Consolas', monospace;
+}
+
+.plugin-description {
+    color: var(--text-secondary);
+    margin-bottom: 1rem;
+    line-height: 1.6;
+}
+
+.plugin-tags {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+}
+
+.tag {
+    padding: 0.25rem 0.75rem;
+    background: var(--bg-secondary);
+    border-radius: 6px;
+    font-size: 0.75rem;
+    color: var(--text-secondary);
+    border: 1px solid var(--border-color);
+}
+
+.tag.category {
+    background: var(--primary-color);
+    color: white;
+    border-color: var(--primary-color);
+}
+
+.tag.language {
+    background: var(--success-color);
+    color: white;
+    border-color: var(--success-color);
+}
+
+.loading {
+    text-align: center;
+    padding: 3rem;
+    color: var(--text-secondary);
+    font-size: 1.125rem;
+}
+
+.error {
+    background: rgba(244, 67, 54, 0.1);
+    border: 1px solid rgba(244, 67, 54, 0.3);
+    color: var(--error-color);
+    padding: 1rem 1.5rem;
+    border-radius: 8px;
+    margin: 2rem 0;
+}
+
+/* Pagination */
+.pagination {
+    display: flex;
+    justify-content: center;
+    gap: 0.5rem;
+    margin-top: 3rem;
+    max-width: 1200px;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+.page-btn {
+    padding: 0.5rem 1rem;
+    border: 1px solid var(--border-color);
+    background: var(--card-bg);
+    color: var(--text-color);
+    border-radius: 6px;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    font-family: inherit;
+}
+
+.page-btn:hover {
+    border-color: var(--primary-color);
+    color: var(--primary-color);
+    background: var(--hover-bg);
+}
+
+.page-btn.active {
+    background: var(--primary-color);
+    color: white;
+    border-color: var(--primary-color);
+}
+
+.page-btn.disabled {
+    cursor: default;
+    opacity: 0.5;
+}
+
+.page-btn.disabled:hover {
+    border-color: var(--border-color);
+    color: var(--text-color);
+    background: var(--card-bg);
+}
+
+/* Modal */
+.modal {
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.75);
+    z-index: 1000;
+    overflow-y: auto;
+    backdrop-filter: blur(4px);
+}
+
+.modal.active {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 2rem;
+}
+
+.modal-content {
+    background: var(--card-bg);
+    max-width: 900px;
+    width: 100%;
+    border-radius: 12px;
+    padding: 2rem;
+    position: relative;
+    border: 1px solid var(--border-color);
+    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
+}
+
+.modal-close {
+    position: absolute;
+    top: 1rem;
+    right: 1rem;
+    font-size: 2rem;
+    cursor: pointer;
+    color: var(--text-secondary);
+    width: 2.5rem;
+    height: 2.5rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 6px;
+    transition: all 0.2s ease;
+}
+
+.modal-close:hover {
+    color: var(--text-color);
+    background: var(--hover-bg);
+}
+
+/* Footer */
+.footer {
+    background: var(--bg-secondary);
+    border-top: 1px solid var(--border-color);
+    padding: 2rem 0;
+    text-align: center;
+    color: var(--text-secondary);
+}
+
+.footer a {
+    color: var(--primary-color);
+    text-decoration: none;
+    transition: all 0.2s ease;
+}
+
+.footer a:hover {
+    text-decoration: underline;
+    color: #e65100;
+}
+
+/* Links in cards/pagination - reset anchor styling */
+a.plugin-card,
+a.page-btn {
+    text-decoration: none;
+    color: inherit;
+}
+
+a.filter-tag {
+    text-decoration: none;
+    color: inherit;
+}
+
+/* Browse Filters (search-form partial) */
+.browse-filters {
+    max-width: 1200px;
+    margin: 0 auto 2rem;
+}
+
+.search-row {
+    display: flex;
+    gap: 0.5rem;
+    margin-bottom: 1rem;
+}
+
+.filter-row {
+    display: flex;
+    gap: 0.75rem;
+    flex-wrap: wrap;
+}
+
+/* Result Count */
+.result-count {
+    font-size: 0.875rem;
+    color: var(--text-secondary);
+    padding: 0.25rem 0.75rem;
+    background: var(--bg-secondary);
+    border-radius: 6px;
+    white-space: nowrap;
+}
+
+/* Pagination Summary */
+.pagination-summary {
+    text-align: center;
+    margin-top: 0.75rem;
+    font-size: 0.875rem;
+    color: var(--text-secondary);
+}
+
+/* Buttons */
+.btn {
+    display: inline-block;
+    padding: 0.75rem 1.5rem;
+    font-size: 0.875rem;
+    font-weight: 600;
+    text-decoration: none;
+    border-radius: 8px;
+    border: none;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    background: var(--primary-color);
+    color: white;
+}
+
+.btn:hover {
+    transform: translateY(-2px);
+    box-shadow: var(--shadow-lg);
+    background: #e65100;
+}
+
+.btn-secondary {
+    background: var(--card-bg);
+    color: var(--text-color);
+    border: 1px solid var(--border-color);
+}
+
+.btn-secondary:hover {
+    background: var(--hover-bg);
+    border-color: var(--primary-color);
+}
+
+/* Empty State */
+.empty-state {
+    text-align: center;
+    padding: 4rem 2rem;
+    max-width: 600px;
+    margin: 0 auto;
+}
+
+.empty-state-code {
+    font-size: 6rem;
+    font-weight: 800;
+    color: var(--primary-color);
+    margin-bottom: 1rem;
+    line-height: 1;
+}
+
+.empty-state-title {
+    font-size: 1.5rem;
+    font-weight: 600;
+    color: var(--text-color);
+    margin-bottom: 0.75rem;
+}
+
+.empty-state-text {
+    font-size: 1rem;
+    color: var(--text-secondary);
+    margin-bottom: 2rem;
+    line-height: 1.6;
+}
+
+.empty-state-actions {
+    display: flex;
+    gap: 1rem;
+    justify-content: center;
+}
+
+/* Breadcrumb */
+.breadcrumb {
+    margin-bottom: 1.5rem;
+}
+
+.breadcrumb a {
+    color: var(--text-secondary);
+    text-decoration: none;
+    font-size: 0.875rem;
+    transition: color 0.15s ease;
+}
+
+.breadcrumb a:hover {
+    color: var(--primary-color);
+}
+
+/* Detail Page */
+.detail-tab-nav {
+    display: flex;
+    gap: 0.5rem;
+    overflow-x: auto;
+    margin-bottom: 1rem;
+    padding-bottom: 0.25rem;
+}
+
+.detail-tab-btn {
+    appearance: none;
+    border: 1px solid var(--border-color);
+    background: var(--card-bg);
+    color: var(--text-secondary);
+    font-size: 0.8125rem;
+    font-weight: 600;
+    line-height: 1;
+    padding: 0.625rem 0.875rem;
+    border-radius: 8px;
+    cursor: pointer;
+    white-space: nowrap;
+    transition: all 0.15s ease;
+}
+
+.detail-tab-btn:hover {
+    color: var(--text-color);
+    border-color: var(--primary-color);
+}
+
+.detail-tab-btn.active {
+    background: var(--card-bg);
+    border-color: var(--border-color);
+    border-bottom-color: var(--card-bg);
+    color: var(--text-color);
+}
+
+.detail-tab-panel {
+    display: none;
+}
+
+.detail-tab-panel.active {
+    display: block;
+}
+
+.detail-card {
+    background: var(--card-bg);
+    border: 1px solid var(--border-color);
+    border-radius: 12px;
+    padding: 2rem;
+    margin-bottom: 1.5rem;
+}
+
+.detail-tabs-shell {
+    padding: 0;
+    overflow: hidden;
+}
+
+.detail-tabs-shell > .detail-tab-nav {
+    margin: 0;
+    padding: 0.75rem;
+    border-bottom: 1px solid var(--border-color);
+    background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01));
+    gap: 0.5rem;
+}
+
+.detail-tabs-shell > .detail-tab-nav .detail-tab-btn {
+    background: rgba(255, 255, 255, 0.03);
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    border-radius: 999px;
+    color: var(--text-secondary);
+    padding: 0.6rem 1rem;
+    font-size: 0.78rem;
+    letter-spacing: 0.02em;
+}
+
+.detail-tabs-shell > .detail-tab-nav .detail-tab-btn.active {
+    background: var(--primary-color);
+    border-color: var(--primary-color);
+    color: #fff;
+    box-shadow: 0 6px 14px rgba(251, 140, 0, 0.28);
+}
+
+.detail-tabs-shell > .detail-tab-nav .detail-tab-btn:hover {
+    color: var(--text-color);
+    border-color: rgba(255, 255, 255, 0.2);
+    background: rgba(255, 255, 255, 0.06);
+}
+
+.detail-tabs-shell > .detail-tab-nav .detail-tab-btn.active:hover {
+    color: #fff;
+    border-color: var(--primary-color);
+    background: var(--primary-color);
+}
+
+.detail-tabs-shell .detail-tab-panels {
+    background: var(--card-bg);
+}
+
+.detail-tabs-shell .detail-tab-panel {
+    padding: 1.75rem 2rem 2rem;
+}
+
+.detail-title {
+    font-size: 2rem;
+    font-weight: 700;
+    color: var(--text-color);
+    margin-bottom: 0.5rem;
+}
+
+.detail-id {
+    margin-bottom: 1rem;
+}
+
+.detail-id code {
+    font-size: 0.875rem;
+    color: var(--text-secondary);
+    font-family: 'Monaco', 'Menlo', 'Consolas', monospace;
+    background: var(--code-bg);
+    padding: 0.25rem 0.5rem;
+    border-radius: 4px;
+}
+
+.detail-description {
+    color: var(--text-secondary);
+    margin-bottom: 1.5rem;
+    line-height: 1.6;
+}
+
+.detail-section-title {
+    font-size: 1.25rem;
+    font-weight: 600;
+    color: var(--text-color);
+    margin-bottom: 1rem;
+}
+
+
+/* Event type colors */
+.event-emit {
+    color: var(--warning-color);
+}
+
+.event-on {
+    color: var(--config-color);
+}
+
+.event-returnable {
+    color: var(--service-color);
+}
+
+.event-broadcast {
+    color: var(--success-color);
+}
+
+/* Top tags (category/language/version above title) */
+.detail-top-tags {
+    margin-bottom: 0.75rem;
+}
+
+/* README / Documentation inside first card */
+.detail-card > .readme-content {
+    margin-top: 1.5rem;
+}
+
+/* Documentation tabs */
+.doc-tabs {
+    margin-top: 0;
+}
+
+.doc-tab-bar {
+    display: flex;
+    gap: 0;
+    border-bottom: 1px solid var(--border-color);
+    margin-bottom: 0;
+    overflow-x: auto;
+}
+
+.doc-tab-btn {
+    padding: 0.625rem 1.25rem;
+    font-size: 0.875rem;
+    font-weight: 500;
+    color: var(--text-secondary);
+    background: none;
+    border: none;
+    border-bottom: 2px solid transparent;
+    cursor: pointer;
+    transition: all 0.15s ease;
+    white-space: nowrap;
+    font-family: inherit;
+}
+
+.doc-tab-btn:hover {
+    color: var(--text-color);
+    background: rgba(255, 255, 255, 0.03);
+}
+
+.doc-tab-btn.active {
+    color: var(--primary-color);
+    border-bottom-color: var(--primary-color);
+}
+
+.doc-tab-panel {
+    display: none;
+}
+
+.doc-tab-panel.active {
+    display: block;
+}
+
+/* Event Schema */
+.event-section-title {
+    font-size: 1.125rem;
+    font-weight: 600;
+    margin: 2rem 0 0.25rem;
+    padding-bottom: 0.5rem;
+    border-bottom: 1px solid var(--border-color);
+}
+
+.event-section-title:first-of-type {
+    margin-top: 0.5rem;
+}
+
+.event-section-desc {
+    font-size: 0.8125rem;
+    color: var(--text-secondary);
+    margin-bottom: 0.75rem;
+}
+
+details.event-item {
+    padding: 0;
+    margin-bottom: 0.75rem;
+    background: var(--bg-secondary);
+    border: 1px solid var(--border-color);
+    border-radius: 8px;
+    transition: border-color 0.15s ease;
+}
+
+details.event-item:hover {
+    border-color: rgba(255, 255, 255, 0.15);
+}
+
+details.event-item:last-child {
+    margin-bottom: 0;
+}
+
+details.event-item[open] {
+    border-color: rgba(255, 255, 255, 0.2);
+}
+
+/* Summary (collapsed header) */
+.event-item-summary {
+    padding: 1rem;
+    cursor: pointer;
+    list-style: none;
+    position: relative;
+    padding-right: 2.5rem;
+}
+
+.event-item-summary::-webkit-details-marker {
+    display: none;
+}
+
+/* Expand indicator */
+.event-item-summary::after {
+    content: '+';
+    position: absolute;
+    right: 1rem;
+    top: 1rem;
+    font-size: 1.125rem;
+    font-weight: 300;
+    color: var(--text-secondary);
+    line-height: 1;
+    transition: transform 0.15s ease;
+}
+
+details.event-item[open] > .event-item-summary::after {
+    content: '-';
+}
+
+/* Expanded body */
+.event-item-body {
+    padding: 0 1rem 1rem;
+    border-top: 1px solid var(--border-color);
+    margin-top: 0;
+    padding-top: 0.75rem;
+}
+
+.event-item-header {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    flex-wrap: wrap;
+}
+
+.event-item-header code {
+    font-family: 'Monaco', 'Menlo', 'Consolas', monospace;
+    font-size: 0.875rem;
+    font-weight: 600;
+    background: var(--code-bg);
+    padding: 0.25rem 0.625rem;
+    border-radius: 4px;
+}
+
+.event-type-badge {
+    font-size: 0.6875rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    padding: 0.15rem 0.5rem;
+    border-radius: 4px;
+    border: 1px solid;
+}
+
+.event-type-badge.returnable {
+    color: var(--service-color);
+    border-color: var(--service-color);
+    background: rgba(162, 0, 255, 0.08);
+}
+
+.event-type-badge.emit {
+    color: var(--warning-color);
+    border-color: var(--warning-color);
+    background: rgba(251, 140, 0, 0.08);
+}
+
+.event-type-badge.on {
+    color: var(--config-color);
+    border-color: var(--config-color);
+    background: rgba(3, 169, 244, 0.08);
+}
+
+.event-type-badge.broadcast {
+    color: var(--success-color);
+    border-color: var(--success-color);
+    background: rgba(67, 160, 71, 0.08);
+}
+
+.event-description {
+    margin: 0.5rem 0 0;
+    font-size: 0.875rem;
+    color: var(--text-secondary);
+    line-height: 1.5;
+}
+
+/* Event schema property blocks */
+.event-schema-block {
+    margin-top: 0.75rem;
+}
+
+.event-schema-label {
+    display: block;
+    font-size: 0.6875rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+    color: var(--text-secondary);
+    margin-bottom: 0.375rem;
+}
+
+.event-props {
+    background: var(--code-bg);
+    border: 1px solid var(--border-color);
+    border-radius: 6px;
+    padding: 0.5rem 0;
+    overflow-x: auto;
+}
+
+.event-prop {
+    display: flex;
+    align-items: baseline;
+    gap: 0.5rem;
+    padding: 0.25rem 0.75rem;
+    font-size: 0.8125rem;
+    flex-wrap: wrap;
+}
+
+.event-prop:hover {
+    background: rgba(255, 255, 255, 0.02);
+}
+
+.event-prop-name {
+    font-family: 'Monaco', 'Menlo', 'Consolas', monospace;
+    font-weight: 600;
+    color: var(--text-color);
+    background: none;
+    padding: 0;
+    border: none;
+    font-size: 0.8125rem;
+}
+
+.event-prop-type {
+    font-family: 'Monaco', 'Menlo', 'Consolas', monospace;
+    font-size: 0.75rem;
+    color: var(--primary-color);
+    opacity: 0.85;
+}
+
+.event-prop-optional {
+    font-size: 0.6875rem;
+    color: var(--text-secondary);
+    opacity: 0.65;
+    font-style: italic;
+}
+
+.event-prop-desc {
+    font-size: 0.75rem;
+    color: var(--text-secondary);
+    flex-basis: 100%;
+    padding-left: 0;
+    margin-top: 0.125rem;
+}
+
+/* Config section */
+.config-tree {
+    border: 1px solid var(--border-color);
+    border-radius: 10px;
+    background: var(--bg-secondary);
+    overflow: hidden;
+    padding: 0.35rem 0;
+}
+
+.config-tree-node {
+    padding: 0.45rem 0.75rem 0.5rem;
+    margin-left: calc(var(--config-level) * 1.1rem);
+    border-left: 2px solid rgba(255, 255, 255, 0.08);
+    position: relative;
+}
+
+.config-tree-node::before {
+    content: "";
+    position: absolute;
+    left: -2px;
+    top: 1.1rem;
+    width: 0.7rem;
+    border-top: 1px solid rgba(255, 255, 255, 0.14);
+}
+
+.config-tree-node.is-object {
+    background: rgba(255, 255, 255, 0.02);
+}
+
+.config-tree-node.is-field {
+    background: transparent;
+}
+
+.config-tree-head {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 0.35rem 0.55rem;
+}
+
+.config-key {
+    font-family: 'Monaco', 'Menlo', 'Consolas', monospace;
+    font-size: 0.8rem;
+    font-weight: 600;
+    color: var(--text-color);
+}
+
+.config-row-path {
+    font-family: 'Monaco', 'Menlo', 'Consolas', monospace;
+    font-size: 0.68rem;
+    color: var(--text-secondary);
+    opacity: 0.75;
+}
+
+.config-type {
+    font-family: 'Monaco', 'Menlo', 'Consolas', monospace;
+    font-size: 0.72rem;
+    color: var(--primary-color);
+}
+
+.config-pill {
+    font-size: 0.65rem;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    color: var(--text-secondary);
+    border: 1px solid var(--border-color);
+    border-radius: 999px;
+    padding: 0.1rem 0.45rem;
+}
+
+.config-pill-default {
+    text-transform: none;
+    letter-spacing: 0;
+}
+
+.config-pill-branch {
+    border-color: rgba(3, 169, 244, 0.45);
+    color: #81d4fa;
+}
+
+.config-tree-desc {
+    font-size: 0.75rem;
+    color: var(--text-secondary);
+    margin-top: 0.2rem;
+    margin-left: 0.1rem;
+}
+
+/* Supported feature groups */
+.feature-group {
+    margin-bottom: 1.5rem;
+}
+
+.feature-group:last-child {
+    margin-bottom: 0;
+}
+
+.feature-group-title {
+    font-size: 0.95rem;
+    font-weight: 600;
+    color: var(--text-color);
+    margin: 0 0 0.6rem;
+}
+
+.feature-chip-list {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+}
+
+.feature-chip {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.35rem 0.55rem;
+    border-radius: 999px;
+    border: 1px solid var(--border-color);
+    background: var(--code-bg);
+}
+
+.feature-chip-name {
+    font-family: 'Monaco', 'Menlo', 'Consolas', monospace;
+    font-size: 0.75rem;
+    color: var(--text-color);
+}
+
+.feature-chip-state {
+    font-size: 0.67rem;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    font-weight: 600;
+}
+
+.feature-chip.is-supported {
+    border-color: rgba(67, 160, 71, 0.45);
+    background: rgba(67, 160, 71, 0.12);
+}
+
+.feature-chip.is-supported .feature-chip-state {
+    color: #66bb6a;
+}
+
+.feature-chip.is-unsupported {
+    border-color: rgba(255, 255, 255, 0.16);
+    background: rgba(255, 255, 255, 0.03);
+}
+
+.feature-chip.is-unsupported .feature-chip-state {
+    color: var(--text-secondary);
+    opacity: 0.8;
+}
+
+/* Installation blocks */
+.install-block {
+    margin-bottom: 1.5rem;
+}
+
+.install-block:last-child {
+    margin-bottom: 0;
+}
+
+.install-label {
+    font-size: 0.75rem;
+    font-weight: 600;
+    color: var(--text-secondary);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    margin-bottom: 0.5rem;
+}
+
+.install-block pre {
+    background: var(--code-bg);
+    border: 1px solid var(--border-color);
+    border-radius: 8px;
+    padding: 1rem 1.25rem;
+    overflow-x: auto;
+}
+
+.install-block code {
+    font-family: 'Monaco', 'Menlo', 'Consolas', monospace;
+    font-size: 0.875rem;
+    color: var(--text-color);
+}
+
+/* Version List */
+.version-list {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+}
+
+/* Dependencies */
+.dependency-list {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}
+
+.dependency-item {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    padding: 0.75rem 1rem;
+    background: var(--bg-secondary);
+    border: 1px solid var(--border-color);
+    border-radius: 8px;
+    transition: border-color 0.15s ease;
+}
+
+.dependency-item:hover {
+    border-color: var(--primary-color);
+}
+
+.dependency-link {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    text-decoration: none;
+    color: inherit;
+    flex: 1;
+}
+
+.dependency-id {
+    font-family: 'Monaco', 'Menlo', 'Consolas', monospace;
+    font-size: 0.875rem;
+    font-weight: 600;
+    color: var(--primary-color);
+    background: var(--code-bg);
+    padding: 0.25rem 0.5rem;
+    border-radius: 4px;
+}
+
+.dependency-version {
+    font-size: 0.875rem;
+    color: var(--text-secondary);
+    font-family: 'Monaco', 'Menlo', 'Consolas', monospace;
+}
+
+.dependency-none {
+    color: var(--text-secondary);
+    font-style: italic;
+    margin: 0;
+}
+
+/* README / Rendered Markdown */
+.readme-content {
+    background: var(--bg-secondary);
+    border: 1px solid var(--border-color);
+    border-radius: 8px;
+    padding: 2rem 2.5rem;
+    overflow-x: auto;
+}
+
+/* Markdown body - rendered HTML content */
+.markdown-body {
+    font-size: 0.9375rem;
+    line-height: 1.7;
+    color: var(--text-color);
+    word-wrap: break-word;
+}
+
+.markdown-body > *:first-child {
+    margin-top: 0;
+}
+
+.markdown-body > *:last-child {
+    margin-bottom: 0;
+}
+
+/* Headings */
+.markdown-body h1,
+.markdown-body h2,
+.markdown-body h3,
+.markdown-body h4,
+.markdown-body h5,
+.markdown-body h6 {
+    color: var(--text-color);
+    font-weight: 600;
+    line-height: 1.3;
+    margin-top: 1.75em;
+    margin-bottom: 0.75em;
+}
+
+.markdown-body h1 {
+    font-size: 1.75rem;
+    font-weight: 700;
+    padding-bottom: 0.5em;
+    border-bottom: 1px solid var(--border-color);
+}
+
+.markdown-body h2 {
+    font-size: 1.375rem;
+    padding-bottom: 0.4em;
+    border-bottom: 1px solid var(--border-color);
+}
+
+.markdown-body h3 {
+    font-size: 1.125rem;
+}
+
+.markdown-body h4 {
+    font-size: 1rem;
+}
+
+.markdown-body h5 {
+    font-size: 0.875rem;
+    text-transform: uppercase;
+    letter-spacing: 0.03em;
+    color: var(--text-secondary);
+}
+
+.markdown-body h6 {
+    font-size: 0.8125rem;
+    text-transform: uppercase;
+    letter-spacing: 0.03em;
+    color: var(--text-secondary);
+}
+
+/* Paragraphs */
+.markdown-body p {
+    margin-top: 0;
+    margin-bottom: 1em;
+}
+
+/* Links */
+.markdown-body a {
+    color: var(--primary-color);
+    text-decoration: none;
+    font-weight: 500;
+}
+
+.markdown-body a:hover {
+    text-decoration: underline;
+    color: #e65100;
+}
+
+/* Inline code */
+.markdown-body code {
+    font-family: 'Monaco', 'Menlo', 'Consolas', 'Liberation Mono', monospace;
+    font-size: 0.8125em;
+    padding: 0.2em 0.45em;
+    background: var(--code-bg);
+    border: 1px solid var(--border-color);
+    border-radius: 4px;
+    color: var(--primary-color);
+}
+
+/* Code blocks */
+.markdown-body pre {
+    background: var(--code-bg);
+    border: 1px solid var(--border-color);
+    border-radius: 8px;
+    padding: 1rem 1.25rem;
+    overflow-x: auto;
+    margin-top: 0;
+    margin-bottom: 1.25em;
+    line-height: 1.5;
+}
+
+.markdown-body pre code {
+    background: none;
+    border: none;
+    padding: 0;
+    font-size: 0.8125rem;
+    color: var(--text-color);
+    border-radius: 0;
+}
+
+/* highlight.js overrides -- keep our background, let hljs handle token colors */
+.markdown-body pre code.hljs {
+    background: none;
+    padding: 0;
+    color: inherit;
+}
+
+.markdown-body pre .hljs {
+    background: none;
+}
+
+/* Blockquotes */
+.markdown-body blockquote {
+    margin: 0 0 1.25em;
+    padding: 0.5em 1.25em;
+    border-left: 4px solid var(--primary-color);
+    background: rgba(251, 140, 0, 0.05);
+    border-radius: 0 6px 6px 0;
+    color: var(--text-secondary);
+}
+
+.markdown-body blockquote p:last-child {
+    margin-bottom: 0;
+}
+
+.markdown-body blockquote blockquote {
+    border-left-color: var(--border-color);
+}
+
+/* Lists */
+.markdown-body ul,
+.markdown-body ol {
+    margin-top: 0;
+    margin-bottom: 1em;
+    padding-left: 1.75em;
+}
+
+.markdown-body li {
+    margin-bottom: 0.35em;
+}
+
+.markdown-body li > ul,
+.markdown-body li > ol {
+    margin-top: 0.35em;
+    margin-bottom: 0;
+}
+
+.markdown-body ul {
+    list-style: disc;
+}
+
+.markdown-body ul ul {
+    list-style: circle;
+}
+
+.markdown-body ul ul ul {
+    list-style: square;
+}
+
+/* Task lists */
+.markdown-body input[type="checkbox"] {
+    margin-right: 0.5em;
+    vertical-align: middle;
+    position: relative;
+    top: -1px;
+}
+
+/* Tables */
+.markdown-body table {
+    width: 100%;
+    border-collapse: collapse;
+    margin-bottom: 1.25em;
+    overflow: auto;
+    display: block;
+}
+
+.markdown-body table th,
+.markdown-body table td {
+    padding: 0.625rem 1rem;
+    border: 1px solid var(--border-color);
+    text-align: left;
+}
+
+.markdown-body table th {
+    background: var(--code-bg);
+    font-weight: 600;
+    font-size: 0.8125rem;
+    text-transform: uppercase;
+    letter-spacing: 0.03em;
+    color: var(--text-secondary);
+}
+
+.markdown-body table tr:nth-child(even) {
+    background: rgba(255, 255, 255, 0.02);
+}
+
+.markdown-body table tr:hover {
+    background: rgba(251, 140, 0, 0.04);
+}
+
+/* Horizontal rules */
+.markdown-body hr {
+    border: none;
+    border-top: 1px solid var(--border-color);
+    margin: 2em 0;
+}
+
+/* Images */
+.markdown-body img {
+    max-width: 100%;
+    height: auto;
+    border-radius: 8px;
+    margin: 0.5em 0;
+}
+
+/* Strong and emphasis */
+.markdown-body strong {
+    font-weight: 600;
+    color: var(--text-color);
+}
+
+.markdown-body em {
+    font-style: italic;
+}
+
+/* Definition lists (dl/dt/dd) */
+.markdown-body dl {
+    margin-bottom: 1em;
+}
+
+.markdown-body dt {
+    font-weight: 600;
+    margin-top: 0.75em;
+}
+
+.markdown-body dd {
+    margin-left: 1.5em;
+    margin-bottom: 0.5em;
+    color: var(--text-secondary);
+}
+
+/* Keyboard */
+.markdown-body kbd {
+    display: inline-block;
+    padding: 0.15em 0.4em;
+    font-family: 'Monaco', 'Menlo', 'Consolas', monospace;
+    font-size: 0.75em;
+    line-height: 1;
+    color: var(--text-color);
+    vertical-align: middle;
+    background: var(--bg-color);
+    border: 1px solid var(--border-color);
+    border-radius: 4px;
+    box-shadow: inset 0 -1px 0 var(--border-color);
+}
+
+/* Metadata Grid */
+.metadata-grid {
+    display: grid;
+    grid-template-columns: auto 1fr;
+    gap: 0.75rem 1.5rem;
+    align-items: baseline;
+}
+
+.metadata-label {
+    font-size: 0.75rem;
+    font-weight: 600;
+    color: var(--text-secondary);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+}
+
+.metadata-value {
+    font-size: 0.875rem;
+    color: var(--text-color);
+    word-break: break-word;
+}
+
+.metadata-value a {
+    color: var(--primary-color);
+    text-decoration: none;
+}
+
+.metadata-value a:hover {
+    text-decoration: underline;
+}
+
+/* Container (override) */
+.container {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 0 2rem;
+}
+
+/* Responsive */
+@media (max-width: 900px) {
+    .hero-title {
+        font-size: 2rem;
+    }
+
+    .hero-subtitle {
+        font-size: 1rem;
+    }
+
+    .search-box {
+        flex-direction: column;
+    }
+
+    .search-row {
+        flex-direction: column;
+    }
+
+    .filter-row {
+        flex-direction: column;
+    }
+
+    .plugin-grid {
+        grid-template-columns: 1fr;
+    }
+
+    .stats-grid {
+        grid-template-columns: 1fr;
+    }
+
+    .section-header {
+        flex-direction: column;
+        gap: 1rem;
+        align-items: flex-start;
+    }
+
+    .metadata-grid {
+        grid-template-columns: 1fr;
+    }
+
+    .empty-state-actions {
+        flex-direction: column;
+        align-items: center;
+    }
+}
+
+@media (max-width: 480px) {
+    .hero {
+        padding: 3rem 1.5rem;
+    }
+
+    .hero-title {
+        font-size: 1.75rem;
+    }
+
+    .stats,
+    .plugins {
+        padding: 2rem 1rem;
+    }
+
+    .modal-content {
+        padding: 1.5rem;
+    }
+
+    .detail-card {
+        padding: 1.25rem;
+    }
+
+    .detail-tabs-shell {
+        padding: 0;
+    }
+
+    .detail-tabs-shell > .detail-tab-nav {
+        padding: 0.625rem 0.625rem 0;
+    }
+
+    .detail-tabs-shell .detail-tab-panel {
+        padding: 1.1rem 1rem 1.25rem;
+    }
+
+    .detail-title {
+        font-size: 1.5rem;
+    }
+
+}
+
+/* Marketplace-style plugin cards */
+.plugin-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
+    gap: 1.5rem;
+    max-width: 1200px;
+    margin: 0 auto;
+}
+
+.plugin-card {
+    background: var(--card-bg);
+    border: 1px solid var(--border-color);
+    border-radius: 12px;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    text-decoration: none;
+    color: inherit;
+    transition: all 0.2s ease;
+    position: relative;
+    padding: 0;
+}
+
+.plugin-card:hover {
+    border-color: var(--primary-color);
+    box-shadow: var(--shadow-lg);
+    transform: translateY(-3px);
+}
+
+.plugin-image {
+    width: 100%;
+    height: 210px;
+    border-bottom: 1px solid var(--border-color);
+    position: relative;
+    background: linear-gradient(135deg, var(--bg-secondary), var(--code-bg));
+    overflow: hidden;
+    margin: 0;
+    padding: 0;
+    display: block;
+}
+
+.plugin-image img {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+    display: block;
+}
+
+.plugin-image.placeholder {
+    background: linear-gradient(135deg, #2f2f2f, #1f1f1f);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.plugin-image-fallback {
+    text-transform: uppercase;
+    font-size: 0.75rem;
+    letter-spacing: 0.1em;
+    color: var(--text-secondary);
+    border: 1px dashed var(--border-color);
+    border-radius: 999px;
+    padding: 0.35rem 0.75rem;
+}
+
+.plugin-badges {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    gap: 0.3rem;
+}
+
+.plugin-badge {
+    font-size: 0.6875rem;
+    font-weight: 600;
+    letter-spacing: 0.03em;
+    border-radius: 6px;
+    padding: 0.15rem 0.5rem;
+    border: 1px solid rgba(255, 255, 255, 0.12);
+    color: #fff;
+    text-transform: uppercase;
+    background: #2f2f2f;
+}
+
+.badge-version {
+    background: #111111;
+    border-color: #2d2d2d;
+}
+
+.badge-category {
+    background: #fb8c00;
+    border-color: #fb8c00;
+}
+
+.badge-language {
+    background: #43a047;
+    border-color: #43a047;
+}
+
+.badge-core {
+    background: #03a9f4;
+    border-color: #03a9f4;
+}
+
+.badge-official {
+    background: #1e88e5;
+    border-color: #1e88e5;
+}
+
+.badge-org,
+.badge-custom {
+    background: #5e35b1;
+    border-color: #5e35b1;
+}
+
+.badge-community {
+    background: #616161;
+    border-color: #616161;
+}
+
+.plugin-content {
+    padding: 1rem 1.2rem 1.2rem;
+    display: flex;
+    flex-direction: column;
+    gap: 0.8rem;
+}
+
+.plugin-header {
+    display: flex;
+    flex-direction: column;
+    gap: 0.15rem;
+    min-width: 0;
+}
+
+.plugin-name {
+    font-size: 1.15rem;
+    font-weight: 700;
+    color: var(--text-color);
+}
+
+.plugin-id {
+    font-size: 0.78rem;
+    color: var(--text-secondary);
+    font-family: 'Monaco', 'Menlo', 'Consolas', monospace;
+    word-break: break-all;
+}
+
+.plugin-description {
+    color: var(--text-secondary);
+    line-height: 1.6;
+    margin: 0;
+}
+
+.plugin-meta-right {
+    position: absolute;
+    top: 0.75rem;
+    right: 0.75rem;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    gap: 0.3rem;
+    z-index: 2;
+}
+
+.plugin-tags {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.4rem;
+}
+
+@media (max-width: 900px) {
+    .plugin-grid {
+        grid-template-columns: 1fr;
+    }
+
+    .plugin-meta-right {
+        position: static;
+        align-items: flex-start;
+    }
+
+    .plugin-badges {
+        align-items: flex-start;
+        flex-direction: row;
+        flex-wrap: wrap;
+    }
+}