/* Orbis Launchpad — /marketplace/launch */

*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
:root {
    --primary: #7c3aed;
    --primary-hover: #6d28d9;
    --bg: #0a0a1a;
    --bg-card: rgba(20,20,40,0.95);
    --border: rgba(255,255,255,0.08);
    --border-hover: rgba(124,58,237,0.4);
    --text: #ffffff;
    --text-muted: #9ca3af;
    --text-dim: #94a3b8;
    --success: #10b981;
    --danger: #ef4444;
    --warning: #f59e0b;
    /* Display face for the LAUNCHPAD wordmark only — body copy stays Inter.
       Swap here AND in the <link> in launch.html. Alternatives that suit the
       brand: 'Space Grotesk' (techier), 'Sora' (squarer). */
    --display-font: 'Outfit', 'Inter', sans-serif;
}
body { font-family:'Inter',sans-serif; background:var(--bg); color:var(--text); min-height:100vh; }
::-webkit-scrollbar { width:6px; height:6px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:rgba(124,58,237,0.3); border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background:rgba(124,58,237,0.5); }

/* Full-bleed, matching the home page's .table-area (24px gutters, no max-width)
   rather than the narrower 1200px shell the giveaways page uses. */
.container { width:100%; padding:1.75rem 24px 3rem; }
@media (max-width:640px) { .container { padding:1.25rem 16px 2rem; } }

/* ── Hero ──────────────────────────────────────────────────────────────── */
/* A slim band, not a panel. The drops are the page — the hero used to run
   ~230px before the tabs even started, which pushed the first row of cards
   under the fold. Title, stats and strapline now share about 110px. */
