/* ============================================
   CHARITY ON PONS - pons-style dark UI (dark default, light via toggle)
   Dark tokens scraped live from ponsfamily.com dark mode:
   bg #0d0d0d, panels #161616 + 1px rgba(255,255,255,.12), cards #1f1f1f,
   text #f2f2f2, lime #d4fc50. Light tokens from their light mode:
   bg #f4f4f4, panels #fff, cards #ececec.
   ============================================ */

:root {
  --bg: #0d0d0d;
  --panel: #161616;
  --panel-glass: rgba(22, 22, 22, 0.82);
  --panel-border: rgba(255, 255, 255, 0.12);
  --card: #1f1f1f;
  --well: #0d0d0d;
  --well-soft: rgba(255, 255, 255, 0.06);
  --well-soft-2: rgba(255, 255, 255, 0.1);
  --text: #f2f2f2;
  --muted: rgba(242, 242, 242, 0.58);
  --faint: rgba(242, 242, 242, 0.35);
  --hair: rgba(255, 255, 255, 0.08);
  --lime: #d4fc50;
  --lime-chip: rgba(212, 252, 80, 0.14);
  --lime-bright: #c0e84a;
  --lime-border: rgba(212, 252, 80, 0.32);
  --hero-grad: radial-gradient(circle at 14% 0%, rgba(212, 252, 80, 0.18), rgba(0, 0, 0, 0) 52%), linear-gradient(145deg, #18200f, #161616 64%);
  --player-grad: radial-gradient(120% 140% at 30% 20%, #2e2e2e 0%, #101010 60%, #070707 100%);
  --red: #ff4b3e;
  --green: #4ade80;
  --chart-bg: #161616;
  --chart-grid: rgba(255, 255, 255, 0.06);
  --radius-panel: 28px;
  --radius-card: 20px;
  --radius-img: 14px;
  --shadow-btn: 0 1px 2px rgba(0,0,0,0.35), 0 8px 24px rgba(0,0,0,0.35), 0 24px 48px rgba(0,0,0,0.28);
}

[data-theme="light"] {
  --bg: #f4f4f4;
  --panel: #ffffff;
  --panel-glass: rgba(255, 255, 255, 0.9);
  --panel-border: rgba(17, 17, 17, 0.08);
  --card: #ececec;
  --well: #f4f4f4;
  --well-soft: rgba(17, 17, 17, 0.06);
  --well-soft-2: rgba(17, 17, 17, 0.1);
  --text: #111111;
  --muted: rgba(17, 17, 17, 0.55);
  --faint: rgba(17, 17, 17, 0.35);
  --hair: rgba(17, 17, 17, 0.08);
  --lime-chip: rgba(212, 252, 80, 0.24);
  --lime-bright: #86ad1a;
  --lime-border: rgba(111, 159, 24, 0.55);
  --hero-grad: radial-gradient(circle at 14% 0%, rgba(212, 252, 80, 0.2), rgba(0, 0, 0, 0) 48%), linear-gradient(145deg, rgba(243, 255, 212, 0.7), #ffffff 62%);
  --player-grad: radial-gradient(120% 140% at 30% 20%, #3c3c3c 0%, #171717 60%, #0d0d0d 100%);
  --green: #16a34a;
  --chart-bg: #ffffff;
  --chart-grid: rgba(17, 17, 17, 0.06);
  --shadow-btn: 0 1px 2px rgba(17,17,17,0.04), 0 8px 24px rgba(17,17,17,0.06), 0 24px 48px rgba(17,17,17,0.04);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  padding: 12px 16px 16px;
  -webkit-font-smoothing: antialiased;
  transition: background 0.15s ease, color 0.15s ease;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

.wrap { max-width: 1180px; margin: 0 auto; }

/* ===== NAV ===== */
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 4px 14px;
  gap: 10px;
}
.nav-left { display: flex; align-items: center; gap: 14px; min-width: 0; }
.logo-img { width: 42px; height: 42px; border-radius: 10px; display: block; }
[data-theme="light"] .logo-img { filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.55)) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35)); }
.nav-pills {
  display: flex;
  background: var(--well-soft);
  border-radius: 999px;
  padding: 4px;
  gap: 2px;
}
.nav-pill {
  padding: 7px 16px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  color: var(--muted);
  white-space: nowrap;
}
.nav-pill.active { background: var(--well-soft-2); color: var(--text); }
.nav-pill:hover { color: var(--text); }
.nav-right { display: flex; align-items: center; gap: 10px; }
.mode-toggle {
  width: 36px; height: 36px;
  border-radius: 999px;
  background: var(--panel);
  border: 1px solid var(--panel-border);
  display: flex; align-items: center; justify-content: center;
  color: var(--text);
  font-size: 15px;
}
.btn {
  border: none;
  font-size: 15px;
  font-weight: 500;
  border-radius: 999px;
  padding: 9px 20px;
  transition: transform 0.08s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }
