:root {
  --bg: #0d1117;
  --surface: #131a22;
  --surface2: #1a232e;
  --border: #232e3b;
  --ink: #e6edf3;
  --ink2: #9aa7b4;
  --ink3: #6b7684;
  --up: #0ea371;
  --down: #ef4444;
  --accent: #3b82f6;
  --mono: "Cascadia Code", "Consolas", ui-monospace, monospace;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  background: var(--bg); color: var(--ink);
  font: 13px/1.45 "Segoe UI", system-ui, sans-serif;
  display: flex; flex-direction: column;
}
#topbar {
  display: flex; align-items: center; gap: 18px;
  padding: 10px 16px; border-bottom: 1px solid var(--border);
  background: var(--surface); position: sticky; top: 0; z-index: 10;
}
.brand { cursor: pointer; letter-spacing: 1px; font-size: 14px; color: var(--ink2); white-space: nowrap; }
.brand b { color: var(--ink); }
.brand-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); margin-right: 4px; }
nav { display: flex; gap: 4px; }
nav a {
  color: var(--ink2); text-decoration: none; padding: 6px 12px; border-radius: 6px; font-weight: 600;
}
nav a:hover { background: var(--surface2); color: var(--ink); }
nav a.active { background: var(--surface2); color: var(--ink); box-shadow: inset 0 -2px 0 var(--accent); }
#search {
  margin-left: auto; background: var(--bg); color: var(--ink);
  border: 1px solid var(--border); border-radius: 6px; padding: 6px 10px; width: 210px; outline: none;
}
#search:focus { border-color: var(--accent); }
#btcprice { font-family: var(--mono); color: var(--ink2); white-space: nowrap; }
main { flex: 1; overflow: auto; padding: 14px 16px 40px; }
footer {
  padding: 8px 16px; color: var(--ink3); border-top: 1px solid var(--border);
  font-size: 11px; background: var(--surface);
}

/* ---------- table screener ---------- */
.tablewrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
table { border-collapse: collapse; width: 100%; min-width: 1100px; }
thead th {
  position: sticky; top: 0; background: var(--surface2); color: var(--ink2);
  text-align: right; font-size: 11px; text-transform: uppercase; letter-spacing: .4px;
  padding: 8px 10px; cursor: pointer; user-select: none; white-space: nowrap;
}
thead th:first-child, thead th:nth-child(2) { text-align: left; }
thead th.sorted { color: var(--ink); }
thead th .dir { color: var(--accent); }
tbody td {
  padding: 7px 10px; text-align: right; border-top: 1px solid var(--border);
  font-family: var(--mono); font-size: 12.5px; white-space: nowrap;
}
tbody td:first-child, tbody td:nth-child(2) { text-align: left; }
tbody tr { cursor: pointer; }
tbody tr:hover { background: var(--surface2); }
.rank { color: var(--ink3); }
.tick { font-weight: 700; font-family: "Segoe UI", sans-serif; font-size: 13px; }
.badge {
  font-size: 9.5px; padding: 1px 6px; border-radius: 8px; margin-left: 6px;
  background: var(--surface2); color: var(--accent); border: 1px solid var(--border);
  font-family: "Segoe UI", sans-serif; vertical-align: 1px;
}
.up { color: var(--up); }
.down { color: var(--down); }
.dim { color: var(--ink3); }
.spark { vertical-align: middle; }

