/* Volfie. Black and volt, sampled from the mark: #D4F302 exactly.
   The structure follows a yield aggregator people already know how to read (top bar, status row,
   dense tables). The colour and the character are what make it Volfie rather than a clone. */

:root{
  --volt:#D4F302; --volt-hi:#EEFF7A; --volt-dim:#9BB300; --volt-soft:rgba(212,243,2,.14);
  --ink:#04050a; --panel:#0d1016; --panel-2:#121721; --line:#222a38;
  --txt:#f2f6fa; --mut:#98a2b3; --ok:#8dffbe; --warn:#ffd166;
  --r:14px; --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --sans:"Space Grotesk","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--ink); color:var(--txt); font-family:var(--sans);
  font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased;
  min-height:100dvh;
}
/* The character as page texture, fixed so it never moires with the scroll and never eats a click. */
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:var(--field); background-size:cover; background-position:center;
}
body::after{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(900px 420px at 78% -8%, rgba(212,243,2,.13), transparent 65%),
    radial-gradient(700px 380px at 8% 12%, rgba(212,243,2,.06), transparent 70%),
    radial-gradient(120% 90% at 50% 120%, rgba(0,0,0,.85), transparent 60%);
}
#root{position:relative; z-index:1}
a{color:inherit}
button{font:inherit; color:inherit}

/* ---- top bar ---------------------------------------------------------- */
header{
  position:sticky; top:0; z-index:40; background:rgba(5,6,10,.86);
  backdrop-filter:blur(14px); border-bottom:1px solid var(--line);
}
.bar{max-width:1320px; margin:0 auto; padding:12px 20px; display:flex; align-items:center; gap:14px}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; flex:0 0 auto}
.brand img{width:34px; height:34px; filter:drop-shadow(0 0 10px rgba(212,243,2,.5))}
.brand b{font-size:19px; letter-spacing:.14em; font-weight:700}
.pill{
  display:inline-flex; align-items:center; gap:8px; padding:7px 13px; border-radius:999px;
  border:1px solid var(--line); background:var(--panel); font-size:13.5px; color:var(--mut);
  white-space:nowrap;
}
.pill .dot{width:7px;height:7px;border-radius:50%;background:var(--volt);box-shadow:0 0 8px var(--volt)}
nav.main{display:flex; gap:2px; margin-left:6px; overflow-x:auto; scrollbar-width:none}
nav.main::-webkit-scrollbar{display:none}
nav.main a{
  padding:8px 13px; border-radius:10px; text-decoration:none; color:var(--mut);
  font-size:14.5px; white-space:nowrap; font-weight:500;
}
nav.main a:hover{color:var(--txt); background:var(--panel)}
nav.main a.on{color:var(--volt); background:var(--volt-soft)}
nav.main .soon{
  display:inline-flex; align-items:center; gap:7px; padding:8px 13px; border-radius:10px;
  color:#5d6675; font-size:14.5px; font-weight:500; white-space:nowrap;
  cursor:not-allowed; user-select:none;
}
nav.main .soon .badge{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.09em; padding:2px 6px; border-radius:5px;
  background:rgba(212,243,2,.10); color:var(--volt-dim); border:1px solid rgba(212,243,2,.18);
}
.spacer{flex:1}
.btn{
  padding:9px 16px; border-radius:11px; border:1px solid var(--line); background:var(--panel);
  cursor:pointer; font-size:14.5px; font-weight:600; transition:.15s;
}
.btn:hover{border-color:#2c3543}
.btn.solid{
  position:relative; color:#0d1103; border:0; font-weight:700; letter-spacing:.01em;
  background:linear-gradient(135deg,var(--volt-hi),var(--volt) 42%,var(--volt-dim));
  box-shadow:0 0 0 1px rgba(212,243,2,.55), 0 6px 22px -6px rgba(212,243,2,.65), inset 0 1px 0 rgba(255,255,255,.45);
}
.btn.solid::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(120deg,transparent 20%,rgba(255,255,255,.55) 48%,transparent 72%);
  transform:translateX(-120%); transition:transform .55s ease;
}
.btn.solid:hover::after{transform:translateX(120%)}
.btn.solid:hover{box-shadow:0 0 0 1px var(--volt), 0 10px 30px -6px rgba(212,243,2,.8), inset 0 1px 0 rgba(255,255,255,.5)}
.btn.solid:active{transform:translateY(1px)}
.btn.solid .zap{margin-right:7px; font-size:15px; line-height:1}
.btn.wallet{padding:10px 18px; border-radius:12px}
.btn.ghost{background:var(--panel-2); border:1px solid rgba(212,243,2,.35); color:var(--volt)}
.btn.ghost:hover{background:rgba(212,243,2,.08); border-color:var(--volt)}
.btn[disabled]{opacity:.45; cursor:not-allowed}

