/* ————————————————————————————————————————————————————————————
   RADIUM — trade desk
   Same desk layout as the Squawks build; the palette is RADIUM's:
   radioactive green on near-black, mono + grotesk type.
   ———————————————————————————————————————————————————————————— */

:root {
  --bg:      #050507;
  --bg2:     #08080c;
  --panel:   #0c0c10;
  --panel2:  #111118;
  --line:    #1a1a24;
  --line2:   #14141c;
  --text:    #d4d4d8;
  --muted:   #6b6b76;
  --purple:  #39ff14;
  --purple2: #6bff52;
  --cyan:    #39ff14;
  --cyan2:   #7aff66;
  --green:   #39ff14;
  --red:     #ff4444;
  --gold:    #ff9500;
  --sidew:   208px;
  --font-px: "IBM Plex Mono", ui-monospace, monospace;
  --font-tx: "IBM Plex Mono", ui-monospace, "Courier New", monospace;
  --font-ui: "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --glow:    rgba(57, 255, 20, .08);
  --glow-sm: 0 0 8px rgba(57, 255, 20, .25);
  --glass:   rgba(12, 12, 16, .65);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--bg); scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.55;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* ambient background — same treatment as the landing page */
body::before {
  content: ''; position: fixed; top: 0; left: 50%; transform: translateX(-50%);
  width: 100%; height: 100%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 60% 40% at 50% 0%, rgba(57,255,20,.04) 0%, transparent 70%),
    radial-gradient(ellipse 50% 60% at 50% 100%, rgba(57,255,20,.02) 0%, transparent 60%);
}
body::after {
  content: ''; position: fixed; inset: 0; z-index: 9999; pointer-events: none;
  background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,.03) 2px, rgba(0,0,0,.03) 4px);
}
/* behind everything: the page content sits in .rb-scroll at z-index 1 */
#particles { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.particle {
  position: absolute; width: 4px; height: 4px; border-radius: 50%;
  background: var(--green); opacity: 0;
  box-shadow: 0 0 6px rgba(57,255,20,.5);
  animation: particleFade 5s ease-in-out infinite;
}
/* The travel is the viewport, not a fixed 160px. At 160 a particle
   started near the bottom died a fifth of the way up, which is why the
   top of the page never had any. */
@keyframes particleFade {
  0%   { opacity: 0;   transform: translate3d(0, 0, 0) scale(.5) }
  10%  { opacity: .85 }
  60%  { opacity: .5 }
  100% { opacity: 0;   transform: translate3d(0, -112vh, 0) scale(0) }
}

::selection { background: rgba(57, 255, 20, .25); color: #fff; }
a { color: var(--green); text-decoration: none; }
a:hover { opacity: .8; }

.tlogo, .wm-ico, .pk-clogo, .row-ico, img.tlogo, .tok-btn img { image-rendering: auto !important; }

* { scrollbar-width: thin; scrollbar-color: #1a1a24 #08080c; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #08080c; }
::-webkit-scrollbar-thumb { background: #1a1a24; border: 2px solid #08080c; border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: var(--green); }

h1, h2, h3, .btn, .badge, .chip, .tag-green, .tag-purple, .term-bar {
  font-family: var(--font-px);
  letter-spacing: .02em;
}
.mono { font-family: var(--font-tx); }

/* ————————————————————————— topbar ————————————————————————— */
.topbar {
  position: sticky; top: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 24px;
  /* Opaque, and tall enough to reach under the status bar. At 92% the page
     scrolled through it, and the strip above it was left unpainted, so a
     phone showed rows of the page in both. The shadow is a solid slab
     running 800px upward: it is painted with the bar, so it covers that
     strip in the bar's own colour wherever iOS puts the bar. */
  padding-top: calc(12px + env(safe-area-inset-top));
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 -400px 0 400px var(--bg);
  /* Promoted for the same reason as the bottom bar: content that iOS has
     put on its own compositing layer paints above a non-promoted sticky
     element regardless of z-index. Promoting this one puts them in the
     same world, where z-index applies again. */
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  isolation: isolate;
}
.topbar-brand { display: flex; align-items: center; gap: 10px; }
.topbar-brand img { width: 32px; height: 32px; border-radius: 50%; }
.topbar-brand span {
  font-family: var(--font-px); font-size: 14px; font-weight: 700;
  color: var(--green); letter-spacing: 2px;
}
.topbar-nav { display: flex; align-items: center; gap: 6px; }
.topbar-right { display: flex; align-items: center; gap: 8px; }
.topbar-x { display: flex; align-items: center; justify-content: center; padding: 8px 12px;
  border: 1px solid var(--line); border-radius: 6px; color: var(--muted); transition: all .2s; }
.topbar-x:hover { color: var(--green); border-color: rgba(57,255,20,.4); }
.topbar-nav a {
  font-family: var(--font-px); font-size: 11px; letter-spacing: 2px;
  text-transform: uppercase; color: var(--muted);
  padding: 6px 14px; border-radius: 6px; transition: all .2s;
}
.topbar-nav a:hover, .topbar-nav a.is-active { color: var(--green); background: rgba(57,255,20,.06); opacity: 1; }
.connect-btn {
  font-family: var(--font-px); font-size: 12px; font-weight: 600;
  padding: 8px 18px; border-radius: 6px; cursor: pointer;
  background: rgba(57,255,20,.15); color: var(--green);
  border: 1px solid rgba(57,255,20,.3); letter-spacing: 1px;
  display: flex; align-items: center; gap: 6px; transition: all .2s;
}
.connect-btn:hover { background: rgba(57,255,20,.22); border-color: var(--green); }
.connect-btn.is-connected { color: var(--text); border-color: var(--line); background: transparent; }

/* ————————————————————————— tabs ————————————————————————— */
.main { max-width: 1200px; margin: 0 auto; padding: 24px 16px 80px; position: relative; z-index: 1; }
.tabs { display: flex; gap: 4px; margin-bottom: 20px; }
.tab-btn {
  font-family: var(--font-px); font-size: 12px; font-weight: 600;
  letter-spacing: 2px; text-transform: uppercase;
  padding: 10px 24px; border: 1px solid var(--line); border-radius: 6px;
  background: transparent; color: var(--muted); cursor: pointer; transition: all .2s;
}
.tab-btn.is-on { color: var(--green); background: rgba(57,255,20,.06); border-color: rgba(57,255,20,.3); }

/* burn notice */
.burn-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-px); font-size: 10px; color: var(--gold);
  background: rgba(255,149,0,.1); border: 1px solid rgba(255,149,0,.2);
  border-radius: 4px; padding: 4px 10px; margin-top: 8px;
}

/* utilities carried over from the Squawks desk */
.pixel-input { font-family: var(--font-tx); font-size: .95rem; background: var(--panel2); border: 1px solid var(--line); color: var(--text); padding: 10px 14px; border-radius: 8px; }
.pixel-input:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 12px rgba(57,255,20,.12); }
.fine { font-size: .8rem; color: var(--muted); padding: 0 16px 16px; margin: 0; }
.log-empty { color: var(--muted); padding: 16px; text-align: center; }
/* ————————————————————————— buttons ————————————————————————— */

