/* ==================================================================
   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. Aurora field behind the hero, bloom under each token mark,
   a pulse travelling the arrow between collateral and stablecoin.

   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:#040805;
  --a1:#00C46B;            /* PulseX green */
  --a2:#E81820;            /* PulseX red   */
  --chrome:#DCE6E0;
  --glow-1:rgba(0,196,107,.20);
  --glow-2:rgba(232,24,32,.13);

  --s1:rgba(255,255,255,.034);
  --s2:rgba(255,255,255,.062);
  --line:rgba(255,255,255,.09);
  --line-2:rgba(255,255,255,.15);

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

  --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:#070405;
  --a1:#FF3D8B; --a2:#F0B008; --chrome:#FFD9A8;
  --glow-1:rgba(255,61,139,.20); --glow-2:rgba(240,176,8,.16);
  --fg:#F8F1EC; --fg-2:rgba(248,241,236,.68); --fg-3:rgba(248,241,236,.42);
  --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%}
body{background:var(--bg); color:var(--fg); font-family:var(--sans); font-size:15px;
  line-height:1.5; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden; min-height:100vh; position:relative}

/* atmosphere: two brand-coloured light sources plus a fine technical grid */
body::before{content:''; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(900px 620px at 8% -10%,  var(--glow-1), transparent 60%),
    radial-gradient(760px 520px at 96% 4%,   var(--glow-2), transparent 58%),
    radial-gradient(1100px 640px at 50% 112%, rgba(255,255,255,.035), transparent 64%)}
body::after{content:''; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.55;
  background-image:linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
                   linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(900px 620px at 30% 0%, #000, transparent 72%);
  mask-image:radial-gradient(900px 620px at 30% 0%, #000, transparent 72%)}

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:11px; 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:8px; font-weight:600; color:var(--fg-2)}
.tok b{font-weight:550; font-size:14px}
.tok-sm img,.tok-sm .chip{width:18px; height:18px}
.tok-sm .chip{font-size:7px}
.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:20px; border-width:2px}

/* ---------- header: brand + wallet, nothing else ---------- */
header{position:sticky; top:0; z-index:30; border-bottom:1px solid var(--line);
  background:color-mix(in srgb, var(--bg) 82%, 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:var(--sp4) 0}
.brand{display:flex; align-items:center; gap:var(--sp3); min-width:0}
.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:17px; font-weight:700; letter-spacing:.01em}
.brand-sub{font-size:12px; color:var(--fg-3)}

/* ---------- hero ---------- */
.hero{position:relative; margin-top:var(--sp5); border:1px solid var(--line); 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,.08), 0 24px 60px -30px #000}
.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:.5; mix-blend-mode:screen;
  -webkit-mask-image:radial-gradient(120% 110% at 50% 42%, #000 0%, rgba(0,0,0,.5) 52%, transparent 82%);
  mask-image:radial-gradient(120% 110% at 50% 42%, #000 0%, rgba(0,0,0,.5) 52%, transparent 82%)}
.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:24px; font-weight:700; letter-spacing:.01em;
  text-shadow:0 2px 14px rgba(0,0,0,.9)}
.leg-role{font-family:var(--display); font-size:10.5px; 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,.36)}
.hero-stat{flex:1 1 190px; padding:var(--sp4) var(--sp5); border-right:1px solid var(--line)}
.hero-stat:last-child{border-right:0}
.hero-stat .k{font-family:var(--display); font-size:10px; font-weight:600; letter-spacing:.15em;
  text-transform:uppercase; color:var(--fg-3)}
.hero-stat .v{font-family:var(--mono); font-size:21px; font-weight:600; letter-spacing:-.035em;
  font-variant-numeric:tabular-nums; margin-top:4px}
.hero-stat .s{font-size:11.5px; color:var(--fg-3); margin-top:2px}

/* ---------- alerts ---------- */
.alert{border:1px solid; border-radius:var(--r-sm); padding:var(--sp3) var(--sp4); font-size:13.5px;
  line-height:1.55; display:flex; gap:var(--sp3); align-items:flex-start; margin-bottom:var(--sp3)}
.alert b{font-weight:650}
.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:16px; line-height:1; padding:0 2px}
.alert .x:hover{opacity:1}

