:root{
  --bg:        #07070a;
  --bg-2:      #0d0d12;
  --surface:   #13131a;
  --surface-2: #1c1c24;
  --surface-3: #262630;
  --line:      rgba(255,255,255,.06);
  --line-2:    rgba(255,255,255,.12);
  --text:      #f4f4f6;
  --text-dim:  #c4c4cc;
  --muted:     #6b6b78;
  --cocoa:     #6b3f1e;
  --cocoa-2:   #4a2a13;
  --cocoa-3:   #2a180b;
  --cream:     #f4e4c1;
  --carml:     #d4a574;
  --acid:      #c9f24a;
  --acid-2:    #a8d128;
  --green:     #22c55e;
  --red:       #ef4444;
  --amber:     #f59e0b;
  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

*{ -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; box-sizing:border-box; -webkit-tap-highlight-color: transparent; }
html,body{ background:var(--bg); color:var(--text); font-family:'Inter','system-ui',sans-serif; font-feature-settings:'cv11','ss01','ss03'; overflow-x:hidden; }
body{ padding-top: var(--safe-top); padding-bottom: var(--safe-bottom); }
::selection{ background:var(--acid); color:#000; }

body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background-image: linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse at 50% 0%, #000 30%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 0%, #000 30%, transparent 70%);
}

.grain{ position:fixed; inset:0; pointer-events:none; z-index:9998; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.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 0.2 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/></svg>"); opacity:.04; mix-blend-mode:overlay; }

/* Typography */
.display{ font-family:'Space Grotesk','Inter',sans-serif; font-weight:500; letter-spacing:-.035em; line-height:.95; }
.display-xl{ font-family:'Space Grotesk','Inter',sans-serif; font-weight:500; letter-spacing:-.045em; line-height:.9; }
.mono{ font-family:'JetBrains Mono',monospace; letter-spacing:-.01em; font-feature-settings:'zero','ss02'; }
.eyebrow{ font-family:'JetBrains Mono',monospace; font-size:11px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.num{ font-family:'Space Grotesk','Inter',sans-serif; font-variant-numeric: tabular-nums; font-weight:500; letter-spacing:-.02em; }
.num-mono{ font-family:'JetBrains Mono',monospace; font-variant-numeric: tabular-nums; letter-spacing:-.02em; }

/* Nav */
.nav-link{ position:relative; padding:.6rem 0; color:var(--text-dim); transition:color .2s ease; }
.nav-link:hover{ color:var(--text); }
.nav-link.active{ color:var(--acid); }
.nav-link::after{ content:""; position:absolute; left:0; right:100%; bottom:-4px; height:1px; background:var(--acid); transition:right .35s cubic-bezier(.2,.7,.2,1); }
.nav-link.active::after{ right:0; }

/* Buttons — MINIMUM 44px tap target on mobile */
.btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  padding:.8rem 1.2rem; min-height:44px; border-radius:10px;
  font-family:'JetBrains Mono',monospace; font-size:12px; font-weight:500; letter-spacing:.04em;
  transition: all .15s ease; cursor:pointer; border:1px solid transparent; white-space:nowrap;
  user-select:none; touch-action:manipulation;
}
.btn:active{ transform:scale(.97); }
.btn-primary{ background:var(--acid); color:#07070a; font-weight:600; }
.btn-primary:hover{ background:var(--acid-2); box-shadow: 0 10px 30px -8px rgba(201,242,74,.4); }
.btn-ghost{ background:transparent; color:var(--text); border-color:var(--line-2); }
.btn-ghost:hover{ background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.25); }
.btn-dark{ background:var(--surface-2); color:var(--text); border-color:var(--line); }
.btn-dark:hover{ background:var(--surface-3); border-color:var(--line-2); }
.btn-lg{ padding:1rem 1.5rem; min-height:52px; font-size:13px; border-radius:12px; }

/* Cards */
.card{ background:var(--surface); border:1px solid var(--line); border-radius:14px; transition:border-color .25s ease, transform .25s ease; }
.card-hover:hover{ border-color:var(--line-2); transform:translateY(-2px); }
.card-inner{ background:var(--surface-2); border:1px solid var(--line); border-radius:10px; }

.corner{ position:absolute; width:10px; height:10px; border-color:var(--muted); border-style:solid; border-width:0; }
.corner.tl{ top:-1px; left:-1px; border-top-width:1px; border-left-width:1px; }
.corner.tr{ top:-1px; right:-1px; border-top-width:1px; border-right-width:1px; }
.corner.bl{ bottom:-1px; left:-1px; border-bottom-width:1px; border-left-width:1px; }
.corner.br{ bottom:-1px; right:-1px; border-bottom-width:1px; border-right-width:1px; }

/* Tags */
.tag{ display:inline-flex; align-items:center; gap:.4rem; padding:.25rem .6rem; border-radius:6px; font-family:'JetBrains Mono',monospace; font-size:10px; font-weight:500; letter-spacing:.05em; background:rgba(255,255,255,.04); color:var(--text-dim); border:1px solid var(--line); }
.tag-live{ background:rgba(201,242,74,.08); color:var(--acid); border-color:rgba(201,242,74,.25); }
.tag-soon{ background:rgba(245,158,11,.08); color:var(--amber); border-color:rgba(245,158,11,.25); }
.tag-ended{ background:rgba(239,68,68,.06); color:#fca5a5; border-color:rgba(239,68,68,.2); }

.pulse{ width:6px; height:6px; border-radius:50%; background:var(--acid); animation:pulseA 1.4s ease-in-out infinite; }
@keyframes pulseA{ 0%,100%{opacity:1; transform:scale(1)} 50%{opacity:.4; transform:scale(1.6)} }

.progress{ height:4px; background:rgba(255,255,255,.06); border-radius:999px; overflow:hidden; position:relative; }
.progress > span{ position:absolute; left:0; top:0; bottom:0; border-radius:999px; background:linear-gradient(90deg, var(--carml), var(--acid)); box-shadow: 0 0 8px rgba(201,242,74,.4); }

/* Hero canvas */
#heroCanvas{ position:absolute; inset:0; width:100%; height:100%; z-index:0; }

/* Marquee */
.marquee{ display:flex; overflow:hidden; gap:3rem; }
.marquee-track{ display:flex; gap:3rem; flex-shrink:0; animation: marquee 55s linear infinite; will-change: transform; }
.marquee:hover .marquee-track{ animation-play-state:paused; }
@keyframes marquee{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } }

/* Reveal */
.rv{ opacity:0; transform:translateY(16px); transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); }
.rv.is-in{ opacity:1; transform:none; }

.hero-reveal > *{ opacity:0; transform:translateY(20px); animation: heroUp .9s cubic-bezier(.2,.7,.2,1) forwards; }
.hero-reveal > *:nth-child(1){ animation-delay:.08s } .hero-reveal > *:nth-child(2){ animation-delay:.18s } .hero-reveal > *:nth-child(3){ animation-delay:.30s } .hero-reveal > *:nth-child(4){ animation-delay:.44s } .hero-reveal > *:nth-child(5){ animation-delay:.60s }
@keyframes heroUp{ from{ opacity:0; transform:translateY(26px); filter:blur(6px) } to{ opacity:1; transform:none; filter:none } }

/* Bridge iframe frame — makes iframe look like part of site */
.bridge-frame{
  position:relative; border-radius:20px; overflow:hidden;
  background:linear-gradient(180deg, var(--surface) 0%, var(--bg-2) 100%);
  border:1px solid var(--line-2);
  box-shadow: 0 24px 80px -24px rgba(0,0,0,.6), 0 0 120px -40px rgba(212,165,116,.15);
}
.bridge-frame-inner{
  position:relative;
  aspect-ratio: 10/16;  /* mobile-tall by default */
  max-height: 780px;
  min-height: 620px;
  overflow:hidden;
  border-radius:inherit;
}
@media (min-width: 768px){
  .bridge-frame-inner{ aspect-ratio: 3/4; }
}
@media (min-width: 1280px){
  .bridge-frame-inner{ aspect-ratio: 1/1.2; }
}
.bridge-frame iframe{ width:100%; height:100%; border:0; display:block; background:transparent; }
.bridge-frame::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:2; border-radius:inherit;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.bridge-chip{
  position:absolute; top:16px; left:16px; z-index:3;
  padding:.35rem .65rem; border-radius:8px;
  background: rgba(7,7,10,.6); backdrop-filter: blur(10px);
  border:1px solid var(--line);
  font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.08em; color:var(--text-dim);
  display:flex; align-items:center; gap:.5rem;
}

/* Chain pill — bigger tap area */
.chain-pill{ height:48px; display:grid; place-items:center; background:var(--surface-2); border:1px solid var(--line); border-radius:10px; font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--text-dim); transition:all .2s ease; }
.chain-pill:hover{ border-color:var(--line-2); color:var(--text); background:var(--surface-3); }

