/* ══════════════════════════════════════════════════════════════════════
   marketplace.css — Marketplace page styles
   Requires base.css loaded first.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Hero ──────────────────────────────────────────────────────────── */
.hero{position:relative;z-index:1;width:100%;background:var(--bg);
  overflow:hidden;animation:fadeUp .8s ease both}
.hero-title{font-size:48px;font-weight:800;line-height:1.08;letter-spacing:-2.5px;margin-bottom:20px}
.hero-sub{font-size:16px;color:var(--text-2);line-height:1.7;max-width:520px;margin:0 auto 0}

/* ── Category bar ──────────────────────────────────────────────────── */
.cat-bar{display:flex;gap:0;border:1px solid var(--border);width:fit-content}
.cat-btn{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:0.5px;
  padding:10px 20px;border:none;background:none;color:var(--text-3);cursor:pointer;transition:all .15s}
.cat-btn+.cat-btn{border-left:1px solid var(--border)}
.cat-btn.active{color:var(--text);background:var(--surface-alt)}
.cat-btn:hover{color:var(--text)}

/* ── API grid ──────────────────────────────────────────────────────── */
.api-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--border);border:1px solid var(--border)}
a.api-card{text-decoration:none;color:inherit;cursor:pointer}
.api-card{background:var(--bg);padding:24px;display:flex;gap:16px;
  transition:background .15s;align-items:flex-start}
.api-card:hover{background:var(--surface-alt)}
.api-card-icon{flex-shrink:0;color:var(--text-3);width:24px;height:24px;padding-top:2px}
.api-card-body{min-width:0;flex:1}
.api-card-header{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.api-card-name{font-size:15px;font-weight:700;letter-spacing:-0.3px}
.api-card-desc{font-size:13px;color:var(--text-2);line-height:1.5;margin-bottom:8px}
.api-card-url{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--text-3);
  display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  padding:3px 6px;border:1px solid var(--border);background:var(--surface-alt);width:fit-content;max-width:100%}
.auth-badge{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:0.5px;
  padding:2px 8px;border:1px solid var(--border);color:var(--text-3);white-space:nowrap;
  text-transform:uppercase;font-weight:500}

/* ── Footer ────────────────────────────────────────────────────────── */
.marketplace-footer{text-align:center;padding:48px 0 0;display:flex;flex-direction:column;
  align-items:center;gap:16px}
.marketplace-footer-text{font-size:14px;color:var(--text-2);line-height:1.6;max-width:480px}

/* ══════════════════════════════════════════════════════════════════════
   APP DETAIL PAGE
   ══════════════════════════════════════════════════════════════════════ */

/* ── Back link ─────────────────────────────────────────────────────── */
.app-back{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--text-3);
  letter-spacing:0.5px;transition:color .15s;display:inline-block;margin-bottom:32px}
.app-back:hover{color:var(--text)}

/* ── App header ────────────────────────────────────────────────────── */
.app-header{display:flex;gap:24px;align-items:flex-start}
.app-header-icon{flex-shrink:0;color:var(--text-3);width:32px;height:32px;padding-top:4px}
.app-header-info{min-width:0;flex:1}
.app-header-row{display:flex;align-items:center;gap:14px;margin-bottom:8px}
.app-header-name{font-size:32px;font-weight:800;letter-spacing:-1.5px;line-height:1}
.app-header-tagline{font-size:15px;color:var(--text-2);line-height:1.6;margin-bottom:12px;max-width:640px}
.app-header-url{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--text-3);
  padding:4px 8px;border:1px solid var(--border);background:var(--surface-alt);display:inline-block}
.auth-badge--lg{font-size:10px;padding:3px 10px}

/* ── Overview ──────────────────────────────────────────────────────── */
.app-overview{max-width:720px}
.app-overview p{font-size:15px;color:var(--text-2);line-height:1.7;margin-bottom:16px}
.app-overview p:last-child{margin-bottom:0}
.app-overview code{font-size:12px}

/* ── Auth steps ────────────────────────────────────────────────────── */
.auth-steps{display:grid;grid-template-columns:1fr 280px;gap:48px;align-items:start}
.auth-steps-list{list-style:none;counter-reset:step}
.auth-steps-list li{counter-increment:step;font-size:14px;color:var(--text-2);line-height:1.7;
  padding:12px 0;border-bottom:1px solid var(--border);display:flex;gap:16px;align-items:baseline}