/* ---------- page token ---------- */
.tok-head { display: flex; align-items: baseline; gap: 16px; margin-bottom: 12px; flex-wrap: wrap; }
.tok-head h1 { font-size: 22px; }
.tok-head .price { font-family: var(--mono); font-size: 20px; }
.chg-pill { font-family: var(--mono); padding: 2px 8px; border-radius: 6px; background: var(--surface2); }
.tok-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 14px; }
@media (max-width: 980px) { .tok-grid { grid-template-columns: 1fr; } }
.panel { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; }
.panel h3 {
  font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--ink2);
  padding: 9px 12px; border-bottom: 1px solid var(--border);
}
.panel .body { padding: 10px 12px; }
#chart { height: 440px; }
.tfbar { display: flex; gap: 6px; padding: 8px 12px; border-bottom: 1px solid var(--border); }
.tfbar button {
  background: var(--surface2); border: 1px solid var(--border); color: var(--ink2);
  padding: 3px 10px; border-radius: 6px; cursor: pointer; font-weight: 600;
}
.tfbar button.active { color: var(--ink); border-color: var(--accent); }
.kv { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; font-size: 12.5px; }
.kv dt { color: var(--ink2); }
.kv dd { font-family: var(--mono); text-align: right; }
.minitable { width: 100%; border-collapse: collapse; min-width: 0; }
.minitable td, .minitable th {
  padding: 4px 6px; font-size: 11.5px; text-align: right; border-top: 1px solid var(--border);
  font-family: var(--mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.minitable th { color: var(--ink3); border-top: none; text-transform: uppercase; font-size: 10px; font-family: "Segoe UI", sans-serif; }
.minitable td:first-child, .minitable th:first-child { text-align: left; }
.addr { color: var(--ink3); max-width: 130px; }

/* ---------- mints ---------- */
.cols3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; }
.progress { background: var(--surface2); border-radius: 4px; height: 8px; overflow: hidden; min-width: 90px; }
.progress i { display: block; height: 100%; background: var(--accent); }
.mintrow { display: grid; grid-template-columns: 90px 1fr 60px; align-items: center; gap: 10px; padding: 7px 12px; border-top: 1px solid var(--border); }
.mintrow:hover { background: var(--surface2); cursor: pointer; }
.mintmeta { color: var(--ink3); font-size: 11px; font-family: var(--mono); }

/* ---------- tabs, badges, étoiles, cartes ---------- */
.tabbar { display: flex; gap: 6px; margin-bottom: 10px; flex-wrap: wrap; align-items: center; }
.tabbar button, .ghost {
  background: var(--surface); border: 1px solid var(--border); color: var(--ink2);
  padding: 6px 12px; border-radius: 6px; cursor: pointer; font-weight: 600; text-decoration: none; font-size: 12px;
}
.tabbar button.active { color: var(--ink); border-color: var(--accent); background: var(--surface2); }
.tabbar button:hover, .ghost:hover { color: var(--ink); }
.badge.mint { color: #eab308; border-color: #423a12; text-decoration: none; }
.star { cursor: pointer; color: var(--ink3); font-size: 14px; }
.star.on { color: #eab308; }
.progcell { display: flex; align-items: center; gap: 8px; justify-content: flex-end; }
.progcell .progress { width: 90px; }
.progress.big { height: 16px; border-radius: 8px; }
.cols2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 900px) { .cols2 { grid-template-columns: 1fr; } }
.feeditem { display: flex; justify-content: space-between; padding: 7px 4px; border-bottom: 1px solid var(--border); cursor: pointer; }
.feeditem:hover { background: var(--surface2); }
.rowlink { cursor: pointer; }
.stat .body.big { font-size: 22px; font-family: var(--mono); }
.venue { margin-bottom: 14px; }
.venue-head { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; border-bottom: 1px solid var(--border); }
.venue.ghosted { opacity: .55; }
.pedago summary { cursor: pointer; color: var(--accent); font-weight: 600; }
.pedago p { margin-top: 8px; color: var(--ink2); line-height: 1.6; }
.ok { color: var(--up); } .warn { color: #eab308; } .bad { color: var(--down); }
.kv dt .ok, .kv dt .warn, .kv dt .bad { margin-right: 4px; }
.addr a { color: var(--ink3); text-decoration: none; }
.addr a:hover { color: var(--accent); }
#bell { padding: 6px 8px; }

.loading { color: var(--ink3); padding: 40px; text-align: center; }
.error { color: var(--down); padding: 30px; text-align: center; }
h2.section { font-size: 15px; margin: 4px 0 10px; }
.note { color: var(--ink3); font-size: 11.5px; margin-top: 8px; }

tr.mine td { background: rgba(59,130,246,.12); }
.loupe { cursor: pointer; opacity: .5; font-size: 11px; }
.loupe:hover { opacity: 1; }
#tradefilter { text-transform: none; letter-spacing: 0; font-family: var(--mono); font-size: 11px; }

/* ---------- mode jour ---------- */
html.light {
  --bg: #f6f8fa;
  --surface: #ffffff;
  --surface2: #eef1f5;
  --border: #d8dee6;
  --ink: #1c2430;
  --ink2: #57606a;
  --ink3: #8b949e;
  --up: #047857;
  --down: #dc2626;
  --accent: #2563eb;
}
html.light .badge.mint { color: #a16207; border-color: #e7d8a1; }
html.light tr.mine td { background: rgba(37,99,235,.10); }
html.light .star.on { color: #ca8a04; }

/* ---------- logos de tickers ---------- */
.tklogo { border-radius: 50%; vertical-align: -5px; margin-right: 7px; object-fit: cover; background: var(--surface2); }
.tklogo.fb { display: inline-flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-family: "Segoe UI", sans-serif; }

/* ---------- signal badges (mints) ---------- */
.sig {
  cursor: help; margin-left: 5px; font-size: 10.5px; font-family: var(--mono);
  background: var(--surface2); border: 1px solid var(--border); border-radius: 8px;
  padding: 1px 5px; vertical-align: 1px; white-space: nowrap;
}
.legend { margin: -2px 0 10px; }
.legend .sig { margin-left: 0; cursor: default; }

/* ---------- signal details on the mint card ---------- */
.siglist dt { margin-top: 8px; font-size: 12.5px; }
.siglist dt:first-child { margin-top: 0; }
.siglist dd { color: var(--ink2); margin: 2px 0 0 24px; line-height: 1.5; }

/* ---------- info chip (legende au survol) ---------- */
.infochip { position: relative; cursor: help; margin-left: 4px; font-size: 14px; user-select: none; }
.infochip .infopop {
  display: none; position: absolute; top: 130%; left: 0; z-index: 60; width: 360px;
  background: var(--surface2); border: 1px solid var(--border); border-radius: 8px;
  padding: 10px 12px; font-size: 12px; line-height: 1.7; color: var(--ink);
  box-shadow: 0 6px 24px rgba(0,0,0,.35); white-space: normal; font-weight: 400;
}
.infochip:hover .infopop, .infochip:focus .infopop { display: block; }

/* ---------- age filter chips (recently deployed) ---------- */
.agefilters { display: inline-flex; gap: 4px; margin-left: 10px; }
.agefilters button {
  background: var(--surface); border: 1px solid var(--border); color: var(--ink3);
  padding: 3px 9px; border-radius: 12px; cursor: pointer; font-size: 11px; font-weight: 600;
}
.agefilters button.active { color: var(--ink); border-color: var(--accent); background: var(--surface2); }

/* ---------- panneau de filtres (mints) ---------- */
.filterwrap { position: relative; }
#mintfilterbtn {
  background: var(--surface); border: 1px solid var(--border); color: var(--ink2);
  padding: 6px 12px; border-radius: 6px; cursor: pointer; font-weight: 600; font-size: 12px;
}
#mintfilterbtn.active { color: var(--ink); border-color: var(--accent); background: var(--surface2); }
.filterpanel {
  position: absolute; right: 0; top: 120%; z-index: 70; width: 300px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
  padding: 10px 12px; box-shadow: 0 8px 28px rgba(0,0,0,.35);
}
.fgroup { margin-bottom: 8px; }
.fgtitle { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: .5px; color: var(--ink3); margin-bottom: 3px; }
.fgroup label { display: block; padding: 2px 0; cursor: pointer; font-size: 12.5px; color: var(--ink); }
.fgroup input { accent-color: var(--accent); margin-right: 6px; }
.factions { display: flex; align-items: center; gap: 10px; border-top: 1px solid var(--border); padding-top: 8px; font-size: 11px; }
tbody tr.hit td { background: rgba(59,130,246,.10); }
tbody tr.hit td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
tbody tr.miss { opacity: .40; }
html.light tbody tr.hit td { background: rgba(37,99,235,.08); }

/* market: token + logo alignes a gauche (3e colonne) */
.market-table thead th:nth-child(3), .market-table tbody td:nth-child(3) { text-align: left; }

/* ---------- venue chips ---------- */
.venuechips { display: flex; gap: 8px; margin-bottom: 12px; align-items: center; }
.venuechip {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--surface); border: 1px solid var(--border); color: var(--ink2);
  padding: 7px 14px; border-radius: 8px; font-weight: 700; font-size: 13px; cursor: pointer;
}
.venuechip img { width: 18px; height: 18px; border-radius: 4px; }
.venuechip.active { color: var(--ink); border-color: var(--accent); background: var(--surface2); }
.venuechip.soon { opacity: .55; cursor: default; font-weight: 600; }

/* ---------- page de garde (landing) ---------- */
#landing { position: fixed; inset: 0; z-index: 200; background: #05080c; }
#lcanvas { position: absolute; inset: 0; }
.lhash {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -54%);
  font-size: 150px; font-weight: 800; font-family: "Segoe UI", sans-serif;
  background: linear-gradient(160deg, #60a5fa 10%, #e6edf3 55%, #f7931a 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 0 60px rgba(96, 165, 250, .25);
  user-select: none; pointer-events: none;
}
.lbottom {
  position: absolute; left: 0; right: 0; bottom: 9%;
  text-align: center; color: #e6edf3;
}
.lbottom h1 { font-size: 26px; letter-spacing: 4px; font-weight: 300; }
.lbottom h1 b { font-weight: 800; }
.lbottom p { color: #9aa7b4; margin: 10px 0 18px; font-size: 13.5px; }
#lenter {
  background: transparent; color: #e6edf3; border: 1px solid #60a5fa;
  padding: 10px 34px; border-radius: 8px; font-size: 14px; font-weight: 700; cursor: pointer;
  transition: background .2s, box-shadow .2s;
}
#lenter:hover { background: rgba(96, 165, 250, .15); box-shadow: 0 0 24px rgba(96, 165, 250, .35); }

/* ---------- landing : habillage trou noir ---------- */
#lcanvas-host { position: absolute; inset: 0; }
#lcanvas-host canvas { display: block; }
#lvignette { position: absolute; inset: 0; background: radial-gradient(circle, transparent 50%, black 150%); pointer-events: none; }
.loverlay {
  position: absolute; inset: 0; pointer-events: none;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 40px; z-index: 10;
  background: radial-gradient(circle at center, transparent 30%, rgba(0,0,0,0.5) 100%);
}
.lheader { text-align: center; }
.ltitle {
  font-size: 1.2rem; letter-spacing: .8em; text-transform: uppercase;
  color: #fff; margin-bottom: 12px; font-weight: 300; opacity: .9;
  transition: opacity .8s ease;
}
.lpill {
  display: inline-block; padding: 6px 20px;
  background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.15);
  border-radius: 30px; font-size: .65rem; letter-spacing: .25em; text-transform: uppercase;
  color: #00f3ff; transition: all 1.5s cubic-bezier(.4,0,.2,1);
}
.lhud {
  display: flex; justify-content: space-between; align-items: flex-end;
  font-family: var(--mono); font-size: .7rem; letter-spacing: 1px; color: #e6edf3; opacity: .85;
}
.lmetric { margin-bottom: 6px; }
.lval { color: #00f3ff; font-weight: bold; }
.lhud #lenter { pointer-events: auto; }
.lhash { z-index: 11; }

/* ============================================================
   CYBERPUNK SKIN — shapes/fonts/structure from the terminal pen,
   colors mapped to our black-hole landing palette (blue glow + BTC orange)
   ============================================================ */
:root {
  --bg: #070b12;
  --surface: #0c121cf0;
  --surface2: #131b28;
  --border: #1e2a3d;
  --accent: #60a5fa;
  --mono: "Roboto Mono", "Cascadia Code", ui-monospace, monospace;
  --btc: #f7931a;
  --glow: 0 0 6px rgba(96, 165, 250, .5);
  --glow-soft: 0 0 3px rgba(96, 165, 250, .35);
  --glow-text: -6px -4px 28px rgba(96, 165, 250, .55);
  --notch: 12px;
  --notch-path: polygon(0 0, 100% 0, 100% calc(100% - var(--notch) + 2px), calc(100% - var(--notch) + 2px) 100%, 0 100%);
  --notch-sm: polygon(0 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%);
}
html.light {
  --glow: none; --glow-soft: none; --glow-text: none;
  --btc: #b45309;
}
body { font-family: "Rajdhani", "Segoe UI", system-ui, sans-serif; font-size: 13.5px; }

/* --- brand & nav: terminal typography --- */
.brand { font-family: "VT323", var(--mono); font-size: 20px; letter-spacing: 2px; text-transform: uppercase; text-shadow: var(--glow-text); }
.brand b { color: var(--accent); }
.brand-dot { background: var(--btc); box-shadow: 0 0 8px var(--btc); }
nav a { font-family: "Rajdhani", sans-serif; font-weight: 600; text-transform: uppercase; letter-spacing: 1.5px; font-size: 12.5px; }
nav a.active { box-shadow: inset 0 -2px 0 var(--accent), var(--glow-soft); }
#topbar { border-bottom: 1px solid var(--border); box-shadow: 0 1px 0 rgba(96, 165, 250, .18); }
#btcprice { color: var(--btc); text-shadow: var(--glow-soft); }

/* --- section titles: glow + delimiter line --- */
h2.section, .panel h3, .venue-head > div:first-child {
  font-family: "Rajdhani", sans-serif; text-transform: uppercase; letter-spacing: 2px;
  text-shadow: var(--glow-text);
}
h2.section { font-size: 17px; font-weight: 700; padding-bottom: 8px; position: relative; }
h2.section::after {
  content: ""; position: absolute; left: 0; right: 40%; bottom: 0; height: 1px;
  background: linear-gradient(90deg, var(--accent), transparent); box-shadow: var(--glow);
}
.panel h3 { border-bottom: 1px solid var(--border); box-shadow: 0 1px 0 rgba(96, 165, 250, .12); }

/* --- notched panels (the pen's signature shape) --- */
.panel, .tablewrap, .filterpanel, .infopop, .stat {
  clip-path: var(--notch-path);
  border: 1px solid var(--border);
  border-radius: 0;
}
.panel::before, .tablewrap::before {
  content: ""; position: absolute; right: -5px; bottom: calc(var(--notch) / 2 - 3px);
  width: 19px; height: 2px; background: var(--border);
  transform: rotate(-45deg); z-index: 5; pointer-events: none;
}
.panel, .tablewrap { position: relative; }
.panel:hover::before, .tablewrap:hover::before { background: var(--accent); box-shadow: var(--glow); }

/* --- tabs, chips & buttons: notched + blue hover glow --- */
.tabbar button, .ghost, .venuechip, #mintfilterbtn, .tfbar button, .agefilters button {
  clip-path: var(--notch-sm);
  border-radius: 0;
  font-family: "Rajdhani", sans-serif; font-weight: 600; text-transform: uppercase; letter-spacing: 1px;
}
.tabbar button.active, .venuechip.active, #mintfilterbtn.active, .tfbar button.active {
  box-shadow: inset 0 0 12px rgba(96, 165, 250, .18), var(--glow-soft);
  text-shadow: var(--glow-soft);
}
.tabbar button:hover, .ghost:hover, .venuechip:hover:not(.soon), .tfbar button:hover { border-color: var(--accent); }

/* --- numbers: Roboto Mono everywhere data lives --- */
tbody td, .kv dd, .minitable td, .clock, .price, .chg-pill, .stat .body.big, .lmetric { font-family: var(--mono); }
thead th, .minitable th { font-family: "Rajdhani", sans-serif; font-weight: 600; letter-spacing: 1.5px; color: #7f96b8; }
thead th.sorted { color: var(--accent); text-shadow: var(--glow-soft); }

/* --- inputs: terminal style --- */
input[type="text"], input[type="search"] {
  border-radius: 0 !important; clip-path: var(--notch-sm);
}
#search:focus { box-shadow: var(--glow-soft); }

/* --- progress bars: blue -> orange gradient with glow --- */
.progress i { background: linear-gradient(90deg, var(--accent), var(--btc)); box-shadow: var(--glow-soft); }

/* --- scrollbars: thin accent (the pen's) --- */
::-webkit-scrollbar { background: transparent; width: 5px; height: 5px; }
::-webkit-scrollbar-thumb { background-color: var(--accent); }

/* --- badges --- */
.badge { border-radius: 0; clip-path: var(--notch-sm); letter-spacing: 1px; }
.badge.mint { color: var(--btc); border-color: #4a3410; }

/* --- footer --- */
footer { font-family: var(--mono); letter-spacing: .5px; }

/* --- landing: listing contact link --- */
.llisting { margin-top: 12px; }
.llisting a {
  color: #9aa7b4; font-size: 11.5px; letter-spacing: 1px; text-decoration: none;
  border-bottom: 1px dotted #60a5fa66; pointer-events: auto; font-family: var(--mono);
}
.llisting a:hover { color: #60a5fa; text-shadow: 0 0 8px rgba(96, 165, 250, .6); }

/* --- deep space backdrop --- */
html:not(.light) body {
  background-color: var(--bg);
  background-image: radial-gradient(ellipse at 30% -10%, #0c1a30 0%, transparent 65%),
                    radial-gradient(ellipse at 85% 110%, #1a1206 0%, transparent 55%);
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/* ---------- scrollbars: discreet, no bright blue bars ---------- */
::-webkit-scrollbar-thumb { background-color: #2b3a52; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background-color: #3d5170; }
html.light ::-webkit-scrollbar-thumb { background-color: #c3ccd8; }
/* table horizontal scrollbar hidden (scroll still works: wheel, shift+wheel, drag, trackpad) */
.tablewrap { scrollbar-width: none; -ms-overflow-style: none; }
.tablewrap::-webkit-scrollbar { height: 0; width: 0; }

/* ---------- brand logo (header) ---------- */
.brand { display: flex; align-items: center; gap: 9px; }
.brand-logo {
  width: 26px; height: 26px; border-radius: 5px; display: block;
  box-shadow: 0 0 14px rgba(96, 165, 250, .35);
}
.brand:hover .brand-logo { box-shadow: 0 0 20px rgba(96, 165, 250, .6); }

/* ---------- staking dashboard visuals ---------- */
.statgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; align-items: center; }
.statcard { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 6px 4px; }
.statcard.wide { grid-column: span 2; flex-direction: row; gap: 18px; flex-wrap: wrap; }
@media (max-width: 900px) { .statcard.wide { grid-column: span 1; } }
.chartlegend { display: flex; flex-direction: column; gap: 7px; font-size: 12px; min-width: 200px; }
.chartlegend span { display: flex; align-items: center; gap: 7px; white-space: nowrap; }
.chartlegend i { width: 11px; height: 11px; border-radius: 2px; display: inline-block; flex: none; }
.chartlegend b { font-family: var(--mono); }
.chartnote { color: var(--ink2); font-size: 12.5px; line-height: 1.6; margin-top: 12px; }
.hbars { display: flex; flex-direction: column; gap: 7px; }
.hbar { display: grid; grid-template-columns: 108px 1fr auto; align-items: center; gap: 10px; font-size: 12px; }
.hbar[data-href] { cursor: pointer; }
.hbar-lab { font-family: var(--mono); font-size: 11px; color: var(--ink2); overflow: hidden; text-overflow: ellipsis; }
.hbar-lab a { color: var(--ink2); text-decoration: none; }
.hbar-lab a:hover { color: var(--accent); }
.hbar-track { background: var(--surface2); height: 13px; border-radius: 2px; overflow: hidden; }
.hbar-track i { display: block; height: 100%; border-radius: 2px 0 0 2px; }
.hbar-val { font-family: var(--mono); font-size: 11.5px; text-align: right; white-space: nowrap; }

/* ---------- pure-CSS donut (slices driven by --first … --fifth) ---------- */
.donut {
  --donut-size: 190px;
  --donut-hole: 62%;
  --donut-spacing: 1.4;     /* degrees of gap between slices */
  position: relative;
  width: var(--donut-size); height: var(--donut-size);
  border-radius: 50%;
  flex: none;
}
.donut__slice {
  position: absolute; inset: 0; border-radius: 50%;
}
.donut__slice__first  { transform: rotate(0deg); }
.donut__slice__second { transform: rotate(calc(var(--first) * 360deg)); }
.donut__slice__third  { transform: rotate(calc((var(--first) + var(--second)) * 360deg)); }
.donut__slice__fourth { transform: rotate(calc((var(--first) + var(--second) + var(--third)) * 360deg)); }
.donut__slice__fifth  { transform: rotate(calc((var(--first) + var(--second) + var(--third) + var(--fourth)) * 360deg)); }
.donut__slice__first  { background: conic-gradient(from calc(var(--donut-spacing) * 1deg), var(--color-first)  0 calc(var(--first)  * 360deg - var(--donut-spacing) * 2deg), transparent 0); }
.donut__slice__second { background: conic-gradient(from calc(var(--donut-spacing) * 1deg), var(--color-second) 0 calc(var(--second) * 360deg - var(--donut-spacing) * 2deg), transparent 0); }
.donut__slice__third  { background: conic-gradient(from calc(var(--donut-spacing) * 1deg), var(--color-third)  0 calc(var(--third)  * 360deg - var(--donut-spacing) * 2deg), transparent 0); }
.donut__slice__fourth { background: conic-gradient(from calc(var(--donut-spacing) * 1deg), var(--color-fourth) 0 calc(var(--fourth) * 360deg - var(--donut-spacing) * 2deg), transparent 0); }
.donut__slice__fifth  { background: conic-gradient(from calc(var(--donut-spacing) * 1deg), var(--color-fifth)  0 calc(var(--fifth)  * 360deg - var(--donut-spacing) * 2deg), transparent 0); }
.donut__label {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: var(--donut-hole); height: var(--donut-hole);
  background: var(--surface); border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 2px;
}
.donut__label__heading {
  font-family: var(--mono); font-size: 26px; font-weight: 700; color: var(--ink); line-height: 1;
}
.donut__label__sub {
  font-family: "Rajdhani", sans-serif; font-size: 10px; letter-spacing: 1.4px;
  text-transform: uppercase; color: var(--ink2);
}

/* ---------- gauges: value inside the ring, caption below ---------- */
.gauge { display: flex; flex-direction: column; align-items: center; width: 100%; }
.gauge svg { width: 100%; max-width: 190px; display: block; }
.gauge-sub {
  font-family: var(--mono); font-size: 11px; color: var(--ink2);
  margin-top: -14px; text-align: center; white-space: nowrap;
}

/* ---------- venue / protocol logos ---------- */
.venuetitle { display: flex; align-items: center; gap: 9px; }
.venuetitle img { width: 22px; height: 22px; border-radius: 5px; display: block; }
.venuechip img { width: 18px; height: 18px; border-radius: 4px; }
/* trou du donut opaque (sinon les tranches transparaissent a travers) */
.donut__label { background: #0c121c; }
html.light .donut__label { background: #ffffff; }

/* ---------- landing : scroll + ledger tape ---------- */
#landing { overflow-y: auto; overflow-x: hidden; }
#landing > #lcanvas-host, #landing > #lvignette, #landing > .lhash, #landing > .loverlay { position: fixed; }
#landing > .loverlay { height: 100vh; }
.lscrollhint {
  position: relative; z-index: 12; margin-top: 100vh;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  color: #9aa7b4; font-family: var(--mono); font-size: 10.5px; letter-spacing: 2px;
  text-transform: uppercase; padding-bottom: 26px;
  animation: hintbob 2.6s ease-in-out infinite;
}
@keyframes hintbob { 0%, 100% { transform: translateY(0); opacity: .55 } 50% { transform: translateY(6px); opacity: 1 } }
@media (prefers-reduced-motion: reduce) { .lscrollhint { animation: none } }

#ltape {
  position: relative; z-index: 12;
  background: linear-gradient(180deg, rgba(5,8,12,0) 0%, #05080c 12%, #05080c 100%);
  padding: 40px 20px 70px; text-align: center;
}
.tape-head h2 {
  font-family: "Rajdhani", sans-serif; font-size: 15px; letter-spacing: .7em;
  color: #e6edf3; font-weight: 300; text-transform: uppercase;
}
.tape-head p {
  color: #7f96b8; font-size: 12.5px; line-height: 1.7; max-width: 520px;
  margin: 10px auto 26px; font-family: "Rajdhani", sans-serif;
}
/* the paper: perforated strip coming out of the singularity */
.tape {
  position: relative; width: min(660px, 94vw); margin: 0 auto;
  background: rgba(10, 16, 26, .82);
  border-left: 1px dashed rgba(96,165,250,.28); border-right: 1px dashed rgba(96,165,250,.28);
  padding: 8px 30px 22px; text-align: left; min-height: 220px;
  box-shadow: 0 0 60px rgba(96,165,250,.07) inset;
}
.tape::before, .tape::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 12px;
  background-image: radial-gradient(circle, rgba(96,165,250,.32) 2.2px, transparent 2.4px);
  background-size: 12px 20px; background-position: center top;
}
.tape::before { left: 7px } .tape::after { right: 7px }
.tape-loading { color: #56698a; font-family: var(--mono); font-size: 12px; padding: 60px 0; text-align: center; letter-spacing: 2px; }
.tl {
  display: grid; grid-template-columns: 82px 78px 1fr auto; gap: 10px; align-items: baseline;
  font-family: var(--mono); font-size: 11.5px; color: #cfe0f5; padding: 2.5px 0;
}
.tl-op { color: #60a5fa; letter-spacing: .5px }
.tl-swap_exe, .tl-swap_init { color: #a78bfa }
.tl-deploy { color: #f7931a }
.tl-tick { color: #e6edf3; font-weight: 700 }
.tl-amt { color: #93a9c4; text-align: right }
.tl-tx { color: #56698a; text-decoration: none; font-size: 10.5px }
.tl-tx:hover { color: #60a5fa }
.tl-bulk { opacity: .55 }
.tl-bulk .tl-op { color: #7f96b8 }
.tl-in { animation: tprint .22s ease-out }
@keyframes tprint { from { opacity: 0; transform: translateY(-5px) } to { opacity: 1; transform: none } }
@media (prefers-reduced-motion: reduce) { .tl-in { animation: none } }
.tb { margin: 12px 0 6px }
.tb-cut {
  height: 1px; margin-bottom: 7px;
  background-image: linear-gradient(90deg, rgba(247,147,26,.55) 0 6px, transparent 6px 12px);
  background-size: 12px 1px;
}
.tb-line { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; font-family: var(--mono); font-size: 11px }
.tb-h { color: #f7931a; font-weight: 700; letter-spacing: .5px }
.tb-n { color: #93a9c4 }
.tb-t { color: #56698a }
.tb-hash { color: #56698a; text-decoration: none; margin-left: auto }
.tb-hash:hover { color: #f7931a }
.tape-foot { margin-top: 34px }
#lenter2 {
  background: transparent; color: #e6edf3; border: 1px solid #60a5fa;
  padding: 11px 34px; border-radius: 8px; font-size: 13.5px; font-weight: 700; cursor: pointer;
  font-family: "Rajdhani", sans-serif; letter-spacing: 1.5px; text-transform: uppercase;
}
#lenter2:hover { background: rgba(96,165,250,.15); box-shadow: 0 0 24px rgba(96,165,250,.35) }

/* ---------- landing scroll fix : screen 1 sticky, children absolute ----------
   (fixed children escape #landing's scroll container, so the wheel never reached it) */
#landing { background: #05080c; }
.lscreen1 { position: sticky; top: 0; height: 100vh; width: 100%; }
#landing > .lscreen1 > #lcanvas-host,
#landing > .lscreen1 > #lvignette,
#landing > .lscreen1 > .loverlay { position: absolute; inset: 0; height: 100%; }
#landing > .lscreen1 > .lhash { position: absolute; }
#landing > .lscreen1 > .lscrollhint {
  position: absolute; left: 0; right: 0; bottom: 10px; margin-top: 0; z-index: 13;
}
/* laisser passer le defilement vertical au doigt/trackpad par-dessus le canvas 3D */
#lcanvas-host canvas { touch-action: pan-y !important; }

/* ---------- listing call-to-action, under the ledger ---------- */
.listing-cta {
  max-width: 520px; margin: 46px auto 0; padding: 26px 24px;
  border: 1px solid rgba(96,165,250,.22); border-radius: 10px;
  background: rgba(10,16,26,.6); text-align: center;
}
.listing-cta h3 {
  font-family: "Rajdhani", sans-serif; font-size: 16px; letter-spacing: 3px;
  text-transform: uppercase; color: #e6edf3; font-weight: 600; margin-bottom: 8px;
}
.listing-cta p { color: #7f96b8; font-size: 12.5px; line-height: 1.7; font-family: "Rajdhani", sans-serif; }
.listing-btn {
  display: inline-block; margin-top: 16px; padding: 10px 26px;
  border: 1px solid #f7931a; border-radius: 8px; color: #f7931a;
  text-decoration: none; font-family: "Rajdhani", sans-serif; font-weight: 700;
  letter-spacing: 1.5px; text-transform: uppercase; font-size: 12.5px;
}
.listing-btn:hover { background: rgba(247,147,26,.14); box-shadow: 0 0 22px rgba(247,147,26,.3); }
/* on-chain verification badge on tape lines */
.tl { grid-template-columns: 76px 66px 1fr auto auto; }
.tl-ver { font-size: 9.5px; color: #56698a; font-family: var(--mono); letter-spacing: .3px; white-space: nowrap; }
.tl-ver.ok { color: #0ea371; }
.tl-ver.warn { color: #eab308; }

/* ---------- contact page ---------- */
.contactwrap { max-width: 680px; margin: 10px auto 40px; }
.contact-lead { color: var(--ink2); line-height: 1.75; font-size: 13.5px; }
.contact-mail {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 16px 0 6px; padding: 12px 14px;
  background: var(--surface2); border: 1px solid var(--border); clip-path: var(--notch-sm);
}
.contact-mail #cmail { font-family: var(--mono); font-size: 14px; color: var(--btc); letter-spacing: .3px; }
.contact-sub { color: var(--ink); margin-top: 18px; font-weight: 600; font-size: 13px; }
.contact-list { margin: 8px 0 4px 18px; color: var(--ink2); font-size: 13px; line-height: 1.9; }
.contact-list b { color: var(--ink); }
#footcontact { color: var(--ink3); text-decoration: none; margin-left: 14px; }
#footcontact:hover { color: var(--accent); }

/* ============================================================
   MOBILE — full pass (≤ 720px). Header stacks, tables scroll
   inside their frame, dense grids collapse, tap targets ≥ 40px.
   ============================================================ */
@media (max-width: 720px) {
  body { font-size: 13px; }
  main { padding: 12px 10px 34px; min-width: 0; }

  /* ---- header: 3 compact rows instead of one overflowing row ---- */
  #topbar {
    display: grid;
    grid-template-areas: "brand actions" "nav nav" "search search";
    grid-template-columns: 1fr auto;
    gap: 7px 8px; padding: 8px 10px;
  }
  .brand { grid-area: brand; font-size: 16px; letter-spacing: 1px; }
  .brand-logo { width: 22px; height: 22px; }
  nav {
    grid-area: nav; overflow-x: auto; overflow-y: hidden;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
    gap: 3px; padding-bottom: 1px;
  }
  nav::-webkit-scrollbar { height: 0; }
  nav a { white-space: nowrap; padding: 8px 11px; font-size: 12px; }
  #search {
    grid-area: search; width: 100%; margin-left: 0;
    padding: 9px 10px; font-size: 15px;   /* ≥16px avoids iOS zoom-on-focus; 15 + no zoom via meta */
  }
  #topbar > #themebtn, #topbar > #bell, #topbar > #btcprice { grid-area: actions; }
  #topbar { align-items: center; }
  #themebtn, #bell { padding: 7px 9px; }
  #btcprice { font-size: 12px; }
  /* the three action items must sit side by side inside their cell */
  #topbar::after { content: none; }
  .topbar-actions { grid-area: actions; display: flex; align-items: center; gap: 8px; }

  /* ---- tables: scroll inside the frame, with a visible thin bar ---- */
  .tablewrap { scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
  .tablewrap::-webkit-scrollbar { height: 4px; }
  .tablewrap::-webkit-scrollbar-thumb { background-color: #2b3a52; }
  table { min-width: 760px; }
  .market-table { min-width: 980px; }
  thead th, tbody td { padding: 7px 7px; font-size: 11.5px; }
  .tick { font-size: 12px; }
  .tklogo { margin-right: 5px; }
  /* keep the token column readable while scrolling sideways */
  .market-table thead th:nth-child(3), .market-table tbody td:nth-child(3) {
    position: sticky; left: 0; z-index: 2; background: var(--surface);
  }
  .market-table thead th:nth-child(3) { background: var(--surface2); z-index: 3; }
  .market-table tbody tr:hover td:nth-child(3) { background: var(--surface2); }

  /* ---- token page ---- */
  .tok-grid { grid-template-columns: 1fr; }
  .tok-head { gap: 10px; }
  .tok-head h1 { font-size: 19px; }
  .tok-head .price { font-size: 17px; }
  #chart { height: 300px; }
  .tfbar { flex-wrap: wrap; }
  .minitable td, .minitable th { font-size: 10.5px; padding: 4px 4px; }
  .addr { max-width: 92px; }

  /* ---- mints / filters ---- */
  .tabbar { gap: 5px; }
  .tabbar button, .ghost { padding: 8px 11px; font-size: 11.5px; }
  .filterwrap { position: static; }
  .filterpanel { position: fixed; left: 10px; right: 10px; width: auto; top: auto; z-index: 90; }
  .infopop { width: min(320px, calc(100vw - 40px)); left: auto; right: 0; }
  .progcell .progress { width: 60px; }

  /* ---- staking / farming dashboards ---- */
  .statgrid { grid-template-columns: 1fr; }
  .statcard.wide { grid-column: span 1; flex-direction: column; gap: 14px; }
  .donut { --donut-size: 168px; }
  .donut__label__heading { font-size: 22px; }
  .chartlegend { min-width: 0; width: 100%; font-size: 11.5px; }
  .cols2, .cols3 { grid-template-columns: 1fr; }
  .hbar { grid-template-columns: 84px 1fr auto; gap: 7px; font-size: 11px; }
  .hbar-lab { font-size: 10px; }
  .hbar-val { font-size: 10.5px; }
  .venue-head { flex-wrap: wrap; gap: 8px; }
  .venuechips { flex-wrap: wrap; }
  .kv { font-size: 12px; }

  /* ---- portfolio / contact ---- */
  .stat .body.big { font-size: 18px; }
  .contactwrap { margin: 6px auto 30px; }
  .contact-mail { flex-direction: column; align-items: stretch; text-align: center; }
  .contact-mail #cmail { font-size: 12.5px; word-break: break-all; }

  /* ---- landing ---- */
  .ltitle { font-size: .82rem; letter-spacing: .35em; }
  .lpill { font-size: .58rem; letter-spacing: .18em; padding: 5px 13px; }
  .loverlay { padding: 22px 14px; }
  .lhud { flex-direction: column; align-items: center; gap: 12px; text-align: center; }
  .lhud > div { text-align: center !important; }
  .lhash { font-size: 96px; }
  #lenter, #lenter2 { padding: 12px 30px; }
  #ltape { padding: 26px 10px 54px; }
  .tape { width: 100%; padding: 8px 20px 18px; }
  .tape::before { left: 3px } .tape::after { right: 3px }
  .tl { grid-template-columns: 62px 1fr auto; gap: 7px; font-size: 10.5px; }
  .tl-tx { display: none; }              /* the block hash below already links out */
  .tl-ver { font-size: 9px; }
  .tb-line { font-size: 10px; gap: 8px; }
  .tb-hash { margin-left: 0; width: 100%; }
  .tape-head p { font-size: 12px; }
  .listing-cta { margin: 32px auto 0; padding: 20px 16px; }

  /* ---- footer ---- */
  footer { font-size: 10.5px; padding: 8px 10px; }
  #footcontact { display: block; margin: 4px 0 0; }
}

/* very small phones */
@media (max-width: 380px) {
  .brand { font-size: 14px; }
  #btcprice { font-size: 11px; }
  nav a { padding: 8px 9px; font-size: 11.5px; }
  .donut { --donut-size: 152px; }
}
@media (max-width: 720px) {
  /* header plus compact : ~104px au lieu de 133 */
  #topbar { gap: 5px 8px; padding: 6px 10px; }
  nav a { padding: 6px 10px; }
  #search { padding: 7px 10px; font-size: 14px; }
  #themebtn, #bell { padding: 5px 8px; font-size: 13px; }
}
@media (max-width: 720px) {
  /* cibles tactiles confortables (>= 38px) */
  nav a { min-height: 38px; display: inline-flex; align-items: center; }
  #themebtn, #bell { min-height: 36px; min-width: 36px; display: inline-flex; align-items: center; justify-content: center; }
  .tabbar button, .ghost, .venuechip { min-height: 36px; display: inline-flex; align-items: center; justify-content: center; }
  .star { padding: 4px; font-size: 16px; }
  .loupe { padding: 5px; font-size: 13px; }
  tbody tr { min-height: 40px; }
}
/* ---- correctif global : les colonnes de grille doivent pouvoir retrecir ----
   (1fr = minmax(auto,1fr) : sans min-width 0, le contenu impose sa largeur) */
.tok-grid, .cols2, .cols3, .statgrid { min-width: 0; }
.tok-grid > *, .cols2 > *, .cols3 > *, .statgrid > *, .panel, .tablewrap { min-width: 0; }
@media (max-width: 980px) { .tok-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 900px) { .cols2 { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 720px) {
  .cols2, .cols3 { grid-template-columns: minmax(0, 1fr); }
  .statgrid { grid-template-columns: minmax(0, 1fr); }
  /* listes internes (trades, holders, carnet) : defilement horizontal contenu */
  .panel .body > .minitable, .panel .body > div > .minitable { min-width: 460px; }
  .panel .body[style*="overflow"] { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* ---------- external platform links ---------- */
.extarrow { font-size: .82em; opacity: .7; }
.venuename {
  font-weight: 700; font-family: "Segoe UI", sans-serif; font-size: 16px;
  color: var(--ink); text-decoration: none;
}
.venuename:hover { color: var(--accent); }
a.venuechip { text-decoration: none; }
a.venuechip:hover { border-color: var(--accent); color: var(--ink); }
.tok-actions { display: inline-flex; gap: 8px; flex-wrap: wrap; }
.extbtn {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--surface); border: 1px solid var(--border); color: var(--ink2);
  padding: 5px 11px; clip-path: var(--notch-sm); text-decoration: none;
  font-family: "Rajdhani", sans-serif; font-weight: 600; font-size: 11.5px;
  text-transform: uppercase; letter-spacing: 1px;
}
.extbtn:hover { color: var(--ink); border-color: var(--btc); box-shadow: 0 0 14px rgba(247,147,26,.2); }
@media (max-width: 720px) {
  .tok-actions { width: 100%; }
  .extbtn { min-height: 34px; font-size: 11px; }
}
/* les tableaux defilent horizontalement sans avaler le geste vertical de la page */
.tablewrap { touch-action: pan-x pan-y; overscroll-behavior-x: contain; }