/* ============================================================ tokens (midnight network + ETH core) */
:root {
  --bg: #040915;
  --bg-2: #071026;
  --panel: #0a1428;
  --panel-2: #0d1a33;
  --sunk: #060e20;
  --ink: #e9f2ff;
  --ink-2: #a9badb;
  --ink-3: #7083a8;
  --line: rgba(140, 180, 240, .12);
  --line-2: rgba(140, 180, 240, .2);
  --eth: #9fd6ff;
  --eth-2: #d9efff;
  --eth-3: #3f8cff;
  --cyan: #7fe3ff;
  --good: #3fe0a2; --good-soft: rgba(63, 224, 162, .1);
  --bad: #ff6f8e; --bad-soft: rgba(255, 111, 142, .1);
  --warn: #ffc163; --warn-soft: rgba(255, 193, 99, .1);
  --z0: #a185ff; --z0-l: #d9ccff; --z0-d: #5a3fd0;
  --z1: #2ee6c5; --z1-l: #b5fff0; --z1-d: #0b8a78;
  --z2: #ffb547; --z2-l: #ffe2ad; --z2-d: #b8640f;
  --f-body: "Manrope", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-display: "Unbounded", "Manrope", system-ui, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --f-term: "VT323", "JetBrains Mono", monospace;
  --r: 12px;      /* panels and cards */
  --r-s: 8px;     /* controls inside them */
  --gut: 16px;
  --maxw: 1200px;
  --hdr: 96px;
  color-scheme: dark;
}
.z0 { --z: var(--z0); --z-l: var(--z0-l); --z-d: var(--z0-d); }
.z1 { --z: var(--z1); --z-l: var(--z1-l); --z-d: var(--z1-d); }
.z2 { --z: var(--z2); --z-l: var(--z2-l); --z-d: var(--z2-d); }

/* ============================================================ base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--hdr) + 12px); background: var(--bg); }
body { margin: 0; min-width: 320px; overflow-x: hidden; font: 400 16px/1.6 var(--f-body); color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; }
.space { position: fixed; inset: 0; z-index: -2; pointer-events: none; background: radial-gradient(1200px 700px at 50% 16%, #0b1a38 0%, rgba(4, 9, 21, 0) 70%), linear-gradient(180deg, #050b1a, #040915 40%, #03070f); }
.net { position: fixed; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; display: block; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 6px; }
code, .num { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }
code { font-size: .9em; }
h1, h2 { margin: 0; font-family: var(--f-display); font-weight: 600; letter-spacing: -.01em; line-height: 1.12; }
h3, h4 { margin: 0; font-family: var(--f-body); font-weight: 700; letter-spacing: 0; line-height: 1.25; }
p { margin: 0; }
.wrap { width: 100%; max-width: calc(var(--maxw) + 2 * var(--gut)); margin: 0 auto; padding: 0 var(--gut); }
@media (min-width: 720px) { :root { --gut: 28px; } }
.skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--panel); padding: 8px 12px; }
.skip:focus { left: 8px; }
[hidden] { display: none !important; }

/* labels: sentence case, in the sans */
.label { font-family: var(--f-body); font-size: 13px; font-weight: 500; color: var(--ink-3); }
.fine { font-size: 13px; line-height: 1.55; color: var(--ink-3); }
.warn { font-size: 13.5px; line-height: 1.5; color: var(--warn); padding: 9px 11px; border-radius: var(--r-s); border: 1px solid rgba(255, 193, 99, .3); }
.ico { flex: none; }
.ico-slot { display: inline-flex; align-items: center; }

