/* Wake: the parts every page shares, including the trade terminal.
 *
 * Tokens, the header, menus, modals, toasts, and the handful of components they use. The
 * generic components (buttons, pills, avatars) are scoped with :where(), which adds no
 * weight: on the site's own pages (body.site) they apply everywhere, and on the trade screen
 * inside the terminal (.term), the header, menus, modals and toasts. Page layout lives in
 * styles.css, which the trade screen does not load; it has trade.css instead.
 */

:root {
  --bg: #000000;
  --bg-soft: #040607;
  --surface: #0a0f12;
  --surface-2: #0e1519;
  --surface-3: #141d22;
  --line: rgba(136, 218, 226, 0.09);
  --line-2: rgba(136, 218, 226, 0.18);
  --line-3: rgba(136, 218, 226, 0.32);
  --text: #efeff0;
  --text-2: #b3bfc3;
  --muted: #74848a;
  --brand: #00fdff;
  --brand-deep: #07adb7;
  --brand-soft: #88dae2;
  /* One chart hue, validated against --surface (dataviz lightness band and 3:1 contrast). */
  --chart: #0aa3ad;
  --chart-wash: rgba(10, 163, 173, 0.12);
  --up: #2ebd85;
  --down: #f6465d;
  --warn: #e3b341;
  --grad: linear-gradient(180deg, #00fdff 0%, #88dae2 55%, #efeff0 100%);
  --grad-x: linear-gradient(90deg, #07adb7 0%, #00fdff 45%, #88dae2 100%);
  --glow: 0 0 0 1px rgba(0, 253, 255, 0.28), 0 8px 32px rgba(0, 253, 255, 0.18);
  --radius: 16px;
  --radius-sm: 10px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --nav-h: 64px;
  --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --sans: "Inter", ui-sans-serif, system-ui, "Segoe UI", sans-serif;
}

/* A class that sets display beats the hidden attribute, which once left an empty modal
   covering the page. One rule settles it for every element. */
[hidden] { display: none !important; }

/* One checkbox for every page: a rounded square in the panel colour that fills with the brand
   cyan and a dark tick when it is on, instead of the browser's white box. */
input[type="checkbox"] {
  -webkit-appearance: none; appearance: none; flex: 0 0 auto; width: 16px; height: 16px; margin: 0; padding: 0;
  border: 1.5px solid var(--line-3); border-radius: 5px; background: var(--surface-2) center / 11px 11px no-repeat;
  cursor: pointer; vertical-align: middle; transition: background-color 120ms, border-color 120ms, box-shadow 120ms;
}
input[type="checkbox"]:hover:not(:disabled) { border-color: rgba(0, 253, 255, 0.65); }
input[type="checkbox"]:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(0, 253, 255, 0.2); }
input[type="checkbox"]:checked {
  border-color: var(--brand); background-color: var(--brand);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23001314' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.6 6.3 5 8.6l4.5-5.1'/%3E%3C/svg%3E");
  box-shadow: 0 0 10px rgba(0, 253, 255, 0.25);
}
input[type="checkbox"]:disabled { opacity: 0.4; cursor: not-allowed; }

/* Number boxes never show the browser's up and down arrows; the ones that step draw their own. */
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

/* Scrollbars, on the page and in every scrolling panel: a slim, faint thumb with no track and no
   arrows, brighter under the pointer. Firefox has no ::-webkit-scrollbar and takes the standard pair. */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-thumb { border-radius: 999px; background: rgba(136, 218, 226, 0.16); }
::-webkit-scrollbar-thumb:hover { background: rgba(136, 218, 226, 0.34); }
::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
@supports not selector(::-webkit-scrollbar) {
  * { scrollbar-width: thin; scrollbar-color: rgba(136, 218, 226, 0.22) transparent; }
}

/* Hover notes: what a title says, drawn by ui.js in place of the browser's grey box. The card
   rises into place over what it explains (under it when there is no room), arrow pointing at it. */
@keyframes rise-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
/* Not ".hint": dialogs already use that name for their small print, which then floated. */
.hover-note {
  position: fixed; z-index: 150; max-width: 280px; padding: 7px 11px; border-radius: 9px;
  border: 1px solid var(--line-2); background: #0b1317; color: var(--text);
  font: 500 12px/1.45 var(--sans); letter-spacing: 0; text-align: left; white-space: normal; overflow-wrap: break-word;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  pointer-events: none; animation: rise-in 180ms var(--ease) both;
}
.hover-note::after {
  content: ""; position: absolute; left: var(--ax, 50%); top: 100%; width: 8px; height: 8px; margin: -4px 0 0 -4px;
  background: inherit; border: 1px solid var(--line-2); border-width: 0 1px 1px 0; transform: rotate(45deg);
}
.hover-note.below::after { top: 0; border-width: 1px 0 0 1px; }

/* ------------------------------------------------------------- buttons -- */

:where(.site, .term, .nav, .modal-backdrop, .toasts, .mobile-menu) .btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 20px; border-radius: 999px; border: 1px solid transparent;
  font-size: 14px; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap;
  cursor: pointer; overflow: hidden; isolation: isolate; user-select: none;
  transition: transform 180ms var(--ease), box-shadow 220ms var(--ease), background 180ms, border-color 180ms, color 180ms;
}
:where(.site, .term, .nav, .modal-backdrop, .toasts, .mobile-menu) .btn:active { transform: translateY(1px) scale(0.99); }
:where(.site, .term, .nav, .modal-backdrop, .toasts, .mobile-menu) .btn:disabled,
:where(.site, .term, .nav, .modal-backdrop, .toasts, .mobile-menu) .btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; transform: none; }
:where(.site, .term, .nav, .modal-backdrop, .toasts, .mobile-menu) .btn svg { width: 16px; height: 16px; flex: 0 0 auto; }
:where(.site, .term, .nav, .modal-backdrop, .toasts, .mobile-menu) .btn-sm { height: 34px; padding: 0 14px; font-size: 13px; }
:where(.site, .term, .nav, .modal-backdrop, .toasts, .mobile-menu) .btn-lg { height: 52px; padding: 0 28px; font-size: 15px; }
:where(.site, .term, .nav, .modal-backdrop, .toasts, .mobile-menu) .btn-block { width: 100%; }
:where(.site, .term, .nav, .modal-backdrop, .toasts, .mobile-menu) .btn-primary { background: var(--brand); color: #001314; box-shadow: 0 0 0 0 rgba(0, 253, 255, 0); }
:where(.site, .term, .nav, .modal-backdrop, .toasts, .mobile-menu) .btn-primary:hover:not(:disabled) { box-shadow: var(--glow); transform: translateY(-1px); background: #5ffeff; }
/* A light sweep across primary buttons on hover. */
:where(.site, .term, .nav, .modal-backdrop, .toasts, .mobile-menu) .btn-primary::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.55) 50%, transparent 70%);
  transform: translateX(-120%); transition: transform 700ms var(--ease);
}
:where(.site, .term, .nav, .modal-backdrop, .toasts, .mobile-menu) .btn-primary:hover::after { transform: translateX(120%); }
:where(.site, .term, .nav, .modal-backdrop, .toasts, .mobile-menu) .btn-ghost { background: rgba(255, 255, 255, 0.02); border-color: var(--line-2); color: var(--text); }
:where(.site, .term, .nav, .modal-backdrop, .toasts, .mobile-menu) .btn-ghost:hover:not(:disabled) { background: rgba(0, 253, 255, 0.06); border-color: var(--line-3); }
:where(.site, .term, .nav, .modal-backdrop, .toasts, .mobile-menu) .btn-quiet { background: transparent; color: var(--text-2); padding: 0 10px; }
:where(.site, .term, .nav, .modal-backdrop, .toasts, .mobile-menu) .btn-quiet:hover:not(:disabled) { color: var(--text); background: rgba(255, 255, 255, 0.04); }
:where(.site, .term, .nav, .modal-backdrop, .toasts, .mobile-menu) .btn-danger { background: rgba(246, 70, 93, 0.1); border-color: rgba(246, 70, 93, 0.35); color: #ff8a9a; }
:where(.site, .term, .nav, .modal-backdrop, .toasts, .mobile-menu) .btn .arrow { transition: transform 200ms var(--ease); }
:where(.site, .term, .nav, .modal-backdrop, .toasts, .mobile-menu) .btn:hover .arrow { transform: translateX(3px); }
:where(.site, .term, .nav, .modal-backdrop, .toasts, .mobile-menu) .btn.loading { color: transparent !important; pointer-events: none; }
:where(.site, .term, .nav, .modal-backdrop, .toasts, .mobile-menu) .btn.loading::before {
  content: ""; position: absolute; width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid currentColor; border-color: rgba(0, 19, 20, 0.35); border-top-color: #001314;
  animation: spin 700ms linear infinite; left: calc(50% - 8px); top: calc(50% - 8px);
}
:where(.site, .term, .nav, .modal-backdrop, .toasts, .mobile-menu) .btn-ghost.loading::before { border-color: rgba(239, 239, 240, 0.25); border-top-color: var(--text); }
@keyframes spin { to { transform: rotate(360deg); } }

:where(.site, .term, .nav, .modal-backdrop, .toasts, .mobile-menu) .icon-btn {
  display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 8px;
  border: 1px solid transparent; background: transparent; color: var(--muted); cursor: pointer;
  transition: color 150ms, background 150ms;
}
:where(.site, .term, .nav, .modal-backdrop, .toasts, .mobile-menu) .icon-btn:hover { color: var(--text); background: rgba(255, 255, 255, 0.05); }
:where(.site, .term, .nav, .modal-backdrop, .toasts, .mobile-menu) .icon-btn svg { width: 15px; height: 15px; }

/* -------------------------------------------------------------- badges -- */

:where(.site, .term, .nav, .modal-backdrop, .toasts, .mobile-menu) .pill {
  display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 999px;
  font-size: 12px; font-weight: 500; border: 1px solid var(--line-2); color: var(--text-2);
  background: rgba(255, 255, 255, 0.02); white-space: nowrap;
}
:where(.site, .term, .nav, .modal-backdrop, .toasts, .mobile-menu) .pill.brand { color: var(--brand); border-color: rgba(0, 253, 255, 0.3); background: rgba(0, 253, 255, 0.06); }
:where(.site, .term, .nav, .modal-backdrop, .toasts, .mobile-menu) .pill.ok { color: var(--up); border-color: rgba(46, 189, 133, 0.35); background: rgba(46, 189, 133, 0.07); }
:where(.site, .term, .nav, .modal-backdrop, .toasts, .mobile-menu) .pill.warn { color: var(--warn); border-color: rgba(227, 179, 65, 0.35); background: rgba(227, 179, 65, 0.07); }
:where(.site, .term, .nav, .modal-backdrop, .toasts, .mobile-menu) .pill.bad { color: var(--down); border-color: rgba(246, 70, 93, 0.35); background: rgba(246, 70, 93, 0.07); }
:where(.site, .term, .nav, .modal-backdrop, .toasts, .mobile-menu) .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: 0 0 auto; }
:where(.site, .term, .nav, .modal-backdrop, .toasts, .mobile-menu) .dot.live { box-shadow: 0 0 0 0 currentColor; animation: pulse 2s infinite; }
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 60%, transparent); }
  70% { box-shadow: 0 0 0 7px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* -------------------------------------------------------------- avatar -- */

:where(.site, .term, .nav, .modal-backdrop, .toasts, .mobile-menu) .avatar {
  --a: #07adb7; --b: #88dae2;
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; overflow: hidden;
  background: radial-gradient(circle at 30% 25%, var(--b), var(--a) 70%);
  color: #001314; font-weight: 800; font-size: 14px; letter-spacing: -0.03em;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18), 0 0 0 3px rgba(0, 0, 0, 0.6);
}
:where(.site, .term, .nav, .modal-backdrop, .toasts, .mobile-menu) .avatar img { width: 100%; height: 100%; object-fit: cover; }
:where(.site, .term, .nav, .modal-backdrop, .toasts, .mobile-menu) .avatar.sm { width: 28px; height: 28px; font-size: 11px; }
:where(.site, .term, .nav, .modal-backdrop, .toasts, .mobile-menu) .avatar.lg { width: 72px; height: 72px; font-size: 24px; }

/* ------------------------------------------------------------ skeleton -- */

:where(.site, .term, .nav, .modal-backdrop, .toasts, .mobile-menu) .skeleton {
  display: inline-block; height: 1em; width: 100%; max-width: 120px; border-radius: 6px; vertical-align: middle;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.04) 25%, rgba(255, 255, 255, 0.09) 37%, rgba(255, 255, 255, 0.04) 63%);
  background-size: 400% 100%; animation: shimmer 1.4s ease infinite;
}
@keyframes shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* ================================================================= NAV == */