/* ---- layout ----------------------------------------------------------- */
main{max-width:1320px; margin:0 auto; padding:26px 20px 90px}
.hd{display:flex; align-items:flex-end; gap:16px; margin:6px 0 20px; flex-wrap:wrap}
.hd h1{font-size:29px; margin:0; letter-spacing:-.02em}
.hd p{margin:0; color:var(--mut); font-size:15px; max-width:64ch}

/* status row, with a character in each card */
.status{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:26px}
.stat{
  position:relative; overflow:hidden; border:1px solid var(--line);
  background:linear-gradient(150deg,#11151d,#0a0d12 60%);
  border-radius:var(--r); padding:18px 20px; min-height:128px;
}
.stat::before{
  content:""; position:absolute; left:0; top:0; width:100%; height:2px;
  background:linear-gradient(90deg,var(--volt),transparent 70%); opacity:.55;
}
.stat.hot{border-color:rgba(212,243,2,.32); box-shadow:0 0 40px -18px rgba(212,243,2,.55) inset}
.stat .k{font-size:12.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--mut)}
.stat .v{font-size:32px; font-weight:700; margin-top:6px; font-family:var(--mono); letter-spacing:-.02em}
.stat .s{font-size:13px; color:var(--mut); margin-top:2px}
.stat .mascot{position:absolute; right:-10px; bottom:-18px; opacity:1; pointer-events:none}
.stat.hot .v{color:var(--volt)}

/* panels and tables */
.panel{
  background:linear-gradient(180deg,var(--panel),#0a0d12);
  border:1px solid var(--line); border-radius:var(--r); overflow:hidden; margin-bottom:20px;
  box-shadow:0 18px 44px -30px rgba(0,0,0,.9);
}
.panel > h3{
  margin:0; padding:15px 20px; border-bottom:1px solid var(--line); font-size:14px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--mut); display:flex; align-items:center; gap:10px;
}
.panel > h3 .tag{margin-left:auto; text-transform:none; letter-spacing:0; font-size:13px}
.body{padding:20px}
.tablewrap{overflow-x:auto}
table{width:100%; border-collapse:collapse; font-size:14.5px; min-width:720px}
th{
  text-align:left; padding:12px 20px; font-size:12px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--mut); font-weight:600; border-bottom:1px solid var(--line); white-space:nowrap;
}
td{padding:15px 20px; border-bottom:1px solid rgba(27,33,43,.6); vertical-align:middle}
tr:last-child td{border-bottom:0}
tbody tr:hover{background:rgba(212,243,2,.03)}
td.num,th.num{text-align:right; font-family:var(--mono)}
.asset{display:flex; align-items:center; gap:11px}
.chip{
  width:32px;height:32px;border-radius:9px;display:grid;place-items:center;flex:0 0 auto;
  background:var(--volt-soft); border:1px solid rgba(212,243,2,.25); font-family:var(--mono);
  font-size:11px; color:var(--volt); font-weight:700;
}
.sub{color:var(--mut); font-size:12.5px}