.btn-lime { background: var(--lime); color: #111; }
.btn-white {
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--panel-border);
  box-shadow: var(--shadow-btn);
}
.btn-sm { padding: 6px 14px; font-size: 13px; }

/* ===== SITE TOKEN CA PILL ===== */
.ca-bar {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: 100%;
  background: var(--well-soft);
  border: 1px solid var(--hair);
  border-radius: 999px;
  padding: 7px 8px 7px 15px;
  margin: 0 0 14px;
  font-size: 12.5px;
}
.ca-ticker { font-weight: 700; color: var(--lime-bright); flex-shrink: 0; }
.ca-value {
  font-family: ui-monospace, "Cascadia Mono", monospace;
  color: var(--muted);
  min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ca-bar.is-live { cursor: pointer; }
.ca-bar.is-live:hover { border-color: var(--lime-border); }
.ca-copy {
  flex-shrink: 0;
  font-size: 11px; font-weight: 600;
  color: var(--text);
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: 999px;
  padding: 3px 10px;
}
.ca-copy:empty { display: none; }

/* ===== SEARCH ROW ===== */
.search-row { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.search-box {
  flex: 1;
  display: flex; align-items: center; gap: 10px;
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: 999px;
  padding: 10px 18px;
  color: var(--faint);
  font-size: 14px;
}
.search-box input {
  border: none; outline: none; background: transparent;
  font-family: inherit; font-size: 14px; flex: 1; color: var(--text);
}
.search-box input::placeholder { color: var(--faint); }
.chip {
  font-size: 12px;
  color: var(--muted);
  background: var(--well-soft);
  border-radius: 999px;
  padding: 3px 10px;
  white-space: nowrap;
}

/* ===== PANELS ===== */
.panel {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-panel);
  padding: 24px;
  margin-bottom: 14px;
}
.panel-live {
  background-image: var(--hero-grad);
  border: 1px solid var(--lime-border);
}
.panel-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 2px; }
.panel-head h1, .panel-head h2 { font-size: 23px; font-weight: 400; letter-spacing: -0.2px; }
.count-chip {
  font-size: 12px;
  background: var(--lime-chip);
  color: var(--text);
  border-radius: 999px;
  padding: 2px 10px;
  position: relative; top: -2px;
}
.panel-sub { font-size: 13px; color: var(--muted); margin-bottom: 18px; }
.panel-head-row { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 12px; }