.auth-steps-list li::before{content:counter(step);font-family:'JetBrains Mono',monospace;
  font-size:11px;font-weight:600;color:var(--text-3);min-width:20px;text-align:right}
.auth-steps-list li:last-child{border-bottom:none}
.auth-steps-list li strong{color:var(--text);font-weight:600}
.auth-steps-list li code{font-size:11px}
.auth-meta{display:flex;flex-direction:column;gap:0;border:1px solid var(--border)}
.auth-meta-item{padding:14px 16px;display:flex;flex-direction:column;gap:4px}
.auth-meta-item+.auth-meta-item{border-top:1px solid var(--border)}
.auth-meta-label{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:1px;
  color:var(--text-3);text-transform:uppercase}
.auth-meta-item code{font-size:12px;background:none;border:none;padding:0;color:var(--text)}

/* ── Endpoints table ───────────────────────────────────────────────── */
.endpoints-table-wrap{overflow-x:auto}
.endpoints-table{width:100%;border-collapse:collapse;border:1px solid var(--border)}
.endpoints-table th{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:1px;
  text-transform:uppercase;color:var(--text-3);padding:12px 16px;text-align:left;
  border-bottom:1px solid var(--border);background:var(--surface-alt);font-weight:500}
.endpoints-table td{padding:10px 16px;border-bottom:1px solid var(--border);font-size:13px;
  color:var(--text-2);vertical-align:middle}
.endpoints-table tr:last-child td{border-bottom:none}
.endpoints-table tr:hover td{background:var(--surface-alt)}
.ep-path{font-family:'JetBrains Mono',monospace;font-size:12px;background:none;border:none;
  padding:0;color:var(--text);white-space:nowrap}
.ep-desc{color:var(--text-2)}

/* ── Method badges ─────────────────────────────────────────────────── */
.method-badge{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:0.5px;
  padding:2px 8px;font-weight:600;display:inline-block;text-transform:uppercase;
  border:1px solid var(--border);min-width:48px;text-align:center}
.method-badge--get{color:var(--green);border-color:color-mix(in srgb,var(--green) 30%,var(--border))}
.method-badge--post{color:var(--blue);border-color:color-mix(in srgb,var(--blue) 30%,var(--border))}
.method-badge--put{color:var(--amber);border-color:color-mix(in srgb,var(--amber) 30%,var(--border))}
.method-badge--patch{color:var(--amber);border-color:color-mix(in srgb,var(--amber) 30%,var(--border))}
.method-badge--delete{color:var(--red);border-color:color-mix(in srgb,var(--red) 30%,var(--border))}

/* ── Use case grid ─────────────────────────────────────────────────── */
.use-case-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;
  background:var(--border);border:1px solid var(--border)}
.use-case-card{background:var(--bg);padding:24px;transition:background .15s}
.use-case-card:hover{background:var(--surface-alt)}
.use-case-title{font-size:14px;font-weight:700;letter-spacing:-0.2px;margin-bottom:6px}
.use-case-desc{font-size:13px;color:var(--text-2);line-height:1.5}

/* ── Footer nav ────────────────────────────────────────────────────── */
.app-footer-nav{display:flex;justify-content:space-between;align-items:center}

/* ── Responsive ────────────────────────────────────────────────────── */
@media(max-width:1024px){
  .api-grid{grid-template-columns:repeat(2,1fr)}
  .auth-steps{grid-template-columns:1fr}
}
@media(max-width:768px){
  .hero-title{font-size:36px;letter-spacing:-1.5px}
  .api-grid{grid-template-columns:1fr}
  .cat-bar{flex-wrap:wrap}
  .app-header-name{font-size:24px;letter-spacing:-1px}
  .use-case-grid{grid-template-columns:1fr}
  .endpoints-table th:nth-child(3),.endpoints-table td:nth-child(3){display:none}
}
@media(max-width:640px){
  .hero-title{font-size:30px;letter-spacing:-1.2px}
  .api-card{padding:16px 20px}
  .cat-btn{padding:8px 14px;font-size:10px}
  .app-header{flex-direction:column;gap:16px}
  .app-header-name{font-size:22px}
  .auth-steps-list li{font-size:13px}
}