:root {
  --bg: #0b1017;
  --bg2: #121a24;
  --card: #16202c;
  --line: #26323f;
  --txt: #e8eff6;
  --muted: #8ea0b2;
  --accent: #4cc2f1;   /* Verge brand "Picton Blue" */
  --accent2: #1aa3e0;  /* deeper Verge blue for gradients */
  --danger: #ff6b6b;
  --ok: #38d39f;       /* green kept for "confirmed" success semantics */
  --radius: 12px;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: radial-gradient(1200px 600px at 50% -200px, #12456633, transparent), var(--bg);
  color: var(--txt);
  min-height: 100vh;
}

/* Header */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 24px; border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 14px; }
.logo {
  width: 44px; height: 44px; border-radius: 12px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: #052436; font-weight: 800; font-size: 26px;
  display: grid; place-items: center;
}
.brand h1 { margin: 0; font-size: 20px; letter-spacing: .3px; }
.tagline { margin: 2px 0 0; font-size: 12px; color: var(--muted); }
.netinfo { font-size: 12px; color: var(--muted); text-align: right; line-height: 1.5; }

/* Tabs */
.tabs { display: flex; gap: 6px; padding: 14px 24px 0; max-width: 980px; margin: 0 auto; }
.tab {
  background: none; border: none; color: var(--muted); font-size: 15px; font-weight: 600;
  padding: 10px 18px; cursor: pointer; border-radius: 10px 10px 0 0; border-bottom: 2px solid transparent;
}
.tab.active { color: var(--txt); border-bottom-color: var(--accent); }

main { max-width: 980px; margin: 0 auto; padding: 18px 24px 40px; }
.panel { display: none; }
.panel.active { display: block; }

/* Cards */
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px; margin-bottom: 20px;
}
.card h2 { margin: 0 0 14px; font-size: 17px; }

/* Subtabs */
.subtabs { display: inline-flex; background: var(--bg2); border-radius: 10px; padding: 4px; margin-bottom: 18px; }
.subtab {
  background: none; border: none; color: var(--muted); padding: 8px 20px; border-radius: 8px;
  cursor: pointer; font-weight: 600; font-size: 14px;
}
.subtab.active { background: var(--card); color: var(--txt); box-shadow: 0 1px 4px #0006; }
.kind-pane { display: none; }
.kind-pane.active { display: block; }

/* Form fields */
.lbl { display: block; font-size: 12px; color: var(--muted); margin: 0 0 6px; text-transform: uppercase; letter-spacing: .4px; }
textarea, input[type=text], input[type=number], select {
  width: 100%; background: var(--bg2); border: 1px solid var(--line); color: var(--txt);
  border-radius: 10px; padding: 11px 13px; font-size: 14px; font-family: inherit;
}
textarea { resize: vertical; }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--accent2); }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 16px 0; }
.hint { font-size: 12px; color: var(--muted); margin-top: 6px; }