/* ============================================================ buttons (flat) */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 46px; padding: 0 20px; border: 1px solid transparent; border-radius: var(--r-s);
  font-family: var(--f-body); font-weight: 700; font-size: 15px; line-height: 1; text-decoration: none; white-space: nowrap;
  color: #04101f; background: #cfe8ff;
  transition: background .15s, border-color .15s, color .15s;
  user-select: none;
}
.btn:hover { background: #e6f3ff; }
.btn-ghost { background: transparent; border-color: var(--line-2); color: var(--ink); }
.btn-ghost:hover { background: rgba(140, 180, 240, .08); border-color: rgba(160, 200, 255, .4); }
.btn-secondary { background: #6ff0d6; color: #032019; }
.btn-secondary:hover { background: #95f5e2; }
.btn[disabled], .btn[aria-disabled="true"] { cursor: not-allowed; background: rgba(140, 180, 240, .06); border-color: var(--line); color: var(--ink-3); }
.btn-sm { min-height: 38px; padding: 0 14px; font-size: 14px; }
.btn-block { display: flex; width: 100%; }
.chip { border: 1px solid var(--line-2); background: transparent; color: var(--ink-2); border-radius: 6px; padding: 5px 10px; font-family: var(--f-body); font-size: 13px; font-weight: 600; }
.chip:hover:not([disabled]) { border-color: var(--eth); color: #fff; }
.chip[disabled] { opacity: .4; cursor: not-allowed; }
.tag { display: inline-flex; align-items: center; gap: 6px; font-family: var(--f-body); font-size: 12.5px; font-weight: 600; padding: 2px 8px; border-radius: 6px; color: var(--eth-2); border: 1px solid var(--line-2); }
.tag.warm { color: var(--warn); border-color: rgba(255, 193, 99, .35); }
.tag.ok { color: var(--good); border-color: rgba(63, 224, 162, .35); }

/* panels: flat, hairline, one radius */
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 22px; }
.panel-h { font-size: 17px; margin-bottom: 14px; }
.mini-h { font-family: var(--f-body); font-size: 14px; font-weight: 600; color: var(--ink-2); margin-bottom: 10px; }
.pre { color: var(--ink-3); font-family: var(--f-body); font-weight: 500; font-variant-numeric: normal; }
.err { color: var(--bad); font-family: var(--f-body); font-weight: 500; }

/* (i) tooltip */
.info { position: relative; display: inline-block; vertical-align: 1px; }
.info-btn { width: 17px; height: 17px; padding: 0; border-radius: 50%; border: 1px solid var(--ink-3); background: transparent; color: var(--ink-2); font: 600 11px/15px var(--f-mono); text-align: center; }
.info-btn:hover, .info.open .info-btn { border-color: var(--ink-2); color: var(--ink); }
.info-pop { position: absolute; z-index: 20; right: -8px; bottom: calc(100% + 8px); width: min(300px, 80vw); padding: 10px 12px; border-radius: var(--r-s); background: #101d38; border: 1px solid var(--line-2); color: var(--ink-2); font-size: 12.5px; line-height: 1.5; visibility: hidden; opacity: 0; transition: opacity .15s; pointer-events: none; }
.info:hover .info-pop, .info-btn:focus-visible + .info-pop, .info.open .info-pop { visibility: visible; opacity: 1; }

/* check */
.check { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; cursor: pointer; line-height: 1.45; color: var(--ink-2); }
.check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.check-box { flex: none; width: 18px; height: 18px; margin-top: 1px; border: 1.5px solid var(--ink-3); border-radius: 5px; background: transparent; position: relative; transition: background .15s, border-color .15s; }
.check input:checked + .check-box { background: var(--eth-3); border-color: var(--eth-3); }
.check input:checked + .check-box::after { content: ""; position: absolute; left: 5px; top: 1.5px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.check input:focus-visible + .check-box { outline: 2px solid var(--cyan); outline-offset: 2px; }

/* modal + toast */
.modal { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 16px; }
.modal-scrim { position: absolute; inset: 0; background: rgba(2, 6, 16, .74); }
.modal-card { position: relative; width: min(420px, 100%); }
.modal-body h3 { font-size: 20px; margin-bottom: 12px; }
.modal-body p { margin-bottom: 16px; color: var(--ink-2); }
.modal-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.wallet-list { display: grid; gap: 8px; margin-bottom: 16px; }
.wallet-opt { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border: 1px solid var(--line-2); border-radius: var(--r-s); background: transparent; text-align: left; font-weight: 600; }
.wallet-opt:hover { border-color: var(--eth); }
.wallet-opt img { width: 28px; height: 28px; border-radius: 6px; }
.wallet-dot { width: 28px; height: 28px; border-radius: 6px; background: rgba(110, 180, 255, .25); }
.toast { position: fixed; left: 50%; bottom: 22px; z-index: 90; visibility: hidden; transform: translate(-50%, 160%); max-width: calc(100% - 32px); padding: 12px 18px; border-radius: var(--r-s); background: #0e1b36; border: 1px solid var(--line-2); color: var(--ink); font-size: 14px; transition: transform .3s cubic-bezier(.2,.9,.3,1.2); pointer-events: none; }
.toast.show { transform: translate(-50%, 0); visibility: visible; }
.toast.bad { border-color: var(--bad); color: #ffd6df; }
.toast.ok { border-color: var(--good); color: #d8fff0; }
.fx { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 65; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}
@keyframes pulse { 50% { opacity: .35; } }
@keyframes floaty { 50% { transform: translateY(-4px); } }