/* Video frame — single video, no duplicate */
.video-frame{ position:relative; aspect-ratio:16/9; border-radius:14px; overflow:hidden; background:#000; border:1px solid var(--line); }
.video-frame video{ width:100%; height:100%; object-fit:cover; display:block; }
.video-poster{ position:absolute; inset:0; padding:24px; cursor:pointer; z-index:2; transition:opacity .3s ease; background:linear-gradient(135deg, var(--cocoa-3) 0%, var(--bg) 100%); display:flex; align-items:flex-end; }
.video-poster::before{ content:""; position:absolute; inset:0; background:radial-gradient(circle at 35% 45%, rgba(212,165,116,.35), transparent 55%), radial-gradient(circle at 75% 75%, rgba(201,242,74,.18), transparent 60%); }
.video-poster.hidden-poster{ opacity:0; pointer-events:none; }
.video-play{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:72px; height:72px; border-radius:50%; background:rgba(244,244,246,.95); color:#000; display:grid; place-items:center; transition:transform .2s ease, background .2s ease; z-index:3; pointer-events:none; }
@media (min-width: 768px){ .video-play{ width:88px; height:88px; } }
.video-poster:hover .video-play{ transform:translate(-50%,-50%) scale(1.08); background:var(--acid); }
.video-scanlines{ position:absolute; inset:0; pointer-events:none; background:repeating-linear-gradient(0deg, rgba(255,255,255,.018) 0px, rgba(255,255,255,.018) 1px, transparent 1px, transparent 3px); z-index:1; }

/* Scrollbar */
::-webkit-scrollbar{ width:8px; height:8px; }
::-webkit-scrollbar-track{ background:var(--bg); }
::-webkit-scrollbar-thumb{ background:var(--surface-3); border-radius:4px; }
::-webkit-scrollbar-thumb:hover{ background:var(--muted); }

/* Details */
details summary::-webkit-details-marker{ display:none; }
details[open] .detail-plus{ transform:rotate(45deg); color:var(--acid); }
.detail-plus{ transition:transform .25s ease, color .25s ease; }

/* Utility */
.line-clamp-2{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.glow{ box-shadow:0 0 40px -10px rgba(201,242,74,.5); }

a.link{ color:var(--text-dim); transition:color .2s; }
a.link:hover{ color:var(--acid); }

.ldot{ display:inline-block; width:5px; height:5px; border-radius:50%; background:var(--muted); margin:0 2px; animation: ld 1.4s ease-in-out infinite; }
.ldot:nth-child(2){ animation-delay:.15s; } .ldot:nth-child(3){ animation-delay:.3s; }
@keyframes ld{ 0%,100%{opacity:.3; transform:scale(.8)} 50%{opacity:1; transform:scale(1.3); background:var(--acid)} }

.gradient-text{ background:linear-gradient(135deg, #fff 0%, #c4c4cc 50%, #6b6b78 100%); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* Avatar illustration card */
.avatar-ill{ position:relative; width:100%; aspect-ratio:1; border-radius:14px; overflow:hidden; background:linear-gradient(135deg, var(--cocoa-3) 0%, var(--bg-2) 100%); display:grid; place-items:center; }
.avatar-ill svg{ width:85%; height:85%; }

/* Quest task — tap target */
.quest-item{
  display:flex; align-items:flex-start; gap:.75rem; padding:.85rem;
  border-radius:12px; transition:all .2s ease; cursor:pointer; user-select:none;
  border:1px solid transparent; background:transparent;
  min-height:64px;
}
.quest-item:hover{ background:rgba(255,255,255,.03); border-color:var(--line); }
.quest-item.done{ background:rgba(201,242,74,.04); border-color:rgba(201,242,74,.15); }
.quest-check{
  width:22px; height:22px; border-radius:6px; border:1.5px solid var(--line-2);
  flex:0 0 22px; margin-top:2px;
  display:grid; place-items:center;
  transition:all .2s ease;
}
.quest-item.done .quest-check{ background:var(--acid); border-color:var(--acid); }
.quest-check svg{ opacity:0; transition:opacity .2s ease; }
.quest-item.done .quest-check svg{ opacity:1; }

/* Timeline — continuous, no gap */
.tl{ position:relative; padding-left:28px; }
.tl::before{ content:""; position:absolute; left:8px; top:0; bottom:0; width:1px; background:linear-gradient(180deg, var(--muted) 0%, var(--carml) 40%, var(--acid) 85%, var(--acid) 100%); }
.tl-item{ position:relative; padding-bottom:32px; }
.tl-item:last-child{ padding-bottom:0; }
.tl-dot{ position:absolute; left:-24px; top:4px; width:12px; height:12px; border-radius:50%; background:var(--surface-2); border:2px solid var(--muted); }
.tl-item.done .tl-dot{ background:var(--muted); border-color:var(--muted); }
.tl-item.now .tl-dot{ background:var(--acid); border-color:var(--acid); box-shadow:0 0 0 4px rgba(201,242,74,.15), 0 0 20px rgba(201,242,74,.5); }
.tl-item.future .tl-dot{ border-color:var(--carml); }

/* Sticky mobile CTA bar */
.mobile-cta{
  position:fixed; bottom:0; left:0; right:0; z-index:500;
  padding:12px 12px calc(12px + var(--safe-bottom));
  background:linear-gradient(180deg, transparent, var(--bg) 30%);
  display:none;
}
@media (max-width: 768px){
  .mobile-cta.enabled{ display:block; }
  body.has-mobile-cta{ padding-bottom: 80px; }
}

/* Bottom sheet (reusable) */
.sheet-backdrop{ position:fixed; inset:0; background:rgba(0,0,0,.6); backdrop-filter:blur(8px); z-index:9500; opacity:0; transition:opacity .3s ease; }
.sheet-backdrop.open{ opacity:1; }
.sheet{ position:fixed; bottom:0; left:0; right:0; z-index:9501; background:var(--bg-2); border-top:1px solid var(--line-2); border-radius:20px 20px 0 0; max-height:86vh; transform:translateY(100%); transition:transform .35s cubic-bezier(.2,.7,.2,1); display:flex; flex-direction:column; padding-bottom: var(--safe-bottom); }
.sheet.open{ transform:translateY(0); }
.sheet-handle{ width:36px; height:4px; border-radius:2px; background:var(--muted-2); margin:10px auto 8px; }
.sheet-header{ padding:8px 20px 16px; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; }
.sheet-body{ overflow-y:auto; padding:12px 12px calc(20px + var(--safe-bottom)); }
.sheet-row{ display:flex; align-items:center; gap:12px; padding:12px; border-radius:10px; min-height:56px; transition:background .15s ease; }
.sheet-row:hover{ background:rgba(255,255,255,.04); }

@media (min-width: 768px){
  .sheet{ position:fixed; top:50%; left:50%; bottom:auto; right:auto; transform:translate(-50%,-40%); width:440px; max-width:90vw; border-radius:20px; border:1px solid var(--line-2); max-height:78vh; }
  .sheet.open{ transform:translate(-50%,-50%); }
}

@media (max-width: 768px){
  .display-xl{ letter-spacing:-.03em; }
  .hero-huge{ font-size: 3.8rem !important; line-height:.92 !important; }
}

/* ============ ADDITIONS v2.1 ============ */

/* Pre-launch gate state */
.disabled-section { opacity:.45; pointer-events:none; filter:grayscale(.4); position:relative; }
.disabled-section::after { content:""; position:absolute; inset:0; border-radius:14px; background:repeating-linear-gradient(45deg,transparent,transparent 12px,rgba(232,182,109,.04) 12px,rgba(232,182,109,.04) 24px); pointer-events:none; }

/* Legal page prose */
.prose-choco h2 { margin-top:2rem; }
.prose-choco a { color:var(--acid); text-decoration:underline; text-decoration-color:rgba(201,242,74,.3); text-underline-offset:3px; }
.prose-choco a:hover { text-decoration-color:var(--acid); }
.prose-choco ul li { line-height:1.7; }
.prose-choco section:not(:last-child) { padding-bottom:.5rem; border-bottom:1px solid rgba(255,255,255,.03); }

/* Page enter animation */
.page-enter { opacity:0; }
html { opacity:1; transition:opacity .4s ease; }

/* Toast pulse colors */
.pulse[style*="acid"] { background:var(--acid); }
.pulse[style*="amber"] { background:var(--amber); }
.pulse[style*="red"] { background:var(--red); }

/* ============ BRIDGE (Li.Fi embedded widget) responsive ============ */

/* Container hosts the Li.Fi widget mounted by lifi-widget.bundle.js */
.lifi-widget {
  min-height: 720px;
  background: #13131a;
  width: 100%;
  max-width: 100%;
  display: block;
  overflow: hidden;
}

/* Tablet */
@media (max-width: 1024px) {
  .lifi-widget { min-height: 680px; }
}

/* Mobile */
@media (max-width: 768px) {
  .lifi-widget { min-height: 600px; }
}

/* Small mobile */
@media (max-width: 420px) {
  .lifi-widget { min-height: 580px; }
}

/* ============================================================
   LI.FI widget — hard overrides (cannot be done from theme alone)
   ============================================================
   Three bugs the MUI theme couldn't fix:
   1) MuiSvgIcon has its own `color` baseline that does NOT inherit
      from MuiAppBar — wallet icon stays dark on dark.
   2) Li.Fi widget locks an internal min/fixed width (~416px) that
      overflows the .card wrapper on narrow phones.
   3) MUI Popover/Menu render via React Portal directly in <body>,
      OUTSIDE #lifi-widget-container, so widget-scoped selectors
      cannot reach them — buttons inside popovers stay dark.
   These selectors target MUI's emotion-generated classes by prefix
   ([class*="MuiAppBar"]) so they survive class-name hashing and
   bundle re-compiles.
*/

/* (1+3) Force acid color on text-buttons + icons EVERYWHERE on the page.
       MUI is only used inside the Li.Fi widget on this site, plus
       Portal-rendered popovers in <body> — global is safe.
       Excludes containedPrimary buttons (the big green CTAs need dark text). */
[class*="MuiButton-text"]:not([class*="containedPrimary"]),
[class*="MuiButton-text"]:not([class*="containedPrimary"]) [class*="MuiSvgIcon"],
[class*="MuiButton-text"]:not([class*="containedPrimary"]) [class*="MuiSvgIcon"] path,
[class*="MuiButton-outlined"]:not([class*="containedPrimary"]),
[class*="MuiButton-outlined"]:not([class*="containedPrimary"]) [class*="MuiSvgIcon"],
[class*="MuiButton-outlined"]:not([class*="containedPrimary"]) [class*="MuiSvgIcon"] path,
[class*="MuiIconButton-root"],
[class*="MuiIconButton-root"] [class*="MuiSvgIcon"],
[class*="MuiIconButton-root"] [class*="MuiSvgIcon"] path,
[class*="MuiAppBar"] [class*="MuiTypography"],
#lifi-widget-container [class*="MuiSvgIcon"]:not([class*="containedPrimary"] *),
#lifi-widget-container [class*="MuiSvgIcon"]:not([class*="containedPrimary"] *) path {
  color: var(--acid) !important;
  fill: var(--acid) !important;
}

/* Keep filled-primary buttons (the big green "Connect wallet" CTA) intact —
   they should stay dark text on acid background, not acid-on-acid */
[class*="MuiButton-containedPrimary"],
[class*="MuiButton-containedPrimary"] [class*="MuiSvgIcon"],
[class*="MuiButton-containedPrimary"] [class*="MuiSvgIcon"] path {
  color: #07070a !important;
  fill: #07070a !important;
}

/* (2) Force the entire widget tree to respect the host width — this kills
       the locked 416px min-width and lets the widget shrink on phones */
#lifi-widget-container,
#lifi-widget-container > * {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

/* (3) On phones tighten the inner padding so the widget content has room. */
@media (max-width: 480px) {
  #lifi-widget-container [class*="css-"][class*="-MuiContainer"],
  #lifi-widget-container [class*="MuiContainer-root"] {
    padding-left:  10px !important;
    padding-right: 10px !important;
  }

  /* (3a) Shrink input text + placeholders so "Select chain and token"
         fits on narrow viewports. JetBrains Mono is wide; at default
         14px the placeholder gets clipped to "Select chain and toke". */
  #lifi-widget-container input,
  #lifi-widget-container input::placeholder,
  #lifi-widget-container [class*="MuiInputBase-input"],
  #lifi-widget-container [class*="MuiInputBase-root"],
  #lifi-widget-container [class*="MuiTypography-body1"],
  #lifi-widget-container [class*="MuiTypography-body2"] {
    font-size: 12px !important;
    letter-spacing: 0 !important;
  }

  /* (3b) Section labels ("From", "To", "Send", "Exchange from") stay
         readable but slightly smaller too. */
  #lifi-widget-container [class*="MuiTypography-h6"],
  #lifi-widget-container [class*="MuiTypography-subtitle1"] {
    font-size: 14px !important;
  }

  /* (3c) Chain selector grid — let icons shrink and rows wrap.
         Default 5 round chips × ~80px + gaps don't fit in 430px. */
  #lifi-widget-container [class*="MuiGrid-container"],
  #lifi-widget-container [class*="MuiList-root"],
  #lifi-widget-container [class*="MuiBox-root"] {
    min-width: 0 !important;
  }
  #lifi-widget-container [class*="MuiAvatar-root"] {
    max-width: 100% !important;
  }

  /* (3c-2) FORCE 4 COLUMNS in the chain/token selector grid.
           From DevTools we know the parent is <div class="MuiBox-root ...">
           with display:grid and grid-template-columns: repeat(5, 1fr),
           and its direct children are <button class="MuiPaper-root MuiCard-root"
           aria-label="Ethereum"> etc. Use :has() to find that exact parent. */
  #lifi-widget-container [class*="MuiBox-root"]:has(> button[aria-label][class*="MuiCard-root"]) {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  /* Fallback for browsers without :has() — force the chain buttons to
     occupy 25% width regardless of grid template. Only chain tiles, not
     token-list rows, since chain buttons have aria-label set to chain name. */
  #lifi-widget-container button[class*="MuiCard-root"][aria-label] {
    width:     calc(25% - 6px) !important;
    flex-basis: calc(25% - 6px) !important;
  }

  /* (3c-3) FIX overlapping stacked icons in MuiAvatarGroup (the "All
           networks" cluster shown both in the grid's first cell and in
           the "Select chain" header). On mobile the group avatars lose
           their border + sizing and look like icons crashed into each
           other diagonally. Force consistent sizing + dark border so
           each circle is visually separated. */
  #lifi-widget-container [class*="MuiAvatarGroup-root"] {
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
  }
  #lifi-widget-container [class*="MuiAvatarGroup-root"] [class*="MuiAvatar-root"] {
    width:        22px !important;
    height:       22px !important;
    min-width:    22px !important;
    min-height:   22px !important;
    border:       2px solid #13131a !important;  /* matches modal bg → visual separator */
    margin-left:  -7px !important;                /* overlap by ~30%, MUI default */
    box-sizing:   border-box !important;
    font-size:    11px !important;                /* for "+N" overflow tile */
  }
  #lifi-widget-container [class*="MuiAvatarGroup-root"] [class*="MuiAvatar-root"]:first-child,
  #lifi-widget-container [class*="MuiAvatarGroup-root"] > [class*="MuiAvatar-root"]:nth-of-type(1) {
    margin-left: 0 !important;
  }

  /* The "All networks" tile in the grid often has a larger avatar group —
     constrain it to fit inside the 25%-width card without overflowing. */
  #lifi-widget-container button[class*="MuiCard-root"]:has([class*="MuiAvatarGroup-root"]) [class*="MuiAvatarGroup-root"] {
    transform: scale(0.85);
    transform-origin: center center;
  }
}

