/* ==================================================================
   PulseChain ecosystem console.

   The atmosphere comes from the assets themselves — PulseX's red/green
   and chrome for EARN, HEX's full spectrum for FLEX — because this is a
   community whose visual language is chromatic and energetic, not
   monochrome. The aurora runs the whole page, not just the hero: a fixed
   wash at the top, a coloured aura behind every section, fine grain and
   a technical grid over a tinted (never pure black) ground. Cards are
   glass over that light.

   Chakra Petch (angular, technical) for labels and display.
   Geist / Geist Mono for interface and figures. All self-hosted.
   ================================================================== */

@font-face{font-family:'Chakra Petch';font-style:normal;font-weight:500;font-display:swap;
  src:url('vendor/fonts/chakra-500.woff2') format('woff2')}
@font-face{font-family:'Chakra Petch';font-style:normal;font-weight:600;font-display:swap;
  src:url('vendor/fonts/chakra-600.woff2') format('woff2')}
@font-face{font-family:'Chakra Petch';font-style:normal;font-weight:700;font-display:swap;
  src:url('vendor/fonts/chakra-700.woff2') format('woff2')}
@font-face{font-family:'Geist';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('vendor/fonts/geist.woff2') format('woff2')}
@font-face{font-family:'Geist Mono';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('vendor/fonts/geistmono.woff2') format('woff2')}

:root{
  --bg:#060A08;
  --a1:#00C46B;            /* PulseX green */
  --a2:#E81820;            /* PulseX red   */
  --chrome:#DCE6E0;
  --glow-1:rgba(0,196,107,.06);
  --glow-2:rgba(232,24,32,.045);
  --aura-1:rgba(0,196,107,.28);
  --aura-2:rgba(232,24,32,.22);
  --floor:rgba(232,24,32,.04);
  --ghost:rgba(0,196,107,.04);     /* the hexagon drawn behind each section */

  --s1:rgba(255,255,255,.05);
  --s2:rgba(255,255,255,.075);
  --line:rgba(255,255,255,.10);
  --line-2:rgba(255,255,255,.17);

  --fg:#F1F6F2;
  --fg-2:rgba(241,246,242,.70);
  --fg-3:rgba(241,246,242,.55);

  --accent:#00C46B; --accent-2:#4BF0A1; --accent-ink:#03150A;
  --accent-dim:rgba(0,196,107,.14);
  --safe:#00C46B; --warn:#F0B008; --danger:#E81820;

  --display:'Chakra Petch','Geist',sans-serif;
  --sans:'Geist',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --mono:'Geist Mono',ui-monospace,SFMono-Regular,monospace;

  --r:14px; --r-sm:10px;
  --sp1:4px; --sp2:8px; --sp3:12px; --sp4:16px; --sp5:24px; --sp6:32px; --sp7:56px;
  --ease:cubic-bezier(.22,.61,.36,1);
}
body[data-accent="flex"]{
  --bg:#0B0608;
  --a1:#FF3D8B; --a2:#F0B008; --chrome:#FFD9A8;
  --glow-1:rgba(255,61,139,.06); --glow-2:rgba(240,176,8,.05);
  --aura-1:rgba(255,61,139,.28); --aura-2:rgba(240,176,8,.24); --floor:rgba(240,176,8,.04);
  --fg:#F8F1EC; --fg-2:rgba(248,241,236,.70); --fg-3:rgba(248,241,236,.55);
  --accent:#F0B008; --accent-2:#FFD05A; --accent-ink:#1A1206;
  --accent-dim:rgba(240,176,8,.14);
  --safe:#14C9A0; --warn:#FF8A1F; --danger:#FF3D6B;
}

*{margin:0;padding:0;box-sizing:border-box}
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%; background:var(--bg)}
/* the ground is html's. body stays transparent so the two fixed atmosphere layers below
   can paint: a positioned body's own background paints over negative z-index children,
   which is why the wash, glows, grain and grid were never seen until 2026-09-03 */
body{background:transparent; color:var(--fg); font-family:var(--sans); font-size:.9375rem;
  /* figures that belong to the connected wallet: the accent, lifted towards white so it
     never reads as the "safe" green or the "warn" gold, which keep their own meaning */
  --you:color-mix(in srgb, var(--accent-2) 55%, var(--fg));
  line-height:1.5; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden; min-height:100vh; position:relative}

/* atmosphere, layer 1: the aurora washes the top of the page behind the header and hero,
   anchored to the document so it frames them and scrolls away */
