/* =========================
   FreshFrogs — Clean, Unified Styles
   ========================= */

/* ---------- Theme tokens ---------- */
:root{
  --font-ui: Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
  --font-display: 'Space Grotesk',var(--font-ui);

  --bg:#0b0f13;
  --ink:#e9f2ff;
  --muted:#90a3b3;

  --panel:#0f141a;
  --panel-2:#121821;
  --panelSoft: var(--panel-2);

  --ring: rgba(255,255,255,.08);
  --border: var(--ring);
  --card: var(--panel);
  --card-2: var(--panel-2);
  --shadow: 0 8px 24px rgba(0,0,0,.35);

  --accent:#35d49a;
  --accent-ink:#051311;

  --radius:10px;
  --radius-pill:999px;

  --focus: 0 0 0 3px color-mix(in srgb, var(--accent) 26%, transparent);
  --list-max: 420px;
}
html[data-theme="pastel"]{
  --bg:#f6fbff; --ink:#11202b; --muted:#5d7a8a;
  --panel:#ffffff; --panel-2:#eaf5ff; --panelSoft:#eaf5ff;
  --ring:rgba(0,0,0,.10); --border:rgba(0,0,0,.10);
  --card: var(--panel); --card-2: var(--panel-2);
  --accent:#8ad1ff; --accent-ink:#08121a;
}

/* ---------- Base ---------- */
*{ box-sizing:border-box; }
html,body{ margin:0; }
body{ background:var(--bg); color:var(--ink); font:16px/1.55 var(--font-ui); }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; image-rendering:pixelated; }
.addr{ font-family: ui-monospace, Menlo, Consolas, monospace; }