/* ---------- sections ---------- */
section{margin-top:var(--sp7); display:flex; flex-direction:column; gap:var(--sp5)}
.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:18px; font-weight:700; letter-spacing:.02em;
  display:flex; align-items:center; gap:var(--sp3)}
.sec-hd h2::before{content:''; width:3px; height:17px; border-radius:2px; flex:none;
  background:linear-gradient(var(--a1), var(--a2))}
.sec-hd .note{font-size:13px; color:var(--fg-3)}

/* ---------- card ---------- */
.card{background:linear-gradient(160deg, var(--s1), rgba(255,255,255,.012));
  border:1px solid var(--line); border-radius:var(--r); position:relative;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07), 0 18px 40px -28px #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:15px; font-weight:600; letter-spacing:.02em;
  display:flex; align-items:center; gap:var(--sp2)}
.card-pad{padding:var(--sp5)}
.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}

/* ---------- 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:13.5px; color:var(--fg-2)}
.row-k small{display:block; font-size:11.5px; color:var(--fg-3); margin-top:1px}
.row-v{font-family:var(--mono); font-size:14.5px; 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:11.5px; font-weight:400;
  color:var(--fg-3); margin-top:2px; letter-spacing:0}
.row-v.big{font-size:21px}
.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:12.5px; font-weight:500}

/* ---------- 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:10.5px;
  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:13px; 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:12px; color:var(--fg-3)}
.f-top .bal{font-family:var(--mono); letter-spacing:-.01em}
.f-top button{appearance:none; background:none; border:1px solid var(--line-2); color:var(--fg-2);
  font-family:var(--display); font-size:10px; 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 input{flex:1; min-width:0; background:none; border:0; padding:14px 0; color:var(--fg);
  font-family:var(--mono); font-size:17px; 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:12.5px; color:var(--fg-3); line-height:1.55}

.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:12.5px}
.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}
.preview .arrow-i{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)}

.btn{appearance:none; font-family:var(--sans); font-size:14.5px; 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.full{width:100%}
.btn.sm{padding:8px 13px; font-size:12.5px}

.steps{display:flex; align-items:center; gap:var(--sp2); font-family:var(--mono); font-size:11px;
  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:9px; 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}
.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:13px}
.li:last-child{border-bottom:0}
.li .addr{font-family:var(--mono); font-size:12px; color:var(--fg-2)}
.empty{padding:var(--sp6) var(--sp5); text-align:center; color:var(--fg-3); font-size:13.5px}

/* ---------- footer: the diagnostics live here ---------- */
footer{margin-top:var(--sp7); padding:var(--sp5) 0 var(--sp7); border-top:1px solid var(--line);
  display:flex; flex-direction:column; gap:var(--sp4); font-size:12.5px; color:var(--fg-3)}
footer b{color:var(--fg-2); font-weight:600}
.diag{display:flex; gap:var(--sp5); flex-wrap:wrap; font-family:var(--mono); font-size:11.5px;
  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)}
.addrs{display:flex; flex-wrap:wrap; gap:7px var(--sp4); font-family:var(--mono); font-size:11px}
.addrs a{color:var(--fg-3)} .addrs a:hover{color:var(--accent-2)}

/* ---------- 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:13px;
  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}

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

@media (max-width:680px){
  .wrap{padding:0 var(--sp4)}
  .hero-main{padding:var(--sp6) var(--sp4) var(--sp5); gap:var(--sp4)}
  .wire{width:2px; height:56px; background:linear-gradient(180deg,transparent,var(--line-2),transparent)}
  .wire::after{display:none} .wire-cap{display:none}
  .tok-xl img,.tok-xl .chip{width:64px; height:64px}
  .leg-name{font-size:20px}
  .hero-stat{flex-basis:50%; border-right:0; border-bottom:1px solid var(--line); padding:var(--sp4)}
  .row,.li{padding:12px var(--sp4)}
  .form,.card-pad{padding:var(--sp4)}
  .card-hd{padding:var(--sp3) var(--sp4)}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important}
  .reveal{opacity:1}
}