/* (3d) Very narrow phones — make chain-tile icons smaller so all
       five fit comfortably. Targets MuiAvatar circles inside the
       chain selector grid. */
@media (max-width: 420px) {
  #lifi-widget-container [class*="MuiAvatar-circular"],
  #lifi-widget-container [class*="MuiAvatar-rounded"] {
    width:  36px !important;
    height: 36px !important;
  }
}

/* ============ BRIDGE PAGE — mobile fit fixes for static cards ============ */
@media (max-width: 480px) {
  /* Tighter card padding so content fits without horizontal scroll */
  .bridge-page .card.p-5 { padding: 1rem; }
  .bridge-page .card.p-4 { padding: 0.875rem; }

  /* Allow flex-rows to shrink + wrap right-aligned mono labels */
  .bridge-page .card .flex.justify-between { gap: 0.5rem; min-width: 0; }
  .bridge-page .card .flex.justify-between > div { min-width: 0; flex-shrink: 1; }
  .bridge-page .card .flex.justify-between > .mono,
  .bridge-page .card .flex.justify-between > span.mono {
    text-align: right;
    flex-shrink: 1;
    min-width: 0;
    white-space: normal;
    word-break: break-word;
  }
  /* Hex contract rows — break inside long hex strings */
  .bridge-page .card .mono.text-\[9px\],
  .bridge-page .card .mono.text-\[10px\],
  .bridge-page .card .mono.text-\[11px\] {
    word-break: break-all;
  }

  .bridge-page .card,
  .bridge-page > * {
    max-width: 100%;
    box-sizing: border-box;
  }
}