.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--nav-h);
  display: flex; align-items: center; font: 14px/1.4 var(--sans); color: var(--text);
  transition: background 250ms, border-color 250ms, backdrop-filter 250ms;
  border-bottom: 1px solid transparent;
}
.nav *, .nav *::before, .nav *::after { box-sizing: border-box; }
.nav.scrolled, .nav.solid {
  background: rgba(0, 0, 0, 0.72); border-bottom-color: var(--line);
  backdrop-filter: saturate(160%) blur(16px); -webkit-backdrop-filter: saturate(160%) blur(16px);
}
.nav-inner { width: 100%; max-width: 1360px; margin: 0 auto; padding: 0 24px; display: flex; align-items: center; gap: 28px; }
.nav a { color: inherit; text-decoration: none; }
.nav-logo { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 17px; letter-spacing: -0.03em; }
.nav-logo img { width: 30px; height: 30px; border-radius: 8px; }
.nav-links { display: flex; align-items: center; gap: 4px; }
.nav-links a {
  position: relative; padding: 8px 12px; border-radius: 8px; color: var(--text-2); font-weight: 500; font-size: 14px;
  transition: color 150ms, background 150ms;
}
.nav-links a:hover { color: var(--text); background: rgba(255, 255, 255, 0.04); }
.nav-links a.active { color: var(--text); }
.nav-links a.active::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 2px; border-radius: 2px;
  background: var(--brand); box-shadow: 0 0 12px var(--brand);
}
.nav-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.nav .btn { height: 36px; padding: 0 16px; font-size: 13px; font-family: var(--sans); }
.nav-menu-btn { display: none; }

