/* Self-hosted fonts -- copied verbatim from noatun.enchantedforestdefi.com (assets CSS, 2026-09-19).
   Removes the last third-party origin from the CSP: style-src and font-src are self-only.
   exo-2-200/400/600 are one variable font under three names, exactly as Nóatún serves it. */
@font-face{font-family:Cinzel Decorative;font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/cinzel-decorative-400.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Cinzel Decorative;font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/cinzel-decorative-700.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Cinzel Decorative;font-style:normal;font-weight:900;font-display:swap;src:url(../fonts/cinzel-decorative-900.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Exo 2";font-style:italic;font-weight:300;font-display:swap;src:url(../fonts/exo-2-300-italic.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Exo 2";font-style:normal;font-weight:200;font-display:swap;src:url(../fonts/exo-2-200.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Exo 2";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/exo-2-400.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Exo 2";font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/exo-2-600.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ══════════════════════════════════════════════════════════════════════════
   Yggdrasil Roots — EnchantedForestDeFi house style.

   Palette, typography, glass cards and the parchment theme are lifted from the
   Ratatoskr bridge and the pool dashboards rather than reinvented, so a user
   walking from the bridge to the staking page does not feel the seam. Nothing
   here is a new colour.
   ══════════════════════════════════════════════════════════════════════════ */

*,
*::before,
*::after { box-sizing: border-box; margin: 0; padding: 0 }

:root {
  --forest-black:#060d08; --forest-deep:#0a1a0e; --forest-dark:#0f2614;
  --forest-mid:#1a3d20;   --forest-green:#2d6a35; --forest-light:#3d8b46;
  --moss:#4caf50;         --leaf:#6fcf6f;         --glow:#7fff7f;
  --candy-red:#ff4757;    --candy-orange:#ff7f11; --candy-yellow:#ffd700;
  --candy-green:#7fff7f;  --candy-blue:#00d4ff;   --candy-purple:#c77dff;
  --candy-pink:#ff6eb4;   --candy-teal:#00ffcc;
  --glass-bg:rgba(10,26,14,.65); --glass-border:rgba(109,207,109,.15);
  --text-primary:#e8f5e9; --text-secondary:#a5d6a7; --text-muted:#558b5e;
  --r-lg:20px; --r-md:14px; --r-sm:8px;
}

html { scroll-behavior:smooth }

body {
  font-family:'Exo 2',sans-serif;
  background:var(--forest-black);
  color:var(--text-primary);
  min-height:100vh;
  overflow-x:hidden;
}

/* ─── Ambient layers ──────────────────────────────────────────────────── */

.forest-bg {
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(ellipse 80% 60% at 20% 10%, rgba(45,106,53,.2) 0%, transparent 60%),
    radial-gradient(ellipse 60% 80% at 80% 90%, rgba(29,66,34,.25) 0%, transparent 60%),
    radial-gradient(ellipse 100% 40% at 50% 0%, rgba(109,207,109,.07) 0%, transparent 50%),
    linear-gradient(180deg,#060d08 0%,#0a1a0e 40%,#0f2614 100%);
}

/* Drifting runes sit above the wash, below every control, and never take a click.
   js/rune-rain.js is the house template, copied verbatim -- it finds this canvas by id. */
#rune-rain { position:fixed; inset:0; z-index:1; pointer-events:none; width:100%; height:100% }

/* ─── Nav ─────────────────────────────────────────────────────────────── */

nav {
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 36px;
  background:rgba(6,13,8,.88); backdrop-filter:blur(24px);
  border-bottom:1px solid var(--glass-border);
}
.nav-logo { display:flex; align-items:center; gap:11px; text-decoration:none }
.nav-logo img { width:42px; height:42px; border-radius:8px; object-fit:cover; box-shadow:0 4px 12px rgba(0,0,0,.4) }
.nav-logo-text .brand {
  display:block; font-family:'Cinzel Decorative',serif; font-size:12px; font-weight:700;
  background:linear-gradient(135deg,var(--candy-green),var(--candy-teal));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  letter-spacing:.5px;
}
.nav-logo-text .sub { display:block; font-size:10px; color:var(--text-muted); letter-spacing:2px; text-transform:uppercase; margin-top:1px }
.nav-links { display:flex; gap:4px; list-style:none }
.nav-links a {
  color:var(--text-secondary); text-decoration:none; font-size:12px; font-weight:600;
  letter-spacing:1.2px; text-transform:uppercase; padding:7px 15px; border-radius:40px; transition:all .2s;
}
.nav-links a:hover { color:var(--candy-green); background:rgba(109,207,109,.1) }
.nav-right { display:flex; align-items:center; gap:12px }

.net-badge { padding:4px 10px; border-radius:20px; font-size:10px; font-weight:700; letter-spacing:1px; text-transform:uppercase }
.net-badge.alph { background:rgba(0,212,255,.1); color:var(--candy-blue); border:1px solid rgba(0,212,255,.2) }
.net-badge.dev  { background:rgba(255,215,0,.12); color:var(--candy-yellow); border:1px solid rgba(255,215,0,.25) }

/* ─── Wallet button ───────────────────────────────────────────────────── */

.wallet-btn {
  display:flex; align-items:center; gap:8px; padding:9px 18px; border-radius:40px;
  border:none; cursor:pointer; font-family:'Exo 2',sans-serif; font-size:12px; font-weight:700;
  letter-spacing:1px; text-transform:uppercase; transition:all .25s;
}
.wallet-btn.disconnected {
  background:linear-gradient(135deg,var(--forest-green),var(--forest-light));
  color:var(--text-primary); box-shadow:0 0 20px rgba(45,106,53,.4);
}
.wallet-btn.disconnected:hover { transform:translateY(-1px); box-shadow:0 0 30px rgba(109,207,109,.45) }
.wallet-btn.connected { background:rgba(109,207,109,.1); border:1px solid rgba(109,207,109,.3); color:var(--candy-green) }
.wallet-btn.connected:hover { background:rgba(109,207,109,.18) }
.w-dot { width:7px; height:7px; border-radius:50%; background:var(--candy-blue); box-shadow:0 0 6px var(--candy-blue); animation:wdotpulse 2s infinite }
@keyframes wdotpulse { 0%,100%{opacity:1} 50%{opacity:.4} }

.wallet-dropdown {
  position:absolute; top:calc(100% + 8px); right:0; min-width:230px;
  background:var(--glass-bg); border:1px solid var(--glass-border); backdrop-filter:blur(22px);
  border-radius:var(--r-sm); padding:12px; z-index:1000; display:none; text-align:center;
  box-shadow:0 8px 32px rgba(0,0,0,.5);
}
.wallet-dropdown.open { display:block }
.wallet-dropdown .wdd-addr { font-size:11px; color:var(--text-secondary); margin-bottom:6px; word-break:break-all; font-family:monospace }
.wallet-dropdown .wdd-meta { font-size:10px; color:var(--text-muted); letter-spacing:1px; text-transform:uppercase; margin-bottom:10px }
.wdd-disc, .wdd-switch {
  width:100%; padding:8px 16px; border-radius:20px; font-size:11px; font-weight:700;
  letter-spacing:1px; text-transform:uppercase; cursor:pointer; transition:all .25s;
  font-family:'Exo 2',sans-serif;
}
.wdd-disc { border:1px solid rgba(255,100,100,.3); background:rgba(255,100,100,.1); color:#ff6b6b }
.wdd-disc:hover { background:rgba(255,100,100,.25); border-color:rgba(255,100,100,.5) }
.wdd-switch { border:1px solid rgba(109,207,109,.3); background:rgba(109,207,109,.08); color:var(--candy-green); margin-top:6px }
.wdd-switch:hover { background:rgba(109,207,109,.2) }

/* ─── Layout ──────────────────────────────────────────────────────────── */

main { position:relative; z-index:2; padding-top:104px; padding-bottom:80px }
.wrap { max-width:960px; margin:0 auto; padding:0 20px }

.glass {
  background:var(--glass-bg); border:1px solid var(--glass-border);
  backdrop-filter:blur(22px); border-radius:var(--r-lg); position:relative; overflow:hidden;
}
.glass::before { content:''; position:absolute; inset:0; background:rgba(109,207,109,.04); border-radius:inherit; pointer-events:none }

/* ─── Hero ────────────────────────────────────────────────────────────── */

.hero { text-align:center; padding:48px 20px 34px; max-width:760px; margin:0 auto }
.hero-eye {
  display:inline-flex; align-items:center; gap:8px; font-size:10px; letter-spacing:3px;
  text-transform:uppercase; color:var(--candy-teal); margin-bottom:22px; padding:5px 16px;
  border-radius:40px; border:1px solid rgba(0,255,204,.2); background:rgba(0,255,204,.05);
}
.hero-eye .dot { width:6px; height:6px; border-radius:50%; background:var(--candy-teal); animation:wdotpulse 2s infinite }
.hero-eye.warn { color:#ffd27a; border-color:rgba(255,165,0,.35); background:rgba(255,165,0,.08) }
.hero-eye.warn .dot { background:#ffa500; box-shadow:0 0 10px #ffa500 }
.hero h1 {
  font-family:'Cinzel Decorative',serif; font-size:clamp(28px,5vw,54px); font-weight:900;
  line-height:1.12; margin-bottom:18px;
  background:linear-gradient(135deg,var(--candy-green) 0%,var(--candy-teal) 45%,var(--candy-blue) 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 36px rgba(109,207,109,.3));
}
.hero-sub { font-size:16px; color:var(--text-secondary); line-height:1.75; font-weight:300; font-style:italic }

/* ─── Section headings ────────────────────────────────────────────────── */

.sec { margin-top:30px }
.sec-head { display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:14px; flex-wrap:wrap }
.sec-head h2 { font-family:'Cinzel Decorative',serif; font-size:17px; color:var(--text-primary); letter-spacing:.5px }
.sec-head .sec-note { font-size:12px; color:var(--text-muted); font-style:italic }

/* ─── Stat grid ───────────────────────────────────────────────────────── */

.sg { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:14px }
.sc { padding:22px 20px; text-align:center; transition:transform .25s }
.sc:hover { transform:translateY(-3px) }
.sc-lbl { font-size:10px; letter-spacing:2px; text-transform:uppercase; color:var(--text-muted); margin-bottom:8px }
.sc-val {
  font-size:26px; font-weight:700; line-height:1.2;
  background:linear-gradient(135deg,var(--candy-green),var(--candy-teal));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  word-break:break-word;
}
.sc-val.small { font-size:19px }
.sc-unit { font-size:11px; color:var(--text-muted); letter-spacing:1.5px; text-transform:uppercase; margin-top:6px }
.sc-sub { font-size:11px; color:var(--text-muted); margin-top:6px; font-style:italic }

/* ─── Position card ───────────────────────────────────────────────────── */

.position { padding:24px; display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:20px }
.pos-item .pos-lbl { font-size:10px; letter-spacing:2px; text-transform:uppercase; color:var(--text-muted); margin-bottom:6px }
.pos-item .pos-val { font-size:22px; font-weight:700; color:var(--text-primary) }
.pos-item .pos-val.reward { color:var(--candy-green) }
.pos-item .pos-unit { font-size:11px; color:var(--text-muted); margin-left:4px; font-weight:400 }
/* Qualifier under a position figure — "earns nothing", "xALPH is not counted". Same
   vocabulary as .sc-sub so the two grids read as one system. */
.pos-item .pos-sub { font-size:11px; color:var(--text-muted); margin-top:6px; font-style:italic; line-height:1.4 }

/* ─── Action card ─────────────────────────────────────────────────────── */

.acard { padding:26px }
.tabs { display:flex; margin-bottom:22px; border-radius:var(--r-md); overflow:hidden; border:1px solid var(--glass-border) }
.tab {
  flex:1; padding:11px 8px; border:none; cursor:pointer; font-family:'Exo 2',sans-serif;
  font-size:11px; font-weight:700; letter-spacing:1px; text-transform:uppercase;
  background:transparent; color:var(--text-muted); transition:all .25s;
}
.tab.active { background:linear-gradient(135deg,var(--forest-green),var(--forest-light)); color:var(--text-primary) }

.field { margin-bottom:16px }
.field label { display:flex; justify-content:space-between; align-items:center; font-size:11px; font-weight:600; letter-spacing:1px; text-transform:uppercase; color:var(--text-muted); margin-bottom:7px }
.field label .fl-right { color:var(--candy-green); font-weight:600; font-style:italic; text-transform:none; letter-spacing:0 }
.field input {
  width:100%; padding:13px 16px; border-radius:var(--r-md); background:rgba(0,0,0,.42);
  border:1px solid var(--glass-border); color:var(--text-primary); font-family:'Exo 2',sans-serif;
  font-size:17px; font-weight:600; outline:none; transition:border-color .2s,box-shadow .2s;
}
.field input:focus { border-color:rgba(109,207,109,.45); box-shadow:0 0 0 3px rgba(109,207,109,.08) }
.field input::placeholder { color:var(--text-muted); font-size:14px; font-weight:400 }
.field-note { font-size:11px; color:var(--text-muted); margin-top:6px; font-style:italic }
.field-note.warn { color:var(--candy-orange); font-style:normal }

.max-btn {
  padding:3px 9px; border-radius:20px; border:1px solid rgba(109,207,109,.3);
  background:rgba(109,207,109,.08); color:var(--candy-green); font-size:10px; font-weight:700;
  letter-spacing:1px; text-transform:uppercase; cursor:pointer; transition:all .2s; margin-left:6px;
  font-family:'Exo 2',sans-serif;
}
.max-btn:hover { background:rgba(109,207,109,.18) }

.act-btn {
  width:100%; padding:15px; border-radius:var(--r-md); border:none; cursor:pointer;
  font-family:'Exo 2',sans-serif; font-size:14px; font-weight:700; letter-spacing:1.5px;
  text-transform:uppercase; transition:all .25s;
  background:linear-gradient(135deg,var(--candy-green),var(--candy-teal)); color:var(--forest-black);
  box-shadow:0 0 28px rgba(109,207,109,.3);
}
.act-btn:hover:not(:disabled) { transform:translateY(-2px); box-shadow:0 8px 36px rgba(109,207,109,.5) }
.act-btn:disabled { background:rgba(0,0,0,.3); color:var(--text-muted); border:1px solid var(--glass-border); box-shadow:none; cursor:not-allowed; transform:none }

.reward-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:18px; padding-top:18px; border-top:1px solid var(--glass-border) }
.btn-s {
  padding:12px 18px; border-radius:var(--r-md); cursor:pointer; font-family:'Exo 2',sans-serif;
  font-size:12px; font-weight:700; letter-spacing:1px; text-transform:uppercase;
  background:transparent; color:var(--text-secondary); border:1px solid var(--glass-border); transition:all .25s;
}
.btn-s:hover:not(:disabled) { border-color:rgba(109,207,109,.4); color:var(--candy-green); background:rgba(109,207,109,.07) }
.btn-s:disabled { opacity:.45; cursor:not-allowed }
.btn-s.primary { border-color:rgba(109,207,109,.35); color:var(--candy-green); background:rgba(109,207,109,.08) }
.btn-s .bs-note { display:block; font-size:9px; font-weight:400; letter-spacing:.5px; text-transform:none; color:var(--text-muted); margin-top:3px; font-style:italic }

.btn-spinner {
  display:inline-block; width:14px; height:14px; border:2px solid rgba(255,255,255,.3);
  border-top-color:#fff; border-radius:50%; animation:spin .7s linear infinite;
  margin-right:8px; vertical-align:middle;
}
@keyframes spin { to { transform:rotate(360deg) } }

/* ─── Notices ─────────────────────────────────────────────────────────── */

.notice { padding:18px 20px; border-radius:var(--r-md); font-size:13px; line-height:1.7; margin-bottom:16px }
.notice h4 { font-family:'Cinzel Decorative',serif; font-size:13px; margin-bottom:8px; letter-spacing:.5px }
.notice.info    { background:rgba(0,212,255,.06);  border:1px solid rgba(0,212,255,.2);  color:var(--text-secondary) }
.notice.info h4 { color:var(--candy-blue) }
.notice.gold    { background:rgba(255,215,0,.05);  border:1px solid rgba(255,215,0,.25); color:var(--text-secondary) }
.notice.gold h4 { color:var(--candy-yellow) }
.notice.alert   { background:rgba(255,71,87,.07);  border:1px solid rgba(255,71,87,.28); color:var(--text-secondary) }
.notice.alert h4{ color:var(--candy-red) }
.notice p + p { margin-top:8px }
/* The launch-blocker list: one line per missing input, so a visitor sees WHICH one. */
.notice ul { margin:8px 0 0 20px; padding:0 }
.notice li { margin:5px 0; line-height:1.6 }
.notice code { font-family:monospace; font-size:12px; color:var(--candy-green); word-break:break-all }

.status { margin-top:16px; padding:13px 16px; border-radius:var(--r-sm); font-size:13px; line-height:1.6; display:none }
.status.show { display:block; animation:fadeUp .3s ease }
@keyframes fadeUp { from { opacity:0; transform:translateY(8px) } to { opacity:1; transform:translateY(0) } }
.status.info    { background:rgba(0,212,255,.08);  border:1px solid rgba(0,212,255,.2);  color:var(--candy-blue) }
.status.success { background:rgba(109,207,109,.08);border:1px solid rgba(109,207,109,.2);color:var(--candy-green) }
.status.error   { background:rgba(255,71,87,.08);  border:1px solid rgba(255,71,87,.2);  color:var(--candy-red) }
.status.warning { background:rgba(255,215,0,.08);  border:1px solid rgba(255,215,0,.2);  color:var(--candy-yellow) }
.status a { color:inherit; text-decoration:underline; word-break:break-all }

/* ─── Bridge hand-off ─────────────────────────────────────────────────── */

.bridge-card { padding:30px; text-align:center }
.bridge-card .bc-rune { font-size:34px; margin-bottom:12px; color:var(--candy-teal); opacity:.8 }
.bridge-card h3 { font-family:'Cinzel Decorative',serif; font-size:18px; margin-bottom:10px; color:var(--text-primary) }
.bridge-card p { font-size:14px; color:var(--text-secondary); line-height:1.8; max-width:520px; margin:0 auto 20px }
.btn-p {
  display:inline-block; padding:13px 34px; border-radius:50px; border:none; cursor:pointer;
  font-family:'Exo 2',sans-serif; font-size:13px; font-weight:700; letter-spacing:1px;
  text-transform:uppercase; text-decoration:none;
  background:linear-gradient(135deg,var(--candy-green),var(--candy-teal)); color:var(--forest-black);
  box-shadow:0 0 36px rgba(109,207,109,.35); transition:all .25s;
}
.btn-p:hover { transform:translateY(-2px); box-shadow:0 8px 48px rgba(109,207,109,.5) }
.bridge-steps { list-style:none; text-align:left; max-width:430px; margin:0 auto 22px; font-size:13px; color:var(--text-secondary); line-height:1.9 }
.bridge-steps li { display:flex; gap:10px; align-items:flex-start }
.bridge-steps .n { color:var(--candy-teal); font-weight:700; flex-shrink:0 }

/* ─── Modal ───────────────────────────────────────────────────────────── */

.mo-back { position:fixed; inset:0; background:rgba(0,0,0,.75); backdrop-filter:blur(6px); z-index:2000; display:none; align-items:center; justify-content:center; padding:20px }
.mo-back.open { display:flex }
.mo { width:100%; max-width:420px; padding:28px; text-align:center }
.mo h3 { font-family:'Cinzel Decorative',serif; font-size:17px; margin-bottom:6px; color:var(--text-primary) }
.mo .mo-sub { font-size:12px; color:var(--text-muted); font-style:italic; margin-bottom:22px }
.mo-btns { display:flex; flex-direction:column; gap:10px }
.wpbtn {
  display:flex; align-items:center; gap:12px; padding:14px 18px; border-radius:var(--r-md);
  border:1px solid var(--glass-border); background:rgba(0,0,0,.3); cursor:pointer;
  font-family:'Exo 2',sans-serif; text-align:left; transition:all .2s; width:100%;
}
.wpbtn:hover { border-color:rgba(109,207,109,.35); background:rgba(109,207,109,.08) }
.wpbtn .wi { font-size:20px; flex-shrink:0 }
.wpbtn .wt { font-size:13px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--text-secondary) }
.wpbtn .wh { font-size:11px; color:var(--text-muted); font-style:italic; margin-top:2px }
.wpbtn:hover .wt { color:var(--candy-green) }
.mo-close { margin-top:18px; background:none; border:none; color:var(--text-muted); font-size:11px; letter-spacing:1px; text-transform:uppercase; cursor:pointer; font-family:'Exo 2',sans-serif }
.mo-close:hover { color:var(--candy-red) }

#wc-qr-area { display:none; margin-top:20px }
#wc-qr-area canvas { border-radius:var(--r-sm); background:#fff; padding:8px; max-width:100% }
.wc-uri-row { display:flex; gap:8px; margin-top:12px }
.wc-uri-row input { flex:1; min-width:0; padding:8px 10px; border-radius:var(--r-sm); background:rgba(0,0,0,.42); border:1px solid var(--glass-border); color:var(--text-secondary); font-family:monospace; font-size:10px }

/* ─── Tx list ─────────────────────────────────────────────────────────── */

.tx-list { margin-top:12px }
.tx-item { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:11px 14px; border-radius:var(--r-sm); background:rgba(0,0,0,.22); border:1px solid var(--glass-border); margin-bottom:7px; font-size:12px }
.tx-kind { color:var(--text-secondary); font-size:11px; letter-spacing:1px; text-transform:uppercase }
.tx-amt { font-weight:700; color:var(--candy-green); flex-shrink:0 }
.tx-id { font-family:monospace; font-size:11px; color:var(--text-muted); text-decoration:none }
.tx-id:hover { color:var(--candy-teal) }
.tx-empty { text-align:center; color:var(--text-muted); font-size:13px; font-style:italic; padding:14px 0 }

/* ─── Footer ──────────────────────────────────────────────────────────── */

footer { position:relative; z-index:2; padding:30px 20px 44px; text-align:center; border-top:1px solid var(--glass-border); margin-top:44px }
footer .f-brand { font-family:'Cinzel Decorative',serif; font-size:12px; color:var(--text-secondary); letter-spacing:1px }
footer .f-links { margin-top:10px; display:flex; gap:18px; justify-content:center; flex-wrap:wrap }
footer .f-links a { color:var(--text-muted); font-size:11px; letter-spacing:1px; text-transform:uppercase; text-decoration:none }
footer .f-links a:hover { color:var(--candy-teal) }
/* Deliberately quiet — it is for answering "is this cached?", not for reading. */
footer .f-build { margin-top:10px; font-size:10px; letter-spacing:1px; color:var(--text-muted); font-family:monospace; opacity:.75 }
footer .f-note { margin-top:14px; font-size:11px; color:var(--text-muted); font-style:italic }

/* ─── Theme toggle ────────────────────────────────────────────────────── */

.theme-toggle {
  position:fixed; bottom:20px; right:20px; z-index:1000;
  background:var(--glass-bg); border:1px solid var(--glass-border); color:var(--text-primary);
  padding:9px 18px; border-radius:50px; font-family:'Cinzel Decorative',serif; font-size:10px;
  letter-spacing:1.5px; text-transform:uppercase; font-weight:600; cursor:pointer;
  backdrop-filter:blur(12px); transition:all .25s; opacity:.85;
}
.theme-toggle:hover { border-color:rgba(127,184,143,.5); background:rgba(127,184,143,.12); opacity:1 }

/* ─── Utilities ───────────────────────────────────────────────────────── */

.hidden { display:none !important }
.mono { font-family:monospace }
.dim { color:var(--text-muted) }

/* ══════════════════════════════════════════════════════════════════════
   PARCHMENT MODE — the same page by daylight. Values match the bridge.
   ══════════════════════════════════════════════════════════════════════ */

body[data-theme="light"] { background:url('../img/bg-parchment.png') center/cover fixed,#e8d9b8 !important; color:#2a3530 !important }

/* The palette itself, re-pointed for parchment.
   ───────────────────────────────────────────────────────────────────────────────────────
   Everything below this line used to be patched selector by selector — sixty-odd rules,
   each with !important. That works only for the elements somebody remembered, and anything
   using a palette variable without its own patch kept the DARK value: `.xalph-card strong`
   inherited --text-primary (#e8f5e9, near-white) and painted it on cream. Measured contrast
   1.03 against a readable floor of 4.5, across thirteen elements — the whole "what it is",
   "before you start" and "how you get out" copy, invisible.

   Redefining the variables fixes every consumer at once, including ones added later, which
   is the part hand-patching cannot do. The existing !important rules still win where they
   apply, so this is additive: it repairs what was never covered and disturbs nothing that
   was. Dark theme is untouched — these only exist under [data-theme="light"]. */
body[data-theme="light"] {
  /* --text-muted carries 27 call sites including footer links and the button sub-notes, so
     it is body text, not decoration. #6a746e measured 3.47 against parchment — under the 4.5
     a reader needs. Darkened until it clears it. */
  --text-primary:#24302b;   --text-secondary:#46534d;  --text-muted:#4f5a54;
  --leaf:#2c6a47;           --glow:#1a6b3a;            --moss:#2c6a47;
  --candy-green:#146b38;    --candy-teal:#0f6159;      --candy-blue:#2a4f8f;
  --candy-yellow:#7a5c00;   --candy-orange:#9a4510;    --candy-red:#96202f;
  --candy-purple:#5d3a8f;   --candy-pink:#9b2d63;
  --glass-border:rgba(140,100,60,.4);
}
body[data-theme="light"] .forest-bg { display:none !important }

body[data-theme="light"] nav { background:rgba(245,239,225,.92) !important; border-bottom:1px solid rgba(140,100,60,.4) !important }
body[data-theme="light"] .nav-logo-text .brand { background:linear-gradient(135deg,#1a4731,#2c6a47) !important; -webkit-background-clip:text !important; background-clip:text !important; -webkit-text-fill-color:transparent !important }
body[data-theme="light"] .nav-logo-text .sub { color:#3a4540 !important }
body[data-theme="light"] .nav-links a { color:#3a4540 !important }
body[data-theme="light"] .nav-links a:hover { color:#1a4731 !important; background:rgba(26,71,49,.1) !important }

body[data-theme="light"] .glass { background:rgba(251,245,230,.85) !important; border:1px solid rgba(140,100,60,.4) !important; box-shadow:0 4px 16px rgba(80,50,20,.12) !important }
body[data-theme="light"] .glass::before { display:none }

body[data-theme="light"] .wallet-btn.disconnected { background:linear-gradient(135deg,#1a4731,#2c6a47) !important; color:#f5efe1 !important; box-shadow:0 0 20px rgba(26,71,49,.3) !important }
body[data-theme="light"] .wallet-btn.connected { background:rgba(26,71,49,.12) !important; border:1px solid rgba(26,71,49,.3) !important; color:#1a4731 !important }
body[data-theme="light"] .wallet-dropdown { background:rgba(251,245,230,.95) !important; border-color:rgba(140,100,60,.4) !important }
body[data-theme="light"] .wallet-dropdown .wdd-addr { color:#2a3530 !important }
body[data-theme="light"] .net-badge.alph { background:rgba(58,79,153,.18) !important; color:#3a4f99 !important; border-color:rgba(58,79,153,.4) !important }
body[data-theme="light"] .net-badge.dev { background:rgba(160,100,30,.15) !important; color:#a06420 !important; border-color:rgba(160,100,30,.4) !important }

body[data-theme="light"] .hero-eye { color:#7a3018 !important; border-color:rgba(160,64,32,.4) !important; background:rgba(160,64,32,.08) !important }
body[data-theme="light"] .hero-eye .dot { background:#a04020 !important }
body[data-theme="light"] .hero h1 {
  background:linear-gradient(135deg,#1a4731 0%,#2c6a47 35%,#3d8a5f 65%,#1a4731 100%) !important;
  -webkit-background-clip:text !important; background-clip:text !important; -webkit-text-fill-color:transparent !important;
  filter:drop-shadow(0 1px 1px rgba(255,250,235,.6)) !important;
}
body[data-theme="light"] .hero-sub,
body[data-theme="light"] .notice,
body[data-theme="light"] .bridge-card p,
body[data-theme="light"] .bridge-steps,
body[data-theme="light"] p { color:#2a3530 !important }
body[data-theme="light"] h2, body[data-theme="light"] h3 { color:#1a4731 !important }

body[data-theme="light"] .sc-val { background:linear-gradient(135deg,#1a4731,#2c6a47) !important; -webkit-background-clip:text !important; background-clip:text !important; -webkit-text-fill-color:transparent !important }
body[data-theme="light"] .sc-lbl, body[data-theme="light"] .sc-unit, body[data-theme="light"] .sc-sub,
body[data-theme="light"] .pos-sub,
body[data-theme="light"] .pos-lbl, body[data-theme="light"] .sec-note, body[data-theme="light"] .field-note,
body[data-theme="light"] .dim, body[data-theme="light"] footer .f-note { color:#5c5344 !important }
body[data-theme="light"] .pos-val { color:#22302a !important }
body[data-theme="light"] .pos-val.reward { color:#1a4731 !important }

body[data-theme="light"] input { background:rgba(251,245,230,.85) !important; color:#2a3530 !important; border-color:rgba(140,100,60,.4) !important }
body[data-theme="light"] .tabs { border-color:rgba(140,100,60,.4) !important }
body[data-theme="light"] .tab { color:#5c5344 !important }
body[data-theme="light"] .tab.active { background:linear-gradient(135deg,#1a4731,#2c6a47) !important; color:#f5efe1 !important }
body[data-theme="light"] .act-btn { background:linear-gradient(135deg,#1a4731,#2c6a47) !important; color:#f5efe1 !important; box-shadow:0 4px 18px rgba(26,71,49,.3) !important }
body[data-theme="light"] .act-btn:disabled { background:rgba(140,100,60,.12) !important; color:#8a7d6a !important; border-color:rgba(140,100,60,.3) !important }
body[data-theme="light"] .btn-s { color:#1a4731 !important; border:1px solid rgba(140,100,60,.5) !important; background:rgba(251,245,230,.7) !important }
body[data-theme="light"] .btn-p { background:linear-gradient(135deg,#1a4731,#2c6a47) !important; color:#f5efe1 !important }
body[data-theme="light"] .theme-toggle { background:rgba(251,245,230,.85) !important; border-color:rgba(140,100,60,.4) !important; color:#1a4731 !important }
body[data-theme="light"] .tx-item { background:rgba(251,245,230,.6) !important; border-color:rgba(140,100,60,.3) !important }

/* ── Parchment contrast ────────────────────────────────────────────────────
   The dark palette's greens are tuned for near-black. On the parchment texture
   the same values wash out entirely: the rune-stone rows, the wallet balance and
   the status line all read fine in forest mode and were near-invisible in light.
   These are deliberately DARK rather than merely darker -- cream is a bright,
   busy ground, and anything mid-tone disappears into it. */
body[data-theme="light"] .tx-kind { color:#4a3a1e !important; font-weight:700 !important }
body[data-theme="light"] .tx-amt { color:#0f3b26 !important }
body[data-theme="light"] .tx-id { color:#6b5533 !important }
body[data-theme="light"] .tx-id:hover { color:#0f3b26 !important }

/* "Wallet: 53.2797 wRATR" above the amount box, and the Max chip beside it. */
body[data-theme="light"] #balance-label { color:#4a3a1e !important; font-weight:700 !important }
body[data-theme="light"] .max-btn { color:#0f3b26 !important; border-color:rgba(26,71,49,.45) !important; background:rgba(26,71,49,.1) !important }
body[data-theme="light"] .max-btn:hover { background:rgba(26,71,49,.2) !important }

/* Status line under the action buttons: "Wallet connected", errors, tx links. */
body[data-theme="light"] .status { color:#2a3530 !important }
body[data-theme="light"] .status.ok { color:#0f3b26 !important }
body[data-theme="light"] .status.err { color:#7a2418 !important }
body[data-theme="light"] .status a { color:#0f3b26 !important; text-decoration:underline !important }

/* Notes to the right of each heading, and empty-state text. */
body[data-theme="light"] .sec-note,
body[data-theme="light"] .tx-empty { color:#6b5533 !important }

body[data-theme="light"] .wpbtn { background:rgba(251,245,230,.7) !important; border-color:rgba(140,100,60,.4) !important }
body[data-theme="light"] .wpbtn .wt { color:#1a4731 !important }
body[data-theme="light"] footer { border-top-color:rgba(140,100,60,.35) !important }
body[data-theme="light"] footer .f-brand { color:#1a4731 !important }

/* ─── The two ambers ──────────────────────────────────────────────────── */

.ambers { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px }
.amber-col { padding:22px 20px; transition:border-color .25s, transform .25s }
.amber-col.selected { border-color:rgba(255,215,0,.45); box-shadow:0 0 0 1px rgba(255,215,0,.18) inset }
.amber-head { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:16px }
.amber-head h3 { font-family:'Cinzel Decorative',serif; font-size:17px; letter-spacing:.5px; color:var(--candy-yellow); margin:0 0 6px }
.amber-gate { font-size:13px; color:var(--text-primary) }
.amber-ceiling { font-size:11px; color:var(--text-muted); font-style:italic; margin-top:4px; line-height:1.5 }
.amber-pick { white-space:nowrap; flex-shrink:0 }
.amber-stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:12px; padding-top:14px; border-top:1px solid var(--glass-border) }
.as { text-align:center }
.as .sc-val { font-size:22px }
.as .sc-val.small { font-size:17px }
.amber-you { margin-top:16px; padding-top:14px; border-top:1px solid var(--glass-border) }
.amber-you-head { font-size:10px; letter-spacing:2px; text-transform:uppercase; color:var(--text-muted); margin-bottom:10px; display:flex; justify-content:space-between; gap:10px }
.amber-you-head .dim { letter-spacing:0; text-transform:none; font-style:italic }
.amber-you-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(90px,1fr)); gap:10px }
.amber-you-grid .pos-lbl { font-size:10px; letter-spacing:1.5px; text-transform:uppercase; color:var(--text-muted); margin-bottom:4px }
.amber-you-grid .pos-val { font-size:16px; font-weight:700; color:var(--text-primary) }
.amber-you-grid .pos-val.reward { color:var(--candy-green) }
.amber-need { font-size:12px; line-height:1.6; color:var(--text-secondary); margin-top:12px; min-height:1em }
.amber-need.short { color:var(--candy-orange) }
/* The capacity line is a door, not a warning. It keeps its own colour even when the
   shortfall sentence above it has gone orange, so it never reads as part of the problem. */
.amber-need .need-capacity { display:block; margin-top:5px; color:var(--candy-green) }
.amber-foot { font-size:11px; color:var(--text-muted); font-style:italic; margin-top:12px }
.roots-line { margin-top:14px; font-size:13px; color:var(--text-secondary); text-align:center }
.roots-line a { color:var(--candy-green) }

.xalph-card { padding:26px 24px }
.xalph-card h3 {
  font-family:'Cinzel Decorative',serif; font-size:14px; letter-spacing:.5px; color:var(--candy-yellow);
  margin:22px 0 10px
}
.xalph-card h3:first-child { margin-top:0 }
.xalph-card p { font-size:13.5px; line-height:1.75; color:var(--text-secondary); margin-bottom:10px }
.xalph-card strong { color:var(--text-primary) }
.xalph-rate {
  padding:12px 14px; border-radius:var(--r-sm); border:1px solid rgba(255,215,0,.22);
  background:rgba(255,215,0,.05)
}
.xalph-hold { padding:12px 14px; border-radius:var(--r-sm); border:1px solid rgba(109,207,109,.28); background:rgba(109,207,109,.05) }
.xalph-check { padding:12px 14px; border-radius:var(--r-sm); border:1px solid rgba(255,71,87,.3); background:rgba(255,71,87,.05) }
.newcomer { padding:12px 14px; border-radius:var(--r-sm); border:1px solid rgba(0,212,255,.22); background:rgba(0,212,255,.05) }
.newcomer a { color:var(--candy-blue) }
.safety {
  padding:18px 20px; margin-bottom:22px; border-radius:var(--r-md);
  border:1px solid rgba(255,215,0,.4); background:rgba(255,215,0,.06)
}
.safety h3 { margin-top:0 !important; margin-bottom:12px !important; font-size:15px !important }
.safety ol { margin:0; padding-left:22px }
.safety li { font-size:13.5px; line-height:1.7; color:var(--text-secondary); margin-bottom:10px }
.safety li:last-child { margin-bottom:0 }
body[data-theme="light"] .newcomer a { color:#0b5f76 !important }
body[data-theme="light"] .xalph-card h3 { color:#8a5a00 !important }

.pool-pick { display:flex; gap:8px; margin-bottom:16px; flex-wrap:wrap }
.pill {
  flex:1; padding:9px 12px; border-radius:999px; border:1px solid var(--glass-border); background:transparent;
  color:var(--text-secondary); font-family:inherit; font-size:12px; letter-spacing:1px; text-transform:uppercase; cursor:pointer;
  transition:all .2s
}
.pill:hover { border-color:rgba(255,215,0,.35); color:var(--candy-yellow) }
.pill.active { border-color:rgba(255,215,0,.5); background:rgba(255,215,0,.08); color:var(--candy-yellow) }

.compound-help {
  margin-top:14px; padding:14px; border-radius:var(--r-sm);
  border:1px solid rgba(255,127,17,.35); background:rgba(255,127,17,.06)
}
.compound-help p { font-size:12.5px; line-height:1.7; color:var(--text-secondary); margin-bottom:10px }
.compound-help-actions { display:flex; align-items:center; gap:12px; flex-wrap:wrap }
.compound-help-actions .btn-s { flex:0 0 auto }
.compound-help-actions .dim { font-size:11.5px; font-style:italic }

.gate-note { font-size:12px; line-height:1.6; margin:-6px 0 14px; padding:10px 12px; border-radius:var(--r-sm); border:1px solid var(--glass-border); color:var(--text-secondary) }
.gate-note.ok { border-color:rgba(109,207,109,.3); color:var(--text-secondary) }
.gate-note.short { border-color:rgba(255,127,17,.4); color:var(--candy-orange) }

.pos-grad { grid-column:1 / -1 }
.grad-bar { position:relative; height:8px; border-radius:999px; background:rgba(109,207,109,.12); overflow:visible; margin:10px 0 8px }
.grad-fill { height:100%; width:0; border-radius:999px; background:linear-gradient(90deg,var(--forest-green),var(--candy-yellow)); transition:width .6s }
.grad-mark { position:absolute; right:0; top:-4px; width:2px; height:16px; background:var(--candy-yellow) }
.grad-link { display:inline-block; margin-top:8px; font-size:13px; color:var(--candy-yellow) }

body[data-theme="light"] .amber-head h3 { color:#8a5a00 !important }
body[data-theme="light"] .amber-gate { color:#1c1206 !important }
body[data-theme="light"] .pill { color:#3b2a10 !important }
body[data-theme="light"] .pill.active { color:#8a5a00 !important }
body[data-theme="light"] .roots-line a { color:#1a4731 !important }

/* ─── Responsive ──────────────────────────────────────────────────────── */

/* Below roughly 466px the nav cannot hold the wordmark, the network badge and the wallet
   button at once, and flex does not wrap them — it overflows the viewport. The page has no
   horizontal scroll, so the button was not merely off-screen, it was UNREACHABLE: on a
   375px phone a visitor could not connect a wallet at all.

   Measured at 375px: the three need 434px of a 343px track. Dropping the wordmark leaves
   263px, 80px to spare. Dropping the badge instead lands on exactly 343px — a fit with zero
   slack, which any font fallback or longer button label breaks again, so it is not the fix.
   The logo mark carries the identity; the button has to be tappable.

   The breakpoint sits above the measured failure point, not on it. */
@media (max-width:520px) {
  .nav-logo-text { display:none }

  /* Touch targets. MAX and FILL are 20px tall and the wallet button 32px — deliberate on a
     desktop, where they sit inline in a label row and must not dominate it, and well under
     any touch guidance on a phone.

     FILL matters most: it is the control that puts in the EXACT escrow a stake needs, so a
     mis-tap there is a refused transaction rather than a cosmetic annoyance. Extend the
     tappable area with a pseudo-element instead of resizing the button, so nothing that is
     DRAWN changes and the label row keeps its proportions. Vertical only — the two buttons
     sit 6px apart and widening them would overlap their hit areas, trading one mis-tap for
     another. */
  .max-btn, .wallet-btn { position:relative }
  .max-btn::after, .wallet-btn::after {
    content:''; position:absolute; left:0; right:0; top:50%;
    transform:translateY(-50%); height:44px;
  }
}

@media (max-width:820px) {
  nav { padding:12px 16px }
  .nav-links { display:none }
  main { padding-top:88px }
  .position { padding:20px }
  .acard { padding:20px }
  .reward-actions { grid-template-columns:1fr }
  .ambers { grid-template-columns:1fr }
  .amber-head { flex-direction:column }
}

/* Respect the user's motion preference for everything, not just the runes. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important }
  html { scroll-behavior:auto }
}