/* ============================================================
   BRIDGE PAGE — Grid sizing fix (CRITICAL)
   ============================================================
   CSS Grid items have `min-width: auto` by default, meaning they
   distribute width based on min-content of children. The Li.Fi
   widget reports min-content ≈ 416px, which makes the grid column
   `lg:col-span-7` overflow its parent on phones (430px viewport
   was producing a 430.67px column = visible overflow).

   Fix: force `min-width: 0` on every grid item on the bridge page,
   so grid columns can shrink below their content's intrinsic size.
   `overflow-x: hidden` on <main> is the safety net that prevents
   any final overflow from causing a horizontal scrollbar.
*/
.bridge-page [class*="grid"] > * {
  min-width: 0;
}

.bridge-page {
  overflow-x: hidden;
}

/* Acid glow around the bridge card — subtle by default, warmer on hover */
#bridgePTRWrap {
  box-shadow:
    0 0 0 1px rgba(201, 242, 74, .04),
    0 8px 40px -10px rgba(201, 242, 74, .08),
    0 30px 60px -20px rgba(0, 0, 0, .5);
  transition: box-shadow .5s ease, border-color .4s ease;
  border-color: rgba(255, 255, 255, .08);
}
#bridgePTRWrap:hover {
  box-shadow:
    0 0 0 1px rgba(201, 242, 74, .18),
    0 10px 50px -8px rgba(201, 242, 74, .22),
    0 35px 70px -20px rgba(0, 0, 0, .6);
  border-color: rgba(201, 242, 74, .22);
}