.lp-hero {
    position:relative; overflow:hidden;
    /* Two columns again — the founder CTA belongs up here. Kept at the compact
       height though: the win was shrinking the band, not moving the panel. */
    display:grid; grid-template-columns:minmax(0,1fr) minmax(0,440px); gap:1.5rem;
    align-items:center;
    background:linear-gradient(135deg, rgba(30,20,60,0.9), rgba(12,12,28,0.95));
    border:1px solid var(--border); border-radius:16px;
    padding:1.1rem 1.4rem;
    margin-bottom:1rem;
}
/* Bleeds off the right edge, behind the text. */
.lp-planet {
    position:absolute; right:-60px; top:50%; transform:translateY(-50%);
    width:min(300px, 24vw); height:auto; pointer-events:none; z-index:0;
    opacity:0.55;
}
.lp-hero-left, .lp-enquire { position:relative; z-index:1; }
.lp-hero-main { display:flex; align-items:baseline; gap:1.75rem; flex-wrap:wrap; }
.lp-hero-title {
    font-family:var(--display-font);
    font-size:clamp(1.5rem, 2.6vw, 2.1rem); font-weight:900; letter-spacing:-0.01em;
    line-height:1; margin:0;
    background:linear-gradient(100deg,#fff 25%,#c4b5fd 75%);
    -webkit-background-clip:text; background-clip:text; color:transparent;
}
.lp-hero-sub { color:var(--text-muted); font-size:0.83rem; line-height:1.5; margin-top:0.4rem; max-width:62ch; }

/* Founder CTA, back in the hero. Sits over the planet, so it needs a solid
   enough backing to stay readable against the ring. */
.lp-enquire {
    display:flex; align-items:center; gap:1rem; flex-wrap:wrap; justify-content:space-between;
    padding:0.85rem 1rem;
    background:rgba(10,10,26,0.8); backdrop-filter:blur(6px);
    border:1px solid rgba(124,58,237,0.32); border-radius:12px;
}
.lp-enquire h2 {
    font-size:0.82rem; font-weight:800; letter-spacing:0.03em; text-transform:uppercase;
    color:#c4b5fd; margin-bottom:0.2rem;
}
.lp-enquire p { font-size:0.78rem; color:var(--text-muted); line-height:1.45; }
.lp-enquire-btn {
    display:inline-flex; align-items:center; gap:0.55rem;
    background:linear-gradient(135deg,var(--primary),#a855f7); color:#fff;
    border:none; border-radius:10px; padding:0.7rem 1.15rem;
    font-family:inherit; font-size:0.85rem; font-weight:700; cursor:pointer;
    transition:transform 0.15s, box-shadow 0.15s; white-space:nowrap;
}
.lp-enquire-btn:hover { transform:translateY(-1px); box-shadow:0 10px 24px -10px rgba(124,58,237,0.8); }

@media (max-width:1150px) { .lp-hero { grid-template-columns:minmax(0,1fr) minmax(0,360px); } }
@media (max-width:860px) {
    .lp-hero { grid-template-columns:1fr; padding:1rem 1.1rem; }
    .lp-planet { display:none; }
}

/* ── Tabs ──────────────────────────────────────────────────────────────── */
.tab-bar {
    display:flex; gap:4px; background:rgba(0,0,0,0.3); border-radius:10px; padding:4px;
    margin-bottom:1.5rem; overflow-x:auto;
}
.tab-btn {
    padding:0.6rem 1.2rem; background:transparent; border:none; border-radius:8px;
    color:var(--text-muted); font-size:0.85rem; font-weight:600;
    cursor:pointer; font-family:inherit; transition:all 0.2s; white-space:nowrap;
}
.tab-btn:hover { color:rgba(255,255,255,0.85); }
.tab-btn.active { background:rgba(124,58,237,0.2); color:#a78bfa; }
.tab-btn .tab-count {
    display:inline-block; margin-left:6px; padding:1px 6px; border-radius:6px;
    background:rgba(255,255,255,0.08); font-size:0.72rem; color:var(--text-dim);
}
.tab-btn.active .tab-count { background:rgba(124,58,237,0.35); color:#ddd6fe; }
.tab-panel { display:none; }
.tab-panel.active { display:block; }

/* ── Grid + cards ──────────────────────────────────────────────────────── */
/* Fixed 6 across, not auto-fill — on a full-bleed container auto-fill fitted 7
   on a wide monitor, which is denser than the reference design and made the art
   too small to read. Stepping down by breakpoint keeps the card size stable. */
.lp-grid { display:grid; grid-template-columns:repeat(6, minmax(0,1fr)); gap:1rem; }
@media (max-width:1500px) { .lp-grid { grid-template-columns:repeat(5, minmax(0,1fr)); } }
@media (max-width:1200px) { .lp-grid { grid-template-columns:repeat(4, minmax(0,1fr)); } }
@media (max-width:900px)  { .lp-grid { grid-template-columns:repeat(3, minmax(0,1fr)); } }
@media (max-width:640px)  { .lp-grid { grid-template-columns:repeat(2, minmax(0,1fr)); gap:0.75rem; } }

.lp-card {
    background:var(--bg-card); border:1px solid var(--border); border-radius:14px;
    overflow:hidden; display:flex; flex-direction:column; transition:all 0.2s;
}
.lp-card:hover { border-color:var(--border-hover); transform:translateY(-2px); box-shadow:0 12px 28px -14px rgba(124,58,237,0.45); }

.lp-thumb { position:relative; aspect-ratio:1/1; background:rgba(255,255,255,0.04); overflow:hidden; display:block; }
.lp-thumb img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.lp-badge {
    position:absolute; top:10px; left:10px; z-index:2;
    padding:4px 9px; border-radius:6px; font-size:0.68rem; font-weight:800;
    letter-spacing:0.06em; text-transform:uppercase; backdrop-filter:blur(6px);
}
.lp-badge.live { background:rgba(16,185,129,0.85); color:#04150f; }
.lp-badge.soon { background:rgba(124,58,237,0.85); color:#fff; }
.lp-badge.ended { background:rgba(0,0,0,0.65); color:var(--text-dim); border:1px solid var(--border); }
.lp-badge.soldout { background:rgba(251,191,36,0.85); color:#241a00; }
.lp-live-dot {
    display:inline-block; width:6px; height:6px; border-radius:50%; background:#04150f;
    margin-right:5px; vertical-align:middle; animation:lpPulse 1.6s ease-in-out infinite;
}
@keyframes lpPulse { 0%,100% { opacity:1; } 50% { opacity:0.25; } }

.lp-body { padding:0.85rem 0.9rem 0.9rem; display:flex; flex-direction:column; gap:0.55rem; flex:1; }
.lp-name {
    font-size:0.95rem; font-weight:700; line-height:1.25;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
/* One stat per row, label left / value right.
   Laying these out inline meant a card whose numbers happened to be wider
   ("Supply 3,500  Price 0.04 SOL") wrapped to two lines while its neighbour
   stayed on one — which pushed everything below it down and left the buttons
   visibly out of line across the row. A fixed row per stat cannot wrap, so
   every card in a tab has the same height above its buttons. */
.lp-stats { display:flex; flex-direction:column; gap:2px; font-size:0.75rem; }
.lp-stats > div { display:flex; align-items:baseline; justify-content:space-between; gap:0.5rem; }
.lp-stats dt { color:rgba(255,255,255,0.7); white-space:nowrap; }
.lp-stats dd { color:var(--text); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lp-stats .cd-value { color:#c4b5fd; font-variant-numeric:tabular-nums; }
.lp-stats .cur-icon { width:11px; height:11px; vertical-align:-1px; margin-right:4px; }

/* Supply progress */
.lp-progress { display:flex; flex-direction:column; gap:4px; }
/* Thicker and brighter than the card's purple furniture, with a min-width so a
   barely-started mint still shows a bar. At 5px and the same purple as every
   border, The Strain Lab's 2%% was effectively invisible. */
.lp-progress-bar { height:7px; border-radius:4px; background:rgba(255,255,255,0.10); overflow:hidden; }
.lp-progress-fill { height:100%; border-radius:4px; min-width:3px; background:linear-gradient(90deg,#a855f7,#22d3ee); transition:width 0.4s; }
.lp-progress-text { font-size:0.72rem; color:rgba(255,255,255,0.7); display:flex; justify-content:space-between; }

/* Countdown */
.lp-countdown {
    display:flex; gap:4px; align-items:baseline;
    font-variant-numeric:tabular-nums; font-size:0.82rem; font-weight:700; color:#c4b5fd;
}
.lp-countdown .cd-label { font-size:0.7rem; font-weight:500; color:var(--text-dim); text-transform:uppercase; letter-spacing:0.05em; }

/* Card actions */
.lp-actions { margin-top:auto; display:flex; flex-direction:column; gap:0.45rem; }
.lp-btn {
    display:flex; align-items:center; justify-content:center; gap:0.4rem;
    width:100%; padding:0.6rem 0.8rem; border-radius:9px; border:1px solid transparent;
    font-family:inherit; font-size:0.82rem; font-weight:700; cursor:pointer;
    text-decoration:none; transition:all 0.15s; white-space:nowrap;
}
/* Always rendered alongside a Get WL button, even when there is little to say,
   so a card with spot info and one without still line up. */
.lp-wl-left { font-size:0.7rem; color:rgba(255,255,255,0.68); text-align:center; margin-top:-0.2rem; min-height:1em; }
.lp-btn.primary { background:linear-gradient(135deg,var(--primary),#a855f7); color:#fff; }
.lp-btn.primary:hover { filter:brightness(1.1); }
.lp-btn.ghost { background:rgba(255,255,255,0.05); border-color:var(--border); color:var(--text-muted); }
.lp-btn.ghost:hover { border-color:var(--border-hover); color:#fff; }
.lp-btn.orbs { background:rgba(124,58,237,0.15); border-color:rgba(124,58,237,0.4); color:#c4b5fd; }
.lp-btn.orbs:hover:not(:disabled) { background:rgba(124,58,237,0.28); color:#fff; }
.lp-btn:disabled { opacity:0.5; cursor:not-allowed; }
.lp-btn img.orb-icon { width:14px; height:14px; }

.lp-socials { display:flex; gap:0.5rem; }
.lp-socials a {
    width:28px; height:28px; border-radius:7px; display:flex; align-items:center; justify-content:center;
    background:rgba(255,255,255,0.05); border:1px solid var(--border); color:var(--text-dim);
    transition:all 0.15s;
}
.lp-socials a:hover { color:#fff; border-color:var(--border-hover); }
.lp-socials svg { width:14px; height:14px; }

.empty-state {
    text-align:center; padding:3.5rem 1rem; color:var(--text-muted); font-size:0.9rem;
    background:rgba(255,255,255,0.02); border:1px dashed var(--border); border-radius:14px;
}
.lp-loading { text-align:center; padding:3rem 1rem; color:var(--text-dim); font-size:0.88rem; }

/* Skeletons — the backend call is a Railway round-trip, so first paint waits. */
.lp-skel { background:var(--bg-card); border:1px solid var(--border); border-radius:14px; overflow:hidden; }
.lp-skel-thumb { aspect-ratio:1/1; background:linear-gradient(100deg, rgba(255,255,255,0.04) 30%, rgba(255,255,255,0.09) 50%, rgba(255,255,255,0.04) 70%); background-size:220% 100%; animation:lpShimmer 1.4s linear infinite; }
.lp-skel-line { height:10px; margin:0.75rem 0.9rem; border-radius:5px; background:rgba(255,255,255,0.06); }
.lp-skel-line.short { width:50%; }
@keyframes lpShimmer { to { background-position:-220% 0; } }

/* ── Modals ────────────────────────────────────────────────────────────── */
.lp-modal-overlay {
    position:fixed; inset:0; z-index:2000; background:rgba(5,5,15,0.8); backdrop-filter:blur(4px);
    display:flex; align-items:center; justify-content:center; padding:1.25rem; overflow-y:auto;
}
.lp-modal {
    position:relative; width:100%; max-width:560px; margin:auto;
    background:linear-gradient(160deg, rgba(28,22,54,0.98), rgba(14,14,30,0.98));
    border:1px solid rgba(124,58,237,0.3); border-radius:16px; padding:1.5rem;
}
.lp-modal.narrow { max-width:420px; }
.lp-modal-close {
    position:absolute; top:0.75rem; right:0.85rem; width:30px; height:30px; border-radius:8px;
    background:rgba(255,255,255,0.05); border:1px solid var(--border); color:var(--text-muted);
    font-size:1.1rem; line-height:1; cursor:pointer; font-family:inherit;
}
.lp-modal-close:hover { color:#fff; }
.lp-modal h3 { font-size:1.15rem; font-weight:800; margin-bottom:0.35rem; }
.lp-modal .lp-modal-sub { font-size:0.83rem; color:var(--text-muted); line-height:1.5; margin-bottom:1.1rem; }

.lp-form { display:grid; grid-template-columns:1fr 1fr; gap:0.75rem; }
.lp-field { display:flex; flex-direction:column; gap:0.3rem; }
.lp-field.full { grid-column:1 / -1; }
.lp-field label { font-size:0.75rem; color:var(--text-dim); font-weight:600; }
.lp-field label .req { color:#a78bfa; }
.lp-field input, .lp-field textarea, .lp-field select {
    background:rgba(0,0,0,0.35); border:1px solid var(--border); border-radius:8px;
    padding:0.55rem 0.7rem; color:#fff; font-family:inherit; font-size:0.85rem; width:100%;
}
.lp-field input:focus, .lp-field textarea:focus, .lp-field select:focus { outline:none; border-color:var(--border-hover); }
.lp-field textarea { min-height:86px; resize:vertical; }
.lp-field select option { background:#141428; }
.lp-form-actions { grid-column:1 / -1; display:flex; gap:0.6rem; justify-content:flex-end; margin-top:0.4rem; }
.lp-form-error { grid-column:1 / -1; font-size:0.8rem; color:#fca5a5; min-height:1rem; }
@media (max-width:560px) { .lp-form { grid-template-columns:1fr; } }

/* WL spend modal */
.lp-wl-summary { display:flex; flex-direction:column; gap:0; margin:1rem 0; }
.lp-wl-summary > div {
    display:flex; justify-content:space-between; gap:1rem;
    padding:0.55rem 0; border-bottom:1px solid var(--border); font-size:0.85rem;
}
.lp-wl-summary > div:last-child { border-bottom:none; }
.lp-wl-summary dt { color:var(--text-dim); }
.lp-wl-summary dd { font-weight:700; }
.lp-wl-summary .cost dd { color:#c4b5fd; }
.lp-wl-summary .after dd.short { color:#fca5a5; }
.lp-wl-note {
    font-size:0.78rem; color:var(--text-muted); line-height:1.5;
    background:rgba(124,58,237,0.08); border:1px solid rgba(124,58,237,0.2);
    border-radius:9px; padding:0.65rem 0.75rem; margin-bottom:1rem;
}
.lp-wl-note strong { color:#ddd6fe; }
.lp-modal-actions { display:flex; gap:0.6rem; justify-content:flex-end; }

/* WL offer chip on an upcoming card */
.lp-wl-chip {
    display:flex; align-items:center; gap:0.4rem; font-size:0.74rem; color:#c4b5fd;
    background:rgba(124,58,237,0.12); border:1px solid rgba(124,58,237,0.28);
    border-radius:8px; padding:0.35rem 0.5rem;
}
.lp-wl-chip.done { color:#6ee7b7; background:rgba(16,185,129,0.12); border-color:rgba(16,185,129,0.3); }

/* Toast */
.toast {
    position:fixed; bottom:1.5rem; left:50%; transform:translateX(-50%) translateY(150%);
    background:rgba(20,20,40,0.98); border:1px solid var(--border); border-radius:10px;
    padding:0.75rem 1.15rem; font-size:0.85rem; z-index:3000; transition:transform 0.25s;
    max-width:90vw;
}
.toast.show { transform:translateX(-50%) translateY(0); }
.toast.error { border-color:rgba(239,68,68,0.5); color:#fca5a5; }
.toast.success { border-color:rgba(16,185,129,0.5); color:#6ee7b7; }