.btn {
  font-size: .75rem; line-height: 1.5;
  padding: 12px 16px; cursor: pointer;
  border: 2px solid var(--line); background: var(--panel2); color: var(--text);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  text-decoration: none; text-transform: uppercase;
  border-radius: 8px;
  /* no transform here: transitioning it promotes every button on the page
     to its own layer on iOS, and promoted layers paint over the bars. The
     :active transform below still gives the press, without the promotion. */
  transition: background .15s, border-color .15s, color .15s, box-shadow .15s;
}
.btn:active { transform: translate(1px, 1px); }
.btn-fill { background: linear-gradient(135deg, var(--cyan), #28cc0f); border-color: var(--cyan2); color: #050507; font-weight: 700; box-shadow: 0 4px 16px rgba(57, 255, 20, .2); }
.btn-fill:hover { background: linear-gradient(135deg, var(--cyan2), var(--cyan)); box-shadow: 0 6px 24px rgba(57, 255, 20, .3); }
.btn-line { background: transparent; border-color: var(--line); color: var(--text); }
.btn-line:hover { border-color: var(--cyan); color: var(--cyan2); box-shadow: 0 0 12px rgba(57, 255, 20, .08); }
.btn-green { background: linear-gradient(135deg, var(--green), #28cc0f); border-color: var(--green); color: #050507; }
.btn-green:hover { filter: brightness(1.08); }
.btn-block { width: 100%; }
.btn:focus-visible, a:focus-visible, input:focus-visible, .chip:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.link-btn { background: none; border: 0; color: var(--cyan); font-family: var(--font-tx); font-size: .88rem; cursor: pointer; }

/* ————————————————————————— stage / views ————————————————————————— */

.stage { position: relative; z-index: 1; margin-left: var(--sidew); padding: 32px 40px 80px; }
.view { display: none; animation: fade .25s ease; max-width: 1160px; margin: 0 auto; }
.view.is-active { display: block; }
#view-swap { max-width: 640px; }
#view-swap .swap-panel { margin: 0 auto; }
#view-swap .swap-mode { display: flex; width: fit-content; margin: 0 auto 16px; }
#view-swap .view-head { text-align: center; }
#view-swap .view-head p { margin: 0 auto; }
@keyframes fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .view { animation: none; } }

.view-head { margin-bottom: 28px; }
.view-head h2 { font-size: .95rem; margin: 0 0 10px; }
.view-head p { color: var(--muted); font-size: .9rem; max-width: 64ch; margin: 0; }

h1 { font-size: 2.6rem; margin: 0 0 16px; color: var(--text); text-shadow: 0 0 40px rgba(57, 255, 20, .25), 0 2px 0 rgba(57, 255, 20, .08); }
h2 { color: var(--cyan2); }
h3 { font-size: .72rem; }

.tag-green { font-size: .78rem; background: var(--green); color: #050507; padding: 5px 8px; vertical-align: middle; border-radius: 4px; }
.tag-purple { font-size: .78rem; background: var(--purple); color: #050507; padding: 5px 8px; vertical-align: middle; border-radius: 4px; }

/* ————————————————————————— terminal panels ————————————————————————— */

.term-panel { border: 1px solid var(--line); background: var(--panel2); border-radius: 14px; overflow: hidden; }
.term-bar { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--line); font-size: .71rem; color: var(--muted); background: rgba(8, 8, 12, .6); }
.term-live { color: var(--green); }

.swap-panel { max-width: 460px; padding: 0; }
.swap-panel .pay-box { padding: 16px; border-bottom: 1px solid var(--line2); }
.pay-box label { font-family: var(--font-px); font-size: .78rem; color: var(--muted); }
.pay-row { display: flex; gap: 10px; align-items: center; margin: 8px 0 6px; }
.pay-row input { flex: 1; min-width: 0; font-family: var(--font-tx); font-size: 2rem; background: none; border: 0; color: var(--text); }
.pay-row input:focus { outline: none; }
.tok-btn { font-family: var(--font-px); font-size: .71rem; background: var(--panel); border: 1px solid var(--line); color: var(--text); padding: 10px 12px; cursor: pointer; white-space: nowrap; border-radius: 10px; transition: border-color .12s; }
.tok-btn:hover { border-color: var(--cyan); }
.usd { font-size: .85rem; color: var(--muted); }
.flip { display: block; margin: -14px auto; position: relative; z-index: 2; width: 40px; height: 40px; background: var(--panel); border: 1px solid var(--line); color: var(--cyan); cursor: pointer; font-size: .9rem; border-radius: 10px; }
@media (hover: hover) {
  .flip { transition: transform .15s; }
  .flip:hover { transform: rotate(180deg); }
}
.quote-line { display: flex; justify-content: space-between; align-items: center; padding: 10px 16px; font-size: .88rem; color: var(--muted); }
.quote-line b { color: var(--text); }
.fee-tag { font-family: var(--font-ui); font-size: .82rem; font-weight: 600; color: var(--green); background: rgba(57, 255, 20, .08); border: 1px solid rgba(57, 255, 20, .2); padding: 3px 8px; border-radius: 6px; margin-left: 6px; display: inline-flex; align-items: center; gap: 5px; }
.fee-tag:empty { display: none; }
.fee-tag::before { content: ""; width: 12px; height: 12px; flex: none; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19.77 7.23l.01-.01-3.72-3.72L15 4.56l2.11 2.11c-.94.36-1.61 1.26-1.61 2.33 0 1.38 1.12 2.5 2.5 2.5.36 0 .69-.08 1-.21v7.21c0 .55-.45 1-1 1s-1-.45-1-1V14c0-1.1-.9-2-2-2h-1V5c0-1.1-.9-2-2-2H6c-1.1 0-2 .9-2 2v16h10v-7.5h1.5v5c0 1.38 1.12 2.5 2.5 2.5s2.5-1.12 2.5-2.5V9c0-.69-.28-1.32-.73-1.77zM12 10H6V5h6v5zm6 0c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19.77 7.23l.01-.01-3.72-3.72L15 4.56l2.11 2.11c-.94.36-1.61 1.26-1.61 2.33 0 1.38 1.12 2.5 2.5 2.5.36 0 .69-.08 1-.21v7.21c0 .55-.45 1-1 1s-1-.45-1-1V14c0-1.1-.9-2-2-2h-1V5c0-1.1-.9-2-2-2H6c-1.1 0-2 .9-2 2v16h10v-7.5h1.5v5c0 1.38 1.12 2.5 2.5 2.5s2.5-1.12 2.5-2.5V9c0-.69-.28-1.32-.73-1.77zM12 10H6V5h6v5zm6 0c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1z'/%3E%3C/svg%3E") center/contain no-repeat; }

/* ---- balance + percentage row ---- */
/* holds its line whether or not there is a figure in it yet, so the card
   below cannot shift when a balance arrives or misses */
.bal-info { font-family: var(--font-tx); font-size: .95rem; color: var(--muted); margin-left: auto; cursor: default; min-height: 1.3em; }
.bal-info b { color: var(--text); }
.bal-info.bal-below { display: block; text-align: right; padding: 2px 4px 0; font-size: .88rem; min-height: 1.4em; }
.pct-row { display: flex; gap: 4px; padding: 2px 0 4px; }
.pct-btn { font-family: var(--font-px); font-size: .60rem; padding: 4px 8px; background: rgba(57, 255, 20, .04); border: 1px solid var(--line); color: var(--muted); cursor: pointer; border-radius: 4px; transition: all .12s; }
.pct-btn:hover { border-color: var(--cyan); color: var(--cyan); background: rgba(57, 255, 20, .1); }
.pct-btn:active { transform: scale(.96); }
.pct-btn.is-max { color: var(--cyan); border-color: rgba(57, 255, 20, .3); }
.pct-btn.is-max:hover { background: var(--cyan); color: #050507; }

/* slippage dropdown */
.slip-toggle { cursor: pointer; transition: background .12s; border-radius: 8px; }
.slip-toggle:hover { background: var(--panel); }
.slip-toggle b { color: var(--cyan2); }
.slip-drop { border-top: 1px solid var(--line2); padding: 12px 16px; background: rgba(8, 8, 12, .6); }
.slip-tabs { display: flex; gap: 4px; margin-bottom: 10px; }
.slip-tab { font-family: var(--font-ui); font-size: .82rem; font-weight: 600; padding: 7px 16px; border: 1px solid var(--line); background: var(--panel2); color: var(--muted); cursor: pointer; border-radius: 8px; transition: all .12s; }
.slip-tab:hover { color: var(--text); }
.slip-tab.is-on { background: var(--cyan); border-color: var(--cyan); color: #050507; }
.slip-hint { font-family: var(--font-ui); font-size: .82rem; color: var(--muted); margin: 0; line-height: 1.4; }
.slip-custom { display: flex; align-items: center; gap: 6px; }
.slip-input { width: 64px; font-family: var(--font-ui); font-weight: 700; font-size: .9rem; background: var(--panel2); border: 1px solid var(--line); color: var(--text); padding: 8px 10px; border-radius: 8px; text-align: right; }
.slip-input:focus { outline: none; border-color: var(--cyan); }
.slip-pct { font-family: var(--font-ui); font-weight: 700; font-size: .9rem; color: var(--muted); }
.swap-panel > .btn { margin: 12px 16px 16px; width: calc(100% - 32px); }

/* ————————————————————————— soon badge ————————————————————————— */
.soon-badge { margin-left: auto; font-family: var(--font-px); font-size: .75rem; background: var(--panel); border: 1px solid var(--line); color: var(--muted); padding: 4px 5px; font-style: normal; border-radius: 4px; }
.side-link.is-soon { opacity: .55; cursor: default; }

/* ————————————————————————— swap desk ————————————————————————— */
.swap-mode { display: inline-flex; gap: 1px; border: 1px solid var(--line); margin-bottom: 16px; background: var(--line); border-radius: 10px; overflow: hidden; }
.mode-btn { font-family: var(--font-px); font-size: .71rem; padding: 11px 18px; background: var(--panel2); color: var(--muted); border: 0; cursor: pointer; transition: all .12s; }
.mode-btn.is-on { background: var(--cyan); color: #050507; }
.pay-head { display: flex; justify-content: space-between; align-items: center; }
.addr-btn { background: none; border: 0; color: var(--cyan); font-family: var(--font-tx); font-size: .88rem; cursor: pointer; }
.addr-field { margin: 0 16px 12px; width: calc(100% - 32px); font-family: var(--font-tx); font-size: .9rem; background: rgba(8, 8, 12, .6); border: 1px solid var(--line); color: var(--text); padding: 10px 12px; border-radius: 8px; }
.addr-field:focus { outline: none; border-color: var(--cyan); }
.tok-btn.wide { display: inline-flex; align-items: center; gap: 9px; min-width: 150px; justify-content: flex-start; }
.tok-btn .tlogo { width: 26px; height: 26px; border-radius: 50%; flex: none; background: var(--panel); }
.tok-btn .tsym { font-family: var(--font-px); font-size: .71rem; }
.tok-btn .tchain { font-family: var(--font-tx); font-size: .9rem; color: var(--muted); font-weight: 400; }
.tok-btn .tcol { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; margin-right: auto; }
.tok-btn .tcar { color: var(--muted); }
.stock-tabs { display: flex; gap: 1px; padding: 12px 16px 0; }
.stk-tab { flex: 1; font-family: var(--font-px); font-size: .70rem; padding: 12px; background: var(--panel); border: 1px solid var(--line); color: var(--muted); cursor: pointer; border-radius: 8px; transition: all .12s; }
.stk-tab.is-on { background: var(--cyan); border-color: var(--cyan); color: #050507; }
.stk-sell-input { padding-top: 4px; }
.paywith { display: flex; gap: 8px; margin: 8px 0; }
.pw { font-family: var(--font-px); font-size: .78rem; padding: 9px 12px; background: var(--panel); border: 1px solid var(--line); color: var(--muted); cursor: pointer; border-radius: 8px; transition: all .12s; }
.pw.is-on { border-color: var(--cyan); color: var(--cyan); }
.pw-soon { opacity: .5; cursor: not-allowed; }
.stock-chip { width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-px); font-size: .75rem; color: #fff; flex: none; }

/* chain filter chips in token modal */
.chain-scroll { display: flex; gap: 6px; overflow-x: auto; padding: 0 16px 10px; }
.chain-pill2 { font-family: var(--font-tx); font-size: .85rem; padding: 7px 12px; border: 1px solid var(--line); background: var(--panel2); color: var(--muted); cursor: pointer; white-space: nowrap; border-radius: 8px; }
.chain-pill2.is-on { border-color: var(--cyan); color: var(--cyan); }
.tok-row { display: flex; align-items: center; gap: 12px; width: 100%; background: none; border: 0; padding: 11px 14px; color: var(--text); cursor: pointer; text-align: left; border-radius: 8px; transition: background .1s; }
.tok-row:hover { background: rgba(57, 255, 20, .06); }
.tok-row .tlogo { width: 32px; height: 32px; border-radius: 50%; flex: none; }
.tok-row .tr-main { display: flex; flex-direction: column; gap: 2px; }
.tok-row .tr-main b { font-family: var(--font-px); font-size: .71rem; }
.tok-row .tr-sub { font-size: .95rem; color: var(--muted); }
.tok-row .tr-right { margin-left: auto; text-align: right; }
.tok-row .tr-price { font-variant-numeric: tabular-nums; }
.tok-row .tr-chain { font-size: .85rem; color: var(--muted); }
.tok-row .tr-chg { font-size: .95rem; }
.tok-row .soon-tag { margin-left: auto; font-family: var(--font-px); font-size: .64rem; color: var(--gold); border: 1px solid rgba(255, 149, 0, .25); padding: 4px 6px; border-radius: 4px; }
.chg { font-variant-numeric: tabular-nums; }
.chg.up { color: #2EBD85; }
.chg.down { color: #F6465D; }
.chg-lbl { color: var(--muted); font-size: .8em; }

/* ————————————————————————— token picker (Squawks two-panel) ————————————————————————— */
.modal-sheet.is-wide { width: min(94vw, 960px); top: 6%; height: 82vh; display: flex; flex-direction: column; border-color: var(--line); box-shadow: 0 24px 60px rgba(0, 0, 0, .6); }
.pk-head { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--line); background: linear-gradient(180deg, #0e0e14, #08080c); }
.pk-mark { width: 24px; height: 24px; flex: none; background: url("/assets/logo.png") center/contain no-repeat; border-radius: 6px; }
.pk-title { font-family: var(--font-px); font-size: .75rem; color: var(--text); }
.pk-chainnow { margin-left: auto; font-family: var(--font-tx); font-size: .88rem; color: var(--cyan2); border: 1px solid var(--line); padding: 5px 12px; border-radius: 999px; }
.pk-body { display: grid; grid-template-columns: 232px 1fr; flex: 1; min-height: 0; }
.pk-side { border-right: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; }
.pk-cfilter { margin: 12px; width: calc(100% - 24px); font-size: .88rem; }
.pk-chains { overflow-y: auto; padding: 0 8px 8px; flex: 1; }
.pk-cgroup { font-family: var(--font-px); font-size: .66rem; color: var(--cyan); padding: 12px 10px 6px; }
.pk-chain { display: flex; align-items: center; gap: 10px; width: 100%; background: none; border: 0; padding: 10px; color: var(--muted); cursor: pointer; text-align: left; font-family: var(--font-tx); font-size: .9rem; border-radius: 8px; transition: background .1s; }
.pk-chain:hover { background: rgba(57, 255, 20, .06); color: var(--text); }
.pk-chain.is-on { background: linear-gradient(90deg, rgba(57, 255, 20, .12), transparent); color: var(--text); box-shadow: inset 3px 0 0 var(--cyan); }
.pk-allchains { font-family: var(--font-px); font-size: .70rem; color: var(--cyan2); }
.pk-clogo { width: 24px; height: 24px; border-radius: 50%; flex: none; background: var(--panel); object-fit: cover; }
.pk-clogo.dot { background: #1E3A5A; }
.pk-clogo.star { display: inline-flex; align-items: center; justify-content: center; background: none; color: var(--cyan); font-size: .85rem; }
.pk-home { font-family: var(--font-px); font-size: .75rem; background: var(--cyan); color: #050507; padding: 3px 5px; font-style: normal; margin-left: auto; border-radius: 4px; }
.tk-badge { font-family: var(--font-px); font-size: .75rem; background: var(--cyan); color: #050507; padding: 3px 5px; font-style: normal; margin-left: 6px; vertical-align: middle; border-radius: 4px; }
.pk-count { font-family: var(--font-tx); font-size: .85rem; color: var(--muted); margin-left: auto; }
.pk-main { display: flex; flex-direction: column; min-height: 0; }
.pk-search { margin: 12px; width: calc(100% - 24px); }
.pk-tokens { overflow-y: auto; padding: 0 6px 10px; flex: 1; }
.pk-loading { color: var(--muted); padding: 24px; text-align: center; font-size: .9rem; }
@media (max-width: 720px) {
  .modal-sheet.is-wide {
    position: fixed; left: 18px; right: 18px; top: 24px;
    bottom: calc(24px + env(safe-area-inset-bottom));
    width: auto; max-width: none; transform: none; height: auto;
    border-width: 1px; border-radius: 16px;
  }
  .pk-head { padding: 14px 14px; }
  .pk-body { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
  /* grid children default to min-width:auto, so the scrolling chain strip
     stretched this column past the screen — pin both tracks to 0 */
  .pk-side { border-right: 0; border-bottom: 1px solid var(--line); min-height: 0; min-width: 0; }
  .pk-chains { display: flex; overflow-x: auto; overflow-y: hidden; padding: 0 8px 10px; gap: 4px; min-width: 0; -webkit-overflow-scrolling: touch; }
  .pk-cgroup { display: none; }
  .pk-chain { flex: none; flex-direction: column; gap: 5px; white-space: nowrap; font-size: .78rem; padding: 10px 12px; border-radius: 8px; width: auto; min-width: 68px; max-width: 120px; align-items: center; }
  .pk-chain.is-on { box-shadow: inset 0 -3px 0 var(--cyan); }
  .pk-home, .pk-count { margin: 0; }
  .pk-cfilter, .pk-search { margin: 10px; width: calc(100% - 20px); }
  .pk-main { min-height: 0; min-width: 0; }
  .pk-tokens { -webkit-overflow-scrolling: touch; }
  .modal-sheet:not(.is-wide) { top: 4%; width: auto; left: 12px; right: 12px; max-width: none; transform: none; }
  .modal-list { max-height: 74vh; }
  .pk-search, .pk-cfilter { font-size: 16px; }
  .tok-row { padding: 10px 8px; gap: 10px; }
}

/* ————————————————————————— wallet modal ————————————————————————— */
.wmodal-sheet { width: min(92vw, 360px); }
.wmodal-list { padding: 8px; max-height: 62vh; overflow-y: auto; }
.wm-group { font-family: var(--font-px); font-size: .67rem; color: var(--cyan); padding: 12px 12px 6px; }
.wm-group.dim { color: var(--muted); }
.wm-row { display: flex; align-items: center; gap: 12px; width: 100%; background: none; border: 0; padding: 11px 12px; color: var(--text); cursor: pointer; text-align: left; font-family: var(--font-tx); font-size: .95rem; border-radius: 8px; transition: background .1s; }
.wm-row:hover { background: rgba(57, 255, 20, .06); }
.wm-ico { width: 30px; height: 30px; border-radius: 8px; flex: none; }
.wm-tag { margin-left: auto; font-size: .9rem; color: var(--cyan); font-family: var(--font-px); font-size: .64rem; }
.wmodal-foot { padding: 14px 16px; border-top: 1px solid var(--line); font-size: .85rem; color: var(--muted); }
/* the link sat hard against the question mark */
.wmodal-foot a { margin-left: 5px; }
.wmodal-foot a { color: var(--cyan); }
.side-x-link { display: flex; justify-content: center; color: var(--muted); transition: color .15s; text-decoration: none; }
.side-x-link:hover { color: var(--text); }
.btn.is-connected { border-color: var(--cyan); color: var(--cyan); }
.wm-acct { padding: 4px 12px 12px; font-family: var(--font-tx); font-size: .88rem; color: var(--cyan2); word-break: break-all; }
.wm-row.wm-dc { color: var(--red); font-family: var(--font-px); font-size: .78rem; }
a.wm-row { text-decoration: none; }

/* ————————————————————————— modal ————————————————————————— */

.modal { position: fixed; inset: 0; z-index: 200; }
.modal[hidden] { display: none; }
body.modal-open { overflow: hidden; }

.pw-ico { width: 18px; height: 18px; border-radius: 50%; vertical-align: middle; margin-right: 6px; image-rendering: auto; }

.stake-card img { width: 100%; display: block; image-rendering: pixelated; }
.modal-back { position: absolute; inset: 0; background: rgba(5, 5, 7, .8); backdrop-filter: blur(4px); }
.modal-sheet { position: absolute; left: 50%; top: 12%; transform: translateX(-50%); width: min(92vw, 380px); background: var(--panel); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; box-shadow: 0 20px 60px rgba(0, 0, 0, .6); }
.modal-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.modal-head h3 { margin: 0; font-size: .78rem; }
.modal-x { background: none; border: 0; color: var(--muted); font-size: .95rem; cursor: pointer; }
.modal-list { padding: 8px; max-height: 60vh; overflow-y: auto; }
.modal-row { display: flex; align-items: center; gap: 12px; width: 100%; background: none; border: 0; padding: 12px; color: var(--text); cursor: pointer; font-family: var(--font-tx); font-size: .95rem; text-align: left; border-radius: 8px; transition: background .1s; }
.modal-row:hover { background: rgba(57, 255, 20, .06); }
.modal-row b { font-family: var(--font-px); font-size: .72rem; }
.modal-row small { color: var(--muted); margin-left: auto; font-size: .85rem; }

/* ————————————————————————— toast ————————————————————————— */

.toast { position: fixed; bottom: 24px; left: 50%; transform: translate(-50%, 20px); background: var(--panel); border: 1px solid var(--line); color: var(--text); padding: 14px 18px; font-family: var(--font-tx); font-size: .93rem; opacity: 0; pointer-events: none; z-index: 300; transition: opacity .2s, transform .2s; max-width: 90vw; text-align: center; border-radius: 12px; box-shadow: 0 8px 32px rgba(0, 0, 0, .4); }
.toast.on { opacity: 1; transform: translate(-50%, 0); }
@media (max-width: 720px) {
  /* The bottom bar is a flow item at the bottom of the column now, so a
     toast 24px off the viewport edge lands behind it. Sit above the bar,
     and take a layer of its own: the bar is promoted, and a promoted
     element paints over one that is not whatever the z-index says. */
  .toast { bottom: calc(76px + env(safe-area-inset-bottom)); }
  .toast, .toast.on { will-change: transform; }
}

/* ————————————————————————— pay-with soon tag ————————————————————————— */
.soon-tag.sm { font-size: .70rem; padding: 1px 4px; vertical-align: middle; margin-left: 2px; }
.pw[disabled] { opacity: .55; cursor: not-allowed; }

/* ————————————————————————— leverage (perps on Lighter) ————————————————————————— */
.lv-layout { display: grid; grid-template-columns: minmax(0, 1fr) 390px; gap: 22px; align-items: start; }
.lv-cat { font-family: var(--font-px); font-size: .65rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 18px 0 10px; }
.lv-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
/* No backdrop-filter here. iOS Safari promotes any element that has one
   to its own compositing layer and paints it above position:fixed and
   position:sticky siblings regardless of z-index, so these cards drew over
   the top bar and under the bottom bar. That is why making the bars opaque
   and giving them slab shadows changed nothing: the cards were never
   behind the bars. The gradient is opaque now, which is what the blur was
   simulating over a near-black page anyway. */
/* No transform in the transition. iOS promotes an element that
   transitions transform to its own compositing layer in anticipation,
   and a promoted layer paints above position:fixed and position:sticky
   siblings -- the same way backdrop-filter did, and the same reason
   these cards showed over the top bar and under the bottom bar. */
.lv-card { text-align: left; display: flex; flex-direction: column; gap: 6px; background: linear-gradient(150deg, #111118, #0b0b0f); border: 1px solid var(--line); border-radius: 14px; padding: 14px; cursor: pointer; transition: border-color .15s, box-shadow .15s; color: var(--text); }
.lv-card:hover { border-color: rgba(57, 255, 20, .35); box-shadow: 0 6px 24px rgba(57, 255, 20, .08); }
/* the lift is a pointer affordance; a touch screen has no hover to give it */
@media (hover: hover) {
  .lv-card { transition: border-color .15s, transform .15s, box-shadow .15s; }
  .lv-card:hover { transform: translateY(-2px); }
}
.lv-card.is-on { border-color: var(--green); box-shadow: 0 0 0 1px var(--green), 0 8px 30px rgba(57, 255, 20, .12); }
.lv-card-top { display: flex; align-items: center; gap: 8px; }
.lv-card-top .tlogo { width: 22px; height: 22px; border-radius: 50%; }
.lv-card-top b { font-family: var(--font-px); font-size: .70rem; letter-spacing: .06em; }
.lv-card-px { font-family: var(--font-tx); font-size: 1.05rem; color: var(--text); font-variant-numeric: tabular-nums; }
.lv-spot-tag {
  font-family: var(--font-px); font-size: .72rem; padding: 2px 5px;
  border-radius: 5px; color: var(--purple2);
  border: 1px solid rgba(107, 255, 82, .4); background: rgba(57, 255, 20, .1);
  letter-spacing: .06em;
}
.lv-max-tag {
  font-family: var(--font-px); font-size: .63rem; padding: 3px 5px;
  border-radius: 5px; color: var(--green);
  border: 1px solid rgba(57, 255, 20, .45); background: rgba(57, 255, 20, .1);
  letter-spacing: .04em;
}
[data-lvlev]:disabled { opacity: .3; cursor: not-allowed; }
.lv-card-chg { font-family: var(--font-tx); font-size: .95rem; }
.lv-card-chg.muted { color: var(--muted); font-style: normal; opacity: .8; }
.lv-card-chg.up { color: var(--green); }
.lv-card-chg.down { color: #ff4444; }
.lv-lgo-fb { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: #24406b; font-family: var(--font-px); font-size: .78rem; }
/* Not sticky and not height-capped: sticky stranded its own bottom once
   the panel grew taller than the viewport, and capping it just moved the
   problem into a nested scrollbar. The page scrolls, the panel is whole. */
/* same reason as .lv-card above */
.lv-panel { position: static; background: linear-gradient(165deg, #111118, #0a0a0e); border: 1px solid var(--line); border-radius: 18px; padding: 16px; }
.lv-mkt-head b { font-family: var(--font-px); font-size: .75rem; letter-spacing: .08em; }
.lv-chart-card { margin: 12px 0; background: rgba(8, 8, 12, .6); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.lv-tf-row { display: flex; gap: 4px; padding: 8px 8px 0; }
.lv-tf { font-family: var(--font-px); font-size: .63rem; padding: 5px 9px; border-radius: 7px; background: transparent; border: 1px solid transparent; color: var(--muted); cursor: pointer; }
.lv-tf.is-on { color: var(--green); border-color: rgba(57, 255, 20, .35); background: rgba(57, 255, 20, .08); }
.lv-chart { display: block; width: 100%; height: 190px; }
.lv-ch-guide { stroke: rgba(107, 107, 118, .18); stroke-dasharray: 3 4; stroke-width: 1; }
.lv-ch-line { filter: drop-shadow(0 0 6px rgba(57, 255, 20, .35)); }
.lv-ch-px { font-family: var(--font-ui); font-size: 13px; font-weight: 700; letter-spacing: .01em; }
.lv-ch-tip { font-family: var(--font-ui); font-size: 12px; font-weight: 600; }
.lv-ch-tipbox { fill: rgba(10, 10, 14, .95); stroke: var(--line); }
.lv-ch-tip { fill: var(--text); }
.lv-ch-crossline { stroke: rgba(212, 212, 216, .25); stroke-width: 1; }
.lv-ch-empty { fill: var(--muted); font-family: var(--font-tx); font-size: 13px; }
.lv-chart-foot { display: flex; justify-content: space-between; gap: 8px; padding: 6px 10px 9px; font-family: var(--font-ui); font-size: .8rem; font-weight: 600; color: var(--text); }
.lv-ch-mid { opacity: .75; }
.lv-lsrow { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 0; }
.lv-ls { font-family: var(--font-px); font-size: .78rem; letter-spacing: .1em; padding: 11px; border-radius: 10px; border: 1px solid var(--line); background: transparent; color: var(--muted); cursor: pointer; transition: all .15s; }
.lv-ls.lv-long.is-on { color: var(--green); border-color: var(--green); background: rgba(57, 255, 20, .08); box-shadow: 0 0 14px rgba(57, 255, 20, .15); }
.lv-ls.lv-short.is-on { color: #ff4444; border-color: #ff4444; background: rgba(255, 68, 68, .08); box-shadow: 0 0 14px rgba(255, 68, 68, .15); }
.lv-lbl-row { display: flex; justify-content: space-between; align-items: baseline; }
.lv-lbl { font-family: var(--font-px); font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); display: block; margin: 10px 0 6px; }
.lv-qty { font-family: var(--font-tx); font-size: .95rem; color: var(--text); }
.lv-size { width: 100%; }
.lv-levrow { display: grid; grid-template-columns: repeat(auto-fit, minmax(44px, 1fr)); gap: 5px; margin-bottom: 12px; }
.lv-search {
  width: 100%; margin-bottom: 14px; padding: 12px 16px;
  font-family: var(--font-tx); font-size: .93rem;
  background: var(--panel2); color: var(--text);
  border: 1px solid var(--line); border-radius: 10px;
}
.lv-search:focus { border-color: var(--cyan); outline: none; box-shadow: 0 0 0 2px rgba(57, 255, 20, .15); }
.lv-search::placeholder { color: rgba(107, 107, 118, .45); }

/* ————————————————————————— responsive ————————————————————————— */

@media (max-width: 900px) {
  .side { transform: translateX(-100%); transition: transform .2s; width: 240px; }
  body.menu-open .side { transform: none; }
  body.menu-open .scrim { display: block; }
  .stage { margin-left: 0; padding: 20px 16px 100px; }
  .topbar { display: flex; }
  .menu-btn { display: flex; }
  .side-toggle { display: none; }
  .feature-grid { grid-template-columns: 1fr 1fr; }
  .nft-strip { grid-template-columns: repeat(3, 1fr); }
  .mine-wrap, .lab-wrap { grid-template-columns: 1fr; }
  .hero-strip, .stake-stats { grid-template-columns: 1fr 1fr; }
  h1 { font-size: 1.8rem; }
  .hero { padding: 24px; overflow: hidden; }
  .hero-badges, .hero h1, .hero-sub, .hero-cta { max-width: 100%; }
  .hero-scene {
    position: absolute; right: 18px; bottom: 219px; top: auto;
    transform: none;
  }
  .hero-igloo   { display: none; }
  .hero-penguin { width: 245px; }
  .hero-bubble  { display: none; }
  .hero-cta { gap: 7px; }
  #labCanvas { width: 100%; }
  .wl-hero { flex-direction: column; text-align: center; padding: 28px 16px; gap: 16px; }
  .wl-hero-text h1 { font-size: 1.6rem; }
  .wl-hero-text p, .wl-hero-text .badge-wl { font-size: .85rem; }
  .wl-hero-img { display: none; }
  .wl-task { padding: 22px 18px; }
  .wl-body h3 { font-size: .74rem; }
  .wl-body p { font-size: .9rem; }
  .wl-input-row { flex-direction: column; }
}
@media (max-width: 520px) {
  .feature-grid { grid-template-columns: 1fr; }
  .nft-strip { grid-template-columns: repeat(2, 1fr); }
  .nft-grid { grid-template-columns: repeat(2, 1fr); }
  body { font-size: 18px; }
  .hero-penguin { width: 190px; }
}
@media (max-height: 500px) and (orientation: landscape) {
  .hero-scene {
    position: absolute; right: 15px; bottom: auto; top: 50%;
    transform: translateY(-50%);
  }
  .hero-igloo   { display: none !important; }
  .hero-penguin { width: 180px; }
  .hero-bubble  { display: none !important; }
}

/* —————————————— readable UI text in the swap desk ——————————————— */
.pay-row input { font-weight: 600; font-size: 1.7rem; letter-spacing: -0.01em; }
.usd, .quote-line, .quote-line b { font-size: .95rem; }
.tok-btn .tsym { font-family: var(--font-ui); font-weight: 700; font-size: .95rem; letter-spacing: 0; }
.tok-btn .tchain { font-family: var(--font-ui); font-size: .78rem; }
.tok-row .tr-main b { font-family: var(--font-ui); font-weight: 700; font-size: .98rem; letter-spacing: 0; }
.tok-row .tr-sub { font-family: var(--font-ui); font-size: .8rem; }
.tok-row .tr-price, .tok-row .tr-chain, .tok-row .tr-chg { font-family: var(--font-ui); font-size: .9rem; }
.pk-chain { font-family: var(--font-ui); font-size: .92rem; font-weight: 500; }
.pk-chainnow { font-family: var(--font-ui); font-size: .88rem; }
.pk-count { font-family: var(--font-ui); font-size: .82rem; }
.pk-cfilter, .pk-search { font-family: var(--font-ui); font-size: .95rem; }
.pk-loading { font-family: var(--font-ui); }
.paywith .pw { font-weight: 600; }
.chg { font-family: var(--font-ui); font-weight: 600; }

/* —————————————————— mobile polish pass —————————————————— */
@media (max-width: 720px) {
  .swap-panel { padding: 16px 12px; }
  .pay-row { gap: 8px; }
  .pay-row input { font-size: 1.05rem; min-width: 0; }
  .tok-btn { max-width: 46vw; }
  .tok-btn .tchain { max-width: 30vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .quote-line { flex-wrap: wrap; gap: 4px; }
  .paywith { flex-wrap: wrap; }
  .stake-grid { grid-template-columns: repeat(2, 1fr); }
  .stake-actions { flex-direction: column; }
  .stake-actions .btn { width: 100%; }
  .rig-stats { grid-template-columns: 1fr 1fr; }
  .nv-grid { grid-template-columns: 1fr; }
  .nv-card { padding: 20px 16px; }
  .nv-huge { font-size: 2.3rem; }
  .nv-row { flex-wrap: wrap; }
  .nv-row input { flex-basis: 100%; }
  .nv-row .btn { flex: 1; }
  .gov-actions { flex-direction: column; }
  .gov-actions .btn { width: 100%; }
  .whale-grid { grid-template-columns: 1fr; }
  .whale-controls { flex-direction: column; }
  .hold-chip { display: none; }
  h2 { font-size: .85rem; }
  .view-head p { font-size: .85rem; }
}

/* ————————————————————————— leverage: panel, summary, balances ————————————————————————— */
.lv-levbtn { font-family: var(--font-px); font-size: .65rem; padding: 9px 0; border-radius: 8px; border: 1px solid var(--line); background: transparent; color: var(--muted); cursor: pointer; }
.lv-levbtn.is-on { color: var(--green); border-color: var(--green); background: rgba(57, 255, 20, .08); }
.lv-summary { background: rgba(8, 8, 12, .55); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin-bottom: 12px; }
.lv-sum-row { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; font-family: var(--font-tx); font-size: .85rem; color: var(--muted); }
.lv-sum-row b { color: var(--text); font-variant-numeric: tabular-nums; text-align: right; }
.lv-sum-row .lv-liq { color: #ff7a7a; }
.lv-sum-row .lv-fee0 { color: var(--green); }
.lv-cta { margin-bottom: 10px; }
.lv-note { font-family: var(--font-tx); font-size: .92rem; line-height: 1.35; color: var(--muted); margin: 6px 0 0; }
.lv-note-green { color: var(--green); }
.lv-positions { margin-top: 14px; }
.lv-balance-box { background: rgba(57, 255, 20, .08); border: 1px solid rgba(57, 255, 20, .25); border-radius: 10px; padding: 10px 12px; margin-bottom: 12px; }
.lv-bal-head { font-family: var(--font-px); font-size: .63rem; letter-spacing: .12em; text-transform: uppercase; color: var(--green); margin-bottom: 6px; }
.lv-bal-ico { width: 16px; height: 16px; border-radius: 50%; flex: none; }
.lv-bal-row { display: flex; align-items: center; gap: 8px; font-family: var(--font-tx); font-size: .85rem; line-height: 1.6; }
.lv-bal-sym { font-family: var(--font-px); font-size: .67rem; color: var(--text); }
.lv-bal-amt { font-family: var(--font-tx); font-size: .88rem; color: var(--green); font-weight: 600; }
.lv-bal-lock { font-family: var(--font-tx); font-size: .88rem; color: var(--cyan2); }
.lv-bal-btns { display: flex; gap: 8px; margin-top: 8px; }
.lv-withdraw-btn { font-size: .82rem; padding: 5px 14px; background: rgba(57, 255, 20, .15); border: 1px solid rgba(57, 255, 20, .4); color: var(--green); border-radius: 8px; cursor: pointer; font-family: var(--font-px); letter-spacing: .04em; }
.lv-withdraw-btn:hover { background: rgba(57, 255, 20, .25); }
.lv-deposit-btn { font-size: .82rem; padding: 5px 14px; background: rgba(57, 255, 20, .15); border: 1px solid rgba(57, 255, 20, .4); color: var(--cyan); border-radius: 8px; cursor: pointer; font-family: var(--font-px); letter-spacing: .04em; }
.lv-deposit-btn:hover { background: rgba(57, 255, 20, .25); }
.lv-close-btn { margin-left: auto; font-size: .75rem; padding: 3px 10px; background: rgba(255, 80, 80, .15); border: 1px solid rgba(255, 80, 80, .4); color: #ff5050; border-radius: 6px; cursor: pointer; font-family: var(--font-px); letter-spacing: .04em; }
.lv-close-btn:hover { background: rgba(255, 80, 80, .3); }
.lv-pos-head { font-family: var(--font-px); font-size: .65rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.lv-pos-card { font-family: var(--font-tx); font-size: .95rem; background: rgba(8, 8, 12, .5); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; }
.lv-pos-row1 { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.lv-pos-row1 b { font-family: var(--font-px); font-size: .68rem; }
.lv-pos-row2 { display: flex; align-items: center; gap: 10px; font-size: .9rem; color: var(--muted); margin-bottom: 4px; }
.lv-pos-row3 { display: flex; align-items: center; gap: 10px; font-size: .9rem; overflow: hidden; }
.lv-side-tag { font-family: var(--font-px); font-size: .60rem; padding: 3px 6px; border-radius: 6px; }
.lv-side-tag.up { color: var(--green); border: 1px solid rgba(57, 255, 20, .4); }
.lv-side-tag.down { color: #ff6b6b; border: 1px solid rgba(255, 107, 107, .4); }
.lv-lev-tag { font-family: var(--font-px); font-size: .60rem; padding: 3px 6px; border-radius: 6px; color: var(--green); border: 1px solid rgba(57, 255, 20, .4); background: rgba(57, 255, 20, .08); }
.lv-pos-liq { margin-left: auto; color: #ff7a7a; }
.lv-pos-row2b { display: flex; justify-content: flex-end; font-size: .9rem; margin-bottom: 4px; }
.lv-pos-now { color: var(--cyan2); }
.lv-pos-pnl { font-family: var(--font-px); font-size: .66rem; line-height: 1.6; letter-spacing: .02em; padding: 4px 8px; border-radius: 6px; white-space: nowrap; flex: none; }
.lv-pnl-up { color: var(--green); background: rgba(57, 255, 20, .12); border: 1px solid rgba(57, 255, 20, .35); }
.lv-pnl-down { color: var(--red); background: rgba(255, 68, 68, .12); border: 1px solid rgba(255, 68, 68, .35); }
.lv-pnl-zero { color: var(--muted); background: rgba(107, 107, 118, .08); border: 1px solid rgba(107, 107, 118, .25); }
.lv-pos-val { font-family: var(--font-px); font-size: .66rem; line-height: 1.6; color: var(--cyan); letter-spacing: .02em; white-space: nowrap; flex: none; }
.lv-modal-overlay { position: fixed; inset: 0; z-index: 9999; background: rgba(0, 0, 0, .65); display: flex; align-items: center; justify-content: center; backdrop-filter: blur(4px); }
.lv-modal { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 28px 24px; width: 340px; max-width: 90vw; box-shadow: 0 12px 40px rgba(0, 0, 0, .5); }
.lv-modal-head { font-family: var(--font-px); font-size: .70rem; letter-spacing: .1em; text-transform: uppercase; color: var(--green); margin-bottom: 8px; }
.lv-modal-sub { font-family: var(--font-tx); font-size: .85rem; color: var(--muted); margin: 0 0 16px; line-height: 1.3; }
.lv-modal-input { width: 100%; padding: 10px 12px; font-family: var(--font-tx); font-size: .9rem; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; color: var(--text); outline: none; }
.lv-modal-input:focus { border-color: var(--cyan); box-shadow: 0 0 0 2px rgba(57, 255, 20, .2); }
/* the spendable balance, quiet enough to read as a hint under the field */
.lv-modal-bal { font-family: var(--font-tx); font-size: .78rem; color: var(--muted); margin: 8px 2px 0; }
.lv-modal-max { font-family: inherit; font-size: inherit; background: none; border: 0; padding: 0; color: var(--green); cursor: pointer; border-bottom: 1px dashed rgba(57, 255, 20, .4); }
.lv-modal-max:hover { color: #fff; }
.lv-modal-btns { display: flex; gap: 10px; margin-top: 16px; }
.lv-modal-cancel { flex: 1; padding: 8px; font-family: var(--font-px); font-size: .63rem; letter-spacing: .08em; background: rgba(107, 107, 118, .1); border: 1px solid var(--line); color: var(--muted); border-radius: 10px; cursor: pointer; }
.lv-modal-cancel:hover { background: rgba(107, 107, 118, .2); }
.lv-modal-confirm { flex: 1; padding: 8px; font-family: var(--font-px); font-size: .63rem; letter-spacing: .08em; background: rgba(57, 255, 20, .15); border: 1px solid rgba(57, 255, 20, .4); color: var(--green); border-radius: 10px; cursor: pointer; }
.lv-modal-confirm:hover { background: rgba(57, 255, 20, .3); }
.lv-exec { margin-bottom: 8px; text-align: center; text-decoration: none; }
.lv-dep-row { display: flex; gap: 8px; margin-top: 10px; align-items: center; }
.lv-dep-input { flex: 1; min-width: 0; font-size: .9rem; }
.lv-dep-row .btn { white-space: nowrap; flex-shrink: 0; }
.lv-en { padding: 6px 4px 2px; }
.lv-en-step { font-family: var(--font-px); font-size: .63rem; letter-spacing: .12em; color: var(--green); text-transform: uppercase; margin-bottom: 8px; }
.lv-en-title { font-family: var(--font-px); font-size: .6rem; line-height: 1.6; margin: 0 0 8px; }
.lv-en-sub { font-family: var(--font-tx); font-size: .85rem; color: var(--muted); line-height: 1.35; margin: 0 0 14px; }
@media (max-width: 1020px) {
  .lv-layout { grid-template-columns: 1fr; }
  .lv-panel { position: static; order: -1; }
}
@media (max-width: 640px) {
  .lv-grid { grid-template-columns: repeat(2, 1fr); }
  .lv-levrow { grid-template-columns: repeat(auto-fit, minmax(40px, 1fr)); }
}


/* ————————————————————————— mobile: wallet + picker sheets ————————————————————————— */
@media (max-width: 720px) {
  /* the connect sheet reads as a bottom sheet on a phone, not a zoomed card */
  /* left/right pinning with width:auto rather than 100vw — on iOS 100vw
     can exceed the visible width and pushes the sheet off screen */
  /* .modal-sheet:not(.is-wide) below also matches this sheet and outranks a
     lone .wmodal-sheet, so qualify it with both classes */
  /* centred, with real margin around it — a sheet welded to the bottom
     edge reads as cropped on a tall phone */
  .modal-sheet.wmodal-sheet {
    position: fixed; left: 22px; right: 22px; bottom: auto;
    top: 50%; transform: translateY(-50%);
    width: auto; max-width: none;
    border-radius: 16px; border-width: 1px;
    height: auto; max-height: 72vh; max-height: 72dvh;
    display: flex; flex-direction: column;
  }
  .modal-sheet.wmodal-sheet .wmodal-list { max-height: none; flex: 1 1 auto; padding: 4px 6px; }
  .wm-row { font-size: .78rem; padding: 9px 9px; gap: 9px; }
  .wm-ico { width: 20px; height: 20px; border-radius: 5px; }
  .wm-group { font-size: .56rem; padding: 8px 10px 3px; }
  .wmodal-foot { padding: 7px 11px; font-size: .66rem; line-height: 1.35; }
  .modal-head h3 { font-size: .68rem; }
  .modal-sheet.wmodal-sheet .modal-head { padding: 11px 12px; }
}


/* ————————————————————————— mobile: topbar fits the screen ————————————————————————— */
/* The brand + nav + connect button together were wider than a phone,
   which pushed the whole page sideways and made every sheet look
   half-off-screen. The nav lives in the tab row below, so drop it. */
@media (max-width: 720px) {
  .topbar { padding: 10px 12px; padding-top: calc(10px + env(safe-area-inset-top)); gap: 8px; }
  .topbar-nav { display: none; }
  .topbar-brand img { width: 28px; height: 28px; }
  .topbar-brand span { font-size: 12px; letter-spacing: 1.5px; }
  .connect-btn { font-size: 11px; padding: 8px 12px; letter-spacing: .5px; white-space: nowrap; }
  .main { padding: 16px 12px 72px; }
}
@media (max-width: 380px) {
  .topbar-brand span { display: none; }
}

/* a token with no pool anywhere — "—" reads as "still loading", which it is not */
.tr-nopool { color: var(--muted); font-size: .72rem; opacity: .8; }

/* ————————————————————————— iOS focus zoom —————————————————————————
   Safari zooms the whole page in when a text field smaller than 16px
   takes focus, and never zooms back out. One tap in a search box and
   the entire desk looks magnified with its edges cut off. 16px is the
   threshold, so every field on a phone sits at exactly that. */
@media (max-width: 720px) {
  input, select, textarea,
  .pixel-input, .addr-field, .lv-search, .lv-size, .pk-search, .pk-cfilter,
  .picker-search, .slip-input { font-size: 16px !important; }
  .pay-row input { font-size: 1.6rem !important; }
}

/* Picker rows on a phone. Declared last on purpose: the .tok-row
   typography block further up would otherwise win and the list reads
   magnified. */
@media (max-width: 720px) {
  .tok-row .tlogo { width: 26px; height: 26px; }
  .tok-row .tr-main b { font-size: .86rem; }
  .tok-row .tr-sub { font-size: .7rem; }
  .tok-row .tr-price, .tok-row .tr-chain, .tok-row .tr-chg { font-size: .76rem; }
  .tr-nopool { font-size: .68rem; }
  .pk-title { font-size: .68rem; }
  .pk-chainnow { font-size: .74rem; padding: 4px 9px; }
  .pk-head { padding: 11px 12px; }
  .pk-chain { font-size: .72rem; }
}



/* ————————————————————————— swap desk on a phone —————————————————————————
   The panel ran past the fold and the Swap button sat behind the bottom
   bar. Tightened so the whole form is reachable in one screen. Inputs
   stay at 16px — anything smaller and iOS zooms the page on focus. */
@media (max-width: 720px) {
  #view-swap .view-head { margin-bottom: 10px; }
  #view-swap .view-head h2 { font-size: .82rem; margin: 0 0 4px; }
  #view-swap .view-head p { font-size: .76rem; line-height: 1.4; }
  .swap-mode { margin-bottom: 10px; }
  .mode-btn { font-size: .64rem; padding: 8px 14px; }
  .swap-panel .pay-box { padding: 11px 12px; }
  .pay-head { font-size: .72rem; }
  .pay-row input { font-size: 1.5rem !important; }
  .tok-btn { font-size: .64rem; padding: 8px 9px; border-radius: 9px; }
  .tok-btn .tlogo, .tok-btn img { width: 26px; height: 26px; }
  .pct-row { margin-top: 6px; gap: 4px; }
  .pct-btn { padding: 3px 6px; }
  .usd { font-size: .76rem; }
  .flip { width: 34px; height: 34px; margin: -10px auto; }
  .quote-line { padding: 7px 12px; font-size: .78rem; }
  .swap-panel .btn-block { padding: 13px; font-size: .7rem; }
  .fine { font-size: .68rem; padding: 0 12px 12px; }
  .stock-tabs .stk-tab { font-size: .64rem; padding: 9px; }
  .paywith .pw { font-size: .68rem; padding: 8px 10px; }
}

/* Picker chrome on a phone: the sheet was pressed against the screen edges
   and everything inside it sat a size too large. The two search fields
   stay at 16px — under that iOS zooms the page on focus — so they give
   back space through padding instead. */
@media (max-width: 720px) {
  .pk-head { padding: 9px 11px; gap: 9px; }
  .pk-mark { width: 20px; height: 20px; }
  .pk-title { font-size: .62rem; }
  .pk-chainnow { font-size: .68rem; padding: 3px 8px; }
  .pk-cfilter, .pk-search { margin: 8px 10px; width: calc(100% - 20px); padding: 8px 11px; }
  .pk-chains { padding: 0 8px 8px; gap: 2px; }
  .pk-chain { min-width: 58px; max-width: 96px; padding: 7px 8px; font-size: .64rem; gap: 4px; }
  .pk-clogo { width: 20px; height: 20px; }
  .pk-home, .pk-count { font-size: .58rem; padding: 2px 4px; }
  .pk-tokens { padding: 0 4px 8px; }
  .tok-row { padding: 8px 7px; gap: 9px; }
  .tok-row .tlogo { width: 24px; height: 24px; }
  .tok-row .tr-main b { font-size: .8rem; }
  .tok-row .tr-sub { font-size: .66rem; }
  .tok-row .tr-price, .tok-row .tr-chain, .tok-row .tr-chg { font-size: .7rem; }
  .pk-loading { padding: 18px; font-size: .78rem; }
}

/* the crumb and the sidebar belong to the wide layout and to nothing else */
.rside, .topbar-crumb { display: none; }

/* ————————————————————————— sidebar (desktop) —————————————————————————
   The four views used to sit in the top bar as text links. They are a
   sidebar on a wide screen now: the nav stops competing with the wallet
   button for the same strip, and there is room for the things a top bar
   could never hold — a section split, the chain, and the burn clock.

   Nothing below 1024px sees any of it. The phone keeps the bottom bar it
   already had, and the tablet keeps the top nav. */
@media (min-width: 1024px) {
  :root { --side-w: 232px; }

  /* Everything shifts together: the sticky top bar, the page column and
     the full-bleed Home hero are all body-level, so one padding moves the
     lot and .main keeps centring itself in what is left. */
  body { padding-left: var(--side-w); }

  .rside {
    position: fixed; top: 0; left: 0; bottom: 0; width: var(--side-w);
    z-index: 120;                         /* over the top bar's 400px slab */
    display: flex; flex-direction: column;
    padding: 20px 14px 16px;
    background: linear-gradient(180deg, #0a0f0b 0%, var(--bg) 46%);
    border-right: 1px solid var(--line);
  }
  .rside-brand { display: flex; align-items: center; gap: 10px; padding: 4px 10px 22px; }
  .rside-brand img { width: 30px; height: 30px; }
  .rside-brand span {
    font-family: var(--font-px); font-size: 14px; font-weight: 700;
    color: var(--green); letter-spacing: 2.4px;
    text-shadow: 0 0 14px rgba(57,255,20,.45);
  }

  .rside-nav { display: flex; flex-direction: column; gap: 2px; }
  .rside-label {
    font-family: var(--font-px); font-size: 9px; letter-spacing: 2.2px;
    text-transform: uppercase; color: rgba(107,107,118,.7);
    padding: 0 10px; margin: 16px 0 7px;
  }
  .rside-nav > .rside-label:first-child { margin-top: 0; }

  .rside-nav a {
    position: relative; display: flex; align-items: center; gap: 11px;
    padding: 9px 10px; border-radius: 8px;
    font-size: 13.5px; font-weight: 500; color: #8a8f8c;
    transition: color .16s, background-color .16s;
  }
  .rside-nav a svg {
    width: 18px; height: 18px; flex: none;
    fill: none; stroke: currentColor; stroke-width: 1.6;
    stroke-linecap: round; stroke-linejoin: round;
    opacity: .85; transition: opacity .16s, filter .16s;
  }
  /* the rail: it is always there and always the right height, so the only
     thing that changes on hover or activation is how much of it is lit */
  .rside-nav a::before {
    content: ""; position: absolute; left: -14px; top: 50%; transform: translateY(-50%);
    width: 3px; height: 17px; border-radius: 0 3px 3px 0;
    background: var(--green); opacity: 0;
    transition: opacity .18s, height .18s;
  }
  .rside-nav a:hover { color: #d6ded8; background: rgba(255,255,255,.035); }
  .rside-nav a:hover::before { opacity: .32; }
  .rside-nav a.is-active {
    color: var(--green);
    background: linear-gradient(90deg, rgba(57,255,20,.10), rgba(57,255,20,.02) 70%, transparent);
  }
  .rside-nav a.is-active::before { opacity: 1; height: 22px; box-shadow: 0 0 10px rgba(57,255,20,.7); }
  .rside-nav a.is-active svg { opacity: 1; filter: drop-shadow(0 0 5px rgba(57,255,20,.55)); }

  .rside-foot { margin-top: auto; padding-top: 18px; display: flex; flex-direction: column; gap: 10px; }

  /* The contract address, one click from any page. Short enough to read
     back against a block explorer, and it copies in full. */
  .rside-ca {
    display: flex; align-items: center; gap: 8px; width: 100%;
    padding: 9px 12px; border-radius: 10px; cursor: pointer; text-align: left;
    border: 1px solid var(--line); background: rgba(255,255,255,.02);
    transition: border-color .18s, background-color .18s, color .18s;
  }
  .rside-ca:hover { border-color: rgba(57,255,20,.3); background: rgba(57,255,20,.05); }
  .rside-ca-k {
    font-family: var(--font-px); font-size: 9px; letter-spacing: 1.6px;
    text-transform: uppercase; color: var(--muted); flex: none;
  }
  .rside-ca-v {
    font-family: var(--font-px); font-size: 11px; color: #d6ded8;
    letter-spacing: .3px; margin-left: auto;
  }
  .rside-ca svg {
    width: 13px; height: 13px; flex: none;
    fill: none; stroke: var(--muted); stroke-width: 1.6;
    stroke-linecap: round; stroke-linejoin: round;
    transition: stroke .18s;
  }
  .rside-ca:hover svg { stroke: var(--green); }
  .rside-ca.is-copied { border-color: rgba(57,255,20,.45); }
  .rside-ca.is-copied .rside-ca-v { color: var(--green); }
  .rside-ca.is-copied svg { stroke: var(--green); }

  .rside-chain {
    display: flex; align-items: center; gap: 7px; padding: 0 12px;
    font-family: var(--font-px); font-size: 9.5px; letter-spacing: 1.4px;
    text-transform: uppercase; color: var(--muted);
  }
  .rside-chain i {
    width: 6px; height: 6px; border-radius: 50%; background: var(--green);
    box-shadow: 0 0 8px rgba(57,255,20,.8);
    animation: sideLive 2.4s ease-in-out infinite;
  }
  @keyframes sideLive { 0%, 100% { opacity: 1 } 50% { opacity: .35 } }

  /* The top bar keeps the wallet and gives up the nav: the brand is in the
     sidebar now, and two brands on one screen is one too many. */
  .topbar { justify-content: space-between; padding-left: 32px; padding-right: 32px; }
  .topbar-brand, .topbar-nav { display: none; }
  .topbar-crumb {
    display: flex; align-items: center; gap: 9px;
    font-family: var(--font-px); font-size: 10.5px; letter-spacing: 2px;
    text-transform: uppercase; color: var(--muted);
  }
  .topbar-crumb b { color: rgba(107,107,118,.85); font-weight: 400; }
  .topbar-crumb i { color: rgba(107,107,118,.4); font-style: normal; }
  .topbar-crumb span { color: #d6ded8; }

  .main { padding-left: 32px; padding-right: 32px; }
}