/* ---------- Layout ---------- */
.container{ width:min(1140px,100%); margin:0 auto; padding:0 20px; }
.row{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.stack{ display:flex; flex-direction:column; gap:12px; }
.two-col{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:900px){ .two-col{ grid-template-columns:1fr; } }
.spacer{ flex:1; }

/* ---------- Panels / Cards (shared shell for Pond & Hub) ---------- */
.card, .panel, .fact{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:14px;
  box-shadow:0 1px 0 rgba(0,0,0,.3) inset;
}
.panel{ margin-block:12px; }

/* ---------- Header / Footer ---------- */
header.site{
  position:sticky; top:0; z-index:20;
  background:color-mix(in srgb,var(--panel) 70%,transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
}
.hdr{ height:64px; display:flex; align-items:center; justify-content:space-between; }
.brand{ font:900 18px/1 var(--font-display); }
.nav{ display:flex; gap:18px; align-items:center; }

footer.site{ border-top:1px solid var(--border); padding:26px 0; color:var(--muted); margin-top:26px; }
.ftr{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }

/* ---------- Typography & Pills ---------- */
.muted{ color:var(--muted); }
.section-title{ font:900 1.4rem/1 var(--font-display); letter-spacing:-.01em; }

.pill{
  display:inline-flex; align-items:center; gap:6px;
  padding:.28rem .6rem;
  border-radius:var(--radius-pill);
  border:1px solid var(--border);
  background:var(--panel-2);
  font-weight:700;
}
.pill-green{
  background:color-mix(in srgb,var(--accent) 35%, var(--panel-2));
  color:var(--accent-ink);
  border-color:color-mix(in srgb,var(--accent) 55%, transparent);
}

/* ---------- Media helpers ---------- */
.thumb64{
  width:64px; height:64px; min-width:64px; min-height:64px;
  border-radius:8px; object-fit:cover; aspect-ratio:1;
  image-rendering:pixelated;
}
.thumb128{
  width:128px; height:128px; min-width:128px; min-height:128px;
  border-radius:8px; object-fit:cover; aspect-ratio:1;
  image-rendering:pixelated;
}

/* ---------- Hero / Gallery ---------- */
.hero{ padding:56px 0 22px; display:grid; gap:24px; grid-template-columns:1.05fr .95fr; align-items:center; }
@media (max-width:960px){ .hero{ grid-template-columns:1fr; } }
.gallery{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; }
.tile{ position:relative; aspect-ratio:1; overflow:hidden; }
.tile img{ width:100%; height:100%; object-fit:contain; }

/* ---------- Generic facts grid (legacy) ---------- */
.facts{ padding:8px 0 6px; display:grid; gap:12px; grid-template-columns:repeat(4,1fr); }
@media (max-width:1100px){ .facts{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:580px){ .facts{ grid-template-columns:1fr; } }

/* ---------- Lists / cards ---------- */
.card-list{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.list-item{
  display:grid; grid-template-columns:auto 1fr auto;
  gap:10px; align-items:center;
  padding:12px 14px;
  border-radius:8px;
  border:1px solid var(--border);
  background:var(--panel);
}
.price{ font-weight:800; }
.same-height{ display:flex; flex-direction:column; }
.same-height .card-list{ flex:1; min-height:0; }

/* ---------- Tabs (Owned/Staked) ---------- */
.tabs{ display:flex; gap:8px; }
#stakeTabs .tab{
  border:1px solid color-mix(in srgb,var(--accent) 35%, transparent);
  border-radius:10px;
  padding:.42rem .70rem; line-height:1;
  background:transparent; color:var(--muted);
  font-weight:800; cursor:pointer;
  transition:background .15s, color .15s, border-color .15s;
}
#stakeTabs .tab[aria-selected="true"]{
  background:var(--accent); color:var(--accent-ink);
  border-color:var(--accent);
  box-shadow:0 6px 18px color-mix(in srgb,var(--accent) 35%, transparent);
}
#stakeTabs .tab-indicator{ display:none; }
#stakeTabs .tab:hover:not([aria-selected="true"]){
  border-color: color-mix(in srgb, var(--accent) 65%, transparent);
  color: color-mix(in srgb, var(--accent) 65%, var(--muted));
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.62rem;
  padding:.62rem .9rem;
  border-radius:var(--radius);
  border:1px solid color-mix(in srgb,var(--ink) 12%, transparent);
  background:var(--panel);
  color:var(--ink);
  font-weight:800; letter-spacing:.02em; cursor:pointer; user-select:none;
  transition: background .15s, border-color .15s, transform .05s, color .15s, filter .15s;
}
.btn:hover{ background: color-mix(in srgb, var(--panel-2) 55%, var(--panel)); border-color: color-mix(in srgb, var(--ink) 18%, transparent); }
.btn:active{ transform: translateY(1px); }
.btn:focus-visible{ outline:none; box-shadow: var(--focus); }
.btn-solid{ background:var(--accent); color:var(--accent-ink); border-color: color-mix(in srgb, var(--accent) 50%, transparent); }
.btn-outline{ background:transparent; color:var(--ink); border-color: color-mix(in srgb, var(--ink) 18%, transparent); }
.btn-ghost{ background:transparent; color:var(--muted); border-color: color-mix(in srgb, var(--ink) 10%, transparent); }
.btn-sm{ padding:.48rem .7rem; border-radius:8px; font-weight:700; }
.btn-lg{ padding:.85rem 1.1rem; font-size:1.05rem; }
.btn-xs{ padding:.30rem .55rem; font-size:.82rem; line-height:1; border-radius:8px; font-weight:700; }
a.btn{ display:inline-flex; align-items:center; justify-content:center; text-decoration:none; }

.btn[disabled], .btn:disabled{ opacity:.55; cursor:default; }
.btn[disabled]:hover, .btn:disabled:hover{
  background:var(--panel); color:var(--muted);
  border-color: color-mix(in srgb, var(--ink) 10%, transparent);
}
/* subtle accent pop on hover for enabled solid */
.btn:not([disabled]).btn-solid:hover{ filter:brightness(1.03); }

/* Icon-only button */
.icon-btn{
  width:40px; height:40px; border-radius:8px; display:inline-grid; place-items:center;
  border:1px solid color-mix(in srgb,var(--ink) 12%, transparent);
  background:var(--panel); color:var(--ink);
}

/* ---------- Progress ---------- */
.progress{ height:6px; background:var(--panel-2); border-radius:8px; border:1px solid var(--border); overflow:hidden; }
.progress i{ display:block; width:22%; height:100%; background:var(--accent); }

/* ---------- Scroll areas ---------- */
.list-scroll{ max-height:var(--list-max); overflow-y:auto; overscroll-behavior:contain; }
.list-scroll::-webkit-scrollbar{ width:10px; }
.list-scroll::-webkit-scrollbar-thumb{ background: color-mix(in srgb, var(--ink) 18%, transparent); border-radius:8px; }
.list-scroll::-webkit-scrollbar-track{ background: color-mix(in srgb, var(--panel-2) 70%, transparent); }

/* ---------- Modal ---------- */
.modal{ position:fixed; inset:0; display:none; z-index:50; }
.modal.open{ display:block !important; z-index:9999; }
.modal-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.6); backdrop-filter:blur(2px); }
.modal-panel{
  position:relative; margin:5vh auto; max-width:900px;
  background:var(--panel); color:var(--ink);
  border:1px solid var(--border); border-radius:18px;
  box-shadow:0 10px 40px rgba(0,0,0,.4);
  display:flex; flex-direction:column; gap:16px; padding:16px;
}
.modal-close{ position:absolute; top:10px; right:10px; }