.filter-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.f-chip {
  font-size: 12.5px;
  padding: 6px 13px;
  border-radius: 999px;
  background: var(--well-soft);
  color: var(--muted);
  border: none;
}
.f-chip.active { background: var(--lime); color: #111; }

/* ===== FEATURED STREAM HERO ===== */
.live-hero {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 16px;
}
.player-mock {
  position: relative;
  border-radius: var(--radius-card);
  background: var(--player-grad);
  border: 1px solid var(--hair);
  min-height: 320px;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.player-mock video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.offline-center { text-align: center; color: rgba(255,255,255,0.5); font-size: 13.5px; }
.offline-center .oc-big { font-size: 17px; color: rgba(255,255,255,0.75); margin-bottom: 2px; }
.badge-live {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.4px;
  border-radius: 999px; padding: 4px 11px;
  backdrop-filter: blur(3px);
}
[data-theme="light"] .badge-live { background: rgba(17, 17, 17, 0.78); }
.badge-live .dot {
  width: 6px; height: 6px; border-radius: 999px; background: var(--lime);
  animation: pulse 1.4s ease-in-out infinite;
}
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }
.badge-soon {
  display: inline-flex; align-items: center;
  background: var(--lime-chip);
  color: var(--text);
  font-size: 10.5px; font-weight: 600;
  border-radius: 999px; padding: 3px 9px;
}
.card .badge-live, .card .badge-soon { backdrop-filter: blur(3px); }
.card .badge-live { background: rgba(0, 0, 0, 0.55); }
.card .badge-soon { background: rgba(0, 0, 0, 0.55); color: var(--lime); }
.player-topbar {
  position: absolute; top: 14px; left: 14px; right: 14px;
  display: flex; justify-content: space-between; align-items: center;
  z-index: 2;
}
.viewer-chip {
  background: rgba(0,0,0,0.55); color: #fff;
  font-size: 12px; border-radius: 999px; padding: 4px 11px;
  backdrop-filter: blur(3px);
}
.player-bottombar {
  position: absolute; left: 14px; right: 14px; bottom: 12px;
  display: flex; align-items: center; gap: 10px;
  background: rgba(0,0,0,0.55);
  border-radius: 14px; padding: 9px 13px;
  backdrop-filter: blur(3px);
  z-index: 2;
}
.player-bottombar .tok-img { width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0; }
.player-bottombar .t-name { color: #fff; font-size: 14px; font-weight: 600; line-height: 1.2; }
.player-bottombar .t-sym { color: rgba(255,255,255,0.6); font-size: 12px; }
.player-bottombar .t-mc { margin-left: auto; color: var(--lime); font-size: 13px; font-weight: 600; }

.live-side { display: flex; flex-direction: column; gap: 10px; }
.live-side-title { font-size: 13px; color: var(--muted); padding-left: 4px; }
.live-row {
  display: flex; align-items: center; gap: 12px;
  background: var(--card);
  border-radius: 16px;
  padding: 10px 12px;
  transition: transform 0.08s ease;
}
.live-row:hover { transform: translateY(-1px); }
.live-row .tok-img { width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0; object-fit: cover; }
.live-row .lr-name { font-size: 14px; font-weight: 600; line-height: 1.25; }
.live-row .lr-meta { font-size: 12px; color: var(--muted); }
.live-row .lr-right { margin-left: auto; text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.live-row .lr-mc { font-size: 13px; font-weight: 600; }
.live-empty { font-size: 13px; color: var(--faint); padding: 12px 4px; }

.tok-img {
  display: flex; align-items: center; justify-content: center;
  font-weight: 700;
  color: rgba(0,0,0,0.55);
  background: linear-gradient(135deg, #eaffa0, #a8d436);
  object-fit: cover;
  overflow: hidden;
}
img.tok-img { background: var(--well); }

/* ===== TOKEN GRID ===== */
.grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
}
.card {
  background: var(--card);
  border-radius: var(--radius-card);
  padding: 8px 8px 12px;
  transition: transform 0.08s ease, box-shadow 0.08s ease;
  position: relative;
  display: block;
}
.card:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,0.4); }
.card .img-well {
  position: relative;
  border-radius: var(--radius-img);
  background: var(--well);
  aspect-ratio: 1;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 10px;
}
.img-well img { width: 100%; height: 100%; object-fit: cover; }
.img-well .tok-fallback {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-size: 42px; font-weight: 700; color: rgba(0,0,0,0.5);
  background: linear-gradient(135deg, #eaffa0, #a8d436);
}
.card .c-badge { position: absolute; top: 8px; left: 8px; }
.card .c-name { font-size: 13.5px; font-weight: 600; padding: 0 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card .c-sym { font-size: 11.5px; color: var(--muted); padding: 0 4px; }
.card .c-mc { font-size: 13px; font-weight: 600; padding: 2px 4px 6px; }
.card .c-mc span { color: var(--muted); font-weight: 400; font-size: 11px; }
.card .c-foot {
  display: flex; justify-content: space-between; align-items: center;
  padding: 6px 4px 0;
  border-top: 1px solid var(--hair);
  font-size: 10.5px; color: var(--faint);
}
.grid-empty { grid-column: 1 / -1; text-align: center; padding: 40px; color: var(--faint); font-size: 13.5px; }

/* ===== FOOTER ===== */
.footer {
  background: var(--panel-glass);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-panel);
  padding: 34px 34px 20px;
}
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.4fr; gap: 24px; margin-bottom: 30px; }
.footer .wordmark { font-size: 26px; font-weight: 600; letter-spacing: -0.5px; margin-bottom: 10px; }
.footer .f-desc { font-size: 12.5px; color: var(--muted); max-width: 260px; }
.footer .f-col-title { font-size: 11px; color: var(--faint); text-transform: uppercase; letter-spacing: 0.6px; margin-bottom: 10px; }
.footer .f-link { display: block; font-size: 13px; color: var(--muted); margin-bottom: 7px; }
.footer .f-link:hover { color: var(--text); }
.footer-bottom {
  display: flex; justify-content: space-between; align-items: center;
  gap: 10px; flex-wrap: wrap;
  border-top: 1px solid var(--hair);
  padding-top: 16px;
  font-size: 12px; color: var(--faint);
}

/* ===== LAUNCH MODAL ===== */
.modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.65);
  display: none;
  align-items: flex-start; justify-content: center;
  padding: 4vh 16px;
  z-index: 50;
  overflow-y: auto;
}
.modal-backdrop.open { display: flex; }
.modal {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-panel);
  width: 100%; max-width: 680px;
  padding: 28px;
}
.modal h2 { font-size: 22px; font-weight: 400; margin-bottom: 4px; }
.modal .m-sub { font-size: 13px; color: var(--muted); margin-bottom: 20px; }
.modal-close {
  float: right;
  width: 32px; height: 32px; border-radius: 999px;
  border: 1px solid var(--panel-border);
  background: transparent; color: var(--muted);
  font-size: 14px;
}
.cam-well {
  border-radius: var(--radius-card);
  background: var(--player-grad);
  border: 1px solid var(--hair);
  height: 220px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  color: rgba(255,255,255,0.55);
  font-size: 13px;
  margin-bottom: 18px;
  position: relative;
  overflow: hidden;
}
.cam-well video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cam-status {
  position: absolute; left: 12px; bottom: 10px; z-index: 2;
  background: rgba(0,0,0,0.55); color: #fff;
  font-size: 11.5px; border-radius: 999px; padding: 4px 11px;
  backdrop-filter: blur(3px);
}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.fg { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.fg label { font-size: 12px; color: var(--muted); font-weight: 500; }
.fg input, .fg textarea {
  font-family: inherit; font-size: 14px;
  border: none; outline: none;
  background: var(--well-soft);
  border-radius: 14px;
  padding: 11px 14px;
  color: var(--text);
}
.fg input::placeholder, .fg textarea::placeholder { color: var(--faint); }
.fg input:focus, .fg textarea:focus { background: var(--well-soft-2); }
.fg textarea { resize: vertical; min-height: 74px; }
.fg .hint { font-size: 11px; color: var(--faint); }
.fg input[type="file"] { padding: 9px 12px; font-size: 12.5px; color: var(--muted); }
.fg input[type="file"]::file-selector-button {
  font-family: inherit; font-size: 12px;
  border: none; border-radius: 999px;
  background: var(--well-soft-2); color: var(--text);
  padding: 5px 12px; margin-right: 10px;
  cursor: pointer;
}
.img-preview { margin-top: 4px; }
.img-preview img { max-width: 84px; max-height: 84px; border-radius: 12px; }
.m-actions { display: flex; gap: 10px; margin-top: 8px; }
.m-actions .btn-lime { flex: 1; padding: 13px; font-size: 15px; }
.fee-note { text-align: center; font-size: 11.5px; color: var(--faint); margin-top: 10px; }

/* status messages */
.status-msg {
  border-radius: 14px;
  padding: 11px 14px;
  font-size: 13px;
  margin-bottom: 14px;
  background: var(--well-soft);
  border: 1px solid var(--panel-border);
}
.status-msg.success { background: var(--lime-chip); border-color: var(--lime-border); }
.status-msg.error { background: rgba(255, 75, 62, 0.12); border-color: rgba(255, 75, 62, 0.35); }
.status-msg a { color: var(--lime-bright); font-weight: 600; }
.status-msg code { font-size: 10.5px; word-break: break-all; }
.spinner {
  display: inline-block; width: 12px; height: 12px;
  border: 2px solid rgba(0,0,0,0.25); border-top-color: #111;
  border-radius: 999px; animation: spin 0.8s linear infinite;
  vertical-align: -2px;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* admin tools */
.admin-tools { margin-top: 16px; border-top: 1px dashed var(--panel-border); padding-top: 14px; }
.admin-tools .at-label { font-size: 11.5px; color: var(--faint); margin-bottom: 8px; }
.admin-row { display: flex; gap: 8px; margin-bottom: 8px; }
.admin-row input {
  flex: 1; font-family: inherit; font-size: 12.5px;
  border: none; outline: none;
  background: var(--well-soft); border-radius: 12px;
  padding: 9px 12px; color: var(--text);
}

/* ===== COIN PAGE ===== */
.breadcrumb { font-size: 12.5px; color: var(--faint); padding: 2px 6px 12px; }
.breadcrumb a { color: var(--muted); }
.breadcrumb a:hover { color: var(--text); }

.coin-header { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; flex-wrap: wrap; }
.coin-header .tok-img, .coin-header img.coin-face { width: 56px; height: 56px; border-radius: 16px; font-size: 26px; object-fit: cover; }
.coin-header h1 { font-size: 23px; font-weight: 500; letter-spacing: -0.3px; line-height: 1.2; }
.coin-header h1 .h-sym { color: var(--muted); font-weight: 400; }
.coin-header .byline { font-size: 13px; color: var(--muted); }
.coin-header .byline b { color: var(--lime-bright); font-weight: 600; }
.coin-header .ch-right { margin-left: auto; }

.coin-layout { display: grid; grid-template-columns: 1.9fr 1fr; gap: 14px; margin-bottom: 14px; }
.stream-panel {
  position: relative;
  border-radius: var(--radius-panel);
  background: var(--player-grad);
  border: 1px solid var(--hair);
  min-height: 460px;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.stream-panel video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }

.chat-panel {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-panel);
  display: flex; flex-direction: column;
  overflow: hidden;
  max-height: 560px;
}
.chat-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px 20px 12px;
}
.chat-head .ch-title { font-size: 16px; font-weight: 500; }
.chat-msgs { flex: 1; overflow-y: auto; padding: 4px 20px 12px; display: flex; flex-direction: column; gap: 10px; min-height: 220px; }
.msg, .chat-msg { font-size: 13.5px; line-height: 1.45; position: relative; }
.chat-msg-user { font-weight: 600; margin-right: 2px; }
.chat-msg-text { color: var(--text); }
.chat-system-msg { font-size: 12px; color: var(--faint); }
.chat-pinned-msg {
  background: var(--lime-chip);
  border: 1px solid var(--lime-border);
  border-radius: 12px;
  padding: 8px 12px;
  font-size: 12.5px;
  margin: 0 20px 8px;
  display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap;
}
.pinned-label { font-size: 10.5px; color: var(--lime-bright); font-weight: 700; }
.chat-mod-controls { display: none; margin-left: 6px; }
.chat-msg:hover .chat-mod-controls { display: inline; }
.mod-btn { font-size: 10px; color: var(--faint); cursor: pointer; margin-right: 4px; }
.mod-btn:hover { color: var(--red); }
.chat-input-bar {
  display: flex; gap: 8px;
  padding: 12px 16px 16px;
  border-top: 1px solid var(--hair);
}
.chat-input-bar input {
  font-family: inherit; font-size: 13.5px;
  border: none; outline: none;
  background: var(--well-soft); border-radius: 999px;
  padding: 10px 16px;
  color: var(--text);
}
.chat-input-bar input::placeholder { color: var(--faint); }
.chat-input-bar .chat-name { width: 90px; flex-shrink: 0; }
.chat-input-bar .chat-text { flex: 1; min-width: 0; }
.chat-input-bar .btn { padding: 9px 16px; font-size: 13px; }

.stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 14px; }
.stat-tile {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-card);
  padding: 16px 18px;
}
.stat-tile .s-label { font-size: 11.5px; color: var(--muted); margin-bottom: 3px; }
.stat-tile .s-value { font-size: 20px; font-weight: 600; letter-spacing: -0.3px; }
.stat-tile .s-value small { font-size: 12px; color: var(--muted); font-weight: 400; }

.chart-box { border-radius: var(--radius-img); overflow: hidden; }
.chart-note { text-align: center; color: var(--faint); font-size: 12px; padding: 10px 0 2px; }

.contract-pill {
  display: flex; align-items: center; gap: 10px;
  background: var(--well-soft);
  border-radius: 999px;
  padding: 9px 10px 9px 18px;
  font-size: 12.5px;
  color: var(--muted);
  font-family: ui-monospace, "Cascadia Mono", monospace;
  min-width: 0;
}
.contract-pill span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.contract-pill .btn { padding: 6px 14px; font-size: 12px; flex-shrink: 0; }

.about-links { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* Creator fee claim - only ever rendered for the coin's own launch wallet. */
.creator-fees {
  margin-top: 22px;
  padding: 18px 20px;
  background: var(--well-soft);
  border: 1px solid var(--hair);
  border-radius: 14px;
  max-width: 640px;
}
.creator-fees .cf-head {
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--lime-bright); margin-bottom: 10px;
}
.creator-fees .cf-body { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.creator-fees .cf-note { font-size: 13.5px; line-height: 1.6; color: var(--muted); }
.creator-fees .cf-note b { color: var(--text); }
.creator-fees .cf-sub {
  font-size: 11.5px; color: var(--muted); opacity: 0.75;
  font-family: ui-monospace, "Cascadia Mono", monospace;
  word-break: break-all;
}

@media (max-width: 980px) {
  .grid { grid-template-columns: repeat(3, 1fr); }
  .live-hero { grid-template-columns: 1fr; }
  .coin-layout { grid-template-columns: 1fr; }
  .chat-panel { max-height: 420px; }
  .stat-row { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .nav-pill { padding: 7px 11px; }
}
@media (max-width: 620px) {
  .grid { grid-template-columns: repeat(2, 1fr); }

  /* Phones: the nav + search row were overflowing the viewport, which clipped
     the Launch pill and pushed "Go Live" off screen. Shrink the nav to fit one
     row, and let the search row stack so the primary action spans the width. */
  .nav { gap: 8px; padding: 6px 2px 12px; }
  .nav-left { gap: 8px; }
  .logo-img { width: 34px; height: 34px; }
  .nav-pills { padding: 3px; }
  .nav-pill { padding: 6px 10px; font-size: 13px; }
  .nav-right { gap: 8px; }
  .mode-toggle { width: 32px; height: 32px; font-size: 14px; }
  .nav-right .btn { padding: 8px 14px; font-size: 13.5px; }

  .search-row { flex-wrap: wrap; }
  .search-box { flex: 1 1 100%; }
  .search-row > .btn { flex: 1 1 100%; }

  .coin-header { flex-wrap: wrap; }
  .ch-right { width: 100%; }
  .ch-right .btn { display: block; text-align: center; }
  .stat-row { gap: 10px; }
  .creator-fees { padding: 16px; }
}

/* Flex children default to min-width:auto, so the search input's intrinsic
   width can force the whole page wider than the screen. (.nav-left already
   sets this; the contract pill's floor is an inline style on coin.html.) */
.search-box, .search-box input { min-width: 0; }

/* ===== CHARITY: hero + causes + picker (Charity On Pons) ===== */
.hero-head h2 { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; }
.hero-head .panel-sub { margin-top: 6px; max-width: 640px; }

.hero-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 18px 0 6px;
}
.stat-tile {
  background: var(--well-soft);
  border: 1px solid var(--hair);
  border-radius: var(--radius-card);
  padding: 16px 18px;
}
.stat-num { font-size: 26px; font-weight: 700; color: var(--lime); line-height: 1; }
.stat-label { font-size: 12.5px; color: var(--muted); margin-top: 6px; }

.cause-strip-bar {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
}
.cause-strip-head {
  font-size: 13px; font-weight: 600; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.04em;
  margin: 20px 0 10px;
}
.cause-toggle {
  background: none; border: none; padding: 0;
  font-size: 12.5px; font-weight: 600; color: var(--lime-bright);
  text-decoration: underline; text-underline-offset: 3px;
}
.cause-toggle:hover { color: var(--text); }
.cause-filters {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-bottom: 12px;
}
.cause-filters[hidden] { display: none; }
.cause-strip {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}
/* A <button> centres its content vertically, so in an equal-height grid the
   monogram of a one-line card sat lower than a card whose name wrapped to
   three. Flex-start pins every tile to the top; margin-top:auto on the last
   row drops the coin counts onto a shared baseline. */
.cause-card {
  background: var(--card);
  border: 1px solid var(--hair);
  border-radius: var(--radius-card);
  padding: 14px;
  text-align: left;
  color: var(--text);
  display: flex; flex-direction: column; align-items: stretch;
  justify-content: flex-start;
  transition: border-color 0.12s ease, transform 0.12s ease;
}
.cause-card:hover { border-color: var(--lime-border); transform: translateY(-2px); }
.cause-mono {
  width: 44px; height: 44px; border-radius: 10px; flex: none;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; color: #0d0d0d; font-size: 16px;
}
.cause-name { font-weight: 600; font-size: 14px; margin-top: 10px; line-height: 1.25; }
.cause-cat { font-size: 12px; color: var(--muted); margin-top: 2px; }
.cause-support { font-size: 11.5px; color: var(--faint); margin-top: auto; padding-top: 8px; }
.cause-cta { margin-top: 18px; }

/* charity picker inside the launch modal */
#charitySelect {
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--well-soft);
  border: 1px solid var(--panel-border);
  color: var(--text);
  font-size: 14px;
}
/* ===== CHARITY PICKER (launch modal) =====
   Replaces a native <select> holding 53 options. Same surfaces as the rest of the
   form (--well-soft fields, --card panel, hairline borders, lime for the active
   state) so it reads as part of the modal rather than as an OS widget. */