/* Gradient top-line accent on the bridge card — signature acid highlight */
#bridgePTRWrap::before {
  content: "";
  position: absolute;
  top: 0;
  left: 12%;
  right: 12%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(201, 242, 74, .6),
    transparent
  );
  pointer-events: none;
  z-index: 5;
  opacity: .6;
  transition: opacity .4s ease;
}
#bridgePTRWrap:hover::before {
  opacity: 1;
}

/* ============ WALLET PILL (header status) ============ */
.wallet-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
  cursor: pointer;
  transition: all .2s ease;
  letter-spacing: .03em;
}
.wallet-pill:hover {
  border-color: rgba(255,255,255,.18);
  background: rgba(255,255,255,.05);
  color: var(--dim);
}
.wallet-pill[data-connected="true"] {
  color: var(--text);
  border-color: rgba(201,242,74,.25);
  background: rgba(201,242,74,.06);
}
.wallet-pill[data-connected="true"]:hover {
  border-color: rgba(201,242,74,.45);
  background: rgba(201,242,74,.1);
}
.wallet-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #5a5a68;
  flex-shrink: 0;
  position: relative;
}
.wallet-pill[data-connected="true"] .wallet-dot {
  background: var(--acid);
  box-shadow: 0 0 0 0 rgba(201,242,74,.6);
  animation: walletPulse 2s infinite;
}
@keyframes walletPulse {
  0% { box-shadow: 0 0 0 0 rgba(201,242,74,.5); }
  70% { box-shadow: 0 0 0 6px rgba(201,242,74,0); }
  100% { box-shadow: 0 0 0 0 rgba(201,242,74,0); }
}