/* Single-column modal layout */
.ffm-grid{ display:grid; grid-template-columns:1fr; gap:12px; }
.ffm-hero-wrap{ display:flex; justify-content:center; }
.ffm-info{ display:grid; gap:10px; }

/* Exact 256×256 hero container */
.ffm-hero,
#fmHero{
  width:256px; height:256px; min-width:256px; min-height:256px;
  border:1px solid var(--border);
  border-radius:12px; overflow:hidden;
  background:var(--panelSoft);
}
/* Keep layered children crisp (modal.js scales a 128 wrapper) */
#fmHero canvas, #fmHero img{ position:absolute; inset:0; image-rendering:pixelated; }

/* Title + subtitle */
.ffm-titlerow{ display:grid; gap:6px; }

/* Actions (3×2 grid) */
.ffm-actions{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:8px; }

/* Attribute list */
.ffm-attrlist{
  display:block; max-height:280px; overflow:auto;
  border:1px solid var(--border); border-radius:10px;
  background:var(--panelSoft); padding:6px 0;
}
.ffm-attrlist li{
  display:grid; grid-template-columns:1fr auto; gap:12px;
  padding:8px 12px; font-size:13px; align-items:center;
}
.ffm-attrlist li + li{ border-top:1px dashed var(--border); }
.ffm-attrlist .name{ font-weight:600; opacity:.95; }
.ffm-attrlist .val{ opacity:.95; }

/* Click affordance */
.list-item[data-token-id]{ cursor:pointer; }

