/* index.css — extracted from inline <style> blocks. Generated by scripts/h1-extract.mjs */
body { min-height: 100vh; }

      .sc-index-wrap { position: relative; z-index: 1; max-width: 960px; margin: 0 auto; padding: 80px 24px 60px; }

      /* Header */
      .sc-index-header { margin-bottom: 48px; }
      .sc-index-header .badge { display: inline-block; background: var(--green); color: #000; font-weight: 700; font-size: 10px; padding: 4px 14px; text-transform: uppercase; letter-spacing: 3px; margin-bottom: 16px; }
      .sc-index-header h1 { font-size: clamp(24px, 4vw, 36px); color: var(--green); margin-bottom: 12px; line-height: 1.3; text-shadow: 0 0 20px var(--green-glow); }
      .sc-index-header .subtitle { color: var(--text-dim); font-size: 14px; line-height: 1.6; max-width: 600px; }

      /* Card grid */
      .showcase-grid { display: grid; grid-template-columns: 1fr; gap: 24px; }

      .showcase-card { border: 1px solid var(--border); background: var(--bg-card); transition: border-color 0.2s, box-shadow 0.2s; overflow: hidden; text-decoration: none; display: block; }
      .showcase-card:hover { border-color: var(--green-dark); box-shadow: 0 0 30px var(--green-glow); }

      .card-preview { width: 100%; height: 240px; background: var(--bg-terminal); overflow: hidden; border-bottom: 1px solid var(--border); position: relative; display: flex; align-items: center; justify-content: center; }
      .card-preview img { width: 100%; height: 100%; object-fit: cover; }
      .card-preview .placeholder-icon { font-size: 64px; opacity: 0.15; }

      .card-body { padding: 24px; }
      .card-prompt { font-size: 11px; color: var(--green); text-transform: uppercase; letter-spacing: 2px; margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
      .card-prompt::before { content: '$'; opacity: 0.5; }
      .card-title { font-size: 18px; font-weight: 700; color: var(--white); margin-bottom: 8px; line-height: 1.3; }
      .card-meta { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 16px; }

      /* Version pills */
      .card-versions { display: flex; gap: 8px; flex-wrap: wrap; }
      .version-pill { font-size: 9px; font-weight: 700; padding: 3px 10px; text-transform: uppercase; letter-spacing: 1px; border: 1px solid var(--border); color: var(--text-muted); }
      .version-pill.filled { border-color: var(--green-dark); color: var(--green-dim); }
      .version-pill.filled.best { border-color: var(--green); color: var(--green); background: rgba(0, 255, 65, 0.06); }

      /* Composite score badge */
      .card-score { position: absolute; top: 12px; right: 12px; background: rgba(0, 0, 0, 0.8); border: 1px solid var(--border); padding: 6px 12px; font-size: 11px; font-weight: 700; letter-spacing: 1px; }
      .card-score.great { color: var(--green); border-color: var(--green-dark); }
      .card-score.good { color: var(--green-dim); border-color: var(--green-dark); }
      .card-score.mid { color: #ffaa00; border-color: rgba(255, 170, 0, 0.3); }
      .card-score.low { color: var(--red); border-color: rgba(255, 51, 51, 0.3); }

      /* Loading / empty */
      .loading-msg { text-align: center; padding: 60px 24px; color: var(--text-muted); font-size: 13px; }

      @media (max-width: 600px) {
        .card-preview { height: 180px; }
        .card-body { padding: 16px; }
        .card-title { font-size: 16px; }
      }