.enclave-pill {
  position: relative; display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px;
  border-radius: 999px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.02);
  font-size: 12px; color: var(--text-2); cursor: default; white-space: nowrap;
}
.enclave-pill .dot { color: var(--muted); }
.enclave-pill.ok .dot { color: var(--up); }
.enclave-pill.stale .dot { color: var(--warn); }
.enclave-pill.down .dot { color: var(--down); }
.enclave-pill .pop { right: 0; left: auto; width: 320px; }
.enclave-pill:hover .pop, .enclave-pill:focus-within .pop { display: block; }

.pop {
  display: none; position: absolute; top: calc(100% + 10px); left: 0; z-index: 60; padding: 14px;
  border-radius: 14px; border: 1px solid var(--line-2); background: #070b0d;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.7); font-size: 12.5px; color: var(--text-2); white-space: normal;
  animation: rise-in 180ms var(--ease);
}
@keyframes pop-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.pop .kv { display: flex; justify-content: space-between; gap: 16px; padding: 4px 0; }
.pop .kv strong { color: var(--text); font-weight: 500; text-align: right; overflow-wrap: anywhere; }
.pop p { margin: 8px 0 0; line-height: 1.5; }

.account { position: relative; }
.account-btn {
  display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px 0 4px; border-radius: 999px;
  border: 1px solid var(--line-2); background: rgba(255, 255, 255, 0.03); color: var(--text); cursor: pointer;
  font: 500 13px var(--sans);
}
.account-btn:hover { border-color: var(--line-3); }
.account-btn .avatar { width: 28px; height: 28px; font-size: 10px; }
.account-btn.low::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--warn); }
.account-menu { right: 0; left: auto; width: 360px; padding: 8px; }
.account.open .account-menu { display: block; }
.menu-section { padding: 10px; border-radius: 10px; }
.menu-section + .menu-section { border-top: 1px solid var(--line); border-radius: 0; }
.menu-label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 6px; }
.menu-address { display: flex; align-items: flex-start; gap: 6px; }
.menu-address code { font: 12px/1.5 var(--mono); color: var(--text); word-break: break-all; }
.menu-link {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 10px; border-radius: 8px;
  color: var(--text-2); cursor: pointer; background: none; border: 0; width: 100%; font: 500 13px var(--sans); text-align: left;
}
.menu-link:hover { background: rgba(255, 255, 255, 0.04); color: var(--text); }
.gas-line { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; }
.gas-line strong { font-variant-numeric: tabular-nums; }
.gas-warn { margin-top: 8px; padding: 8px 10px; border-radius: 8px; background: rgba(227, 179, 65, 0.08); color: var(--warn); font-size: 12px; }

