:root {
        --recued-bg:            #FBF4EE;
        --recued-bg-card:       #FFFFFF;
        --recued-bg-subtle:     #F0E8E0;
        --recued-text:          #2A1F1A;
        --recued-text-muted:    #6F5F53;
        --recued-primary:       #C1440E;
        --recued-primary-light: #E07A4F;
        --recued-border:        #DDD0C4;

        --bg:             var(--recued-bg);
        --bg-card:        var(--recued-bg-card);
        --bg-subtle:      var(--recued-bg-subtle);
        --fg:             var(--recued-text);
        --fg-muted:       var(--recued-text-muted);
        --accent:         var(--recued-primary);
        --accent-light:   var(--recued-primary-light);
        --border:         var(--recued-border);
      }

      @media (prefers-color-scheme: dark) {
        :root {
          --recued-bg:            #2A1F1A;
          --recued-bg-card:       #352A24;
          --recued-bg-subtle:     #443630;
          --recued-text:          #FBF4EE;
          --recued-text-muted:    #B0A090;
          --recued-primary:       #D4581E;
          --recued-primary-light: #E07A4F;
          --recued-border:        #4A3D35;
        }
      }

      * { box-sizing: border-box; margin: 0; padding: 0; }

      html, body {
        font-family: -apple-system, system-ui, 'Segoe UI', sans-serif;
        color: var(--fg);
        background: var(--bg);
        -webkit-font-smoothing: antialiased;
        line-height: 1.5;
      }

      a { color: var(--accent); text-decoration: none; }
      a:hover { text-decoration: underline; }

      /* ─── Layout ─── */
      .marketplace {
        max-width: 960px;
        margin: 0 auto;
        padding: 24px 20px 64px;
      }

      /* ─── Header ─── */
      .mp-header {
        display: flex;
        align-items: center;
        gap: 16px;
        padding: 16px 0 24px;
        border-bottom: 1px solid var(--border);
        margin-bottom: 24px;
      }
      .mp-brand {
        font-size: 20px;
        font-weight: 700;
        color: var(--accent);
        letter-spacing: -0.3px;
      }
      .mp-brand:hover { text-decoration: none; }
      .mp-nav {
        display: flex;
        gap: 20px;
        font-size: 14px;
        font-weight: 500;
        flex: 1;
      }
      .mp-nav a { color: var(--fg-muted); }
      .mp-nav a:hover { text-decoration: none; color: var(--fg); }
      .mp-nav a.active { color: var(--accent); border-bottom: 2px solid var(--accent); padding-bottom: 2px; }
      .mp-header-cta { display: flex; align-items: center; gap: 14px; }
      .header-icon-link {
        display: flex; align-items: center; color: var(--fg-muted);
      }
      .header-icon-link:hover { color: var(--fg); }
      .mp-signin-link, .mp-signup-link { font-size: 13px; font-weight: 500; }
      .mp-signin-link { color: var(--fg-muted); }
      .mp-signin-link:hover { color: var(--accent); text-decoration: none; }
      .mp-signup-link { color: var(--accent); }
      .mp-signup-link:hover { text-decoration: none; opacity: 0.85; }
      .btn-cta-sm {
        display: inline-flex; align-items: center; gap: 6px;
        padding: 6px 14px; border-radius: 6px; font-size: 12px; font-weight: 600;
        background: var(--accent); color: #fff; text-decoration: none;
      }
      .btn-cta-sm:hover { background: var(--accent-light); text-decoration: none; }
      .btn-cta-sm svg { flex-shrink: 0; }

      /* ─── Landing ─── */
      .landing-hero {
        text-align: center;
        padding: 64px 20px 48px;
      }
      .landing-tagline {
        font-size: 42px;
        font-weight: 800;
        letter-spacing: -1px;
        line-height: 1.15;
        margin-bottom: 16px;
      }
      .tagline-accent { color: var(--accent); }
      .tagline-l {
        font-family: ui-monospace, 'SF Mono', Menlo, monospace;
        font-size: 13px;
        color: var(--fg-muted);
        letter-spacing: 1px;
        margin-bottom: 18px;
        opacity: 0.7;
      }
      .landing-sub {
        font-size: 17px;
        color: var(--fg-muted);
        max-width: 520px;
        margin: 0 auto 28px;
        line-height: 1.6;
      }
      .landing-cta {
        display: flex;
        gap: 12px;
        justify-content: center;
        flex-wrap: wrap;
      }
      .btn-cta {
        display: inline-block;
        padding: 12px 28px;
        background: var(--accent);
        color: #fff;
        border-radius: 8px;
        font-size: 15px;
        font-weight: 600;
        text-decoration: none;
      }
      .btn-cta:hover { background: var(--accent-light); text-decoration: none; }
      .btn-cta-secondary {
        display: inline-block;
        padding: 12px 28px;
        background: var(--bg-card);
        color: var(--fg);
        border: 1px solid var(--border);
        border-radius: 8px;
        font-size: 15px;
        font-weight: 600;
        text-decoration: none;
      }
      .btn-cta-secondary:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }

      /* Pillars */
      .landing-pillars {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
        padding: 48px 0;
        border-top: 1px solid var(--border);
        border-bottom: 1px solid var(--border);
      }
      .pillar { text-align: center; }
      .pillar-icon { font-size: 32px; margin-bottom: 12px; }
      .pillar h3 { font-size: 16px; font-weight: 700; margin-bottom: 6px; }
      .pillar p { font-size: 13px; color: var(--fg-muted); line-height: 1.6; }

      /* How it works */
      .landing-how {
        padding: 48px 0;
        text-align: center;
      }
      .landing-how h2, .landing-versus h2, .landing-pricing h2, .landing-final h2 {
        font-size: 24px;
        font-weight: 700;
        margin-bottom: 28px;
        letter-spacing: -0.3px;
      }
      .how-steps {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 32px;
        text-align: left;
      }
      .how-step { position: relative; }
      .step-num {
        width: 32px; height: 32px;
        border-radius: 50%;
        background: var(--accent);
        color: #fff;
        font-size: 15px;
        font-weight: 700;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 10px;
      }
      .how-step h4 { font-size: 15px; font-weight: 600; margin-bottom: 4px; }
      .how-step p { font-size: 13px; color: var(--fg-muted); line-height: 1.5; }

      /* Comparison */
      .landing-versus {
        padding: 48px 0;
        border-top: 1px solid var(--border);
      }
      .versus-table {
        border: 1px solid var(--border);
        border-radius: 8px;
        overflow: hidden;
      }
      .versus-row {
        display: grid;
        grid-template-columns: 140px 1fr 1fr;
        font-size: 13px;
      }
      .versus-row > div {
        padding: 10px 16px;
        border-bottom: 1px solid var(--border);
      }
      .versus-row:last-child > div { border-bottom: none; }
      .versus-header {
        background: var(--bg-subtle);
        font-weight: 600;
        font-size: 12px;
        text-transform: uppercase;
        letter-spacing: 0.3px;
        color: var(--fg-muted);
      }
      .versus-label { font-weight: 500; color: var(--fg-muted); }
      .versus-win { color: var(--accent); font-weight: 500; }

      /* Pricing */
      .landing-pricing {
        padding: 48px 0;
        text-align: center;
        border-top: 1px solid var(--border);
      }
      .pricing-cards {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
        max-width: 600px;
        margin: 0 auto;
      }
      .pricing-card {
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: 10px;
        padding: 28px 24px;
        text-align: left;
      }
      .pricing-pro { border-color: var(--accent); }
      .pricing-card h3 { font-size: 18px; font-weight: 700; margin-bottom: 4px; }
      .pricing-price {
        font-size: 36px;
        font-weight: 800;
        color: var(--accent);
        margin-bottom: 16px;
      }
      .pricing-price span { font-size: 16px; font-weight: 500; color: var(--fg-muted); }
      .pricing-features {
        list-style: none;
        padding: 0;
        margin: 0 0 20px;
      }
      .pricing-features li {
        padding: 5px 0;
        font-size: 13px;
        color: var(--fg-muted);
      }
      .pricing-features li::before {
        content: '\2713  ';
        color: var(--accent);
        font-weight: 600;
      }

      /* Final CTA */
      .landing-final {
        padding: 48px 0;
        text-align: center;
        border-top: 1px solid var(--border);
      }
      .landing-final p {
        font-size: 15px;
        color: var(--fg-muted);
        max-width: 480px;
        margin: 0 auto 24px;
        line-height: 1.6;
      }

      @media (max-width: 640px) {
        .landing-tagline { font-size: 28px; }
        .landing-pillars, .how-steps { grid-template-columns: 1fr; }
        .pricing-cards { grid-template-columns: 1fr; }
        .versus-row { grid-template-columns: 100px 1fr 1fr; font-size: 12px; }
        .versus-row > div { padding: 8px 10px; }
      }

      /* ─── Hero ─── */
      .mp-hero {
        text-align: center;
        padding: 32px 0 28px;
      }
      .mp-hero h1 {
        font-size: 28px;
        font-weight: 700;
        letter-spacing: -0.5px;
        margin-bottom: 8px;
      }
      .mp-hero p {
        font-size: 15px;
        color: var(--fg-muted);
        max-width: 540px;
        margin: 0 auto;
      }

      /* ─── Search ─── */
      .mp-search {
        display: flex;
        gap: 8px;
        max-width: 480px;
        margin: 20px auto 32px;
      }
      .mp-search input {
        flex: 1;
        padding: 10px 14px;
        border: 1px solid var(--border);
        border-radius: 6px;
        font-size: 14px;
        font-family: inherit;
        background: var(--bg-card);
        color: var(--fg);
      }
      .mp-search input:focus { outline: none; border-color: var(--accent); }
      .mp-search input::placeholder { color: var(--fg-muted); }

      /* ─── Filters ─── */
      .mp-filter-bar {
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin-bottom: 24px;
      }
      .mp-filter-group {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-wrap: wrap;
      }
      .mp-filter-label {
        font-size: 11px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.3px;
        color: var(--fg-muted);
        min-width: 60px;
      }
      .mp-filters {
        display: flex;
        gap: 6px;
        flex-wrap: wrap;
      }
      .mp-filter {
        padding: 4px 12px;
        border: 1px solid var(--border);
        border-radius: 16px;
        background: var(--bg-card);
        color: var(--fg-muted);
        font-size: 11px;
        font-weight: 500;
        cursor: pointer;
        font-family: inherit;
      }
      .mp-filter:hover { border-color: var(--accent); color: var(--accent); }
      .mp-filter.active { background: var(--accent); color: #fff; border-color: var(--accent); }
      .mp-sort-group { margin-left: auto; }
      .mp-clear-filters {
        align-self: flex-start;
        background: none;
        border: none;
        color: var(--accent);
        font-size: 11px;
        cursor: pointer;
        font-family: inherit;
        padding: 2px 0;
      }
      .mp-clear-filters:hover { text-decoration: underline; }
      .mp-result-count {
        font-size: 12px;
        color: var(--fg-muted);
        margin-bottom: 12px;
      }

      /* ─── Grid ─── */
      .mp-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: 16px;
      }

      /* ─── Card ─── */
      .mp-card {
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: 8px;
        padding: 18px 20px;
        display: flex;
        flex-direction: column;
        gap: 8px;
        transition: border-color 0.15s;
      }
      .mp-card:hover { border-color: var(--accent); }
      .mp-card-name {
        font-size: 15px;
        font-weight: 600;
        color: var(--fg);
      }
      .mp-card-desc {
        font-size: 13px;
        color: var(--fg-muted);
        line-height: 1.4;
        flex: 1;
      }
      .mp-card-meta {
        display: flex;
        gap: 12px;
        align-items: center;
        font-size: 11px;
        color: var(--fg-muted);
      }
      .mp-card-tags {
        display: flex;
        gap: 4px;
        flex-wrap: wrap;
      }
      .mp-tag {
        font-size: 10px;
        color: var(--fg-muted);
        background: var(--bg-subtle);
        padding: 2px 8px;
        border-radius: 10px;
        border: none;
        font-family: inherit;
      }
      .mp-tag-clickable {
        cursor: pointer;
      }
      .mp-tag-clickable:hover {
        background: var(--accent);
        color: #fff;
      }
      .mp-card-actions {
        display: flex;
        justify-content: flex-end;
        padding-top: 8px;
        border-top: 1px solid var(--border);
      }
      .mp-install-btn {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 6px 14px;
        background: var(--accent);
        color: #fff;
        border: none;
        border-radius: 4px;
        font-size: 12px;
        font-weight: 500;
        cursor: pointer;
        font-family: inherit;
      }
      .mp-install-btn:hover { background: var(--accent-light); }

      /* ─── Detail ─── */
      .mp-detail {
        max-width: 720px;
      }
      .mp-detail-header {
        margin-bottom: 20px;
        padding-bottom: 16px;
        border-bottom: 1px solid var(--border);
      }
      .mp-detail-header h2 {
        font-size: 22px;
        font-weight: 700;
        margin-bottom: 4px;
      }
      .mp-detail-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 16px;
        font-size: 12px;
        color: var(--fg-muted);
        margin-top: 8px;
      }
      .mp-detail-meta strong { color: var(--fg); font-weight: 500; }
      .mp-detail-desc {
        font-size: 14px;
        line-height: 1.6;
        color: var(--fg);
        margin-bottom: 20px;
      }
      .mp-detail-section {
        margin-bottom: 20px;
      }
      .mp-detail-section h3 {
        font-size: 12px;
        text-transform: uppercase;
        letter-spacing: 0.4px;
        color: var(--fg-muted);
        margin-bottom: 8px;
      }
      .mp-back {
        display: inline-block;
        margin-bottom: 16px;
        font-size: 13px;
        color: var(--fg-muted);
      }
      .mp-back:hover { color: var(--accent); }
      .mp-json-url {
        display: flex;
        align-items: center;
        gap: 8px;
        background: var(--bg-subtle);
        padding: 8px 12px;
        border-radius: 6px;
        font-family: ui-monospace, 'SF Mono', Menlo, monospace;
        font-size: 12px;
        word-break: break-all;
      }
      .mp-copy-btn {
        padding: 3px 10px;
        border: 1px solid var(--border);
        border-radius: 4px;
        background: var(--bg-card);
        color: var(--fg-muted);
        font-size: 11px;
        font-family: inherit;
        cursor: pointer;
        white-space: nowrap;
        flex-shrink: 0;
      }
      .mp-copy-btn:hover { border-color: var(--accent); color: var(--accent); }

      /* ─── Readme ─── */
      .mp-readme {
        margin-bottom: 24px;
        padding: 20px 24px;
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: 8px;
        font-size: 14px;
        line-height: 1.7;
        color: var(--fg);
      }
      .mp-readme h2 { font-size: 18px; font-weight: 700; margin: 20px 0 8px; }
      .mp-readme h3 { font-size: 15px; font-weight: 600; margin: 16px 0 6px; }
      .mp-readme h4 { font-size: 13px; font-weight: 600; margin: 12px 0 4px; }
      .mp-readme p { margin: 8px 0; }
      .mp-readme ul, .mp-readme ol { margin: 8px 0; padding-left: 24px; }
      .mp-readme li { margin: 4px 0; }
      .mp-readme code {
        background: var(--bg-subtle);
        padding: 1px 5px;
        border-radius: 3px;
        font-family: ui-monospace, 'SF Mono', Menlo, monospace;
        font-size: 0.9em;
      }
      .mp-readme pre {
        background: var(--bg-subtle);
        padding: 12px 16px;
        border-radius: 6px;
        overflow-x: auto;
        margin: 12px 0;
        font-size: 12px;
        line-height: 1.5;
      }
      .mp-readme pre code {
        background: none;
        padding: 0;
        font-size: inherit;
      }
      .mp-readme table {
        width: 100%;
        border-collapse: collapse;
        margin: 12px 0;
        font-size: 13px;
      }
      .mp-readme th, .mp-readme td {
        padding: 6px 12px;
        border: 1px solid var(--border);
        text-align: left;
      }
      .mp-readme th {
        background: var(--bg-subtle);
        font-weight: 600;
        font-size: 12px;
      }
      .mp-readme blockquote {
        margin: 12px 0;
        padding: 8px 16px;
        border-left: 3px solid var(--accent);
        color: var(--fg-muted);
        font-size: 13px;
      }
      .mp-readme hr { border: none; border-top: 1px solid var(--border); margin: 20px 0; }
      .mp-readme a { color: var(--accent); }
      .mp-readme strong { font-weight: 600; }

      /* ─── Stars + stats ─── */
      .mp-stars {
        display: inline-flex;
        align-items: center;
        gap: 2px;
        color: var(--accent);
        font-size: 12px;
      }
      .mp-rating-num { font-size: 11px; font-weight: 600; }
      .mp-rating-count { font-size: 10px; color: var(--fg-muted); }
      .mp-stats {
        display: flex;
        justify-content: center;
        gap: 24px;
        padding: 0 0 20px;
        font-size: 13px;
        color: var(--fg-muted);
      }
      .mp-stat strong { color: var(--fg); font-weight: 700; }

      /* ─── Empty / loading ─── */
      .mp-empty {
        text-align: center;
        padding: 48px 20px;
        color: var(--fg-muted);
        font-size: 14px;
      }
      .mp-loading {
        text-align: center;
        padding: 48px 20px;
        color: var(--fg-muted);
        font-size: 14px;
      }

      /* ─── Footer ─── */
      .mp-footer {
        margin-top: 48px;
        padding-top: 20px;
        border-top: 1px solid var(--border);
        text-align: center;
        font-size: 12px;
        color: var(--fg-muted);
      }