/* ---------- Theme chooser dock (optional) ---------- */
.theme-dock{
  position:fixed; right:14px; bottom:14px; z-index:30;
  display:flex; gap:8px; flex-wrap:wrap;
  background: color-mix(in srgb, var(--panel) 82%, transparent);
  border:1px solid var(--border); border-radius:12px; padding:8px;
  backdrop-filter: blur(6px);
}
.swatch{ width:28px; height:28px; border-radius:8px; border:1px solid var(--border); cursor:pointer; display:inline-block; }
.swatch[aria-current="true"]{ outline:2px solid var(--accent); outline-offset:2px; }
.sw-noir{ background:#0f141a; }
.sw-pastel{ background:#eaf5ff; }

/* =========================
   User Hub (Minimal Pro)
   ========================= */

/* Hub shell = Pond shell */
.hub-pro.card{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px;
  margin-top: 12px;
}

.hub-pro{ padding:18px; }
.hub-pro__header{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:12px; }
.hub-pro__title h2{ margin:0 0 6px; font-weight:800; font-size:18px; }
.hub-pro__title p{ margin:0; }
.hub-pro__header-cta{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }

/* Split header with mini-stats on right (if used) */
.hub-pro__header--split{
  display:grid; grid-template-columns: 1.2fr .8fr; gap:16px; align-items:flex-start; margin-bottom:10px;
}
@media (max-width:980px){ .hub-pro__header--split{ grid-template-columns:1fr; } }
.mini-stats{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
@media (max-width:560px){ .mini-stats{ grid-template-columns:1fr 1fr 1fr; } }
.mini-stats li{ border:1px solid var(--border); background:var(--panel); border-radius:10px; padding:10px 12px; text-align:right; }
.mini-k{ font-size:11px; color:var(--muted); }
.mini-v{ font-weight:900; font-size:16px; }

.hub-pro__row{ display:grid; grid-template-columns:1fr; gap:16px; }
.hub-pro__row--split{ grid-template-columns:420px 1fr; }
@media (max-width:1080px){ .hub-pro__row--split{ grid-template-columns:1fr; } }

.hub-pro__actions{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:flex-start; }
.hub-pro__note{ font-size:12px; }

.hub-pro__card{
  background: var(--panel);
  border:1px solid var(--border);
  border-radius:12px;
}
.hub-pro__card-head{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px; border-bottom:1px solid var(--border);
}
.hub-pro__card-head h3{ margin:0; font-size:16px; font-weight:800; }
.hub-pro__meta{ display:flex; gap:14px; flex-wrap:wrap; }
.hub-pro__tabs{ display:flex; gap:8px; }
.hub-pro__card-body{ padding:12px; display:flex; flex-direction:column; gap:10px; }
.hub-pro__field{ display:flex; align-items:center; gap:10px; }
.hub-pro__field label{ font-size:12px; color:var(--muted); }
#hubMintQty{ width:96px; padding:8px; border-radius:8px; border:1px solid var(--border); background:transparent; color:inherit; }

/* My Frogs panel: contained scroll + Pond rows */
#hubMyFrogs #stakeStatus{ display:none; }
#hubMyFrogs .hub-pro__card-body{ max-height:560px; overflow:auto; padding-right:6px; }
#hubMyFrogs .hub-pro__card-body::-webkit-scrollbar{ width:8px; }
#hubMyFrogs .hub-pro__card-body::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.15); border:1px solid var(--border); border-radius:6px; }
#hubMyFrogs .hub-pro__card-body::-webkit-scrollbar-track{ background:transparent; }

#chipWrap .list-item{
  display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:center;
  padding:14px; border:1px solid var(--border); border-radius:12px; background:var(--panel);
}
#chipWrap .list-item + .list-item{ margin-top:10px; }
#chipWrap .thumb128{
  width:128px; height:128px; min-width:128px; min-height:128px;
  border-radius:12px; image-rendering:pixelated;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), 0 6px 12px rgba(0,0,0,.35);
}

/* =========================
   Collection Facts (match Pond stats)
   ========================= */