.cpick-trigger {
  font-family: inherit; font-size: 14px; text-align: left;
  background: var(--well-soft); color: var(--text);
  border: none; border-radius: 14px;
  padding: 11px 14px;
  display: flex; align-items: center; gap: 10px;
  cursor: pointer; width: 100%;
}
.cpick-trigger:hover { background: var(--well-soft-2); }
.cpick-trigger[aria-expanded="true"] { background: var(--well-soft-2); }
.cpick-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cpick-trigger.empty .cpick-label { color: var(--faint); }
.cpick-caret {
  flex: none; width: 0; height: 0;
  border-left: 5px solid transparent; border-right: 5px solid transparent;
  border-top: 6px solid var(--muted);
  transition: transform 0.15s ease;
}
.cpick-trigger[aria-expanded="true"] .cpick-caret { transform: rotate(180deg); }
/* The selected charity's own logo, shown in the closed trigger. */
.cpick-thumb {
  width: 26px; height: 26px; border-radius: 7px; flex: none;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; color: #0d0d0d; font-size: 11px;
}

.cpick-panel {
  margin-top: 8px;
  background: var(--card);
  border: 1px solid var(--hair);
  border-radius: var(--radius-card);
  padding: 10px;
}
.cpick-panel[hidden] { display: none; }
.cpick-search {
  font-family: inherit; font-size: 13.5px;
  width: 100%; border: none; outline: none;
  background: var(--well-soft); color: var(--text);
  border-radius: 10px; padding: 9px 12px;
  margin-bottom: 8px;
}
.cpick-search::placeholder { color: var(--faint); }
.cpick-list { max-height: 320px; overflow-y: auto; overscroll-behavior: contain; }
.cpick-group {
  font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--faint); font-weight: 600;
  padding: 12px 6px 5px;
  position: sticky; top: 0;
  background: var(--card);
}
.cpick-group:first-child { padding-top: 2px; }
.cpick-opt {
  width: 100%; text-align: left; font-family: inherit;
  background: transparent; border: none; color: var(--text);
  border-radius: 10px; padding: 7px 8px;
  display: flex; align-items: center; gap: 10px;
  cursor: pointer;
}
.cpick-opt:hover { background: var(--well-soft); }
.cpick-opt[aria-selected="true"] { background: var(--lime-soft, rgba(212, 252, 80, 0.12)); }
.cpick-mono {
  width: 30px; height: 30px; border-radius: 8px; flex: none;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; color: #0d0d0d; font-size: 12px;
}
/* Spans, so they need to be told to stack - and each is clamped to one line so
   the rows stay a uniform height and the list can be scanned rather than read. */
