/* Maps Sigil's palette onto the variables connect.css reads, and supplies the few base classes it expects from the app shell. */
:root {
  --bg: #0a0812; --surface-1: #141024; --surface-2: #17122b; --surface-3: #1f1a33; --surface-4: #2a2340;
  --line: rgb(243 238 224/.08); --line-2: rgb(243 238 224/.14); --line-3: rgb(243 238 224/.24);
  --text-1: #f3eee0; --text-2: rgb(243 238 224/.74); --text-3: rgb(243 238 224/.56);
  --brand: #f4b728; --brand-ink: #ffe08a; --brand-soft: rgb(244 183 40/.14); --on-brand: #1a1200; --curve-hot: #ffb347;
  --buy: #5fd38d; --buy-ink: #8be9ae; --buy-soft: rgb(95 211 141/.14); --sell: #ff6b6b; --sell-ink: #ff9a9a; --sell-soft: rgb(255 107 107/.14);
  --warn-ink: #ffae7a; --warn-soft: rgb(255 140 66/.14);
  --focus: 0 0 0 2px #0a0812, 0 0 0 4px #f4b728; --scrim: rgb(4 3 8/.6);
  --shadow-float: 0 12px 32px -12px rgb(0 0 0/.75), 0 0 0 1px rgb(243 238 224/.14);
  --font-ui: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-num: ui-monospace, "SF Mono", Menlo, monospace;
}
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 0 18px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--surface-2); color: var(--text-1); font: 600 15px/1 var(--font-ui); cursor: pointer; }
.btn.primary { background: var(--brand); color: var(--on-brand); border-color: transparent; }
.btn:focus-visible, .iconbtn:focus-visible, .wd-account:focus-visible { outline: none; box-shadow: var(--focus); }
.btn[disabled] { opacity: .55; cursor: not-allowed; }
.num, .mono { font-family: var(--font-num); font-variant-numeric: tabular-nums; }
.spinner { width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgb(243 238 224/.25); border-top-color: var(--brand); animation: sw-spin .8s linear infinite; display: inline-block; }
@keyframes sw-spin { to { transform: rotate(360deg); } }
.s16 { width: 16px; height: 16px; }
body.modal-open { overflow: hidden; }
#toasts { position: fixed; right: 16px; bottom: 16px; display: grid; gap: 8px; z-index: 60; }
/* Connect wallet: the Layerdex dialog, account menu and header button (approved 2026-10-15), geometry, motion and
   hierarchy kept exactly (420 px · radius 28 · rows 60 · tiles 40 · header logo 28 · orbit 112/76 · the timings),
   colours re-pointed to this site's tokens (VISUAL §3 names, read through --wd-* with fallbacks so the dialog is
   complete before and after the shell lane defines them). Dark is :root; light under prefers-color-scheme: light
   unless data-theme="dark", and under data-theme="light" always. All wallet CSS lives here (nothing in style.css). */