/* Dropzone */
.dropzone {
  border: 1.5px dashed var(--line); border-radius: 12px; padding: 26px; text-align: center;
  cursor: pointer; transition: border-color .15s, background .15s;
}
.dropzone.drag { border-color: var(--accent); background: #4cc2f114; }
.dropzone strong { color: var(--txt); }
#drop-filled { display: flex; align-items: center; gap: 16px; justify-content: center; }
#file-preview img { max-height: 90px; max-width: 120px; border-radius: 8px; border: 1px solid var(--line); }
#file-preview .ficon { font-size: 40px; }
.file-meta { text-align: left; font-size: 13px; }

/* Buttons */
.btn {
  display: inline-block; border: none; border-radius: 10px; padding: 12px 20px; font-size: 14px;
  font-weight: 700; cursor: pointer; transition: filter .15s, opacity .15s;
}
.btn.primary { background: linear-gradient(135deg, var(--accent), var(--accent2)); color: #052436; width: 100%; margin-top: 6px; }
.btn.primary:hover { filter: brightness(1.07); }
.btn.ghost { background: var(--bg2); color: var(--txt); border: 1px solid var(--line); }
.btn.ghost:hover { border-color: var(--accent2); }
.btn:disabled { opacity: .5; cursor: progress; }
.link { background: none; border: none; color: var(--accent); cursor: pointer; font-size: 13px; padding: 0; text-decoration: underline; }

/* Messages */
.error { color: var(--danger); font-size: 13px; margin-top: 10px; white-space: pre-wrap; }
.success {
  margin-top: 14px; padding: 14px; border-radius: 10px; background: #4cc2f114; border: 1px solid var(--accent2);
  font-size: 14px; word-break: break-all;
}
.notice { background: #f7c94814; border: 1px solid #f7c94855; border-radius: 10px; padding: 12px 14px; font-size: 13px; margin: 6px 0 16px; }
.summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px,1fr)); gap: 10px; margin-bottom: 16px; }
.summary .kv { background: var(--bg2); border-radius: 10px; padding: 10px 12px; }
.summary .kv b { display: block; font-size: 16px; }
.summary .kv span { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; }

/* Funding inputs */
.fund-row { display: grid; grid-template-columns: 26px 1fr 1.4fr; gap: 10px; align-items: center; margin-bottom: 8px; }
.fund-row .ix { color: var(--muted); font-size: 12px; text-align: center; }
.addr { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; background: var(--bg2); border: 1px solid var(--line); border-radius: 8px; padding: 9px 10px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.addr .copy { flex: none; }
.bulk { margin-bottom: 14px; }
.bulk summary { cursor: pointer; color: var(--accent); font-size: 13px; }
.bulk textarea { margin: 10px 0; }

/* Explore */
.explore-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.explore-head h2 { margin: 0; }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 16px; }
.ins-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; }
.ins-media { height: 160px; background: var(--bg2); display: grid; place-items: center; overflow: hidden; }
.ins-media img { width: 100%; height: 100%; object-fit: contain; image-rendering: auto; }
.ins-media .txtprev { padding: 12px; font-size: 12px; color: var(--txt); overflow: hidden; max-height: 100%; white-space: pre-wrap; word-break: break-word; }
.ins-media .blob { font-size: 38px; color: var(--muted); }
.ins-body { padding: 11px 13px; border-top: 1px solid var(--line); }
.ins-body .num { font-weight: 700; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.badge { font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 999px; white-space: nowrap; }
.badge.ok { color: #06231c; background: var(--ok); }
.badge.pending { color: #2a1d00; background: #f5c451; animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }
.ins-body .ct { font-size: 11px; color: var(--accent); }
.ins-body .meta { font-size: 11px; color: var(--muted); margin-top: 4px; word-break: break-all; }
.ins-body a { color: var(--accent); text-decoration: none; font-size: 12px; }
.myfilter { display: flex; gap: 8px; align-items: center; margin: 4px 0 14px; }
.myfilter input { flex: 1; }
.myfilter .btn { width: auto; margin: 0; white-space: nowrap; }
.empty { color: var(--muted); padding: 30px; text-align: center; }

footer { border-top: 1px solid var(--line); padding: 16px 24px; }
footer .hint { max-width: 980px; margin: 0 auto; }
.hidden { display: none !important; }

/* Payment request */
.pay-grid { display: grid; grid-template-columns: 220px 1fr; gap: 20px; align-items: start; margin: 8px 0 16px; }
.qr-wrap { background: #fff; border-radius: 12px; padding: 12px; display: grid; place-items: center; }
.qr-wrap svg { width: 100%; height: auto; display: block; }
.qr-wrap #qrcode { width: 100%; }
.donate-qr { max-width: 220px; margin: 14px 0 4px; }
.wallet-hint { margin-top: 8px; color: var(--muted); }

/* Terms-acceptance modal */
.modal-overlay {
  position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center;
  background: rgba(4, 8, 12, .72); backdrop-filter: blur(3px); padding: 20px;
}
.modal-overlay.hidden { display: none; }
.modal-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  max-width: 460px; width: 100%; padding: 24px 24px 20px; box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
}
.modal-card h2 { margin: 0 0 10px; font-size: 20px; }
.modal-card p { font-size: 14px; line-height: 1.6; color: var(--txt); margin: 0 0 16px; }
.consent-check { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; font-size: 13.5px; line-height: 1.5; color: var(--txt); }
.consent-check input { margin-top: 2px; width: 16px; height: 16px; flex: none; accent-color: var(--accent); cursor: pointer; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }
.modal-actions .btn:disabled { opacity: .45; cursor: not-allowed; }
.pay-fields .lbl { margin-top: 12px; }
.copyline { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--bg2); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.copyline code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; word-break: break-all; }
.copyline .copy { flex: none; }
#pay-uri { display: inline-block; margin-top: 14px; text-decoration: none; }
.paystatus { display: flex; align-items: center; gap: 10px; background: var(--bg2); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; font-size: 14px; color: var(--txt); }
.spinner { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--line); border-top-color: var(--accent); animation: spin 0.8s linear infinite; flex: none; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Mint (Alpha Verginals) */
.tab.hidden { display: none !important; }
.mint-hero { background: linear-gradient(160deg, #123650, var(--card)); }
.mint-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.mint-head h2 { margin: 0 0 4px; }
.mint-count { text-align: right; flex: none; }
.mc-num { font-size: 26px; font-weight: 800; color: var(--accent); line-height: 1; }
.mc-tot { color: var(--muted); font-size: 18px; font-weight: 600; }
.mc-lbl { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; margin-top: 2px; }
.mint-progress { height: 8px; background: var(--bg2); border-radius: 999px; overflow: hidden; margin: 16px 0 10px; }
.mint-bar { height: 100%; width: 0; background: linear-gradient(90deg, var(--accent2), var(--accent)); border-radius: 999px; transition: width .6s ease; }
.mint-fair code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--accent); }
.reveal-seed { background: var(--bg2); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; font-size: 13px; word-break: break-all; }
.reveal-seed code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--accent); }