.cpick-text { min-width: 0; display: block; }
.cpick-name {
  display: block; font-size: 13.5px; font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cpick-sub {
  display: block; font-size: 11px; color: var(--faint); margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cpick-empty { font-size: 13px; color: var(--muted); padding: 14px 8px; }

.charity-info { display: none; gap: 12px; margin-top: 10px; align-items: flex-start; }
.charity-info.show { display: flex; }
.ci-mono {
  width: 48px; height: 48px; border-radius: 10px; flex: none;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; color: #0d0d0d; font-size: 18px;
}
/* Charity logo badges. The fetched PNGs are self-contained tiles - each one
   already carries the backdrop its own ink needs (white behind a dark wordmark,
   near-black behind a light one) and rounded corners - so the badge must NOT
   paint an accent colour under them. The accent is applied inline only when the
   image fails and the lettered monogram takes over. */
.cause-mono.has-logo,
.ci-mono.has-logo,
.cpick-mono.has-logo,
.cpick-thumb.has-logo,
.cp-mono.has-logo { background: none; }
.cause-mono img,
.ci-mono img,
.cpick-mono img,
.cpick-thumb img,
.cp-mono img {
  width: 100%; height: 100%;
  object-fit: contain;
  border-radius: inherit;
  display: block;
}

.ci-name { font-weight: 600; font-size: 14px; }
.ci-blurb { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.ci-meta { font-size: 11.5px; color: var(--faint); margin-top: 6px; }
.ci-meta a { color: var(--lime-bright); }
.ci-pending { color: var(--red); }
/* Delivery is automatic only where the charity publishes a stable mainnet
   address; everywhere else a human sends it. Said plainly rather than letting
   "100% to charity" imply the whole path is hands-off. */
.ci-auto { color: var(--green); }
.ci-manual { color: var(--muted); }

/* charity chip on a coin card */
.c-charity {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; color: var(--muted);
  margin-top: 6px; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cc-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }

@media (max-width: 620px) {
  .hero-stats { grid-template-columns: 1fr 1fr; }
  .hero-head h2 { font-size: 22px; }
}

/* coin-page charity panel (replaces the stream-player column) */
.charity-panel {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-panel);
  padding: 22px;
  display: flex; flex-direction: column; gap: 14px;
  min-height: 320px;
}
.charity-panel .cp-empty { color: var(--muted); font-size: 14px; }
.cp-head { font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--faint); font-weight: 600; }
.cp-charity { display: flex; align-items: center; gap: 14px; }
.cp-mono { width: 56px; height: 56px; border-radius: 14px; flex: none; display: flex; align-items: center; justify-content: center; font-weight: 700; color: #0d0d0d; font-size: 26px; }
.cp-name { font-size: 20px; font-weight: 700; line-height: 1.15; }
.cp-cat { font-size: 13px; color: var(--muted); margin-top: 2px; }
.cp-line { font-size: 13.5px; color: var(--muted); line-height: 1.6; }
.cp-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cp-stat { background: var(--well-soft); border: 1px solid var(--hair); border-radius: 12px; padding: 12px 14px; }
.cp-s-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--faint); font-weight: 600; }
.cp-s-value { font-size: 19px; font-weight: 700; margin-top: 5px; line-height: 1.2; }
.cp-s-value.mono { font-family: ui-monospace, "Cascadia Mono", monospace; font-size: 15px; }
.cp-s-value small { font-size: 14px; font-weight: 500; color: var(--muted); }
.cp-s-sub { font-size: 11.5px; color: var(--muted); margin-top: 3px; min-height: 14px; }
.cp-verify { font-size: 13px; padding: 10px 12px; border-radius: 12px; background: var(--well-soft); border: 1px solid var(--hair); }
.cp-verify.ok { color: var(--green); border-color: rgba(74, 222, 128, 0.35); }
.cp-verify.bad { color: var(--red); border-color: rgba(255, 75, 62, 0.35); }
.cp-verify.pending { color: var(--muted); }
.cp-links { display: flex; gap: 8px; flex-wrap: wrap; margin-top: auto; }

