/* ══════════════════════════════════════════════════════════════════════════
   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%);
}

/* Falling runes sit above the wash, below every control, and never take a click. */
#runes { 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 }

/* ─── 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 }
.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) }
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 }
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-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 }

/* ─── 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. The page has no horizontal scroll, so the
   button is not merely off-screen -- it is UNREACHABLE, and a visitor on a phone cannot
   connect a wallet at all. Measured on the live site 2026-09-24: right edge 427 in a 375px
   viewport, clipped, no scroll.

   Dropping the wordmark leaves room with 80px to spare; dropping the badge instead fits in
   exactly 343px of 343px, which any font fallback breaks again. The logo mark carries the
   identity; the button has to be tappable.

   Touch targets: MAX and the wallet button are deliberately small on a desktop and well
   under any touch guidance on a phone. The hit area is extended with a pseudo-element so
   nothing DRAWN changes. Vertical only -- widening would overlap adjacent targets. */
@media (max-width:520px) {
  .nav-logo-text { display:none }

  .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 }
}

/* 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 }
}