.toggle{display:inline-flex; background:var(--panel-2); border:1px solid var(--line); border-radius:999px; padding:3px}
.toggle button{padding:7px 15px; border-radius:999px; border:0; background:transparent; cursor:pointer; color:var(--mut); font-size:13.5px; font-weight:600}
.toggle button.on{background:var(--volt); color:#0a0c04}

.empty{text-align:center; padding:44px 20px; color:var(--mut)}
.empty .big{color:var(--txt); font-size:19px; font-weight:600; margin:14px 0 6px}
.empty p{max-width:46ch; margin:0 auto}

.note{
  display:flex; gap:13px; align-items:flex-start; padding:14px 16px; border-radius:12px;
  border:1px solid rgba(212,243,2,.25); background:rgba(212,243,2,.05); font-size:14px; margin-bottom:20px;
}
.note b{color:var(--volt)}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:20px}
.split{display:grid; grid-template-columns:1fr auto 1fr; gap:16px; align-items:center}
.split .arrow{color:var(--volt); font-size:22px; text-align:center}
.card{background:var(--panel-2); border:1px solid var(--line); border-radius:12px; padding:16px}
.card .lbl{font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--mut)}
.card .val{font-family:var(--mono); font-size:22px; margin-top:5px}
.bar-track{height:7px; border-radius:99px; background:var(--panel-2); overflow:hidden; margin-top:9px}
.bar-fill{height:100%; background:linear-gradient(90deg,var(--volt-dim),var(--volt)); border-radius:99px}
.rows > div{display:flex; justify-content:space-between; gap:14px; padding:10px 0; border-bottom:1px solid rgba(27,33,43,.55); font-size:14.5px}
.rows > div:last-child{border-bottom:0}
.rows span{color:var(--mut)}
.rows b{font-family:var(--mono); font-weight:600}
.rows b.ok{color:var(--ok)}
.rows b.volt{color:var(--volt)}
code{font-family:var(--mono); font-size:13px; color:var(--volt)}

footer{border-top:1px solid var(--line); margin-top:40px}
.foot{max-width:1320px; margin:0 auto; padding:26px 20px 40px; display:flex; gap:22px; flex-wrap:wrap; align-items:center; color:var(--mut); font-size:13.5px}
.foot a{color:var(--mut); text-decoration:none}
.foot a:hover{color:var(--volt)}

/* A flex child with its own scroller must be told it may be narrower than its content, or it
   refuses to shrink and pushes the whole page wide instead of scrolling inside itself. */
nav.main{min-width:0}

@media (max-width:900px){
  .status{grid-template-columns:1fr}
  .grid2,.split{grid-template-columns:1fr}
  .split .arrow{transform:rotate(90deg)}
  .hd h1{font-size:24px}
  main{padding:20px 14px 70px}
  .stat .mascot{opacity:.55}

  /* The bar reflows into two rows: identity and actions on top, sections underneath on their own
     scroller. Keeping it one row is what pushed a 390 screen out to 527. */
  .bar{flex-wrap:wrap; gap:9px; padding:10px 14px; row-gap:10px}
  .bar .spacer{display:none}
  .brand{flex:1 1 auto}
  /* The sections get their own scrolling row with a fade at the edge, so it reads as "there is
     more this way" instead of looking like the list simply ends. */
  nav.main{
    order:10; flex:1 0 100%; margin:0; padding:2px 0 4px; gap:4px;
    -webkit-overflow-scrolling:touch;
    mask-image:linear-gradient(90deg,#000 0,#000 88%,transparent 100%);
  }
  nav.main a,nav.main .soon{padding:9px 12px; font-size:14.5px}
  nav.main a.on{box-shadow:inset 0 0 0 1px rgba(212,243,2,.35)}
  nav.main .soon .badge{font-size:9px; padding:1px 5px}
  #chainpill{font-size:12.5px; padding:6px 10px}
  .pill[title]{display:none}            /* the "on Volar" badge lives in the copy on mobile */
  .btn{padding:8px 13px; font-size:14px}
  .btn.wallet{padding:9px 14px; font-size:14px}
  .stat{min-height:118px; padding:16px 17px}
  .stat .v{font-size:27px}
  .panel > h3{padding:13px 16px; font-size:13px}
  .body{padding:16px}
  td,th{padding:13px 16px}
  /* 16px is the floor for body copy on a phone. */
  .hd p,.note,.empty p,.sub{font-size:16px}
  .sub{font-size:14px}
  table{min-width:560px}
}
@media (max-width:420px){
  .brand b{font-size:17px}
  .stat .v{font-size:26px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important}}