/* ===== transparency page ===== */
.how-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 22px; }
.how-step { display: flex; gap: 12px; align-items: flex-start; background: var(--well-soft); border: 1px solid var(--hair); border-radius: 12px; padding: 14px 16px; }
.how-n { width: 26px; height: 26px; flex: none; border-radius: 50%; background: var(--lime); color: #0d0d0d; font-weight: 700; font-size: 14px; display: flex; align-items: center; justify-content: center; }
.how-step b { font-size: 13.5px; display: block; margin-bottom: 3px; }
.how-step span { font-size: 12.5px; color: var(--muted); line-height: 1.5; }

.t-table { display: flex; flex-direction: column; }
.t-row {
  display: grid;
  grid-template-columns: 2.2fr 1.3fr 1.2fr 2.4fr 0.5fr;
  gap: 14px; align-items: center;
  padding: 13px 6px;
  border-bottom: 1px solid var(--hair);
}
.t-row:last-child { border-bottom: none; }
.t-head { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--faint); font-weight: 600; }
.t-head > div { padding: 0; }
.t-c-org { display: flex; align-items: center; gap: 12px; min-width: 0; }
.t-mono { width: 38px; height: 38px; border-radius: 9px; flex: none; display: flex; align-items: center; justify-content: center; font-weight: 700; color: #0d0d0d; font-size: 15px; overflow: hidden; }
.t-mono.has-logo { background: none; }
.t-mono img { width: 100%; height: 100%; object-fit: contain; border-radius: inherit; display: block; }
.t-name { font-size: 14px; font-weight: 600; line-height: 1.2; }
.t-cat { font-size: 11.5px; color: var(--muted); margin-top: 1px; }
.t-addr { font-family: ui-monospace, "Cascadia Mono", monospace; font-size: 12.5px; color: var(--lime-bright); text-decoration: none; }
.t-addr:hover { text-decoration: underline; }
.t-dest { min-width: 0; }
.t-sub { font-size: 11px; color: var(--muted); margin-top: 3px; line-height: 1.4; }
.t-sub a { color: var(--lime-bright); }
.t-muted { color: var(--faint); }
.t-c-coins { text-align: right; font-weight: 600; font-size: 14px; }
.t-chip { display: inline-block; font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 20px; white-space: nowrap; }
.t-chip.direct { background: rgba(74, 222, 128, 0.15); color: var(--green); }
.t-chip.endaoment { background: rgba(212, 252, 80, 0.14); color: var(--lime-bright); }
.t-chip.manual { background: var(--well-soft); color: var(--muted); border: 1px solid var(--hair); }
.t-note { font-size: 12px; color: var(--muted); line-height: 1.6; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--hair); }

@media (max-width: 820px) {
  .how-row { grid-template-columns: 1fr; }
  .t-head, .t-c-vault, .t-c-coins { display: none; }
  .t-row { grid-template-columns: 1fr auto; gap: 10px 12px; }
  .t-c-org { grid-column: 1; }
  .t-c-route { grid-column: 2; justify-self: end; }
  .t-c-dest { grid-column: 1 / -1; padding-left: 50px; }
}