body::before{content:''; position:absolute; inset:0; z-index:-2; pointer-events:none;
  background:url('img/aurora.jpg') 50% 0 / 100% auto no-repeat;
  opacity:.09; mix-blend-mode:screen;
  -webkit-mask-image:linear-gradient(#000 0, rgba(0,0,0,.6) 40vh, transparent 78vh);
  mask-image:linear-gradient(#000 0, rgba(0,0,0,.6) 40vh, transparent 78vh)}
/* layer 2: two brand light sources in the top corners, a floor glow, fine film grain, and a
   honeycomb — the ecosystem's hexagon — drawn as a faint lattice over the whole ground */
body::after{content:''; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(900px 620px at 6% -8%,   var(--glow-1), transparent 62%),
    radial-gradient(760px 520px at 98% 2%,   var(--glow-2), transparent 60%),
    radial-gradient(1200px 700px at 50% 108%, var(--floor), transparent 64%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .03 0'/></filter><rect width='220' height='220' filter='url(%23n)'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'><path d='M28 66L0 50L0 16L28 0L56 16L56 50L28 66L28 100' fill='none' stroke='rgba(255,255,255,.022)' stroke-width='.8'/><path d='M28 0L28 34L0 50L0 84L28 100L56 84L56 50L28 34' fill='none' stroke='rgba(255,255,255,.022)' stroke-width='.8'/></svg>");
  background-size:auto, auto, auto, 220px 220px, 56px 100px}

a{color:var(--accent-2); text-underline-offset:3px}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:6px}
::selection{background:var(--accent-dim)}
.wrap{max-width:1080px; margin:0 auto; padding:0 var(--sp5)}

.lbl{font-family:var(--display); font-size:.6875rem; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--fg-3)}

/* ---------- page-load choreography ---------- */
@keyframes rise{from{opacity:0; transform:translateY(14px)}to{opacity:1; transform:none}}
@keyframes bloom{from{opacity:0; transform:scale(.82)}to{opacity:1; transform:none}}
.reveal{opacity:0; animation:rise .6s var(--ease) forwards}
.reveal.d1{animation-delay:.06s} .reveal.d2{animation-delay:.13s}
.reveal.d3{animation-delay:.20s} .reveal.d4{animation-delay:.28s}

/* ---------- token marks, with bloom ---------- */
.tok{display:inline-flex; align-items:center; gap:var(--sp2); min-width:0}
.tok img,.tok .chip{width:22px; height:22px; border-radius:50%; flex:none; display:block}
.tok .chip{display:grid; place-items:center; background:var(--s2); border:1px solid var(--line);
  font-family:var(--mono); font-size:.5rem; font-weight:600; color:var(--fg-2)}
.tok b{font-weight:550; font-size:.875rem}
.tok-sm img,.tok-sm .chip{width:18px; height:18px}
.tok-sm .chip{font-size:.4375rem}
.tok-xl{position:relative}
.tok-xl img,.tok-xl .chip{width:84px; height:84px;
  filter:drop-shadow(0 0 26px var(--glow-1)) drop-shadow(0 6px 18px rgba(0,0,0,.7));
  animation:bloom .7s var(--ease) backwards}
.tok-xl .chip{font-size:1.25rem; border-width:2px}

/* ---------- header: brand, section links, one wallet phrase, the address button.
   One row at every width and in every wallet state: the phrase yields (wraps
   within the button's height, then hides on phones); the links and the brand
   never wrap. Vertical padding only, so .wrap's side padding lines the row up
   with the page column. ---------- */
header{position:sticky; top:0; z-index:30; border-bottom:1px solid var(--line);
  background:color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter:blur(18px) saturate(170%); -webkit-backdrop-filter:blur(18px) saturate(170%)}
.hd{display:flex; align-items:center; justify-content:space-between; gap:var(--sp4); padding-block:var(--sp4)}
.brand{display:flex; align-items:center; gap:var(--sp3); min-width:0; flex:none}
.brand img{width:32px; height:32px; border-radius:50%; flex:none;
  filter:drop-shadow(0 0 12px var(--glow-1))}
.brand-name{font-family:var(--display); font-size:1.0625rem; font-weight:700; letter-spacing:.01em; margin:0}
.brand-sub{font-size:.75rem; color:var(--fg-3)}
.wallet{display:flex; align-items:center; gap:var(--sp4); min-width:0; flex:0 1 auto}
.wallet-note{font-size:.71875rem; color:var(--fg-3); text-align:right; line-height:1.35; max-width:300px; min-width:0; order:-1}
.wallet-bal{font-family:var(--mono); font-size:.71875rem; color:var(--fg-3); text-align:right; line-height:1.35;
  letter-spacing:-.01em; max-width:300px; min-width:0; order:-1}
.wallet-bal .gas{color:var(--warn)}
/* no PLS to sign with: the address button carries the warn colour, as the wrong-network button does */
.btn.gas{box-shadow:0 0 0 1px var(--warn), 0 0 16px -4px var(--warn)}

/* the five sections, in the label voice; hidden where the header has no room */
.jump{display:flex; gap:var(--sp3); margin:0 auto 0 var(--sp5); flex:none}
.jump a{font-family:var(--display); font-size:.6875rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--fg-3); text-decoration:none; white-space:nowrap; transition:color .18s; letter-spacing:.14em}
.jump a:hover{color:var(--fg)}
section{scroll-margin-top:84px}

/* ---------- hero ---------- */
.hero{position:relative; margin-top:var(--sp5); border:1px solid var(--line-2); border-radius:var(--r);
  overflow:hidden; background:linear-gradient(160deg, var(--s1), rgba(255,255,255,.01));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1), 0 30px 80px -30px #000, 0 0 0 1px rgba(0,0,0,.4)}
.hero-bg{position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:url('img/aurora.jpg'); background-size:cover; background-position:50% 45%;
  opacity:.62; mix-blend-mode:screen;
  -webkit-mask-image:radial-gradient(120% 110% at 50% 42%, #000 0%, rgba(0,0,0,.55) 52%, transparent 84%);
  mask-image:radial-gradient(120% 110% at 50% 42%, #000 0%, rgba(0,0,0,.55) 52%, transparent 84%)}
.hero-main{position:relative; z-index:1; display:flex; align-items:center; justify-content:center;
  gap:var(--sp7); padding:var(--sp7) var(--sp6) var(--sp6); flex-wrap:wrap}
.hero-main::before{content:''; position:absolute; inset:-10% -5% -30% -5%; z-index:-1; pointer-events:none;
  background:radial-gradient(58% 62% at 50% 66%, rgba(0,0,0,.78), rgba(0,0,0,.42) 55%, transparent 78%)}
.leg{display:flex; flex-direction:column; align-items:center; gap:var(--sp3); text-align:center; min-width:0}
.leg-name{font-family:var(--display); font-size:1.5rem; font-weight:700; letter-spacing:.01em;
  text-shadow:0 2px 14px rgba(0,0,0,.9)}
.leg-role{font-family:var(--display); font-size:.65625rem; font-weight:500; letter-spacing:.15em;
  text-transform:uppercase; color:var(--fg-3)}

/* the pulse: a light travelling the wire between the two assets */
.wire{position:relative; width:120px; height:2px; border-radius:2px; flex:none;
  background:linear-gradient(90deg, transparent, var(--line-2) 18%, var(--line-2) 82%, transparent)}
.wire::after{content:''; position:absolute; top:-2px; left:0; width:34px; height:6px; border-radius:6px;
  background:linear-gradient(90deg, transparent, var(--accent), transparent);
  filter:blur(1px); animation:travel 2.8s var(--ease) infinite}
@keyframes travel{0%{left:-34px; opacity:0}12%{opacity:1}88%{opacity:1}100%{left:120px; opacity:0}}
.wire-cap{position:absolute; top:-3px; right:-4px; width:8px; height:8px; border-radius:50%;
  background:var(--accent); box-shadow:0 0 12px var(--accent)}

.hero-by{position:relative; z-index:1; display:flex; align-items:center; justify-content:center;
  gap:var(--sp3); padding:var(--sp3) 0 var(--sp5)}
.hero-stats{position:relative; z-index:1; display:flex; flex-wrap:wrap;
  border-top:1px solid var(--line); background:rgba(0,0,0,.42);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px)}
.hero-stat{flex:1 1 150px; padding:var(--sp4) var(--sp4); border-right:1px solid var(--line)}
.hero-stat:last-child{border-right:0}
.hero-stat .k{font-family:var(--display); font-size:.625rem; font-weight:600; letter-spacing:.15em;
  text-transform:uppercase; color:var(--fg-3)}
.hero-stat .v{font-family:var(--mono); font-size:1.3125rem; font-weight:600; letter-spacing:-.035em;
  font-variant-numeric:tabular-nums; margin-top:4px}
.hero-stat .s{font-size:.71875rem; color:var(--fg-3); margin-top:2px}

/* ---------- alerts: calm, one line where possible ---------- */
.alerts{margin-top:var(--sp5); display:flex; flex-direction:column; gap:var(--sp3)}
.alerts:empty{display:none}
.alert{border:1px solid; border-radius:var(--r-sm); padding:var(--sp3) var(--sp4); font-size:.84375rem;
  line-height:1.55; display:flex; gap:var(--sp3); align-items:flex-start}
.alert b{font-weight:650}
.alert.notice{border-color:var(--line-2); background:rgba(255,255,255,.035); color:var(--fg-2)}
.alert.notice b{color:var(--fg)}
.alert.warn{border-color:rgba(240,176,8,.32); background:rgba(240,176,8,.07); color:#EFCB7C}
.alert.danger{border-color:rgba(232,24,32,.32); background:rgba(232,24,32,.07); color:#F3A0A3}
.alert .x{margin-left:auto; background:none; border:0; color:inherit; cursor:pointer; opacity:.55;
  font-size:1rem; line-height:1; padding:0 2px}
.alert .x:hover{opacity:1}

/* ---------- sections, each with its own aura ---------- */
section{margin-top:var(--sp7); display:flex; flex-direction:column; gap:var(--sp5); position:relative; isolation:isolate}
/* kept inside the column horizontally so it never widens the page on small screens */
section::before{content:''; position:absolute; inset:-22% 0; z-index:-1; pointer-events:none;
  background:radial-gradient(64% 76% at -4% 36%, var(--aura-1), transparent 72%)}
section:nth-of-type(even)::before{background:radial-gradient(64% 76% at 104% 44%, var(--aura-2), transparent 72%)}
/* and a ghost of the hexagon beside each section, alternating sides the way the auras do. Only the part
   outside the column is drawn, so its edges stay in the gutter and never cross a card or a field. The
   overhang is the gutter itself (100vw counts the scrollbar, so 8px are held back), at most 180px,
   so the page never widens on a narrow screen */
section{--gh:min(180px, max(24px, calc((100vw - 1080px) / 2 + 16px)))}
section::after{content:''; position:absolute; width:720px; height:720px; right:calc(-1 * var(--gh)); top:-140px; z-index:-1; pointer-events:none;
  clip-path:inset(0 0 0 calc(720px - var(--gh))); mix-blend-mode:screen; background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><polygon points='50,3 93,27 93,73 50,97 7,73 7,27' fill='none' stroke='rgba(0,196,107,.04)' stroke-width='.7'/><polygon points='50,17 81,35 81,65 50,83 19,65 19,35' fill='none' stroke='rgba(0,196,107,.04)' stroke-width='.35'/></svg>") no-repeat center/contain}
section:nth-of-type(even)::after{left:calc(-1 * var(--gh)); right:auto; top:auto; bottom:-140px; clip-path:inset(0 calc(720px - var(--gh)) 0 0)}
body[data-accent=flex] section::after{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><polygon points='50,3 93,27 93,73 50,97 7,73 7,27' fill='none' stroke='rgba(255,61,139,.04)' stroke-width='.7'/><polygon points='50,17 81,35 81,65 50,83 19,65 19,35' fill='none' stroke='rgba(255,61,139,.04)' stroke-width='.35'/></svg>")}
.sec-hd{display:flex; align-items:baseline; justify-content:space-between; gap:var(--sp4); flex-wrap:wrap}
.sec-hd h2{font-family:var(--display); font-size:1.25rem; font-weight:700; letter-spacing:.02em;
  display:flex; align-items:center; gap:var(--sp3)}
.sec-hd h2::before{content:''; width:4px; height:20px; border-radius:2px; flex:none;
  background:linear-gradient(var(--a1), var(--a2)); box-shadow:0 0 12px var(--glow-1)}
.sec-hd .note{font-size:.8125rem; color:var(--fg-3)}
.sec-hd .note.wallet{display:none}   /* the header shows the total; phones show it here instead */

/* ---------- card: glass over the aura ---------- */
.card{background:linear-gradient(160deg, rgba(255,255,255,.065), rgba(255,255,255,.022));
  border:1px solid var(--line); border-radius:var(--r); position:relative;
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09), 0 22px 50px -30px #000}
.card-hd{padding:var(--sp4) var(--sp5); border-bottom:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp3); flex-wrap:wrap}
.card-hd h3{font-family:var(--display); font-size:.9375rem; font-weight:600; letter-spacing:.02em;
  display:flex; align-items:center; gap:var(--sp2)}
.card-hd .note{font-size:.78125rem; color:var(--fg-3)}
.card-pad{padding:var(--sp5)}
.card-pad.bt{border-top:1px solid var(--line)}
.cols{display:grid; grid-template-columns:repeat(auto-fit,minmax(330px,1fr)); gap:var(--sp5); align-items:stretch}
.cols > .card{display:flex; flex-direction:column}
.cols > .card > .form{flex:1}
.cols > .card > .form > .btn{margin-top:auto}

/* a full-width card that reads left to right: the numbers, then the action */
.split-body{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.split-body > .rows{border-right:1px solid var(--line)}
.pane{display:flex; flex-direction:column}
.pane .tabs{margin:var(--sp4) var(--sp5) 0}
.pane .form{max-width:none; flex:1}
.pane .form > .btn{margin-top:auto}
.pane .list{max-height:260px}

/* ---------- rows ---------- */
.rows{display:flex; flex-direction:column}
.row{display:flex; align-items:center; justify-content:space-between; gap:var(--sp4);
  padding:13px var(--sp5); border-bottom:1px solid var(--line)}
.row:last-child{border-bottom:0}
.row-k{font-size:.84375rem; color:var(--fg-2)}
.row-k small{display:block; font-size:.71875rem; color:var(--fg-3); margin-top:1px}
.row-v{font-family:var(--mono); font-size:.90625rem; font-weight:600; font-variant-numeric:tabular-nums;
  letter-spacing:-.02em; text-align:right; white-space:nowrap}
.row-v small{display:block; font-family:var(--sans); font-size:.71875rem; font-weight:400;
  color:var(--fg-3); margin-top:2px; letter-spacing:0}
.row-v.big{font-size:1.3125rem}
.row-v.safe{color:var(--safe)} .row-v.warn{color:var(--warn)} .row-v.danger{color:var(--danger)}
.row-v.na{color:var(--danger); font-family:var(--sans); font-size:.78125rem; font-weight:500}

/* whose number is it: figures that belong to the connected wallet are set in the
   --you tint and their rows carry the accent rule; protocol-wide figures stay
   white and their groups are labelled ("The pool", "All stakers"). */
.grp{display:flex; flex-direction:column}
.grp + .grp{border-top:1px solid var(--line)}
.row-grp{font-family:var(--display); font-size:.625rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--fg-3); padding:10px var(--sp5) 2px; display:flex; align-items:center; gap:7px}
.row-grp::before{content:''; width:6px; height:6px; border-radius:50%; background:var(--fg-3); flex:none}
.grp.you .row, .rows.you .row{box-shadow:inset 2px 0 0 var(--accent);
  background:linear-gradient(90deg, var(--accent-dim), transparent 42%)}
:where(.grp.you, .rows.you) .row-v, .f-top .bal b{color:var(--you)}

/* the nuance: a short, honest note where the oracle and the market disagree */
.nuance{border-left:2px solid var(--accent); padding-left:12px; color:var(--fg-2)}
.card-pad > .nuance{margin-top:var(--sp4)}
.card > .nuance{margin:var(--sp4) var(--sp5) var(--sp5)}

/* ---------- health ---------- */
.bar{height:7px; border-radius:4px; background:rgba(0,0,0,.5); overflow:hidden; position:relative;
  border:1px solid var(--line)}
.bar > i{position:absolute; inset:0 auto 0 0; width:var(--w,0%); border-radius:4px; display:block;
  background:linear-gradient(90deg,var(--a1),var(--accent-2)); box-shadow:0 0 14px var(--accent-dim);
  transition:width .7s var(--ease), background .3s}
.bar > i.warn{background:linear-gradient(90deg,#a87a06,var(--warn))}
.bar > i.danger{background:linear-gradient(90deg,#8e0f14,var(--danger))}
.bar-legend{display:flex; justify-content:space-between; font-family:var(--mono); font-size:.65625rem;
  color:var(--fg-3); margin-top:8px}

/* ---------- tabs ---------- */
.tabs{display:flex; gap:2px; padding:3px; background:rgba(0,0,0,.42); border:1px solid var(--line);
  border-radius:10px; align-self:flex-start; overflow-x:auto; max-width:100%}
.tab{appearance:none; background:none; border:0; cursor:pointer; padding:6px 14px; border-radius:7px;
  font-family:var(--sans); font-size:.8125rem; font-weight:550; color:var(--fg-3); white-space:nowrap;
  transition:color .18s, background .18s}
.tab:hover{color:var(--fg-2)}
.tab[aria-selected="true"]{background:var(--accent); color:var(--accent-ink); font-weight:600;
  box-shadow:0 0 18px -4px var(--accent-dim)}

/* ---------- forms ---------- */
.form{display:flex; flex-direction:column; gap:var(--sp3); padding:var(--sp5); max-width:560px}
.f-top{display:flex; justify-content:space-between; align-items:center; gap:var(--sp3);
  font-size:.75rem; color:var(--fg-3)}
.f-top .bal{font-family:var(--mono); letter-spacing:-.01em; margin-right:auto}   /* the fill buttons pack right, however many */
.f-top button{appearance:none; background:none; border:1px solid var(--line-2); color:var(--fg-2);
  font-family:var(--display); font-size:.625rem; font-weight:600; letter-spacing:.1em; padding:3px 9px;
  border-radius:5px; cursor:pointer; transition:border-color .18s, color .18s}
.f-top button:hover:not(:disabled){border-color:var(--accent); color:var(--accent-2)}
.f-top button:disabled{opacity:.3; cursor:not-allowed}
.f-in{display:flex; align-items:center; gap:var(--sp3); background:rgba(0,0,0,.44);
  border:1px solid var(--line-2); border-radius:var(--r-sm); padding:0 var(--sp4);
  transition:border-color .18s, box-shadow .18s}
.f-in:focus-within{border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-dim)}
.f-in.bad{border-color:color-mix(in srgb, var(--danger) 60%, transparent)}
.f-in input{flex:1; min-width:0; background:none; border:0; padding:14px 0; color:var(--fg);
  font-family:var(--mono); font-size:1.0625rem; font-weight:500; font-variant-numeric:tabular-nums;
  letter-spacing:-.02em}
.f-in input::placeholder{color:var(--fg-3); font-weight:400}
.f-in input:focus{outline:none}
.f-note{font-size:.78125rem; color:var(--fg-3); line-height:1.55}
.f-note.warn{color:#EFCB7C}

.preview{display:flex; flex-direction:column; gap:6px; padding:var(--sp3) var(--sp4);
  background:rgba(0,0,0,.34); border:1px solid var(--line); border-radius:var(--r-sm); font-size:.78125rem}
.preview .pv{display:flex; justify-content:space-between; gap:var(--sp3); color:var(--fg-3)}
.preview .pv b{font-family:var(--mono); font-weight:600; color:var(--fg); letter-spacing:-.01em; text-align:right}
.preview .pv b small{display:block; font-family:var(--sans); font-weight:400; font-size:.6875rem; color:var(--fg-3); letter-spacing:0}
.preview .arrow{color:var(--fg-3); margin:0 6px}
.preview.danger{border-color:rgba(232,24,32,.4)}
.preview.warn{border-color:rgba(240,176,8,.4)}
/* consequence lines carry a class: the CSP allows no inline styles */
.preview .pv.warn{color:var(--warn)} .preview .pv.danger{color:var(--danger)}
/* an edge in the redeemer's favour is the one figure worth a colour; a loss stays plain */
.preview .pv b.safe{color:var(--safe)}
.preview .pv > span:first-child:not(:only-child){flex:0 0 auto}   /* a label keeps its width; a sentence on its own still wraps */ .preview .pv > b{flex:1 1 auto; min-width:0}

.btn{appearance:none; font-family:var(--sans); font-size:.90625rem; font-weight:600; cursor:pointer;
  padding:12px 18px; border-radius:var(--r-sm); border:1px solid var(--line-2);
  background:var(--s2); color:var(--fg); white-space:nowrap; letter-spacing:-.01em;
  transition:background .18s, border-color .18s, opacity .18s, transform .18s, box-shadow .18s}
.btn:hover:not(:disabled){border-color:var(--fg-3); transform:translateY(-1px)}
.btn:active:not(:disabled){transform:none}
.btn:disabled{opacity:.32; cursor:not-allowed}
.btn.primary{background:linear-gradient(160deg,var(--accent),var(--a1)); border-color:transparent;
  color:var(--accent-ink); box-shadow:0 8px 26px -12px var(--accent)}
.btn.primary:hover:not(:disabled){filter:brightness(1.08); box-shadow:0 12px 34px -12px var(--accent)}
.btn.danger{background:transparent; border-color:rgba(232,24,32,.45); color:var(--danger)}
.btn.danger:hover:not(:disabled){background:rgba(232,24,32,.12); border-color:var(--danger)}
.btn.attn{background:var(--warn); border-color:transparent; color:var(--accent-ink)}
.btn.attn:hover:not(:disabled){filter:brightness(1.08)}
.btn.full{width:100%}
/* before a wallet is attached: the buttons keep their words, dimmed; a press asks for the wallet */
.btn.off{opacity:.42; filter:saturate(.3)}
.btn.off:hover:not(:disabled),.btn.off:focus-visible{opacity:.65; transform:none}   /* keyboard focus lifts a dimmed button as hover does, so its ring reads */
a.btn{text-decoration:none; display:inline-flex; align-items:center; justify-content:center}
.btn.pick{display:flex; align-items:center; gap:var(--sp3); text-align:left}
.btn.pick img{width:24px; height:24px; border-radius:6px; flex:none}
.pick-list{display:flex; flex-direction:column; gap:var(--sp2); margin-top:var(--sp3)}
.btn.sm{padding:8px 13px; font-size:.78125rem}

.steps{display:flex; align-items:center; gap:var(--sp2); font-family:var(--mono); font-size:.6875rem;
  color:var(--fg-3); flex-wrap:wrap}
.steps > span{display:inline-flex; align-items:center; gap:5px}
.steps .b{width:16px; height:16px; border-radius:50%; border:1px solid var(--line-2);
  display:grid; place-items:center; font-size:.5625rem; flex:none}
.steps .on .b{background:var(--accent); border-color:var(--accent); color:var(--accent-ink)}
.steps .sep{width:20px; height:1px; background:var(--line); flex:none}

/* ---------- lists ---------- */
.list{display:flex; flex-direction:column; max-height:300px; overflow-y:auto}
/* every loan, riskiest first: a grid table with a sticky head; eligible rows carry the danger rule */
.lt-row{display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,.8fr) minmax(0,1fr) minmax(0,1fr) auto;
  gap:var(--sp3); align-items:center; padding:9px var(--sp5); border-bottom:1px solid var(--line); font-size:.8125rem}
.lt-row:last-child{border-bottom:0}
/* the liquidation-price column shows in the full table only: the pane's rows are already liquidatable */
.lt-row > :nth-child(3){display:none}
.list.full .lt-row{grid-template-columns:minmax(0,1.25fr) minmax(0,.8fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) 150px}   /* a fixed last column: every row is its own grid, so auto would size it per row */
.list.full .lt-row > :nth-child(3){display:block}
.lt-head{position:sticky; top:0; z-index:1; background:color-mix(in srgb, var(--bg) 92%, #fff);
  font-family:var(--display); font-size:.625rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--fg-3); padding-top:8px; padding-bottom:8px}
.lt-head span:not(:first-child){text-align:right}
.lt-row .row-v{font-size:.78125rem; font-weight:500}
.lt-row .addr{font-family:var(--mono); font-size:.75rem; color:var(--fg-2); text-decoration:none;
  display:flex; align-items:center; gap:6px; min-width:0; white-space:nowrap}
.lt-row .addr:hover{color:var(--accent-2)}
.lt-row.hot{background:linear-gradient(90deg, rgba(232,24,32,.10), transparent 60%); box-shadow:inset 2px 0 0 var(--danger)}
.lt-act{display:flex; justify-content:flex-end; min-width:0}
.lt-act small{font-size:.65625rem; color:var(--fg-3); white-space:nowrap}
.lt-foot{padding:9px var(--sp5); font-size:.71875rem; color:var(--fg-3)}
.you-tag{font-style:normal; font-family:var(--display); font-size:.5625rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--accent-2); border:1px solid var(--accent); border-radius:4px; padding:1px 5px}
.pane .list{max-height:380px}
/* the sentence shown instead of the list, aligned with the tabs above it */
.pane .list + .f-note{margin:var(--sp3) var(--sp5) 0}
/* every loan, on demand: one line that says what the list holds, then the table at full width */
.loans{display:flex; align-items:baseline; gap:var(--sp2) var(--sp4); flex-wrap:wrap; padding:var(--sp3) var(--sp5);
  border-top:1px solid var(--line); font-size:.78125rem; color:var(--fg-3)}
.loans .linkbtn{font-family:var(--display); font-size:.6875rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  text-decoration:none; color:var(--accent-2); white-space:nowrap}
.loans .linkbtn:hover{color:var(--fg)}
.loans .addr{font-family:var(--mono); color:var(--fg-2); text-decoration:none}
.list.full{max-height:none; overflow:visible; border-top:1px solid var(--line)}
.list.full .lt-head{top:78px}   /* the header's one-row height */
/* what an eligible loan pays the caller, on the row itself */
.lt-reward{grid-column:1 / -1; font-size:.71875rem; color:var(--fg-3); margin-top:-3px}
.lt-reward b{color:var(--fg-2); font-weight:500; font-family:var(--mono)}
.card.farm .rows{border-top:0}
.acct-addr{display:block; font-family:var(--mono); font-size:.78125rem; color:var(--fg-2); word-break:break-all;
  padding:var(--sp3) var(--sp4); background:rgba(0,0,0,.35); border:1px solid var(--line); border-radius:var(--r-sm)}
/* the balances and whatever the wallet line had no room for */
.acct-bal{margin-top:var(--sp3)} .acct-bal:empty{display:none}
.acct-bal small{display:block; font-size:.8125rem; color:var(--fg-2); margin-top:4px; line-height:1.5}
.li{display:flex; align-items:center; justify-content:space-between; gap:var(--sp3);
  padding:11px var(--sp5); border-bottom:1px solid var(--line); font-size:.8125rem}
.li:last-child{border-bottom:0}
.li .addr{font-family:var(--mono); font-size:.75rem; color:var(--fg-2)}
.empty{padding:var(--sp6) var(--sp5); text-align:center; color:var(--fg-3); font-size:.84375rem}

/* ---------- dialogs: wallet picker, and the checkpoint before every transaction ---------- */
.dlg{margin:auto; background:color-mix(in srgb, var(--bg) 90%, #fff); color:var(--fg); border:1px solid var(--line-2);
  border-radius:var(--r); padding:var(--sp6); max-width:620px; width:calc(100vw - 32px);
  box-shadow:0 40px 100px -30px #000, inset 0 1px 0 rgba(255,255,255,.1)}
.dlg::backdrop{background:rgba(0,0,0,.66); backdrop-filter:blur(8px)}
.dlg-hd{margin-bottom:var(--sp4)}
.dlg h3{font-family:var(--display); font-size:1.3125rem; font-weight:700; margin-top:6px; letter-spacing:.01em}
.dlg p{font-size:.875rem; color:var(--fg-2); line-height:1.6}
.dlg p b{color:var(--fg); font-family:var(--mono); font-weight:600}
.dlg-actions{display:flex; gap:var(--sp3); justify-content:flex-end; margin-top:var(--sp5); flex-wrap:wrap}
.dlg-sm{max-width:470px}
.cf-lines{display:flex; flex-direction:column; gap:8px; margin:var(--sp4) 0; padding:var(--sp3) var(--sp4);
  background:rgba(0,0,0,.35); border:1px solid var(--line); border-radius:var(--r-sm); font-size:.84375rem}
.cf-lines:empty{display:none}
.cf-lines .pv{display:flex; justify-content:space-between; gap:var(--sp3); color:var(--fg-2)}
.cf-lines .pv b{font-family:var(--mono); font-weight:600; color:var(--fg); text-align:right; font-variant-numeric:tabular-nums}

/* ---------- footer: brand and the known risk, the tokens, and the contracts behind a
   disclosure (counts first, the full addresses with copy and explorer links on demand),
   then how fresh the data is ---------- */
footer{margin-top:var(--sp7); padding:var(--sp6) 0 var(--sp7); border-top:1px solid var(--line);
  display:flex; flex-direction:column; gap:var(--sp5); font-size:.78125rem; color:var(--fg-3)}
footer b{color:var(--fg-2); font-weight:600}
.ft{display:grid; grid-template-columns:1fr 1.15fr 1.15fr; gap:var(--sp6)}
.ft-col{display:flex; flex-direction:column; gap:var(--sp3); min-width:0}
.ft-col > .lbl{padding-bottom:var(--sp2); border-bottom:1px solid var(--line)}
.ft-col > .f-note{max-width:40ch}
.ft-brand .brand img{width:28px; height:28px}
.ft-brand > .lbl{margin-top:var(--sp3)}
.ft-list{display:flex; flex-direction:column; gap:var(--sp3)}
.ft-item{display:flex; flex-direction:column; gap:2px; min-width:0}
.ft-top{display:flex; align-items:baseline; gap:2px var(--sp3); flex-wrap:wrap}
.ft-top > a, .ft-top > span:first-child{color:var(--fg-2); font-weight:500; text-decoration:none}
.ft-top > a:hover{color:var(--accent-2); text-decoration:underline}
.ft-top > .linkbtn{font-size:.6875rem}
.ft-role{font-size:.6875rem; color:var(--fg-3)}
.ft-item code{font-family:var(--mono); font-size:.65625rem; color:var(--fg-3); letter-spacing:-.01em; word-break:break-all}
.ft-item .acts{display:flex; gap:var(--sp3); font-size:.71875rem; margin-top:2px; flex-wrap:wrap}
.ft-more{grid-template-columns:1fr 1fr; padding-top:var(--sp5); border-top:1px solid var(--line)}
.ft-toggle{font-family:var(--display); font-size:.6875rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  text-decoration:none; align-self:flex-start; margin-top:var(--sp1)}
.ft-toggle:hover{color:var(--fg)}
.diag{display:flex; gap:var(--sp2) var(--sp5); flex-wrap:wrap; font-family:var(--mono); font-size:.71875rem;
  padding:var(--sp3) var(--sp4); border:1px solid var(--line); border-radius:var(--r-sm);
  background:rgba(0,0,0,.3)}
.diag b{color:var(--fg-2); font-weight:500}
.dot{display:inline-block; width:5px; height:5px; border-radius:50%; background:var(--safe);
  margin-right:6px; box-shadow:0 0 8px var(--safe)}
.dot.stale{background:var(--warn); box-shadow:0 0 8px var(--warn)}
.dot.dead{background:var(--danger); box-shadow:0 0 8px var(--danger)}

/* a button that reads as a link: wallet actions that sign nothing */
.linkbtn{appearance:none; background:none; border:0; padding:0; font:inherit; color:var(--accent-2);
  cursor:pointer; text-decoration:underline; text-underline-offset:3px}
.linkbtn:hover{color:var(--fg)}
.f-top .bal .linkbtn{font-family:var(--sans); font-size:.71875rem; margin-left:4px}

/* ---------- toasts ---------- */
#toasts{position:fixed; right:18px; bottom:18px; z-index:60; display:flex; flex-direction:column-reverse;
  gap:9px; max-width:min(390px,calc(100vw - 36px))}
.toast{background:color-mix(in srgb, var(--bg) 88%, #fff); border:1px solid var(--line-2);
  border-left:3px solid var(--fg-3); border-radius:var(--r-sm); padding:12px 15px; font-size:.8125rem;
  color:var(--fg-2); line-height:1.5; box-shadow:0 16px 44px -16px #000;
  animation:rise .26s var(--ease)}
.toast.good{border-left-color:var(--safe)} .toast.bad{border-left-color:var(--danger)}
.toast.info{border-left-color:var(--accent)}
.toast.out{opacity:0; transform:translateX(12px); transition:opacity .3s, transform .3s}
.toast-act{display:block; margin-top:8px; appearance:none; background:var(--accent-dim); border:1px solid var(--accent);
  color:var(--accent-2); font:600 .75rem var(--sans); padding:6px 11px; border-radius:7px; cursor:pointer}
.toast-act:hover{background:var(--accent); color:var(--accent-ink)}

.boot{padding:120px var(--sp5); text-align:center; color:var(--fg-3); font-family:var(--mono); font-size:.8125rem}

@media (max-width:1200px){
  .wallet-bal .src{display:none}   /* "at spot" goes first when the row is tight */
}
@media (max-width:1000px){
  .jump{display:none}   /* below this the row holds brand + phrase + button; the phrase keeps to two lines */
}
@media (max-width:860px){
  section::after{display:none}   /* the lattice and grain carry the texture; the ghost would overflow a narrow screen */
  .split-body{grid-template-columns:minmax(0,1fr)}
  .split-body > .rows{border-right:0; border-bottom:1px solid var(--line)}
  .ft{grid-template-columns:minmax(0,1fr); gap:var(--sp5)}
}
@media (max-width:680px){
  .wrap{padding-inline:var(--sp4)}   /* inline only: .hd keeps its vertical padding */
  .hero-main{padding:var(--sp5) var(--sp3) var(--sp4); gap:var(--sp3); flex-wrap:nowrap}
  .wire{width:36px}
  @keyframes travel{0%{left:-34px; opacity:0}12%{opacity:1}88%{opacity:1}100%{left:36px; opacity:0}}
  .tok-xl img,.tok-xl .chip{width:48px; height:48px}
  .tok-xl .chip{font-size:.75rem}
  .leg{gap:var(--sp2)}
  .leg-name{font-size:1rem}
  .leg-role{font-size:.5625rem; letter-spacing:.12em}
  .hero-by{padding:0 0 var(--sp4)}
  .hero-stat{flex-basis:50%; border-right:0; border-bottom:1px solid var(--line); padding:var(--sp3) var(--sp4)}
  .hero-stat:nth-child(n+5){display:none}   /* four figures on a phone: the fee and the riskiest loan sit on the Redeem card */
  .hero-stat .v{font-size:1.1875rem}
  .list.full .lt-head{top:77px}
  .loans{padding:var(--sp3) var(--sp4)}
  .pane .list + .f-note{margin:var(--sp3) var(--sp4) 0}
  .row,.li{padding:12px var(--sp4)}
  .row-grp{padding:9px var(--sp4) 2px}
  .form,.card-pad{padding:var(--sp4)}
  .card-hd{padding:var(--sp3) var(--sp4)}
  .pane .tabs{margin:var(--sp3) var(--sp4) 0}
  .card > .nuance{margin:var(--sp3) var(--sp4) var(--sp4)}
  .dlg{padding:var(--sp5)}
  .wallet-note,.wallet-bal{display:none}   /* the phone row holds the brand and the button; the words are in the card and the dialog */
  .sec-hd .note.wallet{display:inline}
  .lt-row,.list.full .lt-row{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr) minmax(0,1fr) auto; padding:9px var(--sp4)}
  .list.full .lt-row > :nth-child(3),.lt-row > :nth-child(5){display:none}   /* a phone keeps loan, ratio, debt */
  .lt-act small{display:none}   /* the redemption-start note has its own row above the table on a phone */
  .lt-foot{padding:9px var(--sp4)}
  body::before{background-size:auto 60vh}
}
/* narrow in the user's font size: a phone at a 125% browser setting (390px is 19.5em there, 24.4em at
   the default), or any screen under 352px. The header button keeps its width and the brand yields; a
   position figure too wide for its row drops under its label. At the default size nothing here applies. */
@media (max-width:22em){
  .brand{flex:0 1 auto} .brand > div{min-width:0}
  .brand-sub{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .wallet{flex:0 0 auto}
  .row{flex-wrap:wrap} .row-v{margin-left:auto; max-width:100%}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important}
  .reveal{opacity:1}
}