.facts-card{ padding:14px; }
.stats-grid{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(4,1fr); gap:12px;
}
@media (max-width:980px){ .stats-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .stats-grid{ grid-template-columns:1fr; } }
.stat-cell{
  border:1px solid var(--border);
  background:var(--panel);
  border-radius:12px;
  padding:12px;
}
.stat-k{ font-size:12px; color:var(--muted); margin-bottom:6px; }
.stat-v{ font-weight:800; }
/* Show about 5 activity rows, scroll for more */
#activityList.scrolling{
  max-height: 440px;           /* ~5 rows */
  overflow-y: auto;
  padding-right: 4px;
}
#activityList .row{ cursor: pointer; }
/* Recent Mints: height will be set dynamically via JS */
#recentMints.scrolling{
  overflow-y: auto;
  padding-right: 4px;
}
#recentMints .row{ cursor: pointer; }
/* --- Top action bar --- */
.ff-topbar{
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding: 10px 12px;
  background: var(--panel, #0f0f12);
  border-bottom: 1px solid var(--border, #26262b);
  backdrop-filter: blur(6px);
}
.ff-pill{
  -webkit-tap-highlight-color: transparent;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  font: inherit;
  line-height: 1;
  color: var(--ink, #d7d7df);
  background: transparent;
  border: 1px solid var(--border, #2a2a31);
  border-radius: 9999px;
  cursor: pointer;
  text-decoration: none;
  transition: transform .04s ease, background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.ff-pill:hover{
  --ff-green: var(--green, #35c46a);
  background: color-mix(in srgb, var(--ff-green), transparent 88%);
  border-color: color-mix(in srgb, var(--ff-green), transparent 40%);
  color: var(--ink, #e6ffe6);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--ff-green), transparent 85%);
}
.ff-pill:active{ transform: translateY(1px); }
@media (max-width: 720px){
  .ff-topbar{ gap: 6px; padding: 8px 10px; }
  .ff-pill{ padding: 8px 12px; }
}
/* Global scrollbar polish */
:root{
  /* tweak as you like */
  --scrollbar-w: 10px;
  --scrollbar-thumb: color-mix(in srgb, var(--muted) 45%, transparent);
  --scrollbar-thumb-hover: color-mix(in srgb, var(--muted) 70%, transparent);
  --scrollbar-track: color-mix(in srgb, var(--panel) 88%, transparent);
}

/* Firefox */
*{
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

/* WebKit/Blink */
*::-webkit-scrollbar{
  width: var(--scrollbar-w);
  height: var(--scrollbar-w);
}
*::-webkit-scrollbar-track{
  background: var(--scrollbar-track);
  border-radius: 12px;
}
*::-webkit-scrollbar-thumb{
  background: var(--scrollbar-thumb);
  border-radius: 12px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover{
  background: var(--scrollbar-thumb-hover);
}
/* Dashboard header wallet label */
.pg-card-head .dash-addr{
  font-weight: 400;         /* not bold */
  color: var(--muted);      /* same gray tone used in dashboard module */
  font-size: 12px;          /* harmonizes with header chrome */
  letter-spacing: .01em;
}
.pg-card-head .dash-addr{ font-weight:400; color:var(--muted); font-size:12px; letter-spacing:.01em; }
/* Hide header area if title is empty */
#ownedModal .om-title:empty { display:none }
#ownedModal .om-title:empty ~ .om-body { border-top: 1px solid var(--border); } /* keep a subtle divider */
#ownedModal .om-head { display:flex; align-items:center; gap:10px; min-height:0; }
#ownedModal .om-title { display:block } /* restored when non-empty */

/* Media block for frog preview */
#ownedModal .om-media{display:flex;align-items:center;gap:14px;margin:6px 0 12px 0}
#ownedModal .om-media .om-thumb{width:72px;height:72px;border-radius:10px;border:1px solid var(--border);object-fit:cover;background:#111}
#ownedModal .om-media .om-meta{display:flex;flex-direction:column}
#ownedModal .om-media .om-name{font-weight:700;font-size:14px}
#ownedModal .om-media .om-sub{color:var(--muted);font-size:12px}

/* Body text tone like dashboard */
#ownedModal .om-copy{color:var(--muted);font-size:13px;line-height:1.5}
#ownedModal .om-copy p{margin:0 0 10px 0}
/* assets/css/clean-overrides.css */

/* global page bg stays; we remove panel/card chrome */
.pg-card,
.panel,
.card,
.facts-card,
.stat-cell,
.info-block,
.row,
.frog-card {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* lists/rows still need spacing */
.row { padding: 12px 0 !important; }

/* tiles & thumbs keep rounded corners but no inner bg */
.thumb64, .thumb128, .frog-card .thumb {
  background: transparent !important;
  box-shadow: none !important;
}

/* topbar keeps layout, no chrome */
.ff-topbar {
  background: transparent !important;
  border-bottom: 0 !important;
  backdrop-filter: none !important;
}

/* info blocks grid spacing still nice */
.info-grid-2 { gap: 10px; }
/* assets/css/mutate-overrides.css */

/* perfect center */
#mutateCenter{
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 20px;
}

/* use the same frog-card typography, but no outer chrome */
.frog-card--mutate{
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  column-gap: 24px;
}

/* left stack = 256 preview + buttons */
.mutate-left{ display:flex; flex-direction:column; gap:10px; align-items:center; }

/* exact 256 × 256 preview, crisp pixels */
.mutate-hero{
  width:256px; height:256px; min-width:256px; min-height:256px;
  border-radius:12px;
  overflow:hidden;              /* crop the original still bg */
  position:relative;
  image-rendering: pixelated; image-rendering: crisp-edges;
}

/* layered parts you append here should be 128×128; we scale 2× */
.mutate-hero .layer{
  position:absolute; inset:0;
  width:128px; height:128px;
  transform: scale(2);          /* 128 -> 256 */
  transform-origin: top left;
  image-rendering: pixelated; image-rendering: crisp-edges;
}

/* use the *original* still image as background; push it to the right
   so only the plain bg color shows */
.mutate-hero{
  background-repeat:no-repeat;
  background-size: 240%;        /* big zoom-in so we see only flat color */
  background-position: 180% 60%;/* far right & slightly down */
}

/* keep your existing button look */
.actions{ display:flex; gap:8px; }

/* right side = title/meta/attrs, same metrics as dashboard cards */
.mutate-right .title{ margin:0 0 4px 0; font-weight:900; font-size:18px; letter-spacing:-.01em; }
.mutate-right .meta{ color:var(--muted); font-size:12px; }
.mutate-right .attr-bullets{ list-style:disc; margin:10px 0 0 18px; padding:0; }
.mutate-right .attr-bullets li{ font-size:12px; margin:2px 0; }

@media (max-width:720px){
  .frog-card--mutate{ grid-template-columns: 1fr; row-gap: 14px; }
  .mutate-left{ align-items:flex-start; }
}
/* mintMini: remove background/border/shadow entirely */
#mintMini,
.mintMini,
.mint-mini,
#mintMini .card,
#mintMini .panel,
#mintMini .hub-pro__card {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* If mintMini rows/cards inherit borders, clear those too */
#mintMini .row,
#mintMini .list-item,
#mintMini .stat-cell,
#mintMini .facts-card {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding-left: 0; padding-right: 0; /* keep spacing tight */
}
/* Site-wide hidden scrollbars (still scrolls) */
* {
  scrollbar-width: none;          /* Firefox */
  -ms-overflow-style: none;       /* IE/Edge legacy */
}
*::-webkit-scrollbar {
  width: 0 !important;            /* Chrome/Safari/Edge */
  height: 0 !important;
}

/* Optional: opt-in class instead of global — use on a container
   <div class="no-scrollbar"> … </div> */
.no-scrollbar { scrollbar-width: none; -ms-overflow-style: none; }
.no-scrollbar::-webkit-scrollbar { width:0 !important; height:0 !important; }
/* Show full addresses; only truncate if there's no room */
.addr-clip{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Make sure text columns are allowed to shrink so ellipsis can work */
#recentStakes .row > *, 
#recentMints  .row > *, 
#activityList .row > * { 
  min-width: 0; 
}
/* Modal thumbnails (stake/unstake) exactly 128×128 */
.om-thumb, .om-hero128{
  width:128px; height:128px;
  image-rendering:pixelated;
  border-radius:12px; overflow:hidden;
  display:block; margin:0 auto 12px;
}
/* Buttons: neutral gray outline style used across the app */
.btn-outline-gray{
  background:transparent;
  color:var(--ink);
  border:1px solid color-mix(in srgb, var(--ink) 18%, transparent);
}
.btn-outline-gray:hover{
  background:color-mix(in srgb, var(--ink) 8%, transparent);
  border-color:color-mix(in srgb, var(--ink) 28%, transparent);
}