/* Reveal card flip */
.reveal-stage { display: grid; place-items: center; margin: 4px 0 22px; perspective: 1200px; }
.reveal-box { width: 260px; height: 300px; }
.reveal-inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 1s cubic-bezier(.4, .2, .2, 1); }
.reveal-box.revealed .reveal-inner { transform: rotateY(180deg); }
.reveal-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: var(--radius); border: 1px solid var(--line); overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 16px; }
.reveal-front { background: linear-gradient(160deg, #1f2a3a, var(--bg2)); }
.reveal-front .hint { margin-top: 14px; }
.mystery { font-size: 88px; font-weight: 800; color: var(--accent); animation: floaty 2.4s ease-in-out infinite; }
@keyframes floaty { 0%, 100% { transform: translateY(0) scale(1); opacity: .85; } 50% { transform: translateY(-8px) scale(1.06); opacity: 1; } }
.reveal-back { transform: rotateY(180deg); background: var(--card); padding: 0; justify-content: flex-start; }
.reveal-img { width: 100%; height: 200px; object-fit: contain; background: var(--bg2); }
.reveal-info { padding: 12px 14px; width: 100%; }
.reveal-name { font-weight: 700; display: flex; align-items: center; gap: 8px; }
.traits { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.trait { font-size: 11px; background: var(--bg2); border: 1px solid var(--line); border-radius: 8px; padding: 4px 8px; }
.trait b { color: var(--muted); font-weight: 600; margin-right: 5px; text-transform: uppercase; letter-spacing: .3px; }
.reveal-tx { word-break: break-all; }
.reveal-box.revealed { animation: pop .6s ease; }
@keyframes pop { 0% { transform: scale(.96); } 55% { transform: scale(1.04); } 100% { transform: scale(1); } }

/* Alpha Verginals showcase */
.showcase { background: linear-gradient(160deg, #123650, var(--card)); overflow: hidden; }
.showcase-tag {
  display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase;
  color: var(--accent); background: #4cc2f11a; border: 1px solid #4cc2f155; border-radius: 999px; padding: 5px 12px;
}
.showcase h2 { margin: 14px 0 6px; font-size: 24px; letter-spacing: .2px; }
.showcase .lead { font-size: 15px; color: var(--txt); line-height: 1.55; margin: 0 0 4px; max-width: 640px; }
.showcase .lead .em { color: var(--accent); font-weight: 700; }
.showcase-solo { margin: 20px 0 6px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.sc-card {
  background: var(--bg2); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  transition: transform .18s ease, border-color .18s ease;
}
.sc-card:hover { transform: translateY(-4px); border-color: var(--accent); }
.sc-card img { width: 100%; aspect-ratio: 1/1; object-fit: contain; display: block; image-rendering: pixelated; background: var(--bg); }
.sc-featured { width: 100%; max-width: 340px; }
.sc-dots { display: flex; gap: 10px; }
.sc-dot {
  width: 10px; height: 10px; padding: 0; border-radius: 999px; cursor: pointer;
  background: var(--line); border: 1px solid var(--line); transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.sc-dot:hover { border-color: var(--accent); }
.sc-dot.active { background: var(--accent); border-color: var(--accent); transform: scale(1.15); }
.sc-meta { padding: 9px 11px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sc-name { font-weight: 700; font-size: 13px; }
.sc-house { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; padding: 3px 8px; border-radius: 999px; }
.sc-house.fire { color: #ff9d6b; background: #ff9d6b1a; border: 1px solid #ff9d6b55; }
.sc-house.water { color: #4cc2f1; background: #4cc2f11a; border: 1px solid #4cc2f155; }
.sc-house.earth { color: #7ed492; background: #7ed4921a; border: 1px solid #7ed49255; }
.showcase-note { font-size: 12px; color: var(--muted); margin-top: 12px; }

/* Long-form prose (Vision / Terms) */
.prose { max-width: 760px; }
.prose h2 { font-size: 22px; margin: 0 0 6px; }
.prose .updated { font-size: 12px; color: var(--muted); margin: 0 0 18px; }
.prose h3 { font-size: 15px; margin: 22px 0 8px; color: var(--accent); letter-spacing: .2px; }
.prose p { font-size: 14px; line-height: 1.65; color: var(--txt); margin: 0 0 12px; }
.prose ul { margin: 0 0 12px; padding-left: 20px; }
.prose li { font-size: 14px; line-height: 1.6; color: var(--txt); margin-bottom: 7px; }
.prose strong { color: #fff; }
.prose .lead-block {
  font-size: 16px; line-height: 1.6; color: var(--txt); border-left: 3px solid var(--accent);
  background: #4cc2f10d; border-radius: 0 10px 10px 0; padding: 14px 18px; margin: 0 0 20px;
}
.prose .callout {
  background: #f7c9480f; border: 1px solid #f7c94855; border-radius: 10px; padding: 12px 16px; margin: 16px 0;
  font-size: 13.5px; line-height: 1.6;
}
.prose .callout strong { color: #f7c948; }
.footlinks { margin-top: 10px; display: flex; gap: 16px; flex-wrap: wrap; }
.footlinks a { color: var(--accent); text-decoration: none; font-size: 12px; cursor: pointer; }
.footlinks a:hover { text-decoration: underline; }

@media (max-width: 640px) {
  .grid2 { grid-template-columns: 1fr; }
  .fund-row { grid-template-columns: 1fr; }
  .pay-grid { grid-template-columns: 1fr; }
  .qr-wrap { max-width: 240px; margin: 0 auto; }
}