/* ==========================================================================
   Gopnik Token Marketplace — /tokens
   Cyber-luxe, brand-aligned, performance-first (no always-on animations;
   transitions only, on interaction). Scoped under .tkm.
   ========================================================================== */
.tkm {
  --tkm-vio:#8b5cf6; --tkm-cyan:#22d3ee; --tkm-pink:#f472b6;
  --tkm-green:#34d399; --tkm-red:#fb7185; --tkm-amber:#fbbf24;
  --tkm-txt:#f1f0ff; --tkm-dim:#9aa0c4; --tkm-faint:#6a6f99;
  --tkm-panel:#11122e; --tkm-panel2:#15163a; --tkm-line:rgba(140,120,255,.16);
  --tkm-line2:rgba(140,120,255,.34);
  --tkm-grad:linear-gradient(135deg,#8b5cf6,#22d3ee 55%,#f472b6);
  color:var(--tkm-txt);
}
.tkm-wrap { max-width:1640px; margin:0 auto; padding:26px 32px 80px; }

/* ── Promo banner (admin Control Center) — shared across markets ──── */
.mkt-banner-wrap{display:flex;flex-direction:column;gap:12px;margin:0 0 22px}
.mkt-banner-wrap[hidden]{display:none}
.mkt-banner{position:relative;display:flex;align-items:center;gap:18px;min-height:120px;padding:18px 24px;border-radius:18px;
  overflow:hidden;text-decoration:none;border:1px solid rgba(var(--gn-accent-rgb),.3);
  background:linear-gradient(110deg,#1a1340,#0c0c22);box-shadow:0 18px 50px -28px rgba(60,20,110,.8);transition:transform .2s,border-color .2s}
.mkt-banner:hover{transform:translateY(-2px);border-color:rgba(var(--gn-accent-rgb),.55)}
.mkt-banner-img{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.5;
  -webkit-mask:linear-gradient(90deg,transparent,#000 62%);mask:linear-gradient(90deg,transparent,#000 62%)}
.mkt-banner-tx{position:relative;z-index:1;flex:1;color:#f3f2fb;min-width:0}
.mkt-banner-tx b{display:block;font-family:"Cormorant Garamond",Georgia,serif;font-size:1.65rem;font-weight:600;letter-spacing:-.01em}
.mkt-banner-tx span{font-size:.9rem;color:#c7caec}
.mkt-banner-cta{position:relative;z-index:1;flex:0 0 auto;font-weight:800;font-size:.84rem;padding:11px 20px;border-radius:12px;
  background:linear-gradient(135deg,var(--gn-accent),var(--gn-accent-2) 55%,var(--gn-accent-3));color:#0a0a18}

/* Clickable rows + pinned (featured) Gopnik row */
.tkm-row { cursor:pointer; }
.tkm-row:hover { background:rgba(var(--gn-accent-rgb),.07); }
.tkm-row:focus-visible { outline:2px solid var(--tkm-cyan); outline-offset:-2px; }
.tkm-row.is-pinned { background:linear-gradient(90deg,rgba(var(--gn-accent-rgb),.14),rgba(var(--gn-accent-2-rgb),.05) 60%,transparent);
  box-shadow:inset 3px 0 0 0 var(--tkm-vio); }
.tkm-row.is-pinned:hover { background:linear-gradient(90deg,rgba(var(--gn-accent-rgb),.2),rgba(var(--gn-accent-2-rgb),.07) 60%,transparent); }
.tkm-pin { color:var(--tkm-amber); font-size:1rem; text-shadow:0 0 10px rgba(251,191,36,.5); }

/* ── Token detail modal ─────────────────────────────────────────── */
.tkm-modal { position:fixed; inset:0; z-index:1080; display:flex; align-items:center; justify-content:center; padding:24px; }
.tkm-modal[hidden] { display:none; }
.tkm-modal-back { position:absolute; inset:0; background:rgba(4,4,14,.72); backdrop-filter:blur(4px); }
.tkm-modal-card { position:relative; width:min(620px,100%); max-height:90vh; overflow-y:auto; -webkit-overflow-scrolling:touch;
  background:var(--tkm-panel); border:1px solid var(--tkm-line2); border-radius:20px; padding:22px 22px 20px;
  box-shadow:0 40px 90px -30px rgba(20,8,60,.9); }
.tkm-modal-x { position:absolute; top:12px; right:14px; width:34px; height:34px; border:0; border-radius:10px;
  background:rgba(var(--gn-accent-rgb),.12); color:var(--tkm-txt); font-size:1.4rem; line-height:1; cursor:pointer; }
.tkm-modal-x:hover { background:rgba(var(--gn-accent-rgb),.24); }
.tkm-m-head { display:flex; align-items:center; gap:14px; padding-right:38px; }
.tkm-m-ico { width:52px; height:52px; border-radius:14px; border:1px solid var(--tkm-line); object-fit:cover; background:#0c0c22; }
.tkm-m-id { flex:1; min-width:0; }
.tkm-m-sym { font-weight:800; font-size:1.3rem; }
.tkm-m-name { color:var(--tkm-dim); font-size:.84rem; }
.tkm-m-price { text-align:right; }
.tkm-m-price b { display:block; font-size:1.15rem; font-variant-numeric:tabular-nums; }
.tkm-m-price span { color:var(--tkm-faint); font-size:.78rem; }
.tkm-m-tfs { display:flex; gap:6px; margin:18px 0 8px; }
.tkm-m-tf { font-size:.74rem; font-weight:700; color:var(--tkm-dim); background:rgba(var(--gn-accent-rgb),.08);
  border:1px solid var(--tkm-line); border-radius:8px; padding:5px 12px; cursor:pointer; }
.tkm-m-tf.is-active { color:#0a0a18; background:var(--tkm-grad); border-color:transparent; }
.tkm-m-chart { position:relative; height:210px; border:1px solid var(--tkm-line); border-radius:14px;
  background:var(--tkm-panel2); overflow:hidden; display:flex; align-items:center; justify-content:center; }
.tkm-m-svg { width:100%; height:100%; display:block; }
.tkm-m-chart-note { color:var(--tkm-faint); font-size:.8rem; }
.tkm-m-chart-note.sub { position:absolute; left:10px; bottom:8px; font-size:.66rem; letter-spacing:.04em; }
.tkm-m-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin:16px 0 0;
  background:var(--tkm-line); border:1px solid var(--tkm-line); border-radius:12px; overflow:hidden; }
.tkm-m-cell { background:var(--tkm-panel); padding:11px 13px; }
.tkm-m-cell span { display:block; font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; color:var(--tkm-faint); }
.tkm-m-cell b { font-size:.95rem; font-variant-numeric:tabular-nums; }
.tkm-m-audit { margin:14px 0 0; }
.tkm-m-cta { display:flex; gap:10px; margin-top:18px; flex-wrap:wrap; }
.tkm-m-swap { flex:1; min-width:130px; text-align:center; text-decoration:none; font-weight:800; padding:12px 18px;
  border-radius:12px; background:var(--tkm-grad); color:#0a0a18; }
.tkm-m-ext, .tkm-m-copy { text-decoration:none; font-weight:700; font-size:.84rem; padding:12px 16px; border-radius:12px;
  border:1px solid var(--tkm-line2); background:transparent; color:var(--tkm-txt); cursor:pointer; }
.tkm-m-ext:hover, .tkm-m-copy:hover { border-color:var(--tkm-cyan); }
@media (max-width:560px){ .tkm-m-grid { grid-template-columns:repeat(2,1fr); } }

/* Header */
.tkm-head { display:flex; align-items:flex-end; justify-content:space-between; gap:18px; margin-bottom:22px; flex-wrap:wrap; }
.tkm-eyebrow { display:inline-block; font-size:.68rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--tkm-cyan);
  border:1px solid rgba(var(--gn-accent-2-rgb),.3); border-radius:999px; padding:5px 12px; background:rgba(var(--gn-accent-2-rgb),.06); }
.tkm-title { font-size:2.1rem; font-weight:900; letter-spacing:-.02em; margin:12px 0 4px;
  background:linear-gradient(120deg,#fff,#c4b5fd 55%,var(--gn-accent-2)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.tkm-lede { color:var(--tkm-dim); margin:0; max-width:620px; line-height:1.5; }
.tkm-refresh { display:inline-flex; align-items:center; gap:7px; font-weight:700; font-size:.82rem; color:#fff;
  background:rgba(20,18,48,.7); border:1px solid var(--tkm-line2); border-radius:11px; padding:9px 15px; cursor:pointer;
  transition:transform .15s, border-color .15s, background .15s; }
.tkm-refresh:hover { transform:translateY(-1px); border-color:var(--tkm-vio); background:rgba(var(--gn-accent-rgb),.16); }
.tkm-refresh.is-spin i { animation:tkm-spin .8s linear infinite; }
@keyframes tkm-spin { to { transform:rotate(360deg); } }

/* Stat band */
.tkm-band { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:22px; }
@media (max-width:760px){ .tkm-band{ grid-template-columns:1fr 1fr; } }
.tkm-b { position:relative; overflow:hidden; border:1px solid var(--tkm-line); border-radius:16px; padding:15px 18px; background:var(--tkm-panel); }
.tkm-b::before { content:""; position:absolute; top:0; left:0; right:0; height:2px; background:var(--tkm-grad); opacity:.75; }
.tkm-b-l { font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:var(--tkm-faint); font-weight:800; }
.tkm-b-v { font-size:1.5rem; font-weight:900; margin-top:4px; font-variant-numeric:tabular-nums; }

/* Controls */
.tkm-ctl { display:flex; align-items:center; gap:12px; margin-bottom:14px; flex-wrap:wrap; }
.tkm-cats { display:flex; gap:6px; flex-wrap:wrap; }
.tkm-cat { font-size:.82rem; font-weight:700; color:var(--tkm-dim); background:rgba(20,18,48,.6);
  border:1px solid var(--tkm-line); border-radius:10px; padding:8px 14px; cursor:pointer; transition:all .15s; }
.tkm-cat:hover { color:#fff; border-color:var(--tkm-line2); }
.tkm-cat.is-active { color:#fff; background:linear-gradient(120deg,rgba(var(--gn-accent-rgb),.28),rgba(var(--gn-accent-2-rgb),.16)); border-color:var(--tkm-line2); }
.tkm-search { margin-left:auto; display:flex; align-items:center; gap:8px; background:rgba(10,10,34,.6);
  border:1px solid var(--tkm-line); border-radius:11px; padding:9px 13px; min-width:260px; color:var(--tkm-dim); }
.tkm-search input { flex:1; background:none; border:0; outline:0; color:var(--tkm-txt); font-size:.85rem; }

/* Table */
.tkm-table-wrap { border:1px solid var(--tkm-line); border-radius:18px; overflow-x:auto; overflow-y:visible;
  -webkit-overflow-scrolling:touch; background:var(--tkm-panel); }
/* Fits fully at desktop width (the wrap is widened below); when the window is
   smaller than the table the wrap scrolls horizontally so the Swap button —
   and every column — stays reachable. */
.tkm-table { width:100%; min-width:980px; border-collapse:collapse; font-size:.86rem; }
.tkm-table td:last-child, .tkm-table th:last-child { padding-right:18px; }
/* a little air after the sparkline so the graph never looks clipped */
.tkm-table td:nth-last-child(2), .tkm-table th:nth-last-child(2) { padding-right:18px; }
.tkm-spark { margin-right:2px; }
/* keep the Token column compact so the whole table stays visible */
.tkm-tk { max-width:150px; }
.tkm-tk small { max-width:128px; }

/* ── 'Add bridge' toggle + strip ────────────────────────────────── */
.tkm-bridge-toggle{display:inline-flex;align-items:center;gap:7px;font-size:.82rem;font-weight:600;color:var(--tkm-dim);
  border:1px solid var(--tkm-line);border-radius:10px;padding:8px 14px;cursor:pointer;white-space:nowrap}
.tkm-bridge-toggle input{accent-color:var(--tkm-cyan)}
.tkm-bridge-strip{margin:16px 0 0;border:1px solid var(--tkm-line);border-radius:16px;background:var(--tkm-panel);padding:16px 18px}
.tkm-bridge-strip[hidden]{display:none}
.tkm-bridge-h{font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--tkm-faint);margin-bottom:12px}
.tkm-bridge-row{display:flex;gap:12px;flex-wrap:wrap}
.tkm-bridge-card{display:flex;flex-direction:column;gap:2px;min-width:128px;border:1px solid var(--tkm-line);border-radius:12px;
  padding:12px 14px;background:var(--tkm-panel2);text-decoration:none;color:var(--tkm-txt);transition:transform .15s,border-color .15s}
.tkm-bridge-card:hover{transform:translateY(-2px);border-color:var(--tkm-cyan)}
.tkm-bridge-sym{font-weight:800}.tkm-bridge-nm{font-size:.72rem;color:var(--tkm-faint)}
.tkm-bridge-go{font-size:.74rem;font-weight:700;color:var(--tkm-cyan);margin-top:6px}

/* ── pagination ─────────────────────────────────────────────────── */
.tkm-pager { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px; margin:16px 2px 0; }
.tkm-pager[hidden] { display:none; }
.tkm-pg-size { display:flex; align-items:center; gap:6px; font-size:.78rem; color:var(--tkm-dim); }
.tkm-pg-size > span { margin-right:4px; }
.tkm-ps { font-size:.78rem; font-weight:700; color:var(--tkm-dim); background:rgba(var(--gn-accent-rgb),.08); border:1px solid var(--tkm-line); border-radius:8px; padding:6px 11px; cursor:pointer; }
.tkm-ps.is-active { color:#0a0a18; background:var(--tkm-grad); border-color:transparent; }
.tkm-pg-info { font-size:.78rem; color:var(--tkm-faint); font-variant-numeric:tabular-nums; }
.tkm-pg-nav { display:flex; align-items:center; gap:4px; }
.tkm-pg-n, .tkm-pg-arrow { min-width:32px; height:32px; font-size:.82rem; font-weight:700; color:var(--tkm-txt); background:rgba(var(--gn-accent-rgb),.06); border:1px solid var(--tkm-line); border-radius:9px; cursor:pointer; }
.tkm-pg-n.is-active { color:#0a0a18; background:var(--tkm-grad); border-color:transparent; }
.tkm-pg-arrow:disabled { opacity:.4; cursor:not-allowed; }
.tkm-pg-dots { color:var(--tkm-faint); padding:0 2px; }
.tkm-table thead th { position:sticky; top:0; z-index:1; text-align:right; white-space:nowrap;
  color:var(--tkm-faint); font-size:.66rem; letter-spacing:.07em; text-transform:uppercase; font-weight:800;
  padding:13px 14px; background:#0f1029; border-bottom:1px solid var(--tkm-line); cursor:pointer; user-select:none; }
.tkm-table thead th.tkm-num, .tkm-table thead th.tkm-l { text-align:left; }
.tkm-table thead th[data-sort]:hover { color:var(--tkm-txt); }
.tkm-table thead th.tkm-sorted-desc::after { content:" ↓"; color:var(--tkm-cyan); }
.tkm-table thead th.tkm-sorted-asc::after { content:" ↑"; color:var(--tkm-cyan); }
.tkm-table tbody td { text-align:right; white-space:nowrap; padding:13px 14px; border-bottom:1px solid rgba(255,255,255,.04);
  font-variant-numeric:tabular-nums; }
.tkm-table tbody td.tkm-num, .tkm-table tbody td.tkm-l { text-align:left; }
.tkm-table tbody tr { transition:background .12s; }
.tkm-table tbody tr:hover { background:rgba(var(--gn-accent-rgb),.06); }
.tkm-num { color:var(--tkm-faint); width:34px; }

/* Token cell */
.tkm-tok { display:flex; align-items:center; gap:11px; }
.tkm-ico { width:30px; height:30px; border-radius:50%; flex:0 0 auto; object-fit:cover; background:#1a1840; border:1px solid var(--tkm-line); }
.tkm-tk { font-weight:800; }
.tkm-tk small { display:block; color:var(--tkm-faint); font-weight:500; font-size:.7rem; max-width:160px; overflow:hidden; text-overflow:ellipsis; }
.tkm-cat-tag { font-size:.56rem; font-weight:900; letter-spacing:.06em; text-transform:uppercase; padding:1px 6px; border-radius:5px; margin-left:6px; vertical-align:middle;
  background:rgba(var(--gn-accent-rgb),.16); color:#c4b5fd; border:1px solid var(--tkm-line); }
.tkm-up { color:var(--tkm-green); } .tkm-dn { color:var(--tkm-red); }
.tkm-price b { font-weight:800; }
.tkm-price small { display:block; color:var(--tkm-faint); font-size:.7rem; }

/* Audit badges */
.tkm-audit { display:inline-flex; gap:4px; flex-wrap:wrap; justify-content:flex-end; }
.tkm-ab { font-size:.56rem; font-weight:800; border-radius:5px; padding:2px 6px; white-space:nowrap; }
.tkm-ab.ok { background:rgba(52,211,153,.13); color:#34d399; border:1px solid rgba(52,211,153,.3); }
.tkm-ab.warn { background:rgba(251,191,36,.13); color:#fbbf24; border:1px solid rgba(251,191,36,.3); }
.tkm-ab.bad { background:rgba(251,113,133,.13); color:#fb7185; border:1px solid rgba(251,113,133,.3); }

/* Sparkline + swap */
.tkm-spark { width:96px; height:30px; display:block; margin-left:auto; }
.tkm-swap { border:0; background:var(--tkm-grad); color:#0a0a22; border-radius:9px; padding:7px 14px; font-weight:800; font-size:.76rem;
  cursor:pointer; text-decoration:none; display:inline-block; transition:transform .15s, box-shadow .15s; }
.tkm-swap:hover { transform:translateY(-1px); box-shadow:0 8px 20px rgba(var(--gn-accent-rgb),.4); color:#0a0a22; }

.tkm-loading, .tkm-empty { text-align:center; color:var(--tkm-faint); padding:48px 16px; }
.tkm-empty i { font-size:1.6rem; display:block; margin-bottom:8px; opacity:.5; }
.tkm-foot { color:var(--tkm-faint); font-size:.76rem; margin-top:16px; line-height:1.5; }

/* Mobile: collapse less-critical columns */
@media (max-width:1080px){
  .tkm-table th:nth-child(5), .tkm-table td:nth-child(5),   /* 7d */
  .tkm-table th:nth-child(7), .tkm-table td:nth-child(7),   /* liquidity */
  .tkm-table th:nth-child(9), .tkm-table td:nth-child(9),   /* holders */
  .tkm-table th:nth-child(11), .tkm-table td:nth-child(11)  /* sparkline */
  { display:none; }
}
@media (max-width:680px){
  .tkm-table th:nth-child(6), .tkm-table td:nth-child(6),   /* mcap */
  .tkm-table th:nth-child(8), .tkm-table td:nth-child(8),   /* vol */
  .tkm-table th:nth-child(10), .tkm-table td:nth-child(10)  /* audit */
  { display:none; }
  .tkm-table tbody td, .tkm-table thead th { padding:11px 9px; }
}
/* Small phones: stack the controls and let the pager / bridge strip wrap
   instead of forcing horizontal overflow. */
@media (max-width:480px){
  .tkm-ctl{flex-direction:column;align-items:stretch}
  .tkm-search{width:100%}
  .tkm-cats{flex-wrap:wrap}
  .tkm-bridge-card{min-width:0;flex:1 1 calc(50% - 12px)}
  .tkm-pager{flex-wrap:wrap;gap:8px}
  .tkm-pg-label{min-width:0}
}