:root {
  --wd-bg: var(--bg, #0a0b0d); --wd-surface: var(--surface-1, #111317); --wd-surface-2: var(--surface-2, #171a1f); --wd-surface-3: var(--surface-3, #1f232a);
  --wd-line: var(--line, rgb(236 233 226/.08)); --wd-line-2: var(--line-2, rgb(236 233 226/.14)); --wd-line-3: var(--line-3, rgb(236 233 226/.24));
  --wd-t1: var(--text-1, #f1eee7); --wd-t2: var(--text-2, rgb(241 238 231/.74)); --wd-t3: var(--text-3, rgb(241 238 231/.56));
  --wd-brand: var(--brand, #f2b33d); --wd-brand-ink: var(--brand-ink, #ffd27a); --wd-brand-soft: var(--brand-soft, rgb(242 179 61/.14)); --wd-brand-hot: var(--curve-hot, #ff8a3d); --wd-on-brand: var(--on-brand, #15130c);
  --wd-ok: var(--buy, #2fd37a); --wd-ok-ink: var(--buy-ink, #5fe39a); --wd-ok-soft: var(--buy-soft, rgb(47 211 122/.14));
  --wd-bad: var(--sell, #f25b63); --wd-bad-ink: var(--sell-ink, #ff8a90); --wd-bad-soft: var(--sell-soft, rgb(242 91 99/.14));
  --wd-warn-ink: var(--warn-ink, #ffae7a); --wd-warn-soft: var(--warn-soft, rgb(255 140 66/.14));
  --wd-focus: var(--focus, 0 0 0 2px #0a0b0d, 0 0 0 4px #f2b33d); --wd-scrim: var(--scrim, rgb(4 5 7/.55));
  --wd-shadow: var(--shadow-float, 0 12px 32px -12px rgb(0 0 0/.7), 0 0 0 1px rgb(236 233 226/.14));
  --wd-sheet-shadow: 0 4px 10px rgb(0 0 0/.3), 0 40px 90px -20px rgb(0 0 0/.7), 0 0 0 1px var(--wd-line-2);
  --wd-tile-ring: rgb(255 255 255/.12); --wd-tile-ring-strong: rgb(255 255 255/.18); --wd-get-bg: var(--wd-surface-3); --wd-pill-bg: var(--wd-surface-3);
  --wd-font: var(--font-ui, var(--font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif)); --wd-font-display: var(--font-display, var(--wd-font)); --wd-mono: var(--font-num, var(--mono, ui-monospace, "SF Mono", Menlo, monospace));
  --wd-fill-1: color-mix(in srgb, var(--wd-t1) 5%, transparent); --wd-fill-2: color-mix(in srgb, var(--wd-t1) 8%, transparent); --wd-fill-3: color-mix(in srgb, var(--wd-t1) 12%, transparent);
  --wd-sheet: color-mix(in srgb, var(--wd-surface) 94%, transparent); --wd-sheet-fx: blur(40px) saturate(150%); --wd-scrim-fx: blur(10px);
  --wd-pane: color-mix(in srgb, var(--wd-surface-2) 80%, transparent);
  --wd-r-2xl: var(--r-2xl, 28px); --wd-r-menu: 22px; --wd-r-row: 16px;
  --wd-e-out: var(--e-out, cubic-bezier(.16,1,.3,1)); --wd-e-in: var(--e-in, cubic-bezier(.4,0,1,1)); --wd-e-quad: var(--e-quad, cubic-bezier(.25,.46,.45,.94)); --wd-e-spring: var(--e-spring, cubic-bezier(.34,1.56,.64,1)); --wd-e-sheet: var(--e-sheet, cubic-bezier(.32,.72,0,1));
  --wd-d-press: var(--d-press, 90ms); --wd-d-hover: var(--d-hover, 140ms); --wd-d-pop: var(--d-pop, 220ms); --wd-d-dialog: var(--d-dialog, 260ms); --wd-d-sheet: var(--d-sheet, 500ms);
  --wd-account-h: 42px;
  /* burst petals: confetti only, never text (five literal hues, WALLET §10) */
  --wd-p-lime: #d9f46b; --wd-p-petal: #f6a6c1; --wd-p-sun: #ffd166; --wd-p-leaf: #a0b854; --wd-p-sky: #93c8ff;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --wd-bg: var(--bg, #f6f4ef); --wd-surface: var(--surface-1, #ffffff); --wd-surface-2: var(--surface-2, #f1efe9); --wd-surface-3: var(--surface-3, #e8e5de);
    --wd-line: var(--line, rgb(21 23 27/.08)); --wd-line-2: var(--line-2, rgb(21 23 27/.14)); --wd-line-3: var(--line-3, rgb(21 23 27/.24));
    --wd-t1: var(--text-1, #15171b); --wd-t2: var(--text-2, rgb(21 23 27/.74)); --wd-t3: var(--text-3, rgb(21 23 27/.58));
    --wd-brand: var(--brand, #e9a51f); --wd-brand-ink: var(--brand-ink, #8a5a00); --wd-brand-soft: var(--brand-soft, rgb(233 165 31/.16)); --wd-brand-hot: var(--curve-hot, #e8641f);
    --wd-ok: var(--buy, #0c7d40); --wd-ok-ink: var(--buy-ink, #0e7a41); --wd-ok-soft: var(--buy-soft, rgb(21 168 90/.14));
    --wd-bad: var(--sell, #c9323c); --wd-bad-ink: var(--sell-ink, #b02a33); --wd-bad-soft: var(--sell-soft, rgb(220 61 71/.12));
    --wd-warn-ink: var(--warn-ink, #9a4a05); --wd-warn-soft: var(--warn-soft, rgb(232 118 31/.14));
    --wd-focus: var(--focus, 0 0 0 2px #fff, 0 0 0 4px #8a5a00); --wd-scrim: var(--scrim, rgb(21 23 27/.36));
    --wd-shadow: var(--shadow-float, 0 12px 32px -14px rgb(21 23 27/.35), 0 0 0 1px rgb(21 23 27/.08));
    --wd-sheet-shadow: 0 4px 10px rgb(21 23 27/.08), 0 40px 90px -20px rgb(21 23 27/.5), 0 0 0 1px rgb(21 23 27/.07);
    --wd-tile-ring: rgb(0 0 0/.07); --wd-tile-ring-strong: rgb(21 23 27/.26); --wd-get-bg: #fff; --wd-pill-bg: #fff;
    --wd-sheet: color-mix(in srgb, var(--wd-surface) 92%, transparent); --wd-pane: color-mix(in srgb, #fff 72%, transparent);
  }
}
:root[data-theme="light"] {
  --wd-bg: var(--bg, #f6f4ef); --wd-surface: var(--surface-1, #ffffff); --wd-surface-2: var(--surface-2, #f1efe9); --wd-surface-3: var(--surface-3, #e8e5de);
  --wd-line: var(--line, rgb(21 23 27/.08)); --wd-line-2: var(--line-2, rgb(21 23 27/.14)); --wd-line-3: var(--line-3, rgb(21 23 27/.24));
  --wd-t1: var(--text-1, #15171b); --wd-t2: var(--text-2, rgb(21 23 27/.74)); --wd-t3: var(--text-3, rgb(21 23 27/.58));
  --wd-brand: var(--brand, #e9a51f); --wd-brand-ink: var(--brand-ink, #8a5a00); --wd-brand-soft: var(--brand-soft, rgb(233 165 31/.16)); --wd-brand-hot: var(--curve-hot, #e8641f);
  --wd-ok: var(--buy, #0c7d40); --wd-ok-ink: var(--buy-ink, #0e7a41); --wd-ok-soft: var(--buy-soft, rgb(21 168 90/.14));
  --wd-bad: var(--sell, #c9323c); --wd-bad-ink: var(--sell-ink, #b02a33); --wd-bad-soft: var(--sell-soft, rgb(220 61 71/.12));
  --wd-warn-ink: var(--warn-ink, #9a4a05); --wd-warn-soft: var(--warn-soft, rgb(232 118 31/.14));
  --wd-focus: var(--focus, 0 0 0 2px #fff, 0 0 0 4px #8a5a00); --wd-scrim: var(--scrim, rgb(21 23 27/.36));
  --wd-shadow: var(--shadow-float, 0 12px 32px -14px rgb(21 23 27/.35), 0 0 0 1px rgb(21 23 27/.08));
  --wd-sheet-shadow: 0 4px 10px rgb(21 23 27/.08), 0 40px 90px -20px rgb(21 23 27/.5), 0 0 0 1px rgb(21 23 27/.07);
  --wd-tile-ring: rgb(0 0 0/.07); --wd-tile-ring-strong: rgb(21 23 27/.26); --wd-get-bg: #fff; --wd-pill-bg: #fff;
  --wd-sheet: color-mix(in srgb, var(--wd-surface) 92%, transparent); --wd-pane: color-mix(in srgb, #fff 72%, transparent);
}

/* ---------- shared bits (scoped: the app's own .btn, .chip, .row stay untouched) ---------- */
.wallet-dialog, .menu-dialog, .wallet-slot { font-family: var(--wd-font); letter-spacing: -.011em; -webkit-font-smoothing: antialiased; }
.wallet-dialog .sr, .menu-dialog .sr, #zfl-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wallet-dialog .ic, .menu-dialog .ic, .wallet-slot .ic { display: inline-block; vertical-align: middle; width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.wallet-dialog .ic.s14, .menu-dialog .ic.s14, .wallet-slot .ic.s14 { width: 14px; height: 14px; }
.wallet-dialog .ic.s16, .menu-dialog .ic.s16, .wallet-slot .ic.s16 { width: 16px; height: 16px; }
.wallet-dialog .ic.s20, .menu-dialog .ic.s20 { width: 20px; height: 20px; }
.wallet-dialog .num, .menu-dialog .num, .wallet-slot .num { font-variant-numeric: tabular-nums; }
.wallet-dialog .mono, .menu-dialog .mono, .wallet-slot .mono { font-family: var(--wd-mono); font-size: 13px; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.wallet-dialog .row, .menu-dialog .row { display: flex; align-items: center; gap: 12px; }
.wallet-dialog .gap8, .menu-dialog .gap8 { gap: 8px; }
.wallet-dialog .wrapf { flex-wrap: wrap; }
.wallet-dialog .center, .menu-dialog .center { text-align: center; justify-content: center; }
.wallet-dialog .stackv, .menu-dialog .stackv { display: flex; flex-direction: column; }
.wallet-dialog .grow, .menu-dialog .grow { flex: 1; min-width: 0; }
.wallet-dialog .small, .menu-dialog .small { font: 450 12.5px/18px var(--wd-font); color: var(--wd-t3); }
/* the button reset has zero specificity (:where), so a control's own class rule (.wrow 8/10, .more-row, .menu-item, .wd-account) always wins on a <button> exactly as on an <a> */
:where(.wallet-dialog, .menu-dialog, .wallet-slot) button { font: inherit; color: inherit; letter-spacing: inherit; cursor: pointer; background: none; border: 0; padding: 0; }
.wallet-dialog a, .menu-dialog a { color: inherit; text-decoration: none; }
.wallet-dialog [hidden], .menu-dialog [hidden] { display: none !important; }
.spinner { width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: wd-spin .8s linear infinite; flex: none; opacity: .9; }
.iconbtn.spin .ic { animation: wd-spin .8s linear infinite; }
@keyframes wd-spin { to { transform: rotate(360deg); } }

/* buttons: tactile pebbles (Layerdex .btn), on this site's tokens */
:is(.wallet-dialog, .menu-dialog, .wallet-slot) .btn { --h: 40px; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: var(--h); padding: 0 18px; border: 0; border-radius: 999px; white-space: nowrap; font: 620 14px/20px var(--wd-font); letter-spacing: -.006em; user-select: none; isolation: isolate; text-decoration: none; transition: transform var(--wd-d-press) var(--wd-e-out), box-shadow var(--wd-d-hover) var(--wd-e-quad), background-color var(--wd-d-hover) var(--wd-e-quad), color var(--wd-d-hover) var(--wd-e-quad), filter var(--wd-d-hover); }
:is(.wallet-dialog, .menu-dialog, .wallet-slot) .btn:active { transform: translateY(1px) scale(.975); transition-duration: 60ms; }
:is(.wallet-dialog, .menu-dialog, .wallet-slot) .btn:focus-visible { outline: none; box-shadow: var(--wd-focus); }
:is(.wallet-dialog, .menu-dialog, .wallet-slot) .btn.sm { --h: 32px; padding: 0 13px; font-size: 13px; gap: 6px; }
:is(.wallet-dialog, .menu-dialog, .wallet-slot) .btn.lg { --h: 48px; padding: 0 22px; font-size: 15px; }
:is(.wallet-dialog, .menu-dialog, .wallet-slot) .btn.full { width: 100%; }
:is(.wallet-dialog, .menu-dialog, .wallet-slot) .btn.primary { color: var(--wd-on-brand); background: linear-gradient(180deg, color-mix(in srgb, var(--wd-brand) 88%, #fff) 0%, var(--wd-brand) 100%); box-shadow: inset 0 1px 0 rgb(255 255 255/.25), inset 0 -2px 0 rgb(0 0 0/.18), 0 1px 2px rgb(0 0 0/.25), 0 8px 18px -8px color-mix(in srgb, var(--wd-brand) 70%, transparent); }
:is(.wallet-dialog, .menu-dialog, .wallet-slot) .btn.primary:hover { transform: translateY(-1px); filter: brightness(1.04); box-shadow: inset 0 1px 0 rgb(255 255 255/.28), inset 0 -2px 0 rgb(0 0 0/.18), 0 2px 3px rgb(0 0 0/.25), 0 12px 24px -10px color-mix(in srgb, var(--wd-brand) 75%, transparent); }
:is(.wallet-dialog, .menu-dialog, .wallet-slot) .btn.primary:active { transform: translateY(1px) scale(.975); filter: brightness(.96); box-shadow: inset 0 2px 3px rgb(0 0 0/.3); }
:is(.wallet-dialog, .menu-dialog) .btn.secondary { color: var(--wd-t1); background: var(--wd-surface-2); box-shadow: inset 0 0 0 1px var(--wd-line-2), inset 0 -2px 0 rgb(0 0 0/.06), 0 1px 2px rgb(0 0 0/.08); }
:is(.wallet-dialog, .menu-dialog) .btn.secondary:hover { box-shadow: inset 0 0 0 1px var(--wd-line-3), inset 0 -2px 0 rgb(0 0 0/.06), 0 4px 10px -4px rgb(0 0 0/.18); transform: translateY(-1px); }
:is(.wallet-dialog, .menu-dialog) .btn.ghost { color: var(--wd-t1); background: transparent; }
:is(.wallet-dialog, .menu-dialog) .btn.ghost:hover { background: var(--wd-fill-2); }
:is(.wallet-dialog, .menu-dialog) .btn.ghost:active { background: var(--wd-fill-3); }
:is(.wallet-dialog, .menu-dialog) .btn.danger-ghost { color: var(--wd-bad-ink); background: transparent; }
:is(.wallet-dialog, .menu-dialog) .btn.danger-ghost:hover { background: var(--wd-bad-soft); }
:is(.wallet-dialog, .menu-dialog, .wallet-slot) .btn[disabled] { color: var(--wd-t3); background: var(--wd-fill-2); box-shadow: inset 0 0 0 1px var(--wd-line-2); cursor: not-allowed; transform: none; filter: none; }
:is(.wallet-dialog, .menu-dialog) .btn.is-loading { cursor: progress; }
:is(.wallet-dialog, .menu-dialog) .btn.is-loading .ic { display: none; }

/* logos: official files only; every tile gets a ring in dark, the white-tile marks in light too */
.wl, .cl { display: block; width: var(--s, 20px); height: var(--s, 20px); object-fit: cover; flex: none; }
.wl { --s: 40px; border-radius: 25%; box-shadow: 0 0 0 1px var(--wd-tile-ring); background: var(--wd-surface-3); }
.wl.ring { box-shadow: 0 0 0 1px var(--wd-tile-ring-strong); }
.cl { border-radius: 50%; box-shadow: 0 0 0 1px var(--wd-tile-ring); }
img.wl[style*="--s"], img.cl[style*="--s"] { width: var(--s) !important; height: var(--s) !important; }
.wl.wl-test { display: grid; place-items: center; background: var(--wd-warn-soft); color: var(--wd-warn-ink); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--wd-warn-ink) 35%, transparent); }
.stack { display: inline-flex; align-items: center; }
.stack > * + * { margin-left: 4px; } /* logos sit side by side, NEVER overlapped (no cropped marks) */

/* chips, pills */
:is(.wallet-dialog, .menu-dialog) .chip { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; border-radius: 999px; font: 620 12px/16px var(--wd-font); letter-spacing: .005em; white-space: nowrap; background: var(--wd-fill-2); color: var(--wd-t2); }
:is(.wallet-dialog, .menu-dialog) .chip.sm { height: 22px; padding: 0 8px; font-size: 12px; }
:is(.wallet-dialog, .menu-dialog) .chip.ok { background: var(--wd-ok-soft); color: var(--wd-ok-ink); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--wd-ok) 25%, transparent); }
.chainpill { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 9px 0 4px; border-radius: 999px; background: var(--wd-pill-bg); box-shadow: 0 0 0 1px var(--wd-line-2), 0 2px 8px -2px rgb(0 0 0/.25); font: 620 12px/1 var(--wd-font); color: var(--wd-t1); white-space: nowrap; }
.chainpill .cl { --s: 18px; }
/* two classes: the dialog's own `a { color: inherit; text-decoration: none }` reset (one class + element) must not beat the link style */
.wallet-dialog .tlink, .menu-dialog .tlink { display: inline-flex; align-items: center; gap: 3px; color: var(--wd-t1); font-weight: 620; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--wd-t1) 32%, transparent); text-underline-offset: 3px; }
.wallet-dialog .tlink:hover, .menu-dialog .tlink:hover { text-decoration-color: currentColor; }

/* ---------- header: the wallet button (one line, never wraps) ---------- */
.wallet-slot { display: flex; align-items: center; }
.wd-connect { white-space: nowrap; }
.wd-connect .cw-s, .wd-account .busy-s, .ad-s { display: none; }
.wd-account { display: inline-flex; align-items: center; gap: 10px; height: var(--wd-account-h); padding: 0 12px 0 6px; border-radius: 999px; background: color-mix(in srgb, var(--wd-surface) 86%, transparent); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--wd-surface) 50%, #fff 20%), 0 0 0 1px var(--wd-line-2), 0 1px 2px rgb(0 0 0/.06), 0 6px 16px -6px rgb(0 0 0/.2); color: var(--wd-t1); white-space: nowrap; cursor: pointer; transition: transform var(--wd-d-press) var(--wd-e-out), box-shadow var(--wd-d-hover); }
.wd-account:hover { box-shadow: inset 0 1px 0 color-mix(in srgb, var(--wd-surface) 50%, #fff 20%), 0 0 0 1px var(--wd-line-3), 0 2px 4px rgb(0 0 0/.06), 0 18px 40px -12px rgb(0 0 0/.32); }
.wd-account:active { transform: scale(.98); }
.wd-account:focus-visible { outline: none; box-shadow: var(--wd-focus); }
.wd-account.open { box-shadow: 0 0 0 1px var(--wd-line-3), 0 2px 4px rgb(0 0 0/.06), 0 18px 40px -12px rgb(0 0 0/.32); }
.wd-account .wl { --s: 28px; }
.wd-account .wallet-bal { font: 650 13.5px/1 var(--wd-mono); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.wd-account .addr { font: 600 13.5px/1 var(--wd-mono); letter-spacing: -.01em; color: var(--wd-t3); white-space: nowrap; }
.wd-account .chev { color: var(--wd-t3); transition: transform var(--wd-d-pop) var(--wd-e-out); }
.wd-account.open .chev { transform: rotate(180deg); }
.wd-account.busy { padding: 0 16px 0 8px; cursor: progress; font: 600 14px/1 var(--wd-font); }
@media (pointer: coarse) { .wd-account { -webkit-backdrop-filter: none; backdrop-filter: none; } }

/* ---------- dialog / bottom-sheet shell (native <dialog>) ---------- */
dialog.sheet-dialog { position: fixed; inset: 0; margin: auto; width: 420px; max-width: calc(100vw - 32px); height: fit-content; max-height: calc(100dvh - 48px); padding: 8px; border: 0; border-radius: var(--wd-r-2xl); background: var(--wd-sheet); -webkit-backdrop-filter: var(--wd-sheet-fx); backdrop-filter: var(--wd-sheet-fx); box-shadow: var(--wd-sheet-shadow); color: var(--wd-t1); font: 400 15px/22px var(--wd-font); overflow: auto; overscroll-behavior: contain; text-shadow: none; box-sizing: border-box; }
dialog.sheet-dialog::backdrop { background: var(--wd-scrim); -webkit-backdrop-filter: var(--wd-scrim-fx); backdrop-filter: var(--wd-scrim-fx); animation: wd-fade-in 200ms var(--wd-e-out); }
dialog.sheet-dialog[open] { animation: wd-dlg-in var(--wd-d-dialog) var(--wd-e-out); }
/* exit: the dialog is closed at once (input is never blocked after a close); the fade-out is a transition of overlay + display */
dialog.sheet-dialog { transition: opacity 160ms var(--wd-e-in), transform 160ms var(--wd-e-in), overlay 160ms var(--wd-e-in) allow-discrete, display 160ms var(--wd-e-in) allow-discrete; }
dialog.sheet-dialog:not([open]) { opacity: 0; transform: translateY(6px) scale(.98); pointer-events: none; }
dialog.sheet-dialog::backdrop { transition: opacity 160ms var(--wd-e-in), overlay 160ms var(--wd-e-in) allow-discrete, display 160ms var(--wd-e-in) allow-discrete; }
dialog.sheet-dialog:not([open])::backdrop { opacity: 0; }
dialog.sheet-dialog:focus, dialog.sheet-dialog:focus-visible { outline: none; }
@keyframes wd-dlg-in { from { opacity: 0; transform: translateY(8px) scale(.96); } }
@keyframes wd-fade-in { from { opacity: 0; } }
@keyframes wd-fade-out { to { opacity: 0; } }
dialog.sheet-dialog *, dialog.sheet-dialog *::before, dialog.sheet-dialog *::after { box-sizing: border-box; }
.dlg-head { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 14px; min-height: 52px; }
.dlg-head h2 { flex: 1; margin: 0; font: 700 18px/24px var(--wd-font); letter-spacing: -.018em; }
.dlg-head h2.sr { position: absolute; }
.dlg-head .iconbtn[hidden] + h2 { padding-left: 0; }
.dlg-head > .iconbtn:last-child { margin-left: auto; }
.dlg-sub { margin: 0; padding: 0 14px 10px; font: 450 13.5px/20px var(--wd-font); color: var(--wd-t2); }
.dlg-foot { margin-top: 6px; padding: 12px 14px 8px; border-top: 1px solid var(--wd-line); font: 450 12.5px/18px var(--wd-font); color: var(--wd-t3); display: flex; gap: 8px; align-items: flex-start; }
.dlg-foot.center { justify-content: center; text-align: center; }
.dlg-foot .ic { margin-top: 1px; flex: none; }
.dlg-foot .foot-brand { font-weight: 650; color: var(--wd-t2); }
.iconbtn { position: relative; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; color: var(--wd-t2); flex: none; transition: background-color var(--wd-d-hover), transform var(--wd-d-press); }
.iconbtn::after { content: ""; position: absolute; inset: -5px; }
.iconbtn:hover { background: var(--wd-fill-2); color: var(--wd-t1); }
.iconbtn:active { transform: scale(.92); }
.iconbtn:focus-visible { outline: none; box-shadow: var(--wd-focus); }
.iconbtn.sm { width: 32px; height: 32px; border-radius: 10px; }
.iconbtn.sm::after { inset: -6px; } /* visible 32, hit 44 */
.iconbtn.ok { background: var(--wd-ok-soft); color: var(--wd-ok-ink); }
dialog.sheet-dialog .iconbtn svg { width: 18px; height: 18px; }
dialog.sheet-dialog .iconbtn.sm svg { width: 16px; height: 16px; }
.grabber { display: none; width: 38px; height: 5px; border-radius: 3px; background: var(--wd-line-3); margin: 4px auto 2px; }
.group-label { display: flex; align-items: center; justify-content: space-between; padding: 12px 10px 6px; font: 650 13px/16px var(--wd-font); color: var(--wd-t2); }
.group-label .num { color: var(--wd-t3); }

/* wallet row */
.wrow { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 60px; padding: 8px 10px; border-radius: var(--wd-r-row); text-align: left; color: var(--wd-t1); cursor: pointer; text-decoration: none; transition: background-color var(--wd-d-hover), transform var(--wd-d-press) var(--wd-e-out); }
.wrow:hover { background: var(--wd-fill-1); }
.wrow:active { transform: scale(.99); background: var(--wd-fill-2); }
.wrow:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--wd-brand); background: var(--wd-fill-1); }
.wrow .wl { --s: 40px; }
.wrow .name { font: 650 15px/20px var(--wd-font); letter-spacing: -.012em; display: flex; align-items: center; gap: 8px; }
.wrow .name .chip { font-weight: 600; }
.wrow .meta { font: 450 12.5px/17px var(--wd-font); color: var(--wd-t3); }
.wrow .end { margin-left: auto; display: flex; align-items: center; gap: 8px; color: var(--wd-t3); }
.wrow.connected { background: var(--wd-ok-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--wd-ok) 28%, transparent); }
.get { position: relative; display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 10px; border-radius: 999px; background: var(--wd-get-bg); box-shadow: inset 0 0 0 1px var(--wd-line-2); font: 620 12.5px/1 var(--wd-font); color: var(--wd-t1); white-space: nowrap; }
.get::after { content: ""; position: absolute; inset: -8px -4px; }
.more-row { display: flex; align-items: center; gap: 10px; width: 100%; height: 48px; padding: 0 10px; border-radius: 14px; color: var(--wd-t2); font: 600 13.5px/1 var(--wd-font); cursor: pointer; }
.more-row:hover { background: var(--wd-fill-1); }
.more-row:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--wd-brand); }
.more-row .stack { gap: 0; }
.more-row .stack .wl { --s: 22px; }
#wallet-disconnect { display: flex; margin: 4px 10px 2px; height: 36px; padding: 0 10px; }
#wallet-status { margin: 6px 8px 0; padding: 12px 14px; border-radius: 14px; background: var(--wd-surface-2); box-shadow: inset 0 0 0 1px var(--wd-line-2); color: var(--wd-t2); font: 450 13.5px/20px var(--wd-font); overflow-wrap: anywhere; }
#wallet-status.error { background: var(--wd-bad-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--wd-bad) 22%, transparent); color: var(--wd-bad-ink); }
#wallet-dialog[data-view="flow"] #wallet-context { display: none; }
#wallet-dialog .flow-actions { padding: 8px; }

/* connecting: the orbit, the badge, the burst */
.connect-stage { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 16px 18px 18px; gap: 6px; }
.orbit { position: relative; width: 112px; height: 112px; display: grid; place-items: center; margin: 4px 0 14px; }
.orbit .wl { --s: 76px; box-shadow: 0 0 0 1px var(--wd-tile-ring), 0 10px 24px -8px rgb(0 0 0/.35); }
.orbit::before { content: ""; position: absolute; inset: 0; border-radius: 32%; padding: 3px; background: conic-gradient(from 0deg, transparent 0 62%, var(--wd-brand) 75%, var(--wd-brand-hot) 92%, transparent 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); animation: wd-spin 1.3s linear infinite; }
.orbit::after { content: ""; position: absolute; inset: 0; border-radius: 32%; box-shadow: inset 0 0 0 3px var(--wd-fill-2); }
.orbit.done::before { background: var(--wd-ok); animation: none; }
.orbit.fail::before { background: var(--wd-bad); animation: none; }
.orbit .badge { position: absolute; right: 6px; bottom: 6px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: #fff; box-shadow: 0 0 0 3px var(--wd-surface); z-index: 2; }
.orbit .badge.ok { background: var(--wd-ok); }
.orbit .badge.bad { background: var(--wd-bad); }
.orbit.done .badge { animation: wd-pop 600ms var(--wd-e-spring) both; }
@keyframes wd-pop { 0% { transform: scale(0); } 60% { transform: scale(1.15); } 100% { transform: scale(1); } }
.connect-stage h3 { margin: 0; font: 720 20px/26px var(--wd-font-display); letter-spacing: -.02em; }
.connect-stage p { margin: 0; max-width: 34ch; font: 450 14px/21px var(--wd-font); color: var(--wd-t2); }
.connect-stage .actions { margin-top: 14px; justify-content: center; }
.connect-stage .pills { margin-top: 10px; }
.burst { position: absolute; inset: -26px; pointer-events: none; }
.burst i { position: absolute; left: 50%; top: 50%; width: 9px; height: 14px; border-radius: 9px 9px 9px 1px; transform-origin: 0 0; opacity: 0; animation: wd-petal 900ms var(--wd-e-out) both; }
.burst .p0 { --a: 0deg; background: var(--wd-p-lime); } .burst .p1 { --a: 36deg; background: var(--wd-p-petal); } .burst .p2 { --a: 72deg; background: var(--wd-p-sun); } .burst .p3 { --a: 108deg; background: var(--wd-p-leaf); } .burst .p4 { --a: 144deg; background: var(--wd-p-sky); }
.burst .p5 { --a: 180deg; background: var(--wd-p-lime); } .burst .p6 { --a: 216deg; background: var(--wd-p-petal); } .burst .p7 { --a: 252deg; background: var(--wd-p-sun); } .burst .p8 { --a: 288deg; background: var(--wd-p-leaf); } .burst .p9 { --a: 324deg; background: var(--wd-p-sky); }
@keyframes wd-petal { 0% { opacity: 0; transform: rotate(var(--a)) translate(0, -30px) rotate(45deg) scale(.4); } 35% { opacity: 1; } 100% { opacity: 0; transform: rotate(var(--a)) translate(0, -82px) rotate(45deg) scale(1); } }

/* ---------- account menu: popover under the wallet button (desktop), bottom sheet (phones) ---------- */
dialog.menu-dialog { inset: var(--menu-top, 74px) var(--menu-right, 24px) auto auto; margin: 0; width: 368px; height: auto; max-height: calc(100dvh - var(--menu-top, 74px) - 16px); padding: 10px; border-radius: var(--wd-r-menu); box-shadow: var(--wd-shadow); }
dialog.menu-dialog::backdrop { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
dialog.menu-dialog[open] { animation: wd-menu-in var(--wd-d-pop) var(--wd-e-out); transform-origin: top right; }
@keyframes wd-menu-in { from { opacity: 0; transform: translateY(-6px) scale(.97); } }
.menu-dialog .grabber { display: none; }
.whead { display: flex; align-items: center; gap: 12px; padding: 4px 4px 12px; }
.whead b { font: 680 15px/20px var(--wd-font); }
.whead .wl { --s: 40px; }
.whead .js-close { margin-left: 2px; }
.arows { padding: 2px 4px; border-radius: 16px; background: var(--wd-pane); box-shadow: inset 0 0 0 1px var(--wd-line); }
.arow { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 6px 4px 6px 8px; }
.arow + .arow { border-top: 1px solid var(--wd-line); }
.arow .cl { --s: 28px; }
.arow .a-tile { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--wd-fill-2); color: var(--wd-t2); flex: none; }
.a-addr { font: 600 13.5px/18px var(--wd-mono); white-space: nowrap; }
.a-sub { display: block; }
.cr-done { display: none; align-items: center; gap: 4px; color: var(--wd-ok-ink); font-weight: 650; }
.copied .cr-label { display: none; }
.copied .cr-done { display: inline-flex; }
.arow .iconbtn { flex: none; }
.menu-dialog .airdrop { padding: 10px 4px 2px; display: grid; gap: 8px; }
.menu-dialog .airdrop .small { text-align: center; }
.menu-dialog .menu-extras { padding-top: 8px; display: grid; gap: 6px; }
.menu-dialog .divider { height: 1px; background: var(--wd-line); margin: 10px 0 6px; border: 0; }
.menu-item { position: relative; display: flex; align-items: center; gap: 10px; width: 100%; height: 40px; padding: 0 10px; border-radius: 11px; font: 560 14px/20px var(--wd-font); color: var(--wd-t1); text-align: left; cursor: pointer; }
.menu-item:hover { background: var(--wd-fill-1); }
.menu-item:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--wd-brand); background: var(--wd-fill-1); }
.menu-item .ic { color: var(--wd-t2); }
.menu-item.danger { color: var(--wd-bad-ink); }
.menu-item.danger .ic { color: var(--wd-bad); }

/* ---------- phones: bottom sheets, short labels ---------- */
@media (max-width: 560px) {
  dialog.sheet-dialog, dialog.menu-dialog { inset: auto 8px 8px 8px; margin: 0; width: auto; max-width: none; max-height: calc(100dvh - 60px); padding-bottom: calc(8px + env(safe-area-inset-bottom)); border-radius: var(--wd-r-2xl); transform: translateY(var(--drag, 0px)); transition: transform 300ms var(--wd-e-sheet); }
  dialog.sheet-dialog.dragging { transition: none; }
  dialog.sheet-dialog::backdrop, dialog.menu-dialog::backdrop { background: var(--wd-scrim); }
  dialog.sheet-dialog[open], dialog.menu-dialog[open] { animation: wd-sheet-in var(--wd-d-sheet) var(--wd-e-sheet); }
  dialog.sheet-dialog, dialog.menu-dialog { transition: transform 220ms var(--wd-e-in), opacity 220ms var(--wd-e-in), overlay 220ms var(--wd-e-in) allow-discrete, display 220ms var(--wd-e-in) allow-discrete; }
  dialog.sheet-dialog:not([open]), dialog.menu-dialog:not([open]) { transform: translateY(100%); opacity: 1; }
  dialog.sheet-dialog .grabber, .menu-dialog .grabber { display: block; }
  dialog.sheet-dialog .dlg-head { padding-top: 2px; }
  .menu-dialog .whead { padding-top: 8px; }
}
@keyframes wd-sheet-in { from { transform: translateY(100%); } }
@media (max-width: 430px) {
  .wd-connect .cw-l, .wd-account .busy-l, .wd-account .addr, .wd-account .chev { display: none; }
  .wd-account { gap: 8px; padding: 0 10px 0 4px; } /* logo + balance only, ≤ 150 px next to the mark, Create, live dot and network pill */
  .wd-connect .cw-s, .wd-account .busy-s { display: inline; }
}
@media (pointer: coarse) {
  dialog.sheet-dialog, dialog.sheet-dialog::backdrop { -webkit-backdrop-filter: none; backdrop-filter: none; }
  dialog.sheet-dialog { background: var(--wd-surface); }
  dialog.sheet-dialog::backdrop { background: color-mix(in srgb, var(--wd-scrim) 100%, #000 10%); }
}
@media (prefers-reduced-transparency: reduce) {
  dialog.sheet-dialog, dialog.sheet-dialog::backdrop, .wd-account { -webkit-backdrop-filter: none; backdrop-filter: none; }
  dialog.sheet-dialog { background: var(--wd-surface); }
}
@media (prefers-reduced-motion: reduce) {
  dialog.sheet-dialog[open], dialog.menu-dialog[open] { animation: wd-fade-in 120ms linear; }
  dialog.sheet-dialog, dialog.menu-dialog, dialog.sheet-dialog::backdrop { transition-duration: 1ms; }
  #wallet-dialog .burst { display: none; }
  #wallet-dialog .orbit::before { animation: none; }
  #wallet-dialog .orbit:not(.done):not(.fail)::after { animation: wd-ring-pulse 1.6s ease-in-out infinite; }
  .spinner, .iconbtn.spin .ic { animation-duration: 1.6s; }
}
@keyframes wd-ring-pulse { 50% { box-shadow: inset 0 0 0 3px var(--wd-brand); } }