.app { max-width: 1000px; margin: 0 auto; padding: var(--sp-7) var(--sp-5) var(--sp-8); }

.hero { text-align: center; margin-bottom: var(--sp-8); }
.hero .wordmark { font-size: var(--t-3xl); display: block; }
.hero .tag { display: inline-block; margin-top: var(--sp-3); border: none; color: var(--ink-dim); letter-spacing: 0.25em; text-transform: uppercase; font-size: var(--t-xs); }

.lib-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--sp-4); }
.lib-head h2 { font-size: var(--t-lg); margin: 0; }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--sp-4); }

.card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
  display: flex; flex-direction: column; gap: var(--sp-3);
}
.card h3 { margin: 0; font-size: var(--t-md); }
.card .meta { font-size: var(--t-xs); color: var(--ink-faint); }
.card .badges { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.card .badge { font-size: var(--t-xs); padding: 2px 8px; border-radius: 999px; border: 1px solid var(--border); color: var(--ink-dim); }
.card .badge.bundled { border-color: var(--gold); color: var(--gold); }
.card .actions { display: flex; gap: var(--sp-2); margin-top: auto; flex-wrap: wrap; }

.empty { color: var(--ink-faint); padding: var(--sp-6); text-align: center; border: 1px dashed var(--border); border-radius: var(--radius-lg); }

/* Launch dialog */
dialog {
  background: var(--navy-800); color: var(--ink); border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg); padding: var(--sp-6); max-width: 460px; width: 90%;
  box-shadow: var(--shadow);
}
dialog::backdrop { background: rgba(3, 6, 18, 0.7); backdrop-filter: blur(2px); }
dialog h3 { margin-top: 0; }
.team-inputs { display: flex; flex-direction: column; gap: var(--sp-2); margin: var(--sp-4) 0; }
.dialog-actions { display: flex; justify-content: flex-end; gap: var(--sp-2); margin-top: var(--sp-5); }