.local-badge {
  font: 600 10px var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--warn);
  border: 1px solid rgba(227, 179, 65, 0.4); border-radius: 6px; padding: 2px 6px;
}

/* The trade terminal keeps its own full-height layout; its header is shorter and static. */
.nav.compact { position: relative; height: 48px; background: #05080a; border-bottom-color: var(--line); flex: 0 0 auto; }
.nav.compact .nav-inner { max-width: none; padding: 0 14px; gap: 20px; }
.nav.compact .nav-logo img { width: 24px; height: 24px; }
.nav.compact .nav-logo { font-size: 15px; }
.nav.compact .nav-links a { padding: 6px 10px; font-size: 13px; }
.nav.compact .nav-links a.active::after { bottom: -9px; }
.nav.compact .btn, .nav.compact .account-btn { height: 32px; }
.nav.compact .enclave-pill { height: 28px; }

.mobile-menu {
  position: fixed; inset: var(--nav-h) 0 auto 0; z-index: 49; padding: 12px 16px 20px;
  background: rgba(0, 0, 0, 0.94); backdrop-filter: blur(16px); border-bottom: 1px solid var(--line);
  display: grid; gap: 4px; animation: pop-in 180ms var(--ease); font: 15px var(--sans);
}
.mobile-menu a { padding: 12px; border-radius: 10px; color: var(--text); text-decoration: none; }
.mobile-menu a.active { background: rgba(0, 253, 255, 0.06); color: var(--brand); }

/* =============================================================== MODAL == */

.modal-backdrop {
  position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 16px;
  background: rgba(0, 0, 0, 0.66); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  animation: fade 180ms ease; font: 14px/1.5 var(--sans); color: var(--text);
}
.modal-backdrop *, .modal-backdrop *::before, .modal-backdrop *::after { box-sizing: border-box; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.modal {
  width: 100%; max-width: 420px; max-height: calc(100vh - 32px); overflow: auto; border-radius: 20px;
  border: 1px solid var(--line-2); background: #070b0d; padding: 22px; box-shadow: 0 40px 100px rgba(0, 0, 0, 0.8);
  animation: rise 260ms var(--ease);
}
@keyframes rise { from { opacity: 0; transform: translateY(14px) scale(0.98); } to { opacity: 1; transform: none; } }
.modal h3 { font-size: 18px; margin: 0; letter-spacing: -0.02em; }
.modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.wallet-list { display: grid; gap: 8px; }
.wallet-option {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border-radius: 14px;
  border: 1px solid var(--line); background: var(--surface); color: var(--text); cursor: pointer; text-align: left;
  font: 500 14px var(--sans); transition: border-color 150ms, background 150ms, transform 150ms;
}
.wallet-option:hover { border-color: rgba(0, 253, 255, 0.4); background: var(--surface-2); transform: translateY(-1px); }
.wallet-option img, .wallet-option .wicon { width: 32px; height: 32px; border-radius: 9px; flex: 0 0 auto; }
.wallet-option .wicon { display: grid; place-items: center; background: var(--surface-3); color: var(--brand); }
.wallet-option .wicon svg { width: 18px; height: 18px; }
.wallet-option small { display: block; color: var(--muted); font-size: 12px; font-weight: 400; }
.modal .note { margin-top: 14px; font-size: 12px; color: var(--muted); line-height: 1.5; }

/* ============================================================== TOASTS == */

.toasts { position: fixed; right: 16px; bottom: 16px; z-index: 120; display: grid; gap: 10px; width: min(380px, calc(100vw - 32px)); font: 13px/1.45 var(--sans); }
.toast {
  display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 10px; align-items: start;
  padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line-2); background: #070b0d; color: var(--text);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6); animation: toast-in 280ms var(--ease);
}
.toast.out { animation: toast-out 220ms ease forwards; }
@keyframes toast-in { from { opacity: 0; transform: translateY(12px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes toast-out { to { opacity: 0; transform: translateX(24px); } }
.toast .t-icon { width: 20px; height: 20px; display: grid; place-items: center; }
.toast .t-icon svg { width: 18px; height: 18px; }
.toast.pending .t-icon::before { content: ""; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--line-3); border-top-color: var(--brand); animation: spin 700ms linear infinite; }
.toast.ok .t-icon { color: var(--up); }
.toast.error .t-icon { color: var(--down); }
.toast.warn .t-icon { color: var(--warn); }
.toast strong { display: block; font-weight: 600; }
.toast span { color: var(--text-2); overflow-wrap: anywhere; }
.toast a { color: var(--brand); text-decoration: none; cursor: pointer; }
.toast button { background: none; border: 0; color: var(--muted); cursor: pointer; padding: 0 2px; font-size: 16px; line-height: 1; }

@media (max-width: 1080px) {
  .nav-links { display: none; }
  .nav-menu-btn { display: inline-grid; }
  .enclave-pill .label { display: none; }
}
@media (max-width: 640px) {
  .nav-inner { padding: 0 16px; gap: 12px; }
  .enclave-pill { display: none; }
  .nav .launch-btn { display: none; }
  .account-menu { position: fixed; top: calc(var(--nav-h) + 6px); right: 16px; left: 16px; width: auto; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
}