/* Mobile: just show dot, hide text — save space */
@media (max-width: 480px) {
  .wallet-pill .connect-text {
    display: none;
  }
  .wallet-pill {
    padding: 8px;
  }
}

/* ============ STAKE — success modal & lock pills ============ */
.stake-success-overlay{
  position:fixed; inset:0; z-index:10050;
  display:flex; align-items:center; justify-content:center;
  padding:1.25rem;
  background:rgba(7,7,10,.82);
  backdrop-filter:blur(12px);
  animation: stakeFadeIn .25s ease;
}
.stake-success-modal{
  width:100%; max-width:420px;
  background:var(--surface);
  border:1px solid var(--line-2);
  border-radius:18px;
  padding:1.75rem 1.5rem 1.25rem;
  box-shadow:0 24px 80px -20px rgba(0,0,0,.65), 0 0 60px -20px rgba(201,242,74,.12);
  animation: stakeSlideUp .3s cubic-bezier(.2,.7,.2,1);
}
@keyframes stakeFadeIn{ from{opacity:0} to{opacity:1} }
@keyframes stakeSlideUp{ from{opacity:0; transform:translateY(12px)} to{opacity:1; transform:none} }
.stake-success-modal .ss-icon{ font-size:2rem; line-height:1; margin-bottom:.75rem; }
.stake-success-modal .ss-title{ font-family:'Space Grotesk',sans-serif; font-size:1.35rem; font-weight:600; color:var(--text); margin-bottom:.35rem; }
.stake-success-modal .ss-sub{ font-size:.875rem; color:var(--text-dim); line-height:1.5; margin-bottom:1.25rem; }
.stake-success-contract{
  background:var(--surface-2); border:1px solid var(--line);
  border-radius:12px; padding:.875rem 1rem; margin-bottom:1rem;
}
.stake-success-contract .eyebrow{ margin-bottom:.5rem; }
.stake-success-contract-row{ display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
.stake-success-contract-row code{
  font-family:'JetBrains Mono',monospace; font-size:11px;
  color:var(--text); word-break:break-all; flex:1; min-width:0;
}
.stake-success-copy{
  flex-shrink:0; padding:.45rem .75rem; border-radius:8px;
  background:rgba(201,242,74,.1); border:1px solid rgba(201,242,74,.25);
  color:var(--acid); font-family:'JetBrains Mono',monospace; font-size:10px;
  cursor:pointer; transition:background .15s;
}
.stake-success-copy:hover{ background:rgba(201,242,74,.18); }
.stake-success-details summary{
  list-style:none; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between;
  padding:.75rem 0; font-size:.8125rem; color:var(--text-dim);
  border-top:1px solid var(--line);
}
.stake-success-details summary::-webkit-details-marker{ display:none; }
.stake-success-details[open] summary .ss-chevron{ transform:rotate(180deg); }
.stake-success-details .ss-chevron{ transition:transform .2s; color:var(--muted); }
.stake-success-instructions{
  padding:0 0 1rem; font-size:.8125rem; color:var(--text-dim); line-height:1.6;
}
.stake-success-instructions ol{ margin:.5rem 0 0 1.1rem; padding:0; }
.stake-success-instructions li{ margin-bottom:.35rem; }
.stake-success-wallets{ margin-top:.75rem; font-family:'JetBrains Mono',monospace; font-size:10px; color:var(--muted); }
/* Lock period segmented control — stake form */
.lock-period-segments{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:.5rem;
  padding:.35rem;
  border-radius:14px;
  background:var(--surface-2);
  border:1px solid var(--line);
  position:relative;
}
@media (max-width:380px){
  .lock-period-segments{
    display:flex;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x mandatory;
    scrollbar-width:none;
  }
  .lock-period-segments::-webkit-scrollbar{ display:none; }
  .lock-period-segments .lock-pill{
    flex:0 0 min(42%,9.5rem);
    scroll-snap-align:center;
  }
}
.lock-pill{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:.15rem;
  min-height:3.25rem;
  min-width:2.75rem;
  padding:.85rem .65rem;
  border-radius:11px;
  text-align:center;
  background:transparent;
  border:1px solid transparent;
  cursor:pointer;
  transition:border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .12s ease;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}
.lock-pill:hover:not(.disabled):not(.active){
  background:rgba(255,255,255,.03);
  border-color:var(--line-2);
}
.lock-pill:active:not(.disabled){ transform:scale(.98); }
.lock-pill.active{
  border-color:rgba(201,242,74,.5);
  background:linear-gradient(165deg,rgba(201,242,74,.14) 0%,rgba(201,242,74,.05) 100%);
  box-shadow:0 0 0 1px rgba(201,242,74,.12), 0 8px 28px -12px rgba(201,242,74,.35);
}
.lock-pill.active::before{
  content:'';
  position:absolute;
  top:0; left:12%; right:12%;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(201,242,74,.65),transparent);
  pointer-events:none;
}
.lock-pill.disabled{ opacity:.42; cursor:not-allowed; pointer-events:none; }
.lock-pill .lp-check{
  display:none;
  width:1rem; height:1rem;
  border-radius:999px;
  background:rgba(201,242,74,.2);
  color:var(--acid);
  font-size:.55rem;
  line-height:1rem;
  font-weight:700;
  margin-bottom:.1rem;
}
.lock-pill.active .lp-check{ display:block; }
.lock-pill .lp-days{
  font-family:'Space Grotesk',sans-serif;
  font-size:1.25rem;
  font-weight:700;
  color:var(--text);
  line-height:1.1;
  letter-spacing:-.02em;
}
.lock-pill.active .lp-days{ color:var(--acid); }
.lock-pill .lp-label{
  font-family:'JetBrains Mono',monospace;
  font-size:9px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted);
}
.lock-pill.active .lp-label{ color:rgba(201,242,74,.75); }
.lock-pill .lp-mode{
  font-family:'JetBrains Mono',monospace;
  font-size:8px;
  letter-spacing:.08em;
  color:var(--muted);
  opacity:.75;
  margin-top:1px;
}
.lock-pill.active .lp-mode{ color:rgba(201,242,74,.55); opacity:1; }