/* ============================================
   STREAM ON PONS - pons-style dark UI (light theme 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-left can shrink (min-width:0) but this could not, so on a narrow
     phone it spilled out of its parent and sat UNDER the theme toggle and
     Connect button. That is an overlap, not an overflow, so the visual
     check's scrollWidth test never saw it. Let it scroll as a last resort
     rather than collide with the controls on the right. */
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.nav-pills::-webkit-scrollbar { display: none; }
.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;
}
/* minmax(0,...) not 1fr: a grid track's automatic minimum is min-content, so a
   single unbreakable word in one column widens that track and shoves the rest
   off screen. The wordmark went from "Stream On Pons" (breaks at spaces) to
   "StreamOnPons.com" (one 16-character token) on 2026-09-08 and did exactly
   that - 46px of horizontal overflow at 390px. */
.footer-grid { display: grid; grid-template-columns: 1.4fr minmax(0, 1fr) minmax(0, 1fr) 1.4fr; gap: 24px; margin-bottom: 30px; }
/* Last resort if the brand ever outgrows its column again: break it rather
   than push the page sideways. */
.footer .wordmark { font-size: 26px; font-weight: 600; letter-spacing: -0.5px; margin-bottom: 10px; overflow-wrap: anywhere; }
.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; }

/* Bonding-curve progress (Pons V2). Shown only before graduation - once the
   token moves to its locked Uniswap pool there is no curve left to fill. */
.curve-row {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-card);
  padding: 14px 18px 16px;
  margin-bottom: 18px;
}
.curve-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 9px; }
.curve-label { font-size: 11.5px; color: var(--muted); }
.curve-pct { font-size: 15px; font-weight: 600; color: var(--lime-bright); }
.curve-track {
  height: 7px;
  border-radius: 999px;
  background: var(--well-soft);
  overflow: hidden;
}
.curve-fill {
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--lime);
  transition: width 0.5s ease;
}
.curve-row.graduated .curve-fill { background: var(--lime-bright); }
.curve-sub { font-size: 11.5px; color: var(--faint); margin-top: 8px; }

.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: minmax(0, 1fr) minmax(0, 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; }

  /* One column on phones. Two 148px tracks cannot hold a 26px wordmark plus
     the risk notice, and squeezing the brand to fit reads worse than stacking. */
  .footer-grid { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .footer { padding: 24px 20px 16px; }
  .footer .f-desc { max-width: none; }
}

/* Below ~390px the nav ran out of room and the pills slid under the theme
   toggle: measured 3px of overlap at 375 and 18px at 360. Buy the space back
   rather than let anything sit on top of anything else. */
@media (max-width: 400px) {
  .nav { gap: 6px; }
  .nav-left { gap: 6px; }
  .logo-img { width: 30px; height: 30px; }
  .nav-pills { padding: 2px; }
  .nav-pill { padding: 6px 8px; font-size: 12.5px; }
  .nav-right { gap: 6px; }
  .mode-toggle { width: 28px; height: 28px; font-size: 13px; }
  .nav-right .btn { padding: 7px 10px; font-size: 12.5px; }
}

/* 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; }